@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/tabs/index.tsx

@@ -0,0 +1,379 @@
+/**
+ * 选项卡 Tabs
+ *
+ * 将内容组织到不同面板中，每次只展示一个面板的内容；提供平级区域将大块内容收纳与展现。
+ *
+ * @when
+ * - 内容可按主题/类别分组，且同时只需关注一个分组（页面级主导航首选 line）
+ * - 紧凑互斥单选场景（视图切换 / 时间区间 / 主题档），用 capsule 取代 Segmented
+ * - 弱视觉的次级切换（仅靠颜色区分），用 text
+ * - 包裹型 card 切换（页面局部分块），用 wrapped
+ *
+ * 组合结构：Tabs > TabsList (+extra) > TabsTrigger / TabsContent
+ */
+
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+// ─── Context ────────────────────────────────────────────────────────────────
+
+type TabsVariant = 'line' | 'capsule' | 'text' | 'wrapped';
+type TabsSize = 'sm' | 'default';
+
+const TabsListContext = React.createContext<{
+  variant: TabsVariant;
+  size: TabsSize;
+}>({ variant: 'line', size: 'default' });
+
+// ─── Tabs Root ──────────────────────────────────────────────────────────────
+
+/** 选项卡根容器，管理激活状态与方向。 */
+export interface TabsProps
+  extends Omit<
+    React.ComponentProps<typeof TabsPrimitive.Root>,
+    | 'value'
+    | 'defaultValue'
+    | 'onValueChange'
+    | 'orientation'
+    | 'dir'
+    | 'activationMode'
+  > {
+  /** 受控激活项的 value。 */
+  value?: string;
+  /** 非受控初始激活项的 value。 */
+  defaultValue?: string;
+  /**
+   * 激活项变化回调。
+   * @param value 当前激活项的 value
+   */
+  onValueChange?: (value: string) => void;
+  /** 选项卡方向。 @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /** 文字方向。 */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * 激活项触发方式。
+   * - `automatic`（默认）：键盘导航时自动激活
+   * - `manual`：键盘导航时需手动 Enter / Space 才激活
+   * @default 'automatic'
+   */
+  activationMode?: 'automatic' | 'manual';
+}
+
+/** 选项卡根容器，管理激活状态与方向。 */
+function Tabs({ className, orientation = 'horizontal', ...props }: TabsProps) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        'group/tabs flex data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:gap-0 data-[orientation=vertical]:gap-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ─── TabsList ───────────────────────────────────────────────────────────────
+
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex items-center group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:items-stretch',
+  {
+    variants: {
+      variant: {
+        // 下划线型（默认，等价 cd `pure`）：底线/右线由 wrapper span 绘制（固定不随滚动）
+        line: 'w-full justify-start gap-4 bg-transparent text-muted-foreground group-data-[orientation=vertical]/tabs:w-fit group-data-[orientation=vertical]/tabs:gap-1',
+        // 胶囊型：muted 底容器 + 圆角 + 选中白底 shadow（紧凑互斥单选）
+        capsule:
+          'w-fit justify-center gap-1 rounded-md bg-muted p-0.5 text-muted-foreground',
+        // 文本型：纯文本切换，trigger 间 ::after 竖线分隔
+        text: 'w-fit justify-start gap-0 bg-transparent text-muted-foreground',
+        // 包裹型：每个 trigger 完整边框，相邻共边（-ml-px），选中蓝色 outline
+        wrapped: 'w-full justify-start bg-transparent text-muted-foreground',
+      },
+      size: {
+        sm: '',
+        default: '',
+      },
+    },
+    compoundVariants: [
+      { variant: 'capsule', size: 'sm', class: 'h-9' },
+      { variant: 'capsule', size: 'default', class: 'h-10' },
+    ],
+    defaultVariants: { variant: 'line', size: 'default' },
+  },
+);
+
+export interface TabsListProps
+  extends Omit<React.ComponentProps<typeof TabsPrimitive.List>, 'children'>,
+    VariantProps<typeof tabsListVariants> {
+  /**
+   * 视觉风格。
+   * - `line`：下划线型（默认），页面级主导航 / 大区块切换首选
+   * - `capsule`：胶囊型，muted 底色 + 选中白底，取代 Segmented
+   * - `text`：纯文本切换，弱视觉次级导航
+   * - `wrapped`：包裹型 card，页面局部分块
+   * @default 'line'
+   */
+  variant?: TabsVariant;
+  /**
+   * 尺寸档位。
+   * @default 'default'
+   */
+  size?: TabsSize;
+  /** 右侧附加内容（仅 `variant='line'` 视觉对齐，常见于刷新/新建按钮）。 */
+  extra?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+/**
+ * 选项卡标签列表容器；通过 Context 把 variant/size 透传给 TabsTrigger。
+ * 溢出时自动显示左右箭头滚动。
+ *
+ * 架构说明（line variant）：
+ * - wrapper (relative isolate) 的 ::after 画底线 — 固定不随滚动
+ * - list (overflow-x-auto pb-px) 做横向滚动容器
+ * - trigger (-mb-px border-b-2) 选中线覆盖底线（z 层级 > after:-z-10）
+ */
+function TabsList({
+  className,
+  variant = 'line',
+  size = 'default',
+  extra,
+  children,
+  ...props
+}: TabsListProps) {
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const [overflow, setOverflow] = React.useState({ left: false, right: false });
+
+  const checkOverflow = React.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setOverflow({
+      left: scrollLeft > 1,
+      right: scrollLeft < scrollWidth - clientWidth - 1,
+    });
+  }, []);
+
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    checkOverflow();
+    el.addEventListener('scroll', checkOverflow, { passive: true });
+    const ro = new ResizeObserver(checkOverflow);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener('scroll', checkOverflow);
+      ro.disconnect();
+    };
+  }, [checkOverflow]);
+
+  const scroll = (dir: 'left' | 'right') => {
+    scrollRef.current?.scrollBy({
+      left: dir === 'left' ? -200 : 200,
+      behavior: 'smooth',
+    });
+  };
+
+  const hasOverflow = overflow.left || overflow.right;
+
+  return (
+    <div
+      data-slot="tabs-list-wrapper"
+      className={cn(
+        'relative isolate flex items-center',
+        'mb-3 group-data-[orientation=vertical]/tabs:mb-0',
+      )}
+    >
+      {/* line variant: 固定参考线（不随滚动），z:-10 在 trigger 内容层之下
+          horizontal: 底线（h-px, bottom-0, inset-x-0）
+          vertical: 右线（w-px, right-0, inset-y-0） */}
+      {variant === 'line' && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute -z-10 bg-border bottom-0 left-0 right-0 h-px group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:h-auto group-data-[orientation=vertical]/tabs:w-px"
+        />
+      )}
+      <TabsPrimitive.List
+        ref={scrollRef as React.Ref<HTMLDivElement>}
+        data-slot="tabs-list"
+        data-variant={variant}
+        data-size={size}
+        className={cn(
+          tabsListVariants({ variant, size }),
+          // line/wrapped: 占满，capsule/text: 自适应
+          (variant === 'line' || variant === 'wrapped') &&
+            'min-w-0 flex-1 overflow-x-auto scrollbar-none group-data-[orientation=vertical]/tabs:min-w-fit group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:overflow-x-visible',
+          // overflow 隐式 clip → 加 pb-px/pr-px 给 1px 余量让 active border 完整可见
+          variant === 'line' &&
+            'pb-px group-data-[orientation=vertical]/tabs:pb-0 group-data-[orientation=vertical]/tabs:pr-px',
+          className,
+        )}
+        {...props}
+      >
+        <TabsListContext.Provider value={{ variant, size }}>
+          {children}
+        </TabsListContext.Provider>
+      </TabsPrimitive.List>
+      {/* 左右箭头：始终渲染同一 DOM 位置，通过 hidden 控制显隐 */}
+      <button
+        type="button"
+        data-slot="tabs-nav-prev"
+        aria-label="向左滚动"
+        tabIndex={-1}
+        disabled={!overflow.left}
+        onClick={() => scroll('left')}
+        className={cn(
+          'inline-flex size-7 shrink-0 cursor-pointer items-center justify-center text-muted-foreground transition-colors hover:text-foreground disabled:cursor-default disabled:opacity-30',
+          !hasOverflow && 'hidden',
+        )}
+      >
+        <ChevronLeftIcon className="size-4" />
+      </button>
+      <button
+        type="button"
+        data-slot="tabs-nav-next"
+        aria-label="向右滚动"
+        tabIndex={-1}
+        disabled={!overflow.right}
+        onClick={() => scroll('right')}
+        className={cn(
+          'inline-flex size-7 shrink-0 cursor-pointer items-center justify-center text-muted-foreground transition-colors hover:text-foreground disabled:cursor-default disabled:opacity-30',
+          !hasOverflow && 'hidden',
+        )}
+      >
+        <ChevronRightIcon className="size-4" />
+      </button>
+      {extra && (
+        <div data-slot="tabs-extra" className="shrink-0">
+          {extra}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── TabsTrigger ────────────────────────────────────────────────────────────
+
+const tabsTriggerVariants = cva(
+  'group/tabs-trigger relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap font-normal outline-none transition-all hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
+  {
+    variants: {
+      variant: {
+        line: '-mb-px border-b-2 border-transparent text-muted-foreground data-[state=active]:border-primary data-[state=active]:text-foreground group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:border-b-0 group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:justify-start',
+        capsule:
+          'rounded-md text-muted-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        // text 模式：trigger 间 ::after 竖线分隔（8px 高、1px 宽、垂直居中、border 色）
+        text: 'text-muted-foreground after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-px after:bg-border last:after:hidden data-[state=active]:text-primary',
+        wrapped:
+          '-ml-px first:ml-0 first:rounded-l-sm last:rounded-r-sm border border-border text-muted-foreground data-[state=active]:z-10 data-[state=active]:border-primary data-[state=active]:text-foreground',
+      },
+      size: {
+        sm: 'h-9 px-4 text-xs',
+        default: 'h-10 px-4 text-sm',
+      },
+    },
+    compoundVariants: [
+      { variant: 'capsule', size: 'sm', class: 'h-8' },
+      { variant: 'capsule', size: 'default', class: 'h-9' },
+      { variant: 'text', size: 'sm', class: 'h-9 px-4' },
+      { variant: 'text', size: 'default', class: 'h-10 px-4' },
+    ],
+    defaultVariants: { variant: 'line', size: 'default' },
+  },
+);
+
+export interface TabsTriggerProps
+  extends React.ComponentProps<typeof TabsPrimitive.Trigger> {
+  /** 显式覆盖来自 TabsList 的 variant（罕用）。 */
+  variant?: TabsVariant;
+  /** 显式覆盖来自 TabsList 的 size（罕用）。 */
+  size?: TabsSize;
+  /** 单个选项卡是否可关闭（在 trigger 内显示 X 关闭图标）。 @default false */
+  closable?: boolean;
+  /** 关闭回调（点击 X 时触发，参数为当前 trigger 的 value）。 */
+  onClose?: (value: string) => void;
+}
+
+/** 单个选项卡触发器（标签）。 */
+function TabsTrigger({
+  className,
+  variant,
+  size,
+  closable,
+  onClose,
+  value,
+  children,
+  ...props
+}: TabsTriggerProps) {
+  const ctx = React.useContext(TabsListContext);
+  const v = variant ?? ctx.variant;
+  const s = size ?? ctx.size;
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      data-variant={v}
+      data-size={s}
+      value={value}
+      className={cn(tabsTriggerVariants({ variant: v, size: s }), className)}
+      {...props}
+    >
+      {children}
+      {closable && (
+        <span
+          role="button"
+          aria-label="关闭"
+          tabIndex={-1}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose?.(value as string);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+              onClose?.(value as string);
+            }
+          }}
+          className="-mr-1 ml-1 inline-flex size-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <XIcon className="size-3" />
+        </span>
+      )}
+    </TabsPrimitive.Trigger>
+  );
+}
+
+// ─── TabsContent ────────────────────────────────────────────────────────────
+
+/** 选项卡面板内容区。 */
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 text-xs outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  tabsListVariants,
+  tabsTriggerVariants,
+};

