@teamix-evo/ui 0.5.0 → 0.6.0

package/src/components/button/meta.md

@@ -18,7 +18,6 @@
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
 | `variant` | `ButtonVariant` | `default` | – | 视觉风格。 |
-| `color` | `ButtonColor` | `default` | – | 语义色，与 variant 双 prop 组合。 |
 | `size` | `ButtonSize` | `default` | – | 尺寸。 |
 | `shape` | `ButtonShape` | `default` | – | 形状。circle/square 为等宽等高，适合纯图标。 |
 | `block` | `boolean` | `false` | – | true 时撑满父容器宽度。 |
@@ -91,6 +90,9 @@ Button 只有图标时，应该显示为正方形。
   <Button size="icon-lg" aria-label="bell">
     <BellIcon />
   </Button>
+  <Button size="icon" variant="link" aria-label="mail">
+    <MailIcon />
+  </Button>
 </div>
 ```
 
@@ -112,19 +114,28 @@ Button 只有图标时，应该显示为正方形。
 
 ### Warning
 
-警告按钮用于危险操作的确认入口，可与 variant 组合使用。
+警告按钮用于危险操作的确认入口，可通过 className 与 variant 组合使用。
 
 ```tsx
 <div className="flex gap-2">
-  <Button variant="destructive">Destructive</Button>
-  <Button variant="outline" color="destructive">
-    Outline
-  </Button>
-  <Button variant="ghost" color="destructive">
-    Ghost
-  </Button>
-  <Button variant="link" color="destructive">
-    Link
+  <Button variant="destructive">危险按钮</Button>
+  <Button
+    variant="outline"
+    className="border-destructive text-destructive hover:text-destructive"
+  >
+    危险按钮
+  </Button>
+  <Button
+    variant="ghost"
+    className="text-destructive hover:text-destructive"
+  >
+    危险按钮
+  </Button>
+  <Button
+    variant="link"
+    className="text-destructive hover:text-destructive"
+  >
+    危险按钮
   </Button>
 </div>
 ```
@@ -136,8 +147,8 @@ Button 只有图标时，应该显示为正方形。
 ```tsx
 <div className="flex flex-col gap-4">
   <ButtonGroup>
-    <Button>OK</Button>
-    <Button variant="secondary">Cancel</Button>
+    <Button variant="outline">Cancel</Button>
+    <Button variant="outline">OK</Button>
   </ButtonGroup>
 
   <ButtonGroup>

package/src/components/button/stories.tsx

@@ -84,6 +84,9 @@ export const IconOnly: Story = {
       <Button size="icon-lg" aria-label="bell">
         <BellIcon />
       </Button>
+      <Button size="icon" variant="link" aria-label="mail">
+        <MailIcon />
+      </Button>
     </div>
   ),
 };
@@ -120,19 +123,28 @@ export const Disabled: Story = {
   ),
 };
 
