chore(release): release tauri v1.3.15

README.en_US.md

@@ -27,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.

README.md

@@ -26,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**： 支持严格的类型检查，提高代码的可维护性。

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': [

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",
@@ -32,17 +32,20 @@
   },
   "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"
   },
@@ -54,6 +57,7 @@
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
+    "@tauri-apps/api": "2.5.0",
     "@vueuse/core": "13.4.0",
     "clipboard": "2.0.11",
     "dayjs": "1.11.13",
@@ -75,6 +79,7 @@
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
     "@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.2.3",

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 }
           ]"

packages/materials/src/types/index.ts

@@ -6,6 +6,12 @@ interface AdminLayoutHeaderConfig {
    * @default true
    */
   headerVisible?: boolean;
+  /**
+   * Header class
+   *
+   * @default ''
+   */
+  headerClass?: string;
   /**
    * Header height
    *

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@sa/utils':
         specifier: workspace:*
         version: link:packages/utils
+      '@tauri-apps/api':
+        specifier: 2.5.0
+        version: 2.5.0
       '@vueuse/core':
         specifier: 13.4.0
         version: 13.4.0(vue@3.5.17(typescript@5.8.3))
@@ -87,6 +90,9 @@ importers:
       '@soybeanjs/eslint-config':
         specifier: 1.6.1
         version: 1.6.1(@unocss/eslint-config@66.2.3(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-vue@10.2.0(eslint@9.29.0(jiti@2.4.2))(vue-eslint-parser@10.1.4(eslint@9.29.0(jiti@2.4.2))))(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3)(vue-eslint-parser@10.1.4(eslint@9.29.0(jiti@2.4.2)))
+      '@tauri-apps/cli':
+        specifier: 2.5.0
+        version: 2.5.0
       '@types/node':
         specifier: 24.0.3
         version: 24.0.3
@@ -1081,6 +1087,85 @@ packages:
       vue-eslint-parser:
         optional: true
 
+  '@tauri-apps/api@2.5.0':
+    resolution: {integrity: sha512-Ldux4ip+HGAcPUmuLT8EIkk6yafl5vK0P0c0byzAKzxJh7vxelVtdPONjfgTm96PbN24yjZNESY8CKo8qniluA==}
+
+  '@tauri-apps/cli-darwin-arm64@2.5.0':
+    resolution: {integrity: sha512-VuVAeTFq86dfpoBDNYAdtQVLbP0+2EKCHIIhkaxjeoPARR0sLpFHz2zs0PcFU76e+KAaxtEtAJAXGNUc8E1PzQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tauri-apps/cli-darwin-x64@2.5.0':
+    resolution: {integrity: sha512-hUF01sC06cZVa8+I0/VtsHOk9BbO75rd+YdtHJ48xTdcYaQ5QIwL4yZz9OR1AKBTaUYhBam8UX9Pvd5V2/4Dpw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.5.0':
+    resolution: {integrity: sha512-LQKqttsK252LlqYyX8R02MinUsfFcy3+NZiJwHFgi5Y3+ZUIAED9cSxJkyNtuY5KMnR4RlpgWyLv4P6akN1xhg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tauri-apps/cli-linux-arm64-gnu@2.5.0':
+    resolution: {integrity: sha512-mTQufsPcpdHg5RW0zypazMo4L55EfeE5snTzrPqbLX4yCK2qalN7+rnP8O8GT06xhp6ElSP/Ku1M2MR297SByQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tauri-apps/cli-linux-arm64-musl@2.5.0':
+    resolution: {integrity: sha512-rQO1HhRUQqyEaal5dUVOQruTRda/TD36s9kv1hTxZiFuSq3558lsTjAcUEnMAtBcBkps20sbyTJNMT0AwYIk8Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tauri-apps/cli-linux-riscv64-gnu@2.5.0':
+    resolution: {integrity: sha512-7oS18FN46yDxyw1zX/AxhLAd7T3GrLj3Ai6s8hZKd9qFVzrAn36ESL7d3G05s8wEtsJf26qjXnVF4qleS3dYsA==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tauri-apps/cli-linux-x64-gnu@2.5.0':
+    resolution: {integrity: sha512-SG5sFNL7VMmDBdIg3nO3EzNRT306HsiEQ0N90ILe3ZABYAVoPDO/ttpCO37ApLInTzrq/DLN+gOlC/mgZvLw1w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tauri-apps/cli-linux-x64-musl@2.5.0':
+    resolution: {integrity: sha512-QXDM8zp/6v05PNWju5ELsVwF0VH1n6b5pk2E6W/jFbbiwz80Vs1lACl9pv5kEHkrxBj+aWU/03JzGuIj2g3SkQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tauri-apps/cli-win32-arm64-msvc@2.5.0':
+    resolution: {integrity: sha512-pFSHFK6b+o9y4Un8w0gGLwVyFTZaC3P0kQ7umRt/BLDkzD5RnQ4vBM7CF8BCU5nkwmEBUCZd7Wt3TWZxe41o6Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tauri-apps/cli-win32-ia32-msvc@2.5.0':
+    resolution: {integrity: sha512-EArv1IaRlogdLAQyGlKmEqZqm5RfHCUMhJoedWu7GtdbOMUfSAz6FMX2boE1PtEmNO4An+g188flLeVErrxEKg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@tauri-apps/cli-win32-x64-msvc@2.5.0':
+    resolution: {integrity: sha512-lj43EFYbnAta8pd9JnUq87o+xRUR0odz+4rixBtTUwUgdRdwQ2V9CzFtsMu6FQKpFQ6mujRK6P1IEwhL6ADRsQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tauri-apps/cli@2.5.0':
+    resolution: {integrity: sha512-rAtHqG0Gh/IWLjN2zTf3nZqYqbo81oMbqop56rGTjrlWk9pTTAjkqOjSL9XQLIMZ3RbeVjveCqqCA0s8RnLdMg==}
+    engines: {node: '>= 10'}
+    hasBin: true
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -4915,6 +5000,55 @@ snapshots:
       - '@types/eslint'
       - supports-color
 
+  '@tauri-apps/api@2.5.0': {}
+
+  '@tauri-apps/cli-darwin-arm64@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-darwin-x64@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm64-gnu@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm64-musl@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-linux-riscv64-gnu@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-linux-x64-gnu@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-linux-x64-musl@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-win32-arm64-msvc@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-win32-ia32-msvc@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli-win32-x64-msvc@2.5.0':
+    optional: true
+
+  '@tauri-apps/cli@2.5.0':
+    optionalDependencies:
+      '@tauri-apps/cli-darwin-arm64': 2.5.0
+      '@tauri-apps/cli-darwin-x64': 2.5.0
+      '@tauri-apps/cli-linux-arm-gnueabihf': 2.5.0
+      '@tauri-apps/cli-linux-arm64-gnu': 2.5.0
+      '@tauri-apps/cli-linux-arm64-musl': 2.5.0
+      '@tauri-apps/cli-linux-riscv64-gnu': 2.5.0
+      '@tauri-apps/cli-linux-x64-gnu': 2.5.0
+      '@tauri-apps/cli-linux-x64-musl': 2.5.0
+      '@tauri-apps/cli-win32-arm64-msvc': 2.5.0
+      '@tauri-apps/cli-win32-ia32-msvc': 2.5.0
+      '@tauri-apps/cli-win32-x64-msvc': 2.5.0
+
   '@trysound/sax@0.2.0': {}
 
   '@tybys/wasm-util@0.9.0':

src-tauri/.gitignore

@@ -0,0 +1,3 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/

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

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+  tauri_build::build()
+}

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"]
+}

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"]
+  }
+}

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");
+}

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

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,

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,56 +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',
-  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> = {
-  close: 'theme.layout.resetCacheStrategy.close',
-  refresh: 'theme.layout.resetCacheStrategy.refresh'
+  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' }
-];

src/layouts/base-layout/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: {
@@ -47,15 +47,10 @@ const headerProps = computed(() => {
       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
     }
   };
 
@@ -66,22 +61,21 @@ const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
 
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
 
-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 getSiderWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
   const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
 
-  if (isTopHybridHeaderFirst.value) {
+  if (isHorizontalMix.value && reverseHorizontalMix) {
     return isActiveFirstLevelMenuHasChildren.value ? width : 0;
   }
 
-  let w = isVerticalMix.value || isTopHybridSidebarFirst.value ? mixWidth : width;
+  let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;
 
   if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
@@ -91,13 +85,14 @@ function getSiderWidth() {
 }
 
 function getSiderCollapsedWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
   const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
 
-  if (isTopHybridHeaderFirst.value) {
+  if (isHorizontalMix.value && reverseHorizontalMix) {
     return isActiveFirstLevelMenuHasChildren.value ? collapsedWidth : 0;
   }
 
-  let w = isVerticalMix.value || isTopHybridSidebarFirst.value ? mixCollapsedWidth : collapsedWidth;
+  let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
 
   if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;

src/layouts/modules/global-menu/index.vue

@@ -6,8 +6,8 @@ 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 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,8 +21,7 @@ const activeMenu = computed(() => {
     vertical: VerticalMenu,
     'vertical-mix': VerticalMixMenu,
     horizontal: HorizontalMenu,
-    'top-hybrid-sidebar-first': TopHybridSidebarFirst,
-    'top-hybrid-header-first': TopHybridHeaderFirst
+    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
   };
 
   return menuMap[themeStore.layout.mode];

src/layouts/modules/global-sider/index.vue

@@ -13,15 +13,9 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
-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(
-  () => !isVerticalMix.value && !isTopHybridSidebarFirst.value && !isTopHybridHeaderFirst.value
-);
+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>
 

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,26 +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',
+    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'
   }
@@ -68,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)"
     >
       <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`) }}
+        {{ $t(themeLayoutModeRecord[key]) }}
       </NTooltip>
-      <p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p>
     </div>
   </div>
 </template>

src/layouts/modules/theme-drawer/index.vue

@@ -1,10 +1,10 @@
 <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';
 
 defineOptions({
@@ -12,35 +12,15 @@ defineOptions({
 });
 
 const appStore = useAppStore();
-const activeTab = ref('appearance');
-
-const drawerWidth = computed(() => {
-  // On mobile devices, use 90% of viewport width with a maximum of 400px
-  if (appStore.isMobile) {
-    return 'min(90vw, 400px)';
-  }
-
-  return 460;
-});
 </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>
-      </NTabs>
-
-      <div class="min-h-400px">
-        <KeepAlive>
-          <AppearanceSettings v-if="activeTab === 'appearance'" />
-          <LayoutSettings v-else-if="activeTab === 'layout'" />
-          <GeneralSettings v-else-if="activeTab === 'general'" />
-        </KeepAlive>
-      </div>
-
+      <DarkMode />
+      <LayoutMode />
+      <ThemeColor />
+      <PageFun />
       <template #footer>
         <ConfigOperation />
       </template>
@@ -48,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>

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>

src/layouts/modules/theme-drawer/modules/dark-mode.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>

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>

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>

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>

src/layouts/modules/theme-drawer/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,52 +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-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 {

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>

src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue

@@ -1,61 +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')">
-      <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>

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>

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>

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>

src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue

@@ -1,61 +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')">
-      <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>

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>

src/layouts/modules/theme-drawer/modules/theme-color.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 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: 'ThemeColor'
@@ -34,16 +34,16 @@ const swatches: string[] = [
 </script>
 
 <template>
-  <NDivider>{{ $t('theme.appearance.themeColor.title') }}</NDivider>
+  <NDivider>{{ $t('theme.themeColor.title') }}</NDivider>
   <div class="flex-col-stretch gap-12px">
     <NTooltip placement="top-start">
       <template #trigger>
-        <SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')">
+        <SettingItem key="recommend-color" :label="$t('theme.recommendColor')">
           <NSwitch v-model:value="themeStore.recommendColor" />
         </SettingItem>
       </template>
       <p>
-        <span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span>
+        <span class="pr-12px">{{ $t('theme.recommendColorDesc') }}</span>
         <br />
         <NButton
           text
@@ -57,14 +57,10 @@ const swatches: string[] = [
         </NButton>
       </p>
     </NTooltip>
-    <SettingItem
-      v-for="(_, key) in themeStore.themeColors"
-      :key="key"
-      :label="$t(`theme.appearance.themeColor.${key}`)"
-    >
+    <SettingItem v-for="(_, key) in themeStore.themeColors" :key="key" :label="$t(`theme.themeColor.${key}`)">
       <template v-if="key === 'info'" #suffix>
         <NCheckbox v-model:checked="themeStore.isInfoFollowPrimary">
-          {{ $t('theme.appearance.themeColor.followPrimary') }}
+          {{ $t('theme.themeColor.followPrimary') }}
         </NCheckbox>
       </template>
       <NColorPicker

src/locales/langs/en-us.ts

@@ -58,132 +58,101 @@ const local: App.I18n.Schema = {
     tokenExpired: 'The requested token has expired'
   },
   theme: {
-    themeDrawerTitle: 'Theme Configuration',
-    tabs: {
-      appearance: 'Appearance',
-      layout: 'Layout',
-      general: 'General'
+    themeSchema: {
+      title: 'Theme Schema',
+      light: 'Light',
+      dark: 'Dark',
+      auto: 'Follow System'
     },
-    appearance: {
-      themeSchema: {
-        title: 'Theme Schema',
-        light: 'Light',
-        dark: 'Dark',
-        auto: 'Follow System'
-      },
-      grayscale: 'Grayscale',
-      colourWeakness: 'Colour Weakness',
-      themeColor: {
-        title: 'Theme Color',
-        primary: 'Primary',
-        info: 'Info',
-        success: 'Success',
-        warning: 'Warning',
-        error: 'Error',
-        followPrimary: 'Follow Primary'
-      },
-      recommendColor: 'Apply Recommended Color Algorithm',
-      recommendColorDesc: 'The recommended color algorithm refers to'
+    grayscale: 'Grayscale',
+    colourWeakness: 'Colour Weakness',
+    layoutMode: {
+      title: 'Layout Mode',
+      vertical: 'Vertical Menu Mode',
+      horizontal: 'Horizontal Menu Mode',
+      'vertical-mix': 'Vertical Mix Menu Mode',
+      'horizontal-mix': 'Horizontal Mix menu Mode',
+      reverseHorizontalMix: 'Reverse first level menus and child level menus position'
     },
-    layout: {
-      layoutMode: {
-        title: 'Layout Mode',
-        vertical: 'Vertical Mode',
-        horizontal: 'Horizontal Mode',
-        'vertical-mix': 'Vertical Mix Mode',
-        'top-hybrid-sidebar-first': 'Top-Hybrid Sidebar-First',
-        'top-hybrid-header-first': 'Top-Hybrid Header-First',
-        vertical_detail: 'Vertical menu layout, with the menu on the left and content on the right.',
-        'vertical-mix_detail':
-          'Vertical mix-menu layout, with the primary menu on the dark left side and the secondary menu on the lighter right side.',
-        horizontal_detail: 'Horizontal menu layout, with the menu at the top and content below.',
-        'top-hybrid-sidebar-first_detail':
-          'Top hybrid layout, with the primary menu on the left and the secondary menu at the top.',
-        'top-hybrid-header-first_detail':
-          'Top hybrid layout, with the primary menu at the top and the secondary menu on the left.'
-      },
-      tab: {
-        title: 'Tab Settings',
-        visible: 'Tab Visible',
-        cache: 'Tag Bar Info Cache',
-        height: 'Tab Height',
-        mode: {
-          title: 'Tab Mode',
-          chrome: 'Chrome',
-          button: 'Button'
-        }
-      },
-      header: {
-        title: 'Header Settings',
-        height: 'Header Height',
-        breadcrumb: {
-          visible: 'Breadcrumb Visible',
-          showIcon: 'Breadcrumb Icon Visible'
-        }
-      },
-      sider: {
-        title: 'Sider Settings',
-        inverted: 'Dark Sider',
-        width: 'Sider Width',
-        collapsedWidth: 'Sider Collapsed Width',
-        mixWidth: 'Mix Sider Width',
-        mixCollapsedWidth: 'Mix Sider Collapse Width',
-        mixChildMenuWidth: 'Mix Child Menu Width'
-      },
-      footer: {
-        title: 'Footer Settings',
-        visible: 'Footer Visible',
-        fixed: 'Fixed Footer',
-        height: 'Footer Height',
-        right: 'Right Footer'
-      },
-      content: {
-        title: 'Content Area Settings',
-        scrollMode: {
-          title: 'Scroll Mode',
-          wrapper: 'Wrapper',
-          content: 'Content'
-        },
-        page: {
-          animate: 'Page Animate',
-          mode: {
-            title: 'Page Animate Mode',
-            fade: 'Fade',
-            'fade-slide': 'Slide',
-            'fade-bottom': 'Fade Zoom',
-            'fade-scale': 'Fade Scale',
-            'zoom-fade': 'Zoom Fade',
-            'zoom-out': 'Zoom Out',
-            none: 'None'
-          }
-        },
-        fixedHeaderAndTab: 'Fixed Header And Tab'
-      },
-      resetCacheStrategy: {
-        title: 'Reset Cache Strategy',
-        close: 'Close Page',
-        refresh: 'Refresh Page'
+    recommendColor: 'Apply Recommended Color Algorithm',
+    recommendColorDesc: 'The recommended color algorithm refers to',
+    themeColor: {
+      title: 'Theme Color',
+      primary: 'Primary',
+      info: 'Info',
+      success: 'Success',
+      warning: 'Warning',
+      error: 'Error',
+      followPrimary: 'Follow Primary'
+    },
+    scrollMode: {
+      title: 'Scroll Mode',
+      wrapper: 'Wrapper',
+      content: 'Content'
+    },
+    page: {
+      animate: 'Page Animate',
+      mode: {
+        title: 'Page Animate Mode',
+        fade: 'Fade',
+        'fade-slide': 'Slide',
+        'fade-bottom': 'Fade Zoom',
+        'fade-scale': 'Fade Scale',
+        'zoom-fade': 'Zoom Fade',
+        'zoom-out': 'Zoom Out',
+        none: 'None'
       }
     },
-    general: {
-      title: 'General Settings',
-      watermark: {
-        title: 'Watermark Settings',
-        visible: 'Watermark Full Screen Visible',
-        text: 'Custom Watermark Text',
-        enableUserName: 'Enable User Name Watermark',
-        enableTime: 'Show Current Time',
-        timeFormat: 'Time Format'
+    fixedHeaderAndTab: 'Fixed Header And Tab',
+    header: {
+      height: 'Header Height',
+      breadcrumb: {
+        visible: 'Breadcrumb Visible',
+        showIcon: 'Breadcrumb Icon Visible'
       },
       multilingual: {
-        title: 'Multilingual Settings',
         visible: 'Display multilingual button'
       },
       globalSearch: {
-        title: 'Global Search Settings',
         visible: 'Display GlobalSearch button'
       }
     },
+    tab: {
+      visible: 'Tab Visible',
+      cache: 'Tag Bar Info Cache',
+      height: 'Tab Height',
+      mode: {
+        title: 'Tab Mode',
+        chrome: 'Chrome',
+        button: 'Button'
+      }
+    },
+    sider: {
+      inverted: 'Dark Sider',
+      width: 'Sider Width',
+      collapsedWidth: 'Sider Collapsed Width',
+      mixWidth: 'Mix Sider Width',
+      mixCollapsedWidth: 'Mix Sider Collapse Width',
+      mixChildMenuWidth: 'Mix Child Menu Width'
+    },
+    footer: {
+      visible: 'Footer Visible',
+      fixed: 'Fixed Footer',
+      height: 'Footer Height',
+      right: 'Right Footer'
+    },
+    watermark: {
+      visible: 'Watermark Full Screen Visible',
+      text: 'Watermark Text',
+      enableUserName: 'Enable User Name Watermark'
+    },
+    themeDrawerTitle: 'Theme Configuration',
+    pageFunTitle: 'Page Function',
+    resetCacheStrategy: {
+      title: 'Reset Cache Strategy',
+      close: 'Close Page',
+      refresh: 'Refresh Page'
+    },
     configOperation: {
       copyConfig: 'Copy Config',
       copySuccessMsg: 'Copy Success, Please replace the variable "themeSettings" in "src/theme/settings.ts"',

src/locales/langs/zh-cn.ts

@@ -58,129 +58,101 @@ const local: App.I18n.Schema = {
     tokenExpired: 'token已过期'
   },
   theme: {
-    themeDrawerTitle: '主题配置',
-    tabs: {
-      appearance: '外观',
-      layout: '布局',
-      general: '通用'
+    themeSchema: {
+      title: '主题模式',
+      light: '亮色模式',
+      dark: '暗黑模式',
+      auto: '跟随系统'
     },
-    appearance: {
-      themeSchema: {
-        title: '主题模式',
-        light: '亮色模式',
-        dark: '暗黑模式',
-        auto: '跟随系统'
-      },
-      grayscale: '灰色模式',
-      colourWeakness: '色弱模式',
-      themeColor: {
-        title: '主题颜色',
-        primary: '主色',
-        info: '信息色',
-        success: '成功色',
-        warning: '警告色',
-        error: '错误色',
-        followPrimary: '跟随主色'
-      },
-      recommendColor: '应用推荐算法的颜色',
-      recommendColorDesc: '推荐颜色的算法参照'
+    grayscale: '灰色模式',
+    colourWeakness: '色弱模式',
+    layoutMode: {
+      title: '布局模式',
+      vertical: '左侧菜单模式',
+      'vertical-mix': '左侧菜单混合模式',
+      horizontal: '顶部菜单模式',
+      'horizontal-mix': '顶部菜单混合模式',
+      reverseHorizontalMix: '一级菜单与子级菜单位置反转'
     },
-    layout: {
-      layoutMode: {
-        title: '布局模式',
-        vertical: '左侧菜单模式',
-        'vertical-mix': '左侧菜单混合模式',
-        horizontal: '顶部菜单模式',
-        'top-hybrid-sidebar-first': '顶部混合-侧边优先',
-        'top-hybrid-header-first': '顶部混合-顶部优先',
-        vertical_detail: '左侧菜单布局，菜单在左，内容在右。',
-        'vertical-mix_detail': '左侧双菜单布局，一级菜单在左侧深色区域，二级菜单在右侧浅色区域。',
-        horizontal_detail: '顶部菜单布局，菜单在顶部，内容在下方。',
-        'top-hybrid-sidebar-first_detail': '顶部混合布局，一级菜单在左侧，二级菜单在顶部。',
-        'top-hybrid-header-first_detail': '顶部混合布局，一级菜单在顶部，二级菜单在左侧。'
-      },
-      tab: {
-        title: '标签栏设置',
-        visible: '显示标签栏',
-        cache: '标签栏信息缓存',
-        height: '标签栏高度',
-        mode: {
-          title: '标签栏风格',
-          chrome: '谷歌风格',
-          button: '按钮风格'
-        }
-      },
-      header: {
-        title: '头部设置',
-        height: '头部高度',
-        breadcrumb: {
-          visible: '显示面包屑',
-          showIcon: '显示面包屑图标'
-        }
-      },
-      sider: {
-        title: '侧边栏设置',
-        inverted: '深色侧边栏',
-        width: '侧边栏宽度',
-        collapsedWidth: '侧边栏折叠宽度',
-        mixWidth: '混合布局侧边栏宽度',
-        mixCollapsedWidth: '混合布局侧边栏折叠宽度',
-        mixChildMenuWidth: '混合布局子菜单宽度'
-      },
-      footer: {
-        title: '底部设置',
-        visible: '显示底部',
-        fixed: '固定底部',
-        height: '底部高度',
-        right: '底部局右'
-      },
-      content: {
-        title: '内容区域设置',
-        scrollMode: {
-          title: '滚动模式',
-          wrapper: '外层滚动',
-          content: '主体滚动'
-        },
-        page: {
-          animate: '页面切换动画',
-          mode: {
-            title: '页面切换动画类型',
-            'fade-slide': '滑动',
-            fade: '淡入淡出',
-            'fade-bottom': '底部消退',
-            'fade-scale': '缩放消退',
-            'zoom-fade': '渐变',
-            'zoom-out': '闪现',
-            none: '无'
-          }
-        },
-        fixedHeaderAndTab: '固定头部和标签栏'
-      },
-      resetCacheStrategy: {
-        title: '重置缓存策略',
-        close: '关闭页面',
-        refresh: '刷新页面'
+    recommendColor: '应用推荐算法的颜色',
+    recommendColorDesc: '推荐颜色的算法参照',
+    themeColor: {
+      title: '主题颜色',
+      primary: '主色',
+      info: '信息色',
+      success: '成功色',
+      warning: '警告色',
+      error: '错误色',
+      followPrimary: '跟随主色'
+    },
+    scrollMode: {
+      title: '滚动模式',
+      wrapper: '外层滚动',
+      content: '主体滚动'
+    },
+    page: {
+      animate: '页面切换动画',
+      mode: {
+        title: '页面切换动画类型',
+        'fade-slide': '滑动',
+        fade: '淡入淡出',
+        'fade-bottom': '底部消退',
+        'fade-scale': '缩放消退',
+        'zoom-fade': '渐变',
+        'zoom-out': '闪现',
+        none: '无'
       }
     },
-    general: {
-      title: '通用设置',
-      watermark: {
-        title: '水印设置',
-        visible: '显示全屏水印',
-        text: '自定义水印文本',
-        enableUserName: '启用用户名水印',
-        enableTime: '显示当前时间',
-        timeFormat: '时间格式'
+    fixedHeaderAndTab: '固定头部和标签栏',
+    header: {
+      height: '头部高度',
+      breadcrumb: {
+        visible: '显示面包屑',
+        showIcon: '显示面包屑图标'
       },
       multilingual: {
-        title: '多语言设置',
         visible: '显示多语言按钮'
       },
       globalSearch: {
-        title: '全局搜索设置',
         visible: '显示全局搜索按钮'
       }
     },
+    tab: {
+      visible: '显示标签栏',
+      cache: '标签栏信息缓存',
+      height: '标签栏高度',
+      mode: {
+        title: '标签栏风格',
+        chrome: '谷歌风格',
+        button: '按钮风格'
+      }
+    },
+    sider: {
+      inverted: '深色侧边栏',
+      width: '侧边栏宽度',
+      collapsedWidth: '侧边栏折叠宽度',
+      mixWidth: '混合布局侧边栏宽度',
+      mixCollapsedWidth: '混合布局侧边栏折叠宽度',
+      mixChildMenuWidth: '混合布局子菜单宽度'
+    },
+    footer: {
+      visible: '显示底部',
+      fixed: '固定底部',
+      height: '底部高度',
+      right: '底部局右'
+    },
+    watermark: {
+      visible: '显示全屏水印',
+      text: '水印文本',
+      enableUserName: '启用用户名水印'
+    },
+    themeDrawerTitle: '主题配置',
+    pageFunTitle: '页面功能',
+    resetCacheStrategy: {
+      title: '重置缓存策略',
+      close: '关闭页面',
+      refresh: '刷新页面'
+    },
     configOperation: {
       copyConfig: '复制配置',
       copySuccessMsg: '复制成功，请替换 src/theme/settings.ts 中的变量 themeSettings',

src/store/modules/theme/index.ts

@@ -1,11 +1,10 @@
 import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
-import { useDateFormat, useEventListener, useNow, usePreferredColorScheme } from '@vueuse/core';
+import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import { getPaletteColorByNumber } from '@sa/color';
 import { localStg } from '@/utils/storage';
 import { SetupStoreId } from '@/enum';
-import { useAuthStore } from '../auth';
 import {
   addThemeVarsToGlobal,
   createThemeToken,
@@ -19,14 +18,10 @@ import {
 export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   const scope = effectScope();
   const osTheme = usePreferredColorScheme();
-  const authStore = useAuthStore();
 
   /** Theme settings */
   const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings());
 
