refactor: 提取 Button 组件，统一按钮变体、尺寸和加载状态

新增 Button.tsx 支持 5 种变体(primary/secondary/danger/ghost/purple)、 3 种尺寸(sm/md/lg)、pill/rounded 形状及内置 loading 状态，替换 8 个文件中 16 处重复的按钮样板代码。
2026-02-26 18:39:14 +08:00
parent 19edcaeeb5
commit 455b9e04d8
9 changed files with 178 additions and 115 deletions
@@ -2,11 +2,12 @@

 import { useState } from "react";
 import { motion } from "framer-motion";
-import { X, Loader2, Eye, EyeOff } from "lucide-react";
+import { X, Eye, EyeOff } from "lucide-react";
 import { AVATARS } from "@/lib/avatars";
 import { setCachedProfile } from "@/lib/userId";
 import type { UserProfile } from "@/types";
 import Modal from "@/components/Modal";
+import Button from "@/components/Button";

 type Tab = "login" | "register";

@@ -232,22 +233,16 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
        </motion.p>
      )}

-      <button
+      <Button
        onClick={handleSubmit}
-        disabled={loading}
-        className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
+        size="lg"
+        fullWidth
+        loading={loading}
+        loadingText={tab === "login" ? "登录中..." : "注册中..."}
+        className="mt-5"
      >
-        {loading ? (
-          <>
-            <Loader2 size={16} className="animate-spin" />
-            {tab === "login" ? "登录中..." : "注册中..."}
-          </>
-        ) : tab === "login" ? (
-          "登录"
-        ) : (
-          "注册"
-        )}
-      </button>
+        {tab === "login" ? "登录" : "注册"}
+      </Button>
    </Modal>
  );
 }
@@ -0,0 +1,71 @@
+"use client";
+
+import { type ComponentProps, type ReactNode } from "react";
+import { motion } from "framer-motion";
+import { Loader2 } from "lucide-react";
+
+const variantStyles = {
+  primary:
+    "bg-accent text-white shadow-lg shadow-accent/20 hover:bg-accent-hover disabled:opacity-50",
+  secondary:
+    "bg-surface text-secondary ring-1 ring-border hover:bg-elevated disabled:opacity-40",
+  danger:
+    "bg-rose-600 text-white hover:bg-rose-500 disabled:opacity-50",
+  ghost:
+    "text-muted hover:text-secondary hover:bg-elevated disabled:opacity-50",
+  purple:
+    "bg-purple-600 text-white hover:bg-purple-500 disabled:opacity-50",
+} as const;
+
+const sizeStyles = {
+  sm: "h-8 px-3 text-xs gap-1",
+  md: "h-10 px-4 text-sm gap-1.5",
+  lg: "h-11 px-6 text-sm font-bold gap-2",
+} as const;
+
+const spinnerSize = { sm: 13, md: 15, lg: 18 } as const;
+
+interface ButtonProps
+  extends Omit<ComponentProps<typeof motion.button>, "ref" | "children"> {
+  variant?: keyof typeof variantStyles;
+  size?: "sm" | "md" | "lg";
+  shape?: "rounded" | "pill";
+  loading?: boolean;
+  loadingText?: string;
+  icon?: ReactNode;
+  fullWidth?: boolean;
+  children?: ReactNode;
+}
+
+export default function Button({
+  variant = "primary",
+  size = "md",
+  shape = "rounded",
+  loading = false,
+  loadingText,
+  icon,
+  fullWidth = false,
+  className = "",
+  disabled,
+  children,
+  ...rest
+}: ButtonProps) {
+  const base = "flex items-center justify-center font-semibold transition-colors";
+  const shapeClass = shape === "pill" ? "rounded-full" : "rounded-xl";
+
+  return (
+    <motion.button
+      className={`${base} ${variantStyles[variant]} ${sizeStyles[size]} ${shapeClass} ${fullWidth ? "w-full" : ""} ${className}`}
+      disabled={loading || disabled}
+      whileTap={{ scale: 0.95 }}
+      {...rest}
+    >
+      {loading ? (
+        <Loader2 size={spinnerSize[size]} className="animate-spin" />
+      ) : icon ? (
+        icon
+      ) : null}
+      {loading && loadingText ? loadingText : children}
+    </motion.button>
+  );
+}
@@ -34,6 +34,7 @@ import { isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
 import RestaurantImage from "@/components/RestaurantImage";
 import AuthModal from "@/components/AuthModal";
+import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";

 interface MatchResultProps {
@@ -107,24 +108,26 @@ function NoMatchResult({
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 0.55 }}
      >
-        <motion.button
+        <Button
          onClick={onReset}
-          disabled={resetting}
-          className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
-          whileTap={{ scale: 0.95 }}
+          shape="pill"
+          loading={resetting}
+          loadingText="重置中..."
+          icon={<RotateCcw size={15} />}
+          className="px-8 py-3"
        >
-          <RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
-          {resetting ? "重置中..." : "再来一轮"}
-        </motion.button>
+          再来一轮
+        </Button>

-        <motion.button
+        <Button
          onClick={() => router.push("/")}
-          className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
-          whileTap={{ scale: 0.95 }}
+          variant="secondary"
+          shape="pill"
+          icon={<Home size={15} />}
+          className="px-8 py-3"
        >
-          <Home size={15} />
          换个条件重新搜
-        </motion.button>
+        </Button>
      </motion.div>
    </motion.div>
  );
@@ -487,14 +490,15 @@ export default function MatchResult({
            </motion.a>
          )}

-          <motion.button
+          <Button
            onClick={handleOpenShareCard}
-            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
-            whileTap={{ scale: 0.95 }}
+            variant="secondary"
+            shape="pill"
+            icon={<Share2 size={15} />}
+            className="px-8 py-3"
          >
-            <Share2 size={15} />
            生成分享卡片
-          </motion.button>
+          </Button>
        </motion.div>

        {/* Registration nudge */}
@@ -511,14 +515,14 @@ export default function MatchResult({
            <p className="mt-1 text-xs text-muted">
              仅需用户名 + 密码，10 秒完成
            </p>
-            <motion.button
+            <Button
              onClick={() => setShowAuth(true)}
-              className="mt-3 flex h-10 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
-              whileTap={{ scale: 0.95 }}
+              fullWidth
+              icon={<UserPlus size={15} />}
+              className="mt-3"
            >
-              <UserPlus size={15} />
              注册保存记录
-            </motion.button>
+            </Button>
          </motion.div>
        )}

@@ -6,6 +6,7 @@ import { X, Copy, Share2, QrCode } from "lucide-react";
 import type { SceneType } from "@/types";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import Modal from "@/components/Modal";
+import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";

 interface QrInviteModalProps {
@@ -92,20 +93,23 @@ export default function QrInviteModal({
        </div>

        <div className="mt-5 flex w-full gap-2.5">
-          <button
+          <Button
            onClick={handleCopy}
-            className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-secondary ring-1 ring-border transition-colors active:bg-subtle"
+            variant="secondary"
+            size="lg"
+            icon={<Copy size={15} />}
+            className="flex-1"
          >
-            <Copy size={15} />
            复制链接
-          </button>
-          <button
+          </Button>
+          <Button
            onClick={handleShare}
-            className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
+            size="lg"
+            icon={<Share2 size={15} />}
+            className="flex-1"
          >
-            <Share2 size={15} />
            发送邀请
-          </button>
+          </Button>
        </div>
      </div>
    </Modal>