From 9b89d24d2eae3a1e56af70e14295ff56f0524336 Mon Sep 17 00:00:00 2001
From: huzhushan <huzhushan@126.com>
Date: Wed, 4 Sep 2024 18:05:41 +0800
Subject: [PATCH] update

---
 mock/menu.js                                 | 19 ++++----
 package.json                                 |  2 +-
 src/App.vue                                  |  4 +-
 src/layout/components/Sidebar/Menus.vue      |  9 +++-
 src/layout/components/Topbar/Breadcrumbs.vue | 26 +++++++++-
 src/permission.js                            |  3 +-
 src/pinia/modules/app.js                     |  4 ++
 src/pinia/modules/menu.js                    | 50 ++++++++++++++++++--
 src/router/modules/test.js                   | 39 ++++++++-------
 src/views/test/Nest.vue                      |  4 +-
 src/views/test/error-log/index.vue           |  2 +-
 11 files changed, 121 insertions(+), 41 deletions(-)

diff --git a/mock/menu.js b/mock/menu.js
index 3605c12..5eb7a7e 100644
--- a/mock/menu.js
+++ b/mock/menu.js
@@ -42,15 +42,18 @@ export default [
         {
           name: 'testList',
           title: '列表',
+          children: [
+            {
+              name: 'testAdd',
+              title: '添加',
+            },
+            {
+              name: 'testEdit',
+              title: '编辑',
+            },
+          ]
         },
-        {
-          name: 'testAdd',
-          title: '添加',
-        },
-        {
-          name: 'testEdit',
-          title: '编辑',
-        },
+        
         // {
         //   name: 'testAuth',
         //   title: '权限测试',
diff --git a/package.json b/package.json
index 1b2da72..4374201 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "axios": "^0.21.1",
-    "vue": "3.2.33",
+    "vue": "^3.2.33",
     "vue-router": "^4.0.5",
     "vuex": "^4.0.0",
     "pinia": "^2.0.14"
diff --git a/src/App.vue b/src/App.vue
index 3080f02..c285509 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,8 +39,8 @@
 <script>
 import { defineComponent } from 'vue'
 import { ElConfigProvider } from 'element-plus'
-import localeZH from 'element-plus/lib/locale/lang/zh-cn'
-import localeEN from 'element-plus/lib/locale/lang/en'
+import localeZH from 'element-plus/es/locale/lang/zh-cn'
+import localeEN from 'element-plus/es/locale/lang/en'
 import useLang from '@/i18n/useLang'
 
 export default defineComponent({
diff --git a/src/layout/components/Sidebar/Menus.vue b/src/layout/components/Sidebar/Menus.vue
index 4cfd6af..0927773 100644
--- a/src/layout/components/Sidebar/Menus.vue
+++ b/src/layout/components/Sidebar/Menus.vue
@@ -58,6 +58,7 @@ import { useRoute } from 'vue-router'
 import config from './config/menu.module.scss'
 import { storeToRefs } from 'pinia'
 import { useMenus } from '@/pinia/modules/menu'
+import { useApp } from '@/pinia/modules/app'
 
 export default defineComponent({
   components: {
@@ -76,10 +77,16 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const { menus } = storeToRefs(useMenus())
+    const appStore = useApp()
+    const { matchedRoutes } = storeToRefs(appStore)
 
     return {
       menus,
-      activePath: computed(() => route.path),
+      activePath: computed(() => {
+        return matchedRoutes.value.length > 1
+          ? matchedRoutes.value[1].path
+          : route.path
+      }),
       variables: computed(() => config),
     }
   },
diff --git a/src/layout/components/Topbar/Breadcrumbs.vue b/src/layout/components/Topbar/Breadcrumbs.vue
index 27f00de..7ae82d0 100644
--- a/src/layout/components/Topbar/Breadcrumbs.vue
+++ b/src/layout/components/Topbar/Breadcrumbs.vue
@@ -71,7 +71,8 @@ import { useRouter } from 'vue-router'
 export default defineComponent({
   setup(props, { emit }) {
     const { proxy } = getCurrentInstance()
-    const { device } = storeToRefs(useApp())
+    const appStore = useApp()
+    const { device } = storeToRefs(appStore)
     const router = useRouter()
     const route = router.currentRoute // 这里不使用useRoute获取当前路由，否则下面watch监听路由的时候会有警告
     const breadcrumbs = ref([])
@@ -80,16 +81,37 @@ export default defineComponent({
       () => defaultSettings.menus.mode === 'horizontal'
     )
 
+    const allRoutes = router.getRoutes()
+
+    const recursionArr = (matched, route) => {
+      const parent = route.meta.parent
+      if (parent) {
+        const parentRoute = allRoutes.find(item => item.name === parent)
+        if (parentRoute && parentRoute.meta && parentRoute.meta.title) {
+          matched.splice(
+            matched.findIndex(item => item.name === route.name),
+            0,
+            parentRoute
+          )
+          recursionArr(matched, parentRoute)
+        }
+      }
+    }
+
     const getBreadcrumbs = route => {
       const home = [{ path: '/', meta: { title: proxy.$t('menu.homepage') } }]
       if (route.name === 'home') {
+        appStore.setMatchedRoutes(home)
         return home
       } else {
         const matched = route.matched.filter(
           item => !!item.meta && !!item.meta.title
         )
 
-        return [...home, ...matched]
+        // return [...home, ...matched]
+        recursionArr(matched, route)
+        appStore.setMatchedRoutes(matched)
+        return matched
       }
     }
 
diff --git a/src/permission.js b/src/permission.js
index 7df72ed..952a18f 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -35,8 +35,7 @@
 
 import { ElLoading } from 'element-plus'
 import router from '@/router'
-// import store from '@/store'
-import { TOKEN } from '@/store/modules/app' // TOKEN变量名
+import { TOKEN } from './pinia/modules/app' // TOKEN变量名
 import { nextTick } from 'vue'
 import { useApp } from './pinia/modules/app'
 import { useAccount } from './pinia/modules/account'
diff --git a/src/pinia/modules/app.js b/src/pinia/modules/app.js
index b3b75d2..6df692a 100644
--- a/src/pinia/modules/app.js
+++ b/src/pinia/modules/app.js
@@ -28,6 +28,7 @@ export const useApp = defineStore('app', {
       collapse: getItem(COLLAPSE),
     },
     device: 'desktop',
+    matchedRoutes: [],
   }),
   actions: {
     setCollapse(data) {
@@ -42,6 +43,9 @@ export const useApp = defineStore('app', {
     setDevice(device) {
       this.device = device
     },
+    setMatchedRoutes(payload) {
+      this.matchedRoutes = payload
+    },
     setToken(data) {
       this.authorization = data
       // 保存到localStorage
diff --git a/src/pinia/modules/menu.js b/src/pinia/modules/menu.js
index a2b1e98..5ea5725 100644
--- a/src/pinia/modules/menu.js
+++ b/src/pinia/modules/menu.js
@@ -58,8 +58,8 @@ export const useMenus = defineStore('menu', () => {
           icon: item.icon,
         }
         if (item.children) {
-          if (item.children.filter(child => !child.hidden).length <= 1) {
-            menu.url = generateUrl(item.children[0].path, menu.url)
+          if (item.children.filter(child => !child.hidden).length <= 0) {
+            delete menu.children
           } else {
             menu.children = getFilterMenus(item.children, menu.url)
           }
@@ -71,6 +71,47 @@ export const useMenus = defineStore('menu', () => {
     return menus
   }
 
+  // 扁平化树形数据
+  const flattenTree = tree => {
+    let result = []
+    tree.forEach(node => {
+      result.push(node) // 将当前节点添加到结果数组中
+      if (node.children && node.children.length) {
+        // 如果有子节点，将子节点添加到结果数组中
+        result = result.concat(flattenTree(node.children))
+        delete node.children
+      }
+    })
+    return result
+  }
+
+  const optimizeRoutes = (arr, parentPath = '', parentName = '') => {
+    return arr.map(obj => {
+      const item = {
+        ...obj,
+      }
+      item.path = item.path.startsWith('/')
+        ? item.path
+        : parentPath
+        ? `${parentPath}/${item.path}`
+        : item.path
+      if (parentName) {
+        item.meta.parent = parentName
+      }
+      if (item.children) {
+        item.children = optimizeRoutes(item.children, item.path, item.name)
+      }
+      return item
+    })
+  }
+
+  const formatRoutes = routes => {
+    return routes.map(route => ({
+      ...route,
+      children: flattenTree(optimizeRoutes(route.children || [])),
+    }))
+  }
+
   const menus = ref([])
   const setMenus = data => {
     menus.value = data
@@ -91,11 +132,14 @@ export const useMenus = defineStore('menu', () => {
       })
       // 过滤出需要添加的动态路由
       const filterRoutes = getFilterRoutes(asyncRoutes, data)
-      filterRoutes.forEach(route => router.addRoute(route))
 
       // 生成菜单
       const menus = getFilterMenus([...fixedRoutes, ...filterRoutes])
       setMenus(menus)
+
+      // 添加动态路由，由于只做了二级路由，所以需要将三级之后的children提到二级
+      const arr = formatRoutes(filterRoutes)
+      arr.forEach(route => router.addRoute(route))
     }
   }
   return {
diff --git a/src/router/modules/test.js b/src/router/modules/test.js
index c5bc535..8b6eb6e 100644
--- a/src/router/modules/test.js
+++ b/src/router/modules/test.js
@@ -39,25 +39,28 @@ export default [
         meta: {
           title: 'menu.testList',
         },
+        children: [
+          {
+            path: 'add',
+            name: 'testAdd',
+            component: Add,
+            meta: {
+              title: 'menu.testAdd',
+            },
+            hidden: true, // 不在菜单中显示
+          },
+          {
+            path: 'edit/:id',
+            name: 'testEdit',
+            component: Edit,
+            meta: {
+              title: 'menu.testEdit',
+            },
+            hidden: true, // 不在菜单中显示
+          },
+        ],
       },
-      {
-        path: 'add',
-        name: 'testAdd',
-        component: Add,
-        meta: {
-          title: 'menu.testAdd',
-        },
-        hidden: true, // 不在菜单中显示
-      },
-      {
-        path: 'edit/:id',
-        name: 'testEdit',
-        component: Edit,
-        meta: {
-          title: 'menu.testEdit',
-        },
-        hidden: true, // 不在菜单中显示
-      },
+
       // {
       //   path: 'auth',
       //   name: 'testAuth',
diff --git a/src/views/test/Nest.vue b/src/views/test/Nest.vue
index b4aac95..140f346 100644
--- a/src/views/test/Nest.vue
+++ b/src/views/test/Nest.vue
@@ -1,5 +1,3 @@
 <template>
-  <h1>二级菜单</h1>
-  <h3>二级菜单的页面是不会缓存的</h3>
-  <router-view />
+  nest
 </template>
diff --git a/src/views/test/error-log/index.vue b/src/views/test/error-log/index.vue
index bac8055..0a13beb 100644
--- a/src/views/test/error-log/index.vue
+++ b/src/views/test/error-log/index.vue
@@ -18,7 +18,7 @@
       本页面主动抛出了错误（任何页面报错都会记录到错误日志中），现在你可以点击右上角的`debugger`图标查看错误日志
     </h4>
     <div>
-      你可以在`store/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
+      你可以在`pinia/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
     </div>
     <br />
     <div>