From 798b883250e5d2ececeb03219a00bff7091e71b4 Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 15:50:51 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E6=88=BF=E9=97=B4=E9=A1=B5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96=20=E2=80=94=20TopNav=20=E9=87=8D?=
 =?UTF-8?q?=E6=8E=92=E3=80=81=E8=BF=9B=E5=BA=A6=E8=B4=B4=E8=BF=91=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E3=80=81=E6=8C=89=E9=92=AE=E9=97=B4=E8=B7=9D=E6=94=B6?=
 =?UTF-8?q?=E7=B4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TopNav: 退出按钮移到最左侧，房间号合并到邀请按钮，移除右侧内容避免与全局徽章重叠
- SwipeDeck: 移除绿色进度条，UserProgressBar 始终显示并贴在卡片正上方
- ActionButtons: 缩小与卡片的垂直间距
---
 src/components/ActionButtons.tsx |   2 +-
 src/components/SwipeDeck.tsx     | 112 ++++++++++++++-----------------
 src/components/TopNav.tsx        |  38 ++++-------
 3 files changed, 64 insertions(+), 88 deletions(-)

diff --git a/src/components/ActionButtons.tsx b/src/components/ActionButtons.tsx
index 29f600f..e9e6f8b 100644
--- a/src/components/ActionButtons.tsx
+++ b/src/components/ActionButtons.tsx
@@ -14,7 +14,7 @@ export default function ActionButtons({
   disabled,
 }: ActionButtonsProps) {
   return (
-    <div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
+    <div className="relative z-10 -mt-2 flex items-center justify-center gap-4 pb-5">
       <motion.button
         className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-rose-500/10 ring-1 ring-rose-500/20 disabled:opacity-40"
         whileTap={{ scale: 0.85 }}
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index fc40e51..494d7a8 100644
--- a/src/components/SwipeDeck.tsx
+++ b/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)} />
           )}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 9c8b822..e078c08 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Users, QrCode, LogOut, Crown, Lock } from "lucide-react";
+import { QrCode, LogOut, Crown, Lock } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import QrInviteModal from "./QrInviteModal";
 import RoomManageModal from "./RoomManageModal";
@@ -10,7 +10,7 @@ import { getSceneConfig } from "@/lib/sceneConfig";
 
 interface TopNavProps {
   roomId: string;
-  userCount: number;
+  userCount?: number;
   onExit?: () => void;
   isCreator?: boolean;
   userId?: string;
@@ -47,14 +47,21 @@ export default function TopNav({
 
   return (
     <>
-      <nav className="relative z-10 flex h-14 items-center justify-between pl-4 pr-24">
+      <nav className="relative z-10 flex h-14 items-center px-4">
         <div className="flex items-center gap-1.5">
+          <button
+            onClick={onExit}
+            className="flex items-center justify-center rounded-full p-1.5 text-muted transition-colors active:bg-elevated active:text-secondary"
+            aria-label="退出房间"
+          >
+            <LogOut size={15} />
+          </button>
           <button
             onClick={() => setShowQr(true)}
             className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
           >
             <QrCode size={13} />
-            邀请
+            邀请（{roomId}）
           </button>
           {isCreator && (
             <button
@@ -63,36 +70,17 @@ export default function TopNav({
             >
               <Crown size={13} />
               管理
+              {locked && <Lock size={11} />}
             </button>
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-heading">
+        <h1 className="pointer-events-none absolute inset-x-0 text-center text-base font-bold tracking-tight text-heading">
           <span className="block leading-tight">NoWhatever</span>
           <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
           </span>
         </h1>
-
-        <div className="flex items-center justify-end gap-1.5 text-xs text-muted">
-          {locked && (
-            <Lock size={12} className="text-amber-500" />
-          )}
-          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-tertiary">
-            {roomId}
-          </span>
-          <div className="flex items-center gap-0.5">
-            <Users size={13} />
-            <span className="font-semibold text-accent">{userCount}</span>
-          </div>
-          <button
-            onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-secondary"
-            aria-label="退出房间"
-          >
-            <LogOut size={15} />
-          </button>
-        </div>
       </nav>
 
       <AnimatePresence>