添加登录组件，优化导航逻辑，更新路由类型声明，调整样式和结构

components.d.ts

@@ -12,11 +12,15 @@ declare module 'vue' {
     DAside: typeof import('vue-devui/layout/index.es.js')['Aside']
     DAvatar: typeof import('vue-devui/avatar/index.es.js')['Avatar']
     DButton: typeof import('vue-devui/button/index.es.js')['Button']
+    DButtonGroup: typeof import('vue-devui/button-group/index.es.js')['ButtonGroup']
     DCard: typeof import('vue-devui/card/index.es.js')['Card']
     DContent: typeof import('vue-devui/layout/index.es.js')['Content']
+    DDropdown: typeof import('vue-devui/dropdown/index.es.js')['Dropdown']
+    DDropdownItem: typeof import('vue-devui/dropdown-item/index.es.js')['DropdownItem']
     DFooter: typeof import('vue-devui/layout/index.es.js')['Footer']
     DForm: typeof import('vue-devui/form/index.es.js')['Form']
     DFormItem: typeof import('vue-devui/form/index.es.js')['FormItem']
+    DHeader: typeof import('vue-devui/layout/index.es.js')['Header']
     DIcon: typeof import('vue-devui/icon/index.es.js')['Icon']
     DInput: typeof import('vue-devui/input/index.es.js')['Input']
     DLayout: typeof import('vue-devui/layout/index.es.js')['Layout']
@@ -28,7 +32,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']
     HomeSide: typeof import('./src/components/homeSide.vue')['default']
+    Login: typeof import('./src/components/Login.vue')['default']
     MenuH: typeof import('./src/components/menuH.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/App.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <PerfectScrollbar>
-      <!-- <login v-if="route.path == '/login'"></login> -->
-      <!-- <router-view></router-view> -->
        <lay-index></lay-index>
-       
     </PerfectScrollbar>
   </div>
 

src/Index.vue

@@ -1,8 +1,8 @@
 <template>
   <d-layout>
-    <!-- <d-header class="dheader-1"> -->
+    <d-header class="dheader-1">
       <menu-h />
-    <!-- </d-header> -->
+    </d-header>
     <d-content class="dcontent-1">
       <router-view />
     </d-content>
@@ -10,23 +10,13 @@
       <div class="beian" ref="footer">
         <a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
         <a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
-        <!-- <div class="flex text-[#409eff] text-[12px] ml-[20px]">
-          <div>今日访问：{{ ips?.todayIp }}</div>
-          <div class="ml-2">总访问：{{ ips?.allIp }}</div>
-        </div> -->
       </div>
     </d-footer>
   </d-layout>
 </template>
 
 <script setup lang="ts">
-// 空白项目入口
-// definePage({
-//   path:"/",
-// })
 const route = useRoute()
-
-
 </script>
 
 <style scoped>

src/components/Login.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="login-page w-[100vw] h-[100vh] relative">
+  <d-card class="mt-10 bg-[#ffffff60] rounded-[10px]" shadow="never">
-    <d-card class="w-120 !absolute top-[12%] right-8 bg-[#ffffff60] rounded-[10px]">
     <d-tabs v-model="tid" type="pills">
       <d-tab id="tab1" title="登录">
         <d-form ref="formLogin" layout="vertical" :data="loginData" :rules="rules">
@@ -33,18 +32,13 @@
       </d-tab>
     </d-tabs>
   </d-card>
-  </div>
 </template>
 
 <script setup lang="ts">
-definePage({
-  name:'login',
-  meta: {
-    title: '登录',
-  }
-})
-
 const router = useRouter()
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
 // 登录注册逻辑
 const tid = ref("tab1");
 const formLogin: any = ref(null);
@@ -96,7 +90,8 @@ function login() {
       $cookies.set('userinfo', res.data.userinfo, '1d')
       $msg.success(res.msg)
       usrLog.setIsLogin(true)
-      router.push({ path: "/" })
+      // router.push({ path: "/" })
+      emit("update:visible",false)
     }
   })
 
