version: v4.7.5

.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

.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': [

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

.vscode/settings.json

@@ -37,5 +37,6 @@
     "stylelint",
     "WUJIE",
     "zlevel"
-  ]
+  ],
+  "peacock.color": "#007fff"
 }

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` 实例方式调用组件方法。

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

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

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

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

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

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:

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({
         <AppGlobalSpin>
           {{
             default: () => <RouterView />,
-            description: () => 'loading...',
+            description: () => APP_GLOBAL_LOADING,
           }}
         </AppGlobalSpin>
       </AppNaiveGlobalProvider>

src/app-components/app/AppGlobalSpin/index.tsx

@@ -54,7 +54,9 @@ const GlobalSpin = defineComponent({
         show={this.spinValue}
         themeOverrides={this.overrides}
       >
-        {{ ...this.$slots }}
+        {{
+          ...this.$slots,
+        }}
       </NSpin>
     )
   },

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 (
-      <NModal
+      <RModal
         v-model:show={this.lockScreenSwitchRef}
         transformOrigin="center"
         show
@@ -59,7 +59,7 @@ const AppLockScreen = defineComponent({
         <div class="app-lock-screen__content">
           {!getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
         </div>
-      </NModal>
+      </RModal>
     )
   },
 })

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

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'
+
 /**
  *
  * 系统缓存

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 文件，文件名为主题名称
 
 ## 注意
 

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<typeof chartProps>
 export type { RChartType, UseChartReturn }

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<AnyFC> | 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<DropdownProps['options']>(() => [
       {
@@ -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 {

src/components/RChart/src/props.ts

@@ -233,6 +233,15 @@ const props = {
     type: [Function, Array] as PropType<MaybeArray<() => void>>,
     default: null,
   },
+  /**
+   *
+   * @description
+   * chart 渲染结束后的回调函数，不论是否成功都会执行。
+   */
+  onFinally: {
+    type: [Function, Array] as PropType<MaybeArray<() => void>>,
+    default: null,
+  },
   /**
    *
    * @description
@@ -320,11 +329,14 @@ const props = {
   /**
    *
    * @description
-   * 节流等待时间。
+   * 是否开启 watchThrottle 监听 options 配置项更新。
+   * 该配置项适合在需要频繁更新 chart options 的场景下使用。
+   *
+   * 但是该配置项需要开启 watchOptions 才能生效。
    *
    * @default 500
    */
-  throttleWait: {
+  watchOptionsThrottleWait: {
     type: Number,
     default: 500,
   },

src/components/RChart/src/utils.ts

@@ -33,7 +33,7 @@ import type {
 export const setupChartTheme = () => {
   // 获取所有主题
   const themeRawModules: Record<string, ChartThemeRawModules> =
-    import.meta.glob('@/echart-themes/**/*.json', {
+    import.meta.glob('@/app-config/echart-themes/**/*.json', {
       eager: true,
     })
   const regex = /\/([^/]+)\.json$/

src/components/RIcon/src/index.tsx

@@ -56,9 +56,17 @@ export default defineComponent({
         onClick={this.iconClick.bind(this)}
       >
         <svg
-          {...({ RayIconAttribute: 'ray-icon', ariaHidden: true } as object)}
+          {...({
+            RayIconAttribute: 'ray-icon',
+            ariaHidden: true,
+          } as object)}
         >
-          <use {...{ 'xlink:href': this.symbolId }} fill={this.color} />
+          <use
+            {...{
+              'xlink:href': this.symbolId,
+            }}
+            fill={this.color}
+          />
         </svg>
       </span>
     )

src/components/RModal/src/Modal.tsx

@@ -110,7 +110,9 @@ export default defineComponent({
         {...$otherProps}
         {...$attrs}
       >
-        {{ ...$slots }}
+        {{
+          ...$slots,
+        }}
       </NModal>
     )
   },

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%',

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

src/components/RQRCode/src/index.tsx

@@ -167,7 +167,7 @@ export default defineComponent({
     return (
       <div class={['ray-qrcode', `ray-qrcode--${status}`]}>
         <NSpin show={status === 'loading'} description={loadingDescription}>
-          <img src={qrcodeURL as string | undefined} />
+          <img class="r-qr-code__image" src={qrcodeURL as string | undefined} />
         </NSpin>
         {status === 'error' ? (
           <div class="ray-qrcode__error">

src/components/RTable/src/Table.tsx

@@ -251,13 +251,17 @@ export default defineComponent({
       <NCard
         ref="wrapperRef"
         bordered={wrapperBordered}
-        {...{ id: uuidWrapper }}
+        {...{
+          id: uuidWrapper,
+        }}
       >
         {{
           default: () => (
             <>
               <NDataTable
-                {...{ id: uuidTable }}
+                {...{
+                  id: uuidTable,
+                }}
                 {...$attrs}
                 {...$props}
                 {...propsPopselectValue}

src/components/RTransitionComponent/src/index.vue

@@ -42,4 +42,3 @@ withDefaults(defineProps<TransitionProps>(), props)
 const { getKeepAliveInclude } = useKeepAliveGetters()
 const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
 </script>
-./types

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') {

src/error/PageResult/index.tsx

@@ -1,50 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-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 (
-      <div class="error-page">
-        <NResult {...this.$props} status="500" title="小调皮你走错地方了">
-          {{
-            ...this.$slots,
-            footer: () => (
-              <NButton onClick={redirectRouterToDashboard.bind(this, true)}>
-                返回首页
-              </NButton>
-            ),
-          }}
-        </NResult>
-      </div>
-    )
-  },
-})
-
-export default PageResult

src/error/index.ts

@@ -1,3 +0,0 @@
-import PageResult from './PageResult/index'
-
-export default PageResult

src/global-variable/variable.ts

@@ -65,9 +65,11 @@ export function setVariable<T extends VariableStateKey, FC extends AnyFC>(
   value: VariableState[T],
   cb?: FC,
 ) {
-  variableState[key] = value
+  if (Object.hasOwn(variableState, key)) {
+    variableState[key] = value
 
-  cb?.()
+    cb?.()
+  }
 }
 
 /**

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
 

src/hooks/web/usePagination.ts

@@ -146,18 +146,21 @@ export const usePagination = <T extends AnyFC>(
    */
   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<typeof usePagination>

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: () => (

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,

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,

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

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
       }
 

src/utils/app/index.ts

@@ -1,4 +1 @@
-// export * from './prefixCacheKey'
-import { prefixCacheKey } from './prefixCacheKey'
-
-export { prefixCacheKey }
+export * from './prefixCacheKey'

src/utils/basic.ts

@@ -293,7 +293,7 @@ export function pick<T extends object, K extends keyof T>(
 
   const result = [...keys, ...rest].reduce(
     (pre, curr) => {
-      if (Reflect.has(targetObject, curr)) {
+      if (Object.hasOwn(targetObject, curr)) {
         pre[curr] = targetObject[curr]
       }
 

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'

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({
           </NP>
         </NCard>
         <NCard title="友情链接">
-          <RayLink />
+          <AppShareLink />
         </NCard>
       </NFlex>
     )

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 (
       <div class="echart">
         <NCard title="chart 组件">
-          <ul>
-            <li>
-              <h3>1. 当未获取到宽高时，组件会默认以 200*200 尺寸填充。</h3>
-            </li>
-            <li>
-              <h3>
-                2. 默认启用 autoChangeTheme，自动监听模板主题变化，如果设置为
-                false 则为 APP_THEME.echartTheme 配置项为渲染结果（RayTemplate
-                独有）
-              </h3>
-            </li>
-            <li>
-              <h3>3. 默认启用 watchOptions，自动监听配置项变化</h3>
-            </li>
-            <li>
-              <h3>4. 默认启用 nextTick，强制在下一队列渲染图标内容</h3>
-            </li>
-            <li>
-              <h3>5. 配置 setChartOptions 属性，可以定制化合并模式</h3>
-            </li>
-            <li>
-              <h3>
-                6. 默认启用 intersectionObserver
-                属性，只有元素在可见范围才会渲染图表，可以滚动查看效果
-              </h3>
-            </li>
-            <li>
-              <h3>7. useChart 方法</h3>
-            </li>
-          </ul>
+          <h3>该组件基于 ECharts, Vueuse 封装。默认做了最佳的优化封装实践。</h3>
+          <h3>
+            开箱即用的优化策略：节流更新图表、异步渲染、自动销毁、贴花、加载、主题、视窗区域渲染、自动更新尺寸等高级特性。
+          </h3>
         </NCard>
         <NCard title="预设 card 风格图表">
           <NFlex style={['padding: 18px 0']}>
@@ -297,7 +286,7 @@ const Echart = defineComponent({
                   if (isDispose2()) {
                     render2()
                   } else {
-                    window.$message.warning('图表已经渲染')
+                    window.$message.warning('不可以重复渲染图表~')
                   }
                 }}
               >

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,

src/views/demo/table/index.tsx

@@ -105,7 +105,10 @@ const TableView = defineComponent({
       },
     ]
     const actionColumns = ref<DataTableColumns<RowData>>(
-      [...baseColumns].map((curr) => ({ ...curr, width: 400 })),
+      [...baseColumns].map((curr) => ({
+        ...curr,
+        width: 400,
+      })),
     )
     const tableData = ref<RowData[]>([])
     const tableMenuOptions = [

src/views/error/PageResult/index.tsx

@@ -0,0 +1,83 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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 (
+      <div class="error-page">
+        <NResult
+          {...this.$props}
+          status="500"
+          title="404 资源不存在"
+          description="小调皮你走错地方了"
+        >
+          {{
+            ...this.$slots,
+            footer: () => (
+              <NFlex align="center" justify="center">
+                <NButton onClick={redirectRouterToDashboard.bind(this, true)}>
+                  返回首页
+                </NButton>
+                <NButton type="primary" onClick={goBack.bind(this)}>
+                  返回上一页面
+                </NButton>
+              </NFlex>
+            ),
+          }}
+        </NResult>
+      </div>
+    )
+  },
+})
+
+export default PageResult

src/views/error/index.ts

@@ -0,0 +1,3 @@
+import PageResult from './PageResult'
+
+export default PageResult

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

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

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({
                   <NDivider>其他登陆方式</NDivider>
                   <SSOSigning />
                   <NDivider>友情链接</NDivider>
-                  <RayLink />
+                  <AppShareLink />
                 </NCard>
               </NGridItem>
             </NGrid>

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,