refactor: 重构 CopyButton 与 RouterContainer 组件，移除 GlobalSnackbar 并统一使用 sonner toast 和 cn 工具函数

2026-05-22 20:51:13 +08:00
parent 2ced38769b
commit b3dd7146ad
4 changed files with 81 additions and 69 deletions
@@ -1,43 +1,25 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Copy, Check } from 'lucide-react';
+import { Check, Copy } from 'lucide-react';
 import { copyTextToClipboard } from '@/utils/clipboard';
-import type { SnackbarOptions } from '@/components/GlobalSnackbar';
+import { cn } from '@/lib/utils'; // 1. 必须使用 cn 工具函数
+import { toast } from 'sonner'; // 2. 推荐使用 shadcn 默认的全局 toast

-/**
- * 复制按钮组件属性
- * @param text 要复制的文本
- * @param tooltip 提示信息
- * @param size 按钮大小
- * @param color 按钮颜色
- * @param style 自定义样式
- * @param showMessage 消息提示函数，用于显示复制成功或失败的消息
- */
-interface CopyButtonProps {
+// 3. 继承原生按钮属性，允许外部自由扩展 className、variant 等
+interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  text: string;
  tooltip?: string;
  size?: 'small' | 'medium' | 'large';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string;
-  style?: React.CSSProperties;
-  showMessage?: (message: string, options?: SnackbarOptions) => void;
+  // 移除复杂的自定义颜色变体，交由 Tailwind 类名或 shadcn 的 variant 解决
+  variant?: 'default' | 'secondary' | 'ghost' | 'outline';
 }

-/**
- * 复制按钮组件
- * @param text 要复制的文本
- * @param tooltip 提示信息
- * @param size 按钮大小
- * @param color 按钮颜色
- * @param style 自定义样式
- * @param showMessage 消息提示函数，用于显示复制成功或失败的消息
- * @returns 复制按钮组件
- */
 export const CopyButton: React.FC<CopyButtonProps> = ({
  text,
  tooltip = '复制',
  size = 'small',
-  color = 'primary',
-  style,
-  showMessage,
+  variant = 'ghost',
+  className,
+  ...props
 }) => {
  const [copied, setCopied] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -48,55 +30,61 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
    };
  }, []);

-  const handleCopy = async () => {
-    if (text) {
-      const success = await copyTextToClipboard(text);
-      if (success) {
-        showMessage?.('复制成功', { severity: 'success' });
-        setCopied(true);
-        if (timerRef.current) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => setCopied(false), 1500);
-      } else {
-        showMessage?.('复制失败', { severity: 'error' });
-      }
+  const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation(); // 基础组件防冒泡，避免触发父级点击事件
+
+    if (!text) {
+      toast.error('无内容可复制');
+      return;
+    }
+
+    const success = await copyTextToClipboard(text);
+    if (success) {
+      toast.success('复制成功');
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 1500);
    } else {
-      showMessage?.('无内容可复制', { severity: 'error' });
+      toast.error('复制失败');
    }
  };

+  // 4. 将控制尺寸的类名标准化
  const sizeClasses = {
-    small: 'h-8 w-8',
-    medium: 'h-10 w-10',
-    large: 'h-12 w-12',
+    small: 'h-8 w-8 text-xs',
+    medium: 'h-10 w-10 text-sm',
+    large: 'h-12 w-12 text-base',
  };

