2025-04-06 03:57:49 +08:00
171 changed files with 8411 additions and 10995 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,18 @@
+dist/*
+node_modules/*
+auto-imports.d.ts
+components.d.ts
+.gitignore
+.vscode
+public
+yarn.*
+vite-env.*
+.prettierrc.*
+visualizer.*
+visualizer.html
+.env.*
+src/locales/lang
+.depcheckrc
+src/app-config/echart-themes/**/*.json
+*.md
+src/icons/*.svg
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,301 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  ignorePatterns: ['node_modules/', 'dist/'],
+  extends: [
+    'eslint-config-prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-essential',
+    'plugin:prettier/recommended',
+    'prettier',
+    './unplugin/.eslintrc-auto-import.json',
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    parser: '@typescript-eslint/parser',
+    ecmaFeatures: {
+      jsx: true,
+      tsx: true,
+    },
+  },
+  plugins: ['vue', '@typescript-eslint', 'prettier'],
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+    defineOptions: 'readonly',
+    defineModel: 'readonly',
+  },
+  rules: {
+    'no-undefined': ['error'],
+    'linebreak-style': ['error', 'unix'],
+    '@typescript-eslint/no-explicit-any': [
+      'error',
+      {
+        ignoreRestArgs: true,
+      },
+    ],
+    'prettier/prettier': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        disallowTypeAnnotations: false,
+      },
+    ], // 强制导入类型显示标注 `import type xxx from 'xxx'`
+    '@typescript-eslint/no-empty-interface': [
+      'error',
+      {
+        allowSingleExtends: true,
+      },
+    ],
+    'accessor-pairs': 2, // 强制同时存在 `get` 与 `set`
+    'constructor-super': 0, // 强制子类构造函数中使用 `super` 调用父类的构造函数
+    'default-case': 2, // `switch` 中强制含有 `default`
+    eqeqeq: [2, 'allow-null'], // 强制使用严格判断 `===`
+    'no-alert': 0, // 禁止使用 `alert`、`confirm`
+    'no-array-constructor': 2, // 禁止使用数组构造器
+    'no-bitwise': 0, // 禁止使用按位运算符
+    'no-caller': 1, // 禁止使用 `arguments.caller`、`arguments.callee`
+    'no-catch-shadow': 2, // 禁止 `catch` 子句参数与外部作用域变量同名
+    'no-class-assign': 2, // 禁止给类赋值
+    'no-cond-assign': 2, // 禁止在条件表达式中使用赋值语句
+    'no-const-assign': 2, // 禁止修改 `const` 声明的变量
+    'no-constant-condition': 2, // 禁止在条件中使用常量表达式 `if(true)`、`if(1)`
+    'no-dupe-keys': 2, // 在创建对象字面量时不允许 `key` 重复
+    'no-dupe-args': 2, // 函数参数不能重复
+    'no-duplicate-case': 2, // `switch` 中的 `case` 标签不能重复
+    'no-eval': 1, // 禁止使用 `eval`
+    'no-ex-assign': 2, // 禁止给 `catch` 语句中的异常参数赋值
+    'no-extend-native': 2, // 禁止扩展 `native` 对象
+    'no-extra-bind': 2, // 禁止不必要的函数绑定
+    'no-extra-boolean-cast': [
+      'error',
+      {
+        enforceForLogicalOperands: true,
+      },
+    ], // 禁止不必要的 `bool` 转换
+    'no-extra-parens': 0, // 禁止非必要的括号
+    semi: [
+      'error',
+      'never',
+      {
+        beforeStatementContinuationChars: 'always',
+      },
+    ],
+    'no-fallthrough': 1, // 禁止 `switch` 穿透
+    'no-func-assign': 2, // 禁止重复的函数声明
+    'no-implicit-coercion': [
+      'error',
+      {
+        allow: ['!!', '~'],
+      },
+    ], // 禁止隐式转换
+    'no-implied-eval': 2, // 禁止使用隐式 `eval`
+    'no-invalid-regexp': 2, // 禁止无效的正则表达式
+    'no-invalid-this': 2, // 禁止无效的 `this`
+    'no-irregular-whitespace': 2, // 禁止含有不合法空格
+    'no-iterator': 2, // 禁止使用 `__iterator__ ` 属性
+    'no-label-var': 2, // `label` 名不能与 `var` 声明的变量名相同
+    'no-labels': 2, // 禁止标签声明
+    'no-lone-blocks': 2, // 禁止不必要的嵌套块
+    'no-multi-spaces': 1, // 禁止使用多余的空格
+    'no-multiple-empty-lines': [
+      'error',
+      {
+        max: 2,
+      },
+    ], // 空行最多不能超过 `2` 行
+    'no-new-func': 2, // 禁止使用 `new Function`
+    'no-new-object': 2, // 禁止使用 `new Object`
+    'no-new-require': 2, // 禁止使用 `new require`
+    'no-sparse-arrays': 2, // 禁止稀疏数组
+    'no-trailing-spaces': 1, // 一行结束后面不要有空格
+    'no-unreachable': 2, // 禁止有无法执行的代码
+    'no-unused-expressions': [
+      'error',
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+        allowTaggedTemplates: true,
+        enforceForJSX: true,
+      },
+    ], // 禁止无用的表达式
+    'no-useless-call': 2, // 禁止不必要的 `call` 和 `apply`
+    'no-var': 'error', // 禁用 `var`
+    'no-with': 2, // 禁用 `with`
+    'use-isnan': 2, // 强制使用 isNaN 判断 NaN
+    'no-multi-assign': 2, // 禁止连续声明变量
+    'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
+    curly: ['error', 'all'],
+    'vue/multi-word-component-names': [
+      'error',
+      {
+        ignores: [],
+      },
+    ],
+    'vue/no-use-v-if-with-v-for': [
+      'error',
+      {
+        allowUsingIterationVar: false,
+      },
+    ],
+    'vue/require-v-for-key': ['error'],
+    'vue/require-valid-default-prop': ['error'],
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/html-closing-bracket-newline': [
+      'error',
+      {
+        singleline: 'never',
+        multiline: 'always',
+      },
+    ],
+    'vue/v-on-event-hyphenation': ['error', 'never'],
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ],
+    'vue/no-v-html': ['error'],
+    'vue/no-v-text': ['error'],
+    'vue/component-api-style': [
+      'error',
+      ['script-setup', 'composition', 'composition-vue2'],
+    ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: false,
+      },
+    ],
+    'vue/no-unused-refs': ['error'],
+    'vue/prop-name-casing': ['error', 'camelCase'],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
+    'vue/attribute-hyphenation': [
+      'error',
+      'never',
+      {
+        ignore: [],
+      },
+    ],
+    'vue/no-restricted-static-attribute': [
+      'error',
+      {
+        key: 'key',
+        message: 'Disallow using key as a custom attribute',
+      },
+    ],
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: "CallExpression[callee.property.name='deprecated']",
+        message: 'Using deprecated API is not allowed.',
+      },
+    ],
+    'padding-line-between-statements': [
+      'error',
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'return',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'function',
+      },
+      {
+        blankLine: 'always',
+        prev: ['const', 'let', 'var'],
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: ['const', 'let', 'var'],
+        next: ['const', 'let', 'var'],
+      },
+      {
+        blankLine: 'always',
+        prev: 'directive',
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: 'directive',
+        next: 'directive',
+      },
+      {
+        blankLine: 'always',
+        prev: ['case', 'default'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: ['break'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: ['import'],
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: 'import',
+        next: 'import',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'export',
+      },
+      {
+        blankLine: 'any',
+        prev: 'export',
+        next: 'export',
+      },
+      {
+        blankLine: 'always',
+        prev: ['function'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: ['class'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'for',
+      },
+      {
+        blankLine: 'any',
+        prev: 'for',
+        next: 'for',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: ['while', 'do', 'switch'],
+      },
+    ],
+  },
+}
--- a/.github/workflows/docs-deploy.yaml
+++ b/.github/workflows/docs-deploy.yaml
@ -14,15 +14,15 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v3

-      - name: Install Node.js 22.x
+      - name: Install Node.js 20.x
        uses: actions/setup-node@v3
        with:
-          node-version: 22.x
+          node-version: 20.x

      - uses: pnpm/action-setup@v2
        name: Install pnpm
        with:
-          version: 9
+          version: 8
          run_install: false

      - name: Install dependencies
--- a/.github/workflows/push-build.yaml
+++ b/.github/workflows/push-build.yaml
@ -8,7 +8,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        node-version: [22.x]
+        node-version: [20.x]
        os: [ubuntu-latest, windows-latest, macos-latest]
        experimental: [true]

@ -24,7 +24,7 @@ jobs:
      - uses: pnpm/action-setup@v2
        name: Install pnpm
        with:
-          version: 9
+          version: 8
          run_install: false

      - name: Get pnpm store directory
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-v22.12.0
+v20.12.0
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,5 +1,4 @@
 {
-  "editor.formatOnSave": true,
  "i18n-ally.localesPaths": ["src/locales/lang"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
@ -33,7 +32,6 @@
    "internalkey",
    "jsbarcode",
    "linebreak",
-    "logicflow",
    "macarons",
    "menutag",
    "ndata",
@ -42,9 +40,9 @@
    "Popselect",
    "precommit",
    "siderbar",
-    "snapline",
    "stylelint",
    "WUJIE",
    "zlevel"
-  ]
+  ],
+  "peacock.color": "#007fff"
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,156 +1,4 @@
-## 5.1.0
-
-## Feats
-
- 主流依赖更新
- `RDraggableCard` 组件 `defaultPosition` 配置项新增 `center`, `top-center`, `bottom-center` 配置项，并且该配置项支持动态更新了
- `RDraggableCard` 组件容器 `id` 由 `draggable-card-container` 变更为 `r-draggable-card-container`
- `views/demo` 包命名调整
-
-## Fixes
-
- 修复 `RDraggableCard` 组件设置 `dad` 为 `false` 时，初始化位置错误的问题
-
-## 5.0.10
-
-## Feats
-
- `RDraggableCard` 组件现在不会在抛出获取 `dom` 失败的异常，因为可能存在异步组件加载的可能
- `RModal`, `useModal` 方法，移除 `dad` 相关所有配置，使用 `draggable` 配置项替代
- 刷新的样式现在会跟随主题变化
- 锁屏密码现在会进行加密存储，并且会进行校验处理了
- 新增 `decrypt`, `decrypt` 方法，放置于 `utils/c` 包中
-
-## Fixes
-
- 修复因为错误的注册全局事件，导致事件污染的问题，但是默认的 `ctrl + k`, `cmd + k` 快捷键依旧保留为全局按键
-
-## 5.0.9
-
-## Feats
-
- `RDraggableCard` 组件
-  - 新增 `restrictionElement` 配置项，允许设置拖拽限制元素
-  - 新增 `padding` 配置项，允许配置元素初始化位置的间隔值
-  - `defaultPosition` 配置项新增 `top-left`, `top-right`, `bottom-left`, `bottom-right` 配置项，允许配置元素初始化位置
- `RTablePro` 组件
-  - 现在会自动删除重复的请求参数
-  - 暴露 `resetTablePagination` 方法，允许手动重置表格分页
- `logout` 方法现在会在执行的时候，清空所有的 `router-route`
- 更新依赖为主流版本
-
-## 5.0.8
-
-## Feats
-
- 修改 `menuTagOptions` 的缓存方式，现在会缓存至 `sessionStorage` 中，兼容可能多系统版本部署与多开系统页面标签页冲突的问题
- 新增 `RDraggableCard` 组件
- 更新 `vite` 版本至 `6.0.4`
-
-## Fixes
-
- 修复 `updateObjectValue` 方法对于对象值判断不准确的问题
- 修复 `SettingDrawer` 组件初始化时，没有正确初始化 `settingStore` 的问题
- 修复 `RTable` 组件在未设置 `title` 与 `tool` 为 `false` 时，导致 `headerStyle` 样式会高一些的问题
-
-## 5.0.7
-
-## Feats
-
- 更新 `vue` 版本至 `3.5.13`
- 更新 `vite` 版本至 `6.0.3`
- 更新 `naive-ui` 版本至 `2.40.3`
- 更新包依赖为主流依赖
- 更新 `eslint` 版本至 `9.11.0`，并且同步修改 `eslint` 相关配置方式，使用 `eslint.config.mjs` 文件替代
- 更新默认 `node` 版本至 `22.11.0`
- `RCollapseGrid` 组件新增 `actionSpan` 配置项，配置操作区域列数
- `usePagination` 方法新增 `pageChange`, `pageSizeChange` 回调函数，允许在更新分页页码与每页条数的时候，执行自定义回调；用于取代被移除的 `onUpdatePage`, `onUpdatePageSize` 方法
- 移除 `appNaiveUIThemeOverridesCommon` 配置项，现在统一使用 `appNaiveUIThemeOverrides` 配置项
- 优化整体风格样式
-
-## Fixes
-
- 修复 `useDomToImage` 方法的类型推导问题
- 修复主题切换时，`naive-ui` 主题色覆盖不生效的问题
-
-## 5.0.6
-
-## Feats
-
- 新增 `useChartProvider` 方法，允许注入 `RCharts` 组件配置
- 更新 `echarts` 版本至 `5.5.1`
- 更新 `vue` 版本至 `3.5.13`
- 更新 `@vueuse/core` 版本至 `11.2.0`
- 修改 `SettingDrawer` 组件的 `defaultOptions` 配置项管理方式，现在迁移至 `store.setting` 包中
- 重构 `cache` 工具模块，更有好的类型推导、更少的代码量
- 重构 `precision` 工具模块，更好的类型推导、更少的代码量
- 重写 `updateObjectValue` 方法，现在类型提示更加准确
- 全局使用 `useTemplateRef`, `shallowRef` 方法替代 `ref` 注册模板引用，减少不必要的响应式代理
- 优化 `MenuTag` 组件的关闭按钮样式
- `LockScreen` 组件新增头像展示
- `AppAvatar` 组件现在默认获取 `avatar` 字段为空的时候，展示名字的首字
- 优化 `UnlockScreen` 组件样式，现在会根据主题自动调整背景颜色
- 优化内容区域过度动画效果
-
-## Fixes
-
- 修复 `404` 页面【返回】按钮不能准确返回的问题
- 修复 `usePagination.getCallback` 方法类型丢失问题；修复该方法获取实时回调不准确的问题
- 修复初始化时，菜单滚动条不能准确滚动到当前激活项的问题
- 修复 `UnlockScreen` 组件在白色主题下，导致样式显示差异问题，现在统一为黑色主题配置覆盖
- 修复 `LockScreen` 组件在退出锁屏时，没有及时更新 `localStorage` 缓存的问题
- 修复 `setupDayjs` 初始化不准确的问题
-
-## 5.0.5
-
-## Feats
-
- 新增 `GLOBAL_CLASS_NAMES` 配置项
- 新增 `canSkipRoute` 方法，用于初始化系统菜单时，自动获取可跳转的路由，避免权限系统列表中无权限路由跳转导致异常的问题
- 优化 `useElementFullscreen` 方法的过渡效果
- `useElementFullscreen` 新增 `isFullscreen` 属性，标识当前元素是否处于网页全屏状态
-
-## Fixes
-
- 修复锁屏逻辑问题
- 修复菜单有时候不能正常的展开被激活项的问题
- 修复 `useSiderBar` 的 `close` 问题
-
-## 5.0.4
-
-将 `ts` 版本与 `eslint` 解析插件版本更新至最新版，并且同步解决了以前历史遗留的一些问题。
-
-并且，在该版本做了一些全局注入方式调整，请谨慎更新。
-
-## Feats
-
- 移除 `vite-plugin-compression` 插件，使用 `rollup-plugin-gzip` 代替
- 更新 `@vitejs/plugin-vue-jsx` 版本至 `4.0.1`
- 优化注释
- 默认设置 `ContentWrapper` 的 `content-wrapper` 内容展示区域的宽高为 `100%`，继承父容器的宽高；该样式会自动的计算，也就是说会自动的适配不同尺寸的屏幕输出与判断是否显示 `FeatureWrapper`, `FooterWrapper`
- 更新 `@typescript-eslint/eslint-plugin`, `@typescript-eslint/parser` 版本至 `8.13.0`
- 更新 `typescript` 版本至 `5.6.3`
- 更新 `vue-tsc` 版本至 `2.1.10`
- 更新 `pnpm` 包管理器版本至 `9.12.3`
- 新增 `RFlow` 基础流程图组件（后期有时间会逐步加强该组件）
- 移除 `useElementFullscreen` 方法 `currentWindowSize` 返回值
- 新增 `--html-height`, `--html-width` 的全局 `css var` 属性，实时获取浏览器的尺寸
- 样式注入现在由注入至 `body` 改为注入至 `html`，避免 `teleport` 传送至 `body` 外的元素不能使用全局样式的问题
- `useBadge.show` 方法新增 `extraOption` 配置项，允许在显示 `badge` 到时候，传入额外的 `options` 配置项
-
-## Fixes
-
- 修复菜单折叠后，`SiderBarLogo` 标题样式丢失问题
- 修复 `useModal` 因为 `Omit` 原因导致类型丢失问题，现在直接使用 `ModalProps` 作为类型
- 修复 `useModal` 创建全屏 `card` 的时候，内容区域边距样式被覆盖的问题，现在会尊重原有的 `card` 样式
-
-## 5.0.3
-
-个性化配置能力再次提升。
-
-## Feats
-
- `SettingDrawer` 组件重构
+# CHANGE LOG

 ## 5.0.2

@ -219,7 +67,7 @@
 - 新增 `clearSigningCallback` 方法
 - `vite.custom.config` 新增 `cdn` 配置项，是否启用 `cdn` 构建项目
 - 配置 `cdn` 为 `false`，因为国内厂商更新资源速度有点慢，导致预览失败
- `Layout` 层注入 `--window-width`, `--window-height`, `css var` 属性
+- `Layout` 层注入 `--window-width`, `--window-height` `css var` 属性
 - 稳定 `Layout` 层的 `css var` 属性

 ## Fixes
--- a/test/basic/callWithAsyncErrorHandling.spec.ts
+++ b/test/basic/callWithAsyncErrorHandling.spec.ts
@ -3,7 +3,6 @@ import { callWithAsyncErrorHandling } from '../../src/utils/basic'
 describe('callWithAsyncErrorHandling', () => {
  it('should call the function and return the result', () => {
    const fn = (x: number) => x
-
    const callbackFn = () => {}

    expect(callWithAsyncErrorHandling(fn, callbackFn, [1])).resolves.toBe(1)
@ -15,7 +14,6 @@ describe('callWithAsyncErrorHandling', () => {
    const fn = () => {
      throw new Error('test error')
    }
-
    const callbackFn = () => {
      callbackFnExecuted = 2
    }
--- a/test/basic/callWithErrorHandling.spec.ts
+++ b/test/basic/callWithErrorHandling.spec.ts
@ -3,7 +3,6 @@ import { callWithErrorHandling } from '../../src/utils/basic'
 describe('callWithErrorHandling', () => {
  it('should call the function and return the result', () => {
    const fn = (x: number) => x
-
    const callbackFn = () => {}

    expect(callWithErrorHandling(fn, callbackFn, [1])).toBe(1)
@ -15,7 +14,6 @@ describe('callWithErrorHandling', () => {
    const fn = () => {
      throw new Error('test error')
    }
-
    const callbackFn = () => {
      callbackFnExecuted = 2
    }
--- a/test/basic/isValueType.spec.ts
+++ b/test/basic/isValueType.spec.ts
@ -42,7 +42,6 @@ describe('isValueType', () => {
  })

  it('should return false for Function', () => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
    expect(isValueType<Function>(/a/i, 'Function')).toBe(false)
  })
 })
--- a/test/basic/uuid.spec.ts
+++ b/test/basic/uuid.spec.ts
@ -14,7 +14,6 @@ describe('uuid', () => {

  it('should return a string with length 36', () => {
    const uid = uuid(36)
-
    expect(uid.length).toBe(36)
  })
 })
--- a/test/hooks/useContextmenuCoordinate.spec.tsx
+++ b/test/hooks/useContextmenuCoordinate.spec.tsx
@ -39,7 +39,6 @@ describe('useContextmenuCoordinate', () => {
      clientX: 100,
      clientY: 200,
    })
-
    wrapperRef.element.dispatchEvent(event)

    await nextTick()
--- a/test/hooks/useDayjs.spec.ts
+++ b/test/hooks/useDayjs.spec.ts
@ -17,8 +17,8 @@ describe('useDayjs', () => {
    }
    const localSpy = vi.spyOn(m, 'locale')

-    m.locale('en-US')
-    m.locale('zh-CN')
+    m.locale('en')
+    m.locale('zh-cn')

    expect(localSpy).toHaveBeenCalledTimes(2)
  })
--- a/test/utils/createRefElement.tsx
+++ b/test/utils/createRefElement.tsx
@ -13,7 +13,6 @@ import { mount } from '@vue/test-utils'
 *
 * const text = wrapper.find('div').text() // hello
 */
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 const createRefElement = (slots?: Record<string, Function>) => {
  const wrapper = mount(
    defineComponent({
--- a/test/vue/call.spec.ts
+++ b/test/vue/call.spec.ts
@ -3,7 +3,6 @@ import { call } from '../../src/utils/vue/call'
 describe('call', () => {
  it('should be executed once', () => {
    const fn = vi.fn()
-
    call(() => fn())

    expect(fn).toHaveBeenCalledTimes(1)
@ -11,7 +10,6 @@ describe('call', () => {

  it('should be executed with an argument', () => {
    const fn = vi.fn()
-
    call((a: number) => fn(a), 1)

    expect(fn).toHaveBeenCalledWith(1)
--- a/test/vue/renderNode.spec.tsx
+++ b/test/vue/renderNode.spec.tsx
@ -4,7 +4,6 @@ import createRefElement from '../utils/createRefElement'
 describe('renderNode', () => {
  it('should render string', () => {
    const wrapper = createRefElement({
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
      default: renderNode('hello world') as Function,
    })
    const text = wrapper.text()
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -1,365 +0,0 @@
-import vue from 'eslint-plugin-vue'
-import typescriptEslint from '@typescript-eslint/eslint-plugin'
-import prettier from 'eslint-plugin-prettier'
-import globals from 'globals'
-import parser from 'vue-eslint-parser'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import js from '@eslint/js'
-import { FlatCompat } from '@eslint/eslintrc'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-})
-
-export default [
-  {
-    ignores: [
-      '**/node_modules/',
-      '**/dist/',
-      'dist/*',
-      'node_modules/*',
-      '**/auto-imports.d.ts',
-      '**/components.d.ts',
-      '**/.gitignore',
-      '**/.vscode',
-      '**/public',
-      '**/yarn.*',
-      '**/vite-env.*',
-      '**/.prettierrc.*',
-      '**/visualizer.*',
-      '**/visualizer.html',
-      '**/.env.*',
-      'src/locales/lang',
-      '**/.depcheckrc',
-      'src/app-config/echart-themes/**/*.json',
-      '**/*.md',
-      'src/icons/*.svg',
-    ],
-  },
-  {
-    files: ['**/*.js', '**/*.ts', '**/*.jsx', '**/*.tsx', '**/*.vue'],
-  },
-  ...compat.extends(
-    'eslint-config-prettier',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:vue/vue3-essential',
-    'plugin:prettier/recommended',
-    'prettier',
-    './unplugin/.eslintrc-auto-import.json',
-  ),
-  {
-    plugins: {
-      vue,
-      '@typescript-eslint': typescriptEslint,
-      prettier,
-    },
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        defineProps: 'readonly',
-        defineEmits: 'readonly',
-        defineExpose: 'readonly',
-        withDefaults: 'readonly',
-        defineOptions: 'readonly',
-        defineModel: 'readonly',
-      },
-      parser: parser,
-      ecmaVersion: 2020,
-      sourceType: 'module',
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        ecmaFeatures: {
-          jsx: true,
-          tsx: true,
-        },
-      },
-    },
-    rules: {
-      'no-undefined': ['error'],
-      'linebreak-style': ['error', 'unix'],
-      '@typescript-eslint/no-explicit-any': [
-        'error',
-        {
-          ignoreRestArgs: true,
-        },
-      ],
-      'prettier/prettier': 'error',
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/ban-types': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-var-requires': 'off',
-      '@typescript-eslint/no-non-null-assertion': 'off',
-      '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        {
-          disallowTypeAnnotations: false,
-        },
-      ],
-      '@typescript-eslint/no-empty-interface': [
-        'error',
-        {
-          allowSingleExtends: true,
-        },
-      ],
-      'accessor-pairs': 2,
-      'constructor-super': 0,
-      'default-case': 2,
-      eqeqeq: [2, 'allow-null'],
-      'no-alert': 0,
-      'no-array-constructor': 2,
-      'no-bitwise': 0,
-      'no-caller': 1,
-      'no-catch-shadow': 2,
-      'no-class-assign': 2,
-      'no-cond-assign': 2,
-      'no-const-assign': 2,
-      'no-constant-condition': 2,
-      'no-dupe-keys': 2,
-      'no-dupe-args': 2,
-      'no-duplicate-case': 2,
-      'no-eval': 1,
-      'no-ex-assign': 2,
-      'no-extend-native': 2,
-      'no-extra-bind': 2,
-      'no-extra-boolean-cast': [
-        'error',
-        {
-          enforceForLogicalOperands: true,
-        },
-      ],
-      'no-extra-parens': 0,
-      semi: [
-        'error',
-        'never',
-        {
-          beforeStatementContinuationChars: 'always',
-        },
-      ],
-      'no-fallthrough': 1,
-      'no-func-assign': 2,
-      'no-implicit-coercion': [
-        'error',
-        {
-          allow: ['!!', '~'],
-        },
-      ],
-      'no-implied-eval': 2,
-      'no-invalid-regexp': 2,
-      'no-invalid-this': 2,
-      'no-irregular-whitespace': 2,
-      'no-iterator': 2,
-      'no-label-var': 2,
-      'no-labels': 2,
-      'no-lone-blocks': 2,
-      'no-multi-spaces': 1,
-      'no-multiple-empty-lines': [
-        'error',
-        {
-          max: 2,
-        },
-      ],
-      'no-new-func': 2,
-      'no-new-object': 2,
-      'no-new-require': 2,
-      'no-sparse-arrays': 2,
-      'no-trailing-spaces': 1,
-      'no-unreachable': 2,
-      'no-unused-expressions': [
-        'error',
-        {
-          allowShortCircuit: true,
-          allowTernary: true,
-          allowTaggedTemplates: true,
-          enforceForJSX: true,
-        },
-      ],
-      'no-useless-call': 2,
-      'no-var': 'error',
-      'no-with': 2,
-      'use-isnan': 2,
-      'no-multi-assign': 2,
-      'prefer-arrow-callback': 2,
-      curly: ['error', 'all'],
-      'vue/multi-word-component-names': [
-        'error',
-        {
-          ignores: [],
-        },
-      ],
-      'vue/no-use-v-if-with-v-for': [
-        'error',
-        {
-          allowUsingIterationVar: false,
-        },
-      ],
-      'vue/require-v-for-key': ['error'],
-      'vue/require-valid-default-prop': ['error'],
-      'vue/component-definition-name-casing': ['error', 'PascalCase'],
-      'vue/html-closing-bracket-newline': [
-        'error',
-        {
-          singleline: 'never',
-          multiline: 'always',
-        },
-      ],
-      'vue/v-on-event-hyphenation': ['error', 'never'],
-      'vue/component-tags-order': [
-        'error',
-        {
-          order: ['template', 'script', 'style'],
-        },
-      ],
-      'vue/no-v-html': ['error'],
-      'vue/no-v-text': ['error'],
-      'vue/component-api-style': [
-        'error',
-        ['script-setup', 'composition', 'composition-vue2'],
-      ],
-      'vue/component-name-in-template-casing': [
-        'error',
-        'PascalCase',
-        {
-          registeredComponentsOnly: false,
-        },
-      ],
-      'vue/no-unused-refs': ['error'],
-      'vue/prop-name-casing': ['error', 'camelCase'],
-      'vue/component-options-name-casing': ['error', 'PascalCase'],
-      'vue/attribute-hyphenation': [
-        'error',
-        'never',
-        {
-          ignore: [],
-        },
-      ],
-      'vue/no-restricted-static-attribute': [
-        'error',
-        {
-          key: 'key',
-          message: 'Disallow using key as a custom attribute',
-        },
-      ],
-      'no-restricted-syntax': [
-        'error',
-        {
-          selector: "CallExpression[callee.property.name='deprecated']",
-          message: 'Using deprecated API is not allowed.',
-        },
-      ],
-      'padding-line-between-statements': [
-        'error',
-        {
-          blankLine: 'always',
-          prev: ['import'],
-          next: '*',
-        },
-        {
-          blankLine: 'any',
-          prev: 'import',
-          next: 'import',
-        },
-        {
-          blankLine: 'always',
-          prev: '*',
-          next: 'export',
-        },
-        {
-          blankLine: 'any',
-          prev: 'export',
-          next: 'export',
-        },
-        {
-          blankLine: 'always',
-          prev: ['const', 'let', 'var'],
-          next: '*',
-        },
-        {
-          blankLine: 'any',
-          prev: ['const', 'let', 'var'],
-          next: ['const', 'let', 'var'],
-        },
-        {
-          blankLine: 'always',
-          prev: 'directive',
-          next: '*',
-        },
-        {
-          blankLine: 'any',
-          prev: 'directive',
-          next: 'directive',
-        },
-        {
-          blankLine: 'always',
-          prev: '*',
-          next: [
-            'if',
-            'class',
-            'for',
-            'do',
-            'while',
-            'switch',
-            'try',
-            'with',
-            'function',
-            'block',
-            'block-like',
-            'break',
-            'case',
-            'continue',
-            'return',
-            'throw',
-            'debugger',
-          ],
-        },
-        {
-          blankLine: 'always',
-          prev: [
-            'if',
-            'class',
-            'for',
-            'do',
-            'while',
-            'switch',
-            'try',
-            'with',
-            'function',
-            'block',
-            'block-like',
-            'break',
-            'case',
-            'continue',
-            'return',
-            'throw',
-            'debugger',
-          ],
-          next: '*',
-        },
-      ],
-      '@typescript-eslint/no-unused-expressions': [
-        'error',
-        {
-          allowShortCircuit: true,
-          allowTernary: true,
-          allowTaggedTemplates: true,
-        },
-      ],
-      '@typescript-eslint/no-empty-object-type': [
-        'error',
-        {
-          allowInterfaces: 'with-single-extends',
-          allowObjectTypes: 'always',
-        },
-      ],
-    },
-  },
-]
--- a/index.html
+++ b/index.html
@ -15,27 +15,6 @@
      --preloading-title-color: <%= preloadingConfig.titleColor %>;
      --ray-theme-primary-fade-color: <%= appPrimaryColor.primaryFadeColor %>;
      --ray-theme-primary-color: <%= appPrimaryColor.primaryColor %>;
-      --global-loading-bg-color: #ffffff;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      #pre-loading-animation {
-        background-color: var(--global-loading-bg-color);
-      }
-    }
-
-    @media (prefers-color-scheme: light) {
-      #pre-loading-animation {
-        background-color: var(--global-loading-bg-color);
-      }
-    }
-
-    html.dark #pre-loading-animation {
-      background-color: var(--global-loading-bg-color);
-    }
-
-    html.light #pre-loading-animation {
-      background-color: var(--global-loading-bg-color);
    }

    #pre-loading-animation {
@ -44,9 +23,13 @@
      right: 0;
      top: 0;
      bottom: 0;
+      background-color: #ffffff;
      color: var(--preloading-title-color);
      text-align: center;
-      background-color: var(--global-loading-bg-color);
+    }
+
+    .ray-template--dark #pre-loading-animation {
+      background-color: #2a3146;
    }

    #pre-loading-animation .pre-loading-animation__wrapper {
@ -112,18 +95,6 @@
      }
    }
  </style>
