From b406acc8135924dd7e08937ef07571349ba210dc Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Tue, 24 Feb 2026 19:23:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=BE=E7=A4=BA=E6=AF=8F=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E7=9A=84=E5=AE=9E=E6=97=B6=E6=BB=91=E5=8D=A1=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=8C=E7=94=A8=20emoji=20=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=8C=BA=E5=88=86=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

滑卡时进度条下方展示所有人的进度（如 🐸你 12/15 🐱 8/15），
等待页面也改为详细进度卡片，减少等待焦虑并增强社交临场感。
每个用户根据 userId 确定性分配 emoji 头像，无需手动输入。
---
 src/app/room/[id]/page.tsx   |   1 +
 src/components/SwipeDeck.tsx | 190 ++++++++++++++++++++++++++++++-----
 2 files changed, 167 insertions(+), 24 deletions(-)

diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 1665216..94a067d 100644
--- a/src/app/room/[id]/page.tsx
+++ b/src/app/room/[id]/page.tsx
@@ -58,6 +58,7 @@ export default function RoomPage() {
         matchType={matchType}
         matchLikes={matchLikes}
         likeCounts={likeCounts}
+        swipeCounts={swipeCounts}
         userCount={userCount}
         onReset={handleReset}
       />
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 3706138..75060bc 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -7,7 +7,134 @@ import ActionButtons from "./ActionButtons";
 import MatchResult from "./MatchResult";
 import SwipeGuide from "./SwipeGuide";
 import { Restaurant, SwipeDirection, MatchType } from "@/types";
-import { Heart, Undo2 } from "lucide-react";
+import { Heart, Undo2, Check } from "lucide-react";
+
+const AVATARS = [
+  { emoji: "🐱", bg: "bg-amber-100" },
+  { emoji: "🐶", bg: "bg-orange-100" },
+  { emoji: "🦊", bg: "bg-red-100" },
+  { emoji: "🐰", bg: "bg-pink-100" },
+  { emoji: "🐼", bg: "bg-zinc-100" },
+  { emoji: "🐨", bg: "bg-sky-100" },
+  { emoji: "🦁", bg: "bg-yellow-100" },
+  { emoji: "🐸", bg: "bg-lime-100" },
+  { emoji: "🐵", bg: "bg-stone-100" },
+  { emoji: "🐷", bg: "bg-rose-100" },
+  { emoji: "🐙", bg: "bg-purple-100" },
+  { emoji: "🦄", bg: "bg-violet-100" },
+] as const;
+
+function getAvatar(uid: string) {
+  let hash = 0;
+  for (let i = 0; i < uid.length; i++) {
+    hash = (hash * 31 + uid.charCodeAt(i)) | 0;
+  }
+  return AVATARS[((hash % AVATARS.length) + AVATARS.length) % AVATARS.length];
+}
+
+function UserProgressBar({
+  userId,
+  swipeCounts,
+  localIndex,
+  total,
+}: {
+  userId: string;
+  swipeCounts: Record<string, number>;
+  localIndex: number;
+  total: number;
+}) {
+  const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
+  if (others.length === 0) return null;
+
+  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-emerald-500">
+        <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] leading-none">
+          {getAvatar(userId).emoji}
+        </span>
+        你 {localIndex}/{total}
+      </span>
+      {others.map(([id, count]) => {
+        const finished = count >= total;
+        const avatar = getAvatar(id);
+        return (
+          <span
+            key={id}
+            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
+          >
+            <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${avatar.bg} text-[10px] leading-none`}>
+              {avatar.emoji}
+            </span>
+            {count}/{total}
+            {finished && <Check size={10} className="text-emerald-400" />}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function WaitingProgress({
+  userId,
+  swipeCounts,
+  total,
+}: {
+  userId: string;
+  swipeCounts: Record<string, number>;
+  total: number;
+}) {
+  const entries = Object.entries(swipeCounts);
+  if (entries.length <= 1) return null;
+
+  const others = entries.filter(([id]) => id !== userId);
+  const finishedCount = others.filter(([, c]) => c >= total).length;
+
+  return (
+    <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
+          <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-sm leading-none">
+            {getAvatar(userId).emoji}
+          </span>
+          你 {total}/{total}
+        </span>
+        <Check size={14} className="text-emerald-400" />
+      </div>
+
+      {others.map(([id, count]) => {
+        const finished = count >= total;
+        const pct = Math.min((count / total) * 100, 100);
+        const avatar = getAvatar(id);
+        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-emerald-600" : "text-zinc-500"}`}>
+                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : avatar.bg}`}>
+                  {avatar.emoji}
+                </span>
+                {count}/{total}
+              </span>
+              {finished && <Check size={14} className="text-emerald-400" />}
+            </div>
+            {!finished && (
+              <div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
+                <motion.div
+                  className="h-full rounded-full bg-amber-400"
+                  animate={{ width: `${pct}%` }}
+                  transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      <p className="text-center text-[10px] text-zinc-400">
+        {finishedCount}/{others.length} 人已完成
+      </p>
+    </div>
+  );
+}
 
 interface SwipeDeckProps {
   restaurants: Restaurant[];
@@ -18,6 +145,7 @@ interface SwipeDeckProps {
   matchType: MatchType;
   matchLikes: number;
   likeCounts: Record<string, number>;
+  swipeCounts: Record<string, number>;
   userCount: number;
   onReset: () => Promise<void>;
 }
@@ -31,6 +159,7 @@ export default function SwipeDeck({
   matchType,
   matchLikes,
   likeCounts,
+  swipeCounts,
   userCount,
   onReset,
 }: SwipeDeckProps) {
@@ -175,28 +304,36 @@ export default function SwipeDeck({
   return (
     <>
       {!allSwiped && !resolvedMatchId && (
-        <div className="mx-auto flex w-full max-w-sm items-center gap-2 px-4 pb-1">
-          <div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
-            <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 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-zinc-100">
+              <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-zinc-400">
+              {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-500 transition-colors active:bg-amber-50 disabled:opacity-0"
+            >
+              <Undo2 size={12} />
+              撤回
+            </button>
           </div>
-          <span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
-            {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-500 transition-colors active:bg-amber-50 disabled:opacity-0"
-          >
-            <Undo2 size={12} />
-            撤回
-          </button>
+          <UserProgressBar
+            userId={userId}
+            swipeCounts={swipeCounts}
+            localIndex={currentIndex}
+            total={restaurants.length}
+          />
         </div>
       )}
 
@@ -226,9 +363,14 @@ export default function SwipeDeck({
           )}
 
           {showWaiting && (
-            <div className="flex h-full flex-col items-center justify-center gap-2">
+            <div className="flex h-full flex-col items-center justify-center gap-4">
               <div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
-              <p className="text-sm text-zinc-400">等待其他人完成选择...</p>
+              <p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
+              <WaitingProgress
+                userId={userId}
+                swipeCounts={swipeCounts}
+                total={restaurants.length}
+              />
             </div>
           )}