From 32fd8caa504772cab92208c75f52a2e23bfe0012 Mon Sep 17 00:00:00 2001
From: "WANGFAN\\wangf" <15871339963@163.com>
Date: Sat, 2 Nov 2024 19:26:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20mock=E8=B7=AF=E7=94=B1=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=EF=BC=8C=E6=95=B4=E4=BD=93=E8=B7=AF=E7=94=B1=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E8=B0=83=E6=95=B4=EF=BC=8C=E5=8C=85=E6=8B=AC=EF=BC=9A?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E3=80=81=E5=8A=A0=E8=BD=BD=E3=80=81=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                              |    9 +-
 src/api/modules/system/index.ts               |    9 +
 src/api/modules/user/index.ts                 |   12 +-
 src/hooks/useRoutingMethod.ts                 |    6 +-
 src/layout/components/Aside/index.vue         |    4 +-
 .../components/system-settings/index.vue      |    4 +-
 src/layout/components/Main/index.vue          |    4 +-
 src/layout/components/Menu/index.vue          |    4 +-
 src/layout/components/Tabs/index.vue          |    4 +-
 src/layout/layout-head/index.vue              |    4 +-
 src/layout/layout-mixing/index.vue            |    4 +-
 src/mock/_data/system_menu.ts                 | 1088 +++++++++++++++++
 src/mock/index.ts                             |    8 +-
 src/mock/system/index.ts                      |    3 +
 src/mock/system/menu.ts                       |   95 ++
 src/mock/user/index.ts                        |    6 +-
 src/router/index.ts                           |   10 +-
 src/router/route-output.ts                    |  151 +--
 .../{route-list.ts => route-config.ts}        |   53 +-
 src/views/login/components/login-form.vue     |    3 +-
 src/vite-env.d.ts                             |    1 +
 21 files changed, 1318 insertions(+), 164 deletions(-)
 create mode 100644 src/api/modules/system/index.ts
 create mode 100644 src/mock/_data/system_menu.ts
 create mode 100644 src/mock/system/index.ts
 create mode 100644 src/mock/system/menu.ts
 rename src/store/modules/{route-list.ts => route-config.ts} (58%)

diff --git a/src/api/index.ts b/src/api/index.ts
index 4dcb39b..664b74c 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -4,7 +4,6 @@ import { Message } from "@arco-design/web-vue";
 
 // 是否开启本地mock
 const MOCK_FLAG = import.meta.env.VITE_APP_OPEN_MOCK === "true";
