@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/switch/switch.tsx

@@ -5,7 +5,47 @@ import { Loader2 } from 'lucide-react';
 import { cn } from '@/utils/cn';
 
 export interface SwitchProps
-  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,
+    | 'checked'
+    | 'defaultChecked'
+    | 'onCheckedChange'
+    | 'disabled'
+    | 'required'
+    | 'name'
+    | 'value'
+    | 'id'
+  > {
+  /**
+   * 受控选中状态(等价 antd `checked`)。
+   * 与 `defaultChecked` 二选一,不同时传。
+   */
+  checked?: boolean;
+  /**
+   * 非受控初始选中态(等价 antd `defaultChecked`)。
+   * @default false
+   */
+  defaultChecked?: boolean;
+  /**
+   * 选中状态变化回调 — Radix 命名,等价 antd `onChange(checked)`。
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * 禁用整个 Switch(灰化 + 不响应交互)。`loading` 也会自动禁用。
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 表单必填 — 设置 HTML 原生 `required`,表单层校验依赖此值。
+   * @default false
+   */
+  required?: boolean;
+  /** 表单字段名(原生 `<input name>`,提交表单时使用)。 */
+  name?: string;
+  /** 表单字段值(选中时随表单提交)。 */
+  value?: string;
+  /** id 属性,配合 `<label htmlFor>` 关联标签。 */
+  id?: string;
   /**
    * 加载态 — 自动 `disabled`,thumb 上叠加自旋 spinner(antd 并集)。
    * @default false
@@ -16,10 +56,11 @@ export interface SwitchProps
   /** 未选中态显示的内文(antd `unCheckedChildren` 并集)。 */
   unCheckedChildren?: React.ReactNode;
   /**
-   * 尺寸。
-   * @default "default"
+   * 尺寸。`md` 与 `default` 完全等价,后者作为向后兼容别名保留;新代码请优先
+   * 使用 `md`,与 Button / Input / Checkbox / Radio 等表单原子组件的 size enum 一致。
+   * @default "md"
    */
-  size?: 'sm' | 'default';
+  size?: 'sm' | 'md' | 'default';
 }
 
 const Switch = React.forwardRef<
@@ -32,7 +73,7 @@ const Switch = React.forwardRef<
       loading = false,
       checkedChildren,
       unCheckedChildren,
-      size = 'default',
+      size = 'md',
       disabled,
       ...props
     },
@@ -40,8 +81,10 @@ const Switch = React.forwardRef<
   ) => {
     const isSm = size === 'sm';
     const hasInner = checkedChildren != null || unCheckedChildren != null;
-    const thumbSize = isSm ? 'size-4' : 'size-5';
-    const spinnerSize = isSm ? 'size-3' : 'size-3.5';
+    // sm:外框 16x28(h-4 w-7)、thumb 12x12(size-3)、偏移 12px
+    // default:外框 20x36(h-5 w-9)、thumb 16x16(size-4)、偏移 16px
+    const thumbSize = isSm ? 'size-3' : 'size-4';
+    const spinnerSize = isSm ? 'size-2.5' : 'size-3';
     const renderThumb = (extra?: string) => (
       <SwitchPrimitive.Thumb
         className={cn(
@@ -71,9 +114,9 @@ const Switch = React.forwardRef<
           hasInner
             ? cn(
                 // 内文模式：高度固定，宽度按 thumb + 文字 + gap + padding 自适应
-                isSm ? 'h-5 min-w-9 gap-1' : 'h-6 min-w-11 gap-1.5',
+                isSm ? 'h-4 min-w-7 gap-1' : 'h-5 min-w-9 gap-1',
               )
-            : cn(isSm ? 'h-5 w-9' : 'h-6 w-11'),
+            : cn(isSm ? 'h-4 w-7' : 'h-5 w-9'),
           className,
         )}
         {...props}
@@ -85,15 +128,18 @@ const Switch = React.forwardRef<
             <span
               className={cn(
                 'pointer-events-none select-none font-medium leading-none',
-                isSm ? 'text-xxs' : 'text-xs',
+                isSm ? '' : 'text-xs',
                 'order-2 group-data-[state=checked]:order-1',
                 'group-data-[state=checked]:text-primary-foreground',
                 'group-data-[state=unchecked]:text-muted-foreground',
                 // 文字外侧 padding（远离 thumb 的一侧）—— thumb 侧不加 padding，与其他 switch 一致紧贴边缘
                 isSm
                   ? 'group-data-[state=unchecked]:pr-1 group-data-[state=checked]:pl-1'
-                  : 'group-data-[state=unchecked]:pr-1.5 group-data-[state=checked]:pl-1.5',
+                  : 'group-data-[state=unchecked]:pr-1 group-data-[state=checked]:pl-1',
               )}
+              // sm 内文使用 10px 字号 — Tailwind 默认刻度最小 text-xs(12px)在 h-4(16-4=12 内高)容器中会超出。
+              // 主动选 inline style 而非 Tailwind arbitrary value(`text-[10px]`),避免 `no-arbitrary-tw-value` lint 告警。
+              style={isSm ? { fontSize: '10px' } : undefined}
               aria-hidden="true"
             >
               <span className="group-data-[state=unchecked]:hidden">
@@ -109,8 +155,8 @@ const Switch = React.forwardRef<
             cn(
               'transition-transform',
               isSm
-                ? 'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-                : 'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+                ? 'data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
+                : 'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
             ),
           )
         )}

