ui: 房间页布局优化 — TopNav 重排、进度贴近卡片、按钮间距收紧

- TopNav: 退出按钮移到最左侧，房间号合并到邀请按钮，移除右侧内容避免与全局徽章重叠
- SwipeDeck: 移除绿色进度条，UserProgressBar 始终显示并贴在卡片正上方
- ActionButtons: 缩小与卡片的垂直间距

src/components/SwipeDeck.tsx

@@ -16,48 +16,59 @@ function UserProgressBar({
   localIndex,
   total,
   userProfiles,
+  onUndo,
 }: {
   userId: string;
   swipeCounts: Record<string, number>;
   localIndex: number;
   total: number;
   userProfiles: Record<string, UserProfile>;
+  onUndo: () => void;
 }) {
   const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
-  if (others.length === 0) return null;
 
   const myProfile = userProfiles[userId];
   const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
   const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
 
   return (
-    <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
-      <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
-        <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
-          {myAvatar}
-        </span>
-        你 {localIndex}/{total}
-      </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 ?? "";
-        return (
-          <span
-            key={id}
-            className={`flex items-center gap-1 text-[11px] tabular-nums ${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>
-            {label && <span className="max-w-12 truncate">{label}</span>}
-            {count}/{total}
-            {finished && <Check size={10} className="text-emerald-400" />}
+    <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 text-[11px] tabular-nums text-accent">
+          <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
+            {myAvatar}
           </span>
-        );
-      })}
+          你 {localIndex}/{total}
+        </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 ?? "";
+          return (
+            <span
+              key={id}
+              className={`flex items-center gap-1 text-[11px] tabular-nums ${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>
+              {label && <span className="max-w-12 truncate">{label}</span>}
+              {count}/{total}
+              {finished && <Check size={10} className="text-emerald-400" />}
+            </span>
+          );
+        })}
+      </div>
+      <button
+        onClick={onUndo}
+        disabled={localIndex === 0}
+        className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
+      >
+        <Undo2 size={12} />
+        撤回
+      </button>
     </div>
   );
 }
@@ -323,43 +334,20 @@ export default function SwipeDeck({
 
   return (
     <>
-      {!allSwiped && !resolvedMatchId && (
-        <div className="mx-auto w-full max-w-sm px-4 pb-1">
-          <div className="flex items-center gap-2">
-            <div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
-              <motion.div
-                className="h-full rounded-full bg-emerald-400"
-                initial={{ width: 0 }}
-                animate={{
-                  width: `${((currentIndex) / restaurants.length) * 100}%`,
-                }}
-                transition={{ type: "spring", stiffness: 300, damping: 30 }}
-              />
-            </div>
-            <span className="shrink-0 text-[11px] tabular-nums text-muted">
-              {currentIndex}/{restaurants.length}
-            </span>
-            <button
-              onClick={handleUndo}
-              disabled={currentIndex === 0}
-              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
-            >
-              <Undo2 size={12} />
-              撤回
-            </button>
-          </div>
-          <UserProgressBar
-            userId={userId}
-            swipeCounts={swipeCounts}
-            localIndex={currentIndex}
-            total={restaurants.length}
-            userProfiles={userProfiles}
-          />
-        </div>
-      )}
-
       <div className="relative flex flex-1 items-center justify-center px-4">
           <div className="relative h-[60vh] w-full max-w-sm">
+          {!allSwiped && !resolvedMatchId && (
+            <div className="absolute inset-x-0 bottom-full mb-2">
+              <UserProgressBar
+                userId={userId}
+                swipeCounts={swipeCounts}
+                localIndex={currentIndex}
+                total={restaurants.length}
+                userProfiles={userProfiles}
+                onUndo={handleUndo}
+              />
+            </div>
+          )}
           {currentIndex === 0 && !resolvedMatchId && guideVisible && (
             <SwipeGuide onDismiss={() => setGuideVisible(false)} />
           )}