-  /** Watermark time instance with controls */
-  const { now: watermarkTime, pause: pauseWatermarkTime, resume: resumeWatermarkTime } = useNow({ controls: true });
-
   /** Dark mode */
   const darkMode = computed(() => {
     if (settings.value.themeScheme === 'auto') {
@@ -62,28 +57,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    */
   const settingsJson = computed(() => JSON.stringify(settings.value));
 
-  /** Watermark time date formatter */
-  const formattedWatermarkTime = computed(() => {
-    const { watermark } = settings.value;
-    const date = useDateFormat(watermarkTime, watermark.timeFormat);
-    return date.value;
-  });
-
-  /** Watermark content */
-  const watermarkContent = computed(() => {
-    const { watermark } = settings.value;
-
-    if (watermark.enableUserName && authStore.userInfo.userName) {
-      return authStore.userInfo.userName;
-    }
-
-    if (watermark.enableTime) {
-      return formattedWatermarkTime.value;
-    }
-
-    return watermark.text;
-  });
-
   /** Reset store */
   function resetStore() {
     const themeStore = useThemeStore();
@@ -171,43 +144,13 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     );
     addThemeVarsToGlobal(themeTokens, darkThemeTokens);
   }
-
   /**
-   * Set watermark enable user name
+   * Set layout reverse horizontal mix
    *
-   * @param enable Whether to enable user name watermark
+   * @param reverse Reverse horizontal mix
    */
-  function setWatermarkEnableUserName(enable: boolean) {
-    settings.value.watermark.enableUserName = enable;
-
-    if (enable) {
-      settings.value.watermark.enableTime = false;
-    }
-  }
-
-  /**
-   * Set watermark enable time
-   *
-   * @param enable Whether to enable time watermark
-   */
-  function setWatermarkEnableTime(enable: boolean) {
-    settings.value.watermark.enableTime = enable;
-
-    if (enable) {
-      settings.value.watermark.enableUserName = false;
-    }
-  }
-
-  /** Only run timer when watermark is visible and time display is enabled */
-  function updateWatermarkTimer() {
-    const { watermark } = settings.value;
-    const shouldRunTimer = watermark.visible && watermark.enableTime;
-
-    if (shouldRunTimer) {
-      resumeWatermarkTime();
-    } else {
-      pauseWatermarkTime();
-    }
+  function setLayoutReverseHorizontalMix(reverse: boolean) {
+    settings.value.layout.reverseHorizontalMix = reverse;
   }
 
   /** Cache theme settings */
@@ -253,15 +196,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       },
       { immediate: true }
     );
-
-    // watch watermark settings to control timer
-    watch(
-      () => [settings.value.watermark.visible, settings.value.watermark.enableTime],
-      () => {
-        updateWatermarkTimer();
-      },
-      { immediate: true }
-    );
   });
 
   /** On scope dispose */
