From e95c06b00999d705d18ec7c70375acbe7686c891 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sat, 13 Apr 2024 15:24:51 +0800 Subject: [PATCH] version: v4.8.0 --- .eslintrc.cjs | 7 + .vscode/settings.json | 1 + CHANGELOG.md | 39 +++ __test__/app/prefixCacheKey.spec.ts | 2 +- __test__/basic/omit.spec.ts | 39 --- __test__/basic/pick.spec.ts | 25 -- __test__/hooks/useElementFullscreen.spec.ts | 2 +- __test__/vue/effectDispose.spec.ts | 2 +- __test__/vue/renderNode.spec.tsx | 2 +- package.json | 10 +- pnpm-lock.yaml | 80 +---- src/__ray-template/index.ts | 18 +- ...dAppRootPath.ts => valid-app-root-path.ts} | 4 - .../valid/{validLocal.ts => valid-local.ts} | 4 - .../{appConfig.ts => app-config.ts} | 0 .../{designConfig.ts => design-config.ts} | 0 src/app-config/index.ts | 12 +- .../{localConfig.ts => local-config.ts} | 0 .../{regexConfig.ts => regex-config.ts} | 0 .../{requestConfig.ts => request-config.ts} | 0 .../{routerConfig.ts => router-config.ts} | 0 src/axios/inject/request/provider.ts | 2 +- .../{axiosCopilot.ts => axios-copilot.ts} | 0 src/components/RChart/src/index.tsx | 7 +- src/components/RChart/src/props.ts | 2 +- src/components/RForm/src/Form.tsx | 4 +- src/components/RForm/src/props.ts | 2 +- src/components/RMoreDropdown/src/props.ts | 2 +- src/components/RQRCode/src/props.ts | 2 +- src/components/RSegment/index.ts | 10 + src/components/RSegment/src/Segment.tsx | 133 ++++++++ src/components/RSegment/src/constant.ts | 26 ++ src/components/RSegment/src/index.scss | 3 + src/components/RSegment/src/props.ts | 29 ++ src/components/RSegment/src/types.ts | 28 ++ src/components/RTable/index.ts | 6 +- src/components/RTable/src/Table.tsx | 6 +- src/components/RTable/src/components/C.tsx | 18 +- .../RTable/src/components/Props.tsx | 15 +- .../RTable/src/hooks/useCheckedRowKeys.ts | 257 ++++++++++++++++ src/components/RTable/src/props.ts | 2 +- src/components/RTable/src/shared.ts | 11 + .../RTransitionComponent/src/props.ts | 2 +- src/components/index.ts | 2 + src/dayjs/index.ts | 7 + src/directives/modules/copy/index.ts | 2 +- src/directives/modules/debounce/index.ts | 3 +- src/directives/modules/disabled/index.ts | 2 +- src/directives/modules/ellipsis/index.ts | 2 +- src/directives/modules/ripple/index.scss | 47 +++ src/directives/modules/ripple/index.ts | 55 ++++ src/directives/modules/ripple/types.ts | 58 ++++ src/directives/modules/ripple/utils.ts | 283 ++++++++++++++++++ src/directives/modules/throttle/index.ts | 2 +- src/global-variable/variable.ts | 21 +- src/hooks/template/useSiderBar.ts | 2 +- src/hooks/web/useElementFullscreen.ts | 18 +- src/hooks/web/usePagination.ts | 30 +- src/hooks/web/usePrint.ts | 3 +- src/icons/A_README.md | 6 + src/icons/{ => action}/draggable.svg | 0 src/icons/{ => action}/fullscreen.svg | 0 src/icons/{ => action}/fullscreen_fold.svg | 0 src/icons/{ => action}/out.svg | 0 src/icons/{ => action}/reload.svg | 0 src/icons/{ => action}/search.svg | 0 src/icons/{ => action}/setting.svg | 0 src/icons/{ => directional}/adjustment.svg | 0 src/icons/{ => directional}/close_left.svg | 0 src/icons/{ => directional}/close_right.svg | 0 src/icons/{ => directional}/expanded.svg | 0 src/icons/{ => directional}/left_arrow.svg | 0 src/icons/{ => directional}/lock.svg | 0 src/icons/{ => directional}/resize_h.svg | 0 src/icons/{ => directional}/right_arrow.svg | 0 src/icons/{ => directional}/row_end.svg | 0 src/icons/{ => directional}/row_head.svg | 0 src/icons/doc.svg | 13 - src/icons/empty.svg | 6 - src/icons/{ => logo}/github.svg | 0 src/icons/{ => logo}/google.svg | 0 src/icons/{ => logo}/login_bg.svg | 0 src/icons/{ => logo}/office.svg | 0 src/icons/{ => logo}/ray.svg | 0 src/icons/{ => logo}/twitter.svg | 0 src/icons/qrcode.svg | 6 - src/icons/{ => template}/dark.svg | 0 src/icons/{ => template}/light.svg | 0 src/icons/{ => tip}/axios.svg | 0 src/icons/{ => tip}/close.svg | 0 src/icons/{ => tip}/dashboard.svg | 0 src/icons/{ => tip}/echart.svg | 0 src/icons/{ => tip}/enter.svg | 0 src/icons/{ => tip}/error.svg | 0 src/icons/{ => tip}/export_excel.svg | 0 src/icons/{ => tip}/language.svg | 0 src/icons/{ => tip}/menu.svg | 0 src/icons/{ => tip}/more.svg | 0 src/icons/{ => tip}/mouse.svg | 0 src/icons/{ => tip}/other.svg | 0 src/icons/{ => tip}/print.svg | 0 src/icons/{ => tip}/rely.svg | 0 src/icons/{ => tip}/table.svg | 0 src/layout/components/MenuTag/index.tsx | 4 +- .../components/GlobalSearch/index.tsx | 6 +- .../components/GlobalSearchButton/index.scss | 21 ++ .../components/GlobalSearchButton/index.tsx | 12 +- src/layout/components/SiderBar/shared.ts | 9 +- src/layout/default/ContentWrapper/index.tsx | 10 +- src/layout/index.tsx | 4 +- .../{layoutResize.ts => layout-css-vars.ts} | 10 +- src/locales/lang/en-US/menu.json | 3 +- src/locales/lang/zh-CN/menu.json | 3 +- ...8nMessages.ts => combine-i18n-messages.ts} | 0 ...anguage.ts => get-app-default-language.ts} | 0 ...lMessages.ts => get-app-local-messages.ts} | 0 ...etNaiveLocales.ts => get-naive-locales.ts} | 0 src/locales/utils/index.ts | 8 +- src/main.ts | 12 +- ...ppRouteModules.ts => app-route-modules.ts} | 6 +- src/router/index.ts | 4 +- src/router/modules/demo/doc.ts | 45 --- src/router/modules/demo/segment.ts | 20 ++ .../modules/{error404.ts => error-404.ts} | 0 src/router/routes.ts | 2 +- src/router/utils/combine-raw-route-modules.ts | 37 +++ .../{expandRoutes.ts => expand-routes.ts} | 0 src/router/utils/index.ts | 10 + src/router/utils/order-routes.ts | 34 +++ src/router/utils/permission.ts | 4 +- .../utils/redirect-router-to-dashboard.ts | 21 ++ src/router/utils/routerCopilot.ts | 138 --------- src/router/utils/scroll-view-to-top.ts | 29 ++ src/router/utils/setup-router-loading-bar.ts | 21 ++ src/router/utils/setupHelper.ts | 116 ------- src/router/utils/valid-menu-item-show.ts | 35 +++ src/router/utils/valid-role.ts | 39 +++ src/router/utils/vue-router-register.ts | 25 ++ src/store/modules/menu/index.ts | 10 +- src/store/modules/menu/utils.ts | 21 +- src/types/index.ts | 4 +- .../modules/{appConfig.ts => app-config.ts} | 0 ...eCustomConfig.ts => vite-custom-config.ts} | 0 src/utils/app/index.ts | 2 +- ...{prefixCacheKey.ts => prefix-cache-key.ts} | 0 src/utils/basic.ts | 103 +------ src/utils/dom.ts | 2 +- .../{effectDispose.ts => effect-dispose.ts} | 0 src/utils/vue/index.ts | 8 +- .../vue/{renderNode.ts => render-node.ts} | 0 .../vue/{unrefElement.ts => unref-element.ts} | 0 ...hTarget.ts => watch-effect-with-target.ts} | 2 +- src/views/demo/directive/index.tsx | 48 ++- src/views/demo/mock-demo/index.tsx | 6 + src/views/demo/segment/index.tsx | 209 +++++++++++++ src/views/demo/svg-icons/index.tsx | 2 +- src/views/demo/table/index.tsx | 130 +++++++- src/views/error/PageResult/index.tsx | 2 +- vite-helper/cdn-resolve.ts | 26 ++ vite-helper/html-title-plugin.ts | 15 + vite-helper/index.ts | 57 +--- vite-helper/mixin-css.ts | 22 ++ vite-helper/svg-icon-resolve.ts | 32 ++ vite.custom.config.ts | 11 +- vite.plugin.config.ts | 6 +- 165 files changed, 1981 insertions(+), 807 deletions(-) delete mode 100644 __test__/basic/omit.spec.ts delete mode 100644 __test__/basic/pick.spec.ts rename src/__ray-template/valid/{validAppRootPath.ts => valid-app-root-path.ts} (96%) rename src/__ray-template/valid/{validLocal.ts => valid-local.ts} (98%) rename src/app-config/{appConfig.ts => app-config.ts} (100%) rename src/app-config/{designConfig.ts => design-config.ts} (100%) rename src/app-config/{localConfig.ts => local-config.ts} (100%) rename src/app-config/{regexConfig.ts => regex-config.ts} (100%) rename src/app-config/{requestConfig.ts => request-config.ts} (100%) rename src/app-config/{routerConfig.ts => router-config.ts} (100%) rename src/axios/utils/{axiosCopilot.ts => axios-copilot.ts} (100%) create mode 100644 src/components/RSegment/index.ts create mode 100644 src/components/RSegment/src/Segment.tsx create mode 100644 src/components/RSegment/src/constant.ts create mode 100644 src/components/RSegment/src/index.scss create mode 100644 src/components/RSegment/src/props.ts create mode 100644 src/components/RSegment/src/types.ts create mode 100644 src/components/RTable/src/hooks/useCheckedRowKeys.ts create mode 100644 src/directives/modules/ripple/index.scss create mode 100644 src/directives/modules/ripple/index.ts create mode 100644 src/directives/modules/ripple/types.ts create mode 100644 src/directives/modules/ripple/utils.ts rename src/icons/{ => action}/draggable.svg (100%) rename src/icons/{ => action}/fullscreen.svg (100%) rename src/icons/{ => action}/fullscreen_fold.svg (100%) rename src/icons/{ => action}/out.svg (100%) rename src/icons/{ => action}/reload.svg (100%) rename src/icons/{ => action}/search.svg (100%) rename src/icons/{ => action}/setting.svg (100%) rename src/icons/{ => directional}/adjustment.svg (100%) rename src/icons/{ => directional}/close_left.svg (100%) rename src/icons/{ => directional}/close_right.svg (100%) rename src/icons/{ => directional}/expanded.svg (100%) rename src/icons/{ => directional}/left_arrow.svg (100%) rename src/icons/{ => directional}/lock.svg (100%) rename src/icons/{ => directional}/resize_h.svg (100%) rename src/icons/{ => directional}/right_arrow.svg (100%) rename src/icons/{ => directional}/row_end.svg (100%) rename src/icons/{ => directional}/row_head.svg (100%) delete mode 100644 src/icons/doc.svg delete mode 100644 src/icons/empty.svg rename src/icons/{ => logo}/github.svg (100%) rename src/icons/{ => logo}/google.svg (100%) rename src/icons/{ => logo}/login_bg.svg (100%) rename src/icons/{ => logo}/office.svg (100%) rename src/icons/{ => logo}/ray.svg (100%) rename src/icons/{ => logo}/twitter.svg (100%) delete mode 100644 src/icons/qrcode.svg rename src/icons/{ => template}/dark.svg (100%) rename src/icons/{ => template}/light.svg (100%) rename src/icons/{ => tip}/axios.svg (100%) rename src/icons/{ => tip}/close.svg (100%) rename src/icons/{ => tip}/dashboard.svg (100%) rename src/icons/{ => tip}/echart.svg (100%) rename src/icons/{ => tip}/enter.svg (100%) rename src/icons/{ => tip}/error.svg (100%) rename src/icons/{ => tip}/export_excel.svg (100%) rename src/icons/{ => tip}/language.svg (100%) rename src/icons/{ => tip}/menu.svg (100%) rename src/icons/{ => tip}/more.svg (100%) rename src/icons/{ => tip}/mouse.svg (100%) rename src/icons/{ => tip}/other.svg (100%) rename src/icons/{ => tip}/print.svg (100%) rename src/icons/{ => tip}/rely.svg (100%) rename src/icons/{ => tip}/table.svg (100%) create mode 100644 src/layout/components/SiderBar/components/GlobalSearchButton/index.scss rename src/layout/{layoutResize.ts => layout-css-vars.ts} (73%) rename src/locales/utils/{combineI18nMessages.ts => combine-i18n-messages.ts} (100%) rename src/locales/utils/{getAppDefaultLanguage.ts => get-app-default-language.ts} (100%) rename src/locales/utils/{getAppLocalMessages.ts => get-app-local-messages.ts} (100%) rename src/locales/utils/{getNaiveLocales.ts => get-naive-locales.ts} (100%) rename src/router/{appRouteModules.ts => app-route-modules.ts} (78%) delete mode 100644 src/router/modules/demo/doc.ts create mode 100644 src/router/modules/demo/segment.ts rename src/router/modules/{error404.ts => error-404.ts} (100%) create mode 100644 src/router/utils/combine-raw-route-modules.ts rename src/router/utils/{expandRoutes.ts => expand-routes.ts} (100%) create mode 100644 src/router/utils/index.ts create mode 100644 src/router/utils/order-routes.ts create mode 100644 src/router/utils/redirect-router-to-dashboard.ts delete mode 100644 src/router/utils/routerCopilot.ts create mode 100644 src/router/utils/scroll-view-to-top.ts create mode 100644 src/router/utils/setup-router-loading-bar.ts delete mode 100644 src/router/utils/setupHelper.ts create mode 100644 src/router/utils/valid-menu-item-show.ts create mode 100644 src/router/utils/valid-role.ts create mode 100644 src/router/utils/vue-router-register.ts rename src/types/modules/{appConfig.ts => app-config.ts} (100%) rename src/types/modules/{viteCustomConfig.ts => vite-custom-config.ts} (100%) rename src/utils/app/{prefixCacheKey.ts => prefix-cache-key.ts} (100%) rename src/utils/vue/{effectDispose.ts => effect-dispose.ts} (100%) rename src/utils/vue/{renderNode.ts => render-node.ts} (100%) rename src/utils/vue/{unrefElement.ts => unref-element.ts} (100%) rename src/utils/vue/{watchEffectWithTarget.ts => watch-effect-with-target.ts} (94%) create mode 100644 src/views/demo/segment/index.tsx create mode 100644 vite-helper/cdn-resolve.ts create mode 100644 vite-helper/html-title-plugin.ts create mode 100644 vite-helper/mixin-css.ts create mode 100644 vite-helper/svg-icon-resolve.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3765ad51..eb64f47a 100644 --- 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.', + }, + ], }, } diff --git a/.vscode/settings.json b/.vscode/settings.json index f10f324f..95022367 100644 --- 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", diff --git a/CHANGELOG.md b/CHANGELOG.md index 72d3a793..f3e04e9f 100644 --- 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 diff --git a/__test__/app/prefixCacheKey.spec.ts b/__test__/app/prefixCacheKey.spec.ts index f8d172c8..da25829a 100644 --- 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', () => { diff --git a/__test__/basic/omit.spec.ts b/__test__/basic/omit.spec.ts deleted file mode 100644 index 8315a47f..00000000 --- a/__test__/basic/omit.spec.ts +++ /dev/null @@ -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({}) - }) -}) diff --git a/__test__/basic/pick.spec.ts b/__test__/basic/pick.spec.ts deleted file mode 100644 index e489b32d..00000000 --- a/__test__/basic/pick.spec.ts +++ /dev/null @@ -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({}) - }) -}) diff --git a/__test__/hooks/useElementFullscreen.spec.ts b/__test__/hooks/useElementFullscreen.spec.ts index 70ac8fbb..20d9a4e9 100644 --- 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) }) }) diff --git a/__test__/vue/effectDispose.spec.ts b/__test__/vue/effectDispose.spec.ts index 0bdf7266..5db559e2 100644 --- 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', () => { diff --git a/__test__/vue/renderNode.spec.tsx b/__test__/vue/renderNode.spec.tsx index 1e9e9e3f..c7a8ce5c 100644 --- 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', () => { diff --git a/package.json b/package.json index 85632e4a..c5dff8ac 100755 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4604a8d3..ac5798a1 100644 --- 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==} diff --git a/src/__ray-template/index.ts b/src/__ray-template/index.ts index 52587298..c8a558d8 100644 --- 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() +} diff --git a/src/__ray-template/valid/validAppRootPath.ts b/src/__ray-template/valid/valid-app-root-path.ts similarity index 96% rename from src/__ray-template/valid/validAppRootPath.ts rename to src/__ray-template/valid/valid-app-root-path.ts index 6aed8baf..4596efa4 100644 --- a/src/__ray-template/valid/validAppRootPath.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 }, diff --git a/src/__ray-template/valid/validLocal.ts b/src/__ray-template/valid/valid-local.ts similarity index 98% rename from src/__ray-template/valid/validLocal.ts rename to src/__ray-template/valid/valid-local.ts index 13d699fc..7c3fab9a 100644 --- a/src/__ray-template/valid/validLocal.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() diff --git a/src/app-config/appConfig.ts b/src/app-config/app-config.ts similarity index 100% rename from src/app-config/appConfig.ts rename to src/app-config/app-config.ts diff --git a/src/app-config/designConfig.ts b/src/app-config/design-config.ts similarity index 100% rename from src/app-config/designConfig.ts rename to src/app-config/design-config.ts diff --git a/src/app-config/index.ts b/src/app-config/index.ts index 33f42cdf..487de388 100644 --- 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' diff --git a/src/app-config/localConfig.ts b/src/app-config/local-config.ts similarity index 100% rename from src/app-config/localConfig.ts rename to src/app-config/local-config.ts diff --git a/src/app-config/regexConfig.ts b/src/app-config/regex-config.ts similarity index 100% rename from src/app-config/regexConfig.ts rename to src/app-config/regex-config.ts diff --git a/src/app-config/requestConfig.ts b/src/app-config/request-config.ts similarity index 100% rename from src/app-config/requestConfig.ts rename to src/app-config/request-config.ts diff --git a/src/app-config/routerConfig.ts b/src/app-config/router-config.ts similarity index 100% rename from src/app-config/routerConfig.ts rename to src/app-config/router-config.ts diff --git a/src/axios/inject/request/provider.ts b/src/axios/inject/request/provider.ts index 958d59e7..aee6e3d0 100644 --- 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' diff --git a/src/axios/utils/axiosCopilot.ts b/src/axios/utils/axios-copilot.ts similarity index 100% rename from src/axios/utils/axiosCopilot.ts rename to src/axios/utils/axios-copilot.ts diff --git a/src/components/RChart/src/index.tsx b/src/components/RChart/src/index.tsx index 41b48dec..b866e472 100644 --- 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 组件与渲染器 diff --git a/src/components/RChart/src/props.ts b/src/components/RChart/src/props.ts index e8b6409b..9e57445e 100644 --- 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 diff --git a/src/components/RForm/src/Form.tsx b/src/components/RForm/src/Form.tsx index b11ad432..de4af106 100644 --- 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() onMounted(() => { @@ -31,6 +31,8 @@ export default defineComponent({ } }) + expose() + return { formRef, } diff --git a/src/components/RForm/src/props.ts b/src/components/RForm/src/props.ts index d0c835aa..ec1d5065 100644 --- 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 diff --git a/src/components/RMoreDropdown/src/props.ts b/src/components/RMoreDropdown/src/props.ts index 7a2dd3ca..26a6bdb2 100644 --- 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 diff --git a/src/components/RQRCode/src/props.ts b/src/components/RQRCode/src/props.ts index 06a285f8..109ad312 100644 --- 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 void>>, default: null, }, -} +} as const export default props diff --git a/src/components/RSegment/index.ts b/src/components/RSegment/index.ts new file mode 100644 index 00000000..3d4ceb46 --- /dev/null +++ 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 +export type { RSegmentOptions } + +export { RSegment, segmentProps } diff --git a/src/components/RSegment/src/Segment.tsx b/src/components/RSegment/src/Segment.tsx new file mode 100644 index 00000000..2c9a91a2 --- /dev/null +++ b/src/components/RSegment/src/Segment.tsx @@ -0,0 +1,133 @@ +/** + * + * @author 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 ( + + +
{label}
+ + ) + } + + return label +} + +const popoverSegmentTab = (option: RSegmentOptions) => { + if (typeof option.popover === 'string') { + return ( + + {{ + trigger: iconSegmentTab(option), + default: () => option.popover, + }} + + ) + } + + if (isValueType(option.popover, 'Object')) { + const { popover } = option + const { label, ...parameters } = popover + + return ( + + {{ + trigger: iconSegmentTab(option), + default: () => label, + }} + + ) + } +} + +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 ( + + {options.map((curr) => { + return ( + + {{ + ...curr.slots, + }} + + ) + })} + + ) + }, +}) diff --git a/src/components/RSegment/src/constant.ts b/src/components/RSegment/src/constant.ts new file mode 100644 index 00000000..417b86ea --- /dev/null +++ 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', +} diff --git a/src/components/RSegment/src/index.scss b/src/components/RSegment/src/index.scss new file mode 100644 index 00000000..aafcfabe --- /dev/null +++ b/src/components/RSegment/src/index.scss @@ -0,0 +1,3 @@ +.r-segment { + width: var(--r-segment-width); +} diff --git a/src/components/RSegment/src/props.ts b/src/components/RSegment/src/props.ts new file mode 100644 index 00000000..d50e5620 --- /dev/null +++ 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, + default: () => [], + }, + width: { + type: [Number, String] as PropType, + default: 'fitContent', + }, + }, + ...OMIT_TABS_PROPS_KEYS, +) + +export default segmentProps diff --git a/src/components/RSegment/src/types.ts b/src/components/RSegment/src/types.ts new file mode 100644 index 00000000..ba47889d --- /dev/null +++ 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 { + 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 { + options?: RSegmentOptions + width?: RSegmentWidth +} diff --git a/src/components/RTable/index.ts b/src/components/RTable/index.ts index 2c10b725..f8aacc7b 100644 --- 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 -export type { RTableType, UseTableReturn } +export type { RTableType, UseTableReturn, UseCheckedRowKeysReturn } -export { RTable, tableProps, useTable } +export { RTable, tableProps, useTable, useCheckedRowKeys } diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 38212540..ac97d068 100644 --- 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, diff --git a/src/components/RTable/src/components/C.tsx b/src/components/RTable/src/components/C.tsx index 8f680fe8..a3714f75 100644 --- 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[]) } diff --git a/src/components/RTable/src/components/Props.tsx b/src/components/RTable/src/components/Props.tsx index 0dbeba38..7b78fb66 100644 --- 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([]) - 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 ( { + /** + * + * @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 + * + * + */ +const useCheckedRowKeys = ( + data: MaybeRef, + options?: UseCheckedRowKeysOptions, +) => { + const keysRef = ref([]) + const rowsRef = ref([]) + 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 + + 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, + checkedRowKeysBind: bind, + getKeys, + getRows, + clearAll, + clearKey, + selectKey, + }, + ] as const +} + +export type UseCheckedRowKeysReturn = ReturnType + +export default useCheckedRowKeys diff --git a/src/components/RTable/src/props.ts b/src/components/RTable/src/props.ts index 013dd380..76e00958 100644 --- 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 diff --git a/src/components/RTable/src/shared.ts b/src/components/RTable/src/shared.ts index a4aba352..522f8f30 100644 --- 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', + }, +] diff --git a/src/components/RTransitionComponent/src/props.ts b/src/components/RTransitionComponent/src/props.ts index 012a4ff1..394820f9 100644 --- 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 diff --git a/src/components/index.ts b/src/components/index.ts index becb3323..5aefc36e 100644 --- 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' diff --git a/src/dayjs/index.ts b/src/dayjs/index.ts index b34d7cbb..e7ee7af9 100644 --- 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) } diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts index 16a065bd..6ec9d7ba 100644 --- 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 *