-
 // 创建axios实例
 const service = axios.create({
   baseURL: MOCK_FLAG ? "" : "/api"
@@ -14,9 +13,13 @@ service.interceptors.request.use(
   function (config: any) {
     // 发送请求之前做什么
     // 获取token鉴权
-    if (localStorage.getItem("AdminToken")) {
+    let userInfo: any = {};
+    if (localStorage.getItem("user-info")) {
+      userInfo = JSON.parse(localStorage.getItem("user-info") as string);
+    }
+    if (userInfo?.AdminToken) {
       // 有token，在请求头中携带token
-      config.headers.Authorization = localStorage.getItem("AdminToken");
+      config.headers.Authorization = userInfo.AdminToken;
     }
     return config;
   },
diff --git a/src/api/modules/system/index.ts b/src/api/modules/system/index.ts
new file mode 100644
index 0000000..9496ad5
--- /dev/null
+++ b/src/api/modules/system/index.ts
@@ -0,0 +1,9 @@
+import axios from "@/api";
+
+// 获取菜单数据
+export const getMenuListAPI = () => {
+  return axios({
+    url: "/mock/menu/list",
+    method: "get"
+  });
+};
diff --git a/src/api/modules/user/index.ts b/src/api/modules/user/index.ts
index c3145e3..ddc31c7 100644
--- a/src/api/modules/user/index.ts
+++ b/src/api/modules/user/index.ts
@@ -9,12 +9,10 @@ export const loginAPI = (data: any) => {
   });
 };
 
-
 // 获取用户信息
 export const getUserInfoAPI = () => {
-    return axios({
-      url: "/mock/user/info",
-      method: "get"
-    });
-  };
-  
\ No newline at end of file
+  return axios({
+    url: "/mock/user/info",
+    method: "get"
+  });
+};
diff --git a/src/hooks/useRoutingMethod.ts b/src/hooks/useRoutingMethod.ts
index f2f8547..7804455 100644
--- a/src/hooks/useRoutingMethod.ts
+++ b/src/hooks/useRoutingMethod.ts
@@ -1,6 +1,6 @@
 import pinia from "@/store/index";
 import { storeToRefs } from "pinia";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 /**
  * 路由处理hooks，内置多种路由处理场景
  * @returns 路由方法
@@ -12,7 +12,7 @@ export const useRoutingMethod = () => {
    * @returns 查找到的路由，undefined则表示未找到
    */
   const findLinearArray = (key: string) => {
-    const routerStore = useRoutesListStore(pinia);
+    const routerStore = useRoutesConfigStore(pinia);
     const { routeList } = storeToRefs(routerStore);
     return routeList.value.find((item: Menu.MenuOptions) => item.name == key);
   };
@@ -23,7 +23,7 @@ export const useRoutingMethod = () => {
    * @returns 查找到的路由，undefined则表示未找到
    */
   const findTagsList = (key: string) => {
-    const routerStore = useRoutesListStore(pinia);
+    const routerStore = useRoutesConfigStore(pinia);
     const { tabsList } = storeToRefs(routerStore);
     return tabsList.value.find((item: Menu.MenuOptions) => item.name == key);
   };
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index a073465..914b3a8 100644
--- a/src/layout/components/Aside/index.vue
+++ b/src/layout/components/Aside/index.vue
@@ -12,10 +12,10 @@ import Logo from "@/layout/components/Logo/index.vue";
 import Menu from "@/layout/components/Menu/index.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 const themeStore = useThemeConfig();
 const { collapsed, asideDark } = storeToRefs(themeStore);
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const { routeTree } = storeToRefs(routerStore);
 </script>
 
diff --git a/src/layout/components/Header/components/system-settings/index.vue b/src/layout/components/Header/components/system-settings/index.vue
index 0ebd5c9..213b991 100644
--- a/src/layout/components/Header/components/system-settings/index.vue
+++ b/src/layout/components/Header/components/system-settings/index.vue
@@ -62,11 +62,11 @@
 <script setup lang="ts">
 import PickColors from "vue-pick-colors";
 import { storeToRefs } from "pinia";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { currentlyRoute } from "@/router/route-output";
 const themeStore = useThemeConfig();
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const {
   collapsed,
   isAccordion,
diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue
index 79ff5fe..8d36d07 100644
--- a/src/layout/components/Main/index.vue
+++ b/src/layout/components/Main/index.vue
@@ -17,10 +17,10 @@
 import Tabs from "@/layout/components/Tabs/index.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 const themeStore = useThemeConfig();
 let { refreshPage, isTabs, watermark, watermarkStyle, watermarkRotate, watermarkGap } = storeToRefs(themeStore);
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const { cacheRoutes } = storeToRefs(routerStore);
 
 // 水印配置
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 5467fbe..0e5b5f2 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -18,10 +18,10 @@
 import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 const router = useRouter();
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const { currentRoute } = storeToRefs(routerStore);
 const themeStore = useThemeConfig();
 const { collapsed, isAccordion, layoutType, asideDark } = storeToRefs(themeStore);
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index dcc7848..e452c6b 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -56,11 +56,11 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { useThemeConfig } from "@/store/modules/theme-config";
 const router = useRouter();
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const { tabsList, currentRoute } = storeToRefs(routerStore);
 
 // 点击标签页，如果标签页存在，则跳转
diff --git a/src/layout/layout-head/index.vue b/src/layout/layout-head/index.vue
index 28530ac..29519ad 100644
--- a/src/layout/layout-head/index.vue
+++ b/src/layout/layout-head/index.vue
@@ -47,13 +47,13 @@ import Footer from "@/layout/components/Footer/index.vue";
 import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
 import { storeToRefs } from "pinia";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { useMenuMethod } from "@/hooks/useMenuMethod";
 defineOptions({ name: "LayoutHead" });
 const router = useRouter();
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const themeStore = useThemeConfig();
 const { routeTree, currentRoute } = storeToRefs(routerStore);
 const { isFooter, language } = storeToRefs(themeStore);
diff --git a/src/layout/layout-mixing/index.vue b/src/layout/layout-mixing/index.vue
index e30e5fc..c74e7f9 100644
--- a/src/layout/layout-mixing/index.vue
+++ b/src/layout/layout-mixing/index.vue
@@ -49,7 +49,7 @@ import Footer from "@/layout/components/Footer/index.vue";
 import Menu from "@/layout/components/Menu/index.vue";
 import HeaderRight from "@/layout/components/Header/components/header-right/index.vue";
 import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
@@ -57,7 +57,7 @@ import { useMenuMethod } from "@/hooks/useMenuMethod";
 defineOptions({ name: "LayoutMixing" });
 const route = useRoute();
 const router = useRouter();
-const routerStore = useRoutesListStore();
+const routerStore = useRoutesConfigStore();
 const themeStore = useThemeConfig();
 const { isFooter, collapsed, asideDark, language } = storeToRefs(themeStore);
 const { routeTree } = storeToRefs(routerStore);
diff --git a/src/mock/_data/system_menu.ts b/src/mock/_data/system_menu.ts
new file mode 100644
index 0000000..17e08e0
--- /dev/null
+++ b/src/mock/_data/system_menu.ts
@@ -0,0 +1,1088 @@
+/**
+ * 路由path路径与文件夹名称相同，找文件可以浏览器地址快速查找，方便定位文件
+ *
+ * component
+ * 模块加载路径，除了layout外，全部默认路径为src/views文件夹内的文件
+ * 不要以"/"开头，结尾不要带文件扩展名，如:".vue"
+ * 举例：views文件夹下的home文件夹下的home.vue
+ * component: "home/home"
+ *
+ *
+ * 路由meta对象参数，我们通常将属性放到meta对象中
+ * meta: {
+ * title:       菜单栏以及 tabsView 栏、菜单搜索名称（国际化）
+ * hide:        是否隐藏此路由，不会显示在菜单树，可以访问
+ * disable:     是否停用，不会显示在菜单树，且不可访问
+ * keepAlive:   是否缓存组件状态
+ * affix:       是否固定在 tabsView 栏上
+ * link:        是否是超链接菜单，开启外链条件：1、 link：链接地址不为空  2、iframe: false
+ * iframe:      是否内嵌窗口，开启条件：1、iframe：true  2、link：链接地址不为空
+ * roles:       当前路由权限表示，取角色管理。路由控制显示、隐藏。 超级管理员：admin；普通角色：common
+ * icon:        菜单、tabsView 图标等
+ * svgIcon:     svg图标
+ * sort:        菜单顺序
+ * }
+ */
+
+/**
+ * 路由的层级设置
+ * layout为框架布局，顶层路由
+ * layout.children下的路由为menu菜单，例如：首页、系统设置、权限管理，在这里我称它为"一级路由"
+ * 一级路由下的children则是当前菜单的二级菜单
+ * 依此类推
+ */
+export default [
+  {
+    path: "/",
+    name: "/",
+    redirect: "/home",
+    component: "layout", // 容器布局-顶层路由
+    meta: {
+      keepAlive: true
+    },
+    // 二级路由-主要渲染页面
+    children: [
+      {
+        path: "/home",
+        name: "home",
+        component: "home/home",
+        meta: {
+          title: "home", // 国际化
+          hide: false, // 是否隐藏此路由
+          disable: false, // 是否停用此路由
+          keepAlive: false, // 缓存组件状态
+          affix: true, // 固定在tagesView栏上
+          link: "", // 是否外链
+          iframe: false, // 是否内嵌窗口
+          roles: ["admin", "common"], // 路由权限
+          svgIcon: "home", // 菜单图标
+          sort: 1
+        }
+      },
+      {
+        path: "/file-management",
+        name: "file-management",
+        redirect: "/file-management/document-library",
+        meta: {
+          title: "file-management",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "folder-menu",
+          sort: 2
+        },
+        children: [
+          {
+            path: "/file-management/document-library",
+            name: "document-library",
+            component: "file-management/document-library/document-library",
+            meta: {
+              title: "document-library",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          }
+        ]
+      },
+      {
+        path: "/table-management",
+        name: "table-management",
+        redirect: "/table-management/common-table",
+        meta: {
+          title: "table-management",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "table",
+          sort: 3
+        },
+        children: [
+          {
+            path: "/table-management/common-table",
+            name: "common-table",
+            component: "table-management/common-table/common-table",
+            meta: {
+              title: "common-table",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/table-management/custom-table",
+            name: "custom-table",
+            component: "table-management/custom-table/custom-table",
+            meta: {
+              title: "custom-table",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            }
+          }
+        ]
+      },
+      {
+        path: "/form-management",
+        name: "form-management",
+        redirect: "/form-management/common-form",
+        meta: {
+          title: "form-management",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "form",
+          sort: 4
+        },
+        children: [
+          {
+            path: "/form-management/common-form",
+            name: "common-form",
+            component: "form-management/common-form/common-form",
+            meta: {
+              title: "common-form",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/form-management/step-form",
+            name: "step-form",
+            component: "form-management/step-form/step-form",
+            meta: {
+              title: "step-form",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            }
+          }
+        ]
+      },
+      {
+        path: "/multilevel-menu",
+        name: "multilevel-menu",
+        redirect: "/multilevel-menu/second-menu-1",
+        meta: {
+          title: "multilevel-menu",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "switch",
+          sort: 5
+        },
+        children: [
+          {
+            path: "/multilevel-menu/second-menu-1",
+            name: "second-menu-1",
+            component: "multilevel-menu/second-menu/second-menu-1",
+            meta: {
+              title: "second-menu-1",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/multilevel-menu/second-menu-2",
+            name: "second-menu-2",
+            redirect: "/multilevel-menu/third-menu-1",
+            meta: {
+              title: "second-menu-2",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            },
+            children: [
+              {
+                path: "/multilevel-menu/third-menu-2",
+                name: "third-menu-2",
+                component: "multilevel-menu/third-menu/third-menu-2",
+                meta: {
+                  title: "third-menu-2",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "",
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 2
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-1",
+                name: "third-menu-1",
+                component: "multilevel-menu/third-menu/third-menu-1",
+                meta: {
+                  title: "third-menu-1",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "",
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 1
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-3",
+                name: "third-menu-3",
+                component: "multilevel-menu/third-menu/third-menu-3",
+                meta: {
+                  title: "third-menu-3",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 3
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-4",
+                name: "third-menu-4",
+                component: "multilevel-menu/third-menu/third-menu-4",
+                meta: {
+                  title: "third-menu-4",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 4
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-5",
+                name: "third-menu-5",
+                component: "multilevel-menu/third-menu/third-menu-5",
+                meta: {
+                  title: "third-menu-5",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 5
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-6",
+                name: "third-menu-6",
+                component: "multilevel-menu/third-menu/third-menu-6",
+                meta: {
+                  title: "third-menu-6",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 6
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-7",
+                name: "third-menu-7",
+                component: "multilevel-menu/third-menu/third-menu-7",
+                meta: {
+                  title: "third-menu-7",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 7
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-8",
+                name: "third-menu-8",
+                component: "multilevel-menu/third-menu/third-menu-8",
+                meta: {
+                  title: "third-menu-8",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 8
+                }
+              },
+              {
+                path: "/multilevel-menu/third-menu-9",
+                name: "third-menu-9",
+                component: "multilevel-menu/third-menu/third-menu-9",
+                meta: {
+                  title: "third-menu-9",
+                  link: "",
+                  hide: false,
+                  keepAlive: true,
+                  affix: false,
+                  iframe: false,
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 9
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: "/common-component",
+        name: "common-component",
+        redirect: "/common-component/player",
+        meta: {
+          title: "common-component",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "classify",
+          sort: 6
+        },
+        children: [
+          {
+            path: "/common-component/player",
+            name: "player",
+            component: "common-component/player/player",
+            meta: {
+              title: "player",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/common-component/print",
+            name: "print",
+            component: "common-component/print/print",
+            meta: {
+              title: "print",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            }
+          },
+          {
+            path: "/common-component/draggable",
+            name: "draggable",
+            component: "common-component/draggable/draggable",
+            meta: {
+              title: "draggable",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 3
+            }
+          },
+          {
+            path: "/common-component/editor",
+            name: "editor",
+            component: "common-component/editor/editor",
+            meta: {
+              title: "editor",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 4
+            }
+          },
+          {
+            path: "/common-component/newbie",
+            name: "newbie",
+            component: "common-component/newbie/newbie",
+            meta: {
+              title: "newbie",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 5
+            }
+          },
+          {
+            path: "/common-component/icon-selector",
+            name: "icon-selector",
+            component: "common-component/icon-selector/icon-selector",
+            meta: {
+              title: "icon-selector",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 6
+            }
+          },
+          {
+            path: "/common-component/user-center",
+            name: "user-center",
+            component: "common-component/user-center/user-center",
+            meta: {
+              title: "user-center",
+              hide: true,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 7
+            }
+          }
+        ]
+      },
+      {
+        path: "/custom-instruction",
+        name: "custom-instruction",
+        redirect: "/custom-instruction/anti-shake",
+        meta: {
+          title: "custom-instruction",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "directives",
+          sort: 7
+        },
+        children: [
+          {
+            path: "/custom-instruction/anti-shake",
+            name: "anti-shake",
+            component: "custom-instruction/anti-shake/anti-shake",
+            meta: {
+              title: "anti-shake",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/custom-instruction/throttle",
+            name: "throttle",
+            component: "custom-instruction/throttle/throttle",
+            meta: {
+              title: "throttle",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            }
+          },
+          {
+            path: "/custom-instruction/test-instruction",
+            name: "test-instruction",
+            component: "custom-instruction/test-instruction/test-instruction",
+            meta: {
+              title: "test-instruction",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 3
+            }
+          }
+        ]
+      },
+      {
+        path: "/personal-center",
+        name: "personal-center",
+        redirect: "/personal-center/userinfo",
+        meta: {
+          title: "personal-center",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "user",
+          sort: 8
+        },
+        children: [
+          {
+            path: "/personal-center/userinfo",
+            name: "userinfo",
+            component: "personal-center/userinfo/userinfo",
+            meta: {
+              title: "userinfo",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/personal-center/user-settings",
+            name: "user-settings",
+            component: "personal-center/user-settings/user-settings",
+            meta: {
+              title: "user-settings",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            }
+          }
+        ]
+      },
+      {
+        path: "/system-management",
+        name: "system-management",
+        redirect: "/system-management/account-management",
+        meta: {
+          title: "system-management",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "set",
+          sort: 9
+        },
+        children: [
+          {
+            path: "/system-management/account-management",
+            name: "account-management",
+            component: "system-management/account-management/account-management",
+            meta: {
+              title: "account-management",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          },
+          {
+            path: "/system-management/role-management",
+            name: "role-management",
+            component: "system-management/role-management/role-management",
+            meta: {
+              title: "role-management",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            }
+          },
+          {
+            path: "/system-management/menu-management",
+            name: "menu-management",
+            component: "system-management/menu-management/menu-management",
+            meta: {
+              title: "menu-management",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 3
+            }
+          },
+          {
+            path: "/system-management/division-management",
+            name: "division-management",
+            component: "system-management/division-management/division-management",
+            meta: {
+              title: "division-management",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 4
+            }
+          },
+          {
+            path: "/system-management/dictionary-management",
+            name: "dictionary-management",
+            component: "system-management/dictionary-management/dictionary-management",
+            meta: {
+              title: "dictionary-management",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 5
+            }
+          },
+          {
+            path: "/system-management/system-log",
+            name: "system-log",
+            component: "system-management/system-log/system-log",
+            meta: {
+              title: "system-log",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 6
+            }
+          }
+        ]
+      },
+      {
+        path: "/external-links",
+        name: "external-links",
+        redirect: "/external-links/inline-page",
+        meta: {
+          title: "external-links",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "link",
+          sort: 10
+        },
+        children: [
+          {
+            path: "/external-links/inline-page",
+            name: "inline-page",
+            redirect: "/external-links/inline-page/uigradients",
+            meta: {
+              title: "inline-page",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            },
+            children: [
+              {
+                path: "/external-links/inline-page/uigradients",
+                name: "uigradients",
+                component: "external-links/inline-page/inline-page",
+                meta: {
+                  title: "uigradients",
+                  hide: false,
+                  keepAlive: true,
+                  disable: false,
+                  affix: false,
+                  link: "https://uigradients.com/#HoneyDew", // 链接
+                  iframe: true, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 1
+                }
+              },
+              {
+                path: "/external-links/inline-page/color-taking-tool",
+                name: "color-taking-tool",
+                component: "external-links/inline-page/inline-page",
+                meta: {
+                  title: "color-taking-tool",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://photokit.com/colors/eyedropper/?lang=zh", // 链接
+                  iframe: true, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 2
+                }
+              },
+              {
+                path: "/external-links/inline-page/grid-generator",
+                name: "grid-generator",
+                component: "external-links/inline-page/inline-page",
+                meta: {
+                  title: "grid-generator",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://cssgrid-generator.netlify.app/", // 链接
+                  iframe: true, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 3
+                }
+              }
+            ]
+          },
+          {
+            path: "/external-links/external-page",
+            name: "external-page",
+            redirect: "/external-links/external-page/link-vue",
+            meta: {
+              title: "external-page",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 2
+            },
+            children: [
+              {
+                path: "/external-links/external-page/link-SnowAdmin-Docs",
+                name: "link-SnowAdmin-Docs",
+                component: "external-links/external-page/external-page",
+                meta: {
+                  title: "link-SnowAdmin-Docs",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "http://101.126.93.137:81/", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 5
+                }
+              },
+              {
+                path: "/external-links/external-page/link-vue",
+                name: "link-vue",
+                component: "external-links/external-page/external-page",
+                meta: {
+                  title: "link-vue",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://cn.vuejs.org/", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 1
+                }
+              },
+              {
+                path: "/external-links/external-page/link-vite",
+                name: "link-vite",
+                component: "external-links/external-page/external-page",
+                meta: {
+                  title: "link-vite",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://www.vitejs.net/", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 2
+                }
+              },
+              {
+                path: "/external-links/external-page/link-github",
+                name: "link-github",
+                component: "external-links/external-page/external-page",
+                meta: {
+                  title: "link-github",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://github.com/WANG-Fan0912/SnowAdmin", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 3
+                }
+              },
+              {
+                path: "/external-links/external-page/link-juejin",
+                name: "link-juejin",
+                component: "external-links/external-page/external-page",
+                meta: {
+                  title: "link-juejin",
+                  hide: false,
+                  disable: false,
+                  keepAlive: true,
+                  affix: false,
+                  link: "https://juejin.cn/user/1728883023940600", // 链接
+                  iframe: false, // 区分是否内链 true内链 false外链
+                  roles: ["admin"],
+                  icon: "icon-menu",
+                  sort: 4
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: "/disable-menu",
+        name: "disable-menu",
+        redirect: "/disable-menu/disable-menu-1",
+        meta: {
+          title: "disable-menu",
+          hide: false,
+          disable: true,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "switch",
+          sort: 11
+        },
+        children: [
+          {
+            path: "/disable-menu/disable-menu-1",
+            name: "disable-menu-1",
+            component: "disable-menu/disable-menu-1/disable-menu-1",
+            meta: {
+              title: "disable-menu-1",
+              hide: false,
+              disable: true,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          }
+        ]
+      },
+      {
+        path: "/hide-menu",
+        name: "hide-menu",
+        redirect: "/hide-menu/hide-menu-1",
+        meta: {
+          title: "hide-menu",
+          hide: true,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "switch",
+          sort: 12
+        },
+        children: [
+          {
+            path: "/hide-menu/hide-menu-1",
+            name: "hide-menu-1",
+            component: "hide-menu/hide-menu-1/hide-menu-1",
+            meta: {
+              title: "hide-menu-1",
+              hide: true,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 1
+            }
+          }
+        ]
+      },
+      {
+        path: "/internationalization",
+        name: "internationalization",
+        component: "internationalization/internationalization",
+        meta: {
+          title: "internationalization",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin", "common"],
+          svgIcon: "earth",
+          sort: 13
+        }
+      },
+      {
+        path: "/about-project",
+        name: "about-project",
+        component: "about-project/about-project",
+        meta: {
+          title: "about-project",
+          hide: false,
+          disable: false,
+          keepAlive: true,
+          affix: false,
+          link: "",
+          iframe: false,
+          roles: ["admin", "common"],
+          svgIcon: "about",
+          sort: 14
+        }
+      }
+    ]
+  }
+];
diff --git a/src/mock/index.ts b/src/mock/index.ts
index c54d28d..b588aff 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -2,12 +2,8 @@ import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
 
 import testModule from "./test/index";
 import userModule from "./user/index";
-// import tableModule from './person/index'
-// import systemModule from './system/index'
-// import fileModule from './file/index'
-// import cateModule from './cate/index'
-// import areaModule from './area/index'
+import systemModule from "./system/index";
 
 export function setupProdMockServer() {
-  createProdMockServer([...testModule, ...userModule]);
+  createProdMockServer([...testModule, ...userModule, ...systemModule]);
 }
diff --git a/src/mock/system/index.ts b/src/mock/system/index.ts
new file mode 100644
index 0000000..0a135f6
--- /dev/null
+++ b/src/mock/system/index.ts
@@ -0,0 +1,3 @@
+import menu from "./menu";
+
+export default [...menu];
diff --git a/src/mock/system/menu.ts b/src/mock/system/menu.ts
new file mode 100644
index 0000000..591a736
--- /dev/null
+++ b/src/mock/system/menu.ts
@@ -0,0 +1,95 @@
+import type { MockMethod } from "vite-plugin-mock";
+import { resultSuccess, resultError } from "../_utils";
+import systemMenu from "../_data/system_menu";
+
+/**
+ * 初始化
+ * 后端TODO
+ * 1、根据token判断角色
+ * 2、根据角色过滤权限树
+ * 3、路由树排序
+ * 4、返回路由树
+ *
+ * 前端TODO
+ * 1、将模块设置为真实模块
+ * 2、存储路由树，用于生成菜单
+ * 3、根据树生成一维路由数组
+ * 4、动态添加路由，设置完整的路由，二维路由：顶层路由 + 二级的一维路由
+ * 5、动态添加路由
+ * 6、缓存一维路由
+ */
+
+// post请求body,get请求query
+export default [
+  {
+    url: "/mock/menu/list",
+    method: "get",
+    timeout: 300,
+    response: ({ headers }: any) => {
+      let token = headers.authorization;
+      // 这里模拟两个角色，admin、common
+      let userRoles = token === "Admin-Token" ? ["admin"] : ["common"];
+      systemMenu[0].children = treeSort(filterByRole(systemMenu[0].children, userRoles));
+      return resultSuccess(systemMenu);
+    }
+  }
+] as MockMethod[];
+
+/**
+ * 路由树递归排序
+ * 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;
+  });
+
+  // 深层递归
+  return tree.map((item: any) => {
+    if (item?.children?.length > 0) {
+      item.children = treeSort(item.children);
+    }
+    return item;
+  });
+};
+
+/**
+ * 过滤路由树，返回有权限的树
+ * 1、先过滤停用的菜单，该菜单是不可访问的，直接去掉
+ * 2、根据角色权限过滤原始路由树
+ * @param {array} tree 根据角色权限过滤原始路由树
+ * @returns 返回有权限的树
+ */
+export const filterByRole = (tree: any, userRoles: Array<string>) => {
+  return tree.filter((item: any) => {
+    // 过滤角色权限
+    if (item?.meta?.roles) {
+      if (!roleBase(item.meta.roles, userRoles)) return false;
+    }
+    // 过滤是否禁用
+    if (item?.meta?.disable) return false;
+    if (item.children) item.children = filterByRole(item.children, userRoles);
+    return true;
+  });
+};
+
+/**
+ * 校验该角色是否有路由权限
+ * @param {array} roles 路由的角色权限
+ * @returns 是否有权限 true是 false否
+ */
+export const roleBase = (roles: Array<string>, userRoles: Array<string>) => {
+  return userRoles.some((item: string) => roles.includes(item));
+};
diff --git a/src/mock/user/index.ts b/src/mock/user/index.ts
index f977be3..6f1485c 100644
--- a/src/mock/user/index.ts
+++ b/src/mock/user/index.ts
@@ -10,8 +10,10 @@ export default [
     response: ({ body }) => {
       let { username, password } = body;
       if (username === "admin" && password === "123456") {
-        // 请求成功返回token
-        return resultSuccess({ token: "Your-Token" });
+        return resultSuccess({ token: "Admin-Token" });
+      }
+      if(username === "common" && password === "123456"){
+        return resultSuccess({ token: "Common-Token" });
       }
       return resultError(null, "账号或者密码错误", 500);
     }
diff --git a/src/router/index.ts b/src/router/index.ts
index 50631ea..2af8923 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,11 +2,12 @@ import NProgress from "@/config/nprogress";
 import pinia from "@/store/index";
 import { createRouter, createWebHashHistory } from "vue-router";
 import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
-import { initSetRouter, currentlyRoute } from "@/router/route-output";
+import { currentlyRoute } from "@/router/route-output";
 import { storeToRefs } from "pinia";
 import { useUserInfoStore } from "@/store/modules/user-info";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
+import { loadingPage } from "@/utils/loading-page";
 
 /**
  * 创建vue的路由示例
@@ -55,7 +56,7 @@ router.beforeEach(async (to, from, next) => {
     currentlyRoute(to.name as string);
   } else {
     // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
-    const routeStore = useRoutesListStore(pinia);
+    const routeStore = useRoutesConfigStore(pinia);
     const { routeTree } = storeToRefs(routeStore);
 
     // 获取外链路由的处理函数
@@ -66,7 +67,8 @@ router.beforeEach(async (to, from, next) => {
     // 如果缓存的路由是0，则说明未动态添加路由，先添加再跳转
     // 解决刷新页面404的问题
     if (routeTree.value.length == 0) {
-      await initSetRouter();
+      loadingPage.start();
+      await routeStore.initSetRouter();
       // 处理外链跳转
       openExternalLinks(to);
       // 处理完重新跳转
diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index d9e2cf5..ddb89cb 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -1,51 +1,10 @@
 import pinia from "@/store/index";
-import router from "@/router/index.ts";
-import { RouteRecordRaw } from "vue-router";
-import { dynamicRoutes } from "@/router/route";
 import { storeToRefs } from "pinia";
-import { useUserInfoStore } from "@/store/modules/user-info";
-import { useRoutesListStore } from "@/store/modules/route-list";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { deepClone, arrayFlattened } from "@/utils/index";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
-import { loadingPage } from "@/utils/loading-page";
-
-/**
- * 初始化
- * 1、过滤有权限的路由树并存入store，用于菜单生成
- * 2、根据路由树生成一维数组
- * 3、设置完整的路由，顶层路由 + 一维路由数组，addRoute动态添加路由，KeepAlive支持二级路由缓存
- */
-export async function initSetRouter() {
-  // 初始化路由，渲染loading
-  loadingPage.start();
-  const store = useRoutesListStore(pinia);
-  // 根据角色权限过滤树并将其排序
-  const originTree: RouteRecordRaw[] = deepClone(dynamicRoutes);
-  let filteredTree = treeSort(filterByRole(originTree[0].children));
-  await store.setRouteTree(filteredTree);
-  // 根据树生成一维路由数组
-  const flattenedArray = linearArray(filteredTree);
-  // 设置完整的路由，二维路由：顶层路由 + 二级的一维路由
-  const addBeforeTree = originTree.map(item => {
-    if (flattenedArray.length > 0) item.redirect = flattenedArray[0].path;
-    item.children = flattenedArray;
-    return item;
-  });
-  // 动态添加路由
-  addBeforeTree.forEach((route: RouteRecordRaw) => router.addRoute(route));
-  // 设置一维路由
-  setRouting(flattenedArray);
-}
-
-/**
- * 设置有访问权限的一维路由数组
- * @param {array} flattenedArray 一维路由数组
- */
-export function setRouting(flattenedArray: any) {
-  const store = useRoutesListStore(pinia);
-  store.setRouteList(flattenedArray); // 缓存一维路由
-}
+import Layout from "@/layout/index.vue";
 
 /**
  * 路由树转一维数组
@@ -57,67 +16,6 @@ export function linearArray(tree: any) {
   return arrayFlattened(nodes, "children");
 }
 
-/**
- * 过滤路由树，返回有权限的树
- * 1、先过滤停用的菜单，该菜单是不可访问的，直接去掉
- * 2、根据角色权限过滤原始路由树
- * @param {array} tree 根据角色权限过滤原始路由树
- * @returns 返回有权限的树
- */
-export const filterByRole = (tree: any) => {
-  return tree.filter((item: any) => {
-    // 过滤角色权限
-    if (item?.meta?.roles) {
-      if (!roleBase(item.meta.roles)) return false;
-    }
-    // 过滤是否禁用
-    if (item?.meta?.disable) return false;
-    if (item.children) item.children = filterByRole(item.children);
-    return true;
-  });
-};
-
-/**
- * 路由树递归排序
- * 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;
-  });
-
-  // 深层递归
-  return tree.map((item: any) => {
-    if (item?.children?.length > 0) {
-      item.children = treeSort(item.children);
-    }
-    return item;
-  });
-};
-
-/**
- * 校验该角色是否有路由权限
- * @param {array} roles 路由的角色权限
- * @returns 是否有权限 true是 false否
- */
-export const roleBase = (roles: Array<string>) => {
-  const store = useUserInfoStore(pinia);
-  const { account } = storeToRefs(store);
-  return account.value.roles.some((item: string) => roles.includes(item));
-};
-
 /**
  * 统一处理所有的路由跳转：当前路由高亮、tabs栏数据
  * 处理项目内跳转，存入当前跳转路由和tabs标签栏数据
@@ -127,7 +25,7 @@ export const roleBase = (roles: Array<string>) => {
 export const currentlyRoute = (name: string) => {
   const themeStore = useThemeConfig();
   const { isTabs } = storeToRefs(themeStore);
-  const store = useRoutesListStore(pinia);
+  const store = useRoutesConfigStore(pinia);
   const { tabsList, routeList } = storeToRefs(store);
   // tabs无数据则默认添加首页
   if (tabsList.value.length == 0 && routeList.value.length != 0) {
@@ -149,3 +47,46 @@ export const currentlyRoute = (name: string) => {
   if (!find.meta.keepAlive || !isTabs.value) return;
   store.setRouteNames(find.name); // 缓存路由name
 };
+
+/**
+ * 模块替换，深层递归，对所有的路由中符合条件的模块进行转换
+ * @param {array} tree 过滤角色权限后的树
+ */
+export const moduleReplacement = (tree: any) => {
+  if (tree?.length == 0) return [];
+  tree.map((item: any) => {
+    // 模块匹配以及转换
+    moduleMatch(item);
+    if (item?.children?.length > 0) {
+      item.children = moduleReplacement(item.children);
+    }
+  });
+  return tree;
+};
+
+/**
+ * 模块匹配
+ * 1、导入 views 目录及其子目录下的所有 .vue 文件。
+ * 2、匹配顶层layout，替换真实模块，layout为应用的基础结构
+ * 3、匹配views下的所有文件路径，将模块转换为按需引入的真实模块
+ * 4、未匹配上，不做处理
+ */
+// 匹配views里面所有的.vue文件
+const modules = import.meta.glob("@/views/**/*.vue");
+export const moduleMatch = (item: any) => {
+  // 若是layout，则直接给予顶层layout
+  if (item.component === "layout") {
+    // 布局组件是应用的基础结构，在应用启动时就需要被加载，因此不需要按需引入
+    return (item.component = Layout);
+  }
+  // 其它情况下，匹配每个views文件夹下的文件路径
+  for (const key in modules) {
+    const dir = key.split("views/")[1].replace(".vue", "");
+    // 若匹配上，则替换真实模块
+    if (item.component === dir) {
+      // 按需引入modules
+      // 将模块的导入操作和实际使用操作解耦，使得我们可以在需要的时候才执行导入操作
+      item.component = () => modules[key]();
+    }
+  }
+};
diff --git a/src/store/modules/route-list.ts b/src/store/modules/route-config.ts
similarity index 58%
rename from src/store/modules/route-list.ts
rename to src/store/modules/route-config.ts
index 6b5002f..32b238b 100644
--- a/src/store/modules/route-list.ts
+++ b/src/store/modules/route-config.ts
@@ -1,15 +1,19 @@
 import { defineStore } from "pinia";
-
+import router from "@/router/index.ts";
+import { RouteRecordRaw } from "vue-router";
+import { getMenuListAPI } from "@/api/modules/system/index";
+import { moduleReplacement, linearArray } from "@/router/route-output";
 /**
  * 路由列表
- * @methods setRouteTree  设置路由树
- * @methods setRoutesList 设置路由一维数据
  * @methods setRouteNames 设置路由名称集合
  * @methods setTabs 添加tabs标签页
  * @methods setCurrentRoute 设置系统内的当前路由
  * @methods removeTabsList 删除tabs页的指定路由
+ * @methods removeRouteName 删除缓存路由名，用于取消页面缓存，单个删除
+ * @methods removeRouteNames 删除缓存路由名，用于取消页面缓存，批量删除
+ * @methods initSetRouter 路由初始化
  */
-export const useRoutesListStore = defineStore("route-list", {
+export const useRoutesConfigStore = defineStore("route-config", {
   state: (): any => ({
     routeTree: [], // 有访问权限的路由树
     routeList: [], // 有访问权限的一维路由数组
@@ -18,20 +22,6 @@ export const useRoutesListStore = defineStore("route-list", {
     currentRoute: {} // 当前路由
   }),
   actions: {
-    /**
-     * 设置有访问权限的路由树
-     * @param {Array} data 一维路由数组
-     */
-    async setRouteTree(data: Menu.MenuOptions) {
-      this.routeTree = data;
-    },
-    /**
-     * 设置有访问权限的一维路由数组
-     * @param {Array} data 一维路由数组
-     */
-    setRouteList(data: any) {
-      this.routeList = data;
-    },
     /**
      * 设置可缓存路由的路由名
      * @param {string} name 路由名
@@ -65,6 +55,7 @@ export const useRoutesListStore = defineStore("route-list", {
      */
     removeTabsList(key: string) {
       const index = this.tabsList.findIndex((item: Menu.MenuOptions) => item.name === key);
+      if (this.tabsList[index].meta.affix) return;
       if (index === -1) return;
       this.tabsList.splice(index, 1);
     },
@@ -83,6 +74,32 @@ export const useRoutesListStore = defineStore("route-list", {
      */
     removeRouteNames(list: Array<string>) {
       this.cacheRoutes = this.cacheRoutes.filter((item: string) => !list.includes(item));
+    },
+    /**
+     * 路由初始化
+     * 1、将模块设置为真实模块
+     * 2、存储路由树，用于生成菜单
+     * 3、根据树生成一维路由数组
+     * 4、动态添加路由，设置完整的路由，二维路由：顶层路由 + 二级的一维路由
+     * 5、动态添加路由
+     * 6、缓存一维路由
+     */
+    async initSetRouter() {
+      // 1、获取过滤角色权限后的树，后端做排序处理
+      let { data } = await getMenuListAPI();
+      // 2、将模块设置为真实模块
+      let tree = moduleReplacement(data);
+      // 3、存储路由树，用于生成菜单
+      this.routeTree = tree[0].children;
+      // 4、根据树生成一维路由数组
+      tree[0].children = linearArray(tree[0].children);
+      // 5、设置完整的路由，二维路由：顶层路由 + 二级的一维路由
+      tree[0].redirect = tree[0].children[0].path;
+      // 6、动态添加路由
+      tree.forEach((route: RouteRecordRaw) => router.addRoute(route));
+      console.log("最终路由", tree);
+      // 7、缓存一维路由
+      this.routeList = tree[0].children;
     }
   }
 });
diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue
index 484a6f8..2fb5939 100644
--- a/src/views/login/components/login-form.vue
+++ b/src/views/login/components/login-form.vue
@@ -42,7 +42,6 @@ import { Message } from "@arco-design/web-vue";
 import { useRouter } from "vue-router";
 import { useUserInfoStore } from "@/store/modules/user-info";
 import { loginAPI, getUserInfoAPI } from "@/api/modules/user/index";
-
 const router = useRouter();
 const form = ref({
   username: "admin",
@@ -86,7 +85,7 @@ const onSubmit = async ({ errors }: any) => {
   if (errors) return;
   let res = await loginAPI(form.value);
   let stores = useUserInfoStore();
-  stores.setToken(res.data.token);
+  await stores.setToken(res.data.token);
   let account = await getUserInfoAPI();
   stores.setAccount(account.data); // 存储用户信息
   Message.success("登录成功");
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 4c551f8..1e1d65b 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -17,3 +17,4 @@ declare module "nprogress";
 declare module "@wangeditor/editor-for-vue";
 declare module "@/directives/modules/custom";
 declare module "mockjs";
+declare module "@/store/modules/route-config";