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

新增 Button.tsx 支持 5 种变体(primary/secondary/danger/ghost/purple)、
3 种尺寸(sm/md/lg)、pill/rounded 形状及内置 loading 状态，
替换 8 个文件中 16 处重复的按钮样板代码。

src/app/blindbox/[code]/page.tsx

@@ -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>
             )}