-  <script>
-    ;(function () {
-      const html = document.documentElement
-      const store = window.localStorage.getItem('piniaSettingStore')
-      const { _appTheme = false } = store ? JSON.parse(store) : {}
-      const loadingBgColor = _appTheme ? '#1c1e23' : '#ffffff'
-
-      html.classList.add(_appTheme ? 'dark' : 'light')
-      html.style.setProperty('--global-loading-bg-color', loadingBgColor)
-      html.style.setProperty('background-color', loadingBgColor)
-    })()
-  </script>
  <body>
    <div id="app"></div>
    <div id="pre-loading-animation">
--- a/package.json
+++ b/package.json
@ -1,11 +1,11 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "5.1.0",
+  "version": "5.0.2",
  "type": "module",
  "engines": {
-    "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-    "pnpm": ">=9.0.0"
+    "node": "^18.0.0 || >=20.0.0",
+    "pnpm": ">=8.0.0"
  },
  "scripts": {
    "dev": "vite",
@ -16,7 +16,7 @@
    "prepare": "husky install",
    "test": "vitest",
    "test:ui": "vitest --ui",
-    "lint": "vue-tsc --noEmit && eslint --fix && prettier --write \"**/*.{ts,tsx,json,.vue}\""
+    "lint": "vue-tsc --noEmit && eslint src --ext .js,.jsx,.vue && prettier --write \"src/**/*.{ts,tsx,json,.vue}\""
  },
  "husky": {
    "hooks": {
@ -29,85 +29,82 @@
      "prettier --write"
    ],
    "*.{ts,tsx,vue}": [
-      "eslint --fix"
+      "eslint src"
    ]
  },
  "dependencies": {
-    "@logicflow/core": "2.0.10",
-    "@logicflow/extension": "2.0.14",
-    "@vueuse/core": "^12.4.0",
-    "axios": "^1.7.9",
+    "@vueuse/core": "^11.1.0",
+    "axios": "^1.7.5",
    "clipboard": "^2.0.11",
-    "crypto-js": "4.2.0",
    "currency.js": "^2.0.4",
-    "dayjs": "^1.11.13",
-    "echarts": "^5.6.0",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.5.0",
    "html-to-image": "1.11.11",
-    "interactjs": "1.10.27",
+    "interactjs": "1.10.26",
    "jsbarcode": "3.11.6",
    "lodash-es": "^4.17.21",
    "mockjs": "1.1.0",
-    "naive-ui": "^2.41.0",
-    "pinia": "^2.3.0",
-    "pinia-plugin-persistedstate": "^4.2.0",
+    "naive-ui": "^2.40.1",
+    "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^4.1.1",
    "print-js": "^1.6.0",
-    "vue": "^3.5.13",
-    "vue-demi": "0.14.10",
-    "vue-hooks-plus": "2.2.3",
+    "vue": "^3.5.12",
+    "vue-demi": "0.14.6",
+    "vue-hooks-plus": "2.2.1",
    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.4.0",
+    "vue-router": "^4.3.2",
    "vue3-next-qrcode": "2.0.10"
  },
  "devDependencies": {
-    "@amap/amap-jsapi-types": "0.0.15",
-    "@ant-design/icons-vue": "7.0.1",
-    "@commitlint/cli": "19.3.0",
-    "@commitlint/config-conventional": "19.2.2",
-    "@interactjs/types": "1.10.27",
-    "@intlify/unplugin-vue-i18n": "4.0.0",
-    "@types/crypto-js": "4.2.2",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@interactjs/types": "1.10.21",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@types/crypto-js": "^4.2.2",
+    "@types/dom-to-image": "2.6.7",
    "@types/jsbarcode": "3.11.4",
-    "@types/lodash-es": "4.17.12",
-    "@types/mockjs": "1.0.10",
-    "@types/three": "0.171.0",
-    "@typescript-eslint/eslint-plugin": "8.20.0",
-    "@typescript-eslint/parser": "8.20.0",
-    "@vitejs/plugin-vue": "5.2.1",
-    "@vitejs/plugin-vue-jsx": "4.1.1",
-    "@vitest/ui": "2.1.8",
-    "@vue/eslint-config-prettier": "10.1.0",
-    "@vue/eslint-config-typescript": "14.2.0",
-    "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.20",
-    "depcheck": "1.4.7",
-    "eslint": "9.18.0",
-    "eslint-config-prettier": "10.0.1",
-    "eslint-plugin-prettier": "5.2.2",
-    "eslint-plugin-vue": "9.32.0",
-    "globals": "15.14.0",
-    "happy-dom": "16.6.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mockjs": "1.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitest/ui": "1.4.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "2.4.3",
+    "autoprefixer": "^10.4.16",
+    "depcheck": "^1.4.7",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.25.0",
+    "happy-dom": "14.3.1",
    "husky": "8.0.3",
-    "lint-staged": "15.3.0",
-    "postcss": "8.5.1",
+    "lint-staged": "^15.2.0",
+    "postcss": "^8.4.38",
    "postcss-px-to-viewport-8-with-include": "1.2.2",
-    "prettier": "3.4.2",
-    "rollup-plugin-gzip": "4.0.1",
-    "sass": "1.83.4",
-    "svg-sprite-loader": "6.0.11",
-    "typescript": "5.6.3",
-    "unplugin-auto-import": "19.0.0",
-    "unplugin-vue-components": "0.28.0",
-    "vite": "6.1.0",
-    "vite-bundle-analyzer": "0.16.0",
+    "prettier": "^3.2.5",
+    "sass": "1.71.1",
+    "svg-sprite-loader": "^6.0.11",
+    "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.3",
+    "vite-bundle-analyzer": "0.9.4",
    "vite-plugin-cdn2": "1.1.0",
-    "vite-plugin-ejs": "1.7.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-ejs": "^1.7.0",
    "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-inspect": "0.8.4",
-    "vite-plugin-mock-dev-server": "1.8.3",
-    "vite-plugin-svg-icons": "2.0.1",
-    "vite-svg-loader": "5.1.0",
-    "vitest": "2.1.8",
-    "vue-tsc": "2.2.0"
+    "vite-plugin-inspect": "^0.8.3",
+    "vite-plugin-mock-dev-server": "1.4.7",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-svg-loader": "^4.0.0",
+    "vite-tsconfig-paths": "4.3.2",
+    "vitest": "1.5.2",
+    "vue-tsc": "^2.0.13"
  },
  "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
  "main": "index.ts",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/demo/test.ts
