version: v4.8.0

2025-04-05 07:03:00 +08:00 · 2024-04-13 15:24:51 +08:00 · 2024-04-13 15:24:51 +08:00 · e95c06b009
commit e95c06b009
parent 85f7f28dc4
165 changed files with 1981 additions and 807 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -202,5 +202,12 @@ module.exports = {
        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.',
+      },
+    ],
  },
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -19,6 +19,7 @@
  "alias-skip.allowedsuffix": ["ts", "tsx"],
  "alias-skip.rootpath": "package.json",
  "cSpell.words": [
+    "bezier",
    "Clickoutside",
    "commitmsg",
    "datetimerange",
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,44 @@
 # CHANGE LOG

+## 4.8.0
+
+全局破坏性更新。移除了很多包、方法，请谨慎更新。
+
+## Feats
+
+- 移除无意义依赖包
+- `RTable` 组件
+  - 强制约束使用 `useTable` 方法操作实例，移除 `expose` 暴露
+  - 新增 `useCheckedRowKeys` 方法，用于操作表格选中行，该方法仅适用于选中行操作（多选、单选）
+- `RForm`, `RChart` 强制约束使用对应 `useForm`, `useChart` 方法操作实例，移除 `expose` 暴露
+- 优化 `usePagination` 方法修改 `paginationRef` 值类型，使用 `Ref` 签名类型
+- `eslint` 规则新增禁用被标记弃用方法
+- 移除 `omit`, `pick` 方法，使用 `lodash-es` 包替代
+- 新增 `RSegment` 分段器组件
+  > 由于是基于 [NTabs](https://www.naiveui.com/zh-CN/dark/components/tabs) 组件二开，所以也继承了该组件的一些特性（bug）
+- `svg icon` 支持分包管理
+- `vite-helper` 包中所有方法进行拆分，约定按照功能模块进行拆分。如果该方法属于 `vite` 插件，按照 `xx-xx-plugin` 方式命名。
+- 统一所有模块的文件命名
+  - `class`, `hooks` 方法统一为小驼峰命名
+    > 示例: `MyClass`, `useMyHooks`
+  - `component` 的文件夹与组件名称统一为大驼峰命名
+    > 示例: `MyComponent`, `ChildComponent`
+  - `utils`, `custom function` 统一为蛇形命名
+    > 示例: `custom-function`, `custom-utils`
+- 新增 `v-ripple` 水波纹指令
+- 新增 `v-lazy-show` 惰性 `v-show` 指令
+- `GlobalSearchButton` 组件样式优化
+- `useElementFullscreen` 方法
+  - 移除缓存 `transition` 样式还原方式，使用 `options.transition` 方式配置，默认为 `all 0.3s var(--r-bezier)`
+- 优化 `LayoutContent` 网页最大化动画效果
+- `global-variable` 新增 `getVariable` 方法，允许解构获取全局响应式变量
+- 移除 `SiderBar` 组件的 `tip` 提示
+- 补充了一些注释
+
+## Fixes
+
+- 修复 `RTable C` 组件对于 `columns type` 项无法有效兼容问题
+
 ## 4.7.5

 ## Feats
--- a/test/app/prefixCacheKey.spec.ts
+++ b/test/app/prefixCacheKey.spec.ts
@ -1,4 +1,4 @@
-import { prefixCacheKey } from '../../src/utils/app/prefixCacheKey'
+import { prefixCacheKey } from '../../src/utils/app/prefix-cache-key'

 describe('prefixCacheKey', () => {
  it('should return the key with the default prefix', () => {
--- a/test/basic/omit.spec.ts
+++ b/test/basic/omit.spec.ts
@ -1,39 +0,0 @@
-import { omit } from '../../src/utils/basic'
-
-describe('omit', () => {
-  it('should omit key from object', () => {
-    const obj = { a: 1, b: 2, c: 3 }
-    const result = omit(obj, 'b')
-
-    expect(result).toEqual({ a: 1, c: 3 })
-  })
-
-  it('should omit key from the array argument', () => {
-    const obj = { a: 1, b: 2, c: 3 }
-    const result = omit(obj, ['a', 'c'])
-
-    expect(result).toEqual({ b: 2 })
-  })
-
-  it('should return empty object if no keys are provided', () => {
-    const obj = { a: 1, b: 2, c: 3 }
-    const result = omit(obj, Object.keys(obj))
-
-    expect(result).toEqual({})
-  })
-
-  it('should return empty object if object is empty', () => {
-    const obj = {}
-    const result = omit(obj, 'a', 'b')
-
-    expect(result).toEqual({})
-  })
-
-  it('an empty object should be returned if null or undefined is passed', () => {
-    const result1 = omit(null)
-    const result2 = omit(void 0)
-
-    expect(result1).toEqual({})
-    expect(result2).toEqual({})
-  })
-})
--- a/test/basic/pick.spec.ts
+++ b/test/basic/pick.spec.ts
@ -1,25 +0,0 @@
-import { pick } from '../../src/utils/basic'
-
-describe('pick', () => {
-  it('should pick keys from object', () => {
-    const obj = { a: 1, b: 2, c: 3 }
-    const result = pick(obj, 'a', 'c')
-
-    expect(result).toEqual({ a: 1, c: 3 })
-  })
-
-  it('should pick keys from the array argument', () => {
-    const obj = { a: 1, b: 2, c: 3 }
-    const result = pick(obj, ['a', 'c'])
-
-    expect(result).toEqual({ a: 1, c: 3 })
-  })
-
-  it('an empty object should be returned if null or undefined is passed', () => {
-    const result1 = pick(null)
-    const result2 = pick(void 0)
-
-    expect(result1).toEqual({})
-    expect(result2).toEqual({})
-  })
-})
--- a/test/hooks/useElementFullscreen.spec.ts
+++ b/test/hooks/useElementFullscreen.spec.ts
@ -49,6 +49,6 @@ describe('useElementFullscreen', async () => {

    await nextTick()

-    expect(div.style.transition).toBe('')
+    expect(!div.style.transition).not.toBe(true)
  })
 })
--- a/test/vue/effectDispose.spec.ts
+++ b/test/vue/effectDispose.spec.ts
@ -1,4 +1,4 @@
-import { effectDispose } from '../../src/utils/vue/effectDispose'
+import { effectDispose } from '../../src/utils/vue/effect-dispose'

 describe('effectDispose', () => {
  it('should return false if getCurrentScope is null', () => {
--- a/test/vue/renderNode.spec.tsx
+++ b/test/vue/renderNode.spec.tsx
@ -1,4 +1,4 @@
-import { renderNode } from '../../src/utils/vue/renderNode'
+import { renderNode } from '../../src/utils/vue/render-node'
 import createRefElement from '../utils/createRefElement'

 describe('renderNode', () => {
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "4.7.5",
+  "version": "4.8.0",
  "type": "module",
  "engines": {
    "node": "^18.0.0 || >=20.0.0",
@ -37,7 +37,6 @@
    "awesome-qr": "2.1.5-rc.0",
    "axios": "^1.6.7",
    "clipboard": "^2.0.11",
-    "crypto-js": "^4.1.1",
    "currency.js": "^2.0.4",
    "dayjs": "^1.11.10",
    "dom-to-image": "2.6.0",
@ -53,11 +52,9 @@
    "vue-demi": "0.14.6",
    "vue-hooks-plus": "1.8.8",
    "vue-i18n": "^9.9.0",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.3.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.3",
    "@commitlint/cli": "^17.7.1",
    "@commitlint/config-conventional": "^17.7.0",
    "@interactjs/types": "1.10.21",
@ -71,7 +68,6 @@
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vitest/ui": "1.4.0",
-    "@vue-hooks-plus/resolvers": "1.2.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "2.4.3",
@ -80,8 +76,6 @@
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard-with-typescript": "^43.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.18.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -17,9 +17,6 @@ dependencies:
  clipboard:
    specifier: ^2.0.11
    version: 2.0.11
-  crypto-js:
-    specifier: ^4.1.1
-    version: 4.2.0
  currency.js:
    specifier: ^2.0.4
    version: 2.0.4
@ -66,16 +63,10 @@ dependencies:
    specifier: ^9.9.0
    version: 9.9.0(vue@3.4.21)
  vue-router:
-    specifier: ^4.2.5
+    specifier: ^4.3.0
    version: 4.3.0(vue@3.4.21)

 devDependencies:
-  '@babel/core':
-    specifier: ^7.23.9
-    version: 7.24.1
-  '@babel/eslint-parser':
-    specifier: ^7.23.3
-    version: 7.23.10(@babel/core@7.24.1)(eslint@8.57.0)
  '@commitlint/cli':
    specifier: ^17.7.1
    version: 17.8.1
@ -115,9 +106,6 @@ devDependencies:
  '@vitest/ui':
    specifier: 1.4.0
    version: 1.4.0(vitest@1.4.0)
-  '@vue-hooks-plus/resolvers':
-    specifier: 1.2.4
-    version: 1.2.4(vue-hooks-plus@1.8.8)
  '@vue/eslint-config-prettier':
    specifier: ^9.0.0
    version: 9.0.0(eslint@8.57.0)(prettier@3.2.5)
@ -142,12 +130,6 @@ devDependencies:
  eslint-config-standard-with-typescript:
    specifier: ^43.0.0
    version: 43.0.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint-plugin-import@2.29.1)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.1.1)(eslint@8.57.0)(typescript@5.2.2)
-  eslint-plugin-import:
-    specifier: ^2.29.0
-    version: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)
-  eslint-plugin-n:
-    specifier: ^16.6.2
-    version: 16.6.2(eslint@8.57.0)
  eslint-plugin-prettier:
    specifier: ^5.1.3
    version: 5.1.3(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.2.5)
@ -288,20 +270,6 @@ packages:
      - supports-color
    dev: true

-  /@babel/eslint-parser@7.23.10(@babel/core@7.24.1)(eslint@8.57.0):
-    resolution: {integrity: sha512-3wSYDPZVnhseRnxRJH6ZVTNknBz76AEnyC+AYYhasjP3Yy23qz0ERR7Fcd2SHmYuSFJ2kY9gaaDd3vyqU09eSw==}
-    engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
-    peerDependencies:
-      '@babel/core': ^7.11.0
-      eslint: ^7.5.0 || ^8.0.0
-    dependencies:
-      '@babel/core': 7.24.1
-      '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
-      eslint: 8.57.0
-      eslint-visitor-keys: 2.1.0
-      semver: 6.3.1
-    dev: true
-
  /@babel/generator@7.24.1:
    resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==}
    engines: {node: '>=6.9.0'}
@ -1391,12 +1359,6 @@ packages:
      - supports-color
    dev: false

-  /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
-    resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
-    dependencies:
-      eslint-scope: 5.1.1
-    dev: true
-
  /@nodelib/fs.scandir@2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -1616,6 +1578,7 @@ packages:

  /@types/js-cookie@3.0.6:
    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+    dev: false

  /@types/json-schema@7.0.15:
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@ -1916,16 +1879,6 @@ packages:
      path-browserify: 1.0.1
    dev: true

-  /@vue-hooks-plus/resolvers@1.2.4(vue-hooks-plus@1.8.8):
-    resolution: {integrity: sha512-RNvBDq2YDEVT3uDjPsWRpFZ4YJR/qfMGXNoMIDvBFWy/s2tvRWBaYmJILWXIqgY3gYeKoxy6TxGsh1mjsEhiRw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      vue-hooks-plus: ^1.5.2
-    dependencies:
-      local-pkg: 0.4.3
-      vue-hooks-plus: 1.8.8(vue@3.4.21)
-    dev: true
-
  /@vue/babel-helper-vue-transform-on@1.2.2:
    resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
    dev: true
@ -3086,10 +3039,6 @@ packages:
      which: 2.0.2
    dev: true

-  /crypto-js@4.2.0:
-    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
-    dev: false
-
  /css-render@0.15.12:
    resolution: {integrity: sha512-eWzS66patiGkTTik+ipO9qNGZ+uNuGyTmnz6/+EJIiFg8+3yZRpnMwgFo8YdXhQRsiePzehnusrxVvugNjXzbw==}
    dependencies:
@ -4047,14 +3996,6 @@ packages:
      - supports-color
    dev: true

-  /eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 4.3.0
-    dev: true
-
  /eslint-scope@7.2.2:
    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -4063,11 +4004,6 @@ packages:
      estraverse: 5.3.0
    dev: true

-  /eslint-visitor-keys@2.1.0:
-    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
-    engines: {node: '>=10'}
-    dev: true
-
  /eslint-visitor-keys@3.4.3:
    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -4149,11 +4085,6 @@ packages:
      estraverse: 5.3.0
    dev: true

-  /estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-    dev: true
-
  /estraverse@5.3.0:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}
@ -4354,6 +4285,7 @@ packages:
  /filter-obj@1.1.0:
    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
    engines: {node: '>=0.10.0'}
+    dev: false

  /find-up@4.1.0:
    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
@ -5331,6 +5263,7 @@ packages:
  /js-cookie@3.0.5:
    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
    engines: {node: '>=14'}
+    dev: false

  /js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@ -6543,6 +6476,7 @@ packages:
      filter-obj: 1.1.0
      split-on-first: 1.1.0
      strict-uri-encode: 2.0.0
+    dev: false

  /queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@ -6836,6 +6770,7 @@ packages:
  /screenfull@5.2.0:
    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
    engines: {node: '>=0.10.0'}
+    dev: false

  /scule@1.3.0:
    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
@ -7083,6 +7018,7 @@ packages:
  /split-on-first@1.1.0:
    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
    engines: {node: '>=6'}
+    dev: false

  /split-string@3.1.0:
    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
@ -7135,6 +7071,7 @@ packages:
  /strict-uri-encode@2.0.0:
    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
    engines: {node: '>=4'}
+    dev: false

  /string-argv@0.3.2:
    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
@ -8230,6 +8167,7 @@ packages:
      query-string: 7.1.3
      screenfull: 5.2.0
      vue: 3.4.21(typescript@5.2.2)
+    dev: false

  /vue-i18n@9.9.0(vue@3.4.21):
    resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
--- a/src/__ray-template/index.ts
+++ b/src/__ray-template/index.ts
@ -1,2 +1,16 @@
-export * from './valid/validAppRootPath'
-export * from './valid/validLocal'
+import { validAppRootPath } from './valid/valid-app-root-path'
+import { validLocal } from './valid/valid-local'
+
+/**
+ *
+ * @description
+ * 该方法用于初始化 ray-template 配置。
+ */
+export const setupRayTemplateCore = async () => {
+  if (!__DEV__) {
+    return
+  }
+
+  await validAppRootPath()
+  await validLocal()
+}
--- a/src/ray-template/valid/valid-app-root-path.ts
+++ b/src/ray-template/valid/valid-app-root-path.ts
@ -11,10 +11,6 @@ import { useVueRouter } from '@/hooks'
 * 该方法会通过调用 getRoutes 方法获取所有路由，也就意味着检查的路由格式是铺开之后的格式。当你的路由是嵌套路由时，需要注意检查完整的路径。
 */
 export const validAppRootPath = async () => {
-  if (!__DEV__) {
-    return
-  }
-
  const { getAppRootRoute } = useSettingGetters()
  const {
    router: { getRoutes },
--- a/src/ray-template/valid/valid-local.ts
+++ b/src/ray-template/valid/valid-local.ts
@ -92,10 +92,6 @@ const validDefaultDayjsLocal = () => {
 * 验证所有的 localConfig 相关的配置。
 */
 export const validLocal = async () => {
-  if (!__DEV__) {
-    return
-  }
-
  validSystemDefaultLocal()
  validSystemFallbackLocale()
  validDayjsLocalMap()
--- a/src/app-config/app-config.ts
+++ b/src/app-config/app-config.ts
--- a/src/app-config/design-config.ts
+++ b/src/app-config/design-config.ts
--- a/src/app-config/index.ts
+++ b/src/app-config/index.ts
@ -1,6 +1,6 @@
-export * from './appConfig'
-export * from './designConfig'
-export * from './localConfig'
-export * from './regexConfig'
-export * from './requestConfig'
-export * from './routerConfig'
+export * from './app-config'
+export * from './design-config'
+export * from './local-config'
+export * from './regex-config'
+export * from './request-config'
+export * from './router-config'
--- a/src/app-config/local-config.ts
+++ b/src/app-config/local-config.ts
--- a/src/app-config/regex-config.ts
+++ b/src/app-config/regex-config.ts
--- a/src/app-config/request-config.ts
+++ b/src/app-config/request-config.ts
--- a/src/app-config/router-config.ts
+++ b/src/app-config/router-config.ts
--- a/src/axios/inject/request/provider.ts
+++ b/src/axios/inject/request/provider.ts
@ -21,7 +21,7 @@
 */

 import { axiosCanceler } from '@/axios/utils/interceptor'
-import { appendRequestHeaders } from '@/axios/utils/axiosCopilot'
+import { appendRequestHeaders } from '@/axios/utils/axios-copilot'
 import { APP_CATCH_KEY } from '@/app-config'
 import { getStorage } from '@/utils'

--- a/src/axios/utils/axios-copilot.ts
+++ b/src/axios/utils/axios-copilot.ts
--- a/src/components/RChart/src/index.tsx
+++ b/src/components/RChart/src/index.tsx
@ -461,12 +461,7 @@ export default defineComponent({
      }
    })

-    expose({
-      echart: echartInstanceRef,
-      dispose: unmount,
-      render: mount,
-      isDispose,
-    })
+    expose()

    onBeforeMount(async () => {
      // 注册 echarts 组件与渲染器
--- a/src/components/RChart/src/props.ts
+++ b/src/components/RChart/src/props.ts
@ -381,6 +381,6 @@ const props = {
    >,
    default: null,
  },
-}
+} as const

 export default props
--- a/src/components/RForm/src/Form.tsx
+++ b/src/components/RForm/src/Form.tsx
@ -19,7 +19,7 @@ import type { RFormInst } from './types'
 export default defineComponent({
  name: 'RForm',
  props,
-  setup(props) {
+  setup(props, { expose }) {
    const formRef = ref<RFormInst>()

    onMounted(() => {
@ -31,6 +31,8 @@ export default defineComponent({
      }
    })

+    expose()
+
    return {
      formRef,
    }
--- a/src/components/RForm/src/props.ts
+++ b/src/components/RForm/src/props.ts
@ -19,6 +19,6 @@ const props = {
    >,
    default: null,
  },
-}
+} as const

 export default props
--- a/src/components/RMoreDropdown/src/props.ts
+++ b/src/components/RMoreDropdown/src/props.ts
@ -21,6 +21,6 @@ const props = {
    type: String,
    default: 'default',
  },
-}
+} as const

 export default props
--- a/src/components/RQRCode/src/props.ts
+++ b/src/components/RQRCode/src/props.ts
@ -305,6 +305,6 @@ const props = {
    type: [Function, Array] as PropType<MaybeArray<() => void>>,
    default: null,
  },
-}
+} as const

 export default props
--- a/src/components/RSegment/index.ts
+++ b/src/components/RSegment/index.ts
@ -0,0 +1,10 @@
+import RSegment from './src/Segment'
+import segmentProps from './src/props'
+
+import type { ExtractPublicPropTypes } from 'vue'
+import type { RSegmentOptions } from './src/types'
+
+export type SegmentProps = ExtractPublicPropTypes<typeof segmentProps>
+export type { RSegmentOptions }
+
+export { RSegment, segmentProps }
--- a/src/components/RSegment/src/Segment.tsx
+++ b/src/components/RSegment/src/Segment.tsx
@ -0,0 +1,133 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2024-04-10
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NTabs, NTab, NPopover, NFlex } from 'naive-ui'
+
+import props from './props'
+import { themeOverrides } from './constant'
+import { completeSize, isValueType } from '@/utils'
+
+import type { TabsProps } from 'naive-ui'
+import type { RSegmentOptions } from './types'
+
+const iconSegmentTab = (option: RSegmentOptions) => {
+  const { icon, label } = option
+
+  if (icon) {
+    return (
+      <NFlex align="center" wrap={false} size="small">
+        <icon />
+        <div>{label}</div>
+      </NFlex>
+    )
+  }
+
+  return label
+}
+
+const popoverSegmentTab = (option: RSegmentOptions) => {
+  if (typeof option.popover === 'string') {
+    return (
+      <NPopover>
+        {{
+          trigger: iconSegmentTab(option),
+          default: () => option.popover,
+        }}
+      </NPopover>
+    )
+  }
+
+  if (isValueType<object>(option.popover, 'Object')) {
+    const { popover } = option
+    const { label, ...parameters } = popover
+
+    return (
+      <NPopover {...parameters}>
+        {{
+          trigger: iconSegmentTab(option),
+          default: () => label,
+        }}
+      </NPopover>
+    )
+  }
+}
+
+export default defineComponent({
+  name: 'RSegment',
+  props,
+  setup(props, { expose }) {
+    const cssVars = computed(() => {
+      const { width: propsWidth } = props
+      let segmentWidthVar = ''
+
+      switch (propsWidth) {
+        case 'block':
+          segmentWidthVar = '100%'
+
+          break
+        case 'fitContent':
+          segmentWidthVar = 'fit-content'
+
+          break
+
+        default:
+          segmentWidthVar =
+            typeof propsWidth === 'number'
+              ? completeSize(propsWidth)
+              : 'fit-content'
+      }
+
+      return {
+        '--r-segment-width': segmentWidthVar,
+      }
+    })
+
+    expose()
+
+    return {
+      cssVars,
+    }
+  },
+  render() {
+    const { $props, options, cssVars, themeOverrides: _themeOverrides } = this
+
+    return (
+      <NTabs
+        {...($props as TabsProps)}
+        ref="segmentRef"
+        style={[cssVars]}
+        class="r-segment"
+        type="segment"
+        animated
+        themeOverrides={Object.assign({}, themeOverrides, _themeOverrides)}
+      >
+        {options.map((curr) => {
+          return (
+            <NTab
+              key={curr.key}
+              name={curr.key}
+              tab={
+                !curr.popover ? iconSegmentTab(curr) : popoverSegmentTab(curr)
+              }
+              disabled={curr.disabled}
+            >
+              {{
+                ...curr.slots,
+              }}
+            </NTab>
+          )
+        })}
+      </NTabs>
+    )
+  },
+})
--- a/src/components/RSegment/src/constant.ts
+++ b/src/components/RSegment/src/constant.ts
@ -0,0 +1,26 @@
+export const OMIT_TABS_PROPS_KEYS = [
+  'addTabClass',
+  'addTabStyle',
+  'paneClass',
+  'paneStyle',
+  'paneWrapperStyle',
+  'tabClass',
+  'tabStyle',
+  'type',
+  'label',
+  'addable',
+  'closable',
+  'onAdd',
+  'onClose',
+  'placement',
+  'animated',
+  'justifyContent',
+  'builtinThemeOverrides',
+  'displayDirective',
+] as const
+
+export const themeOverrides = {
+  tabPaddingSmallSegment: '4px 7px',
+  tabPaddingMediumSegment: '6px 11px',
+  tabPaddingLargeSegment: '8px 11px',
+}
--- a/src/components/RSegment/src/index.scss
+++ b/src/components/RSegment/src/index.scss
@ -0,0 +1,3 @@
+.r-segment {
+  width: var(--r-segment-width);
+}
--- a/src/components/RSegment/src/props.ts
+++ b/src/components/RSegment/src/props.ts
@ -0,0 +1,29 @@
+import { tabsProps } from 'naive-ui'
+import { omit } from 'lodash-es'
+import { OMIT_TABS_PROPS_KEYS } from './constant'
+
+import type { RSegmentOptions, RSegmentWidth } from './types'
+import type { PropType } from 'vue'
+
+/**
+ *
+ * @description
+ * 为了避免 vue props 类型推导错误，需要在这里做一次 omit 操作。
+ * 属于是一种无奈之举。
+ */
+const segmentProps = omit(
+  {
+    ...tabsProps,
+    options: {
+      type: Array as PropType<RSegmentOptions[]>,
+      default: () => [],
+    },
+    width: {
+      type: [Number, String] as PropType<RSegmentWidth>,
+      default: 'fitContent',
+    },
+  },
+  ...OMIT_TABS_PROPS_KEYS,
+)
+
+export default segmentProps
--- a/src/components/RSegment/src/types.ts
+++ b/src/components/RSegment/src/types.ts
@ -0,0 +1,28 @@
+import type { TabsProps, TabPaneProps, PopoverProps } from 'naive-ui'
+import type { OMIT_TABS_PROPS_KEYS } from './constant'
+import type { VNode, VNodeChild, ExtractPublicPropTypes } from 'vue'
+
+export type OmitTabsPropsKeys = (typeof OMIT_TABS_PROPS_KEYS)[number]
+
+export interface RSegmentPopover extends ExtractPublicPropTypes<PopoverProps> {
+  label: string
+}
+
+export interface RSegmentOptions {
+  label: string | VNode | (() => VNodeChild)
+  key: string | number
+  displayDirective?: TabPaneProps['displayDirective']
+  disabled?: boolean
+  slots?: {
+    default?: () => VNode | string | number
+  }
+  popover?: string | RSegmentPopover
+  icon?: VNode
+}
+
+export type RSegmentWidth = number | 'block' | 'fitContent'
+
+export interface RSegmentProps extends Omit<TabsProps, OmitTabsPropsKeys> {
+  options?: RSegmentOptions
+  width?: RSegmentWidth
+}
--- a/src/components/RTable/index.ts
+++ b/src/components/RTable/index.ts
@ -1,12 +1,14 @@
 import RTable from './src/Table'
 import tableProps from './src/props'
 import useTable from './src/hooks/useTable'
+import useCheckedRowKeys from './src/hooks/useCheckedRowKeys'

 import type * as RTableType from './src/types'
 import type { UseTableReturn } from './src/hooks/useTable'
+import type { UseCheckedRowKeysReturn } from './src/hooks/useCheckedRowKeys'
 import type { ExtractPublicPropTypes } from 'vue'

 export type TableProps = ExtractPublicPropTypes<typeof tableProps>
-export type { RTableType, UseTableReturn }
+export type { RTableType, UseTableReturn, UseCheckedRowKeysReturn }

-export { RTable, tableProps, useTable }
+export { RTable, tableProps, useTable, useCheckedRowKeys }
--- a/src/components/RTable/src/Table.tsx
+++ b/src/components/RTable/src/Table.tsx
@ -211,11 +211,7 @@ export default defineComponent({
      uuidWrapper,
      wrapperRef,
    })
-    expose({
-      rTableInst,
-      uuidTable,
-      uuidWrapper,
-    })
+    expose()

    return {
      uuidWrapper,
--- a/src/components/RTable/src/components/C.tsx
+++ b/src/components/RTable/src/components/C.tsx
@ -24,6 +24,7 @@ import { RIcon } from '@/components'
 import { config } from '../shared'
 import props from '../props'
 import { call } from '@/utils'
+import { cloneDeep, isEmpty } from 'lodash-es'

 import type { TreeOption, TreeDropInfo } from 'naive-ui'
 import type { C } from '../types'
@ -109,11 +110,22 @@ export default defineComponent({
    },
  },
  setup(props) {
+    let tableColumnType: C
    // 深拷贝 columns 避免修改源数据
    const treeDataSource = computed({
      get: () => {
+        const cloneColumns = cloneDeep(props.columns).filter((curr) => {
+          if (curr.type) {
+            tableColumnType = curr as unknown as C
+
+            return false
+          }
+
+          return true
+        })
+
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return props.columns.map((curr, idx) => {
+        return cloneColumns.map((curr, idx) => {
          const { key, title, children, fixed, isResizable, ...args } =
            curr as C
          const isLeftFixedActivated = fixed === 'left'
@ -229,6 +241,10 @@ export default defineComponent({
        ? nodeSiblings.splice(nodeIndex, 0, dragNode)
        : nodeSiblings.splice(nodeIndex + 1, 0, dragNode)

+      if (!isEmpty(tableColumnType)) {
+        nodeSiblings.unshift(tableColumnType as TreeOption)
+      }
+
      // 触发事件，更新树形数据源
      event(nodeSiblings as C[])
    }
--- a/src/components/RTable/src/components/Props.tsx
+++ b/src/components/RTable/src/components/Props.tsx
@ -13,7 +13,7 @@ import { NPopselect } from 'naive-ui'
 import { RIcon } from '@/components'

 import { call } from '@/utils'
-import { config } from '../shared'
+import { config, propsOptions } from '../shared'
 import props from '../props'

 import type { MaybeArray } from '@/types'
@ -39,16 +39,6 @@ export default defineComponent({
  setup(props) {
    const popoverShow = ref(false)
    const propsPopselectValue = ref<PropsComponentPopselectKeys[]>([])
-    const propsOptions = [
-      {
-        label: '斑马条纹',
-        value: 'striped',
-      },
-      {
-        label: '表格边框',
-        value: 'bordered',
-      },
-    ]

    const updatePopselectValue = (value: PropsComponentPopselectKeys[]) => {
      const { onPopselectChange } = props
@ -78,7 +68,6 @@ export default defineComponent({

    return {
      propsPopselectValue,
-      propsOptions,
      popoverShow,
      updatePopselectValue,
    }
@ -87,7 +76,7 @@ export default defineComponent({
    return (
      <NPopselect
        v-model:value={this.propsPopselectValue}
-        options={this.propsOptions}
+        options={propsOptions}
        trigger="click"
        multiple
        onUpdateValue={this.updatePopselectValue.bind(this)}
--- a/src/components/RTable/src/hooks/useCheckedRowKeys.ts
+++ b/src/components/RTable/src/hooks/useCheckedRowKeys.ts
@ -0,0 +1,257 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { effectDispose } from '@/utils'
+
+import type { Recordable } from '@/types'
+import type { MaybeRef } from '@vueuse/core'
+
+export type RowKey = string | number
+
+export type Action =
+  | 'check'
+  | 'uncheck'
+  | 'checkAll'
+  | 'uncheckAll'
+  | 'multipleCheck'
+
+export interface UseCheckedRowKeysOptions<T = unknown> {
+  /**
+   *
+   * @description
+   * 绑定在 DataTable 组件的唯一关键字段，用于标识每一行数据。
+   * 在该组件中，默认使用 key 作为关键字段，你可以通过该属性来自定义。
+   */
+  rowKey: string
+  /**
+   *
+   * @param keys 选中的 keys
+   * @param rows 选中的 rows
+   * @param meta 当前操作的元数据
+   *
+   * @description
+   * 每当 keys 变化时，会触发该回调函数。
+   */
+  onChange?: (
+    keys: RowKey[],
+    rows: T[],
+    meta: { row: T | undefined; action: Action },
+  ) => void
+}
+
+/**
+ *
+ * @param tableData DataTable data
+ * @param bindRowKey DataTable rowKey
+ * @param key target key
+ *
+ * @description
+ * 递归查找指定 key 的行数据。
+ * 因为 DataTable data 允许树结构，所以需要递归查找。
+ */
+const findRow = (
+  tableData: Recordable[],
+  bindRowKey: string,
+  key: RowKey,
+): Recordable | undefined => {
+  if (!tableData.length) {
+    return void 0
+  }
+
+  for (const curr of tableData) {
+    if (curr[bindRowKey] === key) {
+      return curr
+    }
+
+    if (curr?.children?.length) {
+      const foundRow = findRow(curr.children, bindRowKey, key)
+
+      if (foundRow) {
+        return foundRow
+      }
+    }
+  }
+
+  return void 0
+}
+
+/**
+ *
+ * @param data 当前 DataTable 组件的数据
+ * @param options 配置项
+ *
+ * @description
+ * 该方法用于便捷的管理 checkedRowKeys。
+ *
+ * 该方法依赖 rowKey，该字段用于标识每一行数据，与组件的约定保持一致。
+ *
+ * 如果需要该方法去接管 onUpdateCheckedRowKeys 事件，需要手动去注册 checkedRowKeysBind 方法。
+ * 并且在使用的时候，需要手动绑定 v-model:checkedRowKeys。
+ *
+ * @example
+ * <template>
+ *   <RDataTable
+ *     v-model:checkedRowKeys="checkedRowKeys"
+ *     onUpdateCheckedRowKeys="checkedRowKeysBind"
+ *     :data="data"
+ *     :columns="columns"
+ *   />
+ * </template>
+ * <script lang="ts" setup>
+ * import { useCheckedRowKeys } from '@/components'
+ *
+ * const data = ref([{ ...table data }])
+ * const columns = [{ ...table columns }]
+ * const [checkedRowKeys, { checkedRowKeysBind }] = useCheckedRowKeys(data, { rowKey: 'key' })
+ * </script>
+ */
+const useCheckedRowKeys = <T extends Recordable>(
+  data: MaybeRef<T[] | undefined>,
+  options?: UseCheckedRowKeysOptions<T>,
+) => {
+  const keysRef = ref<RowKey[]>([])
+  const rowsRef = ref<any[]>([])
+  const { rowKey: bindRowKey = 'key', onChange } = options || {}
+
+  /**
+   *
+   * @param keys 选中 keys 数据
+   * @param rows 选中 rows 数据
+   * @param meta 当前选中元数据与操作类型
+   *
+   * @description
+   * 用于绑定 onUpdateCheckedRowKeys 事件。
+   */
+  const bind = (
+    keys: RowKey[],
+    rows: Recordable[],
+    meta: {
+      row: Recordable | undefined
+      action: Action
+    },
+  ) => {
+    keysRef.value = keys
+    rowsRef.value = rows
+
+    onChange?.(
+      keys,
+      rows as any,
+      meta as {
+        row: any | undefined
+        action: Action
+      },
+    )
+  }
+
+  /**
+   *
+   * @description
+   * 获取所有已选择行的 key。
+   * key 为你手动绑定的唯一关键字段，与 DataTable 组件需要的 rowKey 保持一致。
+   */
+  const getKeys = () => keysRef.value
+
+  /**
+   *
+   * @description
+   * 获取所有已选择行的数据。
+   */
+  const getRows = () => rowsRef.value
+
+  /**
+   *
+   * @description
+   * 清理所有已选择行的 key 和 rows。
+   */
+  const clearAll = () => {
+    keysRef.value = []
+    rowsRef.value = []
+
+    onChange?.(keysRef.value, rowsRef.value, {
+      row: void 0,
+      action: 'uncheckAll',
+    })
+  }
+
+  /**
+   *
+   * @param key 需要清理的 key
+   * @param rowKey 绑定 key 的字段，默认为 'key'，与 DataTable 组件需要的 rowKey 保持一致
+   *
+   * @description
+   * 清理指定 key。
+   *
+   * 实际上，在 naive ui 中，key 与 rows 是关联起来的。
+   * 所以，为了避免歧义的存在，当你清理掉某个 key 时，对应的 rows 也会被清理掉。
+   */
+  const clearKey = (key: RowKey) => {
+    if (key === null || key === void 0) {
+      return
+    }
+
+    let _row!: Recordable<T>
+
+    keysRef.value = keysRef.value.filter((curr) => curr !== key)
+    rowsRef.value = rowsRef.value.filter((curr) => {
+      if (curr[bindRowKey] === key) {
+        _row = curr
+
+        return false
+      }
+
+      return true
+    })
+
+    onChange?.(keysRef.value, rowsRef.value, {
+      row: _row as any,
+      action: 'uncheck',
+    })
+  }
+
+  /**
+   *
+   * @param keys 选中的 keys
+   *
+   * @description
+   * 选中指定的 keys。
+   *
+   * 当你调用该方法时，会将 keys 与 data 中的 rows 进行比对，将匹配的 rows 添加到已选中的 rows 中。
+   */
+  const selectKey = (key: RowKey) => {
+    if (keysRef.value.includes(key)) {
+      return
+    }
+
+    keysRef.value.push(key)
+
+    const row = findRow(unref(data) || [], bindRowKey, key)
+
+    if (row) {
+      rowsRef.value.push(row)
+
+      onChange?.(keysRef.value, rowsRef.value, {
+        row: row as any,
+        action: 'check',
+      })
+    }
+  }
+
+  effectDispose(() => {
+    clearAll()
+  })
+
+  return [
+    keysRef,
+    {
+      checkedRows: rowsRef as Ref<T[]>,
+      checkedRowKeysBind: bind,
+      getKeys,
+      getRows,
+      clearAll,
+      clearKey,
+      selectKey,
+    },
+  ] as const
+}
+
+export type UseCheckedRowKeysReturn = ReturnType<typeof useCheckedRowKeys>
+
+export default useCheckedRowKeys
--- a/src/components/RTable/src/props.ts
+++ b/src/components/RTable/src/props.ts
@ -206,6 +206,6 @@ const props = {
    >,
    default: null,
  },
-}
+} as const

 export default props
--- a/src/components/RTable/src/shared.ts
+++ b/src/components/RTable/src/shared.ts
@ -13,3 +13,14 @@ export const config = {
  tableIconSize: '18',
  tableKey: Symbol('r-table'),
 }
+
+export const propsOptions = [
+  {
+    label: '斑马条纹',
+    value: 'striped',
+  },
+  {
+    label: '表格边框',
+    value: 'bordered',
+  },
+]
--- a/src/components/RTransitionComponent/src/props.ts
+++ b/src/components/RTransitionComponent/src/props.ts
@ -4,6 +4,6 @@ const props: TransitionProps = {
  transitionPropName: 'fade',
  transitionMode: 'out-in',
  transitionAppear: true,
-}
+} as const

 export default props
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -9,6 +9,7 @@ export * from './RQRCode'
 export * from './RTable'
 export * from './RTransitionComponent'
 export * from './RForm'
+export * from './RSegment'

 // 导出自定义组件类型
 export type * from './RChart/src/types'
@ -19,3 +20,4 @@ export type * from './RTable/src/types'
 export type * from './RTransitionComponent/src/types'
 export type * from './RForm/src/types'
 export type * from './RModal/src/types'
+export type * from './RSegment/src/types'
--- a/src/dayjs/index.ts
+++ b/src/dayjs/index.ts
@ -13,6 +13,13 @@ import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL } from '@/app-config'
 import 'dayjs/locale/zh-cn'

+/**
+ *
+ * @description
+ * vue 挂载之前初始化 dayjs。
+ *
+ * 初始化 dayjs 的语言环境。
+ */
 export const setupDayjs = () => {
  dayjs.locale(DEFAULT_DAYJS_LOCAL)
 }
--- a/src/directives/modules/copy/index.ts
+++ b/src/directives/modules/copy/index.ts
@ -13,11 +13,11 @@
 *
 * directive name: copy
 *
+ * @description
 * 该指令用于处理复制，使用的时候必须传递正确的 value 值。
 *
 * 指令基于 clipboard.js 实现。
 *
- * 使用方式：
 * @example
 * <template>
 *  <button v-copy="copyText">复制</button>
--- a/src/directives/modules/debounce/index.ts
+++ b/src/directives/modules/debounce/index.ts
@ -13,11 +13,12 @@
 *
 * directive name: debounce
 *
+ * @description
+ *
 * 该指令用于处理防抖，使用的时候必须传递正确的 func 值。
 *
 * 其中 trigger 和 wait 是可选的，trigger 默认为 click，wait 默认为 500。
 *
- * 使用方式：
 * @example
 * <template>
 *  <div v-debounce="{ func: () => console.log('debounce') }">这是一个防抖指令</div>
--- a/src/directives/modules/disabled/index.ts
+++ b/src/directives/modules/disabled/index.ts
@ -13,12 +13,12 @@
 *
 * directive name: disabled
 *
+ * @description
 * 该指令用于处理元素的禁用状态，使用的时候必须传递正确的 value 值。
 *
 * 该方法依赖 ray-template__directive--disabled 样式类，需要在全局样式中定义，
 * 并且该指令仅仅是做了 css 样式层面的禁用效果，如果有需要，还需要在业务逻辑中做相应的处理。
 *
- * 使用方式：
 * @example
 * <template>
 *  <button v-disabled="true">这是一个禁用按钮</button>
--- a/src/directives/modules/ellipsis/index.ts
+++ b/src/directives/modules/ellipsis/index.ts
@ -2,11 +2,11 @@
 *
 * directive name: ellipsis
 *
+ * @description
 * 该指令用于处理文本溢出省略，使用的时候必须传递正确的 width 值。
 *
 * 其中 line 和 type 是可选的，line 默认为 1，type 默认为 block。
 *
- * 使用方式：
 * @example
 * <template>
 *  <div v-ellipsis="{ line: 2, width: 200 }">这是一段需要省略的文字</div>
--- a/src/directives/modules/ripple/index.scss
+++ b/src/directives/modules/ripple/index.scss
@ -0,0 +1,47 @@
+$ripple-animation-transition-in:
+  transform 0.4s cubic-bezier(0, 0, 0.2, 1),
+  opacity 0.2s cubic-bezier(0, 0, 0.2, 1) !default;
+$ripple-animation-transition-out: opacity 0.5s cubic-bezier(0, 0, 0.2, 1) !default;
+$ripple-animation-visible-opacity: 0.25 !default;
+
+.v-ripple {
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    border-radius: inherit;
+    contain: strict;
+  }
+
+  &__animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    pointer-events: none;
+    background: currentcolor;
+    border-radius: 50%;
+    opacity: 0;
+    will-change: transform, opacity;
+
+    &--enter {
+      opacity: 0;
+      transition: none;
+    }
+
+    &--in {
+      opacity: $ripple-animation-visible-opacity;
+      transition: $ripple-animation-transition-in;
+    }
+
+    &--out {
+      opacity: 0;
+      transition: $ripple-animation-transition-out;
+    }
+  }
+}
--- a/src/directives/modules/ripple/index.ts
+++ b/src/directives/modules/ripple/index.ts
@ -0,0 +1,55 @@
+/**
+ *
+ * directive name: ripple
+ *
+ * @description
+ * 水波纹指令。
+ *
+ * 使用方式：
+ * @example
+ * <template>
+ *  <button v-ripple>点击查看水波纹效果</button>
+ * </template>
+ * <template>
+ *  <div
+ *    style="height: 20px; line-height: 20px;text-align: center; border: 1px solid; padding: 6px;"
+ *    v-ripple={[true, ['center']]}
+ *  >
+ *    原生元素绑定水波纹效果，并且手动绑定 modifiers 为 center
+ *  </div>
+ * </template>
+ *
+ * const DemoOne = () => <div v-ripple>hi</div>
+ * const DemoTwo = () => <div v-ripple={[true, ['circle']]}>hi</div>
+ */
+
+import './index.scss'
+
+import { updateRipple, removeListeners, isRippleEnabled } from './utils'
+
+import type { CustomDirectiveFC } from '@/directives/types'
+import type { RippleValue, RippleElement } from './types'
+
+const copyDirective: CustomDirectiveFC<RippleElement, RippleValue> = () => {
+  return {
+    mounted: (el, binding) => {
+      updateRipple(el, binding, false)
+    },
+    beforeUnmount: (el) => {
+      delete el.__d_ripple__
+
+      removeListeners(el)
+    },
+    updated: (el, binding) => {
+      if (binding.value === binding.oldValue) {
+        return
+      }
+
+      const wasEnabled = isRippleEnabled(binding.oldValue)
+
+      updateRipple(el, binding, wasEnabled)
+    },
+  }
+}
+
+export default copyDirective
--- a/src/directives/modules/ripple/types.ts
+++ b/src/directives/modules/ripple/types.ts
@ -0,0 +1,58 @@
+export interface RippleOptions {
+  class?: string
+  center?: boolean
+  circle?: boolean
+}
+
+export type RippleValue =
+  | boolean
+  | {
+      class: string
+    }
+
+export interface Ripple {
+  /**
+   *
+   * @description
+   * 是否启用水波纹效果。
+   */
+  enabled?: boolean
+  /**
+   *
+   * @description
+   * 是否从中点开始扩散。
+   */
+  centered?: boolean
+  /**
+   *
+   * @description
+   * 是否为圆形水波纹。
+   */
+  circle?: boolean
+  /**
+   *
+   * @description
+   * 自定义水波纹类名。
+   */
+  class?: string
+  /**
+   *
+   * @description
+   * 是否点击触发。
+   */
+  touched?: boolean
+}
+
+export interface RippleElement extends HTMLElement {
+  __d_ripple__?: Ripple
+}
+
+export interface RippleModifiers {
+  center?: boolean
+  circle?: boolean
+}
+
+export interface RippleBindingValue {
+  value?: RippleValue
+  modifiers: RippleModifiers
+}
--- a/src/directives/modules/ripple/utils.ts
+++ b/src/directives/modules/ripple/utils.ts
@ -0,0 +1,283 @@
+/**
+ *
+ * @description
+ * 该方法借鉴 pure admin ripple directive 实现。
+ *
+ * 在原有指令实现基础上，补充了 ts 签名与注释。并且结合本模板的特性实现。
+ *
+ * @see https://github.dev/pure-admin/vue-pure-admin/blob/main/src/components/ReCol/index.ts
+ */
+
+import { isValueType } from '@/utils'
+
+import type { RippleOptions, RippleElement, RippleBindingValue } from './types'
+
+const animationClasses = {
+  vRippleAnimationEnter: 'v-ripple__animation--enter',
+  vRippleAnimationVisible: 'v-ripple__animation--visible',
+  vRippleAnimationIn: 'v-ripple__animation--in',
+  vRippleAnimationOut: 'v-ripple__animation--out',
+  vRippleAnimation: 'v-ripple__animation',
+}
+const vRippleContainerClass = 'v-ripple__container'
+
+function transform(el: HTMLElement, value: string) {
+  el.style.transform = value
+}
+
+/**
+ *
+ * @param e current click event
+ *
+ * @description
+ * 显示水波纹效果。
+ */
+function rippleShow(e: PointerEvent) {
+  const value: RippleOptions = {}
+  const element = e.currentTarget as RippleElement | undefined
+
+  if (!element?.__d_ripple__ || element.__d_ripple__.touched) {
+    return
+  }
+
+  value.center = element.__d_ripple__.centered
+
+  if (element.__d_ripple__.class) {
+    value.class = element.__d_ripple__.class
+  }
+
+  ripples.show(e, element, value)
+}
+
+/**
+ *
+ * @param e current event
+ *
+ * @description
+ * 隐藏水波纹效果。
+ */
+function rippleHide(e: Event) {
+  const element = e.currentTarget as RippleElement | null
+
+  if (!element?.__d_ripple__) {
+    return
+  }
+
+  // 调用清理方法，隐藏水波纹
+  setTimeout(() => {
+    if (element.__d_ripple__) {
+      element.__d_ripple__.touched = false
+    }
+  })
+  ripples.hide(element)
+}
+
+/**
+ *
+ * @param e current click event
+ * @param el current binding element
+ * @param value current bind value
+ *
+ * @description
+ * 计算当前水波纹相关的信息。
+ */
+const calculate = (
+  e: PointerEvent,
+  el: RippleElement,
+  value: RippleOptions = {},
+) => {
+  const offset = el.getBoundingClientRect()
+
+  const localX = e.clientX - offset.left // 点击位置距离 el 水平距离
+  const localY = e.clientY - offset.top // 点击位置距离 el 垂直距离
+
+  let radius = 0 // 圆半径
+  let scale = 0.3 // 缩放比例
+
+  // 计算点击位置到 el 顶点最远距离，即为圆的最大半径（勾股定理）
+  if (el.__d_ripple__?.circle) {
+    scale = 0.15
+    radius = el.clientWidth / 2
+    radius = value.center
+      ? radius
+      : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4
+  } else {
+    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2
+  }
+
+  const centerX = `${(el.clientWidth - radius * 2) / 2}px` // 水平中心点
+  const centerY = `${(el.clientHeight - radius * 2) / 2}px` // 垂直中心点
+
+  const x = value.center ? centerX : `${localX - radius}px` // 点击位置水平坐标
+  const y = value.center ? centerY : `${localY - radius}px` // 点击位置垂直坐标
+
+  return {
+    radius,
+    scale,
+    x,
+    y,
+    centerX,
+    centerY,
+  }
+}
+
+const ripples = {
+  show(e: PointerEvent, el: RippleElement, value: RippleOptions = {}) {
+    if (!el?.__d_ripple__?.enabled) {
+      return
+    }
+
+    // 创建 ripple 元素和 ripple 父元素
+    const container = document.createElement('span')
+    const animation = document.createElement('span')
+
+    container.appendChild(animation)
+
+    container.className = vRippleContainerClass
+
+    if (value.class) {
+      container.className += ` ${value.class}`
+    }
+
+    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value)
+
+    // ripple 圆大小
+    const size = `${radius * 2}px`
+
+    animation.className = animationClasses['vRippleAnimation']
+    animation.style.width = size
+    animation.style.height = size
+
+    el.appendChild(container)
+
+    // 获取目标元素样式表
+    const computed = window.getComputedStyle(el)
+
+    // 防止 position 被覆盖导致 ripple 位置有问题
+    if (computed && computed.position === 'static') {
+      el.style.position = 'relative'
+      el.dataset.previousPosition = 'static'
+    }
+
+    animation.classList.add(animationClasses['vRippleAnimationEnter'])
+    animation.classList.add(animationClasses['vRippleAnimationVisible'])
+
+    transform(
+      animation,
+      `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`,
+    )
+
+    animation.dataset.activated = String(performance.now())
+
+    setTimeout(() => {
+      animation.classList.remove(animationClasses['vRippleAnimationEnter'])
+      animation.classList.add(animationClasses['vRippleAnimationIn'])
+      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
+    }, 0)
+  },
+  hide(el: RippleElement | null) {
+    if (!el?.__d_ripple__?.enabled) {
+      return
+    }
+
+    const ripples = el.getElementsByClassName(
+      animationClasses['vRippleAnimation'],
+    )
+
+    if (ripples.length === 0) {
+      return
+    }
+
+    const animation = ripples[ripples.length - 1] as HTMLElement
+
+    if (animation.dataset.isHiding) {
+      return
+    }
+
+    animation.dataset.isHiding = 'true'
+
+    const diff = performance.now() - Number(animation.dataset.activated)
+    const delay = Math.max(250 - diff, 0)
+
+    setTimeout(() => {
+      animation.classList.remove(animationClasses['vRippleAnimationIn'])
+      animation.classList.add(animationClasses['vRippleAnimationOut'])
+
+      setTimeout(() => {
+        const ripples = el.getElementsByClassName(
+          animationClasses['vRippleAnimation'],
+        )
+
+        if (ripples.length === 1 && el.dataset.previousPosition) {
+          el.style.position = el.dataset.previousPosition
+          delete el.dataset.previousPosition
+        }
+
+        if (animation.parentNode?.parentNode === el) {
+          el.removeChild(animation.parentNode)
+        }
+      }, 300)
+    }, delay)
+  },
+}
+
+/**
+ *
+ * @param value valid value
+ *
+ * @description
+ * 判断是否启用了水波纹效果。
+ */
+export function isRippleEnabled(value: unknown): value is true {
+  return typeof value === 'undefined' || !!value
+}
+
+/**
+ *
+ * @param el current binging element
+ *
+ * @description
+ * 移除被绑定元素的水波纹相关事件。
+ */
+export function removeListeners(el: HTMLElement) {
+  el.removeEventListener('pointerdown', rippleShow)
+  el.removeEventListener('pointerup', rippleHide)
+}
+
+/**
+ *
+ * @param el current binding element
+ * @param binding current value
+ * @param isEnabled is enabled
+ *
+ * @description
+ * 绑定并且更新水波纹状态。
+ */
+export function updateRipple(
+  el: RippleElement,
+  binding: RippleBindingValue,
+  isEnabled: boolean,
+) {
+  const { value, modifiers } = binding
+  const enabled = isRippleEnabled(value)
+
+  if (!enabled) {
+    ripples.hide(el)
+  }
+
+  el.__d_ripple__ = el.__d_ripple__ ?? {}
+  el.__d_ripple__.enabled = enabled
+  el.__d_ripple__.centered = modifiers.center
+  el.__d_ripple__.circle = modifiers.circle
+
+  if (isValueType<object>(value, 'Object') && value.class) {
+    el.__d_ripple__.class = value.class
+  }
+
+  if (enabled && !isEnabled) {
+    el.addEventListener('pointerdown', rippleShow)
+    el.addEventListener('pointerup', rippleHide)
+  } else if (!enabled && isEnabled) {
+    removeListeners(el)
+  }
+}
--- a/src/directives/modules/throttle/index.ts
+++ b/src/directives/modules/throttle/index.ts
@ -13,11 +13,11 @@
 *
 * directive name: throttle
 *
+ * @description
 * 该指令用于处理节流，使用的时候必须传递正确的 func 值。
 *
 * 其中 trigger 和 wait 是可选的，trigger 默认为 click，wait 默认为 500。
 *
- * 使用方式：
 * @example
 * <template>
 *  <div v-throttle="{ func: () => console.log('throttle') }">这是一个节流指令</div>
--- a/src/global-variable/variable.ts
+++ b/src/global-variable/variable.ts
@ -45,9 +45,12 @@ const variableState = reactive({
 })

 export type VariableState = typeof variableState
-
 export type VariableStateKey = keyof VariableState

+type ReadonlyVariableState<T> = {
+  [K in keyof T & string]: Readonly<Ref<T[K]>>
+}
+
 /**
 *
 * @param key variable key
@ -84,3 +87,19 @@ export function setVariable<T extends VariableStateKey, FC extends AnyFC>(
 export function getVariableToRefs<K extends VariableStateKey>(key: K) {
  return readonly(toRef<VariableState, K>(variableState, key))
 }
+
+/**
+ *
+ * @description
+ * 允许解构获取 variable 属性。并且返回一个只读的 ref。
+ *
+ * 该方法为了解决 getVariableToRefs 方法的解构问题，如果需要在一个地方获取很多 variable 属性，可以使用该方法。
+ *
+ * @example
+ * const { globalMainLayoutLoad } = getVariable()
+ */
+export function getVariable(): ReadonlyVariableState<typeof variableState> {
+  return {
+    ...toRefs(readonly(variableState)),
+  }
+}
--- a/src/hooks/template/useSiderBar.ts
+++ b/src/hooks/template/useSiderBar.ts
@ -11,7 +11,7 @@

 import { useMenuGetters, useMenuActions } from '@/store'
 import { useVueRouter, useAppRoot } from '@/hooks'
-import { pick } from '@/utils'
+import { pick } from 'lodash-es'

 import type { MenuTagOptions, Key, AppMenuOption } from '@/types'

--- a/src/hooks/web/useElementFullscreen.ts
+++ b/src/hooks/web/useElementFullscreen.ts
@ -50,6 +50,13 @@ export interface UseElementFullscreenOptions {
   * @default null
   */
  backgroundColor?: string
+  /**
+   *
+   * 手动设定 transition 过度效果
+   *
+   * @default 'width 0.3s var(--r-bezier), height 0.3s var(--r-bezier)'
+   */
+  transition?: string
 }

 let currentZIndex = 999
@ -92,8 +99,8 @@ export const useElementFullscreen = (
    exit: _exit,
    backgroundColor,
    zIndex,
+    transition = 'all 0.3s var(--r-bezier)',
  } = options ?? {}
-  const cacheStyle: Partial<CSSProperties> = {} // 缓存一些需要被覆盖的样式，例如: transition
  let isSetup = false

  const updateStyle = () => {
@ -110,7 +117,7 @@ export const useElementFullscreen = (
            width: ${width.value}px !important;
            height: ${height.value}px !important;
            transform: translate(-${left}px, -${top}px) !important;
-            transition: all 0.3s var(--r-bezier);
+            transition: ${transition};
            z-index: ${
              isValueType<null>(zIndex, 'Null') ||
              isValueType<undefined>(zIndex, 'Undefined')
@ -150,8 +157,7 @@ export const useElementFullscreen = (
        isAppend = true
      }

-      cacheStyle.transition = element.style.transition
-      element.style.transition = 'all 0.3s var(--r-bezier)'
+      element.style.transition = transition

      _enter?.()
    }
@ -163,8 +169,6 @@ export const useElementFullscreen = (
    const element = unrefElement(target)

    if (element) {
-      ;(element as HTMLElement).style.transition = cacheStyle.transition ?? ''
-
      element.removeAttribute(ID_TAG)
    }

@ -189,8 +193,6 @@ export const useElementFullscreen = (
    const element = unrefElement(target) as HTMLElement | null

    if (element) {
-      element.style.transition = cacheStyle.transition ?? ''
-
      element.removeAttribute(ID_TAG)
    }

--- a/src/hooks/web/usePagination.ts
+++ b/src/hooks/web/usePagination.ts
@ -1,7 +1,8 @@
-import { omit } from '@/utils'
+import { omit } from 'lodash-es'

 import type { AnyFC } from '@/types'
 import type { PaginationProps } from 'naive-ui'
+import type { Ref } from 'vue'

 type OmitKeys =
  | 'themeOverrides'
@ -29,9 +30,6 @@ const defaultOptions: UsePaginationOptions = {
 *
 * @description
 * 便捷分页 hook。
- *
- * @warning
- * callback 暂不支持异步函数。
 */
 export const usePagination = <T extends AnyFC>(
  callback: T,
@ -54,23 +52,23 @@ export const usePagination = <T extends AnyFC>(
  ])
  const methodsOptions = {
    onUpdatePage: (page: number) => {
-      paginationRef.page = page
+      paginationRef.value.page = page

      callback()
    },
    onUpdatePageSize: (pageSize: number) => {
-      paginationRef.pageSize = pageSize
-      paginationRef.page = 1
+      paginationRef.value.pageSize = pageSize
+      paginationRef.value.page = 1

      callback()
    },
  }
-  const paginationRef = reactive<PaginationProps>(
+  const paginationRef = ref<PaginationProps>(
    Object.assign({}, defaultOptions, omitOptions, methodsOptions),
  )

-  const updatePage = paginationRef.onUpdatePage as (page: number) => void
-  const updatePageSize = paginationRef.onUpdatePageSize as (
+  const updatePage = paginationRef.value.onUpdatePage as (page: number) => void
+  const updatePageSize = paginationRef.value.onUpdatePageSize as (
    pageSize: number,
  ) => void

@ -79,7 +77,7 @@ export const usePagination = <T extends AnyFC>(
   * @description
   * 获取总条数。
   */
-  const getItemCount = () => paginationRef.itemCount
+  const getItemCount = () => paginationRef.value.itemCount

  /**
   *
@ -89,7 +87,7 @@ export const usePagination = <T extends AnyFC>(
   * 设置总条数。
   */
  const setItemCount = (itemCount: number) => {
-    paginationRef.itemCount = itemCount
+    paginationRef.value.itemCount = itemCount
  }

  /**
@ -97,7 +95,7 @@ export const usePagination = <T extends AnyFC>(
   * @description
   * 获取当前页页码。
   */
-  const getPage = () => paginationRef.page
+  const getPage = () => paginationRef.value.page

  /**
   *
@ -117,7 +115,7 @@ export const usePagination = <T extends AnyFC>(
   * @description
   * 获取每页条数。
   */
-  const getPageSize = () => paginationRef.pageSize
+  const getPageSize = () => paginationRef.value.pageSize

  /**
   *
@ -137,7 +135,7 @@ export const usePagination = <T extends AnyFC>(
   * @description
   * 获取分页配置，通常可以用来传递给 RTable 组件。
   */
-  const getPagination = () => paginationRef as UsePaginationOptions
+  const getPagination = () => paginationRef.value as UsePaginationOptions

  /**
   *
@ -147,7 +145,7 @@ export const usePagination = <T extends AnyFC>(
  const getCallback = callback

  return [
-    paginationRef as PaginationProps,
+    paginationRef as Ref<UsePaginationOptions>,
    {
      updatePage,
      updatePageSize,
--- a/src/hooks/web/usePrint.ts
+++ b/src/hooks/web/usePrint.ts
@ -1,5 +1,6 @@
 import print from 'print-js'
-import { unrefElement, omit } from '@/utils'
+import { unrefElement } from '@/utils'
+import { omit } from 'lodash-es'

 import type { BasicTarget } from '@/types'

--- a/src/icons/A_README.md
+++ b/src/icons/A_README.md
@ -15,3 +15,9 @@
 - 导入 `svg` 图标
 - 命名（`命名必须全局唯一，并且尽量避免使用特殊符号`）
 - 导入 `RIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用
+
+## 分包
+
+从 `4.8.0` 版本起，支持了 `svg icon` 分包，可以按照业务模块进行分包管理。
+
+仅需要在 `src/icons` 目录下新建一个文件夹，然后将对应的 `svg` 图标放入其中即可。
--- a/src/icons/action/draggable.svg
+++ b/src/icons/action/draggable.svg
--- a/src/icons/action/fullscreen.svg
+++ b/src/icons/action/fullscreen.svg
--- a/src/icons/action/fullscreen_fold.svg
+++ b/src/icons/action/fullscreen_fold.svg
--- a/src/icons/action/out.svg
+++ b/src/icons/action/out.svg
--- a/src/icons/action/reload.svg
+++ b/src/icons/action/reload.svg
--- a/src/icons/action/search.svg
+++ b/src/icons/action/search.svg
--- a/src/icons/action/setting.svg
+++ b/src/icons/action/setting.svg
--- a/src/icons/directional/adjustment.svg
+++ b/src/icons/directional/adjustment.svg
--- a/src/icons/directional/close_left.svg
+++ b/src/icons/directional/close_left.svg
--- a/src/icons/directional/close_right.svg
+++ b/src/icons/directional/close_right.svg
--- a/src/icons/directional/expanded.svg
+++ b/src/icons/directional/expanded.svg
--- a/src/icons/directional/left_arrow.svg
+++ b/src/icons/directional/left_arrow.svg
--- a/src/icons/directional/lock.svg
+++ b/src/icons/directional/lock.svg
--- a/src/icons/directional/resize_h.svg
+++ b/src/icons/directional/resize_h.svg
--- a/src/icons/directional/right_arrow.svg
+++ b/src/icons/directional/right_arrow.svg
--- a/src/icons/directional/row_end.svg
+++ b/src/icons/directional/row_end.svg
--- a/src/icons/directional/row_head.svg
+++ b/src/icons/directional/row_head.svg
--- a/src/icons/doc.svg
+++ b/src/icons/doc.svg
@ -1,13 +0,0 @@
-<svg t="1672296474975" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="5926" width="64" height="64">
-  <path
-    fill="currentColor"
-    d="M832.1 185.1H609.4l-17.1-62c-9.6-34.6-40.5-58.8-75.3-58.8H196c-43.2 0-78.3 36.4-78.3 81.1V897c0 35.3 28.7 64 64 64H832c35.3 0 64-28.7 64-64V249c0.1-35.2-28.6-63.9-63.9-63.9z m-644.4-39.7c0-6.6 4.4-11.1 8.3-11.1h321c3.4 0 6.6 3.1 7.8 7.4l12 43.4H187.7v-39.7z m638.4 745.8H187.7V255.1h638.4v636.1z"
-    p-id="5927"></path>
-  <path fill="currentColor" d="M346.1 415.1m-35 0a35 35 0 1 0 70 0 35 35 0 1 0-70 0Z" p-id="5928"></path>
-  <path fill="currentColor" d="M462.3 380.1h257.8v70H462.3z" p-id="5929"></path>
-  <path fill="currentColor" d="M346.1 582.3m-35 0a35 35 0 1 0 70 0 35 35 0 1 0-70 0Z" p-id="5930"></path>
-  <path fill="currentColor" d="M462.3 547.3h257.8v70H462.3z" p-id="5931"></path>
-  <path fill="currentColor" d="M346.1 749.5m-35 0a35 35 0 1 0 70 0 35 35 0 1 0-70 0Z" p-id="5932"></path>
-  <path fill="currentColor" d="M462.3 714.5h257.8v70H462.3z" p-id="5933"></path>
-</svg>
--- a/src/icons/empty.svg
+++ b/src/icons/empty.svg
@ -1,6 +0,0 @@
-<svg t="1698916917467" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="10617" width="64" height="64">
-  <path
-    d="M776.145455 81.454545l214.10909 296.727273 10.472728 13.963637v552.727272H23.272727V392.145455l10.472728-13.963637L247.854545 81.454545h528.29091zM335.127273 406.109091H51.2v510.836364h921.6V406.109091H684.218182c-5.818182 36.072727-22.109091 69.818182-48.872727 96.581818-33.745455 33.745455-79.127273 52.363636-125.672728 52.363636-47.709091 0-91.927273-18.618182-125.672727-52.363636-25.6-26.763636-43.054545-60.509091-48.872727-96.581818z m621.381818-27.927273L762.181818 109.381818h-500.363636L67.490909 378.181818h293.271273c0 39.563636 16.256 76.8 44.183273 104.727273 27.927273 27.927273 66.327273 44.218182 104.727272 44.218182s76.8-16.290909 104.727273-44.218182c27.927273-27.927273 44.322909-65.163636 44.322909-104.727273H956.509091z"
-    fill="currentColor" p-id="10618"></path>
-</svg>
--- a/src/icons/logo/github.svg
+++ b/src/icons/logo/github.svg
--- a/src/icons/logo/google.svg
+++ b/src/icons/logo/google.svg
--- a/src/icons/logo/login_bg.svg
+++ b/src/icons/logo/login_bg.svg
--- a/src/icons/logo/office.svg
+++ b/src/icons/logo/office.svg
--- a/src/icons/logo/ray.svg
+++ b/src/icons/logo/ray.svg
--- a/src/icons/logo/twitter.svg
+++ b/src/icons/logo/twitter.svg
--- a/src/icons/qrcode.svg
+++ b/src/icons/qrcode.svg
@ -1,6 +0,0 @@
-<svg t="1680413645364" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="5387" width="64" height="64">
-  <path
-    d="M224 416.096V224l192-0.096 0.096 192.096L224 416.096zM416.096 160H223.904A64 64 0 0 0 160 223.904v192.192A64 64 0 0 0 223.904 480h192.192A64 64 0 0 0 480 416.096V223.904A64 64 0 0 0 416.096 160zM224 800.096V608l192-0.096 0.096 192.096L224 800.096zM416.096 544H223.904A64 64 0 0 0 160 607.904v192.192A64 64 0 0 0 223.904 864h192.192A64 64 0 0 0 480 800.096v-192.192A64 64 0 0 0 416.096 544zM608 416.096V224l192-0.096 0.096 192.096-192.096 0.096zM800.096 160h-192.192A64 64 0 0 0 544 223.904v192.192A64 64 0 0 0 607.904 480h192.192A64 64 0 0 0 864 416.096V223.904A64 64 0 0 0 800.096 160zM704 608a32 32 0 0 0-32 32v192a32 32 0 0 0 64 0v-192a32 32 0 0 0-32-32M576 608a32 32 0 0 0-32 32v192a32 32 0 0 0 64 0v-192a32 32 0 0 0-32-32M832 544a32 32 0 0 0-32 32v256a32 32 0 0 0 64 0v-256a32 32 0 0 0-32-32"
-    fill="currentColor" p-id="5388"></path>
-</svg>
--- a/src/icons/template/dark.svg
+++ b/src/icons/template/dark.svg
--- a/src/icons/template/light.svg
+++ b/src/icons/template/light.svg
--- a/src/icons/tip/axios.svg
+++ b/src/icons/tip/axios.svg
--- a/src/icons/tip/close.svg
+++ b/src/icons/tip/close.svg
--- a/src/icons/tip/dashboard.svg
+++ b/src/icons/tip/dashboard.svg
--- a/src/icons/tip/echart.svg
+++ b/src/icons/tip/echart.svg
--- a/src/icons/tip/enter.svg
+++ b/src/icons/tip/enter.svg
--- a/src/icons/tip/error.svg
+++ b/src/icons/tip/error.svg
--- a/src/icons/tip/export_excel.svg
+++ b/src/icons/tip/export_excel.svg
--- a/src/icons/tip/language.svg
+++ b/src/icons/tip/language.svg
--- a/src/icons/tip/menu.svg
+++ b/src/icons/tip/menu.svg
--- a/src/icons/tip/more.svg
+++ b/src/icons/tip/more.svg
--- a/src/icons/tip/mouse.svg
+++ b/src/icons/tip/mouse.svg
--- a/src/icons/tip/other.svg
+++ b/src/icons/tip/other.svg
--- a/Show More
+++ b/Show More