refactor(projects): use new elegant-router plugin

chore(projects): release v2.0.2
chore(deps): update deps
2025-12-24 16:55:57 +08:00 · 2025-12-23 11:48:11 +08:00 · 2025-12-23 11:19:18 +08:00 · 2025-12-22 23:17:03 +08:00 · 2025-12-04 16:45:11 +08:00 · 2025-12-04 15:50:34 +08:00
74 changed files with 2189 additions and 2078 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,5 @@ package-lock.json
 yarn.lock

 .VSCodeCounter
+
+.temp
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,7 +5,6 @@
    "antfu.unocss",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
-    "esbenp.prettier-vscode",
    "lokalise.i18n-ally",
    "mhutchie.git-graph",
    "mikestead.dotenv",
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,66 @@
 # Changelog


+## [v2.0.2](https://github.com/soybeanjs/soybean-admin/compare/v2.0.1...v2.0.2) (2025-12-23)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **hooks**: update pagination pageSize after data fetch. &nbsp;-&nbsp; by **Azir-11** [<samp>(64226)</samp>](https://github.com/soybeanjs/soybean-admin/commit/64226d9b)
+- **projects**: fix the incorrect judgment of home by pin tab. &nbsp;-&nbsp; by **Azir-11** [<samp>(62a43)</samp>](https://github.com/soybeanjs/soybean-admin/commit/62a43c39)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**: update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(ec9f9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ec9f9af9)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![soybeanjs](https://github.com/soybeanjs.png?size=48)](https://github.com/soybeanjs)&nbsp;&nbsp;
+[Azir-11](mailto:2075125282@qq.com)
+
+## [v2.0.1](https://github.com/soybeanjs/soybean-admin/compare/v2.0.0...v2.0.1) (2025-12-04)
+
+### &nbsp;&nbsp;&nbsp;🚀 Features
+
+- **docs**:
+  - update QQ group image in README &nbsp;-&nbsp; by @soybeanjs [<samp>(46081)</samp>](https://github.com/soybeanjs/soybean-admin/commit/46081c36)
+- **projects**:
+  - support theme presets to only set partial content. &nbsp;-&nbsp; by **Azir-11** [<samp>(9da84)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9da847fb)
+  - support theme perset  to override component library presets. &nbsp;-&nbsp; by **Azir-11** [<samp>(60517)</samp>](https://github.com/soybeanjs/soybean-admin/commit/605173a1)
+  - support pinning and unpinning of tabs &nbsp;-&nbsp; by **hooke** [<samp>(b8a76)</samp>](https://github.com/soybeanjs/soybean-admin/commit/b8a767d7)
+  - hybrid layout mode auto select first deepest child menu &nbsp;-&nbsp; by @paynezhuang [<samp>(94019)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9401925f)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **docs**: update project name in ecosystem section of README &nbsp;-&nbsp; by @soybeanjs [<samp>(bb232)</samp>](https://github.com/soybeanjs/soybean-admin/commit/bb232bf8)
+- **types**: add missing property in theme presets &nbsp;-&nbsp; by **刘璐** [<samp>(4a9cf)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4a9cf6c3)
+
+### &nbsp;&nbsp;&nbsp;🛠 Optimizations
+
+- **projects**: simplify some theme preset configurations. &nbsp;-&nbsp; by **Azir-11** [<samp>(c6d97)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c6d97dba)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: add link to ecosystem document. &nbsp;-&nbsp; by **Azir-11** [<samp>(c472a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c472a943)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**:
+  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(f8dc6)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f8dc639e)
+  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(7cf40)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7cf4083b)
+- **other**:
+  - remove Prettier's recommendation. &nbsp;-&nbsp; by **Azir-11** [<samp>(73e9a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/73e9a0fe)
+- **styles**:
+  - format code &nbsp;-&nbsp; by @soybeanjs [<samp>(098cd)</samp>](https://github.com/soybeanjs/soybean-admin/commit/098cd50e)
+
+### &nbsp;&nbsp;&nbsp;🎨 Styles
+
+- **projects**: modify homepage prompt title to tip. &nbsp;-&nbsp; by **Azir-11** [<samp>(91a26)</samp>](https://github.com/soybeanjs/soybean-admin/commit/91a261c1)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![soybeanjs](https://github.com/soybeanjs.png?size=48)](https://github.com/soybeanjs)&nbsp;&nbsp;[![paynezhuang](https://github.com/paynezhuang.png?size=48)](https://github.com/paynezhuang)&nbsp;&nbsp;
+[hooke](mailto:hellohooke@foxmail.com),&nbsp;[Azir-11](mailto:2075125282@qq.com),&nbsp;[刘璐](mailto:hi.alue@qq.com)
+
 ## [v2.0.0](https://github.com/soybeanjs/soybean-admin/compare/v1.3.15...v2.0.0) (2025-11-02)

 ### &nbsp;&nbsp;&nbsp;🚨 Breaking Changes
--- a/README.en_US.md
+++ b/README.en_US.md
@@ -139,7 +139,7 @@ Refer to the [Code Synchronization](https://docs.soybeanjs.cn/guide/sync) docume

 ## Ecosystem

- [react-soybean-admin](https://github.com/mufeng889/react-soybean-admin): SoybeanAdmin based version of React.
+- [skyroc-admin](https://github.com/Ohh-889/skyroc-admin): SoybeanAdmin's React version implementation.
 - [electron-mock-admin](https://github.com/lixin59/electron-mock-api): A Mock Api management system that helps front-end developers quickly implement interface mocks.
 - [T-Shell](https://github.com/TheBlindM/T-Shell): A terminal emulator and SSH client with configurable command prompts.
 - [pea](https://github.com/haitang1894/pea) : Adopting SpringBoot3.2 + JDK21, MyBatis-Plus, SpringSecurity security framework, etc., suitable for the simple permission system developed by [soybean-admin](https://gitee.com/honghuangdc/soybean-admin).
@@ -151,6 +151,8 @@ Refer to the [Code Synchronization](https://docs.soybeanjs.cn/guide/sync) docume
 - [ba](https://github.com/xiatianYa/Ba-Server): Backend service docking with soybean admin based on goFrame framework, adapted to dynamic routing, and interface authentication permissions.
 - [soybean-admin-go](https://github.com/WgoW/soybean-admin-go):A Go backend service developed based on the Gin and GORM frameworks, integrated with the example branch of Soybean Admin. It supports dynamic routing and API permission authentication.

+More ecosystem please refer to [Ecosystem](https://docs.soybeanjs.cn/awesome) document.
+

 ## How to Contribute

@@ -194,7 +196,7 @@ Here are the most active contributors from the past year. Thank you all for your

  <div>
  	<p>QQ Group</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-4.jpg" style="width:200px" />
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-5.jpg" style="width:200px" />
  </div>
 	<!-- <div>
 		<p>WeChat Group</p>
--- a/README.md
+++ b/README.md
@@ -165,7 +165,7 @@ pnpm build

 ## 周边生态

- [react-soybean-admin](https://github.com/mufeng889/react-soybean-admin): 基于SoybeanAdmin的React版本.
+- [skyroc-admin](https://github.com/Ohh-889/skyroc-admin): SoybeanAdmin的React版本实现.
 - [electron-mock-admin](https://github.com/lixin59/electron-mock-api): 一个 Mock Api 管理系统，帮助前端开发伙伴快速实现接口的 mock。
 - [T-Shell](https://github.com/TheBlindM/T-Shell): 是一个可配置命令提示的终端模拟器和 SSH 客户端。
 - [pea](https://github.com/haitang1894/pea) : 采用SpringBoot3.2 + JDK21、MyBatis-Plus、SpringSecurity安全框架等，适配 [soybean-admin](https://gitee.com/honghuangdc/soybean-admin) 开发的简单权限系统。
@@ -177,6 +177,8 @@ pnpm build
 - [ba](https://github.com/xiatianYa/Ba-Server): 基于goFrame框架开发的后端服务对接soybean-admin,适配动态路由,接口鉴权限。
 - [soybean-admin-go](https://github.com/WgoW/soybean-admin-go):基于gin+gorm框架开发的go语言后端服务对接soybean-admin的example分支,适配动态路由,接口鉴权限。

+更多周边生态请翻阅 [周边生态](https://docs.soybeanjs.cn/zh/awesome) 文档。
+

 ## 如何贡献

@@ -222,7 +224,7 @@ pnpm build

  <div>
  	<p>QQ交流群</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-4.jpg" style="width:200px" />
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-5.jpg" style="width:200px" />
  </div>
 	<!-- <div>
 		<p>微信群</p>
--- 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 { setupElegantRouter } from './router';
+import elegantRouter from 'elegant-router/vite';
 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),
-    setupElegantRouter(),
+    elegantRouter(),
    setupUnocss(viteEnv),
    ...setupUnplugin(viteEnv),
    progress(),
--- a/build/plugins/router.ts
+++ b/build/plugins/router.ts
@@ -1,41 +0,0 @@
-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'
-    },
-    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/er.config.ts
+++ b/er.config.ts
@@ -0,0 +1,37 @@
+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
@@ -1,7 +1,7 @@
 {
  "name": "soybean-admin",
  "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "description": "A fresh and elegant admin template, based on Vue3、Vite7、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite7、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
@@ -54,53 +54,54 @@
    "@sa/hooks": "workspace:*",
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
-    "@vueuse/core": "14.0.0",
+    "@vueuse/core": "14.1.0",
    "clipboard": "2.0.11",
    "dayjs": "1.11.19",
    "defu": "6.1.4",
    "echarts": "6.0.0",
    "json5": "2.2.3",
-    "naive-ui": "2.43.1",
+    "naive-ui": "2.43.2",
    "nprogress": "0.2.0",
-    "pinia": "3.0.3",
-    "tailwind-merge": "3.3.1",
-    "vue": "3.5.22",
+    "pinia": "3.0.4",
+    "tailwind-merge": "3.4.0",
+    "vue": "3.5.26",
    "vue-draggable-plus": "0.6.0",
-    "vue-i18n": "11.1.12",
-    "vue-router": "4.6.3"
+    "vue-i18n": "11.2.7",
+    "vue-router": "4.6.4"
  },
  "devDependencies": {
    "@elegant-router/vue": "0.3.8",
-    "@iconify/json": "2.2.402",
+    "@iconify/json": "2.2.417",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.7.1",
-    "@types/node": "24.9.2",
+    "@soybeanjs/eslint-config": "1.7.4",
+    "@types/node": "25.0.3",
    "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "66.5.4",
-    "@unocss/preset-icons": "66.5.4",
-    "@unocss/preset-uno": "66.5.4",
-    "@unocss/transformer-directives": "66.5.4",
-    "@unocss/transformer-variant-group": "66.5.4",
-    "@unocss/vite": "66.5.4",
-    "@vitejs/plugin-vue": "6.0.1",
-    "@vitejs/plugin-vue-jsx": "5.1.1",
+    "@unocss/eslint-config": "66.5.10",
+    "@unocss/preset-icons": "66.5.10",
+    "@unocss/preset-uno": "66.5.10",
+    "@unocss/transformer-directives": "66.5.10",
+    "@unocss/transformer-variant-group": "66.5.10",
+    "@unocss/vite": "66.5.10",
+    "@vitejs/plugin-vue": "6.0.3",
+    "@vitejs/plugin-vue-jsx": "5.1.2",
    "consola": "3.4.2",
-    "eslint": "9.39.0",
-    "eslint-plugin-vue": "10.5.1",
+    "elegant-router": "1.1.0",
+    "eslint": "9.39.2",
+    "eslint-plugin-vue": "10.6.2",
    "kolorist": "1.8.0",
-    "sass": "1.93.3",
+    "sass": "1.97.1",
    "simple-git-hooks": "2.13.1",
-    "tsx": "4.20.6",
+    "tsx": "4.21.0",
    "typescript": "5.9.3",
    "unplugin-icons": "22.5.0",
    "unplugin-vue-components": "30.0.0",
-    "vite": "7.1.12",
+    "vite": "7.3.0",
    "vite-plugin-progress": "0.0.7",
    "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "8.0.3",
+    "vite-plugin-vue-devtools": "8.0.5",
    "vue-eslint-parser": "10.2.0",
-    "vue-tsc": "3.1.2"
+    "vue-tsc": "3.2.1"
  },
  "simple-git-hooks": {
    "commit-msg": "pnpm sa git-commit-verify",
--- a/packages/alova/package.json
+++ b/packages/alova/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/alova",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts",
    "./fetch": "./src/fetch.ts",
@@ -13,8 +13,8 @@
    }
  },
  "dependencies": {
-    "@alova/mock": "2.0.17",
+    "@alova/mock": "2.0.18",
    "@sa/utils": "workspace:*",
-    "alova": "3.3.4"
+    "alova": "3.4.1"
  }
 }
--- a/packages/axios/package.json
+++ b/packages/axios/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/axios",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts"
  },
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@sa/utils": "workspace:*",
-    "axios": "1.13.1",
+    "axios": "1.13.2",
    "axios-retry": "4.5.0",
    "qs": "6.14.0"
  },
--- a/packages/axios/src/type.ts
+++ b/packages/axios/src/type.ts
@@ -119,8 +119,11 @@ export type FlatResponseData<ResponseData, ApiData> =
  | FlatResponseSuccessData<ResponseData, ApiData>
  | FlatResponseFailData<ResponseData>;

-export interface FlatRequestInstance<ResponseData, ApiData, State extends Record<string, unknown>>
-  extends RequestInstanceCommon<State> {
+export interface FlatRequestInstance<
+  ResponseData,
+  ApiData,
+  State extends Record<string, unknown>
+> extends RequestInstanceCommon<State> {
  <T extends ApiData = ApiData, R extends ResponseType = 'json'>(
    config: CustomAxiosRequestConfig<R>
  ): Promise<FlatResponseData<ResponseData, MappedType<R, T>>>;
--- a/packages/color/package.json
+++ b/packages/color/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/color",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/hooks",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/hooks/src/use-request.ts
+++ b/packages/hooks/src/use-request.ts
@@ -26,8 +26,11 @@ export type HookRequestInstanceResponseData<ResponseData, ApiData> = {
  loading: Ref<boolean>;
 } & (HookRequestInstanceResponseSuccessData<ApiData> | HookRequestInstanceResponseFailData<ResponseData>);

-export interface HookRequestInstance<ResponseData, ApiData, State extends Record<string, unknown>>
-  extends RequestInstanceCommon<State> {
+export interface HookRequestInstance<
+  ResponseData,
+  ApiData,
+  State extends Record<string, unknown>
+> extends RequestInstanceCommon<State> {
  <T extends ApiData = ApiData, R extends ResponseType = 'json'>(
    config: CustomAxiosRequestConfig
  ): HookRequestInstanceResponseData<ResponseData, MappedType<R, T>>;
--- a/packages/materials/package.json
+++ b/packages/materials/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/materials",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/materials/src/types/index.ts
+++ b/packages/materials/src/types/index.ts
@@ -146,7 +146,8 @@ export type LayoutScrollMode = 'wrapper' | 'content';

 /** Admin layout props */
 export interface AdminLayoutProps
-  extends AdminLayoutHeaderConfig,
+  extends
+    AdminLayoutHeaderConfig,
    AdminLayoutTabConfig,
    AdminLayoutSiderConfig,
    AdminLayoutContentConfig,
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/scripts",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "bin": {
    "sa": "./bin.ts"
  },
@@ -14,15 +14,15 @@
  },
  "devDependencies": {
    "@soybeanjs/changelog": "0.3.25",
-    "bumpp": "10.3.1",
-    "c12": "3.3.1",
+    "bumpp": "10.3.2",
+    "c12": "3.3.3",
    "cac": "6.7.14",
    "consola": "3.4.2",
    "enquirer": "2.4.1",
-    "execa": "9.6.0",
+    "execa": "9.6.1",
    "kolorist": "1.8.0",
-    "npm-check-updates": "19.1.2",
+    "npm-check-updates": "19.2.0",
    "picomatch": "4.0.3",
-    "rimraf": "6.1.0"
+    "rimraf": "6.1.2"
  }
 }
--- a/packages/uno-preset/package.json
+++ b/packages/uno-preset/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/uno-preset",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/utils",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -131,6 +131,7 @@ export function useNaivePaginatedTable<ResponseData, ApiData>(
    getColumns,
    onFetched: data => {
      pagination.itemCount = data.total;
+      pagination.pageSize = data.pageSize;
    }
  });

--- a/src/layouts/modules/global-menu/context/index.ts
+++ b/src/layouts/modules/global-menu/context/index.ts
@@ -3,6 +3,7 @@ import { useRoute } from 'vue-router';
 import { useContext } from '@sa/hooks';
 import type { RouteKey } from '@elegant-router/types';
 import { useRouteStore } from '@/store/modules/route';
+import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';

 export const [provideMixMenuContext, useMixMenuContext] = useContext('MixMenu', useMixMenu);
@@ -10,6 +11,7 @@ export const [provideMixMenuContext, useMixMenuContext] = useContext('MixMenu',
 function useMixMenu() {
  const route = useRoute();
  const routeStore = useRouteStore();
+  const themeStore = useThemeStore();
  const { selectedKey } = useMenu();
  const { routerPushByKeyWithMetaQuery } = useRouterPush();

@@ -100,10 +102,46 @@ function useMixMenu() {
    () => secondLevelMenus.value.find(menu => menu.key === activeSecondLevelMenuKey.value)?.children || []
  );

+  const hasChildLevelMenus = computed(() => childLevelMenus.value.length > 0);
+
+  function getDeepestLevelMenuKey(): RouteKey | null {
+    if (!secondLevelMenus.value.length || !themeStore.sider.autoSelectFirstMenu) {
+      return null;
+    }
+
+    const secondLevelFirstMenu = secondLevelMenus.value[0];
+
+    if (!secondLevelFirstMenu) {
+      return null;
+    }
+
+    function findDeepest(menu: App.Global.Menu): RouteKey {
+      if (!menu.children?.length) {
+        return menu.routeKey;
+      }
+
+      return findDeepest(menu.children[0]);
+    }
+
+    return findDeepest(secondLevelFirstMenu);
+  }
+
+  function activeDeepestLevelMenuKey() {
+    const deepestLevelMenuKey = getDeepestLevelMenuKey();
+    if (!deepestLevelMenuKey) return;
+
+    // select the deepest second level menu
+    handleSelectSecondLevelMenu(deepestLevelMenuKey);
+  }
+
  watch(
    () => route.name,
    () => {
      getActiveFirstLevelMenuKey();
+      // if there are child level menus, get the active second level menu key
+      if (hasChildLevelMenus.value) {
+        getActiveSecondLevelMenuKey();
+      }
    },
    { immediate: true }
  );
@@ -121,7 +159,10 @@ function useMixMenu() {
    isActiveSecondLevelMenuHasChildren,
    handleSelectSecondLevelMenu,
    getActiveSecondLevelMenuKey,
-    childLevelMenus
+    childLevelMenus,
+    hasChildLevelMenus,
+    getDeepestLevelMenuKey,
+    activeDeepestLevelMenuKey
  };
 }

--- a/src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue
+++ b/src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue
@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { SimpleScrollbar } from '@sa/materials';
+import type { RouteKey } from '@elegant-router/types';
 import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
@@ -18,12 +19,28 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } =
-  useMixMenuContext('TopHybridHeaderFirst');
+const {
+  firstLevelMenus,
+  secondLevelMenus,
+  activeFirstLevelMenuKey,
+  handleSelectFirstLevelMenu,
+  activeDeepestLevelMenuKey
+} = useMixMenuContext('TopHybridHeaderFirst');
 const { selectedKey } = useMenu();

 const expandedKeys = ref<string[]>([]);

+/**
+ * Handle first level menu select
+ * @param key RouteKey
+ */
+function handleSelectMenu(key: RouteKey) {
+  handleSelectFirstLevelMenu(key);
+
+  // if there are second level menus, select the deepest one by default
+  activeDeepestLevelMenuKey();
+}
+
 function updateExpandedKeys() {
  if (appStore.siderCollapse || !selectedKey.value) {
    expandedKeys.value = [];
@@ -49,7 +66,7 @@ watch(
      :options="firstLevelMenus"
      :indent="18"
      responsive
-      @update:value="handleSelectFirstLevelMenu"
+      @update:value="handleSelectMenu"
    />
  </Teleport>
  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
--- a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
+++ b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RouteKey } from '@elegant-router/types';
 import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
@@ -13,9 +14,25 @@ defineOptions({
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } =
-  useMixMenuContext('TopHybridSidebarFirst');
+const {
+  firstLevelMenus,
+  secondLevelMenus,
+  activeFirstLevelMenuKey,
+  handleSelectFirstLevelMenu,
+  activeDeepestLevelMenuKey
+} = useMixMenuContext('TopHybridSidebarFirst');
 const { selectedKey } = useMenu();
+
+/**
+ * Handle first level menu select
+ * @param key RouteKey
+ */
+function handleSelectMenu(key: RouteKey) {
+  handleSelectFirstLevelMenu(key);
+
+  // if there are second level menus, select the deepest one by default
+  activeDeepestLevelMenuKey();
+}
 </script>

 <template>
@@ -37,7 +54,7 @@ const { selectedKey } = useMenu();
        :sider-collapse="appStore.siderCollapse"
        :dark-mode="themeStore.darkMode"
        :theme-color="themeStore.themeColor"
-        @select="handleSelectFirstLevelMenu"
+        @select="handleSelectMenu"
        @toggle-sider-collapse="appStore.toggleSiderCollapse"
      />
    </div>
--- a/src/layouts/modules/global-menu/modules/vertical-hybrid-header-first.vue
+++ b/src/layouts/modules/global-menu/modules/vertical-hybrid-header-first.vue
@@ -33,15 +33,15 @@ const {
  isActiveSecondLevelMenuHasChildren,
  handleSelectSecondLevelMenu,
  getActiveSecondLevelMenuKey,
-  childLevelMenus
+  childLevelMenus,
+  hasChildLevelMenus,
+  activeDeepestLevelMenuKey
 } = useMixMenuContext('VerticalHybridHeaderFirst');
 const { selectedKey } = useMenu();

 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);

-const hasChildMenus = computed(() => childLevelMenus.value.length > 0);
-
-const showDrawer = computed(() => hasChildMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
+const showDrawer = computed(() => hasChildLevelMenus.value && (drawerVisible.value || appStore.mixSiderFixed));

 function handleSelectMixMenu(key: RouteKey) {
  handleSelectSecondLevelMenu(key);
@@ -51,12 +51,33 @@ function handleSelectMixMenu(key: RouteKey) {
  }
 }

+/**
+ * Handle second level menu selection based on autoSelectFirstMenu setting:
+ * - When disabled: Activate first second-level menu for display only, expand third-level menu if exists
+ * - When enabled: Navigate to the deepest menu automatically
+ */
 function handleSelectMenu(key: RouteKey) {
  handleSelectFirstLevelMenu(key);

-  if (secondLevelMenus.value.length > 0) {
-    handleSelectMixMenu(secondLevelMenus.value[0].routeKey);
+  if (secondLevelMenus.value.length === 0) return;
+
+  const secondFirstMenuKey = secondLevelMenus.value[0].routeKey;
+
+  // Case 1: autoSelectFirstMenu disabled - only activate menu for display
+  if (!themeStore.sider.autoSelectFirstMenu) {
+    // Check if there are third-level menus
+    const hasChildren = secondLevelMenus.value.find(menu => menu.key === secondFirstMenuKey)?.children?.length;
+
+    // If there are third-level menus, expand them
+    if (hasChildren) {
+      handleSelectMixMenu(secondFirstMenuKey);
+    }
+    return;
  }
+
+  // Case 2: autoSelectFirstMenu enabled - navigate to deepest menu
+  activeDeepestLevelMenuKey();
+  setDrawerVisible(false);
 }

 function handleResetActiveMenu() {
@@ -114,7 +135,9 @@ watch(
      </FirstLevelMenu>
      <div
        class="relative h-full transition-width-300"
-        :style="{ width: appStore.mixSiderFixed && hasChildMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+        :style="{
+          width: appStore.mixSiderFixed && hasChildLevelMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px'
+        }"
      >
        <DarkModeContainer
          class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
--- a/src/layouts/modules/global-tab/context-menu.vue
+++ b/src/layouts/modules/global-tab/context-menu.vue
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {

 const visible = defineModel<boolean>('visible');

-const { removeTab, clearTabs, clearLeftTabs, clearRightTabs } = useTabStore();
+const { removeTab, clearTabs, clearLeftTabs, clearRightTabs, fixTab, unfixTab, isTabRetain, homeTab } = useTabStore();
 const { SvgIconVNode } = useSvgIcon();

 type DropdownOption = {
@@ -64,6 +64,23 @@ const options = computed(() => {
      icon: SvgIconVNode({ icon: 'ant-design:line-outlined', fontSize: 18 })
    }
  ];
+
+  if (props.tabId !== homeTab?.id) {
+    if (isTabRetain(props.tabId)) {
+      opts.push({
+        key: 'unpin',
+        label: $t('dropdown.unpin'),
+        icon: SvgIconVNode({ icon: 'mdi:pin-off-outline', fontSize: 18 })
+      });
+    } else {
+      opts.push({
+        key: 'pin',
+        label: $t('dropdown.pin'),
+        icon: SvgIconVNode({ icon: 'mdi:pin-outline', fontSize: 18 })
+      });
+    }
+  }
+
  const { excludeKeys, disabledKeys } = props;

  const result = opts.filter(opt => !excludeKeys.includes(opt.key));
@@ -98,6 +115,12 @@ const dropdownAction: Record<App.Global.DropdownKey, () => void> = {
  },
  closeAll() {
    clearTabs();
+  },
+  pin() {
+    fixTab(props.tabId);
+  },
+  unpin() {
+    unfixTab(props.tabId);
  }
 };

--- a/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
@@ -12,6 +12,7 @@ const themeStore = useThemeStore();

 const layoutMode = computed(() => themeStore.layout.mode);
 const isMixLayoutMode = computed(() => layoutMode.value.includes('mix') || layoutMode.value.includes('hybrid'));
+const isHybridLayoutMode = computed(() => layoutMode.value.includes('hybrid'));
 </script>

 <template>
@@ -32,6 +33,12 @@ const isMixLayoutMode = computed(() => layoutMode.value.includes('mix') || layou
    <SettingItem v-if="layoutMode === 'vertical-mix'" key="5" :label="$t('theme.layout.sider.mixChildMenuWidth')">
      <NInputNumber v-model:value="themeStore.sider.mixChildMenuWidth" size="small" :step="1" class="w-120px" />
    </SettingItem>
+    <SettingItem v-if="isHybridLayoutMode" key="6" :label="$t('theme.layout.sider.autoSelectFirstMenu')">
+      <template #suffix>
+        <IconTooltip :desc="$t('theme.layout.sider.autoSelectFirstMenuTip')" />
+      </template>
+      <NSwitch v-model:value="themeStore.sider.autoSelectFirstMenu" />
+    </SettingItem>
  </TransitionGroup>
 </template>

--- a/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
+++ b/src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { defu } from 'defu';
 import { useThemeStore } from '@/store/modules/theme';
+import { themeSettings } from '@/theme/settings';
 import { $t } from '@/locales';

 defineOptions({
@@ -31,6 +33,8 @@ type ThemePreset = Pick<
  desc: string;
  i18nkey?: string;
  version: string;
+  /** Optional NaiveUI theme overrides */
+  naiveui?: App.Theme.NaiveUIThemeOverride;
 };

 const presetModules = import.meta.glob('@/theme/preset/*.json', { eager: true, import: 'default' });
@@ -76,7 +80,9 @@ const getPresetDesc = (preset: ThemePreset): string => {
  }
 };

-const applyPreset = ({ themeScheme, grayscale, colourWeakness, layout, watermark, ...rest }: ThemePreset): void => {
+const applyPreset = (preset: ThemePreset): void => {
+  const mergedPreset = defu(preset, themeSettings);
+  const { themeScheme, grayscale, colourWeakness, layout, watermark, naiveui, ...rest } = mergedPreset;
  themeStore.setThemeScheme(themeScheme);
  themeStore.setGrayscale(grayscale);
  themeStore.setColourWeakness(colourWeakness);
@@ -96,6 +102,9 @@ const applyPreset = ({ themeScheme, grayscale, colourWeakness, layout, watermark
    tokens: { ...rest.tokens }
  });

+  // Apply NaiveUI theme overrides if present
+  themeStore.setNaiveThemeOverrides(naiveui);
+
  window.$message?.success($t('theme.appearance.preset.applySuccess'));
 };
 </script>
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -160,7 +160,10 @@ const local: App.I18n.Schema = {
        collapsedWidth: 'Sider Collapsed Width',
        mixWidth: 'Mix Sider Width',
        mixCollapsedWidth: 'Mix Sider Collapse Width',
-        mixChildMenuWidth: 'Mix Child Menu Width'
+        mixChildMenuWidth: 'Mix Child Menu Width',
+        autoSelectFirstMenu: 'Auto Select First Submenu',
+        autoSelectFirstMenuTip:
+          'When a first-level menu is clicked, the first submenu is automatically selected and navigated to the deepest level'
      },
      footer: {
        title: 'Footer Settings',
@@ -336,7 +339,9 @@ const local: App.I18n.Schema = {
    closeOther: 'Close Other',
    closeLeft: 'Close Left',
    closeRight: 'Close Right',
-    closeAll: 'Close All'
+    closeAll: 'Close All',
+    pin: 'Pin Tab',
+    unpin: 'Unpin Tab'
  },
  icon: {
    themeConfig: 'Theme Configuration',
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -157,7 +157,9 @@ const local: App.I18n.Schema = {
        collapsedWidth: '侧边栏折叠宽度',
        mixWidth: '混合布局侧边栏宽度',
        mixCollapsedWidth: '混合布局侧边栏折叠宽度',
-        mixChildMenuWidth: '混合布局子菜单宽度'
+        mixChildMenuWidth: '混合布局子菜单宽度',
+        autoSelectFirstMenu: '自动选择第一个子菜单',
+        autoSelectFirstMenuTip: '点击一级菜单时，自动选择并导航到第一个子菜单的最深层级'
      },
      footer: {
        title: '底部设置',
@@ -333,7 +335,9 @@ const local: App.I18n.Schema = {
    closeOther: '关闭其它',
    closeLeft: '关闭左侧',
    closeRight: '关闭右侧',
-    closeAll: '关闭所有'
+    closeAll: '关闭所有',
+    pin: '固定标签',
+    unpin: '取消固定'
  },
  icon: {
    themeConfig: '主题配置',
--- a/src/router/_generated/imports.ts
+++ b/src/router/_generated/imports.ts
@@ -0,0 +1,27 @@
+/* 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
@@ -0,0 +1,130 @@
+/* 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
@@ -0,0 +1,28 @@
+/* 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
@@ -0,0 +1,70 @@
+/* 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
@@ -1,24 +0,0 @@
-/* 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"),
-  home: () => import("@/views/home/index.vue"),
-};
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -1,78 +0,0 @@
-/* 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: '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
-    }
-  }
-];
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -1,192 +0,0 @@
-/* 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(.*)*",
-  "403": "/403",
-  "404": "/404",
-  "500": "/500",
-  "home": "/home",
-  "iframe-page": "/iframe-page/:url",
-  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?"
-};
-
-/**
- * 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,12 +1,6 @@
 import type { App } from 'vue';
-import {
-  type RouterHistory,
-  createMemoryHistory,
-  createRouter,
-  createWebHashHistory,
-  createWebHistory
-} from 'vue-router';
-import { createBuiltinVueRoutes } from './routes/builtin';
+import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
+import type { RouterHistory } from 'vue-router';
 import { createRouterGuard } from './guard';

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

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

 /** Setup Vue Router */
--- a/src/router/routes/builtin.ts
+++ b/src/router/routes/builtin.ts
@@ -1,31 +0,0 @@
-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,40 +1,39 @@
-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[] = [];
+import type { AutoRouterRedirect, AutoRouterRoute } from '@elegant-router/types';
+import { routes } from '../_generated/routes';
+import { layouts, views } from '../_generated/imports';
+import { transformToVueRoutes } from '../_generated/transformer';

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

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

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

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

 /**
 * Get auth vue routes
 *
- * @param routes Elegant routes
+ * @param authRoutes Elegant routes
 */
-export function getAuthVueRoutes(routes: ElegantConstRoute[]) {
-  return transformElegantRoutesToVueRoutes(routes, layouts, views);
+export function getAuthVueRoutes(authRoutes: AutoRouterRoute[]) {
+  return transformToVueRoutes(authRoutes, layouts, views);
 }
--- a/src/store/modules/tab/index.ts
+++ b/src/store/modules/tab/index.ts
@@ -18,6 +18,7 @@ import {
  getTabByRoute,
  getTabIdByRoute,
  isTabInTabs,
+  reorderFixedTabs,
  updateTabByI18nKey,
  updateTabsByI18nKey
 } from './shared';
@@ -248,6 +249,48 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
    await clearTabs(excludes);
  }

+  /**
+   * Fix tab
+   *
+   * @param tabId
+   */
+  function fixTab(tabId: string) {
+    const tabIndex = tabs.value.findIndex(t => t.id === tabId);
+    if (tabIndex === -1) return;
+
+    const tab = tabs.value[tabIndex];
+    const fixedCount = getFixedTabIds(tabs.value).length;
+    tab.fixedIndex = fixedCount;
+
+    if (tabIndex !== fixedCount) {
+      tabs.value.splice(tabIndex, 1);
+      tabs.value.splice(fixedCount, 0, tab);
+    }
+
+    reorderFixedTabs(tabs.value);
+  }
+
+  /**
+   * Unfix tab
+   *
+   * @param tabId
+   */
+  function unfixTab(tabId: string) {
+    const tabIndex = tabs.value.findIndex(t => t.id === tabId);
+    if (tabIndex === -1) return;
+
+    const tab = tabs.value[tabIndex];
+    tab.fixedIndex = undefined;
+
+    const fixedCount = getFixedTabIds(tabs.value).length;
+    if (tabIndex !== fixedCount) {
+      tabs.value.splice(tabIndex, 1);
+      tabs.value.splice(fixedCount, 0, tab);
+    }
+
+    reorderFixedTabs(tabs.value);
+  }
+
  /**
   * Set new label of tab
   *
@@ -318,6 +361,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
    /** All tabs */
    tabs: allTabs,
    activeTabId,
+    homeTab,
    initHomeTab,
    initTabStore,
    addTab,
@@ -328,6 +372,8 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
    clearTabs,
    clearLeftTabs,
    clearRightTabs,
+    fixTab,
+    unfixTab,
    switchRouteByTab,
    setTabLabel,
    resetTabLabel,
--- a/src/store/modules/tab/shared.ts
+++ b/src/store/modules/tab/shared.ts
@@ -198,6 +198,18 @@ export function getFixedTabIds(tabs: App.Global.Tab[]) {
  return fixedTabs.map(tab => tab.id);
 }

+/**
+ * Reorder fixed tabs fixedIndex
+ *
+ * @param tabs
+ */
+export function reorderFixedTabs(tabs: App.Global.Tab[]) {
+  const fixedTabs = getFixedTabs(tabs);
+  fixedTabs.forEach((t, i) => {
+    t.fixedIndex = i;
+  });
+}
+
 /**
 * Update tabs label
 *
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -24,6 +24,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
  /** Theme settings */
  const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings());

+  /** Optional NaiveUI theme overrides from preset */
+  const naiveThemeOverrides: Ref<App.Theme.NaiveUIThemeOverride | undefined> = ref(undefined);
+
  /** Watermark time instance with controls */
  const { now: watermarkTime, pause: pauseWatermarkTime, resume: resumeWatermarkTime } = useNow({ controls: true });

@@ -53,7 +56,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
  });

  /** Naive theme */
-  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value));
+  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value, naiveThemeOverrides.value));

  /**
   * Settings json
@@ -198,6 +201,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    }
  }

+  /**
+   * Set NaiveUI theme overrides
+   *
+   * @param overrides NaiveUI theme overrides or undefined to clear
+   */
+  function setNaiveThemeOverrides(overrides?: App.Theme.NaiveUIThemeOverride) {
+    naiveThemeOverrides.value = overrides;
+  }
+
  /** Only run timer when watermark is visible and time display is enabled */
  function updateWatermarkTimer() {
    const { watermark } = settings.value;
@@ -284,6 +296,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    updateThemeColors,
    setThemeLayout,
    setWatermarkEnableUserName,
-    setWatermarkEnableTime
+    setWatermarkEnableTime,
+    setNaiveThemeOverrides
  };
 });
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -236,11 +236,15 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false)
 /**
 * Get naive theme
 *
- * @param settings Theme settings object.
- * @param settings.recommendColor Whether to use recommended color palette.
- * @param settings.themeRadius Border radius to use in the theme (in px).
+ * @param colors Theme colors
+ * @param settings Theme settings object
+ * @param overrides Optional manual overrides from preset
 */
-export function getNaiveTheme(colors: App.Theme.ThemeColor, settings: App.Theme.ThemeSetting) {
+export function getNaiveTheme(
+  colors: App.Theme.ThemeColor,
+  settings: App.Theme.ThemeSetting,
+  overrides?: GlobalThemeOverrides
+) {
  const { primary: colorLoading } = colors;

  const theme: GlobalThemeOverrides = {
@@ -256,5 +260,7 @@ export function getNaiveTheme(colors: App.Theme.ThemeColor, settings: App.Theme.
    }
  };

-  return theme;
+  // If there are overrides, merge them with priority
+  // overrides has higher priority than auto-generated theme
+  return overrides ? defu(overrides, theme) : theme;
 }
--- a/src/theme/preset/azir.json
+++ b/src/theme/preset/azir.json
@@ -2,10 +2,8 @@
  "name": "Azir's Preset",
  "desc": "It is a cold and elegant preset that Azir likes",
  "i18nkey": "theme.appearance.preset.azir",
-  "version": "1.0.0",
+  "version": "1.0.1",
  "themeScheme": "light",
-  "grayscale": false,
-  "colourWeakness": false,
  "recommendColor": true,
  "themeColor": "#78a878",
  "otherColor": {
@@ -14,57 +12,7 @@
    "warning": "#d4bb9d",
    "error": "#c49a9a"
  },
-  "themeRadius": 6,
  "isInfoFollowPrimary": true,
-  "layout": {
-    "mode": "vertical-mix",
-    "scrollMode": "wrapper"
-  },
-  "page": {
-    "animate": true,
-    "animateMode": "zoom-fade"
-  },
-  "header": {
-    "height": 64,
-    "breadcrumb": {
-      "visible": true,
-      "showIcon": true
-    },
-    "multilingual": {
-      "visible": true
-    },
-    "globalSearch": {
-      "visible": true
-    }
-  },
-  "tab": {
-    "visible": true,
-    "cache": true,
-    "height": 48,
-    "mode": "chrome"
-  },
-  "fixedHeaderAndTab": true,
-  "sider": {
-    "inverted": false,
-    "width": 220,
-    "collapsedWidth": 64,
-    "mixWidth": 90,
-    "mixCollapsedWidth": 64,
-    "mixChildMenuWidth": 200
-  },
-  "footer": {
-    "visible": true,
-    "fixed": true,
-    "height": 56,
-    "right": true
-  },
-  "watermark": {
-    "visible": false,
-    "text": "SoybeanAdmin",
-    "enableUserName": false,
-    "enableTime": true,
-    "timeFormat": "YYYY-MM-DD HH:mm:ss"
-  },
  "tokens": {
    "light": {
      "colors": {
@@ -86,5 +34,19 @@
        "base-text": "rgb(224, 224, 224)"
      }
    }
+  },
+  "naiveui": {
+    "Alert": {
+      "borderRadiusMedium": "12px",
+      "fontWeightStrong": "600",
+      "paddingMedium": "0 20px"
+    },
+    "Card": {
+      "borderRadius": "16px",
+      "paddingMedium": "24px"
+    },
+    "Input": {
+      "borderRadius": "10px"
+    }
  }
 }
--- a/src/theme/preset/compact.json
+++ b/src/theme/preset/compact.json
@@ -2,33 +2,12 @@
  "name": "Compact Preset",
  "desc": "Compact layout preset for small screens",
  "i18nkey": "theme.appearance.preset.compact",
-  "version": "1.0.0",
-  "themeScheme": "light",
-  "grayscale": false,
-  "colourWeakness": false,
-  "recommendColor": false,
-  "themeColor": "#646cff",
-  "otherColor": {
-    "info": "#2080f0",
-    "success": "#52c41a",
-    "warning": "#faad14",
-    "error": "#f5222d"
-  },
+  "version": "1.0.1",
  "themeRadius": 6,
-  "isInfoFollowPrimary": true,
-  "layout": {
-    "mode": "vertical",
-    "scrollMode": "content"
-  },
-  "page": {
-    "animate": true,
-    "animateMode": "fade-slide"
-  },
  "header": {
    "height": 48,
    "breadcrumb": {
-      "visible": true,
-      "showIcon": true
+      "visible": false
    },
    "multilingual": {
      "visible": false
@@ -41,9 +20,9 @@
    "visible": true,
    "cache": true,
    "height": 36,
-    "mode": "button"
+    "mode": "button",
+    "closeTabByMiddleClick": false
  },
-  "fixedHeaderAndTab": true,
  "sider": {
    "inverted": false,
    "width": 180,
@@ -53,38 +32,6 @@
    "mixChildMenuWidth": 180
  },
  "footer": {
-    "visible": false,
-    "fixed": false,
-    "height": 40,
-    "right": true
-  },
-  "watermark": {
-    "visible": false,
-    "text": "SoybeanAdmin",
-    "enableUserName": false,
-    "enableTime": false,
-    "timeFormat": "YYYY-MM-DD HH:mm"
-  },
-  "tokens": {
-    "light": {
-      "colors": {
-        "container": "rgb(255, 255, 255)",
-        "layout": "rgb(247, 250, 252)",
-        "inverted": "rgb(0, 20, 40)",
-        "base-text": "rgb(31, 31, 31)"
-      },
-      "boxShadow": {
-        "header": "0 1px 2px rgb(0, 21, 41, 0.08)",
-        "sider": "2px 0 8px 0 rgb(29, 35, 41, 0.05)",
-        "tab": "0 1px 2px rgb(0, 21, 41, 0.08)"
-      }
-    },
-    "dark": {
-      "colors": {
-        "container": "rgb(28, 28, 28)",
-        "layout": "rgb(18, 18, 18)",
-        "base-text": "rgb(224, 224, 224)"
-      }
-    }
+    "visible": false
  }
 }
--- a/src/theme/preset/dark.json
+++ b/src/theme/preset/dark.json
@@ -2,12 +2,12 @@
  "name": "Dark Preset",
  "desc": "Dark theme preset for night time usage",
  "i18nkey": "theme.appearance.preset.dark",
-  "version": "1.0.0",
+  "version": "1.0.1",
  "themeScheme": "dark",
  "grayscale": false,
  "colourWeakness": false,
  "recommendColor": false,
-  "themeColor": "#409eff",
+  "themeColor": "#646cff",
  "otherColor": {
    "info": "#2080f0",
    "success": "#52c41a",
@@ -41,11 +41,12 @@
    "visible": true,
    "cache": true,
    "height": 44,
-    "mode": "chrome"
+    "mode": "chrome",
+    "closeTabByMiddleClick": false
  },
  "fixedHeaderAndTab": true,
  "sider": {
-    "inverted": true,
+    "inverted": false,
    "width": 220,
    "collapsedWidth": 64,
    "mixWidth": 90,
--- a/src/theme/preset/default.json
+++ b/src/theme/preset/default.json
@@ -41,7 +41,8 @@
    "visible": true,
    "cache": true,
    "height": 44,
-    "mode": "chrome"
+    "mode": "chrome",
+    "closeTabByMiddleClick": false
  },
  "fixedHeaderAndTab": true,
  "sider": {
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -48,7 +48,8 @@ export const themeSettings: App.Theme.ThemeSetting = {
    collapsedWidth: 64,
    mixWidth: 90,
    mixCollapsedWidth: 64,
-    mixChildMenuWidth: 200
+    mixChildMenuWidth: 200,
+    autoSelectFirstMenu: false
  },
  footer: {
    visible: true,
--- a/src/typings/api/common.d.ts
+++ b/src/typings/api/common.d.ts
@@ -5,46 +5,38 @@
 */
 declare namespace Api {
  namespace Common {
-    /** common params of paginating */
-    interface PaginatingCommonParams {
-      /** current page number */
-      current: number;
-      /** page size */
-      size: number;
-      /** total count */
+    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'> {
+      /** 总条数 */
      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
@@ -0,0 +1,42 @@
+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,19 +1,34 @@
 declare namespace Api {
-  /**
-   * namespace Route
-   *
-   * backend api module: "route"
-   */
  namespace Route {
-    type ElegantConstRoute = import('@elegant-router/types').ElegantConstRoute;
-
-    interface MenuRoute extends ElegantConstRoute {
-      id: string;
+    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;
    }

-    interface UserRoute {
-      routes: MenuRoute[];
-      home: import('@elegant-router/types').LastLevelRouteKey;
+    interface RouteListDTO extends Common.PaginationDTO {
+      list: RouteDTO[];
    }
  }
 }
--- a/src/typings/api/union.d.ts
+++ b/src/typings/api/union.d.ts
@@ -0,0 +1,31 @@
+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
@@ -4,6 +4,9 @@ declare namespace App {
  namespace Theme {
    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;

+    /** NaiveUI theme overrides that can be specified in preset */
+    type NaiveUIThemeOverride = import('naive-ui').GlobalThemeOverrides;
+
    /** Theme setting */
    interface ThemeSetting {
      /** Theme scheme */
@@ -93,6 +96,8 @@ declare namespace App {
        mixCollapsedWidth: number;
        /** Child menu width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or 'top-hybrid-header-first' */
        mixChildMenuWidth: number;
+        /** Whether to auto select the first submenu */
+        autoSelectFirstMenu: boolean;
      };
      /** Footer */
      footer: {
@@ -183,9 +188,9 @@ declare namespace App {
    type VNode = import('vue').VNode;
    type RouteLocationNormalizedLoaded = import('vue-router').RouteLocationNormalizedLoaded;
    type RouteKey = import('@elegant-router/types').RouteKey;
-    type RouteMap = import('@elegant-router/types').RouteMap;
+    type RoutePathMap = import('@elegant-router/types').RoutePathMap;
    type RoutePath = import('@elegant-router/types').RoutePath;
-    type LastLevelRouteKey = import('@elegant-router/types').LastLevelRouteKey;
+    type RouteFileKey = import('@elegant-router/types').RouteFileKey;

    /** The router push options */
    type RouterPushOptions = {
@@ -203,83 +208,31 @@ declare namespace App {
      showMenu?: boolean;
    }

+    type MenuType = 'page' | 'directory' | 'menu' | 'iframe' | 'link' | 'button' | 'other';
+
    /** The global menu */
-    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;
-    };
+    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;
+    }

    /** Form rule */
    type FormRule = import('naive-ui').FormItemRule;

    /** The global dropdown key */
-    type DropdownKey = 'closeCurrent' | 'closeOther' | 'closeLeft' | 'closeRight' | 'closeAll';
+    type DropdownKey = 'closeCurrent' | 'closeOther' | 'closeLeft' | 'closeRight' | 'closeAll' | 'pin' | 'unpin';
  }

  /**
@@ -426,6 +379,8 @@ declare namespace App {
            mixWidth: string;
            mixCollapsedWidth: string;
            mixChildMenuWidth: string;
+            autoSelectFirstMenu: string;
+            autoSelectFirstMenuTip: string;
          };
          footer: {
            title: string;
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -1,240 +1,100 @@
 /* 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 ElegantConstRoute = import('@elegant-router/vue').ElegantConstRoute;
+  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>;

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

  /**
-   * route map
+   * route path map
   */
-  export type RouteMap = {
-    "root": "/";
-    "not-found": "/:pathMatch(.*)*";
+  export type RoutePathMap = {
+    "Root": "/";
+    "NotFound": "/:pathMatch(.*)*";
    "403": "/403";
    "404": "/404";
    "500": "/500";
-    "home": "/home";
-    "iframe-page": "/iframe-page/:url";
-    "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
+    "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";
  };

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

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

  /**
-   * custom route key
+   * root route key
   */
-  export type CustomRouteKey = Extract<
-    RouteKey,
-    | "root"
-    | "not-found"
-  >;
+  export type RootRouteKey = 'Root';

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

  /**
-   * the first level route key, which contain the layout of the route
+   * builtin route key
   */
-  export type FirstLevelRouteKey = Extract<
-    RouteKey,
-    | "403"
-    | "404"
-    | "500"
-    | "home"
-    | "iframe-page"
-    | "login"
-  >;
+  export type BuiltinRouteKey = RootRouteKey | NotFoundRouteKey;

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

  /**
-   * the last level route key, which has the page file
+   * the route file key, which has it's own file
   */
-  export type LastLevelRouteKey = Extract<
-    RouteKey,
-    | "403"
-    | "404"
-    | "500"
-    | "iframe-page"
-    | "login"
-    | "home"
-  >;
+  export type RouteFileKey = Exclude<RouteKey, BuiltinRouteKey | ReuseRouteKey>;

  /**
-   * the custom last level route key
+   * mapped name and path
   */
-  export type CustomLastLevelRouteKey = Extract<
-    CustomRouteKey,
-    | "root"
-    | "not-found"
-  >;
+  type MappedNamePath = {
+    [K in RouteKey]: { name: K; path: RoutePathMap[K] };
+  }[RouteKey];

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

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

  /**
-   * 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
+   * auto router route
   */
-  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;
+  export type AutoRouterRoute = AutoRouterSingleView | AutoRouterRedirect;
 }
--- a/src/typings/router.d.ts
+++ b/src/typings/router.d.ts
@@ -1,7 +1,7 @@
-import 'vue-router';
+export {};

 declare module 'vue-router' {
-  interface RouteMeta {
+  export interface RouteMeta {
    /**
     * Title of the route
     *
--- a/src/typings/typed-router.d.ts
+++ b/src/typings/typed-router.d.ts
@@ -0,0 +1,40 @@
+/* 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/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
--- 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/(builtin)/wip/index.vue
+++ b/src/views/(builtin)/wip/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <LookForward />
+</template>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -15,7 +15,7 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));

 <template>
  <NSpace vertical :size="16">
-    <NAlert :title="$t('common.warning')" type="warning">
+    <NAlert :title="$t('common.tip')" type="warning">
      {{ $t('page.home.branchDesc') }}
    </NAlert>
    <HeaderBanner />
--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>ManageMenu</div>
+</template>
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>ManageRole</div>
+</template>
--- a/src/views/manage/route/index.vue
+++ b/src/views/manage/route/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>ManageRoute</div>
+</template>
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>ManageUser</div>
+</template>
Author	SHA1	Message	Date
Soybean	5511eb944c	refactor(projects): use new elegant-router plugin	2025-12-23 11:48:11 +08:00
Soybean	5e40b85018	chore(projects): release v2.0.2	2025-12-23 11:19:18 +08:00
Soybean	ec9f9af9a2	chore(deps): update deps	2025-12-22 23:17:03 +08:00
Azir-11	62a43c3957	fix(projects): fix the incorrect judgment of home by pin tab.	2025-12-04 16:45:11 +08:00
Azir-11	64226d9bb8	fix(hooks): update pagination pageSize after data fetch.	2025-12-04 15:50:34 +08:00
Soybean	e675474b43	chore(projects): release v2.0.1	2025-12-04 14:07:46 +08:00
Soybean	098cd50e23	chore(styles): format code	2025-12-04 14:07:03 +08:00
Soybean	7cf4083b22	chore(deps): update deps	2025-12-04 14:06:44 +08:00
paynezhuang	9401925f41	feat(projects): hybrid layout mode auto select first deepest child menu	2025-12-04 14:01:07 +08:00
hooke	b8a767d704	feat(projects): support pinning and unpinning of tabs	2025-12-04 13:59:01 +08:00
Azir-11	605173a1cc	feat(projects): support theme perset to override component library presets.	2025-12-02 20:13:51 +08:00
Azir-11	73e9a0fe0b	chore(other): remove Prettier's recommendation.	2025-12-02 20:13:51 +08:00
Azir-11	c6d97dba21	optimize(projects): simplify some theme preset configurations.	2025-11-29 21:47:39 +08:00
Azir-11	9da847fb6f	feat(projects): support theme presets to only set partial content.	2025-11-29 21:47:39 +08:00
Azir-11	c472a94395	docs(projects): add link to ecosystem document.	2025-11-24 20:29:56 +08:00
Azir-11	91a261c1ef	style(projects): modify homepage prompt title to tip.	2025-11-24 19:41:43 +08:00
Soybean	bb232bf884	fix(docs): update project name in ecosystem section of README	2025-11-17 12:18:17 +08:00
Soybean	f8dc639e05	chore(deps): update deps	2025-11-16 08:55:51 +08:00
Soybean	46081c365c	feat(docs): update QQ group image in README	2025-11-12 22:14:16 +08:00
刘璐	4a9cf6c3da	fix(types): add missing property in theme presets	2025-11-08 20:18:08 +08:00