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

packages/effects/layouts/src/basic/layout.vue

@@ -158,7 +158,9 @@ function clickLogo() {
 function autoCollapseMenuByRouteMeta(route: RouteLocationNormalizedLoaded) {
   // 只在双列模式下生效
   if (
-    preferences.app.layout === 'sidebar-mixed-nav' &&
+    ['header-mixed-nav', 'sidebar-mixed-nav'].includes(
+      preferences.app.layout,
+    ) &&
     route.meta &&
     route.meta.hideInMenu
   ) {

packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -134,14 +134,14 @@ watch(
           <template v-if="theme.type !== 'custom'">
             <div
               :style="{ backgroundColor: theme.color }"
-              class="mx-10 my-2 size-5 rounded-md"
+              class="mx-9 my-2 size-5 rounded-md"
             ></div>
           </template>
           <template v-else>
-            <div class="size-full px-10 py-2" @click.stop="selectColor">
+            <div class="size-full px-9 py-2" @click.stop="selectColor">
               <div class="flex-center relative size-5 rounded-sm">
                 <UserRoundPen
-                  class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
+                  class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
                 />
                 <input
                   ref="colorInput"

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -16,7 +16,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
 
-import { Copy, RotateCw } from '@vben/icons';
+import { Copy, Pin, PinOff, RotateCw } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import {
   clearPreferencesCache,
@@ -69,6 +69,9 @@ const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
 const appWatermark = defineModel<boolean>('appWatermark');
 const appWatermarkContent = defineModel<string>('appWatermarkContent');
 const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
+const appEnableStickyPreferencesNavigationBar = defineModel<boolean>(
+  'appEnableStickyPreferencesNavigationBar',
+);
 const appPreferencesButtonPosition = defineModel<PreferencesButtonPositionType>(
   'appPreferencesButtonPosition',
 );
@@ -241,7 +244,7 @@ async function handleReset() {
     <Drawer
       :description="$t('preferences.subtitle')"
       :title="$t('preferences.title')"
-      class="sm:max-w-sm"
+      class="!border-0 sm:max-w-sm"
     >
       <template #extra>
         <div class="flex items-center">
@@ -249,18 +252,44 @@ async function handleReset() {
             :disabled="!diffPreference"
             :tooltip="$t('preferences.resetTip')"
             class="relative"
+            @click="handleReset"
           >
             <span
               v-if="diffPreference"
               class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
             ></span>
-            <RotateCw class="size-4" @click="handleReset" />
+            <RotateCw class="size-4" />
+          </VbenIconButton>
+          <VbenIconButton
+            :tooltip="
+              appEnableStickyPreferencesNavigationBar
+                ? $t('preferences.disableStickyPreferencesNavigationBar')
+                : $t('preferences.enableStickyPreferencesNavigationBar')
+            "
+            class="relative"
+            @click="
+              () =>
+                (appEnableStickyPreferencesNavigationBar =
+                  !appEnableStickyPreferencesNavigationBar)
+            "
+          >
+            <PinOff
+              v-if="appEnableStickyPreferencesNavigationBar"
+              class="size-4"
+            />
+            <Pin v-else class="size-4" />
           </VbenIconButton>
         </div>
       </template>
 
-      <div class="p-1">
-        <VbenSegmented v-model="activeTab" :tabs="tabs">
+      <div>
+        <VbenSegmented
+          v-model="activeTab"
+          :tabs="tabs"
+          :class="{
+            'sticky-tabs-header': appEnableStickyPreferencesNavigationBar,
+          }"
+        >
           <template #general>
             <Block :title="$t('preferences.general')">
               <General
@@ -449,3 +478,11 @@ async function handleReset() {
     </Drawer>
   </div>
 </template>
+
+<style scoped>
+:deep(.sticky-tabs-header [role='tablist']) {
+  position: sticky;
+  top: -12px;
+  z-index: 10;
+}
+</style>