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

components.d.ts

@@ -28,6 +28,9 @@ declare module 'vue' {
     DSelect: typeof import('vue-devui/select/index.es.js')['Select']
     DTab: typeof import('vue-devui/tabs/index.es.js')['Tab']
     DTabs: typeof import('vue-devui/tabs/index.es.js')['Tabs']
+    DTag: typeof import('vue-devui/tag/index.es.js')['Tag']
+    DTagGroup: typeof import('vue-devui/tag-group/index.es.js')['TagGroup']
+    DTags: typeof import('vue-devui/tags/index.es.js')['Tags']
     HomeSide: typeof import('./src/components/homeSide.vue')['default']
     MenuH: typeof import('./src/components/menuH.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/menuH.vue

@@ -117,9 +117,9 @@ const getLocation = () => {
           break;
       }
       const res = await $http.mix.getIp();
-      latitude.value = res.data.lat;
-      longitude.value = res.data.lon;
-      const jw = `${longitude.value?.toFixed(2)},${latitude.value?.toFixed(2)}`;
+      latitude.value = Number(res.data.data.lat);
+      longitude.value = Number(res.data.data.lng);
+      const jw = `${longitude.value?.toFixed(4)},${latitude.value?.toFixed(4)}`;
 
       // 这里可以添加调用后端API获取具体位置名称的逻辑
       handdleJw(jw);
@@ -214,7 +214,7 @@ onMounted(() => {
   getLocation(); // 组件挂载时获取位置
 
   const h: number = nav.value.clientHeight
-  navx.setNavH(h)
+  if(h>0) navx.setNavH(h)
 
 
 
@@ -223,7 +223,9 @@ onBeforeUpdate(() => {
   userinfo.value = $cookies.get('userinfo');
   key.value = route.name as string;
   const h: number = nav.value.clientHeight
-  navx.setNavH(h)
+  // console.log('******>>> --> nav.value:', nav.value)
+  // console.log('()()()()()>>> --> h:', h)
+  if(h>0) navx.setNavH(h)
 })
 
 </script>

src/stores/nav.ts

@@ -1,5 +1,5 @@
 export const useNavStore = defineStore('nav', () => {
-  const navH:Ref<number,number> = ref(0)
+  const navH:Ref<number,number> = ref(56)
 
   function setNavH(v:number) {
     navH.value = v

src/util/index.ts

@@ -159,3 +159,5 @@ export function resetObject<T extends Record<string, any>>(obj: T): void {
     (obj as Record<string, any>)[key] = null;
   });
 }
+
+

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,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import { getDictValue } from '@/util/index.ts'
+import { deepclone, getDictValue } from '@/util/index.ts'
 
 definePage({
   name: 'home',
@@ -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
 }
@@ -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>
 

vite.config.ts

@@ -8,7 +8,7 @@ import Components from "unplugin-vue-components/vite";
 import { VueRouterAutoImports } from 'unplugin-vue-router';
 import VueRouter from 'unplugin-vue-router/vite';
 import { defineConfig } from "vite";
-import vueDevTools from "vite-plugin-vue-devtools";
+// import vueDevTools from "vite-plugin-vue-devtools";
 import svgLoader from "vite-svg-loader";
 // https://vite.dev/config/
 export default defineConfig({
@@ -29,7 +29,7 @@ export default defineConfig({
     }),
     UnoCSS(),
     svgLoader(),
-    vueDevTools(),
+    // vueDevTools(),
   ],
   esbuild: {
     pure: ["console.log"], // 删除 console.log