diff --git a/.vscode/settings.json b/.vscode/settings.json
index dc206778..6adbc86b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,7 +14,6 @@
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
   "editor.cursorBlinking": "expand",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.largeFileOptimizations": false,
   "editor.accessibilitySupport": "off",
   "editor.cursorSmoothCaretAnimation": "on",
@@ -37,7 +36,34 @@
     "source.fixAll.stylelint": "explicit",
     "source.organizeImports": "never"
   },
-
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   // extensions
   "extensions.ignoreRecommendations": true,
 
@@ -194,7 +220,7 @@
   "i18n-ally.keystyle": "nested",
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
   "vitest.disableWorkspaceWarning": true,
-  "cSpell.words": ["tinymce"]
+  "cSpell.words": ["tinymce"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 4d35e746..eaf502e5 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -28,13 +28,13 @@
   "dependencies": {
     "@tinymce/tinymce-vue": "^6.0.1",
     "@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/essentials/settings.md b/docs/src/en/guide/essentials/settings.md
index 719b1d91..5a7cec18 100644
--- a/docs/src/en/guide/essentials/settings.md
+++ b/docs/src/en/guide/essentials/settings.md
@@ -170,7 +170,7 @@ const defaultPreferences: Preferences = {
     locale: 'zh-CN',
     loginExpiredMode: 'modal',
     name: 'Vben Admin',
-    preferencesButtonPosition: 'fixed',
+    preferencesButtonPosition: 'auto',
     watermark: false,
   },
   breadcrumb: {
diff --git a/docs/src/en/guide/in-depth/access.md b/docs/src/en/guide/in-depth/access.md
index fd06fa28..6a20d6a1 100644
--- a/docs/src/en/guide/in-depth/access.md
+++ b/docs/src/en/guide/in-depth/access.md
@@ -11,7 +11,7 @@ The framework has built-in two types of access control methods:
 
 ## Frontend Access Control
 
-**Implementation Principle**: The permissions for routes are hardcoded on the frontend, specifying which permissions are required to view certain routes. Only general routes are initialized, and routes that require permissions are not added to the route table. After logging in or obtaining user roles through other means, the roles are used to traverse the route table to generate a route table that the role can access. This table is then added to the router instance using `router.addRoutes`, achieving permission filtering.
+**Implementation Principle**: The permissions for routes are hardcoded on the frontend, specifying which permissions are required to view certain routes. Only general routes are initialized, and routes that require permissions are not added to the route table. After logging in or obtaining user roles through other means, the roles are used to traverse the route table to generate a route table that the role can access. This table is then added to the router instance using `router.addRoute`, achieving permission filtering.
 
 **Disadvantage**: The permissions are relatively inflexible; if the backend changes roles, the frontend needs to be adjusted accordingly. This is suitable for systems with relatively fixed roles.
 
@@ -71,7 +71,7 @@ Sometimes, we need the menu to be visible but access to it forbidden. This can b
 
 ## Backend Access Control
 
-**Implementation Principle**: It is achieved by dynamically generating a routing table through an API, which returns data following a certain structure. The frontend processes this data into a recognizable structure, then adds it to the routing instance using `router.addRoutes`, realizing the dynamic generation of permissions.
+**Implementation Principle**: It is achieved by dynamically generating a routing table through an API, which returns data following a certain structure. The frontend processes this data into a recognizable structure, then adds it to the routing instance using `router.addRoute`, realizing the dynamic generation of permissions.
 
 **Disadvantage**: The backend needs to provide a data structure that meets the standards, and the frontend needs to process this structure. This is suitable for systems with more complex permissions.
 
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/essentials/settings.md b/docs/src/guide/essentials/settings.md
index 3bf0eae0..66317400 100644
--- a/docs/src/guide/essentials/settings.md
+++ b/docs/src/guide/essentials/settings.md
@@ -190,7 +190,7 @@ const defaultPreferences: Preferences = {
     locale: 'zh-CN',
     loginExpiredMode: 'modal',
     name: 'Vben Admin',
-    preferencesButtonPosition: 'fixed',
+    preferencesButtonPosition: 'auto',
     watermark: false,
   },
   breadcrumb: {
diff --git a/docs/src/guide/in-depth/access.md b/docs/src/guide/in-depth/access.md
index 25e294d7..1bfee2ef 100644
--- a/docs/src/guide/in-depth/access.md
+++ b/docs/src/guide/in-depth/access.md
@@ -11,7 +11,7 @@ outline: deep
 
 ## 前端访问控制
 
-**实现原理**: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 `router.addRoutes` 添加到路由实例，实现权限的过滤。
+**实现原理**: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 `router.addRoute` 添加到路由实例，实现权限的过滤。
 
 **缺点**: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统
 
@@ -71,7 +71,7 @@ authStore.setUserInfo(userInfo);
 
 ## 后端访问控制
 
-**实现原理**: 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 router.addRoutes 添加到路由实例，实现权限的动态生成。
+**实现原理**: 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 `router.addRoute` 添加到路由实例，实现权限的动态生成。
 
 **缺点**: 后端需要提供符合规范的数据结构，前端需要处理数据结构，适合权限较为复杂的系统。
 
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/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css
index 57ac09f0..aaa52280 100644
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -28,7 +28,7 @@
   #app,
   body,
   html {
-    @apply size-full overscroll-none;
+    @apply !pointer-events-auto size-full overscroll-none;
   }
 
   body {
diff --git a/packages/@core/base/shared/src/utils/__tests__/dom.test.ts b/packages/@core/base/shared/src/utils/__tests__/dom.test.ts
index c3c558fc..df51268a 100644
--- a/packages/@core/base/shared/src/utils/__tests__/dom.test.ts
+++ b/packages/@core/base/shared/src/utils/__tests__/dom.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getElementVisibleRect } from '../dom'; // 假设函数位于 utils.ts 中
+import { getElementVisibleRect } from '../dom';
 
 describe('getElementVisibleRect', () => {
   // 设置浏览器视口尺寸的 mock
diff --git a/packages/@core/base/shared/src/utils/__tests__/letter.test.ts b/packages/@core/base/shared/src/utils/__tests__/letter.test.ts
index 2e4037a2..a4aebaf7 100644
--- a/packages/@core/base/shared/src/utils/__tests__/letter.test.ts
+++ b/packages/@core/base/shared/src/utils/__tests__/letter.test.ts
@@ -7,7 +7,6 @@ import {
   toLowerCaseFirstLetter,
 } from '../letter';
 
-// 编写测试用例
 describe('capitalizeFirstLetter', () => {
   it('should capitalize the first letter of a string', () => {
     expect(capitalizeFirstLetter('hello')).toBe('Hello');
diff --git a/packages/@core/base/shared/src/utils/__tests__/unique.test.ts b/packages/@core/base/shared/src/utils/__tests__/unique.test.ts
index c5ebcacc..0aa9d61f 100644
--- a/packages/@core/base/shared/src/utils/__tests__/unique.test.ts
+++ b/packages/@core/base/shared/src/utils/__tests__/unique.test.ts
@@ -13,8 +13,7 @@ describe('uniqueByField', () => {
 
     const uniqueItems = uniqueByField(items, 'id');
 
-    // Assert expected results
-    expect(uniqueItems).toHaveLength(3); // After deduplication, there should be three objects left
+    expect(uniqueItems).toHaveLength(3);
     expect(uniqueItems).toEqual([
       { id: 1, name: 'Item 1' },
       { id: 2, name: 'Item 2' },
diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts
index 15fffb28..e49a8657 100644
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -11,8 +11,9 @@ type ThemeModeType = 'auto' | 'dark' | 'light';
  * 偏好设置按钮位置
  * fixed 固定在右侧
  * header 顶栏
+ * auto 自动
  */
-type PreferencesButtonPositionType = 'fixed' | 'header';
+type PreferencesButtonPositionType = 'auto' | 'fixed' | 'header';
 
 type BuiltinThemeType =
   | 'custom'
diff --git a/packages/@core/composables/src/index.ts b/packages/@core/composables/src/index.ts
index a41b2199..7ecbd3be 100644
--- a/packages/@core/composables/src/index.ts
+++ b/packages/@core/composables/src/index.ts
@@ -1,4 +1,5 @@
 export * from './use-content-style';
+export * from './use-is-mobile';
 export * from './use-namespace';
 export * from './use-priority-value';
 export * from './use-sortable';
diff --git a/packages/@core/composables/src/use-content-style.ts b/packages/@core/composables/src/use-content-style.ts
index 94aa2148..384d0fa3 100644
--- a/packages/@core/composables/src/use-content-style.ts
+++ b/packages/@core/composables/src/use-content-style.ts
@@ -28,7 +28,7 @@ function useContentStyle() {
       position: 'fixed',
       top: `${top}px`,
       width: `${width}px`,
-      zIndex: 1000,
+      zIndex: 150,
     };
   });
 
diff --git a/packages/@core/composables/src/use-is-mobile.ts b/packages/@core/composables/src/use-is-mobile.ts
new file mode 100644
index 00000000..e35909f1
--- /dev/null
+++ b/packages/@core/composables/src/use-is-mobile.ts
@@ -0,0 +1,7 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+export function useIsMobile() {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('md');
+  return { isMobile };
+}
diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
index c7c88aa5..044ef385 100644
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -20,7 +20,7 @@ const defaultPreferences: Preferences = {
     locale: 'zh-CN',
     loginExpiredMode: 'page',
     name: 'Vben Admin',
-    preferencesButtonPosition: 'fixed',
+    preferencesButtonPosition: 'auto',
     watermark: false,
   },
   breadcrumb: {
diff --git a/packages/@core/preferences/src/use-preferences.ts b/packages/@core/preferences/src/use-preferences.ts
index 03e959fb..ff5dbedf 100644
--- a/packages/@core/preferences/src/use-preferences.ts
+++ b/packages/@core/preferences/src/use-preferences.ts
@@ -149,6 +149,45 @@ function usePreferences() {
     return enable && globalLockScreen;
   });
 
+  /**
+   * @zh_CN 偏好设置按钮位置
+   */
+  const preferencesButtonPosition = computed(() => {
+    const { enablePreferences, preferencesButtonPosition } = preferences.app;
+
+    // 如果没有启用偏好设置按钮
+    if (!enablePreferences) {
+      return {
+        fixed: false,
+        header: false,
+      };
+    }
+
+    const { header, sidebar } = preferences;
+    const headerHidden = header.hidden;
+    const sidebarHidden = sidebar.hidden;
+
+    const contentIsMaximize = headerHidden && sidebarHidden;
+
+    const isHeaderPosition = preferencesButtonPosition === 'header';
+
+    // 如果设置了固定位置
+    if (preferencesButtonPosition !== 'auto') {
+      return {
+        fixed: preferencesButtonPosition === 'fixed',
+        header: isHeaderPosition,
+      };
+    }
+
+    // 如果是全屏模式或者没有固定在顶部，
+    const fixed = contentIsMaximize || isFullContent.value || isMobile.value;
+
+    return {
+      fixed,
+      header: !fixed,
+    };
+  });
+
   return {
     authPanelCenter,
     authPanelLeft,
@@ -168,6 +207,7 @@ function usePreferences() {
     isSideNav,
     keepAlive,
     layout,
+    preferencesButtonPosition,
     sidebarCollapsed,
     theme,
   };
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index 0de22d29..b887005c 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -4,6 +4,8 @@ import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
 
+import { useScrollLock } from '@vueuse/core';
+
 import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
 
 interface Props {
@@ -102,6 +104,7 @@ const expandOnHovering = defineModel<boolean>('expandOnHovering');
 const expandOnHover = defineModel<boolean>('expandOnHover');
 const extraVisible = defineModel<boolean>('extraVisible');
 
+const isLocked = useScrollLock(document.body);
 const slots = useSlots();
 
 const asideRef = shallowRef<HTMLDivElement | null>();
@@ -214,6 +217,7 @@ function handleMouseenter() {
   if (!expandOnHovering.value) {
     collapse.value = false;
   }
+  isLocked.value = true;
   expandOnHovering.value = true;
 }
 
@@ -224,6 +228,7 @@ function handleMouseleave() {
     return;
   }
 
+  isLocked.value = false;
   expandOnHovering.value = false;
   collapse.value = true;
   extraVisible.value = false;
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 7abfa220..2e2c981c 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -242,7 +242,7 @@ const tabbarStyle = computed((): CSSProperties => {
   let marginLeft = 0;
 
   // 如果不是混合导航，tabbar 的宽度为 100%
-  if (!isMixedNav.value) {
+  if (!isMixedNav.value || props.sidebarHidden) {
     width = '100%';
   } else if (sidebarEnable.value) {
     // 鼠标在侧边栏上时，且侧边栏展开时的宽度
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index 11fa8369..b969bdee 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -30,6 +30,8 @@ export class DrawerApi {
     const defaultState: DrawerState = {
       cancelText: '取消',
       closable: true,
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
       confirmLoading: false,
       confirmText: '确定',
       footer: true,
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
index 1d62c511..85bf0f0d 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -7,12 +7,21 @@ export interface DrawerProps {
    * 取消按钮文字
    */
   cancelText?: string;
-
   /**
    * 是否显示右上角的关闭按钮
    * @default true
    */
   closable?: boolean;
+  /**
+   * 点击弹窗遮罩是否关闭弹窗
+   * @default true
+   */
+  closeOnClickModal?: boolean;
+  /**
+   * 按下 ESC 键是否关闭弹窗
+   * @default true
+   */
+  closeOnPressEscape?: boolean;
   /**
    * 确定按钮 loading
    * @default false
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index 81f42630..5d8a904d 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { DrawerProps, ExtendedDrawerApi } from './drawer';
 
-import { usePriorityValue } from '@vben-core/composables';
+import { useIsMobile, usePriorityValue } from '@vben-core/composables';
 import { Info, X } from '@vben-core/icons';
 import {
   Sheet,
@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   drawerApi: undefined,
 });
 
+const { isMobile } = useIsMobile();
 const state = props.drawerApi?.useStore?.();
 
 const title = usePriorityValue('title', props, state);
@@ -43,6 +44,27 @@ const modal = usePriorityValue('modal', props, state);
 const confirmLoading = usePriorityValue('confirmLoading', props, state);
 const cancelText = usePriorityValue('cancelText', props, state);
 const confirmText = usePriorityValue('confirmText', props, state);
+const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
+const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
+
+function interactOutside(e: Event) {
+  if (!closeOnClickModal.value) {
+    e.preventDefault();
+  }
+}
+function escapeKeyDown(e: KeyboardEvent) {
+  if (!closeOnPressEscape.value) {
+    e.preventDefault();
+  }
+}
+// pointer-down-outside
+function pointerDownOutside(e: Event) {
+  const target = e.target as HTMLElement;
+  const isDismissableModal = !!target?.dataset.dismissableModal;
+  if (!closeOnClickModal.value || !isDismissableModal) {
+    e.preventDefault();
+  }
+}
 </script>
 <template>
   <Sheet
@@ -50,7 +72,16 @@ const confirmText = usePriorityValue('confirmText', props, state);
     :open="state?.isOpen"
     @update:open="() => drawerApi?.close()"
   >
-    <SheetContent :class="cn('flex w-[520px] flex-col', props.class, {})">
+    <SheetContent
+      :class="
+        cn('flex w-[520px] flex-col', props.class, {
+          '!w-full': isMobile,
+        })
+      "
+      @escape-key-down="escapeKeyDown"
+      @interact-outside="interactOutside"
+      @pointer-down-outside="pointerDownOutside"
+    >
       <SheetHeader
         :class="
           cn('!flex flex-row items-center justify-between border-b px-6 py-5', {
@@ -59,7 +90,7 @@ const confirmText = usePriorityValue('confirmText', props, state);
         "
       >
         <div>
-          <SheetTitle v-if="title">
+          <SheetTitle v-if="title" class="text-left">
             <slot name="title">
               {{ title }}
 
@@ -111,22 +142,17 @@ const confirmText = usePriorityValue('confirmText', props, state);
 
       <SheetFooter
         v-if="showFooter"
-        class="w-full items-center border-t p-2 px-3"
+        class="w-full flex-row items-center justify-end border-t p-2 px-3"
       >
         <slot name="prepend-footer"></slot>
         <slot name="footer">
-          <VbenButton
-            size="sm"
-            variant="ghost"
-            @click="() => drawerApi?.onCancel()"
-          >
+          <VbenButton variant="ghost" @click="() => drawerApi?.onCancel()">
             <slot name="cancelText">
               {{ cancelText }}
             </slot>
           </VbenButton>
           <VbenButton
             :loading="confirmLoading"
-            size="sm"
             @click="() => drawerApi?.onConfirm()"
           >
             <slot name="confirmText">
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index 57d27ef9..dc3f69ab 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -3,7 +3,7 @@ import type { ExtendedModalApi, ModalProps } from './modal';
 
 import { computed, nextTick, ref, watch } from 'vue';
 
-import { usePriorityValue } from '@vben-core/composables';
+import { useIsMobile, usePriorityValue } from '@vben-core/composables';
 import { Expand, Info, Shrink } from '@vben-core/icons';
 import {
   Dialog,
@@ -46,6 +46,7 @@ const dialogRef = ref();
 const headerRef = ref();
 const footerRef = ref();
 
+const { isMobile } = useIsMobile();
 // const { height: headerHeight } = useElementSize(headerRef);
 // const { height: footerHeight } = useElementSize(footerRef);
 const state = props.modalApi?.useStore?.();
@@ -66,7 +67,11 @@ const draggable = usePriorityValue('draggable', props, state);
 const fullscreenButton = usePriorityValue('fullscreenButton', props, state);
 const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
 const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
-const shouldDraggable = computed(() => draggable.value && !fullscreen.value);
+
+const shouldFullscreen = computed(() => fullscreen.value || isMobile.value);
+const shouldDraggable = computed(
+  () => draggable.value && !shouldFullscreen.value,
+);
 
 const { dragging } = useModalDraggable(dialogRef, headerRef, shouldDraggable);
 
@@ -114,6 +119,14 @@ function escapeKeyDown(e: KeyboardEvent) {
     e.preventDefault();
   }
 }
+// pointer-down-outside
+function pointerDownOutside(e: Event) {
+  const target = e.target as HTMLElement;
+  const isDismissableModal = !!target?.dataset.dismissableModal;
+  if (!closeOnClickModal.value || !isDismissableModal) {
+    e.preventDefault();
+  }
+}
 </script>
 <template>
   <Dialog
@@ -133,8 +146,8 @@ function escapeKeyDown(e: KeyboardEvent) {
           props.class,
           {
             'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
-              fullscreen,
-            'top-1/2 -translate-y-1/2': centered && !fullscreen,
+              shouldFullscreen,
+            'top-1/2 -translate-y-1/2': centered && !shouldFullscreen,
             'duration-300': !dragging,
           },
         )
@@ -143,6 +156,7 @@ function escapeKeyDown(e: KeyboardEvent) {
       close-class="top-4"
       @escape-key-down="escapeKeyDown"
       @interact-outside="interactOutside"
+      @pointer-down-outside="pointerDownOutside"
     >
       <DialogHeader
         ref="headerRef"
@@ -156,7 +170,7 @@ function escapeKeyDown(e: KeyboardEvent) {
           )
         "
       >
-        <DialogTitle v-if="title">
+        <DialogTitle v-if="title" class="text-left">
           <slot name="title">
             {{ title }}
 
@@ -191,7 +205,7 @@ function escapeKeyDown(e: KeyboardEvent) {
 
       <VbenIconButton
         v-if="fullscreenButton"
-        class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-4 size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+        class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-4 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
         @click="handleFullscreen"
       >
         <Shrink v-if="fullscreen" class="size-3.5" />
@@ -201,22 +215,22 @@ function escapeKeyDown(e: KeyboardEvent) {
       <DialogFooter
         v-if="showFooter"
         ref="footerRef"
-        :class="cn('items-center border-t p-2', props.footerClass)"
+        :class="
+          cn(
+            'flex-row items-center justify-end border-t p-2',
+            props.footerClass,
+          )
+        "
       >
         <slot name="prepend-footer"></slot>
         <slot name="footer">
-          <VbenButton
-            size="sm"
-            variant="ghost"
-            @click="() => modalApi?.onCancel()"
-          >
+          <VbenButton variant="ghost" @click="() => modalApi?.onCancel()">
             <slot name="cancelText">
               {{ cancelText }}
             </slot>
           </VbenButton>
           <VbenButton
             :loading="confirmLoading"
-            size="sm"
             @click="() => modalApi?.onConfirm()"
           >
             <slot name="confirmText">
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index cbce9c52..01f01e0c 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -94,7 +94,7 @@ async function checkProps(api: ExtendedModalApi, attrs: Record<string, any>) {
     if (stateKeys.has(attr)) {
       // connectedComponent存在时，不要传入Modal的props，会造成复杂度提升，如果你需要修改Modal的props，请使用 useModal 或者api
       console.warn(
-        `[Vben Modal]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Modal, please use useModal or api.`,
+        `[Vben Modal]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Modal, please use useVbenModal or api.`,
       );
     }
   }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
index f40543b6..efcd2686 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
@@ -45,6 +45,7 @@ defineExpose({
   <DialogPortal>
     <DialogOverlay
       class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000] backdrop-blur-sm"
+      data-dismissable-modal="true"
       @click="() => emits('close')"
     />
     <DialogContent
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
index 1f795381..d1c4ef1f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetContent.vue
@@ -40,6 +40,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <DialogPortal>
     <DialogOverlay
       class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]"
+      data-dismissable-modal="true"
     />
     <DialogContent
       :class="cn(sheetVariants({ side }), 'z-[1000]', props.class)"
diff --git a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
index 72529d59..a56b3821 100644
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
+++ b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@@ -73,6 +73,7 @@ export function useTabsViewScroll(props: TabsProps) {
     resizeObserver = new ResizeObserver(
       useDebounceFn((_entries: ResizeObserverEntry[]) => {
         calcShowScrollbarButton();
+        scrollToActiveIntoView();
       }, 100),
     );
     resizeObserver.observe(viewportEl);
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/layouts/src/basic/header/header.vue b/packages/effects/layouts/src/basic/header/header.vue
index 46cec6f7..3febc93a 100644
--- a/packages/effects/layouts/src/basic/header/header.vue
+++ b/packages/effects/layouts/src/basic/header/header.vue
@@ -28,7 +28,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 const accessStore = useAccessStore();
-const { globalSearchShortcutKey } = usePreferences();
+const { globalSearchShortcutKey, preferencesButtonPosition } = usePreferences();
 const slots = useSlots();
 const rightSlots = computed(() => {
   const list = [{ index: 100, name: 'user-dropdown' }];
@@ -39,10 +39,7 @@ const rightSlots = computed(() => {
     });
   }
 
-  if (
-    preferences.app.enablePreferences &&
-    preferences.app.preferencesButtonPosition === 'header'
-  ) {
+  if (preferencesButtonPosition.value.header) {
     list.push({
       index: 10,
       name: 'preferences',
@@ -121,7 +118,7 @@ const leftSlots = computed(() => {
           <GlobalSearch
             :enable-shortcut-key="globalSearchShortcutKey"
             :menus="accessStore.accessMenus"
-            class="mr-4"
+            class="mr-1 sm:mr-4"
           />
         </template>
 
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index f575ca5a..af12deff 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -40,6 +40,7 @@ const {
   isMobile,
   isSideMixedNav,
   layout,
+  preferencesButtonPosition,
   sidebarCollapsed,
   theme,
 } = usePreferences();
@@ -326,12 +327,7 @@ const headerSlots = computed(() => {
         <slot v-if="lockStore.isLockScreen" name="lock-screen"></slot>
       </Transition>
 
-      <template
-        v-if="
-          preferences.app.enablePreferences &&
-          preferences.app.preferencesButtonPosition === 'fixed'
-        "
-      >
+      <template v-if="preferencesButtonPosition.fixed">
         <Preferences
           class="z-100 fixed bottom-20 right-0"
           @clear-preferences-and-logout="clearPreferencesAndLogout"
diff --git a/packages/effects/layouts/src/widgets/global-search/global-search.vue b/packages/effects/layouts/src/widgets/global-search/global-search.vue
index e69aa9af..a388fd4e 100644
--- a/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -127,7 +127,7 @@ onMounted(() => {
       @click="toggleOpen()"
     >
       <Search
-        class="text-muted-foreground group-hover:text-foreground size-3 group-hover:opacity-100"
+        class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
       />
       <span
         class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index a3b473bd..e08aa625 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -159,7 +159,7 @@ function toggleUnlockForm() {
     </transition>
 
     <div
-      class="enter-y absolute bottom-5 w-full text-center text-gray-300 xl:text-xl 2xl:text-3xl"
+      class="enter-y absolute bottom-5 w-full text-center xl:text-xl 2xl:text-3xl"
     >
       <div v-if="showUnlockForm" class="enter-x mb-2 text-3xl">
         {{ hour }}:{{ minute }} <span class="text-lg">{{ meridiem }}</span>
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue
index 80ad0f24..2cfee0ff 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue
@@ -24,6 +24,10 @@ const appPreferencesButtonPosition = defineModel<string>(
 );
 
 const positionItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.position.auto'),
+    value: 'auto',
+  },
   {
     label: $t('preferences.position.header'),
     value: 'header',
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences.vue b/packages/effects/layouts/src/widgets/preferences/preferences.vue
index 6ee22698..9479adb2 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences.vue
@@ -55,7 +55,7 @@ const listen = computed(() => {
 </script>
 <template>
   <div>
-    <Drawer v-bind="attrs" v-on="listen" />
+    <Drawer v-bind="{ ...$attrs, ...attrs }" v-on="listen" />
 
     <div @click="() => drawerApi.open()">
       <slot>
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/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json
index 90afe51b..b8408644 100644
--- a/packages/locales/src/langs/en-US.json
+++ b/packages/locales/src/langs/en-US.json
@@ -182,6 +182,7 @@
     "position": {
       "title": "Preferences Postion",
       "header": "Header",
+      "auto": "Auto",
       "fixed": "Fixed"
     },
     "sidebar": {
diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json
index 16cee8fd..46ceb599 100644
--- a/packages/locales/src/langs/zh-CN.json
+++ b/packages/locales/src/langs/zh-CN.json
@@ -182,6 +182,7 @@
     "position": {
       "title": "偏好设置位置",
       "header": "顶栏",
+      "auto": "自动",
       "fixed": "固定"
     },
     "sidebar": {
diff --git a/packages/utils/src/helpers/get-popup-container.ts b/packages/utils/src/helpers/get-popup-container.ts
new file mode 100644
index 00000000..ca5a72dd
--- /dev/null
+++ b/packages/utils/src/helpers/get-popup-container.ts
@@ -0,0 +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/packages/utils/src/helpers/index.ts b/packages/utils/src/helpers/index.ts
index 90c45a24..da2cd8d7 100644
--- a/packages/utils/src/helpers/index.ts
+++ b/packages/utils/src/helpers/index.ts
@@ -2,6 +2,7 @@ export * from './find-menu-by-path';
 export * from './generate-menus';
 export * from './generate-routes-backend';
 export * from './generate-routes-frontend';
+export * from './get-popup-container';
 export * from './merge-route-modules';
 export * from './reset-routes';
 export * from './unmount-global-loading';
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 09e0d7ab..6ba23fe5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,9 +138,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
@@ -159,6 +156,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
@@ -226,9 +226,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
@@ -247,6 +244,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
@@ -293,9 +293,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
@@ -314,6 +311,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
@@ -928,21 +928,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':
@@ -1061,6 +1046,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':
@@ -1160,9 +1160,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
@@ -1181,6 +1178,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",
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 00000000..f00d6f68
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1,3 @@
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace(['vitest.config.ts']);