🚩 增加Dns功能 优化性能

components/common/DnsList.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['action'])
+
+const handleClick = () => {
+  const urlParam = 'dns' // 这里是你想传递给handleAction方法的参数
+  emit('action', urlParam)
+}
+</script>
+
+<template>
+  <div>
+    <div title="Change Color">
+      <div
+          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+          @click="handleClick"
+      >
+        <Icon name="eos-icons:dns" class=" text-lg dark:text-white" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/common/DomainList.vue

@@ -9,7 +9,7 @@ const isOpen = ref(false)
   <div>
       <div title="Change Color">
         <div
-            class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+            class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
             @click="isOpen = true"
         >
           <Icon name="mdi:about-circle-outline" class=" text-lg dark:text-white" />

components/tab/list.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const timeStore = useTimeStore()
+const emit = defineEmits(['action'])
+
+const handleActionFromDnsList = (urlParam:string) => {
+  emit('action', urlParam)
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="flex justify-between w-full">
+      <div>
+        <!-- 左边的新元素 -->
+        <UTooltip text="支持列表" :popper="{ placement: 'top' }">
+          <CommonDomainList  />
+        </UTooltip>
+
+        <UTooltip text="Dns查询" :popper="{ placement: 'top' }">
+          <CommonDnsList @action="handleActionFromDnsList" />
+        </UTooltip>
+      </div>
+      <div class="flex space-x-2">
+        <!-- 右边的现有元素 -->
+        <UTooltip :text="timeStore.timeZones" :popper="{ placement: 'top' }">
+          <CommonTimeZonesChange />
+        </UTooltip>
+        <UTooltip text="主题模式" :popper="{ placement: 'top' }">
+          <CommonColorChange />
+        </UTooltip>
+        <UTooltip text="切换语言" :popper="{ placement: 'top' }">
+          <CommonLanguageChange />
+        </UTooltip>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+
+<style scoped>
+
+</style>