@@ -131,12 +126,6 @@ function validatePassword(rule: any, value: string, callback: Function) {
 </script>
 
 <style scoped lang="less">
-/* 登录页面样式 */
-.login-page {
-  background: transparent url("@/assets/images/05.jpeg") 0 0/cover no-repeat;
-
-}
-
 :deep(.devui-tabs__nav) {
   display: flex;
   justify-content: center;

src/components/menuH.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="nav" v-show="whiteList.includes(route.name)" class="main-nav flex justify-between bg-white">
+  <div ref="nav" class="main-nav flex justify-between bg-white">
     <!-- 网站Logo -->
     <div class="px-5 flex items-center" slot="brand" @click="goHome">
       <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
@@ -44,11 +44,35 @@
     </div>
 
     <div class="flex items-center mr-8">
-      <d-avatar v-if="userinfo" :img-src="userinfo.ava_url" @contextmenu="logout" class="cursor-pointer" alt="用户的头" />
+      <d-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" trigger="hover">
-      <d-avatar v-else class="cursor-pointer" @click="toLogin"></d-avatar>
+        <div class="flex items-center">
-      <div class="cursor-pointer ml-2 text-gray text-sm" v-if="userinfo">{{ userinfo.nickname }}</div>
+          <d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
-      <div class="cursor-pointer ml-2 text-gray text-sm" v-else @click="toLogin">登录</div>
+          <div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
         </div>
+        <template #menu>
+          <ul class="list-menu">
+            <!-- hover为淡粉色 -->
+            <li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="logout">
+              登出
+            </li>
+            <li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
+              控制台
+            </li>
+            <li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
+              设置
+            </li>
+          </ul>
+        </template>
+      </d-dropdown>
+      <div v-else class="flex items-center">
+        <d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
+        <div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
+      </div>
+    </div>
+    <!-- 登录弹窗 -->
+    <d-modal class="!w-120" v-model="visible">
+      <login-modal v-model:visible="visible"></login-modal>
+    </d-modal>
   </div>
 
 </template>
@@ -62,6 +86,7 @@ import homeSvg from '@/icon/menu/home.svg';
 import linkSvg from '@/icon/menu/link.svg';
 import picSvg from '@/icon/menu/pic.svg';
 import settingSvg from '@/icon/menu/setting.svg';
+import loginModal from '@/components/Login.vue'
 
 
 import { onMounted, ref, watch } from 'vue';
@@ -69,7 +94,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 
 const route = useRoute();
-
+const visible = ref(false);
 const router = useRouter();
 const key = ref("home");
 const locationInfo = ref("获取位置中...");
@@ -83,8 +108,6 @@ const userinfo: any = ref(null)
 const nav: any = useTemplateRef('nav')
 const navx = $store.nav.useNavStore()
 const usrLog = $store.log.useLogStore()
-// 白名单 
-const whiteList = ['home', 'appshare', 'plink', 'widget', 'gallery', 'article'];
 console.log('>>> --> route:', route)
 // 获取地理位置
 const getLocation = () => {
@@ -117,9 +140,9 @@ const getLocation = () => {
           break;
       }
       const res = await $http.mix.getIp();
-      latitude.value = res.data.lat;
+      latitude.value = Number(res.data.data.lat);
-      longitude.value = res.data.lon;
+      longitude.value = Number(res.data.data.lng);
-      const jw = `${longitude.value?.toFixed(2)},${latitude.value?.toFixed(2)}`;
+      const jw = `${longitude.value?.toFixed(4)},${latitude.value?.toFixed(4)}`;
 
       // 这里可以添加调用后端API获取具体位置名称的逻辑
       handdleJw(jw);
@@ -173,7 +196,7 @@ function toLogin() {
   console.log('>>> --> toLogin --> toLogin:', 'toLogin')
 
   if ($cookies.get('token')) return
-  router.push('/login');
+  visible.value = true
 }
 
 function logout() {
@@ -182,22 +205,6 @@ function logout() {
   $cookies.remove('userinfo');
   usrLog.setIsLogin(false)
   userinfo.value = null;
-  $modal({
-    title: "退出登录",
-    content: "返回首页吗？",
-    submitText: "去登录",
-    cancelText: "返回首页",
-    handdleSubmit: () => {
-      router.push('/login');
-    },
-    handdleCancel: () => {
-      if (route.name == 'home') return
-      router.push('/home');
-    }
-  })
-
-
-  // 
 }
 
 function gotoHf() {
@@ -214,7 +221,7 @@ onMounted(() => {
   getLocation(); // 组件挂载时获取位置
 
   const h: number = nav.value.clientHeight
-  navx.setNavH(h)
+  if (h > 0) navx.setNavH(h)
 
 
 
@@ -223,7 +230,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,18 +12,24 @@
             </template>
           </d-input>
         </div>
+        <!-- 标签组 -->
+        <div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 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">
+          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-12">
-            <d-card class="bg-[#ffffff80] h-25" v-for="(item, index) in navlist" :key="index"
+            <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">
                   <div :style="{ background: item.color }"
                     class="w-8 h-8 rounded-full text-white flex items-center justify-center" v-if="item.icon_error">
                     {{ item.first }}</div>
-                  <img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index)" />
+                  <img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index as number)" />
                   <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>
@@ -47,14 +53,16 @@
     <!-- 新增导航弹窗 -->
     <d-modal class="!w-120" v-model="visible" title="新增导航">
       <d-form ref="formNav" layout="vertical" :data="navData">
-        <d-form-item field="username">
+        <d-form-item class="h-8" field="username">
           <d-input @blur="getIcon" v-model="navData.menu_link" placeholder="请输入单行链接(必填)" />
-
         </d-form-item>
-        <d-form-item field="password">
+        <d-form-item class="h-8" field="password">
           <d-input v-model="navData.menu_name" placeholder="请输入导航名称(必填)" />
         </d-form-item>
-        <d-form-item class="form-operation-wrap">
+        <d-form-item class="h-8" field="tag">
+          <d-input v-model="navData.tag" placeholder="请自定义一个标签(必填，只取前四字)" />
+        </d-form-item>
+        <d-form-item class="h-8 form-operation-wrap">
           <div class="flex">
             <d-input v-model="navData.menu_icon" placeholder="请输入图标链接" />
             <img class="ml-5" v-if="navData.menu_icon" width="30" height="30" :src="navData.menu_icon" alt="">
@@ -62,7 +70,7 @@
           </div>
         </d-form-item>
       </d-form>
-      <div class="mt-10 w-full flex justify-between">
+      <div class="mt-14 w-full flex justify-between">
         <d-button @click="navCancel" variant="text" class="w-[49%] hover:bg-[#8a6684] hover:!text-white">取消</d-button>
         <span class="text-[20px]"> | </span>
         <d-button @click="navSubmit" variant="text" class="w-[49%] hover:bg-[#5c866a] hover:!text-white"
@@ -78,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { getDictValue } from '@/util/index.ts'
+import { deepclone, getDictValue } from '@/util/index.ts'
 
 definePage({
   name: 'home',
@@ -92,6 +100,7 @@ const visible: any = ref(false)
 const navData: any = reactive({
   menu_link: '',
   menu_name: '',
+  tag: '',
   menu_icon: ''
 })
 const formNav: any = ref(null)
@@ -127,8 +136,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 +157,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
 }
@@ -206,10 +271,11 @@ function navCancel() {
 
 async function navSubmit() {
   console.log('>>> --> navSubmit --> navData:', navData)
-  if (!navData.menu_link || !navData.menu_name) {
+  if (!navData.menu_link || !navData.menu_name || !navData.tag) {
-    $msg.error('请输入链接和名称')
+    $msg.error('请输入链接、标签和名称')
     return
   }
+  navData.tag = navData.tag.slice(0, 4)
   const res = await $http.nav.addNav(navData)
   console.log('>>> --> navSubmit --> res:', res)
 
@@ -219,9 +285,6 @@ async function navSubmit() {
     formNav.value.resetFields()
     getNavList()
   }
-
-
-
 }
 // 监听store的登录状态
 watch(() => usrLog.isLogin, (newVal) => {
@@ -236,14 +299,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>
 

typed-router.d.ts

@@ -23,7 +23,6 @@ declare module 'vue-router/auto-routes' {
     '/console/home': RouteRecordInfo<'/console/home', '/console/home', Record<never, never>, Record<never, never>>,
     'gallery': RouteRecordInfo<'gallery', '/Gallery', Record<never, never>, Record<never, never>>,
     'home': RouteRecordInfo<'home', '/Home', Record<never, never>, Record<never, never>>,
-    'login': RouteRecordInfo<'login', '/Login', Record<never, never>, Record<never, never>>,
     '404': RouteRecordInfo<'404', '/NotFound', Record<never, never>, Record<never, never>>,
     'plink': RouteRecordInfo<'plink', '/Plink', Record<never, never>, Record<never, never>>,
     'widget': RouteRecordInfo<'widget', '/Widget', Record<never, never>, Record<never, never>>,
@@ -60,10 +59,6 @@ declare module 'vue-router/auto-routes' {
       routes: 'home'
       views: never
     }
-    'src/views/Login.vue': {
-      routes: 'login'
-      views: never
-    }
     'src/views/NotFound.vue': {
       routes: '404'
       views: never

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