From 8a0b1e0c7281691ce85ad2ff8851e53414ac3848 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Mon, 26 Aug 2024 21:42:56 +0800
Subject: [PATCH] refactor: package chart-ui integrated into plugins (#4238)

* refactor: package chart-ui integrated into plugins

* fix: lint error
---
 apps/web-antd/package.json                    |  2 +-
 .../dashboard/analytics/analytics-trends.vue  |  6 ++-
 .../analytics/analytics-visits-data.vue       |  6 ++-
 .../analytics/analytics-visits-sales.vue      |  6 ++-
 .../analytics/analytics-visits-source.vue     |  6 ++-
 .../dashboard/analytics/analytics-visits.vue  |  6 ++-
 apps/web-ele/package.json                     |  2 +-
 .../dashboard/analytics/analytics-trends.vue  |  6 ++-
 .../analytics/analytics-visits-data.vue       |  6 ++-
 .../analytics/analytics-visits-sales.vue      |  6 ++-
 .../analytics/analytics-visits-source.vue     |  6 ++-
 .../dashboard/analytics/analytics-visits.vue  |  6 ++-
 apps/web-naive/package.json                   |  2 +-
 .../dashboard/analytics/analytics-trends.vue  |  6 ++-
 .../analytics/analytics-visits-data.vue       |  6 ++-
 .../analytics/analytics-visits-sales.vue      |  6 ++-
 .../analytics/analytics-visits-source.vue     |  6 ++-
 .../dashboard/analytics/analytics-visits.vue  |  6 ++-
 docs/src/en/guide/project/dir.md              |  2 +-
 docs/src/guide/project/dir.md                 |  2 +-
 packages/effects/chart-ui/src/index.ts        |  1 -
 packages/effects/plugins/README.md            | 28 ++++++++++
 .../{chart-ui => plugins}/package.json        | 10 ++--
 .../src/echarts/echarts-ui.vue                |  0
 .../src/echarts/echarts.ts                    |  0
 .../src/echarts/index.ts                      |  0
 .../src/echarts/use-echarts.ts                | 20 ++-----
 .../{chart-ui => plugins}/tsconfig.json       |  0
 .../utils/src/helpers/get-popup-container.ts  |  3 ++
 playground/package.json                       |  2 +-
 .../dashboard/analytics/analytics-trends.vue  |  6 ++-
 .../analytics/analytics-visits-data.vue       |  6 ++-
 .../analytics/analytics-visits-sales.vue      |  6 ++-
 .../analytics/analytics-visits-source.vue     |  6 ++-
 .../dashboard/analytics/analytics-visits.vue  |  6 ++-
 pnpm-lock.yaml                                | 54 +++++++++----------
 vben-admin.code-workspace                     |  8 +--
 37 files changed, 177 insertions(+), 79 deletions(-)
 delete mode 100644 packages/effects/chart-ui/src/index.ts
 create mode 100644 packages/effects/plugins/README.md
 rename packages/effects/{chart-ui => plugins}/package.json (74%)
 rename packages/effects/{chart-ui => plugins}/src/echarts/echarts-ui.vue (100%)
 rename packages/effects/{chart-ui => plugins}/src/echarts/echarts.ts (100%)
 rename packages/effects/{chart-ui => plugins}/src/echarts/index.ts (100%)
 rename packages/effects/{chart-ui => plugins}/src/echarts/use-echarts.ts (86%)
 rename packages/effects/{chart-ui => plugins}/tsconfig.json (100%)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 8208d717..e42713f1 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
index 261c847c..35e90276 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
index f03907d0..30c4265d 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
index 0529a3b0..260520b8 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
index 99292bf9..e0d0aab5 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
index 8230f6e5..7e1f14ee 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 1485f526..c2f18413 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
index 261c847c..35e90276 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
index f03907d0..30c4265d 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
index 0529a3b0..260520b8 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
index 99292bf9..e0d0aab5 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
index 8230f6e5..7e1f14ee 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json
index 11321b82..f86fdc10 100644
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
index 261c847c..35e90276 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
index f03907d0..30c4265d 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
index 0529a3b0..260520b8 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
index 99292bf9..e0d0aab5 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
index 8230f6e5..7e1f14ee 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/docs/src/en/guide/project/dir.md b/docs/src/en/guide/project/dir.md
index 8cfce5b0..e2747f53 100644
--- a/docs/src/en/guide/project/dir.md
+++ b/docs/src/en/guide/project/dir.md
@@ -43,7 +43,7 @@ The directory uses Monorepo management, and the project structure is as follows:
 │   ├── constants # Constants
 │   ├── effects # Effects related packages
 │   │   ├── access # Access control
-│   │   ├── chart-ui # Chart UI
+│   │   ├── plugins # Plugins
 │   │   ├── common-ui # Common UI
 │   │   ├── hooks # Composable APIs
 │   │   ├── layouts # Layouts
diff --git a/docs/src/guide/project/dir.md b/docs/src/guide/project/dir.md
index 3b32feda..e653dc2f 100644
--- a/docs/src/guide/project/dir.md
+++ b/docs/src/guide/project/dir.md
@@ -43,7 +43,7 @@
 │   ├── constants # 常量
 │   ├── effects # 副作用相关包
 │   │   ├── access # 访问控制
-│   │   ├── chart-ui # 图表 UI
+│   │   ├── plugins # 第三方大型依赖插件
 │   │   ├── common-ui # 通用 UI
 │   │   ├── hooks # 组合式 API
 │   │   ├── layouts # 布局
diff --git a/packages/effects/chart-ui/src/index.ts b/packages/effects/chart-ui/src/index.ts
deleted file mode 100644
index 2aaf5c8c..00000000
--- a/packages/effects/chart-ui/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './echarts';
diff --git a/packages/effects/plugins/README.md b/packages/effects/plugins/README.md
new file mode 100644
index 00000000..c394c9ce
--- /dev/null
+++ b/packages/effects/plugins/README.md
@@ -0,0 +1,28 @@
+# @vben/plugins
+
+该目录用于存放项目中集成的第三方库及其相关插件。每个插件都包含了可重用的逻辑、配置和组件，方便在项目中进行统一管理和调用。
+
+## 注意
+
+所有的第三方插件都必须以 `subpath` 形式引入，例：
+
+以 `echarts` 为例，引入方式如下：
+
+**packages.json**
+
+```json
+"exports": {
+    "./echarts": {
+      "types": "./src/echarts/index.ts",
+      "default": "./src/echarts/index.ts"
+    }
+  }
+```
+
+**使用方式**
+
+```ts
+import { useEcharts } from '@vben/plugins/echarts';
+```
+
+这样做的好处是，应用可以自行选择是否使用插件，而不会因为插件的引入及副作用而导致打包体积增大，只引入需要的插件即可。
diff --git a/packages/effects/chart-ui/package.json b/packages/effects/plugins/package.json
similarity index 74%
rename from packages/effects/chart-ui/package.json
rename to packages/effects/plugins/package.json
index 0526afc8..39fa7f5a 100644
--- a/packages/effects/chart-ui/package.json
+++ b/packages/effects/plugins/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@vben/chart-ui",
+  "name": "@vben/plugins",
   "version": "5.1.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/effects/chart-ui"
+    "directory": "packages/effects/plugins"
   },
   "license": "MIT",
   "type": "module",
