@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/tooltip/tooltip.stories.tsx

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Settings } from 'lucide-react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Settings, Info } from 'lucide-react';
 import { Tooltip, TooltipProvider } from './tooltip';
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof Tooltip> = {
-  title: '反馈与浮层 · Feedback/Tooltip',
+  title: '数据展示 · Data Display/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '文字气泡提示 — 鼠标悬停或键盘聚焦元素时弹出的简短提示。Radix Tooltip 实现 + antd Tooltip 的并集能力：需 `TooltipProvider` 包裹（可设 `delayDuration`），通过 `side` / `arrow` / `title` 调整方位与尖角；适用于纯文本辅助说明，丰富交互请选 `Popover`。',
+          '文字提示 —— 鼠标悬停或键盘聚焦元素时弹出的简短文字解释。基于 Radix Tooltip 实现 + antd `Tooltip` 并集能力:`title` 文本、`side` 四向、`arrow` 尖角、`delayDuration` 延迟、`withProvider` 内联 Provider,新增 `variant`(default 深底 / light 白底)对齐 cloud-design Balloon 双形态。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
@@ -20,10 +20,14 @@ const meta: Meta<typeof Tooltip> = {
       control: 'inline-radio',
       options: ['top', 'right', 'bottom', 'left'],
     },
+    variant: {
+      control: 'inline-radio',
+      options: ['default', 'light'],
+    },
     arrow: { control: 'boolean' },
     title: { control: 'text' },
   },
