diff --git a/.eslintrc.js b/.eslintrc.js
index 839eaf06b67cb7a16f1eb9439accd65cc87cfe5a..e1aa19ee3a80aa8b6b3d8d6d5e71f8c06be897f8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -66,5 +66,7 @@ module.exports = {
     'no-param-reassign': 0,
     'prefer-regex-literals': 0,
     'import/no-extraneous-dependencies': 0,
+    'no-underscore-dangle': 0,
+    'import/no-cycle': 1,
   },
 };
diff --git a/.gitignore b/.gitignore
index 6a86981ba9593a418f1c26eb29e0dfd602c48f35..d5ccaa92ebf4e81cb15ecae53f60b5f54306f436 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,5 @@ dist-ssr
 .idea
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
+*.log
diff --git a/config/plugin/styleImport.ts b/config/plugin/styleImport.ts
index acd74ddde2ff2532b6f80d75ca57dc6479332fea..80e81c3a5e08b4c3db3b7d193aaa256506728665 100644
--- a/config/plugin/styleImport.ts
+++ b/config/plugin/styleImport.ts
@@ -74,6 +74,7 @@ export default function configStyleImportPlugin() {
           if (ignoreList.includes(name)) return '';
           // eslint-disable-next-line no-prototype-builtins
           return replaceList.hasOwnProperty(name)
+            // @ts-ignore
             ? `@arco-design/web-vue/es/${replaceList[name]}/style/css.js`
             : `@arco-design/web-vue/es/${name}/style/css.js`;
           // less
diff --git a/package.json b/package.json
index 98c1f00273ab4166ba14a935568bd7b894766084..42f2cb257fc01a3cdfd1b901768b6e596a404663 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.9",
+    "pinia-plugin-persistedstate": "^2.3.0",
     "query-string": "^7.0.1",
     "vue": "^3.2.31",
     "vue-echarts": "^6.0.0",
diff --git a/src/api/user.ts b/src/api/user.ts
index 35b8812098b416efbe9c6094b1e57088ba78277d..04ca91e3fbf650b22f281a77cdbb0684a87b6092 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
-import type { RouteRecordNormalized } from 'vue-router';
-import { UserState } from '@/store/modules/user/types';
+import type { UserState } from '@/store/modules/user/types';
+import type { Menu } from "@/types/modules/system";
 
 export interface LoginData {
   username: string;
@@ -23,5 +23,5 @@ export function getUserInfo() {
 }
 
 export function getMenuList() {
-  return axios.post<RouteRecordNormalized[]>('/api/user/menu');
+  return axios.post<Menu[]>('/api/user/menu');
 }
diff --git a/src/components/global-setting/block.vue b/src/components/global-setting/block.vue
index 340c6b8e7a8e1d390da954f749e19bf04da20786..b8a2bb44c560bf3a8c93a58a1d95d607bdcc50b0 100644
--- a/src/components/global-setting/block.vue
+++ b/src/components/global-setting/block.vue
@@ -44,7 +44,7 @@
     key: string;
     value: unknown;
   }) => {
-    if (key === 'menuFromServer' && value) {
+    if (value) {
       await appStore.fetchServerMenuConfig();
     }
     appStore.updateSettings({ [key]: value });
diff --git a/src/components/global-setting/index.vue b/src/components/global-setting/index.vue
index 7712bada2cc4feb713ce80e575cdcc49dc067baf..a887b8c53b2fb8139949ab7c34b38269e8db62d2 100644
--- a/src/components/global-setting/index.vue
+++ b/src/components/global-setting/index.vue
@@ -43,11 +43,6 @@
     },
     { name: '底部', key: 'footer', defaultVal: appStore.footer },
     { name: '多页签', key: 'tabBar', defaultVal: appStore.tabBar },
-    {
-      name: '菜单来源于后台',
-      key: 'menuFromServer',
-      defaultVal: appStore.menuFromServer,
-    },
     {
       name: '菜单宽度 (px)',
       key: 'menuWidth',
diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index f7b3ef8f58ca7421e702e8d200d0242a77e7cb82..2361dc965c5ef56ded2ddf4d09dc96bd0e3537ad 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -71,8 +71,8 @@
         return result;
       };
       listenerRouteChange((newRoute) => {
-        const { requiresAuth, activeMenu, hidden } = newRoute.meta;
-        if (requiresAuth && (!hidden || activeMenu)) {
+        const { activeMenu, hidden } = newRoute.meta;
+        if (!hidden || activeMenu) {
           const menuOpenKeys = findMenuOpenKeys(
             (activeMenu || newRoute.name) as string
           );
diff --git a/src/components/menu/useMenuTree.ts b/src/components/menu/useMenuTree.ts
index 5b95ded085d4dd2b2895f83f1bd2fb0714d0afd7..7787da916d1be6136f3de8d0e5c26f6ce2424cea 100644
--- a/src/components/menu/useMenuTree.ts
+++ b/src/components/menu/useMenuTree.ts
@@ -2,17 +2,11 @@ import { computed } from 'vue';
 import { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
 import usePermission from '@/hooks/permission';
 import { useAppStore } from '@/store';
-import appClientMenus from '@/router/app-menus';
 
 export default function useMenuTree() {
   const permission = usePermission();
   const appStore = useAppStore();
-  const appRoute = computed(() => {
-    if (appStore.menuFromServer) {
-      return appStore.appAsyncMenus;
-    }
-    return appClientMenus;
-  });
+  const appRoute = computed(() => appStore.appAsyncMenus);
   const menuTree = computed(() => {
     const copyRouter = JSON.parse(JSON.stringify(appRoute.value));
     copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
diff --git a/src/components/tab-bar/tab-item.vue b/src/components/tab-bar/tab-item.vue
index bc4e49278f2e6dd0c891d3b27e2e0483f825bc77..fc67b750f06a13961067c0189117a44d346ea00e 100644
--- a/src/components/tab-bar/tab-item.vue
+++ b/src/components/tab-bar/tab-item.vue
@@ -45,7 +45,7 @@
   import { useRouter, useRoute } from 'vue-router';
   import { useTabBarStore } from '@/store';
   import type { TagProps } from '@/store/modules/tab-bar/types';
-  import { DEFAULT_ROUTE_NAME } from '@/router/routes';
+  import { DEFAULT_ROUTE_NAME } from '@/router/constants';
 
   // eslint-disable-next-line no-shadow
   enum Eaction {
diff --git a/src/config/settings.json b/src/config/settings.json
index 8ee24c35bea86c5599adbc0d6cfd5b0b6390f03b..4e16fd8076da8be930294a560566b306eaf4f895 100644
--- a/src/config/settings.json
+++ b/src/config/settings.json
@@ -10,6 +10,5 @@
   "globalSettings": false,
   "device": "desktop",
   "tabBar": true,
-  "menuFromServer": true,
   "serverMenu": []
 }
diff --git a/src/layout/default-layout.vue b/src/layout/default-layout.vue
index 7f5888fcb22896fbf398fdcaeeb287aa1eb93426..eafdb6c44f14464beec7fbc3af4021de3fc43fd3 100644
--- a/src/layout/default-layout.vue
+++ b/src/layout/default-layout.vue
@@ -34,7 +34,7 @@
         </a-drawer>
         <a-layout class="layout-content" :style="paddingStyle">
           <TabBar v-if="appStore.tabBar" />
-          <a-layout-content>
+          <a-layout-content class="container">
             <PageLayout />
           </a-layout-content>
           <Footer v-if="footer" />
@@ -104,6 +104,12 @@
   @nav-size-height: 60px;
   @layout-max-width: 1100px;
 
+  .container {
+    background-color: var(--color-fill-2);
+    padding: 16px 20px 0;
+    display: flex;
+  }
+
   .layout {
     width: 100%;
     height: 100%;
diff --git a/src/layout/page-layout.vue b/src/layout/page-layout.vue
index 69d5a54fb8bf22b9336e6080f857e012b5dda4f2..cbf73266b97edaad14047601c3c2067c252f6be4 100644
--- a/src/layout/page-layout.vue
+++ b/src/layout/page-layout.vue
@@ -1,12 +1,7 @@
 <template>
   <router-view v-slot="{ Component, route }">
     <transition name="fade" mode="out-in" appear>
-      <component
-        :is="Component"
-        v-if="!route.meta.cache"
-        :key="route.fullPath"
-      />
-      <keep-alive v-else :include="cacheList">
+      <keep-alive :include="cacheList">
         <component :is="Component" :key="route.fullPath" />
       </keep-alive>
     </transition>
diff --git a/src/mock/index.ts b/src/mock/index.ts
index cf1af17edaaf8e688f60fa14fb8785f106700bb8..9ea37341566325d5122f1d1f318302f436689bc8 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -6,5 +6,5 @@ import './message-box';
 import '@/views/dashboard/workplace/mock';
 
 Mock.setup({
-  timeout: '600-1000',
+  timeout: '100-500',
 });
diff --git a/src/mock/user.ts b/src/mock/user.ts
index dedd60f74f3e4c70df4bd21b3164c0d3bb8642b0..73a9553330c6ff2315919f37c43f0d6431566e18 100644
--- a/src/mock/user.ts
+++ b/src/mock/user.ts
@@ -18,7 +18,7 @@ setupMock({
         return successResponseWrap({
           name: '王令',
           avatar:
-            '//lf1-xgcdn-tos.pstatp.com/obj/vcloud/vadmin/start.8e0e4855ee346a46ccff8ff3e24db27b.png',
+            'https://portrait.gitee.com/uploads/avatars/user/2548/7645447_wl2603820757_1615284108.png',
           email: 'wangliqun@email.com',
           job: 'frontend',
           jobName: '前端艺术家',
@@ -72,31 +72,68 @@ setupMock({
       const menuList = [
         {
           path: '/dashboard',
-          name: 'dashboard',
+          name: 'Dashboard',
+          component: '/layout/default-layout.vue',
           meta: {
             title: '仪表盘',
-            requiresAuth: true,
             icon: 'icon-dashboard',
-            order: 1,
+            cache: true
           },
           children: [
             {
               path: 'workplace',
               name: 'Workplace',
+              component: '/views/dashboard/workplace/index.vue',
               meta: {
                 title: '工作台',
-                requiresAuth: true,
+                cache: true,
+                affix: true
+              }
+            }
+          ]
+        },
+        {
+          path: '/system',
+          name: 'system',
+          component: '/layout/default-layout.vue',
+          meta: {
+            title: '系统管理',
+            icon: 'icon-dashboard',
+            order: 1,
+            cache: true
+          },
+          children: [
+            {
+              path: 'user',
+              name: 'User',
+              component: '/views/system/user/index.vue',
+              meta: {
+                title: '用户管理',
+                cache: false,
+                affix: true,
               },
             },
             {
-              path: 'https://arco.design',
-              name: 'arcoWebsite',
+              path: 'role',
+              name: 'Role',
+              component: '/views/system/roles/index.vue',
               meta: {
-                title: 'arcoWebsite'
+                title: '角色管理',
+                cache: true,
+                affix: true,
               },
             },
           ],
         },
+        {
+          name: 'Arco Design',
+          path: 'https://arco.design/vue/docs/start',
+          meta: {
+            title: '组件文档',
+            icon: 'icon-link',
+            order: 100
+          }
+        }
       ];
       return successResponseWrap(menuList);
     });
diff --git a/src/router/app-menus/index.ts b/src/router/app-menus/index.ts
deleted file mode 100644
index 2136c9698974d437d749202bc228e0742b59bdcf..0000000000000000000000000000000000000000
--- a/src/router/app-menus/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { appRoutes, appExternalRoutes } from '../routes';
-
-const mixinRoutes = [...appRoutes, ...appExternalRoutes];
-
-const appClientMenus = mixinRoutes.map((el) => {
-  const { name, path, meta, redirect, children } = el;
-  return {
-    name,
-    path,
-    meta,
-    redirect,
-    children,
-  };
-});
-
-export default appClientMenus;
diff --git a/src/router/constants.ts b/src/router/constants.ts
index 7c33ca4253120c9344c02f8410fd8bc1b299985f..1292fc9eb5657e69a649d02e0bc3c92cf503d304 100644
--- a/src/router/constants.ts
+++ b/src/router/constants.ts
@@ -1,5 +1,3 @@
-export const DEFAULT_LAYOUT = () => import('@/layout/default-layout.vue');
-
 export const WHITE_LIST = [
   { name: 'notFound', children: [] },
   { name: 'login', children: [] },
@@ -8,3 +6,11 @@ export const WHITE_LIST = [
 export const NOT_FOUND = {
   name: 'notFound',
 };
+
+export const DEFAULT_ROUTE_NAME = 'Workplace';
+
+export const DEFAULT_ROUTE = {
+  title: '工作台',
+  name: DEFAULT_ROUTE_NAME,
+  fullPath: '/dashboard/workplace',
+};
diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index ad3724e97de8cadab3745f1d7b0b09cf97dc3493..015e5472666ffeb41b00f2ceb45a3a3971708959 100644
--- a/src/router/guard/permission.ts
+++ b/src/router/guard/permission.ts
@@ -1,55 +1,45 @@
-import type { Router, RouteRecordNormalized } from 'vue-router';
+import type { Router } from 'vue-router';
 import NProgress from 'nprogress'; // progress bar
 
 import usePermission from '@/hooks/permission';
-import { useUserStore, useAppStore } from '@/store';
-import { appRoutes } from '../routes';
+import { useAppStore } from '@/store';
+import { buildVueRouter } from "@/utils/menu";
 import { WHITE_LIST, NOT_FOUND } from '../constants';
 
 export default function setupPermissionGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
     const appStore = useAppStore();
-    const userStore = useUserStore();
     const Permission = usePermission();
     const permissionsAllow = Permission.accessRouter(to);
-    if (appStore.menuFromServer) {
-      // 针对来自服务端的菜单配置进行处理
-      // Handle routing configuration from the server
+    // 针对来自服务端的菜单配置进行处理
+    // Handle routing configuration from the server
 
-      // 根据需要自行完善来源于服务端的菜单配置的permission逻辑
-      // Refine the permission logic from the server's menu configuration as needed
-      if (
-        !appStore.appAsyncMenus.length &&
-        !WHITE_LIST.find((el) => el.name === to.name)
-      ) {
-        await appStore.fetchServerMenuConfig();
-      }
-      const serverMenuConfig = [...appStore.appAsyncMenus, ...WHITE_LIST];
+    // 根据需要自行完善来源于服务端的菜单配置的permission逻辑
+    // Refine the permission logic from the server's menu configuration as needed
+    if (
+      !appStore.appAsyncMenus.length &&
+      !WHITE_LIST.find((el) => el.name === to.name)
+    ) {
+      await appStore.fetchServerMenuConfig();
+      // @ts-ignore
+      buildVueRouter(appStore.appAsyncMenus).forEach(router.addRoute)
+    }
+    const serverMenuConfig = [...appStore.appAsyncMenus, ...WHITE_LIST];
 
-      let exist = false;
-      while (serverMenuConfig.length && !exist) {
-        const element = serverMenuConfig.shift();
-        if (element?.name === to.name) exist = true;
+    let exist = false;
+    while (serverMenuConfig.length && !exist) {
+      const element = serverMenuConfig.shift();
+      if (element?.name === to.name) exist = true;
 
-        if (element?.children) {
-          serverMenuConfig.push(
-            ...(element.children as unknown as RouteRecordNormalized[])
-          );
-        }
-      }
-      if (exist && permissionsAllow) {
-        next();
-      } else next(NOT_FOUND);
-    } else {
-      // eslint-disable-next-line no-lonely-if
-      if (permissionsAllow) next();
-      else {
-        const destination =
-          Permission.findFirstPermissionRoute(appRoutes, userStore.role) ||
-          NOT_FOUND;
-        next(destination);
+      if (element?.children) {
+        serverMenuConfig.push(
+          ...element.children
+        );
       }
     }
+    if (exist && permissionsAllow) {
+      next();
+    } else next(NOT_FOUND);
     NProgress.done();
   });
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index f0da45941f896eb75adb12ef8337373e6bfe8474..f37cdebb179a7b587e17bc318689c785f8bb45ec 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,8 +2,10 @@ import { createRouter, createWebHistory } from 'vue-router';
 import NProgress from 'nprogress'; // progress bar
 import 'nprogress/nprogress.css';
 
-import { appRoutes } from './routes';
+import { useAppStore } from "@/store";
+import { buildVueRouter } from "@/utils/menu";
 import createRouteGuard from './guard';
+import { DEFAULT_ROUTE } from "./constants";
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
@@ -12,7 +14,7 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: 'login',
+      redirect: DEFAULT_ROUTE.fullPath,
     },
     {
       path: '/login',
@@ -22,10 +24,22 @@ const router = createRouter({
         requiresAuth: false,
       },
     },
-    ...appRoutes,
     {
       path: '/:pathMatch(.*)*',
       name: 'notFound',
+      beforeEnter: async (to) => {
+        const appStore = useAppStore();
+        if (
+          !appStore.appAsyncMenus.length
+        ) {
+          await appStore.fetchServerMenuConfig();
+          // @ts-ignore
+          buildVueRouter(appStore.appAsyncMenus).forEach(router.addRoute)
+          await router.push({
+            path: to.fullPath
+          })
+        }
+      },
       component: () => import('@/views/not-found/index.vue'),
     },
   ],
diff --git a/src/router/routes/external-modules/arco.ts b/src/router/routes/external-modules/arco.ts
deleted file mode 100644
index 612e2369327aed273fa6d1be69296a7358ed1035..0000000000000000000000000000000000000000
--- a/src/router/routes/external-modules/arco.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  path: 'https://arco.design',
-  name: 'arcoWebsite',
-  meta: {
-    title: 'arcoWebsite',
-    icon: 'icon-link',
-    requiresAuth: true,
-    order: 8,
-  },
-};
diff --git a/src/router/routes/external-modules/faq.ts b/src/router/routes/external-modules/faq.ts
deleted file mode 100644
index 5d8bf1ad71d25b1b917aa12d7099003679ed200f..0000000000000000000000000000000000000000
--- a/src/router/routes/external-modules/faq.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  path: 'https://arco.design/vue/docs/pro/faq',
-  name: 'faq',
-  meta: {
-    title: 'menu.faq',
-    icon: 'icon-question-circle',
-    requiresAuth: true,
-    order: 9,
-  },
-};
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
deleted file mode 100644
index 55fc6305b4c57eae36260f2d16d3260483036355..0000000000000000000000000000000000000000
--- a/src/router/routes/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { RouteRecordNormalized } from 'vue-router';
-
-const modules = import.meta.globEager('./modules/*.ts');
-const externalModules = import.meta.globEager('./externalModules/*.ts');
-
-function formatModules(_modules: any, result: RouteRecordNormalized[]) {
-  Object.keys(_modules).forEach((key) => {
-    const defaultModule = _modules[key].default;
-    if (!defaultModule) return;
-    const moduleList = Array.isArray(defaultModule)
-      ? [...defaultModule]
-      : [defaultModule];
-    result.push(...moduleList);
-  });
-  return result;
-}
-
-export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);
-
-export const appExternalRoutes: RouteRecordNormalized[] = formatModules(
-  externalModules,
-  []
-);
-
-// Avoid circular references, put here
-
-export const DEFAULT_ROUTE_NAME = 'Workplace';
-
-export const DEFAULT_ROUTE = {
-  title: '工作台',
-  name: DEFAULT_ROUTE_NAME,
-  fullPath: '/dashboard/workplace',
-};
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
deleted file mode 100644
index fa6c4252c62a1d45e6f354ea5ba6cfb5891eee8d..0000000000000000000000000000000000000000
--- a/src/router/routes/modules/dashboard.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DEFAULT_LAYOUT } from '@/router/constants';
-import { AppRouteRecordRaw } from '../types';
-
-const DASHBOARD: AppRouteRecordRaw = {
-  path: '/dashboard',
-  name: 'dashboard',
-  component: DEFAULT_LAYOUT,
-  meta: {
-    title: '仪表盘',
-    requiresAuth: true,
-    icon: 'icon-dashboard',
-    order: 0,
-  },
-  children: [
-    {
-      path: 'workplace',
-      name: 'Workplace',
-      component: () => import('@/views/dashboard/workplace/index.vue'),
-      meta: {
-        title: '工作台',
-        requiresAuth: true,
-      },
-    },
-  ],
-};
-
-export default DASHBOARD;
diff --git a/src/router/routes/types.ts b/src/router/types.ts
similarity index 100%
rename from src/router/routes/types.ts
rename to src/router/types.ts
diff --git a/src/router/typings.d.ts b/src/router/typings.d.ts
index e3e7c2e3ead9510607aac9899665fa8a16fb7407..7094bb788718726faf0061d255540c50eeb70d84 100644
--- a/src/router/typings.d.ts
+++ b/src/router/typings.d.ts
@@ -3,14 +3,14 @@ import 'vue-router';
 declare module 'vue-router' {
   interface RouteMeta {
     roles?: string[]; // Controls roles that have access to the page
-    requiresAuth: boolean; // Whether login is required to access the current page (every route must declare)
+    requiresAuth?: boolean; // Whether login is required to access the current page (every route must declare)
     icon?: string; // The icon show in the side menu
     title?: string; // The title name show in side menu and breadcrumb
     hidden?: boolean; // If true, it is not displayed in the side menu
     hideChildrenInMenu?: boolean; // if set true, the children are not displayed in the side menu
     activeMenu?: string; // if set name, the menu will be highlighted according to the name you set
     order?: number; // Sort routing menu items. If set key, the higher the value, the more forward it is
-    affix?: boolean; // if set true, the tag will not affix in the tab-bar
-    cache?: boolean; // if set true, the page will not be cached
+    affix?: boolean; // if set true, the tag will affix in the tab-bar
+    cache?: boolean; // if set true, the page will be cached
   }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 3d3035f70e7ec9990b252fad6ef89ca5c8e2105e..7a6dd48a495e1f4cd650b7845c4b815d5e2ecb2a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,18 @@
 import { createPinia } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate'
 import useAppStore from './modules/app';
 import useUserStore from './modules/user';
 import useTabBarStore from './modules/tab-bar';
 
 const pinia = createPinia();
 
+pinia.use(createPersistedState({
+  storage: window.localStorage,
+  serializer: {
+    serialize: JSON.stringify,
+    deserialize: JSON.parse
+  }
+}))
+
 export { useAppStore, useUserStore, useTabBarStore };
 export default pinia;
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index 77c6c353a32c615ab8d7bfc1da1bf92fad4191c2..89b7cbafabd15cee47ffe091fa3318c5512a6e4d 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia';
 import { Notification } from '@arco-design/web-vue';
 import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface';
-import type { RouteRecordNormalized } from 'vue-router';
 import defaultSettings from '@/config/settings.json';
 import { getMenuList } from '@/api/user';
-import { AppState } from './types';
+import type { Menu } from "@/types/modules/system";
+import type { AppState } from './types';
 
 const useAppStore = defineStore('app', {
   state: (): AppState => ({ ...defaultSettings }),
@@ -16,8 +16,8 @@ const useAppStore = defineStore('app', {
     appDevice(state: AppState) {
       return state.device;
     },
-    appAsyncMenus(state: AppState): RouteRecordNormalized[] {
-      return state.serverMenu as unknown as RouteRecordNormalized[];
+    appAsyncMenus(state: AppState): Menu[] {
+      return state.serverMenu;
     },
   },
 
diff --git a/src/store/modules/app/types.ts b/src/store/modules/app/types.ts
index 0ee2329f12631736062864423971c5977229072e..39240399ea5101c5b52cd5ad54aa18739ec521dc 100644
--- a/src/store/modules/app/types.ts
+++ b/src/store/modules/app/types.ts
@@ -1,4 +1,4 @@
-import type { RouteRecordNormalized } from 'vue-router';
+import type { Menu } from "@/types/modules/system";
 
 export interface AppState {
   theme: string;
@@ -12,7 +12,6 @@ export interface AppState {
   globalSettings: boolean;
   device: string;
   tabBar: boolean;
-  menuFromServer: boolean;
-  serverMenu: RouteRecordNormalized[];
+  serverMenu: Menu[];
   [key: string]: unknown;
 }
diff --git a/src/store/modules/tab-bar/index.ts b/src/store/modules/tab-bar/index.ts
index d17bdb5dd3c10670224ae0631f4aadeafc08edba..8b4775a1e1c5e8ef3e91ccacb7f8640c953b37ad 100644
--- a/src/store/modules/tab-bar/index.ts
+++ b/src/store/modules/tab-bar/index.ts
@@ -1,6 +1,6 @@
 import type { RouteLocationNormalized } from 'vue-router';
 import { defineStore } from 'pinia';
-import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME } from '@/router/routes/index';
+import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME } from '@/router/constants';
 import { TabBarState, TagProps } from './types';
 
 const formatTag = (route: RouteLocationNormalized): TagProps => {
@@ -15,44 +15,48 @@ const formatTag = (route: RouteLocationNormalized): TagProps => {
 };
 
 const useAppStore = defineStore('tabBar', {
+  persist: {
+    key: 'tabBar',
+    paths: ['cacheTabList', 'tagList'],
+  },
   state: (): TabBarState => ({
-    cacheTabList: new Set([DEFAULT_ROUTE_NAME]),
+    cacheTabList: [DEFAULT_ROUTE_NAME],
     tagList: [DEFAULT_ROUTE],
   }),
 
   getters: {
-    getTabList(): TagProps[] {
-      return this.tagList;
+    getTabList(state: TabBarState): TagProps[] {
+      return state.tagList;
     },
-    getCacheList(): string[] {
-      return Array.from(this.cacheTabList);
+    getCacheList(state: TabBarState): string[] {
+      return Array.from(state.cacheTabList);
     },
   },
 
   actions: {
     updateTabList(route: RouteLocationNormalized) {
       this.tagList.push(formatTag(route));
-      if (route.meta.cache) {
-        this.cacheTabList.add(route.name as string);
+      if (route.meta.cache && !this.cacheTabList.includes(route.name as string)) {
+        this.cacheTabList.push(route.name as string);
       }
     },
     deleteTag(idx: number, tag: TagProps) {
       this.tagList.splice(idx, 1);
-      this.cacheTabList.delete(tag.name);
+      this.cacheTabList = this.cacheTabList.filter(name => name !== tag.name)
     },
     freshTabList(tags: TagProps[]) {
       this.tagList = tags;
-      this.cacheTabList.clear();
+      this.cacheTabList = [];
       // 要先判断cache
       this.tagList
         .filter((el) => el.cache)
         .map((el) => el.name)
-        .forEach((x) => this.cacheTabList.add(x));
+        .forEach((x) => this.cacheTabList.push(x));
     },
     resetTabList() {
       this.tagList = [DEFAULT_ROUTE];
-      this.cacheTabList.clear();
-      this.cacheTabList.add(DEFAULT_ROUTE_NAME);
+      this.cacheTabList = [];
+      this.cacheTabList.push(DEFAULT_ROUTE_NAME);
     },
   },
 });
diff --git a/src/store/modules/tab-bar/types.ts b/src/store/modules/tab-bar/types.ts
index eeb8c90168bcc038758c2d8566e8d673225e2f77..5f4284c6c0847bb2069437dc5444ef08ad8764f7 100644
--- a/src/store/modules/tab-bar/types.ts
+++ b/src/store/modules/tab-bar/types.ts
@@ -8,5 +8,5 @@ export interface TagProps {
 
 export interface TabBarState {
   tagList: TagProps[];
-  cacheTabList: Set<string>;
+  cacheTabList: string[];
 }
diff --git a/src/types/modules/system.ts b/src/types/modules/system.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f68615f8bda1573e171417367c886c9099f7fcf
--- /dev/null
+++ b/src/types/modules/system.ts
@@ -0,0 +1,10 @@
+import type { RouteMeta } from "vue-router";
+
+export interface Menu {
+  path: string
+  name: string
+  component?: string
+  meta?: RouteMeta
+  redirect?: string
+  children?: Menu[]
+}
diff --git a/src/utils/menu.ts b/src/utils/menu.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82ddc417fabe88514c89dce07c65762be8e0f5df
--- /dev/null
+++ b/src/utils/menu.ts
@@ -0,0 +1,37 @@
+import type { Menu } from "@/types/modules/system";
+import type { AppRouteRecordRaw } from "@/router/types";
+import { regexUrl } from "@/utils/index";
+
+const layouts = import.meta.glob('/src/layout/*.vue')
+const views = import.meta.glob('/src/views/**/index.vue')
+const modules = {
+  ...layouts,
+  ...views
+}
+
+const _buildVueRouter = (menu: Menu): AppRouteRecordRaw => {
+  const { name, path, component, children, redirect, meta } = menu
+  // @ts-ignore
+  const { title, cache, hidden, order, icon, affix } = meta
+  return {
+    redirect,
+    name,
+    path,
+    component: modules[`/src${component}`],
+    children: children?.filter(route => !regexUrl.test(route.path))?.map(_buildVueRouter),
+    meta: {
+      title,
+      icon,
+      cache,
+      hidden,
+      order,
+      affix
+    }
+  }
+}
+// eslint-disable-next-line import/prefer-default-export
+export const buildVueRouter  = (menus: Menu[]): AppRouteRecordRaw[] => menus.filter(menu => !regexUrl.test(menu.path)).map(_buildVueRouter)
+
+
+
+
diff --git a/src/views/dashboard/workplace/index.vue b/src/views/dashboard/workplace/index.vue
index 379e5cefc925d498b74e821ef6612f04140e89dc..5d2246f7be4b8f8e83839578ce614f8ac4641bf3 100644
--- a/src/views/dashboard/workplace/index.vue
+++ b/src/views/dashboard/workplace/index.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="container">
+  <div>
     <div class="left-side">
       <div class="panel">
+      <input type="text">
         <Banner />
         <DataPanel />
         <ContentChart />
@@ -56,17 +57,11 @@
 
 <script lang="ts">
   export default {
-    name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
+    name: 'Workplace', // If you want the include property of keep-alive to take effect, you must name the component
   };
 </script>
 
 <style lang="less" scoped>
-  .container {
-    background-color: var(--color-fill-2);
-    padding: 16px 20px;
-    padding-bottom: 0;
-    display: flex;
-  }
 
   .left-side {
     flex: 1;
diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue
index a430b00e0c2d75bf5dab2dd63a3900c6a17a0765..5ce26c5beb049813004036872d33c66de9224d08 100644
--- a/src/views/login/components/login-form.vue
+++ b/src/views/login/components/login-form.vue
@@ -69,9 +69,10 @@
   import { Message } from '@arco-design/web-vue';
   import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
   import { useStorage } from '@vueuse/core';
-  import { useUserStore } from '@/store';
+  import { useUserStore } from "@/store";
   import useLoading from '@/hooks/loading';
   import type { LoginData } from '@/api/user';
+  import { DEFAULT_ROUTE_NAME } from "@/router/constants";
 
   const router = useRouter();
   const errorMessage = ref('');
@@ -101,7 +102,7 @@
         await userStore.login(values as LoginData);
         const { redirect, ...othersQuery } = router.currentRoute.value.query;
         router.push({
-          name: (redirect as string) || 'Workplace',
+          name: (redirect as string) || DEFAULT_ROUTE_NAME,
           query: {
             ...othersQuery,
           },
diff --git a/src/views/system/roles/index.vue b/src/views/system/roles/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..026ecd2286a9ea1d387a78df08173042d74b899f
--- /dev/null
+++ b/src/views/system/roles/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <input type="text">
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Role',
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..11f6fae8420a434856bcfffa668fd855d298b256
--- /dev/null
+++ b/src/views/system/user/index.vue
@@ -0,0 +1,15 @@
+<template>
+<div>
+  <input type="text">
+</div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'User',
+};
+</script>
+
+<style scoped>
+
+</style>