+++ b/src/api/demo/test.ts
@ -28,7 +28,7 @@ interface JSONPlaceholder {
 *
 * @returns 测试
 *
- * @method get
+ * @medthod get
 */
 export const getWeather = (city: string) => {
  return request<AxiosTestResponse>({
--- a/src/app-components/app/AppAvatar/index.tsx
+++ b/src/app-components/app/AppAvatar/index.tsx
@ -54,14 +54,7 @@ const AppAvatar = defineComponent({
            objectFit="cover"
            round
            size={avatarSize}
-          >
-            {{
-              default: () =>
-                getSigningCallback.avatar
-                  ? null
-                  : getSigningCallback?.name?.[0],
-            }}
-          </NAvatar>
+          />
          {getSigningCallback?.name}
        </NFlex>
      </NButton>
--- a/src/app-components/app/AppGlobalSpin/index.tsx
+++ b/src/app-components/app/AppGlobalSpin/index.tsx
@ -44,7 +44,6 @@ const GlobalSpin = defineComponent({
        {...(this.$props as SpinProps)}
        show={this.spinValue}
        themeOverrides={this.overrides}
-        style="height: var(--html-height)"
      >
        {{
          ...this.$slots,
--- a/src/app-components/app/AppLockScreen/appLockVar.ts
+++ b/src/app-components/app/AppLockScreen/appLockVar.ts
@ -1,10 +1,17 @@
+/**
+ *
+ * 统一管理是否处于锁屏状态
+ *
+ * 可以根据后台接口进行替换该变量, 只要是一个响应式的变量值即可
+ */
+
 import { useStorage } from '@vueuse/core'
 import { APP_CATCH_KEY } from '@/app-config'

 const appLockScreen = useStorage(
  APP_CATCH_KEY.isAppLockScreen,
  false,
-  window.localStorage,
+  sessionStorage,
  {
    mergeDefaults: true,
  },
--- a/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
@ -1,22 +1,16 @@
-import { NInput, NFormItem, NButton } from 'naive-ui'
-import AppAvatar from '@/app-components/app/AppAvatar'
-import { RForm } from '@/components'
+import { NInput, NForm, NFormItem, NButton } from 'naive-ui'

 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
-import { useSettingActions } from '@/store'
-import { useTemplateRef } from 'vue'
-import { useForm } from '@/components'
-import { APP_CATCH_KEY } from '@/app-config'
-import { setStorage, encrypt } from '@/utils'
+import { useSettingGetters, useSettingActions } from '@/store'

-import type { InputInst } from 'naive-ui'
+import type { FormInst, InputInst } from 'naive-ui'

 const LockScreen = defineComponent({
  name: 'LockScreen',
  setup() {
-    const [register, { validate }] = useForm()
-    const inputInstRef = useTemplateRef<InputInst | null>('inputInstRef')
+    const formInstRef = ref<FormInst | null>(null)
+    const inputInstRef = ref<InputInst | null>(null)

    const { setLockAppScreen } = useAppLockScreen()
    const { updateSettingState } = useSettingActions()
@ -25,17 +19,15 @@ const LockScreen = defineComponent({
      lockCondition: useCondition(),
    })

+    /** 锁屏 */
    const lockScreen = () => {
-      validate().then(() => {
-        setLockAppScreen(true)
-        updateSettingState('lockScreenSwitch', false)
-        setStorage(
-          APP_CATCH_KEY.appLockScreenPasswordKey,
-          encrypt(state.lockCondition.lockPassword),
-          'localStorage',
-        )
+      formInstRef.value?.validate((error) => {
+        if (!error) {
+          setLockAppScreen(true)
+          updateSettingState('lockScreenSwitch', true)

-        state.lockCondition = useCondition()
+          state.lockCondition = useCondition()
+        }
      })
    }

@ -48,51 +40,40 @@ const LockScreen = defineComponent({
    return {
      ...toRefs(state),
      lockScreen,
-      register,
+      formInstRef,
      inputInstRef,
    }
  },
  render() {
-    const { register } = this
-
    return (
-      <div class="app-lock-screen__content">
-        <div class="app-lock-screen__input">
-          <AppAvatar
-            avatarSize={52}
-            style="pointer-events: none;margin: 24px 0;"
-            vertical
-          />
-          <RForm
-            ref="formInstRef"
-            model={this.lockCondition}
-            rules={rules}
-            labelPlacement="left"
-            onRegister={register}
-          >
-            <NFormItem path="lockPassword">
-              <NInput
-                ref="inputInstRef"
-                v-model:value={this.lockCondition.lockPassword}
-                type="password"
-                placeholder="请输入锁屏密码"
-                clearable
-                showPasswordOn="click"
-                minlength={6}
-                maxlength={12}
-                onKeydown={(e: KeyboardEvent) => {
-                  if (e.code === 'Enter') {
-                    this.lockScreen()
-                  }
-                }}
-                autofocus
-              />
-            </NFormItem>
-            <NButton type="primary" onClick={this.lockScreen.bind(this)}>
-              锁屏
-            </NButton>
-          </RForm>
-        </div>
+      <div class="app-lock-screen__input">
+        <NForm
+          ref="formInstRef"
+          model={this.lockCondition}
+          rules={rules}
+          labelPlacement="left"
+        >
+          <NFormItem path="lockPassword">
+            <NInput
+              ref="inputInstRef"
+              v-model:value={this.lockCondition.lockPassword}
+              type="password"
+              placeholder="请输入锁屏密码"
+              clearable
+              showPasswordOn="click"
+              minlength={6}
+              maxlength={12}
+              onKeydown={(e: KeyboardEvent) => {
+                if (e.code === 'Enter') {
+                  this.lockScreen()
+                }
+              }}
+            />
+          </NFormItem>
+          <NButton type="primary" onClick={this.lockScreen.bind(this)}>
+            锁屏
+          </NButton>
+        </NForm>
      </div>
    )
  },
--- a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
@ -1,22 +1,19 @@
-import '../../index.scss'
-
-import { NInput, NFormItem, NButton, NFlex } from 'naive-ui'
+import { NInput, NForm, NFormItem, NButton, NFlex } from 'naive-ui'
 import AppAvatar from '@/app-components/app/AppAvatar'
-import { RForm } from '@/components'

 import dayjs from 'dayjs'
 import { useSigningActions, useSettingActions } from '@/store'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { useDevice } from '@/hooks'
-import { useForm } from '@/components'
-import { APP_CATCH_KEY } from '@/app-config'
-import { removeStorage, decrypt, getStorage } from '@/utils'
+
+import type { FormInst, InputInst } from 'naive-ui'

 export default defineComponent({
  name: 'UnlockScreen',
  setup() {
-    const [register, { validate }] = useForm()
+    const formRef = ref<FormInst | null>(null)
+    const inputInstRef = ref<InputInst | null>(null)

    const { logout } = useSigningActions()
    const { updateSettingState } = useSettingActions()
@ -25,13 +22,13 @@ export default defineComponent({

    const HH_MM_FORMAT = 'HH:mm'
    const AM_PM_FORMAT = 'A'
-    const YY_MM_DD_FORMAT = 'YYYY-MM-DD'
+    const YY_MM_DD_FORMAT = 'YY年MM月DD日'
    const DDD_FORMAT = 'ddd'

    const state = reactive({
      lockCondition: useCondition(),
      HH_MM: dayjs().format(HH_MM_FORMAT),
-      AM_PM: dayjs().format(AM_PM_FORMAT),
+      AM_PM: dayjs().locale('en').format(AM_PM_FORMAT),
      YY_MM_DD: dayjs().format(YY_MM_DD_FORMAT),
      DDD: dayjs().format(DDD_FORMAT),
    })
@ -44,55 +41,30 @@ export default defineComponent({
      state.DDD = dayjs().format(DDD_FORMAT)
    }, 86_400_000)

-    const toSigningFn = () => {
-      removeStorage(APP_CATCH_KEY.appLockScreenPasswordKey, 'localStorage')
-      updateSettingState('lockScreenSwitch', false)
-      setTimeout(() => {
-        logout()
-      }, 100)
-    }
-
+    /** 退出登陆并且回到登陆页 */
    const backToSigning = () => {
      window.$dialog.warning({
        title: '警告',
-        content: '是否返回到登陆页并且重新登录',
+        content: '是否返回到登陆页?',
        positiveText: '确定',
-        negativeText: '重新登录',
-        onPositiveClick: toSigningFn,
+        negativeText: '取消',
+        onPositiveClick: () => {
+          logout()
+          setTimeout(() => {
+            updateSettingState('lockScreenSwitch', false)
+          })
+        },
      })
    }

+    /** 解锁 */
    const unlockScreen = () => {
-      const catchPassword = getStorage<string>(
-        APP_CATCH_KEY.appLockScreenPasswordKey,
-        'localStorage',
-      )
-
-      if (!catchPassword) {
-        window.$dialog.warning({
-          title: '警告',
-          content: () => '检测到锁屏密码被修改，请重新登录',
-          closable: false,
-          maskClosable: false,
-          closeOnEsc: false,
-          positiveText: '重新登录',
-          onPositiveClick: toSigningFn,
-        })
-
-        return
-      }
-
-      const dCatchPassword = decrypt(catchPassword)
-
-      validate().then(() => {
-        if (dCatchPassword === state.lockCondition.lockPassword) {
+      formRef.value?.validate((error) => {
+        if (!error) {
          setLockAppScreen(false)
          updateSettingState('lockScreenSwitch', false)
-          removeStorage(APP_CATCH_KEY.appLockScreenPasswordKey, 'localStorage')

          state.lockCondition = useCondition()
-        } else {
-          window.$message.warning('密码错误，请重新输入')
        }
      })
    }
@ -106,84 +78,71 @@ export default defineComponent({
      ...toRefs(state),
      backToSigning,
      unlockScreen,
+      formRef,
+      inputInstRef,
      isTabletOrSmaller,
-      register,
    }
  },
  render() {
    const { isTabletOrSmaller } = this
    const { HH_MM, AM_PM, YY_MM_DD, DDD } = this
    const hmSplit = HH_MM.split(':')
-    const { unlockScreen, backToSigning, register } = this
+    const { unlockScreen, backToSigning } = this

    return (
-      <div class="app-lock-screen__content app-lock-screen__content--full">
-        <div class="app-lock-screen__unlock">
-          <div class="app-lock-screen__unlock__content">
-            <div class="app-lock-screen__unlock__content-wrapper">
-              <div
-                class={[
-                  'app-lock-screen__unlock__content-bg__wrapper',
-                  'app-lock-screen__unlock__content-bg',
-                  isTabletOrSmaller
-                    ? 'app-lock-screen__unlock__content-bg--smaller'
-                    : '',
-                ]}
-              >
-                <div class="left">{hmSplit[0]}</div>
-                <div class="right">{hmSplit[1]}</div>
-              </div>
+      <div class="app-lock-screen__unlock">
+        <div class="app-lock-screen__unlock__content">
+          <div class="app-lock-screen__unlock__content-wrapper">
+            <div
+              class={[
+                'app-lock-screen__unlock__content-bg__wrapper',
+                'app-lock-screen__unlock__content-bg',
+                isTabletOrSmaller
+                  ? 'app-lock-screen__unlock__content-bg--smaller'
+                  : '',
+              ]}
+            >
+              <div class="left">{hmSplit[0]}</div>
+              <div class="right">{hmSplit[1]}</div>
            </div>
-            <div class="app-lock-screen__unlock__content-avatar">
-              <AppAvatar
-                avatarSize={52}
-                style="pointer-events: none;"
-                vertical
-              />
+          </div>
+          <div class="app-lock-screen__unlock__content-avatar">
+            <AppAvatar avatarSize={52} style="pointer-events: none;" vertical />
+          </div>
+          <div class="app-lock-screen__unlock__content-input">
+            <NForm ref="formRef" model={this.lockCondition} rules={rules}>
+              <NFormItem path="lockPassword">
+                <NInput
+                  ref="inputInstRef"
+                  v-model:value={this.lockCondition.lockPassword}
+                  type="password"
+                  placeholder="请输入解锁密码"
+                  clearable
+                  minlength={6}
+                  maxlength={12}
+                  onKeydown={(e: KeyboardEvent) => {
+                    if (e.code === 'Enter') {
+                      unlockScreen()
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFlex justify="space-between">
+                <NButton type="primary" text onClick={backToSigning.bind(this)}>
+                  返回登陆
+                </NButton>
+                <NButton type="primary" text onClick={unlockScreen.bind(this)}>
+                  进入系统
+                </NButton>
+              </NFlex>
+            </NForm>
+          </div>
+          <div class="app-lock-screen__unlock__content-date">
+            <div class="current-date">
+              {HH_MM}&nbsp;<span>{AM_PM}</span>
            </div>
-            <div class="app-lock-screen__unlock__content-input">
-              <RForm
-                onRegister={register}
-                model={this.lockCondition}
-                rules={rules}
-              >
-                <NFormItem path="lockPassword">
-                  <NInput
-                    autofocus
-                    v-model:value={this.lockCondition.lockPassword}
-                    type="password"
-                    placeholder="请输入解锁密码"
-                    clearable
-                    minlength={6}
-                    onKeydown={(e: KeyboardEvent) => {
-                      if (e.code === 'Enter') {
-                        unlockScreen()
-                      }
-                    }}
-                  />
-                </NFormItem>
-                <NFlex justify="space-between">
-                  <NButton
-                    type="primary"
-                    text
-                    onClick={backToSigning.bind(this)}
-                  >
-                    返回登陆
-                  </NButton>
-                  <NButton
-                    type="primary"
-                    text
-                    onClick={unlockScreen.bind(this)}
-                  >
-                    进入系统
-                  </NButton>
-                </NFlex>
-              </RForm>
-            </div>
-            <div class="app-lock-screen__unlock__content-date">
-              <div class="current-year">
-                {YY_MM_DD}&nbsp;<span>{DDD}</span>&nbsp;<span>{AM_PM}</span>
-              </div>
+            <div class="current-year">
+              {YY_MM_DD}&nbsp;<span>{DDD}</span>
            </div>
          </div>
        </div>
--- a/src/app-components/app/AppLockScreen/index.scss
+++ b/src/app-components/app/AppLockScreen/index.scss
@ -1,10 +1,4 @@
 .app-lock-screen__content {
-  &.app-lock-screen__content--full {
-    width: 100%;
-    height: var(--html-height);
-    @include flexCenter;
-  }
-
  & .app-lock-screen__input {
    & button[class*='n-button'] {
      width: 100%;
@ -36,7 +30,7 @@
          width: 100%;
          height: 100%;
          @include flexCenter;
-          font-size: 16.67rem;
+          font-size: 320px;
          gap: 80px;
          z-index: 0;

@ -85,23 +79,9 @@

        & .current-year,
        & .current-date span {
-          font-size: 1.875rem;
-          line-height: 2.25rem;
+          font-size: 1.5rem;
        }
      }
    }
  }
 }
-
-.ray-template--light {
-  .app-lock-screen__unlock__content-bg__wrapper {
-    background-color: #fff !important;
-  }
-
-  .app-lock-screen__unlock__content-bg {
-    & .left,
-    & .right {
-      background-color: rgba(244, 244, 245, 1) !important;
-    }
-  }
-}
--- a/src/app-components/app/AppLockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/index.tsx
@ -1,11 +1,22 @@
+/**
+ *
+ * 这里没有做解锁密码校验, 只要符合校验规则值皆可
+ * 可以根据需求自行更改
+ */
+
+import './index.scss'
+
 import { RModal } from '@/components'
 import LockScreen from './components/LockScreen'
+import UnlockScreen from './components/UnlockScreen'

+import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { useSettingGetters, useSettingActions } from '@/store'

 const AppLockScreen = defineComponent({
  name: 'AppLockScreen',
  setup() {
+    const { getLockAppScreen } = useAppLockScreen()
    const { updateSettingState } = useSettingActions()
    const { getLockScreenSwitch } = useSettingGetters()
    const lockScreenSwitchRef = computed({
@ -17,9 +28,12 @@ const AppLockScreen = defineComponent({

    return {
      lockScreenSwitchRef,
+      getLockAppScreen,
    }
  },
  render() {
+    const { getLockAppScreen } = this
+
    return (
      <RModal
        v-model:show={this.lockScreenSwitchRef}
@ -28,10 +42,12 @@ const AppLockScreen = defineComponent({
        autoFocus={false}
        maskClosable={false}
        closeOnEsc={false}
-        preset="dialog"
+        preset={!getLockAppScreen() ? 'dialog' : void 0}
        title="锁定屏幕"
      >
-        <LockScreen />
+        <div class="app-lock-screen__content">
+          {!getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
+        </div>
      </RModal>
    )
  },
--- a/src/app-components/provider/AppStyleProvider/index.tsx
+++ b/src/app-components/provider/AppStyleProvider/index.tsx
@ -7,8 +7,7 @@ import {
  getStorage,
 } from '@/utils'
 import { useSettingGetters } from '@/store'
-import { APP_CATCH_KEY, GLOBAL_CLASS_NAMES, APP_THEME } from '@/app-config'
-import { useWindowSize } from '@vueuse/core'
+import { APP_CATCH_KEY } from '@/app-config'

 import type { SettingState } from '@/store/modules/setting/types'

@ -16,50 +15,40 @@ export default defineComponent({
  name: 'AppStyleProvider',
  setup(_, { expose }) {
    const { getAppTheme } = useSettingGetters()
-    const { height, width } = useWindowSize()

-    // 同步主题色变量至 html，如果未获取到缓存值则已默认值填充
+    /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */
    const syncPrimaryColorToBody = () => {
-      // 默认主题色
      const {
        appPrimaryColor: { primaryColor, primaryFadeColor },
-      } = APP_THEME
-      // 主题色配置 class 名
-      const { rayTemplateThemePrimaryColor, rayTemplateThemePrimaryFadeColor } =
-        GLOBAL_CLASS_NAMES
+      } = __APP_CFG__ // 默认主题色
+      const body = document.body

-      const html = document.documentElement
-
-      // 获取缓存 naive ui 配置项
      const primaryColorOverride = getStorage<SettingState>(
        APP_CATCH_KEY.appPiniaSettingStore,
        'localStorage',
-      )
+      ) // 获取缓存 naive ui 配置项

      if (primaryColorOverride) {
-        // 获取主色调
        const p = get(
          primaryColorOverride,
          'primaryColorOverride.common.primaryColor',
          primaryColor,
-        )
-        // 将主色调任意颜色转换为 rgba 格式
-        const fp = colorToRgba(p, 0.85)
+        ) // 获取主色调
+        const fp = colorToRgba(p, 0.38) // 将主色调任意颜色转换为 rgba 格式

-        // 设置全局主题色 css 变量
-        html.style.setProperty(rayTemplateThemePrimaryColor, p) // 主色调
-        // 降低透明度后的主色调
-        html.style.setProperty(
-          rayTemplateThemePrimaryFadeColor,
+        /** 设置全局主题色 css 变量 */
+        body.style.setProperty('--ray-theme-primary-color', p) // 主色调
+        body.style.setProperty(
+          '--ray-theme-primary-fade-color',
          fp || primaryFadeColor,
-        )
+        ) // 降低透明度后的主色调
      }
    }

-    // 隐藏加载动画
+    /** 隐藏加载动画 */
    const hiddenLoadingAnimation = () => {
-      // pre-loading-animation 是默认 id
-      const el = document.getElementById(GLOBAL_CLASS_NAMES.preLoadingAnimation)
+      /** pre-loading-animation 是默认 id */
+      const el = document.getElementById('pre-loading-animation')

      if (el) {
        setStyle(el, {
@ -68,30 +57,38 @@ export default defineComponent({
      }
    }

-    // 切换主题时，同步更新 html class 以便于进行自定义 css 配置
+    /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */
    const updateGlobalThemeClass = (bool: boolean) => {
-      const html = document.documentElement
-      const { darkClassName, lightClassName } = GLOBAL_CLASS_NAMES
+      /**
+       *
+       * 初始化时根据当前主题色进行初始化 body 的 class 属性
+       *
+       * 根据 getAppTheme 进行初始化
+       */
+      const body = document.body
+      const darkClassName = 'ray-template--dark' // 暗色类名
+      const lightClassName = 'ray-template--light' // 明亮色类名

      bool
-        ? removeClass(html, lightClassName)
-        : removeClass(html, darkClassName)
+        ? removeClass(body, lightClassName)
+        : removeClass(body, darkClassName)

-      setClass(html, bool ? darkClassName : lightClassName)
+      setClass(body, bool ? darkClassName : lightClassName)
    }

    syncPrimaryColorToBody()
    hiddenLoadingAnimation()

-    watchEffect(() => {
-      // 当切换主题时，更新 html 当前的注入 class
-      updateGlobalThemeClass(getAppTheme.value)
-      // 注入全局宽高尺寸
-      setStyle(document.documentElement, {
-        [GLOBAL_CLASS_NAMES.htmlHeight]: `${height.value}px`,
-        [GLOBAL_CLASS_NAMES.htmlWidth]: `${width.value}px`,
-      })
-    })
+    // 当切换主题时，更新 body 当前的注入 class
+    watch(
+      () => getAppTheme.value,
+      (ndata) => {
+        updateGlobalThemeClass(ndata)
+      },
+      {
+        immediate: true,
+      },
+    )

    expose()
  },
--- a/src/app-components/provider/AppVersionProvider/index.tsx
+++ b/src/app-components/provider/AppVersionProvider/index.tsx
@ -28,10 +28,18 @@ export default defineComponent({
      if (version !== cacheVersion) {
        modalShow.value = true

-        setStorage(APP_CATCH_KEY.appVersionProvider, version, 'localStorage')
+        setStorage<string>(
+          APP_CATCH_KEY.appVersionProvider,
+          version,
+          'localStorage',
+        )
      }
    } else {
-      setStorage(APP_CATCH_KEY.appVersionProvider, version, 'localStorage')
+      setStorage<string>(
+        APP_CATCH_KEY.appVersionProvider,
+        version,
+        'localStorage',
+      )
    }

    return {
@ -53,7 +61,7 @@ export default defineComponent({
          title="发现新版本"
          content="当前版本已更新，点击确认加载新版本~"
          zIndex={999999999}
-          draggable
+          dad
          positiveText="确认"
          negativeText="取消"
          onPositiveClick={logout}
--- a/src/app-components/provider/AppWatermarkProvider/index.tsx
+++ b/src/app-components/provider/AppWatermarkProvider/index.tsx
@ -26,7 +26,7 @@ export default defineComponent({
    const { getWatermarkConfig, getWatermarkSwitch } = this

    return getWatermarkSwitch ? (
-      <NWatermark {...getWatermarkConfig} fullscreen />
+      <NWatermark cross fullscreen {...getWatermarkConfig} />
    ) : null
  },
 })
--- a/src/app-config/app-config.ts
+++ b/src/app-config/app-config.ts
@ -1,24 +1,6 @@
 import type { AppMenuConfig, PreloadingConfig } from '@/types'
 import type { MessageProviderProps } from 'naive-ui'

-/**
- *
- * @description
- * 全局注入到 html 的样式类名。
- *
- * 如果涉及到全局主题色的 class name，需要修改的时候记得全局替换；
- * 避免样式出现奇奇怪怪的问题。
- */
-export const GLOBAL_CLASS_NAMES = {
-  darkClassName: 'ray-template--dark',
-  lightClassName: 'ray-template--light',
-  rayTemplateThemePrimaryColor: '--ray-theme-primary-color',
-  rayTemplateThemePrimaryFadeColor: '--ray-theme-primary-fade-color',
-  preLoadingAnimation: 'pre-loading-animation',
-  htmlHeight: '--html-height',
-  htmlWidth: '--html-width',
-} as const
-
 /**
 *
 * @description
@ -93,8 +75,6 @@ export const APP_CATCH_KEY_PREFIX = ''
 *   - appPiniaMenuStore: pinia menu store key
 *   - appPiniaSigningStore: pinia signing store key
 *   - appVersionProvider: 版本信息缓存 key
- *   - appMenuTagOptions: 标签页菜单列表
- *   - appLockScreenPasswordKey: 锁屏密码缓存 key
 */
 export const APP_CATCH_KEY = {
  signing: 'signing',
@ -108,8 +88,6 @@ export const APP_CATCH_KEY = {
  appVersionProvider: 'appVersionProvider',
  isAppLockScreen: 'isAppLockScreen',
  appGlobalSearchOptions: 'appGlobalSearchOptions',
-  appMenuTagOptions: 'appMenuTagOptions',
-  appLockScreenPasswordKey: 'appLockScreenPasswordKey',
 } as const

 /**
--- a/src/app-config/design-config.ts
+++ b/src/app-config/design-config.ts
@ -3,36 +3,35 @@ import type { AppTheme } from '@/types'
 export const APP_THEME: AppTheme = {
  /**
   *
-   * @description
-   * 系统主题颜色预设色盘。
-   * 支持 RGBA、RGB、十六进制。
+   * 系统主题颜色预设色盘
+   * 支持 RGBA、RGB、十六进制
   */
  appThemeColors: [
    '#2d8cf0',
    '#3f9eff',
    '#ff42bc',
    '#ee4f12',
+    '#a6e4f7',
    '#dbcb02',
-    '#18a058',
+    '#18A058',
  ],
-  // 系统主题色
+  /** 系统主题色 */
  appPrimaryColor: {
-    // 主题色
+    /** 主题色 */
    primaryColor: '#2d8cf0',
-    // 主题辅助色(用于整体 hover、active 等之类颜色)
-    primaryFadeColor: 'rgba(45, 140, 240, 0.85)',
+    /** 主题辅助色(用于整体 hover、active 等之类颜色) */
+    primaryFadeColor: 'rgba(45, 140, 240, 0.3)',
  },
  /**
   *
-   * @description
-   * 配置系统 naive-ui 主题色。
-   * 官网文档地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme>。
+   * 配置系统 naive-ui 主题色
+   * 官网文档地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme>
   *
   * 注意:
   *   - appPrimaryColor common 配置优先级大于该配置
   *
-   * 如果需要定制化整体组件样式，配置示例。
-   * 具体自行查看官网，还有模式更佳丰富的 peers 主题变量配置。
+   * 如果需要定制化整体组件样式, 配置示例
+   * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置
   * 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
   *
   * @example
@ -48,24 +47,17 @@ export const APP_THEME: AppTheme = {
   * ```
   */
  appNaiveUIThemeOverrides: {
-    dark: {
-      common: {
-        borderRadius: '4px',
-        baseColor: 'rgb(18, 18, 18)',
-      },
-    },
-    light: {
-      common: {
-        borderRadius: '4px',
-        baseColor: 'rgb(255, 255, 255)',
-      },
-    },
+    dark: {},
+    light: {},
+  },
+  appNaiveUIThemeOverridesCommon: {
+    dark: {},
+    light: {},
  },
  /**
   *
-   * @description
-   * 配置 echart 主题颜色。
-   * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json。
+   * 配置 echart 主题颜色
+   * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json
   *
   * [文档地址](https://xiaodaigua-ray.github.io/ray-template-doc/ray-template-docs/advanced/echart-themes.html)
   */
--- a/src/app-config/router-config.ts
+++ b/src/app-config/router-config.ts
@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 /**
 *
 * @description
- * 内容区域 shallowRef 注册
+ * 内容区域 ref 注册
 * 可以控制内容区域当前滚动位置
 * 如果你需要在切换路由时候配置自定义滚动到某个视图区域时, 可以使用该属性提供的方法(scrollTo)
 *
@ -16,12 +16,12 @@ import type { Ref } from 'vue'
 * })
 */
 export const LAYOUT_CONTENT_REF: Readonly<Ref<LayoutInst | null>> =
-  shallowRef<LayoutInst | null>(null)
+  ref<LayoutInst | null>(null)

 /**
 *
 * @description
- * 侧边滚动栏滚动 shallowRef 注册。
+ * 侧边滚动栏滚动 ref 注册。
 * 可以控制侧边滚动栏滚动位置。
 *
 * 请注意使用时机。建议使用 nextTick() 等待 dom 挂载后再执行该方法。
@ -31,7 +31,7 @@ export const LAYOUT_CONTENT_REF: Readonly<Ref<LayoutInst | null>> =
 * })
 */
 export const LAYOUT_SIDER_REF: Readonly<Ref<LayoutInst | null>> =
-  shallowRef<LayoutInst | null>(null)
+  ref<LayoutInst | null>(null)

 export const SETUP_ROUTER_ACTION = {
  /** 是否启用路由切换时顶部加载条 */
--- a/src/axios/axios-interceptor/request/plugins/request-headers.ts
+++ b/src/axios/axios-interceptor/request/plugins/request-headers.ts
@ -16,7 +16,7 @@ import type {
 * 当然你也可以根据 request instance 来特殊处理, 这里暂时不做演示
 */
 const requestHeaderToken = (ins: RequestInterceptorConfig, mode: string) => {
-  const token = getStorage<string | null>(APP_CATCH_KEY.token, 'localStorage')
+  const token = getStorage<string>(APP_CATCH_KEY.token, 'localStorage')

  if (ins.url) {
    // TODO: 根据 url 不同是否设置 token
--- a/src/axios/index.ts
+++ b/src/axios/index.ts
@ -40,14 +40,14 @@ function useRequest<
  fetchOptions: AppRawRequestConfig<Response>,
  option?: UseRequestOptions<Response, HookPlusParams, HookPlusPlugin>,
 ) {
-  const fn = () => {
+  const fc = () => {
    const cb = request<Response>(fetchOptions)

    return cb
  }

  const hooks = useHookPlusRequest<Response, HookPlusParams>(
-    fn,
+    fc,
    Object.assign({}, option),
  )

--- a/src/axios/instance.ts
+++ b/src/axios/instance.ts
@ -1,3 +1,10 @@
+/**
+ *
+ * 请求拦截器与响应拦截器
+ * 如果有需要拓展拦截器, 请在 inject 目录下参照示例方法继续拓展
+ * 该页面不应该做过多的改动与配置
+ */
+
 import axios from 'axios'
 import { AXIOS_CONFIG } from '@/app-config'
 import { useAxiosInterceptor } from '@/axios/utils/interceptor'
@ -10,33 +17,23 @@ import {
  setupRequestErrorInterceptor,
 } from '@/axios/axios-interceptor/request'

-import type { AxiosInstanceExpand, RequestInterceptorConfig } from './types'
+import type { AxiosInstanceExpand } from './types'

-// 创建 axios 实例
 const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
-// 获取拦截器实例
 const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor()

 // 请求拦截器
 server.interceptors.request.use(
  (request) => {
-    // 生成 request instance
-    createAxiosInstance(
-      request as RequestInterceptorConfig<unknown>,
-      'requestInstance',
-    )
-    // 初始化拦截器所有已注入方法
-    setupRequestInterceptor()
-    // 执行拦截器所有已注入方法
-    beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok')
+    createAxiosInstance(request, 'requestInstance') // 生成 request instance
+    setupRequestInterceptor() // 初始化拦截器所有已注入方法
+    beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok') // 执行拦截器所有已注入方法

    return request
  },
  (error) => {
-    // 初始化拦截器所有已注入方法(错误状态)
-    setupRequestErrorInterceptor()
-    // 执行所有已注入方法
-    fetchError('requestError', error, 'implementRequestInterceptorErrorArray')
+    setupRequestErrorInterceptor() // 初始化拦截器所有已注入方法(错误状态)
+    fetchError('requestError', error, 'implementRequestInterceptorErrorArray') // 执行所有已注入方法

    return Promise.reject(error)
  },
@ -45,22 +42,17 @@ server.interceptors.request.use(
 // 响应拦截器
 server.interceptors.response.use(
  (response) => {
-    // 创建响应实例
-    createAxiosInstance(response, 'responseInstance')
-    // 注入响应成功待执行队列
-    setupResponseInterceptor()
-    // 执行响应成功拦截器
-    beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok')
+    createAxiosInstance(response, 'responseInstance') // 创建响应实例
+    setupResponseInterceptor() // 注入响应成功待执行队列
+    beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok') // 执行响应成功拦截器

    const { data } = response

    return Promise.resolve(data)
  },
  (error) => {
-    // 注入响应失败待执行队列
-    setupResponseErrorInterceptor()
-    // 执行响应失败后拦截器
-    fetchError('responseError', error, 'implementResponseInterceptorErrorArray')
+    setupResponseErrorInterceptor() // 注入响应失败待执行队列
+    fetchError('responseError', error, 'implementResponseInterceptorErrorArray') // 执行响应失败后拦截器

    return Promise.reject(error)
  },
--- a/src/axios/utils/interceptor.ts
+++ b/src/axios/utils/interceptor.ts
@ -1,3 +1,14 @@
+/**
+ *
+ * axios 拦截器注入
+ *
+ * 请求拦截器、响应拦截器
+ * 暴露启动方法调用所有已注册方法
+ *
+ * 该拦截器仅适合放置公共的 axios 拦截器操作, 并且采用队列形式管理请求拦截器的注入
+ * 所以在使用的时候, 需要按照约定格式进行参数传递
+ */
+
 import RequestCanceler from '@/axios/utils/RequestCanceler'
 import { getAppEnvironment } from '@/utils'

@ -13,36 +24,31 @@ import type {
 import type { AnyFC } from '@/types'
 import type { AxiosError } from 'axios'

-// 当前请求的实例
+/** 当前请求的实例 */
 const axiosFetchInstance: AxiosFetchInstance = {
  requestInstance: null,
  responseInstance: null,
 }
-// 请求失败返回值
+/** 请求失败返回值 */
 const axiosFetchError: AxiosFetchError<AxiosError<unknown, unknown>> = {
  requestError: null,
  responseError: null,
 }
-// 请求队列(区分 resolve 与 reject 状态)
+/** 请求队列(区分 resolve 与 reject 状态) */
 const implement: ImplementQueue = {
  implementRequestInterceptorArray: [],
  implementResponseInterceptorArray: [],
 }
-// 请求失败队列
 const errorImplement: ErrorImplementQueue = {
  implementRequestInterceptorErrorArray: [],
  implementResponseInterceptorErrorArray: [],
 }

-type ImplementKeys = keyof ImplementQueue
-
-type ErrorImplementKeys = keyof ErrorImplementQueue
-
-// 取消器实例
+/** 取消器实例 */
 export const axiosCanceler = new RequestCanceler()

 export const useAxiosInterceptor = () => {
-  // 创建拦截器实例
+  /** 创建拦截器实例 */
  const createAxiosInstance = (
    instance: RequestInterceptorConfig | ResponseInterceptorConfig,
    instanceKey: keyof AxiosFetchInstance,
@ -54,33 +60,29 @@ export const useAxiosInterceptor = () => {
          instance as ResponseInterceptorConfig)
  }

-  // 获取当前实例
+  /** 获取当前实例 */
  const getAxiosInstance = (instanceKey: keyof AxiosFetchInstance) => {
    return axiosFetchInstance[instanceKey]
  }

-  // 设置注入方法队列
+  /** 设置注入方法队列 */
  const setImplement = (
-    key: ImplementKeys | ErrorImplementKeys,
+    key: keyof ImplementQueue | keyof ErrorImplementQueue,
    func: AnyFC[],
    fetchType: FetchType,
  ) => {
-    fetchType === 'ok'
-      ? (implement[key as ImplementKeys] = func)
-      : (errorImplement[key as ErrorImplementKeys] = func)
+    fetchType === 'ok' ? (implement[key] = func) : (errorImplement[key] = func)
  }

-  // 获取队列中所有的所有拦截器方法
+  /** 获取队列中所有的所有拦截器方法 */
  const getImplement = (
-    key: ImplementKeys | ErrorImplementKeys,
+    key: keyof ImplementQueue | keyof ErrorImplementQueue,
    fetchType: FetchType,
  ): AnyFC[] => {
-    return fetchType === 'ok'
-      ? implement[key as ImplementKeys]
-      : errorImplement[key as ErrorImplementKeys]
+    return fetchType === 'ok' ? implement[key] : errorImplement[key]
  }

-  // 队列执行器
+  /** 队列执行器 */
  const implementer = (funcs: AnyFC[], ...args: any[]) => {
    if (Array.isArray(funcs)) {
      funcs.forEach((curr) => {
@ -91,16 +93,16 @@ export const useAxiosInterceptor = () => {
    }
  }

-  // 请求、响应前执行拦截器队列中的所有方法
+  /** 请求、响应前执行拦截器队列中的所有方法 */
  const beforeFetch = (
    key: keyof AxiosFetchInstance,
-    implementKey: ImplementKeys | ErrorImplementKeys,
+    implementKey: keyof ImplementQueue | keyof ErrorImplementQueue,
    fetchType: FetchType,
  ) => {
    const funcArr =
      fetchType === 'ok'
-        ? implement[implementKey as ImplementKeys]
-        : errorImplement[implementKey as ErrorImplementKeys]
+        ? implement[implementKey]
+        : errorImplement[implementKey]
    const instance = getAxiosInstance(key)
    const { MODE } = getAppEnvironment()

@ -109,11 +111,11 @@ export const useAxiosInterceptor = () => {
    }
  }

-  // 请求、响应错误时执行队列中所有方法
+  /** 请求、响应错误时执行队列中所有方法 */
  const fetchError = (
    key: keyof AxiosFetchError,
    error: AxiosError<unknown, unknown>,
-    errorImplementKey: ErrorImplementKeys,
+    errorImplementKey: keyof ErrorImplementQueue,
  ) => {
    axiosFetchError[key] = error

--- a/src/components/base/RChart/src/config.ts
+++ b/src/components/base/RChart/src/config.ts
@ -1,6 +0,0 @@
-import type { InjectionKey } from 'vue'
-import type { ChartProviderOptions } from './hooks/useChartProvider'
-
-export const USE_CHART_PROVIDER_KEY: InjectionKey<
-  Partial<ChartProviderOptions>
-> = Symbol('USE_CHART_PROVIDER_KEY')
--- a/src/components/base/RChart/src/hooks/useChartProvider.ts
+++ b/src/components/base/RChart/src/hooks/useChartProvider.ts
@ -1,18 +0,0 @@
-import { USE_CHART_PROVIDER_KEY } from '../config'
-
-import type { ChartTheme } from '../types'
-
-export interface ChartProviderOptions {
-  theme: ChartTheme
-}
-
-/**
- *
- * @param 配置项
- *
- * @description
- * 全局 chart 配置项。
- */
-export const useChartProvider = (options: Partial<ChartProviderOptions>) => {
-  provide(USE_CHART_PROVIDER_KEY, options)
-}
--- a/src/components/base/RChart/src/index.tsx
+++ b/src/components/base/RChart/src/index.tsx
@ -36,7 +36,6 @@ import {
 import { RMoreDropdown } from '@/components'
 import { useSettingGetters } from '@/store'
 import { useTemplateRef } from 'vue'
-import { USE_CHART_PROVIDER_KEY } from './config'

 import type { WatchStopHandle } from 'vue'
 import type { AnyFC } from '@/types'
@ -125,7 +124,6 @@ export default defineComponent({
    const __catch = {
      aria: props.showAria,
    }
-    const chartProvideOptions = inject(USE_CHART_PROVIDER_KEY, {})

    /**
     *
@ -176,19 +174,10 @@ export default defineComponent({
     * 但是，如果未获取到 echartTheme 属性，则会使用默认样式。
     */
    const updateChartTheme = () => {
-      const { theme: providerTheme } = chartProvideOptions || {}
-
      if (echartInstanceRef.value) {
        destroyChart()
      }

-      // 如果配置了全局配置主题，则忽略后面所有逻辑
-      if (providerTheme) {
-        renderChart(providerTheme)
-
-        return
-      }
-
      if (props.theme === 'default') {
        props.autoChangeTheme ? renderChart('dark') : renderChart('')

--- a/src/components/base/RCollapseGrid/src/index.tsx
+++ b/src/components/base/RCollapseGrid/src/index.tsx
@ -81,7 +81,6 @@ export default defineComponent({
      yGap,
      collapsedRows,
      cssVars,
-      actionSpan,
      bordered,
    } = this

@ -98,11 +97,7 @@ export default defineComponent({
              collapsedRows={collapsedRows}
            >
              {defaultSlot?.()}
-              <NGridItem
-                suffix
-                class="ray-collapse-grid__suffix--btn"
-                span={actionSpan}
-              >
+              <NGridItem suffix class="ray-collapse-grid__suffix--btn">
                <NFlex justify="end" align="center">
                  {action?.()}
                  {collapse
--- a/src/components/base/RCollapseGrid/src/props.ts
+++ b/src/components/base/RCollapseGrid/src/props.ts
@ -5,17 +5,6 @@ import type { CollapseToggleText, ActionAlignType } from './types'
 import type { AnyFC, MaybeArray } from '@/types'

 const props = {
-  /**
-   *
-   * @description
-   * 操作区域列数。
-   *
-   * @default 1
-   */
-  actionSpan: {
-    type: Number,
-    default: 1,
-  },
  /**
   *
   * @description
--- a/src/components/base/RDraggableCard/DraggableCard.tsx
+++ b/src/components/base/RDraggableCard/DraggableCard.tsx
@ -1,388 +0,0 @@
-import './index.scss'
-
-import { NCard } from 'naive-ui'
-import { Teleport, Transition } from 'vue'
-
-import interact from 'interactjs'
-import { cardProps } from 'naive-ui'
-import { unrefElement, completeSize, queryElements } from '@/utils'
-
-import type { VNode } from 'vue'
-import type { MaybeElement, MaybeRefOrGetter } from '@vueuse/core'
-import type { AnyFC } from '@/types'
-
-type RestrictRectOptions = Parameters<typeof interact.modifiers.restrictRect>[0]
-
-type Padding = {
-  x: number
-  y: number
-}
-
-export type DefaultPosition =
-  | Padding
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'center'
-  | 'top-center'
-  | 'bottom-center'
-
-const props = {
-  ...cardProps,
-  /**
-   *
-   * @description
-   * 需要限制的区域位置。
-   *
-   * @default body
-   */
-  restrictionElement: {
-    type: [String, HTMLElement, Function, Object] as PropType<
-      string | HTMLElement | (() => VNode) | MaybeRefOrGetter<MaybeElement>
-    >,
-    default: 'body',
-  },
-  /**
-   *
-   * @description
-   * 是否启用拖拽。
-   *
-   * @default true
-   */
-  dad: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   *
-   * @description
-   * 自定义限制拖拽范围。
-   *
-   * @default undefined
-   */
-  restrictRectOptions: {
-    type: Object as PropType<RestrictRectOptions>,
-    default: void 0,
-  },
-  /**
-   *
-   * @description
-   * 默认位置。
-   *
-   * @default { x: 0, y: 0 }
-   */
-  defaultPosition: {
-    type: [Object, String] as PropType<DefaultPosition>,
-    default: () => ({
-      x: 0,
-      y: 0,
-    }),
-  },
-  /**
-   *
-   * @description
-   * 拖拽卡片宽度。
-   *
-   * @default 600
-   */
-  width: {
-    type: [String, Number] as PropType<string | number>,
-    default: 600,
-  },
-  /**
-   *
-   * @description
-   * 拖拽卡片 z-index。
-   *
-   * @default undefined
-   */
-  zIndex: {
-    type: Number,
-    default: void 0,
-  },
-  /**
-   *
-   * @description
-   * 是否启用动画。
-   *
-   * @default false
-   */
-  animation: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   *
-   * @description
-   * 默认的边距。
-   * 设置该属性后，卡片首次出现的位置会根据该属性进行偏移。
-   *
-   * @default undefined
-   */
-  padding: {
-    type: Object as PropType<Padding>,
-    default: void 0,
-  },
-}
-
-export default defineComponent({
-  name: 'RDraggableCard',
-  props,
-  setup(props, { expose }) {
-    const cardRef = useTemplateRef<HTMLElement>('cardRef')
-    let interactInst: ReturnType<typeof interact> | null = null
-    const position = {
-      x: 0,
-      y: 0,
-    }
-    const CONTAINER_ID = 'r-draggable-card-container'
-    const cssVars = computed(() => {
-      return {
-        '--r-draggable-card-width': completeSize(props.width),
-        '--r-draggable-card-z-index': props.zIndex,
-      }
-    })
-    let isSetup = false
-    const cacheProps = {
-      defaultPosition: props.defaultPosition,
-      dad: props.dad,
-    }
-
-    // 创建 DraggableCard 容器
-    const createDraggableCardContainer = () => {
-      if (!document.getElementById(CONTAINER_ID)) {
-        const container = document.createElement('div')
-
-        container.id = CONTAINER_ID
-        document.documentElement.appendChild(container)
-      }
-    }
-
-    createDraggableCardContainer()
-
-    // 获取 card, restrictionElement 的 dom 信息
-    const getDom = () => {
-      const card = unrefElement(cardRef)
-      const re =
-        typeof props.restrictionElement === 'string'
-          ? queryElements<HTMLElement>(props.restrictionElement)
-          : props.restrictionElement
-      let restrictionElement: HTMLElement | null = null
-
-      if (Array.isArray(re)) {
-        restrictionElement = re[0]
-      } else {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        restrictionElement = unrefElement<HTMLElement>(re as any) as HTMLElement
-      }
-
-      return {
-        card,
-        restrictionElement,
-      }
-    }
-
-    // 获取 container, card 的位置
-    const getPosition = (containerRect: DOMRect, cardRect: DOMRect) => {
-      const { defaultPosition, padding } = props
-      const { x: paddingX = 0, y: paddingY = 0 } = padding ?? {}
-      // 默认的 body restrictionElement 的偏移量是 0
-      const {
-        x: containerX,
-        y: containerY,
-        width: containerWidth,
-        height: containerHeight,
-      } = containerRect
-      const { width: cardWidth, height: cardHeight } = cardRect
-
-      if (typeof defaultPosition === 'string') {
-        switch (defaultPosition) {
-          case 'top-center': {
-            const cx1 = (containerWidth - cardWidth) / 2 + containerX
-            const cy1 = paddingY + containerY
-            const cx2 = paddingX + cx1
-            const cy2 = cy1
-
-            return { x: cx2, y: cy2 }
-          }
-
-          case 'bottom-center': {
-            const cx1 = (containerWidth - cardWidth) / 2 + containerX
-            const cy1 = containerHeight - cardHeight - paddingY + containerY
-            const cx2 = paddingX + cx1
-            const cy2 = cy1
-
-            return { x: cx2, y: cy2 }
-          }
-
-          case 'center': {
-            const cx1 = (containerWidth - cardWidth) / 2 + containerX
-            const cy1 = (containerHeight - cardHeight) / 2 + containerY
-            const cx2 = paddingX + cx1
-            const cy2 = paddingY + cy1
-
-            return { x: cx2, y: cy2 }
-          }
-
-          case 'top-left':
-            return { x: paddingX + containerX, y: paddingY + containerY }
-
-          case 'top-right':
-            return {
-              x: containerWidth - cardWidth - paddingX + containerX,
-              y: paddingY + containerY,
-            }
-
-          case 'bottom-left':
-            return {
-              x: paddingX + containerX,
-              y: containerHeight - cardHeight - paddingY + containerY,
-            }
-
-          case 'bottom-right':
-            return {
-              x: containerWidth - cardWidth - paddingX + containerX,
-              y: containerHeight - cardHeight - paddingY + containerY,
-            }
-
-          // 默认为左上角
-          default:
-            return { x: paddingX + containerX, y: paddingY + containerY }
-        }
-      } else {
-        const { x: defaultX, y: defaultY } = defaultPosition
-
-        return {
-          x: defaultX + containerX + paddingX,
-          y: defaultY + containerY + paddingY,
-        }
-      }
-    }
-
-    // 初始化设置 card 的位置，并且根据配置启用拖拽
-    const setupDraggable = () => {
-      const { card, restrictionElement } = getDom()
-
-      if (!card) {
-        return
-      }
-
-      const restrictionRect = restrictionElement?.getBoundingClientRect()
-      const cardHeader = card.querySelector('.n-card-header')
-      const restrictRectOptions = Object.assign(
-        {},
-        {
-          restriction: restrictionElement,
-          endOnly: true,
-        },
-        props.restrictRectOptions,
-      )
-
-      if (restrictionRect && !isSetup) {
-        // 计算偏移位置
-        const p = getPosition(restrictionRect, card.getBoundingClientRect())
-
-        // 设置初始位置
-        card.style.transform = `translate(${p.x}px, ${p.y}px)`
-        position.x = p.x
-        position.y = p.y
-      }
-
-      if (!props.dad) {
-        return
-      }
-
-      interactInst = interact(card)
-        .draggable({
-          inertia: true,
-          autoScroll: true,
-          allowFrom: cardHeader ? '.n-card-header' : '.n-card__content',
-          modifiers: [interact.modifiers.restrictRect(restrictRectOptions)],
-          listeners: {
-            move: (event) => {
-              card.setAttribute('can-drag', 'true')
-
-              position.x += event.dx
-              position.y += event.dy
-
-              card.style.transform = `translate(${position.x}px, ${position.y}px)`
-            },
-          },
-        })
-        .resizable(false)
-
-      isSetup = true
-    }
-
-    // 取消拖拽
-    const resetDraggable = () => {
-      interactInst?.unset()
-
-      interactInst = null
-    }
-
-    // 更新拖拽
-    const refreshDraggableWhenPropsChange = (fn: AnyFC) => {
-      isSetup = false
-
-      fn()
-      setupDraggable()
-    }
-
-    expose()
-
-    watchEffect(() => {
-      props.dad ? setupDraggable() : resetDraggable()
-
-      if (props.defaultPosition !== cacheProps.defaultPosition) {
-        refreshDraggableWhenPropsChange(() => {
-          cacheProps.defaultPosition = props.defaultPosition
-        })
-      }
-    })
-
-    onMounted(() => {
-      nextTick(() => {
-        setupDraggable()
-      })
-    })
-
-    return {
-      cardRef,
-      CONTAINER_ID,
-      cssVars,
-    }
-  },
-  render() {
-    const { $attrs, $slots, $props, CONTAINER_ID, cssVars, animation } = this
-
-    return (
-      <Teleport to={`#${CONTAINER_ID}`}>
-        {animation ? (
-          <Transition name="draggable-card" appear mode="out-in">
-            <NCard
-              {...$attrs}
-              {...$props}
-              class="r-draggable-card"
-              style={[cssVars]}
-              ref="cardRef"
-            >
-              {{ ...$slots }}
-            </NCard>
-          </Transition>
-        ) : (
-          <NCard
-            {...$attrs}
-            {...$props}
-            class="r-draggable-card"
-            style={[cssVars]}
-            ref="cardRef"
-          >
-            {{ ...$slots }}
-          </NCard>
-        )}
-      </Teleport>
-    )
-  },
-})
--- a/src/components/base/RDraggableCard/index.scss
+++ b/src/components/base/RDraggableCard/index.scss
@ -1,25 +0,0 @@
-.n-card.r-draggable-card {
-  transform-origin: 0 0;
-  position: absolute;
-  width: var(--r-draggable-card-width);
-  z-index: var(--r-draggable-card-z-index);
-}
-
-#r-draggable-card-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-// draggable-card 的 Transition 样式
-.draggable-card-enter-active,
-.draggable-card-leave-active {
-  transition: opacity 0.3s var(--r-bezier);
-}
-
-.draggable-card-enter-from,
-.draggable-card-leave-to {
-  opacity: 0;
-}
--- a/src/components/base/RFlow/index.ts
+++ b/src/components/base/RFlow/index.ts
@ -1,9 +0,0 @@
-import RFlow from './src/Flow'
-import flowProps from './src/props'
-import { useFlow } from './src/hooks'
-
-import type { ExtractPublicPropTypes } from 'vue'
-
-export type FlowProps = ExtractPublicPropTypes<typeof flowProps>
-
-export { RFlow, flowProps, useFlow }
--- a/src/components/base/RFlow/src/Flow.tsx
+++ b/src/components/base/RFlow/src/Flow.tsx
@ -1,155 +0,0 @@
-import './index.scss'
-import '@logicflow/core/lib/style/index.css'
-
-import { useTemplateRef } from 'vue'
-import props from './props'
-import { completeSize, call } from '@/utils'
-import LogicFlow from '@logicflow/core'
-import { omit } from 'lodash-es'
-
-import type { FlowGraphData, G } from './types'
-import type { WatchStopHandle } from 'vue'
-
-// 是否首次注册插件
-let isSetup = false
-
-export default defineComponent({
-  name: 'RFlow',
-  props,
-  setup(props) {
-    // 流程图 dom 实例
-    const flowDomRef = useTemplateRef<HTMLElement>('flowDomRef')
-    // css 变量
-    const cssVars = computed(() => {
-      const { width, height } = props
-      const cssVar = {
-        '--r-flow-width': completeSize(width),
-        '--r-flow-height': completeSize(height),
-      }
-
-      return cssVar
-    })
-    // 流程图实例
-    const logicFlowInstRef = shallowRef<LogicFlow>()
-    // 需要禁用的流程图配置项
-    const readonlyOptions = {
-      nodeTextEdit: false,
-      edgeTextEdit: false,
-      textEdit: false,
-    }
-    // watchData 回调
-    let watchDataStop: WatchStopHandle
-    // 默认流程图数据
-    const defaultGraphData = {
-      nodes: [],
-      edges: [],
-    }
-    const cacheProps = {
-      readonly: props.readonly,
-    }
-
-    // 注册流程图插件
-    const registerExtension = () => {
-      if (!isSetup) {
-        props.use?.filter(Boolean).forEach((curr) => LogicFlow.use(curr))
-
-        isSetup = true
-      }
-    }
-
-    // 动态根据 readonly 配置项修改流程图配置
-    const updateFlowConfig = (bool: boolean) => {
-      if (!logicFlowInstRef.value) {
-        return
-      }
-
-      const ops = Object.entries(readonlyOptions).reduce(
-        (acc, [key]) => {
-          acc[key as keyof typeof acc] = !bool
-
-          return acc
-        },
-        {} as typeof readonlyOptions,
-      )
-
-      // 单独处理 isSilentMode 配置项
-      Object.assign(readonlyOptions, ops, {
-        isSilentMode: bool,
-      })
-      logicFlowInstRef.value.updateEditConfig(readonlyOptions)
-    }
-
-    /**
-     *
-     * @param graphData 流程图数据
-     *
-     * @description
-     * 初始化流程图。
-     *
-     * 会自动忽略 container 属性，即使是配置了。
-     */
-    const setupFlowRender = (graphData?: FlowGraphData) => {
-      registerExtension()
-
-      if (!flowDomRef.value) {
-        return
-      }
-
-      const { options, readonly } = props
-
-      // 初始化流程图实例
-      logicFlowInstRef.value = new LogicFlow({
-        container: unref(flowDomRef.value),
-        ...omit(options, 'container'),
-      })
-
-      // 渲染
-      logicFlowInstRef.value.render((graphData || defaultGraphData) as G)
-      // 是否处于只读模式，如果是只读模式，则覆盖 options 配置项为 readonlyOptions
-      updateFlowConfig(readonly)
-    }
-
-    watchEffect(() => {
-      if (props.watchData) {
-        watchDataStop = watch(
-          () => props.data,
-          (ndata) => {
-            if (logicFlowInstRef.value) {
-              ndata && logicFlowInstRef.value.renderRawData(ndata as G)
-            } else {
-              setupFlowRender(ndata)
-            }
-          },
-        )
-      } else {
-        watchDataStop?.()
-      }
-
-      if (props.readonly !== cacheProps.readonly) {
-        updateFlowConfig(props.readonly)
-
-        cacheProps.readonly = props.readonly
-      }
-    })
-
-    onMounted(() => {
-      setupFlowRender()
-
-      const { onRegister } = props
-
-      if (onRegister && logicFlowInstRef.value) {
-        call(onRegister, logicFlowInstRef.value)
-      }
-    })
-
-    return {
-      flowDomRef,
-      cssVars,
-    }
-  },
-  render() {
-    const { cssVars } = this
-
-    return <div class="r-flow" style={[cssVars]} ref="flowDomRef"></div>
-  },
-})
--- a/src/components/base/RFlow/src/constant.ts
+++ b/src/components/base/RFlow/src/constant.ts
@ -1,17 +0,0 @@
-import type { FlowOptions } from './types'
-
-/**
- *
- * @description
- * RFlow 默认初始化流程图配置项。
- * 默认，使用组件内置的 container，所以会自动忽略该属性，即使是传递了。
- */
-export const getDefaultFlowOptions = (): FlowOptions => {
-  return {
-    grid: true,
-    partial: false,
-    keyboard: {
-      enabled: true,
-    },
-  }
-}
--- a/src/components/base/RFlow/src/hooks/index.ts
+++ b/src/components/base/RFlow/src/hooks/index.ts
@ -1 +0,0 @@
-export { useFlow } from './useFlow'
--- a/src/components/base/RFlow/src/hooks/useFlow.ts
+++ b/src/components/base/RFlow/src/hooks/useFlow.ts
@ -1,47 +0,0 @@
-import type LogicFlow from '@logicflow/core'
-
-export const useFlow = () => {
-  let flowInst: LogicFlow
-
-  /**
-   *
-   * @param inst flow instance
-   *
-   * @description
-   * 注册当前 flow 实例，用于使用 useFlow hook。
-   */
-  const register = (inst: LogicFlow) => {
-    if (inst) {
-      flowInst = inst
-    }
-  }
-
-  /**
-   *
-   * @description
-   * 获取当前 flow 实例。
-   *
-   * 如果未在调用前注册 onRegister 事件，则会抛出异常。
-   *
-   * @example
-   * const [register, { getFlowInstance }] = useFlow()
-   *
-   * const inst = getFlowInstance()
-   */
-  const getFlowInstance = () => {
-    if (!flowInst) {
-      throw new Error(
-        '[useFlow]: flow instance is not ready yet. if you are using useFlow, please make sure you have called register method in onRegister event.',
-      )
-    }
-
-    return flowInst
-  }
-
-  return [
-    register,
-    {
-      getFlowInstance,
-    },
-  ] as const
-}
--- a/src/components/base/RFlow/src/index.scss
+++ b/src/components/base/RFlow/src/index.scss
@ -1,10 +0,0 @@
-.r-flow {
-  width: var(--r-flow-width);
-  height: var(--r-flow-height);
-}
-
-.lf-text-input,
-.lf-control-text,
-.lf-menu-item {
-  color: initial;
-}
--- a/src/components/base/RFlow/src/props.ts
+++ b/src/components/base/RFlow/src/props.ts
@ -1,104 +0,0 @@
-import { getDefaultFlowOptions } from './constant'
-
-import type { FlowGraphData, FlowOptions, ExtensionType } from './types'
-import type LogicFlow from '@logicflow/core'
-import type { MaybeArray } from '@/types'
-
-const props = {
-  /**
-   *
-   * @description
-   * 自定义全局插件。
-   * 需要在流程图初始化之前注册，否则无效。
-   *
-   * 需要在引入插件之前，导入对应的基础 css 文件。
-   *
-   * @see https://site.logic-flow.cn/tutorial/extension/intro
-   */
-  use: {
-    type: Array as PropType<ExtensionType[]>,
-    default: void 0,
-  },
-  /**
-   *
-   * @description
-   * 是否主动监听 data 变化，重新渲染流程图。
-   */
-  watchData: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   *
-   * @description
-   * 流程图是否可以编辑与操作。
-   *
-   * 该配置项会覆盖 options 配置项，拥有最高的优先级。
-   *
-   * @default false
-   */
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   *
-   * @description
-   * 流程图宽度。
-   *
-   * @default '100%'
-   */
-  width: {
-    type: [String, Number] as PropType<string | number>,
-    default: '100%',
-  },
-  /**
-   *
-   * @description
-   * 流程图高度。
-   *
-   * @default '100%'
-   */
-  height: {
-    type: [String, Number] as PropType<string | number>,
-    default: '100%',
-  },
-  /**
-   *
-   * @description
-   * 流程图数据。
-   *
-   * @default undefined
-   */
-  data: {
-    type: Object as PropType<FlowGraphData>,
-    default: void 0,
-  },
-  /**
-   *
-   * @description
-   * 流程图配置项。
-   *
-   * @default undefined
-   */
-  options: {
-    type: Object as PropType<FlowOptions>,
-    default: getDefaultFlowOptions(),
-  },
-  /**
-   *
-   * @description
-   * RFlow 注册挂载成功后触发的事件。
-   * 可以结合 useFlow 方法中的 register 方法使用，然后便捷的使用 hooks。
-   *
-   * @default undefined
-   */
-  onRegister: {
-    type: [Function, Array] as PropType<
-      MaybeArray<(flowInst: LogicFlow) => void>
-    >,
-    default: void 0,
-  },
-}
-
-export default props
--- a/src/components/base/RFlow/src/types.ts
+++ b/src/components/base/RFlow/src/types.ts
@ -1,61 +0,0 @@
-import type LogicFlow from '@logicflow/core'
-import type { Recordable, SetRequired } from '@/types'
-
-/**
- *
- * @description
- * 因为 Omit 剔除属性，会导致类型提示丢失。
- * 所以，这里手动的声明 Options 所需属性，避免这个问题。
- *
- * 后期改动的时候，需要关注官方的文档变更情况，及时的同步跟新。
- */
-type OptionsPickKeys =
-  | 'width'
-  | 'height'
-  | 'background'
-  | 'grid'
-  | 'partial'
-  | 'keyboard'
-  | 'style'
-  | 'edgeType'
-  | 'adjustEdge'
-  | 'textMode'
-  | 'edgeTextMode'
-  | 'nodeTextMode'
-  | 'allowRotate'
-  | 'allowResize'
-  | 'isSilentMode'
-  | 'stopScrollGraph'
-  | 'stopZoomGraph'
-  | 'stopMoveGraph'
-  | 'animation'
-  | 'history'
-  | 'outline'
-  | 'snapline'
-  | 'textEdit'
-  | 'guards'
-  | 'overlapMode'
-  | 'plugins'
-  | 'pluginsOptions'
-  | 'disabledPlugins'
-  | 'disabledTools'
-  | 'idGenerator'
-  | 'edgeGenerator'
-  | 'customTrajectory'
-
-export type G = Parameters<LogicFlow['render']>[0]
-
-export type NodeConfig = SetRequired<NonNullable<G['nodes']>[0], 'id'> &
-  Recordable
-
-export type EdgeConfig = SetRequired<NonNullable<G['edges']>[0], 'id'> &
-  Recordable
-
-export interface FlowGraphData {
-  nodes?: NodeConfig[]
-  edges?: EdgeConfig[]
-}
-
-export type FlowOptions = Pick<LogicFlow['options'], OptionsPickKeys>
-
-export type ExtensionType = Parameters<typeof LogicFlow.use>[0]
--- a/src/components/base/RForm/src/hooks/useForm.ts
+++ b/src/components/base/RForm/src/hooks/useForm.ts
@ -36,14 +36,11 @@ import type { Recordable } from '@/types'
 *   },
 * })
 */
-const useForm = <
-  T extends Recordable = Recordable,
-  R extends RFormRules = RFormRules,
->(
+const useForm = <T extends Recordable, R extends RFormRules>(
  model?: T,
  rules?: R,
 ) => {
-  const formRef = shallowRef<RFormInst>()
+  const formRef = ref<RFormInst>()

  const register = (inst: RFormInst) => {
    if (inst) {
--- a/src/components/base/RModal/src/Modal.tsx
+++ b/src/components/base/RModal/src/Modal.tsx
@ -4,12 +4,14 @@ import { NModal } from 'naive-ui'

 import props from './props'
 import { completeSize, uuid } from '@/utils'
+import { setupInteract } from './utils'
 import {
  FULLSCREEN_CARD_TYPE_CLASS,
  R_MODAL_CLASS,
  CSS_VARS_KEYS,
 } from './constant'

+import type interact from 'interactjs'
 import type { ModalProps } from 'naive-ui'

 export default defineComponent({
@ -22,11 +24,57 @@ export default defineComponent({
      [CSS_VARS_KEYS['dialogWidth']]: completeSize(props.dialogWidth ?? 446),
    }))
    const uuidEl = uuid()
+    let intractable: null | ReturnType<typeof interact>
+    // 记录拖拽的位置
+    const position = {
+      x: 0,
+      y: 0,
+    }
    // 当前是否为预设 card 类型并且设置了 fullscreen
    const isFullscreenCardType = computed(
      () => props.preset === 'card' && props.fullscreen,
    )

+    watch(
+      () => props.show,
+      (ndata) => {
+        if (
+          ndata &&
+          props.dad &&
+          (props.preset === 'card' || props.preset === 'dialog')
+        ) {
+          nextTick(() => {
+            const target = document.getElementById(uuidEl)
+
+            if (target) {
+              setupInteract(target, {
+                preset: props.preset,
+                x: position.x,
+                y: position.y,
+                dargCallback: (x, y) => {
+                  position.x = x
+                  position.y = y
+                },
+              }).then((res) => {
+                intractable = res
+              })
+            }
+
+            if (props.memo && target) {
+              target.style.transform = `translate(${position.x}px, ${position.y}px)`
+            }
+          })
+        } else {
+          intractable?.unset()
+
+          intractable = null
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+
    return {
      cssVars,
      isFullscreenCardType,
--- a/src/components/base/RModal/src/hooks/useModal.ts
+++ b/src/components/base/RModal/src/hooks/useModal.ts
@ -1,13 +1,16 @@
 import { useModal as useNaiveModal, NScrollbar } from 'naive-ui'
+import { setupInteract } from '../utils'
 import { queryElements, setStyle, completeSize, setClass } from '@/utils'
 import { R_MODAL_CLASS, CSS_VARS_KEYS } from '../constant'

 import type { RModalProps } from '../types'

+interface UseModalCreateOptions extends Omit<RModalProps, 'memo'> {}
+
 const useModal = () => {
  const { create: naiveCreate, destroyAll: naiveDestroyAll } = useNaiveModal()

-  const create = (options: RModalProps) => {
+  const create = (options: UseModalCreateOptions) => {
    const { content, ...rest } = options
    let contentNode = content

@ -20,11 +23,11 @@ const useModal = () => {
              color: 'rgba(0, 0, 0, 0)',
              colorHover: 'rgba(0, 0, 0, 0)',
            },
-            trigger: 'hover',
+            trigger: 'none',
            style: {
              width: 'auto',
-              maxHeight:
-                'calc(var(--html-height) - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
+              height:
+                'calc(100vh - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
            },
          },
          {
@ -34,7 +37,7 @@ const useModal = () => {
        )
    }

-    const { preset, fullscreen, width, cardWidth, dialogWidth } = options
+    const { preset, dad, fullscreen, width, cardWidth, dialogWidth } = options
    const modalReactive = naiveCreate({
      ...rest,
      content: contentNode,
@ -54,8 +57,28 @@ const useModal = () => {
        return
      }

+      // 是否启用拖拽
+      if (dad) {
+        setupInteract(modalElement, {
+          preset,
+          x: 0,
+          y: 0,
+        })
+      }
+
      // preset 为 card，fullscreen 为 true 时，最大化 modal
      if (fullscreen && preset === 'card') {
+        const cardContentElement =
+          modalElement.querySelector<HTMLElement>('.n-card__content')
+
+        if (cardContentElement) {
+          setStyle(cardContentElement, {
+            maxHeight: `calc(100vh - 9px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))`,
+            overflowY: 'hidden',
+            padding: '0',
+          })
+        }
+
        setStyle(modalElement, {
          width: '100%',
          height: '100vh',
--- a/src/components/base/RModal/src/index.scss
+++ b/src/components/base/RModal/src/index.scss
@ -4,11 +4,6 @@
  // 当设置全屏时，启用滚动
  & .n-card__content {
    overflow: scroll;
-    max-height: calc(
-      var(--html-height) - var(--n-padding-bottom) - var(--n-padding-bottom) - var(
-          --n-padding-top
-        )
-    );
  }
 }

--- a/src/components/base/RModal/src/props.ts
+++ b/src/components/base/RModal/src/props.ts
@ -3,6 +3,17 @@ import type { PropType } from 'vue'

 const props = {
  ...modalProps,
+  /**
+   *
+   * @description
+   * 是否记住上一次的位置。
+   *
+   * @default true
+   */
+  memo: {
+    type: Boolean,
+    default: true,
+  },
  /**
   *
   * @description
@ -47,6 +58,18 @@ const props = {
    type: [String, Number] as PropType<string | number>,
    default: 446,
  },
+  /**
+   *
+   * @description
+   * 是否启用拖拽。
+   * 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
+   *
+   * @default false
+   */
+  dad: {
+    type: Boolean,
+    default: false,
+  },
 }

 export default props
--- a/src/components/base/RModal/src/types.ts
+++ b/src/components/base/RModal/src/types.ts
@ -1,6 +1,14 @@
 import type { ModalOptions as NaiveModalOptions } from 'naive-ui'

 export interface RModalProps extends NaiveModalOptions {
+  /**
+   *
+   * @description
+   * 是否记住上一次的位置。
+   *
+   * @default true
+   */
+  memo?: boolean
  /**
   *
   * @description
@ -33,4 +41,13 @@ export interface RModalProps extends NaiveModalOptions {
   * @default 446
   */
  dialogWidth?: number | string
+  /**
+   *
+   * @description
+   * 是否启用拖拽。
+   * 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
+   *
+   * @default false
+   */
+  dad?: boolean
 }
--- a/src/components/base/RModal/src/utils.ts
+++ b/src/components/base/RModal/src/utils.ts
@ -0,0 +1,101 @@
+import interact from 'interactjs'
+
+import type { ModalProps } from 'naive-ui'
+import type { RModalProps } from './types'
+
+interface SetupDraggableOptions {
+  scheduler?: (event: Interact.DragEvent) => void
+}
+
+interface SetupInteractOptions {
+  preset: ModalProps['preset']
+  memo?: RModalProps['memo']
+  x: number
+  y: number
+  dargCallback?: (x: number, y: number, event: Interact.DragEvent) => void
+}
+
+/**
+ *
+ * @param bindModal modal 预设元素
+ * @param preset 预设类型
+ *
+ * @description
+ * 根据预设模态框设置拖拽效果
+ * 但是该效果有且仅有 card, dialog 有效
+ *
+ * 默认添加 30ms 延迟，避免诡异问题
+ */
+export const setupDraggable = (
+  bindModal: HTMLElement,
+  preset: ModalProps['preset'],
+  options?: SetupDraggableOptions,
+): Promise<ReturnType<typeof interact>> => {
+  const { scheduler } = options ?? {}
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const allowFromStr =
+        preset === 'card' ? '.n-card-header__main' : '.n-dialog__title'
+
+      if (bindModal) {
+        const dad = interact(bindModal)
+          .draggable({
+            inertia: true,
+            autoScroll: true,
+            allowFrom: allowFromStr,
+            modifiers: [
+              interact.modifiers.restrictRect({
+                restriction: 'parent',
+                endOnly: true,
+              }),
+            ],
+            listeners: {
+              move: (event) => {
+                scheduler?.(event)
+              },
+            },
+          })
+          .resizable(false)
+
+        resolve(dad)
+      }
+    }, 30)
+  })
+}
+
+export const setupInteract = (
+  target: HTMLElement | string,
+  options: SetupInteractOptions,
+): Promise<ReturnType<typeof interact>> => {
+  const _target =
+    typeof target === 'string'
+      ? (document.querySelector(target) as HTMLElement)
+      : target
+
+  return new Promise((resolve, reject) => {
+    if (_target) {
+      _target.setAttribute('can-drag', 'true')
+
+      const { preset, dargCallback } = options
+      let { x, y } = options
+
+      setupDraggable(_target, preset, {
+        scheduler: (event) => {
+          const target = event.target
+
+          x += event.dx
+          y += event.dy
+
+          target.style.transform = `translate(${x}px, ${y}px)`
+
+          dargCallback?.(x, y, event)
+        },
+      }).then((res) => {
+        resolve(res)
+      })
+    } else {
+      reject()
+    }
+  })
+}
--- a/src/components/base/RSegment/src/Segment.tsx
+++ b/src/components/base/RSegment/src/Segment.tsx
@ -94,6 +94,7 @@ export default defineComponent({
    return (
      <NTabs
        {...($props as TabsProps)}
+        ref="segmentRef"
        style={[cssVars]}
        class="r-segment"
        type="segment"
--- a/src/components/base/RTable/src/Table.tsx
+++ b/src/components/base/RTable/src/Table.tsx
@ -61,23 +61,6 @@ export default defineComponent({
        pick(props, 'striped', 'bordered'),
      ),
    )
-    // 默认设置 card header style
-    const cardHeaderStyle = computed(() => {
-      const { title, tool, cardProps } = props
-      const { headerStyle = {} } = cardProps ?? {}
-
-      if (!title && !tool) {
-        return Object.assign(
-          {},
-          {
-            paddingTop: '0px',
-          },
-          headerStyle,
-        )
-      }
-
-      return headerStyle
-    })

    /**
     *
@ -145,7 +128,6 @@ export default defineComponent({
      if (onUpdateColumns) {
        call(onUpdateColumns, options)
      }
-
      if ($onUpdateColumns) {
        call($onUpdateColumns, options)
      }
@ -168,9 +150,9 @@ export default defineComponent({
      const keys = Object.keys(propsPopselectValue.value)

      keys.forEach((key) => {
-        propsPopselectValue.value[
-          key as keyof typeof propsPopselectValue.value
-        ] = value.includes(key as PropsComponentPopselectKeys)
+        propsPopselectValue.value[key] = value.includes(
+          key as PropsComponentPopselectKeys,
+        )
      })
    }

@ -248,7 +230,6 @@ export default defineComponent({
      tool,
      wrapperRef,
      propsPopselectValue,
-      cardHeaderStyle,
    }
  },
  render() {
@ -261,7 +242,6 @@ export default defineComponent({
      uuidWrapper,
      privateReactive,
      propsPopselectValue,
-      cardHeaderStyle,
    } = this
    const { class: className, ...restAttrs } = $attrs
    const { tool, combineRowProps, contextMenuSelect } = this
@ -274,12 +254,11 @@ export default defineComponent({
      tableFlexHeight,
      cardProps,
      ...restProps
-    } = $props
-    const { headerStyle, ...restCardProps } = cardProps ?? {}
+    } = $props as ExtractPublicPropTypes<typeof props>

    return (
      <NCard
-        {...restCardProps}
+        {...cardProps}
        {...{
          id: uuidWrapper,
        }}
@ -287,7 +266,6 @@ export default defineComponent({
        ref="wrapperRef"
        bordered={wrapperBordered}
        class={className}
-        style={cardHeaderStyle}
      >
        {{
          default: () => (
--- a/src/components/base/RTable/src/components/C.tsx
+++ b/src/components/base/RTable/src/components/C.tsx
@ -113,6 +113,7 @@ export default defineComponent({
          return true
        })

+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        return cloneColumns.map((curr, idx) => {
          const { key, title, children, fixed, isResizable, ...args } =
            curr as C
@ -169,7 +170,7 @@ export default defineComponent({
          }
        }) as C[]
      },
-
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
      set: () => {},
    })

@ -190,9 +191,8 @@ export default defineComponent({
    }

    const fixedClick: FixedClick = (type, option, index) => {
-      const key = `${type}FixedActivated` as const
-      const otherKey =
-        `${type === 'left' ? 'right' : 'left'}FixedActivated` as const
+      const key = `${type}FixedActivated`
+      const otherKey = `${type === 'left' ? 'right' : 'left'}FixedActivated`

      option[otherKey] = false
      option[key] = !option[key]
--- a/src/components/base/RTable/src/hooks/useTable.ts
+++ b/src/components/base/RTable/src/hooks/useTable.ts
@ -41,7 +41,7 @@ import type { PrintDomOptions } from '@/utils'
 * })
 */
 const useTable = () => {
-  const tableRef = shallowRef<RTableInst>()
+  const tableRef = ref<RTableInst>()
  let extra = {} as TableProvider

  const register: UseTableRegister = (inst, extraInfo) => {
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -1,5 +1,4 @@
 import RCollapse from '../components/pro/RCollapse/Collapse'
-import RDraggableCard from '../components/base/RDraggableCard/DraggableCard'

 // 导出所有自定义组件
 export * from './base/RChart'
@ -14,8 +13,7 @@ export * from './base/RForm'
 export * from './base/RSegment'
 export * from './base/RBarcode'
 export * from '../components/pro/RTablePro'
-export * from './base/RFlow'
-export { RCollapse, RDraggableCard }
+export { RCollapse }

 // 导出自定义组件类型
 export type * from './base/RChart/src/types'
@ -27,10 +25,3 @@ export type * from './base/RForm/src/types'
 export type * from './base/RModal/src/types'
 export type * from './base/RSegment/src/types'
 export type * from './base/RBarcode/src/types'
-export type {
-  NodeConfig,
-  EdgeConfig,
-  FlowGraphData,
-  FlowOptions,
-} from './base/RFlow/src/types'
-export type { DefaultPosition } from './base/RDraggableCard/DraggableCard'
--- a/src/components/pro/RTablePro/src/TablePro.tsx
+++ b/src/components/pro/RTablePro/src/TablePro.tsx
@ -2,7 +2,7 @@ import { RTable } from '@/components'

 import props from './props'
 import { useTable } from '@/components'
-import { call, removeDuplicateKeys } from '@/utils'
+import { call } from '@/utils'
 import { usePagination } from '@/hooks'

 import type { TablePagination, TableRequestConfig, TableProInst } from './types'
@ -62,8 +62,7 @@ export default defineComponent({
    const combineRequestParams = (extraConfig?: TableRequestConfig) => {
      const config = Object.assign({}, props.requestConfig, extraConfig)

-      const { formatRangeTime } = config
-      let params = config.params || {}
+      const { params, formatRangeTime } = config

      // 转换时间范围，该功能仅支持 NDatePicker range 模式参数
      if (formatRangeTime?.length && params) {
@ -85,8 +84,6 @@ export default defineComponent({
        })
      }

-      params = removeDuplicateKeys(params)
-
      const requestParams = Object.assign({}, params, {
        page: getPage(),
        pageSize: getPageSize(),
@ -142,7 +139,6 @@ export default defineComponent({
          filter,
          getCurrentTableRequestParams:
            combineRequestParams as TableProInst['getCurrentTableRequestParams'],
-          resetTablePagination: resetPagination,
        })
      }
    })
--- a/src/components/pro/RTablePro/src/hooks/useTablePro.ts
+++ b/src/components/pro/RTablePro/src/hooks/useTablePro.ts
@ -1,6 +1,7 @@
 import type { Recordable } from '@/types'
 import type { TableProInst, TableRequestConfig } from '../types'
 import type {
+  RTableInst,
  CsvOptionsType,
  FilterState,
  ScrollToOptions,
@ -151,14 +152,6 @@ export const useTablePro = () => {
    // @ts-ignore
    getTableProInstance().getCurrentTableRequestParams.call(null, extraConfig)

-  /**
-   *
-   * @description
-   * 重置表格分页。
-   */
-  const resetTablePagination = () =>
-    getTableProInstance().resetTablePagination.call(null)
-
  return [
    register,
    {
@ -174,7 +167,6 @@ export const useTablePro = () => {
      runTableRequest,
      print,
      getCurrentTableRequestParams,
-      resetTablePagination,
    },
  ] as const
 }
--- a/src/components/pro/RTablePro/src/types.ts
+++ b/src/components/pro/RTablePro/src/types.ts
@ -72,10 +72,4 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
  getCurrentTableRequestParams: <T = Recordable>(
    extraConfig?: TableRequestConfig<T>,
  ) => TableRequestConfig<T>['params'] & Recordable
-  /**
-   *
-   * @description
-   * 重置表格分页。
-   */
-  resetTablePagination: () => void
 }
--- a/src/dayjs/index.ts
+++ b/src/dayjs/index.ts
@ -1,10 +1,6 @@
 import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL } from '@/app-config'
 import 'dayjs/locale/zh-cn'
-import { getStorage } from '@/utils'
-import { APP_CATCH_KEY, DAYJS_LOCAL_MAP } from '@/app-config'
-
-import type { SettingState } from '@/store/modules/setting/types'

 /**
 *
@ -14,16 +10,5 @@ import type { SettingState } from '@/store/modules/setting/types'
 * 初始化 dayjs 的语言环境。
 */
 export const setupDayjs = () => {
-  const { localeLanguage } = getStorage<SettingState>(
-    APP_CATCH_KEY.appPiniaSettingStore,
-    'localStorage',
-    {
-      defaultValue: {} as SettingState,
-    },
-  )
-  const local =
-    DAYJS_LOCAL_MAP[localeLanguage as keyof typeof DAYJS_LOCAL_MAP] ||
-    DEFAULT_DAYJS_LOCAL
-
-  dayjs.locale(local)
+  dayjs.locale(DEFAULT_DAYJS_LOCAL)
 }
--- a/src/directives/types.ts
+++ b/src/directives/types.ts
@ -1,12 +1,12 @@
-import type { Directive, App } from 'vue'
-import type { Recordable } from '@/types'
+import type { Directive } from 'vue'
+import type { App } from 'vue'

 export type { DebounceBindingOptions } from './modules/debounce/types'
 export type { ThrottleBindingOptions } from './modules/throttle/types'

 export type CustomDirectiveFC<T, K> = () => Directive<T, K>

-export interface DirectiveModules<T = unknown, K = unknown> extends Recordable {
+export interface DirectiveModules<T = unknown, K = unknown> extends Object {
  default: CustomDirectiveFC<T, K>
 }

--- a/src/directives/utils/combine.ts
+++ b/src/directives/utils/combine.ts
@ -8,10 +8,10 @@ export const combineDirective = <
 ) => {
  const directives = Object.keys(directiveModules).reduce(
    (pre, curr) => {
-      const fn = directiveModules[curr]?.default
+      const fc = directiveModules[curr]?.default

-      if (typeof fn === 'function') {
-        pre[curr as K] = fn
+      if (typeof fc === 'function') {
+        pre[curr] = fc

        return pre
      } else {
--- a/src/global-variable/variable.ts
+++ b/src/global-variable/variable.ts
@ -15,8 +15,6 @@
 * createVariableState({ your state })
 */

-import { updateObjectValue } from '@/utils'
-
 import type { AnyFC } from '@/types'

 /**
@ -59,7 +57,11 @@ export function setVariable<T extends VariableStateKey, FC extends AnyFC>(
  value: VariableState[T],
  cb?: FC,
 ) {
-  updateObjectValue(variableState, key, value, cb)
+  if (Object.hasOwn(variableState, key)) {
+    variableState[key] = value
+
+    cb?.()
+  }
 }

 /**
--- a/src/hooks/components/useContextmenuCoordinate.ts
+++ b/src/hooks/components/useContextmenuCoordinate.ts
@ -23,11 +23,10 @@ export interface UseContextmenuCoordinateOptions {
 *
 * @param target 绑定元素
 *
- * @description
- * 右键点击元素时，获取鼠标坐标。该方法结合 NDropdown 组件使用，可以实现右键菜单功能。
+ * 右键点击元素时，获取鼠标坐标。该方法结合 NDropdown 组件使用，可以实现右键菜单功能
 *
 * @example
- * const target = useTemplateRef<HTMLElement | null>('target')
+ * const target = ref<HTMLElement | null>(null)
 * const { x, y, show, stop } = useContextmenuCoordinate(target)
 *
 * 如果需要手动停止右键菜单，可以调用 stop 方法
@ -45,13 +44,6 @@ export const useContextmenuCoordinate = (
  const show = ref(false) // 是否显示右键菜单
  const { clickOutside } = options ?? {}

-  /**
-   *
-   * @param value 是否显示右键菜单
-   *
-   * @description
-   * 更新右键菜单的显示状态。
-   */
  const updateShow = (value: boolean) => {
    show.value = value
  }
@ -60,9 +52,8 @@ export const useContextmenuCoordinate = (
   *
   * @param evt 鼠标事件
   *
-   * @description
-   * 鼠标右键点击事件，并且阻止默认事件。
-   * 设置坐标后激活右键菜单。
+   * 鼠标右键点击事件，并且阻止默认事件
+   * 设置坐标后激活右键菜单
   */
  const bindContextMenuEvent = (evt: Event) => {
    evt.preventDefault()
@ -82,8 +73,7 @@ export const useContextmenuCoordinate = (
  if (clickOutside) {
    /**
     *
-     * @description
-     * 自定义点击元素外部时的回调函数。
+     * 自定义点击元素外部时的回调函数
     */
    onClickOutside(target as MaybeElementRef<MaybeElement>, (detectIframe) => {
      clickOutside(detectIframe)
@ -92,8 +82,7 @@ export const useContextmenuCoordinate = (

  /**
   *
-   * @description
-   * 为传递 ref dom 绑定右键菜单事件。
+   * 为传递 ref dom 绑定右键菜单事件
   */
  const cleanupContextmenu = useEventListener(
    target,
@ -101,11 +90,9 @@ export const useContextmenuCoordinate = (
    bindContextMenuEvent,
    options,
  )
-
  /**
   *
-   * @description
-   * 为传递 ref dom 绑定点击事件。
+   * 为传递 ref dom 绑定点击事件
   */
  const cleanupClick = useEventListener(target, 'click', () => {
    updateShow(false)
@ -113,9 +100,8 @@ export const useContextmenuCoordinate = (

  /**
   *
-   * @description
-   * 注销绑定的右键菜单事件、点击事件。
-   * 仅注销该方法绑定的事件。
+   * 注销绑定的右键菜单事件、点击事件
+   * 仅注销该方法绑定的事件
   */
  const stop = () => {
    cleanupContextmenu()
--- a/src/hooks/template/useBadge.ts
+++ b/src/hooks/template/useBadge.ts
@ -77,7 +77,6 @@ export function useBadge() {
  /**
   *
   * @param target 目标菜单 key 或者菜单项（AppMenuOption)
-   * @param extraOption 菜单标记配置项
   *
   * @example
   * const { show } = useBadge()
@ -85,12 +84,8 @@ export function useBadge() {
   * show('your key')
   * show({ ...AppMenuOption })
   */
-  const show = (
-    target: BadgeKey,
-    extraOption?: Omit<AppMenuExtraOptions, 'show'>,
-  ) => {
+  const show = (target: BadgeKey) => {
    normalOption(target, 'show', {
-      ...extraOption,
      show: true,
    })
  }
--- a/src/hooks/template/useSiderBar.ts
+++ b/src/hooks/template/useSiderBar.ts
@ -10,17 +10,17 @@ export type CloseMenuTag = Key | MenuTagOptions
 /**
 *
 * @param target 标签页对象、索引、key
- * @param fn 触发函数
+ * @param fc 触发函数
 *
 * 该方法用于统一获取目标标签页方法
 */
-const normalMenuTagOption = (target: CloseMenuTag, fn: string) => {
+const normalMenuTagOption = (target: CloseMenuTag, fc: string) => {
  const { getMenuTagOptions } = useMenuGetters()

  if (typeof target === 'number') {
    // 判断是否为 NaN
    if (isNaN(target)) {
-      console.warn(`${fn}: The ${target} is NaN, expect number.`)
+      console.warn(`${fc}: The ${target} is NaN, expect number.`)

      return
    }
@ -28,7 +28,7 @@ const normalMenuTagOption = (target: CloseMenuTag, fn: string) => {
    // 判断是否超出当前标签页列表最大长度或者是否为负数
    if (target > getMenuTagOptions.value.length || target < -1) {
      console.warn(
-        `${fn}: The incoming index ${target} did not match the corresponding item.`,
+        `${fc}: The incoming index ${target} did not match the corresponding item.`,
      )

      return
@ -50,7 +50,7 @@ const normalMenuTagOption = (target: CloseMenuTag, fn: string) => {
          index,
        }
      : console.warn(
-          `${fn}: The incoming key ${target} did not match the corresponding item.`,
+          `${fc}: The incoming key ${target} did not match the corresponding item.`,
        )
  } else {
    const { fullPath } = target
@ -60,7 +60,7 @@ const normalMenuTagOption = (target: CloseMenuTag, fn: string) => {

    if (index === -1) {
      console.warn(
-        `${fn}: The incoming menuTag option ${target.fullPath} did not match the corresponding item.`,
+        `${fc}: The incoming menuTag option ${target.fullPath} did not match the corresponding item.`,
      )

      return
@ -170,19 +170,11 @@ export function useSiderBar() {
      spliceMenTagOptions(index)

      if (option.fullPath === getMenuKey.value) {
-        let i = checkCloseLeft(index)
-          ? index - 1
-          : checkCloseRight(index)
-            ? index
-            : index - 1
+        const tag = getMenuTagOptions.value[index - 1]

-        if (i < 0) {
-          i = 0
+        if (tag) {
+          changeMenuModelValue(tag.fullPath, tag)
        }
-
-        const tag = getMenuTagOptions.value[i]
-
-        tag && changeMenuModelValue(tag.fullPath, tag)
      }
    }
  }
--- a/src/hooks/template/useTheme.ts
+++ b/src/hooks/template/useTheme.ts
@ -2,7 +2,6 @@ import { useSettingActions, useSettingGetters } from '@/store'
 import { useI18n } from '@/hooks'
 import { APP_THEME } from '@/app-config'
 import { useColorMode } from '@vueuse/core'
-import { merge } from 'lodash-es'

 export type ThemeLabel = 'Dark' | 'Light'

@ -34,15 +33,17 @@ const setThemeOverrides = (theme: boolean) => {
  updateSettingState(
    'primaryColorOverride',
    theme
-      ? merge(
+      ? Object.assign(
          {},
          getPrimaryColorOverride.value,
          APP_THEME.appNaiveUIThemeOverrides.dark,
+          APP_THEME.appNaiveUIThemeOverridesCommon.dark,
        )
-      : merge(
+      : Object.assign(
          {},
          getPrimaryColorOverride.value,
          APP_THEME.appNaiveUIThemeOverrides.light,
+          APP_THEME.appNaiveUIThemeOverridesCommon.light,
        ),
  )
 }
--- a/src/hooks/template/useWatermark.ts
+++ b/src/hooks/template/useWatermark.ts
@ -16,7 +16,7 @@ export const useWatermark = () => {
   */
  const setWatermarkContent = (content: string) => {
    const { getWatermarkConfig } = useSettingGetters()
-    const assignWatermark = Object.assign({}, getWatermarkConfig.value, {
+    const assignWatermark = Object.assign(getWatermarkConfig.value, {
      content,
    })
    const { updateSettingState } = useSettingActions()
--- a/src/hooks/web/useDayjs.ts
+++ b/src/hooks/web/useDayjs.ts
@ -1,8 +1,6 @@
 import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config'

-import type { DayjsLocalMap } from '@/types'
-
 export interface FormatOption {
  format?: string
 }
@ -21,7 +19,7 @@ export interface StartAndEndOfDay {
  formatEndOfDay: string
 }

-export type LocalKey = keyof DayjsLocalMap
+export type LocalKey = typeof DEFAULT_DAYJS_LOCAL

 const defaultDayjsFormat = 'YYYY-MM-DD HH:mm:ss'

@ -42,8 +40,8 @@ export const useDayjs = () => {
   * 手动配置 dayjs 语言（国际化）。
   *
   * @example
-   * locale('zh-CN')
-   * locale('en-US')
+   * locale('en')
+   * locale('zh-cn')
   */
  const locale = (key: LocalKey) => {
    const locale = DAYJS_LOCAL_MAP[key]
--- a/src/hooks/web/useDomToImage.ts
+++ b/src/hooks/web/useDomToImage.ts
@ -10,32 +10,12 @@ import {

 import type { BasicTarget, TargetType } from '@/types'

-// html-to-image 方法
-const domToImageMethods = {
-  svg: toSvg,
-  png: toPng,
-  jpeg: toJpeg,
-  blob: toBlob,
-  pixelData: toPixelData,
-  canvas: toCanvas,
-} as const
-
-// 获取 html-to-image Options
 type HtmlToImageOptions = Partial<NonNullable<Parameters<typeof toPng>[1]>>

-// 获取 html-to-image 方法 keys
-type DomToImageMethodKeys = keyof typeof domToImageMethods
-
-// 获取 html-to-image 方法返回值
-type DomToImageReturnType<ImageType extends DomToImageMethodKeys> = Awaited<
-  ReturnType<(typeof domToImageMethods)[ImageType]>
->
-
-// 自定义拓展 Options
-type Options<
+interface Options<
  T extends TargetType = Element,
-  ImageType extends DomToImageMethodKeys = DomToImageMethodKeys,
-> = {
+  ImageType extends DomToImageMethodKeys = 'jpeg',
+> {
  /**
   *
   * @description
@ -43,7 +23,7 @@ type Options<
   *
   * @default jpeg
   */
-  imageType?: ImageType
+  imageType?: DomToImageReturnType<ImageType>
  /**
   *
   * @param element current dom
@ -86,10 +66,22 @@ type Options<
  finally?: (element: T) => void
 }

-export type UseDomToImageOptions<
-  T extends TargetType = Element,
-  ImageType extends DomToImageMethodKeys = DomToImageMethodKeys,
-> = Options<T, ImageType> & HtmlToImageOptions
+export type UseDomToImageOptions<T extends TargetType = Element> = Options<T> &
+  HtmlToImageOptions
+
+export type DomToImageMethodKeys = keyof typeof domToImageMethods
+
+type DomToImageReturnType<ImageType extends DomToImageMethodKeys = 'jpeg'> =
+  Awaited<ReturnType<(typeof domToImageMethods)[ImageType]>>
+
+const domToImageMethods = {
+  svg: toSvg,
+  png: toPng,
+  jpeg: toJpeg,
+  blob: toBlob,
+  pixelData: toPixelData,
+  canvas: toCanvas,
+} as const

 /**
 *
@ -106,24 +98,18 @@ export type UseDomToImageOptions<
 * 当然，你也可以不传递 imageType 参数，此时会使用 options.imageType，
 * 如果都未传递，则默认使用 jpeg。
 *
- * 如果希望 created 获得准确的类型，可以给 useDomToImage 手动声明第二个类型参数；
- * 或者就是在显式声明 options.imageType 参数。
- *
 * @example
 * const refDom = ref<HTMLElement>()
- * const { create } = useDomToImage(refDom, {
+ * const { create, stop } = useDomToImage(refDom, {
 *   beforeCreate: (element) => { ... },
 *   created: (element, result) => { ... },
 *   createdError: (error) => { ... },
 *   finally: () => { ... },
 * })
 */
-export const useDomToImage = <
-  T extends HTMLElement,
-  ImageType extends DomToImageMethodKeys = DomToImageMethodKeys,
->(
+export const useDomToImage = <T extends HTMLElement>(
  target: BasicTarget<T>,
-  options?: UseDomToImageOptions<T, ImageType>,
+  options?: UseDomToImageOptions,
 ) => {
  const {
    beforeCreate,
@ -144,14 +130,10 @@ export const useDomToImage = <
      if (!element) {
        createdError?.()

-        return reject(`[useDomToImage]: target element is undefined.`)
+        return reject('useDomToImage: element is undefined.')
      }

-      const imageTypeKey = (imageType ??
-        _imageType ??
-        'jpeg') as DomToImageMethodKeys
-
-      domToImageMethods[imageTypeKey]?.(element, options)
+      domToImageMethods[imageType ?? _imageType ?? 'jpeg']?.(element, options)
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        .then((res: any) => {
          created?.(res, element)
--- a/src/hooks/web/useElementFullscreen.ts
+++ b/src/hooks/web/useElementFullscreen.ts
@ -1,6 +1,8 @@
 import { unrefElement, effectDispose, isValueType, setStyle } from '@/utils'
+import { useWindowSize } from '@vueuse/core'

 import type { BasicTarget } from '@/types'
+import type { CSSProperties } from 'vue'

 export interface UseElementFullscreenOptions {
  /**
@ -56,7 +58,7 @@ export interface UseElementFullscreenOptions {
   * @description
   * 手动设定 transition 过度效果。
   *
-   * @default 'transform 0.3s var(--r-bezier)'
+   * @default 'width 0.3s var(--r-bezier), height 0.3s var(--r-bezier)'
   */
  transition?: string
 }
@ -64,6 +66,7 @@ export interface UseElementFullscreenOptions {
 let currentZIndex = 999
 let isAppend = false
 const ID_TAG = 'ELEMENT-FULLSCREEN-RAY'
+const { width, height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题
 const styleElement = document.createElement('style')

 /**
@ -82,7 +85,7 @@ const styleElement = document.createElement('style')
 *  <div ref="refDom" />
 * </template>
 * <script lang="ts" setup>
- * const refDom = useTemplateRef<HTMLElement>('refDom')
+ * const refDom = ref<HTMLElement>()
 * const { enter, exit, toggleFullscreen } = useElementFullscreen(refDom, { UseElementFullscreenOptions })
 *
 * enter() // 进入全屏
@ -101,7 +104,7 @@ export const useElementFullscreen = (
    exit: _exit,
    backgroundColor,
    zIndex,
-    transition = 'transform 0.3s var(--r-bezier)',
+    transition = 'all 0.3s var(--r-bezier)',
  } = options ?? {}
  let isSetup = false
  const catchBoundingClientRect: {
@ -111,8 +114,6 @@ export const useElementFullscreen = (
    x: null,
    y: null,
  }
-  // 使用 ref 来追踪状态
-  const isFullscreen = ref(false)

  const updateStyle = () => {
    const element = unrefElement(target) as HTMLElement | null
@ -139,8 +140,8 @@ export const useElementFullscreen = (
          : zIndex,
      '--element-fullscreen-transition': transition,
      '--element-fullscreen-background-color': backgroundColor,
-      '--element-fullscreen-width': 'var(--html-width)',
-      '--element-fullscreen-height': 'var(--html-height)',
+      '--element-fullscreen-width': `${width.value}px`,
+      '--element-fullscreen-height': `${height.value}px`,
      '--element-fullscreen-transform-x': `${catchBoundingClientRect.x}px`,
      '--element-fullscreen-transform-y': `${catchBoundingClientRect.y}px`,
    })
@ -155,7 +156,7 @@ export const useElementFullscreen = (
            z-index: var(--element-fullscreen-z-index) !important;
            background-color: var(--element-fullscreen-background-color);
          }
-        `.trim()
+        `

    styleElement.innerHTML = cssContent

@ -187,7 +188,6 @@ export const useElementFullscreen = (
      }

      element.style.transition = transition
-      isFullscreen.value = true

      _enter?.()
    }
@ -202,8 +202,6 @@ export const useElementFullscreen = (
      element.removeAttribute(ID_TAG)
    }

-    isFullscreen.value = false
-
    _exit?.()
  }

@ -219,6 +217,8 @@ export const useElementFullscreen = (
    }
  }

+  const stopWatch = watch(() => [width.value, height.value], updateStyle)
+
  effectDispose(() => {
    const element = unrefElement(target) as HTMLElement | null

@ -227,15 +227,19 @@ export const useElementFullscreen = (
    }

    // 回滚 z-index 值，避免无限增加
-    currentZIndex = Math.max(999, currentZIndex - 1) // 防止 zIndex 小于初始值
-    isFullscreen.value = false
+    currentZIndex--
+
+    stopWatch()
  })

  return {
    enter,
    exit,
    toggleFullscreen,
-    isFullscreen: readonly(isFullscreen), // 暴露只读状态
+    currentWindowSize: {
+      width,
+      height,
+    },
  }
 }

--- a/src/hooks/web/usePagination.ts
+++ b/src/hooks/web/usePagination.ts
@ -14,28 +14,10 @@ type OmitKeys =
  | 'onUpdatePageSize'
  | 'onUpdate:page'
  | 'onUpdate:page-size'
-  | 'onUpdate:pageSize'

-export interface UsePaginationOptions extends Omit<PaginationProps, OmitKeys> {
-  /**
-   *
-   * @param page 当前分页页码
-   *
-   * @description
-   * 分页页码更新的回调函数。
-   */
-  pageChange?: (page: number) => void
-  /**
-   *
-   * @param pageSize 当前分页条数
-   *
-   * @description
-   * 分页页数更新回调函数。
-   */
-  pageSizeChange?: (pageSize: number) => void
-}
+export interface UsePaginationOptions extends Omit<PaginationProps, OmitKeys> {}

-const DEFAULT_OPTIONS: UsePaginationOptions = {
+const defaultOptions: UsePaginationOptions = {
  page: 1,
  pageSize: 10,
  showSizePicker: true,
@ -54,49 +36,33 @@ export const usePagination = <T extends AnyFC>(
  callback?: T,
  options?: UsePaginationOptions,
 ) => {
-  // 配置合并
-  const mergedOptions = computed(() => ({
-    ...DEFAULT_OPTIONS,
-    ...omit(options, [
-      'on-update:page',
-      'on-update:page-size',
-      'onUpdatePage',
-      'onUpdatePageSize',
-      'onUpdate:page',
-      'onUpdate:page-size',
-      'onUpdate:pageSize',
-    ]),
-    ...paginationMethods,
-  }))
-  // 回调函数
-  const callbackRef = shallowRef(callback)
-  // 分页方法
-  const paginationMethods = {
+  const callbackRef = ref(callback)
+  const omitOptions = omit(options, [
+    'on-update:page',
+    'on-update:page-size',
+    'onUpdatePage',
+    'onUpdatePageSize',
+    'onUpdate:page',
+    'onUpdate:page-size',
+  ])
+  const methodsOptions = {
    onUpdatePage: (page: number) => {
-      const { pageChange } = mergedOptions.value
-
      paginationRef.value.page = page

      callbackRef.value?.()
-      pageChange?.(page)
    },
    onUpdatePageSize: (pageSize: number) => {
-      const { pageSizeChange } = mergedOptions.value
-
      paginationRef.value.pageSize = pageSize
-      paginationRef.value.page = DEFAULT_OPTIONS.page
+      paginationRef.value.page = 1

      callbackRef.value?.()
-      pageSizeChange?.(pageSize)
    },
  }
-  // 分页配置
-  const paginationRef = ref<PaginationProps>(mergedOptions.value)
+  const paginationRef = ref<PaginationProps>(
+    Object.assign({}, defaultOptions, omitOptions, methodsOptions),
+  )

-  // 更新分页页数
  const updatePage = paginationRef.value.onUpdatePage as (page: number) => void
-
-  // 更新分页每页条数
  const updatePageSize = paginationRef.value.onUpdatePageSize as (
    pageSize: number,
  ) => void
@ -171,7 +137,7 @@ export const usePagination = <T extends AnyFC>(
   * @description
   * 获取回调函数。
   */
-  const getCallback = callbackRef.value as T
+  const getCallback = callback

  /**
   *
@ -183,8 +149,9 @@ export const usePagination = <T extends AnyFC>(
   * @example
   * setCallback(() => {})
   */
-  const setCallback = (callback: AnyFC) => {
-    callbackRef.value = callback
+  const setCallback = (callback: T) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    callbackRef.value = callback as any
  }

  /**
@ -198,9 +165,8 @@ export const usePagination = <T extends AnyFC>(
  const resetPagination = () => {
    const { pageSizes } = paginationRef.value

-    paginationRef.value.page = DEFAULT_OPTIONS.page
-    paginationRef.value.pageSize =
-      (pageSizes?.[0] as number) || DEFAULT_OPTIONS.pageSize
+    paginationRef.value.page = 1
+    paginationRef.value.pageSize = (pageSizes?.[0] as number) || 10
  }

  effectDispose(() => {
--- a/src/hooks/web/usePrint.ts
+++ b/src/hooks/web/usePrint.ts
@ -16,16 +16,16 @@ export type UsePrintTarget<T = unknown> =

 /**
 *
- * @param target useTemplateRef dom
+ * @param target ref dom
 * @param options print-js options
 *
 * @see https://printjs.crabbly.com/
 *
 * @description
- * 拓展 print-js 的 usePrint 方法，允许 useTemplateRef Dom 直接调用打印，其余的不变。
+ * 拓展 print-js 的 usePrint 方法，允许 ref Dom 直接调用打印，其余的不变。
 *
 * @example
- * const refDom = useTemplateRef<HTMLElement>('refDom')
+ * const refDom = ref<HTMLElement>()
 *
 * const { print } = usePrint(refDom, {})
 *
--- a/src/layout/components/Menu/components/SiderBarLogo/index.tsx
+++ b/src/layout/components/Menu/components/SiderBarLogo/index.tsx
@ -6,7 +6,7 @@ import { RIcon } from '@/components'
 import { isValueType, renderNode } from '@/utils'
 import { useSettingGetters } from '@/store'

-export const SIDER_BAR_LOGO = shallowRef<HTMLElement>()
+export const SIDER_BAR_LOGO = ref<HTMLElement>()

 export default defineComponent({
  name: 'SiderBarLogo',
@ -93,9 +93,9 @@ export default defineComponent({
          <NTooltip placement="right">
            {{
              trigger: () => (
-                <NGradientText type="primary" size={18}>
+                <h1 class="n-menu-item-content">
                  {sideBarLogo.title?.[0] || null}
-                </NGradientText>
+                </h1>
              ),
              default: () => sideBarLogo.title,
            }}
--- a/src/layout/components/Menu/index.tsx
+++ b/src/layout/components/Menu/index.tsx
@ -7,7 +7,6 @@ import { LAYOUT_SIDER_REF } from '@/app-config'
 import { useDevice } from '@/hooks'
 import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useMenuGetters, useMenuActions, useSettingGetters } from '@/store'
-import { positionSelectedMenuItem } from '@/utils'

 import type { MenuInst } from 'naive-ui'
 import type { NaiveMenuOptions } from '@/types'
@ -16,8 +15,7 @@ import type { AppMenuOption } from '@/types'
 export default defineComponent({
  name: 'AppMenu',
  setup() {
-    // 这里使用 shallowRef 而不是 useTemplateRef 是因为在这里有一个特殊情况，会导致一个 readonly 的警告
-    const menuRef = shallowRef<MenuInst | null>()
+    const menuRef = ref<MenuInst | null>(null)

    const { changeMenuModelValue, collapsedMenu, updateMenuState } =
      useMenuActions()
@ -25,19 +23,18 @@ export default defineComponent({
    const { getMenuOptions, getCollapsed, getMenuKey } = useMenuGetters()
    const modelMenuKey = computed({
      get: () => {
-        /**
-         *
-         * @description
-         * 禁用该 eslint 规则，因为在 computed 中使用了异步操作。
-         * 该规则只是为了避免异步的 computed get 获取值出现问题；
-         * 但是，在这里获取值的操作是同步行为，只是为了在获取值以后将对应菜单项展开；
-         * 所以，这里不会出现异步获取值的问题，所以可以禁用该规则。
-         */
        // eslint-disable-next-line vue/no-async-in-computed-properties
-        setTimeout(() => {
+        nextTick().then(() => {
+          /**
+           *
+           * @description
+           * 禁用该 eslint 规则，因为在 computed 中使用了异步操作。
+           * 该规则只是为了避免异步的 computed get 获取值出现问题；
+           * 但是，在这里获取值的操作是同步行为，只是为了在获取值以后将对应菜单项展开；
+           * 所以，这里不会出现异步获取值的问题，所以可以禁用该规则。
+           */
          showMenuOption()
-          positionSelectedMenuItem()
-        }, 300)
+        })

        return getMenuKey.value
      },
@ -82,8 +79,7 @@ export default defineComponent({
        collapseMode={getMenuConfig.value.collapsedMode}
        collapsedWidth={getMenuConfig.value.collapsedWidth}
        onUpdateCollapsed={collapsedMenu.bind(this)}
-        width={getMenuConfig.value.menuWidth}
-        nativeScrollbar={getMenuConfig.value.nativeScrollbar}
+        nativeScrollbar={false}
        ref={LAYOUT_SIDER_REF}
        collapsed={getCollapsed.value}
        onExpand={() => {
@ -92,7 +88,6 @@ export default defineComponent({
        onCollapse={() => {
          updateMenuState('collapsed', true)
        }}
-        inverted={getMenuConfig.value.inverted}
      >
        {getMenuConfig.value.menuSiderBarLogo ? (
          <SiderBarLogo collapsed={getCollapsed.value} />
@ -112,7 +107,6 @@ export default defineComponent({
          }}
          accordion={getMenuConfig.value.accordion}
          iconSize={getMenuConfig.value.iconSize}
-          inverted={getMenuConfig.value.inverted}
        />
      </NLayoutSider>
    )
--- a/src/layout/components/MenuTag/index.scss
+++ b/src/layout/components/MenuTag/index.scss
@ -25,41 +25,43 @@ $menuTagWrapperWidth: 76px;
 }

 // 激活标签页关闭按钮样式
-.menu-tag .menu-tag__btn {
-  transition:
-    color 0.3s var(--n-bezier),
-    background-color 0.3s var(--n-bezier),
-    opacity 0.3s var(--n-bezier),
-    border-color 0.3s var(--n-bezier),
-    width 0.3s var(--n-bezier);
-
-  .n-button__icon {
-    opacity: 0;
-    width: 0;
-    height: var(--n-icon-size);
-    transition: all 0.3s var(--r-bezier);
-    margin-left: 0px;
-    transform: translateX(4px);
-  }
-
-  &:hover {
-    .n-button__icon {
-      opacity: 1;
-      width: var(--n-icon-size);
-      transition: all 0.3s var(--r-bezier);
+.menu-tag {
+  .menu-tag__btn {
+    .menu-tag__btn-icon--hidden {
+      display: none !important;
    }
-  }
-}

-.ray-template--light {
-  .menu-tag__btn-icon:hover {
-    filter: brightness(1.2);
-  }
-}
+    .menu-tag__btn-icon {
+      display: inline;
+      margin-left: 0;
+      width: 0;
+      height: 0;
+      transition: all 0.3s var(--r-bezier);
+      overflow: hidden;
+      opacity: 0;

-.ray-template--dark {
-  .menu-tag__btn-icon:hover {
-    filter: brightness(0.8);
+      & .ray-icon {
+        width: 11px !important;
+        height: 11px !important;
+      }
+    }
+
+    &:hover {
+      .menu-tag__btn-icon {
+        width: 14px;
+        height: 14px;
+        margin-left: 5px;
+        font-size: 12px;
+        background-color: rgba(0, 0, 0, 0.12);
+        border-radius: 50%;
+        padding: 1px;
+        transition: all 0.3s var(--r-bezier);
+        opacity: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
  }
 }

--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@ -517,7 +517,6 @@ export default defineComponent({
                    }}
                    size="small"
                    focusable={false}
-                    iconPlacement="right"
                  >
                    {{
                      default: () => (
@ -534,18 +533,16 @@ export default defineComponent({
                              },
                            }}
                          </span>
+                          <NIcon
+                            class="menu-tag__btn-icon"
+                            {...{
+                              onMousedown: closeCurrentMenuTag.bind(this, idx),
+                            }}
+                          >
+                            <RIcon name="close" size="14" />
+                          </NIcon>
                        </>
                      ),
-                      icon: () => (
-                        <RIcon
-                          customClassName="menu-tag__btn-icon"
-                          name="close"
-                          size="15"
-                          {...{
-                            onMousedown: closeCurrentMenuTag.bind(this, idx),
-                          }}
-                        />
-                      ),
                    }}
                  </NButton>
                ))}
--- a/src/layout/components/Search/GlobalSearch/index.tsx
+++ b/src/layout/components/Search/GlobalSearch/index.tsx
@ -80,23 +80,15 @@ export default defineComponent({
        plain: true,
      },
    ]
-    // 初始化索引
+    /** 初始化索引 */
    let searchElementIndex = 0
-    // 缓存索引
+    /** 缓存索引 */
    let preSearchElementIndex = searchElementIndex
-    const { isTabletOrSmaller } = useDevice({
-      observer: (val) => {
-        // 当处于小尺寸状态时，自动关闭搜索框
-        if (val) {
-          modelShow.value = false
-        }
-      },
-    })
+    const { isTabletOrSmaller } = useDevice()
    const loading = ref(false)
-    // 激活样式 class name
-    const ACTIVE_CLASS = 'content-item--active'
+    const ACTIVE_CLASS = 'content-item--active' // 激活样式 class name

-    // 初始化一些值
+    /** 初始化一些值 */
    const resetSearchSomeValue = () => {
      state.searchOptions = []
      state.searchValue = null
@ -104,7 +96,7 @@ export default defineComponent({
      preSearchElementIndex = searchElementIndex
    }

-    // 按下 ctrl + k 或者 command + k 激活搜索栏
+    /** 按下 ctrl + k 或者 command + k 激活搜索栏 */
    const registerArouseKeyboard = (e: KeyboardEvent) => {
      if (modelShow.value) {
        return
@ -119,14 +111,7 @@ export default defineComponent({
      }
    }

-    /**
-     *
-     * @param value 输入的搜索内容
-     *
-     * @description
-     * 根据输入值模糊检索菜单。
-     * 依赖 getRoutes() 获取的路由列表。
-     */
+    /** 根据输入值模糊检索菜单 */
    const fuzzySearchMenuOptions = (value: string) => {
      if (value) {
        loading.value = true
@ -172,15 +157,14 @@ export default defineComponent({
        })

        loading.value = false
-      }, 300)
+      }, 500)
    }

-    // 搜索结果项点击
    const searchItemClick = (option: AppMenuOption) => {
      if (option) {
        const { meta } = option

-        // 如果配置站外跳转则不会关闭搜索框
+        /** 如果配置站外跳转则不会关闭搜索框 */
        if (meta.windowOpen) {
          window.open(meta.windowOpen)
        } else {
@ -192,7 +176,7 @@ export default defineComponent({
      }
    }

-    // 自动聚焦检索项
+    /** 自动聚焦检索项 */
    const autoFocusingSearchItem = () => {
      const currentOption = state.searchOptions[searchElementIndex] // 获取当前搜索项
      const preOption = state.searchOptions[preSearchElementIndex] // 获取上一搜索项
@ -221,20 +205,20 @@ export default defineComponent({
      }
    }

-    // 渲染搜索菜单前缀图标，如果没有则用 icon table 代替
+    /** 渲染搜索菜单前缀图标, 如果没有则用 icon table 代替 */
    const RenderPreIcon = (meta: AppRouteMeta) => {
      const { icon } = meta

-      if (typeof icon === 'string' && icon) {
+      if (typeof icon === 'string') {
        return <RIcon name={icon} size="24" />
      } else if (typeof icon === 'function') {
-        return <icon />
+        return () => icon
      } else {
        return <RIcon name="search" size="24" />
      }
    }

-    // 更新索引
+    /** 更新索引 */
    const updateIndex = (type: 'up' | 'down') => {
      if (type === 'up') {
        searchElementIndex -= 1
@ -253,7 +237,7 @@ export default defineComponent({
      }
    }

-    // 注册按键: 上、下、回车
+    /** 注册按键: 上、下、回车 */
    const registerChangeSearchElementIndex = (e: KeyboardEvent) => {
      const keyCode = e.key

@ -316,7 +300,22 @@ export default defineComponent({
      </NFlex>
    )

-    useEventListener(window, 'keydown', registerArouseKeyboard)
+    watchEffect(() => {
+      // 当处于小尺寸状态时，自动关闭搜索框
+      if (isTabletOrSmaller.value) {
+        modelShow.value = false
+      }
+    })
+
+    useEventListener(
+      window,
+      'keydown',
+      (e: KeyboardEvent) => {
+        registerArouseKeyboard(e)
+        registerChangeSearchElementIndex(e)
+      },
+      true,
+    )

    return {
      ...toRefs(state),
@ -328,16 +327,11 @@ export default defineComponent({
      isTabletOrSmaller,
      SearchItem,
      loading,
-      registerChangeSearchElementIndex,
    }
  },
  render() {
    const { isTabletOrSmaller, searchOptions, loading } = this
-    const {
-      SearchItem,
-      fuzzySearchMenuOptions,
-      registerChangeSearchElementIndex,
-    } = this
+    const { SearchItem, fuzzySearchMenuOptions } = this

    return isTabletOrSmaller ? (
      <div style="display: none;"></div>
@ -347,11 +341,7 @@ export default defineComponent({
        transformOrigin="center"
        displayDirective="if"
      >
-        <div
-          class="global-search global-search--dark global-search--light"
-          tabindex="-1"
-          onKeydown={registerChangeSearchElementIndex}
-        >
+        <div class="global-search global-search--dark global-search--light">
          <div class="global-search__wrapper">
            <NCard
              class="global-search__card"
--- a/src/layout/components/SiderBar/components/SettingDrawer/constant.ts
+++ b/src/layout/components/SiderBar/components/SettingDrawer/constant.ts
@ -1,11 +1,23 @@
 import type { SettingState } from '@/store/modules/setting/types'
-import type { InjectionKey, Reactive } from 'vue'
-import type { DebouncedFunc } from 'lodash-es'

-interface SettingDrawerInjectKey extends SettingState {
-  throttleSetupAppMenu: DebouncedFunc<() => Promise<void>>
+export const defaultSettingConfig: Partial<SettingState> = {
+  contentTransition: 'scale',
+  watermarkSwitch: false,
+  keepAliveConfig: {
+    maxKeepAliveLength: 10,
+    setupKeepAlive: true,
+  },
+  menuConfig: {
+    collapsedWidth: 64,
+    collapsedMode: 'width',
+    collapsedIconSize: 16,
+    collapsedIndent: 24,
+    accordion: false,
+    menuSiderBarLogo: true,
+    iconSize: 16,
+  },
+  menuTagSwitch: true,
+  breadcrumbSwitch: true,
+  copyrightSwitch: true,
+  drawerPlacement: 'right',
 }
-
-export const SETTING_DRAWER_INJECT_KEY: Reactive<
-  InjectionKey<Partial<SettingDrawerInjectKey>>
-> = Symbol('segmentDrawer')
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.scss
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.scss
@ -1,3 +1,8 @@
-.n-form.setting-drawer__overrides-form .n-form-item .n-form-item-blank {
-  justify-content: flex-end;
+.setting-drawer__space {
+  width: 100%;
+
+  & .n-descriptions-table-content {
+    display: flex !important;
+    justify-content: space-between;
+  }
 }
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@ -3,31 +3,50 @@ import './index.scss'
 import {
  NDrawer,
  NDrawerContent,
+  NDivider,
  NFlex,
+  NSwitch,
+  NColorPicker,
+  NDescriptions,
+  NDescriptionsItem,
+  NSelect,
+  NInputNumber,
+  NFormItem,
+  NForm,
  NButton,
-  NTabs,
-  NTabPane,
+  NText,
+  NTooltip,
 } from 'naive-ui'
+import ThemeSegment from './components/ThemeSegment'
 import { RIcon } from '@/components'
-import SegmentViewsAppearance from './segment-views/Appearance'
-import SegmentViewsCommon from './segment-views/Common'
-import SegmentViewsWatermark from './segment-views/Watermark'
-import SegmentViewsCustomMenu from './segment-views/CustomMenu'

+import { APP_THEME, CONTENT_TRANSITION_OPTIONS } from '@/app-config'
 import { useSettingGetters, useSettingActions, useMenuActions } from '@/store'
-import { SETTING_DRAWER_INJECT_KEY } from './constant'
-import { cloneDeep, forIn, throttle } from 'lodash-es'
-import { drawerProps } from 'naive-ui'
-import { useModal } from '@/components'
-import { getDefaultSettingConfig } from '@/store/modules/setting/constant'
+import { defaultSettingConfig } from './constant'
+import { forIn, throttle } from 'lodash-es'

+import type { PropType } from 'vue'
+import type { Placement } from '@/types'
 import type { SettingState } from '@/store/modules/setting/types'

 export default defineComponent({
  name: 'SettingDrawer',
-  props: drawerProps,
-  setup() {
-    const { create: createModal } = useModal()
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    placement: {
+      type: String as PropType<Placement>,
+      default: 'right',
+    },
+    width: {
+      type: Number,
+      default: 280,
+    },
+  },
+  emits: ['update:show'],
+  setup(props, { emit }) {
    const { changePrimaryColor, updateSettingState } = useSettingActions()
    const {
      getAppTheme,
@ -40,98 +59,296 @@ export default defineComponent({
      getKeepAliveConfig,
      getMenuConfig,
      getDrawerPlacement,
-      getColorWeakness,
-      getWatermarkConfig,
-      getDynamicDocumentTitle,
    } = useSettingGetters()
    const { setupAppMenu } = useMenuActions()
-    const throttleSetupAppMenu = throttle(setupAppMenu, 300)
-    const modelReactive = reactive({
-      menuTagSwitch: getMenuTagSwitch.value,
-      breadcrumbSwitch: getBreadcrumbSwitch.value,
-      copyrightSwitch: getCopyrightSwitch.value,
-      contentTransition: getContentTransition.value,
-      watermarkSwitch: getWatermarkSwitch.value,
-      keepAliveConfig: getKeepAliveConfig.value,
-      menuConfig: getMenuConfig.value,
-      drawerPlacement: getDrawerPlacement.value,
-      colorWeakness: getColorWeakness.value,
-      primaryColorOverride: getPrimaryColorOverride.value,
-      watermarkConfig: getWatermarkConfig.value,
-      dynamicDocumentTitle: getDynamicDocumentTitle.value,
-      throttleSetupAppMenu,
+
+    const modelShow = computed({
+      get: () => props.show,
+      set: (bool) => {
+        emit('update:show', bool)
+      },
+    })
+    // 为了方便管理多个 computed，因为 computed 不能被逆向修改
+    const modelReactive = computed({
+      get: () => {
+        return {
+          getMenuTagSwitch: getMenuTagSwitch.value,
+          getBreadcrumbSwitch: getBreadcrumbSwitch.value,
+          getCopyrightSwitch: getCopyrightSwitch.value,
+          getContentTransition: getContentTransition.value,
+          getWatermarkSwitch: getWatermarkSwitch.value,
+          getKeepAliveConfig: getKeepAliveConfig.value,
+          getMenuConfig: getMenuConfig.value,
+          getDrawerPlacement: getDrawerPlacement.value,
+        }
+      },
+      set: (value) => {},
    })

+    const throttleSetupAppMenu = throttle(setupAppMenu, 300)
+
    const defaultSettingBtnClick = () => {
-      createModal({
-        preset: 'dialog',
-        title: '恢复默认配置',
-        type: 'warning',
-        content: '点击【确认初始化】按钮会恢复默认系统配置，是否继续?',
-        positiveText: '确认初始化',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          forIn(cloneDeep(getDefaultSettingConfig()), (value, key) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            modelReactive[key] = value
-
-            console.log(value, key)
-
-            updateSettingState(key as keyof SettingState, value)
-          })
-
-          throttleSetupAppMenu()
-        },
+      forIn(defaultSettingConfig, (value, key) => {
+        updateSettingState(key as keyof SettingState, value)
      })
+
+      throttleSetupAppMenu()
    }

-    provide(SETTING_DRAWER_INJECT_KEY, modelReactive)
-
    return {
+      modelShow,
      changePrimaryColor,
      getAppTheme,
      getPrimaryColorOverride,
      updateSettingState,
      modelReactive,
      defaultSettingBtnClick,
+      throttleSetupAppMenu,
    }
  },
  render() {
-    const { defaultSettingBtnClick, $props } = this
-    const { trapFocus, autoFocus, nativeScrollbar, ...restProps } = $props
+    const {
+      $t,
+      changePrimaryColor,
+      updateSettingState,
+      defaultSettingBtnClick,
+      throttleSetupAppMenu,
+    } = this

    return (
-      <NDrawer {...restProps} trapFocus={false} autoFocus={false} width={320}>
-        <NDrawerContent title="个性化配置" closable>
-          {{
-            default: () => (
-              <NTabs type="bar" animated defaultValue="appearance">
-                <NTabPane name="appearance" tab="外观">
-                  <SegmentViewsAppearance />
-                </NTabPane>
-                <NTabPane name="menu" tab="菜单">
-                  <SegmentViewsCustomMenu />
-                </NTabPane>
-                <NTabPane name="watermark" tab="水印">
-                  <SegmentViewsWatermark />
-                </NTabPane>
-                <NTabPane name="common" tab="通用">
-                  <SegmentViewsCommon />
-                </NTabPane>
-              </NTabs>
-            ),
-            footer: () => (
-              <NFlex justify="flex-start">
-                <NButton type="warning" onClick={defaultSettingBtnClick}>
+      <NDrawer
+        v-model:show={this.modelShow}
+        placement={this.placement}
+        width={this.width}
+        trapFocus={false}
+        autoFocus={false}
+      >
+        <NDrawerContent title="系统配置">
+          <NFlex class="setting-drawer__space" vertical>
+            <NDivider titlePlacement="center">
+              {$t('headerSettingOptions.ThemeOptions.Title')}
+            </NDivider>
+            <ThemeSegment />
+            <NDivider titlePlacement="center">
+              {$t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')}
+            </NDivider>
+            <NColorPicker
+              swatches={APP_THEME.appThemeColors}
+              v-model:value={this.getPrimaryColorOverride.common!.primaryColor}
+              onUpdateValue={changePrimaryColor.bind(this)}
+            />
+            <NDivider titlePlacement="center">
+              {$t('headerSettingOptions.ContentTransition')}
+            </NDivider>
+            <NSelect
+              v-model:value={this.modelReactive.getContentTransition}
+              options={CONTENT_TRANSITION_OPTIONS}
+              onUpdateValue={(value) => {
+                updateSettingState('contentTransition', value)
+              }}
+            />
+            <NDivider titlePlacement="center">抽屉位置</NDivider>
+            <NSelect
+              v-model:value={this.modelReactive.getDrawerPlacement}
+              options={[
+                {
+                  label: '右边',
+                  value: 'right',
+                },
+                {
+                  label: '左边',
+                  value: 'left',
+                },
+              ]}
+              onUpdateValue={(value) => {
+                updateSettingState('drawerPlacement', value)
+              }}
+            />
+            <NDivider titlePlacement="center">系统设置</NDivider>
+            <NDescriptions labelPlacement="left" column={1}>
+              <NDescriptionsItem label="菜单页头">
+                <NSwitch
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.menuSiderBarLogo
+                  }
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('menuConfig', {
+                      menuSiderBarLogo: bool,
+                    })
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="菜单手风琴">
+                <NSwitch
+                  v-model:value={this.modelReactive.getMenuConfig.accordion}
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('menuConfig', {
+                      accordion: bool,
+                    })
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="页面缓存">
+                <NSwitch
+                  v-model:value={
+                    this.modelReactive.getKeepAliveConfig.setupKeepAlive
+                  }
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('keepAliveConfig', {
+                      setupKeepAlive: bool,
+                    })
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="多标签">
+                <NSwitch
+                  v-model:value={this.modelReactive.getMenuTagSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('menuTagSwitch', bool)
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="面包屑">
+                <NSwitch
+                  v-model:value={this.modelReactive.getBreadcrumbSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('breadcrumbSwitch', bool)
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="水印">
+                <NSwitch
+                  v-model:value={this.modelReactive.getWatermarkSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('watermarkSwitch', bool)
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="页底信息">
+                <NSwitch
+                  v-model:value={this.modelReactive.getCopyrightSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('copyrightSwitch', bool)
+                  }
+                />
+              </NDescriptionsItem>
+            </NDescriptions>
+            <NDivider titlePlacement="center">
+              <NFlex wrap={false} align="center" size={[4, 0]}>
+                <NTooltip placement="top" showArrow={false}>
                  {{
-                    icon: () => <RIcon name="reload" />,
-                    default: () => '初始化配置',
+                    trigger: () => <RIcon name="question" size="16" />,
+                    default: () => '菜单渲染是一个复杂、耗时的操作，请手动更新',
+                  }}
+                </NTooltip>
+                <NText>菜单样式</NText>
+              </NFlex>
+            </NDivider>
+            <NForm showFeedback={true} showRequireMark={false}>
+              <NFormItem label="每级菜单缩进">
+                <NInputNumber
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.collapsedIndent
+                  }
+                  min={0}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        collapsedIndent: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFormItem label="菜单图标尺寸">
+                <NInputNumber
+                  v-model:value={this.modelReactive.getMenuConfig.iconSize}
+                  min={0}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        iconSize: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFormItem label="折叠菜单图标尺寸">
+                <NInputNumber
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.collapsedIconSize
+                  }
+                  min={0}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        collapsedIconSize: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFormItem label="折叠菜单宽度">
+                <NInputNumber
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.collapsedWidth
+                  }
+                  min={0}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        collapsedWidth: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFormItem showFeedback={false} showLabel={false}>
+                <NButton
+                  onClick={throttleSetupAppMenu}
+                  block
+                  type="info"
+                  secondary
+                >
+                  {{
+                    icon: () => <RIcon name="question" size="16" />,
+                    default: () => '点击刷新',
                  }}
                </NButton>
+              </NFormItem>
+            </NForm>
+            <NDivider titlePlacement="center">
+              <NFlex wrap={false} align="center" size={[4, 0]}>
+                <NTooltip placement="top" showArrow={false}>
+                  {{
+                    trigger: () => <RIcon name="question" size="16" />,
+                    default: () => '当设置为【0】时，缓存将会失效',
+                  }}
+                </NTooltip>
+                <NText>最大缓存数</NText>
              </NFlex>
-            ),
-          }}
+            </NDivider>
+            <NInputNumber
+              v-model:value={
+                this.modelReactive.getKeepAliveConfig.maxKeepAliveLength
+              }
+              showButton={true}
+              min={0}
+              max={100}
+              precision={0}
+              disabled={!this.modelReactive.getKeepAliveConfig.setupKeepAlive}
+            />
+            <NDivider titlePlacement="center">操作</NDivider>
+            <NFlex>
+              <NButton type="primary" block onClick={defaultSettingBtnClick}>
+                清除设置
+              </NButton>
+            </NFlex>
+          </NFlex>
        </NDrawerContent>
      </NDrawer>
    )
--- a/src/layout/components/SiderBar/components/SettingDrawer/segment-views/Appearance.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/segment-views/Appearance.tsx
@ -1,117 +0,0 @@
-import {
-  NFlex,
-  NColorPicker,
-  NFormItem,
-  NDivider,
-  NSelect,
-  NSwitch,
-  NForm,
-} from 'naive-ui'
-import ThemeSegment from '../components/ThemeSegment'
-
-import { SETTING_DRAWER_INJECT_KEY } from '../constant'
-import { APP_THEME, CONTENT_TRANSITION_OPTIONS } from '@/app-config'
-import { useSettingActions } from '@/store'
-
-export default defineComponent({
-  name: 'SegmentViewsAppearance',
-  setup() {
-    const model = inject(SETTING_DRAWER_INJECT_KEY, {})
-    const { changePrimaryColor, updateSettingState, toggleColorWeakness } =
-      useSettingActions()
-
-    return {
-      toggleColorWeakness,
-      model,
-      changePrimaryColor,
-      updateSettingState,
-    }
-  },
-  render() {
-    const {
-      toggleColorWeakness,
-      model,
-      changePrimaryColor,
-      updateSettingState,
-    } = this
-
-    return (
-      <NFlex vertical style="width: 100%;" size={[0, 0]}>
-        <NDivider>系统主题</NDivider>
-        <ThemeSegment />
-        <NDivider>内置主题</NDivider>
-        <NColorPicker
-          showPreview
-          swatches={APP_THEME.appThemeColors}
-          v-model:value={model.primaryColorOverride!.common!.primaryColor}
-          onUpdateValue={changePrimaryColor.bind(this)}
-        />
-        <NDivider>切换动画</NDivider>
-        <NSelect
-          v-model:value={model.contentTransition}
-          options={CONTENT_TRANSITION_OPTIONS}
-          onUpdateValue={(value) => {
-            updateSettingState('contentTransition', value)
-          }}
-        />
-        <NDivider>配置入口出现位置</NDivider>
-        <NSelect
-          v-model:value={model.drawerPlacement}
-          options={[
-            {
-              label: '右边',
-              value: 'right',
-            },
-            {
-              label: '左边',
-              value: 'left',
-            },
-          ]}
-          onUpdateValue={(value) => {
-            updateSettingState('drawerPlacement', value)
-          }}
-        />
-        <NDivider>其他设置</NDivider>
-        <NForm
-          labelPlacement="left"
-          class="setting-drawer__overrides-form"
-          showFeedback={false}
-        >
-          <NFormItem label="面包屑">
-            <NSwitch
-              v-model:value={model.breadcrumbSwitch}
-              onUpdateValue={(bool) =>
-                updateSettingState('breadcrumbSwitch', bool)
-              }
-            />
-          </NFormItem>
-          <NFormItem label="标签页">
-            <NSwitch
-              v-model:value={model.menuTagSwitch}
-              onUpdateValue={(bool) =>
-                updateSettingState('menuTagSwitch', bool)
-              }
-            />
-          </NFormItem>
-          <NFormItem label="页底信息">
-            <NSwitch
-              v-model:value={model.copyrightSwitch}
-              onUpdateValue={(bool) =>
-                updateSettingState('copyrightSwitch', bool)
-              }
-            />
-          </NFormItem>
-          <NFormItem label="色弱模式">
-            <NSwitch
-              v-model:value={model.colorWeakness}
-              onUpdateValue={(bool) => {
-                updateSettingState('colorWeakness', bool)
-                toggleColorWeakness(bool)
-              }}
-            />
-          </NFormItem>
-        </NForm>
-      </NFlex>
-    )
-  },
-})
--- a/src/layout/components/SiderBar/components/SettingDrawer/segment-views/Common.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/segment-views/Common.tsx
@ -1,98 +0,0 @@
-import {
-  NFlex,
-  NFormItem,
-  NDivider,
-  NSwitch,
-  NForm,
-  NInputNumber,
-  NDynamicTags,
-} from 'naive-ui'
-import { RIcon } from '@/components'
-
-import { SETTING_DRAWER_INJECT_KEY } from '../constant'
-import { useSettingActions } from '@/store'
-
-export default defineComponent({
-  name: 'SegmentViewsCommon',
-  setup() {
-    const model = inject(SETTING_DRAWER_INJECT_KEY, {})
-    const { updateSettingState } = useSettingActions()
-
-    return {
-      model,
-      updateSettingState,
-    }
-  },
-  render() {
-    const { model, updateSettingState } = this
-
-    return (
-      <NFlex vertical style="width: 100%;" size={[0, 0]}>
-        <NDivider>基础设置</NDivider>
-        <NForm
-          labelPlacement="left"
-          class="setting-drawer__overrides-form"
-          showFeedback={false}
-        >
-          <NFormItem label="页面缓存">
-            <NSwitch
-              v-model:value={model.keepAliveConfig!.setupKeepAlive}
-              onUpdateValue={(bool) =>
-                updateSettingState('keepAliveConfig', {
-                  setupKeepAlive: bool,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="动态浏览器标题">
-            <NSwitch
-              v-model:value={model.dynamicDocumentTitle}
-              onUpdateValue={(bool) =>
-                updateSettingState('dynamicDocumentTitle', bool)
-              }
-            />
-          </NFormItem>
-        </NForm>
-        <NDivider>缓存设置</NDivider>
-        <NForm
-          labelPlacement="top"
-          showFeedback={true}
-          showRequireMark={false}
-          model={model.keepAliveConfig}
-        >
-          <NFormItem
-            label="最大缓存数"
-            feedback={
-              computed(() => {
-                if (model.keepAliveConfig!.maxKeepAliveLength <= 0) {
-                  return '设置为【0】时，缓存将会失效'
-                }
-
-                return ''
-              }).value
-            }
-          >
-            <NInputNumber
-              disabled={!model.keepAliveConfig!.setupKeepAlive}
-              v-model:value={model.keepAliveConfig!.maxKeepAliveLength}
-              min={0}
-              precision={0}
-              showButton={false}
-              onUpdateValue={(val) =>
-                updateSettingState('keepAliveConfig', {
-                  maxKeepAliveLength: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="排除缓存">
-            <NDynamicTags
-              type="success"
-              v-model:value={model.keepAliveConfig!.keepAliveExclude}
-            />
-          </NFormItem>
-        </NForm>
-      </NFlex>
-    )
-  },
-})
--- a/src/layout/components/SiderBar/components/SettingDrawer/segment-views/CustomMenu.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/segment-views/CustomMenu.tsx
@ -1,167 +0,0 @@
-import {
-  NFlex,
-  NFormItem,
-  NDivider,
-  NSwitch,
-  NForm,
-  NTooltip,
-  NText,
-  NInputNumber,
-  NButton,
-} from 'naive-ui'
-import { RIcon } from '@/components'
-
-import { SETTING_DRAWER_INJECT_KEY } from '../constant'
-import { useSettingActions } from '@/store'
-
-export default defineComponent({
-  name: 'SegmentViewsCustomMenu',
-  setup() {
-    const model = inject(SETTING_DRAWER_INJECT_KEY, {})
-    const { updateSettingState } = useSettingActions()
-
-    return {
-      model,
-      updateSettingState,
-    }
-  },
-  render() {
-    const { model, updateSettingState } = this
-
-    return (
-      <NFlex vertical style="width: 100%;" size={[0, 0]}>
-        <NDivider titlePlacement="center">
-          <NFlex wrap={false} align="center" size={[4, 0]}>
-            <NTooltip placement="top" showArrow={false}>
-              {{
-                trigger: () => <RIcon name="question" size="16" />,
-                default: () =>
-                  '菜单更新是一个复杂、耗时的操作，请手动点击【更新菜单】按钮更新设置',
-              }}
-            </NTooltip>
-            <NText>菜单样式</NText>
-          </NFlex>
-        </NDivider>
-        <NForm
-          showFeedback={true}
-          showRequireMark={false}
-          class="setting-drawer__overrides-form"
-        >
-          <NFormItem label="每级菜单缩进">
-            <NInputNumber
-              v-model:value={model.menuConfig!.collapsedIndent}
-              min={0}
-              precision={0}
-              onUpdateValue={(value) =>
-                updateSettingState('menuConfig', {
-                  collapsedIndent: value!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="菜单图标尺寸">
-            <NInputNumber
-              v-model:value={model.menuConfig!.iconSize}
-              min={0}
-              precision={0}
-              onUpdateValue={(value) =>
-                updateSettingState('menuConfig', {
-                  iconSize: value!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="折叠菜单图标尺寸">
-            <NInputNumber
-              v-model:value={model.menuConfig!.collapsedIconSize}
-              min={0}
-              precision={0}
-              onUpdateValue={(value) =>
-                updateSettingState('menuConfig', {
-                  collapsedIconSize: value!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="菜单宽度">
-            <NInputNumber
-              v-model:value={model.menuConfig!.menuWidth}
-              min={0}
-              precision={0}
-              onUpdateValue={(value) =>
-                updateSettingState('menuConfig', {
-                  menuWidth: value!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="折叠菜单宽度">
-            <NInputNumber
-              v-model:value={model.menuConfig!.collapsedWidth}
-              min={0}
-              precision={0}
-              onUpdateValue={(value) =>
-                updateSettingState('menuConfig', {
-                  collapsedWidth: value!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem showFeedback={false} showLabel={false}>
-            <NButton onClick={model.throttleSetupAppMenu} block type="primary">
-              更新菜单
-            </NButton>
-          </NFormItem>
-        </NForm>
-        <NDivider>其他设置</NDivider>
-        <NForm
-          showFeedback={false}
-          showRequireMark={false}
-          class="setting-drawer__overrides-form"
-          labelPlacement="left"
-        >
-          <NFormItem label="反转色菜单">
-            <NSwitch
-              v-model:value={model.menuConfig!.inverted}
-              onUpdateValue={(bool) =>
-                updateSettingState('menuConfig', {
-                  inverted: bool,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="菜单标题">
-            <NSwitch
-              v-model:value={model.menuConfig!.menuSiderBarLogo}
-              onUpdateValue={(bool) =>
-                updateSettingState('menuConfig', {
-                  menuSiderBarLogo: bool,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="手风琴菜单">
-            <NSwitch
-              v-model:value={model.menuConfig!.accordion}
-              onUpdateValue={(bool) =>
-                updateSettingState('menuConfig', {
-                  accordion: bool,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="原生滚动条">
-            <NSwitch
-              v-model:value={model.menuConfig!.nativeScrollbar}
-              onUpdateValue={(bool) =>
-                updateSettingState('menuConfig', {
-                  nativeScrollbar: bool,
-                })
-              }
-            />
-          </NFormItem>
-        </NForm>
-      </NFlex>
-    )
-  },
-})
--- a/src/layout/components/SiderBar/components/SettingDrawer/segment-views/Watermark.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/segment-views/Watermark.tsx
@ -1,184 +0,0 @@
-import {
-  NFlex,
-  NFormItem,
-  NDivider,
-  NSwitch,
-  NForm,
-  NInputNumber,
-  NInput,
-} from 'naive-ui'
-
-import { SETTING_DRAWER_INJECT_KEY } from '../constant'
-import { useSettingActions } from '@/store'
-
-export default defineComponent({
-  name: 'SegmentViewsWatermark',
-  setup() {
-    const model = inject(SETTING_DRAWER_INJECT_KEY, {})
-    const { updateSettingState } = useSettingActions()
-
-    return {
-      model,
-      updateSettingState,
-    }
-  },
-  render() {
-    const { model, updateSettingState } = this
-
-    return (
-      <NFlex vertical style="width: 100%;" size={[0, 0]}>
-        <NDivider>基础设置</NDivider>
-        <NForm
-          showFeedback={false}
-          showRequireMark={false}
-          class="setting-drawer__overrides-form"
-          labelPlacement="left"
-        >
-          <NFormItem label="全屏水印">
-            <NSwitch
-              v-model:value={model.watermarkSwitch}
-              onUpdateValue={(bool) =>
-                updateSettingState('watermarkSwitch', bool)
-              }
-            />
-          </NFormItem>
-          <NFormItem label="跨边界显示">
-            <NSwitch
-              v-model:value={model.watermarkConfig!.cross}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  cross: val,
-                })
-              }
-            />
-          </NFormItem>
-        </NForm>
-        <NDivider>个性化水印</NDivider>
-        <NForm
-          showFeedback={true}
-          showRequireMark={false}
-          class="setting-drawer__overrides-form"
-        >
-          <NFormItem label="水印内容">
-            <NInput
-              v-model:value={model.watermarkConfig!.content}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  content: val,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="字体尺寸">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.fontSize}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  fontSize: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="字体行高">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.lineHeight}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  lineHeight: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="字体宽度">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.width}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  width: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="字体高度">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.height}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  height: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="x轴偏移">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.xOffset}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  xOffset: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="x轴间隙">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.xGap}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  xGap: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="y轴偏移">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.yOffset}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  yOffset: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="y轴间隙">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.yGap}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  yGap: val!,
-                })
-              }
-            />
-          </NFormItem>
-          <NFormItem label="旋转角度">
-            <NInputNumber
-              precision={0}
-              showButton={false}
-              v-model:value={model.watermarkConfig!.rotate}
-              onUpdateValue={(val) =>
-                updateSettingState('watermarkConfig', {
-                  rotate: val!,
-                })
-              }
-            />
-          </NFormItem>
-        </NForm>
-      </NFlex>
-    )
-  },
-})
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@ -37,28 +37,21 @@ import type { VNode } from 'vue'
 export default defineComponent({
  name: 'AppSiderBar',
  setup() {
-    // 获取 setting 相关值
    const { updateLocale, updateSettingState } = useSettingActions()
    const { t } = useI18n()
-    // 获取全屏相关方法
+
    const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
      document.getElementsByTagName('html')[0],
    )
-    // 获取设置相关方法
    const { getDrawerPlacement, getBreadcrumbSwitch } = useSettingGetters()
-    // 是否显示设置抽屉
-    const showSettings = ref(false)
-    // 是否展示全局搜索
-    const globalSearchShown = ref(false)
-    // 当前是否为平板或者更小的设备
+    const showSettings = ref(false) // 是否显示设置抽屉
+    const globalSearchShown = ref(false) // 是否展示全局搜索
    const { isTabletOrSmaller } = useDevice()
-    // 获取全局 drawer 的值
    const globalDrawerValue = getVariableToRefs('globalDrawerValue')

    /**
     *
-     * @description
-     * 顶部左边操作栏。
+     * 顶部左边操作栏
     */
    const leftIconOptions = computed(() =>
      createLeftIconOptions({
@ -68,8 +61,7 @@ export default defineComponent({
    )
    /**
     *
-     * @description
-     * 顶部右边提示框操作栏。
+     * 顶部右边提示框操作栏
     */
    const rightTooltipIconOptions = computed(() =>
      createRightIconOptions({
--- a/src/layout/components/SiderBar/shared.ts
+++ b/src/layout/components/SiderBar/shared.ts
@ -59,9 +59,7 @@ const avatarDropdownActionMap = {
  },
 }

-export const avatarDropdownClick = (
-  key: keyof typeof avatarDropdownActionMap,
-) => {
+export const avatarDropdownClick = (key: string | number) => {
  const action = avatarDropdownActionMap[key]

  action ? action() : window.$message.info('这个人很懒, 没做这个功能~')
--- a/src/layout/default/ContentWrapper/index.scss
+++ b/src/layout/default/ContentWrapper/index.scss
@ -25,26 +25,30 @@
  }
 }

-.ray-template--light {
-  .layout-content__maximize-out {
-    background-color: #d5d3d1;
-    color: #44403c;
-
-    &:hover {
+.r-layout-full__viewer-content--maximize--dark {
+  @include useAppTheme('dark') {
+    & .layout-content__maximize-out {
      color: #2c2a28;
      background: #757473;
+
+      &:hover {
+        background-color: #d5d3d1;
+        color: #44403c;
+      }
    }
  }
 }

-.ray-template--dark {
-  .layout-content__maximize-out {
-    background-color: #44403c;
-    color: #d5d3d1;
-
-    &:hover {
+.r-layout-full__viewer-content--maximize--light {
+  @include useAppTheme('light') {
+    & .layout-content__maximize-out {
      color: #eae9e8;
      background: #a19f9d;
+
+      &:hover {
+        background-color: #44403c;
+        color: #d5d3d1;
+      }
    }
  }
 }
--- a/src/layout/default/ContentWrapper/index.tsx
+++ b/src/layout/default/ContentWrapper/index.tsx
@ -79,6 +79,8 @@ export default defineComponent({
          layoutContentMaximize
            ? 'r-layout-full__viewer-content--maximize'
            : null,
+          'r-layout-full__viewer-content--maximize--light',
+          'r-layout-full__viewer-content--maximize--dark',
        ]}
      >
        {layoutContentMaximize ? (
--- a/src/layout/index.scss
+++ b/src/layout/index.scss
@ -17,12 +17,6 @@
            height: 100%;
          }
        }
-
-        // 设置 content-wrapper 的样式
-        .content-wrapper {
-          width: 100%;
-          height: 100%;
-        }
      }
    }
  }
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@ -19,7 +19,6 @@ import {
  HeaderWrapper,
  FeatureWrapper,
 } from './default'
-import UnlockScreen from '@/app-components/app/AppLockScreen/components/UnlockScreen'

 import { LAYOUT_CONTENT_REF } from '@/app-config'
 import { layoutCssVars } from '@/layout/layout-css-vars'
@ -29,9 +28,9 @@ import { useSettingGetters } from '@/store'
 export default defineComponent({
  name: 'RLayout',
  setup() {
-    const layoutSiderBarRef = shallowRef<HTMLElement>() // 顶部操作栏 shallowRef
-    const layoutMenuTagRef = shallowRef<HTMLElement>() // 标签页 shallowRef
-    const layoutFooterRef = shallowRef<HTMLElement>() // 底部版权 shallowRef
+    const layoutSiderBarRef = ref<HTMLElement>() // 顶部操作栏 ref
+    const layoutMenuTagRef = ref<HTMLElement>() // 标签页 ref
+    const layoutFooterRef = ref<HTMLElement>() // 底部版权 ref

    const { getMenuTagSwitch, getCopyrightSwitch } = useSettingGetters()
    const { getLockAppScreen } = useAppLockScreen()
@ -71,8 +70,6 @@ export default defineComponent({
          {getCopyrightSwitch ? <FooterWrapper ref="layoutFooterRef" /> : null}
        </NLayoutContent>
      </NLayout>
-    ) : (
-      <UnlockScreen />
-    )
+    ) : null
  },
 })
--- a/Show More
+++ b/Show More