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

src/App.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
     <PerfectScrollbar>
+      <!-- <login v-if="route.path == '/login'"></login> -->
       <!-- <router-view></router-view> -->
        <lay-index></lay-index>
+       
     </PerfectScrollbar>
   </div>
 
@@ -10,10 +12,10 @@
     {{ modal.content }}
     <div class="mt-10 w-full flex justify-between">
       <d-button @click="modal.handdleCancel" variant="text"
-        class="w-[49%] hover:bg-[#8a6684] hover:!text-white">取消</d-button>
+        class="w-[49%] hover:bg-[#8a6684] hover:!text-white">{{modal.cancelText}}</d-button>
       <span class="text-[20px]"> | </span>
       <d-button @click="modal.handdleSubmit" variant="text" class="w-[49%] hover:bg-[#5c866a] hover:!text-white"
-        color="primary">确定</d-button>
+        color="primary">{{modal.submitText}}</d-button>
     </div>
   </d-modal>
 </template>
@@ -21,6 +23,8 @@
 <script setup lang="ts">
 import layIndex from './Index.vue'
 // 空白项目入口
+const route = useRoute()
+
 const modal = reactive<any>({
   visible: false,
   title: "",
@@ -30,10 +34,16 @@ const modal = reactive<any>({
 })
 
 function comemodal(mv: any) {
+  if (!mv) return
   modal.visible = true
   modal.title = mv.title
   modal.content = mv.content
-  if (mv.handdleCancel) modal.handdleCancel = mv.handdleCancel
+  modal.cancelText = mv.cancelText || "取消"
+  modal.submitText = mv.submitText || "确定"
+  if (mv.handdleCancel)  modal.handdleCancel = () => {
+    mv.handdleCancel()
+    modal.visible = false
+  }
   modal.handdleSubmit = () => {
     mv.handdleSubmit()
     modal.visible = false
@@ -42,6 +52,11 @@ function comemodal(mv: any) {
 
 window.$modal = comemodal
 
+// 全局禁用右键菜单
+document.oncontextmenu = function () {
+  return false;
+};
+
 onMounted(() => {
 
 })

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>

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;

src/main.ts

@@ -10,6 +10,9 @@ import router from "./router";
 import { ThemeServiceInit, infinityTheme, sweetTheme } from "devui-theme";
 
 import { PerfectScrollbarPlugin } from "vue3-perfect-scrollbar";
+// import vue3videoPlay from "vue3-video-play";
+// import "vue3-video-play/dist/style.css";
+
 
 // ThemeServiceInit({ customTheme }, "customTheme");
 const themeService = ThemeServiceInit({ infinityTheme }, "infinityTheme");
@@ -27,3 +30,4 @@ for (const key in icon) {
 }
 app.use(PerfectScrollbarPlugin);
 app.mount("#app");
+

src/stores/log.ts

@@ -0,0 +1,10 @@
+export const useLogStore = defineStore('log', () => {
+  // 登录状态
+  const isLogin:Ref<boolean,boolean> = ref(false)
+  
+  function setIsLogin(v:boolean) {
+    isLogin.value = v
+  }
+  
+  return { isLogin, setIsLogin }
+})

src/views/Home.vue

@@ -129,7 +129,7 @@ const options = ref([
 
 // 图片数据
 const navlist: any = ref([])
-
+const usrLog = $store.log.useLogStore()
 async function getNavList() {
   const res = await $http.nav.getNavList()
   res.data?.forEach((i: any) => {
@@ -223,6 +223,16 @@ async function navSubmit() {
 
 
 }
+// 监听store的登录状态
+watch(() => usrLog.isLogin, (newVal) => {
+  console.log('********** --> watch --> newVal:', newVal)
+  if (newVal) {
+    getNavList()
+  }else {
+    navlist.value = []
+  }
+})
+
 
 
 onMounted(() => {

src/views/Login.vue

@@ -60,6 +60,7 @@ const regData = reactive({
   nickname: ""
 });
 
+const usrLog = $store.log.useLogStore()
 
 const rules: any = reactive({
   username: [
@@ -72,8 +73,7 @@ const rules: any = reactive({
   ]
 })
 const rrules: any = reactive({
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
+  username: [ 
     { validator: validateUsername, trigger: 'blur' },
   ],
   password: [
@@ -82,7 +82,8 @@ const rrules: any = reactive({
   ]
 })
 function login() {
-  formLogin.value.validate(async (is: boolean,b: any) => {
+  console.log('>>> --> login --> formLogin.value:', usrLog.isLogin)
+    formLogin.value.validate(async (is: boolean,b: any) => {
     if (!is) {
       $msg.error('信息填写不正确，请检查后再提交')
     } else {
@@ -94,9 +95,11 @@ function login() {
       $cookies.set('token', res.data.token, '1d')
       $cookies.set('userinfo', res.data.userinfo, '1d')
       $msg.success(res.msg)
+      usrLog.setIsLogin(true)
       router.push({ path: "/" })
     }
   })
+  
 }
 function register() {
   formReg.value.validate(async (is: boolean,b: any) => {

src/views/Widget.vue

@@ -1,13 +1,29 @@
 <template>
   <div class="widget-page">
     <h1>工具页</h1>
-    <!-- 工具内容 -->
+
+    <d-card class="w-1/3 bg-[#ffffff60] rounded-[10px]" shadow="hover">
+      <template #title>
+        <div class="flex items-center">
+          <icon-widget class="w-5 mr-2"></icon-widget>
+          视频工具
+        </div>
+      </template>
+      <template #content>
+        <div class="p-4">
+          <vue3VideoPlay class="w-full" title="钢铁侠" src="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4" />
+        </div>
+      </template>
+
+    </d-card>
+
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="js">
+
 definePage({
-  name:'widget',
+  name: 'widget',
   meta: {
     title: '工具',
   }

src/views/console/home.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    这里是控制台首页
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+
+//mark method
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped lang="less">
+
+</style>