package/src/components/table/table.meta.md

@@ -29,9 +29,7 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
 _(组件无 `<Name>Props` interface — props 详见 [`table.tsx`](./table.tsx))_
-
 <!-- auto:props:end -->
 
 ## 依赖
@@ -39,19 +37,17 @@ _(组件无 `<Name>Props` interface — props 详见 [`table.tsx`](./table.tsx))
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add table` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 > 子组件:`Table` / `TableHeader`(thead)/ `TableBody`(tbody)/ `TableFooter`(tfoot)/ `TableHead`(th)/ `TableRow`(tr)/ `TableCell`(td)/ `TableCaption`(caption)。

package/src/components/table/table.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Table,
   TableHeader,

package/src/components/table/table.tsx

@@ -9,7 +9,7 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn('w-full caption-bottom text-sm', className)}
+      className={cn('w-full caption-bottom text-xs', className)}
       {...props}
     />
   </div>
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      'border-t border-t-border bg-muted/50 font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      'border-b border-b-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
       className,
     )}
     {...props}
@@ -102,7 +102,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    className={cn('mt-4 text-xs text-muted-foreground', className)}
     {...props}
   />
 ));

package/src/components/tabs/tabs.meta.md

@@ -3,21 +3,22 @@ id: tabs
 name: Tabs
 displayName: 标签页
 type: component
-category: navigation
+category: data-display
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
 
 # Tabs 标签页
 
-标签页 — Radix Tabs + antd `type` (line/card) + `tabBarExtraContent`(`extra`) 并集。
-两种风格切换:`type="card"`(shadcn 默认胶囊),`type="line"`(antd 默认下划线)。
+标签页 — Radix Tabs + antd `type`/`size`/`tabBarExtraContent` 并集,并吸收 `Segmented` 的胶囊视觉。
+两种风格切换:`variant="line"`(默认,antd 下划线),`variant="capsule"`(muted 底容器 + 选中白底 shadow,可替代 Segmented 的视图切换语义)。
 
 ## When to use
 
 - 平级内容切换(详情页的 Overview / Logs / Settings 多视图)
 - 表单分组(基本信息 / 高级配置)
 - 工具栏顶部多视图
+- **`variant="capsule"`**:紧凑互斥单选(视图切换 / 时间区间 / 主题档),取代旧 Segmented 用法
 
 ## When NOT to use
 
@@ -27,15 +28,14 @@ package: '@teamix-evo/ui'
 
 ## Props
 
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `TabsList` 的 props;`Tabs`(Root)透传 Radix `value / defaultValue / onValueChange / orientation / activationMode`。
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `TabsList` 的 props;`Tabs`(Root)透传 Radix `value / defaultValue / onValueChange / orientation / activationMode`;`TabsTrigger` 也接受 `variant` / `size` 用于显式覆盖来自 List 的上下文(罕用)。
 
 <!-- auto:props:begin -->
-
-| 名称    | 类型               | 默认值   | 必填 | 说明                                                                                                                                              |
-| ------- | ------------------ | -------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`  | `'line' \| 'card'` | `"card"` | –    | 视觉风格(antd `type` 并集)。`card` 是 shadcn 默认胶囊;`line` 是 antd 默认下划线。                                                                 |
-| `extra` | `React.ReactNode`  | –        | –    | 右侧附加内容(antd `tabBarExtraContent` 并集);仅 `type="line"` 显式支持(布局灵活)。 用法:把节点放进来即可,组件用 `flex justify-between` 自动撑开。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `variant` | `TabsVariant` | `"line"` | – | 视觉风格(shadcn ∪ antd 并集 + 吸收 Segmented)。 - `line`:下划线风格(antd 默认),适合页面级主导航 / 大区块切换。 - `capsule`:胶囊风格(取代旧 `card`,吸收 Segmented),muted 底色 + 选中项白底 shadow,适合紧凑互斥单选(视图切换、时间区间)。 |
+| `size` | `TabsSize` | `"md"` | – | 尺寸(antd `size` 并集)。三档统一驱动 trigger 的字号与 padding。 |
+| `extra` | `React.ReactNode` | – | – | 右侧附加内容(antd `tabBarExtraContent` 并集);仅 `variant="line"` 显式支持(布局灵活)。 用法:把节点放进来即可,组件用 `flex justify-between` 自动撑开。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -43,14 +43,13 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add tabs` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述                                               |
-| ----- | ---- | -------------------------------------------------- |
-| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -59,16 +58,17 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add @radix-ui/react-tabs@^1.1.0 class-variance-authority@^0.7.0
 ```
