优化组件类型声明，添加视频播放功能，更新依赖项，重构多个组件，改进路由配置及页面元信息

src/components/menuH.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="nav" class="main-nav flex justify-between bg-white">
+  <div ref="nav" v-show="whiteList.includes(route.name)" 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" />
@@ -43,9 +43,11 @@
       <span class="weather-info ml-4">{{ temp }}°C</span>
     </div>
 
-    <div class="flex items-center ">
-      <d-avatar v-if="userinfo" :img-src="userinfo.ava_url" class="ml-10 mr-4 cursor-pointer" alt="用户的头" />
-      <d-avatar v-else class="ml-10 mr-4 cursor-pointer" @click="toLogin"></d-avatar>
+    <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>
     </div>
   </div>
 
@@ -67,6 +69,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 
 const route = useRoute();
+
 const router = useRouter();
 const key = ref("home");
 const locationInfo = ref("获取位置中...");
@@ -79,6 +82,10 @@ const temp = ref<number>(0);
 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 = () => {
   if (!navigator.geolocation) {
@@ -159,23 +166,47 @@ watch(() => route.name, (newVal) => {
 
 function goHome() {
   if (route.name == 'home') return
-  router.push({ name: 'home' });
+  router.push('/home');
 }
 
 function toLogin() {
   console.log('>>> --> toLogin --> toLogin:', 'toLogin')
-  
+
   if ($cookies.get('token')) return
   router.push('/login');
 }
 
-function gotoHf(){
+function logout() {
+  console.log('>>> --> logout --> logout:', 'logout')
+  $cookies.remove('token');
+  $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() {
   console.log('>>> --> gotoHf --> fxlink:', fxlink)
-  window.open(fxlink.value,"_BLACK")
-  
+  window.open(fxlink.value, "_BLACK")
+
 }
 onMounted(() => {
- 
+
   userinfo.value = $cookies.get('userinfo');
   console.log('>>>>>>>>>>', userinfo.value);
   key.value = route.name as string;
@@ -188,6 +219,12 @@ onMounted(() => {
 
 
 });
+onBeforeUpdate(() => {
+  userinfo.value = $cookies.get('userinfo');
+  key.value = route.name as string;
+  const h: number = nav.value.clientHeight
+  navx.setNavH(h)
+})
 
 </script>
 
@@ -196,6 +233,7 @@ onMounted(() => {
   box-shadow: 0 1px 15px 0 @primary;
   margin-bottom: 1px;
 }
+
 :deep(.devui-menu-horizontal .devui-menu-item:hover span .icon) {
   color: var(--devui-brand, #5e7ce0) !important;
   fill: var(--devui-brand, #5e7ce0) !important;