From d42685be06413a686eaf87013f0621906f8e406a Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 24 Aug 2024 17:08:57 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=B7=AF=E7=94=B1=E6=A0=91?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/route-output.ts | 42 ++++++++++++++++++++++++++++++++------
 src/router/route.ts        |  5 ++---
 src/typings/global.d.ts    |  2 ++
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index b67c728..56d14d2 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -20,21 +20,20 @@ export async function initSetRouter() {
   // 初始化路由，渲染loading
   loadingPage.start();
   const store = useRoutesListStore(pinia);
-  // 根据角色权限过滤树
+  // 根据角色权限过滤树并将其排序
   const originTree: RouteRecordRaw[] = deepClone(dynamicRoutes);
-  let filteredTree = filterByRole(originTree[0].children);
+  let filteredTree = treeSort(filterByRole(originTree[0].children));
   await store.setRouteTree(filteredTree);
   // 根据树生成一维路由数组
   const flattenedArray = linearArray(filteredTree);
-  // 设置完整的路由，二维路由，顶层路由 + 二级的一维路由
-  const twoStoryTree = originTree.map(item => {
+  // 设置完整的路由，二维路由：顶层路由 + 二级的一维路由
+  const addBeforeTree = originTree.map(item => {
     if (flattenedArray.length > 0) item.redirect = flattenedArray[0].path;
     item.children = flattenedArray;
     return item;
   });
-
   // 动态添加路由
-  twoStoryTree.forEach((route: any) => router.addRoute(route));
+  addBeforeTree.forEach((route: RouteRecordRaw) => router.addRoute(route));
   // 设置一维路由
   setRouting(flattenedArray);
 }
@@ -78,6 +77,37 @@ export const filterByRole = (tree: any) => {
   });
 };
 
+/**
+ * 路由树递归排序
+ * 1、先给当前层排序
+ * 2、若当前层有children则递归排序
+ * @param {array} tree 根据角色权限过滤后的路由树
+ * @returns 返回排序之后的树
+ */
+export const treeSort = (tree: Menu.MenuOptions[]) => {
+  if (!tree || tree.length == 0) return [];
+  tree.sort((a: Menu.MenuOptions, b: Menu.MenuOptions) => {
+    // a和b都是undefined则相等
+    if (a.meta.sort != 0 && !a.meta.sort && b.meta.sort != 0 && !b.meta.sort) {
+      return 0;
+    }
+    // a是undefined则a被排在b之后
+    if (a.meta.sort != 0 && !a.meta.sort) return 1;
+    // b是undefined则b被排在a之后
+    if (b.meta.sort != 0 && !b.meta.sort) return -1;
+    return a.meta.sort - b.meta.sort;
+  });
+
+  // 深层递归
+  let sortAfter = tree.map((item: any) => {
+    if (item?.children?.length > 0) {
+      item.children = treeSort(item.children);
+    }
+    return item;
+  });
+  return sortAfter;
+};
+
 /**
  * 校验该角色是否有路由权限
  * @param {array} roles 路由的角色权限
diff --git a/src/router/route.ts b/src/router/route.ts
index f7ebe6c..38ba3ae 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -90,7 +90,6 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           }
         ]
       },
-
       {
         path: "/table-management",
         name: "table-management",
@@ -122,7 +121,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 1
+              sort: 2
             }
           },
           {
@@ -139,7 +138,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 2
+              sort: 1
             }
           }
         ]
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index b25d49b..fbf2b72 100644
--- a/src/typings/global.d.ts
+++ b/src/typings/global.d.ts
@@ -12,6 +12,7 @@ declare namespace Menu {
   interface MetaType {
     title: string;
     hide: boolean;
+    disable: boolean;
     keepAlive: boolean;
     affix: boolean;
     link?: string;
@@ -19,6 +20,7 @@ declare namespace Menu {
     roles: Array<string>;
     icon?: string;
     svgIcon?: string;
+    sort?: number;
   }
 }
 /* tabs菜单 */

From 771fbbfc5b02a4731a80b9461be158f698728de8 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 24 Aug 2024 17:49:47 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=B8=85=E9=99=A4=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=B8=A6=E6=9D=A5=E7=9A=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=B1=A1=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Header/components/Notice/index.vue        |  4 ++
 .../Header/components/header-right/index.vue  |  4 ++
 src/router/route.ts                           |  4 +-
 src/style/global-style.scss                   | 50 ++-----------------
 src/style/index.scss                          |  5 ++
 src/views/home/components/finance.vue         |  4 ++
 src/views/home/components/shortcut.vue        | 13 +++++
 7 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/src/layout/components/Header/components/Notice/index.vue b/src/layout/components/Header/components/Notice/index.vue
