From 192357af7905781e3c7973be2120c0c796573fe5 Mon Sep 17 00:00:00 2001
From: youzi <2410633923@qq.com>
Date: Tue, 23 Dec 2025 11:14:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=87=E7=AD=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=A3=B0=E6=98=8E=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AF=BC=E8=88=AA=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts          |  3 ++
 src/components/menuH.vue | 12 +++---
 src/stores/nav.ts        |  2 +-
 src/util/index.ts        |  2 +
 src/views/Home.vue       | 87 ++++++++++++++++++++++++++++++++++++----
 vite.config.ts           |  4 +-
 6 files changed, 94 insertions(+), 16 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 0356d63..c786e6f 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/components/menuH.vue b/src/components/menuH.vue
index 80e71ad..c546d80 100644
--- a/src/components/menuH.vue
+++ b/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>
diff --git a/src/stores/nav.ts b/src/stores/nav.ts
index 4b74f07..154541b 100644
--- a/src/stores/nav.ts
+++ b/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
diff --git a/src/util/index.ts b/src/util/index.ts
index ed5e714..e56c2eb 100644
--- a/src/util/index.ts
+++ b/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;
   });
 }
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1eea199..7ccc7a6 100644
--- a/src/views/Home.vue
+++ b/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>
 
diff --git a/vite.config.ts b/vite.config.ts
index a933c57..d3206d6 100644
--- a/vite.config.ts
+++ b/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