package/src/components/tabs/meta.md

@@ -0,0 +1,244 @@
+# Tabs
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+选项卡 Tabs
+将内容组织到不同面板中，每次只展示一个面板的内容；提供平级区域将大块内容收纳与展现。
+
+## 使用场景
+
+- 内容可按主题/类别分组，且同时只需关注一个分组（页面级主导航首选 line）
+- 紧凑互斥单选场景（视图切换 / 时间区间 / 主题档），用 capsule 取代 Segmented
+- 弱视觉的次级切换（仅靠颜色区分），用 text
+- 包裹型 card 切换（页面局部分块），用 wrapped
+- 组合结构：Tabs > TabsList (+extra) > TabsTrigger / TabsContent
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `value` | `string` | – | – | 受控激活项的 value。 |
+| `defaultValue` | `string` | – | – | 非受控初始激活项的 value。 |
+| `onValueChange` | `(value: string) => void` | – | – | 激活项变化回调。 |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | – | 选项卡方向。 |
+| `dir` | `'ltr' \| 'rtl'` | – | – | 文字方向。 |
+| `activationMode` | `'automatic' \| 'manual'` | `'automatic'` | – | 激活项触发方式。 - `automatic`（默认）：键盘导航时自动激活 - `manual`：键盘导航时需手动 Enter / Space 才激活 |
+| `variant` | `TabsVariant` | `'line'` | – | 视觉风格。 - `line`：下划线型（默认），页面级主导航 / 大区块切换首选 - `capsule`：胶囊型，muted 底色 + 选中白底，取代 Segmented - `text`：纯文本切换，弱视觉次级导航 - `wrapped`：包裹型 card，页面局部分块 |
+| `size` | `TabsSize` | `'default'` | – | 尺寸档位。 |
+| `extra` | `React.ReactNode` | – | – | 右侧附加内容（仅 `variant='line'` 视觉对齐，常见于刷新/新建按钮）。 |
+| `children` | `React.ReactNode` | – | – | – |
+| `variant` | `TabsVariant` | – | – | 显式覆盖来自 TabsList 的 variant（罕用）。 |
+| `size` | `TabsSize` | – | – | 显式覆盖来自 TabsList 的 size（罕用）。 |
+| `closable` | `boolean` | `false` | – | 单个选项卡是否可关闭（在 trigger 内显示 X 关闭图标）。 |
+| `onClose` | `(value: string) => void` | – | – | 关闭回调（点击 X 时触发，参数为当前 trigger 的 value）。 |
+
+## 示例
+
+### Capsule
+
+胶囊型（capsule variant）：muted 底色容器 + 选中白底，紧凑互斥单选场景。
+
+```tsx
+<Tabs defaultValue="day">
+  <TabsList variant="capsule">
+    <TabsTrigger value="day">今日</TabsTrigger>
+    <TabsTrigger value="week">本周</TabsTrigger>
+    <TabsTrigger value="month">本月</TabsTrigger>
+  </TabsList>
+  <TabsContent value="day">
+    <p className="text-muted-foreground">今日数据汇总。</p>
+  </TabsContent>
+  <TabsContent value="week">
+    <p className="text-muted-foreground">本周数据汇总。</p>
+  </TabsContent>
+  <TabsContent value="month">
+    <p className="text-muted-foreground">本月数据汇总。</p>
+  </TabsContent>
+</Tabs>
+```
+
+### Text
+
+文本型（text variant）：纯文本切换，无背景无下划线，仅颜色变化。
+
+```tsx
+<Tabs defaultValue="overview">
+  <TabsList variant="text">
+    <TabsTrigger value="overview">概览</TabsTrigger>
+    <TabsTrigger value="analytics">分析</TabsTrigger>
+    <TabsTrigger value="reports">报告</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">
+    <p className="text-muted-foreground">系统运行概览。</p>
+  </TabsContent>
+  <TabsContent value="analytics">
+    <p className="text-muted-foreground">详细分析图表。</p>
+  </TabsContent>
+  <TabsContent value="reports">
+    <p className="text-muted-foreground">定期生成的报告。</p>
+  </TabsContent>
+</Tabs>
+```
+
+### Wrapped
+
+包裹型（wrapped variant）：每项是独立 card，选中态蓝色 outline。
+
+```tsx
+<Tabs defaultValue="general">
+  <TabsList variant="wrapped">
+    <TabsTrigger value="general">通用</TabsTrigger>
+    <TabsTrigger value="advanced">高级</TabsTrigger>
+    <TabsTrigger value="experimental">实验</TabsTrigger>
+  </TabsList>
+  <TabsContent value="general">
+    <p className="text-muted-foreground">通用设置项。</p>
+  </TabsContent>
+  <TabsContent value="advanced">
+    <p className="text-muted-foreground">高级配置选项。</p>
+  </TabsContent>
+  <TabsContent value="experimental">
+    <p className="text-muted-foreground">实验性功能开关。</p>
+  </TabsContent>
+</Tabs>
+```
+
+### Sizes
+
+尺寸档位 sm / default。
+
+```tsx
+<div className="flex flex-col gap-6">
+  <Tabs defaultValue="a">
+    <TabsList size="sm">
+      <TabsTrigger value="a">小尺寸 A</TabsTrigger>
+      <TabsTrigger value="b">小尺寸 B</TabsTrigger>
+    </TabsList>
+  </Tabs>
+  <Tabs defaultValue="a">
+    <TabsList size="default">
+      <TabsTrigger value="a">默认 A</TabsTrigger>
+      <TabsTrigger value="b">默认 B</TabsTrigger>
+    </TabsList>
+  </Tabs>
+  <Tabs defaultValue="a">
+    <TabsList variant="capsule" size="sm">
+      <TabsTrigger value="a">小</TabsTrigger>
+      <TabsTrigger value="b">中</TabsTrigger>
+    </TabsList>
+  </Tabs>
+  <Tabs defaultValue="a">
+    <TabsList variant="capsule" size="default">
+      <TabsTrigger value="a">小</TabsTrigger>
+      <TabsTrigger value="b">中</TabsTrigger>
+    </TabsList>
+  </Tabs>
+</div>
+```
+
+### WithExtra
+
+右侧附加内容（extra prop），常见于刷新/新建等操作入口。
+
+```tsx
+<Tabs defaultValue="all">
+  <TabsList
+    extra={
+      <div className="flex gap-3 text-sm">
+        <a href="#" className="text-muted-foreground hover:text-foreground">
+          刷新
+        </a>
+        <a href="#" className="text-primary hover:text-primary/80">
+          新建
+        </a>
+      </div>
+    }
+  >
+    <TabsTrigger value="all">全部</TabsTrigger>
+    <TabsTrigger value="active">运行中</TabsTrigger>
+    <TabsTrigger value="archived">已归档</TabsTrigger>
+  </TabsList>
+  <TabsContent value="all">
+    <p className="text-muted-foreground">全部任务列表。</p>
+  </TabsContent>
+  <TabsContent value="active">
+    <p className="text-muted-foreground">运行中的任务。</p>
+  </TabsContent>
+  <TabsContent value="archived">
+    <p className="text-muted-foreground">已归档的任务。</p>
+  </TabsContent>
+</Tabs>
+```
+
+### Disabled
+
+禁用某个选项卡。
+
+```tsx
+<Tabs defaultValue="general">
+  <TabsList>
+    <TabsTrigger value="general">通用</TabsTrigger>
+    <TabsTrigger value="advanced" disabled>
+      高级（禁用）
+    </TabsTrigger>
+    <TabsTrigger value="other">其他</TabsTrigger>
+  </TabsList>
+  <TabsContent value="general">
+    <p className="text-muted-foreground">通用设置。</p>
+  </TabsContent>
+  <TabsContent value="other">
+    <p className="text-muted-foreground">其他选项。</p>
+  </TabsContent>
+</Tabs>
+```
+
+### Vertical
+
+垂直方向选项卡。
+
+```tsx
+<Tabs defaultValue="profile" orientation="vertical">
+  <TabsList>
+    <TabsTrigger value="profile">个人资料</TabsTrigger>
+    <TabsTrigger value="security">安全</TabsTrigger>
+    <TabsTrigger value="billing">账单</TabsTrigger>
+  </TabsList>
+  <TabsContent value="profile">
+    <p className="text-muted-foreground">管理你的公开个人资料信息。</p>
+  </TabsContent>
+  <TabsContent value="security">
+    <p className="text-muted-foreground">两步验证、登录设备管理。</p>
+  </TabsContent>
+  <TabsContent value="billing">
+    <p className="text-muted-foreground">查看和管理订阅计划。</p>
+  </TabsContent>
+</Tabs>
+```
+
+### Overflow
+
+溢出滑动：当选项卡超出容器宽度时，显示左右箭头进行滑动。
+
+```tsx
+<Tabs defaultValue="tab-1" className="max-w-80">
+  <TabsList>
+    <TabsTrigger value="tab-1">概览</TabsTrigger>
+    <TabsTrigger value="tab-2">详细信息</TabsTrigger>
+    <TabsTrigger value="tab-3">配置管理</TabsTrigger>
+    <TabsTrigger value="tab-4">操作日志</TabsTrigger>
+    <TabsTrigger value="tab-5">关联资源</TabsTrigger>
+    <TabsTrigger value="tab-6">监控告警</TabsTrigger>
+    <TabsTrigger value="tab-7">权限管理</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab-1">
+    <p className="text-muted-foreground">
+      概览内容，尝试缩小宽度查看溢出滚动效果。
+    </p>
+  </TabsContent>
+  <TabsContent value="tab-2">
+    <p className="text-muted-foreground">详细信息内容。</p>
+  </TabsContent>
+</Tabs>
+```