fix(projects): fix example code

Merge branch 'v2.0' into v2.0-example
Merge branch 'main' into example
2025-10-13 21:33:42 +08:00 · 2025-09-17 17:33:30 +08:00 · 2025-09-17 17:33:19 +08:00 · 2025-09-17 17:22:34 +08:00 · 2025-09-17 17:03:30 +08:00 · 2025-09-17 14:23:06 +08:00
156 changed files with 17518 additions and 1564 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -33,5 +33,3 @@ package-lock.json
 yarn.lock

 .VSCodeCounter
-
-.temp
--- a/README.en_US.md
+++ b/README.en_US.md
@@ -7,16 +7,13 @@
 ---

 [![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
-[![github stars](https://img.shields.io/github/stars/soybeanjs/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
-[![github forks](https://img.shields.io/github/forks/soybeanjs/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![github stars](https://img.shields.io/github/stars/honghuangdc/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![github forks](https://img.shields.io/github/forks/honghuangdc/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
 [![gitee stars](https://gitee.com/honghuangdc/soybean-admin/badge/star.svg)](https://gitee.com/honghuangdc/soybean-admin)
 [![gitcode star](https://gitcode.com/soybeanjs/soybean-admin/star/badge.svg)](https://gitcode.com/soybeanjs/soybean-admin)
-[![Powered by DartNode](https://dartnode.com/branding/DN-Open-Source-sm.png)](https://dartnode.com "Powered by DartNode - Free VPS for Open Source")

-<div style="display: flex; gap: 12px; align-items: center;">
-  <a href="https://trendshift.io/repositories/7963" target="_blank"><img src="https://trendshift.io/api/badge/repositories/7963" alt="soybeanjs%2Fsoybean-admin | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
-  <a href="https://hellogithub.com/repository/1298f27d5fe54959a16cf9686516ddb3" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=1298f27d5fe54959a16cf9686516ddb3&claim_uid=IiDXWmP4TEntjbV" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</div>
+<a href="https://hellogithub.com/repository/1298f27d5fe54959a16cf9686516ddb3" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=1298f27d5fe54959a16cf9686516ddb3&claim_uid=IiDXWmP4TEntjbV" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+

 > [!NOTE]
 > If you think `SoybeanAdmin` is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!
--- a/README.md
+++ b/README.md
@@ -7,16 +7,12 @@
 ---

 [![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
-[![github stars](https://img.shields.io/github/stars/soybeanjs/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
-[![github forks](https://img.shields.io/github/forks/soybeanjs/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![github stars](https://img.shields.io/github/stars/honghuangdc/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![github forks](https://img.shields.io/github/forks/honghuangdc/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
 [![gitee stars](https://gitee.com/honghuangdc/soybean-admin/badge/star.svg)](https://gitee.com/honghuangdc/soybean-admin)
 [![gitcode star](https://gitcode.com/soybeanjs/soybean-admin/star/badge.svg)](https://gitcode.com/soybeanjs/soybean-admin)
-[![Powered by DartNode](https://dartnode.com/branding/DN-Open-Source-sm.png)](https://dartnode.com "Powered by DartNode - Free VPS for Open Source")

-<div style="display: flex; gap: 12px; align-items: center;">
-  <a href="https://trendshift.io/repositories/7963" target="_blank"><img src="https://trendshift.io/api/badge/repositories/7963" alt="soybeanjs%2Fsoybean-admin | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
-  <a href="https://hellogithub.com/repository/1298f27d5fe54959a16cf9686516ddb3" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=1298f27d5fe54959a16cf9686516ddb3&claim_uid=IiDXWmP4TEntjbV" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</div>
+<a href="https://hellogithub.com/repository/1298f27d5fe54959a16cf9686516ddb3" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=1298f27d5fe54959a16cf9686516ddb3&claim_uid=IiDXWmP4TEntjbV" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 > [!NOTE]
 > 如果您觉得 `SoybeanAdmin`对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
--- a/build/plugins/index.ts
+++ b/build/plugins/index.ts
@@ -2,7 +2,7 @@ import type { PluginOption } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import progress from 'vite-plugin-progress';
-import elegantRouter from 'elegant-router/vite';
+import { setupElegantRouter } from './router';
 import { setupUnocss } from './unocss';
 import { setupUnplugin } from './unplugin';
 import { setupHtmlPlugin } from './html';
@@ -13,7 +13,7 @@ export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
    vue(),
    vueJsx(),
    setupDevtoolsPlugin(viteEnv),
-    elegantRouter(),
+    setupElegantRouter(),
    setupUnocss(viteEnv),
    ...setupUnplugin(viteEnv),
    progress(),
--- a/build/plugins/router.ts
+++ b/build/plugins/router.ts
@@ -0,0 +1,58 @@
+import type { RouteMeta } from 'vue-router';
+import ElegantVueRouter from '@elegant-router/vue/vite';
+import type { RouteKey } from '@elegant-router/types';
+
+export function setupElegantRouter() {
+  return ElegantVueRouter({
+    layouts: {
+      base: 'src/layouts/base-layout/index.vue',
+      blank: 'src/layouts/blank-layout/index.vue'
+    },
+    customRoutes: {
+      names: [
+        'exception_403',
+        'exception_404',
+        'exception_500',
+        'document_project',
+        'document_project-link',
+        'document_video',
+        'document_vue',
+        'document_vite',
+        'document_unocss',
+        'document_naive',
+        'document_pro-naive',
+        'document_antd',
+        'document_alova'
+      ]
+    },
+    routePathTransformer(routeName, routePath) {
+      const key = routeName as RouteKey;
+
+      if (key === 'login') {
+        const modules: UnionKey.LoginModule[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
+
+        const moduleReg = modules.join('|');
+
+        return `/login/:module(${moduleReg})?`;
+      }
+
+      return routePath;
+    },
+    onRouteMetaGen(routeName) {
+      const key = routeName as RouteKey;
+
+      const constantRoutes: RouteKey[] = ['login', '403', '404', '500'];
+
+      const meta: Partial<RouteMeta> = {
+        title: key,
+        i18nKey: `route.${key}` as App.I18n.I18nKey
+      };
+
+      if (constantRoutes.includes(key)) {
+        meta.constant = true;
+      }
+
+      return meta;
+    }
+  });
+}
--- a/build/plugins/unplugin.ts
+++ b/build/plugins/unplugin.ts
@@ -6,6 +6,7 @@ import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import { ProNaiveUIResolver } from 'pro-naive-ui-resolver';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';

 export function setupUnplugin(viteEnv: Env.ImportMeta) {
@@ -32,6 +33,7 @@ export function setupUnplugin(viteEnv: Env.ImportMeta) {
      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
      resolvers: [
        NaiveUiResolver(),
+        ProNaiveUIResolver(),
        IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFIX })
      ]
    }),
--- a/er.config.ts
+++ b/er.config.ts
@@ -1,37 +0,0 @@
-import type { RouteMeta } from 'vue-router';
-import { defineConfig } from 'elegant-router';
-import type { RouteKey } from '@elegant-router/types';
-
-export default defineConfig({
-  pageDir: ['src/views'],
-  layouts: {
-    base: 'src/layouts/base-layout/index.vue',
-    blank: 'src/layouts/blank-layout/index.vue'
-  },
-  getRoutePath: node => {
-    if (node.name === 'Login') {
-      const modules: UnionKey.LoginModule[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
-
-      const moduleReg = modules.join('|');
-
-      return `/login/:module(${moduleReg})?`;
-    }
-
-    return node.path;
-  },
-  getRouteMeta: node => {
-    const constantRoutes: RouteKey[] = ['Login', '403', '404', '500'];
-
-    const name = node.name as RouteKey;
-
-    const meta: Partial<RouteMeta> = {
-      title: name
-    };
-
-    if (constantRoutes.includes(name)) {
-      meta.constant = true;
-    }
-
-    return meta;
-  }
-});
--- a/package.json
+++ b/package.json
@@ -47,61 +47,87 @@
    "update-pkg": "sa update-pkg"
  },
  "dependencies": {
+    "@antv/data-set": "0.11.8",
+    "@antv/g2": "5.4.0",
+    "@antv/g6": "5.0.49",
    "@better-scroll/core": "2.5.1",
    "@iconify/vue": "5.0.0",
+    "@sa/alova": "workspace:*",
    "@sa/axios": "workspace:*",
    "@sa/color": "workspace:*",
    "@sa/hooks": "workspace:*",
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
+    "@visactor/vchart": "2.0.4",
+    "@visactor/vchart-theme": "1.12.2",
+    "@visactor/vtable-editors": "1.19.9",
+    "@visactor/vtable-gantt": "1.19.9",
+    "@visactor/vue-vtable": "1.19.9",
+    "@vueuse/components": "13.9.0",
    "@vueuse/core": "13.9.0",
    "clipboard": "2.0.11",
    "dayjs": "1.11.18",
    "defu": "6.1.4",
+    "dhtmlx-gantt": "9.0.14",
+    "dompurify": "3.2.6",
    "echarts": "6.0.0",
+    "jsbarcode": "3.12.1",
    "json5": "2.2.3",
    "naive-ui": "2.43.1",
    "nprogress": "0.2.0",
    "pinia": "3.0.3",
+    "pinyin-pro": "3.27.0",
+    "print-js": "1.6.0",
+    "pro-naive-ui": "3.1.1",
+    "swiper": "12.0.1",
    "tailwind-merge": "3.3.1",
-    "vue": "3.5.22",
+    "typeit": "8.8.7",
+    "vditor": "3.11.2",
+    "vue": "3.5.21",
    "vue-draggable-plus": "0.6.0",
    "vue-i18n": "11.1.12",
-    "vue-router": "4.5.1"
+    "vue-pdf-embed": "2.1.3",
+    "vue-router": "4.5.1",
+    "wangeditor": "4.7.15",
+    "xgplayer": "3.0.23",
+    "xlsx": "0.18.5"
  },
  "devDependencies": {
+    "@amap/amap-jsapi-types": "0.0.15",
    "@elegant-router/vue": "0.3.8",
-    "@iconify/json": "2.2.395",
+    "@iconify/json": "2.2.385",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
    "@soybeanjs/eslint-config": "1.7.1",
-    "@types/node": "24.7.2",
+    "@types/bmapgl": "0.0.7",
+    "@types/node": "24.5.1",
    "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "66.5.3",
-    "@unocss/preset-icons": "66.5.3",
-    "@unocss/preset-uno": "66.5.3",
-    "@unocss/transformer-directives": "66.5.3",
-    "@unocss/transformer-variant-group": "66.5.3",
-    "@unocss/vite": "66.5.3",
+    "@unocss/eslint-config": "66.5.1",
+    "@unocss/preset-icons": "66.5.1",
+    "@unocss/preset-uno": "66.5.1",
+    "@unocss/transformer-directives": "66.5.1",
+    "@unocss/transformer-variant-group": "66.5.1",
+    "@unocss/vite": "66.5.1",
    "@vitejs/plugin-vue": "6.0.1",
    "@vitejs/plugin-vue-jsx": "5.1.1",
    "consola": "3.4.2",
-    "elegant-router": "1.0.4",
-    "eslint": "9.37.0",
-    "eslint-plugin-vue": "10.5.0",
+    "eslint": "9.35.0",
+    "eslint-plugin-vue": "10.4.0",
    "kolorist": "1.8.0",
-    "sass": "1.93.2",
+    "lint-staged": "16.1.6",
+    "pro-naive-ui-resolver": "1.0.2",
+    "sass": "1.92.1",
    "simple-git-hooks": "2.13.1",
-    "tsx": "4.20.6",
-    "typescript": "5.9.3",
-    "unplugin-icons": "22.4.2",
-    "unplugin-vue-components": "29.1.0",
-    "vite": "7.1.9",
+    "tsx": "4.20.5",
+    "typescript": "5.9.2",
+    "unplugin-icons": "22.3.0",
+    "unplugin-vue-components": "29.0.0",
+    "vite": "7.1.5",
    "vite-plugin-progress": "0.0.7",
    "vite-plugin-svg-icons": "2.0.1",
    "vite-plugin-vue-devtools": "8.0.2",
    "vue-eslint-parser": "10.2.0",
-    "vue-tsc": "3.1.1"
+    "vue-tsc": "3.0.7"
  },
  "simple-git-hooks": {
    "commit-msg": "pnpm sa git-commit-verify",
--- a/packages/materials/src/libs/page-tab/index.module.css
+++ b/packages/materials/src/libs/page-tab/index.module.css
@@ -95,27 +95,3 @@
 .chrome-tab_dark .chrome-tab-divider {
  background-color: rgba(255, 255, 255, 0.9);
 }
-
-.slider-tab {
-  background-color: transparent;
-  height: 100%;
-  border-bottom: 2px solid transparent;
-}
-
-.slider-tab_dark {
-  background-color: transparent;
-}
-
-.slider-tab:hover {
-  color: var(--soy-primary-color);
-}
-
-.slider-tab_active {
-  color: var(--soy-primary-color);
-  background-color: var(--soy-primary-color-opacity1);
-  border-bottom-color: var(--soy-primary-color);
-}
-
-.slider-tab_active_dark {
-  background-color: var(--soy-primary-color-opacity2);
-}
--- a/packages/materials/src/libs/page-tab/index.module.css.d.ts
+++ b/packages/materials/src/libs/page-tab/index.module.css.d.ts
@@ -10,10 +10,6 @@ declare const styles: {
  readonly 'chrome-tab_dark': string;
  readonly 'chrome-tab-divider': string;
  readonly 'svg-close': string;
-  readonly 'slider-tab': string;
-  readonly 'slider-tab_active': string;
-  readonly 'slider-tab_active_dark': string;
-  readonly 'slider-tab_dark': string;
 };

 export default styles;
--- a/packages/materials/src/libs/page-tab/index.vue
+++ b/packages/materials/src/libs/page-tab/index.vue
@@ -5,7 +5,6 @@ import type { PageTabMode, PageTabProps } from '../../types';
 import { ACTIVE_COLOR, createTabCssVars } from './shared';
 import ChromeTab from './chrome-tab.vue';
 import ButtonTab from './button-tab.vue';
-import SliderTab from './slider-tab.vue';
 import SvgClose from './svg-close.vue';
 import style from './index.module.css';

@@ -27,7 +26,7 @@ interface Emits {
 const emit = defineEmits<Emits>();

 const activeTabComponent = computed(() => {
-  const { mode, chromeClass, buttonClass, sliderClass } = props;
+  const { mode, chromeClass, buttonClass } = props;

  const tabComponentMap = {
    chrome: {
@@ -37,10 +36,6 @@ const activeTabComponent = computed(() => {
    button: {
      component: ButtonTab,
      class: buttonClass
-    },
-    slider: {
-      component: SliderTab,
-      class: sliderClass
    }
  } satisfies Record<PageTabMode, { component: Component; class?: string }>;

@@ -50,7 +45,7 @@ const activeTabComponent = computed(() => {
 const cssVars = computed(() => createTabCssVars(props.activeColor));

 const bindProps = computed(() => {
-  const { chromeClass: _chromeCls, buttonClass: _btnCls, sliderClass: _sliderCls, ...rest } = props;
+  const { chromeClass: _chromeCls, buttonClass: _btnCls, ...rest } = props;

  return rest;
 });
--- a/packages/materials/src/libs/page-tab/slider-tab.vue
+++ b/packages/materials/src/libs/page-tab/slider-tab.vue
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { PageTabProps } from '../../types';
-import style from './index.module.css';
-
-defineOptions({
-  name: 'SliderTab'
-});
-
-defineProps<PageTabProps>();
-
-type SlotFn = (props?: Record<string, unknown>) => any;
-
-type Slots = {
-  /**
-   * Slot
-   *
-   * The center content of the tab
-   */
-  default?: SlotFn;
-  /**
-   * Slot
-   *
-   * The left content of the tab
-   */
-  prefix?: SlotFn;
-  /**
-   * Slot
-   *
-   * The right content of the tab
-   */
-  suffix?: SlotFn;
-};
-
-defineSlots<Slots>();
-</script>
-
-<template>
-  <div
-    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-6px whitespace-nowrap px-12px py-4px"
-    :class="[
-      style['slider-tab'],
-      { [style['slider-tab_dark']]: darkMode },
-      { [style['slider-tab_active']]: active },
-      { [style['slider-tab_active_dark']]: active && darkMode }
-    ]"
-  >
-    <slot name="prefix"></slot>
-    <slot></slot>
-    <slot name="suffix"></slot>
-  </div>
-</template>
-
-<style scoped></style>
--- a/packages/materials/src/types/index.ts
+++ b/packages/materials/src/types/index.ts
@@ -239,7 +239,7 @@ export type LayoutCssVars = {
 *
 * @default chrome
 */
-export type PageTabMode = 'button' | 'chrome' | 'slider';
+export type PageTabMode = 'button' | 'chrome';

 export interface PageTabProps {
  /** Whether is dark mode */
@@ -262,8 +262,6 @@ export interface PageTabProps {
  buttonClass?: string;
  /** The class of the chrome tab */
  chromeClass?: string;
-  /** The class of the title tab */
-  sliderClass?: string;
  /** Whether the tab is active */
  active?: boolean;
  /** The color of the active tab */
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -14,14 +14,14 @@
  },
  "devDependencies": {
    "@soybeanjs/changelog": "0.3.25",
-    "bumpp": "10.3.1",
+    "bumpp": "10.2.3",
    "c12": "3.3.0",
    "cac": "6.7.14",
    "consola": "3.4.2",
    "enquirer": "2.4.1",
    "execa": "9.6.0",
    "kolorist": "1.8.0",
-    "npm-check-updates": "19.0.0",
+    "npm-check-updates": "18.1.1",
    "picomatch": "4.0.3",
    "rimraf": "6.0.1"
  }
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -14,7 +14,7 @@
    "crypto-js": "4.2.0",
    "klona": "2.0.6",
    "localforage": "1.10.0",
-    "nanoid": "5.1.6"
+    "nanoid": "5.1.5"
  },
  "devDependencies": {
    "@types/crypto-js": "4.2.2"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/assets/svg-icon/alova.svg
+++ b/src/assets/svg-icon/alova.svg
--- a/src/assets/svg-icon/visactor.svg
+++ b/src/assets/svg-icon/visactor.svg
@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100 10C149.706 10 190 50.2944 190 100C190 108.029 188.949 115.812 186.976 123.219L136.254 39.4666H136.195C131.638 32.531 123.789 27.9518 114.87 27.9518C105.952 27.9518 98.1024 32.531 93.5456 39.4666H93.4853L92.8532 40.5821C92.731 40.7907 92.6117 41.0012 92.4953 41.2136L36.9057 139.312C34.7053 143.082 33.4445 147.467 33.4445 152.147C33.4445 156.134 34.3599 159.908 35.9919 163.269C19.9218 147.012 10 124.665 10 100C10 50.2944 50.2944 10 100 10ZM53.4722 177.056C55.2341 177.441 57.0641 177.644 58.9415 177.644C73.0231 177.644 84.4384 166.228 84.4384 152.147C84.4384 147.63 83.2642 143.388 81.2043 139.709L81.2172 139.704L68.7932 118.202C62.0989 106.608 66.0716 91.7816 77.6663 85.0874C89.261 78.3932 104.087 82.3658 110.781 93.9605L154.607 168.236L154.625 168.229C155.082 168.971 155.575 169.689 156.103 170.378C140.717 182.659 121.216 190 100 190C82.9725 190 67.0494 185.271 53.4722 177.056Z" fill="currentColor"/>
+</svg>
--- a/src/components/custom/custom-icon-select.vue
+++ b/src/components/custom/custom-icon-select.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'CustomIconSelect' });
+
+interface Props {
+  /** Selected icon */
+  value: string;
+  /** List of icons */
+  icons: string[];
+  /** Icon for when nothing is selected */
+  emptyIcon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyIcon: 'mdi:apps'
+});
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const modelValue = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+const selectedIcon = computed(() => modelValue.value || props.emptyIcon);
+
+const searchValue = ref('');
+
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
+
+function handleChange(iconItem: string) {
+  modelValue.value = iconItem;
+}
+</script>
+
+<template>
+  <NPopover placement="bottom-end" trigger="click">
+    <template #trigger>
+      <NInput v-model:value="modelValue" readonly placeholder="点击选择图标">
+        <template #suffix>
+          <SvgIcon :icon="selectedIcon" class="p-5px text-30px" />
+        </template>
+      </NInput>
+    </template>
+    <template #header>
+      <NInput v-model:value="searchValue" placeholder="搜索图标"></NInput>
+    </template>
+    <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto">
+      <span v-for="iconItem in iconsList" :key="iconItem" @click="handleChange(iconItem)">
+        <SvgIcon
+          :icon="iconItem"
+          class="m-2px cursor-pointer border-1px border-#d9d9d9 p-5px text-30px"
+          :class="{ 'border-primary': modelValue === iconItem }"
+        />
+      </span>
+    </div>
+    <NEmpty v-else class="w-306px" description="你什么也找不到" />
+  </NPopover>
+</template>
+
+<style lang="scss" scoped>
+:deep(.n-input-wrapper) {
+  padding-right: 0;
+}
+
+:deep(.n-input__suffix) {
+  border: 1px solid #d9d9d9;
+}
+</style>
--- a/src/components/custom/github-link.vue
+++ b/src/components/custom/github-link.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import WebSiteLink from './web-site-link.vue';
+
+defineOptions({ name: 'GithubLink' });
+
+interface Props {
+  /** github link */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <WebSiteLink label="github地址：" :link="link" />
+</template>
+
+<style scoped></style>
--- a/src/components/custom/web-site-link.vue
+++ b/src/components/custom/web-site-link.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ name: 'WebSiteLink' });
+
+interface Props {
+  /** Web site name */
+  label: string;
+  /** Web site link */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <p>
+    <span>{{ label }}</span>
+    <a class="text-blue-500" :href="link" target="#">
+      {{ link }}
+    </a>
+  </p>
+</template>
+
+<style scoped></style>
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -40,8 +40,7 @@ export const themeScrollModeOptions = transformRecordToOption(themeScrollModeRec

 export const themeTabModeRecord: Record<UnionKey.ThemeTabMode, App.I18n.I18nKey> = {
  chrome: 'theme.layout.tab.mode.chrome',
-  button: 'theme.layout.tab.mode.button',
-  slider: 'theme.layout.tab.mode.slider'
+  button: 'theme.layout.tab.mode.button'
 };

 export const themeTabModeOptions = transformRecordToOption(themeTabModeRecord);
@@ -58,6 +57,13 @@ export const themePageAnimationModeRecord: Record<UnionKey.ThemePageAnimateMode,

 export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);

+export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I18n.I18nKey> = {
+  refresh: 'theme.layout.resetCacheStrategy.refresh',
+  close: 'theme.layout.resetCacheStrategy.close'
+};
+
+export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);
+
 export const DARK_CLASS = 'dark';

 export const watermarkTimeFormatOptions = [
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@@ -0,0 +1,29 @@
+import { transformRecordToOption } from '@/utils/common';
+
+export const enableStatusRecord: Record<Api.Common.EnableStatus, App.I18n.I18nKey> = {
+  '1': 'page.manage.common.status.enable',
+  '2': 'page.manage.common.status.disable'
+};
+
+export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
+
+export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
+  '1': 'page.manage.user.gender.male',
+  '2': 'page.manage.user.gender.female'
+};
+
+export const userGenderOptions = transformRecordToOption(userGenderRecord);
+
+export const menuTypeRecord: Record<Api.SystemManage.MenuType, App.I18n.I18nKey> = {
+  '1': 'page.manage.menu.type.directory',
+  '2': 'page.manage.menu.type.menu'
+};
+
+export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
+
+export const menuIconTypeRecord: Record<Api.SystemManage.IconType, App.I18n.I18nKey> = {
+  '1': 'page.manage.menu.iconType.iconify',
+  '2': 'page.manage.menu.iconType.local'
+};
+
+export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord);
--- a/src/constants/map-sdk.ts
+++ b/src/constants/map-sdk.ts
@@ -0,0 +1,8 @@
+/** baidu map sdk url */
+export const BAIDU_MAP_SDK_URL = `https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1`;
+
+/** Amap sdk url */
+export const AMAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d';
+
+/** tencent sdk url */
+export const TENCENT_MAP_SDK_URL = 'https://map.qq.com/api/gljs?v=1.exp&key=A6DBZ-KXPLW-JKSRY-ONZF4-CPHY3-K6BL7';
--- a/src/hooks/common/vchart.ts
+++ b/src/hooks/common/vchart.ts
@@ -0,0 +1,158 @@
+import { computed, effectScope, onScopeDispose, ref, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import VChart, { registerLiquidChart } from '@visactor/vchart';
+import type { ISpec, ITheme } from '@visactor/vchart';
+import light from '@visactor/vchart-theme/public/light.json';
+import dark from '@visactor/vchart-theme/public/dark.json';
+import { useThemeStore } from '@/store/modules/theme';
+
+registerLiquidChart();
+
+// register the theme
+VChart.ThemeManager.registerTheme('light', light as ITheme);
+VChart.ThemeManager.registerTheme('dark', dark as ITheme);
+
+interface ChartHooks {
+  onRender?: (chart: VChart) => void | Promise<void>;
+  onUpdated?: (chart: VChart) => void | Promise<void>;
+  onDestroy?: (chart: VChart) => void | Promise<void>;
+}
+
+export function useVChart<T extends ISpec>(specFactory: () => T, hooks: ChartHooks = {}) {
+  const scope = effectScope();
+  const themeStore = useThemeStore();
+  const darkMode = computed(() => themeStore.darkMode);
+
+  const domRef = ref<HTMLElement | null>(null);
+  const initialSize = { width: 0, height: 0 };
+  const { width, height } = useElementSize(domRef, initialSize);
+
+  let chart: VChart | null = null;
+  const spec: T = specFactory();
+
+  const { onRender, onUpdated, onDestroy } = hooks;
+
+  /**
+   * whether can render chart
+   *
+   * when domRef is ready and initialSize is valid
+   */
+  function canRender() {
+    return domRef.value && initialSize.width > 0 && initialSize.height > 0;
+  }
+
+  /** is chart rendered */
+  function isRendered() {
+    return Boolean(domRef.value && chart);
+  }
+
+  /**
+   * update chart spec
+   *
+   * @param callback callback function
+   */
+  async function updateSpec(callback: (opts: T, optsFactory: () => T) => ISpec = () => spec) {
+    if (!isRendered()) return;
+
+    const updatedOpts = callback(spec, specFactory);
+
+    Object.assign(spec, updatedOpts);
+
+    if (isRendered()) {
+      chart?.release();
+    }
+
+    chart?.updateSpec({ ...updatedOpts }, true);
+
+    await onUpdated?.(chart!);
+  }
+
+  function setSpec(newSpec: T) {
+    chart?.updateSpec(newSpec);
+  }
+
+  /** render chart */
+  async function render() {
+    if (!isRendered()) {
+      // apply the theme
+      if (darkMode.value) {
+        VChart.ThemeManager.setCurrentTheme('dark');
+      } else {
+        VChart.ThemeManager.setCurrentTheme('light');
+      }
+
+      chart = new VChart(spec, { dom: domRef.value as HTMLElement });
+      chart.renderSync();
+
+      await onRender?.(chart);
+    }
+  }
+
+  /** resize chart */
+  function resize() {
+    // chart?.resize();
+  }
+
+  /** destroy chart */
+  async function destroy() {
+    if (!chart) return;
+
+    await onDestroy?.(chart);
+    chart?.release();
+    chart = null;
+  }
+
+  /** change chart theme */
+  async function changeTheme() {
+    await destroy();
+    await render();
+    await onUpdated?.(chart!);
+  }
+
+  /**
+   * render chart by size
+   *
+   * @param w width
+   * @param h height
+   */
+  async function renderChartBySize(w: number, h: number) {
+    initialSize.width = w;
+    initialSize.height = h;
+
+    // size is abnormal, destroy chart
+    if (!canRender()) {
+      await destroy();
+
+      return;
+    }
+
+    // resize chart
+    if (isRendered()) {
+      resize();
+    }
+
+    // render chart
+    await render();
+  }
+
+  scope.run(() => {
+    watch([width, height], ([newWidth, newHeight]) => {
+      renderChartBySize(newWidth, newHeight);
+    });
+
+    watch(darkMode, () => {
+      changeTheme();
+    });
+  });
+
+  onScopeDispose(() => {
+    destroy();
+    scope.stop();
+  });
+
+  return {
+    domRef,
+    updateSpec,
+    setSpec
+  };
+}
--- a/src/layouts/modules/global-header/components/user-avatar.vue
+++ b/src/layouts/modules/global-header/components/user-avatar.vue
@@ -18,7 +18,7 @@ function loginOrRegister() {
  toLogin();
 }

-type DropdownKey = 'logout';
+type DropdownKey = 'user-center' | 'logout';

 type DropdownOption =
  | {
@@ -33,6 +33,15 @@ type DropdownOption =

 const options = computed(() => {
  const opts: DropdownOption[] = [
+    {
+      label: $t('common.userCenter'),
+      key: 'user-center',
+      icon: SvgIconVNode({ icon: 'ph:user-circle', fontSize: 18 })
+    },
+    {
+      type: 'divider',
+      key: 'divider'
+    },
    {
      label: $t('common.logout'),
      key: 'logout',
--- a/src/layouts/modules/global-tab/index.vue
+++ b/src/layouts/modules/global-tab/index.vue
@@ -169,9 +169,7 @@ init();
        <div
          ref="tabRef"
          class="h-full flex pr-18px"
-          :class="[
-            themeStore.tab.mode === 'chrome' || themeStore.tab.mode === 'slider' ? 'items-end' : 'items-center gap-12px'
-          ]"
+          :class="[themeStore.tab.mode === 'chrome' ? 'items-end' : 'items-center gap-12px']"
        >
          <PageTab
            v-for="tab in tabStore.tabs"
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { themeTabModeOptions } from '@/constants/app';
+import { resetCacheStrategyOptions, themeTabModeOptions } from '@/constants/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { translateOptions } from '@/utils/common';
 import { $t } from '@/locales';
@@ -15,6 +15,14 @@ const themeStore = useThemeStore();
 <template>
  <NDivider>{{ $t('theme.layout.tab.title') }}</NDivider>
  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
+    <SettingItem key="0" :label="$t('theme.layout.resetCacheStrategy.title')">
+      <NSelect
+        v-model:value="themeStore.resetCacheStrategy"
+        :options="translateOptions(resetCacheStrategyOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
    <SettingItem key="1" :label="$t('theme.layout.tab.visible')">
      <NSwitch v-model:value="themeStore.tab.visible" />
    </SettingItem>
--- a/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
+++ b/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
@@ -16,6 +16,7 @@ type ThemePreset = Pick<
  | 'themeColor'
  | 'otherColor'
  | 'isInfoFollowPrimary'
+  | 'resetCacheStrategy'
  | 'layout'
  | 'page'
  | 'header'
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -135,7 +135,6 @@ const local: App.I18n.Schema = {
        height: 'Tab Height',
        mode: {
          title: 'Tab Mode',
-          slider: 'Slider',
          chrome: 'Chrome',
          button: 'Button'
        }
@@ -186,6 +185,11 @@ const local: App.I18n.Schema = {
          }
        },
        fixedHeaderAndTab: 'Fixed Header And Tab'
+      },
+      resetCacheStrategy: {
+        title: 'Reset Cache Strategy',
+        close: 'Close Page',
+        refresh: 'Refresh Page'
      }
    },
    general: {
@@ -220,7 +224,80 @@ const local: App.I18n.Schema = {
    404: 'Page Not Found',
    500: 'Server Error',
    'iframe-page': 'Iframe',
-    home: 'Home'
+    home: 'Home',
+    document: 'Document',
+    document_project: 'Project Document',
+    'document_project-link': 'Project Document(External Link)',
+    document_video: 'Video Tutorial',
+    document_vue: 'Vue Document',
+    document_vite: 'Vite Document',
+    document_unocss: 'UnoCSS Document',
+    document_naive: 'Naive UI Document',
+    'document_pro-naive': 'Pro Naive UI Document',
+    document_antd: 'Ant Design Vue Document',
+    document_alova: 'Alova Document',
+    'user-center': 'User Center',
+    about: 'About',
+    function: 'System Function',
+    alova: 'Alova Example',
+    alova_request: 'Alova Request',
+    alova_scenes: 'Scenario Request',
+    'pro-naive': 'Pro Naive Example',
+    'pro-naive_form': 'Form',
+    'pro-naive_form_basic': 'Basic Form',
+    'pro-naive_form_query': 'Query Form',
+    'pro-naive_form_step': 'Step Form',
+    'pro-naive_table': 'Table',
+    'pro-naive_table_remote': 'Remote',
+    'pro-naive_table_row-edit': 'Row Edit',
+    function_tab: 'Tab',
+    'function_multi-tab': 'Multi Tab',
+    'function_hide-child': 'Hide Child',
+    'function_hide-child_one': 'Hide Child',
+    'function_hide-child_two': 'Two',
+    'function_hide-child_three': 'Three',
+    function_request: 'Request',
+    'function_toggle-auth': 'Toggle Auth',
+    'function_super-page': 'Super Admin Visible',
+    manage: 'System Manage',
+    manage_user: 'User Manage',
+    'manage_user-detail': 'User Detail',
+    manage_role: 'Role Manage',
+    manage_menu: 'Menu Manage',
+    'multi-menu': 'Multi Menu',
+    'multi-menu_first': 'Menu One',
+    'multi-menu_first_child': 'Menu One Child',
+    'multi-menu_second': 'Menu Two',
+    'multi-menu_second_child': 'Menu Two Child',
+    'multi-menu_second_child_home': 'Menu Two Child Home',
+    exception: 'Exception',
+    exception_403: '403',
+    exception_404: '404',
+    exception_500: '500',
+    plugin: 'Plugin',
+    plugin_copy: 'Copy',
+    plugin_charts: 'Charts',
+    plugin_charts_echarts: 'ECharts',
+    plugin_charts_antv: 'AntV',
+    plugin_charts_vchart: 'VChart',
+    plugin_editor: 'Editor',
+    plugin_editor_quill: 'Quill',
+    plugin_editor_markdown: 'Markdown',
+    plugin_icon: 'Icon',
+    plugin_map: 'Map',
+    plugin_print: 'Print',
+    plugin_swiper: 'Swiper',
+    plugin_video: 'Video',
+    plugin_barcode: 'Barcode',
+    plugin_pinyin: 'pinyin',
+    plugin_excel: 'Excel',
+    plugin_pdf: 'PDF preview',
+    plugin_gantt: 'Gantt Chart',
+    plugin_gantt_dhtmlx: 'dhtmlxGantt',
+    plugin_gantt_vtable: 'VTableGantt',
+    plugin_typeit: 'Typeit',
+    plugin_tables: 'Tables',
+    plugin_tables_vtable: 'VTable'
  },
  page: {
    login: {
@@ -269,6 +346,19 @@ const local: App.I18n.Schema = {
        title: 'Bind WeChat'
      }
    },
+    about: {
+      title: 'About',
+      introduction: `SoybeanAdmin is an elegant and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite7, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. SoybeanAdmin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.`,
+      projectInfo: {
+        title: 'Project Info',
+        version: 'Version',
+        latestBuildTime: 'Latest Build Time',
+        githubLink: 'Github Link',
+        previewLink: 'Preview Link'
+      },
+      prdDep: 'Production Dependency',
+      devDep: 'Development Dependency'
+    },
    home: {
      branchDesc:
        'For the convenience of everyone in developing and updating the merge, we have streamlined the code of the main branch, only retaining the homepage menu, and the rest of the content has been moved to the example branch for maintenance. The preview address displays the content of the example branch.',
@@ -297,6 +387,253 @@ const local: App.I18n.Schema = {
        desc5: 'Soybean just wrote some of the workbench pages casually, and it was enough to see!'
      },
      creativity: 'Creativity'
+    },
+    function: {
+      tab: {
+        tabOperate: {
+          title: 'Tab Operation',
+          addTab: 'Add Tab',
+          addTabDesc: 'To about page',
+          closeTab: 'Close Tab',
+          closeCurrentTab: 'Close Current Tab',
+          closeAboutTab: 'Close "About" Tab',
+          addMultiTab: 'Add Multi Tab',
+          addMultiTabDesc1: 'To MultiTab page',
+          addMultiTabDesc2: 'To MultiTab page(with query params)'
+        },
+        tabTitle: {
+          title: 'Tab Title',
+          changeTitle: 'Change Title',
+          change: 'Change',
+          resetTitle: 'Reset Title',
+          reset: 'Reset'
+        }
+      },
+      multiTab: {
+        routeParam: 'Route Param',
+        backTab: 'Back function_tab'
+      },
+      toggleAuth: {
+        toggleAccount: 'Toggle Account',
+        authHook: 'Auth Hook Function `hasAuth`',
+        superAdminVisible: 'Super Admin Visible',
+        adminVisible: 'Admin Visible',
+        adminOrUserVisible: 'Admin and User Visible'
+      },
+      request: {
+        repeatedErrorOccurOnce: 'Repeated Request Error Occurs Once',
+        repeatedError: 'Repeated Request Error',
+        repeatedErrorMsg1: 'Custom Request Error 1',
+        repeatedErrorMsg2: 'Custom Request Error 2'
+      }
+    },
+    alova: {
+      scenes: {
+        captchaSend: 'Captcha Send',
+        autoRequest: 'Auto Request',
+        visibilityRequestTips: 'Automatically request when switching browser window',
+        pollingRequestTips: 'It will request every 3 seconds',
+        networkRequestTips: 'Automatically request after network reconnecting',
+        refreshTime: 'Refresh Time',
+        startRequest: 'Start Request',
+        stopRequest: 'Stop Request',
+        requestCrossComponent: 'Request Cross Component',
+        triggerAllRequest: 'Manually Trigger All Automated Requests'
+      }
+    },
+    proNaive: {
+      form: {
+        basic: {
+          title: 'Basic Example',
+          appName: 'ApplicationName',
+          appStatus: 'ApplicationStatus',
+          createTime: 'CreateTime',
+          responseDate: 'ResponseDate',
+          specificationInfo: 'SpecificationInfo',
+          specificate: 'Specificate',
+          specificationName: 'SpecificationName',
+          specificationValue: 'SpecificationValue',
+          specificationColorRed: 'Red',
+          specificationColorOrange: 'Orange',
+          addSpecificateItem: 'Add Specificate Item',
+          fillValue: 'FillValue',
+          reset: 'Reset',
+          submit: 'Submit',
+          add: 'Add',
+          delete: 'Delete',
+          color: 'Color',
+          normal: 'Normal',
+          anomaly: 'Anomaly'
+        },
+        query: {
+          title1: 'Query Example, which expands by default',
+          title2: 'Query Example, which fold by default, and two lines are retained when folding',
+          appName: 'ApplicationName',
+          appStatus: 'ApplicationStatus',
+          createTime: 'CreateTime',
+          responseDate: 'ResponseDate',
+          endDate: 'EndDate',
+          field: 'Field'
+        },
+        step: {
+          title: 'Step Form',
+          step1: {
+            title: 'Form 1',
+            field: 'Form 1 field',
+            nextStep: 'Next Step'
+          },
+          step2: {
+            title: 'Form 2',
+            field: 'Form 2 field',
+            prevStep: 'Prev Step',
+            submit: 'Submit'
+          }
+        }
+      },
+      table: {
+        remote: {
+          filterCondition: 'Filter Condition',
+          name: 'Name',
+          createTime: 'CreateTime',
+          responseTime: 'ResponseTime',
+          title: 'Remote Loading',
+          replicableText: 'Replicable Text',
+          tags: 'Tags',
+          dateFormatting: 'Date Formatting',
+          image: 'Image'
+        },
+        rowEdit: {
+          title: 'Edit Table',
+          reset: 'Reset',
+          submit: 'Submit',
+          edit: 'Edit',
+          delete: 'Delete',
+          save: 'Save',
+          task: 'Task',
+          score: 'Score',
+          time: 'Time',
+          name: 'Name',
+          action: 'Action'
+        }
+      }
+    },
+    manage: {
+      common: {
+        status: {
+          enable: 'Enable',
+          disable: 'Disable'
+        }
+      },
+      role: {
+        title: 'Role List',
+        roleName: 'Role Name',
+        roleCode: 'Role Code',
+        roleStatus: 'Role Status',
+        roleDesc: 'Role Description',
+        menuAuth: 'Menu Auth',
+        buttonAuth: 'Button Auth',
+        form: {
+          roleName: 'Please enter role name',
+          roleCode: 'Please enter role code',
+          roleStatus: 'Please select role status',
+          roleDesc: 'Please enter role description'
+        },
+        addRole: 'Add Role',
+        editRole: 'Edit Role'
+      },
+      user: {
+        title: 'User List',
+        userName: 'User Name',
+        userGender: 'Gender',
+        nickName: 'Nick Name',
+        userPhone: 'Phone Number',
+        userEmail: 'Email',
+        userStatus: 'User Status',
+        userRole: 'User Role',
+        form: {
+          userName: 'Please enter user name',
+          userGender: 'Please select gender',
+          nickName: 'Please enter nick name',
+          userPhone: 'Please enter phone number',
+          userEmail: 'Please enter email',
+          userStatus: 'Please select user status',
+          userRole: 'Please select user role'
+        },
+        addUser: 'Add User',
+        editUser: 'Edit User',
+        gender: {
+          male: 'Male',
+          female: 'Female'
+        }
+      },
+      menu: {
+        home: 'Home',
+        title: 'Menu List',
+        id: 'ID',
+        parentId: 'Parent ID',
+        menuType: 'Menu Type',
+        menuName: 'Menu Name',
+        routeName: 'Route Name',
+        routePath: 'Route Path',
+        pathParam: 'Path Param',
+        layout: 'Layout Component',
+        page: 'Page Component',
+        i18nKey: 'I18n Key',
+        icon: 'Icon',
+        localIcon: 'Local Icon',
+        iconTypeTitle: 'Icon Type',
+        order: 'Order',
+        constant: 'Constant',
+        keepAlive: 'Keep Alive',
+        href: 'Href',
+        hideInMenu: 'Hide In Menu',
+        activeMenu: 'Active Menu',
+        multiTab: 'Multi Tab',
+        fixedIndexInTab: 'Fixed Index In Tab',
+        query: 'Query Params',
+        button: 'Button',
+        buttonCode: 'Button Code',
+        buttonDesc: 'Button Desc',
+        menuStatus: 'Menu Status',
+        form: {
+          home: 'Please select home',
+          menuType: 'Please select menu type',
+          menuName: 'Please enter menu name',
+          routeName: 'Please enter route name',
+          routePath: 'Please enter route path',
+          pathParam: 'Please enter path param',
+          page: 'Please select page component',
+          layout: 'Please select layout component',
+          i18nKey: 'Please enter i18n key',
+          icon: 'Please enter iconify name',
+          localIcon: 'Please enter local icon name',
+          order: 'Please enter order',
+          keepAlive: 'Please select whether to cache route',
+          href: 'Please enter href',
+          hideInMenu: 'Please select whether to hide menu',
+          activeMenu: 'Please select route name of the highlighted menu',
+          multiTab: 'Please select whether to support multiple tabs',
+          fixedInTab: 'Please select whether to fix in the tab',
+          fixedIndexInTab: 'Please enter the index fixed in the tab',
+          queryKey: 'Please enter route parameter Key',
+          queryValue: 'Please enter route parameter Value',
+          button: 'Please select whether it is a button',
+          buttonCode: 'Please enter button code',
+          buttonDesc: 'Please enter button description',
+          menuStatus: 'Please select menu status'
+        },
+        addMenu: 'Add Menu',
+        editMenu: 'Edit Menu',
+        addChildMenu: 'Add Child Menu',
+        type: {
+          directory: 'Directory',
+          menu: 'Menu'
+        },
+        iconType: {
+          iconify: 'Iconify Icon',
+          local: 'Local Icon'
+        }
+      }
    }
  },
  form: {
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -132,7 +132,6 @@ const local: App.I18n.Schema = {
        height: '标签栏高度',
        mode: {
          title: '标签栏风格',
-          slider: '滑块风格',
          chrome: '谷歌风格',
          button: '按钮风格'
        }
@@ -159,7 +158,7 @@ const local: App.I18n.Schema = {
        visible: '显示底部',
        fixed: '固定底部',
        height: '底部高度',
-        right: '底部居右'
+        right: '底部局右'
      },
      content: {
        title: '内容区域设置',
@@ -183,6 +182,11 @@ const local: App.I18n.Schema = {
          }
        },
        fixedHeaderAndTab: '固定头部和标签栏'
+      },
+      resetCacheStrategy: {
+        title: '重置缓存策略',
+        close: '关闭页面',
+        refresh: '刷新页面'
      }
    },
    general: {
@@ -217,7 +221,80 @@ const local: App.I18n.Schema = {
    404: '页面不存在',
    500: '服务器错误',
    'iframe-page': '外链页面',
-    home: '首页'
+    home: '首页',
+    document: '文档',
+    document_project: '项目文档',
+    'document_project-link': '项目文档(外链)',
+    document_video: '视频教程',
+    document_vue: 'Vue文档',
+    document_vite: 'Vite文档',
+    document_unocss: 'UnoCSS文档',
+    document_naive: 'Naive UI文档',
+    'document_pro-naive': 'Pro Naive UI文档',
+    document_antd: 'Ant Design Vue文档',
+    document_alova: 'Alova文档',
+    'user-center': '个人中心',
+    about: '关于',
+    function: '系统功能',
+    alova: 'alova示例',
+    alova_request: 'alova请求',
+    alova_scenes: '场景化请求',
+    'pro-naive': 'Pro Naive UI 示例',
+    'pro-naive_form': '表单',
+    'pro-naive_form_basic': '基础表单',
+    'pro-naive_form_query': '查询表单',
+    'pro-naive_form_step': '分步表单',
+    'pro-naive_table': '表格',
+    'pro-naive_table_remote': '远程加载',
+    'pro-naive_table_row-edit': '行编辑',
+    function_tab: '标签页',
+    'function_multi-tab': '多标签页',
+    'function_hide-child': '隐藏子菜单',
+    'function_hide-child_one': '隐藏子菜单',
+    'function_hide-child_two': '菜单二',
+    'function_hide-child_three': '菜单三',
+    function_request: '请求',
+    'function_toggle-auth': '切换权限',
+    'function_super-page': '超级管理员可见',
+    manage: '系统管理',
+    manage_user: '用户管理',
+    'manage_user-detail': '用户详情',
+    manage_role: '角色管理',
+    manage_menu: '菜单管理',
+    'multi-menu': '多级菜单',
+    'multi-menu_first': '菜单一',
+    'multi-menu_first_child': '菜单一子菜单',
+    'multi-menu_second': '菜单二',
+    'multi-menu_second_child': '菜单二子菜单',
+    'multi-menu_second_child_home': '菜单二子菜单首页',
+    exception: '异常页',
+    exception_403: '403',
+    exception_404: '404',
+    exception_500: '500',
+    plugin: '插件示例',
+    plugin_copy: '剪贴板',
+    plugin_charts: '图表',
+    plugin_charts_echarts: 'ECharts',
+    plugin_charts_antv: 'AntV',
+    plugin_charts_vchart: 'VChart',
+    plugin_editor: '编辑器',
+    plugin_editor_quill: '富文本编辑器',
+    plugin_editor_markdown: 'MD 编辑器',
+    plugin_icon: '图标',
+    plugin_map: '地图',
+    plugin_print: '打印',
+    plugin_swiper: 'Swiper',
+    plugin_video: '视频',
+    plugin_barcode: '条形码',
+    plugin_pinyin: '拼音',
+    plugin_excel: 'Excel',
+    plugin_pdf: 'PDF 预览',
+    plugin_gantt: '甘特图',
+    plugin_gantt_dhtmlx: 'dhtmlxGantt',
+    plugin_gantt_vtable: 'VTableGantt',
+    plugin_typeit: '打字机',
+    plugin_tables: '表格',
+    plugin_tables_vtable: 'VTable'
  },
  page: {
    login: {
@@ -266,6 +343,19 @@ const local: App.I18n.Schema = {
        title: '绑定微信'
      }
    },
+    about: {
+      title: '关于',
+      introduction: `SoybeanAdmin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
+      projectInfo: {
+        title: '项目信息',
+        version: '版本',
+        latestBuildTime: '最新构建时间',
+        githubLink: 'Github 地址',
+        previewLink: '预览地址'
+      },
+      prdDep: '生产依赖',
+      devDep: '开发依赖'
+    },
    home: {
      branchDesc:
        '为了方便大家开发和更新合并，我们对main分支的代码进行了精简，只保留了首页菜单，其余内容已移至example分支进行维护。预览地址显示的内容即为example分支的内容。',
@@ -294,6 +384,253 @@ const local: App.I18n.Schema = {
        desc5: 'Soybean 刚才把工作台页面随便写了一些，凑合能看了！'
      },
      creativity: '创意'
+    },
+    function: {
+      tab: {
+        tabOperate: {
+          title: '标签页操作',
+          addTab: '添加标签页',
+          addTabDesc: '跳转到关于页面',
+          closeTab: '关闭标签页',
+          closeCurrentTab: '关闭当前标签页',
+          closeAboutTab: '关闭"关于"标签页',
+          addMultiTab: '添加多标签页',
+          addMultiTabDesc1: '跳转到多标签页页面',
+          addMultiTabDesc2: '跳转到多标签页页面(带有查询参数)'
+        },
+        tabTitle: {
+          title: '标签页标题',
+          changeTitle: '修改标题',
+          change: '修改',
+          resetTitle: '重置标题',
+          reset: '重置'
+        }
+      },
+      multiTab: {
+        routeParam: '路由参数',
+        backTab: '返回 function_tab'
+      },
+      toggleAuth: {
+        toggleAccount: '切换账号',
+        authHook: '权限钩子函数 `hasAuth`',
+        superAdminVisible: '超级管理员可见',
+        adminVisible: '管理员可见',
+        adminOrUserVisible: '管理员和用户可见'
+      },
+      request: {
+        repeatedErrorOccurOnce: '重复请求错误只出现一次',
+        repeatedError: '重复请求错误',
+        repeatedErrorMsg1: '自定义请求错误 1',
+        repeatedErrorMsg2: '自定义请求错误 2'
+      }
+    },
+    alova: {
+      scenes: {
+        captchaSend: '发送验证码',
+        autoRequest: '自动请求',
+        visibilityRequestTips: '浏览器窗口切换自动请求数据',
+        pollingRequestTips: '每3秒自动请求一次',
+        networkRequestTips: '网络重连后自动请求',
+        refreshTime: '更新时间',
+        startRequest: '开始请求',
+        stopRequest: '停止请求',
+        requestCrossComponent: '跨组件触发请求',
+        triggerAllRequest: '手动触发所有自动请求'
+      }
+    },
+    proNaive: {
+      form: {
+        basic: {
+          title: '基础示例',
+          appName: '应用名称',
+          appStatus: '应用状态',
+          createTime: '创建时间',
+          responseDate: '响应日期',
+          specificationInfo: '规格信息',
+          specificate: '规格',
+          specificationName: '规格名',
+          specificationValue: '规格值',
+          specificationColorRed: '红',
+          specificationColorOrange: '橙',
+          addSpecificateItem: '添加规格项',
+          fillValue: '填充值',
+          reset: '重置',
+          submit: '提交',
+          add: '新建',
+          delete: '删除',
+          color: '颜色',
+          normal: '正常',
+          anomaly: '异常'
+        },
+        query: {
+          title1: '查询表单，默认展开',
+          title2: '查询表单，默认折叠，折叠时保留2行',
+          appName: '应用名称',
+          appStatus: '应用状态',
+          createTime: '创建时间',
+          responseDate: '响应日期',
+          endDate: '结束日期',
+          field: '字段'
+        },
+        step: {
+          title: '分步表单',
+          step1: {
+            title: '表单1',
+            field: '表单1字段',
+            nextStep: '下一步'
+          },
+          step2: {
+            title: '表单2',
+            field: '表单2字段',
+            prevStep: '上一步',
+            submit: '提交'
+          }
+        }
+      },
+      table: {
+        remote: {
+          filterCondition: '筛选条件',
+          name: '名称',
+          createTime: '创建时间',
+          responseTime: '响应时间',
+          title: '远程加载',
+          replicableText: '可复制文本',
+          tags: 'tags',
+          dateFormatting: '日期格式化',
+          image: '图片'
+        },
+        rowEdit: {
+          title: '编辑表格',
+          reset: '重置',
+          submit: '提交',
+          edit: '编辑',
+          delete: '删除',
+          save: '保存',
+          task: '任务',
+          score: '评分',
+          time: '时间',
+          name: '名称',
+          action: '操作'
+        }
+      }
+    },
+    manage: {
+      common: {
+        status: {
+          enable: '启用',
+          disable: '禁用'
+        }
+      },
+      role: {
+        title: '角色列表',
+        roleName: '角色名称',
+        roleCode: '角色编码',
+        roleStatus: '角色状态',
+        roleDesc: '角色描述',
+        menuAuth: '菜单权限',
+        buttonAuth: '按钮权限',
+        form: {
+          roleName: '请输入角色名称',
+          roleCode: '请输入角色编码',
+          roleStatus: '请选择角色状态',
+          roleDesc: '请输入角色描述'
+        },
+        addRole: '新增角色',
+        editRole: '编辑角色'
+      },
+      user: {
+        title: '用户列表',
+        userName: '用户名',
+        userGender: '性别',
+        nickName: '昵称',
+        userPhone: '手机号',
+        userEmail: '邮箱',
+        userStatus: '用户状态',
+        userRole: '用户角色',
+        form: {
+          userName: '请输入用户名',
+          userGender: '请选择性别',
+          nickName: '请输入昵称',
+          userPhone: '请输入手机号',
+          userEmail: '请输入邮箱',
+          userStatus: '请选择用户状态',
+          userRole: '请选择用户角色'
+        },
+        addUser: '新增用户',
+        editUser: '编辑用户',
+        gender: {
+          male: '男',
+          female: '女'
+        }
+      },
+      menu: {
+        home: '首页',
+        title: '菜单列表',
+        id: 'ID',
+        parentId: '父级菜单ID',
+        menuType: '菜单类型',
+        menuName: '菜单名称',
+        routeName: '路由名称',
+        routePath: '路由路径',
+        pathParam: '路径参数',
+        layout: '布局',
+        page: '页面组件',
+        i18nKey: '国际化key',
+        icon: '图标',
+        localIcon: '本地图标',
+        iconTypeTitle: '图标类型',
+        order: '排序',
+        constant: '常量路由',
+        keepAlive: '缓存路由',
+        href: '外链',
+        hideInMenu: '隐藏菜单',
+        activeMenu: '高亮的菜单',
+        multiTab: '支持多页签',
+        fixedIndexInTab: '固定在页签中的序号',
+        query: '路由参数',
+        button: '按钮',
+        buttonCode: '按钮编码',
+        buttonDesc: '按钮描述',
+        menuStatus: '菜单状态',
+        form: {
+          home: '请选择首页',
+          menuType: '请选择菜单类型',
+          menuName: '请输入菜单名称',
+          routeName: '请输入路由名称',
+          routePath: '请输入路由路径',
+          pathParam: '请输入路径参数',
+          page: '请选择页面组件',
+          layout: '请选择布局组件',
+          i18nKey: '请输入国际化key',
+          icon: '请输入图标',
+          localIcon: '请选择本地图标',
+          order: '请输入排序',
+          keepAlive: '请选择是否缓存路由',
+          href: '请输入外链',
+          hideInMenu: '请选择是否隐藏菜单',
+          activeMenu: '请选择高亮的菜单的路由名称',
+          multiTab: '请选择是否支持多标签',
+          fixedInTab: '请选择是否固定在页签中',
+          fixedIndexInTab: '请输入固定在页签中的序号',
+          queryKey: '请输入路由参数Key',
+          queryValue: '请输入路由参数Value',
+          button: '请选择是否按钮',
+          buttonCode: '请输入按钮编码',
+          buttonDesc: '请输入按钮描述',
+          menuStatus: '请选择菜单状态'
+        },
+        addMenu: '新增菜单',
+        editMenu: '编辑菜单',
+        addChildMenu: '新增子菜单',
+        type: {
+          directory: '目录',
+          menu: '菜单'
+        },
+        iconType: {
+          iconify: 'iconify图标',
+          local: '本地图标'
+        }
+      }
    }
  },
  form: {
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,13 @@
 import { createApp } from 'vue';
 import './plugins/assets';
-import { setupAppVersionNotification, setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
+import {
+  setupAppVersionNotification,
+  setupDayjs,
+  setupIconifyOffline,
+  setupLoading,
+  setupNProgress,
+  setupProNaiveComponents
+} from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
@@ -21,6 +28,8 @@ async function setupApp() {

  await setupRouter(app);

+  setupProNaiveComponents(app);
+
  setupI18n(app);

  setupAppVersionNotification();
--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@@ -1,3 +1,6 @@
 import 'virtual:svg-icons-register';
 import 'uno.css';
 import '../styles/css/global.css';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
--- a/src/plugins/components.ts
+++ b/src/plugins/components.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import { ProDate, ProDateTime, ProInput, ProRate, create } from 'pro-naive-ui';
+
+/** pro-naive-ui 支持配置表单的按需加载，所以需要注册 */
+export function setupProNaiveComponents(app: App) {
+  const proNaive = create({
+    components: [ProInput, ProDate, ProDateTime, ProRate]
+  });
+  app.use(proNaive);
+}
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,5 +1,6 @@
 export * from './loading';
 export * from './nprogress';
+export * from './components';
 export * from './iconify';
 export * from './dayjs';
 export * from './app';
--- a/src/router/_generated/imports.ts
+++ b/src/router/_generated/imports.ts
@@ -1,27 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-/* oxlint-disable */
-// biome-ignore lint: disable
-// Generated by elegant-router
-// Read more: https://github.com/soybeanjs/elegant-router
-
-import type { RouteFileKey, RouteLayoutKey, RawRouteComponent } from "@elegant-router/types";
-
-export const layouts: Record<RouteLayoutKey, RawRouteComponent> = {
-  base: () => import("@/layouts/base-layout/index.vue"),
-  blank: () => import("@/layouts/blank-layout/index.vue"),
-};
-
-export const views: Record<RouteFileKey, RawRouteComponent> = {
-  403: () => import("@/views/(builtin)/403/index.vue"),
-  404: () => import("@/views/(builtin)/404/index.vue"),
-  500: () => import("@/views/(builtin)/500/index.vue"),
-  Home: () => import("@/views/home/index.vue"),
-  IframeUrl: () => import("@/views/(builtin)/iframe/[url].vue"),
-  Login: () => import("@/views/(builtin)/login/index.vue"),
-  ManageMenu: () => import("@/views/manage/menu/index.vue"),
-  ManageRole: () => import("@/views/manage/role/index.vue"),
-  ManageRoute: () => import("@/views/manage/route/index.vue"),
-  ManageUser: () => import("@/views/manage/user/index.vue"),
-  Wip: () => import("@/views/(builtin)/wip/index.vue"),
-};
--- a/src/router/_generated/routes.ts
+++ b/src/router/_generated/routes.ts
@@ -1,130 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// biome-ignore lint: disable
-// Generated by elegant-router
-// Read more: https://github.com/soybeanjs/elegant-router
-
-import type { AutoRouterRoute } from '@elegant-router/types';
-
-export const routes: AutoRouterRoute[] = [
-  {
-    name: 'Root',
-    path: '/',
-    redirect: '/home',
-    meta: {
-      title: "Root"
-    },
-  },
-  {
-    name: 'NotFound',
-    path: '/:pathMatch(.*)*',
-    layout: 'base',
-    component: '404',
-    meta: {
-      title: "NotFound"
-    },
-  },
-  {
-    name: '403',
-    path: '/403',
-    layout: 'base',
-    component: '403',
-    meta: {
-      title: "403",
-      constant: true
-    },
-  },
-  {
-    name: '404',
-    path: '/404',
-    layout: 'base',
-    component: '404',
-    meta: {
-      title: "404",
-      constant: true
-    },
-  },
-  {
-    name: '500',
-    path: '/500',
-    layout: 'base',
-    component: '500',
-    meta: {
-      title: "500",
-      constant: true
-    },
-  },
-  {
-    name: 'Home',
-    path: '/home',
-    layout: 'base',
-    component: 'Home',
-    meta: {
-      title: "Home"
-    },
-  },
-  {
-    name: 'IframeUrl',
-    path: '/iframe/:url',
-    layout: 'base',
-    component: 'IframeUrl',
-    meta: {
-      title: "IframeUrl"
-    }
-  },
-  {
-    name: 'Login',
-    path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
-    layout: 'base',
-    component: 'Login',
-    meta: {
-      title: "Login",
-      constant: true
-    },
-  },
-  {
-    name: 'ManageMenu',
-    path: '/manage/menu',
-    layout: 'base',
-    component: 'ManageMenu',
-    meta: {
-      title: "ManageMenu"
-    },
-  },
-  {
-    name: 'ManageRole',
-    path: '/manage/role',
-    layout: 'base',
-    component: 'ManageRole',
-    meta: {
-      title: "ManageRole"
-    },
-  },
-  {
-    name: 'ManageRoute',
-    path: '/manage/route',
-    layout: 'base',
-    component: 'ManageRoute',
-    meta: {
-      title: "ManageRoute"
-    }
-  },
-  {
-    name: 'ManageUser',
-    path: '/manage/user',
-    layout: 'base',
-    component: 'ManageUser',
-    meta: {
-      title: "ManageUser"
-    },
-  },
-  {
-    name: 'Wip',
-    path: '/wip',
-    layout: 'base',
-    component: 'Wip',
-    meta: {
-      title: "Wip"
-    }
-  }
-];
--- a/src/router/_generated/shared.ts
+++ b/src/router/_generated/shared.ts
@@ -1,28 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-/* oxlint-disable */
-// biome-ignore lint: disable
-// Generated by elegant-router
-// Read more: https://github.com/soybeanjs/elegant-router
-
-import type { RouteKey, RoutePathMap } from '@elegant-router/types';
-
-const routePathMap: RoutePathMap = {
-  "Root": "/",
-  "NotFound": "/:pathMatch(.*)*",
-  "403": "/403",
-  "404": "/404",
-  "500": "/500",
-  "Home": "/home",
-  "IframeUrl": "/iframe/:url",
-  "Login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
-  "ManageMenu": "/manage/menu",
-  "ManageRole": "/manage/role",
-  "ManageRoute": "/manage/route",
-  "ManageUser": "/manage/user",
-  "Wip": "/wip",
-};
-
-export function getRoutePath(key: RouteKey) {
-  return routePathMap[key];
-}
--- a/src/router/_generated/transformer.ts
+++ b/src/router/_generated/transformer.ts
@@ -1,70 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-/* oxlint-disable */
-// biome-ignore lint: disable
-// Generated by elegant-router
-// Read more: https://github.com/soybeanjs/elegant-router
-
-import type { RouteRecordRaw } from 'vue-router';
-import type {
-  AutoRouterRedirect,
-  AutoRouterRoute,
-  AutoRouterSingleView,
-  RawRouteComponent,
-  RouteFileKey,
-  RouteLayoutKey
-} from '@elegant-router/types';
-
-export function transformToVueRoutes(
-  routes: AutoRouterRoute[],
-  layouts: Record<RouteLayoutKey, RawRouteComponent>,
-  views: Record<RouteFileKey, RawRouteComponent>
-) {
-  const { redirects, groupedRoutes } = getFormattedRoutes(routes);
-
-  const vueRoutes: RouteRecordRaw[] = [...redirects];
-
-  groupedRoutes.forEach((items, layout) => {
-    const layoutRoute: RouteRecordRaw = {
-      path: `/${layout}-layout`,
-      component: layouts[layout],
-      children: items.map(item => {
-        const { layout: _, component, ...rest } = item;
-
-        return {
-          component: views[component],
-          ...rest
-        };
-      })
-    };
-
-    vueRoutes.push(layoutRoute);
-  });
-
-  return vueRoutes;
-}
-
-function getFormattedRoutes(routes: AutoRouterRoute[]) {
-  const groupedRoutes = new Map<RouteLayoutKey, AutoRouterSingleView[]>();
-  const redirects: AutoRouterRedirect[] = [];
-
-  routes.forEach(route => {
-    if (isAutoRouterRedirect(route)) {
-      redirects.push(route);
-      return;
-    }
-
-    const items = groupedRoutes.get(route.layout) || [];
-    items.push(route);
-    groupedRoutes.set(route.layout, items);
-  });
-
-  return {
-    redirects,
-    groupedRoutes
-  };
-}
-
-function isAutoRouterRedirect(route: AutoRouterRoute): route is AutoRouterRedirect {
-  return 'redirect' in route;
-}
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -0,0 +1,66 @@
+/* eslint-disable */
+/* prettier-ignore */
+// Generated by elegant-router
+// Read more: https://github.com/soybeanjs/elegant-router
+
+import type { RouteComponent } from "vue-router";
+import type { LastLevelRouteKey, RouteLayout } from "@elegant-router/types";
+
+import BaseLayout from "@/layouts/base-layout/index.vue";
+import BlankLayout from "@/layouts/blank-layout/index.vue";
+
+export const layouts: Record<RouteLayout, RouteComponent | (() => Promise<RouteComponent>)> = {
+  base: BaseLayout,
+  blank: BlankLayout,
+};
+
+export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<RouteComponent>)> = {
+  403: () => import("@/views/_builtin/403/index.vue"),
+  404: () => import("@/views/_builtin/404/index.vue"),
+  500: () => import("@/views/_builtin/500/index.vue"),
+  "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
+  login: () => import("@/views/_builtin/login/index.vue"),
+  about: () => import("@/views/about/index.vue"),
+  alova_request: () => import("@/views/alova/request/index.vue"),
+  alova_scenes: () => import("@/views/alova/scenes/index.vue"),
+  "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
+  "function_hide-child_three": () => import("@/views/function/hide-child/three/index.vue"),
+  "function_hide-child_two": () => import("@/views/function/hide-child/two/index.vue"),
+  "function_multi-tab": () => import("@/views/function/multi-tab/index.vue"),
+  function_request: () => import("@/views/function/request/index.vue"),
+  "function_super-page": () => import("@/views/function/super-page/index.vue"),
+  function_tab: () => import("@/views/function/tab/index.vue"),
+  "function_toggle-auth": () => import("@/views/function/toggle-auth/index.vue"),
+  home: () => import("@/views/home/index.vue"),
+  manage_menu: () => import("@/views/manage/menu/index.vue"),
+  manage_role: () => import("@/views/manage/role/index.vue"),
+  "manage_user-detail": () => import("@/views/manage/user-detail/[id].vue"),
+  manage_user: () => import("@/views/manage/user/index.vue"),
+  "multi-menu_first_child": () => import("@/views/multi-menu/first_child/index.vue"),
+  "multi-menu_second_child_home": () => import("@/views/multi-menu/second_child_home/index.vue"),
+  plugin_barcode: () => import("@/views/plugin/barcode/index.vue"),
+  plugin_charts_antv: () => import("@/views/plugin/charts/antv/index.vue"),
+  plugin_charts_echarts: () => import("@/views/plugin/charts/echarts/index.vue"),
+  plugin_charts_vchart: () => import("@/views/plugin/charts/vchart/index.vue"),
+  plugin_copy: () => import("@/views/plugin/copy/index.vue"),
+  plugin_editor_markdown: () => import("@/views/plugin/editor/markdown/index.vue"),
+  plugin_editor_quill: () => import("@/views/plugin/editor/quill/index.vue"),
+  plugin_excel: () => import("@/views/plugin/excel/index.vue"),
+  plugin_gantt_dhtmlx: () => import("@/views/plugin/gantt/dhtmlx/index.vue"),
+  plugin_gantt_vtable: () => import("@/views/plugin/gantt/vtable/index.vue"),
+  plugin_icon: () => import("@/views/plugin/icon/index.vue"),
+  plugin_map: () => import("@/views/plugin/map/index.vue"),
+  plugin_pdf: () => import("@/views/plugin/pdf/index.vue"),
+  plugin_pinyin: () => import("@/views/plugin/pinyin/index.vue"),
+  plugin_print: () => import("@/views/plugin/print/index.vue"),
+  plugin_swiper: () => import("@/views/plugin/swiper/index.vue"),
+  plugin_tables_vtable: () => import("@/views/plugin/tables/vtable/index.vue"),
+  plugin_typeit: () => import("@/views/plugin/typeit/index.vue"),
+  plugin_video: () => import("@/views/plugin/video/index.vue"),
+  "pro-naive_form_basic": () => import("@/views/pro-naive/form/basic/index.vue"),
+  "pro-naive_form_query": () => import("@/views/pro-naive/form/query/index.vue"),
+  "pro-naive_form_step": () => import("@/views/pro-naive/form/step/index.vue"),
+  "pro-naive_table_remote": () => import("@/views/pro-naive/table/remote/index.vue"),
+  "pro-naive_table_row-edit": () => import("@/views/pro-naive/table/row-edit/index.vue"),
+  "user-center": () => import("@/views/user-center/index.vue"),
+};
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -0,0 +1,704 @@
+/* eslint-disable */
+/* prettier-ignore */
+// Generated by elegant-router
+// Read more: https://github.com/soybeanjs/elegant-router
+
+import type { GeneratedRoute } from '@elegant-router/types';
+
+export const generatedRoutes: GeneratedRoute[] = [
+  {
+    name: '403',
+    path: '/403',
+    component: 'layout.blank$view.403',
+    meta: {
+      title: '403',
+      i18nKey: 'route.403',
+      constant: true,
+      hideInMenu: true
+    }
+  },
+  {
+    name: '404',
+    path: '/404',
+    component: 'layout.blank$view.404',
+    meta: {
+      title: '404',
+      i18nKey: 'route.404',
+      constant: true,
+      hideInMenu: true
+    }
+  },
+  {
+    name: '500',
+    path: '/500',
+    component: 'layout.blank$view.500',
+    meta: {
+      title: '500',
+      i18nKey: 'route.500',
+      constant: true,
+      hideInMenu: true
+    }
+  },
+  {
+    name: 'about',
+    path: '/about',
+    component: 'layout.base$view.about',
+    meta: {
+      title: 'about',
+      i18nKey: 'route.about',
+      icon: 'fluent:book-information-24-regular',
+      order: 10
+    }
+  },
+  {
+    name: 'alova',
+    path: '/alova',
+    component: 'layout.base',
+    meta: {
+      title: 'alova',
+      i18nKey: 'route.alova',
+      icon: 'carbon:http',
+      order: 7
+    },
+    children: [
+      {
+        name: 'alova_request',
+        path: '/alova/request',
+        component: 'view.alova_request',
+        meta: {
+          title: 'alova_request',
+          i18nKey: 'route.alova_request',
+          order: 1
+        }
+      },
+      {
+        name: 'alova_scenes',
+        path: '/alova/scenes',
+        component: 'view.alova_scenes',
+        meta: {
+          title: 'alova_scenes',
+          i18nKey: 'route.alova_scenes',
+          icon: 'cbi:scene-dynamic',
+          order: 3
+        }
+      }
+    ]
+  },
+  {
+    name: 'function',
+    path: '/function',
+    component: 'layout.base',
+    meta: {
+      title: 'function',
+      i18nKey: 'route.function',
+      icon: 'icon-park-outline:all-application',
+      order: 6
+    },
+    children: [
+      {
+        name: 'function_hide-child',
+        path: '/function/hide-child',
+        meta: {
+          title: 'function_hide-child',
+          i18nKey: 'route.function_hide-child',
+          icon: 'material-symbols:filter-list-off',
+          order: 2
+        },
+        redirect: '/function/hide-child/one',
+        children: [
+          {
+            name: 'function_hide-child_one',
+            path: '/function/hide-child/one',
+            component: 'view.function_hide-child_one',
+            meta: {
+              title: 'function_hide-child_one',
+              i18nKey: 'route.function_hide-child_one',
+              icon: 'material-symbols:filter-list-off',
+              hideInMenu: true,
+              activeMenu: 'function_hide-child'
+            }
+          },
+          {
+            name: 'function_hide-child_three',
+            path: '/function/hide-child/three',
+            component: 'view.function_hide-child_three',
+            meta: {
+              title: 'function_hide-child_three',
+              i18nKey: 'route.function_hide-child_three',
+              hideInMenu: true,
+              activeMenu: 'function_hide-child'
+            }
+          },
+          {
+            name: 'function_hide-child_two',
+            path: '/function/hide-child/two',
+            component: 'view.function_hide-child_two',
+            meta: {
+              title: 'function_hide-child_two',
+              i18nKey: 'route.function_hide-child_two',
+              hideInMenu: true,
+              activeMenu: 'function_hide-child'
+            }
+          }
+        ]
+      },
+      {
+        name: 'function_multi-tab',
+        path: '/function/multi-tab',
+        component: 'view.function_multi-tab',
+        meta: {
+          title: 'function_multi-tab',
+          i18nKey: 'route.function_multi-tab',
+          icon: 'ic:round-tab',
+          multiTab: true,
+          hideInMenu: true,
+          activeMenu: 'function_tab'
+        }
+      },
+      {
+        name: 'function_request',
+        path: '/function/request',
+        component: 'view.function_request',
+        meta: {
+          title: 'function_request',
+          i18nKey: 'route.function_request',
+          icon: 'carbon:network-overlay',
+          order: 3
+        }
+      },
+      {
+        name: 'function_super-page',
+        path: '/function/super-page',
+        component: 'view.function_super-page',
+        meta: {
+          title: 'function_super-page',
+          i18nKey: 'route.function_super-page',
+          icon: 'ic:round-supervisor-account',
+          order: 5,
+          roles: ['R_SUPER']
+        }
+      },
+      {
+        name: 'function_tab',
+        path: '/function/tab',
+        component: 'view.function_tab',
+        meta: {
+          title: 'function_tab',
+          i18nKey: 'route.function_tab',
+          icon: 'ic:round-tab',
+          order: 1
+        }
+      },
+      {
+        name: 'function_toggle-auth',
+        path: '/function/toggle-auth',
+        component: 'view.function_toggle-auth',
+        meta: {
+          title: 'function_toggle-auth',
+          i18nKey: 'route.function_toggle-auth',
+          icon: 'ic:round-construction',
+          order: 4
+        }
+      }
+    ]
+  },
+  {
+    name: 'home',
+    path: '/home',
+    component: 'layout.base$view.home',
+    meta: {
+      title: 'home',
+      i18nKey: 'route.home',
+      icon: 'mdi:monitor-dashboard',
+      order: 1
+    }
+  },
+  {
+    name: 'iframe-page',
+    path: '/iframe-page/:url',
+    component: 'layout.base$view.iframe-page',
+    props: true,
+    meta: {
+      title: 'iframe-page',
+      i18nKey: 'route.iframe-page',
+      constant: true,
+      hideInMenu: true,
+      keepAlive: true
+    }
+  },
+  {
+    name: 'login',
+    path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
+    component: 'layout.blank$view.login',
+    props: true,
+    meta: {
+      title: 'login',
+      i18nKey: 'route.login',
+      constant: true,
+      hideInMenu: true
+    }
+  },
+  {
+    name: 'manage',
+    path: '/manage',
+    component: 'layout.base',
+    meta: {
+      title: 'manage',
+      i18nKey: 'route.manage',
+      icon: 'carbon:cloud-service-management',
+      order: 9,
+      roles: ['R_ADMIN']
+    },
+    children: [
+      {
+        name: 'manage_menu',
+        path: '/manage/menu',
+        component: 'view.manage_menu',
+        meta: {
+          title: 'manage_menu',
+          i18nKey: 'route.manage_menu',
+          icon: 'material-symbols:route',
+          order: 3,
+          roles: ['R_ADMIN'],
+          keepAlive: true
+        }
+      },
+      {
+        name: 'manage_role',
+        path: '/manage/role',
+        component: 'view.manage_role',
+        meta: {
+          title: 'manage_role',
+          i18nKey: 'route.manage_role',
+          icon: 'carbon:user-role',
+          order: 2,
+          roles: ['R_SUPER']
+        }
+      },
+      {
+        name: 'manage_user',
+        path: '/manage/user',
+        component: 'view.manage_user',
+        meta: {
+          title: 'manage_user',
+          i18nKey: 'route.manage_user',
+          icon: 'ic:round-manage-accounts',
+          order: 1,
+          roles: ['R_ADMIN']
+        }
+      },
+      {
+        name: 'manage_user-detail',
+        path: '/manage/user-detail/:id',
+        component: 'view.manage_user-detail',
+        props: true,
+        meta: {
+          title: 'manage_user-detail',
+          i18nKey: 'route.manage_user-detail',
+          hideInMenu: true,
+          roles: ['R_ADMIN'],
+          activeMenu: 'manage_user'
+        }
+      }
+    ]
+  },
+  {
+    name: 'multi-menu',
+    path: '/multi-menu',
+    component: 'layout.base',
+    meta: {
+      title: 'multi-menu',
+      i18nKey: 'route.multi-menu',
+      order: 8
+    },
+    children: [
+      {
+        name: 'multi-menu_first',
+        path: '/multi-menu/first',
+        meta: {
+          title: 'multi-menu_first',
+          i18nKey: 'route.multi-menu_first',
+          order: 1
+        },
+        children: [
+          {
+            name: 'multi-menu_first_child',
+            path: '/multi-menu/first/child',
+            component: 'view.multi-menu_first_child',
+            meta: {
+              title: 'multi-menu_first_child',
+              i18nKey: 'route.multi-menu_first_child'
+            }
+          }
+        ]
+      },
+      {
+        name: 'multi-menu_second',
+        path: '/multi-menu/second',
+        meta: {
+          title: 'multi-menu_second',
+          i18nKey: 'route.multi-menu_second',
+          order: 2
+        },
+        children: [
+          {
+            name: 'multi-menu_second_child',
+            path: '/multi-menu/second/child',
+            meta: {
+              title: 'multi-menu_second_child',
+              i18nKey: 'route.multi-menu_second_child'
+            },
+            children: [
+              {
+                name: 'multi-menu_second_child_home',
+                path: '/multi-menu/second/child/home',
+                component: 'view.multi-menu_second_child_home',
+                meta: {
+                  title: 'multi-menu_second_child_home',
+                  i18nKey: 'route.multi-menu_second_child_home'
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: 'plugin',
+    path: '/plugin',
+    component: 'layout.base',
+    meta: {
+      title: '插件示例',
+      i18nKey: 'route.plugin',
+      order: 7,
+      icon: 'clarity:plugin-line'
+    },
+    children: [
+      {
+        name: 'plugin_barcode',
+        path: '/plugin/barcode',
+        component: 'view.plugin_barcode',
+        meta: {
+          title: 'plugin_barcode',
+          i18nKey: 'route.plugin_barcode',
+          icon: 'ic:round-barcode'
+        }
+      },
+      {
+        name: 'plugin_charts',
+        path: '/plugin/charts',
+        meta: {
+          title: 'plugin_charts',
+          i18nKey: 'route.plugin_charts',
+          icon: 'mdi:chart-areaspline'
+        },
+        children: [
+          {
+            name: 'plugin_charts_antv',
+            path: '/plugin/charts/antv',
+            component: 'view.plugin_charts_antv',
+            meta: {
+              title: 'plugin_charts_antv',
+              i18nKey: 'route.plugin_charts_antv',
+              icon: 'hugeicons:flow-square'
+            }
+          },
+          {
+            name: 'plugin_charts_echarts',
+            path: '/plugin/charts/echarts',
+            component: 'view.plugin_charts_echarts',
+            meta: {
+              title: 'plugin_charts_echarts',
+              i18nKey: 'route.plugin_charts_echarts',
+              icon: 'simple-icons:apacheecharts'
+            }
+          },
+          {
+            name: 'plugin_charts_vchart',
+            path: '/plugin/charts/vchart',
+            component: 'view.plugin_charts_vchart',
+            meta: {
+              title: 'plugin_charts_vchart',
+              i18nKey: 'route.plugin_charts_vchart',
+              localIcon: 'visactor'
+            }
+          }
+        ]
+      },
+      {
+        name: 'plugin_copy',
+        path: '/plugin/copy',
+        component: 'view.plugin_copy',
+        meta: {
+          title: 'plugin_copy',
+          i18nKey: 'route.plugin_copy',
+          icon: 'mdi:clipboard-outline'
+        }
+      },
+      {
+        name: 'plugin_editor',
+        path: '/plugin/editor',
+        meta: {
+          title: 'plugin_editor',
+          i18nKey: 'route.plugin_editor',
+          icon: 'icon-park-outline:editor'
+        },
+        children: [
+          {
+            name: 'plugin_editor_markdown',
+            path: '/plugin/editor/markdown',
+            component: 'view.plugin_editor_markdown',
+            meta: {
+              title: 'plugin_editor_markdown',
+              i18nKey: 'route.plugin_editor_markdown',
+              icon: 'ri:markdown-line'
+            }
+          },
+          {
+            name: 'plugin_editor_quill',
+            path: '/plugin/editor/quill',
+            component: 'view.plugin_editor_quill',
+            meta: {
+              title: 'plugin_editor_quill',
+              i18nKey: 'route.plugin_editor_quill',
+              icon: 'mdi:file-document-edit-outline'
+            }
+          }
+        ]
+      },
+      {
+        name: 'plugin_excel',
+        path: '/plugin/excel',
+        component: 'view.plugin_excel',
+        meta: {
+          title: 'plugin_excel',
+          i18nKey: 'route.plugin_excel',
+          icon: 'ri:file-excel-2-line',
+          keepAlive: true
+        }
+      },
+      {
+        name: 'plugin_gantt',
+        path: '/plugin/gantt',
+        meta: {
+          title: 'plugin_gantt',
+          i18nKey: 'route.plugin_gantt',
+          icon: 'ant-design:bar-chart-outlined'
+        },
+        children: [
+          {
+            name: 'plugin_gantt_dhtmlx',
+            path: '/plugin/gantt/dhtmlx',
+            component: 'view.plugin_gantt_dhtmlx',
+            meta: {
+              title: 'plugin_gantt_dhtmlx',
+              i18nKey: 'route.plugin_gantt_dhtmlx'
+            }
+          },
+          {
+            name: 'plugin_gantt_vtable',
+            path: '/plugin/gantt/vtable',
+            component: 'view.plugin_gantt_vtable',
+            meta: {
+              title: 'plugin_gantt_vtable',
+              i18nKey: 'route.plugin_gantt_vtable',
+              localIcon: 'visactor'
+            }
+          }
+        ]
+      },
+      {
+        name: 'plugin_icon',
+        path: '/plugin/icon',
+        component: 'view.plugin_icon',
+        meta: {
+          title: 'plugin_icon',
+          i18nKey: 'route.plugin_icon',
+          localIcon: 'custom-icon'
+        }
+      },
+      {
+        name: 'plugin_map',
+        path: '/plugin/map',
+        component: 'view.plugin_map',
+        meta: {
+          title: 'plugin_map',
+          i18nKey: 'route.plugin_map',
+          icon: 'mdi:map'
+        }
+      },
+      {
+        name: 'plugin_pdf',
+        path: '/plugin/pdf',
+        component: 'view.plugin_pdf',
+        meta: {
+          title: 'plugin_pdf',
+          i18nKey: 'route.plugin_pdf',
+          icon: 'uiw:file-pdf'
+        }
+      },
+      {
+        name: 'plugin_pinyin',
+        path: '/plugin/pinyin',
+        component: 'view.plugin_pinyin',
+        meta: {
+          title: 'plugin_pinyin',
+          i18nKey: 'route.plugin_pinyin',
+          icon: 'entypo-social:google-hangouts'
+        }
+      },
+      {
+        name: 'plugin_print',
+        path: '/plugin/print',
+        component: 'view.plugin_print',
+        meta: {
+          title: 'plugin_print',
+          i18nKey: 'route.plugin_print',
+          icon: 'mdi:printer'
+        }
+      },
+      {
+        name: 'plugin_swiper',
+        path: '/plugin/swiper',
+        component: 'view.plugin_swiper',
+        meta: {
+          title: 'plugin_swiper',
+          i18nKey: 'route.plugin_swiper',
+          icon: 'simple-icons:swiper'
+        }
+      },
+      {
+        name: 'plugin_tables',
+        path: '/plugin/tables',
+        meta: {
+          title: 'plugin_tables',
+          i18nKey: 'route.plugin_tables',
+          icon: 'icon-park-outline:table'
+        },
+        children: [
+          {
+            name: 'plugin_tables_vtable',
+            path: '/plugin/tables/vtable',
+            component: 'view.plugin_tables_vtable',
+            meta: {
+              title: 'plugin_tables_vtable',
+              i18nKey: 'route.plugin_tables_vtable',
+              localIcon: 'visactor'
+            }
+          }
+        ]
+      },
+      {
+        name: 'plugin_typeit',
+        path: '/plugin/typeit',
+        component: 'view.plugin_typeit',
+        meta: {
+          title: 'plugin_typeit',
+          i18nKey: 'route.plugin_typeit',
+          icon: 'mdi:typewriter'
+        }
+      },
+      {
+        name: 'plugin_video',
+        path: '/plugin/video',
+        component: 'view.plugin_video',
+        meta: {
+          title: 'plugin_video',
+          i18nKey: 'route.plugin_video',
+          icon: 'mdi:video'
+        }
+      }
+    ]
+  },
+  {
+    name: 'pro-naive',
+    path: '/pro-naive',
+    component: 'layout.base',
+    meta: {
+      title: 'pro-naive',
+      i18nKey: 'route.pro-naive',
+      order: 7,
+      icon: 'material-symbols-light:demography-outline-rounded'
+    },
+    children: [
+      {
+        name: 'pro-naive_form',
+        path: '/pro-naive/form',
+        meta: {
+          title: 'pro-naive_form',
+          i18nKey: 'route.pro-naive_form',
+          icon: 'fluent:form-28-regular'
+        },
+        children: [
+          {
+            name: 'pro-naive_form_basic',
+            path: '/pro-naive/form/basic',
+            component: 'view.pro-naive_form_basic',
+            meta: {
+              title: 'pro-naive_form_basic',
+              i18nKey: 'route.pro-naive_form_basic'
+            }
+          },
+          {
+            name: 'pro-naive_form_query',
+            path: '/pro-naive/form/query',
+            component: 'view.pro-naive_form_query',
+            meta: {
+              title: 'pro-naive_form_query',
+              i18nKey: 'route.pro-naive_form_query'
+            }
+          },
+          {
+            name: 'pro-naive_form_step',
+            path: '/pro-naive/form/step',
+            component: 'view.pro-naive_form_step',
+            meta: {
+              title: 'pro-naive_form_step',
+              i18nKey: 'route.pro-naive_form_step'
+            }
+          }
+        ]
+      },
+      {
+        name: 'pro-naive_table',
+        path: '/pro-naive/table',
+        meta: {
+          title: 'pro-naive_table',
+          i18nKey: 'route.pro-naive_table',
+          icon: 'mynaui:table'
+        },
+        children: [
+          {
+            name: 'pro-naive_table_remote',
+            path: '/pro-naive/table/remote',
+            component: 'view.pro-naive_table_remote',
+            meta: {
+              title: 'pro-naive_table_remote',
+              i18nKey: 'route.pro-naive_table_remote'
+            }
+          },
+          {
+            name: 'pro-naive_table_row-edit',
+            path: '/pro-naive/table/row-edit',
+            component: 'view.pro-naive_table_row-edit',
+            meta: {
+              title: 'pro-naive_table_row-edit',
+              i18nKey: 'route.pro-naive_table_row-edit'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: 'user-center',
+    path: '/user-center',
+    component: 'layout.base$view.user-center',
+    meta: {
+      title: 'user-center',
+      i18nKey: 'route.user-center',
+      hideInMenu: true
+    }
+  }
+];
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -0,0 +1,265 @@
+/* eslint-disable */
+/* prettier-ignore */
+// Generated by elegant-router
+// Read more: https://github.com/soybeanjs/elegant-router
+
+import type { RouteRecordRaw, RouteComponent } from 'vue-router';
+import type { ElegantConstRoute } from '@elegant-router/vue';
+import type { RouteMap, RouteKey, RoutePath } from '@elegant-router/types';
+
+/**
+ * transform elegant const routes to vue routes
+ * @param routes elegant const routes
+ * @param layouts layout components
+ * @param views view components
+ */
+export function transformElegantRoutesToVueRoutes(
+  routes: ElegantConstRoute[],
+  layouts: Record<string, RouteComponent | (() => Promise<RouteComponent>)>,
+  views: Record<string, RouteComponent | (() => Promise<RouteComponent>)>
+) {
+  return routes.flatMap(route => transformElegantRouteToVueRoute(route, layouts, views));
+}
+
+/**
+ * transform elegant route to vue route
+ * @param route elegant const route
+ * @param layouts layout components
+ * @param views view components
+ */
+function transformElegantRouteToVueRoute(
+  route: ElegantConstRoute,
+  layouts: Record<string, RouteComponent | (() => Promise<RouteComponent>)>,
+  views: Record<string, RouteComponent | (() => Promise<RouteComponent>)>
+) {
+  const LAYOUT_PREFIX = 'layout.';
+  const VIEW_PREFIX = 'view.';
+  const ROUTE_DEGREE_SPLITTER = '_';
+  const FIRST_LEVEL_ROUTE_COMPONENT_SPLIT = '$';
+
+  function isLayout(component: string) {
+    return component.startsWith(LAYOUT_PREFIX);
+  }
+
+  function getLayoutName(component: string) {
+    const layout = component.replace(LAYOUT_PREFIX, '');
+
+    if(!layouts[layout]) {
+      throw new Error(`Layout component "${layout}" not found`);
+    }
+
+    return layout;
+  }
+
+  function isView(component: string) {
+    return component.startsWith(VIEW_PREFIX);
+  }
+
+  function getViewName(component: string) {
+    const view = component.replace(VIEW_PREFIX, '');
+
+    if(!views[view]) {
+      throw new Error(`View component "${view}" not found`);
+    }
+
+    return view;
+  }
+
+  function isFirstLevelRoute(item: ElegantConstRoute) {
+    return !item.name.includes(ROUTE_DEGREE_SPLITTER);
+  }
+
+  function isSingleLevelRoute(item: ElegantConstRoute) {
+    return isFirstLevelRoute(item) && !item.children?.length;
+  }
+
+  function getSingleLevelRouteComponent(component: string) {
+    const [layout, view] = component.split(FIRST_LEVEL_ROUTE_COMPONENT_SPLIT);
+
+    return {
+      layout: getLayoutName(layout),
+      view: getViewName(view)
+    };
+  }
+
+  const vueRoutes: RouteRecordRaw[] = [];
+
+  // add props: true to route
+  if (route.path.includes(':') && !route.props) {
+    route.props = true;
+  }
+
+  const { name, path, component, children, ...rest } = route;
+
+  const vueRoute = { name, path, ...rest } as RouteRecordRaw;
+
+  try {
+    if (component) {
+      if (isSingleLevelRoute(route)) {
+        const { layout, view } = getSingleLevelRouteComponent(component);
+
+        const singleLevelRoute: RouteRecordRaw = {
+          path,
+          component: layouts[layout],
+          meta: {
+            title: route.meta?.title || ''
+          },
+          children: [
+            {
+              name,
+              path: '',
+              component: views[view],
+              ...rest
+            } as RouteRecordRaw
+          ]
+        };
+
+        return [singleLevelRoute];
+      }
+
+      if (isLayout(component)) {
+        const layoutName = getLayoutName(component);
+
+        vueRoute.component = layouts[layoutName];
+      }
+
+      if (isView(component)) {
+        const viewName = getViewName(component);
+
+        vueRoute.component = views[viewName];
+      }
+
+    }
+  } catch (error: any) {
+    console.error(`Error transforming route "${route.name}": ${error.toString()}`);
+    return [];
+  }
+
+  // add redirect to child
+  if (children?.length && !vueRoute.redirect) {
+    vueRoute.redirect = {
+      name: children[0].name
+    };
+  }
+
+  if (children?.length) {
+    const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts, views));
+
+    if(isFirstLevelRoute(route)) {
+      vueRoute.children = childRoutes;
+    } else {
+      vueRoutes.push(...childRoutes);
+    }
+  }
+
+  vueRoutes.unshift(vueRoute);
+
+  return vueRoutes;
+}
+
+/**
+ * map of route name and route path
+ */
+const routeMap: RouteMap = {
+  "root": "/",
+  "not-found": "/:pathMatch(.*)*",
+  "exception": "/exception",
+  "exception_403": "/exception/403",
+  "exception_404": "/exception/404",
+  "exception_500": "/exception/500",
+  "document": "/document",
+  "document_project": "/document/project",
+  "document_project-link": "/document/project-link",
+  "document_video": "/document/video",
+  "document_vue": "/document/vue",
+  "document_vite": "/document/vite",
+  "document_unocss": "/document/unocss",
+  "document_naive": "/document/naive",
+  "document_pro-naive": "/document/pro-naive",
+  "document_antd": "/document/antd",
+  "document_alova": "/document/alova",
+  "403": "/403",
+  "404": "/404",
+  "500": "/500",
+  "about": "/about",
+  "alova": "/alova",
+  "alova_request": "/alova/request",
+  "alova_scenes": "/alova/scenes",
+  "function": "/function",
+  "function_hide-child": "/function/hide-child",
+  "function_hide-child_one": "/function/hide-child/one",
+  "function_hide-child_three": "/function/hide-child/three",
+  "function_hide-child_two": "/function/hide-child/two",
+  "function_multi-tab": "/function/multi-tab",
+  "function_request": "/function/request",
+  "function_super-page": "/function/super-page",
+  "function_tab": "/function/tab",
+  "function_toggle-auth": "/function/toggle-auth",
+  "home": "/home",
+  "iframe-page": "/iframe-page/:url",
+  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
+  "manage": "/manage",
+  "manage_menu": "/manage/menu",
+  "manage_role": "/manage/role",
+  "manage_user": "/manage/user",
+  "manage_user-detail": "/manage/user-detail/:id",
+  "multi-menu": "/multi-menu",
+  "multi-menu_first": "/multi-menu/first",
+  "multi-menu_first_child": "/multi-menu/first/child",
+  "multi-menu_second": "/multi-menu/second",
+  "multi-menu_second_child": "/multi-menu/second/child",
+  "multi-menu_second_child_home": "/multi-menu/second/child/home",
+  "plugin": "/plugin",
+  "plugin_barcode": "/plugin/barcode",
+  "plugin_charts": "/plugin/charts",
+  "plugin_charts_antv": "/plugin/charts/antv",
+  "plugin_charts_echarts": "/plugin/charts/echarts",
+  "plugin_charts_vchart": "/plugin/charts/vchart",
+  "plugin_copy": "/plugin/copy",
+  "plugin_editor": "/plugin/editor",
+  "plugin_editor_markdown": "/plugin/editor/markdown",
+  "plugin_editor_quill": "/plugin/editor/quill",
+  "plugin_excel": "/plugin/excel",
+  "plugin_gantt": "/plugin/gantt",
+  "plugin_gantt_dhtmlx": "/plugin/gantt/dhtmlx",
+  "plugin_gantt_vtable": "/plugin/gantt/vtable",
+  "plugin_icon": "/plugin/icon",
+  "plugin_map": "/plugin/map",
+  "plugin_pdf": "/plugin/pdf",
+  "plugin_pinyin": "/plugin/pinyin",
+  "plugin_print": "/plugin/print",
+  "plugin_swiper": "/plugin/swiper",
+  "plugin_tables": "/plugin/tables",
+  "plugin_tables_vtable": "/plugin/tables/vtable",
+  "plugin_typeit": "/plugin/typeit",
+  "plugin_video": "/plugin/video",
+  "pro-naive": "/pro-naive",
+  "pro-naive_form": "/pro-naive/form",
+  "pro-naive_form_basic": "/pro-naive/form/basic",
+  "pro-naive_form_query": "/pro-naive/form/query",
+  "pro-naive_form_step": "/pro-naive/form/step",
+  "pro-naive_table": "/pro-naive/table",
+  "pro-naive_table_remote": "/pro-naive/table/remote",
+  "pro-naive_table_row-edit": "/pro-naive/table/row-edit",
+  "user-center": "/user-center"
+};
+
+/**
+ * get route path by route name
+ * @param name route name
+ */
+export function getRoutePath<T extends RouteKey>(name: T) {
+  return routeMap[name];
+}
+
+/**
+ * get route name by route path
+ * @param path route path
+ */
+export function getRouteName(path: RoutePath) {
+  const routeEntries = Object.entries(routeMap) as [RouteKey, RoutePath][];
+
+  const routeName: RouteKey | null = routeEntries.find(([, routePath]) => routePath === path)?.[0] || null;
+
+  return routeName;
+}
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,12 @@
 import type { App } from 'vue';
-import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
-import type { RouterHistory } from 'vue-router';
+import {
+  type RouterHistory,
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory
+} from 'vue-router';
+import { createBuiltinVueRoutes } from './routes/builtin';
 import { createRouterGuard } from './guard';

 const { VITE_ROUTER_HISTORY_MODE = 'history', VITE_BASE_URL } = import.meta.env;
@@ -13,7 +19,7 @@ const historyCreatorMap: Record<Env.RouterHistoryMode, (base?: string) => Router

 export const router = createRouter({
  history: historyCreatorMap[VITE_ROUTER_HISTORY_MODE](VITE_BASE_URL),
-  routes: []
+  routes: createBuiltinVueRoutes()
 });

 /** Setup Vue Router */
--- a/src/router/routes/builtin.ts
+++ b/src/router/routes/builtin.ts
@@ -0,0 +1,31 @@
+import type { CustomRoute } from '@elegant-router/types';
+import { layouts, views } from '../elegant/imports';
+import { getRoutePath, transformElegantRoutesToVueRoutes } from '../elegant/transform';
+
+export const ROOT_ROUTE: CustomRoute = {
+  name: 'root',
+  path: '/',
+  redirect: getRoutePath(import.meta.env.VITE_ROUTE_HOME) || '/home',
+  meta: {
+    title: 'root',
+    constant: true
+  }
+};
+
+const NOT_FOUND_ROUTE: CustomRoute = {
+  name: 'not-found',
+  path: '/:pathMatch(.*)*',
+  component: 'layout.blank$view.404',
+  meta: {
+    title: 'not-found',
+    constant: true
+  }
+};
+
+/** builtin routes, it must be constant and setup in vue-router */
+const builtinRoutes: CustomRoute[] = [ROOT_ROUTE, NOT_FOUND_ROUTE];
+
+/** create builtin vue routes */
+export function createBuiltinVueRoutes() {
+  return transformElegantRoutesToVueRoutes(builtinRoutes, layouts, views);
+}
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -1,39 +1,233 @@
-import type { AutoRouterRedirect, AutoRouterRoute } from '@elegant-router/types';
-import { routes } from '../_generated/routes';
-import { layouts, views } from '../_generated/imports';
-import { transformToVueRoutes } from '../_generated/transformer';
+import type { CustomRoute, ElegantConstRoute, ElegantRoute } from '@elegant-router/types';
+import { generatedRoutes } from '../elegant/routes';
+import { layouts, views } from '../elegant/imports';
+import { transformElegantRoutesToVueRoutes } from '../elegant/transform';
+
+/**
+ * custom routes
+ *
+ * @link https://github.com/soybeanjs/elegant-router?tab=readme-ov-file#custom-route
+ */
+const customRoutes: CustomRoute[] = [
+  {
+    name: 'exception',
+    path: '/exception',
+    component: 'layout.base',
+    meta: {
+      title: 'exception',
+      i18nKey: 'route.exception',
+      icon: 'ant-design:exception-outlined',
+      order: 7
+    },
+    children: [
+      {
+        name: 'exception_403',
+        path: '/exception/403',
+        component: 'view.403',
+        meta: {
+          title: 'exception_403',
+          i18nKey: 'route.exception_403',
+          icon: 'ic:baseline-block'
+        }
+      },
+      {
+        name: 'exception_404',
+        path: '/exception/404',
+        component: 'view.404',
+        meta: {
+          title: 'exception_404',
+          i18nKey: 'route.exception_404',
+          icon: 'ic:baseline-web-asset-off'
+        }
+      },
+      {
+        name: 'exception_500',
+        path: '/exception/500',
+        component: 'view.500',
+        meta: {
+          title: 'exception_500',
+          i18nKey: 'route.exception_500',
+          icon: 'ic:baseline-wifi-off'
+        }
+      }
+    ]
+  },
+  {
+    name: 'document',
+    path: '/document',
+    component: 'layout.base',
+    meta: {
+      title: 'document',
+      i18nKey: 'route.document',
+      order: 2,
+      icon: 'mdi:file-document-multiple-outline'
+    },
+    children: [
+      {
+        name: 'document_antd',
+        path: '/document/antd',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://antdv.com/components/overview-cn'
+        },
+        meta: {
+          title: 'document_antd',
+          i18nKey: 'route.document_antd',
+          order: 7,
+          icon: 'logos:ant-design'
+        }
+      },
+      {
+        name: 'document_naive',
+        path: '/document/naive',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://www.naiveui.com/zh-CN/os-theme/docs/introduction'
+        },
+        meta: {
+          title: 'document_naive',
+          i18nKey: 'route.document_naive',
+          order: 6,
+          icon: 'logos:naiveui'
+        }
+      },
+      {
+        name: 'document_pro-naive',
+        path: '/document/pro-naive',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://naive-ui.pro-components.cn/'
+        },
+        meta: {
+          title: 'document_pro-naive',
+          i18nKey: 'route.document_pro-naive',
+          order: 6,
+          icon: 'logos:naiveui'
+        }
+      },
+      {
+        name: 'document_alova',
+        path: '/document/alova',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://alova.js.org'
+        },
+        meta: {
+          title: 'document_alova',
+          i18nKey: 'route.document_alova',
+          order: 7,
+          localIcon: 'alova'
+        }
+      },
+      {
+        name: 'document_project',
+        path: '/document/project',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://docs.soybeanjs.cn/zh'
+        },
+        meta: {
+          title: 'document_project',
+          i18nKey: 'route.document_project',
+          order: 1,
+          localIcon: 'logo'
+        }
+      },
+      {
+        name: 'document_project-link',
+        path: '/document/project-link',
+        component: 'view.iframe-page',
+        meta: {
+          title: 'document_project-link',
+          i18nKey: 'route.document_project-link',
+          order: 2,
+          localIcon: 'logo',
+          href: 'https://docs.soybeanjs.cn/zh'
+        }
+      },
+      {
+        name: 'document_video',
+        path: '/document/video',
+        component: 'view.iframe-page',
+        meta: {
+          title: 'document_video',
+          i18nKey: 'route.document_video',
+          order: 2,
+          localIcon: 'logo',
+          href: 'https://www.bilibili.com/video/BV1YKdRYXELC'
+        }
+      },
+      {
+        name: 'document_unocss',
+        path: '/document/unocss',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://unocss.dev/'
+        },
+        meta: {
+          title: 'document_unocss',
+          i18nKey: 'route.document_unocss',
+          order: 5,
+          icon: 'logos:unocss'
+        }
+      },
+      {
+        name: 'document_vite',
+        path: '/document/vite',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://cn.vitejs.dev/'
+        },
+        meta: {
+          title: 'document_vite',
+          i18nKey: 'route.document_vite',
+          order: 4,
+          icon: 'logos:vitejs'
+        }
+      },
+      {
+        name: 'document_vue',
+        path: '/document/vue',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://cn.vuejs.org/'
+        },
+        meta: {
+          title: 'document_vue',
+          i18nKey: 'route.document_vue',
+          order: 3,
+          icon: 'logos:vue'
+        }
+      }
+    ]
+  }
+];

 /** create routes when the auth route mode is static */
 export function createStaticRoutes() {
-  const constantRoutes: AutoRouterRoute[] = [];
-  const authRoutes: AutoRouterRoute[] = [];
+  const constantRoutes: ElegantRoute[] = [];

-  let rootRoute: AutoRouterRedirect | undefined;
+  const authRoutes: ElegantRoute[] = [];

-  routes.forEach(item => {
+  [...customRoutes, ...generatedRoutes].forEach(item => {
    if (item.meta?.constant) {
      constantRoutes.push(item);
    } else {
      authRoutes.push(item);
    }
-
-    if (item.name === 'Root') {
-      rootRoute = item as AutoRouterRedirect;
-    }
  });

  return {
    constantRoutes,
-    authRoutes,
-    rootRoute: rootRoute as AutoRouterRedirect
+    authRoutes
  };
 }

 /**
 * Get auth vue routes
 *
- * @param authRoutes Elegant routes
+ * @param routes Elegant routes
 */
-export function getAuthVueRoutes(authRoutes: AutoRouterRoute[]) {
-  return transformToVueRoutes(authRoutes, layouts, views);
+export function getAuthVueRoutes(routes: ElegantConstRoute[]) {
+  return transformElegantRoutesToVueRoutes(routes, layouts, views);
 }
--- a/src/service-alova/api/auth.ts
+++ b/src/service-alova/api/auth.ts
@@ -0,0 +1,56 @@
+import { alova } from '../request';
+
+/**
+ * Login
+ *
+ * @param userName User name
+ * @param password Password
+ */
+export function fetchLogin(userName: string, password: string) {
+  return alova.Post<Api.Auth.LoginToken>('/auth/login', { userName, password });
+}
+
+/** Get user info */
+export function fetchGetUserInfo() {
+  return alova.Get<Api.Auth.UserInfo>('/auth/getUserInfo');
+}
+
+/** Send captcha to target phone */
+export function sendCaptcha(phone: string) {
+  return alova.Post<null>('/auth/sendCaptcha', { phone });
+}
+
+/** Verify captcha */
+export function verifyCaptcha(phone: string, code: string) {
+  return alova.Post<null>('/auth/verifyCaptcha', { phone, code });
+}
+
+/**
+ * Refresh token
+ *
+ * @param refreshToken Refresh token
+ */
+export function fetchRefreshToken(refreshToken: string) {
+  return alova.Post<Api.Auth.LoginToken>(
+    '/auth/refreshToken',
+    { refreshToken },
+    {
+      meta: {
+        authRole: 'refreshToken'
+      }
+    }
+  );
+}
+
+/**
+ * return custom backend error
+ *
+ * @param code error code
+ * @param msg error message
+ */
+export function fetchCustomBackendError(code: string, msg: string) {
+  return alova.Get('/auth/error', {
+    params: { code, msg },
+    shareRequest: false
+  });
+}
--- a/src/service-alova/api/index.ts
+++ b/src/service-alova/api/index.ts
@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './route';
+export * from './system-manage';
--- a/src/service-alova/api/route.ts
+++ b/src/service-alova/api/route.ts
@@ -0,0 +1,20 @@
+import { alova } from '../request';
+
+/** get constant routes */
+export function fetchGetConstantRoutes() {
+  return alova.Get<Api.Route.MenuRoute[]>('/route/getConstantRoutes');
+}
+
+/** get user routes */
+export function fetchGetUserRoutes() {
+  return alova.Get<Api.Route.UserRoute>('/route/getUserRoutes');
+}
+
+/**
+ * whether the route is exist
+ *
+ * @param routeName route name
+ */
+export function fetchIsRouteExist(routeName: string) {
+  return alova.Get<boolean>('/route/isRouteExist', { params: { routeName } });
+}
--- a/src/service-alova/api/system-manage.ts
+++ b/src/service-alova/api/system-manage.ts
@@ -0,0 +1,59 @@
+import { alova } from '../request';
+
+/** get role list */
+export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
+  return alova.Get<Api.SystemManage.RoleList>('/systemManage/getRoleList', { params });
+}
+
+/**
+ * get all roles
+ *
+ * these roles are all enabled
+ */
+export function fetchGetAllRoles() {
+  return alova.Get<Api.SystemManage.AllRole[]>('/systemManage/getAllRoles');
+}
+
+/** get user list */
+export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
+  return alova.Get<Api.SystemManage.UserList>('/systemManage/getUserList', { params });
+}
+
+export type UserModel = Pick<
+  Api.SystemManage.User,
+  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
+>;
+/** add user */
+export function addUser(data: UserModel) {
+  return alova.Post<null>('/systemManage/addUser', data);
+}
+
+/** update user */
+export function updateUser(data: UserModel) {
+  return alova.Post<null>('/systemManage/updateUser', data);
+}
+
+/** delete user */
+export function deleteUser(id: number) {
+  return alova.Delete<null>('/systemManage/deleteUser', { id });
+}
+
+/** batch delete user */
+export function batchDeleteUser(ids: number[]) {
+  return alova.Delete<null>('/systemManage/batchDeleteUser', { ids });
+}
+
+/** get menu list */
+export function fetchGetMenuList() {
+  return alova.Get<Api.SystemManage.MenuList>('/systemManage/getMenuList/v2');
+}
+
+/** get all pages */
+export function fetchGetAllPages() {
+  return alova.Get<string[]>('/systemManage/getAllPages');
+}
+
+/** get menu tree */
+export function fetchGetMenuTree() {
+  return alova.Get<Api.SystemManage.MenuTree[]>('/systemManage/getMenuTree');
+}
--- a/src/service-alova/mocks/feature-users-20241014.ts
+++ b/src/service-alova/mocks/feature-users-20241014.ts
@@ -0,0 +1,56 @@
+import { defineMock } from '@sa/alova/mock';
+
+// you can separate the mock data into multiple files dependent on your project versions
+export default defineMock({
+  '[POST]/systemManage/addUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[POST]/systemManage/updateUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[DELETE]/systemManage/deleteUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[DELETE]/systemManage/batchDeleteUser': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[POST]/auth/sendCaptcha': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '[POST]/auth/verifyCaptcha': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: null
+    };
+  },
+  '/mock/getLastTime': () => {
+    return {
+      code: '0000',
+      msg: 'success',
+      data: {
+        time: new Date().toLocaleTimeString()
+      }
+    };
+  }
+});
--- a/src/service-alova/request/index.ts
+++ b/src/service-alova/request/index.ts
@@ -0,0 +1,115 @@
+import { createAlovaRequest } from '@sa/alova';
+import { createAlovaMockAdapter } from '@sa/alova/mock';
+import adapterFetch from '@sa/alova/fetch';
+import { useAuthStore } from '@/store/modules/auth';
+import { getServiceBaseURL } from '@/utils/service';
+import { $t } from '@/locales';
+import featureUsers20241014 from '../mocks/feature-users-20241014';
+import { getAuthorization, handleRefreshToken, showErrorMsg } from './shared';
+import type { RequestInstanceState } from './type';
+
+const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
+const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
+
+const state: RequestInstanceState = {
+  errMsgStack: []
+};
+const mockAdapter = createAlovaMockAdapter([featureUsers20241014], {
+  // using requestAdapter if not match mock request
+  httpAdapter: adapterFetch(),
+
+  // response delay time
+  delay: 1000,
+
+  // global mock toggle
+  enable: true,
+  matchMode: 'methodurl'
+});
+export const alova = createAlovaRequest(
+  {
+    baseURL,
+    requestAdapter: import.meta.env.DEV ? mockAdapter : adapterFetch()
+  },
+  {
+    onRequest({ config }) {
+      const Authorization = getAuthorization();
+      config.headers.Authorization = Authorization;
+      config.headers.apifoxToken = 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2';
+    },
+    tokenRefresher: {
+      async isExpired(response) {
+        const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
+        const { code } = await response.clone().json();
+        return expiredTokenCodes.includes(String(code));
+      },
+      async handler() {
+        await handleRefreshToken();
+      }
+    },
+    async isBackendSuccess(response) {
+      // when the backend response code is "0000"(default), it means the request is success
+      // to change this logic by yourself, you can modify the `VITE_SERVICE_SUCCESS_CODE` in `.env` file
+      const resp = response.clone();
+      const data = await resp.json();
+      return String(data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
+    },
+    async transformBackendResponse(response) {
+      return (await response.clone().json()).data;
+    },
+    async onError(error, response) {
+      const authStore = useAuthStore();
+
+      let message = error.message;
+      let responseCode = '';
+      if (response) {
+        const data = await response?.clone().json();
+        message = data.msg;
+        responseCode = String(data.code);
+      }
+
+      function handleLogout() {
+        showErrorMsg(state, message);
+        authStore.resetStore();
+      }
+
+      function logoutAndCleanup() {
+        handleLogout();
+        window.removeEventListener('beforeunload', handleLogout);
+        state.errMsgStack = state.errMsgStack.filter(msg => msg !== message);
+      }
+
+      // when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
+      const logoutCodes = import.meta.env.VITE_SERVICE_LOGOUT_CODES?.split(',') || [];
+      if (logoutCodes.includes(responseCode)) {
+        handleLogout();
+        throw error;
+      }
+
+      // when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
+      const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
+      if (modalLogoutCodes.includes(responseCode) && !state.errMsgStack?.includes(message)) {
+        state.errMsgStack = [...(state.errMsgStack || []), message];
+
+        // prevent the user from refreshing the page
+        window.addEventListener('beforeunload', handleLogout);
+
+        window.$dialog?.error({
+          title: $t('common.error'),
+          content: message,
+          positiveText: $t('common.confirm'),
+          maskClosable: false,
+          closeOnEsc: false,
+          onPositiveClick() {
+            logoutAndCleanup();
+          },
+          onClose() {
+            logoutAndCleanup();
+          }
+        });
+        throw error;
+      }
+      showErrorMsg(state, message);
+      throw error;
+    }
+  }
+);
--- a/src/service-alova/request/shared.ts
+++ b/src/service-alova/request/shared.ts
@@ -0,0 +1,53 @@
+import { useAuthStore } from '@/store/modules/auth';
+import { localStg } from '@/utils/storage';
+import { fetchRefreshToken } from '../api';
+import type { RequestInstanceState } from './type';
+
+export function getAuthorization() {
+  const token = localStg.get('token');
+  const Authorization = token ? `Bearer ${token}` : null;
+
+  return Authorization;
+}
+
+/** refresh token */
+export async function handleRefreshToken() {
+  const { resetStore } = useAuthStore();
+
+  const rToken = localStg.get('refreshToken') || '';
+  const refreshTokenMethod = fetchRefreshToken(rToken);
+
+  // set the refreshToken role, so that the request will not be intercepted
+  refreshTokenMethod.meta.authRole = 'refreshToken';
+
+  try {
+    const data = await refreshTokenMethod;
+    localStg.set('token', data.token);
+    localStg.set('refreshToken', data.refreshToken);
+  } catch (error) {
+    resetStore();
+    throw error;
+  }
+}
+
+export function showErrorMsg(state: RequestInstanceState, message: string) {
+  if (!state.errMsgStack?.length) {
+    state.errMsgStack = [];
+  }
+
+  const isExist = state.errMsgStack.includes(message);
+
+  if (!isExist) {
+    state.errMsgStack.push(message);
+
+    window.$message?.error(message, {
+      onLeave: () => {
+        state.errMsgStack = state.errMsgStack.filter(msg => msg !== message);
+
+        setTimeout(() => {
+          state.errMsgStack = [];
+        }, 5000);
+      }
+    });
+  }
+}
--- a/src/service-alova/request/type.ts
+++ b/src/service-alova/request/type.ts
@@ -0,0 +1,4 @@
+export interface RequestInstanceState {
+  /** the request error message stack */
+  errMsgStack: string[];
+}
--- a/src/service/api/index.ts
+++ b/src/service/api/index.ts
@@ -1,2 +1,3 @@
 export * from './auth';
 export * from './route';
+export * from './system-manage';
--- a/src/service/api/system-manage.ts
+++ b/src/service/api/system-manage.ts
@@ -0,0 +1,55 @@
+import { request } from '../request';
+
+/** get role list */
+export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
+  return request<Api.SystemManage.RoleList>({
+    url: '/systemManage/getRoleList',
+    method: 'get',
+    params
+  });
+}
+
+/**
+ * get all roles
+ *
+ * these roles are all enabled
+ */
+export function fetchGetAllRoles() {
+  return request<Api.SystemManage.AllRole[]>({
+    url: '/systemManage/getAllRoles',
+    method: 'get'
+  });
+}
+
+/** get user list */
+export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
+  return request<Api.SystemManage.UserList>({
+    url: '/systemManage/getUserList',
+    method: 'get',
+    params
+  });
+}
+
+/** get menu list */
+export function fetchGetMenuList() {
+  return request<Api.SystemManage.MenuList>({
+    url: '/systemManage/getMenuList/v2',
+    method: 'get'
+  });
+}
+
+/** get all pages */
+export function fetchGetAllPages() {
+  return request<string[]>({
+    url: '/systemManage/getAllPages',
+    method: 'get'
+  });
+}
+
+/** get menu tree */
+export function fetchGetMenuTree() {
+  return request<Api.SystemManage.MenuTree[]>({
+    url: '/systemManage/getMenuTree',
+    method: 'get'
+  });
+}
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -46,7 +46,10 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
    });

    setReloadFlag(true);
-    routeStore.resetRouteCache();
+
+    if (themeStore.resetCacheStrategy === 'refresh') {
+      routeStore.resetRouteCache();
+    }
  }

  const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');
--- a/src/store/modules/tab/index.ts
+++ b/src/store/modules/tab/index.ts
@@ -112,8 +112,10 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
      await switchRouteByTab(nextTab);
    }

-    // reset route cache
-    routeStore.resetRouteCache(removedTabRouteKey);
+    // reset route cache if cache strategy is close
+    if (themeStore.resetCacheStrategy === 'close') {
+      routeStore.resetRouteCache(removedTabRouteKey);
+    }
  }

  /** remove active tab */
@@ -145,8 +147,10 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
    const tabsToRemove = tabs.value.filter(tab => !remainTabIds.includes(tab.id));
    const routeKeysToReset: RouteKey[] = [];

-    for (const tab of tabsToRemove) {
-      routeKeysToReset.push(tab.routeKey);
+    if (themeStore.resetCacheStrategy === 'close') {
+      for (const tab of tabsToRemove) {
+        routeKeysToReset.push(tab.routeKey);
+      }
    }

    const removedTabsIds = tabsToRemove.map(tab => tab.id);
--- a/src/theme/preset/azir.json
+++ b/src/theme/preset/azir.json
@@ -15,6 +15,7 @@
    "error": "#c49a9a"
  },
  "isInfoFollowPrimary": true,
+  "resetCacheStrategy": "refresh",
  "layout": {
    "mode": "vertical-mix",
    "scrollMode": "wrapper"
--- a/src/theme/preset/compact.json
+++ b/src/theme/preset/compact.json
@@ -15,6 +15,7 @@
    "error": "#f5222d"
  },
  "isInfoFollowPrimary": true,
+  "resetCacheStrategy": "close",
  "layout": {
    "mode": "vertical",
    "scrollMode": "content"
--- a/src/theme/preset/dark.json
+++ b/src/theme/preset/dark.json
@@ -15,6 +15,7 @@
    "error": "#f5222d"
  },
  "isInfoFollowPrimary": true,
+  "resetCacheStrategy": "close",
  "layout": {
    "mode": "vertical",
    "scrollMode": "content"
--- a/src/theme/preset/default.json
+++ b/src/theme/preset/default.json
@@ -15,6 +15,7 @@
    "error": "#f5222d"
  },
  "isInfoFollowPrimary": true,
+  "resetCacheStrategy": "close",
  "layout": {
    "mode": "vertical",
    "scrollMode": "content"
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -12,6 +12,7 @@ export const themeSettings: App.Theme.ThemeSetting = {
    error: '#f5222d'
  },
  isInfoFollowPrimary: true,
+  resetCacheStrategy: 'refresh',
  layout: {
    mode: 'vertical',
    scrollMode: 'content'
--- a/src/typings/api/common.d.ts
+++ b/src/typings/api/common.d.ts
@@ -5,38 +5,46 @@
 */
 declare namespace Api {
  namespace Common {
-    interface CreatedUpdatedDTO {
-      /** 创建人 */
-      createdBy: string;
-      /** 创建时间 */
-      createdTime: string;
-      /** 更新人 */
-      updatedBy: string;
-      /** 更新时间 */
-      updatedTime: string;
-    }
-
-    interface CommonRecordDTO extends CreatedUpdatedDTO {
-      /** 主键 */
-      id: number;
-      /**
-       * 启用状态 Enable status
-       *
-       * - "1": 启用
-       * - "2": 禁用
-       */
-      status: Union.EnableStatus | null;
-    }
-
-    interface PaginationQueryDTO {
-      page: number;
-      pageSize: number;
-      sort: string;
-    }
-
-    interface PaginationDTO extends Pick<PaginationQueryDTO, 'page' | 'pageSize'> {
-      /** 总条数 */
+    /** common params of paginating */
+    interface PaginatingCommonParams {
+      /** current page number */
+      current: number;
+      /** page size */
+      size: number;
+      /** total count */
      total: number;
    }
+
+    /** common params of paginating query list data */
+    interface PaginatingQueryRecord<T = any> extends PaginatingCommonParams {
+      records: T[];
+    }
+
+    /** common search params of table */
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
+
+    /**
+     * enable status
+     *
+     * - "1": enabled
+     * - "2": disabled
+     */
+    type EnableStatus = '1' | '2';
+
+    /** common record */
+    type CommonRecord<T = any> = {
+      /** record id */
+      id: number;
+      /** record creator */
+      createBy: string;
+      /** record create time */
+      createTime: string;
+      /** record updater */
+      updateBy: string;
+      /** record update time */
+      updateTime: string;
+      /** record status */
+      status: EnableStatus | null;
+    } & T;
  }
 }
--- a/src/typings/api/menu.d.ts
+++ b/src/typings/api/menu.d.ts
@@ -1,42 +0,0 @@
-declare namespace Api {
-  namespace Menu {
-    type RouteKey = import('@elegant-router/types').RouteKey;
-
-    interface Menu extends Common.CommonRecordDTO {
-      /** 菜单名称 */
-      name: string;
-      /** 菜单类型 */
-      menuType: Union.MenuType;
-      /** 菜单描述 */
-      description?: string | null;
-      /** 菜单图标 */
-      icon?: string | null;
-      /** 菜单图标类型 */
-      iconType?: string | null;
-      /** 父级菜单ID */
-      parentId?: number | null;
-      /** 菜单排序 */
-      order?: number | null;
-      /** 是否隐藏 */
-      isHidden?: boolean | null;
-      /** iframe 页面URL */
-      iframeUrl?: string | null;
-      /** 链接 */
-      href?: string | null;
-      /** 路由名称 */
-      routeName?: RouteKey | null;
-      /** 路由查询参数 */
-      routeQueries?: Record<string, string | number | boolean> | null;
-      /** 路由路径参数 */
-      routeParams?: Record<string, string | number | boolean> | null;
-    }
-
-    interface MenuListDTO extends Common.PaginationDTO {
-      list: Menu[];
-    }
-
-    interface MenuTreeDTO extends Menu {
-      children?: MenuTreeDTO[];
-    }
-  }
-}
--- a/src/typings/api/route.d.ts
+++ b/src/typings/api/route.d.ts
@@ -1,34 +1,19 @@
 declare namespace Api {
+  /**
+   * namespace Route
+   *
+   * backend api module: "route"
+   */
  namespace Route {
-    interface RouteDTO extends Common.CommonRecordDTO {
-      /** 路由路径 */
-      path: string;
-      /** 路由名称 */
-      name: string;
-      /** 路由布局 */
-      layout: string;
-      /** 路由组件 */
-      component: string;
-      /** 重定向路径 */
-      redirect?: string | null;
-      /** 路由图标 */
-      icon?: string | null;
-      /** 路由图标类型 */
-      iconType?: string | null;
-      /** 是否缓存 */
-      isCache?: boolean | null;
-      /** 是否支持多开 */
-      isMultiple?: boolean | null;
-      /** 固定索引 */
-      fixedIndex?: number | null;
-      /** 是否需要权限 */
-      requireAuth?: boolean | null;
-      /** 路由属性 */
-      props?: Record<string, string | number | boolean> | null;
+    type ElegantConstRoute = import('@elegant-router/types').ElegantConstRoute;
+
+    interface MenuRoute extends ElegantConstRoute {
+      id: string;
    }

-    interface RouteListDTO extends Common.PaginationDTO {
-      list: RouteDTO[];
+    interface UserRoute {
+      routes: MenuRoute[];
+      home: import('@elegant-router/types').LastLevelRouteKey;
    }
  }
 }
--- a/src/typings/api/system-manage.d.ts
+++ b/src/typings/api/system-manage.d.ts
@@ -0,0 +1,139 @@
+declare namespace Api {
+  /**
+   * namespace SystemManage
+   *
+   * backend api module: "systemManage"
+   */
+  namespace SystemManage {
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
+
+    /** role */
+    type Role = Common.CommonRecord<{
+      /** role name */
+      roleName: string;
+      /** role code */
+      roleCode: string;
+      /** role description */
+      roleDesc: string;
+    }>;
+
+    /** role search params */
+    type RoleSearchParams = CommonType.RecordNullable<
+      Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'status'> & CommonSearchParams
+    >;
+
+    /** role list */
+    type RoleList = Common.PaginatingQueryRecord<Role>;
+
+    /** all role */
+    type AllRole = Pick<Role, 'id' | 'roleName' | 'roleCode'>;
+
+    /**
+     * user gender
+     *
+     * - "1": "male"
+     * - "2": "female"
+     */
+    type UserGender = '1' | '2';
+
+    /** user */
+    type User = Common.CommonRecord<{
+      /** user name */
+      userName: string;
+      /** user gender */
+      userGender: UserGender | null;
+      /** user nick name */
+      nickName: string;
+      /** user phone */
+      userPhone: string;
+      /** user email */
+      userEmail: string;
+      /** user role code collection */
+      userRoles: string[];
+    }>;
+
+    /** user search params */
+    type UserSearchParams = CommonType.RecordNullable<
+      Pick<Api.SystemManage.User, 'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'status'> &
+        CommonSearchParams
+    >;
+
+    /** user list */
+    type UserList = Common.PaginatingQueryRecord<User>;
+
+    /**
+     * menu type
+     *
+     * - "1": directory
+     * - "2": menu
+     */
+    type MenuType = '1' | '2';
+
+    type MenuButton = {
+      /**
+       * button code
+       *
+       * it can be used to control the button permission
+       */
+      code: string;
+      /** button description */
+      desc: string;
+    };
+
+    /**
+     * icon type
+     *
+     * - "1": iconify icon
+     * - "2": local icon
+     */
+    type IconType = '1' | '2';
+
+    type MenuPropsOfRoute = Pick<
+      import('vue-router').RouteMeta,
+      | 'i18nKey'
+      | 'keepAlive'
+      | 'constant'
+      | 'order'
+      | 'href'
+      | 'hideInMenu'
+      | 'activeMenu'
+      | 'multiTab'
+      | 'fixedIndexInTab'
+      | 'query'
+    >;
+
+    type Menu = Common.CommonRecord<{
+      /** parent menu id */
+      parentId: number;
+      /** menu type */
+      menuType: MenuType;
+      /** menu name */
+      menuName: string;
+      /** route name */
+      routeName: string;
+      /** route path */
+      routePath: string;
+      /** component */
+      component?: string;
+      /** iconify icon name or local icon name */
+      icon: string;
+      /** icon type */
+      iconType: IconType;
+      /** buttons */
+      buttons?: MenuButton[] | null;
+      /** children menu */
+      children?: Menu[] | null;
+    }> &
+      MenuPropsOfRoute;
+
+    /** menu list */
+    type MenuList = Common.PaginatingQueryRecord<Menu>;
+
+    type MenuTree = {
+      id: number;
+      label: string;
+      pId: number;
+      children?: MenuTree[];
+    };
+  }
+}
--- a/src/typings/api/union.d.ts
+++ b/src/typings/api/union.d.ts
@@ -1,31 +0,0 @@
-declare namespace Api {
-  namespace Union {
-    /**
-     * 是否 Yes or No
-     *
-     * - "Y": yes
-     * - "N": no
-     */
-    type YesOrNo = 'Y' | 'N';
-
-    /**
-     * 启用状态 Enable status
-     *
-     * - "1": 启用
-     * - "2": 禁用
-     */
-    type EnableStatus = '1' | '2';
-
-    /**
-     * 菜单类型
-     *
-     * - "directory": 目录
-     * - "menu": 菜单
-     * - "iframe": iframe 页面（iframe 嵌入页面）
-     * - "link": 链接（跳转外部链接）
-     * - "page": 页面（不展示在菜单中，可用于作为菜单类型的子菜单展示在面包屑中）
-     * - "other": 其他（作用自行定义）
-     */
-    type MenuType = 'page' | 'directory' | 'menu' | 'iframe' | 'link' | 'other';
-  }
-}
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -20,6 +20,8 @@ declare namespace App {
      otherColor: OtherColor;
      /** Whether info color is followed by the primary color */
      isInfoFollowPrimary: boolean;
+      /** Reset cache strategy */
+      resetCacheStrategy: UnionKey.ResetCacheStrategy;
      /** Layout */
      layout: {
        /** Layout mode */
@@ -179,9 +181,9 @@ declare namespace App {
    type VNode = import('vue').VNode;
    type RouteLocationNormalizedLoaded = import('vue-router').RouteLocationNormalizedLoaded;
    type RouteKey = import('@elegant-router/types').RouteKey;
-    type RoutePathMap = import('@elegant-router/types').RoutePathMap;
+    type RouteMap = import('@elegant-router/types').RouteMap;
    type RoutePath = import('@elegant-router/types').RoutePath;
-    type RouteFileKey = import('@elegant-router/types').RouteFileKey;
+    type LastLevelRouteKey = import('@elegant-router/types').LastLevelRouteKey;

    /** The router push options */
    type RouterPushOptions = {
@@ -199,25 +201,77 @@ declare namespace App {
      showMenu?: boolean;
    }

-    type MenuType = 'page' | 'directory' | 'menu' | 'iframe' | 'link' | 'button' | 'other';
-
    /** The global menu */
-    interface Menu {
-      id: number;
-      name: string;
-      menuType: MenuType;
-      description?: string | null;
-      icon?: string | null;
-      iconType?: string | null;
-      parentId?: number | null;
-      order?: number | null;
-      isHidden?: boolean | null;
-      iframeUrl?: string | null;
-      href?: string | null;
-      routeName?: RouteKey | null;
-      routeQueries?: Record<string, string | number | boolean> | null;
-      routeParams?: Record<string, string | number | boolean> | null;
-    }
+    type Menu = {
+      /**
+       * The menu key
+       *
+       * Equal to the route key
+       */
+      key: string;
+      /** The menu label */
+      label: string;
+      /** The menu i18n key */
+      i18nKey?: I18n.I18nKey | null;
+      /** The route key */
+      routeKey: RouteKey;
+      /** The route path */
+      routePath: RoutePath;
+      /** The menu icon */
+      icon?: () => VNode;
+      /** The menu children */
+      children?: Menu[];
+    };
+
+    type Breadcrumb = Omit<Menu, 'children'> & {
+      options?: Breadcrumb[];
+    };
+
+    /** Tab route */
+    type TabRoute = Pick<RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'> &
+      Partial<Pick<RouteLocationNormalizedLoaded, 'fullPath' | 'query' | 'matched'>>;
+
+    /** The global tab */
+    type Tab = {
+      /** The tab id */
+      id: string;
+      /** The tab label */
+      label: string;
+      /**
+       * The new tab label
+       *
+       * If set, the tab label will be replaced by this value
+       */
+      newLabel?: string;
+      /**
+       * The old tab label
+       *
+       * when reset the tab label, the tab label will be replaced by this value
+       */
+      oldLabel?: string;
+      /** The tab route key */
+      routeKey: LastLevelRouteKey;
+      /** The tab route path */
+      routePath: RouteMap[LastLevelRouteKey];
+      /** The tab route full path */
+      fullPath: string;
+      /** The tab fixed index */
+      fixedIndex?: number | null;
+      /**
+       * Tab icon
+       *
+       * Iconify icon
+       */
+      icon?: string;
+      /**
+       * Tab local icon
+       *
+       * Local icon
+       */
+      localIcon?: string;
+      /** I18n key */
+      i18nKey?: I18n.I18nKey | null;
+    };

    /** Form rule */
    type FormRule = import('naive-ui').FormItemRule;
@@ -322,7 +376,7 @@ declare namespace App {
          themeColor: {
            title: string;
            followPrimary: string;
-          } & Record<Theme.ThemeColorKey, string>;
+          } & Theme.ThemeColor;
          recommendColor: string;
          recommendColorDesc: string;
          preset: {
@@ -382,6 +436,7 @@ declare namespace App {
            };
            fixedHeaderAndTab: string;
          };
+          resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
        };
        general: {
          title: string;
@@ -457,6 +512,19 @@ declare namespace App {
            title: string;
          };
        };
+        about: {
+          title: string;
+          introduction: string;
+          projectInfo: {
+            title: string;
+            version: string;
+            latestBuildTime: string;
+            githubLink: string;
+            previewLink: string;
+          };
+          prdDep: string;
+          devDep: string;
+        };
        home: {
          branchDesc: string;
          greeting: string;
@@ -485,6 +553,253 @@ declare namespace App {
          };
          creativity: string;
        };
+        function: {
+          tab: {
+            tabOperate: {
+              title: string;
+              addTab: string;
+              addTabDesc: string;
+              closeTab: string;
+              closeCurrentTab: string;
+              closeAboutTab: string;
+              addMultiTab: string;
+              addMultiTabDesc1: string;
+              addMultiTabDesc2: string;
+            };
+            tabTitle: {
+              title: string;
+              changeTitle: string;
+              change: string;
+              resetTitle: string;
+              reset: string;
+            };
+          };
+          multiTab: {
+            routeParam: string;
+            backTab: string;
+          };
+          toggleAuth: {
+            toggleAccount: string;
+            authHook: string;
+            superAdminVisible: string;
+            adminVisible: string;
+            adminOrUserVisible: string;
+          };
+          request: {
+            repeatedErrorOccurOnce: string;
+            repeatedError: string;
+            repeatedErrorMsg1: string;
+            repeatedErrorMsg2: string;
+          };
+        };
+        alova: {
+          scenes: {
+            captchaSend: string;
+            autoRequest: string;
+            visibilityRequestTips: string;
+            pollingRequestTips: string;
+            networkRequestTips: string;
+            refreshTime: string;
+            startRequest: string;
+            stopRequest: string;
+            requestCrossComponent: string;
+            triggerAllRequest: string;
+          };
+        };
+        proNaive: {
+          form: {
+            basic: {
+              title: string;
+              appName: string;
+              appStatus: string;
+              createTime: string;
+              responseDate: string;
+              specificationInfo: string;
+              specificate: string;
+              specificationName: string;
+              specificationValue: string;
+              specificationColorRed: string;
+              specificationColorOrange: string;
+              addSpecificateItem: string;
+              fillValue: string;
+              reset: string;
+              submit: string;
+              add: string;
+              delete: string;
+              color: string;
+              normal: string;
+              anomaly: string;
+            };
+            query: {
+              title1: string;
+              title2: string;
+              appName: string;
+              appStatus: string;
+              createTime: string;
+              responseDate: string;
+              endDate: string;
+              field: string;
+            };
+            step: {
+              title: string;
+              step1: {
+                title: string;
+                field: string;
+                nextStep: string;
+              };
+              step2: {
+                title: string;
+                field: string;
+                prevStep: string;
+                submit: string;
+              };
+            };
+          };
+          table: {
+            remote: {
+              filterCondition: string;
+              name: string;
+              createTime: string;
+              responseTime: string;
+              title: string;
+              replicableText: string;
+              tags: string;
+              dateFormatting: string;
+              image: string;
+            };
+            rowEdit: {
+              title: string;
+              reset: string;
+              submit: string;
+              edit: string;
+              delete: string;
+              save: string;
+              task: string;
+              score: string;
+              time: string;
+              name: string;
+              action: string;
+            };
+          };
+        };
+        manage: {
+          common: {
+            status: {
+              enable: string;
+              disable: string;
+            };
+          };
+          role: {
+            title: string;
+            roleName: string;
+            roleCode: string;
+            roleStatus: string;
+            roleDesc: string;
+            form: {
+              roleName: string;
+              roleCode: string;
+              roleStatus: string;
+              roleDesc: string;
+            };
+            addRole: string;
+            editRole: string;
+            menuAuth: string;
+            buttonAuth: string;
+          };
+          user: {
+            title: string;
+            userName: string;
+            userGender: string;
+            nickName: string;
+            userPhone: string;
+            userEmail: string;
+            userStatus: string;
+            userRole: string;
+            form: {
+              userName: string;
+              userGender: string;
+              nickName: string;
+              userPhone: string;
+              userEmail: string;
+              userStatus: string;
+              userRole: string;
+            };
+            addUser: string;
+            editUser: string;
+            gender: {
+              male: string;
+              female: string;
+            };
+          };
+          menu: {
+            home: string;
+            title: string;
+            id: string;
+            parentId: string;
+            menuType: string;
+            menuName: string;
+            routeName: string;
+            routePath: string;
+            pathParam: string;
+            layout: string;
+            page: string;
+            i18nKey: string;
+            icon: string;
+            localIcon: string;
+            iconTypeTitle: string;
+            order: string;
+            constant: string;
+            keepAlive: string;
+            href: string;
+            hideInMenu: string;
+            activeMenu: string;
+            multiTab: string;
+            fixedIndexInTab: string;
+            query: string;
+            button: string;
+            buttonCode: string;
+            buttonDesc: string;
+            menuStatus: string;
+            form: {
+              home: string;
+              menuType: string;
+              menuName: string;
+              routeName: string;
+              routePath: string;
+              pathParam: string;
+              layout: string;
+              page: string;
+              i18nKey: string;
+              icon: string;
+              localIcon: string;
+              order: string;
+              keepAlive: string;
+              href: string;
+              hideInMenu: string;
+              activeMenu: string;
+              multiTab: string;
+              fixedInTab: string;
+              fixedIndexInTab: string;
+              queryKey: string;
+              queryValue: string;
+              button: string;
+              buttonCode: string;
+              buttonDesc: string;
+              menuStatus: string;
+            };
+            addMenu: string;
+            editMenu: string;
+            addChildMenu: string;
+            type: {
+              directory: string;
+              menu: string;
+            };
+            iconType: {
+              iconify: string;
+              local: string;
+            };
+          };
+        };
      };
      form: {
        required: string;
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -12,40 +12,73 @@ declare module 'vue' {
    BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
    ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
    CountTo: typeof import('./../components/custom/count-to.vue')['default']
+    CustomIconSelect: typeof import('./../components/custom/custom-icon-select.vue')['default']
    DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
    ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
    FullScreen: typeof import('./../components/common/full-screen.vue')['default']
+    GithubLink: typeof import('./../components/custom/github-link.vue')['default']
    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
    IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    IconCarbonPlay: typeof import('~icons/carbon/play')['default']
+    IconCarbonStop: typeof import('~icons/carbon/stop')['default']
+    'IconCharm:download': typeof import('~icons/charm/download')['default']
+    'IconF7:circleFill': typeof import('~icons/f7/circle-fill')['default']
+    'IconF7:flagCircleFill': typeof import('~icons/f7/flag-circle-fill')['default']
+    'IconFe:question': typeof import('~icons/fe/question')['default']
+    'IconFileIcons:microsoftExcel': typeof import('~icons/file-icons/microsoft-excel')['default']
+    'IconGg:ratio': typeof import('~icons/gg/ratio')['default']
    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
+    'IconIconParkOutline:equalRatio': typeof import('~icons/icon-park-outline/equal-ratio')['default']
+    IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
+    IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
+    IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
+    IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
+    IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    IconLocalActivity: typeof import('~icons/local/activity')['default']
    IconLocalBanner: typeof import('~icons/local/banner')['default']
+    IconLocalCast: typeof import('~icons/local/cast')['default']
    IconLocalLogo: typeof import('~icons/local/logo')['default']
+    'IconMaterialSymbolsLight:rotate90DegreesCcwOutlineRounded': typeof import('~icons/material-symbols-light/rotate90-degrees-ccw-outline-rounded')['default']
+    'IconMdi:printer': typeof import('~icons/mdi/printer')['default']
    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
+    IconMdiDrag: typeof import('~icons/mdi/drag')['default']
    IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
    IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
-    IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    'IconMingcute:zoomInLine': typeof import('~icons/mingcute/zoom-in-line')['default']
+    'IconMingcute:zoomOutLine': typeof import('~icons/mingcute/zoom-out-line')['default']
    IconUilSearch: typeof import('~icons/uil/search')['default']
    LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
    LookForward: typeof import('./../components/custom/look-forward.vue')['default']
    MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
    NAlert: typeof import('naive-ui')['NAlert']
-    NBadge: typeof import('naive-ui')['NBadge']
    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
    NButton: typeof import('naive-ui')['NButton']
+    NButtonGroup: typeof import('naive-ui')['NButtonGroup']
    NCard: typeof import('naive-ui')['NCard']
    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCollapse: typeof import('naive-ui')['NCollapse']
+    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
    NDivider: typeof import('naive-ui')['NDivider']
    NDrawer: typeof import('naive-ui')['NDrawer']
    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
    NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
    NEmpty: typeof import('naive-ui')['NEmpty']
+    NFlex: typeof import('naive-ui')['NFlex']
    NForm: typeof import('naive-ui')['NForm']
    NFormItem: typeof import('naive-ui')['NFormItem']
+    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
    NGi: typeof import('naive-ui')['NGi']
    NGrid: typeof import('naive-ui')['NGrid']
    NInput: typeof import('naive-ui')['NInput']
@@ -58,19 +91,39 @@ declare module 'vue' {
    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
    NModal: typeof import('naive-ui')['NModal']
    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPagination: typeof import('naive-ui')['NPagination']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
    NPopover: typeof import('naive-ui')['NPopover']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
    NScrollbar: typeof import('naive-ui')['NScrollbar']
    NSelect: typeof import('naive-ui')['NSelect']
+    NSkeleton: typeof import('naive-ui')['NSkeleton']
    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
    NStatistic: typeof import('naive-ui')['NStatistic']
+    NStep: typeof import('naive-ui')['NStep']
+    NSteps: typeof import('naive-ui')['NSteps']
    NSwitch: typeof import('naive-ui')['NSwitch']
    NTab: typeof import('naive-ui')['NTab']
+    NTabPane: typeof import('naive-ui')['NTabPane']
    NTabs: typeof import('naive-ui')['NTabs']
    NTag: typeof import('naive-ui')['NTag']
    NThing: typeof import('naive-ui')['NThing']
    NTooltip: typeof import('naive-ui')['NTooltip']
+    NTree: typeof import('naive-ui')['NTree']
    NWatermark: typeof import('naive-ui')['NWatermark']
    PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
+    ProCard: typeof import('pro-naive-ui')['ProCard']
+    ProConfigProvider: typeof import('pro-naive-ui')['ProConfigProvider']
+    ProDataTable: typeof import('pro-naive-ui')['ProDataTable']
+    ProDate: typeof import('pro-naive-ui')['ProDate']
+    ProEditDataTable: typeof import('pro-naive-ui')['ProEditDataTable']
+    ProForm: typeof import('pro-naive-ui')['ProForm']
+    ProFormList: typeof import('pro-naive-ui')['ProFormList']
+    ProInput: typeof import('pro-naive-ui')['ProInput']
+    ProSearchForm: typeof import('pro-naive-ui')['ProSearchForm']
+    ProSelect: typeof import('pro-naive-ui')['ProSelect']
    ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
@@ -81,5 +134,6 @@ declare module 'vue' {
    TableHeaderOperation: typeof import('./../components/advanced/table-header-operation.vue')['default']
    ThemeSchemaSwitch: typeof import('./../components/common/theme-schema-switch.vue')['default']
    WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
+    WebSiteLink: typeof import('./../components/custom/web-site-link.vue')['default']
  }
 }
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -1,100 +1,393 @@
 /* eslint-disable */
 /* prettier-ignore */
-/* oxlint-disable */
-// biome-ignore lint: disable
 // Generated by elegant-router
 // Read more: https://github.com/soybeanjs/elegant-router

 declare module "@elegant-router/types" {
-  type RouteRecordSingleView = import("vue-router").RouteRecordSingleView;
-  type RouteRecordRedirect = import("vue-router").RouteRecordRedirect;
-  type RouteComponent = import("vue-router").RouteComponent;
-
-  type Lazy<T> = () => Promise<T>;
-
-  export type RawRouteComponent = RouteComponent | Lazy<RouteComponent>;
+  type ElegantConstRoute = import('@elegant-router/vue').ElegantConstRoute;

  /**
-   * route layout key
+   * route layout
   */
-  export type RouteLayoutKey = "base" | "blank";
+  export type RouteLayout = "base" | "blank";

  /**
-   * route path map
+   * route map
   */
-  export type RoutePathMap = {
-    "Root": "/";
-    "NotFound": "/:pathMatch(.*)*";
+  export type RouteMap = {
+    "root": "/";
+    "not-found": "/:pathMatch(.*)*";
+    "exception": "/exception";
+    "exception_403": "/exception/403";
+    "exception_404": "/exception/404";
+    "exception_500": "/exception/500";
+    "document": "/document";
+    "document_project": "/document/project";
+    "document_project-link": "/document/project-link";
+    "document_video": "/document/video";
+    "document_vue": "/document/vue";
+    "document_vite": "/document/vite";
+    "document_unocss": "/document/unocss";
+    "document_naive": "/document/naive";
+    "document_pro-naive": "/document/pro-naive";
+    "document_antd": "/document/antd";
+    "document_alova": "/document/alova";
    "403": "/403";
    "404": "/404";
    "500": "/500";
-    "Home": "/home";
-    "IframeUrl": "/iframe/:url";
-    "Login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
-    "ManageMenu": "/manage/menu";
-    "ManageRole": "/manage/role";
-    "ManageRoute": "/manage/route";
-    "ManageUser": "/manage/user";
-    "Wip": "/wip";
+    "about": "/about";
+    "alova": "/alova";
+    "alova_request": "/alova/request";
+    "alova_scenes": "/alova/scenes";
+    "function": "/function";
+    "function_hide-child": "/function/hide-child";
+    "function_hide-child_one": "/function/hide-child/one";
+    "function_hide-child_three": "/function/hide-child/three";
+    "function_hide-child_two": "/function/hide-child/two";
+    "function_multi-tab": "/function/multi-tab";
+    "function_request": "/function/request";
+    "function_super-page": "/function/super-page";
+    "function_tab": "/function/tab";
+    "function_toggle-auth": "/function/toggle-auth";
+    "home": "/home";
+    "iframe-page": "/iframe-page/:url";
+    "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
+    "manage": "/manage";
+    "manage_menu": "/manage/menu";
+    "manage_role": "/manage/role";
+    "manage_user": "/manage/user";
+    "manage_user-detail": "/manage/user-detail/:id";
+    "multi-menu": "/multi-menu";
+    "multi-menu_first": "/multi-menu/first";
+    "multi-menu_first_child": "/multi-menu/first/child";
+    "multi-menu_second": "/multi-menu/second";
+    "multi-menu_second_child": "/multi-menu/second/child";
+    "multi-menu_second_child_home": "/multi-menu/second/child/home";
+    "plugin": "/plugin";
+    "plugin_barcode": "/plugin/barcode";
+    "plugin_charts": "/plugin/charts";
+    "plugin_charts_antv": "/plugin/charts/antv";
+    "plugin_charts_echarts": "/plugin/charts/echarts";
+    "plugin_charts_vchart": "/plugin/charts/vchart";
+    "plugin_copy": "/plugin/copy";
+    "plugin_editor": "/plugin/editor";
+    "plugin_editor_markdown": "/plugin/editor/markdown";
+    "plugin_editor_quill": "/plugin/editor/quill";
+    "plugin_excel": "/plugin/excel";
+    "plugin_gantt": "/plugin/gantt";
+    "plugin_gantt_dhtmlx": "/plugin/gantt/dhtmlx";
+    "plugin_gantt_vtable": "/plugin/gantt/vtable";
+    "plugin_icon": "/plugin/icon";
+    "plugin_map": "/plugin/map";
+    "plugin_pdf": "/plugin/pdf";
+    "plugin_pinyin": "/plugin/pinyin";
+    "plugin_print": "/plugin/print";
+    "plugin_swiper": "/plugin/swiper";
+    "plugin_tables": "/plugin/tables";
+    "plugin_tables_vtable": "/plugin/tables/vtable";
+    "plugin_typeit": "/plugin/typeit";
+    "plugin_video": "/plugin/video";
+    "pro-naive": "/pro-naive";
+    "pro-naive_form": "/pro-naive/form";
+    "pro-naive_form_basic": "/pro-naive/form/basic";
+    "pro-naive_form_query": "/pro-naive/form/query";
+    "pro-naive_form_step": "/pro-naive/form/step";
+    "pro-naive_table": "/pro-naive/table";
+    "pro-naive_table_remote": "/pro-naive/table/remote";
+    "pro-naive_table_row-edit": "/pro-naive/table/row-edit";
+    "user-center": "/user-center";
  };

  /**
   * route key
   */
-  export type RouteKey = keyof RoutePathMap;
+  export type RouteKey = keyof RouteMap;

  /**
   * route path
   */
-  export type RoutePath = RoutePathMap[RouteKey];
+  export type RoutePath = RouteMap[RouteKey];

  /**
-   * root route key
+   * custom route key
   */
-  export type RootRouteKey = 'Root';
+  export type CustomRouteKey = Extract<
+    RouteKey,
+    | "root"
+    | "not-found"
+    | "exception"
+    | "exception_403"
+    | "exception_404"
+    | "exception_500"
+    | "document"
+    | "document_project"
+    | "document_project-link"
+    | "document_video"
+    | "document_vue"
+    | "document_vite"
+    | "document_unocss"
+    | "document_naive"
+    | "document_pro-naive"
+    | "document_antd"
+    | "document_alova"
+  >;

  /**
-   * not found route key
+   * the generated route key
   */
-  export type NotFoundRouteKey = 'NotFound';
+  export type GeneratedRouteKey = Exclude<RouteKey, CustomRouteKey>;

  /**
-   * builtin route key
+   * the first level route key, which contain the layout of the route
   */
-  export type BuiltinRouteKey = RootRouteKey | NotFoundRouteKey;
+  export type FirstLevelRouteKey = Extract<
+    RouteKey,
+    | "403"
+    | "404"
+    | "500"
+    | "about"
+    | "alova"
+    | "function"
+    | "home"
+    | "iframe-page"
+    | "login"
+    | "manage"
+    | "multi-menu"
+    | "plugin"
+    | "pro-naive"
+    | "user-center"
+  >;

  /**
-   * reuse route key
+   * the custom first level route key
   */
-  export type ReuseRouteKey = never;
+  export type CustomFirstLevelRouteKey = Extract<
+    CustomRouteKey,
+    | "root"
+    | "not-found"
+    | "exception"
+    | "document"
+  >;

  /**
-   * the route file key, which has it's own file
+   * the last level route key, which has the page file
   */
-  export type RouteFileKey = Exclude<RouteKey, BuiltinRouteKey | ReuseRouteKey>;
+  export type LastLevelRouteKey = Extract<
+    RouteKey,
+    | "403"
+    | "404"
+    | "500"
+    | "iframe-page"
+    | "login"
+    | "about"
+    | "alova_request"
+    | "alova_scenes"
+    | "function_hide-child_one"
+    | "function_hide-child_three"
+    | "function_hide-child_two"
+    | "function_multi-tab"
+    | "function_request"
+    | "function_super-page"
+    | "function_tab"
+    | "function_toggle-auth"
+    | "home"
+    | "manage_menu"
+    | "manage_role"
+    | "manage_user-detail"
+    | "manage_user"
+    | "multi-menu_first_child"
+    | "multi-menu_second_child_home"
+    | "plugin_barcode"
+    | "plugin_charts_antv"
+    | "plugin_charts_echarts"
+    | "plugin_charts_vchart"
+    | "plugin_copy"
+    | "plugin_editor_markdown"
+    | "plugin_editor_quill"
+    | "plugin_excel"
+    | "plugin_gantt_dhtmlx"
+    | "plugin_gantt_vtable"
+    | "plugin_icon"
+    | "plugin_map"
+    | "plugin_pdf"
+    | "plugin_pinyin"
+    | "plugin_print"
+    | "plugin_swiper"
+    | "plugin_tables_vtable"
+    | "plugin_typeit"
+    | "plugin_video"
+    | "pro-naive_form_basic"
+    | "pro-naive_form_query"
+    | "pro-naive_form_step"
+    | "pro-naive_table_remote"
+    | "pro-naive_table_row-edit"
+    | "user-center"
+  >;

  /**
-   * mapped name and path
+   * the custom last level route key
   */
-  type MappedNamePath = {
-    [K in RouteKey]: { name: K; path: RoutePathMap[K] };
-  }[RouteKey];
+  export type CustomLastLevelRouteKey = Extract<
+    CustomRouteKey,
+    | "root"
+    | "not-found"
+    | "exception_403"
+    | "exception_404"
+    | "exception_500"
+    | "document_project"
+    | "document_project-link"
+    | "document_video"
+    | "document_vue"
+    | "document_vite"
+    | "document_unocss"
+    | "document_naive"
+    | "document_pro-naive"
+    | "document_antd"
+    | "document_alova"
+  >;

  /**
-   * auto router single view
+   * the single level route key
   */
-  export type AutoRouterSingleView = Omit<RouteRecordSingleView, 'component' | 'name' | 'path'> & {
-    component: RouteFileKey;
-    layout: RouteLayoutKey;
-  } & MappedNamePath;
+  export type SingleLevelRouteKey = FirstLevelRouteKey & LastLevelRouteKey;

  /**
-   * auto router redirect
+   * the custom single level route key
   */
-  export type AutoRouterRedirect = Omit<RouteRecordRedirect, 'children' | 'name' | 'path'> & MappedNamePath;
+  export type CustomSingleLevelRouteKey = CustomFirstLevelRouteKey & CustomLastLevelRouteKey;

  /**
-   * auto router route
+   * the first level route key, but not the single level
+  */
+  export type FirstLevelRouteNotSingleKey = Exclude<FirstLevelRouteKey, SingleLevelRouteKey>;
+
+  /**
+   * the custom first level route key, but not the single level
   */
-  export type AutoRouterRoute = AutoRouterSingleView | AutoRouterRedirect;
+  export type CustomFirstLevelRouteNotSingleKey = Exclude<CustomFirstLevelRouteKey, CustomSingleLevelRouteKey>;
+
+  /**
+   * the center level route key
+   */
+  export type CenterLevelRouteKey = Exclude<GeneratedRouteKey, FirstLevelRouteKey | LastLevelRouteKey>;
+
+  /**
+   * the custom center level route key
+   */
+  export type CustomCenterLevelRouteKey = Exclude<CustomRouteKey, CustomFirstLevelRouteKey | CustomLastLevelRouteKey>;
+
+  /**
+   * the center level route key
+   */
+  type GetChildRouteKey<K extends RouteKey, T extends RouteKey = RouteKey> = T extends `${K}_${infer R}`
+    ? R extends `${string}_${string}`
+      ? never
+      : T
+    : never;
+
+  /**
+   * the single level route
+   */
+  type SingleLevelRoute<K extends SingleLevelRouteKey = SingleLevelRouteKey> = K extends string
+    ? Omit<ElegantConstRoute, 'children'> & {
+        name: K;
+        path: RouteMap[K];
+        component: `layout.${RouteLayout}$view.${K}`;
+      }
+    : never;
+
+  /**
+   * the last level route
+   */
+  type LastLevelRoute<K extends GeneratedRouteKey> = K extends LastLevelRouteKey
+    ? Omit<ElegantConstRoute, 'children'> & {
+        name: K;
+        path: RouteMap[K];
+        component: `view.${K}`;
+      }
+    : never;
+  
+  /**
+   * the center level route
+   */
+  type CenterLevelRoute<K extends GeneratedRouteKey> = K extends CenterLevelRouteKey
+    ? Omit<ElegantConstRoute, 'component'> & {
+        name: K;
+        path: RouteMap[K];
+        children: (CenterLevelRoute<GetChildRouteKey<K>> | LastLevelRoute<GetChildRouteKey<K>>)[];
+      }
+    : never;
+
+  /**
+   * the multi level route
+   */
+  type MultiLevelRoute<K extends FirstLevelRouteNotSingleKey = FirstLevelRouteNotSingleKey> = K extends string
+    ? ElegantConstRoute & {
+        name: K;
+        path: RouteMap[K];
+        component: `layout.${RouteLayout}`;
+        children: (CenterLevelRoute<GetChildRouteKey<K>> | LastLevelRoute<GetChildRouteKey<K>>)[];
+      }
+    : never;
+  
+  /**
+   * the custom first level route
+   */
+  type CustomSingleLevelRoute<K extends CustomFirstLevelRouteKey = CustomFirstLevelRouteKey> = K extends string
+    ? Omit<ElegantConstRoute, 'children'> & {
+        name: K;
+        path: RouteMap[K];
+        component?: `layout.${RouteLayout}$view.${LastLevelRouteKey}`;
+      }
+    : never;
+
+  /**
+   * the custom last level route
+   */
+  type CustomLastLevelRoute<K extends CustomRouteKey> = K extends CustomLastLevelRouteKey
+    ? Omit<ElegantConstRoute, 'children'> & {
+        name: K;
+        path: RouteMap[K];
+        component?: `view.${LastLevelRouteKey}`;
+      }
+    : never;
+
+  /**
+   * the custom center level route
+   */
+  type CustomCenterLevelRoute<K extends CustomRouteKey> = K extends CustomCenterLevelRouteKey
+    ? Omit<ElegantConstRoute, 'component'> & {
+        name: K;
+        path: RouteMap[K];
+        children: (CustomCenterLevelRoute<GetChildRouteKey<K>> | CustomLastLevelRoute<GetChildRouteKey<K>>)[];
+      }
+    : never;
+
+  /**
+   * the custom multi level route
+   */
+  type CustomMultiLevelRoute<K extends CustomFirstLevelRouteNotSingleKey = CustomFirstLevelRouteNotSingleKey> =
+    K extends string
+      ? ElegantConstRoute & {
+          name: K;
+          path: RouteMap[K];
+          component: `layout.${RouteLayout}`;
+          children: (CustomCenterLevelRoute<GetChildRouteKey<K>> | CustomLastLevelRoute<GetChildRouteKey<K>>)[];
+        }
+      : never;
+
+  /**
+   * the custom route
+   */
+  type CustomRoute = CustomSingleLevelRoute | CustomMultiLevelRoute;
+
+  /**
+   * the generated route
+   */
+  type GeneratedRoute = SingleLevelRoute | MultiLevelRoute;
+
+  /**
+   * the elegant route
+   */
+  type ElegantRoute = GeneratedRoute | CustomRoute;
 }
--- a/src/typings/package.d.ts
+++ b/src/typings/package.d.ts
@@ -0,0 +1,20 @@
+/// <reference types="@amap/amap-jsapi-types" />
+/// <reference types="bmapgl" />
+
+declare namespace BMap {
+  class Map extends BMapGL.Map {}
+  class Point extends BMapGL.Point {}
+}
+
+declare const TMap: any;
+
+interface Window {
+  /**
+   * make baidu map request under https protocol
+   *
+   * - 0: http
+   * - 1: https
+   * - 2: https
+   */
+  HOST_TYPE: '0' | '1' | '2';
+}
--- a/src/typings/router.d.ts
+++ b/src/typings/router.d.ts
@@ -1,7 +1,7 @@
-export {};
+import 'vue-router';

 declare module 'vue-router' {
-  export interface RouteMeta {
+  interface RouteMeta {
    /**
     * Title of the route
     *
--- a/src/typings/typed-router.d.ts
+++ b/src/typings/typed-router.d.ts
@@ -1,40 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-/* prettier-ignore */
-/* oxlint-disable */
-// biome-ignore lint: disable
-// Generated by elegant-router
-// Read more: https://github.com/soybeanjs/elegant-router
-
-export {}
-
-declare module "vue-router" {
-  type RouteNamedMap = import("vue-router/auto-routes").RouteNamedMap;
-
-  export interface TypesConfig {
-    RouteNamedMap: RouteNamedMap;
-  }
-}
-
-declare module "vue-router/auto-routes" {
-  import type { RouteParamsRawGeneric, RouteParamsGeneric, RouteMeta, RouteRecordInfo, ParamValue, ParamValueZeroOrOne } from "vue-router";
-
-  /**
-   * route named map
-  */
-  export interface RouteNamedMap {
-    "Root": RouteRecordInfo<"Root", "/", Record<never, never>, Record<never, never>>;
-    "NotFound": RouteRecordInfo<"NotFound", "/:pathMatch(.*)*", Record<never, never>, Record<never, never>>;
-    "403": RouteRecordInfo<"403", "/403", Record<never, never>, Record<never, never>>;
-    "404": RouteRecordInfo<"404", "/404", Record<never, never>, Record<never, never>>;
-    "500": RouteRecordInfo<"500", "/500", Record<never, never>, Record<never, never>>;
-    "Home": RouteRecordInfo<"Home", "/home", Record<never, never>, Record<never, never>>;
-    "IframeUrl": RouteRecordInfo<"IframeUrl", "/iframe/:url", { url: ParamValue<true> }, { url: ParamValue<false> }>;
-    "Login": RouteRecordInfo<"Login", "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?", { module?: ParamValueZeroOrOne<true> }, { module?: ParamValueZeroOrOne<false> }>;
-    "ManageMenu": RouteRecordInfo<"ManageMenu", "/manage/menu", Record<never, never>, Record<never, never>>;
-    "ManageRole": RouteRecordInfo<"ManageRole", "/manage/role", Record<never, never>, Record<never, never>>;
-    "ManageRoute": RouteRecordInfo<"ManageRoute", "/manage/route", Record<never, never>, Record<never, never>>;
-    "ManageUser": RouteRecordInfo<"ManageUser", "/manage/user", Record<never, never>, Record<never, never>>;
-    "Wip": RouteRecordInfo<"Wip", "/wip", Record<never, never>, Record<never, never>>
-  }
-}
--- a/src/typings/union-key.d.ts
+++ b/src/typings/union-key.d.ts
@@ -14,6 +14,14 @@ declare namespace UnionKey {
  /** Theme scheme */
  type ThemeScheme = 'light' | 'dark' | 'auto';

+  /**
+   * Reset cache strategy
+   *
+   * - close: re-cache when close page
+   * - refresh: re-cache when refresh page
+   */
+  type ResetCacheStrategy = 'close' | 'refresh';
+
  /**
   * The layout mode
   *
--- a/src/views/(builtin)/403/index.vue
+++ b/src/views/(builtin)/403/index.vue
--- a/src/views/(builtin)/404/index.vue
+++ b/src/views/(builtin)/404/index.vue
--- a/src/views/(builtin)/500/index.vue
+++ b/src/views/(builtin)/500/index.vue
--- a/src/views/_builtin/iframe-page/[url].vue
+++ b/src/views/_builtin/iframe-page/[url].vue
--- a/src/views/(builtin)/login/index.vue
+++ b/src/views/(builtin)/login/index.vue
@@ -23,7 +23,7 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();

 interface LoginModule {
-  label: App.I18n.I18nKey;
+  label: string;
  component: Component;
 }

--- a/src/views/(builtin)/login/modules/bind-wechat.vue
+++ b/src/views/(builtin)/login/modules/bind-wechat.vue
--- a/src/views/(builtin)/login/modules/code-login.vue
+++ b/src/views/(builtin)/login/modules/code-login.vue
--- a/src/views/(builtin)/login/modules/pwd-login.vue
+++ b/src/views/(builtin)/login/modules/pwd-login.vue
--- a/src/views/(builtin)/login/modules/register.vue
+++ b/src/views/(builtin)/login/modules/register.vue
--- a/src/views/(builtin)/login/modules/reset-pwd.vue
+++ b/src/views/(builtin)/login/modules/reset-pwd.vue
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { $t } from '@/locales';
+import pkg from '~/package.json';
+
+const appStore = useAppStore();
+
+const column = computed(() => (appStore.isMobile ? 1 : 2));
+
+interface PkgJson {
+  name: string;
+  version: string;
+  dependencies: PkgVersionInfo[];
+  devDependencies: PkgVersionInfo[];
+}
+
+interface PkgVersionInfo {
+  name: string;
+  version: string;
+}
+
+const { name, version, dependencies, devDependencies } = pkg;
+
+function transformVersionData(tuple: [string, string]): PkgVersionInfo {
+  const [$name, $version] = tuple;
+  return {
+    name: $name,
+    version: $version
+  };
+}
+
+const pkgJson: PkgJson = {
+  name,
+  version,
+  dependencies: Object.entries(dependencies).map(item => transformVersionData(item)),
+  devDependencies: Object.entries(devDependencies).map(item => transformVersionData(item))
+};
+
+const latestBuildTime = BUILD_TIME;
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('page.about.title')" :bordered="false" size="small" segmented class="card-wrapper">
+      <p>{{ $t('page.about.introduction') }}</p>
+    </NCard>
+    <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NDescriptions label-placement="left" bordered size="small" :column="column">
+        <NDescriptionsItem :label="$t('page.about.projectInfo.version')">
+          <NTag type="primary">{{ pkgJson.version }}</NTag>
+        </NDescriptionsItem>
+        <NDescriptionsItem :label="$t('page.about.projectInfo.latestBuildTime')">
+          <NTag type="primary">{{ latestBuildTime }}</NTag>
+        </NDescriptionsItem>
+        <NDescriptionsItem :label="$t('page.about.projectInfo.githubLink')">
+          <a class="text-primary" :href="pkg.homepage" target="_blank" rel="noopener noreferrer">
+            {{ $t('page.about.projectInfo.githubLink') }}
+          </a>
+        </NDescriptionsItem>
+        <NDescriptionsItem :label="$t('page.about.projectInfo.previewLink')">
+          <a class="text-primary" :href="pkg.website" target="_blank" rel="noopener noreferrer">
+            {{ $t('page.about.projectInfo.previewLink') }}
+          </a>
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+    <NCard :title="$t('page.about.prdDep')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NDescriptions label-placement="left" bordered size="small" :column="column">
+        <NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
+          {{ item.version }}
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+    <NCard :title="$t('page.about.devDep')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NDescriptions label-placement="left" bordered size="small" :column="column">
+        <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
+          {{ item.version }}
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/src/views/alova/request/index.vue
+++ b/src/views/alova/request/index.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { fetchCustomBackendError } from '@/service-alova/api';
+
+async function logout() {
+  await fetchCustomBackendError('8888', $t('request.logoutMsg'));
+}
+
+async function logoutWithModal() {
+  await fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'));
+}
+
+async function refreshToken() {
+  await fetchCustomBackendError('9999', $t('request.tokenExpired'));
+}
+
+async function handleRepeatedMessageError() {
+  await Promise.all([
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
+  ]);
+}
+
+async function handleRepeatedModalError() {
+  await Promise.all([
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'))
+  ]);
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('request.logout')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="logout">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard :title="$t('request.logoutWithModal')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="logoutWithModal">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard :title="$t('request.refreshToken')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="refreshToken">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard
+      :title="$t('page.function.request.repeatedErrorOccurOnce')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <NButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</NButton>
+      <NButton class="ml-12px" @click="handleRepeatedModalError">
+        {{ $t('page.function.request.repeatedError') }}(Modal)
+      </NButton>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/src/views/alova/scenes/index.vue
+++ b/src/views/alova/scenes/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import CaptchaVerification from './modules/captcha-verification.vue';
+import BrowserVisibilityRequest from './modules/browser-visibility-request.vue';
+import PollingRequest from './modules/polling-request.vue';
+import NetworkToggleRequest from './modules/network-toggle-request.vue';
+import CrossComponentRequest from './modules/cross-component-request.vue';
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('page.alova.scenes.captchaSend')" :bordered="false" size="small" segmented class="card-wrapper">
+      <CaptchaVerification class="w-1/3" />
+    </NCard>
+    <NCard :title="$t('page.alova.scenes.autoRequest')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NSpace :wrap="false">
+        <BrowserVisibilityRequest />
+        <PollingRequest />
+        <NetworkToggleRequest />
+      </NSpace>
+    </NCard>
+    <NCard
+      :title="$t('page.alova.scenes.requestCrossComponent')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <CrossComponentRequest />
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/src/views/alova/scenes/modules/browser-visibility-request.vue
+++ b/src/views/alova/scenes/modules/browser-visibility-request.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { alova } from '@/service-alova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  enableVisibility: true,
+  enableNetwork: false,
+  enableFocus: false,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:1')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="info">
+      {{ $t('page.alova.scenes.visibilityRequestTips') }}
+    </NAlert>
+    <NButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </NButton>
+    <NSpace align="center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <NSpin v-if="loading" :size="12" />
+    </NSpace>
+  </NSpace>
+</template>
--- a/src/views/alova/scenes/modules/captcha-verification.vue
+++ b/src/views/alova/scenes/modules/captcha-verification.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { actionDelegationMiddleware, useCaptcha, useForm } from '@sa/alova/client';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { sendCaptcha, verifyCaptcha } from '@/service-alova/api';
+
+defineOptions({
+  name: 'CaptchaVerification'
+});
+
+const { loading, send, countdown } = useCaptcha(sendCaptcha, {
+  middleware: actionDelegationMiddleware('captcha:send')
+});
+const label = computed(() => {
+  return countdown.value > 0
+    ? $t('page.login.codeLogin.reGetCode', { time: countdown.value })
+    : $t('page.login.codeLogin.getCode');
+});
+const {
+  form,
+  loading: submiting,
+  send: submit
+} = useForm(formData => verifyCaptcha(formData.phone, formData.code), {
+  initialForm: {
+    phone: '',
+    code: ''
+  }
+});
+
+const { formRef, validate } = useNaiveForm();
+
+const rules = computed<Record<keyof typeof form.value, App.Global.FormRule[]>>(() => {
+  const { formRules } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    code: formRules.code
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  await submit();
+  // request
+  window.$message?.success($t('page.login.common.validateSuccess'));
+}
+</script>
+
+<template>
+  <NForm ref="formRef" :model="form" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
+    <NFormItem path="phone">
+      <NInput v-model:value="form.phone" :placeholder="$t('page.login.common.phonePlaceholder')" :maxlength="11" />
+    </NFormItem>
+    <NFormItem path="code">
+      <div class="w-full flex-y-center gap-16px">
+        <NInput v-model:value="form.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+        <NButton size="large" :disabled="countdown > 0" :loading="loading" @click="send(form.phone)">
+          {{ label }}
+        </NButton>
+      </div>
+    </NFormItem>
+    <NSpace vertical :size="18" class="w-full">
+      <NButton type="primary" size="large" round block :loading="submiting" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </NButton>
+    </NSpace>
+  </NForm>
+</template>
+
+<style scoped></style>
--- a/src/views/alova/scenes/modules/cross-component-request.vue
+++ b/src/views/alova/scenes/modules/cross-component-request.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { accessAction } from '@sa/alova/client';
+
+const handleAutoRequestSend = async () => {
+  accessAction(/^autoRequest/, async ({ send }) => {
+    await send();
+  });
+};
+</script>
+
+<template>
+  <NButton @click="handleAutoRequestSend">{{ $t('page.alova.scenes.triggerAllRequest') }}</NButton>
+</template>
--- a/src/views/alova/scenes/modules/network-toggle-request.vue
+++ b/src/views/alova/scenes/modules/network-toggle-request.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { alova } from '@/service-alova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  enableVisibility: false,
+  enableNetwork: true,
+  enableFocus: false,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:2')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="info">
+      {{ $t('page.alova.scenes.networkRequestTips') }}
+    </NAlert>
+    <NButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </NButton>
+    <NSpace align="center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <NSpin v-if="loading" :size="12" />
+    </NSpace>
+  </NSpace>
+</template>
--- a/src/views/alova/scenes/modules/polling-request.vue
+++ b/src/views/alova/scenes/modules/polling-request.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { actionDelegationMiddleware, useAutoRequest } from '@sa/alova/client';
+import { alova } from '@/service-alova/request';
+
+const getLastTime = alova.Get<{ time: string }>('/mock/getLastTime', { cacheFor: null });
+const isStop = ref(false);
+const { loading, data } = useAutoRequest(getLastTime, {
+  pollingTime: 3000,
+  initialData: {
+    time: ''
+  },
+  async middleware(_, next) {
+    await actionDelegationMiddleware('autoRequest:3')(_, () => Promise.resolve());
+    if (!isStop.value) {
+      next();
+    }
+  }
+});
+
+const toggleStop = () => {
+  isStop.value = !isStop.value;
+};
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="info">
+      {{ $t('page.alova.scenes.pollingRequestTips') }}
+    </NAlert>
+    <NButton type="primary" @click="toggleStop">
+      <icon-carbon-play v-if="isStop" class="mr-2" />
+      <icon-carbon-stop v-else class="mr-2" />
+      {{ isStop ? $t('page.alova.scenes.startRequest') : $t('page.alova.scenes.stopRequest') }}
+    </NButton>
+    <NSpace align="center">
+      <span>{{ $t('page.alova.scenes.refreshTime') }}: {{ data.time || '--' }}</span>
+      <NSpin v-if="loading" :size="12" />
+    </NSpace>
+  </NSpace>
+</template>
--- a/src/views/function/hide-child/one/index.vue
+++ b/src/views/function/hide-child/one/index.vue
@@ -3,3 +3,5 @@
 <template>
  <LookForward />
 </template>
+
+<style scoped></style>
--- a/src/views/function/hide-child/three/index.vue
+++ b/src/views/function/hide-child/three/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>

 <template>
-  <div>ManageRoute</div>
+  <LookForward />
 </template>
+
+<style scoped></style>
--- a/src/views/function/hide-child/two/index.vue
+++ b/src/views/function/hide-child/two/index.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <LookForward />
+</template>
+
+<style scoped></style>
--- a/src/views/function/multi-tab/index.vue
+++ b/src/views/function/multi-tab/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+
+const route = useRoute();
+const { routerPushByKey } = useRouterPush();
+
+const routeQuery = computed(() => JSON.stringify(route.query));
+</script>
+
+<template>
+  <div>
+    <LookForward>
+      <div>
+        <NButton @click="routerPushByKey('function_tab')">{{ $t('page.function.multiTab.backTab') }}</NButton>
+        <div class="py-24px">{{ $t('page.function.multiTab.routeParam') }}: {{ routeQuery }}</div>
+      </div>
+    </LookForward>
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/views/function/request/index.vue
+++ b/src/views/function/request/index.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { fetchCustomBackendError } from '@/service/api';
+import { $t } from '@/locales';
+
+async function logout() {
+  await fetchCustomBackendError('8888', $t('request.logoutMsg'));
+}
+
+async function logoutWithModal() {
+  await fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'));
+}
+
+async function refreshToken() {
+  await fetchCustomBackendError('9999', $t('request.tokenExpired'));
+}
+
+async function handleRepeatedMessageError() {
+  await Promise.all([
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
+    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
+  ]);
+}
+
+async function handleRepeatedModalError() {
+  await Promise.all([
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
+    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'))
+  ]);
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('request.logout')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="logout">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard :title="$t('request.logoutWithModal')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="logoutWithModal">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard :title="$t('request.refreshToken')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NButton @click="refreshToken">{{ $t('common.trigger') }}</NButton>
+    </NCard>
+    <NCard
+      :title="$t('page.function.request.repeatedErrorOccurOnce')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <NButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</NButton>
+      <NButton class="ml-12px" @click="handleRepeatedModalError">
+        {{ $t('page.function.request.repeatedError') }}(Modal)
+      </NButton>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/src/views/function/super-page/index.vue
+++ b/src/views/function/super-page/index.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <LookForward />
+</template>
+
+<style scoped></style>
--- a/src/views/function/tab/index.vue
+++ b/src/views/function/tab/index.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTabStore } from '@/store/modules/tab';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+
+const tabStore = useTabStore();
+const { routerPushByKey } = useRouterPush();
+
+const tabLabel = ref('');
+
+function changeTabLabel() {
+  tabStore.setTabLabel(tabLabel.value);
+}
+
+function resetTabLabel() {
+  tabStore.resetTabLabel();
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard
+      :title="$t('page.function.tab.tabOperate.title')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.addTab') }}</NDivider>
+      <NButton @click="routerPushByKey('about')">{{ $t('page.function.tab.tabOperate.addTabDesc') }}</NButton>
+      <NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.closeTab') }}</NDivider>
+      <NSpace>
+        <NButton @click="tabStore.removeActiveTab">
+          {{ $t('page.function.tab.tabOperate.closeCurrentTab') }}
+        </NButton>
+        <NButton @click="tabStore.removeTabByRouteName('about')">
+          {{ $t('page.function.tab.tabOperate.closeAboutTab') }}
+        </NButton>
+      </NSpace>
+      <NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.addMultiTab') }}</NDivider>
+      <NSpace>
+        <NButton @click="routerPushByKey('function_multi-tab')">
+          {{ $t('page.function.tab.tabOperate.addMultiTabDesc1') }}
+        </NButton>
+        <NButton @click="routerPushByKey('function_multi-tab', { query: { a: '1' } })">
+          {{ $t('page.function.tab.tabOperate.addMultiTabDesc2') }}
+        </NButton>
+      </NSpace>
+    </NCard>
+    <NCard
+      :title="$t('page.function.tab.tabTitle.title')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <NDivider title-placement="left">{{ $t('page.function.tab.tabTitle.changeTitle') }}</NDivider>
+      <NInputGroup class="max-w-240px">
+        <NInput v-model:value="tabLabel" />
+        <NButton type="primary" @click="changeTabLabel">{{ $t('page.function.tab.tabTitle.change') }}</NButton>
+      </NInputGroup>
+      <NDivider title-placement="left">{{ $t('page.function.tab.tabTitle.resetTitle') }}</NDivider>
+      <NButton type="error" ghost class="w-80px" @click="resetTabLabel">
+        {{ $t('page.function.tab.tabTitle.reset') }}
+      </NButton>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/src/views/function/toggle-auth/index.vue
+++ b/src/views/function/toggle-auth/index.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useLoading } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+import { useAuthStore } from '@/store/modules/auth';
+import { useTabStore } from '@/store/modules/tab';
+import { useAuth } from '@/hooks/business/auth';
+import { $t } from '@/locales';
+
+const route = useRoute();
+const appStore = useAppStore();
+const authStore = useAuthStore();
+const tabStore = useTabStore();
+const { hasAuth } = useAuth();
+const { loading, startLoading, endLoading } = useLoading();
+
+type AccountKey = 'super' | 'admin' | 'user';
+
+interface Account {
+  key: AccountKey;
+  label: string;
+  userName: string;
+  password: string;
+}
+
+const accounts = computed<Account[]>(() => [
+  {
+    key: 'super',
+    label: $t('page.login.pwdLogin.superAdmin'),
+    userName: 'Super',
+    password: '123456'
+  },
+  {
+    key: 'admin',
+    label: $t('page.login.pwdLogin.admin'),
+    userName: 'Admin',
+    password: '123456'
+  },
+  {
+    key: 'user',
+    label: $t('page.login.pwdLogin.user'),
+    userName: 'User',
+    password: '123456'
+  }
+]);
+
+const loginAccount = ref<AccountKey>('super');
+
+async function handleToggleAccount(account: Account) {
+  loginAccount.value = account.key;
+
+  startLoading();
+  await authStore.login(account.userName, account.password, false);
+  tabStore.initTabStore(route);
+  endLoading();
+  appStore.reloadPage();
+}
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('route.function_toggle-auth')" :bordered="false" size="small" segmented class="card-wrapper">
+      <NDescriptions bordered :column="1">
+        <NDescriptionsItem :label="$t('page.manage.user.userRole')">
+          <NSpace>
+            <NTag v-for="role in authStore.userInfo.roles" :key="role">{{ role }}</NTag>
+          </NSpace>
+        </NDescriptionsItem>
+        <NDescriptionsItem ions-item :label="$t('page.function.toggleAuth.toggleAccount')">
+          <NSpace>
+            <NButton
+              v-for="account in accounts"
+              :key="account.key"
+              :loading="loading && loginAccount === account.key"
+              :disabled="loading && loginAccount !== account.key"
+              @click="handleToggleAccount(account)"
+            >
+              {{ account.label }}
+            </NButton>
+          </NSpace>
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+    <NCard
+      :title="$t('page.function.toggleAuth.authHook')"
+      :bordered="false"
+      size="small"
+      segmented
+      class="card-wrapper"
+    >
+      <NSpace>
+        <NButton v-if="hasAuth('B_CODE1')">{{ $t('page.function.toggleAuth.superAdminVisible') }}</NButton>
+        <NButton v-if="hasAuth('B_CODE2')">{{ $t('page.function.toggleAuth.adminVisible') }}</NButton>
+        <NButton v-if="hasAuth('B_CODE3')">
+          {{ $t('page.function.toggleAuth.adminOrUserVisible') }}
+        </NButton>
+      </NSpace>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Soybean	47e7ade11b	fix(projects): fix example code	2025-09-17 17:33:30 +08:00
Soybean	54c9511bf8	Merge branch 'v2.0' into v2.0-example	2025-09-17 17:33:19 +08:00
Soybean	cfe62d5afb	Merge branch 'main' into example	2025-09-17 17:22:34 +08:00
Soybean	fd087f59fa	fix(packages): axios: fix json response. fixed #815	2025-09-17 17:03:30 +08:00
Soybean	9fa951aa06	chore(deps): update deps	2025-09-17 14:23:06 +08:00
Soybean	12b25e0d58	fix(types): fix proxy types	2025-08-28 00:26:29 +08:00
Soybean	e33f944a74	chore(deps): update deps	2025-08-28 00:26:12 +08:00
Azir-11	8d7f91dccf	chore(other): update the ESLint validation configuration to support more file types.	2025-08-13 10:10:10 +08:00
Soybean	33ade53904	chore(readme): remove DartNode sponsorship badge from README files	2025-08-11 10:46:15 +08:00
Soybean	923eb98a5c	fix(readme): update GitHub stars and forks links for gitee	2025-07-20 01:12:19 +08:00
Soybean	1740ca2cfa	Merge branch 'main' into example	2025-07-14 00:47:38 +08:00
Azir	643ccec544	refactor(types): improve namespace migration.	2025-06-28 14:48:48 +08:00
Azir	bf9baf0d14	refactor(types): move Auth and Route namespaces to separate files and clean up api.d.ts	2025-06-28 14:48:48 +08:00
Azir	bbadd41e0e	typo(projects): update Vite version to 7 in i18n translate.	2025-06-28 14:48:48 +08:00
Azir	7e1e1716f9	chore(packages): update Vite version to 7 in package.json and documentation. (cherry picked from commit ef806edd9d0c48ad8669863516d52e2eb8870d6f)	2025-06-28 14:48:48 +08:00
Soybean	a63a343e9c	Merge branch 'main' into example	2025-06-24 22:37:58 +08:00
Azir	c816f4dc3b	feat(projects): add video document menu.	2025-06-24 10:11:21 +08:00
Soybean	ec20829a22	Merge branch 'main' into example	2025-06-09 22:50:16 +08:00
Soybean	f5e6a205b3	fix(auth): initialize routeStore in toggle-auth. closed #754	2025-06-09 22:37:19 +08:00
Zheng-Changfu	ff83d333a5	feat(projects): add example for pro-naive-ui.	2025-05-16 13:06:59 +08:00
Soybean	9a294204a2	Merge branch 'main' into example	2025-03-19 22:42:20 +08:00
Soybean	a5c9a19838	Merge branch 'main' into example	2025-03-12 23:25:14 +08:00
Soybean	03f098bec6	chore(deps): update deps	2025-01-20 13:49:04 +08:00
Soybean	69788d0134	Merge branch 'main' into example	2025-01-20 13:45:54 +08:00
Soybean	745a9077ec	Merge branch 'main' into example	2024-12-16 16:44:43 +08:00
Soybean	60c307ccda	Merge branch 'main' into example	2024-11-17 22:34:18 +08:00
Soybean	823651139a	chore(deps): update deps	2024-11-15 12:26:40 +08:00
Soybean	d1c6081c25	optimize(projects): optimize example code about `vtable`,`vchart`	2024-11-02 02:48:22 +08:00
Rui-Sun	b9e873e53c	feat(projects): add visactor plugin demos (#658 ) * feat: add vtable plugin * feat: add vchart hook * feat: add dark mode support in vtable * feat: add visactor icon * feat: add vtable-gantt plugin * fix: fix theme update in vtable-gantt * feat: update visactor version	2024-11-02 01:57:43 +08:00
Soybean	aabe7fe592	optimize(projects): optimize manage page: use `ref` replace `reactive`	2024-10-28 19:29:30 +08:00
Soybean	7e436b6328	Merge branch 'main' into example	2024-10-25 01:19:37 +08:00
Soybean	e019defef3	refactor(projects): rename directory `serviceAlova` to `service-alova`	2024-10-24 23:52:45 +08:00
Soybean	a2178d3405	optimize(projects): optimize example antv	2024-10-24 23:46:11 +08:00
Ma.Jinkai	0c0d606ae5	feat(projects): add antv g6 example	2024-10-22 14:08:33 +08:00
Scott Hu	a6545265ac	feat(projects): add alova examples (#647 ) * feat: optimistic subpackage `@sa/alova` * feat: add alova examples	2024-10-17 17:51:36 +08:00
Soybean	641f3160d6	Merge branch 'main' into example	2024-10-17 17:24:49 +08:00
Soybean	3fbf2e2a5f	Merge branch 'main' into example	2024-10-09 23:00:35 +08:00
Soybean	405b1b41cc	Merge branch 'main' into example	2024-09-21 08:42:40 +08:00
Soybean	da6cf09e76	Merge branch 'main' into example	2024-09-20 07:44:12 +08:00
Soybean	5bfc7613f7	Merge branch 'main' into example	2024-09-07 11:38:35 +08:00
Soybean	7710bcdb0a	optimize(projects): optimize code	2024-08-11 23:35:45 +08:00
Ohh	b36d914e48	feat(projects): add plugin typeit (#591 )	2024-08-11 23:30:12 +08:00
Soybean	bbacff0581	optimize(projects): optimize plugin gantt	2024-08-06 10:21:46 +08:00
Ohh	f86bca063a	feat(projects): add plugin gantt preview (#578 )	2024-08-05 10:26:32 +08:00
Soybean	48e005bcaf	Merge branch 'main' into example	2024-08-01 16:06:59 +08:00
Soybean	d825b6e260	feat(projects): add watermark override theme settings	2024-07-30 21:50:22 +08:00
Soybean	05b0147b47	Merge branch 'main' into example	2024-07-30 18:04:14 +08:00
Soybean	e7cd34ec37	chore(projects): Merge branch 'main' into example	2024-07-30 17:26:42 +08:00
Ohh	a9dce21878	feat(projects): add plugin pdf preview (#568 )	2024-07-27 03:06:11 +08:00
Soybean	24320ab899	Merge branch 'main' into example	2024-07-22 19:05:11 +08:00
青菜白玉汤	2f1f2c2b2a	fix(projects): fix the issue of abnormal width of the sidebar in the top menu mix and reverse mode (#562 ) (cherry picked from commit `c469512bd4`)	2024-07-22 13:34:35 +08:00
Soybean	3a970a090d	fix(components): fix component name and iconify icon name conflict	2024-07-22 01:12:00 +08:00
Soybean	4a7e9c2669	chore(projects): merge branch main into example	2024-07-22 00:57:11 +08:00
Soybean	d6f3effce0	chore(deps): update deps	2024-07-22 00:35:53 +08:00
Soybean	fa4367a7b9	optimize(projects): optimize page code: plugin_excel	2024-07-22 00:34:13 +08:00
Ohh	c425822b3a	feat(projects): add plugin excel export (#561 )	2024-07-21 20:54:18 +08:00
Soybean	447bda2b48	chore(projects): merge branch main into example	2024-07-20 02:35:42 +08:00
dodu2014	c0303a8637	fix(types): Fixed the reference type error (#551 )	2024-07-19 18:12:29 +08:00
Ohh	c7ab61bbd4	feat(projects): add plugin pinyin-pro (#557 )	2024-07-19 16:20:36 +08:00
Soybean	ec6a497452	fix(projects): fix page manage-role `default-expanded-names`	2024-07-19 10:19:33 +08:00
paynezhuang	074077dfaa	feat(projects): Manage search area using collapsed components , close #537 (#549 )	2024-07-15 14:46:04 +08:00
Soybean	fcf866783c	chore(projects): merge branch main into example	2024-07-12 10:28:10 +08:00
Soybean	1c9e36c47b	chore(projects): merge branch main into example	2024-06-21 10:15:20 +08:00
Soybean	d3210edc6a	chore(projects): merge branch main into example	2024-06-15 01:13:36 +08:00
Soybean	799ebcc714	Merge branch 'main' into example	2024-06-14 00:05:12 +08:00
Soybean	4a8b9032cd	chore(projects): merge branch main into example	2024-06-13 23:30:33 +08:00
Soybean	8fea803fca	Merge branch 'main' into example	2024-06-12 11:10:08 +08:00
Soybean	599d0f10e8	Merge branch 'main' into example	2024-06-07 11:55:56 +08:00
Soybean	781f88d227	Merge branch 'main' into example	2024-06-06 23:33:41 +08:00
Soybean	5739346484	chore(projects): merge main to example	2024-06-06 10:36:31 +08:00
Soybean	d194f0b1b6	chore(projects): merge main to example	2024-06-04 20:24:34 +08:00
Soybean	19bea283c9	chore(projects): merge main to example	2024-06-02 01:30:02 +08:00
Soybean	53a8e5678a	chore(projects): merge main to example	2024-05-24 02:28:43 +08:00
Soybean	10b231918a	chore(projects): merge main to example	2024-05-20 01:24:46 +08:00
Soybean	81d51a9630	fix(projects): fix baidu map request protocol	2024-05-08 23:19:49 +08:00
Soybean	fbebef3acb	fix(projects): fix page: plugin_video style	2024-05-08 23:01:38 +08:00
Soybean	12d7bf94ee	optimize(projects): optimize code	2024-05-08 22:57:22 +08:00
Soybean	0478154db8	chore(projects): update pnpm-lock.yaml	2024-05-08 22:39:16 +08:00
Soybean	994ef2b9b1	merge main to example (#433 ) * docs(projects): update CHANGELOG * fix(styles): fix useTable type	2024-05-08 22:37:18 +08:00
paynezhuang	ef32eecfdb	feat(projects): add page plugin_barcode (#432 )	2024-05-08 22:35:12 +08:00
Soybean	83ae0bad0f	docs(projects): update CHANGELOG (#431 )	2024-05-07 22:02:11 +08:00
Soybean	9a9e2d144a	chore(projects): lock deps version	2024-05-07 21:59:23 +08:00
lisong	a2110a98cf	feat(projects): add page plugin_editor、plugin_icon、plugin_map、plugin_print、plugin_swiper and plugin_video (#430 )	2024-05-07 21:56:23 +08:00
Soybean	daf6600c21	feat(projects): add page plugin_charts_echarts	2024-05-07 19:51:54 +08:00
Soybean	a9b3a961af	Merge branch 'main' into example	2024-05-07 19:18:27 +08:00
Soybean	3a35d62e6f	Merge branch 'main' into example	2024-05-07 18:22:22 +08:00
Soybean	aaf28a42c2	optimize(projects): optimize plugin_copy	2024-05-07 18:20:23 +08:00
恕瑞玛的皇帝	019f80faef	feat(projects): 添加插件示例：剪贴板	2024-05-07 17:24:16 +08:00