-  const iconSize = size === 'small' ? 14 : size === 'medium' ? 16 : 18;
-
-  const colorClasses: Record<string, string> = {
-    primary: 'text-primary hover:bg-primary/10',
-    secondary: 'text-foreground hover:bg-muted',
-    success: 'text-green-600 hover:bg-green-500/10',
-    error: 'text-red-600 hover:bg-red-500/10',
-    info: 'text-primary hover:bg-primary/10',
-    warning: 'text-amber-600 hover:bg-amber-50',
+  // 5. 映射 shadcn 的底层通用 Variant 类名
+  const variantClasses = {
+    default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+    ghost: 'hover:bg-accent hover:text-accent-foreground',
+    outline:
+      'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
  };

-  const colorClass = colorClasses[color] || `text-[${color}] hover:bg-muted`;
-
  return (
    <button
      type="button"
      onClick={handleCopy}
      title={tooltip}
-      style={style}
-      className={`${sizeClasses[size]} rounded-md flex items-center justify-center transition-all ${
-        copied ? 'text-green-600 bg-green-50' : colorClass
-      } bg-background shadow-sm hover:shadow-md`}
+      // 6. 使用 cn() 合并类名，并完美支持暗黑模式的语义化变量 (destructive/muted等)
+      className={cn(
+        'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+        sizeClasses[size],
+        copied
+          ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' // 兼顾暗黑模式的成功色
+          : variantClasses[variant],
+        className, // 允许外部直接传入 text-red-500 等覆盖样式
+      )}
+      {...props}
    >
      {copied ? (
-        <Check style={{ width: iconSize, height: iconSize }} />
+        <Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
      ) : (
-        <Copy style={{ width: iconSize, height: iconSize }} />
+        <Copy className="h-[1.2em] w-[1.2em]" />
      )}
    </button>
  );
@@ -3,10 +3,13 @@ import { useRouter } from '@/providers/RouterProvider';
 import { Suspense, useMemo } from 'react';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
+import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示

 export default function RouterContainer() {
  const { currentPage, isLoaded } = useRouter();

+  // 2. 稳定的动态动画类名映射
  const animationClass = useMemo(() => {
    return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
  }, [currentPage]);
@@ -15,22 +18,47 @@ export default function RouterContainer() {
    return getEntryPointType();
  }, []);

+  // 骨架屏加载状态守卫
  if (!isLoaded) {
    return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
  }

+  // 3. 严格的路由查找与类型安全的组件分发
  const currentFeature = FEATURES.find((f) => f.key === currentPage);
-  const Component = currentFeature ? currentFeature.components[entryPointType] : null;
+  const MatchedComponent = currentFeature?.components?.[entryPointType];

  return (
    <div
-      key={currentPage} // Trigger animation on navigation
-      className={`${animationClass} flex-1 overflow-y-auto overflow-x-hidden scrollbar-gutter-stable flex flex-col`}
+      key={currentPage} // 保持原有通过重新挂载触发动画的精简特性
+      className={cn(
+        'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
+        'scrollbar-gutter-stable motion-reduce:transition-none', // 当系统开启“减弱动态效果”时，自动优雅降级，防止眩晕
+        animationClass,
+      )}
    >
      <Suspense
        fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
      >
-        <PageErrorBoundary resetKey={currentPage}>{Component && <Component />}</PageErrorBoundary>
+        <PageErrorBoundary resetKey={currentPage}>
+          {/*
+            4. 路由防御拦截：
+            如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
+            渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
+          */}
+          {MatchedComponent ? (
+            <MatchedComponent />
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
+                <AlertTriangle className="h-6 w-6" />
+              </div>
+              <h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
+              <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
+                该功能在当前运行环境（{entryPointType}）下不可用或已被移除。
+              </p>
+            </div>
+          )}
+        </PageErrorBoundary>
      </Suspense>
    </div>
  );
@@ -1,12 +1,10 @@
 import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
-import { useSnackbar } from '@/components/GlobalSnackbar';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { useQrCodeContext } from '../contexts/QrCodeContext';

 export default function GeneratePanel() {
  const { t } = useLazyTranslation('qrCode');
-  const { showMessage } = useSnackbar();
  const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();

  return (
@@ -21,7 +19,6 @@ export default function GeneratePanel() {
          showClear
          allowCopy
          externalError={generatorState.inputError}
-          showMessage={showMessage}
        />
      </div>
      <div>
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
 import { useSnackbar } from '@/components/GlobalSnackbar';
@@ -77,7 +77,6 @@ export default function ParsePanel() {
          allowCopy
          placeholder=""
          externalError={parserState.parseError}
-          showMessage={showMessage}
        />
      </div>
    </div>