Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

packages/effects/chart-ui/src/index.ts

@@ -1 +0,0 @@
-export * from './echarts';

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>
 

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"

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"

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>

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

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>

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';
+```
+
+这样做的好处是，应用可以自行选择是否使用插件，而不会因为插件的引入及副作用而导致打包体积增大，只引入需要的插件即可。

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": {

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