添加标签组件类型声明，优化导航组件逻辑，更新样式，调整配置文件

src/views/Home.vue

@@ -12,10 +12,15 @@
             </template>
           </d-input>
         </div>
+        <!-- 标签组 -->
+        <div v-if="navlist.length" class="flex gap-6 px-12 my-6 overflow-x-auto">
+          <d-tag hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color"
+            @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
+        </div>
         <!-- 图片网格展示区域 -->
         <PerfectScrollbar class="" :style="navStyle">
-          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6 p-12">
-            <d-card class="bg-[#ffffff80] h-25" v-for="(item, index) in navlist" :key="index"
+          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pb-6 px-12">
+            <d-card class="bg-[#ffffff80] h-24" v-for="(item, index) in navlist" :key="index"
               @click="goExtra(item.menu_link)">
               <template #content>
                 <div class="mt-1 w-full flex flex-col items-center cursor-pointer hover:!text-primary">
@@ -24,6 +29,7 @@
                     {{ item.first }}</div>
                   <img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index)" />
                   <div class="mt-2 w-full text-center text-lg truncate">{{ item.menu_name || "" }}</div>
+                  <em class="absolute rounded-md top-0 left-0 px-2  text-white text-center text-sm" :style="{ background: getItemColor(item) }">{{ item.tag }}</em>
                 </div>
               </template>
             </d-card>
@@ -78,10 +84,10 @@
 </template>
 
 <script setup lang="ts">
-import { getDictValue } from '@/util/index.ts'
+import { deepclone, getDictValue } from '@/util/index.ts'
 
 definePage({
-  name:'home',
+  name: 'home',
   meta: {
     title: '首页',
   }
@@ -127,8 +133,18 @@ const options = ref([
 
 ])
 
-// 图片数据
+
 const navlist: any = ref([])
+let cloneNavlist: any = []
+const tagList: any = ref([
+  {
+    name: '全部',
+    color: '',
+    checked: true
+  }
+])
+
+
 const usrLog = $store.log.useLogStore()
 async function getNavList() {
   const res = await $http.nav.getNavList()
@@ -138,9 +154,55 @@ async function getNavList() {
     i.color = getRandomDarkColor()
   });
   navlist.value = res.data
+
   console.log("&&&&&&&&&&&&&&", navlist.value);
+  res.data.forEach((i: any) => {
+    if (!tagList.value.find((t: any) => t.name == i.tag))
+      tagList.value.push({ name: i.tag, color: getRandomDarkColor(30, 128), checked: false })
+  })
+  cloneNavlist = deepclone(res.data)
 }
 
+function getItemColor(item: any) {
+  const tag = tagList.value.find((t: any) => t.name == item.tag)
+  return tag ? tag.color : getRandomDarkColor(30, 128)
+}
+
+
+function handdleTagClick(tag: any) {
+  tag.checked = !tag.checked
+  if (tag.name == '全部') {
+    // 全部标签被点击，重置其他标签状态
+    tagList.value.forEach((t: any) => {
+      if (t.name !== '全部') {
+        t.checked = false
+      }
+    })
+    // navlist.value = cloneNavlist
+    navlist.value = cloneNavlist
+    return
+  } else {
+    // 其他标签被点击，取消“全部”标签状态
+    const allTag = tagList.value.find((t: any) => t.name == '全部')
+    if (allTag) allTag.checked = false
+  }
+
+  const selectedTags = tagList.value.filter((t: any) => t.checked && t.name !== '全部').map((t: any) => t.name)
+
+  if (selectedTags.length === 0) {
+    // 如果没有选中任何标签，默认选中“全部”
+    const allTag = tagList.value.find((t: any) => t.name == '全部')
+    if (allTag) allTag.checked = true
+    // 数据从cloneNavlist中过滤
+    navlist.value = cloneNavlist
+    return
+  }
+  console.log('>>> --> handdleTagClick --> selectedTags:', selectedTags)
+  // 根据选中的标签过滤导航列表
+  navlist.value = cloneNavlist.filter((item: any) => selectedTags.includes(item.tag))
+}
+
+
 function imgErr(index: number) {
   navlist.value[index].icon_error = true
 }
@@ -228,7 +290,7 @@ watch(() => usrLog.isLogin, (newVal) => {
   console.log('********** --> watch --> newVal:', newVal)
   if (newVal) {
     getNavList()
-  }else {
+  } else {
     navlist.value = []
   }
 })
@@ -236,14 +298,23 @@ watch(() => usrLog.isLogin, (newVal) => {
 
 
 onMounted(() => {
-  // console.log("&&&&&&&&&&&&&&", nav.navH);
+  console.log("&&&&&&&&&&&&&&", nav.navH);
   contentStyle.value = {
     height: `calc(100vh - ${nav.navH}px)`
   }
   navStyle.value = {
-    height: `calc(100vh - ${nav.navH}px - 110px)`
+    height: `calc(100vh - ${nav.navH}px - 153px)`
   }
+  tagList.value = [
+    {
+      name: '全部',
+      color: getRandomDarkColor(30, 128),
+      checked: true
+    }
+  ]
   getNavList()
+
+
 })
 </script>