version: v4.8.0

.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.',
+      },
+    ],
   },
 }

.vscode/settings.json

@@ -19,6 +19,7 @@
   "alias-skip.allowedsuffix": ["ts", "tsx"],
   "alias-skip.rootpath": "package.json",
   "cSpell.words": [
+    "bezier",
     "Clickoutside",
     "commitmsg",
     "datetimerange",

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

__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', () => {

__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({})
-  })
-})

__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({})
-  })
-})

__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)
   })
 })

__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', () => {

__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', () => {

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

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

src/__ray-template/index.ts

@@ -1,2 +1,16 @@
-export * from './valid/validAppRootPath'
+import { validAppRootPath } from './valid/valid-app-root-path'
-export * from './valid/validLocal'
+import { validLocal } from './valid/valid-local'
+
+/**
+ *
+ * @description
+ * 该方法用于初始化 ray-template 配置。
+ */
+export const setupRayTemplateCore = async () => {
+  if (!__DEV__) {
+    return
+  }
+
+  await validAppRootPath()
+  await validLocal()
+}

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

src/__ray-template/valid/valid-local.ts

@@ -92,10 +92,6 @@ const validDefaultDayjsLocal = () => {
  * 验证所有的 localConfig 相关的配置。
  */
 export const validLocal = async () => {
-  if (!__DEV__) {
-    return
-  }
-
   validSystemDefaultLocal()
   validSystemFallbackLocale()
   validDayjsLocalMap()

src/app-config/index.ts

@@ -1,6 +1,6 @@
-export * from './appConfig'
+export * from './app-config'
-export * from './designConfig'
+export * from './design-config'
-export * from './localConfig'
+export * from './local-config'
-export * from './regexConfig'
+export * from './regex-config'
-export * from './requestConfig'
+export * from './request-config'
-export * from './routerConfig'
+export * from './router-config'

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'
 

src/components/RChart/src/index.tsx

@@ -461,12 +461,7 @@ export default defineComponent({
       }
     })
 
-    expose({
+    expose()
-      echart: echartInstanceRef,
-      dispose: unmount,
-      render: mount,
-      isDispose,
-    })
 
     onBeforeMount(async () => {
       // 注册 echarts 组件与渲染器

src/components/RChart/src/props.ts

@@ -381,6 +381,6 @@ const props = {
     >,
     default: null,
   },
-}
+} as const
 
 export default props

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

src/components/RForm/src/props.ts

@@ -19,6 +19,6 @@ const props = {
     >,
     default: null,
   },
-}
+} as const
 
 export default props

src/components/RMoreDropdown/src/props.ts

@@ -21,6 +21,6 @@ const props = {
     type: String,
     default: 'default',
   },
-}
+} as const
 
 export default props

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

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 }

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

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

src/components/RSegment/src/index.scss

@@ -0,0 +1,3 @@
+.r-segment {
+  width: var(--r-segment-width);
+}

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

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

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 }

src/components/RTable/src/Table.tsx

@@ -211,11 +211,7 @@ export default defineComponent({
       uuidWrapper,
       wrapperRef,
     })
-    expose({
+    expose()
-      rTableInst,
-      uuidTable,
-      uuidWrapper,
-    })
 
     return {
       uuidWrapper,

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[])
     }

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

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

src/components/RTable/src/props.ts

@@ -206,6 +206,6 @@ const props = {
     >,
     default: null,
   },
-}
+} as const
 
 export default props

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',
+  },
+]

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

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'

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

src/directives/modules/copy/index.ts

@@ -13,11 +13,11 @@
  *
  * directive name: copy
  *
+ * @description
  * 该指令用于处理复制，使用的时候必须传递正确的 value 值。
  *
  * 指令基于 clipboard.js 实现。
  *
- * 使用方式：
  * @example
  * <template>
  *  <button v-copy="copyText">复制</button>

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>

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>

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>

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

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

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

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

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>

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

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'
 

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 = transition
-      element.style.transition = 'all 0.3s var(--r-bezier)'
 
       _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)
     }
 

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.value.pageSize = pageSize
-      paginationRef.page = 1
+      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 updatePage = paginationRef.value.onUpdatePage as (page: number) => void
-  const updatePageSize = paginationRef.onUpdatePageSize as (
+  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,

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'
 

src/icons/A_README.md

@@ -15,3 +15,9 @@
 - 导入 `svg` 图标
 - 命名（`命名必须全局唯一，并且尽量避免使用特殊符号`）
 - 导入 `RIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用
+
+## 分包
+
+从 `4.8.0` 版本起，支持了 `svg icon` 分包，可以按照业务模块进行分包管理。
+
+仅需要在 `src/icons` 目录下新建一个文件夹，然后将对应的 `svg` 图标放入其中即可。

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>

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>

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>