-  args: { side: 'top', arrow: true, title: '设置' },
+  args: { side: 'top', variant: 'default', arrow: true, title: '设置' },
   decorators: [
     (Story) => (
       <TooltipProvider delayDuration={200}>
@@ -61,6 +65,39 @@ export const Sides: Story = {
   ),
 };
 
+export const Variants: Story = {
+  name: 'Variants · default vs light',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Tooltip title="深色 tooltip(default)" variant="default">
+        <Button variant="outline">深色</Button>
+      </Tooltip>
+      <Tooltip title="浅色 tooltip(light) · 带边框与阴影" variant="light">
+        <Button variant="outline">浅色</Button>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const LightVariant: Story = {
+  name: 'Light variant 富文本',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Tooltip
+      variant="light"
+      side="right"
+      title={
+        <span className="inline-flex items-center gap-1.5">
+          <Info className="size-3.5" /> 配额按账号每分钟计算
+        </span>
+      }
+    >
+      <Button variant="outline">规则说明</Button>
+    </Tooltip>
+  ),
+};
+
 export const NoArrow: Story = {
   parameters: { controls: { disable: true } },
   render: () => (

package/src/components/tooltip/tooltip.tsx

@@ -1,14 +1,51 @@
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/cn';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 const TooltipRoot = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TooltipPrimitive.Trigger
+    ref={ref}
+    className={cn('cursor-pointer', className)}
+    {...props}
+  />
+));
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+
+const tooltipContentVariants = cva(
+  'z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-md',
+        light:
+          'border border-border bg-popover text-popover-foreground shadow-md',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+/** 箭头填充色与变体一一对应。 */
+const arrowFillByVariant: Record<
+  NonNullable<VariantProps<typeof tooltipContentVariants>['variant']>,
+  string
+> = {
+  default: 'fill-primary',
+  light: 'fill-popover',
+};
 
 export interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+    VariantProps<typeof tooltipContentVariants> {
   /**
    * 是否显示三角形箭头(antd `arrow` 并集)。
    * @default true
@@ -19,24 +56,37 @@ export interface TooltipContentProps
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   TooltipContentProps
->(({ className, sideOffset = 4, arrow = true, children, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {arrow ? (
-        <TooltipPrimitive.Arrow className="fill-primary" width={8} height={4} />
-      ) : null}
-    </TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-));
+>(
+  (
+    {
+      className,
+      sideOffset = 4,
+      arrow = true,
+      variant = 'default',
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(tooltipContentVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {arrow ? (
+          <TooltipPrimitive.Arrow
+            className={arrowFillByVariant[variant ?? 'default']}
+            width={8}
+            height={4}
+          />
+        ) : null}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  ),
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // ─── Convenience wrapper(antd-style 一行调用)──────────────────────────────
@@ -52,6 +102,14 @@ export interface TooltipProps
   title: React.ReactNode;
   /** 弹出方向。 @default "top" */
   side?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * 视觉变体:
+   * - `default`:深色背景 + 浅色文字(信息密度高、对比强,适合图标按钮 / 列截断提示)
+   * - `light`:浅色背景 + 深色文字 + 边框 + 阴影(视觉更轻,贴近富内容卡片调性,
+   *   对齐 cloud-design Balloon `type="primary"`)
+   * @default "default"
+   */
+  variant?: 'default' | 'light';
   /** 是否显示三角形箭头。 @default true */
   arrow?: boolean;
   /** 显示延迟(ms),默认沿用 Provider 的 delayDuration。 */
@@ -64,6 +122,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   children,
   title,
   side = 'top',
+  variant = 'default',
   arrow = true,
   delayDuration,
   withProvider = false,
@@ -72,7 +131,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   const inner = (
     <TooltipRoot delayDuration={delayDuration} {...rootProps}>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContent side={side} arrow={arrow}>
+      <TooltipContent side={side} variant={variant} arrow={arrow}>
         {title}
       </TooltipContent>
     </TooltipRoot>
@@ -90,4 +149,5 @@ export {
   TooltipRoot,
   TooltipTrigger,
   TooltipContent,
+  tooltipContentVariants,
 };

package/src/components/tour/tour.meta.md

@@ -2,7 +2,7 @@
 id: tour
 name: Tour
 type: component
-category: feedback
+category: deprecated
 since: 0.1.0
 package: '@teamix-evo/ui'
 displayName: 新手引导
@@ -28,33 +28,30 @@ displayName: 新手引导
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型                        | 默认值  | 必填 | 说明                                   |
-| -------------- | --------------------------- | ------- | ---- | -------------------------------------- |
-| `steps`        | `TourStep[]`                | –       | ✓    | 步骤列表(antd `steps` 并集)。          |
-| `open`         | `boolean`                   | –       | –    | 受控 open 状态。                       |
-| `defaultOpen`  | `boolean`                   | `false` | –    | uncontrolled 初值。                    |
-| `onOpenChange` | `(open: boolean) => void`   | –       | –    | open 变化回调。                        |
-| `current`      | `number`                    | –       | –    | 当前步骤索引(受控)。                   |
-| `onChange`     | `(current: number) => void` | –       | –    | 步骤变化回调。                         |
-| `onFinish`     | `() => void`                | –       | –    | 完成时回调(走到最后一步且点击"完成")。 |
-| `onClose`      | `() => void`                | –       | –    | 关闭回调(任意时刻点 X / mask)。        |
-| `mask`         | `boolean`                   | `true`  | –    | 是否显示遮罩(antd `mask` 并集)。       |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `steps` | `TourStep[]` | – | ✓ | 步骤列表(antd `steps` 并集)。 |
+| `open` | `boolean` | – | – | 受控 open 状态。 |
+| `defaultOpen` | `boolean` | `false` | – | uncontrolled 初值。 |
+| `onOpenChange` | `(open: boolean) => void` | – | – | open 变化回调。 |
+| `current` | `number` | – | – | 当前步骤索引(受控)。 |
+| `onChange` | `(current: number) => void` | – | – | 步骤变化回调。 |
+| `onFinish` | `() => void` | – | – | 完成时回调(走到最后一步且点击"完成")。 |
+| `onClose` | `() => void` | – | – | 关闭回调(任意时刻点 X / mask)。 |
+| `mask` | `boolean` | `true` | – | 是否显示遮罩(antd `mask` 并集)。 |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add tour` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry    | 类型      | 描述                                                                                    |
-| -------- | --------- | --------------------------------------------------------------------------------------- |
-| `cn`     | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                      |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
 
 ### npm 依赖
 
@@ -63,7 +60,6 @@ displayName: 新手引导
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/tour/tour.stories.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Tour } from './tour';
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof Tour> = {
-  title: '反馈与浮层 · Feedback/Tour',
+  title: '废弃 · Deprecated/Tour',
   component: Tour,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '新手引导 — 多步骤 spotlight + 卡片 + 步进按钮。帮助新用户首次进入页面时了解关键功能位置。等价 antd `Tour`（v5.0+）。业务侧自管“是否首次访问”。',
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n新手引导 — 多步骤 spotlight + 卡片 + 步进按钮。帮助新用户首次进入页面时了解关键功能位置。等价 antd `Tour`（v5.0+）。业务侧自管“是否首次访问”。',
       },
     },
   },

package/src/components/tour/tour.tsx

@@ -188,7 +188,7 @@ const Tour: React.FC<TourProps> = ({
       <div
         role="dialog"
         className={cn(
-          'absolute w-80 rounded-md border bg-popover p-4 text-popover-foreground shadow-xl',
+          'absolute w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-xl',
         )}
         style={cardStyle}
       >
@@ -198,13 +198,13 @@ const Tour: React.FC<TourProps> = ({
             type="button"
             aria-label="关闭"
             onClick={close}
-            className="text-muted-foreground transition-colors hover:text-foreground"
+            className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
           >
             <X className="size-4" />
           </button>
         </div>
         {cur.description ? (
-          <div className="mt-2 text-sm text-muted-foreground">
+          <div className="mt-2 text-xs text-muted-foreground">
             {cur.description}
           </div>
         ) : null}

package/src/components/transfer/transfer.meta.md

@@ -3,7 +3,7 @@ id: transfer
 name: Transfer
 displayName: 穿梭框
 type: component
-category: data-display
+category: data-entry
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -26,35 +26,32 @@ package: '@teamix-evo/ui'
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称         | 类型                                      | 默认值           | 必填 | 说明                                                         |
-| ------------ | ----------------------------------------- | ---------------- | ---- | ------------------------------------------------------------ |
-| `dataSource` | `TransferItem[]`                          | –                | ✓    | 全部数据源(左+右合集)。                                      |
-| `targetKeys` | `string[]`                                | –                | ✓    | 受控:已"穿梭到右侧"的 key 集合(antd `targetKeys` 并集)。     |
-| `onChange`   | `(next: string[]) => void`                | –                | –    | 右侧集合变化回调。                                           |
-| `titles`     | `[React.ReactNode, React.ReactNode]`      | `["源", "目标"]` | –    | 两侧标题(antd `titles` 并集) — `[左, 右]`。                  |
-| `showSearch` | `boolean`                                 | `false`          | –    | 启用搜索(antd `showSearch` 并集) — 两侧各一个输入框。        |
-| `render`     | `(item: TransferItem) => React.ReactNode` | –                | –    | 自定义渲染单项(antd `render` 并集) — 默认渲染 `item.title`。 |
-| `disabled`   | `boolean`                                 | –                | –    | 整体禁用。                                                   |
-| `listHeight` | `number`                                  | `280`            | –    | 单侧高度(像素)。                                             |
-| `className`  | `string`                                  | –                | –    | –                                                            |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `dataSource` | `TransferItem[]` | – | ✓ | 全部数据源(左+右合集)。 |
+| `targetKeys` | `string[]` | – | ✓ | 受控:已"穿梭到右侧"的 key 集合(antd `targetKeys` 并集)。 |
+| `onChange` | `(next: string[]) => void` | – | – | 右侧集合变化回调。 |
+| `titles` | `[React.ReactNode, React.ReactNode]` | `["源", "目标"]` | – | 两侧标题(antd `titles` 并集) — `[左, 右]`。 |
+| `showSearch` | `boolean` | `false` | – | 启用搜索(antd `showSearch` 并集) — 两侧各一个输入框。 |
+| `render` | `(item: TransferItem) => React.ReactNode` | – | – | 自定义渲染单项(antd `render` 并集) — 默认渲染 `item.title`。 |
+| `disabled` | `boolean` | – | – | 整体禁用。 |
+| `listHeight` | `number` | `280` | – | 单侧高度(像素)。 |
+| `className` | `string` | – | – | – |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add transfer` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry      | 类型      | 描述                                                                                            |
-| ---------- | --------- | ----------------------------------------------------------------------------------------------- |
-| `cn`       | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                              |
-| `button`   | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant)         |
-| `checkbox` | component | 复选框 — Radix Checkbox(原生 indeterminate)+ antd Checkbox.Group(options 数组驱动)              |
-| `input`    | component | 文本输入 — shadcn 简洁基底 + antd prefix/suffix/clearable/showCount/addonBefore/addonAfter/size |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
+| `checkbox` | component | 复选框 — Radix Checkbox(原生 indeterminate)+ antd Checkbox.Group(options 数组驱动) |
+| `input` | component | 单行文本输入 — clearable / showCount / size(sm 24 / md 32 / lg 36,与 Button 同档)/ error 四档内建能力。前缀/后缀/addon 等复合形态已拆出独立 InputGroup;多行已拆出独立 Textarea |
 
 ### npm 依赖
 
@@ -63,7 +60,6 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/transfer/transfer.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Transfer, type TransferItem } from './transfer';
 
 const meta: Meta<typeof Transfer> = {
-  title: '数据展示 · Data Display/Transfer',
+  title: '数据录入 · Data Entry/Transfer',
   component: Transfer,
   tags: ['autodocs'],
   parameters: {

package/src/components/transfer/transfer.tsx

@@ -120,33 +120,39 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
       query: string,
       setQuery: (v: string) => void,
     ) => {
-      const selectableKeys = visible.filter((i) => !i.disabled).map((i) => i.key);
+      const selectableKeys = visible
+        .filter((i) => !i.disabled)
+        .map((i) => i.key);
       const allChecked =
-        selectableKeys.length > 0 && selectableKeys.every((k) => checked.includes(k));
+        selectableKeys.length > 0 &&
+        selectableKeys.every((k) => checked.includes(k));
       const someChecked =
         !allChecked && selectableKeys.some((k) => checked.includes(k));
       const toggleAll = (value: boolean) => {
-        if (value) setChecked(Array.from(new Set([...checked, ...selectableKeys])));
+        if (value)
+          setChecked(Array.from(new Set([...checked, ...selectableKeys])));
         else setChecked(checked.filter((k) => !selectableKeys.includes(k)));
       };
 
       return (
-        <div className="flex w-56 flex-col overflow-hidden rounded-md border bg-card text-sm">
-          <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
+        <div className="flex w-56 flex-col overflow-hidden rounded-md border border-border bg-card text-xs">
+          <div className="flex items-center justify-between gap-2 border-b border-b-border bg-muted/40 px-3 py-2">
             <label className="flex items-center gap-2">
               <Checkbox
-                checked={allChecked ? true : someChecked ? 'indeterminate' : false}
+                checked={
+                  allChecked ? true : someChecked ? 'indeterminate' : false
+                }
                 disabled={disabled || selectableKeys.length === 0}
                 onCheckedChange={(c) => toggleAll(c === true)}
               />
-              <span className="text-xs text-muted-foreground">
+              <span className="text-xs text-muted-foreground tabular-nums">
                 {checked.length}/{items.length}
               </span>
             </label>
-            <span className="text-xs font-medium">{title}</span>
+            <span className="text-xs font-medium text-foreground">{title}</span>
           </div>
           {showSearch ? (
-            <div className="border-b p-2">
+            <div className="border-b border-b-border p-2">
               <div className="relative">
                 <Search className="absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
                 <Input
@@ -175,8 +181,9 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
                   <li key={item.key}>
                     <label
                       className={cn(
-                        'flex items-center gap-2 px-3 py-1.5',
-                        !itemDisabled && 'cursor-pointer hover:bg-accent',
+                        'flex items-center gap-2 px-3 py-1.5 transition-colors',
+                        !itemDisabled && 'cursor-pointer hover:bg-accent/50',
+                        !itemDisabled && isChecked && 'bg-accent/40',
                         itemDisabled && 'cursor-not-allowed opacity-50',
                       )}
                     >
@@ -185,7 +192,8 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
                         disabled={itemDisabled}
                         onCheckedChange={(c) => {
                           if (c === true) setChecked([...checked, item.key]);
-                          else setChecked(checked.filter((k) => k !== item.key));
+                          else
+                            setChecked(checked.filter((k) => k !== item.key));
                         }}
                       />
                       <span className="min-w-0 flex-1 truncate">
@@ -202,10 +210,7 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
     };
 
     return (
-      <div
-        ref={ref}
-        className={cn('flex items-center gap-3', className)}
-      >
+      <div ref={ref} className={cn('flex items-center gap-3', className)}>
         {renderPane(
           titles[0],
           leftItems,
@@ -215,22 +220,24 @@ const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
           leftQuery,
           setLeftQuery,
         )}
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1.5">
           <Button
-            size="icon"
+            size="sm"
             variant="outline"
             disabled={disabled || leftChecked.length === 0}
             onClick={moveRight}
             aria-label="移动到右侧"
-            icon={<ChevronRight />}
+            className="size-7 p-0"
+            icon={<ChevronRight className="size-3.5" />}
           />
           <Button
-            size="icon"
+            size="sm"
             variant="outline"
             disabled={disabled || rightChecked.length === 0}
             onClick={moveLeft}
             aria-label="移动到左侧"
-            icon={<ChevronLeft />}
+            className="size-7 p-0"
+            icon={<ChevronLeft className="size-3.5" />}
           />
         </div>
         {renderPane(