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
@@ -23,6 +23,7 @@ import {
 import confetti from "canvas-confetti";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import ShareCardModal from "@/components/ShareCardModal";
+import Button from "@/components/Button";
 import { useToast } from "@/hooks/useToast";
 import { BlindboxRoomSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";
@@ -536,14 +537,15 @@ export default function BlindboxRoomPage() {
        >
          <Package size={40} className="text-purple-400/50" strokeWidth={1.5} />
          <p className="text-sm text-tertiary">你还不是这个房间的成员</p>
-          <button
+          <Button
            onClick={handleJoinRoom}
-            disabled={joiningRoom}
-            className="flex h-11 items-center gap-2 rounded-xl bg-purple-600 px-6 text-sm font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+            variant="purple"
+            size="lg"
+            loading={joiningRoom}
+            icon={<LogIn size={16} />}
          >
-            {joiningRoom ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
            加入房间
-          </button>
+          </Button>
        </motion.div>
      ) : (
        <>
@@ -717,21 +719,21 @@ export default function BlindboxRoomPage() {
                </div>

                <div className="flex items-center gap-3">
-                  <motion.button
+                  <Button
                    onClick={() => setShowShareCard(true)}
-                    className="flex h-10 items-center gap-2 rounded-full bg-purple-600 px-5 text-xs font-bold text-white shadow-lg shadow-purple-900/30 transition-colors hover:bg-purple-500"
-                    whileTap={{ scale: 0.96 }}
+                    variant="purple"
+                    shape="pill"
+                    icon={<Share2 size={14} />}
                  >
-                    <Share2 size={14} />
                    分享契约
-                  </motion.button>
-                  <motion.button
+                  </Button>
+                  <Button
                    onClick={() => { setPhase("pool"); setRevealedIdea(null); setShowShareCard(false); }}
-                    className="flex h-10 items-center gap-2 rounded-full bg-surface px-5 text-xs font-semibold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
-                    whileTap={{ scale: 0.96 }}
+                    variant="secondary"
+                    shape="pill"
                  >
                    继续投入想法
-                  </motion.button>
+                  </Button>
                </div>
              </motion.div>
            )}
@@ -10,11 +10,11 @@ import {
  LogIn,
  Users,
  Sparkles,
-  Loader2,
  ChevronRight,
 } from "lucide-react";
 import { getCachedProfile, isRegistered } from "@/lib/userId";
 import AuthModal from "@/components/AuthModal";
+import Button from "@/components/Button";
 import { BlindboxListSkeleton } from "@/components/Skeleton";
 import type { UserProfile } from "@/types";

@@ -256,14 +256,15 @@ export default function BlindboxLobbyPage() {
                  maxLength={30}
                  className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
                />
-                <button
+                <Button
                  onClick={handleCreate}
-                  disabled={creating}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-purple-600 px-4 text-sm font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+                  variant="purple"
+                  size="lg"
+                  loading={creating}
+                  icon={<Plus size={16} />}
                >
-                  {creating ? <Loader2 size={16} className="animate-spin" /> : <Plus size={16} />}
                  创建
-                </button>
+                </Button>
              </div>

              {/* Join alternative */}
@@ -286,14 +287,16 @@ export default function BlindboxLobbyPage() {
                  maxLength={6}
                  className="h-11 flex-1 rounded-xl border-none bg-surface px-4 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
                />
-                <button
+                <Button
                  onClick={handleJoin}
-                  disabled={joining || joinCode.trim().length < 6}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                  variant="secondary"
+                  size="lg"
+                  disabled={joinCode.trim().length < 6}
+                  loading={joining}
+                  icon={<LogIn size={16} />}
                >
-                  {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
                  加入
-                </button>
+                </Button>
              </div>

              {error && (
@@ -330,14 +333,14 @@ export default function BlindboxLobbyPage() {
                maxLength={30}
                className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600"
              />
-              <button
+              <Button
                onClick={handleCreate}
-                disabled={creating}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-purple-600 px-4 text-xs font-bold text-white transition-colors hover:bg-purple-500 disabled:opacity-50"
+                variant="purple"
+                loading={creating}
+                icon={<Plus size={14} />}
              >
-                {creating ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />}
                创建
-              </button>
+              </Button>
            </div>

            {/* Join row */}
@@ -354,14 +357,15 @@ export default function BlindboxLobbyPage() {
                maxLength={6}
                className="h-10 flex-1 rounded-xl border-none bg-surface px-3 text-center font-mono text-sm tracking-[0.15em] text-foreground outline-none ring-1 ring-border transition-all placeholder:font-sans placeholder:tracking-normal placeholder:text-dim focus:ring-2 focus:ring-purple-600"
              />
-              <button
+              <Button
                onClick={handleJoin}
-                disabled={joining || joinCode.trim().length < 6}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                variant="secondary"
+                disabled={joinCode.trim().length < 6}
+                loading={joining}
+                icon={<LogIn size={14} />}
              >
-                {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
                加入
-              </button>
+              </Button>
            </div>

            {error && (
@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { motion } from "framer-motion";
 import { AlertTriangle, RotateCcw, Home } from "lucide-react";
+import Button from "@/components/Button";

 export default function Error({
  error,
@@ -37,20 +38,12 @@ export default function Error({
        </p>

        <div className="mt-8 flex gap-3">
-          <button
-            onClick={reset}
-            className="flex items-center gap-1.5 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-rose-500"
-          >
-            <RotateCcw size={15} />
+          <Button onClick={reset} variant="danger" icon={<RotateCcw size={15} />}>
            重试
-          </button>
-          <a
-            href="/"
-            className="flex items-center gap-1.5 rounded-xl bg-surface px-5 py-2.5 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
-          >
-            <Home size={15} />
+          </Button>
+          <Button onClick={() => window.location.href = "/"} variant="secondary" icon={<Home size={15} />}>
            首页
-          </a>
+          </Button>
        </div>
      </motion.div>
    </div>
@@ -9,11 +9,11 @@ import {
  Heart,
  Sparkles,
  ChevronRight,
-  Loader2,
  Coffee,
 } from "lucide-react";
 import { getUserId } from "@/lib/userId";
 import { Skeleton, SkeletonCircle } from "@/components/Skeleton";
+import Button from "@/components/Button";
 import { getSceneConfig } from "@/lib/sceneConfig";
 import type { SceneType } from "@/types";

@@ -93,12 +93,9 @@ export default function InvitePage() {
        <p className="text-center text-sm text-muted">
          这个房间已过期或不存在，请让朋友重新分享链接
        </p>
-        <button
-          onClick={() => router.push("/")}
-          className="mt-2 rounded-xl bg-accent px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
-        >
+        <Button onClick={() => router.push("/")} className="mt-2">
          自己创建房间
-        </button>
+        </Button>
      </div>
    );
  }
@@ -194,20 +191,15 @@ export default function InvitePage() {
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.3 }}
      >
-        <button
+        <Button
          onClick={handleJoin}
-          disabled={joining}
-          className="flex h-12 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={joining}
+          loadingText="加入中..."
        >
-          {joining ? (
-            <>
-              <Loader2 size={18} className="animate-spin" />
-              加入中...
-            </>
-          ) : (
-            "加入房间"
-          )}
-        </button>
+          加入房间
+        </Button>
      </motion.div>
    </div>
  );
@@ -6,6 +6,7 @@ import TopNav from "@/components/TopNav";
 import SwipeDeck from "@/components/SwipeDeck";
 import { SwipeDeckSkeleton } from "@/components/Skeleton";
 import LeaveConfirmModal from "@/components/LeaveConfirmModal";
+import Button from "@/components/Button";
 import { useRoomPolling } from "@/hooks/useRoomPolling";
 import { getUserId } from "@/lib/userId";
 import { getSceneConfig } from "@/lib/sceneConfig";
@@ -96,12 +97,9 @@ export default function RoomPage() {
        <p className="text-4xl">🍜</p>
        <p className="text-base font-semibold text-secondary">房间不存在或已过期</p>
        <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
-        <button
-          onClick={() => router.push("/")}
-          className="mt-2 h-10 rounded-xl bg-accent px-6 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
-        >
+        <Button onClick={() => router.push("/")}>
          返回首页
-        </button>
+        </Button>
      </div>
    );
  }