refactor: 提取 UserAvatar、Input、Card 三个可复用 UI 组件

- UserAvatar: 统一头像渲染（5 种尺寸），新增 resolveAvatar 工具函数，替换 SwipeDeck 和 RoomManageModal 中的重复逻辑
- Input: 统一表单输入样式（4 种尺寸 + default/purple 变体），替换 AuthModal、ProfilePage、BlindboxPage 共 12 处
- Card: 统一卡片容器样式 + 可选淡入动画和延迟，替换 ProfilePage 中 7 处重复的 motion.div

src/components/SwipeDeck.tsx

@@ -8,7 +8,7 @@ import MatchResult from "./MatchResult";
 import SwipeGuide from "./SwipeGuide";
 import { Restaurant, SwipeDirection, MatchType, RunnerUp, UserProfile, SceneType } from "@/types";
 import { Heart, Undo2, Check } from "lucide-react";
-import { getAvatar, getAvatarBg } from "@/lib/avatars";
+import UserAvatar from "@/components/UserAvatar";
 
 function UserProgressBar({
   userId,
@@ -27,17 +27,11 @@ function UserProgressBar({
 }) {
   const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
 
-  const myProfile = userProfiles[userId];
-  const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
-  const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
-
   return (
     <div className="flex items-center gap-x-3">
       <div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
         <span className="flex items-center gap-1.5 text-[11px] text-accent">
-          <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
-            {myAvatar}
-          </span>
+          <UserAvatar userId={userId} profile={userProfiles[userId]} size="xs" />
           你
           <span className="rounded bg-accent/10 px-1 py-px tabular-nums font-medium">
             {localIndex}/{total}
@@ -45,18 +39,13 @@ function UserProgressBar({
         </span>
         {others.map(([id, count]) => {
           const finished = count >= total;
-          const profile = userProfiles[id];
-          const emoji = profile?.avatar ?? getAvatar(id).emoji;
-          const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
-          const label = profile?.username ?? "";
+          const label = userProfiles[id]?.username ?? "";
           return (
             <span
               key={id}
               className={`flex items-center gap-1.5 text-[11px] ${finished ? "text-emerald-400" : "text-muted"}`}
             >
-              <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
-                {emoji}
-              </span>
+              <UserAvatar userId={id} profile={userProfiles[id]} size="xs" />
               {label && <span className="max-w-12 truncate">{label}</span>}
               <span className={`rounded px-1 py-px tabular-nums font-medium ${finished ? "bg-emerald-500/10" : "bg-elevated"}`}>
                 {count}/{total}
@@ -95,17 +84,11 @@ function WaitingProgress({
   const others = entries.filter(([id]) => id !== userId);
   const finishedCount = others.filter(([, c]) => c >= total).length;
 
-  const myProfile = userProfiles[userId];
-  const myEmoji = myProfile?.avatar ?? getAvatar(userId).emoji;
-  const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
-
   return (
     <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
       <div className="flex items-center justify-between">
         <span className="flex items-center gap-1.5 text-xs font-medium text-accent">
-          <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
-            {myEmoji}
-          </span>
+          <UserAvatar userId={userId} profile={userProfiles[userId]} size="sm" />
           你 {total}/{total}
         </span>
         <Check size={14} className="text-emerald-400" />
@@ -114,17 +97,17 @@ function WaitingProgress({
       {others.map(([id, count]) => {
         const finished = count >= total;
         const pct = Math.min((count / total) * 100, 100);
-        const profile = userProfiles[id];
-        const emoji = profile?.avatar ?? getAvatar(id).emoji;
-        const bg = profile ? getAvatarBg(profile.avatar) : getAvatar(id).bg;
-        const label = profile?.username ?? "";
+        const label = userProfiles[id]?.username ?? "";
         return (
           <div key={id} className="flex flex-col gap-1">
             <div className="flex items-center justify-between">
               <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
-                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
-                  {emoji}
-                </span>
+                <UserAvatar
+                  userId={id}
+                  profile={userProfiles[id]}
+                  size="sm"
+                  bg={finished ? "bg-emerald-500/20" : undefined}
+                />
                 {label && <span className="max-w-12 truncate">{label}</span>}
                 {count}/{total}
               </span>