refactor: 使用 className 替换 sx/buttonSx 并优化 SwitchButtonGroup 选中动画

components/SwitchButtonGroup.tsx

@@ -1,53 +1,75 @@
+import React from 'react';
+import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+
 export interface SwitchOption<T extends string | number = string> {
   value: T;
   label: React.ReactNode;
 }
 
-export interface SwitchButtonGroupProps<T extends string | number = string> {
+// 2. 移除内联 sx，继承标准 HTML 属性，并使用标准的类名注入机制
+export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
   value: T;
   options: SwitchOption<T>[];
   onChange: (value: T) => void;
-  sx?: React.CSSProperties;
   size?: 'small' | 'medium' | 'large';
-  buttonSx?: React.CSSProperties;
+  buttonClassName?: string; // 替换原有的 buttonSx
 }
 
 export default function SwitchButtonGroup<T extends string | number = string>({
   value,
   options,
   onChange,
-  sx,
   size = 'medium',
-  buttonSx,
+  className,
+  buttonClassName,
+  ...props
 }: SwitchButtonGroupProps<T>) {
+  // 3. 将尺寸和高度、内边距等整体对齐，保证按钮和背景容器成比例缩放
   const sizeClasses = {
-    small: 'text-xs',
+    small: 'text-xs h-8 px-2 py-1 rounded-md',
-    medium: 'text-sm',
+    medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
-    large: 'text-base',
+    large: 'text-base h-11 px-4 py-2 rounded-lg',
   };
 
+  const containerPadding = size === 'large' ? 'p-1' : 'p-1';
+
   return (
     <div
-      className="w-full mb-4 rounded-xl border border-border bg-muted p-1.5 flex gap-1"
+      className={cn(
-      style={sx}
+        // 将默认布局设计得更为通用（去掉一刀切的 mb-4，由外部控制布局空间）
+        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground',
+        containerPadding,
+        className,
+      )}
+      {...props}
     >
-      {options.map((option) => (
+      {options.map((option) => {
+        const isSelected = value === option.value;
+
+        return (
           <button
             key={option.value}
             type="button"
             onClick={() => onChange(option.value)}
-          className={`flex-1 px-3 py-1.5 rounded-lg font-bold whitespace-nowrap transition-all ${
+            className={cn(
-            sizeClasses[size]
+              // 4. 完美继承 shadcn 的 Tabs 交互和动效微调
-          } ${
+              'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
-            value === option.value
+              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
-              ? 'bg-primary text-primary-foreground shadow-md'
+              'disabled:pointer-events-none disabled:opacity-50',
-              : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              sizeClasses[size],
-          }`}
+              isSelected
-          style={buttonSx}
+                ? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
+                : 'hover:bg-background/50 hover:text-foreground/80',
+              buttonClassName,
+            )}
           >
             {option.label}
           </button>
-      ))}
+        );
+      })}
     </div>
   );
 }

components/__tests__/SwitchButtonGroup.test.tsx

@@ -21,10 +21,10 @@ describe('SwitchButtonGroup 组件', () => {
     const buttonA = screen.getByRole('button', { name: /选项A/i });
     const buttonB = screen.getByRole('button', { name: /选项B/i });
 
-    // 选中的按钮有 bg-background text-primary shadow-sm 类
+    // 选中的按钮有 bg-background text-foreground shadow-sm 类
-    expect(buttonA).toHaveClass('bg-primary', 'text-primary-foreground', 'shadow-md');
+    expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
-    // 未选中的按钮有 text-muted-foreground 类
+    // 未选中的按钮有 hover:bg-background/50 类
-    expect(buttonB).toHaveClass('text-muted-foreground');
+    expect(buttonB).toHaveClass('hover:bg-background/50');
   });
 
   it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
@@ -45,13 +45,13 @@ describe('SwitchButtonGroup 组件', () => {
     expect(handleChange).toHaveBeenCalledWith('a');
   });
 
-  it('应支持通过 sx 自定义样式', () => {
+  it('应支持通过 className 自定义样式', () => {
     const { container } = render(
-      <SwitchButtonGroup value="a" options={options} onChange={vi.fn()} sx={{ width: 200 }} />,
+      <SwitchButtonGroup value="a" options={options} onChange={vi.fn()} className="custom-group" />,
     );
 
-    const group = container.querySelector('.flex.gap-1');
+    const group = container.firstChild;
-    expect(group).toBeInTheDocument();
+    expect(group).toHaveClass('custom-group');
   });
 
   it('应支持 size 属性', () => {
@@ -62,14 +62,7 @@ describe('SwitchButtonGroup 组件', () => {
   });
 
   it('应支持 buttonSx 自定义按钮样式', () => {
-    render(
+    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
-      <SwitchButtonGroup
-        value="a"
-        options={options}
-        onChange={vi.fn()}
-        buttonSx={{ textTransform: 'uppercase' }}
-      />,
-    );
 
     const button = screen.getByRole('button', { name: /选项A/i });
     expect(button).toBeInTheDocument();
@@ -90,14 +83,7 @@ describe('SwitchButtonGroup 组件', () => {
   });
 
   it('buttonSx 传入时应覆盖默认换行样式', () => {
-    render(
+    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
-      <SwitchButtonGroup
-        value="a"
-        options={options}
-        onChange={vi.fn()}
-        buttonSx={{ whiteSpace: 'normal' }}
-      />,
-    );
 
     const button = screen.getByRole('button', { name: /选项A/i });
     expect(button).toBeInTheDocument();
@@ -122,8 +108,8 @@ describe('SwitchButtonGroup 组件', () => {
       const button2 = screen.getByRole('button', { name: /^2$/i });
       const button4 = screen.getByRole('button', { name: /^4$/i });
 
-      expect(button2).toHaveClass('text-muted-foreground');
+      expect(button2).toHaveClass('hover:bg-background/50');
-      expect(button4).toHaveClass('bg-primary', 'text-primary-foreground', 'shadow-md');
+      expect(button4).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
     });
 
     it('点击 number 选项时应传回 number 值', () => {