导航栏/菜单栏显示逻辑修改

frontend/src/layouts/LayoutTransverse/index.vue

@@ -11,7 +11,7 @@
         />
         <span class="logo-text">{{ title }}</span>
       </div>
-      <el-menu trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
+      <el-menu v-if="showMenuFlag" trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
         <!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
         <template v-for="subItem in menuList" :key="subItem.path">
           <el-sub-menu
@@ -62,6 +62,7 @@ const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const menuList = computed(() => authStore.showMenuListGet);
+const showMenuFlag=computed(()=>authStore.showMenuFlagGet)
 const activeMenu = computed(
   () => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string
 );

frontend/src/layouts/components/Header/components/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dropdown trigger="click">
-    <div class="userInfo">
+    <div class="userInfo">  
       <div class="icon">
         <Icon><Avatar /></Icon>
       </div>
@@ -16,7 +16,7 @@
         <el-dropdown-item @click="openDialog('passwordRef')">
           <el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
         </el-dropdown-item>
-        <el-dropdown-item @click="openDialog('passwordRef')">
+        <el-dropdown-item @click="changeMode">
           <el-icon><Edit /></el-icon>{{ $t("header.changeMode") }}
         </el-dropdown-item>
       </el-dropdown-menu>
@@ -48,10 +48,11 @@ import SearchMenu from "./components/SearchMenu.vue";
 import ThemeSetting from "./components/ThemeSetting.vue";
 import Message from "./components/Message.vue";
 import Fullscreen from "./components/Fullscreen.vue";
+import { useAuthStore } from "@/stores/modules/auth";
 const userStore = useUserStore();
 const username = computed(() => userStore.userInfo.name);
 const router = useRouter();
-
+const authStore = useAuthStore();
 // 退出登录
 const logout = () => {
   ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
@@ -61,12 +62,12 @@ const logout = () => {
   }).then(async () => {
     // 1.执行退出登录接口
     await logoutApi();
-
     // 2.清除 Token
     userStore.setToken("");
-
     // 3.重定向到登陆页
     router.replace(LOGIN_URL);
+    //重置菜单/导航栏权限
+    authStore.resetAuthStore();
     ElMessage.success("退出登录成功！");
   });
 };
@@ -78,6 +79,10 @@ const openDialog = (ref: string) => {
   if (ref == "infoRef") infoRef.value?.openDialog();
   if (ref == "passwordRef") passwordRef.value?.openDialog();
 };
+//模式切换
+const changeMode = () => {
+  authStore.changeModel();
+};
 </script>
 
 <style scoped lang="scss">

frontend/src/layouts/components/Main/index.vue

@@ -1,11 +1,15 @@
 <template>
   <Maximize v-show="maximize" />
-  <Tabs v-show="tabs" />
+  <Tabs v-if="tabs && showMenuFlag" />
   <el-main>
     <router-view v-slot="{ Component, route }">
       <transition appear name="fade-transform" mode="out-in">
         <keep-alive :include="keepAliveName">
-          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
+          <component
+            :is="Component"
+            v-if="isRouterShow"
+            :key="route.fullPath"
+          />
         </keep-alive>
       </transition>
     </router-view>
@@ -16,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeUnmount, provide, watch } from "vue";
+import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useDebounceFn } from "@vueuse/core";
 import { useGlobalStore } from "@/stores/modules/global";
@@ -24,13 +28,15 @@ import { useKeepAliveStore } from "@/stores/modules/keepAlive";
 import Maximize from "./components/Maximize.vue";
 import Tabs from "@/layouts/components/Tabs/index.vue";
 import Footer from "@/layouts/components/Footer/index.vue";
-
+import { useAuthStore } from "@/stores/modules/auth";
 const globalStore = useGlobalStore();
+const authStore = useAuthStore();
 const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
 
 const keepAliveStore = useKeepAliveStore();
 const { keepAliveName } = storeToRefs(keepAliveStore);
-
+//是否显示导航栏
+const showMenuFlag = computed(() => authStore.showMenuFlagGet);
 // 注入刷新页面方法
 const isRouterShow = ref(true);
 const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
@@ -61,8 +67,10 @@ watch(
 const screenWidth = ref(0);
 const listeningWindow = useDebounceFn(() => {
   screenWidth.value = document.body.clientWidth;
-  if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
-  if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
+  if (!isCollapse.value && screenWidth.value < 1200)
+    globalStore.setGlobalState("isCollapse", true);
+  if (isCollapse.value && screenWidth.value > 1200)
+    globalStore.setGlobalState("isCollapse", false);
 }, 100);
 window.addEventListener("resize", listeningWindow, false);
 onBeforeUnmount(() => {