version: v5.0.7

.eslintignore

@@ -1,18 +0,0 @@
-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

.eslintrc.cjs

@@ -1,316 +0,0 @@
-/* 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'],
-      },
-    ],
-    '@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',
-      },
-    ],
-  },
-}

.github/workflows/docs-deploy.yaml

@@ -14,10 +14,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install Node.js 20.x
+      - name: Install Node.js 22.x
         uses: actions/setup-node@v3
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       - uses: pnpm/action-setup@v2
         name: Install pnpm

.github/workflows/push-build.yaml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
         os: [ubuntu-latest, windows-latest, macos-latest]
         experimental: [true]
 

.nvmrc

@@ -1 +1 @@
-v20.12.0
+v22.11.0

CHANGELOG.md

@@ -1,5 +1,25 @@
 # CHANGE LOG
 
+## 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
@@ -146,7 +166,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

__test__/basic/callWithAsyncErrorHandling.spec.ts

@@ -3,6 +3,7 @@ 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)
@@ -14,6 +15,7 @@ describe('callWithAsyncErrorHandling', () => {
     const fn = () => {
       throw new Error('test error')
     }
+
     const callbackFn = () => {
       callbackFnExecuted = 2
     }

__test__/basic/callWithErrorHandling.spec.ts

@@ -3,6 +3,7 @@ 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)
@@ -14,6 +15,7 @@ describe('callWithErrorHandling', () => {
     const fn = () => {
       throw new Error('test error')
     }
+
     const callbackFn = () => {
       callbackFnExecuted = 2
     }

__test__/basic/isValueType.spec.ts

@@ -42,6 +42,7 @@ 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)
   })
 })

__test__/basic/uuid.spec.ts

@@ -14,6 +14,7 @@ describe('uuid', () => {
 
   it('should return a string with length 36', () => {
     const uid = uuid(36)
+
     expect(uid.length).toBe(36)
   })
 })

__test__/hooks/useContextmenuCoordinate.spec.tsx

@@ -39,6 +39,7 @@ describe('useContextmenuCoordinate', () => {
       clientX: 100,
       clientY: 200,
     })
+
     wrapperRef.element.dispatchEvent(event)
 
     await nextTick()

__test__/vue/call.spec.ts

@@ -3,6 +3,7 @@ import { call } from '../../src/utils/vue/call'
 describe('call', () => {
   it('should be executed once', () => {
     const fn = vi.fn()
+
     call(() => fn())
 
     expect(fn).toHaveBeenCalledTimes(1)
@@ -10,6 +11,7 @@ describe('call', () => {
 
   it('should be executed with an argument', () => {
     const fn = vi.fn()
+
     call((a: number) => fn(a), 1)
 
     expect(fn).toHaveBeenCalledWith(1)

__test__/vue/renderNode.spec.tsx

@@ -4,6 +4,7 @@ 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()

eslint.config.mjs

@@ -0,0 +1,365 @@
+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',
+        },
+      ],
+    },
+  },
+]

package.json

@@ -1,10 +1,10 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "5.0.6",
+  "version": "5.0.7",
   "type": "module",
   "engines": {
-    "node": "^18.0.0 || >=20.0.0",
+    "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
     "pnpm": ">=9.0.0"
   },
   "scripts": {
@@ -16,7 +16,7 @@
     "prepare": "husky install",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "lint": "vue-tsc --noEmit && eslint src --ext .js,.jsx,.vue && prettier --write \"src/**/*.{ts,tsx,json,.vue}\""
