version: v4.7.1

CHANGELOG.md

@@ -1,5 +1,32 @@
 # CHANGE LOG
 
+## 4.7.1
+
+## Feats
+
+- 更新 `vite` 版本至 `5.1.6`
+- `vite-plugin-cdn2` 相关
+  - 更新 `vite-plugin-cdn2` 版本至 `1.1.0`
+  - 更新 `vite.plugin.config.ts` 关于 `cdn2` 配置
+  - 新增 `cdnResolve` 方法，自定义 `resolve`
+- 更新主流浏览器版本号升级
+- `RChart` 组件相关
+  - 新增 `intersectionObserver` 配置项，用于配置是否使用 `IntersectionObserver` 监听图表渲染
+    > 但是该配置项不支持动态修改，只能在初始化时配置
+  - 优化组件的注释，并且补充了一些注释
+  - 新增 `intersectionObserver` 配置项，手动指定 `IntersectionObserver` 需要监听的元素
+  - `observer` 更名为 `autoResizeObserverTarget`
+  - 补充 `chart` 示例页面
+- 优化亮色主题下锁屏样式
+
+## Fixes
+
+- 修复 `vite-plugin-cdn2` 插件构建 `echarts` 失败问题，具体查看该 [issue](https://github.com/nonzzz/vite-plugin-cdn/issues/42)
+- `RChart` 组件相关
+  - 修复卸载组件不能完全清理 `inst` 问题
+  - 修复组件不能正常触发初始化动画问题
+  - 修正 `isDispose` 方法返回值含义，现在返回 `true` 代表已经卸载，`false` 代表未卸载
+
 ## 4.7.0
 
 做了一些核心依赖的升级操作。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.7.0",
+  "version": "4.7.1",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -92,9 +92,9 @@
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.5",
+    "vite": "^5.1.6",
     "vite-bundle-analyzer": "0.8.1",
-    "vite-plugin-cdn2": "0.15.4",
+    "vite-plugin-cdn2": "1.1.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "1.8.1",

pnpm-lock.yaml

@@ -108,10 +108,10 @@ devDependencies:
     version: 6.5.0(eslint@8.56.0)(typescript@5.2.2)
   '@vitejs/plugin-vue':
     specifier: ^5.0.4
-    version: 5.0.4(vite@5.1.5)(vue@3.4.21)
+    version: 5.0.4(vite@5.1.6)(vue@3.4.21)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.1.0
-    version: 3.1.0(vite@5.1.5)(vue@3.4.21)
+    version: 3.1.0(vite@5.1.6)(vue@3.4.21)
   '@vue-hooks-plus/resolvers':
     specifier: 1.2.4
     version: 1.2.4(vue-hooks-plus@1.8.8)
@@ -182,35 +182,35 @@ devDependencies:
     specifier: ^0.26.0
     version: 0.26.0(vue@3.4.21)
   vite:
-    specifier: ^5.1.5
+    specifier: ^5.1.6
-    version: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+    version: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
   vite-bundle-analyzer:
     specifier: 0.8.1
     version: 0.8.1
   vite-plugin-cdn2:
-    specifier: 0.15.4
+    specifier: 1.1.0
-    version: 0.15.4
+    version: 1.1.0
   vite-plugin-compression:
     specifier: ^0.5.1
-    version: 0.5.1(vite@5.1.5)
+    version: 0.5.1(vite@5.1.6)
   vite-plugin-ejs:
     specifier: ^1.7.0
-    version: 1.7.0(vite@5.1.5)
+    version: 1.7.0(vite@5.1.6)
   vite-plugin-eslint:
     specifier: 1.8.1
-    version: 1.8.1(eslint@8.56.0)(vite@5.1.5)
+    version: 1.8.1(eslint@8.56.0)(vite@5.1.6)
   vite-plugin-imp:
     specifier: ^2.4.0
-    version: 2.4.0(vite@5.1.5)
+    version: 2.4.0(vite@5.1.6)
   vite-plugin-inspect:
     specifier: ^0.8.3
-    version: 0.8.3(vite@5.1.5)
+    version: 0.8.3(vite@5.1.6)
   vite-plugin-mock-dev-server:
     specifier: 1.4.7
-    version: 1.4.7(vite@5.1.5)
+    version: 1.4.7(vite@5.1.6)
   vite-plugin-svg-icons:
     specifier: ^2.0.1
-    version: 2.0.1(vite@5.1.5)
+    version: 2.0.1(vite@5.1.6)
   vite-svg-loader:
     specifier: ^4.0.0
     version: 4.0.0
@@ -1494,14 +1494,10 @@ packages:
   /@types/eslint@8.44.2:
     resolution: {integrity: sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==}
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
       '@types/json-schema': 7.0.14
     dev: true
 
-  /@types/estree@1.0.1:
-    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
-    dev: true
-
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
@@ -1848,7 +1844,7 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.5)(vue@3.4.21):
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.6)(vue@3.4.21):
     resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1858,20 +1854,20 @@ packages:
       '@babel/core': 7.23.9
       '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.9)
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(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.1.5)(vue@3.4.21):
+  /@vitejs/plugin-vue@5.0.4(vite@5.1.6)(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.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
       vue: 3.4.21(typescript@5.2.2)
     dev: true
 
@@ -2533,7 +2529,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.10
-      caniuse-lite: 1.0.30001534
+      caniuse-lite: 1.0.30001593
       fraction.js: 4.3.4
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -2658,7 +2654,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001534
+      caniuse-lite: 1.0.30001593
       electron-to-chromium: 1.4.522
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
@@ -2669,7 +2665,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001571
+      caniuse-lite: 1.0.30001593
       electron-to-chromium: 1.4.616
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
@@ -2761,12 +2757,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /caniuse-lite@1.0.30001534:
+  /caniuse-lite@1.0.30001593:
-    resolution: {integrity: sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==}
+    resolution: {integrity: sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==}
-    dev: true
-
-  /caniuse-lite@1.0.30001571:
-    resolution: {integrity: sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==}
     dev: true
 
   /canvas@2.11.2:
@@ -7576,21 +7568,21 @@ packages:
       source-map: 0.7.4
     dev: true
 
-  /vite-plugin-cdn2@0.15.4:
+  /vite-plugin-cdn2@1.1.0:
-    resolution: {integrity: sha512-7eTUerun6Nyvx60dzPsEXWOwzAdDs7s81p/7YHBqYNL1wfG5r2KH0qqiw9/gaOJjnI34LvnaFncULgqpcV9thw==}
+    resolution: {integrity: sha512-mqz9frTLpwT7XVuJppb/OmsEaJOxcY5Xt/+VOeewQAJTsl91TZe1ySv+YyoQbVn+BQbamNHZbUteIuoQzRFdpQ==}
     dependencies:
       '@babel/core': 7.23.9
       '@rollup/pluginutils': 5.1.0
       '@xn-sakina/rml-wasm': 2.3.0
       debug: 4.3.4
-      magic-string: 0.30.7
+      magic-string: 0.30.8
       rs-module-lexer: 2.3.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-compression@0.5.1(vite@5.1.5):
+  /vite-plugin-compression@0.5.1(vite@5.1.6):
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -7598,21 +7590,21 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-ejs@1.7.0(vite@5.1.5):
+  /vite-plugin-ejs@1.7.0(vite@5.1.6):
     resolution: {integrity: sha512-JNP3zQDC4mSbfoJ3G73s5mmZITD8NGjUmLkq4swxyahy/W0xuokK9U9IJGXw7KCggq6UucT6hJ0p+tQrNtqTZw==}
     peerDependencies:
       vite: '>=5.0.0'
     dependencies:
       ejs: 3.1.9
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
     dev: true
 
-  /vite-plugin-eslint@1.8.1(eslint@8.56.0)(vite@5.1.5):
+  /vite-plugin-eslint@1.8.1(eslint@8.56.0)(vite@5.1.6):
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:
       eslint: '>=7'
@@ -7622,10 +7614,10 @@ packages:
       '@types/eslint': 8.44.2
       eslint: 8.56.0
       rollup: 2.79.1
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
     dev: true
 
-  /vite-plugin-imp@2.4.0(vite@5.1.5):
+  /vite-plugin-imp@2.4.0(vite@5.1.6):
     resolution: {integrity: sha512-L/6/nvOw+MyNh4UxAlCZHsmKd5MitmHamqqAWB15sbUgVIEz/OQ8jpKr6kkQU0eA/AIe8fkCVbQBlP81ajrqWg==}
     peerDependencies:
       vite: '>= 2.0.0-beta.5'
@@ -7637,12 +7629,12 @@ packages:
       chalk: 4.1.2
       param-case: 3.0.4
       pascal-case: 3.1.2
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-inspect@0.8.3(vite@5.1.5):
+  /vite-plugin-inspect@0.8.3(vite@5.1.6):
     resolution: {integrity: sha512-SBVzOIdP/kwe6hjkt7LSW4D0+REqqe58AumcnCfRNw4Kt3mbS9pEBkch+nupu2PBxv2tQi69EQHQ1ZA1vgB/Og==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7661,13 +7653,13 @@ packages:
       perfect-debounce: 1.0.0
       picocolors: 1.0.0
       sirv: 2.0.4
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-mock-dev-server@1.4.7(vite@5.1.5):
+  /vite-plugin-mock-dev-server@1.4.7(vite@5.1.6):
     resolution: {integrity: sha512-vGNW423fkmMibf0BfYL89n2n4tNKDt51d6Ee14gC1LlLiJAp6jabJBPsjWgU+uMgtp68+1uBb5F1qTlqdAhnoQ==}
     engines: {node: ^16 || ^18 || >= 20}
     peerDependencies:
@@ -7689,7 +7681,7 @@ packages:
       mime-types: 2.1.35
       path-to-regexp: 6.2.1
       picocolors: 1.0.0
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
       ws: 8.16.0
     transitivePeerDependencies:
       - bufferutil
@@ -7698,7 +7690,7 @@ packages:
       - utf-8-validate
     dev: true
 
-  /vite-plugin-svg-icons@2.0.1(vite@5.1.5):
+  /vite-plugin-svg-icons@2.0.1(vite@5.1.6):
     resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -7711,7 +7703,7 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 5.1.5(@types/node@20.4.7)(sass@1.71.1)
+      vite: 5.1.6(@types/node@20.4.7)(sass@1.71.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7723,8 +7715,8 @@ packages:
       svgo: 3.0.2
     dev: true
 
-  /vite@5.1.5(@types/node@20.4.7)(sass@1.71.1):
+  /vite@5.1.6(@types/node@20.4.7)(sass@1.71.1):
-    resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==}
+    resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:

src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx

@@ -105,16 +105,19 @@ export default defineComponent({
     return (
       <div class="app-lock-screen__unlock">
         <div class="app-lock-screen__unlock__content">
-          <div
+          <div class="app-lock-screen__unlock__content-wrapper">
-            class={[
+            <div
-              'app-lock-screen__unlock__content-bg',
+              class={[
-              isTabletOrSmaller
+                'app-lock-screen__unlock__content-bg__wrapper',
-                ? 'app-lock-screen__unlock__content-bg--smaller'
+                'app-lock-screen__unlock__content-bg',
-                : '',
+                isTabletOrSmaller
-            ]}
+                  ? 'app-lock-screen__unlock__content-bg--smaller'
-          >
+                  : '',
-            <div class="left">{hmSplit[0]}</div>
+              ]}
-            <div class="right">{hmSplit[1]}</div>
+            >
+              <div class="left">{hmSplit[0]}</div>
+              <div class="right">{hmSplit[1]}</div>
+            </div>
           </div>
           <div class="app-lock-screen__unlock__content-avatar">
             <AppAvatar vertical align="center" avatarSize={52} />

src/app-components/app/AppLockScreen/index.scss

@@ -1,10 +1,10 @@
 .app-lock-screen__content {
   & .app-lock-screen__input {
-    & button[class*="n-button"] {
+    & button[class*='n-button'] {
       width: 100%;
     }
 
-    & form[class*="n-form"] {
+    & form[class*='n-form'] {
       margin: 24px 0px;
     }
   }
@@ -12,45 +12,54 @@
   & .app-lock-screen__unlock {
     .app-lock-screen__unlock__content {
       position: relative;
-      width: 100%;
-      height: 100%;
       @include flexCenter;
       flex-direction: column;
 
-      & .app-lock-screen__unlock__content-bg {
+      & .app-lock-screen__unlock__content-wrapper {
-        position: absolute;
+        position: fixed;
-        width: 100%;
+        inset: 0px;
-        height: 100%;
-        @include flexCenter;
-        font-size: 220px;
-        gap: 80px;
-        z-index: 0;
 
-        &.app-lock-screen__unlock__content-bg--smaller {
+        & .app-lock-screen__unlock__content-bg__wrapper {
-          & .left,
+          width: 100%;
-          & .right {
+          height: 100%;
-            padding: 0px;
+          background-color: rgb(16, 16, 20);
-            font-size: 90px;
-            padding: 24px;
-            border-radius: 4px;
-          }
         }
 
-        & .left,
+        & .app-lock-screen__unlock__content-bg {
-        & .right {
+          position: absolute;
+          width: 100%;
+          height: 100%;
           @include flexCenter;
-          border-radius: 30px;
+          font-size: 320px;
-          background-color: #141313;
+          gap: 80px;
-          font-weight: 700;
+          z-index: 0;
-          padding: 80px;
+
-          filter: blur(4px);
+          &.app-lock-screen__unlock__content-bg--smaller {
+            & .left,
+            & .right {
+              padding: 0px;
+              font-size: 90px;
+              padding: 24px;
+              border-radius: 4px;
+            }
+          }
+
+          & .left,
+          & .right {
+            @include flexCenter;
+            border-radius: 30px;
+            background-color: #141313;
+            font-weight: 700;
+            padding: 80px;
+            filter: blur(4px);
+          }
         }
       }
 
       & .app-lock-screen__unlock__content-avatar {
         margin-top: 5px;
         color: #bababa;
-        font-weight: 500;
+        font-weight: bolder;
         z-index: 1;
       }
 

src/components/RChart/src/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import * as echarts from 'echarts/core' // `echarts` 核心模块
+import { use, registerTheme, init } from 'echarts/core' // echarts 核心模块
 import {
   TitleComponent,
   TooltipComponent,
@@ -10,7 +10,7 @@ import {
   LegendComponent,
   ToolboxComponent,
   AriaComponent,
-} from 'echarts/components' // 提示框, 标题, 直角坐标系, 数据集, 内置数据转换器等组件(组件后缀都为 `Component`)
+} from 'echarts/components' // 提示框, 标题, 直角坐标系, 数据集, 内置数据转换器等组件(组件后缀都为 Component)
 import {
   BarChart,
   LineChart,
@@ -18,9 +18,9 @@ import {
   CandlestickChart,
   ScatterChart,
   PictorialBarChart,
-} from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
+} from 'echarts/charts' // 系列类型(后缀都为 SeriesOption)
 import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
-import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
+import { CanvasRenderer } from 'echarts/renderers' // echarts 渲染器
 import { NCard } from 'naive-ui'
 
 import props from './props'
@@ -28,28 +28,35 @@ import { throttle } from 'lodash-es'
 import { completeSize, downloadBase64File, call, renderNode } from '@/utils'
 import { setupChartTheme } from './utils'
 import { APP_THEME } from '@/app-config'
-import { useResizeObserver } from '@vueuse/core'
+import { useResizeObserver, useIntersectionObserver } from '@vueuse/core'
 import { RMoreDropdown } from '@/components'
 import { useSettingGetters } from '@/store'
 
 import type { WatchStopHandle } from 'vue'
 import type { AnyFC } from '@/types'
 import type { DebouncedFunc } from 'lodash-es'
-import type { UseResizeObserverReturn } from '@vueuse/core'
+import type {
+  UseResizeObserverReturn,
+  UseIntersectionObserverReturn,
+} from '@vueuse/core'
 import type { ECharts, EChartsCoreOption } from 'echarts/core'
 import type { DropdownProps, DropdownOption } from 'naive-ui'
 
+// setOption 默认配置项
 const defaultChartOptions = {
   notMerge: false,
   lazyUpdate: true,
   silent: false,
   replaceMerge: [],
 }
+// 获取 chart 主题
 const echartThemes = setupChartTheme()
+// download 下载功能 key
+const __CHART_DOWN_LOAD_CHART__ = '__R_CHART_DOWN_LOAD_CHART__'
 
-/** 注册主题 */
+// 注册主题
 echartThemes.forEach((curr) => {
-  echarts.registerTheme(curr.name, curr.theme)
+  registerTheme(curr.name, curr.theme)
 })
 
 /**
@@ -78,28 +85,30 @@ export default defineComponent({
   setup(props, { expose }) {
     const { getAppTheme } = useSettingGetters()
     const rayChartRef = ref<HTMLElement>() // echart 容器实例
-    const rayChartWrapperRef = ref<HTMLElement>()
+    const rayChartWrapperRef = ref<HTMLElement>() // echart 父容器实例
     const echartInstanceRef = ref<ECharts>() // echart 实例
     let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例
-    let resizeObserverReturn: UseResizeObserverReturn | null
+    let resizeObserverReturn: UseResizeObserverReturn | null // resize observer 实例
-    const { echartTheme } = APP_THEME
+    const { echartTheme } = APP_THEME // 当前配置主题
-    let watchCallback: WatchStopHandle | null
+    let watchCallback: WatchStopHandle | null // watch props 回调
     let echartInst: ECharts | null // 无代理响应式代理缓存 echart inst
     const moreDropDownOptions = computed<DropdownProps['options']>(() => [
       {
         label: '下载图片',
-        key: '__DOWN_LOAD_CHART__',
+        key: __CHART_DOWN_LOAD_CHART__,
         disabled: !(
           echartInstanceRef.value && echartInstanceRef.value.getDom()
         ),
       },
-    ])
+    ]) // 下拉框配置项
     const cssVarsRef = computed(() => {
       return {
         '--ray-chart-width': completeSize(props.width),
         '--ray-chart-height': completeSize(props.height),
       }
     })
+    const targetIsVisible = ref(false) // 目标是否可见
+    let intersectionObserverReturn: UseIntersectionObserverReturn | null // intersectionObserver 实例
 
     /**
      *
@@ -109,7 +118,7 @@ export default defineComponent({
      * 该方法必须在注册图表之前调用
      */
     const registerChartCore = async () => {
-      echarts.use([
+      use([
         TitleComponent,
         TooltipComponent,
         GridComponent,
@@ -119,7 +128,7 @@ export default defineComponent({
         ToolboxComponent,
         AriaComponent,
       ]) // 注册组件
-      echarts.use([
+      use([
         BarChart,
         LineChart,
         PieChart,
@@ -127,11 +136,11 @@ export default defineComponent({
         ScatterChart,
         PictorialBarChart,
       ]) // 注册 chart series type
-      echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
+      use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
-      echarts.use([CanvasRenderer]) // 注册渲染器
+      use([CanvasRenderer]) // 注册渲染器
 
       try {
-        echarts.use(props.use?.filter(Boolean))
+        use(props.use?.filter(Boolean))
       } catch (e) {
         console.error('[RChart register error]: ', e)
       }
@@ -148,6 +157,10 @@ export default defineComponent({
      * 但是，如果未获取到 echartTheme 属性，则会使用默认样式
      */
     const updateChartTheme = () => {
+      if (echartInst?.getDom()) {
+        destroyChart()
+      }
+
       if (props.theme === 'default') {
         props.autoChangeTheme ? renderChart('dark') : renderChart('')
 
@@ -169,10 +182,12 @@ export default defineComponent({
 
     /**
      *
-     * @returns `chart options`
+     * @param ops 待合并 chart options
      *
-     * 合并配置项
+     * @description
-     * 如果有需要特殊全局配置的可以在此继续写...
+     * 合并 chart options。
+     *
+     * 如果启用了 showAria 则会自动合并 aria 配置项。
      */
     const combineChartOptions = (ops: EChartsCoreOption) => {
       let options = unref(ops)
@@ -211,7 +226,7 @@ export default defineComponent({
 
       try {
         /** 注册 chart */
-        echartInst = echarts.init(element, theme, {
+        echartInst = init(element, theme, {
           /** 如果款度为 0, 则以 200px 填充 */
           width: width === 0 ? 200 : void 0,
           /** 如果高度为 0, 则以 200px 填充 */
@@ -219,7 +234,12 @@ export default defineComponent({
         })
         echartInstanceRef.value = echartInst
 
-        /** 设置 options 配置项 */
+        // 渲染成功回调
+        if (onSuccess) {
+          call(onSuccess, echartInst)
+        }
+
+        // 是否强制下一队列渲染图表
         if (props.nextTick) {
           echartInst.setOption({})
 
@@ -229,34 +249,35 @@ export default defineComponent({
         } else {
           options && echartInst?.setOption(options)
         }
-
-        /** 渲染成功回调 */
-        if (onSuccess) {
-          call(onSuccess, echartInst)
-        }
       } catch (e) {
         /** 渲染失败回调 */
         if (onError) {
           call(onError)
         }
 
-        console.error('RChart render error: ', e)
+        console.error('[RChart]: render error: ', e)
       }
     }
 
-    // chart 是否已经销毁
+    /**
-    const isDispose = () => !!(echartInst && echartInst.getDom())
+     *
+     * @description
+     * chart 是否已经销毁。
+     * 如果销毁则返回 true, 否则返回 false。
+     */
+    const isDispose = () => !(echartInst && echartInst.getDom())
 
     /**
      *
-     * 销毁 `chart` 实例, 释放资源
+     * 销毁 chart 实例, 释放资源
      */
     const destroyChart = () => {
-      if (isDispose()) {
+      if (!isDispose()) {
         echartInst!.clear()
         echartInst!.dispose()
 
         echartInstanceRef.value = void 0
+        echartInst = null
       }
     }
 
@@ -276,7 +297,7 @@ export default defineComponent({
      * 当前仅实现下载图片功能
      */
     const dropdownSelect = (key: string | number, option: DropdownOption) => {
-      if (key === '__DOWN_LOAD_CHART__' && isDispose()) {
+      if (key === __CHART_DOWN_LOAD_CHART__ && !isDispose()) {
         const { filename, ...args } = props.downloadOptions
 
         downloadBase64File(
@@ -293,35 +314,64 @@ export default defineComponent({
     }
 
     const mount = () => {
+      // 注册事件
+      if (props.autoResize) {
+        if (!resizeThrottleReturn) {
+          resizeThrottleReturn = throttle(resizeChart, props.throttleWait)
+        }
+
+        /**
+         *
+         * 监听内容区域尺寸变化更新 chart。
+         * 如果没有传入 autoResizeObserverTarget 属性，则默认监听容器尺寸变化。
+         */
+        if (!resizeObserverReturn) {
+          resizeObserverReturn = useResizeObserver(
+            props.autoResizeObserverTarget || rayChartWrapperRef,
+            resizeThrottleReturn as AnyFC,
+          )
+        }
+      }
+
       // 避免重复渲染
       if (echartInst?.getDom()) {
-        console.warn(
-          '[RChart mount]: There is a chart instance already initialized on the dom. Execution was interrupted.',
-        )
-
         return
       }
 
+      // 如果目标不可见并且启用了 intersectionObserver 则不渲染
+      if (!targetIsVisible.value && props.intersectionObserver) {
+        return
+      }
+
+      // 渲染 chart
       updateChartTheme()
 
-      /** 注册事件 */
+      // 初始化完成后移除 intersectionObserver 监听
-      if (props.autoResize) {
+      intersectionObserverReturn?.stop()
-        resizeThrottleReturn = throttle(resizeChart, props.throttleWait)
+    }
-        /** 监听内容区域尺寸变化更新 chart */
+
-        resizeObserverReturn = useResizeObserver(
+    if (props.intersectionObserver) {
-          props.observer || rayChartWrapperRef,
+      intersectionObserverReturn = useIntersectionObserver(
-          resizeThrottleReturn,
+        props.intersectionObserverTarget || rayChartWrapperRef,
-        )
+        ([entry]) => {
-      }
+          targetIsVisible.value = entry.isIntersecting
+        },
+        props.intersectionOptions,
+      )
     }
 
     const unmount = () => {
-      /** 卸载 echarts */
+      // 卸载 echarts
       destroyChart()
-      /** 注销防抖 */
+      // 注销防抖
       resizeThrottleReturn?.cancel()
-      /** 注销 observer 监听 */
+      // 注销 observer 监听
-      resizeObserverReturn?.stop?.()
+      resizeObserverReturn?.stop()
+      intersectionObserverReturn?.stop()
+
+      intersectionObserverReturn = null
+      resizeThrottleReturn = null
+      resizeObserverReturn = null
     }
 
     /** 监听全局主题变化, 然后重新渲染对应主题 echarts */
@@ -359,13 +409,14 @@ export default defineComponent({
         watchCallback = watch(
           () => props.options,
           (ndata) => {
-            /** 重新组合 options */
+            // 重新组合 options
             const options = combineChartOptions(ndata)
             const setOpt = Object.assign(
+              {},
               props.setChartOptions,
               defaultChartOptions,
             )
-            /** 如果 options 发生变动更新 echarts */
+            // 如果 options 发生变动更新 echarts
             echartInst?.setOption(options, setOpt)
           },
           {
@@ -377,9 +428,15 @@ export default defineComponent({
         watchCallback?.()
       }
 
+      // 监听 loading 变化
       props.loading
         ? echartInst?.showLoading(props.loadingOptions)
         : echartInst?.hideLoading()
+
+      // 当前图表容器是否处于可见状态，如果可见则渲染图表
+      if (targetIsVisible.value) {
+        mount()
+      }
     })
 
     expose({
@@ -390,10 +447,11 @@ export default defineComponent({
     })
 
     onBeforeMount(async () => {
-      /** 注册 echarts 组件与渲染器 */
+      // 注册 echarts 组件与渲染器
       await registerChartCore()
     })
     onMounted(() => {
+      // 初始化渲染
       mount()
     })
     onBeforeUnmount(() => {

src/components/RChart/src/props.ts

@@ -1,11 +1,14 @@
-import type * as echarts from 'echarts/core' // `echarts` 核心模块
+import type * as echarts from 'echarts/core' // echarts 核心模块
 import type { PropType, VNode } from 'vue'
 import type { MaybeArray } from '@/types'
 import type { ECharts, SetOptionOpts } from 'echarts/core'
-import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'
+import type {
+  MaybeComputedElementRef,
+  MaybeElement,
+  UseIntersectionObserverOptions,
+} from '@vueuse/core'
 import type {
   LoadingOptions,
-  AutoResize,
   ChartTheme,
   EChartsExtensionInstallRegisters,
   RChartPresetType,
@@ -16,195 +19,340 @@ import type { CardProps, DropdownProps, DropdownOption } from 'naive-ui'
 import { loadingOptions } from './utils'
 
 const props = {
-  bordered: {
+  /**
-    /**
+   *
-     *
+   * @description
-     * 仅在 preset 为 card 时生效
+   * 是否开启 IntersectionObserver 监听，用于监听图表是否在可视区域内再进行渲染。
-     *
+   * 默认监听图表容器是否在可视区域内，也可以配置 intersectionObserverTarget 属性监听指定元素。
-     * 设置边框
+   *
-     */
+   * 该方法需要浏览器支持 IntersectionObserver API。
+   *
+   * @default true
+   */
+  intersectionObserver: {
     type: Boolean,
     default: true,
   },
+  /**
+   *
+   * @description
+   * 指定 IntersectionObserver 监听的目标元素。
+   *
+   * 该属性需要开启 intersectionObserver 才能生效。
+   *
+   * @default null
+   */
+  intersectionObserverTarget: {
+    type: Object as PropType<MaybeComputedElementRef<MaybeElement>>,
+    default: null,
+  },
+  /**
+   *
+   * @description
+   * IntersectionObserver 配置项。
+   *
+   * 该属性需要开启 intersectionObserver 才能生效。
+   *
+   * @see https://www.vueusejs.com/core/useIntersectionObserver/
+   *
+   * @default {threshold:0.1}
+   */
+  intersectionOptions: {
+    type: Object as PropType<UseIntersectionObserverOptions>,
+    default: {
+      threshold: 0.1,
+    },
+  },
+  /**
+   *
+   * @description
+   * 仅在 preset 为 card 时生效。
+   *
+   * @default true
+   */
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   *
+   * @description
+   * 仅在 preset 为 card 时生效。
+   *
+   * type: 导出的格式，可选 png, jpg, svg。注意: png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用。
+   * pixelRatio: 导出的图片分辨率比例，默认为 1。
+   * backgroundColor: 导出的图片背景色，默认使用 option 里的 backgroundColor。
+   * excludeComponents: 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']。
+   *
+   * @default {}
+   */
   downloadOptions: {
-    /**
-     *
-     * 仅在 preset 为 card 时生效
-     *
-     * type: 导出的格式，可选 png, jpg, svg。注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
-     * pixelRatio: 导出的图片分辨率比例，默认为 1
-     * backgroundColor: 导出的图片背景色，默认使用 option 里的 backgroundColor
-     * excludeComponents: 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
-     */
     type: Object as PropType<RChartDownloadOptions>,
     default: () => ({}),
   },
+  /**
+   *
+   * @description
+   * dropdown 选中回调。
+   *
+   * 仅在 preset 为 card 时生效。
+   *
+   * @default undefined
+   */
   onDropdownSelect: {
-    // 仅在 preset 为 card 时生效
     type: [Function, Array] as PropType<
       MaybeArray<(key: string | number, option: DropdownOption) => void>
     >,
   },
+  /**
+   *
+   * @description
+   * dropdown 列表。
+   *
+   * 仅在 preset 为 card 时生效。
+   *
+   * @default []
+   */
   dropdownOptions: {
-    // 仅在 preset 为 card 时生效
     type: Array as PropType<DropdownProps['options']>,
   },
+  /**
+   *
+   * @description
+   * 是否启用预设样式。
+   *
+   * @default undefined
+   */
   preset: {
-    // 是否启用预设样式
     type: String as PropType<RChartPresetType>,
   },
+  /**
+   *
+   * @description
+   * 设置 content 区域的样式。
+   *
+   * 仅在 preset 为 card 时生效。
+   *
+   * @default undefined
+   */
   contentStyle: {
-    // 仅在 preset 为 card 时生效
     type: [String, Object] as PropType<CardProps['contentStyle']>,
   },
+  /**
+   *
+   * @description
+   * 设置预设样式的标题。
+   *
+   * 仅在 preset 为 card 时生效。
+   *
+   * @default undefined
+   */
   title: {
-    // 仅在 preset 为 card 时生效
     type: [String, Function] as PropType<string | (() => VNode)>,
   },
+  /**
+   *
+   * @description
+   * chart 默认宽度，默认为 100%。
+   *
+   * 但是，如果未获取到实际宽度，那么会以 200px 宽度填充。
+   *
+   * @default 100%
+   */
   width: {
-    /**
-     *
-     * chart 容器初始化宽度
-     *
-     * 如果未能继承宽度, 则会以 200px 宽度填充
-     */
     type: String,
     default: '100%',
   },
+  /**
+   *
+   * @description
+   * chart 默认高度，默认为 100%。
+   *
+   * 但是，如果未获取到实际高度，那么会以 200px 高度填充。
+   *
+   * @default 100%
+   */
   height: {
-    /**
-     *
-     * chart 容器初始化高度
-     *
-     * 如果未能继承高度, 则会以 200px 宽度填充
-     */
     type: String,
     default: '100%',
   },
+  /**
+   *
+   * @description
+   * 是否启用自动调整大小，默认跟随图表容器尺寸变化。
+   *
+   * @default true
+   */
   autoResize: {
-    /**
+    type: Boolean,
-     *
-     * `chart` 是否跟随窗口尺寸变化自动变化
-     *
-     * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果
-     * 默认每秒触发一次的频率
-     */
-    type: [Boolean, Object] as PropType<AutoResize>,
     default: true,
   },
+  /**
+   *
+   * @description
+   * 是否启用 chart 无障碍模式。
+   * 启用该配置项后会覆盖 options 中的 aria。
+   *
+   * @default false
+   */
   showAria: {
-    /**
-     *
-     * 是否开启 `chart` 无障碍访问
-     *
-     * 此选项会覆盖 `options` 中的 `aria` 配置
-     */
     type: Boolean,
     default: false,
   },
+  /**
+   *
+   * @description
+   * chart 图表配置项。
+   *
+   * @default {}
+   */
   options: {
     type: Object as PropType<echarts.EChartsCoreOption>,
     default: () => ({}),
   },
+  /**
+   *
+   * @description
+   * chart 渲染成功回调函数。
+   *
+   * @default null
+   */
   onSuccess: {
-    /**
-     *
-     * 渲染成功回调函数
-     */
     type: [Function, Array] as PropType<MaybeArray<(e: ECharts) => void>>,
     default: null,
   },
+  /**
+   *
+   * @description
+   * chart 渲染失败回调函数。
+   *
+   * @default null
+   */
   onError: {
-    /**
-     *
-     * 渲染失败回调函数
-     */
     type: [Function, Array] as PropType<MaybeArray<() => void>>,
     default: null,
   },
+  /**
+   *
+   * @description
+   * 手动指定 chart 主题配置项。
+   *
+   * @default null
+   */
   theme: {
-    /**
-     *
-     * 手动指定 chart theme
-     */
     type: String as PropType<ChartTheme>,
     default: null,
   },
+  /**
+   *
+   * @description
+   * 是否自动跟随模板主题切换。
+   * 该配置项会覆盖 theme 配置项。
+   *
+   * @default true
+   */
   autoChangeTheme: {
-    /**
-     *
-     * 是否自动跟随模板主题切换
-     * 如果开启此属性, 则会覆盖 `theme` 属性
-     *
-     * 注意: 这个属性重度依赖此模板
-     */
     type: Boolean,
     default: true,
   },
+  /**
+   *
+   * @description
+   * 手动拓展 chart 图的相关组件。
+   *
+   * 该配置项不支持动态调用，及时动态更新了该属性，也不会生效。
+   * 并且，该配置项必须在 RChart 组件初始化时候配置。
+   *
+   * @default []
+   */
   use: {
-    /**
-     *
-     * 拓展 `echarts` 图表
-     * 用于自己手动拓展相关的包
-     *
-     * 注意，该方法不支持动态调用，及时动态更新了该属性，也不会生效
-     */
     type: Array as PropType<EChartsExtensionInstallRegisters[]>,
     default: () => [],
   },
+  /**
+   *
+   * @description
+   * 是否开启 watch 监听 options 配置项。
+   *
+   * @default true
+   */
   watchOptions: {
-    /** 主动监听 options 变化 */
     type: Boolean,
     default: true,
   },
+  /**
+   *
+   * @description
+   * 是否启用 chart 加载动画。
+   *
+   * @default false
+   */
   loading: {
-    /** 加载动画 */
     type: Boolean,
     default: false,
   },
+  /**
+   *
+   * @description
+   * chart 加载动画配置项。
+   *
+   * @default {}
+   */
   loadingOptions: {
-    /** 配置加载动画样式 */
     type: Object as PropType<LoadingOptions>,
     default: () => loadingOptions(),
   },
-  observer: {
+  /**
-    /**
+   *
-     *
+   * @description
-     * 需要被监听尺寸的元素
+   * 手动设置 autoResize 监听的元素。
-     * 需要开启 autoResize 才能生效
+   * 该元素必须是一个有效的 DOM 元素，并且需要开启 autoResize 才能生效。
-     * 默认以父元素作为监听对象
+   *
-     */
+   * 默认以图表容器元素作为监听对象。
+   *
+   * @default null
+   */
+  autoResizeObserverTarget: {
     type: Object as PropType<MaybeComputedElementRef<MaybeElement>>,
     default: null,
   },
+  /**
+   *
+   * @description
+   * 节流等待时间。
+   *
+   * @default 500
+   */
   throttleWait: {
-    /** 节流等待时间 */
     type: Number,
     default: 500,
   },
+  /**
+   *
+   * @description
+   * 是否将渲染放置下一个队列。
+   *
+   * @default true
+   */
   nextTick: {
-    /**
-     *
-     * 是否将渲染放置下一个队列
-     */
     type: Boolean,
     default: true,
   },
+  /**
+   *
+   * @description
+   * 设置 setOptions 方法配置项。
+   *
+   * @default {notMerge:false,lazyUpdate:true,silent:false,replaceMerge:[]}
+   */
   setChartOptions: {
-    /**
-     *
-     * 当 options 配置项更改时候，setOptions 方法配置项
-     *
-     * 默认值
-     * notMerge: false,
-     * lazyUpdate: true,
-     * silent: false,
-     * replaceMerge: [],
-     *
-     * 会自动进行合并配置项
-     */
     type: Object as PropType<SetOptionOpts>,
-    default: () => ({}),
+    default: () => ({
+      notMerge: false,
+      lazyUpdate: true,
+      silent: false,
+      replaceMerge: [],
+    }),
   },
 }
 

src/components/RChart/src/types.ts

@@ -36,13 +36,6 @@ export interface LoadingOptions {
   fontFamily: string // 字体系列
 }
 
-export type AutoResize =
-  | boolean
-  | {
-      width: number
-      height: number
-    }
-
 export type ChartTheme =
   | 'macarons-dark'
   | 'macarons'
@@ -53,31 +46,34 @@ export type ChartTheme =
 export interface RChartInst {
   /**
    *
-   * echart 实例
+   * echart 实例。
-   * 访问当前 chart 图所有方法与属性
+   * 访问当前 chart 图所有方法与属性。
    *
    * @default undefined
    */
   echart: Ref<ECharts | undefined>
   /**
    *
-   * 手动卸载当前 chart 图
+   * @description
-   * 注意：不会卸载当前组件，仅仅是卸载 chart
+   * 手动卸载当前 chart 图。
+   * 注意：不会卸载当前组件，仅仅是卸载 chart。
    *
    * @default () => void
    */
   dispose: () => void
   /**
    *
-   * 手动渲染 chart 图
+   * @description
-   * 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart
+   * 手动渲染 chart 图。
+   * 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart。
    *
    * @default () => void
    */
   render: () => void
   /**
    *
-   * 判断图表是否已经卸载
+   * @description
+   * 判断图表是否已经卸载。
    *
    * @returns 图表是否已经卸载
    */

src/components/RChart/src/utils.ts

@@ -16,14 +16,15 @@ import type {
 } from '@/components/RChart/src/types'
 
 /**
+ *
+ * @see https://echarts.apache.org/zh/theme-builder.html
  *
  * @description
- * 自动注册所有主题
+ * 自动注册所有主题。
  *
- * 默认以文件名当作主题名称
+ * 默认以文件名当作主题名称。
  *
- * 主题配置器：https://echarts.apache.org/zh/theme-builder.html
+ * 主题编辑器使用方法:
- * 流程：
  * 1. 配置、选择主题
  * 2. 点击下载主题
  * 3. 选择 json 类型，然后复制
@@ -56,9 +57,16 @@ export const setupChartTheme = () => {
 }
 
 /**
+ *
+ * @param options 加载自定义配置项
  *
  * @description
- * 为了方便使用加载动画, 写了此方法, 虽然没啥用
+ * chart 加载配置项。
+ *
+ * @see https://echarts.apache.org/zh/api.html#echartsInstance.showLoading
+ *
+ * @example
+ * const options = loadingOptions({ ...LoadingOptions })
  */
 export const loadingOptions = (options?: LoadingOptions) =>
   Object.assign(

src/components/RModal/src/props.ts

@@ -13,19 +13,21 @@ import { modalProps } from 'naive-ui'
 
 const props = {
   ...modalProps,
+  /**
+   *
+   * @description
+   * 是否记住上一次的位置。
+   *
+   * @default true
+   */
   memo: {
-    /**
-     *
-     * 是否记住上一次的位置
-     *
-     * @default true
-     */
     type: Boolean,
     default: true,
   },
   /**
    *
-   * 是否全屏
+   * @description
+   * 是否全屏。
    *
    * @default false
    */
@@ -33,44 +35,48 @@ const props = {
     type: Boolean,
     default: false,
   },
+  /**
+   *
+   * @description
+   * preset 空时宽度设置。
+   *
+   * @default 600
+   */
   width: {
-    /**
-     *
-     * preset 空时宽度设置
-     *
-     * @default 600
-     */
     type: [String, Number],
     default: 600,
   },
+  /**
+   *
+   * @description
+   * preset 为 card 时宽度设置。
+   *
+   * @default 600
+   */
   cardWidth: {
-    /**
-     *
-     * preset 为 card 时宽度设置
-     *
-     * @default 600
-     */
     type: [String, Number],
     default: 600,
   },
+  /**
+   *
+   * @description
+   * preset 为 dialog 时宽度设置。
+   *
+   * @default 446
+   */
   dialogWidth: {
-    /**
-     *
-     * preset 为 dialog 时宽度设置
-     *
-     * @default 446
-     */
     type: [String, Number],
     default: 446,
   },
+  /**
+   *
+   * @description
+   * 是否启用拖拽。
+   * 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
+   *
+   * @default false
+   */
   dad: {
-    /**
-     *
-     * 是否启用拖拽
-     * 当启用拖拽时，可以通过拖拽 header 部分控制模态框
-     *
-     * @default false
-     */
     type: Boolean,
     default: false,
   },

src/types/app.d.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+export {}
+
 import 'vue-router'
 
 import type { AppRouteMeta } from '@/router/types'

src/utils/vue/renderNode.ts

@@ -31,8 +31,6 @@ export interface RenderNodeOptions<T extends DefaultElement> {
   defaultElement?: T
 }
 
-export type RenderNodeReturn = ReturnType<typeof renderNode>
-
 /**
  *
  * @param vnode 将 jsx element, slot, h, string 等渲染为 vnode
@@ -41,9 +39,10 @@ export type RenderNodeReturn = ReturnType<typeof renderNode>
  * 可以将常见的类型转换为 vnode
  *
  * @example
- * renderNode('hello world') => () => 'hello world'
+ * renderNode('hello world') // () => 'hello world'
- * renderNode(<div>hello world</div>) => () => <div>hello world</div>
+ * renderNode(<div>hello world</div>) // () => <div>hello world</div>
- * renderNode(() => <div>hello world</div>) => () => <div>hello world</div>
+ * renderNode(() => <div>hello world</div>) // () => <div>hello world</div>
+ * renderNode(null, { defaultElement: () => <span>hello world</span> }) // () => 'hello world'
  */
 export function renderNode<T extends DefaultElement>(
   vnode: RenderVNodeType,
@@ -65,3 +64,5 @@ export function renderNode<T extends DefaultElement>(
     return vnode
   }
 }
+
+export type RenderNodeReturn = ReturnType<typeof renderNode>

src/views/demo/echart/index.tsx

@@ -179,14 +179,18 @@ const Echart = defineComponent({
     }
 
     const mountChart = () => {
-      baseChartRef.value?.render()
+      if (!baseChartRef.value?.isDispose()) {
+        baseChartRef.value?.render()
+      } else {
+        window.$message.warning('图表已经渲染')
+      }
     }
 
     const unmountChart = () => {
       baseChartRef.value?.dispose()
     }
 
-    const handleUpdateTitle = () => {
+    const updateChartOptions = () => {
       const createData = () => Math.floor((Math.random() + 1) * 100)
 
       baseLineOptions.value.series[0].data = new Array(7)
@@ -209,7 +213,7 @@ const Echart = defineComponent({
       ...toRefs(state),
       mountChart,
       unmountChart,
-      handleUpdateTitle,
+      updateChartOptions,
     }
   },
   render() {
@@ -236,13 +240,19 @@ const Echart = defineComponent({
             <li>
               <h3>5. 配置 setChartOptions 属性，可以定制化合并模式</h3>
             </li>
+            <li>
+              <h3>
+                6. 默认启用 intersectionObserver
+                属性，只有元素在可见范围才会渲染图表，可以滚动查看效果
+              </h3>
+            </li>
           </ul>
         </NCard>
         <NCard title="预设 card 风格图表">
           <NFlex style={['padding: 18px 0']}>
             <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
             <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
-            <NButton onClick={this.handleUpdateTitle.bind(this)}>
+            <NButton onClick={this.updateChartOptions.bind(this)}>
               更新配置项
             </NButton>
           </NFlex>

vite-helper/index.ts

@@ -1,4 +1,5 @@
 import pkg from '../package.json'
+import { defineResolve } from 'vite-plugin-cdn2/resolve'
 
 import type { DependenciesKey } from './type'
 
@@ -64,3 +65,18 @@ export const getDependenciesVersion = (dependenciesKey: DependenciesKey) => {
 
   return result.replace(/^[^\w\s]+/, '')
 }
+
+export const cdnResolve = defineResolve({
+  name: 'RayTemplateCdnResolve',
+  setup({ extra }) {
+    const baseURL = 'https://cdnjs.cloudflare.com/ajax/libs/'
+    const { version, name, relativeModule } = extra
+    const url = new URL(`${name}/${version}/${relativeModule}`, baseURL)
+
+    return {
+      url: url.href,
+      injectTo: 'head-prepend',
+      attrs: {},
+    }
+  },
+})

vite.plugin.config.ts

@@ -26,7 +26,7 @@ import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import unpluginViteComponents from 'unplugin-vue-components/vite'
 import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
-import { getDependenciesVersion } from './vite-helper'
+import { getDependenciesVersion, cdnResolve } from './vite-helper'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
@@ -60,46 +60,47 @@ function onlyBuildOptions(mode: string): PluginOption[] {
   return [
     viteCDNPlugin({
       // modules 顺序 vue, vue-demi 必须保持当前顺序加载，否则会出现加载错误问题
+      resolve: cdnResolve,
       modules: [
         {
           name: 'vue',
           global: 'Vue',
-          resolve: `${resolve('vue')}/vue.global.min.js`,
+          relativeModule: 'vue.global.min.js',
         },
         {
           name: 'vue-demi',
           global: 'VueDemi',
-          resolve: `${resolve('vue-demi')}/index.iife.min.js`,
+          relativeModule: 'index.iife.min.js',
         },
         {
           name: 'naive-ui',
           global: 'naive',
-          resolve: `${resolve('naive-ui')}/index.prod.js`,
+          relativeModule: 'index.prod.js',
         },
         {
           name: 'pinia',
           global: 'Pinia',
-          resolve: `${resolve('pinia')}/pinia.iife.min.js`,
+          relativeModule: 'pinia.iife.min.js',
         },
         {
           name: 'vue-router',
           global: 'VueRouter',
-          resolve: `${resolve('vue-router')}/vue-router.global.min.js`,
+          relativeModule: 'vue-router.global.min.js',
         },
         {
           name: 'vue-i18n',
           global: 'VueI18n',
-          resolve: `${resolve('vue-i18n')}/vue-i18n.global.min.js`,
+          relativeModule: 'vue-i18n.global.min.js',
         },
         {
           name: 'echarts',
           global: 'echarts',
-          resolve: `${resolve('echarts')}/echarts.min.js`,
+          relativeModule: 'echarts.min.js',
         },
         {
           name: 'axios',
           global: 'axios',
-          resolve: `${resolve('axios')}/axios.min.js`,
+          relativeModule: 'axios.min.js',
         },
       ],
     }),