@@ -14,9 +14,9 @@
     "**/*.css"
   ],
   "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+    "./echarts": {
+      "types": "./src/echarts/index.ts",
+      "default": "./src/echarts/index.ts"
     }
   },
   "dependencies": {
diff --git a/packages/effects/chart-ui/src/echarts/echarts-ui.vue b/packages/effects/plugins/src/echarts/echarts-ui.vue
similarity index 100%
rename from packages/effects/chart-ui/src/echarts/echarts-ui.vue
rename to packages/effects/plugins/src/echarts/echarts-ui.vue
diff --git a/packages/effects/chart-ui/src/echarts/echarts.ts b/packages/effects/plugins/src/echarts/echarts.ts
similarity index 100%
rename from packages/effects/chart-ui/src/echarts/echarts.ts
rename to packages/effects/plugins/src/echarts/echarts.ts
diff --git a/packages/effects/chart-ui/src/echarts/index.ts b/packages/effects/plugins/src/echarts/index.ts
similarity index 100%
rename from packages/effects/chart-ui/src/echarts/index.ts
rename to packages/effects/plugins/src/echarts/index.ts
diff --git a/packages/effects/chart-ui/src/echarts/use-echarts.ts b/packages/effects/plugins/src/echarts/use-echarts.ts
similarity index 86%
rename from packages/effects/chart-ui/src/echarts/use-echarts.ts
rename to packages/effects/plugins/src/echarts/use-echarts.ts
index 071138fa..d4282cd4 100644
--- a/packages/effects/chart-ui/src/echarts/use-echarts.ts
+++ b/packages/effects/plugins/src/echarts/use-echarts.ts
@@ -5,11 +5,12 @@ import type EchartsUI from './echarts-ui.vue';
 import type { Ref } from 'vue';
 import { computed, nextTick, watch } from 'vue';
 
-import { preferences, usePreferences } from '@vben/preferences';
+import { usePreferences } from '@vben/preferences';
 
 import {
   tryOnUnmounted,
   useDebounceFn,
+  useResizeObserver,
   useTimeoutFn,
   useWindowSize,
 } from '@vueuse/core';
@@ -86,6 +87,8 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     resizeHandler?.();
   });
 