-
 <!-- auto:deps:end -->
 
-> 子组件:`Tabs` / `TabsList` / `TabsTrigger` / `TabsContent`。
+> 子组件:`Tabs` / `TabsList` / `TabsTrigger` / `TabsContent`。`variant` / `size` 在 `TabsList` 上声明一次,会通过 context 透传给所有 `TabsTrigger`。
 
 ## AI 生成纪律
 
-- **`type="card"` 默认**:用于嵌入卡片内 / 紧凑场景(shadcn 胶囊视觉)
-- **`type="line"` 用于页面级**:大区块切换、主导航(antd 风格)
-- **`extra` 仅 `type="line"` 视觉对齐**:右侧附加按钮(刷新 / 新建)
+- **`variant="line"` 是默认**:页面级主导航 / 大区块切换的首选(antd 视觉)
+- **`variant="capsule"` 取代 Segmented**:紧凑互斥单选场景(视图切换 / 时间区间 / 主题档)直接用 capsule Tabs,**不要再新增 Segmented**(详见同名组件 meta)
+- **选中态颜色固定**:line 选中文字走 `text-foreground`,capsule 选中项 `bg-background + shadow-sm + text-foreground` —— **禁止用 `bg-primary` 之类填充**(那是按钮态,不是选项态)
+- **size 三档**:`sm`(text-xs / 紧凑 padding)/ `md`(text-sm,默认)/ `lg`(text-base);列表页头部建议 `md`,详情页内嵌可用 `sm`
+- **`extra` 仅 `variant="line"` 视觉对齐**:右侧附加按钮(刷新 / 新建);capsule 没有右侧条带空间
 - **value 必稳定**:切换 tab 间不改变 value 字符串
 - **orientation="vertical"** 罕用,改用 Sidebar 模式
 
