add

src/config/setting.ts

@@ -1,7 +1,7 @@
 const defaultSetting = {
     showCrumb: true, // 是否显示面包屑
     showLogo: true, // 是否显示logo
-    isUniqueOpened: false, //只展开一个一级菜单
+    isUniqueOpened: true, //只展开一个一级菜单
     sideWidth: 250, //侧边栏宽度
     sideTheme: 'light', //侧边栏主题
     sideDarkColor: '#1d2124', //侧边栏深色主题颜色

src/layout/default/components/header/index.vue

@@ -61,13 +61,4 @@ const settingStore = useSettingStore()
         @apply h-full flex justify-center items-center hover:bg-page;
     }
 }
-
-.menu-li {
-    display: flex;
-    margin-left: 50px;
-}
-
-.pointer {
-    cursor: pointer;
-}
 </style>

src/layout/default/components/header/menuLi.vue

@@ -1,17 +1,20 @@
 <template>
-    <div class="menu-li">
-        <div class="flex items-center px-2 pointer" @click="menuClick(item.id)" v-for="(item, index) in menuList"
-            v-show="item.paths != 'workbench'">
+    <div class="flex mt-3 h-7">
+        <div class="mr-1 cursor-pointer leading-7 px-2.5 hover:bg-primary-light-9 hover:text-primary transition-all duration-300"
+            @click="menuClick(item.id)" v-for="(item, index) in menuList" v-show="item.paths != 'workbench'"
+            :class="menuName == item.name ? 'bg-primary-light-9 text-primary' : ''">
             {{ item.name }}
         </div>
     </div>
 </template>
-
 <script setup>
-import { getUserInfoByID, getUserInfo } from "@/api/user"
+import { getUserInfo } from "@/api/user"
 import useUserStore from '@/stores/modules/user'
+import { useWatchRoute } from '@/hooks/useWatchRoute'
+
 const userStore = useUserStore()
 const menuList = reactive([])
+const menuName = ref('')
 
 const menuClick = (id) => {
     userStore.getUserInfoByID(id)
@@ -25,4 +28,12 @@ getUserInfo().then(res => {
     userStore.getUserInfoByID(localStorage?.getItem('menuId') || menuList[1].id)
 })
 
+useWatchRoute((route) => {
+    menuName.value = route.matched[0]?.meta?.title || ''
+    if (menuList.length) {
+        let index = menuList.findIndex(item => item.name == menuName.value)
+        userStore.getUserInfoByID(menuList[index].id)
+    }
+})
+
 </script>

src/layout/default/components/sidebar/side.vue

@@ -1,15 +1,8 @@
 <template>
     <div class="side" :style="sideStyle">
         <side-logo v-if="settingStore.showLogo" :show-title="!isCollapsed" :theme="sideTheme" />
-        <side-menu
-            :routes="routes"
-            :is-collapsed="isCollapsed"
-            :width="settingStore.sideWidth"
-            :unique-opened="settingStore.isUniqueOpened"
-            :config="menuProp"
-            :theme="sideTheme"
-            @select="handleSelect"
-        />
+        <side-menu :routes="routes" :is-collapsed="isCollapsed" :width="settingStore.sideWidth"
+            :unique-opened="settingStore.isUniqueOpened" :config="menuProp" :theme="sideTheme" @select="handleSelect" />
     </div>
 </template>
 
@@ -38,8 +31,8 @@ const routes = computed(() => userStore.routes)
 const sideStyle = computed(() => {
     return sideTheme.value == 'dark'
         ? {
-              '--side-dark-color': settingStore.sideDarkColor
-          }
+            '--side-dark-color': settingStore.sideDarkColor
+        }
         : ''
 })
 const menuProp = computed(() => {