diff --git a/.eslintignore b/.eslintignore index a0b7dd4d..d5df1c1c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,6 +13,6 @@ visualizer.html .env.* src/locales/lang .depcheckrc -src/echart-themes/**/*.json +src/app-config/echart-themes/**/*.json *.md src/icons/*.svg \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 73a97f64..3765ad51 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -54,7 +54,9 @@ module.exports = { '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', '@typescript-eslint/consistent-type-imports': [ 'error', - { disallowTypeAnnotations: false }, + { + disallowTypeAnnotations: false, + }, ], // 强制导入类型显示标注 `import type xxx from 'xxx'` '@typescript-eslint/no-empty-interface': [ 'error', @@ -89,7 +91,13 @@ module.exports = { }, ], // 禁止不必要的 `bool` 转换 'no-extra-parens': 0, // 禁止非必要的括号 - semi: ['error', 'never', { beforeStatementContinuationChars: 'always' }], + semi: [ + 'error', + 'never', + { + beforeStatementContinuationChars: 'always', + }, + ], 'no-fallthrough': 1, // 禁止 `switch` 穿透 'no-func-assign': 2, // 禁止重复的函数声明 'no-implicit-coercion': [ diff --git a/.prettierrc.cjs b/.prettierrc.cjs index 23cc440e..e5dc7947 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -16,5 +16,7 @@ module.exports = { insertPragma: false, // 不需要自动在文件开头插入 `@prettier` proseWrap: 'preserve', // 使用默认的折行标准 htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 `html` 要不要折行 - endOfLine: 'lf', // 换行符使用 `lf` + endOfLine: 'lf', // 换行符使用 `lf`, + bracketLine: false, + singleAttributePerLine: false, } diff --git a/.vscode/settings.json b/.vscode/settings.json index e143b663..f10f324f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -37,5 +37,6 @@ "stylelint", "WUJIE", "zlevel" - ] + ], + "peacock.color": "#007fff" } diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ab0d7b8..72d3a793 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,54 @@ # CHANGE LOG +## 4.7.5 + +## Feats + +- 更新 `vite` 版本至 `5.2.8` +- `appConfig` 配置项 + - 新增 `LAYOUT_CONTENT_SPIN_WHEN_ROUTE_CHANGE` 配置项，用于配置路由切换时是否显示内容区域（LayoutContent）加载中状态 + - 新增 `APP_GLOBAL_LOADING` 配置项，用于配置全局加载状态内容 +- `setVariable`, `updateSettingState` 方法，使用 `Object.hasOwn` 方法替代 `Reflect.has` 方法 +- `spin` 包整合至 `app-components` 下 +- `RayLink` 更名为 `AppShareLink` +- `echart-themes` 包整合至 `app-config` 下 +- 优化 `GlobalSearch` 底部样式 +- `error` 包 + - 整合至 `views` 下 + - `PageResult` 组件新增 `goBack` 功能 +- `usePagination` 方法 + - 重写该方法返回值 +- 调整 `MenuTag` 标签页尺寸为 `small` +- `RChart` 组件 + - 新增 `onFinally` 配置项，用于配置图表渲染完成后的回调 + - 新增 `watchOptionsThrottleWait` 配置项，可以配置 `watchOptions` 触发频率，当你需要频繁更新图表数据时，可以配置该项，避免频繁渲染图表 + - 移除 `throttleWait` 配置项 +- `__test__` 包 + - 新增 `qr-code.spec.ts` 单元测试模块 + - 新增 `modal.spec.ts` 单元测试模块 +- 针对 `eslint` 部分规则进行调整 +- 补充代码注释 + +```ts +import { usePagination } from '@/hooks' + +const [ + paginationRef, + { updatePage, updatePageSize, getItemCount, setItemCount }, +] = usePagination( + () => { + // do something... + }, + { + // ...options + }, +) +``` + +## Fixes + +- 修复 `useDayjs.spec` 单测模块测试失败问题 + ## 4.7.4 对于 `RTable`, `RForm`, `RChart` 组件都新增了对应的 `useTable`, `useForm`, `useChart` 方法；让你在业务开发中抛弃注册 `ref` 实例方式调用组件方法。 diff --git a/__test__/components/modal.spec.ts b/__test__/components/modal.spec.ts new file mode 100644 index 00000000..fa4c5c6d --- /dev/null +++ b/__test__/components/modal.spec.ts @@ -0,0 +1,36 @@ +import { RModal } from '../../src/components/RModal/index' +import { mount } from '@vue/test-utils' + +describe('RModal', () => { + it('should execute the onAfterEnter callback', () => { + mount(RModal, { + props: { + show: true, + onAfterEnter: () => { + assert(true) + }, + }, + slots: { + default: h('div', 'Hello World'), + }, + }) + }) + + it('should render a modal', async () => { + const wrapper = mount(RModal, { + props: { + show: true, + }, + slots: { + default: h('div', 'Hello World'), + }, + }) + const classStr = 'n-modal-container' + + const modal = document.body.querySelector(`.${classStr}`) + const modalClassList = Array.from(modal?.classList || []) + + expect(modalClassList.length).not.toBe(0) + expect(modalClassList.includes(classStr)).toBe(true) + }) +}) diff --git a/__test__/components/qr-code.spec.ts b/__test__/components/qr-code.spec.ts new file mode 100644 index 00000000..17c095c8 --- /dev/null +++ b/__test__/components/qr-code.spec.ts @@ -0,0 +1,61 @@ +import { RQRCode } from '../../src/components/RQRCode/index' +import { mount } from '@vue/test-utils' + +describe('RQRCode', () => { + it('should render a qr code', () => { + const wrapper = mount(RQRCode, { + props: { + text: 'hi', + }, + }) + + expect(wrapper.find('img').exists()).toBe(true) + }) + + it('should execute the callback', () => { + let successValue: 1 + let errorValue: -1 + + const _success = vitest.fn() + const _error = vitest.fn() + + _success.mockReturnValue(1) + _error.mockReturnValue(-1) + + mount(RQRCode, { + props: { + text: 'hi', + onSuccess: () => { + successValue = _success() + + expect(successValue).toBe(1) + }, + onError: () => { + errorValue = _error() + + expect(errorValue).toBe(-1) + }, + }, + }) + }) + + it('should execute the onReload function', async () => { + let count = 0 + + const wrapper = mount(RQRCode, { + props: { + text: 'hi', + status: 'error', + onReload: () => { + count = 1 + }, + }, + }) + + const btn = wrapper.find('.n-button') + + btn.trigger('click') + + expect(count).toBe(1) + }) +}) diff --git a/__test__/hooks/useDayjs.spec.ts b/__test__/hooks/useDayjs.spec.ts index 74ff0f80..b06095f0 100644 --- a/__test__/hooks/useDayjs.spec.ts +++ b/__test__/hooks/useDayjs.spec.ts @@ -1,4 +1,5 @@ import { useDayjs } from '../../src/hooks/web/useDayjs' +import dayjs from 'dayjs' describe('useDayjs', () => { const { @@ -37,13 +38,13 @@ describe('useDayjs', () => { formatStartOfDay, formatEndOfDay, } = getStartAndEndOfDay(formatOptions) - const _today = new Date().toLocaleDateString() - const _startOfDay = new Date( - new Date().setHours(0, 0, 0, 0), - ).toLocaleString() - const _endOfDay = new Date( - new Date().setHours(23, 59, 59, 999), - ).toLocaleString() + const _today = dayjs(new Date()).format(formatOptions2.format) + const _startOfDay = dayjs(new Date().setHours(0, 0, 0, 0)).format( + formatOptions.format, + ) + const _endOfDay = dayjs(new Date().setHours(23, 59, 59, 999)).format( + formatOptions.format, + ) expect(format(today, formatOptions2)).toBe(_today) expect(format(startOfDay, formatOptions)).toBe(_startOfDay) diff --git a/__test__/hooks/usePagination.spec.ts b/__test__/hooks/usePagination.spec.ts index e6e91fc0..27bf1614 100644 --- a/__test__/hooks/usePagination.spec.ts +++ b/__test__/hooks/usePagination.spec.ts @@ -8,16 +8,19 @@ describe('usePagination', () => { pageSize: 10, } - const { - getItemCount, - getCallback, - getPage, - getPageSize, - getPagination, - setItemCount, - setPage, - setPageSize, - } = usePagination(() => { + const [ + _, + { + getItemCount, + getCallback, + getPage, + getPageSize, + getPagination, + setItemCount, + setPage, + setPageSize, + }, + ] = usePagination(() => { count++ }, defaultOptions) diff --git a/package.json b/package.json index 9ae8f61f..85632e4a 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.7.4", + "version": "4.7.5", "type": "module", "engines": { "node": "^18.0.0 || >=20.0.0", @@ -96,7 +96,7 @@ "typescript": "^5.2.2", "unplugin-auto-import": "^0.17.5", "unplugin-vue-components": "^0.26.0", - "vite": "^5.2.6", + "vite": "^5.2.8", "vite-bundle-analyzer": "0.8.1", "vite-plugin-cdn2": "1.1.0", "vite-plugin-compression": "^0.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 186c7ac8..4604a8d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,10 +108,10 @@ devDependencies: version: 6.21.0(eslint@8.57.0)(typescript@5.2.2) '@vitejs/plugin-vue': specifier: ^5.0.4 - version: 5.0.4(vite@5.2.6)(vue@3.4.21) + version: 5.0.4(vite@5.2.8)(vue@3.4.21) '@vitejs/plugin-vue-jsx': specifier: ^3.1.0 - version: 3.1.0(vite@5.2.6)(vue@3.4.21) + version: 3.1.0(vite@5.2.8)(vue@3.4.21) '@vitest/ui': specifier: 1.4.0 version: 1.4.0(vitest@1.4.0) @@ -191,8 +191,8 @@ devDependencies: specifier: ^0.26.0 version: 0.26.0(vue@3.4.21) vite: - specifier: ^5.2.6 - version: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + specifier: ^5.2.8 + version: 5.2.8(@types/node@20.5.1)(sass@1.71.1) vite-bundle-analyzer: specifier: 0.8.1 version: 0.8.1 @@ -201,31 +201,31 @@ devDependencies: version: 1.1.0 vite-plugin-compression: specifier: ^0.5.1 - version: 0.5.1(vite@5.2.6) + version: 0.5.1(vite@5.2.8) vite-plugin-ejs: specifier: ^1.7.0 - version: 1.7.0(vite@5.2.6) + version: 1.7.0(vite@5.2.8) vite-plugin-eslint: specifier: 1.8.1 - version: 1.8.1(eslint@8.57.0)(vite@5.2.6) + version: 1.8.1(eslint@8.57.0)(vite@5.2.8) vite-plugin-imp: specifier: ^2.4.0 - version: 2.4.0(vite@5.2.6) + version: 2.4.0(vite@5.2.8) vite-plugin-inspect: specifier: ^0.8.3 - version: 0.8.3(vite@5.2.6) + version: 0.8.3(vite@5.2.8) vite-plugin-mock-dev-server: specifier: 1.4.7 - version: 1.4.7(vite@5.2.6) + version: 1.4.7(vite@5.2.8) vite-plugin-svg-icons: specifier: ^2.0.1 - version: 2.0.1(vite@5.2.6) + version: 2.0.1(vite@5.2.8) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 vite-tsconfig-paths: specifier: 4.3.2 - version: 4.3.2(typescript@5.2.2)(vite@5.2.6) + version: 4.3.2(typescript@5.2.2)(vite@5.2.8) vitest: specifier: 1.4.0 version: 1.4.0(@types/node@20.5.1)(@vitest/ui@1.4.0)(happy-dom@14.3.1)(sass@1.71.1) @@ -1816,7 +1816,7 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.6)(vue@3.4.21): + /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.8)(vue@3.4.21): resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -1826,20 +1826,20 @@ packages: '@babel/core': 7.24.1 '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.24.1) '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.1) - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) vue: 3.4.21(typescript@5.2.2) transitivePeerDependencies: - supports-color dev: true - /@vitejs/plugin-vue@5.0.4(vite@5.2.6)(vue@3.4.21): + /@vitejs/plugin-vue@5.0.4(vite@5.2.8)(vue@3.4.21): resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==} engines: {node: ^18.0.0 || >=20.0.0} peerDependencies: vite: ^5.0.0 vue: ^3.2.25 dependencies: - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) vue: 3.4.21(typescript@5.2.2) dev: true @@ -7886,7 +7886,7 @@ packages: debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.0 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) transitivePeerDependencies: - '@types/node' - less @@ -7912,7 +7912,7 @@ packages: - supports-color dev: true - /vite-plugin-compression@0.5.1(vite@5.2.6): + /vite-plugin-compression@0.5.1(vite@5.2.8): resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==} peerDependencies: vite: '>=2.0.0' @@ -7920,21 +7920,21 @@ packages: chalk: 4.1.2 debug: 4.3.4 fs-extra: 10.1.0 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) transitivePeerDependencies: - supports-color dev: true - /vite-plugin-ejs@1.7.0(vite@5.2.6): + /vite-plugin-ejs@1.7.0(vite@5.2.8): resolution: {integrity: sha512-JNP3zQDC4mSbfoJ3G73s5mmZITD8NGjUmLkq4swxyahy/W0xuokK9U9IJGXw7KCggq6UucT6hJ0p+tQrNtqTZw==} peerDependencies: vite: '>=5.0.0' dependencies: ejs: 3.1.9 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) dev: true - /vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.6): + /vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.8): resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==} peerDependencies: eslint: '>=7' @@ -7944,10 +7944,10 @@ packages: '@types/eslint': 8.56.6 eslint: 8.57.0 rollup: 2.79.1 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) dev: true - /vite-plugin-imp@2.4.0(vite@5.2.6): + /vite-plugin-imp@2.4.0(vite@5.2.8): resolution: {integrity: sha512-L/6/nvOw+MyNh4UxAlCZHsmKd5MitmHamqqAWB15sbUgVIEz/OQ8jpKr6kkQU0eA/AIe8fkCVbQBlP81ajrqWg==} peerDependencies: vite: '>= 2.0.0-beta.5' @@ -7959,12 +7959,12 @@ packages: chalk: 4.1.2 param-case: 3.0.4 pascal-case: 3.1.2 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) transitivePeerDependencies: - supports-color dev: true - /vite-plugin-inspect@0.8.3(vite@5.2.6): + /vite-plugin-inspect@0.8.3(vite@5.2.8): resolution: {integrity: sha512-SBVzOIdP/kwe6hjkt7LSW4D0+REqqe58AumcnCfRNw4Kt3mbS9pEBkch+nupu2PBxv2tQi69EQHQ1ZA1vgB/Og==} engines: {node: '>=14'} peerDependencies: @@ -7983,13 +7983,13 @@ packages: perfect-debounce: 1.0.0 picocolors: 1.0.0 sirv: 2.0.4 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) transitivePeerDependencies: - rollup - supports-color dev: true - /vite-plugin-mock-dev-server@1.4.7(vite@5.2.6): + /vite-plugin-mock-dev-server@1.4.7(vite@5.2.8): resolution: {integrity: sha512-vGNW423fkmMibf0BfYL89n2n4tNKDt51d6Ee14gC1LlLiJAp6jabJBPsjWgU+uMgtp68+1uBb5F1qTlqdAhnoQ==} engines: {node: ^16 || ^18 || >= 20} peerDependencies: @@ -8011,7 +8011,7 @@ packages: mime-types: 2.1.35 path-to-regexp: 6.2.1 picocolors: 1.0.0 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) ws: 8.16.0 transitivePeerDependencies: - bufferutil @@ -8020,7 +8020,7 @@ packages: - utf-8-validate dev: true - /vite-plugin-svg-icons@2.0.1(vite@5.2.6): + /vite-plugin-svg-icons@2.0.1(vite@5.2.8): resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==} peerDependencies: vite: '>=2.0.0' @@ -8033,7 +8033,7 @@ packages: pathe: 0.2.0 svg-baker: 1.7.0 svgo: 2.8.0 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) transitivePeerDependencies: - supports-color dev: true @@ -8045,7 +8045,7 @@ packages: svgo: 3.1.0 dev: true - /vite-tsconfig-paths@4.3.2(typescript@5.2.2)(vite@5.2.6): + /vite-tsconfig-paths@4.3.2(typescript@5.2.2)(vite@5.2.8): resolution: {integrity: sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==} peerDependencies: vite: '*' @@ -8056,14 +8056,14 @@ packages: debug: 4.3.4 globrex: 0.1.2 tsconfck: 3.0.3(typescript@5.2.2) - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) transitivePeerDependencies: - supports-color - typescript dev: true - /vite@5.2.6(@types/node@20.5.1)(sass@1.71.1): - resolution: {integrity: sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==} + /vite@5.2.8(@types/node@20.5.1)(sass@1.71.1): + resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -8144,7 +8144,7 @@ packages: strip-literal: 2.0.0 tinybench: 2.6.0 tinypool: 0.8.2 - vite: 5.2.6(@types/node@20.5.1)(sass@1.71.1) + vite: 5.2.8(@types/node@20.5.1)(sass@1.71.1) vite-node: 1.4.0(@types/node@20.5.1)(sass@1.71.1) why-is-node-running: 2.2.2 transitivePeerDependencies: diff --git a/src/App.tsx b/src/App.tsx index e9271308..15eeba68 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,9 +3,11 @@ import AppNaiveGlobalProvider from '@/app-components/provider/AppNaiveGlobalProv import AppStyleProvider from '@/app-components/provider/AppStyleProvider' import AppLockScreen from '@/app-components/app/AppLockScreen' import AppWatermarkProvider from '@/app-components/provider/AppWatermarkProvider' -import AppGlobalSpin from '@/spin' +import AppGlobalSpin from '@/app-components/app/AppGlobalSpin' import AppVersionProvider from '@/app-components/provider/AppVersionProvider' +import { APP_GLOBAL_LOADING } from '@/app-config' + export default defineComponent({ name: 'App', render() { @@ -18,7 +20,7 @@ export default defineComponent({ {{ default: () => , - description: () => 'loading...', + description: () => APP_GLOBAL_LOADING, }} diff --git a/src/spin/index.tsx b/src/app-components/app/AppGlobalSpin/index.tsx similarity index 96% rename from src/spin/index.tsx rename to src/app-components/app/AppGlobalSpin/index.tsx index baa4e6a1..4ceb65c5 100644 --- a/src/spin/index.tsx +++ b/src/app-components/app/AppGlobalSpin/index.tsx @@ -54,7 +54,9 @@ const GlobalSpin = defineComponent({ show={this.spinValue} themeOverrides={this.overrides} > - {{ ...this.$slots }} + {{ + ...this.$slots, + }} ) }, diff --git a/src/app-components/app/AppLockScreen/index.tsx b/src/app-components/app/AppLockScreen/index.tsx index d353aa76..8394700c 100644 --- a/src/app-components/app/AppLockScreen/index.tsx +++ b/src/app-components/app/AppLockScreen/index.tsx @@ -17,7 +17,7 @@ import './index.scss' -import { NModal } from 'naive-ui' +import { RModal } from '@/components' import LockScreen from './components/LockScreen' import UnlockScreen from './components/UnlockScreen' @@ -46,7 +46,7 @@ const AppLockScreen = defineComponent({ const { getLockAppScreen } = this return ( - {!getLockAppScreen() ? : } - + ) }, }) diff --git a/src/app-components/app/RayLink/index.tsx b/src/app-components/app/AppShareLink/index.tsx similarity index 83% rename from src/app-components/app/RayLink/index.tsx rename to src/app-components/app/AppShareLink/index.tsx index 06969a26..83d11cbb 100644 --- a/src/app-components/app/RayLink/index.tsx +++ b/src/app-components/app/AppShareLink/index.tsx @@ -13,21 +13,9 @@ interface AvatarOptions { } export default defineComponent({ - name: 'RayLink', + name: 'AppShareLink', setup() { const avatarOptions: AvatarOptions[] = [ - // { - // key: 'yunhome', - // src: 'https://yunkuangao.me/', - // tooltip: '云之家', - // icon: 'https://r2chevereto.yka.moe/avatar.jpeg', - // }, - // { - // key: 'yun-cloud-images', - // src: 'https://yunkuangao.com/', - // tooltip: '云图床', - // icon: 'https://r2chevereto.yka.moe/avatar.jpeg', - // }, { key: 'ray-js-note', src: 'https://note.youdao.com/s/ObWEe2BB', diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index a2c7b8a3..90a96808 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -14,6 +14,21 @@ import type { LayoutSideBarLogo, PreloadingConfig } from '@/types' import type { AppMenuConfig, AppKeepAlive } from '@/types' +/** + * + * 是否启用路由切换 spin 加载； + * 如果启用该配置项，啧会在路由更新时触发内容区域的加载状态，直到路由加载完成。 + * + * 在 v4.7.5 版本后，默认关闭了该配置项。 + */ +export const LAYOUT_CONTENT_SPIN_WHEN_ROUTE_CHANGE = false + +/** + * + * 全局 Spin 加载内容 + */ +export const APP_GLOBAL_LOADING = 'loading' + /** * * 系统缓存 diff --git a/src/echart-themes/README.md b/src/app-config/echart-themes/README.md similarity index 82% rename from src/echart-themes/README.md rename to src/app-config/echart-themes/README.md index 9143a1e0..7bb85866 100644 --- a/src/echart-themes/README.md +++ b/src/app-config/echart-themes/README.md @@ -7,7 +7,7 @@ 1. 配置、选择主题 2. 点击下载主题 3. 选择 json 类型，然后复制 -4. 在 src/echart-themes 包中创建对应的 json 文件，文件名为主题名称 +4. 在 src/app-config/echart-themes 包中创建对应的 json 文件，文件名为主题名称 ## 注意 diff --git a/src/echart-themes/macarons/macarons-dark.json b/src/app-config/echart-themes/macarons/macarons-dark.json similarity index 100% rename from src/echart-themes/macarons/macarons-dark.json rename to src/app-config/echart-themes/macarons/macarons-dark.json diff --git a/src/echart-themes/macarons/macarons.json b/src/app-config/echart-themes/macarons/macarons.json similarity index 100% rename from src/echart-themes/macarons/macarons.json rename to src/app-config/echart-themes/macarons/macarons.json diff --git a/src/components/RChart/index.ts b/src/components/RChart/index.ts index 5882e192..37cff17d 100644 --- a/src/components/RChart/index.ts +++ b/src/components/RChart/index.ts @@ -1,10 +1,10 @@ import RChart from './src' import chartProps from './src/props' -import useChart from './hooks/useChart' +import useChart from './src/hooks/useChart' import type { ExtractPublicPropTypes } from 'vue' import type * as RChartType from './src/types' -import type { UseChartReturn } from './hooks/useChart' +import type { UseChartReturn } from './src/hooks/useChart' export type ChartProps = ExtractPublicPropTypes export type { RChartType, UseChartReturn } diff --git a/src/components/RChart/hooks/useChart.ts b/src/components/RChart/src/hooks/useChart.ts similarity index 100% rename from src/components/RChart/hooks/useChart.ts rename to src/components/RChart/src/hooks/useChart.ts diff --git a/src/components/RChart/src/index.tsx b/src/components/RChart/src/index.tsx index ad3b444f..41b48dec 100644 --- a/src/components/RChart/src/index.tsx +++ b/src/components/RChart/src/index.tsx @@ -28,7 +28,11 @@ import { throttle } from 'lodash-es' import { completeSize, downloadBase64File, call, renderNode } from '@/utils' import { setupChartTheme } from './utils' import { APP_THEME } from '@/app-config' -import { useResizeObserver, useIntersectionObserver } from '@vueuse/core' +import { + useResizeObserver, + useIntersectionObserver, + watchThrottled, +} from '@vueuse/core' import { RMoreDropdown } from '@/components' import { useSettingGetters } from '@/store' @@ -94,7 +98,7 @@ export default defineComponent({ let resizeThrottleReturn: DebouncedFunc | null // resize 防抖方法实例 let resizeObserverReturn: UseResizeObserverReturn | null // resize observer 实例 const { echartTheme } = APP_THEME // 当前配置主题 - let watchCallback: WatchStopHandle | null // watch props 回调 + let watchThrottledCallback: WatchStopHandle | null // watch props 回调 let echartInst: ECharts | null // 无代理响应式代理缓存 echart inst const moreDropDownOptions = computed(() => [ { @@ -259,7 +263,13 @@ export default defineComponent({ call(onError) } - console.error('[RChart]: render error: ', e) + throw new Error(`[RChart render error]: ${e}`) + } finally { + const { onFinally } = props + + if (onFinally) { + call(onFinally) + } } } @@ -321,7 +331,7 @@ export default defineComponent({ // 注册事件 if (props.autoResize) { if (!resizeThrottleReturn) { - resizeThrottleReturn = throttle(resizeChart, props.throttleWait) + resizeThrottleReturn = throttle(resizeChart, 500) } /** @@ -417,7 +427,7 @@ export default defineComponent({ watchEffect(() => { /** 监听 options 变化 */ if (props.watchOptions) { - watchCallback = watch( + watchThrottledCallback = watchThrottled( () => props.options, (ndata) => { // 重新组合 options @@ -433,10 +443,11 @@ export default defineComponent({ { // 深度监听 options deep: true, + throttle: props.watchOptionsThrottleWait, }, ) } else { - watchCallback?.() + watchThrottledCallback?.() } // 监听 loading 变化 @@ -467,7 +478,7 @@ export default defineComponent({ }) onBeforeUnmount(() => { unmount() - watchCallback?.() + watchThrottledCallback?.() }) return { diff --git a/src/components/RChart/src/props.ts b/src/components/RChart/src/props.ts index fc41f37f..e8b6409b 100644 --- a/src/components/RChart/src/props.ts +++ b/src/components/RChart/src/props.ts @@ -233,6 +233,15 @@ const props = { type: [Function, Array] as PropType void>>, default: null, }, + /** + * + * @description + * chart 渲染结束后的回调函数，不论是否成功都会执行。 + */ + onFinally: { + type: [Function, Array] as PropType void>>, + default: null, + }, /** * * @description @@ -320,11 +329,14 @@ const props = { /** * * @description - * 节流等待时间。 + * 是否开启 watchThrottle 监听 options 配置项更新。 + * 该配置项适合在需要频繁更新 chart options 的场景下使用。 + * + * 但是该配置项需要开启 watchOptions 才能生效。 * * @default 500 */ - throttleWait: { + watchOptionsThrottleWait: { type: Number, default: 500, }, diff --git a/src/components/RChart/src/utils.ts b/src/components/RChart/src/utils.ts index a84c852d..0c8e6fe1 100644 --- a/src/components/RChart/src/utils.ts +++ b/src/components/RChart/src/utils.ts @@ -33,7 +33,7 @@ import type { export const setupChartTheme = () => { // 获取所有主题 const themeRawModules: Record = - import.meta.glob('@/echart-themes/**/*.json', { + import.meta.glob('@/app-config/echart-themes/**/*.json', { eager: true, }) const regex = /\/([^/]+)\.json$/ diff --git a/src/components/RIcon/src/index.tsx b/src/components/RIcon/src/index.tsx index a4ef236f..549a08a0 100644 --- a/src/components/RIcon/src/index.tsx +++ b/src/components/RIcon/src/index.tsx @@ -56,9 +56,17 @@ export default defineComponent({ onClick={this.iconClick.bind(this)} > - + ) diff --git a/src/components/RModal/src/Modal.tsx b/src/components/RModal/src/Modal.tsx index b131f46b..ea27e152 100644 --- a/src/components/RModal/src/Modal.tsx +++ b/src/components/RModal/src/Modal.tsx @@ -110,7 +110,9 @@ export default defineComponent({ {...$otherProps} {...$attrs} > - {{ ...$slots }} + {{ + ...$slots, + }} ) }, diff --git a/src/components/RModal/src/hooks/useModal.ts b/src/components/RModal/src/hooks/useModal.ts index 7d503da4..40ae3fa6 100644 --- a/src/components/RModal/src/hooks/useModal.ts +++ b/src/components/RModal/src/hooks/useModal.ts @@ -28,6 +28,7 @@ const useModal = () => { return } + // 是否启用拖拽 if (dad) { setupInteract(modalElement, { preset, @@ -36,6 +37,7 @@ const useModal = () => { }) } + // preset 为 card，fullscreen 为 true 时，最大化 modal if (fullscreen && preset === 'card') { setStyle(modalElement, { width: '100%', diff --git a/src/components/RQRCode/src/index.scss b/src/components/RQRCode/src/index.scss index d2faefad..8ad58338 100644 --- a/src/components/RQRCode/src/index.scss +++ b/src/components/RQRCode/src/index.scss @@ -28,10 +28,10 @@ .ray-qrcode { &.ray-qrcode--loading img { - filter: blur(4px); + filter: blur(5px); } &.ray-qrcode--error img { - filter: blur(4px); + filter: blur(5px); } } diff --git a/src/components/RQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx index e1a06ec1..0b498dfd 100644 --- a/src/components/RQRCode/src/index.tsx +++ b/src/components/RQRCode/src/index.tsx @@ -167,7 +167,7 @@ export default defineComponent({ return (
- + {status === 'error' ? (
diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 22ef8728..38212540 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -251,13 +251,17 @@ export default defineComponent({ {{ default: () => ( <> (), props) const { getKeepAliveInclude } = useKeepAliveGetters() const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE -./types diff --git a/src/directives/modules/ellipsis/index.ts b/src/directives/modules/ellipsis/index.ts index 3c624f69..8e6366d0 100644 --- a/src/directives/modules/ellipsis/index.ts +++ b/src/directives/modules/ellipsis/index.ts @@ -36,13 +36,15 @@ const bindEllipsis = (el: HTMLElement, options: EllipsisBindingValue) => { const { line = 1, type = 'block', width, popoverText } = options if (width === void 0 || width === null) { - console.error(`[v-ellipsis]: Expected width, but got ${width}!`) + console.error( + `[v-ellipsis]: Expected width is string or number, but got typeof ${width}!`, + ) return } - if (popoverText) { - el.setAttribute('title', el.textContent || '') + if (popoverText && el.textContent) { + el.setAttribute('title', el.textContent) } if (type === 'line') { diff --git a/src/error/PageResult/index.tsx b/src/error/PageResult/index.tsx deleted file mode 100644 index 66b9df3f..00000000 --- a/src/error/PageResult/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-06-02 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -/** - * - * 错误页面 - * - * 基于 NResult 组件实现, 继承该组件所有 props 与 slots - * 可以当作一个组件使用, 也可以当作一个页面调用 - */ - -import './index.scss' - -import { NResult, NButton } from 'naive-ui' - -import { redirectRouterToDashboard } from '@/router/utils/routerCopilot' -import { resultProps } from 'naive-ui' - -const PageResult = defineComponent({ - name: 'PageResult', - props: { - ...resultProps, - }, - render() { - return ( -
- - {{ - ...this.$slots, - footer: () => ( - - 返回首页 - - ), - }} - -
- ) - }, -}) - -export default PageResult diff --git a/src/error/index.ts b/src/error/index.ts deleted file mode 100644 index 1b74c9c1..00000000 --- a/src/error/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import PageResult from './PageResult/index' - -export default PageResult diff --git a/src/global-variable/variable.ts b/src/global-variable/variable.ts index 48e3d2f6..4e8890e5 100644 --- a/src/global-variable/variable.ts +++ b/src/global-variable/variable.ts @@ -65,9 +65,11 @@ export function setVariable( value: VariableState[T], cb?: FC, ) { - variableState[key] = value + if (Object.hasOwn(variableState, key)) { + variableState[key] = value - cb?.() + cb?.() + } } /** diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts index 0d3ed1d1..374b15ca 100644 --- a/src/hooks/web/useI18n.ts +++ b/src/hooks/web/useI18n.ts @@ -88,8 +88,11 @@ export const useI18n = (namespace?: string) => { * * @description * 该方法为纯函数，无任何副作用，单纯为了配合 i18n-ally 插件使用。 - * * 该插件识别 t 方法包裹 path 进行提示文案内容。 + * + * 不过在使用的时候必须按照示例导入，避免 vitest 抛出奇奇怪怪的错误。 + * @example + * import { t } from '@/hooks/web/useI18n' */ export const t = (key: string) => key diff --git a/src/hooks/web/usePagination.ts b/src/hooks/web/usePagination.ts index 9ae190a4..db3bf4de 100644 --- a/src/hooks/web/usePagination.ts +++ b/src/hooks/web/usePagination.ts @@ -146,18 +146,21 @@ export const usePagination = ( */ const getCallback = callback - return { - updatePage, - updatePageSize, - getItemCount, - setItemCount, - getPage, - setPage, - getPageSize, - setPageSize, - getPagination, - getCallback, - } + return [ + paginationRef as PaginationProps, + { + updatePage, + updatePageSize, + getItemCount, + setItemCount, + getPage, + setPage, + getPageSize, + setPageSize, + getPagination, + getCallback, + }, + ] as const } export type UsePaginationReturn = ReturnType diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index b5b719dd..4f72fc5c 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -509,6 +509,7 @@ export default defineComponent({ onMouseleave: menuTagMouseleave.bind(this, curr), [MENU_TAG_DATA]: curr.path, }} + size="small" > {{ default: () => ( diff --git a/src/layout/components/SiderBar/components/GlobalSearch/index.scss b/src/layout/components/SiderBar/components/GlobalSearch/index.scss index a5a6e1f3..5e4d33fe 100644 --- a/src/layout/components/SiderBar/components/GlobalSearch/index.scss +++ b/src/layout/components/SiderBar/components/GlobalSearch/index.scss @@ -19,7 +19,7 @@ $globalSearchWidth: 650px; } & .n-card__action { - padding: 16px 12px 12px 12px; + padding: 8px 12px; } & .n-card__content, diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index 7351cf20..ae4b1458 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -24,6 +24,7 @@ import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCanc import { getVariableToRefs } from '@/global-variable' import { useSettingGetters } from '@/store' import { useMaximize } from '@/hooks' +import { LAYOUT_CONTENT_SPIN_WHEN_ROUTE_CHANGE } from '@/app-config' import type { GlobalThemeOverrides } from 'naive-ui' @@ -52,7 +53,9 @@ export default defineComponent({ }) } - setupLayoutContentSpin() + if (LAYOUT_CONTENT_SPIN_WHEN_ROUTE_CHANGE) { + setupLayoutContentSpin() + } return { globalMainLayoutLoad, diff --git a/src/router/modules/error404.ts b/src/router/modules/error404.ts index f34d05e9..5a18080c 100644 --- a/src/router/modules/error404.ts +++ b/src/router/modules/error404.ts @@ -6,7 +6,7 @@ import type { AppRouteRecordRaw } from '@/router/types' const error404: AppRouteRecordRaw = { path: '/:catchAll(.*)', name: 'ErrorPage', - component: () => import('@/error/views/Error404/index'), + component: () => import('@/views/error/views/Error404'), meta: { i18nKey: t('menu.Error'), icon: 'error', diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index a9fac584..ccafd055 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -103,7 +103,7 @@ export const piniaSettingStore = defineStore( value: V[T], cb?: C, ) => { - if (Reflect.has(settingState, key)) { + if (Object.hasOwn(settingState, key)) { settingState[key] = value } diff --git a/src/utils/app/index.ts b/src/utils/app/index.ts index 36779e49..115b82c4 100644 --- a/src/utils/app/index.ts +++ b/src/utils/app/index.ts @@ -1,4 +1 @@ -// export * from './prefixCacheKey' -import { prefixCacheKey } from './prefixCacheKey' - -export { prefixCacheKey } +export * from './prefixCacheKey' diff --git a/src/utils/basic.ts b/src/utils/basic.ts index 6b183787..a5d3446e 100644 --- a/src/utils/basic.ts +++ b/src/utils/basic.ts @@ -293,7 +293,7 @@ export function pick( const result = [...keys, ...rest].reduce( (pre, curr) => { - if (Reflect.has(targetObject, curr)) { + if (Object.hasOwn(targetObject, curr)) { pre[curr] = targetObject[curr] } diff --git a/src/utils/index.ts b/src/utils/index.ts index 93e62208..45970f13 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,98 +1,7 @@ -// export * from './basic' -// export * from './cache' -// export * from './dom' -// export * from './element' -// export * from './precision' -// export * from './vue' -// export * from './app' - -import { - getAppEnvironment, - arrayBufferToBase64Image, - downloadBase64File, - isValueType, - uuid, - downloadAnyFile, - omit, - pick, - isAsyncFunction, - isPromise, - callWithErrorHandling, - callWithAsyncErrorHandling, - detectOperatingSystem, - equalRouterPath, -} from './basic' -import { hasStorage, getStorage, setStorage, removeStorage } from './cache' -import { printDom } from './dom' -import { - setClass, - removeClass, - hasClass, - autoPrefixStyle, - setStyle, - removeStyle, - colorToRgba, - queryElements, - completeSize, -} from './element' -import { - isCurrency, - format, - add, - subtract, - multiply, - divide, - distribute, -} from './precision' -import { - call, - unrefElement, - renderNode, - effectDispose, - watchEffectWithTarget, -} from './vue' -import { prefixCacheKey } from './app' - -export { - getAppEnvironment, - arrayBufferToBase64Image, - downloadBase64File, - isValueType, - uuid, - downloadAnyFile, - omit, - pick, - isAsyncFunction, - isPromise, - callWithErrorHandling, - callWithAsyncErrorHandling, - detectOperatingSystem, - equalRouterPath, - hasStorage, - getStorage, - setStorage, - removeStorage, - printDom, - setClass, - removeClass, - hasClass, - autoPrefixStyle, - setStyle, - removeStyle, - colorToRgba, - queryElements, - completeSize, - isCurrency, - format, - add, - subtract, - multiply, - divide, - distribute, - call, - unrefElement, - renderNode, - effectDispose, - watchEffectWithTarget, - prefixCacheKey, -} +export * from './basic' +export * from './cache' +export * from './dom' +export * from './element' +export * from './precision' +export * from './vue' +export * from './app' diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index 9de03fae..9698cfc6 100644 --- a/src/views/dashboard/index.tsx +++ b/src/views/dashboard/index.tsx @@ -10,7 +10,7 @@ import { NH6, } from 'naive-ui' import { RIcon } from '@/components' -import RayLink from '@/app-components/app/RayLink' +import AppShareLink from '@/app-components/app/AppShareLink' const Dashboard = defineComponent({ name: 'RDashboard', @@ -123,7 +123,7 @@ const Dashboard = defineComponent({ - + ) diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx index 196818f6..52c87def 100644 --- a/src/views/demo/echart/index.tsx +++ b/src/views/demo/echart/index.tsx @@ -1,6 +1,6 @@ import './index.scss' -import { NCard, NSwitch, NFlex, NH2, NButton } from 'naive-ui' +import { NCard, NSwitch, NFlex, NButton } from 'naive-ui' import { RChart } from '@/components' import { useChart } from '@/components' @@ -78,11 +78,26 @@ const Echart = defineComponent({ type: 'pie', radius: '50%', data: [ - { value: 1048, name: 'Search Engine' }, - { value: 735, name: 'Direct' }, - { value: 580, name: 'Email' }, - { value: 484, name: 'Union Ads' }, - { value: 300, name: 'Video Ads' }, + { + value: 1048, + name: 'Search Engine', + }, + { + value: 735, + name: 'Direct', + }, + { + value: 580, + name: 'Email', + }, + { + value: 484, + name: 'Union Ads', + }, + { + value: 300, + name: 'Video Ads', + }, ], emphasis: { itemStyle: { @@ -195,7 +210,7 @@ const Echart = defineComponent({ if (isDispose()) { render() } else { - window.$message.warning('图表已经渲染') + window.$message.warning('不可以重复渲染图表~') } } @@ -239,36 +254,10 @@ const Echart = defineComponent({ return (
-
    -
  • -

    1. 当未获取到宽高时，组件会默认以 200*200 尺寸填充。

    -
    • -
  • -

    - 2. 默认启用 autoChangeTheme，自动监听模板主题变化，如果设置为 - false 则为 APP_THEME.echartTheme 配置项为渲染结果（RayTemplate - 独有） -

    -
    • -
  • -

    3. 默认启用 watchOptions，自动监听配置项变化

    -
    • -
  • -

    4. 默认启用 nextTick，强制在下一队列渲染图标内容

    -
    • -
  • -

    5. 配置 setChartOptions 属性，可以定制化合并模式

    -
    • -
  • -

    - 6. 默认启用 intersectionObserver - 属性，只有元素在可见范围才会渲染图表，可以滚动查看效果 -

    -
    • -
  • -

    7. useChart 方法

    -
    • -
+

该组件基于 ECharts, Vueuse 封装。默认做了最佳的优化封装实践。

+

+ 开箱即用的优化策略：节流更新图表、异步渲染、自动销毁、贴花、加载、主题、视窗区域渲染、自动更新尺寸等高级特性。 +

@@ -297,7 +286,7 @@ const Echart = defineComponent({ if (isDispose2()) { render2() } else { - window.$message.warning('图表已经渲染') + window.$message.warning('不可以重复渲染图表~') } }} > diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx index ef53550c..108c6942 100644 --- a/src/views/demo/mock-demo/index.tsx +++ b/src/views/demo/mock-demo/index.tsx @@ -88,22 +88,16 @@ const MockDemo = defineComponent({ email: null, }) - const { - getPagination, - getPage, - getPageSize, - setItemCount, - getCallback, - setPage, - setPageSize, - } = usePagination(() => { + const [ + paginationRef, + { getPage, getPageSize, setItemCount, getCallback, setPage, setPageSize }, + ] = usePagination(() => { personFetchRun({ page: getPage(), pageSize: getPageSize(), email: condition.email, }) }) - const paginationRef = getPagination() const { data: personData, loading: personLoading, @@ -126,7 +120,6 @@ const MockDemo = defineComponent({ return { personData, personLoading, - getPagination, columns, ...toRefs(condition), getCallback, diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx index 36b45a9d..6a0fd26d 100644 --- a/src/views/demo/table/index.tsx +++ b/src/views/demo/table/index.tsx @@ -105,7 +105,10 @@ const TableView = defineComponent({ }, ] const actionColumns = ref>( - [...baseColumns].map((curr) => ({ ...curr, width: 400 })), + [...baseColumns].map((curr) => ({ + ...curr, + width: 400, + })), ) const tableData = ref([]) const tableMenuOptions = [ diff --git a/src/error/PageResult/index.scss b/src/views/error/PageResult/index.scss similarity index 100% rename from src/error/PageResult/index.scss rename to src/views/error/PageResult/index.scss diff --git a/src/views/error/PageResult/index.tsx b/src/views/error/PageResult/index.tsx new file mode 100644 index 00000000..d8aec7f9 --- /dev/null +++ b/src/views/error/PageResult/index.tsx @@ -0,0 +1,83 @@ +/** + * + * @author Ray + * + * @date 2023-06-02 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 错误页面 + * + * 基于 NResult 组件实现, 继承该组件所有 props 与 slots + * 可以当作一个组件使用, 也可以当作一个页面调用 + */ + +import './index.scss' + +import { NResult, NButton, NFlex } from 'naive-ui' + +import { redirectRouterToDashboard } from '@/router/utils/routerCopilot' +import { resultProps } from 'naive-ui' +import { getStorage } from '@/utils' +import { useVueRouter } from '@/hooks' +import { APP_CATCH_KEY } from '@/app-config' + +const PageResult = defineComponent({ + name: 'PageResult', + props: { + ...resultProps, + }, + setup() { + const { router } = useVueRouter() + + const goBack = () => { + const { appMenuKey } = APP_CATCH_KEY + const key = getStorage(appMenuKey, 'sessionStorage', { + defaultValue: '', + }) + + if (key) { + router.replace(key) + } + } + + return { + goBack, + } + }, + render() { + const { goBack } = this + + return ( +
+ + {{ + ...this.$slots, + footer: () => ( + + + 返回首页 + + + 返回上一页面 + + + ), + }} + +
+ ) + }, +}) + +export default PageResult diff --git a/src/error/README.md b/src/views/error/README.md similarity index 100% rename from src/error/README.md rename to src/views/error/README.md diff --git a/src/views/error/index.ts b/src/views/error/index.ts new file mode 100644 index 00000000..1d6751ab --- /dev/null +++ b/src/views/error/index.ts @@ -0,0 +1,3 @@ +import PageResult from './PageResult' + +export default PageResult diff --git a/src/error/views/Error404/index.tsx b/src/views/error/views/Error404/index.tsx similarity index 90% rename from src/error/views/Error404/index.tsx rename to src/views/error/views/Error404/index.tsx index ccba33c3..d1559c67 100644 --- a/src/error/views/Error404/index.tsx +++ b/src/views/error/views/Error404/index.tsx @@ -9,7 +9,7 @@ * @remark 今天也是元气满满撸代码的一天 */ -import PageResult from '@/error' +import PageResult from '@/views/error' const ErrorPage404 = defineComponent({ name: 'ErrorPage404', diff --git a/src/error/views/Error500/index.tsx b/src/views/error/views/Error500/index.tsx similarity index 90% rename from src/error/views/Error500/index.tsx rename to src/views/error/views/Error500/index.tsx index 2c9e6ab9..475ae7a5 100644 --- a/src/error/views/Error500/index.tsx +++ b/src/views/error/views/Error500/index.tsx @@ -9,7 +9,7 @@ * @remark 今天也是元气满满撸代码的一天 */ -import PageResult from '@/error' +import PageResult from '@/views/error' const ErrorPage500 = defineComponent({ name: 'ErrorPage500', diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index a628920b..693f8ab1 100644 --- a/src/views/login/index.tsx +++ b/src/views/login/index.tsx @@ -16,7 +16,7 @@ import Register from './components/Register' import QRCodeSigning from './components/QRCodeSigning' import SSOSigning from './components/SSOSigning' import { RIcon } from '@/components' -import RayLink from '@/app-components/app/RayLink' +import AppShareLink from '@/app-components/app/AppShareLink' import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch' import { LOCAL_OPTIONS } from '@/app-config' @@ -140,7 +140,7 @@ const Login = defineComponent({ 其他登陆方式 友情链接 - + diff --git a/vite.config.ts b/vite.config.ts index d6d2c109..83e6ee53 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -19,7 +19,12 @@ export default defineConfig(({ mode }) => { } = config const __APP_CFG__ = { - pkg: { dependencies, devDependencies, name, version }, + pkg: { + dependencies, + devDependencies, + name, + version, + }, layout: { copyright, sideBarLogo,