chore(release): release tauri v1.3.15

2025-10-14 05:43:41 +08:00 · 2025-06-24 22:41:02 +08:00
214 changed files with 13348 additions and 20166 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,28 +4,15 @@
    "source.organizeImports": "never"
  },
  "editor.formatOnSave": false,
-  "eslint.validate": [
-    "html",
-    "css",
-    "scss",
-    "json",
-    "jsonc",
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue"
-  ],
+  "eslint.validate": ["html", "css", "scss", "json", "jsonc"],
  "i18n-ally.displayLanguage": "zh-cn",
  "i18n-ally.enabledParsers": ["ts"],
  "i18n-ally.enabledFrameworks": ["vue"],
  "i18n-ally.editor.preferEditor": true,
  "i18n-ally.keystyle": "nested",
  "i18n-ally.localesPaths": ["src/locales/langs"],
-  "i18n-ally.parsers.typescript.compilerOptions": {
-    "moduleResolution": "node"
-  },
  "prettier.enable": false,
  "typescript.tsdk": "node_modules/typescript/lib",
-  "unocss.root": ["./"]
+  "unocss.root": ["./"],
+  "vue.server.hybridMode": true
 }
--- a/README.en_US.md
+++ b/README.en_US.md
@@ -7,10 +7,11 @@
 ---

 [![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
-[![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)
+[![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)
 [![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")

 <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>

@@ -26,12 +27,12 @@

 ## Introduction

-[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful 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.
+[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite6, 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.


 ## Features

- **Cutting-edge technology application**: using the latest popular technology stack such as Vue3, Vite7, TypeScript, Pinia and UnoCSS.
+- **Cutting-edge technology application**: using the latest popular technology stack such as Vue3, Vite6, TypeScript, Pinia and UnoCSS.
 - **Clear project architecture**: using pnpm monorepo architecture, clear structure, elegant and easy to understand.
 - **Strict code specifications**: follow the [SoybeanJS specification](https://docs.soybeanjs.cn/standard), integrate eslint, prettier and simple-git-hooks to ensure the code is standardized.
 - **TypeScript**: support strict type checking to improve code maintainability.
@@ -98,8 +99,8 @@
 Make sure your environment meets the following requirements:

 - **git**: you need git to clone and manage project versions.
- **NodeJS**: >=20.19.0, recommended 20.19.0 or higher.
- **pnpm**: >= 10.5.0, recommended 10.5.0 or higher.
+- **NodeJS**: >=18.12.0, recommended 18.19.0 or higher.
+- **pnpm**: >= 8.7.0, recommended 8.14.0 or higher.

 **Clone Project**

--- a/README.md
+++ b/README.md
@@ -7,10 +7,11 @@
 ---

 [![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
-[![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)
+[![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)
 [![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")

 <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>

@@ -25,11 +26,11 @@

 ## 简介

-[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`SoybeanAdmin` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。
+[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite6, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`SoybeanAdmin` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。

 ## 特性

- **前沿技术应用**：采用 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
+- **前沿技术应用**：采用 Vue3, Vite6, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
 - **清晰的项目架构**：采用 pnpm monorepo 架构，结构清晰，优雅易懂。
 - **严格的代码规范**：遵循 [SoybeanJS 规范](https://docs.soybeanjs.cn/zh/standard)，集成了eslint, prettier 和 simple-git-hooks，保证代码的规范性。
 - **TypeScript**： 支持严格的类型检查，提高代码的可维护性。
@@ -123,8 +124,8 @@
 确保你的环境满足以下要求：

 - **git**: 你需要git来克隆和管理项目版本。
- **NodeJS**: >=20.19.0，推荐 20.19.0 或更高。
- **pnpm**: >= 10.5.0，推荐 10.5.0 或更高。
+- **NodeJS**: >=18.12.0，推荐 18.19.0 或更高。
+- **pnpm**: >= 8.7.0，推荐 8.14.0 或更高。

 **克隆项目**

--- a/build/config/proxy.ts
+++ b/build/config/proxy.ts
@@ -1,4 +1,4 @@
-import type { ProxyOptions } from 'vite';
+import type { HttpProxy, ProxyOptions } from 'vite';
 import { bgRed, bgYellow, green, lightBlue } from 'kolorist';
 import { consola } from 'consola';
 import { createServiceConfig } from '../../src/utils/service';
@@ -33,7 +33,7 @@ function createProxyItem(item: App.Service.ServiceConfigItem, enableLog: boolean
  proxy[item.proxyPattern] = {
    target: item.baseURL,
    changeOrigin: true,
-    configure: (_proxy, options) => {
+    configure: (_proxy: HttpProxy.Server, options: ProxyOptions) => {
      _proxy.on('proxyReq', (_proxyReq, req, _res) => {
        if (!enableLog) return;

--- a/build/plugins/router.ts
+++ b/build/plugins/router.ts
@@ -8,23 +8,6 @@ export function setupElegantRouter() {
      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;

--- a/build/plugins/unplugin.ts
+++ b/build/plugins/unplugin.ts
@@ -6,7 +6,6 @@ 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) {
@@ -33,7 +32,6 @@ export function setupUnplugin(viteEnv: Env.ImportMeta) {
      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
      resolvers: [
        NaiveUiResolver(),
-        ProNaiveUIResolver(),
        IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFIX })
      ]
    }),
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from '@soybeanjs/eslint-config';

 export default defineConfig(
-  { vue: true, unocss: true },
+  { vue: true, unocss: true, ignores: ['src-tauri/target'] },
  {
    rules: {
      'vue/multi-word-component-names': [
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "soybean-admin",
  "type": "module",
  "version": "1.3.15",
-  "description": "A fresh and elegant admin template, based on Vue3、Vite7、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite7、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
+  "description": "A fresh and elegant admin template, based on Vue3、Vite6、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite6、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
    "email": "soybeanjs@outlook.com",
@@ -19,7 +19,7 @@
  "keywords": [
    "Vue3 admin ",
    "vue-admin-template",
-    "Vite7",
+    "Vite6",
    "TypeScript",
    "naive-ui",
    "naive-ui-admin",
@@ -27,107 +27,85 @@
    "UnoCSS"
  ],
  "engines": {
-    "node": ">=20.19.0",
-    "pnpm": ">=10.5.0"
+    "node": ">=18.20.0",
+    "pnpm": ">=8.7.0"
  },
  "scripts": {
    "build": "vite build --mode prod",
+    "build:tauri": "pnpm tauri build",
    "build:test": "vite build --mode test",
    "cleanup": "sa cleanup",
    "commit": "sa git-commit",
    "commit:zh": "sa git-commit -l=zh-cn",
    "dev": "vite --mode test",
    "dev:prod": "vite --mode prod",
+    "dev:tauri": "pnpm tauri dev",
    "gen-route": "sa gen-route",
    "lint": "eslint . --fix",
    "prepare": "simple-git-hooks",
    "preview": "vite preview",
    "release": "sa release",
+    "tauri-icon": "pnpm tauri icon ./public/logo.png",
    "typecheck": "vue-tsc --noEmit --skipLibCheck",
    "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",
+    "@tauri-apps/api": "2.5.0",
+    "@vueuse/core": "13.4.0",
    "clipboard": "2.0.11",
-    "dayjs": "1.11.18",
+    "dayjs": "1.11.13",
    "defu": "6.1.4",
-    "dhtmlx-gantt": "9.0.14",
-    "dompurify": "3.2.6",
-    "echarts": "6.0.0",
-    "jsbarcode": "3.12.1",
+    "echarts": "5.6.0",
    "json5": "2.2.3",
-    "naive-ui": "2.43.1",
+    "naive-ui": "2.42.0",
    "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",
-    "typeit": "8.8.7",
-    "vditor": "3.11.2",
-    "vue": "3.5.21",
+    "vue": "3.5.17",
    "vue-draggable-plus": "0.6.0",
-    "vue-i18n": "11.1.12",
-    "vue-pdf-embed": "2.1.3",
-    "vue-router": "4.5.1",
-    "wangeditor": "4.7.15",
-    "xgplayer": "3.0.23",
-    "xlsx": "0.18.5"
+    "vue-i18n": "11.1.7",
+    "vue-router": "4.5.1"
  },
  "devDependencies": {
-    "@amap/amap-jsapi-types": "0.0.15",
    "@elegant-router/vue": "0.3.8",
-    "@iconify/json": "2.2.385",
+    "@iconify/json": "2.2.352",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.7.1",
-    "@types/bmapgl": "0.0.7",
-    "@types/node": "24.5.1",
+    "@soybeanjs/eslint-config": "1.6.1",
+    "@tauri-apps/cli": "2.5.0",
+    "@types/node": "24.0.3",
    "@types/nprogress": "0.2.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",
+    "@unocss/eslint-config": "66.2.3",
+    "@unocss/preset-icons": "66.2.3",
+    "@unocss/preset-uno": "66.2.3",
+    "@unocss/transformer-directives": "66.2.3",
+    "@unocss/transformer-variant-group": "66.2.3",
+    "@unocss/vite": "66.2.3",
+    "@vitejs/plugin-vue": "6.0.0",
+    "@vitejs/plugin-vue-jsx": "5.0.0",
    "consola": "3.4.2",
-    "eslint": "9.35.0",
-    "eslint-plugin-vue": "10.4.0",
+    "eslint": "9.29.0",
+    "eslint-plugin-vue": "10.2.0",
    "kolorist": "1.8.0",
-    "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.5",
-    "typescript": "5.9.2",
-    "unplugin-icons": "22.3.0",
-    "unplugin-vue-components": "29.0.0",
-    "vite": "7.1.5",
+    "sass": "1.89.2",
+    "simple-git-hooks": "2.13.0",
+    "tsx": "4.20.3",
+    "typescript": "5.8.3",
+    "unplugin-icons": "22.1.0",
+    "unplugin-vue-components": "28.7.0",
+    "vite": "7.0.0",
    "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.0.7"
+    "vite-plugin-vue-devtools": "7.7.7",
+    "vue-eslint-parser": "10.1.4",
+    "vue-tsc": "2.2.10"
  },
  "simple-git-hooks": {
    "commit-msg": "pnpm sa git-commit-verify",
--- a/packages/alova/package.json
+++ b/packages/alova/package.json
@@ -15,6 +15,6 @@
  "dependencies": {
    "@alova/mock": "2.0.17",
    "@sa/utils": "workspace:*",
-    "alova": "3.3.4"
+    "alova": "3.3.3"
  }
 }
--- a/packages/axios/package.json
+++ b/packages/axios/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@sa/utils": "workspace:*",
-    "axios": "1.12.2",
+    "axios": "1.10.0",
    "axios-retry": "4.5.0",
    "qs": "6.14.0"
  },
--- a/packages/axios/src/index.ts
+++ b/packages/axios/src/index.ts
@@ -3,7 +3,6 @@ import type { AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } f
 import axiosRetry from 'axios-retry';
 import { nanoid } from '@sa/utils';
 import { createAxiosConfig, createDefaultOptions, createRetryOptions } from './options';
-import { transformResponse } from './shared';
 import { BACKEND_ERROR_CODE, REQUEST_ID_KEY } from './constant';
 import type {
  CustomAxiosRequestConfig,
@@ -14,12 +13,11 @@ import type {
  ResponseType
 } from './type';

-function createCommonRequest<
-  ResponseData,
-  ApiData = ResponseData,
-  State extends Record<string, unknown> = Record<string, unknown>
->(axiosConfig?: CreateAxiosDefaults, options?: Partial<RequestOption<ResponseData, ApiData, State>>) {
-  const opts = createDefaultOptions<ResponseData, ApiData, State>(options);
+function createCommonRequest<ResponseData = any>(
+  axiosConfig?: CreateAxiosDefaults,
+  options?: Partial<RequestOption<ResponseData>>
+) {
+  const opts = createDefaultOptions<ResponseData>(options);

  const axiosConf = createAxiosConfig(axiosConfig);
  const instance = axios.create(axiosConf);
@@ -54,8 +52,6 @@ function createCommonRequest<
    async response => {
      const responseType: ResponseType = (response.config?.responseType as ResponseType) || 'json';

-      await transformResponse(response);
-
      if (responseType !== 'json' || opts.isBackendSuccess(response)) {
        return Promise.resolve(response);
      }
@@ -84,6 +80,14 @@ function createCommonRequest<
    }
  );

+  function cancelRequest(requestId: string) {
+    const abortController = abortControllerMap.get(requestId);
+    if (abortController) {
+      abortController.abort();
+      abortControllerMap.delete(requestId);
+    }
+  }
+
  function cancelAllRequest() {
    abortControllerMap.forEach(abortController => {
      abortController.abort();
@@ -94,6 +98,7 @@ function createCommonRequest<
  return {
    instance,
    opts,
+    cancelRequest,
    cancelAllRequest
  };
 }
@@ -104,27 +109,27 @@ function createCommonRequest<
 * @param axiosConfig axios config
 * @param options request options
 */
-export function createRequest<ResponseData, ApiData, State extends Record<string, unknown>>(
+export function createRequest<ResponseData = any, State = Record<string, unknown>>(
  axiosConfig?: CreateAxiosDefaults,
-  options?: Partial<RequestOption<ResponseData, ApiData, State>>
+  options?: Partial<RequestOption<ResponseData>>
 ) {
-  const { instance, opts, cancelAllRequest } = createCommonRequest<ResponseData, ApiData, State>(axiosConfig, options);
+  const { instance, opts, cancelRequest, cancelAllRequest } = createCommonRequest<ResponseData>(axiosConfig, options);

-  const request: RequestInstance<ApiData, State> = async function request<
-    T extends ApiData = ApiData,
-    R extends ResponseType = 'json'
-  >(config: CustomAxiosRequestConfig) {
+  const request: RequestInstance<State> = async function request<T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig
+  ) {
    const response: AxiosResponse<ResponseData> = await instance(config);

    const responseType = response.config?.responseType || 'json';

    if (responseType === 'json') {
-      return opts.transform(response);
+      return opts.transformBackendResponse(response);
    }

    return response.data as MappedType<R, T>;
-  } as RequestInstance<ApiData, State>;
+  } as RequestInstance<State>;

+  request.cancelRequest = cancelRequest;
  request.cancelAllRequest = cancelAllRequest;
  request.state = {} as State;

@@ -139,14 +144,14 @@ export function createRequest<ResponseData, ApiData, State extends Record<string
 * @param axiosConfig axios config
 * @param options request options
 */
-export function createFlatRequest<ResponseData, ApiData, State extends Record<string, unknown>>(
+export function createFlatRequest<ResponseData = any, State = Record<string, unknown>>(
  axiosConfig?: CreateAxiosDefaults,
-  options?: Partial<RequestOption<ResponseData, ApiData, State>>
+  options?: Partial<RequestOption<ResponseData>>
 ) {
-  const { instance, opts, cancelAllRequest } = createCommonRequest<ResponseData, ApiData, State>(axiosConfig, options);
+  const { instance, opts, cancelRequest, cancelAllRequest } = createCommonRequest<ResponseData>(axiosConfig, options);

-  const flatRequest: FlatRequestInstance<ResponseData, ApiData, State> = async function flatRequest<
-    T extends ApiData = ApiData,
+  const flatRequest: FlatRequestInstance<State, ResponseData> = async function flatRequest<
+    T = any,
    R extends ResponseType = 'json'
  >(config: CustomAxiosRequestConfig) {
    try {
@@ -155,21 +160,20 @@ export function createFlatRequest<ResponseData, ApiData, State extends Record<st
      const responseType = response.config?.responseType || 'json';

      if (responseType === 'json') {
-        const data = await opts.transform(response);
+        const data = opts.transformBackendResponse(response);

        return { data, error: null, response };
      }

-      return { data: response.data as MappedType<R, T>, error: null, response };
+      return { data: response.data as MappedType<R, T>, error: null };
    } catch (error) {
      return { data: null, error, response: (error as AxiosError<ResponseData>).response };
    }
-  } as FlatRequestInstance<ResponseData, ApiData, State>;
+  } as FlatRequestInstance<State, ResponseData>;

+  flatRequest.cancelRequest = cancelRequest;
  flatRequest.cancelAllRequest = cancelAllRequest;
-  flatRequest.state = {
-    ...opts.defaultState
-  } as State;
+  flatRequest.state = {} as State;

  return flatRequest;
 }
--- a/packages/axios/src/options.ts
+++ b/packages/axios/src/options.ts
@@ -4,27 +4,15 @@ import { stringify } from 'qs';
 import { isHttpSuccess } from './shared';
 import type { RequestOption } from './type';

-export function createDefaultOptions<
-  ResponseData,
-  ApiData = ResponseData,
-  State extends Record<string, unknown> = Record<string, unknown>
->(options?: Partial<RequestOption<ResponseData, ApiData, State>>) {
-  const opts: RequestOption<ResponseData, ApiData, State> = {
-    defaultState: {} as State,
-    transform: async response => response.data as unknown as ApiData,
-    transformBackendResponse: async response => response.data as unknown as ApiData,
+export function createDefaultOptions<ResponseData = any>(options?: Partial<RequestOption<ResponseData>>) {
+  const opts: RequestOption<ResponseData> = {
    onRequest: async config => config,
    isBackendSuccess: _response => true,
    onBackendFail: async () => {},
+    transformBackendResponse: async response => response.data,
    onError: async () => {}
  };

-  if (options?.transform) {
-    opts.transform = options.transform;
-  } else {
-    opts.transform = options?.transformBackendResponse || opts.transform;
-  }
-
  Object.assign(opts, options);

  return opts;
--- a/packages/axios/src/shared.ts
+++ b/packages/axios/src/shared.ts
@@ -1,5 +1,4 @@
 import type { AxiosHeaderValue, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
-import type { ResponseType } from './type';

 export function getContentType(config: InternalAxiosRequestConfig) {
  const contentType: AxiosHeaderValue = config.headers?.['Content-Type'] || 'application/json';
@@ -27,53 +26,3 @@ export function isResponseJson(response: AxiosResponse) {

  return responseType === 'json' || responseType === undefined;
 }
-
-export async function transformResponse(response: AxiosResponse) {
-  const responseType: ResponseType = (response.config?.responseType as ResponseType) || 'json';
-  if (responseType === 'json') return;
-
-  const isJson = response.headers['content-type']?.includes('application/json');
-  if (!isJson) return;
-
-  if (responseType === 'blob') {
-    await transformBlobToJson(response);
-  }
-
-  if (responseType === 'arrayBuffer') {
-    await transformArrayBufferToJson(response);
-  }
-}
-
-export async function transformBlobToJson(response: AxiosResponse) {
-  try {
-    let data = response.data;
-
-    if (typeof data === 'string') {
-      data = JSON.parse(data);
-    }
-
-    if (Object.prototype.toString.call(data) === '[object Blob]') {
-      const json = await data.text();
-      data = JSON.parse(json);
-    }
-
-    response.data = data;
-  } catch {}
-}
-
-export async function transformArrayBufferToJson(response: AxiosResponse) {
-  try {
-    let data = response.data;
-
-    if (typeof data === 'string') {
-      data = JSON.parse(data);
-    }
-
-    if (Object.prototype.toString.call(data) === '[object ArrayBuffer]') {
-      const json = new TextDecoder().decode(data);
-      data = JSON.parse(json);
-    }
-
-    response.data = data;
-  } catch {}
-}
--- a/packages/axios/src/type.ts
+++ b/packages/axios/src/type.ts
@@ -8,30 +8,7 @@ export type ContentType =
  | 'application/x-www-form-urlencoded'
  | 'application/octet-stream';

-export type ResponseTransform<Input = any, Output = any> = (input: Input) => Output | Promise<Output>;
-
-export interface RequestOption<
-  ResponseData,
-  ApiData = ResponseData,
-  State extends Record<string, unknown> = Record<string, unknown>
-> {
-  /**
-   * The default state
-   */
-  defaultState?: State;
-  /**
-   * transform the response data to the api data
-   *
-   * @param response Axios response
-   */
-  transform: ResponseTransform<AxiosResponse<ResponseData>, ApiData>;
-  /**
-   * transform the response data to the api data
-   *
-   * @deprecated use `transform` instead, will be removed in the next major version v3
-   * @param response Axios response
-   */
-  transformBackendResponse: ResponseTransform<AxiosResponse<ResponseData>, ApiData>;
+export interface RequestOption<ResponseData = any> {
  /**
   * The hook before request
   *
@@ -58,6 +35,12 @@ export interface RequestOption<
    response: AxiosResponse<ResponseData>,
    instance: AxiosInstance
  ) => Promise<AxiosResponse | null> | Promise<void>;
+  /**
+   * transform backend response when the responseType is json
+   *
+   * @param response Axios response
+   */
+  transformBackendResponse(response: AxiosResponse<ResponseData>): any | Promise<any>;
  /**
   * The hook to handle error
   *
@@ -85,7 +68,15 @@ export type CustomAxiosRequestConfig<R extends ResponseType = 'json'> = Omit<Axi
  responseType?: R;
 };

-export interface RequestInstanceCommon<State extends Record<string, unknown>> {
+export interface RequestInstanceCommon<T> {
+  /**
+   * cancel the request by request id
+   *
+   * if the request provide abort controller sign from config, it will not collect in the abort controller map
+   *
+   * @param requestId
+   */
+  cancelRequest: (requestId: string) => void;
  /**
   * cancel all request
   *
@@ -93,35 +84,32 @@ export interface RequestInstanceCommon<State extends Record<string, unknown>> {
   */
  cancelAllRequest: () => void;
  /** you can set custom state in the request instance */
-  state: State;
+  state: T;
 }

 /** The request instance */
-export interface RequestInstance<ApiData, State extends Record<string, unknown>> extends RequestInstanceCommon<State> {
-  <T extends ApiData = ApiData, R extends ResponseType = 'json'>(
-    config: CustomAxiosRequestConfig<R>
-  ): Promise<MappedType<R, T>>;
+export interface RequestInstance<S = Record<string, unknown>> extends RequestInstanceCommon<S> {
+  <T = any, R extends ResponseType = 'json'>(config: CustomAxiosRequestConfig<R>): Promise<MappedType<R, T>>;
 }

-export type FlatResponseSuccessData<ResponseData, ApiData> = {
-  data: ApiData;
+export type FlatResponseSuccessData<T = any, ResponseData = any> = {
+  data: T;
  error: null;
  response: AxiosResponse<ResponseData>;
 };

-export type FlatResponseFailData<ResponseData> = {
+export type FlatResponseFailData<ResponseData = any> = {
  data: null;
  error: AxiosError<ResponseData>;
  response: AxiosResponse<ResponseData>;
 };

-export type FlatResponseData<ResponseData, ApiData> =
-  | FlatResponseSuccessData<ResponseData, ApiData>
+export type FlatResponseData<T = any, ResponseData = any> =
+  | FlatResponseSuccessData<T, ResponseData>
  | FlatResponseFailData<ResponseData>;

-export interface FlatRequestInstance<ResponseData, ApiData, State extends Record<string, unknown>>
-  extends RequestInstanceCommon<State> {
-  <T extends ApiData = ApiData, R extends ResponseType = 'json'>(
+export interface FlatRequestInstance<S = Record<string, unknown>, ResponseData = any> extends RequestInstanceCommon<S> {
+  <T = any, R extends ResponseType = 'json'>(
    config: CustomAxiosRequestConfig<R>
-  ): Promise<FlatResponseData<ResponseData, MappedType<R, T>>>;
+  ): Promise<FlatResponseData<MappedType<R, T>, ResponseData>>;
 }
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -3,7 +3,9 @@ import useLoading from './use-loading';
 import useCountDown from './use-count-down';
 import useContext from './use-context';
 import useSvgIconRender from './use-svg-icon-render';
-import useTable from './use-table';
+import useHookTable from './use-table';

-export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useTable };
-export type * from './use-table';
+export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useHookTable };
+
+export * from './use-signal';
+export * from './use-table';
--- a/packages/hooks/src/use-context.ts
+++ b/packages/hooks/src/use-context.ts
@@ -1,4 +1,5 @@
 import { inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';

 /**
 * Use context
@@ -11,7 +12,7 @@ import { inject, provide } from 'vue';
 *   import { ref } from 'vue';
 *   import { useContext } from '@sa/hooks';
 *
- *   export const [provideDemoContext, useDemoContext] = useContext('demo', () => {
+ *   export const { setupStore, useStore } = useContext('demo', () => {
 *     const count = ref(0);
 *
 *     function increment() {
@@ -34,10 +35,10 @@ import { inject, provide } from 'vue';
 *     <div>A</div>
 *   </template>
 *   <script setup lang="ts">
- *   import { provideDemoContext } from './context';
+ *   import { setupStore } from './context';
 *
- *   provideDemoContext();
- *   // const { increment } = provideDemoContext(); // also can control the store in the parent component
+ *   setupStore();
+ *   // const { increment } = setupStore(); // also can control the store in the parent component
 *   </script>
 *   ``` // B.vue
 *   ```vue
@@ -45,9 +46,9 @@ import { inject, provide } from 'vue';
 *    <div>B</div>
 *   </template>
 *   <script setup lang="ts">
- *   import { useDemoContext } from './context';
+ *   import { useStore } from './context';
 *
- *   const { count, increment } = useDemoContext();
+ *   const { count, increment } = useStore();
 *   </script>
 *   ```;
 *
@@ -56,41 +57,40 @@ import { inject, provide } from 'vue';
 * @param contextName Context name
 * @param fn Context function
 */
-export default function useContext<Arguments extends Array<any>, T>(
-  contextName: string,
-  composable: (...args: Arguments) => T
-) {
-  const key = Symbol(contextName);
+export default function useContext<T extends (...args: any[]) => any>(contextName: string, fn: T) {
+  type Context = ReturnType<T>;

-  /**
-   * Injects the context value.
-   *
-   * @param consumerName - The name of the component that is consuming the context. If provided, the component must be
-   *   used within the context provider.
-   * @param defaultValue - The default value to return if the context is not provided.
-   * @returns The context value.
-   */
-  const useInject = <N extends string | null | undefined = undefined>(
-    consumerName?: N,
-    defaultValue?: T
-  ): N extends null | undefined ? T | null : T => {
-    const value = inject(key, defaultValue);
+  const { useProvide, useInject: useStore } = createContext<Context>(contextName);

-    if (consumerName && !value) {
-      throw new Error(`\`${consumerName}\` must be used within \`${contextName}\``);
-    }
+  function setupStore(...args: Parameters<T>) {
+    const context: Context = fn(...args);
+    return useProvide(context);
+  }

-    // @ts-expect-error - we want to return null if the value is undefined or null
-    return value || null;
+  return {
+    /** Setup store in the parent component */
+    setupStore,
+    /** Use store in the child component */
+    useStore
+  };
+}
+
+/** Create context */
+function createContext<T>(contextName: string) {
+  const injectKey: InjectionKey<T> = Symbol(contextName);
+
+  function useProvide(context: T) {
+    provide(injectKey, context);
+
+    return context;
+  }
+
+  function useInject() {
+    return inject(injectKey) as T;
+  }
+
+  return {
+    useProvide,
+    useInject
  };
-
-  const useProvide = (...args: Arguments) => {
-    const value = composable(...args);
-
-    provide(key, value);
-
-    return value;
-  };
-
-  return [useProvide, useInject] as const;
 }
--- a/packages/hooks/src/use-request.ts
+++ b/packages/hooks/src/use-request.ts
@@ -6,31 +6,31 @@ import type {
  CreateAxiosDefaults,
  CustomAxiosRequestConfig,
  MappedType,
-  RequestInstanceCommon,
  RequestOption,
  ResponseType
 } from '@sa/axios';
 import useLoading from './use-loading';

-export type HookRequestInstanceResponseSuccessData<ApiData> = {
-  data: Ref<ApiData>;
+export type HookRequestInstanceResponseSuccessData<T = any> = {
+  data: Ref<T>;
  error: Ref<null>;
 };

-export type HookRequestInstanceResponseFailData<ResponseData> = {
+export type HookRequestInstanceResponseFailData<ResponseData = any> = {
  data: Ref<null>;
  error: Ref<AxiosError<ResponseData>>;
 };

-export type HookRequestInstanceResponseData<ResponseData, ApiData> = {
+export type HookRequestInstanceResponseData<T = any, ResponseData = any> = {
  loading: Ref<boolean>;
-} & (HookRequestInstanceResponseSuccessData<ApiData> | HookRequestInstanceResponseFailData<ResponseData>);
+} & (HookRequestInstanceResponseSuccessData<T> | HookRequestInstanceResponseFailData<ResponseData>);

-export interface HookRequestInstance<ResponseData, ApiData, State extends Record<string, unknown>>
-  extends RequestInstanceCommon<State> {
-  <T extends ApiData = ApiData, R extends ResponseType = 'json'>(
+export interface HookRequestInstance<ResponseData = any> {
+  <T = any, R extends ResponseType = 'json'>(
    config: CustomAxiosRequestConfig
-  ): HookRequestInstanceResponseData<ResponseData, MappedType<R, T>>;
+  ): HookRequestInstanceResponseData<MappedType<R, T>, ResponseData>;
+  cancelRequest: (requestId: string) => void;
+  cancelAllRequest: () => void;
 }

 /**
@@ -39,26 +39,25 @@ export interface HookRequestInstance<ResponseData, ApiData, State extends Record
 * @param axiosConfig
 * @param options
 */
-export default function createHookRequest<ResponseData, ApiData, State extends Record<string, unknown>>(
+export default function createHookRequest<ResponseData = any>(
  axiosConfig?: CreateAxiosDefaults,
-  options?: Partial<RequestOption<ResponseData, ApiData, State>>
+  options?: Partial<RequestOption<ResponseData>>
 ) {
-  const request = createFlatRequest<ResponseData, ApiData, State>(axiosConfig, options);
+  const request = createFlatRequest<ResponseData>(axiosConfig, options);

-  const hookRequest: HookRequestInstance<ResponseData, ApiData, State> = function hookRequest<
-    T extends ApiData = ApiData,
-    R extends ResponseType = 'json'
-  >(config: CustomAxiosRequestConfig) {
+  const hookRequest: HookRequestInstance<ResponseData> = function hookRequest<T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig
+  ) {
    const { loading, startLoading, endLoading } = useLoading();

-    const data = ref(null) as Ref<MappedType<R, T>>;
-    const error = ref(null) as Ref<AxiosError<ResponseData> | null>;
+    const data = ref<MappedType<R, T> | null>(null) as Ref<MappedType<R, T>>;
+    const error = ref<AxiosError<ResponseData> | null>(null) as Ref<AxiosError<ResponseData> | null>;

    startLoading();

    request(config).then(res => {
      if (res.data) {
-        data.value = res.data as MappedType<R, T>;
+        data.value = res.data;
      } else {
        error.value = res.error;
      }
@@ -71,8 +70,9 @@ export default function createHookRequest<ResponseData, ApiData, State extends R
      data,
      error
    };
-  } as HookRequestInstance<ResponseData, ApiData, State>;
+  } as HookRequestInstance<ResponseData>;

+  hookRequest.cancelRequest = request.cancelRequest;
  hookRequest.cancelAllRequest = request.cancelAllRequest;

  return hookRequest;
--- a/packages/hooks/src/use-signal.ts
+++ b/packages/hooks/src/use-signal.ts
@@ -0,0 +1,144 @@
+import { computed, ref, shallowRef, triggerRef } from 'vue';
+import type {
+  ComputedGetter,
+  DebuggerOptions,
+  Ref,
+  ShallowRef,
+  WritableComputedOptions,
+  WritableComputedRef
+} from 'vue';
+
+type Updater<T> = (value: T) => T;
+type Mutator<T> = (value: T) => void;
+
+/**
+ * Signal is a reactive value that can be set, updated or mutated
+ *
+ * @example
+ *   ```ts
+ *   const count = useSignal(0);
+ *
+ *   // `watchEffect`
+ *   watchEffect(() => {
+ *   console.log(count());
+ *   });
+ *
+ *   // watch
+ *   watch(count, value => {
+ *   console.log(value);
+ *   });
+ *
+ *   // useComputed
+ *   const double = useComputed(() => count() * 2);
+ *   const writeableDouble = useComputed({
+ *   get: () => count() * 2,
+ *   set: value => count.set(value / 2)
+ *   });
+ *   ```
+ */
+export interface Signal<T> {
+  (): Readonly<T>;
+  /**
+   * Set the value of the signal
+   *
+   * It recommend use `set` for primitive values
+   *
+   * @param value
+   */
+  set(value: T): void;
+  /**
+   * Update the value of the signal using an updater function
+   *
+   * It recommend use `update` for non-primitive values, only the first level of the object will be reactive.
+   *
+   * @param updater
+   */
+  update(updater: Updater<T>): void;
+  /**
+   * Mutate the value of the signal using a mutator function
+   *
+   * this action will call `triggerRef`, so the value will be tracked on `watchEffect`.
+   *
+   * It recommend use `mutate` for non-primitive values, all levels of the object will be reactive.
+   *
+   * @param mutator
+   */
+  mutate(mutator: Mutator<T>): void;
+  /**
+   * Get the reference of the signal
+   *
+   * Sometimes it can be useful to make `v-model` work with the signal
+   *
+   * ```vue
+   * <template>
+   *   <input v-model="model.count" />
+   * </template>;
+   *
+   * <script setup lang="ts">
+   *  const state = useSignal({ count: 0 }, { useRef: true });
+   *
+   *  const model = state.getRef();
+   * </script>
+   * ```
+   */
+  getRef(): Readonly<ShallowRef<Readonly<T>>>;
+}
+
+export interface ReadonlySignal<T> {
+  (): Readonly<T>;
+}
+
+export interface SignalOptions {
+  /**
+   * Whether to use `ref` to store the value
+   *
+   * @default false use `sharedRef` to store the value
+   */
+  useRef?: boolean;
+}
+
+export function useSignal<T>(initialValue: T, options?: SignalOptions): Signal<T> {
+  const { useRef } = options || {};
+
+  const state = useRef ? (ref(initialValue) as Ref<T>) : shallowRef(initialValue);
+
+  return createSignal(state);
+}
+
+export function useComputed<T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ReadonlySignal<T>;
+export function useComputed<T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions): Signal<T>;
+export function useComputed<T>(
+  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
+  debugOptions?: DebuggerOptions
+) {
+  const isGetter = typeof getterOrOptions === 'function';
+
+  const computedValue = computed(getterOrOptions as any, debugOptions);
+
+  if (isGetter) {
+    return () => computedValue.value as ReadonlySignal<T>;
+  }
+
+  return createSignal(computedValue);
+}
+
+function createSignal<T>(state: ShallowRef<T> | WritableComputedRef<T>): Signal<T> {
+  const signal = () => state.value;
+
+  signal.set = (value: T) => {
+    state.value = value;
+  };
+
+  signal.update = (updater: Updater<T>) => {
+    state.value = updater(state.value);
+  };
+
+  signal.mutate = (mutator: Mutator<T>) => {
+    mutator(state.value);
+    triggerRef(state);
+  };
+
+  signal.getRef = () => state as Readonly<ShallowRef<Readonly<T>>>;
+
+  return signal;
+}
--- a/packages/hooks/src/use-table.ts
+++ b/packages/hooks/src/use-table.ts
@@ -1,20 +1,12 @@
-import { computed, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import type { Ref, VNodeChild } from 'vue';
+import { jsonClone } from '@sa/utils';
 import useBoolean from './use-boolean';
 import useLoading from './use-loading';

-export interface PaginationData<T> {
-  data: T[];
-  pageNum: number;
-  pageSize: number;
-  total: number;
-}
+export type MaybePromise<T> = T | Promise<T>;

-type GetApiData<ApiData, Pagination extends boolean> = Pagination extends true ? PaginationData<ApiData> : ApiData[];
-
-type Transform<ResponseData, ApiData, Pagination extends boolean> = (
-  response: ResponseData
-) => GetApiData<ApiData, Pagination>;
+export type ApiFn = (args: any) => Promise<unknown>;

 export type TableColumnCheckTitle = string | ((...args: any) => VNodeChild);

@@ -22,64 +14,76 @@ export type TableColumnCheck = {
  key: string;
  title: TableColumnCheckTitle;
  checked: boolean;
-  visible: boolean;
 };

-export interface UseTableOptions<ResponseData, ApiData, Column, Pagination extends boolean> {
-  /**
-   * api function to get table data
-   */
-  api: () => Promise<ResponseData>;
-  /**
-   * whether to enable pagination
-   */
-  pagination?: Pagination;
-  /**
-   * transform api response to table data
-   */
-  transform: Transform<ResponseData, ApiData, Pagination>;
-  /**
-   * columns factory
-   */
-  columns: () => Column[];
+export type TableDataWithIndex<T> = T & { index: number };
+
+export type TransformedData<T> = {
+  data: TableDataWithIndex<T>[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+};
+
+export type Transformer<T, Response> = (response: Response) => TransformedData<T>;
+
+export type TableConfig<A extends ApiFn, T, C> = {
+  /** api function to get table data */
+  apiFn: A;
+  /** api params */
+  apiParams?: Parameters<A>[0];
+  /** transform api response to table data */
+  transformer: Transformer<T, Awaited<ReturnType<A>>>;
+  /** columns factory */
+  columns: () => C[];
  /**
   * get column checks
+   *
+   * @param columns
   */
-  getColumnChecks: (columns: Column[]) => TableColumnCheck[];
+  getColumnChecks: (columns: C[]) => TableColumnCheck[];
  /**
   * get columns
+   *
+   * @param columns
   */
-  getColumns: (columns: Column[], checks: TableColumnCheck[]) => Column[];
+  getColumns: (columns: C[], checks: TableColumnCheck[]) => C[];
  /**
   * callback when response fetched
+   *
+   * @param transformed transformed data
   */
-  onFetched?: (data: GetApiData<ApiData, Pagination>) => void | Promise<void>;
+  onFetched?: (transformed: TransformedData<T>) => MaybePromise<void>;
  /**
   * whether to get data immediately
   *
   * @default true
   */
  immediate?: boolean;
-}
+};

-export default function useTable<ResponseData, ApiData, Column, Pagination extends boolean>(
-  options: UseTableOptions<ResponseData, ApiData, Column, Pagination>
-) {
+export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {
  const { loading, startLoading, endLoading } = useLoading();
  const { bool: empty, setBool: setEmpty } = useBoolean();

-  const { api, pagination, transform, columns, getColumnChecks, getColumns, onFetched, immediate = true } = options;
+  const { apiFn, apiParams, transformer, immediate = true, getColumnChecks, getColumns } = config;

-  const data = ref([]) as Ref<ApiData[]>;
+  const searchParams: NonNullable<Parameters<A>[0]> = reactive(jsonClone({ ...apiParams }));

-  const columnChecks = ref(getColumnChecks(columns())) as Ref<TableColumnCheck[]>;
+  const allColumns = ref(config.columns()) as Ref<C[]>;

-  const $columns = computed(() => getColumns(columns(), columnChecks.value));
+  const data: Ref<TableDataWithIndex<T>[]> = ref([]);
+
+  const columnChecks: Ref<TableColumnCheck[]> = ref(getColumnChecks(config.columns()));
+
+  const columns = computed(() => getColumns(allColumns.value, columnChecks.value));

  function reloadColumns() {
+    allColumns.value = config.columns();
+
    const checkMap = new Map(columnChecks.value.map(col => [col.key, col.checked]));

-    const defaultChecks = getColumnChecks(columns());
+    const defaultChecks = getColumnChecks(allColumns.value);

    columnChecks.value = defaultChecks.map(col => ({
      ...col,
@@ -88,21 +92,47 @@ export default function useTable<ResponseData, ApiData, Column, Pagination exten
  }

  async function getData() {
-    try {
-      startLoading();
+    startLoading();

-      const response = await api();
+    const formattedParams = formatSearchParams(searchParams);

-      const transformed = transform(response);
+    const response = await apiFn(formattedParams);

-      data.value = getTableData(transformed, pagination);
+    const transformed = transformer(response as Awaited<ReturnType<A>>);

-      setEmpty(data.value.length === 0);
+    data.value = transformed.data;

-      await onFetched?.(transformed);
-    } finally {
-      endLoading();
-    }
+    setEmpty(transformed.data.length === 0);
+
+    await config.onFetched?.(transformed);
+
+    endLoading();
+  }
+
+  function formatSearchParams(params: Record<string, unknown>) {
+    const formattedParams: Record<string, unknown> = {};
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        formattedParams[key] = value;
+      }
+    });
+
+    return formattedParams;
+  }
+
+  /**
+   * update search params
+   *
+   * @param params
+   */
+  function updateSearchParams(params: Partial<Parameters<A>[0]>) {
+    Object.assign(searchParams, params);
+  }
+
+  /** reset search params */
+  function resetSearchParams() {
+    Object.assign(searchParams, jsonClone(apiParams));
  }

  if (immediate) {
@@ -113,20 +143,12 @@ export default function useTable<ResponseData, ApiData, Column, Pagination exten
    loading,
    empty,
    data,
-    columns: $columns,
+    columns,
    columnChecks,
    reloadColumns,
-    getData
+    getData,
+    searchParams,
+    updateSearchParams,
+    resetSearchParams
  };
 }
-
-function getTableData<ApiData, Pagination extends boolean>(
-  data: GetApiData<ApiData, Pagination>,
-  pagination?: Pagination
-) {
-  if (pagination) {
-    return (data as PaginationData<ApiData>).data;
-  }
-
-  return data as ApiData[];
-}
--- a/packages/materials/package.json
+++ b/packages/materials/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@sa/utils": "workspace:*",
-    "simplebar-vue": "2.4.2"
+    "simplebar-vue": "2.4.1"
  },
  "devDependencies": {
    "typed-css-modules": "0.9.1"
--- a/packages/materials/src/libs/admin-layout/index.vue
+++ b/packages/materials/src/libs/admin-layout/index.vue
@@ -127,6 +127,7 @@ function handleClickMask() {
          :class="[
            style['layout-header'],
            commonClass,
+            headerClass,
            headerLeftGapClass,
            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
          ]"
--- a/packages/materials/src/types/index.ts
+++ b/packages/materials/src/types/index.ts
@@ -6,6 +6,12 @@ interface AdminLayoutHeaderConfig {
   * @default true
   */
  headerVisible?: boolean;
+  /**
+   * Header class
+   *
+   * @default ''
+   */
+  headerClass?: string;
  /**
   * Header height
   *
--- a/packages/ofetch/package.json
+++ b/packages/ofetch/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@sa/fetch",
+  "version": "1.3.15",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "dependencies": {
+    "ofetch": "1.4.1"
+  }
+}
--- a/packages/ofetch/src/index.ts
+++ b/packages/ofetch/src/index.ts
@@ -0,0 +1,10 @@
+import { ofetch } from 'ofetch';
+import type { FetchOptions } from 'ofetch';
+
+export function createRequest(options: FetchOptions) {
+  const request = ofetch.create(options);
+
+  return request;
+}
+
+export default createRequest;
--- a/packages/ofetch/tsconfig.json
+++ b/packages/ofetch/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -13,16 +13,15 @@
    }
  },
  "devDependencies": {
-    "@soybeanjs/changelog": "0.3.25",
-    "bumpp": "10.2.3",
-    "c12": "3.3.0",
+    "@soybeanjs/changelog": "0.3.24",
+    "bumpp": "10.2.0",
+    "c12": "3.0.4",
    "cac": "6.7.14",
    "consola": "3.4.2",
    "enquirer": "2.4.1",
    "execa": "9.6.0",
    "kolorist": "1.8.0",
-    "npm-check-updates": "18.1.1",
-    "picomatch": "4.0.3",
+    "npm-check-updates": "18.0.1",
    "rimraf": "6.0.1"
  }
 }
--- a/packages/utils/src/storage.ts
+++ b/packages/utils/src/storage.ts
@@ -32,8 +32,7 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
          storageData = JSON.parse(json);
        } catch {}

-        // storageData may be `false` if it is boolean type
-        if (storageData !== null) {
+        if (storageData) {
          return storageData as T[K];
        }
      }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/logo.png
+++ b/public/logo.png
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@@ -0,0 +1,3 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -0,0 +1,26 @@
+[package]
+name = "app"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+license = ""
+repository = ""
+default-run = "app"
+edition = "2021"
+rust-version = "1.60"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+serde_json = "1.0"
+serde = { version = "1.0", features = ["derive"] }
+tauri = { version = "2", features = [] }
+
+[features]
+# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
+# If you use cargo directly instead of tauri's cli you can use this feature flag to switch between tauri's `dev` and `build` modes.
+# DO NOT REMOVE!!
+custom-protocol = [ "tauri/custom-protocol" ]
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+  tauri_build::build()
+}
--- a/src-tauri/capabilities/migrated.json
+++ b/src-tauri/capabilities/migrated.json
@@ -0,0 +1,7 @@
+{
+  "identifier": "migrated",
+  "description": "permissions that were migrated from v1",
+  "local": true,
+  "windows": ["main"],
+  "permissions": ["core:default"]
+}
--- a/src-tauri/gen/schemas/acl-manifests.json
+++ b/src-tauri/gen/schemas/acl-manifests.json
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -0,0 +1,9 @@
+{
+  "migrated": {
+    "identifier": "migrated",
+    "description": "permissions that were migrated from v1",
+    "local": true,
+    "windows": ["main"],
+    "permissions": ["core:default"]
+  }
+}
--- a/src-tauri/gen/schemas/desktop-schema.json
+++ b/src-tauri/gen/schemas/desktop-schema.json
--- a/src-tauri/gen/schemas/macOS-schema.json
+++ b/src-tauri/gen/schemas/macOS-schema.json
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -0,0 +1,8 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+  tauri::Builder::default()
+    .run(tauri::generate_context!())
+    .expect("error while running tauri application");
+}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
+  "build": {
+    "beforeBuildCommand": "npm run build",
+    "beforeDevCommand": "npm run dev",
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:9527"
+  },
+  "bundle": {
+    "active": true,
+    "category": "DeveloperTool",
+    "copyright": "",
+    "targets": "all",
+    "externalBin": [],
+    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
+    "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": ""
+    },
+    "longDescription": "",
+    "macOS": {
+      "entitlements": null,
+      "exceptionDomain": "",
+      "frameworks": [],
+      "providerShortName": null,
+      "signingIdentity": null
+    },
+    "resources": [],
+    "shortDescription": "",
+    "linux": {
+      "deb": {
+        "depends": []
+      }
+    }
+  },
+  "productName": "soybean-admin",
+  "mainBinaryName": "soybean-admin",
+  "version": "1.0.0",
+  "identifier": "cn.soybeanjs.admin",
+  "plugins": {},
+  "app": {
+    "windows": [
+      {
+        "fullscreen": false,
+        "height": 768,
+        "resizable": true,
+        "title": "SoybeanAdmin",
+        "width": 1366,
+        "useHttpsScheme": true
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
 import type { WatermarkProps } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
+import { useAuthStore } from './store/modules/auth';
 import { naiveDateLocales, naiveLocales } from './locales/naive';

 defineOptions({
@@ -12,6 +13,7 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
+const authStore = useAuthStore();

 const naiveDarkTheme = computed(() => (themeStore.darkMode ? darkTheme : undefined));

@@ -24,8 +26,13 @@ const naiveDateLocale = computed(() => {
 });

 const watermarkProps = computed<WatermarkProps>(() => {
+  const content =
+    themeStore.watermark.enableUserName && authStore.userInfo.userName
+      ? authStore.userInfo.userName
+      : themeStore.watermark.text;
+
  return {
-    content: themeStore.watermarkContent,
+    content,
    cross: true,
    fullscreen: true,
    fontSize: 16,
--- 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
@@ -1,3 +0,0 @@
-<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/advanced/table-column-setting.vue
+++ b/src/components/advanced/table-column-setting.vue
@@ -22,12 +22,7 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
      </NButton>
    </template>
    <VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
-      <div
-        v-for="item in columns"
-        :key="item.key"
-        class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
-        :class="{ hidden: !item.visible }"
-      >
+      <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
        <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
        <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
          <template v-if="typeof item.title === 'function'">
--- a/src/components/common/icon-tooltip.vue
+++ b/src/components/common/icon-tooltip.vue
@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { computed, useSlots } from 'vue';
-import type { PopoverPlacement } from 'naive-ui';
-
-defineOptions({ name: 'IconTooltip' });
-
-interface Props {
-  icon?: string;
-  localIcon?: string;
-  desc?: string;
-  placement?: PopoverPlacement;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: 'mdi-help-circle',
-  localIcon: '',
-  desc: '',
-  placement: 'top'
-});
-
-const slots = useSlots();
-const hasCustomTrigger = computed(() => Boolean(slots.trigger));
-
-if (!hasCustomTrigger.value && !props.icon && !props.localIcon) {
-  throw new Error('icon or localIcon is required when no custom trigger slot is provided');
-}
-</script>
-
-<template>
-  <NTooltip :placement="placement">
-    <template #trigger>
-      <slot name="trigger">
-        <div class="cursor-pointer">
-          <SvgIcon :icon="icon" :local-icon="localIcon" />
-        </div>
-      </slot>
-    </template>
-    <slot>
-      <span>{{ desc }}</span>
-    </slot>
-  </NTooltip>
-</template>
--- a/src/components/custom/custom-icon-select.vue
+++ b/src/components/custom/custom-icon-select.vue
@@ -1,78 +0,0 @@
-<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
@@ -1,18 +0,0 @@
-<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
@@ -1,23 +0,0 @@
-<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
@@ -5,9 +5,9 @@ export const GLOBAL_HEADER_MENU_ID = '__GLOBAL_HEADER_MENU__';
 export const GLOBAL_SIDER_MENU_ID = '__GLOBAL_SIDER_MENU__';

 export const themeSchemaRecord: Record<UnionKey.ThemeScheme, App.I18n.I18nKey> = {
-  light: 'theme.appearance.themeSchema.light',
-  dark: 'theme.appearance.themeSchema.dark',
-  auto: 'theme.appearance.themeSchema.auto'
+  light: 'theme.themeSchema.light',
+  dark: 'theme.themeSchema.dark',
+  auto: 'theme.themeSchema.auto'
 };

 export const themeSchemaOptions = transformRecordToOption(themeSchemaRecord);
@@ -21,57 +21,45 @@ export const loginModuleRecord: Record<UnionKey.LoginModule, App.I18n.I18nKey> =
 };

 export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, App.I18n.I18nKey> = {
-  vertical: 'theme.layout.layoutMode.vertical',
-  'vertical-mix': 'theme.layout.layoutMode.vertical-mix',
-  'vertical-hybrid-header-first': 'theme.layout.layoutMode.vertical-hybrid-header-first',
-  horizontal: 'theme.layout.layoutMode.horizontal',
-  'top-hybrid-sidebar-first': 'theme.layout.layoutMode.top-hybrid-sidebar-first',
-  'top-hybrid-header-first': 'theme.layout.layoutMode.top-hybrid-header-first'
+  vertical: 'theme.layoutMode.vertical',
+  'vertical-mix': 'theme.layoutMode.vertical-mix',
+  horizontal: 'theme.layoutMode.horizontal',
+  'horizontal-mix': 'theme.layoutMode.horizontal-mix'
 };

 export const themeLayoutModeOptions = transformRecordToOption(themeLayoutModeRecord);

 export const themeScrollModeRecord: Record<UnionKey.ThemeScrollMode, App.I18n.I18nKey> = {
-  wrapper: 'theme.layout.content.scrollMode.wrapper',
-  content: 'theme.layout.content.scrollMode.content'
+  wrapper: 'theme.scrollMode.wrapper',
+  content: 'theme.scrollMode.content'
 };

 export const themeScrollModeOptions = transformRecordToOption(themeScrollModeRecord);

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

 export const themeTabModeOptions = transformRecordToOption(themeTabModeRecord);

 export const themePageAnimationModeRecord: Record<UnionKey.ThemePageAnimateMode, App.I18n.I18nKey> = {
-  'fade-slide': 'theme.layout.content.page.mode.fade-slide',
-  fade: 'theme.layout.content.page.mode.fade',
-  'fade-bottom': 'theme.layout.content.page.mode.fade-bottom',
-  'fade-scale': 'theme.layout.content.page.mode.fade-scale',
-  'zoom-fade': 'theme.layout.content.page.mode.zoom-fade',
-  'zoom-out': 'theme.layout.content.page.mode.zoom-out',
-  none: 'theme.layout.content.page.mode.none'
+  'fade-slide': 'theme.page.mode.fade-slide',
+  fade: 'theme.page.mode.fade',
+  'fade-bottom': 'theme.page.mode.fade-bottom',
+  'fade-scale': 'theme.page.mode.fade-scale',
+  'zoom-fade': 'theme.page.mode.zoom-fade',
+  'zoom-out': 'theme.page.mode.zoom-out',
+  none: 'theme.page.mode.none'
 };

 export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);

 export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I18n.I18nKey> = {
-  refresh: 'theme.layout.resetCacheStrategy.refresh',
-  close: 'theme.layout.resetCacheStrategy.close'
+  close: 'theme.resetCacheStrategy.close',
+  refresh: 'theme.resetCacheStrategy.refresh'
 };

 export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);

 export const DARK_CLASS = 'dark';
-
-export const watermarkTimeFormatOptions = [
-  { label: 'YYYY-MM-DD HH:mm', value: 'YYYY-MM-DD HH:mm' },
-  { label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
-  { label: 'YYYY/MM/DD HH:mm', value: 'YYYY/MM/DD HH:mm' },
-  { label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
-  { label: 'HH:mm', value: 'HH:mm' },
-  { label: 'HH:mm:ss', value: 'HH:mm:ss' },
-  { label: 'MM-DD HH:mm', value: 'MM-DD HH:mm' }
-];
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@@ -1,29 +0,0 @@
-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
@@ -1,8 +0,0 @@
-/** 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/echarts.ts
+++ b/src/hooks/common/echarts.ts
@@ -1,4 +1,4 @@
-import { computed, effectScope, nextTick, onScopeDispose, shallowRef, watch } from 'vue';
+import { computed, effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import * as echarts from 'echarts/core';
 import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts';
@@ -86,11 +86,11 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
  const themeStore = useThemeStore();
  const darkMode = computed(() => themeStore.darkMode);

-  const domRef = shallowRef<HTMLElement | null>(null);
+  const domRef = ref<HTMLElement | null>(null);
  const initialSize = { width: 0, height: 0 };
  const { width, height } = useElementSize(domRef, initialSize);

-  const chart = shallowRef<echarts.ECharts | null>(null);
+  let chart: echarts.ECharts | null = null;
  const chartOptions: T = optionsFactory();

  const {
@@ -111,9 +111,18 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
    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.value);
+    return Boolean(domRef.value && chart);
  }

  /**
@@ -122,59 +131,59 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
   * @param callback callback function
   */
  async function updateOptions(callback: (opts: T, optsFactory: () => T) => ECOption = () => chartOptions) {
+    if (!isRendered()) return;
+
    const updatedOpts = callback(chartOptions, optionsFactory);

    Object.assign(chartOptions, updatedOpts);

-    await nextTick();
-
-    if (!isRendered()) return;
-
    if (isRendered()) {
-      chart.value?.clear();
+      chart?.clear();
    }

-    chart.value?.setOption({ ...updatedOpts, backgroundColor: 'transparent' });
+    chart?.setOption({ ...updatedOpts, backgroundColor: 'transparent' });

-    await onUpdated?.(chart.value!);
+    await onUpdated?.(chart!);
  }

  function setOptions(options: T) {
-    chart.value?.setOption(options);
+    chart?.setOption(options);
  }

  /** render chart */
  async function render() {
-    if (isRendered()) return;
+    if (!isRendered()) {
+      const chartTheme = darkMode.value ? 'dark' : 'light';

-    const chartTheme = darkMode.value ? 'dark' : 'light';
+      await nextTick();

-    chart.value = echarts.init(domRef.value, chartTheme);
+      chart = echarts.init(domRef.value, chartTheme);

-    chart.value?.setOption({ ...chartOptions, backgroundColor: 'transparent' });
+      chart.setOption({ ...chartOptions, backgroundColor: 'transparent' });

-    await onRender?.(chart.value!);
+      await onRender?.(chart);
+    }
  }

  /** resize chart */
  function resize() {
-    chart.value?.resize();
+    chart?.resize();
  }

  /** destroy chart */
  async function destroy() {
-    if (!chart.value) return;
+    if (!chart) return;

-    await onDestroy?.(chart.value);
-    chart.value?.dispose();
-    chart.value = null;
+    await onDestroy?.(chart);
+    chart?.dispose();
+    chart = null;
  }

  /** change chart theme */
  async function changeTheme() {
    await destroy();
    await render();
-    await onUpdated?.(chart.value!);
+    await onUpdated?.(chart!);
  }

  /**
@@ -187,29 +196,30 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
    initialSize.width = w;
    initialSize.height = h;

+    // size is abnormal, destroy chart
+    if (!canRender()) {
+      await destroy();
+
+      return;
+    }
+
    // resize chart
    if (isRendered()) {
      resize();
-
-      return;
    }

    // render chart
    await render();

-    if (chart.value) {
-      await onUpdated?.(chart.value);
+    if (chart) {
+      await onUpdated?.(chart);
    }
  }

  scope.run(() => {
-    watch(
-      [width, height],
-      ([newWidth, newHeight]) => {
-        renderChartBySize(newWidth, newHeight);
-      },
-      { flush: 'post' }
-    );
+    watch([width, height], ([newWidth, newHeight]) => {
+      renderChartBySize(newWidth, newHeight);
+    });

    watch(darkMode, () => {
      changeTheme();
@@ -223,7 +233,6 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C

  return {
    domRef,
-    chart,
    updateOptions,
    setOptions
  };
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -1,162 +1,194 @@
-import { computed, effectScope, onScopeDispose, reactive, shallowRef, watch } from 'vue';
+import { computed, effectScope, onScopeDispose, reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { PaginationProps } from 'naive-ui';
-import { useBoolean, useTable } from '@sa/hooks';
-import type { PaginationData, TableColumnCheck, UseTableOptions } from '@sa/hooks';
-import type { FlatResponseData } from '@sa/axios';
 import { jsonClone } from '@sa/utils';
+import { useBoolean, useHookTable } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';

-export type UseNaiveTableOptions<ResponseData, ApiData, Pagination extends boolean> = Omit<
-  UseTableOptions<ResponseData, ApiData, NaiveUI.TableColumn<ApiData>, Pagination>,
-  'pagination' | 'getColumnChecks' | 'getColumns'
-> & {
-  /**
-   * get column visible
-   *
-   * @param column
-   *
-   * @default true
-   *
-   * @returns true if the column is visible, false otherwise
-   */
-  getColumnVisible?: (column: NaiveUI.TableColumn<ApiData>) => boolean;
-};
+type TableData = NaiveUI.TableData;
+type GetTableData<A extends NaiveUI.TableApiFn> = NaiveUI.GetTableData<A>;
+type TableColumn<T> = NaiveUI.TableColumn<T>;

-const SELECTION_KEY = '__selection__';
-
-const EXPAND_KEY = '__expand__';
-
-export function useNaiveTable<ResponseData, ApiData>(options: UseNaiveTableOptions<ResponseData, ApiData, false>) {
-  const scope = effectScope();
-  const appStore = useAppStore();
-
-  const result = useTable<ResponseData, ApiData, NaiveUI.TableColumn<ApiData>, false>({
-    ...options,
-    getColumnChecks: cols => getColumnChecks(cols, options.getColumnVisible),
-    getColumns
-  });
-
-  // calculate the total width of the table this is used for horizontal scrolling
-  const scrollX = computed(() => {
-    return result.columns.value.reduce((acc, column) => {
-      return acc + Number(column.width ?? column.minWidth ?? 120);
-    }, 0);
-  });
-
-  scope.run(() => {
-    watch(
-      () => appStore.locale,
-      () => {
-        result.reloadColumns();
-      }
-    );
-  });
-
-  onScopeDispose(() => {
-    scope.stop();
-  });
-
-  return {
-    ...result,
-    scrollX
-  };
-}
-
-type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
-
-type UseNaivePaginatedTableOptions<ResponseData, ApiData> = UseNaiveTableOptions<ResponseData, ApiData, true> & {
-  paginationProps?: Omit<PaginationProps, 'page' | 'pageSize' | 'itemCount'>;
-  /**
-   * whether to show the total count of the table
-   *
-   * @default true
-   */
-  showTotal?: boolean;
-  onPaginationParamsChange?: (params: PaginationParams) => void | Promise<void>;
-};
-
-export function useNaivePaginatedTable<ResponseData, ApiData>(
-  options: UseNaivePaginatedTableOptions<ResponseData, ApiData>
-) {
+export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTableConfig<A>) {
  const scope = effectScope();
  const appStore = useAppStore();

  const isMobile = computed(() => appStore.isMobile);

-  const showTotal = computed(() => options.showTotal ?? true);
+  const { apiFn, apiParams, immediate, showTotal } = config;

-  const pagination = reactive({
+  const SELECTION_KEY = '__selection__';
+
+  const EXPAND_KEY = '__expand__';
+
+  const {
+    loading,
+    empty,
+    data,
+    columns,
+    columnChecks,
+    reloadColumns,
+    getData,
+    searchParams,
+    updateSearchParams,
+    resetSearchParams
+  } = useHookTable<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>({
+    apiFn,
+    apiParams,
+    columns: config.columns,
+    transformer: res => {
+      const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
+
+      // Ensure that the size is greater than 0, If it is less than 0, it will cause paging calculation errors.
+      const pageSize = size <= 0 ? 10 : size;
+
+      const recordsWithIndex = records.map((item, index) => {
+        return {
+          ...item,
+          index: (current - 1) * pageSize + index + 1
+        };
+      });
+
+      return {
+        data: recordsWithIndex,
+        pageNum: current,
+        pageSize,
+        total
+      };
+    },
+    getColumnChecks: cols => {
+      const checks: NaiveUI.TableColumnCheck[] = [];
+
+      cols.forEach(column => {
+        if (isTableColumnHasKey(column)) {
+          checks.push({
+            key: column.key as string,
+            title: column.title!,
+            checked: true
+          });
+        } else if (column.type === 'selection') {
+          checks.push({
+            key: SELECTION_KEY,
+            title: $t('common.check'),
+            checked: true
+          });
+        } else if (column.type === 'expand') {
+          checks.push({
+            key: EXPAND_KEY,
+            title: $t('common.expandColumn'),
+            checked: true
+          });
+        }
+      });
+
+      return checks;
+    },
+    getColumns: (cols, checks) => {
+      const columnMap = new Map<string, TableColumn<GetTableData<A>>>();
+
+      cols.forEach(column => {
+        if (isTableColumnHasKey(column)) {
+          columnMap.set(column.key as string, column);
+        } else if (column.type === 'selection') {
+          columnMap.set(SELECTION_KEY, column);
+        } else if (column.type === 'expand') {
+          columnMap.set(EXPAND_KEY, column);
+        }
+      });
+
+      const filteredColumns = checks
+        .filter(item => item.checked)
+        .map(check => columnMap.get(check.key) as TableColumn<GetTableData<A>>);
+
+      return filteredColumns;
+    },
+    onFetched: async transformed => {
+      const { pageNum, pageSize, total } = transformed;
+
+      updatePagination({
+        page: pageNum,
+        pageSize,
+        itemCount: total
+      });
+    },
+    immediate
+  });
+
+  const pagination: PaginationProps = reactive({
    page: 1,
    pageSize: 10,
-    itemCount: 0,
    showSizePicker: true,
+    itemCount: 0,
    pageSizes: [10, 15, 20, 25, 30],
-    prefix: showTotal.value ? page => $t('datatable.itemCount', { total: page.itemCount }) : undefined,
-    onUpdatePage(page) {
+    onUpdatePage: async (page: number) => {
      pagination.page = page;
+
+      updateSearchParams({
+        current: page,
+        size: pagination.pageSize!
+      });
+
+      getData();
    },
-    onUpdatePageSize(pageSize) {
+    onUpdatePageSize: async (pageSize: number) => {
      pagination.pageSize = pageSize;
      pagination.page = 1;
+
+      updateSearchParams({
+        current: pagination.page,
+        size: pageSize
+      });
+
+      getData();
    },
-    ...options.paginationProps
-  }) as PaginationProps;
+    ...(showTotal
+      ? {
+          prefix: page => $t('datatable.itemCount', { total: page.itemCount })
+        }
+      : {})
+  });

  // this is for mobile, if the system does not support mobile, you can use `pagination` directly
  const mobilePagination = computed(() => {
    const p: PaginationProps = {
      ...pagination,
      pageSlot: isMobile.value ? 3 : 9,
-      prefix: !isMobile.value && showTotal.value ? pagination.prefix : undefined
+      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
    };

    return p;
  });

-  const paginationParams = computed(() => {
-    const { page, pageSize } = pagination;
+  function updatePagination(update: Partial<PaginationProps>) {
+    Object.assign(pagination, update);
+  }

-    return {
-      page,
-      pageSize
-    };
-  });
+  /**
+   * get data by page number
+   *
+   * @param pageNum the page number. default is 1
+   */
+  async function getDataByPage(pageNum: number = 1) {
+    updatePagination({
+      page: pageNum
+    });

-  const result = useTable<ResponseData, ApiData, NaiveUI.TableColumn<ApiData>, true>({
-    ...options,
-    pagination: true,
-    getColumnChecks: cols => getColumnChecks(cols, options.getColumnVisible),
-    getColumns,
-    onFetched: data => {
-      pagination.itemCount = data.total;
-    }
-  });
+    updateSearchParams({
+      current: pageNum,
+      size: pagination.pageSize!
+    });

-  async function getDataByPage(page: number = 1) {
-    if (page !== pagination.page) {
-      pagination.page = page;
-
-      return;
-    }
-
-    await result.getData();
+    await getData();
  }

  scope.run(() => {
    watch(
      () => appStore.locale,
      () => {
-        result.reloadColumns();
+        reloadColumns();
      }
    );
-
-    watch(paginationParams, async newVal => {
-      await options.onPaginationParamsChange?.(newVal);
-
-      await result.getData();
-    });
  });

  onScopeDispose(() => {
@@ -164,21 +196,27 @@ export function useNaivePaginatedTable<ResponseData, ApiData>(
  });

  return {
-    ...result,
-    getDataByPage,
+    loading,
+    empty,
+    data,
+    columns,
+    columnChecks,
+    reloadColumns,
    pagination,
-    mobilePagination
+    mobilePagination,
+    updatePagination,
+    getData,
+    getDataByPage,
+    searchParams,
+    updateSearchParams,
+    resetSearchParams
  };
 }

-export function useTableOperate<TableData>(
-  data: Ref<TableData[]>,
-  idKey: keyof TableData,
-  getData: () => Promise<void>
-) {
+export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>, getData: () => Promise<void>) {
  const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();

-  const operateType = shallowRef<NaiveUI.TableOperateType>('add');
+  const operateType = ref<NaiveUI.TableOperateType>('add');

  function handleAdd() {
    operateType.value = 'add';
@@ -186,18 +224,18 @@ export function useTableOperate<TableData>(
  }

  /** the editing row data */
-  const editingData = shallowRef<TableData | null>(null);
+  const editingData: Ref<T | null> = ref(null);

-  function handleEdit(id: TableData[keyof TableData]) {
+  function handleEdit(id: T['id']) {
    operateType.value = 'edit';
-    const findItem = data.value.find(item => item[idKey] === id) || null;
+    const findItem = data.value.find(item => item.id === id) || null;
    editingData.value = jsonClone(findItem);

    openDrawer();
  }

  /** the checked row keys of table */
-  const checkedRowKeys = shallowRef<string[]>([]);
+  const checkedRowKeys = ref<string[]>([]);

  /** the hook after the batch delete operation is completed */
  async function onBatchDeleted() {
@@ -229,82 +267,6 @@ export function useTableOperate<TableData>(
  };
 }

-export function defaultTransform<ApiData>(
-  response: FlatResponseData<any, Api.Common.PaginatingQueryRecord<ApiData>>
-): PaginationData<ApiData> {
-  const { data, error } = response;
-
-  if (!error) {
-    const { records, current, size, total } = data;
-
-    return {
-      data: records,
-      pageNum: current,
-      pageSize: size,
-      total
-    };
-  }
-
-  return {
-    data: [],
-    pageNum: 1,
-    pageSize: 10,
-    total: 0
-  };
-}
-
-function getColumnChecks<Column extends NaiveUI.TableColumn<any>>(
-  cols: Column[],
-  getColumnVisible?: (column: Column) => boolean
-) {
-  const checks: TableColumnCheck[] = [];
-
-  cols.forEach(column => {
-    if (isTableColumnHasKey(column)) {
-      checks.push({
-        key: column.key as string,
-        title: column.title!,
-        checked: true,
-        visible: getColumnVisible?.(column) ?? true
-      });
-    } else if (column.type === 'selection') {
-      checks.push({
-        key: SELECTION_KEY,
-        title: $t('common.check'),
-        checked: true,
-        visible: getColumnVisible?.(column) ?? false
-      });
-    } else if (column.type === 'expand') {
-      checks.push({
-        key: EXPAND_KEY,
-        title: $t('common.expandColumn'),
-        checked: true,
-        visible: getColumnVisible?.(column) ?? false
-      });
-    }
-  });
-
-  return checks;
-}
-
-function getColumns<Column extends NaiveUI.TableColumn<any>>(cols: Column[], checks: TableColumnCheck[]) {
-  const columnMap = new Map<string, Column>();
-
-  cols.forEach(column => {
-    if (isTableColumnHasKey(column)) {
-      columnMap.set(column.key as string, column);
-    } else if (column.type === 'selection') {
-      columnMap.set(SELECTION_KEY, column);
-    } else if (column.type === 'expand') {
-      columnMap.set(EXPAND_KEY, column);
-    }
-  });
-
-  const filteredColumns = checks.filter(item => item.checked).map(check => columnMap.get(check.key) as Column);
-
-  return filteredColumns;
-}
-
-export function isTableColumnHasKey<T>(column: NaiveUI.TableColumn<T>): column is NaiveUI.TableColumnWithKey<T> {
+function isTableColumnHasKey<T>(column: TableColumn<T>): column is NaiveUI.TableColumnWithKey<T> {
  return Boolean((column as NaiveUI.TableColumnWithKey<T>).key);
 }
--- a/src/hooks/common/vchart.ts
+++ b/src/hooks/common/vchart.ts
@@ -1,158 +0,0 @@
-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/base-layout/index.vue
+++ b/src/layouts/base-layout/index.vue
@@ -10,7 +10,7 @@ import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
 import ThemeDrawer from '../modules/theme-drawer/index.vue';
-import { provideMixMenuContext } from '../modules/global-menu/context';
+import { setupMixMenuContext } from '../context';

 defineOptions({
  name: 'BaseLayout'
@@ -18,7 +18,7 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = provideMixMenuContext();
+const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = setupMixMenuContext();

 const GlobalMenu = defineAsyncComponent(() => import('../modules/global-menu/index.vue'));

@@ -29,7 +29,7 @@ const layoutMode = computed(() => {
 });

 const headerProps = computed(() => {
-  const { mode } = themeStore.layout;
+  const { mode, reverseHorizontalMix } = themeStore.layout;

  const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
    vertical: {
@@ -42,25 +42,15 @@ const headerProps = computed(() => {
      showMenu: false,
      showMenuToggler: false
    },
-    'vertical-hybrid-header-first': {
-      showLogo: !isActiveFirstLevelMenuHasChildren.value,
-      showMenu: true,
-      showMenuToggler: false
-    },
    horizontal: {
      showLogo: true,
      showMenu: true,
      showMenuToggler: false
    },
-    'top-hybrid-sidebar-first': {
+    'horizontal-mix': {
      showLogo: true,
      showMenu: true,
-      showMenuToggler: false
-    },
-    'top-hybrid-header-first': {
-      showLogo: true,
-      showMenu: true,
-      showMenuToggler: isActiveFirstLevelMenuHasChildren.value
+      showMenuToggler: reverseHorizontalMix && isActiveFirstLevelMenuHasChildren.value
    }
  };

@@ -71,56 +61,44 @@ const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');

 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');

-const isVerticalHybridHeaderFirst = computed(() => themeStore.layout.mode === 'vertical-hybrid-header-first');
-
-const isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first');
-
-const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first');
+const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');

 const siderWidth = computed(() => getSiderWidth());

 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());

-function getSiderAndCollapsedWidth(isCollapsed: boolean) {
-  const {
-    mixChildMenuWidth,
-    collapsedWidth,
-    width: themeWidth,
-    mixCollapsedWidth,
-    mixWidth: themeMixWidth
-  } = themeStore.sider;
+function getSiderWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
+  const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;

-  const width = isCollapsed ? collapsedWidth : themeWidth;
-  const mixWidth = isCollapsed ? mixCollapsedWidth : themeMixWidth;
-
-  if (isTopHybridHeaderFirst.value) {
+  if (isHorizontalMix.value && reverseHorizontalMix) {
    return isActiveFirstLevelMenuHasChildren.value ? width : 0;
  }

-  if (isVerticalHybridHeaderFirst.value && !isActiveFirstLevelMenuHasChildren.value) {
-    return 0;
-  }
-
-  const isMixMode = isVerticalMix.value || isTopHybridSidebarFirst.value || isVerticalHybridHeaderFirst.value;
-  let finalWidth = isMixMode ? mixWidth : width;
+  let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;

  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
-    finalWidth += mixChildMenuWidth;
+    w += mixChildMenuWidth;
  }

-  if (isVerticalHybridHeaderFirst.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
-    finalWidth += mixChildMenuWidth;
-  }
-
-  return finalWidth;
-}
-
-function getSiderWidth() {
-  return getSiderAndCollapsedWidth(false);
+  return w;
 }

 function getSiderCollapsedWidth() {
-  return getSiderAndCollapsedWidth(true);
+  const { reverseHorizontalMix } = themeStore.layout;
+  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
+
+  if (isHorizontalMix.value && reverseHorizontalMix) {
+    return isActiveFirstLevelMenuHasChildren.value ? collapsedWidth : 0;
+  }
+
+  let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
+
+  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
+    w += mixChildMenuWidth;
+  }
+
+  return w;
 }
 </script>

--- a/src/layouts/context/index.ts
+++ b/src/layouts/context/index.ts
@@ -0,0 +1,83 @@
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useContext } from '@sa/hooks';
+import { useRouteStore } from '@/store/modules/route';
+
+export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
+
+function useMixMenu() {
+  const route = useRoute();
+  const routeStore = useRouteStore();
+  const { selectedKey } = useMenu();
+
+  const activeFirstLevelMenuKey = ref('');
+
+  function setActiveFirstLevelMenuKey(key: string) {
+    activeFirstLevelMenuKey.value = key;
+  }
+
+  function getActiveFirstLevelMenuKey() {
+    const [firstLevelRouteName] = selectedKey.value.split('_');
+
+    setActiveFirstLevelMenuKey(firstLevelRouteName);
+  }
+
+  const allMenus = computed<App.Global.Menu[]>(() => routeStore.menus);
+
+  const firstLevelMenus = computed<App.Global.Menu[]>(() =>
+    routeStore.menus.map(menu => {
+      const { children: _, ...rest } = menu;
+
+      return rest;
+    })
+  );
+
+  const childLevelMenus = computed<App.Global.Menu[]>(
+    () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
+  );
+
+  const isActiveFirstLevelMenuHasChildren = computed(() => {
+    if (!activeFirstLevelMenuKey.value) {
+      return false;
+    }
+
+    const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
+
+    return Boolean(findItem?.children?.length);
+  });
+
+  watch(
+    () => route.name,
+    () => {
+      getActiveFirstLevelMenuKey();
+    },
+    { immediate: true }
+  );
+
+  return {
+    allMenus,
+    firstLevelMenus,
+    childLevelMenus,
+    isActiveFirstLevelMenuHasChildren,
+    activeFirstLevelMenuKey,
+    setActiveFirstLevelMenuKey,
+    getActiveFirstLevelMenuKey
+  };
+}
+
+export function useMenu() {
+  const route = useRoute();
+
+  const selectedKey = computed(() => {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    return routeName;
+  });
+
+  return {
+    selectedKey
+  };
+}
--- 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 = 'user-center' | 'logout';
+type DropdownKey = 'logout';

 type DropdownOption =
  | {
@@ -33,15 +33,6 @@ 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-menu/components/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/components/first-level-menu.vue
@@ -3,7 +3,6 @@ import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
 import { transformColorWithOpacity } from '@sa/color';
-import type { RouteKey } from '@elegant-router/types';

 defineOptions({
  name: 'FirstLevelMenu'
@@ -21,7 +20,7 @@ interface Props {
 const props = defineProps<Props>();

 interface Emits {
-  (e: 'select', menuKey: RouteKey): boolean;
+  (e: 'select', menu: App.Global.Menu): boolean;
  (e: 'toggleSiderCollapse'): void;
 }

@@ -48,8 +47,8 @@ const selectedBgColor = computed(() => {
  return darkMode ? dark : light;
 });

-function handleClickMixMenu(menuKey: RouteKey) {
-  emit('select', menuKey);
+function handleClickMixMenu(menu: App.Global.Menu) {
+  emit('select', menu);
 }

 function toggleSiderCollapse() {
@@ -89,7 +88,7 @@ function toggleSiderCollapse() {
        :icon="menu.icon"
        :active="menu.key === activeMenuKey"
        :is-mini="siderCollapse"
-        @click="handleClickMixMenu(menu.routeKey)"
+        @click="handleClickMixMenu(menu)"
      />
    </SimpleScrollbar>
    <MenuToggler
--- a/src/layouts/modules/global-menu/context/index.ts
+++ b/src/layouts/modules/global-menu/context/index.ts
@@ -1,143 +0,0 @@
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useContext } from '@sa/hooks';
-import type { RouteKey } from '@elegant-router/types';
-import { useRouteStore } from '@/store/modules/route';
-import { useRouterPush } from '@/hooks/common/router';
-
-export const [provideMixMenuContext, useMixMenuContext] = useContext('MixMenu', useMixMenu);
-
-function useMixMenu() {
-  const route = useRoute();
-  const routeStore = useRouteStore();
-  const { selectedKey } = useMenu();
-  const { routerPushByKeyWithMetaQuery } = useRouterPush();
-
-  const allMenus = computed<App.Global.Menu[]>(() => routeStore.menus);
-
-  const firstLevelMenus = computed<App.Global.Menu[]>(() =>
-    routeStore.menus.map(menu => {
-      const { children: _, ...rest } = menu;
-
-      return rest;
-    })
-  );
-
-  const activeFirstLevelMenuKey = ref('');
-
-  function setActiveFirstLevelMenuKey(key: string) {
-    activeFirstLevelMenuKey.value = key;
-  }
-
-  function getActiveFirstLevelMenuKey() {
-    const [firstLevelRouteName] = selectedKey.value.split('_');
-
-    setActiveFirstLevelMenuKey(firstLevelRouteName);
-  }
-
-  const isActiveFirstLevelMenuHasChildren = computed(() => {
-    if (!activeFirstLevelMenuKey.value) {
-      return false;
-    }
-
-    const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
-
-    return Boolean(findItem?.children?.length);
-  });
-
-  function handleSelectFirstLevelMenu(key: RouteKey) {
-    setActiveFirstLevelMenuKey(key);
-
-    if (!isActiveFirstLevelMenuHasChildren.value) {
-      routerPushByKeyWithMetaQuery(key);
-    }
-  }
-
-  const secondLevelMenus = computed<App.Global.Menu[]>(
-    () => allMenus.value.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
-  );
-
-  const activeSecondLevelMenuKey = ref('');
-
-  function setActiveSecondLevelMenuKey(key: string) {
-    activeSecondLevelMenuKey.value = key;
-  }
-
-  function getActiveSecondLevelMenuKey() {
-    const keys = selectedKey.value.split('_');
-
-    if (keys.length < 2) {
-      setActiveSecondLevelMenuKey('');
-      return;
-    }
-
-    const [firstLevelRouteName, level2SuffixName] = keys;
-
-    const secondLevelRouteName = `${firstLevelRouteName}_${level2SuffixName}`;
-
-    setActiveSecondLevelMenuKey(secondLevelRouteName);
-  }
-
-  const isActiveSecondLevelMenuHasChildren = computed(() => {
-    if (!activeSecondLevelMenuKey.value) {
-      return false;
-    }
-
-    const findItem = secondLevelMenus.value.find(item => item.key === activeSecondLevelMenuKey.value);
-
-    return Boolean(findItem?.children?.length);
-  });
-
-  function handleSelectSecondLevelMenu(key: RouteKey) {
-    setActiveSecondLevelMenuKey(key);
-
-    if (!isActiveSecondLevelMenuHasChildren.value) {
-      routerPushByKeyWithMetaQuery(key);
-    }
-  }
-
-  const childLevelMenus = computed<App.Global.Menu[]>(
-    () => secondLevelMenus.value.find(menu => menu.key === activeSecondLevelMenuKey.value)?.children || []
-  );
-
-  watch(
-    () => route.name,
-    () => {
-      getActiveFirstLevelMenuKey();
-    },
-    { immediate: true }
-  );
-
-  return {
-    firstLevelMenus,
-    activeFirstLevelMenuKey,
-    setActiveFirstLevelMenuKey,
-    isActiveFirstLevelMenuHasChildren,
-    handleSelectFirstLevelMenu,
-    getActiveFirstLevelMenuKey,
-    secondLevelMenus,
-    activeSecondLevelMenuKey,
-    setActiveSecondLevelMenuKey,
-    isActiveSecondLevelMenuHasChildren,
-    handleSelectSecondLevelMenu,
-    getActiveSecondLevelMenuKey,
-    childLevelMenus
-  };
-}
-
-export function useMenu() {
-  const route = useRoute();
-
-  const selectedKey = computed(() => {
-    const { hideInMenu, activeMenu } = route.meta;
-    const name = route.name as string;
-
-    const routeName = (hideInMenu ? activeMenu : name) || name;
-
-    return routeName;
-  });
-
-  return {
-    selectedKey
-  };
-}
--- a/src/layouts/modules/global-menu/index.vue
+++ b/src/layouts/modules/global-menu/index.vue
@@ -5,10 +5,9 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import VerticalMenu from './modules/vertical-menu.vue';
 import VerticalMixMenu from './modules/vertical-mix-menu.vue';
-import VerticalHybridHeaderFirst from './modules/vertical-hybrid-header-first.vue';
 import HorizontalMenu from './modules/horizontal-menu.vue';
-import TopHybridSidebarFirst from './modules/top-hybrid-sidebar-first.vue';
-import TopHybridHeaderFirst from './modules/top-hybrid-header-first.vue';
+import HorizontalMixMenu from './modules/horizontal-mix-menu.vue';
+import ReversedHorizontalMixMenu from './modules/reversed-horizontal-mix-menu.vue';

 defineOptions({
  name: 'GlobalMenu'
@@ -21,10 +20,8 @@ const activeMenu = computed(() => {
  const menuMap: Record<UnionKey.ThemeLayoutMode, Component> = {
    vertical: VerticalMenu,
    'vertical-mix': VerticalMixMenu,
-    'vertical-hybrid-header-first': VerticalHybridHeaderFirst,
    horizontal: HorizontalMenu,
-    'top-hybrid-sidebar-first': TopHybridSidebarFirst,
-    'top-hybrid-header-first': TopHybridHeaderFirst
+    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
  };

  return menuMap[themeStore.layout.mode];
--- a/src/layouts/modules/global-menu/modules/horizontal-menu.vue
+++ b/src/layouts/modules/global-menu/modules/horizontal-menu.vue
@@ -2,7 +2,7 @@
 import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMenu } from '../context';
+import { useMenu } from '../../../context';

 defineOptions({
  name: 'HorizontalMenu'
--- a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
+++ b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
@@ -4,18 +4,25 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
 import FirstLevelMenu from '../components/first-level-menu.vue';
-import { useMenu, useMixMenuContext } from '../context';
+import { useMenu, useMixMenuContext } from '../../../context';

 defineOptions({
-  name: 'TopHybridSidebarFirst'
+  name: 'HorizontalMixMenu'
 });

 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } =
-  useMixMenuContext('TopHybridSidebarFirst');
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
 const { selectedKey } = useMenu();
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
 </script>

 <template>
@@ -23,24 +30,22 @@ const { selectedKey } = useMenu();
    <NMenu
      mode="horizontal"
      :value="selectedKey"
-      :options="secondLevelMenus"
+      :options="childLevelMenus"
      :indent="18"
      responsive
      @update:value="routerPushByKeyWithMetaQuery"
    />
  </Teleport>
  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
-    <div class="h-full pt-2">
-      <FirstLevelMenu
-        :menus="firstLevelMenus"
-        :active-menu-key="activeFirstLevelMenuKey"
-        :sider-collapse="appStore.siderCollapse"
-        :dark-mode="themeStore.darkMode"
-        :theme-color="themeStore.themeColor"
-        @select="handleSelectFirstLevelMenu"
-        @toggle-sider-collapse="appStore.toggleSiderCollapse"
-      />
-    </div>
+    <FirstLevelMenu
+      :menus="allMenus"
+      :active-menu-key="activeFirstLevelMenuKey"
+      :sider-collapse="appStore.siderCollapse"
+      :dark-mode="themeStore.darkMode"
+      :theme-color="themeStore.themeColor"
+      @select="handleSelectMixMenu"
+      @toggle-sider-collapse="appStore.toggleSiderCollapse"
+    />
  </Teleport>
 </template>

--- a/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
+++ b/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import type { RouteKey } from '@elegant-router/types';
 import { SimpleScrollbar } from '@sa/materials';
 import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMenu, useMixMenuContext } from '../context';
+import { useMenu, useMixMenuContext } from '../../../context';

 defineOptions({
-  name: 'TopHybridHeaderFirst'
+  name: 'ReversedHorizontalMixMenu'
 });

 const route = useRoute();
@@ -18,10 +19,23 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } =
-  useMixMenuContext('TopHybridHeaderFirst');
+const {
+  firstLevelMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  isActiveFirstLevelMenuHasChildren
+} = useMixMenuContext();
 const { selectedKey } = useMenu();

+function handleSelectMixMenu(key: RouteKey) {
+  setActiveFirstLevelMenuKey(key);
+
+  if (!isActiveFirstLevelMenuHasChildren.value) {
+    routerPushByKeyWithMetaQuery(key);
+  }
+}
+
 const expandedKeys = ref<string[]>([]);

 function updateExpandedKeys() {
@@ -49,7 +63,7 @@ watch(
      :options="firstLevelMenus"
      :indent="18"
      responsive
-      @update:value="handleSelectFirstLevelMenu"
+      @update:value="handleSelectMixMenu"
    />
  </Teleport>
  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
@@ -61,7 +75,7 @@ watch(
        :collapsed="appStore.siderCollapse"
        :collapsed-width="themeStore.sider.collapsedWidth"
        :collapsed-icon-size="22"
-        :options="secondLevelMenus"
+        :options="childLevelMenus"
        :indent="18"
        @update:value="routerPushByKeyWithMetaQuery"
      />
--- a/src/layouts/modules/global-menu/modules/vertical-hybrid-header-first.vue
+++ b/src/layouts/modules/global-menu/modules/vertical-hybrid-header-first.vue
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import type { RouteKey } from '@elegant-router/types';
-import { SimpleScrollbar } from '@sa/materials';
-import { useBoolean } from '@sa/hooks';
-import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import { useRouterPush } from '@/hooks/common/router';
-import { useMenu, useMixMenuContext } from '../context';
-import FirstLevelMenu from '../components/first-level-menu.vue';
-import GlobalLogo from '../../global-logo/index.vue';
-
-defineOptions({
-  name: 'VerticalHybridHeaderFirst'
-});
-
-const route = useRoute();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const {
-  firstLevelMenus,
-  activeFirstLevelMenuKey,
-  handleSelectFirstLevelMenu,
-  getActiveFirstLevelMenuKey,
-  secondLevelMenus,
-  activeSecondLevelMenuKey,
-  isActiveSecondLevelMenuHasChildren,
-  handleSelectSecondLevelMenu,
-  getActiveSecondLevelMenuKey,
-  childLevelMenus
-} = 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));
-
-function handleSelectMixMenu(key: RouteKey) {
-  handleSelectSecondLevelMenu(key);
-
-  if (isActiveSecondLevelMenuHasChildren.value) {
-    setDrawerVisible(true);
-  }
-}
-
-function handleSelectMenu(key: RouteKey) {
-  handleSelectFirstLevelMenu(key);
-
-  if (secondLevelMenus.value.length > 0) {
-    handleSelectMixMenu(secondLevelMenus.value[0].routeKey);
-  }
-}
-
-function handleResetActiveMenu() {
-  setDrawerVisible(false);
-
-  if (!appStore.mixSiderFixed) {
-    getActiveFirstLevelMenuKey();
-    getActiveSecondLevelMenuKey();
-  }
-}
-
-const expandedKeys = ref<string[]>([]);
-
-function updateExpandedKeys() {
-  if (appStore.siderCollapse || !selectedKey.value) {
-    expandedKeys.value = [];
-    return;
-  }
-  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
-}
-
-watch(
-  () => route.name,
-  () => {
-    updateExpandedKeys();
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
-    <NMenu
-      mode="horizontal"
-      :value="activeFirstLevelMenuKey"
-      :options="firstLevelMenus"
-      :indent="18"
-      responsive
-      @update:value="handleSelectMenu"
-    />
-  </Teleport>
-  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
-    <div class="h-full flex" @mouseleave="handleResetActiveMenu">
-      <FirstLevelMenu
-        :menus="secondLevelMenus"
-        :active-menu-key="activeSecondLevelMenuKey"
-        :inverted="inverted"
-        :sider-collapse="appStore.siderCollapse"
-        :dark-mode="themeStore.darkMode"
-        :theme-color="themeStore.themeColor"
-        @select="handleSelectMixMenu"
-        @toggle-sider-collapse="appStore.toggleSiderCollapse"
-      >
-        <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
-      </FirstLevelMenu>
-      <div
-        class="relative h-full transition-width-300"
-        :style="{ width: appStore.mixSiderFixed && hasChildMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-      >
-        <DarkModeContainer
-          class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
-          :inverted="inverted"
-          :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-        >
-          <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
-            <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
-            <PinToggler
-              :pin="appStore.mixSiderFixed"
-              :class="{ 'text-white:88 !hover:text-white': inverted }"
-              @click="appStore.toggleMixSiderFixed"
-            />
-          </header>
-          <SimpleScrollbar>
-            <NMenu
-              v-model:expanded-keys="expandedKeys"
-              mode="vertical"
-              :value="selectedKey"
-              :options="childLevelMenus"
-              :inverted="inverted"
-              :indent="18"
-              @update:value="routerPushByKeyWithMetaQuery"
-            />
-          </SimpleScrollbar>
-        </DarkModeContainer>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped></style>
--- a/src/layouts/modules/global-menu/modules/vertical-menu.vue
+++ b/src/layouts/modules/global-menu/modules/vertical-menu.vue
@@ -7,7 +7,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMenu } from '../context';
+import { useMenu } from '../../../context';

 defineOptions({
  name: 'VerticalMenu'
--- a/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
+++ b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
@@ -3,14 +3,13 @@ import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { SimpleScrollbar } from '@sa/materials';
 import { useBoolean } from '@sa/hooks';
-import type { RouteKey } from '@elegant-router/types';
 import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 import { $t } from '@/locales';
-import { useMenu, useMixMenuContext } from '../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 import FirstLevelMenu from '../components/first-level-menu.vue';
 import GlobalLogo from '../../global-logo/index.vue';

@@ -25,26 +24,28 @@ const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
 const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
 const {
-  firstLevelMenus,
-  secondLevelMenus,
+  allMenus,
+  childLevelMenus,
  activeFirstLevelMenuKey,
-  isActiveFirstLevelMenuHasChildren,
-  getActiveFirstLevelMenuKey,
-  handleSelectFirstLevelMenu
-} = useMixMenuContext('VerticalMixMenu');
+  setActiveFirstLevelMenuKey,
+  getActiveFirstLevelMenuKey
+  //
+} = useMixMenuContext();
 const { selectedKey } = useMenu();

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

-const hasChildMenus = computed(() => secondLevelMenus.value.length > 0);
+const hasChildMenus = computed(() => childLevelMenus.value.length > 0);

 const showDrawer = computed(() => hasChildMenus.value && (drawerVisible.value || appStore.mixSiderFixed));

-function handleSelectMenu(key: RouteKey) {
-  handleSelectFirstLevelMenu(key);
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);

-  if (isActiveFirstLevelMenuHasChildren.value) {
+  if (menu.children?.length) {
    setDrawerVisible(true);
+  } else {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
  }
 }

@@ -79,13 +80,13 @@ watch(
  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
    <div class="h-full flex" @mouseleave="handleResetActiveMenu">
      <FirstLevelMenu
-        :menus="firstLevelMenus"
+        :menus="allMenus"
        :active-menu-key="activeFirstLevelMenuKey"
        :inverted="inverted"
        :sider-collapse="appStore.siderCollapse"
        :dark-mode="themeStore.darkMode"
        :theme-color="themeStore.themeColor"
-        @select="handleSelectMenu"
+        @select="handleSelectMixMenu"
        @toggle-sider-collapse="appStore.toggleSiderCollapse"
      >
        <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
@@ -112,7 +113,7 @@ watch(
              v-model:expanded-keys="expandedKeys"
              mode="vertical"
              :value="selectedKey"
-              :options="secondLevelMenus"
+              :options="childLevelMenus"
              :inverted="inverted"
              :indent="18"
              @update:value="routerPushByKeyWithMetaQuery"
--- a/src/layouts/modules/global-sider/index.vue
+++ b/src/layouts/modules/global-sider/index.vue
@@ -12,13 +12,10 @@ defineOptions({
 const appStore = useAppStore();
 const themeStore = useThemeStore();

-const isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first');
-const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first');
-const darkMenu = computed(
-  () =>
-    !themeStore.darkMode && !isTopHybridSidebarFirst.value && !isTopHybridHeaderFirst.value && themeStore.sider.inverted
-);
-const showLogo = computed(() => themeStore.layout.mode === 'vertical');
+const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
+const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');
+const darkMenu = computed(() => !themeStore.darkMode && !isHorizontalMix.value && themeStore.sider.inverted);
+const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
 const menuWrapperClass = computed(() => (showLogo.value ? 'flex-1-hidden' : 'h-full'));
 </script>

--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -27,6 +27,7 @@ type LayoutConfig = Record<
  UnionKey.ThemeLayoutMode,
  {
    placement: PopoverPlacement;
+    headerClass: string;
    menuClass: string;
    mainClass: string;
  }
@@ -35,31 +36,25 @@ type LayoutConfig = Record<
 const layoutConfig: LayoutConfig = {
  vertical: {
    placement: 'bottom',
+    headerClass: '',
    menuClass: 'w-1/3 h-full',
    mainClass: 'w-2/3 h-3/4'
  },
  'vertical-mix': {
    placement: 'bottom',
-    menuClass: 'w-1/4 h-full',
-    mainClass: 'w-2/3 h-3/4'
-  },
-  'vertical-hybrid-header-first': {
-    placement: 'bottom',
+    headerClass: '',
    menuClass: 'w-1/4 h-full',
    mainClass: 'w-2/3 h-3/4'
  },
  horizontal: {
    placement: 'bottom',
+    headerClass: '',
    menuClass: 'w-full h-1/4',
    mainClass: 'w-full h-3/4'
  },
-  'top-hybrid-sidebar-first': {
-    placement: 'bottom',
-    menuClass: 'w-full h-1/4',
-    mainClass: 'w-2/3 h-3/4'
-  },
-  'top-hybrid-header-first': {
+  'horizontal-mix': {
    placement: 'bottom',
+    headerClass: '',
    menuClass: 'w-full h-1/4',
    mainClass: 'w-2/3 h-3/4'
  }
@@ -73,27 +68,25 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
 </script>

 <template>
-  <div class="grid grid-cols-2 gap-x-16px gap-y-12px md:grid-cols-3">
+  <div class="flex-center flex-wrap gap-x-32px gap-y-16px">
    <div
      v-for="(item, key) in layoutConfig"
      :key="key"
-      class="flex-col-center cursor-pointer"
+      class="flex cursor-pointer border-2px rounded-6px hover:border-primary"
+      :class="[mode === key ? 'border-primary' : 'border-transparent']"
      @click="handleChangeMode(key)"
    >
-      <IconTooltip :placement="item.placement">
+      <NTooltip :placement="item.placement">
        <template #trigger>
          <div
-            class="h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary"
-            :class="{ '!ring-primary': mode === key }"
+            class="h-64px w-96px gap-6px rd-4px p-6px shadow dark:shadow-coolGray-5"
+            :class="[key.includes('vertical') ? 'flex' : 'flex-col']"
          >
-            <div class="h-full w-full gap-1" :class="[key.includes('vertical') ? 'flex' : 'flex-col']">
-              <slot :name="key"></slot>
-            </div>
+            <slot :name="key"></slot>
          </div>
        </template>
-        {{ $t(`theme.layout.layoutMode.${key}_detail`) }}
-      </IconTooltip>
-      <p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p>
+        {{ $t(themeLayoutModeRecord[key]) }}
+      </NTooltip>
    </div>
  </div>
 </template>
--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/src/layouts/modules/theme-drawer/components/setting-item.vue
@@ -13,7 +13,7 @@ defineProps<Props>();

 <template>
  <div class="w-full flex-y-center justify-between">
-    <div class="flex-y-center">
+    <div>
      <span class="pr-8px text-base-text">{{ label }}</span>
      <slot name="suffix"></slot>
    </div>
--- a/src/layouts/modules/theme-drawer/index.vue
+++ b/src/layouts/modules/theme-drawer/index.vue
@@ -1,51 +1,26 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
-import AppearanceSettings from './modules/appearance/index.vue';
-import LayoutSettings from './modules/layout/index.vue';
-import GeneralSettings from './modules/general/index.vue';
+import DarkMode from './modules/dark-mode.vue';
+import LayoutMode from './modules/layout-mode.vue';
+import ThemeColor from './modules/theme-color.vue';
+import PageFun from './modules/page-fun.vue';
 import ConfigOperation from './modules/config-operation.vue';
-import PresetSettings from './modules/preset/index.vue';

 defineOptions({
  name: 'ThemeDrawer'
 });

 const appStore = useAppStore();
-const activeTab = ref('appearance');
-
-const drawerWidth = computed(() => {
-  const width = 400;
-
-  // On mobile devices, use 90% of viewport width with a maximum of 400px
-  if (appStore.isMobile) {
-    return `min(90vw, ${width}px)`;
-  }
-
-  return width;
-});
 </script>

 <template>
-  <NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="drawerWidth">
+  <NDrawer v-model:show="appStore.themeDrawerVisible" display-directive="show" :width="360">
    <NDrawerContent :title="$t('theme.themeDrawerTitle')" :native-scrollbar="false" closable>
-      <NTabs v-model:value="activeTab" type="segment" size="medium" class="mb-16px">
-        <NTab name="appearance" :tab="$t('theme.tabs.appearance')"></NTab>
-        <NTab name="layout" :tab="$t('theme.tabs.layout')"></NTab>
-        <NTab name="general" :tab="$t('theme.tabs.general')"></NTab>
-        <NTab name="preset" :tab="$t('theme.tabs.preset')"></NTab>
-      </NTabs>
-
-      <div class="min-h-400px">
-        <KeepAlive>
-          <AppearanceSettings v-if="activeTab === 'appearance'" />
-          <LayoutSettings v-else-if="activeTab === 'layout'" />
-          <GeneralSettings v-else-if="activeTab === 'general'" />
-          <PresetSettings v-else-if="activeTab === 'preset'" />
-        </KeepAlive>
-      </div>
-
+      <DarkMode />
+      <LayoutMode />
+      <ThemeColor />
+      <PageFun />
      <template #footer>
        <ConfigOperation />
      </template>
@@ -53,14 +28,4 @@ const drawerWidth = computed(() => {
  </NDrawer>
 </template>

-<style scoped>
-:deep(.n-tab) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:deep(.n-tab-pane) {
-  padding: 0;
-}
-</style>
+<style scoped></style>
--- a/src/layouts/modules/theme-drawer/modules/appearance/index.vue
+++ b/src/layouts/modules/theme-drawer/modules/appearance/index.vue
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import ThemeSchema from './modules/theme-schema.vue';
-import ThemeColor from './modules/theme-color.vue';
-
-defineOptions({
-  name: 'AppearanceSettings'
-});
-</script>
-
-<template>
-  <div class="flex-col-stretch gap-16px">
-    <ThemeSchema />
-    <ThemeColor />
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-schema.vue
+++ b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-schema.vue
@@ -3,10 +3,10 @@ import { computed } from 'vue';
 import { themeSchemaRecord } from '@/constants/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
+import SettingItem from '../components/setting-item.vue';

 defineOptions({
-  name: 'ThemeSchema'
+  name: 'DarkMode'
 });

 const themeStore = useThemeStore();
@@ -33,7 +33,7 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
 </script>

 <template>
-  <NDivider>{{ $t('theme.appearance.themeSchema.title') }}</NDivider>
+  <NDivider>{{ $t('theme.themeSchema.title') }}</NDivider>
  <div class="flex-col-stretch gap-16px">
    <div class="i-flex-center">
      <NTabs
@@ -50,14 +50,14 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
      </NTabs>
    </div>
    <Transition name="sider-inverted">
-      <SettingItem v-if="showSiderInverted" :label="$t('theme.layout.sider.inverted')">
+      <SettingItem v-if="showSiderInverted" :label="$t('theme.sider.inverted')">
        <NSwitch v-model:value="themeStore.sider.inverted" />
      </SettingItem>
    </Transition>
-    <SettingItem :label="$t('theme.appearance.grayscale')">
+    <SettingItem :label="$t('theme.grayscale')">
      <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
    </SettingItem>
-    <SettingItem :label="$t('theme.appearance.colourWeakness')">
+    <SettingItem :label="$t('theme.colourWeakness')">
      <NSwitch :value="themeStore.colourWeakness" @update:value="handleColourWeaknessChange" />
    </SettingItem>
  </div>
--- a/src/layouts/modules/theme-drawer/modules/general/index.vue
+++ b/src/layouts/modules/theme-drawer/modules/general/index.vue
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import GlobalSettings from './modules/global-settings.vue';
-import WatermarkSettings from './modules/watermark-settings.vue';
-
-defineOptions({
-  name: 'GeneralSettings'
-});
-</script>
-
-<template>
-  <div class="flex-col-stretch gap-16px">
-    <GlobalSettings />
-    <WatermarkSettings />
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/layouts/modules/theme-drawer/modules/general/modules/global-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/general/modules/global-settings.vue
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useThemeStore } from '@/store/modules/theme';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'GlobalSettings'
-});
-
-const themeStore = useThemeStore();
-</script>
-
-<template>
-  <NDivider>{{ $t('theme.general.title') }}</NDivider>
-  <SettingItem :label="$t('theme.general.multilingual.visible')">
-    <NSwitch v-model:value="themeStore.header.multilingual.visible" />
-  </SettingItem>
-
-  <SettingItem :label="$t('theme.general.globalSearch.visible')">
-    <NSwitch v-model:value="themeStore.header.globalSearch.visible" />
-  </SettingItem>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- a/src/layouts/modules/theme-drawer/modules/general/modules/watermark-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/general/modules/watermark-settings.vue
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { watermarkTimeFormatOptions } from '@/constants/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'WatermarkSettings'
-});
-
-const themeStore = useThemeStore();
-
-const isWatermarkTextVisible = computed(
-  () => themeStore.watermark.visible && !themeStore.watermark.enableUserName && !themeStore.watermark.enableTime
-);
-</script>
-
-<template>
-  <NDivider>{{ $t('theme.general.watermark.title') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
-    <SettingItem key="1" :label="$t('theme.general.watermark.visible')">
-      <NSwitch v-model:value="themeStore.watermark.visible" />
-    </SettingItem>
-    <SettingItem v-if="themeStore.watermark.visible" key="2" :label="$t('theme.general.watermark.enableUserName')">
-      <NSwitch :value="themeStore.watermark.enableUserName" @update:value="themeStore.setWatermarkEnableUserName" />
-    </SettingItem>
-    <SettingItem v-if="themeStore.watermark.visible" key="3" :label="$t('theme.general.watermark.enableTime')">
-      <NSwitch :value="themeStore.watermark.enableTime" @update:value="themeStore.setWatermarkEnableTime" />
-    </SettingItem>
-    <SettingItem
-      v-if="themeStore.watermark.visible && themeStore.watermark.enableTime"
-      key="4"
-      :label="$t('theme.general.watermark.timeFormat')"
-    >
-      <NSelect
-        v-model:value="themeStore.watermark.timeFormat"
-        :options="watermarkTimeFormatOptions"
-        size="small"
-        class="w-210px"
-      />
-    </SettingItem>
-    <SettingItem v-if="isWatermarkTextVisible" key="5" :label="$t('theme.general.watermark.text')">
-      <NInput
-        v-model:value="themeStore.watermark.text"
-        autosize
-        type="text"
-        size="small"
-        class="w-120px"
-        placeholder="SoybeanAdmin"
-      />
-    </SettingItem>
-  </TransitionGroup>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/layout-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/layout-mode.vue
@@ -2,7 +2,8 @@
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
-import LayoutModeCard from '../../../components/layout-mode-card.vue';
+import LayoutModeCard from '../components/layout-mode-card.vue';
+import SettingItem from '../components/setting-item.vue';

 defineOptions({
  name: 'LayoutMode'
@@ -10,60 +11,56 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
+
+function handleReverseHorizontalMixChange(value: boolean) {
+  themeStore.setLayoutReverseHorizontalMix(value);
+}
 </script>

 <template>
-  <NDivider>{{ $t('theme.layout.layoutMode.title') }}</NDivider>
+  <NDivider>{{ $t('theme.layoutMode.title') }}</NDivider>
  <LayoutModeCard v-model:mode="themeStore.layout.mode" :disabled="appStore.isMobile">
    <template #vertical>
-      <div class="layout-sider h-full w-18px !bg-primary"></div>
+      <div class="layout-sider h-full w-18px"></div>
      <div class="vertical-wrapper">
-        <div class="layout-header bg-primary-200"></div>
+        <div class="layout-header"></div>
        <div class="layout-main"></div>
      </div>
    </template>
    <template #vertical-mix>
-      <div class="layout-sider h-full w-8px !bg-primary"></div>
-      <div class="layout-sider h-full w-16px !bg-primary-300"></div>
+      <div class="layout-sider h-full w-8px"></div>
+      <div class="layout-sider h-full w-16px"></div>
      <div class="vertical-wrapper">
-        <div class="layout-header bg-primary-200"></div>
-        <div class="layout-main"></div>
-      </div>
-    </template>
-    <template #vertical-hybrid-header-first>
-      <div class="layout-sider h-full w-8px !bg-primary"></div>
-      <div class="layout-sider h-full w-16px !bg-primary-300"></div>
-      <div class="vertical-wrapper">
-        <div class="layout-header bg-primary"></div>
+        <div class="layout-header"></div>
        <div class="layout-main"></div>
      </div>
    </template>
    <template #horizontal>
-      <div class="layout-header !bg-primary"></div>
+      <div class="layout-header"></div>
      <div class="horizontal-wrapper">
        <div class="layout-main"></div>
      </div>
    </template>
-    <template #top-hybrid-sidebar-first>
-      <div class="layout-header !bg-primary-300"></div>
-      <div class="horizontal-wrapper">
-        <div class="layout-sider w-18px !bg-primary"></div>
-        <div class="layout-main"></div>
-      </div>
-    </template>
-    <template #top-hybrid-header-first>
-      <div class="layout-header bg-primary"></div>
+    <template #horizontal-mix>
+      <div class="layout-header"></div>
      <div class="horizontal-wrapper">
        <div class="layout-sider w-18px"></div>
        <div class="layout-main"></div>
      </div>
    </template>
  </LayoutModeCard>
+  <SettingItem
+    v-if="themeStore.layout.mode === 'horizontal-mix'"
+    :label="$t('theme.layoutMode.reverseHorizontalMix')"
+    class="mt-16px"
+  >
+    <NSwitch :value="themeStore.layout.reverseHorizontalMix" @update:value="handleReverseHorizontalMixChange" />
+  </SettingItem>
 </template>

 <style scoped>
 .layout-header {
-  --uno: h-16px rd-4px;
+  --uno: h-16px bg-primary rd-4px;
 }

 .layout-sider {
--- a/src/layouts/modules/theme-drawer/modules/layout/index.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/index.vue
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { useThemeStore } from '@/store/modules/theme';
-import LayoutMode from './modules/layout-mode.vue';
-import TabSettings from './modules/tab-settings.vue';
-import HeaderSettings from './modules/header-settings.vue';
-import SiderSettings from './modules/sider-settings.vue';
-import FooterSettings from './modules/footer-settings.vue';
-import ContentSettings from './modules/content-settings.vue';
-
-defineOptions({
-  name: 'LayoutSettings'
-});
-
-const themeStore = useThemeStore();
-</script>
-
-<template>
-  <div class="flex-col-stretch gap-16px">
-    <LayoutMode />
-    <TabSettings />
-    <HeaderSettings />
-    <!-- The top menu mode does not have a sidebar -->
-    <SiderSettings v-if="themeStore.layout.mode !== 'horizontal'" />
-    <FooterSettings />
-    <ContentSettings />
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { themePageAnimationModeOptions, themeScrollModeOptions } from '@/constants/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { translateOptions } from '@/utils/common';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'ContentSettings'
-});
-
-const themeStore = useThemeStore();
-
-const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wrapper');
-</script>
-
-<template>
-  <NDivider>{{ $t('theme.layout.content.title') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
-    <SettingItem key="1" :label="$t('theme.layout.content.scrollMode.title')">
-      <template #suffix>
-        <IconTooltip :desc="$t('theme.layout.content.scrollMode.tip')" />
-      </template>
-      <NSelect
-        v-model:value="themeStore.layout.scrollMode"
-        :options="translateOptions(themeScrollModeOptions)"
-        size="small"
-        class="w-120px"
-      />
-    </SettingItem>
-    <SettingItem key="2" :label="$t('theme.layout.content.page.animate')">
-      <NSwitch v-model:value="themeStore.page.animate" />
-    </SettingItem>
-    <SettingItem v-if="themeStore.page.animate" key="3" :label="$t('theme.layout.content.page.mode.title')">
-      <NSelect
-        v-model:value="themeStore.page.animateMode"
-        :options="translateOptions(themePageAnimationModeOptions)"
-        size="small"
-        class="w-120px"
-      />
-    </SettingItem>
-    <SettingItem v-if="isWrapperScrollMode" key="4" :label="$t('theme.layout.content.fixedHeaderAndTab')">
-      <NSwitch v-model:value="themeStore.fixedHeaderAndTab" />
-    </SettingItem>
-  </TransitionGroup>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/footer-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/footer-settings.vue
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useThemeStore } from '@/store/modules/theme';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'FooterSettings'
-});
-
-const themeStore = useThemeStore();
-
-const layoutMode = computed(() => themeStore.layout.mode);
-const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wrapper');
-const isMixHorizontalMode = computed(() =>
-  ['top-hybrid-sidebar-first', 'top-hybrid-header-first'].includes(layoutMode.value)
-);
-</script>
-
-<template>
-  <NDivider>{{ $t('theme.layout.footer.title') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
-    <SettingItem key="1" :label="$t('theme.layout.footer.visible')">
-      <NSwitch v-model:value="themeStore.footer.visible" />
-    </SettingItem>
-    <SettingItem
-      v-if="themeStore.footer.visible && isWrapperScrollMode"
-      key="2"
-      :label="$t('theme.layout.footer.fixed')"
-    >
-      <NSwitch v-model:value="themeStore.footer.fixed" />
-    </SettingItem>
-    <SettingItem v-if="themeStore.footer.visible" key="3" :label="$t('theme.layout.footer.height')">
-      <NInputNumber v-model:value="themeStore.footer.height" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <SettingItem
-      v-if="themeStore.footer.visible && isMixHorizontalMode"
-      key="4"
-      :label="$t('theme.layout.footer.right')"
-    >
-      <NSwitch v-model:value="themeStore.footer.right" />
-    </SettingItem>
-  </TransitionGroup>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/header-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/header-settings.vue
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { useThemeStore } from '@/store/modules/theme';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'HeaderSettings'
-});
-
-const themeStore = useThemeStore();
-</script>
-
-<template>
-  <NDivider>{{ $t('theme.layout.header.title') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
-    <SettingItem key="1" :label="$t('theme.layout.header.height')">
-      <NInputNumber v-model:value="themeStore.header.height" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <SettingItem key="2" :label="$t('theme.layout.header.breadcrumb.visible')">
-      <NSwitch v-model:value="themeStore.header.breadcrumb.visible" />
-    </SettingItem>
-    <SettingItem
-      v-if="themeStore.header.breadcrumb.visible"
-      key="3"
-      :label="$t('theme.layout.header.breadcrumb.showIcon')"
-    >
-      <NSwitch v-model:value="themeStore.header.breadcrumb.showIcon" />
-    </SettingItem>
-  </TransitionGroup>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useThemeStore } from '@/store/modules/theme';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'SiderSettings'
-});
-
-const themeStore = useThemeStore();
-
-const layoutMode = computed(() => themeStore.layout.mode);
-const isMixLayoutMode = computed(() => layoutMode.value.includes('mix') || layoutMode.value.includes('hybrid'));
-</script>
-
-<template>
-  <NDivider>{{ $t('theme.layout.sider.title') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
-    <SettingItem v-if="layoutMode === 'vertical'" key="1" :label="$t('theme.layout.sider.width')">
-      <NInputNumber v-model:value="themeStore.sider.width" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <SettingItem v-if="layoutMode === 'vertical'" key="2" :label="$t('theme.layout.sider.collapsedWidth')">
-      <NInputNumber v-model:value="themeStore.sider.collapsedWidth" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <SettingItem v-if="isMixLayoutMode" key="3" :label="$t('theme.layout.sider.mixWidth')">
-      <NInputNumber v-model:value="themeStore.sider.mixWidth" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <SettingItem v-if="isMixLayoutMode" key="4" :label="$t('theme.layout.sider.mixCollapsedWidth')">
-      <NInputNumber v-model:value="themeStore.sider.mixCollapsedWidth" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <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>
-  </TransitionGroup>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- 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,64 +0,0 @@
-<script setup lang="ts">
-import { resetCacheStrategyOptions, themeTabModeOptions } from '@/constants/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { translateOptions } from '@/utils/common';
-import { $t } from '@/locales';
-import SettingItem from '../../../components/setting-item.vue';
-
-defineOptions({
-  name: 'TabSettings'
-});
-
-const themeStore = useThemeStore();
-</script>
-
-<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>
-    <SettingItem v-if="themeStore.tab.visible" key="2" :label="$t('theme.layout.tab.cache')">
-      <template #suffix>
-        <IconTooltip :desc="$t('theme.layout.tab.cacheTip')" />
-      </template>
-      <NSwitch v-model:value="themeStore.tab.cache" />
-    </SettingItem>
-    <SettingItem v-if="themeStore.tab.visible" key="3" :label="$t('theme.layout.tab.height')">
-      <NInputNumber v-model:value="themeStore.tab.height" size="small" :step="1" class="w-120px" />
-    </SettingItem>
-    <SettingItem v-if="themeStore.tab.visible" key="4" :label="$t('theme.layout.tab.mode.title')">
-      <NSelect
-        v-model:value="themeStore.tab.mode"
-        :options="translateOptions(themeTabModeOptions)"
-        size="small"
-        class="w-120px"
-      />
-    </SettingItem>
-  </TransitionGroup>
-</template>
-
-<style scoped>
-.setting-list-move,
-.setting-list-enter-active,
-.setting-list-leave-active {
-  --uno: transition-all-300;
-}
-
-.setting-list-enter-from,
-.setting-list-leave-to {
-  --uno: opacity-0 -translate-x-30px;
-}
-
-.setting-list-leave-active {
-  --uno: absolute;
-}
-</style>
--- a/src/layouts/modules/theme-drawer/modules/page-fun.vue
+++ b/src/layouts/modules/theme-drawer/modules/page-fun.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  resetCacheStrategyOptions,
+  themePageAnimationModeOptions,
+  themeScrollModeOptions,
+  themeTabModeOptions
+} from '@/constants/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { translateOptions } from '@/utils/common';
+import { $t } from '@/locales';
+import SettingItem from '../components/setting-item.vue';
+
+defineOptions({
+  name: 'PageFun'
+});
+
+const themeStore = useThemeStore();
+
+const layoutMode = computed(() => themeStore.layout.mode);
+
+const isMixLayoutMode = computed(() => layoutMode.value.includes('mix'));
+
+const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wrapper');
+</script>
+
+<template>
+  <NDivider>{{ $t('theme.pageFunTitle') }}</NDivider>
+  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
+    <SettingItem key="0" :label="$t('theme.resetCacheStrategy.title')">
+      <NSelect
+        v-model:value="themeStore.resetCacheStrategy"
+        :options="translateOptions(resetCacheStrategyOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
+    <SettingItem key="1" :label="$t('theme.scrollMode.title')">
+      <NSelect
+        v-model:value="themeStore.layout.scrollMode"
+        :options="translateOptions(themeScrollModeOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
+    <SettingItem key="1-1" :label="$t('theme.page.animate')">
+      <NSwitch v-model:value="themeStore.page.animate" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.page.animate" key="1-2" :label="$t('theme.page.mode.title')">
+      <NSelect
+        v-model:value="themeStore.page.animateMode"
+        :options="translateOptions(themePageAnimationModeOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
+    <SettingItem v-if="isWrapperScrollMode" key="2" :label="$t('theme.fixedHeaderAndTab')">
+      <NSwitch v-model:value="themeStore.fixedHeaderAndTab" />
+    </SettingItem>
+    <SettingItem key="3" :label="$t('theme.header.height')">
+      <NInputNumber v-model:value="themeStore.header.height" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem key="4" :label="$t('theme.header.breadcrumb.visible')">
+      <NSwitch v-model:value="themeStore.header.breadcrumb.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.header.breadcrumb.visible" key="4-1" :label="$t('theme.header.breadcrumb.showIcon')">
+      <NSwitch v-model:value="themeStore.header.breadcrumb.showIcon" />
+    </SettingItem>
+    <SettingItem key="5" :label="$t('theme.tab.visible')">
+      <NSwitch v-model:value="themeStore.tab.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.tab.visible" key="5-1" :label="$t('theme.tab.cache')">
+      <NSwitch v-model:value="themeStore.tab.cache" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.tab.visible" key="5-2" :label="$t('theme.tab.height')">
+      <NInputNumber v-model:value="themeStore.tab.height" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.tab.visible" key="5-3" :label="$t('theme.tab.mode.title')">
+      <NSelect
+        v-model:value="themeStore.tab.mode"
+        :options="translateOptions(themeTabModeOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
+    <SettingItem v-if="layoutMode === 'vertical'" key="6-1" :label="$t('theme.sider.width')">
+      <NInputNumber v-model:value="themeStore.sider.width" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="layoutMode === 'vertical'" key="6-2" :label="$t('theme.sider.collapsedWidth')">
+      <NInputNumber v-model:value="themeStore.sider.collapsedWidth" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="isMixLayoutMode" key="6-3" :label="$t('theme.sider.mixWidth')">
+      <NInputNumber v-model:value="themeStore.sider.mixWidth" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="isMixLayoutMode" key="6-4" :label="$t('theme.sider.mixCollapsedWidth')">
+      <NInputNumber v-model:value="themeStore.sider.mixCollapsedWidth" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="layoutMode === 'vertical-mix'" key="6-5" :label="$t('theme.sider.mixChildMenuWidth')">
+      <NInputNumber v-model:value="themeStore.sider.mixChildMenuWidth" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem key="7" :label="$t('theme.footer.visible')">
+      <NSwitch v-model:value="themeStore.footer.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.footer.visible && isWrapperScrollMode" key="7-1" :label="$t('theme.footer.fixed')">
+      <NSwitch v-model:value="themeStore.footer.fixed" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.footer.visible" key="7-2" :label="$t('theme.footer.height')">
+      <NInputNumber v-model:value="themeStore.footer.height" size="small" :step="1" class="w-120px" />
+    </SettingItem>
+    <SettingItem
+      v-if="themeStore.footer.visible && layoutMode === 'horizontal-mix'"
+      key="7-3"
+      :label="$t('theme.footer.right')"
+    >
+      <NSwitch v-model:value="themeStore.footer.right" />
+    </SettingItem>
+    <SettingItem key="8" :label="$t('theme.watermark.visible')">
+      <NSwitch v-model:value="themeStore.watermark.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.watermark.visible" key="8-1" :label="$t('theme.watermark.enableUserName')">
+      <NSwitch v-model:value="themeStore.watermark.enableUserName" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.watermark.visible" key="8-2" :label="$t('theme.watermark.text')">
+      <NInput
+        v-model:value="themeStore.watermark.text"
+        autosize
+        type="text"
+        size="small"
+        class="w-120px"
+        placeholder="SoybeanAdmin"
+      />
+    </SettingItem>
+    <SettingItem key="9" :label="$t('theme.header.multilingual.visible')">
+      <NSwitch v-model:value="themeStore.header.multilingual.visible" />
+    </SettingItem>
+    <SettingItem key="10" :label="$t('theme.header.globalSearch.visible')">
+      <NSwitch v-model:value="themeStore.header.globalSearch.visible" />
+    </SettingItem>
+  </TransitionGroup>
+</template>
+
+<style scoped>
+.setting-list-move,
+.setting-list-enter-active,
+.setting-list-leave-active {
+  --uno: transition-all-300;
+}
+
+.setting-list-enter-from,
+.setting-list-leave-to {
+  --uno: opacity-0 -translate-x-30px;
+}
+
+.setting-list-leave-active {
+  --uno: absolute;
+}
+</style>
--- a/src/layouts/modules/theme-drawer/modules/preset/index.vue
+++ b/src/layouts/modules/theme-drawer/modules/preset/index.vue
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import ThemePreset from './modules/theme-preset.vue';
-
-defineOptions({
-  name: 'PresetSettings'
-});
-</script>
-
-<template>
-  <div class="flex-col-stretch gap-16px">
-    <ThemePreset />
-  </div>
-</template>
-
-<style scoped></style>
--- a/Show More
+++ b/Show More