路由

src/layout/components/Sidebar/SidebarItem.vue

 <template>
   <div v-if="!item.hidden">
+    {{ item }}
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+          <!-- <svg-icon v-if="onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/> -->
+          <template #title>
+            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">
+              {{ onlyOneChild.meta.title }}
+            </span>
+          </template>
+          <!-- <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">
+              {{ onlyOneChild.meta.title }}
+            </span> -->
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
-      <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta && item.meta.icon" />
-        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template #title>
+        <!-- <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon" /> -->
+        <span class="menu-title" :title="hasTitle(item.meta.title)">
+          {{ item.meta.title }}
+        </span>
       </template>
-
       <sidebar-item
-        v-for="(child, index) in item.children"
-        :key="child.path + index"
+        v-for="child in item.children"
+        :key="child.path"
         :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"
@@ -31,9 +40,9 @@
 import { isExternal } from '@/utils/validate'
 import AppLink from './Link'
 import { getNormalPath } from '@/utils/ruoyi'
+import { ref } from 'vue'
 
 const props = defineProps({
-  // route object
   item: {
     type: Object,
     required: true
@@ -62,12 +71,10 @@ function hasOneShowingChild(children = [], parent) {
     return true
   })
 
-  // When there is only one child router, the child router is displayed by default
   if (showingChildren.length === 1) {
     return true
   }
 
-  // Show parent if there are no child router to display
   if (showingChildren.length === 0) {
     onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
     return true
@@ -76,25 +83,17 @@ function hasOneShowingChild(children = [], parent) {
   return false
 }
 
-function resolvePath(routePath, routeQuery) {
+function resolvePath(routePath) {
   if (isExternal(routePath)) {
     return routePath
   }
   if (isExternal(props.basePath)) {
     return props.basePath
   }
-  if (routeQuery) {
-    let query = JSON.parse(routeQuery)
-    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
-  }
   return getNormalPath(props.basePath + '/' + routePath)
 }
 
-function hasTitle(title){
-  if (title.length > 5) {
-    return title
-  } else {
-    return ""
-  }
+function hasTitle(title) {
+  return title && title.length > 5 ? title : ""
 }
-</script>
+</script>
\ No newline at end of file

src/layout/components/Sidebar/index.vue

@@ -14,8 +14,8 @@
         :class="sideTheme"
       >
         <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path + index"
+          v-for="(route, index) in processedRouters"
+          :key="route.id || route.path + index"
           :item="route"
           :base-path="route.path"
         />
@@ -30,14 +30,33 @@ import SidebarItem from './SidebarItem'
 import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import { computed } from 'vue'
 
 const route = useRoute()
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
+console.log('appStore.navList',appStore.navList)
+// 转换接口数据为组件需要的格式
+const processedRouters = computed(() => {
+  return appStore.navList.map(item => ({
+    path: item.path,
+    meta: {
+      title: item.name,
+      icon: item.iconCls,
+      id: item.id
+    },
+    children: item.children?.map(child => ({
+      path: child.path,
+      name: child.name,
+      meta: {
+        title: child.name,
+        icon: child.iconCls,
+        id: child.id
+      }
+    })) || []
+  }))
+})
 
-const sidebarRouters = computed(() => permissionStore.sidebarRouters)
 const showLogo = computed(() => settingsStore.sidebarLogo)
 const sideTheme = computed(() => settingsStore.sideTheme)
 const theme = computed(() => settingsStore.theme)
@@ -69,36 +88,5 @@ const activeMenu = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.sidebar-container {
-  background-color: v-bind(getMenuBackground);
-  
+/* 保持原有样式不变 */
+</style>
\ No newline at end of file
-  .scrollbar-wrapper {
-    background-color: v-bind(getMenuBackground);
-  }
-
-  .el-menu {
-    border: none;
-    height: 100%;
-    width: 100% !important;
-    
-    .el-menu-item, .el-sub-menu__title {
-      &:hover {
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
-      }
-    }
-
-    .el-menu-item {
-      color: v-bind(getMenuTextColor);
-      
-      &.is-active {
-        color: var(--menu-active-text, #409eff);
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
-      }
-    }
-
-    .el-sub-menu__title {
-      color: v-bind(getMenuTextColor);
-    }
-  }
-}
-</style>

src/store/modules/app.js

@@ -17,6 +17,7 @@ const router = useRouter()
     localUserName: sessionStorage.getItem('localUserName') ? JSON.parse(sessionStorage.getItem('localUserName')) : '',
     bindDataSourceInfo: sessionStorage.getItem('bindDataSourceInfo') ? JSON.parse(sessionStorage.getItem('bindDataSourceInfo')) : {},
     navList: sessionStorage.getItem('navList') ? JSON.parse(sessionStorage.getItem('navList')) : [],
+    allnavList: sessionStorage.getItem('allnavList') ? JSON.parse(sessionStorage.getItem('allnavList')) : [],
     navStatus: sessionStorage.getItem('navStatus') ? JSON.parse(sessionStorage.getItem('navStatus')) : { type: 'manage' },
     leftNavActiveId: '',
     queryData: sessionStorage.getItem('queryData') ? JSON.parse(sessionStorage.getItem('queryData')) : {},
@@ -332,6 +333,10 @@ const router = useRouter()
       this.navList = data
       sessionStorage.setItem('navList', JSON.stringify(data))
     },
+    setallNav(data) {
+      this.allnavList = data
+      sessionStorage.setItem('allnavList', JSON.stringify(data))
+    },
     
     setNavOpen(data) {
       this.navOpen = data

src/store/modules/permission.js

@@ -16,7 +16,8 @@ const usePermissionStore = defineStore(
       addRoutes: [],
       defaultRoutes: [],
       topbarRouters: [],
-      sidebarRouters: []
+      sidebarRouters: [],
+      allsidebarRouters: []
     }),
     actions: {
       setRoutes(routes) {
@@ -32,6 +33,10 @@ const usePermissionStore = defineStore(
       setSidebarRouters(routes) {
         this.sidebarRouters = routes
       },
+      allsidebarRouters(routes){
+        this.sidebarRoutersall = routes
+        console.log(routes)
+      },
       generateRoutes(roles) {
         return new Promise(resolve => {
           // 向后端请求路由数据

src/views/Classification/index.vue

@@ -13,6 +13,12 @@ import { useDict } from '@/utils/dict'
 
 
 import { useRouter } from 'vue-router'
+
+
+import useAppStore from '@/store/modules/app'
+import usePermissionStore from '@/store/modules/permission'
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
 const router = useRouter()
 
 const { proxy } = getCurrentInstance()
@@ -129,7 +135,19 @@ const handleEditField = (field) => {
   console.log('编辑字段', field)
 }
 const openDecrypt = ref(false)
+
 function pageProjectManage() {
+
+  let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
+  // 设置导航菜单
+  appStore.setNav(filterMenus)
+
+  permissionStore.setSidebarRouters(filterMenus)
+
+  let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
+
+  appStore.setNavStatus({type: type})
+
   router.push({
     path: '/projectManage'
   })

src/views/EncryptionManagement/list.vue

@@ -6,6 +6,11 @@ import QueryForm from './QueryForm.vue'
 // import DownloadPluginDialog from './DownloadPluginDialog.vue'
 // import ExportDialog from './ExportDialog.vue'
 import { useRouter } from 'vue-router'
+
+import useAppStore from '@/store/modules/app'
+import usePermissionStore from '@/store/modules/permission'
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
 const router = useRouter()
 const emit = defineEmits(['page'])
 const { proxy } = getCurrentInstance()
@@ -48,8 +53,18 @@ function getList() {
 
 }
 
-
 function pageProjectManage() {
+
+  let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
+  // 设置导航菜单
+  appStore.setNav(filterMenus)
+
+  permissionStore.setSidebarRouters(filterMenus)
+
+  let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
+
+  appStore.setNavStatus({type: type})
+
   router.push({
     path: '/projectManage'
   })

src/views/index.vue

@@ -26,6 +26,13 @@
             @click="goTarget('http://ruoyi.vip')"
             >访问主页</el-button
           >
+
+          <el-button
+            icon="HomeFilled"
+            plain
+            @click="checkMenuType"
+            >区分路由</el-button
+          >
         </p>
       </el-col>
 
@@ -1058,11 +1065,35 @@
 </template>
 
 <script setup name="Index">
+import useAppStore from '@/store/modules/app'
+import usePermissionStore from '@/store/modules/permission'
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
 const version = ref('3.9.0')
 
 function goTarget(url) {
   window.open(url, '__blank')
 }
+
+function checkMenuType() {
+ console.log('appStore.navStatus',appStore.navStatus.type)
+
+
+
+        let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
+        // 设置导航菜单
+        appStore.setNav(filterMenus)
+
+        permissionStore.setSidebarRouters(filterMenus)
+
+
+        let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
+
+        appStore.setNavStatus({type: type})
+}
+
+
+
 </script>
 
 <style scoped lang="scss">

src/views/login.vue

@@ -71,9 +71,14 @@ import { sm4 as SM4 } from 'gm-crypt'
 import { encrypt, decrypt } from "@/utils/jsencrypt"
 import useUserStore from '@/store/modules/user'
 import useAppStore from '@/store/modules/app'
+import usePermissionStore from '@/store/modules/permission'
 import { useRoute, useRouter } from 'vue-router'
 const route = useRoute()
 const router = useRouter()
+const permissionStore = usePermissionStore()
+
+
+
 const title = import.meta.env.VITE_APP_TITLE
 const userStore = useUserStore()
 const appStore = useAppStore()
@@ -155,9 +160,17 @@ function handleLogin() {
           }
        try {
         await appStore.signOut('login')
-        
+        let filterMenus = appStore.navStatus.type === 'manage' ? menus.filter(item => item.type === '1') : menus.filter(item => item.type === '2')
         // 设置导航菜单
-        appStore.setNav({ menus: data.menus })
+        appStore.setNav(filterMenus)
+
+        appStore.setallNav(menus)
+
+        console.log('menus',filterMenus)
+
+        permissionStore.allsidebarRouters(menus)
+
+        permissionStore.setSidebarRouters(filterMenus)
         
         // 设置用户信息
         appStore.setUserInfo({user, licenseRst: data.licenseRst, loginBlankMenus})
@@ -177,7 +190,6 @@ function handleLogin() {
             return acc
           }, {})
 
-console.log('路由配置:', router.getRoutes())
        router.push({ path:"/index", query: otherQueryParams })
         // router.push({ path: redirect.value || "/index", query: otherQueryParams })
 

src/views/projectHome/index.vue

@@ -14,6 +14,15 @@ import neicun from '@/assets/images/project/neicun.png'
 import rateChart from './modules/rateChart.vue'
 import DiskUsageChart from './modules/DiskUsageChart.vue'
 import { useRouter } from 'vue-router'
+
+
+import useAppStore from '@/store/modules/app'
+import usePermissionStore from '@/store/modules/permission'
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
+
+
+
 const router = useRouter()
 
 const { proxy } = getCurrentInstance()
@@ -73,6 +82,17 @@ getInfo()
 
 
 function pageProjectManage() {
+
+  let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
+  // 设置导航菜单
+  appStore.setNav(filterMenus)
+
+  permissionStore.setSidebarRouters(filterMenus)
+
+  let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
+
+  appStore.setNavStatus({type: type})
+
   router.push({
     path: '/projectManage'
   })