+  useResizeObserver(chartRef as never, resizeHandler);
+
   watch(isDark, () => {
     if (chartInstance) {
       chartInstance.dispose();
@@ -95,21 +98,6 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     }
   });
 
-  watch(
-    [
-      () => preferences.sidebar.collapsed,
-      () => preferences.sidebar.extraCollapse,
-      () => preferences.sidebar.hidden,
-      () => preferences.app.contentCompact,
-    ],
-    () => {
-      // 折叠动画200ms
-      setTimeout(() => {
-        resize();
-      }, 200);
-    },
-  );
-
   tryOnUnmounted(() => {
     // 销毁实例，释放资源
     chartInstance?.dispose();
diff --git a/packages/effects/chart-ui/tsconfig.json b/packages/effects/plugins/tsconfig.json
similarity index 100%
rename from packages/effects/chart-ui/tsconfig.json
rename to packages/effects/plugins/tsconfig.json
diff --git a/packages/utils/src/helpers/get-popup-container.ts b/packages/utils/src/helpers/get-popup-container.ts
index 717e2428..ca5a72dd 100644
--- a/packages/utils/src/helpers/get-popup-container.ts
+++ b/packages/utils/src/helpers/get-popup-container.ts
@@ -1,3 +1,6 @@
+/**
+ * Returns the parent node of the given element or the document body if the element is not provided.it
+ */
 export function getPopupContainer(node?: HTMLElement): HTMLElement {
   return (node?.parentNode as HTMLElement) ?? document.body;
 }
diff --git a/playground/package.json b/playground/package.json
index 9560e13d..51a7fbad 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -27,13 +27,13 @@
   },
   "dependencies": {
     "@vben/access": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/preferences": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
diff --git a/playground/src/views/dashboard/analytics/analytics-trends.vue b/playground/src/views/dashboard/analytics/analytics-trends.vue
index 261c847c..35e90276 100644
--- a/playground/src/views/dashboard/analytics/analytics-trends.vue
+++ b/playground/src/views/dashboard/analytics/analytics-trends.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/playground/src/views/dashboard/analytics/analytics-visits-data.vue b/playground/src/views/dashboard/analytics/analytics-visits-data.vue
index f03907d0..30c4265d 100644
--- a/playground/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/playground/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/playground/src/views/dashboard/analytics/analytics-visits-sales.vue b/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
index 0529a3b0..260520b8 100644
--- a/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/playground/src/views/dashboard/analytics/analytics-visits-source.vue b/playground/src/views/dashboard/analytics/analytics-visits-source.vue
index 99292bf9..e0d0aab5 100644
--- a/playground/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/playground/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/playground/src/views/dashboard/analytics/analytics-visits.vue b/playground/src/views/dashboard/analytics/analytics-visits.vue
index 8230f6e5..7e1f14ee 100644
--- a/playground/src/views/dashboard/analytics/analytics-visits.vue
+++ b/playground/src/views/dashboard/analytics/analytics-visits.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+import {
+  EchartsUI,
+  type EchartsUIType,
+  useEcharts,
+} from '@vben/plugins/echarts';
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e04cce9..70caaf9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,9 +135,6 @@ importers:
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
-      '@vben/chart-ui':
-        specifier: workspace:*
-        version: link:../../packages/effects/chart-ui
       '@vben/common-ui':
         specifier: workspace:*
         version: link:../../packages/effects/common-ui
@@ -156,6 +153,9 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../../packages/effects/plugins
       '@vben/preferences':
         specifier: workspace:*
         version: link:../../packages/preferences
@@ -198,9 +198,6 @@ importers:
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
-      '@vben/chart-ui':
-        specifier: workspace:*
-        version: link:../../packages/effects/chart-ui
       '@vben/common-ui':
         specifier: workspace:*
         version: link:../../packages/effects/common-ui
@@ -219,6 +216,9 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../../packages/effects/plugins
       '@vben/preferences':
         specifier: workspace:*
         version: link:../../packages/preferences
@@ -265,9 +265,6 @@ importers:
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
-      '@vben/chart-ui':
-        specifier: workspace:*
-        version: link:../../packages/effects/chart-ui
       '@vben/common-ui':
         specifier: workspace:*
         version: link:../../packages/effects/common-ui
@@ -286,6 +283,9 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../../packages/effects/plugins
       '@vben/preferences':
         specifier: workspace:*
         version: link:../../packages/preferences
@@ -900,21 +900,6 @@ importers:
         specifier: 3.4.38
         version: 3.4.38(typescript@5.5.4)
 
-  packages/effects/chart-ui:
-    dependencies:
-      '@vben/preferences':
-        specifier: workspace:*
-        version: link:../../preferences
-      '@vueuse/core':
-        specifier: ^11.0.1
-        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
-      echarts:
-        specifier: ^5.5.1
-        version: 5.5.1
-      vue:
-        specifier: 3.4.38
-        version: 3.4.38(typescript@5.5.4)
-
   packages/effects/common-ui:
     dependencies:
       '@vben-core/popup-ui':
@@ -1033,6 +1018,21 @@ importers:
         specifier: ^4.4.3
         version: 4.4.3(vue@3.4.38(typescript@5.5.4))
 
+  packages/effects/plugins:
+    dependencies:
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../preferences
+      '@vueuse/core':
+        specifier: ^11.0.1
+        version: 11.0.1(vue@3.4.38(typescript@5.5.4))
+      echarts:
+        specifier: ^5.5.1
+        version: 5.5.1
+      vue:
+        specifier: 3.4.38
+        version: 3.4.38(typescript@5.5.4)
+
   packages/effects/request:
     dependencies:
       '@vben/locales':
@@ -1132,9 +1132,6 @@ importers:
       '@vben/access':
         specifier: workspace:*
         version: link:../packages/effects/access
-      '@vben/chart-ui':
-        specifier: workspace:*
-        version: link:../packages/effects/chart-ui
       '@vben/common-ui':
         specifier: workspace:*
         version: link:../packages/effects/common-ui
@@ -1153,6 +1150,9 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../packages/effects/plugins
       '@vben/preferences':
         specifier: workspace:*
         version: link:../packages/preferences
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index 86714faf..27818aef 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -104,10 +104,6 @@
       "name": "@vben/access",
       "path": "packages/effects/access",
     },
-    {
-      "name": "@vben/chart-ui",
-      "path": "packages/effects/chart-ui",
-    },
     {
       "name": "@vben/common-ui",
       "path": "packages/effects/common-ui",
@@ -120,6 +116,10 @@
       "name": "@vben/layouts",
       "path": "packages/effects/layouts",
     },
+    {
+      "name": "@vben/plugins",
+      "path": "packages/effects/plugins",
+    },
     {
       "name": "@vben/request",
       "path": "packages/effects/request",