feat(preferences): 公司品牌信息化编辑与全局联动（登录页/菜单栏/网页标题），偏好设置 tab

liu

6 天以前 dab1e0a3e0b1279ee7be77d359ffc93a831455d4

 src/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue

@@ -5,17 +5,22 @@

import { TabsTrigger } from 'reka-ui';

import { cn } from '../../../../../base/shared/src/utils';

import { Tabs, TabsContent, TabsList } from '../../ui';
import TabsIndicator from './tabs-indicator.vue';

interface Props {
  defaultValue?: string;
  tabs?: SegmentedItem[];
  /** 是否允许横向滚动：tab 较多时启用，各 tab 按内容宽度排列，超出部分可滑动 */
  scrollable?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  defaultValue: '',
  tabs: () => [],
  scrollable: false,
});

const activeTab = defineModel<string>();
@@ -25,12 +30,18 @@
});

const tabsStyle = computed(() => {
  if (props.scrollable) {
    return undefined;
  }
  return {
    'grid-template-columns': `repeat(${props.tabs.length}, minmax(0, 1fr))`,
  };
});

const tabsIndicatorStyle = computed(() => {
  if (props.scrollable) {
    return undefined;
  }
  return {
    width: `${(100 / props.tabs.length).toFixed(0)}%`,
  };
@@ -45,14 +56,22 @@
  <Tabs v-model="activeTab" :default-value="getDefaultValue">
    <TabsList
      :style="tabsStyle"
      class="bg-accent outline-heavy! relative grid w-full outline-2!"
      :class="
        cn(
          'bg-accent outline-heavy! relative outline-2!',
          // 可滚动模式：左对齐（覆盖 reka-ui 的 justify-center，否则内容超宽时左侧被挤出且无法滚动）、全宽、横向滚动
          scrollable
            ? 'flex! w-full! overflow-x-auto justify-start!'
            : 'grid w-full',
        )
      "
    >
      <TabsIndicator :style="tabsIndicatorStyle" />
      <TabsIndicator v-if="!scrollable" :style="tabsIndicatorStyle" />
      <template v-for="tab in tabs" :key="tab.value">
        <TabsTrigger
          :value="tab.value"
          :class="activeClass(tab.value)"
          class="hover:text-primary z-20 inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50"
          class="hover:text-primary z-20 inline-flex shrink-0 items-center justify-center rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50"
        >
          {{ tab.label }}
        </TabsTrigger>