+    "lint": "vue-tsc --noEmit && eslint --fix && prettier --write \"**/*.{ts,tsx,json,.vue}\""
   },
   "husky": {
     "hooks": {
@@ -29,82 +29,82 @@
       "prettier --write"
     ],
     "*.{ts,tsx,vue}": [
-      "eslint src"
+      "eslint --fix"
     ]
   },
   "dependencies": {
     "@logicflow/core": "2.0.6",
     "@logicflow/extension": "2.0.10",
-    "@vueuse/core": "^11.2.0",
+    "@vueuse/core": "^12.0.0",
-    "axios": "^1.7.5",
+    "axios": "^1.7.9",
     "clipboard": "^2.0.11",
     "currency.js": "^2.0.4",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "html-to-image": "1.11.11",
-    "interactjs": "1.10.26",
+    "interactjs": "1.10.27",
     "jsbarcode": "3.11.6",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
-    "naive-ui": "^2.40.1",
+    "naive-ui": "^2.40.3",
-    "pinia": "^2.2.4",
+    "pinia": "^2.3.0",
-    "pinia-plugin-persistedstate": "^4.1.1",
+    "pinia-plugin-persistedstate": "^4.1.3",
     "print-js": "^1.6.0",
     "vue": "^3.5.13",
-    "vue-demi": "0.14.6",
+    "vue-demi": "0.14.10",
     "vue-hooks-plus": "2.2.1",
     "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.4.0",
     "vue3-next-qrcode": "2.0.10"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
+    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/config-conventional": "^19.2.2",
-    "@interactjs/types": "1.10.21",
+    "@eslint/eslintrc": "3.1.0",
+    "@eslint/js": "9.11.0",
+    "@interactjs/types": "1.10.27",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/crypto-js": "^4.2.2",
     "@types/jsbarcode": "3.11.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/mockjs": "1.0.7",
+    "@types/mockjs": "1.0.10",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.13.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-vue": "^5.1.0",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vitest/ui": "1.4.0",
+    "@vitest/ui": "1.5.2",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^14.1.4",
-    "@vue/test-utils": "2.4.3",
+    "@vue/test-utils": "2.4.6",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.20",
     "depcheck": "^1.4.7",
-    "eslint": "^8.57.0",
+    "eslint": "^9.11.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.26.0",
-    "eslint-plugin-vue": "^9.25.0",
+    "globals": "15.12.0",
-    "happy-dom": "14.3.1",
+    "happy-dom": "14.12.3",
     "husky": "8.0.3",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.49",
     "postcss-px-to-viewport-8-with-include": "1.2.2",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "rollup-plugin-gzip": "4.0.1",
-    "sass": "1.71.1",
+    "sass": "1.77.1",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.6.3",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.3",
+    "vite": "^6.0.3",
     "vite-bundle-analyzer": "0.9.4",
     "vite-plugin-cdn2": "1.1.0",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-inspect": "^0.8.3",
+    "vite-plugin-inspect": "^0.8.4",
-    "vite-plugin-mock-dev-server": "1.4.7",
+    "vite-plugin-mock-dev-server": "1.8.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-svg-loader": "^4.0.0",
+    "vite-svg-loader": "^5.1.0",
-    "vite-tsconfig-paths": "4.3.2",
+    "vitest": "2.0.5",
-    "vitest": "1.5.2",
     "vue-tsc": "^2.1.10"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",

src/app-components/app/AppLockScreen/components/LockScreen/index.tsx

@@ -1,17 +1,19 @@
-import { NInput, NForm, NFormItem, NButton } from 'naive-ui'
+import { NInput, NFormItem, NButton } from 'naive-ui'
 import AppAvatar from '@/app-components/app/AppAvatar'
+import { RForm } from '@/components'
 
 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 type { FormInst, InputInst } from 'naive-ui'
+import type { InputInst } from 'naive-ui'
 
 const LockScreen = defineComponent({
   name: 'LockScreen',
   setup() {
-    const formInstRef = useTemplateRef<FormInst | null>('formInstRef')
+    const [register, { validate }] = useForm()
     const inputInstRef = useTemplateRef<InputInst | null>('inputInstRef')
 
     const { setLockAppScreen } = useAppLockScreen()
@@ -22,13 +24,11 @@ const LockScreen = defineComponent({
     })
 
     const lockScreen = () => {
-      formInstRef.value?.validate((error) => {
+      validate().then(() => {
-        if (!error) {
         setLockAppScreen(true)
         updateSettingState('lockScreenSwitch', false)
 
         state.lockCondition = useCondition()
-        }
       })
     }
 
@@ -41,11 +41,13 @@ const LockScreen = defineComponent({
     return {
       ...toRefs(state),
       lockScreen,
-      formInstRef,
+      register,
       inputInstRef,
     }
   },
   render() {
+    const { register } = this
+
     return (
       <div class="app-lock-screen__content">
         <div class="app-lock-screen__input">
@@ -54,11 +56,12 @@ const LockScreen = defineComponent({
             style="pointer-events: none;margin: 24px 0;"
             vertical
           />
-          <NForm
+          <RForm
             ref="formInstRef"
             model={this.lockCondition}
             rules={rules}
             labelPlacement="left"
+            onRegister={register}
           >
             <NFormItem path="lockPassword">
               <NInput
@@ -75,12 +78,13 @@ const LockScreen = defineComponent({
                     this.lockScreen()
                   }
                 }}
+                autofocus
               />
             </NFormItem>
             <NButton type="primary" onClick={this.lockScreen.bind(this)}>
               锁屏
             </NButton>
-          </NForm>
+          </RForm>
         </div>
       </div>
     )

src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx

@@ -1,22 +1,20 @@
 import '../../index.scss'
 
-import { NInput, NForm, NFormItem, NButton, NFlex } from 'naive-ui'
+import { NInput, 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 { useTemplateRef } from 'vue'
+import { useForm } from '@/components'
-
-import type { FormInst, InputInst } from 'naive-ui'
 
 export default defineComponent({
   name: 'UnlockScreen',
   setup() {
-    const formRef = useTemplateRef<FormInst | null>('formRef')
+    const [register, { validate }] = useForm()
-    const inputInstRef = useTemplateRef<InputInst | null>('inputInstRef')
 
     const { logout } = useSigningActions()
     const { updateSettingState } = useSettingActions()
@@ -60,21 +58,14 @@ export default defineComponent({
     }
 
     const unlockScreen = () => {
-      formRef.value?.validate((error) => {
+      validate().then(() => {
-        if (!error) {
         setLockAppScreen(false)
         updateSettingState('lockScreenSwitch', false)
 
         state.lockCondition = useCondition()
-        }
       })
     }
 
-    onMounted(() => {
-      nextTick(() => {
-        inputInstRef.value?.focus()
-      })
-    })
     onBeforeUnmount(() => {
       clearInterval(dayInterval)
       clearInterval(yearInterval)
@@ -84,16 +75,15 @@ 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 } = this
+    const { unlockScreen, backToSigning, register } = this
 
     return (
       <div class="app-lock-screen__content app-lock-screen__content--full">
@@ -121,10 +111,14 @@ export default defineComponent({
               />
             </div>
             <div class="app-lock-screen__unlock__content-input">
-              <NForm ref="formRef" model={this.lockCondition} rules={rules}>
+              <RForm
+                onRegister={register}
+                model={this.lockCondition}
+                rules={rules}
+              >
                 <NFormItem path="lockPassword">
                   <NInput
-                    ref="inputInstRef"
+                    autofocus
                     v-model:value={this.lockCondition.lockPassword}
                     type="password"
                     placeholder="请输入解锁密码"
@@ -153,7 +147,7 @@ export default defineComponent({
                     进入系统
                   </NButton>
                 </NFlex>
-              </NForm>
+              </RForm>
             </div>
             <div class="app-lock-screen__unlock__content-date">
               <div class="current-year">

src/app-components/provider/AppStyleProvider/index.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
           primaryColor,
         )
         // 将主色调任意颜色转换为 rgba 格式
-        const fp = colorToRgba(p, 0.38)
+        const fp = colorToRgba(p, 0.8)
 
         // 设置全局主题色 css 变量
         html.style.setProperty(rayTemplateThemePrimaryColor, p) // 主色调

src/app-config/design-config.ts

@@ -3,8 +3,9 @@ import type { AppTheme } from '@/types'
 export const APP_THEME: AppTheme = {
   /**
    *
-   * 系统主题颜色预设色盘
+   * @description
-   * 支持 RGBA、RGB、十六进制
+   * 系统主题颜色预设色盘。
+   * 支持 RGBA、RGB、十六进制。
    */
   appThemeColors: [
     '#2d8cf0',
@@ -12,25 +13,26 @@ export const APP_THEME: AppTheme = {
     '#ff42bc',
     '#ee4f12',
     '#dbcb02',
-    '#18A058',
+    '#18a058',
   ],
-  /** 系统主题色 */
+  // 系统主题色
   appPrimaryColor: {
-    /** 主题色 */
+    // 主题色
     primaryColor: '#2d8cf0',
-    /** 主题辅助色(用于整体 hover、active 等之类颜色) */
+    // 主题辅助色(用于整体 hover、active 等之类颜色)
-    primaryFadeColor: 'rgba(45, 140, 240, 0.3)',
+    primaryFadeColor: 'rgba(45, 140, 240, 0.8)',
   },
   /**
    *
-   * 配置系统 naive-ui 主题色
+   * @description
-   * 官网文档地址: <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
@@ -46,17 +48,26 @@ export const APP_THEME: AppTheme = {
    * ```
    */
   appNaiveUIThemeOverrides: {
-    dark: {},
+    dark: {
-    light: {},
+      common: {
+        borderRadius: '4px',
+        baseColor: 'rgb(18, 18, 18)',
+        textColorBase: 'rgb(255, 255, 255)',
+      },
+    },
+    light: {
+      common: {
+        borderRadius: '4px',
+        baseColor: 'rgb(255, 255, 255)',
+        textColorBase: 'rgb(31, 31, 31)',
+      },
     },
-  appNaiveUIThemeOverridesCommon: {
-    dark: {},
-    light: {},
   },
   /**
    *
-   * 配置 echart 主题颜色
+   * @description
-   * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json
+   * 配置 echart 主题颜色。
+   * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json。
    *
    * [文档地址](https://xiaodaigua-ray.github.io/ray-template-doc/ray-template-docs/advanced/echart-themes.html)
    */

src/components/base/RCollapseGrid/src/index.tsx

@@ -81,6 +81,7 @@ export default defineComponent({
       yGap,
       collapsedRows,
       cssVars,
+      actionSpan,
       bordered,
     } = this
 
@@ -97,7 +98,11 @@ export default defineComponent({
               collapsedRows={collapsedRows}
             >
               {defaultSlot?.()}
-              <NGridItem suffix class="ray-collapse-grid__suffix--btn">
+              <NGridItem
+                suffix
+                class="ray-collapse-grid__suffix--btn"
+                span={actionSpan}
+              >
                 <NFlex justify="end" align="center">
                   {action?.()}
                   {collapse

src/components/base/RCollapseGrid/src/props.ts

@@ -5,6 +5,17 @@ import type { CollapseToggleText, ActionAlignType } from './types'
 import type { AnyFC, MaybeArray } from '@/types'
 
 const props = {
+  /**
+   *
+   * @description
+   * 操作区域列数。
+   *
+   * @default 1
+   */
+  actionSpan: {
+    type: Number,
+    default: 1,
+  },
   /**
    *
    * @description

src/components/base/RTable/src/Table.tsx

@@ -128,6 +128,7 @@ export default defineComponent({
       if (onUpdateColumns) {
         call(onUpdateColumns, options)
       }
+
       if ($onUpdateColumns) {
         call($onUpdateColumns, options)
       }

src/components/base/RTable/src/components/C.tsx

@@ -113,7 +113,6 @@ 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
@@ -170,7 +169,7 @@ export default defineComponent({
           }
         }) as C[]
       },
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
+
       set: () => {},
     })
 

src/hooks/template/useTheme.ts

@@ -2,6 +2,7 @@ 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'
 
@@ -33,17 +34,15 @@ const setThemeOverrides = (theme: boolean) => {
   updateSettingState(
     'primaryColorOverride',
     theme
-      ? Object.assign(
+      ? merge(
           {},
           getPrimaryColorOverride.value,
           APP_THEME.appNaiveUIThemeOverrides.dark,
-          APP_THEME.appNaiveUIThemeOverridesCommon.dark,
         )
-      : Object.assign(
+      : merge(
           {},
           getPrimaryColorOverride.value,
           APP_THEME.appNaiveUIThemeOverrides.light,
-          APP_THEME.appNaiveUIThemeOverridesCommon.light,
         ),
   )
 }

src/hooks/web/useDomToImage.ts

@@ -10,12 +10,32 @@ 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]>>
 
-interface Options<
+// 获取 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<
   T extends TargetType = Element,
-  ImageType extends DomToImageMethodKeys = 'jpeg',
+  ImageType extends DomToImageMethodKeys = DomToImageMethodKeys,
-> {
+> = {
   /**
    *
    * @description
@@ -23,7 +43,7 @@ interface Options<
    *
    * @default jpeg
    */
-  imageType?: DomToImageReturnType<ImageType>
+  imageType?: ImageType
   /**
    *
    * @param element current dom
@@ -66,26 +86,14 @@ interface Options<
   finally?: (element: T) => void
 }
 
-export type UseDomToImageOptions<T extends TargetType = Element> = Options<T> &
+export type UseDomToImageOptions<
-  HtmlToImageOptions
+  T extends TargetType = Element,
-
+  ImageType extends DomToImageMethodKeys = DomToImageMethodKeys,
-export type DomToImageMethodKeys = keyof typeof domToImageMethods
+> = Options<T, ImageType> & HtmlToImageOptions
-
-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
 
 /**
  *
- * @param target useTemplateRef dom
+ * @param target ref dom
  * @param options html-to-image options
  *
  * @see https://github.com/bubkoo/html-to-image
@@ -98,18 +106,24 @@ const domToImageMethods = {
  * 当然，你也可以不传递 imageType 参数，此时会使用 options.imageType，
  * 如果都未传递，则默认使用 jpeg。
  *
+ * 如果希望 created 获得准确的类型，可以给 useDomToImage 手动声明第二个类型参数；
+ * 或者就是在显式声明 options.imageType 参数。
+ *
  * @example
- * const refDom = useTemplateRef<HTMLElement>('refDom')
+ * const refDom = ref<HTMLElement>()
- * const { create, stop } = useDomToImage(refDom, {
+ * const { create } = useDomToImage(refDom, {
  *   beforeCreate: (element) => { ... },
  *   created: (element, result) => { ... },
  *   createdError: (error) => { ... },
  *   finally: () => { ... },
  * })
  */
-export const useDomToImage = <T extends HTMLElement>(
+export const useDomToImage = <
+  T extends HTMLElement,
+  ImageType extends DomToImageMethodKeys = DomToImageMethodKeys,
+>(
   target: BasicTarget<T>,
-  options?: UseDomToImageOptions,
+  options?: UseDomToImageOptions<T, ImageType>,
 ) => {
   const {
     beforeCreate,
@@ -130,12 +144,12 @@ export const useDomToImage = <T extends HTMLElement>(
       if (!element) {
         createdError?.()
 
-        return reject('useDomToImage: element is undefined.')
+        return reject(`[useDomToImage]: target element is undefined.`)
       }
 
       const imageTypeKey = (imageType ??
         _imageType ??
-        'jpeg') as keyof typeof domToImageMethods
+        'jpeg') as DomToImageMethodKeys
 
       domToImageMethods[imageTypeKey]?.(element, options)
         // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/hooks/web/usePagination.ts

@@ -14,8 +14,26 @@ type OmitKeys =
   | 'onUpdatePageSize'
   | 'onUpdate:page'
   | 'onUpdate:page-size'
+  | 'onUpdate:pageSize'
 
-export interface UsePaginationOptions extends Omit<PaginationProps, OmitKeys> {}
+export interface UsePaginationOptions extends Omit<PaginationProps, OmitKeys> {
+  /**
+   *
+   * @param page 当前分页页码
+   *
+   * @description
+   * 分页页码更新的回调函数。
+   */
+  pageChange?: (page: number) => void
+  /**
+   *
+   * @param pageSize 当前分页条数
+   *
+   * @description
+   * 分页页数更新回调函数。
+   */
+  pageSizeChange?: (pageSize: number) => void
+}
 
 const DEFAULT_OPTIONS: UsePaginationOptions = {
   page: 1,
@@ -36,21 +54,7 @@ export const usePagination = <T extends AnyFC>(
   callback?: T,
   options?: UsePaginationOptions,
 ) => {
-  const callbackRef = shallowRef(callback)
+  // 配置合并
-  const paginationMethods = {
-    onUpdatePage: (page: number) => {
-      paginationRef.value.page = page
-
-      callbackRef.value?.()
-    },
-    onUpdatePageSize: (pageSize: number) => {
-      paginationRef.value.pageSize = pageSize
-      paginationRef.value.page = DEFAULT_OPTIONS.page
-
-      callbackRef.value?.()
-    },
-  }
-  // 使用 computed 优化配置合并
   const mergedOptions = computed(() => ({
     ...DEFAULT_OPTIONS,
     ...omit(options, [
@@ -60,9 +64,33 @@ export const usePagination = <T extends AnyFC>(
       'onUpdatePageSize',
       'onUpdate:page',
       'onUpdate:page-size',
+      'onUpdate:pageSize',
     ]),
     ...paginationMethods,
   }))
+  // 回调函数
+  const callbackRef = shallowRef(callback)
+  // 分页方法
+  const paginationMethods = {
+    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
+
+      callbackRef.value?.()
+      pageSizeChange?.(pageSize)
+    },
+  }
+  // 分页配置
   const paginationRef = ref<PaginationProps>(mergedOptions.value)
 
   // 更新分页页数

src/layout/components/MenuTag/index.scss

@@ -51,9 +51,17 @@ $menuTagWrapperWidth: 76px;
   }
 }
 
+.ray-template--light {
+  .menu-tag__btn-icon:hover {
+    filter: brightness(2);
+  }
+}
+
+.ray-template--dark {
   .menu-tag__btn-icon:hover {
     filter: brightness(0.8);
   }
+}
 
 // 设置 dropdown animate svg 尺寸
 .menu-tag__dropdown {

src/store/modules/setting/index.ts

@@ -3,6 +3,7 @@ import { colorToRgba, setStorage, updateObjectValue, setStyle } from '@/utils'
 import { useI18n, useDayjs } from '@/hooks'
 import { APP_CATCH_KEY, APP_THEME, GLOBAL_CLASS_NAMES } from '@/app-config'
 import { getDefaultSettingConfig } from './constant'
+import { merge } from 'lodash-es'
 
 import type { SettingState } from '@/store/modules/setting/types'
 import type { LocalKey } from '@/hooks'
@@ -12,8 +13,8 @@ export const piniaSettingStore = defineStore(
   'setting',
   () => {
     const {
-      appPrimaryColor: { primaryColor },
+      appPrimaryColor: { primaryColor, primaryFadeColor },
-    } = __APP_CFG__ // 默认主题色
+    } = APP_THEME
     const { locale } = useI18n()
     const { locale: dayjsLocal } = useDayjs()
 
@@ -22,8 +23,9 @@ export const piniaSettingStore = defineStore(
       primaryColorOverride: {
         common: {
           primaryColor: primaryColor,
-          primaryColorHover: primaryColor,
+          primaryColorHover: primaryFadeColor,
-          primaryColorPressed: primaryColor,
+          primaryColorPressed: primaryFadeColor,
+          primaryColorSuppl: colorToRgba(primaryColor, 0.9),
         },
       },
       // 内部使用，用于判断是否为黑夜主题（为了兼容历史遗留版本）；true 为黑夜主题，false 为明亮主题
@@ -63,12 +65,14 @@ export const piniaSettingStore = defineStore(
      * @description
      * 切换主题色，传递对应颜色即可更新 naive-ui 的主题色。
      */
-    const changePrimaryColor = (value: string, alpha = 0.3) => {
+    const changePrimaryColor = (value: string, alpha = 0.8) => {
-      const alphaColor = colorToRgba(value, alpha)
+      const alphaColor1 = colorToRgba(value, alpha)
+      const alphaColor2 = colorToRgba(value, 0.9)
       const themeOverrides = {
         primaryColor: value,
-        primaryColorHover: value,
+        primaryColorHover: alphaColor1,
-        primaryColorPressed: value,
+        primaryColorPressed: alphaColor1,
+        primaryColorSuppl: alphaColor2,
       }
       const { rayTemplateThemePrimaryColor, rayTemplateThemePrimaryFadeColor } =
         GLOBAL_CLASS_NAMES
@@ -79,7 +83,7 @@ export const piniaSettingStore = defineStore(
       // 设置主题色变量
       html.style.setProperty(rayTemplateThemePrimaryColor, value)
       // 设置主题色辅助色变量
-      html.style.setProperty(rayTemplateThemePrimaryFadeColor, alphaColor)
+      html.style.setProperty(rayTemplateThemePrimaryFadeColor, alphaColor1)
     }
 
     /**
@@ -123,18 +127,16 @@ export const piniaSettingStore = defineStore(
      * 该方法会在初始化时执行一次，之后会在切换主题色时执行。
      */
     watchEffect(() => {
-      settingState.appTheme
+      settingState._appTheme
-        ? (settingState.primaryColorOverride = Object.assign(
+        ? (settingState.primaryColorOverride = merge(
             {},
             settingState.primaryColorOverride,
             APP_THEME.appNaiveUIThemeOverrides.dark,
-            APP_THEME.appNaiveUIThemeOverridesCommon.dark,
           ))
-        : (settingState.primaryColorOverride = Object.assign(
+        : (settingState.primaryColorOverride = merge(
             {},
             settingState.primaryColorOverride,
             APP_THEME.appNaiveUIThemeOverrides.light,
-            APP_THEME.appNaiveUIThemeOverridesCommon.light,
           ))
 
       toggleColorWeakness(settingState.colorWeakness)

src/types/app.d.ts

@@ -2,27 +2,9 @@
 
 export {}
 
-import 'vue-router'
-
-import type { AppRouteMeta } from '@/router/types'
-
-declare module 'vue-router' {
-  interface RouteMeta extends AppRouteMeta {}
-}
-
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
 
   const Component: DefineComponent<{}, {}, any>
   export default Component
 }
-
-declare module 'virtual:*' {
-  const result: any
-  export default result
-}
-
-declare module '*.json' {
-  const jsonContent: Record<string, any>
-  export default jsonContent
-}

src/types/json.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export {}
+
+declare module '*.json' {
+  const jsonContent: Record<string, any>
+  export default jsonContent
+}

src/types/modules/axios.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface BasicResponse<T> {
   data: T
   msg: string

src/types/modules/vite-custom-config.ts

@@ -83,8 +83,4 @@ export interface AppTheme {
     light: GlobalThemeOverrides
   }
   echartTheme: string
-  appNaiveUIThemeOverridesCommon: {
-    dark: GlobalThemeOverrides['common']
-    light: GlobalThemeOverrides['common']
-  }
 }

src/types/options.d.ts

@@ -0,0 +1,13 @@
+export {}
+
+import type {
+  RouteLocationNormalizedGeneric,
+  NavigationGuardNext,
+} from 'vue-router'
+
+// 为 defineComponent 添加自定义选项
+// https://cn.vuejs.org/guide/typescript/options-api.html#augmenting-custom-options
+declare module 'vue' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
+  interface ComponentCustomOptions {}
+}

src/types/properties.d.ts

@@ -0,0 +1,12 @@
+export {}
+
+import type { useRoute, useRouter } from 'vue-router'
+
+// 为 vue 添加一些自定义属性
+// https://cn.vuejs.org/guide/typescript/options-api#augmenting-global-properties
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $router: ReturnType<typeof useRouter>
+    $route: ReturnType<typeof useRoute>
+  }
+}

src/types/router.d.ts

@@ -0,0 +1,9 @@
+export {}
+
+import 'vue-router'
+
+import type { AppRouteMeta } from '@/router/types'
+
+declare module 'vue-router' {
+  interface RouteMeta extends AppRouteMeta {}
+}

src/types/virtual.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export {}
+
+declare module 'virtual:*' {
+  const result: any
+  export default result
+}

src/utils/basic.ts

@@ -226,6 +226,7 @@ export const fileToBase64 = (file: File) => {
     reader.onload = () => {
       resolve(reader.result as string)
     }
+
     reader.onerror = (error) => {
       reject(error)
     }

src/utils/dom.ts

@@ -38,7 +38,7 @@ export const printDom = <T extends HTMLElement>(
 ) => {
   const { domToImageOptions, printOptions } = options ?? {}
 
-  const { create } = useDomToImage<T>(target, {
+  const { create } = useDomToImage(target, {
     ...domToImageOptions,
     beforeCreate: (element) => {
       domToImageOptions?.beforeCreate?.(element)

src/utils/precision.ts

@@ -136,6 +136,7 @@ export const format = (value: CurrencyArguments, options?: CurrencyOptions) => {
   // 如果 type 为 'number'，则返回 value 的值，否则返回 value 的字符串
   return type === 'number' ? v.value : v.toString()
 }
+
 /**
  *
  * @description

tsconfig.json

@@ -26,7 +26,7 @@
       "@mock/*": ["mock/*"],
       "@mock": ["mock/*"]
     },
-    "types": ["vite/client", "vitest/globals"]
+    "types": ["vite/client", "vitest/globals", "naive-ui/volar"]
   },
   "include": [
     "vite.config.ts",

vite.config.ts

@@ -43,6 +43,7 @@ export default defineConfig(({ mode }) => {
     optimizeDeps: {
       include: [
         'vue',
+        'vue-demi',
         'vue-router',
         'pinia',
         'vue-i18n',

vite.custom.config.ts

@@ -1,41 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-04-06
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * 系统配置文件入口
- *
- * 配置范围:
- *   - 构建: 开发构建、打包构建、预览构建、体积分析构建等
- *   - 系统: 根路由、标题、浏览器标题、别名等
- *   - 请求: 代理配置
- *
- * 如果需要新增相关内容, 需要在 src/types/modules/viteCustomConfig.ts 中进行类型配置
- * ```
- * interface Config // config 内容类型配置
- *
- * interface AppConfig // __APP_CFG__ 内容配置
- * ```
- *
- * __APP_CFG__ 说明
- * ```
- * 该属性是用于全局注入的配置方法
- *
- * const { appPrimaryColor } = __APP_CFG__
- *
- * 以上例子展示, 从 __APP_CFG__ 中解构取出 appPrimaryColor 根路由配置信息
- * __APP_CFG__ 会被挂载于全局变量 `window` 下(vite define 默认是挂载于 window 下)
- * ```
- */
-
 import path from 'node:path'
 
 import { htmlTitlePlugin, mixinCss } from './vite-helper'
@@ -48,35 +10,35 @@ import type { BuildOptions } from 'vite'
 const config: AppConfigExport = {
   // 是否启用 cdn 构建项目
   cdn: false,
+
   // 公共基础路径配置, 如果为空则会默认以 '/' 填充
   base: '/ray-template/',
+
   // 配置首屏加载信息
   preloadingConfig: PRE_LOADING_CONFIG,
+
   // 默认主题色（不可省略，必填），也用于 ejs 注入
   appPrimaryColor: APP_THEME.appPrimaryColor,
+
   /**
    *
-   * 预处理全局需要注入的 css 文件
+   * @description
+   * 预处理全局需要注入的 css 文件。
    *
    * 预设:
    *   - ./src/styles/mixins.scss
    *   - ./src/styles/setting.scss
    *
-   * 如果需要删除或者修改, 需要同步修改目录下的 css 文件
+   * 如果需要删除或者修改，需要同步修改目录下的 css 文件。
-   */
-  mixinCSS: mixinCss(['./src/styles/mixins.scss', './src/styles/setting.scss']),
-  /**
-   *
-   * 版权信息
-   *
-   * 也可以当作页底设置, 看实际业务需求
    */
+  mixinCSS: mixinCss(['@/styles/mixins.scss', '@/styles/setting.scss']),
+
+  // 版权信息
   copyright: 'Copyright © 2022-present Ray',
-  /**
+
-   *
+  // 浏览器标题
-   * 浏览器标题
-   */
   title: htmlTitlePlugin(PRE_LOADING_CONFIG.title || 'Ray Template'),
+
   // 配置 HMR 特定选项（端口、主机、路径和协议）
   server: {
     host: '0.0.0.0',
@@ -95,6 +57,7 @@ const config: AppConfigExport = {
       },
     },
   },
+
   // 打包相关配置
   buildOptions: (mode: string): BuildOptions => {
     const productionBuildOptions = {
@@ -127,9 +90,11 @@ const config: AppConfigExport = {
           outDir,
         }
   },
+
   /**
    *
-   * 预设别名
+   * @description
+   * 预设别名:
    * - @: src 根目录
    * - @api: src/axios/api 根目录
    * - @images: src/assets/images 根目录

vite.plugin.config.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-09-15
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import path from 'node:path'
 
 import vue from '@vitejs/plugin-vue'
@@ -66,7 +55,7 @@ function onlyBuildOptions(mode: string): PluginOption[] {
             {
               name: 'vue',
               global: 'Vue',
-              relativeModule: 'vue.global.min.js',
+              relativeModule: 'vue.global.prod.min.js',
             },
             {
               name: 'vue-demi',
@@ -184,6 +173,7 @@ function baseOptions(mode: string): PluginOption[] {
     viteSvgLoader({
       defaultImport: 'url', // 默认以 url 形式导入 svg
     }),
+
     // 基础插件配置，在 report 模式下不需要 eslint 插件
     mode !== 'report'
       ? viteEslint({

vitest.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig, mergeConfig, configDefaults } from 'vitest/config'
-import tsconfigPaths from 'vite-tsconfig-paths'
 
 import viteConfig from './vite.config'
 
@@ -7,7 +6,6 @@ export default defineConfig((configEnv) =>
   mergeConfig(
     viteConfig(configEnv),
     defineConfig({
-      plugins: [tsconfigPaths()],
       test: {
         include: ['./__test__/**/*.(spec).(ts|tsx)'],
         exclude: [
@@ -17,18 +15,6 @@ export default defineConfig((configEnv) =>
         ],
         environment: 'happy-dom',
         globals: true,
-        poolOptions: {
-          /**
-           *
-           * 如此配置是为避免: Module did not self-register... 错误；
-           * 该错误是一个历史悠久遗留问题，可以查看该 issues:
-           * @see https://github.com/vitest-dev/vitest/issues/740
-           *
-           * 目前暂时没有更好的解决方案，这么做会导致单测执行速度变慢，但是可以避免错误，后续有更好的解决方案会更新。
-           *
-           * 在 v4.8.5 版本中，已经修复了该问题，可以升级到该版本。
-           */
-        },
       },
     }),
   ),