style: 增强 SwitchButtonGroup 的交互样式并移除冗余属性

- 在 utils.ts 中引入 twMerge 以合并 Tailwind 类。
- 在 ConverterForm.tsx 中简化类名，移除冗余样式。
- 在 LiveClock.tsx 中调整样式，优化文本显示。
- 在 ResultView.tsx 中更新布局和样式，提升视觉效果。

src/components/PageSkeleton.tsx

@@ -1,41 +0,0 @@
-/**
- * PageSkeleton 组件 - 页面加载骨架屏
- *
- * 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
- * 避免白屏闪烁，减少布局偏移
- */
-
-/**
- * 工具页面骨架屏
- */
-function ToolPageSkeleton() {
-  return (
-    <div className="p-5">
-      {/* 标题区域 */}
-      <div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
-
-      {/* 输入区域 */}
-      <div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
-
-      {/* 控制栏 */}
-      <div className="flex gap-2 mb-4">
-        <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
-        <div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
-        <div className="flex-1" />
-        <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
-      </div>
-
-      {/* 结果区域 */}
-      <div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
-    </div>
-  );
-}
-
-/**
- * 页面加载骨架屏
- */
-export default function PageSkeleton() {
-  return <ToolPageSkeleton />;
-}
-
-PageSkeleton.displayName = 'PageSkeleton';

src/components/README.md

@@ -5,8 +5,8 @@
 ## 组件列表
 
 | 组件                    | 用途                                                                                                   |
-| ----------------------- | ------------------------------------------------------------------------------ |
+| ----------------------- | ------------------------------------------------------------------------------------------------------ |
-| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
+| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界                                               |
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换                                 |
 | `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                                                     |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                                             |
@@ -17,7 +17,6 @@
 | `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式                                |
 | `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                                         |
 | `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                                         |
-| `PageSkeleton.tsx`      | 页面骨架屏，提供 `dashboard` 和 `tool` 两种变体，用于 Suspense fallback        |
 
 ## 使用约定
 

src/components/RouterContainer.tsx

@@ -4,7 +4,6 @@ import { useRouter } from '@/providers/RouterProvider';
 import type { PageType } from '@/types/storage';
 import { type ComponentType, useEffect, useState } from 'react';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
-import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils';
 import { AlertTriangle } from 'lucide-react';
 
@@ -30,7 +29,7 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
   }, [pageKey]);
 
   if (!Page) {
-    return <PageSkeleton />;
+    return <div className="flex-1" aria-hidden="true" />;
   }
 
   return <Page />;

src/components/SwitchButtonGroup.tsx

@@ -15,7 +15,6 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
   options: SwitchOption<T>[];
   onChange: (value: T) => void;
   size?: 'small' | 'medium' | 'large';