index d77e264..75dfdae 100644
--- a/src/layout/components/Header/components/Notice/index.vue
+++ b/src/layout/components/Header/components/Notice/index.vue
@@ -64,6 +64,10 @@ const onTab = (key: number) => {
     }
   }
 }
+.margin-left-text {
+  margin-left: $margin-text;
+}
+
 // 解决tabs宽度异常的bug
 :deep(.arco-tabs-content .arco-tabs-content-list) {
   display: unset;
diff --git a/src/layout/components/Header/components/header-right/index.vue b/src/layout/components/Header/components/header-right/index.vue
index eeb9c1a..2848811 100644
--- a/src/layout/components/Header/components/header-right/index.vue
+++ b/src/layout/components/Header/components/header-right/index.vue
@@ -257,4 +257,8 @@ const logOut = () => {
     transform: rotate(180deg) !important;
   }
 }
+
+.margin-left-text {
+  margin-left: $margin-text;
+}
 </style>
diff --git a/src/router/route.ts b/src/router/route.ts
index 38ba3ae..c90a345 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -121,7 +121,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 2
+              sort: 1
             }
           },
           {
@@ -138,7 +138,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 1
+              sort: 2
             }
           }
         ]
diff --git a/src/style/global-style.scss b/src/style/global-style.scss
index 6986551..d3c0586 100644
--- a/src/style/global-style.scss
+++ b/src/style/global-style.scss
@@ -1,4 +1,6 @@
 /* global style scss */
+
+// 有背景色的页面
 .snow-page {
   // margin 和 padding 边距一致，是为了保持视觉上的内外统一
   margin: $padding;
@@ -6,53 +8,7 @@
   background: $color-bg-1;
 }
 
+// 没有背景色的页面
 .snow-page-clear {
   margin: $padding;
 }
