From fee2f2532144fca6c81b1523aeef54165c5263b2 Mon Sep 17 00:00:00 2001
From: hsy <1029150275@qq.com>
Date: 星期二, 25 八月 2026 16:50:38 +0800
Subject: [PATCH] Merge branch 'refs/heads/dev_pro2.0' into fix/hsy/20260812
---
src/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue | 25 ++++++++++++++++++++++---
1 files changed, 22 insertions(+), 3 deletions(-)
diff --git a/src/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/src/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
index 8898556..fbaa8a3 100644
--- a/src/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/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[];
+ /** 鏄惁鍏佽妯悜婊氬姩锛歵ab 杈冨鏃跺惎鐢紝鍚� 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>
--
Gitblit v1.9.3