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

components/common/ApiChange.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const localePath = useLocalePath()
+const router = useRouter();
+</script>
+
+<template>
+        <div
+            class="cursor-pointer flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+            @click="router.push(localePath('/settings/api'))"
+        >
+          <Icon name="i-eos-icons:api-outlined" class=" text-lg dark:text-white" />
+        </div>
+</template>

components/common/AppPage.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps({
+  full: {
+    type: Boolean,
+    default: false,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
+    <transition name="fade-slide" mode="out-in" appear>
+      <main :class="{ 'flex-1': full }" class="m-12"><slot /></main>
+    </transition>
+    <slot v-if="$slots.footer" name="footer" />
+    <CommonTheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+    <n-back-top :bottom="20" />
+  </main>
+</template>
+
+<style scoped>
+
+</style>

components/common/DomainList.vue

@@ -15,16 +15,17 @@ const {t} = useI18n()
           <Icon name="mdi:about-circle-outline" class=" text-lg dark:text-white" />
         </div>
       </div>
-    <USlideover
-        v-model="isOpen"
-        side="left"
+    <NDrawer
+        v-model:show="isOpen"
+        placement="left"
+        :default-width="502"
+        resizable
     >
-      <button>
-      <Icon name="lets-icons:close-ring-light" class="absolute top-2 right-2 text-gray-500 cursor-pointer" @click="isOpen = false" />
-      </button>
-        <div class="p-4 flex-1">
-        <div>{{t('index.support')}}：</div>
-        <div class="flex flex-wrap mt-2 p-5 overflow-y-auto max-h-[95vh]">
+        <NDrawerContent
+            :title="t('index.support')"
+            closable
+        >
+        <div class="flex flex-wrap mt-2 ">
       <span
           v-for="item in SupportedTLDs"
           :key="item"
@@ -33,8 +34,8 @@ const {t} = useI18n()
         {{ item }}
       </span>
         </div>
-      </div>
-    </USlideover>
+      </NDrawerContent>
+    </NDrawer>
   </div>
 </template>
 

components/common/History.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import {useStyleStore} from "~/stores/style";
 
 const isOpen = ref(false)
-
 const styleStore = useStyleStore()
-
 const {t} = useI18n()
-const slideoverConfig = {
-  // 其他配置保持不变
-  width: 'w-screen max-w-2xl', // 更新这里的值
-  // 其余的配置...
-};
 
 </script>
 
@@ -25,18 +17,20 @@ const slideoverConfig = {
       </div>
     </div>
 
-    <USlideover
-        v-model="isOpen"
-        side="right"
-        :ui="slideoverConfig"
+    <NDrawer
+        v-model:show="isOpen"
+        placement="right"
+        :default-width="602"
+        resizable
     >
-      <button>
-        <Icon name="lets-icons:close-ring-light" class="absolute top-2 right-2 text-gray-500 cursor-pointer" @click="isOpen = false" />
-      </button>
-      <div class="w-full min-h-screen bg-gray-100 p-5 overflow-y-auto max-h-[95vh]">
+
+      <NDrawerContent
+          :title="t('history.title')"
+          class="w-full min-h-screen bg-gray-100 overflow-y-auto"
+          closable
+      >
         <div class="max-w-6xl mx-auto">
           <h1 class="text-2xl font-bold text-gray-800 mb-5 flex items-center justify-between">
-            {{ t('history.title') }}
             <span class="text-sm text-gray-500 bg-gray-100 py-1 px-3 rounded-full">
              {{ t('history.tips', { length: styleStore.getHistory.length }) }}
             </span>
@@ -44,7 +38,6 @@ const slideoverConfig = {
           <div class="bg-white shadow-md rounded-lg">
             <!-- 条件渲染，如果有历史记录则显示表格，否则显示提示 -->
             <div v-if="styleStore.getHistory.length">
-              <table class="min-w-full leading-normal">
                 <!-- 表格头部和内容 -->
                 <table class="min-w-full leading-normal">
                   <thead>
@@ -76,23 +69,22 @@ const slideoverConfig = {
                       {{ item.date }}
                     </td>
                     <td class="px-5 py-5 text-sm bg-white">
-                      <UButton
+                      <NButton
                           @click="styleStore.deleteHistory(item.id)"
-                          color="sky"
-                      >{{t('common.actions.delete')}}</UButton>
+
+                      >{{t('common.actions.delete')}}</NButton>
                     </td>
                   </tr>
                   </tbody>
                 </table>
-              </table>
             </div>
             <div v-else class="text-center py-5">
               <p class="text-gray-500">{{ t('history.empty') }}</p>
             </div>
           </div>
         </div>
-      </div>
-    </USlideover>
+      </NDrawerContent>
+    </NDrawer>
   </div>
 </template>
 

components/common/LayoutSetting.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// import { MeModal } from '@/components'
+const [modalRef] = useModal()
+</script>
+
+<template>
+  123
+  <div>
+    <n-tooltip trigger="hover" placement="left">
+      <template #trigger>
+        <IconSettings size="32"  @click="modalRef.open()" filled class="cursor-pointer text-32 color-primary" />
+      </template>
+      布局设置
+    </n-tooltip>
+    <MeModal
+        ref="modalRef"
+        title="布局设置"
+        :show-footer="false"
+        width="600px"
+        :modal-style="{ opacity: 0.85 }"
+    >
+      <n-space justify="space-between">
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('simple')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="60" />
+            </div>
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'simple' ? 'primary' : ''"
+              ghost
+          >
+            简约
+          </n-button>
+        </div>
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('normal')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="10" />
+              <n-skeleton class="mt-4" :width="80" :height="46" />
+            </div>
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'normal' ? 'primary' : ''"
+              ghost
+          >
+            通用
+          </n-button>
+        </div>
+
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('full')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="6" />
+              <n-skeleton class="mt-4" :width="80" :height="4" />
+              <n-skeleton class="mt-4" :width="80" :height="42" />
+            </div>
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'full' ? 'primary' : ''"
+              ghost
+          >
+            全面
+          </n-button>
+        </div>
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('empty')">
+          <div class="flex">
+            <n-skeleton :width="104" :height="60" />
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'empty' ? 'primary' : ''"
+              ghost
+          >
+            空白
+          </n-button>
+        </div>
+      </n-space>
+      <p class="mt-16 opacity-50">
+        注: 此设置仅对未设置layout或者设置成跟随系统的页面有效，菜单设置的layout优先级最高
+      </p>
+    </MeModal>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/common/TheFooter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <footer class="f-c-c text-14 text-gray-500">
+    <p>
+      Copyright © 2023
+      <a
+          href="https://github.com/zclzone"
+          target="__blank"
+          class="transition"
+          hover="decoration-underline color-primary"
+      >
+        Ronnie Zhang(大脸怪)
+      </a>
+    </p>
+  </footer>
+</template>
+
+<style scoped>
+
+</style>

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>

components/tab/list.vue

@@ -1,47 +1,89 @@
 <script setup lang="ts">
 const timeStore = useTimeStore()
 const settingsStore = useSettingsStore()
-const emit = defineEmits(['action'])
-
-const handleActionFromDnsList = (urlParam:string) => {
-  emit('action', urlParam)
-}
 const {t} = useI18n()
 </script>
 
 <template>
   <ClientOnly>
     <div class="flex justify-between w-full">
-      <div class="space-x-2">
+      <div class="flex space-x-2">
         <!-- 左边的新元素 -->
-        <UTooltip :text="t('popper.support')" :popper="{ placement: 'top' }">
-          <CommonDomainList  />
-        </UTooltip>
+        <n-tooltip
+            v-if="settingsStore.isDomainList"
+            trigger="hover" placement="top">
+          <template #trigger>
+            <CommonDomainList/>
+          </template>
+          <span>{{ t('popper.support') }}</span>
+        </n-tooltip>
 
-        <UTooltip
+        <n-tooltip
             v-if="settingsStore.getHistory"
-            :text="t('popper.history')" :popper="{ placement: 'top' }">
-          <CommonHistory  />
-        </UTooltip>
+            trigger="hover" placement="top">
+          <template #trigger>
+            <CommonHistory/>
+          </template>
+          <span>{{ t('popper.history') }}</span>
+        </n-tooltip>
+
+        <!--        <n-tooltip-->
+        <!--            v-if="settingsStore.getHistory"-->
+        <!--            trigger="hover" placement="top" >-->
+        <!--          <template #trigger>-->
+        <!--            <CommonDnsList @action="handleActionFromDnsList" />-->
+        <!--          </template>-->
+        <!--          <span>{{t('popper.dns')}}</span>-->
+        <!--        </n-tooltip>-->
 
-        <UTooltip :text="t('popper.dns')" :popper="{ placement: 'top' }">
-          <CommonDnsList @action="handleActionFromDnsList" />
-        </UTooltip>
       </div>
       <div class="flex space-x-2">
         <!-- 右边的现有元素 -->
-        <UTooltip :text="t('popper.setting')" :popper="{ placement: 'top' }">
-          <CommonSettingsChange />
-        </UTooltip>
-        <UTooltip :text="timeStore.timeZones" :popper="{ placement: 'top' }">
-          <CommonTimeZonesChange />
-        </UTooltip>
-        <UTooltip :text="t('popper.theme')" :popper="{ placement: 'top' }">
-          <CommonColorChange />
-        </UTooltip>
-        <UTooltip :text="t('popper.language')" :popper="{ placement: 'top' }">
-          <CommonLanguageChange />
-        </UTooltip>
+        <n-tooltip
+            trigger="hover"
+            placement="top">
+          <template #trigger>
+            <CommonSettingsChange/>
+          </template>
+          <span>{{ t('popper.setting') }}</span>
+        </n-tooltip>
+
+        <n-tooltip
+            trigger="hover"
+            placement="top">
+          <template #trigger>
+            <CommonApiChange/>
+          </template>
+          <span>第三方APi</span>
+        </n-tooltip>
+
+        <n-tooltip
+            trigger="hover"
+            placement="top">
+          <template #trigger>
+            <CommonTimeZonesChange/>
+          </template>
+          <span>{{ timeStore.timeZones }}</span>
+        </n-tooltip>
+
+        <n-tooltip
+            trigger="hover"
+            placement="top">
+          <template #trigger>
+            <CommonColorChange/>
+          </template>
+          <span>{{ t('popper.theme') }}</span>
+        </n-tooltip>
+
+        <n-tooltip
+            trigger="hover"
+            placement="top">
+          <template #trigger>
+            <CommonLanguageChange/>
+          </template>
+          <span>{{ t('popper.language') }}</span>
+        </n-tooltip>
+
       </div>
     </div>
   </ClientOnly>