feat: 用户名密码登录注册系统

- 新增 /api/auth/register 和 /api/auth/login 接口，使用 bcryptjs 哈希密码
- User 模型改为 username + passwordHash，id 自动生成 cuid
- 新增 AuthModal 组件（登录/注册双标签页），替换旧的 ProfileSetupModal
- 重写 /profile 页面：支持修改用户名、密码、头像、绑定邮箱、退出登录
- /api/user PUT 支持密码修改（需验证当前密码）和用户名唯一性校验
- 游客模式保留，右上角显示"登录"按钮；登录后显示头像和用户名
- 全局 nickname -> username 重命名（types、SwipeDeck、RoomManageModal、buildRoomStatus）
- 新增 logout() 清除登录态并重新生成游客 UUID

src/components/SwipeDeck.tsx

@@ -6,65 +6,53 @@ import SwipeableCard from "./SwipeableCard";
 import ActionButtons from "./ActionButtons";
 import MatchResult from "./MatchResult";
 import SwipeGuide from "./SwipeGuide";
-import { Restaurant, SwipeDirection, MatchType, RunnerUp } from "@/types";
+import { Restaurant, SwipeDirection, MatchType, RunnerUp, UserProfile } from "@/types";
 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];
-}
+import { getAvatar, getAvatarBg } from "@/lib/avatars";
 
 function UserProgressBar({
   userId,
   swipeCounts,
   localIndex,
   total,
+  userProfiles,
 }: {
   userId: string;
   swipeCounts: Record<string, number>;
   localIndex: number;
   total: number;
+  userProfiles: Record<string, UserProfile>;
 }) {
   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-100";
+
   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 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 avatar = getAvatar(id);
+        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-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 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-[3rem] truncate">{label}</span>}
             {count}/{total}
             {finished && <Check size={10} className="text-emerald-400" />}
           </span>
@@ -78,10 +66,12 @@ function WaitingProgress({
   userId,
   swipeCounts,
   total,
+  userProfiles,
 }: {
   userId: string;
   swipeCounts: Record<string, number>;
   total: number;
+  userProfiles: Record<string, UserProfile>;
 }) {
   const entries = Object.entries(swipeCounts);
   if (entries.length <= 1) return null;
@@ -89,12 +79,16 @@ 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-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 className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
+            {myEmoji}
           </span>
           你 {total}/{total}
         </span>
@@ -104,14 +98,18 @@ function WaitingProgress({
       {others.map(([id, count]) => {
         const finished = count >= total;
         const pct = Math.min((count / total) * 100, 100);
-        const avatar = getAvatar(id);
+        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 (
           <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 className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : bg}`}>
+                  {emoji}
                 </span>
+                {label && <span className="max-w-[3rem] truncate">{label}</span>}
                 {count}/{total}
               </span>
               {finished && <Check size={14} className="text-emerald-400" />}
@@ -148,6 +146,7 @@ interface SwipeDeckProps {
   likeCounts: Record<string, number>;
   swipeCounts: Record<string, number>;
   userCount: number;
+  userProfiles: Record<string, UserProfile>;
   onReset: () => Promise<void>;
   onNarrow: (restaurantIds: string[]) => Promise<void>;
 }
@@ -164,6 +163,7 @@ export default function SwipeDeck({
   likeCounts,
   swipeCounts,
   userCount,
+  userProfiles,
   onReset,
   onNarrow,
 }: SwipeDeckProps) {
@@ -351,6 +351,7 @@ export default function SwipeDeck({
             swipeCounts={swipeCounts}
             localIndex={currentIndex}
             total={restaurants.length}
+            userProfiles={userProfiles}
           />
         </div>
       )}
@@ -388,6 +389,7 @@ export default function SwipeDeck({
                 userId={userId}
                 swipeCounts={swipeCounts}
                 total={restaurants.length}
+                userProfiles={userProfiles}
               />
             </div>
           )}
@@ -419,6 +421,8 @@ export default function SwipeDeck({
           runnerUps={runnerUps}
           allRestaurants={restaurants}
           userCount={userCount}
+          roomId={roomId}
+          userId={userId}
           onReset={handleReset}
           onNarrow={handleNarrow}
           resetting={resetting}