chore: 新增是否开启首选项导航栏（外观、布局、快捷键、通用）吸顶效果，调整部分样式 (#6804)

3 months ago · 59097e2466
parent 2ce161e585
commit 59097e2466
8 changed files with 65 additions and 11 deletions
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@ -22,6 +22,7 @@ const defaultPreferences: Preferences = {
    enableCheckUpdates: true,
    enablePreferences: true,
    enableRefreshToken: false,
+    enableStickyPreferencesNavigationBar: true,
    isMobile: false,
    layout: 'sidebar-nav',
    locale: 'zh-CN',
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@ -59,6 +59,10 @@ interface AppPreferences {
   * @zh_CN 是否开启refreshToken
   */
  enableRefreshToken: boolean;
+  /**
+   * @zh_CN 是否开启首选项导航栏吸顶效果
+   */
+  enableStickyPreferencesNavigationBar: boolean;
  /** 是否移动端 */
  isMobile: boolean;
  /** 布局方式 */
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@ -35,16 +35,24 @@ const tabsIndicatorStyle = computed(() => {
    width: `${(100 / props.tabs.length).toFixed(0)}%`,
  };
 });
+
+function activeClass(tab: string): string[] {
+  return tab === activeTab.value ? ['!font-bold', 'text-primary'] : [];
+}
 </script>

 <template>
  <Tabs v-model="activeTab" :default-value="getDefaultValue">
-    <TabsList :style="tabsStyle" class="bg-accent relative grid w-full">
+    <TabsList
+      :style="tabsStyle"
+      class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
+    >
      <TabsIndicator :style="tabsIndicatorStyle" />
      <template v-for="tab in tabs" :key="tab.value">
        <TabsTrigger
          :value="tab.value"
-          class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
+          :class="activeClass(tab.value)"
+          class="hover:text-primary z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
        >
          {{ tab.label }}
        </TabsTrigger>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-1 transition-[width,transform] duration-300',
+        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
        props.class,
      )
    "
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/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"
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/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>
--- a/packages/locales/src/langs/en-US/preferences.json
+++ b/packages/locales/src/langs/en-US/preferences.json
@ -1,6 +1,8 @@
 {
  "title": "Preferences",
  "subtitle": "Customize Preferences & Preview in Real Time",
+  "enableStickyPreferencesNavigationBar": "Enable sticky preferences navigation bar",
+  "disableStickyPreferencesNavigationBar": "Disable sticky preferences navigation bar",
  "resetTip": "Data has changed, click to reset",
  "resetTitle": "Reset Preferences",
  "resetSuccess": "Preferences reset successfully",
--- a/packages/locales/src/langs/zh-CN/preferences.json
+++ b/packages/locales/src/langs/zh-CN/preferences.json
@ -1,6 +1,8 @@
 {
  "title": "偏好设置",
  "subtitle": "自定义偏好设置 & 实时预览",
+  "enableStickyPreferencesNavigationBar": "开启首选项导航栏吸顶效果",
+  "disableStickyPreferencesNavigationBar": "关闭首选项导航栏吸顶效果",
  "resetTitle": "重置偏好设置",
  "resetTip": "数据有变化，点击可进行重置",
  "resetSuccess": "重置偏好设置成功",