-
-.border-red {
-  box-shadow: $shadow-border-1;
-}
-
-// 通用全外边距
-.margin {
-  margin: $margin;
-}
-
-// 下边距
-.margin-bottom {
-  margin-bottom: $margin;
-}
-
-// 左间距-行内文字
-.margin-left-text {
-  margin-left: $margin-text;
-}
-// 右间距-行内文字
-.margin-right-text {
-  margin-right: $margin-text;
-}
-
-// 中等卡片大小
-.card-middling {
-  width: 200px;
-}
-
-// 一行完全居中
-.row-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-// 垂直居中，从左到右
-.row-start-center {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-// 垂直居中，左右占满
-.flex-row-between-center {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
diff --git a/src/style/index.scss b/src/style/index.scss
index 0076744..6d7eee0 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -32,3 +32,8 @@ body {
   background: $color-bg-2; // body背景颜色
   color: $color-text-1; // 整体文字的颜色
 }
+
+// 设置nprogress进度条样式
+#nprogress .bar {
+  background: $color-primary !important;
+}
diff --git a/src/views/home/components/finance.vue b/src/views/home/components/finance.vue
index 06c6b1f..6d74850 100644
--- a/src/views/home/components/finance.vue
+++ b/src/views/home/components/finance.vue
@@ -99,4 +99,8 @@ const financeData = ref([
   font-size: $font-size-body-3;
   color: $color-text-1;
 }
+
+.margin-left-text {
+  margin-left: $margin-text;
+}
 </style>
diff --git a/src/views/home/components/shortcut.vue b/src/views/home/components/shortcut.vue
index 4877bb7..5cb4660 100644
--- a/src/views/home/components/shortcut.vue
+++ b/src/views/home/components/shortcut.vue
@@ -72,6 +72,19 @@ const shortcut = ref([
       color: $color-text-2;
     }
   }
+
+  .card-middling {
+    width: 200px;
+  }
+
+  .row-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.margin-left-text {
+  margin-left: $margin-text;
 }
 .box-title {
   display: flex;

From 7de02556972119ae46113e7a24301372b22821b8 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 24 Aug 2024 19:41:02 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E6=A8=AA=E5=90=91=E5=92=8C=E6=B7=B7?=
 =?UTF-8?q?=E5=90=88=E5=B8=83=E5=B1=80=E5=88=87=E6=8D=A2=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E5=90=8E=E7=9A=84=E8=8F=9C=E5=8D=95=E6=BA=A2=E5=87=BA?=
 =?UTF-8?q?=E3=80=81=E8=8F=9C=E5=8D=95=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useMneuMethod.ts               | 28 +++++++++++
 src/layout/components/Menu/menu-item.vue | 12 +----
 src/layout/components/Tabs/index.vue     |  4 +-
 src/layout/layout-head/index.vue         | 60 ++++++++++++++++--------
 src/layout/layout-mixing/index.vue       | 42 ++++++++++++-----
 src/router/route.ts                      |  2 +-
 6 files changed, 105 insertions(+), 43 deletions(-)
 create mode 100644 src/hooks/useMneuMethod.ts

diff --git a/src/hooks/useMneuMethod.ts b/src/hooks/useMneuMethod.ts
new file mode 100644
index 0000000..69f5861
--- /dev/null
+++ b/src/hooks/useMneuMethod.ts
@@ -0,0 +1,28 @@
+/**
+ * 菜单处理hooks，内置多种菜单处理场景
+ * @returns 菜单处理方法
+ */
+export const useMneuMethod = () => {
+  /**
+   * 多级菜单的显示隐藏
+   * @param {Menu.MenuOptions} item 菜单的item
+   * @returns 若多级菜单有children，并且不隐藏，返回true，否则返回false
+   */
+  const menuShow = (item: Menu.MenuOptions) => {
+    if (item.children && item.children?.length > 0 && !item.meta.hide) return true;
+    return false;
+  };
+  /**
+   * 单级菜单的显示隐藏
+   * @param {Menu.MenuOptions} item 菜单的item
+   * @returns 若单级菜单不隐藏，返回true，否则返回false
+   */
+  const aMenuShow = (item: Menu.MenuOptions) => {
+    if (!item.meta.hide) return true;
+    return false;
+  };
+  return {
+    menuShow,
+    aMenuShow
+  };
+};
diff --git a/src/layout/components/Menu/menu-item.vue b/src/layout/components/Menu/menu-item.vue
index 6b716cf..3d042c6 100644
--- a/src/layout/components/Menu/menu-item.vue
+++ b/src/layout/components/Menu/menu-item.vue
@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
 defineOptions({ name: "MenuItem", inheritAttrs: false });
 
 interface Props {
@@ -30,16 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   routeTree: () => []
 });
 
-// 父级菜单
-const menuShow = (item: Menu.MenuOptions) => {
-  if (item.children && item.children?.length > 0 && !item.meta.hide) return true;
-  return false;
-};
-// 单级菜单
-const aMenuShow = (item: Menu.MenuOptions) => {
-  if (!item.meta.hide) return true;
-  return false;
-};
+const { menuShow, aMenuShow } = useMneuMethod();
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 7fb6944..dcc7848 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -90,10 +90,10 @@ const refresh = () => {
   const themeStore = useThemeConfig();
   themeStore.setRefreshPage(false);
   currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name);
-  setTimeout(() => {
+  nextTick(() => {
     themeStore.setRefreshPage(true);
     currentRoute.value.meta.keepAlive && routerStore.setRouteNames(currentRoute.value.name);
-  }, 0);
+  });
 };
 
 // 关闭当前
diff --git a/src/layout/layout-head/index.vue b/src/layout/layout-head/index.vue
index a2e9045..b2b9059 100644
--- a/src/layout/layout-head/index.vue
+++ b/src/layout/layout-head/index.vue
@@ -5,24 +5,32 @@
         <div class="header-logo">
           <Logo />
         </div>
+        <div class="layout-head-menu">
+          <a-menu
+            v-if="drawing"
+            mode="horizontal"
+            :selected-keys="[currentRoute.name]"
+            @menu-item-click="onMenuItem"
+            :popup-max-height="600"
+          >
+            <template v-for="item in routeTree" :key="item.name">
+              <a-sub-menu v-if="menuShow(item)" :key="item.name" :popup-max-height="600">
+                <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+                  <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+                </template>
+                <template #title>{{ $t(`language.${item.meta.title}`) }}</template>
+                <MenuItem :route-tree="item.children" />
+              </a-sub-menu>
+              <a-menu-item v-else-if="aMenuShow(item)" :key="item?.name">
+                <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+                  <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+                </template>
+                <span>{{ $t(`language.${item.meta.title}`) }}</span>
+              </a-menu-item>
+            </template>
+          </a-menu>
+        </div>
 
-        <a-menu mode="horizontal" :selected-keys="[currentRoute.name]" @menu-item-click="onMenuItem">
-          <template v-for="item in routeTree" :key="item.name">
-            <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
-              <template #icon v-if="item.meta.svgIcon || item.meta.icon">
-                <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
-              </template>
-              <template #title>{{ $t(`language.${item.meta.title}`) }}</template>
-              <MenuItem :route-tree="item.children" />
-            </a-sub-menu>
-            <a-menu-item v-else :key="item?.name">
-              <template #icon v-if="item.meta.svgIcon || item.meta.icon">
-                <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
-              </template>
-              <span>{{ $t(`language.${item.meta.title}`) }}</span>
-            </a-menu-item>
-          </template>
-        </a-menu>
         <HeaderRight />
       </a-layout-header>
       <Main />
@@ -43,12 +51,21 @@ import { storeToRefs } from "pinia";
 import { useRoutesListStore } from "@/store/modules/route-list";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
 defineOptions({ name: "LayoutHead" });
 const router = useRouter();
 const routerStore = useRoutesListStore();
 const themeStore = useThemeConfig();
 const { routeTree, currentRoute } = storeToRefs(routerStore);
-const { isFooter } = storeToRefs(themeStore);
+const { isFooter, language } = storeToRefs(themeStore);
+
+const { menuShow, aMenuShow } = useMneuMethod();
+
+const drawing = ref<boolean>(true);
+watch(language, () => {
+  drawing.value = false;
+  nextTick(() => (drawing.value = true));
+});
 
 /**
  * @description 菜单点击事件
@@ -79,15 +96,20 @@ const onMenuItem = (key: string) => {
 .header {
   padding: 0 $padding;
   height: 60px;
+  width: 100%;
   box-sizing: border-box;
   border-bottom: $border-1 solid $color-border-2;
   display: flex;
-  justify-content: space-between;
   align-items: center;
   overflow: hidden;
   .header-logo {
     max-width: 180px;
   }
+  .layout-head-menu {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
 }
 
 :deep(.arco-menu-pop) {
diff --git a/src/layout/layout-mixing/index.vue b/src/layout/layout-mixing/index.vue
index 13f05c2..a49d272 100644
--- a/src/layout/layout-mixing/index.vue
+++ b/src/layout/layout-mixing/index.vue
@@ -16,15 +16,24 @@
             </template>
           </a-button>
         </div>
-
-        <a-menu mode="horizontal" :selected-keys="[aciveRoute]" @menu-item-click="onMenuItem">
-          <a-menu-item v-for="item in routeTree" :key="item.name">
-            <template #icon v-if="item.meta.svgIcon || item.meta.icon">
-              <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+        <div class="layout-head-menu">
+          <a-menu
+            v-if="drawing"
+            mode="horizontal"
+            :selected-keys="[aciveRoute]"
+            @menu-item-click="onMenuItem"
+            :popup-max-height="600"
+          >
+            <template v-for="item in routeTree" :key="item.name">
+              <a-menu-item v-if="aMenuShow(item)" :key="item.name" :popup-max-height="600">
+                <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+                  <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+                </template>
+                <span>{{ $t(`language.${item.meta.title}`) }}</span>
+              </a-menu-item>
             </template>
-            <span>{{ $t(`language.${item.meta.title}`) }}</span>
-          </a-menu-item>
-        </a-menu>
+          </a-menu>
+        </div>
         <HeaderRight />
       </a-layout-header>
       <Main />
@@ -45,21 +54,27 @@ import { useRoutesListStore } from "@/store/modules/route-list";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
 defineOptions({ name: "LayoutMixing" });
 const route = useRoute();
 const router = useRouter();
 const routerStore = useRoutesListStore();
 const themeStore = useThemeConfig();
-const { isFooter, collapsed, asideDark } = storeToRefs(themeStore);
+const { isFooter, collapsed, asideDark, language } = storeToRefs(themeStore);
 const { routeTree } = storeToRefs(routerStore);
+const { aMenuShow } = useMneuMethod();
+
+const drawing = ref<boolean>(true);
+watch(language, () => {
+  drawing.value = false;
+  nextTick(() => (drawing.value = true));
+});
 
 // 折叠
 const onCollapsed = () => {
   themeStore.setCollapsed(!collapsed.value);
 };
 
-console.log("路由信息", route);
-
 // 由于刷新后，路由信息丢失，所以需要重新获取
 // 混合布局的横向菜单为顶层路由下的一级菜单
 // 这里通过当前路由信息直接获取
@@ -181,6 +196,11 @@ const getAsideMenu = (key: string) => {
       }
     }
   }
+  .layout-head-menu {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
 }
 
 :deep(.arco-menu-pop) {
diff --git a/src/router/route.ts b/src/router/route.ts
index c90a345..4d35423 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -533,7 +533,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       {
         path: "/system-management",
         name: "system-management",
-        redirect: "/system-management/account management",
+        redirect: "/system-management/account-management",
         meta: {
           title: "system-management",
           hide: false,