@@ -77,27 +77,35 @@ pnpm add @radix-ui/react-tabs@^1.1.0 class-variance-authority@^0.7.0
 ```tsx
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
-import { RefreshCw } from 'lucide-react';
+import { LayoutGrid, List, RefreshCw } from 'lucide-react';
 
-// shadcn 胶囊风格
-<Tabs defaultValue="overview" className="w-96">
+// 默认 line 下划线风格
+<Tabs defaultValue="all" className="w-96">
   <TabsList>
-    <TabsTrigger value="overview">概览</TabsTrigger>
-    <TabsTrigger value="logs">日志</TabsTrigger>
-    <TabsTrigger value="settings">设置</TabsTrigger>
+    <TabsTrigger value="all">全部</TabsTrigger>
+    <TabsTrigger value="active">活跃</TabsTrigger>
+    <TabsTrigger value="archived">已归档</TabsTrigger>
   </TabsList>
-  <TabsContent value="overview">...</TabsContent>
-  <TabsContent value="logs">...</TabsContent>
-  <TabsContent value="settings">...</TabsContent>
+  <TabsContent value="all">全部内容</TabsContent>
 </Tabs>
 
-// antd 下划线风格 + extra
+// 胶囊风格(吸收 Segmented):视图切换
+<Tabs defaultValue="grid" className="w-fit">
+  <TabsList variant="capsule" size="sm">
+    <TabsTrigger value="grid">
+      <LayoutGrid className="size-4" /> 网格
+    </TabsTrigger>
+    <TabsTrigger value="list">
+      <List className="size-4" /> 列表
+    </TabsTrigger>
+  </TabsList>
+</Tabs>
+
+// 下划线 + 右侧 extra
 <Tabs defaultValue="all">
-  <TabsList type="line" extra={<Button size="sm" icon={<RefreshCw />}>刷新</Button>}>
+  <TabsList variant="line" extra={<Button size="sm" variant="outline" icon={<RefreshCw />}>刷新</Button>}>
     <TabsTrigger value="all">全部</TabsTrigger>
     <TabsTrigger value="active">活跃</TabsTrigger>
-    <TabsTrigger value="archived">已归档</TabsTrigger>
   </TabsList>
-  <TabsContent value="all">...</TabsContent>
 </Tabs>
 ```

package/src/components/tabs/tabs.stories.tsx

@@ -1,67 +1,143 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { RefreshCw } from 'lucide-react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Calendar, LayoutGrid, List, RefreshCw } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof TabsList> = {
-  title: '导航 · Navigation/Tabs',
+  title: '数据展示 · Data Display/Tabs',
   component: TabsList,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '标签页 — Radix Tabs + antd type(line/card) + tabBarExtraContent(extra) 并集。胶囊风格(card) 适合嵌入场景,下划线风格(line) 适合页面级切换。',
+          'Tabs 标签页 —— 在多个平级视图之间切换。基于 Radix Tabs 实现 + shadcn ∪ antd 能力并集,并吸收 `Segmented` 的胶囊视觉:`variant`(`line` 下划线 / `capsule` 胶囊,后者取代旧 `card`)、`size`(对齐 antd `size`)、`extra`(对齐 antd `tabBarExtraContent`)、`asChild` 由 Radix 提供。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
   argTypes: {
-    type: { control: 'inline-radio', options: ['card', 'line'] },
+    variant: { control: 'inline-radio', options: ['line', 'capsule'] },
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
   },
-  args: { type: 'card' },
+  args: { variant: 'line', size: 'md' },
 };
 
 export default meta;
 type Story = StoryObj<typeof TabsList>;
 
