feat: preference button supports automatic positioning (#4243)

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

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

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'

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

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

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/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/locales/src/langs/en-US.json

@@ -175,6 +175,7 @@
     "position": {
       "title": "Preferences Postion",
       "header": "Header",
+      "auto": "Auto",
       "fixed": "Fixed"
     },
     "sidebar": {

packages/locales/src/langs/zh-CN.json

@@ -175,6 +175,7 @@
     "position": {
       "title": "偏好设置位置",
       "header": "顶栏",
+      "auto": "自动",
       "fixed": "固定"
     },
     "sidebar": {