-  buttonClassName?: string;
 }
 
 const SIZE_CLASSES = {
@@ -24,8 +23,10 @@ const SIZE_CLASSES = {
   large: 'text-base h-11 px-4 py-2 rounded-lg',
 } as const;
 
-const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95';
+const SELECTED_CLASSES =
-const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
+  'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95 hover:shadow-md active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
+const UNSELECTED_CLASSES =
+  'hover:bg-background/50 hover:text-foreground/80 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
 
 export default function SwitchButtonGroup<T extends string | number = string>({
   value,
@@ -33,7 +34,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
   onChange,
   size = 'medium',
   className,
-  buttonClassName,
   ...props
 }: SwitchButtonGroupProps<T>) {
   return (
@@ -54,7 +54,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
             'flex-1 transition-all',
             SIZE_CLASSES[size],
             value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
-            buttonClassName,
           )}
         >
           {option.label}

src/components/__tests__/PageSkeleton.test.tsx

@@ -1,32 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render } from '@testing-library/react';
-import PageSkeleton from '@/components/PageSkeleton';
-
-describe('PageSkeleton 组件', () => {
-  describe('渲染测试', () => {
-    it('应渲染工具页面骨架', () => {
-      const { container } = render(<PageSkeleton />);
-
-      const skeletons = container.querySelectorAll('.animate-pulse');
-      expect(skeletons.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('布局结构测试', () => {
-    it('工具骨架屏应有内边距', () => {
-      const { container } = render(<PageSkeleton />);
-      const toolContainer = container.firstChild as HTMLElement;
-
-      expect(toolContainer).toHaveClass('p-5');
-    });
-  });
-
-  describe('骨架屏元素测试', () => {
-    it('工具骨架屏应包含动画脉冲效果', () => {
-      const { container } = render(<PageSkeleton />);
-
-      const skeletons = container.querySelectorAll('.animate-pulse');
-      expect(skeletons.length).toBeGreaterThan(0);
-    });
-  });
-});

src/components/ui/badge.tsx

@@ -22,11 +22,11 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps
+interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants };
+export { Badge };

src/components/ui/button.tsx

@@ -46,4 +46,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { Button, buttonVariants };
+export { Button };

src/components/ui/checkbox.tsx

@@ -5,7 +5,7 @@ import { Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root

src/components/ui/dialog.tsx

@@ -12,7 +12,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
@@ -33,7 +33,7 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<
 }
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentRef<typeof DialogPrimitive.Content>,
   DialogContentProps
 >(({ className, children, showCloseButton = true, ...props }, ref) => (
   <DialogPortal>
@@ -72,7 +72,7 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
@@ -84,7 +84,7 @@ const DialogTitle = React.forwardRef<
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description

src/components/ui/label.tsx

@@ -9,7 +9,7 @@ const labelVariants = cva(
 );
 
 const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />

src/components/ui/select.tsx

@@ -10,7 +10,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
@@ -30,7 +30,7 @@ const SelectTrigger = React.forwardRef<
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
@@ -44,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
@@ -58,7 +58,7 @@ const SelectScrollDownButton = React.forwardRef<
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
@@ -90,7 +90,7 @@ const SelectContent = React.forwardRef<
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
@@ -102,7 +102,7 @@ const SelectLabel = React.forwardRef<
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
@@ -124,27 +124,4 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef<
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem };
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};

src/components/ui/switch.tsx

@@ -4,7 +4,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { cn } from '@/lib/utils';
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root

src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }

src/pages/TestDataGenerator/components/GeneratorConfig.tsx

@@ -84,7 +84,11 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
               </SelectTrigger>
               <SelectContent>
                 {param.options?.map((option) => (
-                  <SelectItem key={String(option.value)} value={String(option.value)}>
+                  <SelectItem
+                    key={String(option.value)}
+                    value={String(option.value)}
+                    className="cursor-pointer"
+                  >
                     {option.label}
                   </SelectItem>
                 ))}

src/pages/Timestamp/components/ConverterForm.tsx

@@ -41,10 +41,7 @@ export default function ConverterForm({
           placeholder={INPUT_PLACEHOLDERS[mode]}
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          className={cn(
+          className={cn('h-10', error && 'border-destructive')}
-            'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
-            error && 'border-destructive focus-visible:ring-destructive',
-          )}
         />
 
         {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
@@ -60,16 +57,13 @@ export default function ConverterForm({
         />
 
         <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
-          <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+          <SelectTrigger>
             <SelectValue placeholder="选择时区" />
           </SelectTrigger>
-          <SelectContent className="max-h-64 font-mono">
+
+          <SelectContent className="max-h-64">
             {ZONES.map((z) => (
-              <SelectItem
+              <SelectItem key={z} value={z} className="cursor-pointer">
-                key={z}
-                value={z}
-                className="text-xs font-semibold focus:bg-accent cursor-pointer"
-              >
                 {z}
               </SelectItem>
             ))}

src/pages/Timestamp/components/LiveClock.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { CopyButton } from '@/components/CopyButton';
@@ -7,7 +8,7 @@ import { msToUnit } from '../constants';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
-interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
+interface LiveClockProps extends HTMLAttributes<HTMLDivElement> {
   unit: UnitType;
   onUseNow: (val: number) => void;
 }
@@ -28,18 +29,14 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
   return (
     <div
       className={cn(
-        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
+        'flex items-center gap-3 px-3 h-10 rounded-lg font-bold text-[12px] border px-[20px]',
         className,
       )}
       {...props}
     >
-      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
+      <span>当前时间戳</span>
-        当前时间戳
-      </span>
 
-      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
+      <span className="flex-1 text-sm ">{text}</span>
-        {text}
-      </span>
 
       <Button
         type="button"
@@ -50,12 +47,12 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
         title="填充到下方"
         variant="ghost"
         size="icon"
-        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+        className="h-7 w-7"
       >
         <Clock className="w-3.5 h-3.5" />
       </Button>
 
-      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7 rounded-md border" />
+      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7" />
     </div>
   );
 }

src/pages/Timestamp/components/ResultView.tsx

@@ -34,16 +34,15 @@ export default function ResultView({
         转换结果
       </span>
 
-      <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
+      <div className="bg-card border p-4 rounded-lg flex items-center gap-3 justify-between">
-        <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
+        <span className="break-all text-lg select-all flex-1">{result}</span>
-          {result}
+
-        </span>
         <CopyButton
           text={result}
           tooltip="复制结果"
           variant="ghost"
           size="icon"
-          className="h-7 w-7 text-muted-foreground hover:text-foreground"
+          className="h-7 w-7"
         />
       </div>
     </div>

tailwind.shell.config.js

@@ -11,7 +11,6 @@ export default {
     './src/components/ErrorBoundary.tsx',
     './src/components/ErrorFallback.tsx',
     './src/components/PageErrorBoundary.tsx',
-    './src/components/PageSkeleton.tsx',
     './src/components/ui/button.tsx',
     './src/components/ui/input.tsx',
     './src/components/ui/sonner.tsx',