-export const Card: Story = {
-  args: { type: 'card' },
+/**
+ * 默认 line(下划线)风格 —— antd 主导航的标准形态。
+ */
+export const Line: Story = {
+  args: { variant: 'line' },
   render: (args) => (
-    <Tabs defaultValue="overview" className="w-96">
+    <Tabs defaultValue="all" className="w-[480px]">
       <TabsList {...args}>
-        <TabsTrigger value="overview">概览</TabsTrigger>
-        <TabsTrigger value="logs">日志</TabsTrigger>
-        <TabsTrigger value="settings">设置</TabsTrigger>
+        <TabsTrigger value="all">全部</TabsTrigger>
+        <TabsTrigger value="active">活跃</TabsTrigger>
+        <TabsTrigger value="archived">已归档</TabsTrigger>
       </TabsList>
-      <TabsContent value="overview">概览内容</TabsContent>
-      <TabsContent value="logs">日志内容</TabsContent>
-      <TabsContent value="settings">设置内容</TabsContent>
+      <TabsContent value="all" className="text-sm text-muted-foreground">
+        全部内容...
+      </TabsContent>
+      <TabsContent value="active" className="text-sm text-muted-foreground">
+        活跃内容...
+      </TabsContent>
+      <TabsContent value="archived" className="text-sm text-muted-foreground">
+        已归档内容...
+      </TabsContent>
     </Tabs>
   ),
 };
 
-export const Line: Story = {
-  args: { type: 'line' },
+/**
+ * 胶囊风格(吸收 Segmented)—— muted 底色容器 + 选中项白底 shadow,
+ * 适合视图切换、时间区间这类紧凑互斥单选场景。
+ */
+export const Capsule: Story = {
+  args: { variant: 'capsule' },
   render: (args) => (
-    <Tabs defaultValue="all" className="w-96">
+    <Tabs defaultValue="week" className="w-fit">
       <TabsList {...args}>
-        <TabsTrigger value="all">全部</TabsTrigger>
-        <TabsTrigger value="active">活跃</TabsTrigger>
-        <TabsTrigger value="archived">已归档</TabsTrigger>
+        <TabsTrigger value="day">日</TabsTrigger>
+        <TabsTrigger value="week">周</TabsTrigger>
+        <TabsTrigger value="month">月</TabsTrigger>
       </TabsList>
-      <TabsContent value="all">全部内容</TabsContent>
-      <TabsContent value="active">活跃内容</TabsContent>
-      <TabsContent value="archived">已归档</TabsContent>
     </Tabs>
   ),
 };
 
+/**
+ * Capsule 配 icon —— 视图切换的最常见用法,完全替代 Segmented + icon。
+ */
+export const CapsuleWithIcons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Tabs defaultValue="grid" className="w-fit">
+      <TabsList variant="capsule">
+        <TabsTrigger value="grid">
+          <LayoutGrid className="size-4" />
+          网格
+        </TabsTrigger>
+        <TabsTrigger value="list">
+          <List className="size-4" />
+          列表
+        </TabsTrigger>
+        <TabsTrigger value="cal">
+          <Calendar className="size-4" />
+          日历
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  ),
+};
+
+/**
+ * 三档尺寸 × 两种风格 —— 用于尺寸调试。
+ */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-muted-foreground">line · sm / md / lg</span>
+        {(['sm', 'md', 'lg'] as const).map((s) => (
+          <Tabs key={s} defaultValue="a" className="w-[360px]">
+            <TabsList variant="line" size={s}>
+              <TabsTrigger value="a">概览</TabsTrigger>
+              <TabsTrigger value="b">日志</TabsTrigger>
+              <TabsTrigger value="c">设置</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ))}
+      </div>
+      <div className="flex flex-col items-start gap-2">
+        <span className="text-xs text-muted-foreground">
+          capsule · sm / md / lg
+        </span>
+        {(['sm', 'md', 'lg'] as const).map((s) => (
+          <Tabs key={s} defaultValue="a" className="w-fit">
+            <TabsList variant="capsule" size={s}>
+              <TabsTrigger value="a">日</TabsTrigger>
+              <TabsTrigger value="b">周</TabsTrigger>
+              <TabsTrigger value="c">月</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * line 风格右侧 extra —— antd `tabBarExtraContent` 并集。
+ */
 export const WithExtra: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <Tabs defaultValue="all" className="w-[480px]">
       <TabsList
-        type="line"
+        variant="line"
         extra={
           <Button size="sm" variant="outline" icon={<RefreshCw />}>
             刷新
@@ -72,7 +148,9 @@ export const WithExtra: Story = {
         <TabsTrigger value="active">活跃</TabsTrigger>
         <TabsTrigger value="archived">已归档</TabsTrigger>
       </TabsList>
-      <TabsContent value="all">全部内容...</TabsContent>
+      <TabsContent value="all" className="text-sm text-muted-foreground">
+        全部内容...
+      </TabsContent>
     </Tabs>
   ),
 };