-/** 警告按钮用于危险操作的确认入口，可与 variant 组合使用。 */
+/** 警告按钮用于危险操作的确认入口，可通过 className 与 variant 组合使用。 */
 export const Warning: Story = {
   render: () => (
     <div className="flex gap-2">
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="outline" color="destructive">
-        Outline
-      </Button>
-      <Button variant="ghost" color="destructive">
-        Ghost
-      </Button>
-      <Button variant="link" color="destructive">
-        Link
+      <Button variant="destructive">危险按钮</Button>
+      <Button
+        variant="outline"
+        className="border-destructive text-destructive hover:text-destructive"
+      >
+        危险按钮
+      </Button>
+      <Button
+        variant="ghost"
+        className="text-destructive hover:text-destructive"
+      >
+        危险按钮
+      </Button>
+      <Button
+        variant="link"
+        className="text-destructive hover:text-destructive"
+      >
+        危险按钮
       </Button>
     </div>
   ),
@@ -143,8 +155,8 @@ export const Group: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <ButtonGroup>
-        <Button>OK</Button>
-        <Button variant="secondary">Cancel</Button>
+        <Button variant="outline">Cancel</Button>
+        <Button variant="outline">OK</Button>
       </ButtonGroup>
 
       <ButtonGroup>

package/src/components/button-group/meta.md

@@ -26,7 +26,7 @@
 | `asChild` | `boolean` | – | – | 使用 Slot 模式渲染子元素 |
 | `triggerLabel` | `string` | `'更多操作'` | – | 触发按钮的可访问名（aria-label）。 |
 | `variant` | `ButtonProps['variant']` | `'ghost'` | – | 触发按钮 variant，与 ButtonGroup 中相邻按钮风格保持一致。 |
-| `size` | `ButtonProps['size']` | `'icon'` | – | 触发按钮 size。 |
+| `size` | `ButtonProps['size']` | – | – | 触发按钮 size。不传时根据 variant 自选： - `variant='link'` → `'default'`（命中 link×default 的 h-auto px-0，与相邻 link 文字按钮等高） - 其余 → `'icon'`（保持 32×32 方形热区） |
 | `icon` | `React.ReactNode` | – | – | 自定义触发器图标，传入即替换默认 ⋯。 |
 | `align` | `'start' \| 'center' \| 'end'` | `'end'` | – | 下拉菜单对齐方式。 |
 | `sideOffset` | `number` | – | – | 下拉菜单与触发器的距离（像素）。 |
@@ -42,7 +42,7 @@
 ```tsx
 <ButtonGroup>
   <Button variant="outline">取消</Button>
-  <Button>确定</Button>
+  <Button variant="outline">确定</Button>
 </ButtonGroup>
 ```
 
@@ -132,10 +132,7 @@
 
 ```tsx
 <ButtonGroup>
-  <Button>
-    <PlusIcon data-icon="inline-start" />
-    新建实例
-  </Button>
+  <Button>新建实例</Button>
   <DropdownMenu modal={false}>
     <DropdownMenuTrigger asChild>
       <Button size="icon" aria-label="更多选项">
@@ -169,10 +166,10 @@
 
 ### ActionColumn
 
-操作列 — DataTable 操作列经典模式：link 风格按钮 + Separator + ButtonGroupOverflow 折叠。
+操作列 — DataTable 操作列经典模式：h-4 锁高 + gap-3 间距 + ButtonGroupSeparator 分隔 + ButtonGroupOverflow 折叠。
 
 ```tsx
-<ButtonGroup>
+<ButtonGroup className="h-4 gap-3">
   <Button variant="link">管理</Button>
   <ButtonGroupSeparator />
   <Button variant="link" disabled>
@@ -184,7 +181,7 @@
   <ButtonGroupOverflow variant="link">
     <DropdownMenuItem disabled>释放</DropdownMenuItem>
     <DropdownMenuItem>暂停</DropdownMenuItem>
-    <DropdownMenuItem>二次确认</DropdownMenuItem>
+    <DropdownMenuItem variant="destructive">删除</DropdownMenuItem>
   </ButtonGroupOverflow>
 </ButtonGroup>
 ```

package/src/components/button-group/stories.tsx

@@ -7,7 +7,6 @@ import {
   AlignCenterIcon,
   AlignRightIcon,
   ChevronDownIcon,
-  PlusIcon,
   CopyIcon,
   TrashIcon,
   PencilIcon,
@@ -40,7 +39,7 @@ export const Horizontal: Story = {
   render: () => (
     <ButtonGroup>
       <Button variant="outline">取消</Button>
-      <Button>确定</Button>
+      <Button variant="outline">确定</Button>
     </ButtonGroup>
   ),
 };
@@ -125,10 +124,7 @@ export const MenuButton: Story = {
 export const SplitButton: Story = {
   render: () => (
     <ButtonGroup>
-      <Button>
-        <PlusIcon data-icon="inline-start" />
-        新建实例
-      </Button>
+      <Button>新建实例</Button>
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button size="icon" aria-label="更多选项">

package/src/components/calendar/index.tsx

@@ -212,25 +212,30 @@ function CalendarDayButton({
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
 
+  const isSelectedSingle =
+    modifiers.selected &&
+    !modifiers.range_start &&
+    !modifiers.range_end &&
+    !modifiers.range_middle;
+  const isActive =
+    isSelectedSingle || modifiers.range_start || modifiers.range_end;
+
   return (
     <Button
       ref={ref}
       variant="ghost"
       size="icon"
       data-day={day.date.toLocaleDateString(locale?.code)}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
+      data-selected-single={isSelectedSingle}
       data-range-start={modifiers.range_start}
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 text-xs leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-1 group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
+        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 text-xs leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-1 group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className,
+        isActive &&
+          '!bg-primary !text-primary-foreground hover:!bg-primary/90 hover:!text-primary-foreground',
       )}
       {...props}
     />

package/src/components/cascader-select/index.tsx

@@ -247,7 +247,7 @@ function CascaderSelect({
         onClick={() => setOpen(!open)}
         className={cn(
           'flex w-fit min-w-36 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2.5 text-xs transition-colors outline-none select-none',
-          'focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring',
+          'focus-visible:border-ring focus-visible:ring-ring/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           size === 'default' && 'h-8',
           size === 'sm' && 'h-7',

package/src/components/checkbox/index.tsx

@@ -84,7 +84,7 @@ function Checkbox({
       disabled={resolvedDisabled}
       value={value}
       className={cn(
-        'peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-(--radius-checkbox) border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
+        'peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-(--radius-checkbox) border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
         className,
       )}
       {...props}

package/src/components/combobox/index.tsx

@@ -52,6 +52,10 @@ interface ComboboxContextValue {
   setSearch: (search: string) => void;
   /** 多选 Tag 显示上限，超出折叠为 +N。 */
   maxTagCount?: number;
+  /** 折叠摘要自定义内容。 */
+  maxTagPlaceholder?:
+    | React.ReactNode
+    | ((omittedValues: string[], total: number) => React.ReactNode);
   /** 禁用状态。 */
   disabled: boolean;
   /** 当前面板是否打开。 */
@@ -119,6 +123,13 @@ interface ComboboxBaseProps {
    * 仅 `multiple=true` 时生效。
    */
   maxTagCount?: number;
+  /**
+   * 折叠摘要的自定义内容。不传则默认显示 `+N`。
+   * 传字符串直接显示；传函数则接收 `(omittedValues: string[], total: number)` 返回 ReactNode。
+   */
+  maxTagPlaceholder?:
+    | React.ReactNode
+    | ((omittedValues: string[], total: number) => React.ReactNode);
   /** 是否启用 cmdk 内置过滤逻辑；关闭后由外部接管搜索结果。 @default true */
   shouldFilter?: boolean;
   /** 自定义匹配评分函数：返回 0 表示不匹配，>0 越大越靠前。 */
@@ -144,6 +155,7 @@ function Combobox(props: ComboboxProps) {
     onOpenChange,
     disabled = false,
     maxTagCount,
+    maxTagPlaceholder,
     shouldFilter = true,
     filter,
     loop,
@@ -242,6 +254,7 @@ function Combobox(props: ComboboxProps) {
       clearValue,
       itemLabels,
       maxTagCount,
+      maxTagPlaceholder,
       disabled,
       open,
       setOpen,
@@ -256,6 +269,7 @@ function Combobox(props: ComboboxProps) {
       clearValue,
       itemLabels,
       maxTagCount,
+      maxTagPlaceholder,
       disabled,
       open,
       setOpen,
@@ -295,12 +309,18 @@ export interface ComboboxTriggerProps
    * 受控模式下由调用方传入 `() => setValue([])`；不传则不展示清除按钮。
    */
   onClear?: () => void;
+  /**
+   * 右侧自定义插槽，替换默认的 chevron / clear 区域。
+   * 用于搜索图标、分隔线 + 按钮等场景。
+   */
+  suffix?: React.ReactNode;
 }
 
 function ComboboxTrigger({
   className,
   size = 'default',
   onClear,
+  suffix,
   children,
   ...props
 }: ComboboxTriggerProps) {
@@ -352,7 +372,7 @@ function ComboboxTrigger({
         }}
         className={cn(
           // 视觉与 SelectTrigger 对齐；focus-within 产生 ring；min-h 容纳多行 Tag
-          "flex w-fit cursor-text items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-1 pr-2 pl-2.5 text-xs transition-colors outline-none has-[input:focus]:border-ring has-[input:focus]:ring-1 has-[input:focus]:ring-ring data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[size=default]:min-h-8 data-[size=sm]:min-h-7 data-[size=lg]:min-h-9 data-[size=lg]:text-sm aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "flex w-fit cursor-text items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-1 pr-2 pl-2.5 text-xs transition-colors outline-none has-[input:focus]:border-ring has-[input:focus]:ring-ring/20 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[size=default]:min-h-8 data-[size=sm]:min-h-7 data-[size=lg]:min-h-9 data-[size=lg]:text-sm aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
@@ -392,7 +412,9 @@ function ComboboxTrigger({
             className="min-w-10 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
           />
         </div>
-        {showClear ? (
+        {suffix !== undefined ? (
+          suffix
+        ) : showClear ? (
           <span
             role="button"
             aria-label="清除"
@@ -472,13 +494,25 @@ function ComboboxValue({
     })
     .join(', ');
 
+  // 计算折叠摘要内容
+  const summaryContent = (() => {
+    if (omitted.length === 0) return null;
+    const placeholder = ctx.maxTagPlaceholder;
+    if (placeholder === undefined) return `+${omitted.length}`;
+    if (typeof placeholder === 'function')
+      return placeholder(omitted, values.length);
+    return placeholder;
+  })();
+
   return (
     <>
       {visible.map((v) => (
         <Tag
           key={v}
           size="sm"
-          closable
+          variant="solid"
+          color="primary"
+          closable={{ hoverReveal: true }}
           disabled={ctx.disabled}
           onClose={(e) => {
             e.preventDefault();
@@ -496,10 +530,15 @@ function ComboboxValue({
           {ctx.itemLabels.get(v) ?? v}
         </Tag>
       ))}
-      {omitted.length > 0 ? (
-        <Tag key="__rest__" size="sm" variant="outline" title={omittedTitle}>
-          {`+${omitted.length}`}
-        </Tag>
+      {summaryContent !== null ? (
+        <span
+          key="__rest__"
+          data-slot="combobox-summary"
+          className="inline-flex shrink-0 items-center text-xs text-muted-foreground"
+          title={omittedTitle}
+        >
+          {summaryContent}
+        </span>
       ) : null}
     </>
   );
@@ -630,8 +669,8 @@ function ComboboxItem({
         ctx.toggleValue(value);
       }}
       className={cn(
-        // 与 SelectItem 视觉对齐：h-8、左侧勾选位、选中态 text-primary
-        "group/combobox-item relative flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 pl-7 text-xs outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[state=checked]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // 与 SelectItem 视觉对齐：h-8、左侧勾选位；hover 灰底，选中蓝底（含 hover 保持）
+        "group/combobox-item relative flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 pl-7 text-xs outline-hidden select-none hover:bg-muted data-[state=checked]:bg-primary/10 data-[state=checked]:hover:bg-primary/10 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -661,7 +700,10 @@ function collectComboboxLabels(
       value?: string;
       children?: React.ReactNode;
     }>;
-    if (element.type === ComboboxItem) {
+    if (
+      element.type === ComboboxItem ||
+      (element.type as { displayName?: string }).displayName === 'ComboboxItem'
+    ) {
       const v = element.props.value;
       if (typeof v === 'string') {
         map.set(v, element.props.children);
@@ -674,6 +716,8 @@ function collectComboboxLabels(
   });
 }
 
+ComboboxItem.displayName = 'ComboboxItem';
+
 export {
   Combobox,
   ComboboxContent,

package/src/components/combobox/meta.md

@@ -13,7 +13,8 @@
 - 选项数量较多需要边输入边过滤时
 - 需要多选并以可关闭标签形式展示已选时
 - Select 无法满足搜索 / 多选 / 远程数据等场景时
-- 组合结构：Combobox > ComboboxTrigger ( ComboboxValue ) + ComboboxContent > ComboboxInput? + ComboboxList > ( ComboboxEmpty | ComboboxGroup > ComboboxItem | ComboboxSeparator )
+- 触发区内置 search input，输入即过滤选项；多选模式下已选 Tag 与 input 共占触发区。
+- 组合结构：Combobox > ComboboxTrigger ( ComboboxValue ) + ComboboxContent > ComboboxList > ( ComboboxEmpty | ComboboxGroup > ComboboxItem | ComboboxSeparator )
 
 ## Props
 
@@ -21,11 +22,8 @@
 | --- | --- | --- | --- | --- |
 | `size` | `'sm' \| 'default' \| 'lg'` | – | – | 触发器尺寸，对齐 SelectTrigger 三档：sm 28px / default 32px / lg 36px。 |
 | `onClear` | `() => void` | – | – | 清除回调：传入后右侧 chevron 切换为 × 按钮，点击调用此回调清空选中。 受控模式下由调用方传入 `() => setValue([])`；不传则不展示清除按钮。 |
+| `suffix` | `React.ReactNode` | – | – | 右侧自定义插槽，替换默认的 chevron / clear 区域。 用于搜索图标、分隔线 + 按钮等场景。 |
 | `placeholder` | `React.ReactNode` | – | – | 未选时占位文案。 |
-| `shouldFilter` | `boolean` | `true` | – | 是否启用 cmdk 内置过滤逻辑；关闭后由外部接管搜索结果。 |
-| `filter` | `(value: string, search: string, keywords?: string[]) => number` | – | – | 自定义匹配评分函数：返回 0 表示不匹配，>0 越大越靠前。 |
-| `loop` | `boolean` | `false` | – | 到达列表末尾时是否循环回到起点。 |
-| `label` | `string` | – | – | 命令面板的可访问性标签。 |
 | `value` | `string` | – | ✓ | 选项值，必填，用于受控状态匹配。 |
 | `disabled` | `boolean` | – | – | 是否禁用。 |
 | `keywords` | `string[]` | – | – | cmdk 搜索关键字（除 children 文本外补充匹配项）。 |

package/src/components/combobox/stories.tsx

@@ -11,6 +11,7 @@ import {
   ComboboxTrigger,
   ComboboxValue,
 } from './index';
+import { Tag } from '@/components/tag';
 
 const meta: Meta<typeof Combobox> = {
   title: '数据录入 · Data Entry/Combobox 组合选择器',
@@ -97,35 +98,113 @@ export const Multiple: Story = {
   },
 };
 
-/** maxTagCount 折叠：超出阈值的选中项以 +N 摘要展示。 */
+/**
+ * 多选模式下通过 `maxTagCount` 控制选择的个数，通过 `maxTagPlaceholder` 控制选择的 hover 样式。
+ */
 export const WithMaxTagCount: Story = {
   render: () => {
-    const [value, setValue] = React.useState<string[]>([
-      'bj',
-      'sh',
-      'hz',
-      'sz',
-    ]);
+    const allValues = ['bj', 'sh', 'hz', 'sz', 'cd'] as const;
+    const [v1, setV1] = React.useState<string[]>([...allValues]);
+    const [v2, setV2] = React.useState<string[]>([...allValues]);
+    const [v3, setV3] = React.useState<string[]>([...allValues]);
+    const [v4, setV4] = React.useState<string[]>([...allValues]);
     return (
-      <Combobox multiple maxTagCount={2} value={value} onValueChange={setValue}>
-        <ComboboxTrigger
-          className="w-72"
-          onClear={value.length ? () => setValue([]) : undefined}
+      <div className="flex flex-wrap items-start gap-3">
+        {/* 默认 +N */}
+        <Combobox multiple maxTagCount={2} value={v1} onValueChange={setV1}>
+          <ComboboxTrigger className="w-60">
+            <ComboboxValue placeholder="选择城市" />
+          </ComboboxTrigger>
+          <ComboboxContent>
+            <ComboboxList>
+              <ComboboxGroup>
+                {cityOptions.map((o) => (
+                  <ComboboxItem key={o.value} value={o.value}>
+                    {o.label}
+                  </ComboboxItem>
+                ))}
+              </ComboboxGroup>
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        {/* 自定义摘要 wrapped in Tag */}
+        <Combobox
+          multiple
+          maxTagCount={2}
+          maxTagPlaceholder={(_omitted, total) => (
+            <Tag size="sm" variant="solid" color="primary">
+              已选择 {total}/{cityOptions.length} 项
+            </Tag>
+          )}
+          value={v2}
+          onValueChange={setV2}
         >
-          <ComboboxValue placeholder="最多展示 2 个 Tag，其余折叠 +N" />
-        </ComboboxTrigger>
-        <ComboboxContent>
-          <ComboboxList>
-            <ComboboxGroup>
-              {cityOptions.map((o) => (
-                <ComboboxItem key={o.value} value={o.value}>
-                  {o.label}
-                </ComboboxItem>
-              ))}
-            </ComboboxGroup>
-          </ComboboxList>
-        </ComboboxContent>
-      </Combobox>
+          <ComboboxTrigger className="w-60">
+            <ComboboxValue placeholder="选择城市" />
+          </ComboboxTrigger>
+          <ComboboxContent>
+            <ComboboxList>
+              <ComboboxGroup>
+                {cityOptions.map((o) => (
+                  <ComboboxItem key={o.value} value={o.value}>
+                    {o.label}
+                  </ComboboxItem>
+                ))}
+              </ComboboxGroup>
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        {/* 简洁 x/total 纯文本 */}
+        <Combobox
+          multiple
+          maxTagCount={2}
+          maxTagPlaceholder={(_omitted, total) =>
+            `${total}/${cityOptions.length}`
+          }
+          value={v3}
+          onValueChange={setV3}
+        >
+          <ComboboxTrigger className="w-60">
+            <ComboboxValue placeholder="选择城市" />
+          </ComboboxTrigger>
+          <ComboboxContent>
+            <ComboboxList>
+              <ComboboxGroup>
+                {cityOptions.map((o) => (
+                  <ComboboxItem key={o.value} value={o.value}>
+                    {o.label}
+                  </ComboboxItem>
+                ))}
+              </ComboboxGroup>
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        {/* maxTagCount=1 + 纯文本摘要 */}
+        <Combobox
+          multiple
+          maxTagCount={1}
+          maxTagPlaceholder={(_omitted, total) =>
+            `已选择 ${total}/${cityOptions.length} 项`
+          }
+          value={v4}
+          onValueChange={setV4}
+        >
+          <ComboboxTrigger className="w-60">
+            <ComboboxValue placeholder="选择城市" />
+          </ComboboxTrigger>
+          <ComboboxContent>
+            <ComboboxList>
+              <ComboboxGroup>
+                {cityOptions.map((o) => (
+                  <ComboboxItem key={o.value} value={o.value}>
+                    {o.label}
+                  </ComboboxItem>
+                ))}
+              </ComboboxGroup>
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </div>
     );
   },
 };

package/src/components/data-table/index.tsx

@@ -442,17 +442,22 @@ function ColumnFilterPopover({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <button
-          type="button"
+        <span
+          role="button"
           aria-label="过滤"
+          tabIndex={-1}
           className={cn(
-            'inline-flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+            'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground',
             active && 'text-primary',
           )}
+          onPointerDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
           onClick={(e) => e.stopPropagation()}
         >
           <FilterIcon className="size-3.5" />
-        </button>
+        </span>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-44 gap-2 p-2">
         {mode === 'multiple' ? (
@@ -498,7 +503,7 @@ function ColumnFilterPopover({
           </RadioGroup>
         )}
         <div className="mt-1 flex justify-end gap-2 border-t border-border pt-2">
-          <Button variant="ghost" size="sm" onClick={handleReset}>
+          <Button variant="outline" size="sm" onClick={handleReset}>
             重置
           </Button>
           <Button size="sm" onClick={handleConfirm}>

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

@@ -781,7 +781,10 @@ export const CustomCell: Story = {
           <ButtonGroup className="h-4 gap-3">
             <Button variant="link">编辑</Button>
             <ButtonGroupSeparator />
-            <Button variant="link" color="destructive">
+            <Button
+              variant="link"
+              className="text-destructive hover:text-destructive"
+            >
               删除
             </Button>
           </ButtonGroup>