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

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-avatar v-else class="cursor-pointer" @click="toLogin"></d-avatar>
-      <div class="cursor-pointer ml-2 text-gray text-sm" v-if="userinfo">{{ userinfo.nickname }}</div>
-      <div class="cursor-pointer ml-2 text-gray text-sm" v-else @click="toLogin">登录</div>
+      <d-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" trigger="hover">
+        <div class="flex items-center">
+          <d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
+          <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 = () => {
@@ -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
-  if(h>0) navx.setNavH(h)
+  if (h > 0) navx.setNavH(h)
 
 
 
@@ -225,7 +232,7 @@ onBeforeUpdate(() => {
   const h: number = nav.value.clientHeight
   // console.log('******>>> --> nav.value:', nav.value)
   // console.log('()()()()()>>> --> h:', h)
-  if(h>0) navx.setNavH(h)
+  if (h > 0) navx.setNavH(h)
 })
 
 </script>