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

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

src/app/invite/[id]/page.tsx

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