chore(projects): merge branch main into example

2025-09-20 18:46:39 +08:00 · 2024-07-22 00:51:51 +08:00 · 2024-07-22 00:51:51 +08:00 · 4a7e9c2669
commit 4a7e9c2669
parent d6f3effce0 613c836e0f
50 changed files with 950 additions and 430 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,6 +1,44 @@
 # Changelog


+## [v1.3.0](https://github.com/soybeanjs/soybean-admin/compare/v1.2.8...v1.3.0) (2024-07-22)
+
+### &nbsp;&nbsp;&nbsp;🚨 Breaking Changes
+
+- **projects**: refactor global menu & support `reversed-horizontal-mix-menu`. close #365 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/365 [<samp>(087e5)</samp>](https://github.com/soybeanjs/soybean-admin/commit/087e532)
+
+### &nbsp;&nbsp;&nbsp;🚀 Features
+
+- **packages**:
+  - `@sa/scripts`: command `gitCommit` support chinese &nbsp;-&nbsp; by @mmdapl in https://github.com/soybeanjs/soybean-admin/issues/548 [<samp>(06971)</samp>](https://github.com/soybeanjs/soybean-admin/commit/06971f3)
+  - @sa/axios: replace CancelTokenSource by AbortController. close #530, close #532 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/530 and https://github.com/soybeanjs/soybean-admin/issues/532 [<samp>(527fd)</samp>](https://github.com/soybeanjs/soybean-admin/commit/527fd79)
+  - @sa/scripts: add ignore pattern list for command `gitCommitVerify`. close #504 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/504 [<samp>(958d0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/958d0ba)
+- **projects**:
+  - make branch `main` tiny & modify request retry times to 0 &nbsp;-&nbsp; by @Azir-11 [<samp>(793b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/793b16e)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **hooks**: prevent program freezing when pagesize returns 0 &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/545 [<samp>(f4eeb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4eeb2e)
+
+### &nbsp;&nbsp;&nbsp;💅 Refactors
+
+- **projects**:
+  - combine `theme tokens` and `theme settings`. close #379 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/379 [<samp>(1d1b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1d1b148)
+  - change css vars mount to root &nbsp;-&nbsp; by @honghuangdc [<samp>(00f41)</samp>](https://github.com/soybeanjs/soybean-admin/commit/00f41dd)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(a0b76)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a0b76da)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**: update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(f6bd6)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f6bd6b8)
+- **projects**: add script `czh` &nbsp;-&nbsp; by @honghuangdc [<samp>(02069)</samp>](https://github.com/soybeanjs/soybean-admin/commit/0206969)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![mmdapl](https://github.com/mmdapl.png?size=48)](https://github.com/mmdapl)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+
 ## [v1.2.8](https://github.com/soybeanjs/soybean-admin/compare/v1.2.7...v1.2.8) (2024-07-20)

 ### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@ -1,6 +1,73 @@
 # 更新日志


+## [v1.3.0](https://github.com/soybeanjs/soybean-admin/compare/v1.2.8...v1.3.0) (2024-07-22)
+
+### &nbsp;&nbsp;&nbsp;🚨 破坏性变更
+
+- **项目**: 重构全局菜单 & 支持 `reversed-horizontal-mix-menu`。关闭 #365 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/365 提出 [<samp>(087e5)</samp>](https://github.com/soybeanjs/soybean-admin/commit/087e532)
+
+### &nbsp;&nbsp;&nbsp;🚀 功能
+
+- **包**:
+  - `@sa/scripts`: 命令 `gitCommit` 支持中文 &nbsp;-&nbsp; 由 @mmdapl 在 https://github.com/soybeanjs/soybean-admin/issues/548 提出 [<samp>(06971)</samp>](https://github.com/soybeanjs/soybean-admin/commit/06971f3)
+  - @sa/axios: 用 AbortController 替换 CancelTokenSource。关闭 #530, 关闭 #532 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/530 和 https://github.com/soybeanjs/soybean-admin/issues/532 提出 [<samp>(527fd)</samp>](https://github.com/soybeanjs/soybean-admin/commit/527fd79)
+  - @sa/scripts: 为命令 `gitCommitVerify` 添加忽略模式列表。关闭 #504 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/504 提出 [<samp>(958d0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/958d0ba)
+- **项目**:
+  - 使分支 `main` 更精简 & 修改请求重试次数为 0 &nbsp;-&nbsp; 由 @Azir-11 提出 [<samp>(793b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/793b16e)
+
+### &nbsp;&nbsp;&nbsp;🐞 修复
+
+- **钩子**: 当 pagesize 返回 0 时防止程序冻结 &nbsp;-&nbsp; 由 @Azir-11 在 https://github.com/soybeanjs/soybean-admin/issues/545 提出 [<samp>(f4eeb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4eeb2e)
+
+### &nbsp;&nbsp;&nbsp;💅 重构
+
+- **项目**:
+  - 合并 `theme tokens` 和 `theme settings`。关闭 #379 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/379 提出 [<samp>(1d1b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1d1b148)
+  - 将 css 变量挂载到 root &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(00f41)</samp>](https://github.com/soybeanjs/soybean-admin/commit/00f41dd)
+
+### &nbsp;&nbsp;&nbsp;📖 文档
+
+- **项目**: 更新更新日志 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(a0b76)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a0b76da)
+
+### &nbsp;&nbsp;&nbsp;🏡 杂务
+
+- **依赖**: 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(f6bd6)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f6bd6b8)
+- **项目**: 添加脚本 `czh` &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(02069)</samp>](https://github.com/soybeanjs/soybean-admin/commit/0206969)
+
+### &nbsp;&nbsp;&nbsp;❤️ 贡献者
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![mmdapl](https://github.com/mmdapl.png?size=48)](https://github.com/mmdapl)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+
+
+## [v1.2.8](https://github.com/soybeanjs/soybean-admin/compare/v1.2.7...v1.2.8) (2024-07-20)
+
+### &nbsp;&nbsp;&nbsp;🐞 修复
+
+- **包**:
+  - @sa/hooks: 修复 useHookTable 的 searchParams。修复了 #552 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/552 提出 [<samp>(96c10)</samp>](https://github.com/soybeanjs/soybean-admin/commit/96c1044)
+- **类型**:
+  - 修复了引用类型错误 &nbsp;-&nbsp; 由 **dodu2014** 在 https://github.com/soybeanjs/soybean-admin/issues/551 提出 [<samp>(3e2a9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3e2a993)
+  - 修复 useHookTable 的数据类型 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(276ea)</samp>](https://github.com/soybeanjs/soybean-admin/commit/276ea7f)
+
+### &nbsp;&nbsp;&nbsp;💅 重构
+
+- **项目**: 用 `klona` 替换 `lodash-es` 的 `cloneDeep` &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(a9133)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a91335d)
+
+### &nbsp;&nbsp;&nbsp;📖 文档
+
+- **项目**: 更新更新日志 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(58fc0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/58fc096)
+
+### &nbsp;&nbsp;&nbsp;🏡 杂务
+
+- **依赖**: 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(cf019)</samp>](https://github.com/soybeanjs/soybean-admin/commit/cf0192a)
+
+### &nbsp;&nbsp;&nbsp;❤️ 贡献者
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
+[dodu2014](mailto:dodu@live.cn)
+
+
 ## [v1.2.7](https://github.com/honghuangdc/soybean-admin/compare/v1.2.6...v1.2.7) (2024-07-12)

 ### &nbsp;&nbsp;&nbsp;🛠 优化
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "soybean-admin",
  "type": "module",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
@ -35,6 +35,7 @@
    "build:test": "vite build --mode test",
    "cleanup": "sa cleanup",
    "commit": "sa git-commit",
+    "czh": "sa git-commit -l=zh-cn",
    "dev": "vite --mode test",
    "dev:prod": "vite --mode prod",
    "gen-route": "sa gen-route",
--- a/packages/axios/package.json
+++ b/packages/axios/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/axios",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/axios/src/index.ts
+++ b/packages/axios/src/index.ts
@ -1,5 +1,5 @@
 import axios, { AxiosError } from 'axios';
-import type { AxiosResponse, CancelTokenSource, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
+import type { AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
 import axiosRetry from 'axios-retry';
 import { nanoid } from '@sa/utils';
 import { createAxiosConfig, createDefaultOptions, createRetryOptions } from './options';
@ -22,7 +22,7 @@ function createCommonRequest<ResponseData = any>(
  const axiosConf = createAxiosConfig(axiosConfig);
  const instance = axios.create(axiosConf);

-  const cancelTokenSourceMap = new Map<string, CancelTokenSource>();
+  const abortControllerMap = new Map<string, AbortController>();

  // config axios retry
  const retryOptions = createRetryOptions(axiosConf);
@ -35,10 +35,12 @@ function createCommonRequest<ResponseData = any>(
    const requestId = nanoid();
    config.headers.set(REQUEST_ID_KEY, requestId);

-    // config cancel token
-    const cancelTokenSource = axios.CancelToken.source();
-    config.cancelToken = cancelTokenSource.token;
-    cancelTokenSourceMap.set(requestId, cancelTokenSource);
+    // config abort controller
+    if (!config.signal) {
+      const abortController = new AbortController();
+      config.signal = abortController.signal;
+      abortControllerMap.set(requestId, abortController);
+    }

    // handle config by hook
    const handledConfig = opts.onRequest?.(config) || config;
@ -79,18 +81,18 @@ function createCommonRequest<ResponseData = any>(
  );

  function cancelRequest(requestId: string) {
-    const cancelTokenSource = cancelTokenSourceMap.get(requestId);
-    if (cancelTokenSource) {
-      cancelTokenSource.cancel();
-      cancelTokenSourceMap.delete(requestId);
+    const abortController = abortControllerMap.get(requestId);
+    if (abortController) {
+      abortController.abort();
+      abortControllerMap.delete(requestId);
    }
  }

  function cancelAllRequest() {
-    cancelTokenSourceMap.forEach(cancelTokenSource => {
-      cancelTokenSource.cancel();
+    abortControllerMap.forEach(abortController => {
+      abortController.abort();
    });
-    cancelTokenSourceMap.clear();
+    abortControllerMap.clear();
  }

  return {
--- a/packages/axios/src/options.ts
+++ b/packages/axios/src/options.ts
@ -20,7 +20,7 @@ export function createDefaultOptions<ResponseData = any>(options?: Partial<Reque

 export function createRetryOptions(config?: Partial<CreateAxiosDefaults>) {
  const retryConfig: IAxiosRetryConfig = {
-    retries: 3
+    retries: 0
  };

  Object.assign(retryConfig, config);
--- a/packages/axios/src/type.ts
+++ b/packages/axios/src/type.ts
@ -69,7 +69,19 @@ export type CustomAxiosRequestConfig<R extends ResponseType = 'json'> = Omit<Axi
 };

 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
+   *
+   * if the request provide abort controller sign from config, it will not collect in the abort controller map
+   */
  cancelAllRequest: () => void;
  /** you can set custom state in the request instance */
  state: T;
--- a/packages/color/package.json
+++ b/packages/color/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/color",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/hooks",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/materials/package.json
+++ b/packages/materials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/materials",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/ofetch/package.json
+++ b/packages/ofetch/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/fetch",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/scripts",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "bin": {
    "sa": "./bin.ts"
  },
--- a/packages/scripts/src/commands/git-commit.ts
+++ b/packages/scripts/src/commands/git-commit.ts
@ -1,9 +1,9 @@
 import path from 'node:path';
 import { readFileSync } from 'node:fs';
 import { prompt } from 'enquirer';
-import { bgRed, green, red, yellow } from 'kolorist';
 import { execCommand } from '../shared';
-import type { CliOption } from '../types';
+import { locales } from '../locales';
+import type { Lang } from '../locales';

 interface PromptObject {
  types: string;
@ -14,13 +14,11 @@ interface PromptObject {
 /**
 * Git commit with Conventional Commits standard
 *
- * @param gitCommitTypes
- * @param gitCommitScopes
+ * @param lang
 */
-export async function gitCommit(
-  gitCommitTypes: CliOption['gitCommitTypes'],
-  gitCommitScopes: CliOption['gitCommitScopes']
-) {
+export async function gitCommit(lang: Lang = 'en-us') {
+  const { gitCommitMessages, gitCommitTypes, gitCommitScopes } = locales[lang];
+
  const typesChoices = gitCommitTypes.map(([value, msg]) => {
    const nameWithSuffix = `${value}:`;

@ -41,19 +39,19 @@ export async function gitCommit(
    {
      name: 'types',
      type: 'select',
-      message: 'Please select a type',
+      message: gitCommitMessages.types,
      choices: typesChoices
    },
    {
      name: 'scopes',
      type: 'select',
-      message: 'Please select a scope',
+      message: gitCommitMessages.scopes,
      choices: scopesChoices
    },
    {
      name: 'description',
      type: 'text',
-      message: `Please enter a description (add prefix ${yellow('!')} to indicate breaking change)`
+      message: gitCommitMessages.description
    }
  ]);

@ -67,20 +65,20 @@ export async function gitCommit(
 }

 /** Git commit message verify */
-export async function gitCommitVerify() {
+export async function gitCommitVerify(lang: Lang = 'en-us', ignores: RegExp[] = []) {
  const gitPath = await execCommand('git', ['rev-parse', '--show-toplevel']);

  const gitMsgPath = path.join(gitPath, '.git', 'COMMIT_EDITMSG');

  const commitMsg = readFileSync(gitMsgPath, 'utf8').trim();

+  if (ignores.some(regExp => regExp.test(commitMsg))) return;
+
  const REG_EXP = /(?<type>[a-z]+)(?:\((?<scope>.+)\))?(?<breaking>!)?: (?<description>.+)/i;

  if (!REG_EXP.test(commitMsg)) {
-    throw new Error(
-      `${bgRed(' ERROR ')} ${red('git commit message must match the Conventional Commits standard!')}\n\n${green(
-        'Recommended to use the command `pnpm commit` to generate Conventional Commits compliant commit information.\nGet more info about Conventional Commits, follow this link: https://conventionalcommits.org'
-      )}`
-    );
+    const errorMsg = locales[lang].gitCommitVerify;
+
+    throw new Error(errorMsg);
  }
 }
--- a/packages/scripts/src/config/index.ts
+++ b/packages/scripts/src/config/index.ts
@ -12,34 +12,18 @@ const defaultOptions: CliOption = {
    '**/node_modules',
    '!node_modules/**'
  ],
-  gitCommitTypes: [
-    ['feat', 'A new feature'],
-    ['fix', 'A bug fix'],
-    ['docs', 'Documentation only changes'],
-    ['style', 'Changes that do not affect the meaning of the code'],
-    ['refactor', 'A code change that neither fixes a bug nor adds a feature'],
-    ['perf', 'A code change that improves performance'],
-    ['optimize', 'A code change that optimizes code quality'],
-    ['test', 'Adding missing tests or correcting existing tests'],
-    ['build', 'Changes that affect the build system or external dependencies'],
-    ['ci', 'Changes to our CI configuration files and scripts'],
-    ['chore', "Other changes that don't modify src or test files"],
-    ['revert', 'Reverts a previous commit']
-  ],
-  gitCommitScopes: [
-    ['projects', 'project'],
-    ['packages', 'packages'],
-    ['components', 'components'],
-    ['hooks', 'hook functions'],
-    ['utils', 'utils functions'],
-    ['types', 'TS declaration'],
-    ['styles', 'style'],
-    ['deps', 'project dependencies'],
-    ['release', 'release project'],
-    ['other', 'other changes']
-  ],
  ncuCommandArgs: ['--deep', '-u'],
-  changelogOptions: {}
+  changelogOptions: {},
+  gitCommitVerifyIgnores: [
+    /^((Merge pull request)|(Merge (.*?) into (.*?)|(Merge branch (.*?)))(?:\r?\n)*$)/m,
+    /^(Merge tag (.*?))(?:\r?\n)*$/m,
+    /^(R|r)evert (.*)/,
+    /^(amend|fixup|squash)!/,
+    /^(Merged (.*?)(in|into) (.*)|Merged PR (.*): (.*))/,
+    /^Merge remote-tracking branch(\s*)(.*)/,
+    /^Automatic merge(.*)/,
+    /^Auto-merged (.*?) into (.*)/
+  ]
 };

 export async function loadCliOptions(overrides?: Partial<CliOption>, cwd = process.cwd()) {
--- a/packages/scripts/src/index.ts
+++ b/packages/scripts/src/index.ts
@ -3,6 +3,7 @@ import { blue, lightGreen } from 'kolorist';
 import { version } from '../package.json';
 import { cleanup, genChangelog, generateRoute, gitCommit, gitCommitVerify, release, updatePkg } from './commands';
 import { loadCliOptions } from './config';
+import type { Lang } from './locales';

 type Command = 'cleanup' | 'update-pkg' | 'git-commit' | 'git-commit-verify' | 'changelog' | 'release' | 'gen-route';

@ -25,6 +26,12 @@ interface CommandArg {
   * Multiple values use "," to separate them
   */
  cleanupDir?: string;
+  /**
+   * display lang of cli
+   *
+   * @default 'en-us'
+   */
+  lang?: Lang;
 }

 export async function setupCli() {
@ -44,6 +51,7 @@ export async function setupCli() {
      '-c, --cleanupDir <dir>',
      'The glob pattern of dirs to cleanup, If not set, it will use the default value, Multiple values use "," to separate them'
    )
+    .option('-l, --lang <lang>', 'display lang of cli', { default: 'en-us', type: [String] })
    .help();

  const commands: CommandWithAction<CommandArg> = {
@ -61,14 +69,14 @@ export async function setupCli() {
    },
    'git-commit': {
      desc: 'git commit, generate commit message which match Conventional Commits standard',
-      action: async () => {
-        await gitCommit(cliOptions.gitCommitTypes, cliOptions.gitCommitScopes);
+      action: async args => {
+        await gitCommit(args?.lang);
      }
    },
    'git-commit-verify': {
      desc: 'verify git commit message, make sure it match Conventional Commits standard',
-      action: async () => {
-        await gitCommitVerify();
+      action: async args => {
+        await gitCommitVerify(args?.lang, cliOptions.gitCommitVerifyIgnores);
      }
    },
    changelog: {
--- a/packages/scripts/src/locales/index.ts
+++ b/packages/scripts/src/locales/index.ts
@ -0,0 +1,78 @@
+import { bgRed, green, red, yellow } from 'kolorist';
+
+export type Lang = 'zh-cn' | 'en-us';
+
+export const locales = {
+  'zh-cn': {
+    gitCommitMessages: {
+      types: '请选择提交类型',
+      scopes: '请选择提交范围',
+      description: `请输入描述信息（${yellow('!')}开头表示破坏性改动`
+    },
+    gitCommitTypes: [
+      ['feat', '新功能'],
+      ['fix', '修复Bug'],
+      ['docs', '只更新文档'],
+      ['style', '修改代码风格，不影响代码含义的变更'],
+      ['refactor', '代码重构，既不修复 bug 也不添加功能的代码变更'],
+      ['perf', '可提高性能的代码更改'],
+      ['optimize', '优化代码质量的代码更改'],
+      ['test', '添加缺失的测试或更正现有测'],
+      ['build', '影响构建系统或外部依赖项的更改'],
+      ['ci', '对 CI 配置文件和脚本的更改'],
+      ['chore', '没有修改src或测试文件的其他变更'],
+      ['revert', '还原先前的提交']
+    ] as [string, string][],
+    gitCommitScopes: [
+      ['projects', '项目'],
+      ['packages', '包'],
+      ['components', '组件'],
+      ['hooks', '钩子函数'],
+      ['utils', '工具函数'],
+      ['types', 'TS类型声明'],
+      ['styles', '代码风格'],
+      ['deps', '项目依赖'],
+      ['release', '发布项目新版本'],
+      ['other', '其他的变更']
+    ] as [string, string][],
+    gitCommitVerify: `${bgRed(' 错误 ')} ${red('git 提交信息必须符合 Conventional Commits 标准!')}\n\n${green(
+      '推荐使用命令 `pnpm commit` 生成符合 Conventional Commits 标准的提交信息。\n获取有关 Conventional Commits 的更多信息，请访问此链接: https://conventionalcommits.org'
+    )}`
+  },
+  'en-us': {
+    gitCommitMessages: {
+      types: 'Please select a type',
+      scopes: 'Please select a scope',
+      description: `Please enter a description (add prefix ${yellow('!')} to indicate breaking change)`
+    },
+    gitCommitTypes: [
+      ['feat', 'A new feature'],
+      ['fix', 'A bug fix'],
+      ['docs', 'Documentation only changes'],
+      ['style', 'Changes that do not affect the meaning of the code'],
+      ['refactor', 'A code change that neither fixes a bug nor adds a feature'],
+      ['perf', 'A code change that improves performance'],
+      ['optimize', 'A code change that optimizes code quality'],
+      ['test', 'Adding missing tests or correcting existing tests'],
+      ['build', 'Changes that affect the build system or external dependencies'],
+      ['ci', 'Changes to our CI configuration files and scripts'],
+      ['chore', "Other changes that don't modify src or test files"],
+      ['revert', 'Reverts a previous commit']
+    ] as [string, string][],
+    gitCommitScopes: [
+      ['projects', 'project'],
+      ['packages', 'packages'],
+      ['components', 'components'],
+      ['hooks', 'hook functions'],
+      ['utils', 'utils functions'],
+      ['types', 'TS declaration'],
+      ['styles', 'style'],
+      ['deps', 'project dependencies'],
+      ['release', 'release project'],
+      ['other', 'other changes']
+    ] as [string, string][],
+    gitCommitVerify: `${bgRed(' ERROR ')} ${red('git commit message must match the Conventional Commits standard!')}\n\n${green(
+      'Recommended to use the command `pnpm commit` to generate Conventional Commits compliant commit information.\nGet more info about Conventional Commits, follow this link: https://conventionalcommits.org'
+    )}`
+  }
+} satisfies Record<Lang, Record<string, unknown>>;
--- a/packages/scripts/src/types/index.ts
+++ b/packages/scripts/src/types/index.ts
@ -14,10 +14,6 @@ export interface CliOption {
   * ```
   */
  cleanupDirs: string[];
-  /** Git commit types */
-  gitCommitTypes: [string, string][];
-  /** Git commit scopes */
-  gitCommitScopes: [string, string][];
  /**
   * Npm-check-updates command args
   *
@ -30,4 +26,6 @@ export interface CliOption {
   * @link https://github.com/soybeanjs/changelog
   */
  changelogOptions: Partial<ChangelogOption>;
+  /** The ignore pattern list of git commit verify */
+  gitCommitVerifyIgnores: RegExp[];
 }
--- a/packages/uno-preset/package.json
+++ b/packages/uno-preset/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/uno-preset",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sa/utils",
-  "version": "1.2.8",
+  "version": "1.3.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/src/components/common/dark-mode-container.vue
+++ b/src/components/common/dark-mode-container.vue
@ -9,7 +9,7 @@ defineProps<Props>();
 </script>

 <template>
-  <div class="bg-container text-base_text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
+  <div class="bg-container text-base-text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
    <slot></slot>
  </div>
 </template>
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@ -1,5 +1,9 @@
 import { transformRecordToOption } from '@/utils/common';

+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.themeSchema.light',
  dark: 'theme.themeSchema.dark',
--- a/src/hooks/common/router.ts
+++ b/src/hooks/common/router.ts
@ -30,17 +30,30 @@ export function useRouterPush(inSetup = true) {
      name: key
    };

-    if (query) {
+    if (Object.keys(query || {}).length) {
      routeLocation.query = query;
    }

-    if (params) {
+    if (Object.keys(params || {}).length) {
      routeLocation.params = params;
    }

    return routerPush(routeLocation);
  }

+  function routerPushByKeyWithMetaQuery(key: RouteKey) {
+    const allRoutes = router.getRoutes();
+    const meta = allRoutes.find(item => item.name === key)?.meta || null;
+
+    const query: Record<string, string> = {};
+
+    meta?.query?.forEach(item => {
+      query[item.key] = item.value;
+    });
+
+    return routerPushByKey(key, { query });
+  }
+
  async function toHome() {
    return routerPushByKey('root');
  }
@ -95,6 +108,7 @@ export function useRouterPush(inSetup = true) {
    routerPush,
    routerBack,
    routerPushByKey,
+    routerPushByKeyWithMetaQuery,
    toLogin,
    toggleLoginModule,
    redirectFromLogin
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@ -40,17 +40,20 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
    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) * size + index + 1
+          index: (current - 1) * pageSize + index + 1
        };
      });

      return {
        data: recordsWithIndex,
        pageNum: current,
-        pageSize: size,
+        pageSize,
        total
      };
    },
--- a/src/layouts/base-layout/index.vue
+++ b/src/layouts/base-layout/index.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import type { LayoutMode } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
@ -18,7 +18,9 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { menus } = setupMixMenuContext();
+const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = setupMixMenuContext();
+
+const GlobalMenu = defineAsyncComponent(() => import('../modules/global-menu/index.vue'));

 const layoutMode = computed(() => {
  const vertical: LayoutMode = 'vertical';
@ -26,6 +28,9 @@ const layoutMode = computed(() => {
  return themeStore.layout.mode.includes(vertical) ? vertical : horizontal;
 });

+const headerProps = computed(() => {
+  const { mode, reverseHorizontalMix } = themeStore.layout;
+
  const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
    vertical: {
      showLogo: false,
@ -45,11 +50,12 @@ const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps
    'horizontal-mix': {
      showLogo: true,
      showMenu: true,
-    showMenuToggler: false
+      showMenuToggler: reverseHorizontalMix && isActiveFirstLevelMenuHasChildren.value
    }
  };

-const headerProps = computed(() => headerPropsConfig[themeStore.layout.mode]);
+  return headerPropsConfig[mode];
+});

 const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');

@ -62,11 +68,16 @@ const siderWidth = computed(() => getSiderWidth());
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());

 function getSiderWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
  const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;

+  if (isHorizontalMix.value && reverseHorizontalMix) {
+    return isActiveFirstLevelMenuHasChildren.value ? width : 0;
+  }
+
  let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;

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

@ -78,7 +89,7 @@ function getSiderCollapsedWidth() {

  let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;

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

@ -116,6 +127,7 @@ function getSiderCollapsedWidth() {
    <template #sider>
      <GlobalSider />
    </template>
+    <GlobalMenu />
    <GlobalContent />
    <ThemeDrawer />
    <template #footer>
--- a/src/layouts/context/index.ts
+++ b/src/layouts/context/index.ts
@ -26,10 +26,30 @@ function useMixMenu() {
    setActiveFirstLevelMenuKey(firstLevelRouteName);
  }

-  const menus = computed(
+  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,
    () => {
@ -39,9 +59,12 @@ function useMixMenu() {
  );

  return {
+    allMenus,
+    firstLevelMenus,
+    childLevelMenus,
+    isActiveFirstLevelMenuHasChildren,
    activeFirstLevelMenuKey,
    setActiveFirstLevelMenuKey,
-    getActiveFirstLevelMenuKey,
-    menus
+    getActiveFirstLevelMenuKey
  };
 }
--- a/src/layouts/modules/global-header/components/user-avatar.vue
+++ b/src/layouts/modules/global-header/components/user-avatar.vue
@ -68,6 +68,7 @@ function handleDropdown(key: DropdownKey) {
  if (key === 'logout') {
    logout();
  } else {
+    // If your other options are jumps from other routes, they will be directly supported here
    routerPushByKey(key);
  }
 }
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import HorizontalMenu from '../global-menu/base-menu.vue';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import GlobalSearch from '../global-search/index.vue';
-import { useMixMenuContext } from '../../context';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';

@ -29,29 +26,15 @@ defineProps<Props>();

 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 const { isFullscreen, toggle } = useFullscreen();
-const { menus } = useMixMenuContext();
-
-const headerMenus = computed(() => {
-  if (themeStore.layout.mode === 'horizontal') {
-    return routeStore.menus;
-  }
-
-  if (themeStore.layout.mode === 'horizontal-mix') {
-    return menus.value;
-  }
-
-  return [];
-});
 </script>

 <template>
  <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
    <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
-    <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
-    <div v-else class="h-full flex-y-center flex-1-hidden">
    <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
+    <div v-if="showMenu" :id="GLOBAL_HEADER_MENU_ID" class="h-full flex-y-center flex-1-hidden"></div>
+    <div v-else class="h-full flex-y-center flex-1-hidden">
      <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
    </div>
    <div class="h-full flex-y-center justify-end">
--- a/src/layouts/modules/global-menu/base-menu.vue
+++ b/src/layouts/modules/global-menu/base-menu.vue
@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import type { MentionOption, MenuProps } from 'naive-ui';
-import { SimpleScrollbar } from '@sa/materials';
-import type { RouteKey } from '@elegant-router/types';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import { useRouterPush } from '@/hooks/common/router';
-
-defineOptions({
-  name: 'BaseMenu'
-});
-
-interface Props {
-  darkTheme?: boolean;
-  mode?: MenuProps['mode'];
-  menus: App.Global.Menu[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'vertical'
-});
-
-const route = useRoute();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-const { routerPushByKey } = useRouterPush();
-
-const naiveMenus = computed(() => props.menus as unknown as MentionOption[]);
-
-const isHorizontal = computed(() => props.mode === 'horizontal');
-
-const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);
-
-const headerHeight = computed(() => `${themeStore.header.height}px`);
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
-
-const expandedKeys = ref<string[]>([]);
-
-function updateExpandedKeys() {
-  if (isHorizontal.value || siderCollapse.value || !selectedKey.value) {
-    expandedKeys.value = [];
-    return;
-  }
-  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
-}
-
-function handleClickMenu(key: RouteKey) {
-  const query = routeStore.getRouteQueryOfMetaByKey(key);
-
-  routerPushByKey(key, { query });
-}
-
-watch(
-  () => route.name,
-  () => {
-    updateExpandedKeys();
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <SimpleScrollbar>
-    <NMenu
-      v-model:expanded-keys="expandedKeys"
-      :mode="mode"
-      :value="selectedKey"
-      :collapsed="siderCollapse"
-      :collapsed-width="themeStore.sider.collapsedWidth"
-      :collapsed-icon-size="22"
-      :options="naiveMenus"
-      :inverted="darkTheme"
-      :indent="18"
-      responsive
-      @update:value="handleClickMenu"
-    />
-  </SimpleScrollbar>
-</template>
-
-<style scoped>
-:deep(.n-menu--horizontal) {
-  --n-item-height: v-bind(headerHeight) !important;
-}
-</style>
--- a/src/layouts/modules/global-menu/components/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/components/first-level-menu.vue
@ -3,31 +3,29 @@ import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
 import { transformColorWithOpacity } from '@sa/color';
-import { useAppStore } from '@/store/modules/app';
-import { useRouteStore } from '@/store/modules/route';
-import { useThemeStore } from '@/store/modules/theme';

 defineOptions({
  name: 'FirstLevelMenu'
 });

 interface Props {
+  menus: App.Global.Menu[];
  activeMenuKey?: string;
  inverted?: boolean;
+  siderCollapse?: boolean;
+  darkMode?: boolean;
+  themeColor: string;
 }

-defineProps<Props>();
+const props = defineProps<Props>();

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

 const emit = defineEmits<Emits>();

-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-
 interface MixMenuItemProps {
  /** Menu item label */
  label: App.Global.Menu['label'];
@ -36,12 +34,12 @@ interface MixMenuItemProps {
  /** Active menu item */
  active: boolean;
  /** Mini size */
-  isMini: boolean;
+  isMini?: boolean;
 }
 const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();

 const selectedBgColor = computed(() => {
-  const { darkMode, themeColor } = themeStore;
+  const { darkMode, themeColor } = props;

  const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
  const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
@ -52,6 +50,10 @@ const selectedBgColor = computed(() => {
 function handleClickMixMenu(menu: App.Global.Menu) {
  emit('select', menu);
 }
+
+function toggleSiderCollapse() {
+  emit('toggleSiderCollapse');
+}
 </script>

 <template>
@ -80,21 +82,21 @@ function handleClickMixMenu(menu: App.Global.Menu) {
    <slot></slot>
    <SimpleScrollbar>
      <MixMenuItem
-        v-for="menu in routeStore.menus"
+        v-for="menu in menus"
        :key="menu.key"
        :label="menu.label"
        :icon="menu.icon"
        :active="menu.key === activeMenuKey"
-        :is-mini="appStore.siderCollapse"
+        :is-mini="siderCollapse"
        @click="handleClickMixMenu(menu)"
      />
    </SimpleScrollbar>
    <MenuToggler
      arrow-icon
-      :collapsed="appStore.siderCollapse"
+      :collapsed="siderCollapse"
      :z-index="99"
      :class="{ 'text-white:88 !hover:text-white': inverted }"
-      @click="appStore.toggleSiderCollapse"
+      @click="toggleSiderCollapse"
    />
  </div>
 </template>
--- a/src/layouts/modules/global-menu/horizontal-mix-menu.vue
+++ b/src/layouts/modules/global-menu/horizontal-mix-menu.vue
@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-
-defineOptions({
-  name: 'HorizontalMixMenu'
-});
-
-const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
-const { routerPushByKey } = useRouterPush();
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (!menu.children?.length) {
-    routerPushByKey(menu.routeKey);
-  }
-}
-</script>
-
-<template>
-  <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" @select="handleSelectMixMenu">
-    <slot></slot>
-  </FirstLevelMenu>
-</template>
-
-<style scoped></style>
--- a/src/layouts/modules/global-menu/index.vue
+++ b/src/layouts/modules/global-menu/index.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { useThemeStore } from '@/store/modules/theme';
+import VerticalMenu from './modules/vertical-menu.vue';
+import VerticalMixMenu from './modules/vertical-mix-menu.vue';
+import HorizontalMenu from './modules/horizontal-menu.vue';
+import HorizontalMixMenu from './modules/horizontal-mix-menu.vue';
+import ReversedHorizontalMixMenu from './modules/reversed-horizontal-mix-menu.vue';
+
+defineOptions({
+  name: 'GlobalMenu'
+});
+
+const themeStore = useThemeStore();
+
+const activeMenu = computed(() => {
+  const menuMap: Record<UnionKey.ThemeLayoutMode, Component> = {
+    vertical: VerticalMenu,
+    'vertical-mix': VerticalMixMenu,
+    horizontal: HorizontalMenu,
+    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
+  };
+
+  return menuMap[themeStore.layout.mode];
+});
+</script>
+
+<template>
+  <component :is="activeMenu" />
+</template>
+
+<style scoped></style>
--- a/src/layouts/modules/global-menu/modules/horizontal-menu.vue
+++ b/src/layouts/modules/global-menu/modules/horizontal-menu.vue
@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'HorizontalMenu'
+});
+
+const route = useRoute();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="routeStore.menus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+</template>
+
+<style scoped></style>
--- a/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
+++ b/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+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 { useRouterPush } from '@/hooks/common/router';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import { useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="childLevelMenus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <FirstLevelMenu
+      :menus="allMenus"
+      :active-menu-key="activeFirstLevelMenuKey"
+      :inverted="inverted"
+      :sider-collapse="appStore.siderCollapse"
+      :dark-mode="themeStore.darkMode"
+      :theme-color="themeStore.themeColor"
+      @select="handleSelectMixMenu"
+      @toggle-sider-collapse="appStore.toggleSiderCollapse"
+    >
+      <slot></slot>
+    </FirstLevelMenu>
+  </Teleport>
+</template>
+
+<style scoped></style>
--- a/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
+++ b/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
@ -0,0 +1,97 @@
+<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 { 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 { useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'ReversedHorizontalMixMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const {
+  firstLevelMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  isActiveFirstLevelMenuHasChildren
+} = useMixMenuContext();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+function handleSelectMixMenu(key: RouteKey) {
+  setActiveFirstLevelMenuKey(key);
+
+  if (!isActiveFirstLevelMenuHasChildren.value) {
+    routerPushByKeyWithMetaQuery(key);
+  }
+}
+
+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="handleSelectMixMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <NMenu
+        v-model:expanded-keys="expandedKeys"
+        mode="vertical"
+        :value="selectedKey"
+        :collapsed="appStore.siderCollapse"
+        :collapsed-width="themeStore.sider.collapsedWidth"
+        :collapsed-icon-size="22"
+        :options="childLevelMenus"
+        :inverted="inverted"
+        :indent="18"
+        @update:value="routerPushByKeyWithMetaQuery"
+      />
+    </SimpleScrollbar>
+  </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
@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { SimpleScrollbar } from '@sa/materials';
+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 { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+
+defineOptions({
+  name: 'VerticalMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+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_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <NMenu
+        v-model:expanded-keys="expandedKeys"
+        mode="vertical"
+        :value="selectedKey"
+        :collapsed="appStore.siderCollapse"
+        :collapsed-width="themeStore.sider.collapsedWidth"
+        :collapsed-icon-size="22"
+        :options="routeStore.menus"
+        :inverted="inverted"
+        :indent="18"
+        @update:value="routerPushByKeyWithMetaQuery"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>
--- a/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
+++ b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { SimpleScrollbar } from '@sa/materials';
+import { useBoolean } from '@sa/hooks';
+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 { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMixMenuContext } from '../../../context';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import GlobalLogo from '../../global-logo/index.vue';
+
+defineOptions({
+  name: 'VerticalMenuMix'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
+const {
+  allMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  getActiveFirstLevelMenuKey
+  //
+} = useMixMenuContext();
+
+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(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (menu.children?.length) {
+    setDrawerVisible(true);
+  } else {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+
+function handleResetActiveMenu() {
+  getActiveFirstLevelMenuKey();
+  setDrawerVisible(false);
+}
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+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_SIDER_MENU_ID}`">
+    <div class="h-full flex" @mouseleave="handleResetActiveMenu">
+      <FirstLevelMenu
+        :menus="allMenus"
+        :active-menu-key="activeFirstLevelMenuKey"
+        :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"
+              :options="childLevelMenus"
+              :collapsed="appStore.siderCollapse"
+              :collapsed-width="themeStore.sider.collapsedWidth"
+              :collapsed-icon-size="22"
+              :inverted="inverted"
+              :indent="18"
+              @update:value="routerPushByKeyWithMetaQuery"
+            />
+          </SimpleScrollbar>
+        </DarkModeContainer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped></style>
--- a/src/layouts/modules/global-menu/vertical-mix-menu.vue
+++ b/src/layouts/modules/global-menu/vertical-mix-menu.vue
@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useBoolean } from '@sa/hooks';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { $t } from '@/locales';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-import BaseMenu from './base-menu.vue';
-
-defineOptions({
-  name: 'VerticalMixMenu'
-});
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenuContext();
-
-const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
-const hasMenus = computed(() => menus.value.length > 0);
-
-const showDrawer = computed(() => hasMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (menu.children?.length) {
-    setDrawerVisible(true);
-  } else {
-    routerPushByKey(menu.routeKey);
-  }
-}
-
-function handleResetActiveMenu() {
-  getActiveFirstLevelMenuKey();
-  setDrawerVisible(false);
-}
-</script>
-
-<template>
-  <div class="h-full flex" @mouseleave="handleResetActiveMenu">
-    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
-      <slot></slot>
-    </FirstLevelMenu>
-    <div
-      class="relative h-full transition-width-300"
-      :style="{ width: appStore.mixSiderFixed && hasMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-    >
-      <DarkModeContainer
-        class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
-        :inverted="siderInverted"
-        :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': siderInverted }"
-            @click="appStore.toggleMixSiderFixed"
-          />
-        </header>
-        <BaseMenu :dark-theme="siderInverted" :menus="menus" />
-      </DarkModeContainer>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/layouts/modules/global-sider/index.vue
+++ b/src/layouts/modules/global-sider/index.vue
@ -2,11 +2,8 @@
 import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
-import VerticalMenu from '../global-menu/base-menu.vue';
-import VerticalMixMenu from '../global-menu/vertical-mix-menu.vue';
-import HorizontalMixMenu from '../global-menu/horizontal-mix-menu.vue';

 defineOptions({
  name: 'GlobalSider'
@ -14,12 +11,12 @@ defineOptions({

 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();

 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>

 <template>
@ -29,11 +26,7 @@ const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
      :show-title="!appStore.siderCollapse"
      :style="{ height: themeStore.header.height + 'px' }"
    />
-    <VerticalMixMenu v-if="isVerticalMix">
-      <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
-    </VerticalMixMenu>
-    <HorizontalMixMenu v-else-if="isHorizontalMix" />
-    <VerticalMenu v-else :dark-theme="darkMenu" :menus="routeStore.menus" />
+    <div :id="GLOBAL_SIDER_MENU_ID" :class="menuWrapperClass"></div>
  </DarkModeContainer>
 </template>

--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/src/layouts/modules/theme-drawer/components/setting-item.vue
@ -14,7 +14,7 @@ defineProps<Props>();
 <template>
  <div class="w-full flex-y-center justify-between">
    <div>
-      <span class="pr-8px text-base_text">{{ label }}</span>
+      <span class="pr-8px text-base-text">{{ label }}</span>
      <slot name="suffix"></slot>
    </div>
    <slot></slot>
--- a/src/layouts/modules/theme-drawer/modules/layout-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
@ -3,6 +3,7 @@ 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 SettingItem from '../components/setting-item.vue';

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

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

 <template>
@ -44,6 +49,13 @@ const themeStore = useThemeStore();
      </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>
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@ -23,6 +23,7 @@ const local: App.I18n.Schema = {
    deleteSuccess: 'Delete Success',
    confirmDelete: 'Are you sure you want to delete?',
    edit: 'Edit',
+    warning: 'Warning',
    error: 'Error',
    index: 'Index',
    keywordSearch: 'Please enter keyword',
@ -69,7 +70,8 @@ const local: App.I18n.Schema = {
      vertical: 'Vertical Menu Mode',
      horizontal: 'Horizontal Menu Mode',
      'vertical-mix': 'Vertical Mix Menu Mode',
-      'horizontal-mix': 'Horizontal Mix menu Mode'
+      'horizontal-mix': 'Horizontal Mix menu Mode',
+      reverseHorizontalMix: 'Reverse first level menus and child level menus position'
    },
    recommendColor: 'Apply Recommended Color Algorithm',
    recommendColorDesc: 'The recommended color algorithm refers to',
@ -260,6 +262,8 @@ const local: App.I18n.Schema = {
      devDep: 'Development Dependency'
    },
    home: {
+      branchDesc:
+        'For the convenience of everyone in developing and updating the merge, we have streamlined the code of the main branch, only retaining the homepage menu, and the rest of the content has been moved to the example branch for maintenance. The preview address displays the content of the example branch.',
      greeting: 'Good morning, {userName}, today is another day full of vitality!',
      weatherDesc: 'Today is cloudy to clear, 20℃ - 25℃!',
      projectCount: 'Project Count',
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@ -23,6 +23,7 @@ const local: App.I18n.Schema = {
    deleteSuccess: '删除成功',
    confirmDelete: '确认删除吗？',
    edit: '编辑',
+    warning: '警告',
    error: '错误',
    index: '序号',
    keywordSearch: '请输入关键词搜索',
@ -69,7 +70,8 @@ const local: App.I18n.Schema = {
      vertical: '左侧菜单模式',
      'vertical-mix': '左侧菜单混合模式',
      horizontal: '顶部菜单模式',
-      'horizontal-mix': '顶部菜单混合模式'
+      'horizontal-mix': '顶部菜单混合模式',
+      reverseHorizontalMix: '一级菜单与子级菜单位置反转'
    },
    recommendColor: '应用推荐算法的颜色',
    recommendColorDesc: '推荐颜色的算法参照',
@ -260,6 +262,8 @@ const local: App.I18n.Schema = {
      devDep: '开发依赖'
    },
    home: {
+      branchDesc:
+        '为了方便大家开发和更新合并，我们对main分支的代码进行了精简，只保留了首页菜单，其余内容已移至example分支进行维护。预览地址显示的内容即为example分支的内容。',
      greeting: '早安，{userName}, 今天又是充满活力的一天!',
      weatherDesc: '今日多云转晴，20℃ - 25℃!',
      projectCount: '项目数',
--- a/src/store/modules/route/index.ts
+++ b/src/store/modules/route/index.ts
@ -354,34 +354,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
    return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
  }

-  /**
-   * Get route meta by key
-   *
-   * @param key Route key
-   */
-  function getRouteMetaByKey(key: string) {
-    const allRoutes = router.getRoutes();
-
-    return allRoutes.find(route => route.name === key)?.meta || null;
-  }
-
-  /**
-   * Get route query of meta by key
-   *
-   * @param key
-   */
-  function getRouteQueryOfMetaByKey(key: string) {
-    const meta = getRouteMetaByKey(key);
-
-    const query: Record<string, string> = {};
-
-    meta?.query?.forEach(item => {
-      query[item.key] = item.value;
-    });
-
-    return query;
-  }
-
  return {
    resetStore,
    routeHome,
@ -398,7 +370,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
    isInitAuthRoute,
    setIsInitAuthRoute,
    getIsAuthRouteExist,
-    getSelectedMenuKeyPath,
-    getRouteQueryOfMetaByKey
+    getSelectedMenuKeyPath
  };
 });
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@ -6,7 +6,7 @@ import { getPaletteColorByNumber } from '@sa/color';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
 import {
-  addThemeVarsToHtml,
+  addThemeVarsToGlobal,
  createThemeToken,
  getNaiveTheme,
  initThemeSettings,
@ -123,10 +123,22 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    settings.value.layout.mode = mode;
  }

-  /** Setup theme vars to html */
-  function setupThemeVarsToHtml() {
-    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
-    addThemeVarsToHtml(themeTokens, darkThemeTokens);
+  /** Setup theme vars to global */
+  function setupThemeVarsToGlobal() {
+    const { themeTokens, darkThemeTokens } = createThemeToken(
+      themeColors.value,
+      settings.value.tokens,
+      settings.value.recommendColor
+    );
+    addThemeVarsToGlobal(themeTokens, darkThemeTokens);
+  }
+  /**
+   * Set layout reverse horizontal mix
+   *
+   * @param reverse Reverse horizontal mix
+   */
+  function setLayoutReverseHorizontalMix(reverse: boolean) {
+    settings.value.layout.reverseHorizontalMix = reverse;
  }

  /** Cache theme settings */
@ -166,7 +178,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    watch(
      themeColors,
      val => {
-        setupThemeVarsToHtml();
+        setupThemeVarsToGlobal();
        localStg.set('themeColor', val.primary);
      },
      { immediate: true }
@ -189,6 +201,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    setThemeScheme,
    toggleThemeScheme,
    updateThemeColors,
-    setThemeLayout
+    setThemeLayout,
+    setLayoutReverseHorizontalMix
  };
 });
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@ -30,39 +30,40 @@ export function initThemeSettings() {
 }

 /**
- * Create theme token
+ * create theme token css vars value by theme settings
 *
 * @param colors Theme colors
+ * @param tokens Theme setting tokens
 * @param [recommended=false] Use recommended color. Default is `false`
 */
-export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
+export function createThemeToken(
+  colors: App.Theme.ThemeColor,
+  tokens?: App.Theme.ThemeSetting['tokens'],
+  recommended = false
+) {
  const paletteColors = createThemePaletteColors(colors, recommended);

-  const themeTokens: App.Theme.ThemeToken = {
+  const { light, dark } = tokens || themeSettings.tokens;
+
+  const themeTokens: App.Theme.ThemeTokenCSSVars = {
    colors: {
      ...paletteColors,
      nprogress: paletteColors.primary,
-      container: 'rgb(255, 255, 255)',
-      layout: 'rgb(247, 250, 252)',
-      inverted: 'rgb(0, 20, 40)',
-      base_text: 'rgb(31, 31, 31)'
+      ...light.colors
    },
    boxShadow: {
-      header: '0 1px 2px rgb(0, 21, 41, 0.08)',
-      sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
-      tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      ...light.boxShadow
    }
  };

-  const darkThemeTokens: App.Theme.ThemeToken = {
+  const darkThemeTokens: App.Theme.ThemeTokenCSSVars = {
    colors: {
      ...themeTokens.colors,
-      container: 'rgb(28, 28, 28)',
-      layout: 'rgb(18, 18, 18)',
-      base_text: 'rgb(224, 224, 224)'
+      ...dark?.colors
    },
    boxShadow: {
-      ...themeTokens.boxShadow
+      ...themeTokens.boxShadow,
+      ...dark?.boxShadow
    }
  };

@ -132,16 +133,16 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
 }

 /**
- * Add theme vars to html
+ * Add theme vars to global
 *
 * @param tokens
 */
-export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
+export function addThemeVarsToGlobal(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
  const cssVarStr = getCssVarByTokens(tokens);
  const darkCssVarStr = getCssVarByTokens(darkTokens);

  const css = `
-    html {
+    :root {
      ${cssVarStr}
    }
  `;
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@ -13,7 +13,8 @@ export const themeSettings: App.Theme.ThemeSetting = {
  isInfoFollowPrimary: true,
  layout: {
    mode: 'vertical',
-    scrollMode: 'content'
+    scrollMode: 'content',
+    reverseHorizontalMix: false
  },
  page: {
    animate: true,
@ -46,6 +47,28 @@ export const themeSettings: App.Theme.ThemeSetting = {
    fixed: false,
    height: 48,
    right: true
+  },
+  tokens: {
+    light: {
+      colors: {
+        container: 'rgb(255, 255, 255)',
+        layout: 'rgb(247, 250, 252)',
+        inverted: 'rgb(0, 20, 40)',
+        'base-text': 'rgb(31, 31, 31)'
+      },
+      boxShadow: {
+        header: '0 1px 2px rgb(0, 21, 41, 0.08)',
+        sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
+        tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      }
+    },
+    dark: {
+      colors: {
+        container: 'rgb(28, 28, 28)',
+        layout: 'rgb(18, 18, 18)',
+        'base-text': 'rgb(224, 224, 224)'
+      }
+    }
  }
 };

--- a/src/theme/vars.ts
+++ b/src/theme/vars.ts
@ -18,14 +18,14 @@ function createColorPaletteVars() {
 const colorPaletteVars = createColorPaletteVars();

 /** Theme vars */
-export const themeVars: App.Theme.ThemeToken = {
+export const themeVars: App.Theme.ThemeTokenCSSVars = {
  colors: {
    ...colorPaletteVars,
    nprogress: 'rgb(var(--nprogress-color))',
    container: 'rgb(var(--container-bg-color))',
    layout: 'rgb(var(--layout-bg-color))',
    inverted: 'rgb(var(--inverted-bg-color))',
-    base_text: 'rgb(var(--base-text-color))'
+    'base-text': 'rgb(var(--base-text-color))'
  },
  boxShadow: {
    header: 'var(--header-box-shadow)',
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@ -4,16 +4,6 @@ declare namespace App {
  namespace Theme {
    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;

-    /** Theme token */
-    type ThemeToken = {
-      colors: ThemeTokenColor;
-      boxShadow: {
-        header: string;
-        sider: string;
-        tab: string;
-      };
-    };
-
    /** Theme setting */
    interface ThemeSetting {
      /** Theme scheme */
@ -34,6 +24,12 @@ declare namespace App {
        mode: UnionKey.ThemeLayoutMode;
        /** Scroll mode */
        scrollMode: UnionKey.ThemeScrollMode;
+        /**
+         * Whether to reverse the horizontal mix
+         *
+         * if true, the vertical child level menus in left and horizontal first level menus in top
+         */
+        reverseHorizontalMix?: boolean;
      };
      /** Page */
      page: {
@ -97,6 +93,13 @@ declare namespace App {
        /** Whether float the footer to the right when the layout is 'horizontal-mix' */
        right: boolean;
      };
+      /** define some theme settings tokens, will transform to css variables */
+      tokens: {
+        light: ThemeSettingToken;
+        dark?: {
+          [K in keyof ThemeSettingToken]?: Partial<ThemeSettingToken[K]>;
+        };
+      };
    }

    interface OtherColor {
@ -118,14 +121,33 @@ declare namespace App {

    type BaseToken = Record<string, Record<string, string>>;

-    interface ThemeTokenColor extends ThemePaletteColor {
-      nprogress: string;
+    interface ThemeSettingTokenColor {
+      /** the progress bar color, if not set, will use the primary color */
+      nprogress?: string;
      container: string;
      layout: string;
      inverted: string;
-      base_text: string;
-      [key: string]: string;
+      'base-text': string;
    }
+
+    interface ThemeSettingTokenBoxShadow {
+      header: string;
+      sider: string;
+      tab: string;
+    }
+
+    interface ThemeSettingToken {
+      colors: ThemeSettingTokenColor;
+      boxShadow: ThemeSettingTokenBoxShadow;
+    }
+
+    type ThemeTokenColor = ThemePaletteColor & ThemeSettingTokenColor;
+
+    /** Theme token CSS variables */
+    type ThemeTokenCSSVars = {
+      colors: ThemeTokenColor & { [key: string]: string };
+      boxShadow: ThemeSettingTokenBoxShadow & { [key: string]: string };
+    };
  }

  /** Global namespace */
@ -148,7 +170,7 @@ declare namespace App {
    }

    /** The global menu */
-    interface Menu {
+    type Menu = {
      /**
       * The menu key
       *
@ -167,7 +189,7 @@ declare namespace App {
      icon?: () => VNode;
      /** The menu children */
      children?: Menu[];
-    }
+    };

    type Breadcrumb = Omit<Menu, 'children'> & {
      options?: Breadcrumb[];
@ -273,6 +295,7 @@ declare namespace App {
        deleteSuccess: string;
        confirmDelete: string;
        edit: string;
+        warning: string;
        error: string;
        index: string;
        keywordSearch: string;
@ -309,7 +332,7 @@ declare namespace App {
      theme: {
        themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
        grayscale: string;
-        layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
+        layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
        recommendColor: string;
        recommendColorDesc: string;
        themeColor: {
@ -420,6 +443,7 @@ declare namespace App {
          devDep: string;
        };
        home: {
+          branchDesc: string;
          greeting: string;
          weatherDesc: string;
          projectCount: string;
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@ -41,6 +41,7 @@ declare module 'vue' {
    LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
    LookForward: typeof import('./../components/custom/look-forward.vue')['default']
    MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
    NButton: typeof import('naive-ui')['NButton']
--- a/src/typings/union-key.d.ts
+++ b/src/typings/union-key.d.ts
@ -20,7 +20,7 @@ declare namespace UnionKey {
   * - vertical: the vertical menu in left
   * - horizontal: the horizontal menu in top
   * - vertical-mix: two vertical mixed menus in left
-   * - horizontal-mix: the vertical menu in left and horizontal menu in top
+   * - horizontal-mix: the vertical first level menus in left and horizontal child level menus in top
   */
  type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';