💥 破坏性更新 咱不推荐更新

components/dns/ApiChanges.vue

@@ -1,29 +1,24 @@
 <script lang="ts" setup>
-import {useTimeStore} from "~/stores/time";
-
 const switchLocalePath = useSwitchLocalePath()
 const timeStore = useTimeStore()
+const settingsStore = useSettingsStore()
 
-const availableDns = [
-  { iso: '', name: '本地 DNS', flag: 'material-symbols:dns-outline' },
-  { iso: 'google', name: 'Google', flag: 'flat-color-icons:google' },
-  { iso: 'aliyun', name: 'AliYun', flag: 'ant-design:aliyun-outlined' },
-  { iso: 'tencent', name: 'Tencent', flag: 'emojione:cloud' },
-  { iso: 'cloudflare', name: 'CloudFlare', flag: 'skill-icons:cloudflare-light' },
-  // 添加更多语言...
-]
+const dnsStore = useDnsStore()
 
-const handlePost = async (iso: string) => {
-  timeStore.setDnsServer(iso)
+const {newsDnsArr} = storeToRefs(dnsStore)
+
+const handlePost = async (name: string) => {
+  dnsStore.moveToTop(name)
   //刷新数据
   await refreshNuxtData('dns')
 }
+
 </script>
 
 <template>
   <div>
     <HeadlessListbox
-        v-model="timeStore.getDnsServer"
+        v-model="dnsStore.newsDnsArr"
         as="div"
         class="relative flex items-center"
     >
@@ -34,29 +29,33 @@ const handlePost = async (iso: string) => {
         <div
             class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
         >
-          <Icon name="gg:select-o" class=" text-lg dark:text-white" size="20" />
+          <Icon name="gg:select-o" class=" text-lg dark:text-white" size="20"/>
         </div>
       </HeadlessListboxButton>
+
       <HeadlessListboxOptions
           class="absolute top-full right-0 z-[999] mt-2 w-40 overflow-hidden rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
       >
         <div
-            v-for="lang in availableDns"
-            :key="lang.iso"
-            @click="handlePost(lang.iso)"
-            class="flex w-full cursor-pointer items-center justify-between py-2 px-3"
+            v-for="lang in newsDnsArr"
+            :key="lang.name"
+            @click="handlePost(lang.name)"
             :class="{
-            'text-white-500 bg-gray-200 dark:bg-gray-500/50':
-              timeStore.getDnsServer === lang.iso,
-            'hover:bg-gray-200 dark:hover:bg-gray-700/30':
-              timeStore.getDnsServer !== lang.iso,
+            'flex w-full cursor-pointer items-center justify-between py-2 px-3 text-white-500 bg-gray-200 dark:bg-gray-500/50':
+              dnsStore.getFirstNewDnsShown.name === lang.name && lang.show,
+            'flex w-full cursor-pointer items-center justify-between py-2 px-3 hover:bg-gray-200 dark:hover:bg-gray-700/30':
+              dnsStore.getFirstNewDnsShown.name !== lang.name  && lang.show,
           }"
         >
-          <span class="truncate">
-            {{ lang.name }}
+          <span
+              v-if="lang.show"
+              class="truncate">
+            {{ lang.iName }}
           </span>
-          <span class="flex items-center justify-center text-sm">
-             <Icon :name="lang.flag" class="text-base" size="20" />
+          <span
+              v-if="lang.show"
+              class="flex items-center justify-center text-sm">
+             <Icon :name="lang.flag" class="text-base" size="20"/>
           </span>
         </div>
       </HeadlessListboxOptions>