@@ -275,7 +209,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     themeColors,
     naiveTheme,
     settingsJson,
-    watermarkContent,
     setGrayscale,
     setColourWeakness,
     resetStore,
@@ -283,7 +216,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     toggleThemeScheme,
     updateThemeColors,
     setThemeLayout,
-    setWatermarkEnableUserName,
-    setWatermarkEnableTime
+    setLayoutReverseHorizontalMix
   };
 });

src/theme/settings.ts

@@ -15,7 +15,8 @@ export const themeSettings: App.Theme.ThemeSetting = {
   resetCacheStrategy: 'close',
   layout: {
     mode: 'vertical',
-    scrollMode: 'content'
+    scrollMode: 'content',
+    reverseHorizontalMix: false
   },
   page: {
     animate: true,
@@ -58,9 +59,7 @@ export const themeSettings: App.Theme.ThemeSetting = {
   watermark: {
     visible: false,
     text: 'SoybeanAdmin',
-    enableUserName: false,
-    enableTime: false,
-    timeFormat: 'YYYY-MM-DD HH:mm'
+    enableUserName: false
   },
   tokens: {
     light: {

src/typings/api.d.ts

@@ -47,4 +47,41 @@ declare namespace Api {
       status: EnableStatus | null;
     } & T;
   }
+
+  /**
+   * namespace Auth
+   *
+   * backend api module: "auth"
+   */
+  namespace Auth {
+    interface LoginToken {
+      token: string;
+      refreshToken: string;
+    }
+
+    interface UserInfo {
+      userId: string;
+      userName: string;
+      roles: string[];
+      buttons: string[];
+    }
+  }
+
+  /**
+   * namespace Route
+   *
+   * backend api module: "route"
+   */
+  namespace Route {
+    type ElegantConstRoute = import('@elegant-router/types').ElegantConstRoute;
+
+    interface MenuRoute extends ElegantConstRoute {
+      id: string;
+    }
+
+    interface UserRoute {
+      routes: MenuRoute[];
+      home: import('@elegant-router/types').LastLevelRouteKey;
+    }
+  }
 }

src/typings/api/auth.d.ts

@@ -1,20 +0,0 @@
-declare namespace Api {
-  /**
-   * namespace Auth
-   *
-   * backend api module: "auth"
-   */
-  namespace Auth {
-    interface LoginToken {
-      token: string;
-      refreshToken: string;
-    }
-
-    interface UserInfo {
-      userId: string;
-      userName: string;
-      roles: string[];
-      buttons: string[];
-    }
-  }
-}

src/typings/api/route.d.ts

@@ -1,19 +0,0 @@
-declare namespace Api {
-  /**
-   * namespace Route
-   *
-   * backend api module: "route"
-   */
-  namespace Route {
-    type ElegantConstRoute = import('@elegant-router/types').ElegantConstRoute;
-
-    interface MenuRoute extends ElegantConstRoute {
-      id: string;
-    }
-
-    interface UserRoute {
-      routes: MenuRoute[];
-      home: import('@elegant-router/types').LastLevelRouteKey;
-    }
-  }
-}

src/typings/app.d.ts

@@ -28,6 +28,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: {
@@ -82,14 +88,11 @@ declare namespace App {
         width: number;
         /** Collapsed sider width */
         collapsedWidth: number;
-        /** Sider width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or 'top-hybrid-header-first' */
+        /** Sider width when the layout is 'vertical-mix' or 'horizontal-mix' */
         mixWidth: number;
-        /**
-         * Collapsed sider width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or
-         * 'top-hybrid-header-first'
-         */
+        /** Collapsed sider width when the layout is 'vertical-mix' or 'horizontal-mix' */
         mixCollapsedWidth: number;
-        /** Child menu width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or 'top-hybrid-header-first' */
+        /** Child menu width when the layout is 'vertical-mix' or 'horizontal-mix' */
         mixChildMenuWidth: number;
       };
       /** Footer */
@@ -100,10 +103,7 @@ declare namespace App {
         fixed: boolean;
         /** Footer height */
         height: number;
-        /**
-         * Whether float the footer to the right when the layout is 'top-hybrid-sidebar-first' or
-         * 'top-hybrid-header-first'
-         */
+        /** Whether float the footer to the right when the layout is 'horizontal-mix' */
         right: boolean;
       };
       /** Watermark */
@@ -114,10 +114,6 @@ declare namespace App {
         text: string;
         /** Whether to use user name as watermark text */
         enableUserName: boolean;
-        /** Whether to use current time as watermark text */
-        enableTime: boolean;
-        /** Time format for watermark text */
-        timeFormat: string;
       };
       /** define some theme settings tokens, will transform to css variables */
       tokens: {
@@ -362,88 +358,63 @@ declare namespace App {
         tokenExpired: string;
       };
       theme: {
-        themeDrawerTitle: string;
-        tabs: {
-          appearance: string;
-          layout: string;
-          general: string;
-        };
-        appearance: {
-          themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
-          grayscale: string;
-          colourWeakness: string;
-          themeColor: {
-            title: string;
-            followPrimary: string;
-          } & Theme.ThemeColor;
-          recommendColor: string;
-          recommendColorDesc: string;
-        };
-        layout: {
-          layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string> & {
-              [K in `${UnionKey.ThemeLayoutMode}_detail`]: string;
-            };
-          tab: {
-            title: string;
-            visible: string;
-            cache: string;
-            height: string;
-            mode: { title: string } & Record<UnionKey.ThemeTabMode, string>;
-          };
-          header: {
-            title: string;
-            height: string;
-            breadcrumb: {
-              visible: string;
-              showIcon: string;
-            };
-          };
-          sider: {
-            title: string;
-            inverted: string;
-            width: string;
-            collapsedWidth: string;
-            mixWidth: string;
-            mixCollapsedWidth: string;
-            mixChildMenuWidth: string;
-          };
-          footer: {
-            title: string;
-            visible: string;
-            fixed: string;
-            height: string;
-            right: string;
-          };
-          content: {
-            title: string;
-            scrollMode: { title: string } & Record<UnionKey.ThemeScrollMode, string>;
-            page: {
-              animate: string;
-              mode: { title: string } & Record<UnionKey.ThemePageAnimateMode, string>;
-            };
-            fixedHeaderAndTab: string;
-          };
-          resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
-        };
-        general: {
+        themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
+        grayscale: string;
+        colourWeakness: string;
+        layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
+        recommendColor: string;
+        recommendColorDesc: string;
+        themeColor: {
           title: string;
-          watermark: {
-            title: string;
+          followPrimary: string;
+        } & Theme.ThemeColor;
+        scrollMode: { title: string } & Record<UnionKey.ThemeScrollMode, string>;
+        page: {
+          animate: string;
+          mode: { title: string } & Record<UnionKey.ThemePageAnimateMode, string>;
+        };
+        fixedHeaderAndTab: string;
+        header: {
+          height: string;
+          breadcrumb: {
             visible: string;
-            text: string;
-            enableUserName: string;
-            enableTime: string;
-            timeFormat: string;
+            showIcon: string;
           };
           multilingual: {
-            title: string;
             visible: string;
           };
           globalSearch: {
-            title: string;
             visible: string;
           };
         };
+        tab: {
+          visible: string;
+          cache: string;
+          height: string;
+          mode: { title: string } & Record<UnionKey.ThemeTabMode, string>;
+        };
+        sider: {
+          inverted: string;
+          width: string;
+          collapsedWidth: string;
+          mixWidth: string;
+          mixCollapsedWidth: string;
+          mixChildMenuWidth: string;
+        };
+        footer: {
+          visible: string;
+          fixed: string;
+          height: string;
+          right: string;
+        };
+        watermark: {
+          visible: string;
+          text: string;
+          enableUserName: string;
+        };
+        themeDrawerTitle: string;
+        pageFunTitle: string;
+        resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
         configOperation: {
           copyConfig: string;
           copySuccessMsg: string;

src/typings/components.d.ts

@@ -17,14 +17,23 @@ declare module 'vue' {
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
+    IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
+    IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
+    IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
+    IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
+    IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
+    IconMdiDrag: typeof import('~icons/mdi/drag')['default']
     IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
@@ -36,14 +45,19 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NInput: typeof import('naive-ui')['NInput']
@@ -56,6 +70,10 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
@@ -63,8 +81,10 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
     NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NTree: typeof import('naive-ui')['NTree']
     NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']

src/typings/union-key.d.ts

@@ -28,15 +28,9 @@ declare namespace UnionKey {
    * - vertical: the vertical menu in left
    * - horizontal: the horizontal menu in top
    * - vertical-mix: two vertical mixed menus in left
-   * - top-hybrid-sidebar-first: the vertical first level menus in left and horizontal child level menus in top
-   * - top-hybrid-header-first: the horizontal first level menus in top and vertical child level menus in left
+   * - horizontal-mix: the vertical first level menus in left and horizontal child level menus in top
    */
-  type ThemeLayoutMode =
-    | 'vertical'
-    | 'horizontal'
-    | 'vertical-mix'
-    | 'top-hybrid-sidebar-first'
-    | 'top-hybrid-header-first';
+  type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';
 
   /**
    * The scroll mode when content overflow