kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 全站统一暗色主题设计系统

Browse Source 
- globals.css 定义语义化 token (background/surface/elevated/border/muted/dim/accent)
- 所有页面和组件迁移至暗色 token，移除硬编码 bg-white/text-zinc-*/bg-gray-*
- RestaurantCard 和 MatchResult 适配暗色卡片风格
- 按钮颜色分层：系统CTA(accent)/模式强调(橙/紫)/危险(rose)/次级(surface)
- 修复 room 页深色文字在深背景不可见的可访问性问题
This commit is contained in:
kurihada
2026-02-26 11:27:18 +08:00
parent 7d51f5200d
commit e10e3c8230
13 changed files with 258 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+21 -2
View File
@@ -1,13 +1,27 @@
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
--background: #f8f9fa; --background: #030712;
--foreground: #171717; --foreground: #f3f4f6;
} }
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-surface: #111827;
--color-elevated: #1f2937;
--color-inset: #0a0f1a;
--color-border: #1f2937;
--color-subtle: #374151;
--color-muted: #6b7280;
--color-dim: #4b5563;
--color-accent: #10b981;
--color-accent-hover: #059669;
--font-sans: var(--font-geist-sans); --font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono); --font-mono: var(--font-geist-mono);
} }
@@ -39,3 +53,8 @@ body {
from { opacity: 1; } from { opacity: 1; }
to { opacity: 0; } to { opacity: 0; }
} }
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
src/app/invite/[id]/page.tsx
+31 -31
View File
@@ -62,7 +62,7 @@ export default function InvitePage() {
if (status === "loading") { if (status === "loading") {
return ( return (
<div className="flex min-h-dvh flex-col items-center justify-center bg-background"> <div className="flex min-h-dvh flex-col items-center justify-center bg-background">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" /> <div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
</div> </div>
); );
} }
@@ -70,16 +70,16 @@ export default function InvitePage() {
if (status === "not_found") { if (status === "not_found") {
return ( return (
<div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6"> <div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100"> <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
<Utensils size={28} className="text-zinc-400" /> <Utensils size={28} className="text-muted" />
</div> </div>
<h1 className="text-xl font-bold text-zinc-900">房间不存在</h1> <h1 className="text-xl font-bold text-white">房间不存在</h1>
<p className="text-center text-sm text-zinc-500"> <p className="text-center text-sm text-muted">
这个房间已过期或不存在，请让朋友重新分享链接 这个房间已过期或不存在，请让朋友重新分享链接
</p> </p>
<button <button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="mt-2 rounded-xl bg-emerald-500 px-6 py-2.5 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600" className="mt-2 rounded-xl bg-accent px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
> >
自己创建房间 自己创建房间
</button> </button>
@@ -88,44 +88,44 @@ export default function InvitePage() {
} }
return ( return (
<div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12"> <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12 overflow-y-auto scrollbar-none">
<motion.div <motion.div
className="flex flex-col items-center" className="flex flex-col items-center"
initial={{ y: -20, opacity: 0 }} initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
> >
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-200"> <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-accent shadow-lg shadow-accent/20">
{scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />} {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
</div> </div>
<h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900"> <h1 className="mt-5 text-3xl font-black tracking-tight text-white">
NoWhatever NoWhatever
</h1> </h1>
<p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400"> <p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
别说随便 别说随便
</p> </p>
</motion.div> </motion.div>
<motion.div <motion.div
className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50/50 px-6 py-5" className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl bg-surface px-6 py-5 ring-1 ring-accent/30"
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.1 }} transition={{ duration: 0.5, delay: 0.1 }}
> >
<p className="text-center text-lg font-bold text-zinc-800"> <p className="text-center text-lg font-bold text-white">
{sceneConfig.inviteText} {sceneConfig.inviteText}
</p> </p>
<div className="flex items-center gap-2 text-sm text-zinc-500"> <div className="flex items-center gap-2 text-sm text-muted">
<span className="rounded-full bg-white px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-emerald-600 shadow-sm"> <span className="rounded-full bg-elevated px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-accent ring-1 ring-border">
{roomId} {roomId}
</span> </span>
</div> </div>
{userCount > 0 && ( {userCount > 0 && (
<div className="flex items-center gap-1 text-xs text-zinc-400"> <div className="flex items-center gap-1 text-xs text-muted">
<Users size={13} /> <Users size={13} />
<span> <span>
已有 <span className="font-semibold text-emerald-500">{userCount}</span> 人在房间 已有 <span className="font-semibold text-accent">{userCount}</span> 人在房间
</span> </span>
</div> </div>
)} )}
@@ -138,35 +138,35 @@ export default function InvitePage() {
transition={{ duration: 0.5, delay: 0.2 }} transition={{ duration: 0.5, delay: 0.2 }}
> >
<div className="flex flex-col items-center gap-1.5 w-20"> <div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
<Users size={18} className="text-emerald-500" /> <Users size={18} className="text-accent" />
</div> </div>
<span className="text-xs font-semibold text-zinc-700">加入房间</span> <span className="text-xs font-semibold text-gray-300">加入房间</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center"> <span className="text-[10px] leading-tight text-muted text-center">
和朋友一起 和朋友一起
</span> </span>
</div> </div>
<ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" /> <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
<div className="flex flex-col items-center gap-1.5 w-20"> <div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
<Heart size={18} className="text-amber-500" /> <Heart size={18} className="text-amber-400" />
</div> </div>
<span className="text-xs font-semibold text-zinc-700">各自滑卡</span> <span className="text-xs font-semibold text-gray-300">各自滑卡</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center"> <span className="text-[10px] leading-tight text-muted text-center">
右滑喜欢的店 右滑喜欢的店
</span> </span>
</div> </div>
<ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" /> <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
<div className="flex flex-col items-center gap-1.5 w-20"> <div className="flex flex-col items-center gap-1.5 w-20">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
<Sparkles size={18} className="text-rose-500" /> <Sparkles size={18} className="text-rose-400" />
</div> </div>
<span className="text-xs font-semibold text-zinc-700">匹配结果</span> <span className="text-xs font-semibold text-gray-300">匹配结果</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center"> <span className="text-[10px] leading-tight text-muted text-center">
滑中同一家就去 滑中同一家就去
</span> </span>
</div> </div>
@@ -181,7 +181,7 @@ export default function InvitePage() {
<button <button
onClick={handleJoin} onClick={handleJoin}
disabled={joining} disabled={joining}
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50" className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
> >
{joining ? ( {joining ? (
<> <>
src/app/profile/page.tsx
+54 -55
View File
@@ -26,7 +26,6 @@ import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Rest
function firstImage(r: Restaurant): string { function firstImage(r: Restaurant): string {
if (r.images?.length > 0) return r.images[0]; if (r.images?.length > 0) return r.images[0];
// backward compat: old DB records may have `image` instead of `images`
const legacy = (r as unknown as Record<string, unknown>).image; const legacy = (r as unknown as Record<string, unknown>).image;
return typeof legacy === "string" ? legacy : ""; return typeof legacy === "string" ? legacy : "";
} }
@@ -253,7 +252,7 @@ export default function ProfilePage() {
if (loading) { if (loading) {
return ( return (
<div className="flex min-h-dvh items-center justify-center bg-background"> <div className="flex min-h-dvh items-center justify-center bg-background">
<Loader2 size={24} className="animate-spin text-zinc-400" /> <Loader2 size={24} className="animate-spin text-muted" />
</div> </div>
); );
} }
@@ -266,21 +265,21 @@ export default function ProfilePage() {
: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`; : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
return ( return (
<div className="min-h-dvh bg-background pb-16"> <div className="min-h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
<nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm"> <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
<button <button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors active:bg-zinc-100" className="flex h-8 w-8 items-center justify-center rounded-full text-muted transition-colors active:bg-elevated"
> >
<ArrowLeft size={20} /> <ArrowLeft size={20} />
</button> </button>
<h1 className="text-base font-bold text-zinc-900">个人中心</h1> <h1 className="text-base font-bold text-white">个人中心</h1>
</nav> </nav>
<div className="mx-auto max-w-sm px-5"> <div className="mx-auto max-w-sm px-5">
{/* Profile card */} {/* Profile card */}
<motion.div <motion.div
className="rounded-2xl bg-white p-4 shadow-sm" className="rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
> >
@@ -290,7 +289,7 @@ export default function ProfilePage() {
className={`relative flex h-14 w-14 items-center justify-center rounded-2xl text-2xl transition-transform active:scale-95 ${getAvatarBg(profile.avatar)}`} className={`relative flex h-14 w-14 items-center justify-center rounded-2xl text-2xl transition-transform active:scale-95 ${getAvatarBg(profile.avatar)}`}
> >
{profile.avatar} {profile.avatar}
<span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white text-zinc-400 shadow-sm"> <span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-surface text-muted shadow-sm ring-1 ring-border">
<Edit3 size={10} /> <Edit3 size={10} />
</span> </span>
</button> </button>
@@ -306,34 +305,34 @@ export default function ProfilePage() {
}} }}
maxLength={16} maxLength={16}
autoFocus autoFocus
className="h-8 flex-1 rounded-lg border border-zinc-200 px-2 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
/> />
<button <button
onClick={handleSaveUsername} onClick={handleSaveUsername}
disabled={usernameSaving} disabled={usernameSaving}
className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500 text-white disabled:opacity-50" className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-white disabled:opacity-50"
> >
{usernameSaving ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />} {usernameSaving ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
</button> </button>
<button <button
onClick={() => { setEditingUsername(false); setUsernameMsg(""); }} onClick={() => { setEditingUsername(false); setUsernameMsg(""); }}
className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500" className="flex h-8 w-8 items-center justify-center rounded-lg bg-elevated text-muted"
> >
<X size={14} /> <X size={14} />
</button> </button>
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h2 className="text-lg font-bold text-zinc-900">{profile.username}</h2> <h2 className="text-lg font-bold text-white">{profile.username}</h2>
<button <button
onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }} onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }}
className="text-zinc-400 transition-colors active:text-zinc-600" className="text-muted transition-colors active:text-gray-300"
> >
<Edit3 size={13} /> <Edit3 size={13} />
</button> </button>
</div> </div>
)} )}
{usernameMsg && <p className="mt-1 text-xs text-rose-500">{usernameMsg}</p>} {usernameMsg && <p className="mt-1 text-xs text-rose-400">{usernameMsg}</p>}
</div> </div>
</div> </div>
@@ -354,8 +353,8 @@ export default function ProfilePage() {
onClick={() => handleSaveAvatar(a.emoji)} onClick={() => handleSaveAvatar(a.emoji)}
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${ className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
profile.avatar === a.emoji profile.avatar === a.emoji
? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1` ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
: "bg-zinc-50 hover:bg-zinc-100" : "bg-elevated hover:bg-subtle"
}`} }`}
> >
{a.emoji} {a.emoji}
@@ -369,7 +368,7 @@ export default function ProfilePage() {
{/* Change password */} {/* Change password */}
<motion.div <motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm" className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.05 }} transition={{ delay: 0.05 }}
@@ -378,8 +377,8 @@ export default function ProfilePage() {
onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }} onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
className="flex w-full items-center gap-2" className="flex w-full items-center gap-2"
> >
<Lock size={15} className="text-zinc-400" /> <Lock size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-zinc-700">修改密码</h3> <h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
</button> </button>
<AnimatePresence> <AnimatePresence>
@@ -393,46 +392,46 @@ export default function ProfilePage() {
> >
<div className="mt-3 flex flex-col gap-3"> <div className="mt-3 flex flex-col gap-3">
<div> <div>
<p className="text-xs text-zinc-400">当前密码</p> <p className="text-xs text-muted">当前密码</p>
<div className="relative mt-1"> <div className="relative mt-1">
<input <input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={currentPassword} value={currentPassword}
onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }} onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
className="h-9 w-full rounded-lg border border-zinc-200 px-3 pr-9 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400" className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted"
> >
{showPassword ? <EyeOff size={14} /> : <Eye size={14} />} {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
</button> </button>
</div> </div>
</div> </div>
<div> <div>
<p className="text-xs text-zinc-400">新密码</p> <p className="text-xs text-muted">新密码</p>
<input <input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={newPassword} value={newPassword}
onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }} onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
placeholder="至少 6 个字符" placeholder="至少 6 个字符"
className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/> />
</div> </div>
<div> <div>
<p className="text-xs text-zinc-400">确认新密码</p> <p className="text-xs text-muted">确认新密码</p>
<input <input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={confirmPassword} value={confirmPassword}
onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }} onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
placeholder="再次输入新密码" placeholder="再次输入新密码"
className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/> />
</div> </div>
{passwordMsg && ( {passwordMsg && (
<p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-500" : "text-emerald-500"}`}> <p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-400" : "text-accent"}`}>
{passwordMsg} {passwordMsg}
</p> </p>
)} )}
@@ -440,7 +439,7 @@ export default function ProfilePage() {
<button <button
onClick={handleSavePassword} onClick={handleSavePassword}
disabled={passwordSaving} disabled={passwordSaving}
className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-emerald-500 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50" className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-accent text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
> >
{passwordSaving ? <Loader2 size={14} className="animate-spin" /> : "保存新密码"} {passwordSaving ? <Loader2 size={14} className="animate-spin" /> : "保存新密码"}
</button> </button>
@@ -452,15 +451,15 @@ export default function ProfilePage() {
{/* Email binding */} {/* Email binding */}
<motion.div <motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm" className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.1 }} transition={{ delay: 0.1 }}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Mail size={15} className="text-zinc-400" /> <Mail size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-zinc-700">绑定邮箱</h3> <h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
<span className="text-[10px] text-zinc-400">（可选）</span> <span className="text-[10px] text-dim">（可选）</span>
</div> </div>
<div className="mt-3 flex gap-2"> <div className="mt-3 flex gap-2">
<input <input
@@ -471,18 +470,18 @@ export default function ProfilePage() {
setEmail(e.target.value); setEmail(e.target.value);
setEmailMsg(""); setEmailMsg("");
}} }}
className="h-9 flex-1 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/> />
<button <button
onClick={handleSaveEmail} onClick={handleSaveEmail}
disabled={emailSaving} disabled={emailSaving}
className="flex h-9 items-center gap-1 rounded-lg bg-emerald-500 px-3 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50" className="flex h-9 items-center gap-1 rounded-lg bg-accent px-3 text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
> >
{emailSaving ? <Loader2 size={13} className="animate-spin" /> : "保存"} {emailSaving ? <Loader2 size={13} className="animate-spin" /> : "保存"}
</button> </button>
</div> </div>
{emailMsg && ( {emailMsg && (
<p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-500" : "text-emerald-500"}`}> <p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-400" : "text-accent"}`}>
{emailMsg} {emailMsg}
</p> </p>
)} )}
@@ -490,7 +489,7 @@ export default function ProfilePage() {
{/* Decision History */} {/* Decision History */}
<motion.div <motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm" className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.15 }} transition={{ delay: 0.15 }}
@@ -500,15 +499,15 @@ export default function ProfilePage() {
className="flex w-full items-center justify-between" className="flex w-full items-center justify-between"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Clock size={15} className="text-zinc-400" /> <Clock size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-zinc-700"> <h3 className="text-sm font-semibold text-gray-300">
决策记录 {history.length > 0 && `(${history.length})`} 决策记录 {history.length > 0 && `(${history.length})`}
</h3> </h3>
</div> </div>
<motion.span <motion.span
animate={{ rotate: showHistory ? 180 : 0 }} animate={{ rotate: showHistory ? 180 : 0 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="text-zinc-400" className="text-muted"
> >
<ChevronDown size={16} /> <ChevronDown size={16} />
</motion.span> </motion.span>
@@ -525,10 +524,10 @@ export default function ProfilePage() {
> >
{historyLoading ? ( {historyLoading ? (
<div className="flex justify-center py-6"> <div className="flex justify-center py-6">
<Loader2 size={18} className="animate-spin text-zinc-300" /> <Loader2 size={18} className="animate-spin text-muted" />
</div> </div>
) : history.length === 0 ? ( ) : history.length === 0 ? (
<p className="py-6 text-center text-xs text-zinc-400"> <p className="py-6 text-center text-xs text-muted">
还没有决策记录 还没有决策记录
</p> </p>
) : ( ) : (
@@ -539,7 +538,7 @@ export default function ProfilePage() {
href={amapNavUrl(d.restaurantData)} href={amapNavUrl(d.restaurantData)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex gap-3 rounded-xl bg-zinc-50 p-2.5 transition-colors active:bg-zinc-100" className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
> >
{firstImage(d.restaurantData) && ( {firstImage(d.restaurantData) && (
<img <img
@@ -550,8 +549,8 @@ export default function ProfilePage() {
/> />
)} )}
<div className="flex min-w-0 flex-1 flex-col justify-center"> <div className="flex min-w-0 flex-1 flex-col justify-center">
<p className="truncate text-sm font-semibold text-zinc-800">{d.restaurantName}</p> <p className="truncate text-sm font-semibold text-white">{d.restaurantName}</p>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400"> <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
<span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span> <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
<span>{d.participants} 人参与</span> <span>{d.participants} 人参与</span>
<span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span> <span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
@@ -568,7 +567,7 @@ export default function ProfilePage() {
{/* Favorites */} {/* Favorites */}
<motion.div <motion.div
className="mt-4 rounded-2xl bg-white p-4 shadow-sm" className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
initial={{ y: 10, opacity: 0 }} initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.2 }} transition={{ delay: 0.2 }}
@@ -578,15 +577,15 @@ export default function ProfilePage() {
className="flex w-full items-center justify-between" className="flex w-full items-center justify-between"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Star size={15} className="text-zinc-400" /> <Star size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-zinc-700"> <h3 className="text-sm font-semibold text-gray-300">
收藏餐厅 {favorites.length > 0 && `(${favorites.length})`} 收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
</h3> </h3>
</div> </div>
<motion.span <motion.span
animate={{ rotate: showFavorites ? 180 : 0 }} animate={{ rotate: showFavorites ? 180 : 0 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
className="text-zinc-400" className="text-muted"
> >
<ChevronDown size={16} /> <ChevronDown size={16} />
</motion.span> </motion.span>
@@ -603,10 +602,10 @@ export default function ProfilePage() {
> >
{favLoading ? ( {favLoading ? (
<div className="flex justify-center py-6"> <div className="flex justify-center py-6">
<Loader2 size={18} className="animate-spin text-zinc-300" /> <Loader2 size={18} className="animate-spin text-muted" />
</div> </div>
) : favorites.length === 0 ? ( ) : favorites.length === 0 ? (
<p className="py-6 text-center text-xs text-zinc-400"> <p className="py-6 text-center text-xs text-muted">
还没有收藏的餐厅 还没有收藏的餐厅
</p> </p>
) : ( ) : (
@@ -616,7 +615,7 @@ export default function ProfilePage() {
return ( return (
<div <div
key={f.id} key={f.id}
className="flex gap-3 rounded-xl bg-zinc-50 p-2.5" className="flex gap-3 rounded-xl bg-elevated p-2.5"
> >
{firstImage(r) && ( {firstImage(r) && (
<img <img
@@ -627,8 +626,8 @@ export default function ProfilePage() {
/> />
)} )}
<div className="flex min-w-0 flex-1 flex-col justify-center"> <div className="flex min-w-0 flex-1 flex-col justify-center">
<p className="truncate text-sm font-semibold text-zinc-800">{r.name}</p> <p className="truncate text-sm font-semibold text-white">{r.name}</p>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400"> <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
<span className="flex items-center gap-0.5"> <span className="flex items-center gap-0.5">
<Star size={10} className="fill-amber-400 text-amber-400" /> <Star size={10} className="fill-amber-400 text-amber-400" />
{r.rating} {r.rating}
@@ -644,7 +643,7 @@ export default function ProfilePage() {
</div> </div>
<button <button
onClick={() => handleRemoveFavorite(f.id)} onClick={() => handleRemoveFavorite(f.id)}
className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-zinc-400 transition-colors active:bg-zinc-200 active:text-rose-500" className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
> >
<Trash2 size={14} /> <Trash2 size={14} />
</button> </button>
@@ -667,7 +666,7 @@ export default function ProfilePage() {
> >
<button <button
onClick={handleLogout} onClick={handleLogout}
className="flex items-center gap-1.5 text-xs font-medium text-zinc-400 transition-colors hover:text-rose-500" className="flex items-center gap-1.5 text-xs font-medium text-muted transition-colors hover:text-rose-400"
> >
<LogOut size={13} /> <LogOut size={13} />
退出登录 退出登录
@@ -678,7 +677,7 @@ export default function ProfilePage() {
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <motion.div
className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg" className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
initial={{ opacity: 0, y: -12, x: "-50%" }} initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }} animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }} exit={{ opacity: 0, y: -12, x: "-50%" }}
src/app/room/[id]/page.tsx
+5 -5
View File
@@ -93,11 +93,11 @@ export default function RoomPage() {
return ( return (
<div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6"> <div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
<p className="text-4xl">🍜</p> <p className="text-4xl">🍜</p>
<p className="text-base font-semibold text-zinc-700">房间不存在或已过期</p> <p className="text-base font-semibold text-gray-300">房间不存在或已过期</p>
<p className="text-sm text-zinc-400">房间号可能有误，或房间已超过 24 小时</p> <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
<button <button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="mt-2 h-10 rounded-xl bg-emerald-500 px-6 text-sm font-bold text-white shadow-sm transition-colors hover:bg-emerald-600" className="mt-2 h-10 rounded-xl bg-accent px-6 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
> >
返回首页 返回首页
</button> </button>
@@ -113,8 +113,8 @@ export default function RoomPage() {
if (!ready) { if (!ready) {
return ( return (
<div className="flex h-dvh flex-col items-center justify-center gap-3 bg-background"> <div className="flex h-dvh flex-col items-center justify-center gap-3 bg-background">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" /> <div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
<p className="text-sm text-zinc-400">正在加载数据...</p> <p className="text-sm text-muted">正在加载数据...</p>
</div> </div>
); );
} }
src/components/ActionButtons.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ export default function ActionButtons({
return ( return (
<div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3"> <div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
<motion.button <motion.button
className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40" 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 }} whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.08 }} whileHover={{ scale: 1.08 }}
onClick={() => onAction("left")} onClick={() => onAction("left")}
@@ -27,7 +27,7 @@ export default function ActionButtons({
</motion.button> </motion.button>
<motion.button <motion.button
className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40" className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-emerald-500/10 ring-1 ring-emerald-500/20 disabled:opacity-40"
whileTap={{ scale: 0.85 }} whileTap={{ scale: 0.85 }}
whileHover={{ scale: 1.08 }} whileHover={{ scale: 1.08 }}
onClick={() => onAction("right")} onClick={() => onAction("right")}
src/components/AuthModal.tsx
+20 -20
View File
@@ -117,7 +117,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{open && ( {open && (
<motion.div <motion.div
ref={backdropRef} ref={backdropRef}
className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center" className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
@@ -125,36 +125,36 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
onClick={handleBackdropClick} onClick={handleBackdropClick}
> >
<motion.div <motion.div
className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6" className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
initial={{ y: "100%" }} initial={{ y: "100%" }}
animate={{ y: 0 }} animate={{ y: 0 }}
exit={{ y: "100%" }} exit={{ y: "100%" }}
transition={{ type: "spring", damping: 28, stiffness: 350 }} transition={{ type: "spring", damping: 28, stiffness: 350 }}
> >
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<span className="text-lg font-bold text-zinc-900">欢迎</span> <span className="text-lg font-bold text-white">欢迎</span>
<button <button
onClick={onClose} onClick={onClose}
className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200" className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
> >
<X size={16} /> <X size={16} />
</button> </button>
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="flex gap-1 rounded-xl bg-zinc-100 p-1"> <div className="flex gap-1 rounded-xl bg-elevated p-1">
{(["login", "register"] as const).map((t) => ( {(["login", "register"] as const).map((t) => (
<button <button
key={t} key={t}
onClick={() => switchTab(t)} onClick={() => switchTab(t)}
className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${ className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
tab === t ? "text-zinc-900" : "text-zinc-400" tab === t ? "text-white" : "text-muted"
}`} }`}
> >
{tab === t && ( {tab === t && (
<motion.div <motion.div
layoutId="auth-tab" layoutId="auth-tab"
className="absolute inset-0 rounded-lg bg-white shadow-sm" className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
transition={{ type: "spring", stiffness: 400, damping: 30 }} transition={{ type: "spring", stiffness: 400, damping: 30 }}
/> />
)} )}
@@ -167,7 +167,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{/* Username */} {/* Username */}
<div className="mt-5"> <div className="mt-5">
<p className="text-xs font-medium text-zinc-500">用户名</p> <p className="text-xs font-medium text-muted">用户名</p>
<input <input
type="text" type="text"
value={username} value={username}
@@ -177,13 +177,13 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
}} }}
placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"} placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
maxLength={16} maxLength={16}
className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/> />
</div> </div>
{/* Password */} {/* Password */}
<div className="mt-4"> <div className="mt-4">
<p className="text-xs font-medium text-zinc-500">密码</p> <p className="text-xs font-medium text-muted">密码</p>
<div className="relative mt-2"> <div className="relative mt-2">
<input <input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
@@ -193,12 +193,12 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
setError(""); setError("");
}} }}
placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"} placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
className="h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 pr-10 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors active:text-zinc-600" className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-gray-300"
> >
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />} {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
</button> </button>
@@ -208,7 +208,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{/* Confirm password (register only) */} {/* Confirm password (register only) */}
{tab === "register" && ( {tab === "register" && (
<div className="mt-4"> <div className="mt-4">
<p className="text-xs font-medium text-zinc-500">确认密码</p> <p className="text-xs font-medium text-muted">确认密码</p>
<input <input
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={confirmPassword} value={confirmPassword}
@@ -217,7 +217,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
setError(""); setError("");
}} }}
placeholder="再次输入密码" placeholder="再次输入密码"
className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100" className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
/> />
</div> </div>
)} )}
@@ -225,9 +225,9 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{/* Avatar picker (register only) */} {/* Avatar picker (register only) */}
{tab === "register" && ( {tab === "register" && (
<div className="mt-4"> <div className="mt-4">
<p className="text-xs font-medium text-zinc-500"> <p className="text-xs font-medium text-muted">
选择头像 选择头像
<span className="ml-1 text-zinc-300">（可选）</span> <span className="ml-1 text-dim">（可选）</span>
</p> </p>
<div className="mt-2 grid grid-cols-6 gap-2"> <div className="mt-2 grid grid-cols-6 gap-2">
{AVATARS.map((a) => ( {AVATARS.map((a) => (
@@ -236,8 +236,8 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
onClick={() => setAvatar(a.emoji)} onClick={() => setAvatar(a.emoji)}
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${ className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
avatar === a.emoji avatar === a.emoji
? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1` ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
: "bg-zinc-50 hover:bg-zinc-100" : "bg-elevated hover:bg-subtle"
}`} }`}
> >
{a.emoji} {a.emoji}
@@ -249,7 +249,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
{error && ( {error && (
<motion.p <motion.p
className="mt-3 text-center text-xs font-medium text-rose-500" className="mt-3 text-center text-xs font-medium text-rose-400"
initial={{ opacity: 0, y: -4 }} initial={{ opacity: 0, y: -4 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
> >
@@ -260,7 +260,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
<button <button
onClick={handleSubmit} onClick={handleSubmit}
disabled={loading} disabled={loading}
className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50" className="mt-5 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>
src/components/LeaveConfirmModal.tsx
+8 -8
View File
@@ -26,7 +26,7 @@ export default function LeaveConfirmModal({
{open && ( {open && (
<motion.div <motion.div
ref={backdropRef} ref={backdropRef}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
@@ -34,34 +34,34 @@ export default function LeaveConfirmModal({
onClick={handleBackdropClick} onClick={handleBackdropClick}
> >
<motion.div <motion.div
className="mx-6 w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-2xl" className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
initial={{ scale: 0.9, opacity: 0 }} initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }} exit={{ scale: 0.9, opacity: 0 }}
transition={{ type: "spring", damping: 25, stiffness: 350 }} transition={{ type: "spring", damping: 25, stiffness: 350 }}
> >
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-50"> <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
<LogOut size={22} className="text-rose-500" /> <LogOut size={22} className="text-rose-400" />
</div> </div>
<h2 className="mt-4 text-base font-bold text-zinc-900"> <h2 className="mt-4 text-base font-bold text-white">
确定要退出房间吗？ 确定要退出房间吗？
</h2> </h2>
<p className="mt-1.5 text-center text-xs leading-relaxed text-zinc-400"> <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
退出后你的滑卡进度不会丢失，可以用房间号重新加入 退出后你的滑卡进度不会丢失，可以用房间号重新加入
</p> </p>
<div className="mt-5 flex w-full gap-2.5"> <div className="mt-5 flex w-full gap-2.5">
<button <button
onClick={onCancel} onClick={onCancel}
className="flex h-11 flex-1 items-center justify-center rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50" className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
> >
继续滑卡 继续滑卡
</button> </button>
<button <button
onClick={onConfirm} onClick={onConfirm}
className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-md shadow-rose-200 transition-colors active:bg-rose-600" className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
> >
退出房间 退出房间
</button> </button>
src/components/MatchResult.tsx
+47 -40
View File
@@ -58,7 +58,7 @@ function NoMatchResult({
return ( return (
<motion.div <motion.div
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-linear-to-b from-zinc-600 to-zinc-800 px-6 py-10" className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.4 }} transition={{ duration: 0.4 }}
@@ -68,7 +68,7 @@ function NoMatchResult({
animate={{ scale: 1, rotate: 0 }} animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }} transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
> >
<SearchX size={56} className="text-zinc-400" /> <SearchX size={56} className="text-muted" />
</motion.div> </motion.div>
<motion.h1 <motion.h1
@@ -81,7 +81,7 @@ function NoMatchResult({
</motion.h1> </motion.h1>
<motion.p <motion.p
className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-zinc-400" className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
initial={{ y: 20, opacity: 0 }} initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.45 }} transition={{ delay: 0.45 }}
@@ -98,7 +98,7 @@ function NoMatchResult({
<motion.button <motion.button
onClick={onReset} onClick={onReset}
disabled={resetting} disabled={resetting}
className="flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold text-zinc-800 shadow-lg transition-colors hover:bg-zinc-100 disabled:opacity-50" className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<RotateCcw size={15} className={resetting ? "animate-spin" : ""} /> <RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
@@ -107,7 +107,7 @@ function NoMatchResult({
<motion.button <motion.button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="flex items-center justify-center gap-2 rounded-full bg-white/15 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/25" className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Home size={15} /> <Home size={15} />
@@ -132,7 +132,7 @@ function RunnerUpCard({
href={buildNavUrl(restaurant)} href={buildNavUrl(restaurant)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex gap-3 rounded-xl bg-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20" className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
> >
{restaurant.images?.[0] && ( {restaurant.images?.[0] && (
<img <img
@@ -146,7 +146,7 @@ function RunnerUpCard({
<p className="truncate text-sm font-bold text-white"> <p className="truncate text-sm font-bold text-white">
{restaurant.name} {restaurant.name}
</p> </p>
<div className="mt-1 flex items-center gap-2 text-xs text-white/70"> <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
<span className="flex items-center gap-0.5"> <span className="flex items-center gap-0.5">
<Star size={11} className="fill-yellow-300 text-yellow-300" /> <Star size={11} className="fill-yellow-300 text-yellow-300" />
{restaurant.rating} {restaurant.rating}
@@ -159,7 +159,7 @@ function RunnerUpCard({
</span> </span>
)} )}
</div> </div>
<p className="mt-0.5 text-[11px] font-medium text-amber-200"> <p className="mt-0.5 text-[11px] font-medium text-amber-400">
{likes}/{userCount} 人想去 {likes}/{userCount} 人想去
</p> </p>
</div> </div>
@@ -282,25 +282,28 @@ export default function MatchResult({
return ( return (
<motion.div <motion.div
className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${ className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
isUnanimous
? "bg-linear-to-b from-emerald-500 to-teal-600"
: "bg-linear-to-b from-amber-500 to-orange-500"
}`}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.4 }} transition={{ duration: 0.4 }}
> >
<div className="flex w-full max-w-sm flex-1 flex-col items-center justify-center"> {/* Accent glow behind icon */}
<div
className={`pointer-events-none fixed left-1/2 top-0 h-72 w-72 -translate-x-1/2 -translate-y-1/3 rounded-full blur-3xl ${
isUnanimous ? "bg-emerald-500/20" : "bg-amber-500/20"
}`}
/>
<div className="relative flex w-full max-w-sm flex-1 flex-col items-center justify-center">
<motion.div <motion.div
initial={{ scale: 0, rotate: -20 }} initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }} animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }} transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
> >
{isUnanimous ? ( {isUnanimous ? (
<PartyPopper size={56} className="text-yellow-300" /> <PartyPopper size={56} className="text-emerald-400" />
) : ( ) : (
<Trophy size={56} className="text-yellow-200" /> <Trophy size={56} className="text-amber-400" />
)} )}
</motion.div> </motion.div>
@@ -314,7 +317,7 @@ export default function MatchResult({
</motion.h1> </motion.h1>
<motion.p <motion.p
className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`} className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
initial={{ y: 20, opacity: 0 }} initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.45 }} transition={{ delay: 0.45 }}
@@ -326,7 +329,7 @@ export default function MatchResult({
{isUnanimous && ( {isUnanimous && (
<motion.div <motion.div
className="mt-3 flex items-center gap-2 rounded-full bg-white/20 px-4 py-1.5 backdrop-blur-sm" className="mt-3 flex items-center gap-2 rounded-full bg-emerald-500/15 px-4 py-1.5 ring-1 ring-emerald-500/30"
initial={{ scale: 0, opacity: 0 }} initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
transition={{ transition={{
@@ -336,16 +339,17 @@ export default function MatchResult({
delay: 0.55, delay: 0.55,
}} }}
> >
<Zap size={14} className="fill-yellow-300 text-yellow-300" /> <Zap size={14} className="fill-emerald-400 text-emerald-400" />
<span className="text-xs font-bold text-white"> <span className="text-xs font-bold text-emerald-300">
默契度 100% · {userCount} 人全员一致 默契度 100% · {userCount} 人全员一致
</span> </span>
<Zap size={14} className="fill-yellow-300 text-yellow-300" /> <Zap size={14} className="fill-emerald-400 text-emerald-400" />
</motion.div> </motion.div>
)} )}
{/* Result card */}
<motion.div <motion.div
className="mt-6 w-full overflow-hidden rounded-2xl bg-white shadow-2xl" className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
initial={{ y: 60, opacity: 0 }} initial={{ y: 60, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }} transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
@@ -360,22 +364,22 @@ export default function MatchResult({
)} )}
<div className="p-4"> <div className="p-4">
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<h2 className="text-lg font-bold leading-tight text-zinc-900"> <h2 className="text-lg font-bold leading-tight text-white">
{restaurant.name} {restaurant.name}
</h2> </h2>
{restaurant.category && ( {restaurant.category && (
<span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600"> <span className="shrink-0 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
{restaurant.category} {restaurant.category}
</span> </span>
)} )}
</div> </div>
<div className="mt-2 flex items-center gap-3 text-sm text-zinc-500"> <div className="mt-2 flex items-center gap-3 text-sm text-muted">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Star size={13} className="fill-amber-400 text-amber-400" /> <Star size={13} className="fill-amber-400 text-amber-400" />
{restaurant.rating} {restaurant.rating}
</span> </span>
<span className="font-semibold text-emerald-600"> <span className="font-semibold text-emerald-400">
{restaurant.price} {restaurant.price}
</span> </span>
{restaurant.distance && ( {restaurant.distance && (
@@ -387,13 +391,13 @@ export default function MatchResult({
</div> </div>
{restaurant.address && ( {restaurant.address && (
<p className="mt-2 text-xs leading-relaxed text-zinc-400"> <p className="mt-2 text-xs leading-relaxed text-muted">
{restaurant.address} {restaurant.address}
</p> </p>
)} )}
{restaurant.openTime && ( {restaurant.openTime && (
<div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400"> <div className="mt-1.5 flex items-center gap-1 text-xs text-muted">
<Clock size={12} /> <Clock size={12} />
<span>{restaurant.openTime}</span> <span>{restaurant.openTime}</span>
</div> </div>
@@ -407,7 +411,7 @@ export default function MatchResult({
.map((t) => ( .map((t) => (
<span <span
key={t} key={t}
className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700" className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
> >
{t.trim()} {t.trim()}
</span> </span>
@@ -417,6 +421,7 @@ export default function MatchResult({
</div> </div>
</motion.div> </motion.div>
{/* Action buttons */}
<motion.div <motion.div
className="mt-5 flex w-full flex-col gap-2.5" className="mt-5 flex w-full flex-col gap-2.5"
initial={{ y: 30, opacity: 0 }} initial={{ y: 30, opacity: 0 }}
@@ -427,9 +432,7 @@ export default function MatchResult({
href={buildNavUrl(restaurant)} href={buildNavUrl(restaurant)}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={`flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold shadow-lg transition-colors hover:bg-emerald-50 ${ className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
isUnanimous ? "text-emerald-600" : "text-orange-600"
}`}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Navigation size={16} /> <Navigation size={16} />
@@ -439,7 +442,7 @@ export default function MatchResult({
{restaurant.tel && ( {restaurant.tel && (
<motion.a <motion.a
href={`tel:${restaurant.tel}`} href={`tel:${restaurant.tel}`}
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30" className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Phone size={15} /> <Phone size={15} />
@@ -449,7 +452,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={handleShare} onClick={handleShare}
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30" className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Share2 size={15} /> <Share2 size={15} />
@@ -457,6 +460,7 @@ export default function MatchResult({
</motion.button> </motion.button>
</motion.div> </motion.div>
{/* Runner ups */}
{!isUnanimous && runnerUpRestaurants.length > 0 && ( {!isUnanimous && runnerUpRestaurants.length > 0 && (
<motion.div <motion.div
className="mt-5 w-full" className="mt-5 w-full"
@@ -466,7 +470,7 @@ export default function MatchResult({
> >
<button <button
onClick={() => setShowRunnerUps((v) => !v)} onClick={() => setShowRunnerUps((v) => !v)}
className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-white/80 transition-colors hover:text-white" className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-muted transition-colors hover:text-foreground"
> >
其他候选（{runnerUpRestaurants.length}） 其他候选（{runnerUpRestaurants.length}）
<motion.span <motion.span
@@ -500,6 +504,7 @@ export default function MatchResult({
</motion.div> </motion.div>
)} )}
{/* Bottom actions */}
<motion.div <motion.div
className="mt-5 flex w-full flex-col items-center gap-2.5" className="mt-5 flex w-full flex-col items-center gap-2.5"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
@@ -511,7 +516,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={() => onNarrow(narrowIds)} onClick={() => onNarrow(narrowIds)}
disabled={resetting} disabled={resetting}
className="flex w-full items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50" className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Swords size={15} /> <Swords size={15} />
@@ -519,7 +524,9 @@ export default function MatchResult({
</motion.button> </motion.button>
<motion.button <motion.button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white" className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
isUnanimous ? "text-emerald-400" : "text-amber-400"
}`}
> >
<RefreshCw size={13} /> <RefreshCw size={13} />
换一批店 换一批店
@@ -530,7 +537,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={onReset} onClick={onReset}
disabled={resetting} disabled={resetting}
className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50" className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<RotateCcw size={14} className={resetting ? "animate-spin" : ""} /> <RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
@@ -539,7 +546,7 @@ export default function MatchResult({
<motion.button <motion.button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${ className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
isUnanimous ? "text-emerald-200" : "text-amber-200" isUnanimous ? "text-emerald-400" : "text-amber-400"
}`} }`}
> >
<RefreshCw size={13} /> <RefreshCw size={13} />
@@ -553,7 +560,7 @@ export default function MatchResult({
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <motion.div
className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg" className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
initial={{ opacity: 0, y: -12, x: "-50%" }} initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }} animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }} exit={{ opacity: 0, y: -12, x: "-50%" }}
src/components/QrInviteModal.tsx
+12 -12
View File
@@ -66,7 +66,7 @@ export default function QrInviteModal({
{open && ( {open && (
<motion.div <motion.div
ref={backdropRef} ref={backdropRef}
className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center" className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
@@ -74,7 +74,7 @@ export default function QrInviteModal({
onClick={handleBackdropClick} onClick={handleBackdropClick}
> >
<motion.div <motion.div
className="relative w-full max-w-sm rounded-t-3xl bg-white px-6 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6" className="relative w-full max-w-sm rounded-t-3xl bg-surface px-6 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
initial={{ y: "100%" }} initial={{ y: "100%" }}
animate={{ y: 0 }} animate={{ y: 0 }}
exit={{ y: "100%" }} exit={{ y: "100%" }}
@@ -82,33 +82,33 @@ export default function QrInviteModal({
> >
<button <button
onClick={onClose} onClick={onClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200" className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
> >
<X size={16} /> <X size={16} />
</button> </button>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="flex items-center gap-2 text-zinc-800"> <div className="flex items-center gap-2 text-white">
<QrCode size={18} className="text-emerald-500" /> <QrCode size={18} className="text-accent" />
<h2 className="text-lg font-bold">邀请饭搭子</h2> <h2 className="text-lg font-bold">邀请饭搭子</h2>
</div> </div>
<p className="mt-1 text-xs text-zinc-400"> <p className="mt-1 text-xs text-muted">
{sceneConfig.qrSubtitle} {sceneConfig.qrSubtitle}
</p> </p>
<div className="mt-5 rounded-2xl border-2 border-dashed border-emerald-200 bg-emerald-50/30 p-4"> <div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
<QRCodeSVG <QRCodeSVG
value={inviteUrl} value={inviteUrl}
size={180} size={180}
level="M" level="M"
bgColor="transparent" bgColor="transparent"
fgColor="#18181b" fgColor="#e5e7eb"
/> />
</div> </div>
<div className="mt-4 flex items-center gap-2"> <div className="mt-4 flex items-center gap-2">
<span className="text-xs text-zinc-400">房间号</span> <span className="text-xs text-muted">房间号</span>
<span className="rounded-full bg-zinc-100 px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-emerald-600"> <span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
{roomId} {roomId}
</span> </span>
</div> </div>
@@ -116,14 +116,14 @@ export default function QrInviteModal({
<div className="mt-5 flex w-full gap-2.5"> <div className="mt-5 flex w-full gap-2.5">
<button <button
onClick={handleCopy} onClick={handleCopy}
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50" className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
> >
<Copy size={15} /> <Copy size={15} />
复制链接 复制链接
</button> </button>
<button <button
onClick={handleShare} onClick={handleShare}
className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-emerald-500 text-sm font-semibold text-white shadow-md shadow-emerald-200 transition-colors active:bg-emerald-600" className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
> >
<Share2 size={15} /> <Share2 size={15} />
发送邀请 发送邀请
src/components/RestaurantCard.tsx
+14 -14
View File
@@ -150,14 +150,14 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
const dianpingUrl = `https://m.dianping.com/search/keyword/0/0_${encodeURIComponent(restaurant.name)}`; const dianpingUrl = `https://m.dianping.com/search/keyword/0/0_${encodeURIComponent(restaurant.name)}`;
return ( return (
<div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-xl"> <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-surface shadow-xl ring-1 ring-border">
<div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-zinc-100"> <div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-elevated">
{hasImage && <ImageGallery images={images} name={restaurant.name} />} {hasImage && <ImageGallery images={images} name={restaurant.name} />}
<div className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" /> <div className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
<div className="absolute bottom-3 left-4 flex items-center gap-1.5"> <div className="absolute bottom-3 left-4 flex items-center gap-1.5">
{restaurant.category && ( {restaurant.category && (
<span className="rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm"> <span className="rounded-full bg-elevated/90 px-2.5 py-0.5 text-xs font-semibold text-gray-200 shadow-sm backdrop-blur-sm">
{restaurant.category} {restaurant.category}
</span> </span>
)} )}
@@ -172,7 +172,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
<div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3"> <div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<h2 className="text-lg font-bold leading-tight text-zinc-900"> <h2 className="text-lg font-bold leading-tight text-white">
{restaurant.name} {restaurant.name}
</h2> </h2>
<div className="mt-0.5 flex shrink-0 gap-1.5"> <div className="mt-0.5 flex shrink-0 gap-1.5">
@@ -183,8 +183,8 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onTouchStart={stopAll} onTouchStart={stopAll}
className={`flex items-center justify-center rounded-full p-1 transition-colors ${ className={`flex items-center justify-center rounded-full p-1 transition-colors ${
favorited favorited
? "bg-amber-100 text-amber-500" ? "bg-amber-500/20 text-amber-400"
: "bg-zinc-50 text-zinc-400 active:bg-amber-50 active:text-amber-500" : "bg-elevated text-muted active:bg-amber-500/15 active:text-amber-400"
}`} }`}
> >
<Bookmark size={13} className={favorited ? "fill-amber-400" : ""} /> <Bookmark size={13} className={favorited ? "fill-amber-400" : ""} />
@@ -194,7 +194,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onClick={openLink(amapUrl)} onClick={openLink(amapUrl)}
onPointerDown={stopAll} onPointerDown={stopAll}
onTouchStart={stopAll} onTouchStart={stopAll}
className="flex items-center gap-0.5 rounded-full bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-500 transition-colors active:bg-blue-100" className="flex items-center gap-0.5 rounded-full bg-blue-500/15 px-2 py-0.5 text-[11px] font-medium text-blue-400 transition-colors active:bg-blue-500/25"
> >
高德 高德
<ExternalLink size={10} /> <ExternalLink size={10} />
@@ -203,7 +203,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onClick={openLink(dianpingUrl)} onClick={openLink(dianpingUrl)}
onPointerDown={stopAll} onPointerDown={stopAll}
onTouchStart={stopAll} onTouchStart={stopAll}
className="flex items-center gap-0.5 rounded-full bg-orange-50 px-2 py-0.5 text-[11px] font-medium text-orange-500 transition-colors active:bg-orange-100" className="flex items-center gap-0.5 rounded-full bg-orange-500/15 px-2 py-0.5 text-[11px] font-medium text-orange-400 transition-colors active:bg-orange-500/25"
> >
点评 点评
<ExternalLink size={10} /> <ExternalLink size={10} />
@@ -214,17 +214,17 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
<div className="flex flex-wrap items-center gap-x-3 gap-y-1"> <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Star size={14} className="fill-amber-400 text-amber-400" /> <Star size={14} className="fill-amber-400 text-amber-400" />
<span className="text-sm font-semibold text-zinc-800"> <span className="text-sm font-semibold text-foreground">
{restaurant.rating} {restaurant.rating}
</span> </span>
</div> </div>
<span className="text-sm font-semibold text-emerald-600"> <span className="text-sm font-semibold text-emerald-400">
{restaurant.price} {restaurant.price}
</span> </span>
{restaurant.distance && ( {restaurant.distance && (
<div className="flex items-center gap-1 text-zinc-400"> <div className="flex items-center gap-1 text-muted">
<MapPin size={13} /> <MapPin size={13} />
<span className="text-xs">{restaurant.distance}</span> <span className="text-xs">{restaurant.distance}</span>
</div> </div>
@@ -232,13 +232,13 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
</div> </div>
{restaurant.address && ( {restaurant.address && (
<p className="truncate text-xs leading-tight text-zinc-400"> <p className="truncate text-xs leading-tight text-muted">
{restaurant.address} {restaurant.address}
</p> </p>
)} )}
{restaurant.openTime && ( {restaurant.openTime && (
<div className="flex items-center gap-1 text-xs text-zinc-400"> <div className="flex items-center gap-1 text-xs text-muted">
<Clock size={12} /> <Clock size={12} />
<span>{restaurant.openTime}</span> <span>{restaurant.openTime}</span>
</div> </div>
@@ -252,7 +252,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
.map((t) => ( .map((t) => (
<span <span
key={t} key={t}
className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700" className="shrink-0 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
> >
{t.trim()} {t.trim()}
</span> </span>
src/components/RoomManageModal.tsx
+19 -19
View File
@@ -95,7 +95,7 @@ export default function RoomManageModal({
{open && ( {open && (
<motion.div <motion.div
ref={backdropRef} ref={backdropRef}
className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center" className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
@@ -103,7 +103,7 @@ export default function RoomManageModal({
onClick={handleBackdropClick} onClick={handleBackdropClick}
> >
<motion.div <motion.div
className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6" className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
initial={{ y: "100%" }} initial={{ y: "100%" }}
animate={{ y: 0 }} animate={{ y: 0 }}
exit={{ y: "100%" }} exit={{ y: "100%" }}
@@ -111,16 +111,16 @@ export default function RoomManageModal({
> >
<button <button
onClick={onClose} onClick={onClose}
className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200" className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
> >
<X size={16} /> <X size={16} />
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Crown size={18} className="text-amber-500" /> <Crown size={18} className="text-amber-400" />
<h2 className="text-lg font-bold text-zinc-900">房间管理</h2> <h2 className="text-lg font-bold text-white">房间管理</h2>
</div> </div>
<p className="mt-1 text-xs text-zinc-400"> <p className="mt-1 text-xs text-muted">
房间号 {roomId} 房间号 {roomId}
</p> </p>
@@ -131,8 +131,8 @@ export default function RoomManageModal({
disabled={loading !== null} disabled={loading !== null}
className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${ className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
locked locked
? "border border-emerald-200 bg-emerald-50 text-emerald-700 active:bg-emerald-100" ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
: "border border-zinc-200 bg-white text-zinc-700 active:bg-zinc-50" : "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
}`} }`}
> >
{loading === "lock" || loading === "unlock" ? ( {loading === "lock" || loading === "unlock" ? (
@@ -148,7 +148,7 @@ export default function RoomManageModal({
{/* User list with kick */} {/* User list with kick */}
<div className="mt-5"> <div className="mt-5">
<h3 className="text-xs font-semibold text-zinc-500"> <h3 className="text-xs font-semibold text-muted">
房间成员（{users.length}） 房间成员（{users.length}）
</h3> </h3>
<div className="mt-2 flex flex-col gap-1.5"> <div className="mt-2 flex flex-col gap-1.5">
@@ -164,7 +164,7 @@ export default function RoomManageModal({
return ( return (
<div <div
key={uid} key={uid}
className="flex items-center gap-2.5 rounded-xl bg-zinc-50 px-3 py-2.5" className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
> >
<span <span
className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`} className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
@@ -174,17 +174,17 @@ export default function RoomManageModal({
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
{isCreator && ( {isCreator && (
<span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-500"> <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
<Crown size={10} /> <Crown size={10} />
房主 房主
</span> </span>
)} )}
<span className="truncate text-xs font-medium text-zinc-500"> <span className="truncate text-xs font-medium text-gray-400">
{displayName} {displayName}
</span> </span>
</div> </div>
<span <span
className={`text-[11px] ${finished ? "text-emerald-500" : "text-zinc-400"}`} className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
> >
{swiped}/{totalCards} {swiped}/{totalCards}
{finished ? " 已完成" : " 进行中"} {finished ? " 已完成" : " 进行中"}
@@ -211,7 +211,7 @@ export default function RoomManageModal({
</button> </button>
<button <button
onClick={() => setConfirmKick(null)} onClick={() => setConfirmKick(null)}
className="rounded-lg bg-zinc-200 px-2.5 py-1 text-[11px] font-semibold text-zinc-600 transition-colors active:bg-zinc-300" className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-gray-400 transition-colors active:bg-elevated"
> >
取消 取消
</button> </button>
@@ -219,7 +219,7 @@ export default function RoomManageModal({
) : ( ) : (
<button <button
onClick={() => setConfirmKick(uid)} onClick={() => setConfirmKick(uid)}
className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-zinc-400 transition-colors active:bg-zinc-100 active:text-rose-500" className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
> >
<UserX size={13} /> <UserX size={13} />
移出 移出
@@ -236,8 +236,8 @@ export default function RoomManageModal({
{/* End voting */} {/* End voting */}
<div className="mt-5"> <div className="mt-5">
{confirmEnd ? ( {confirmEnd ? (
<div className="flex flex-col gap-2 rounded-xl border border-amber-200 bg-amber-50 p-3"> <div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
<p className="text-xs font-medium text-amber-800"> <p className="text-xs font-medium text-amber-300">
确定要结束投票吗？将根据当前已有的投票结果直接结算。 确定要结束投票吗？将根据当前已有的投票结果直接结算。
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -255,7 +255,7 @@ export default function RoomManageModal({
</button> </button>
<button <button
onClick={() => setConfirmEnd(false)} onClick={() => setConfirmEnd(false)}
className="flex h-9 flex-1 items-center justify-center rounded-lg bg-white text-xs font-semibold text-zinc-600 transition-colors active:bg-zinc-50" className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-gray-400 transition-colors active:bg-subtle"
> >
再等等 再等等
</button> </button>
@@ -265,7 +265,7 @@ export default function RoomManageModal({
<button <button
onClick={() => setConfirmEnd(true)} onClick={() => setConfirmEnd(true)}
disabled={loading !== null} disabled={loading !== null}
className="flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-amber-200 bg-amber-50 text-sm font-semibold text-amber-700 transition-colors active:bg-amber-100 disabled:opacity-50" className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
> >
<Flag size={15} /> <Flag size={15} />
结束投票（立即出结果） 结束投票（立即出结果）
src/components/SwipeDeck.tsx
+16 -16
View File
@@ -28,11 +28,11 @@ function UserProgressBar({
const myProfile = userProfiles[userId]; const myProfile = userProfiles[userId];
const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji; const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100"; const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
return ( return (
<div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1"> <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="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`}> <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
{myAvatar} {myAvatar}
</span> </span>
@@ -47,12 +47,12 @@ function UserProgressBar({
return ( return (
<span <span
key={id} key={id}
className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`} 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`}> <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
{emoji} {emoji}
</span> </span>
{label && <span className="max-w-[3rem] truncate">{label}</span>} {label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total} {count}/{total}
{finished && <Check size={10} className="text-emerald-400" />} {finished && <Check size={10} className="text-emerald-400" />}
</span> </span>
@@ -84,9 +84,9 @@ function WaitingProgress({
const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100"; const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
return ( return (
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3"> <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"> <div className="flex items-center justify-between">
<span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600"> <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`}> <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
{myEmoji} {myEmoji}
</span> </span>
@@ -105,17 +105,17 @@ function WaitingProgress({
return ( return (
<div key={id} className="flex flex-col gap-1"> <div key={id} className="flex flex-col gap-1">
<div className="flex items-center justify-between"> <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={`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-100" : bg}`}> <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} {emoji}
</span> </span>
{label && <span className="max-w-[3rem] truncate">{label}</span>} {label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total} {count}/{total}
</span> </span>
{finished && <Check size={14} className="text-emerald-400" />} {finished && <Check size={14} className="text-emerald-400" />}
</div> </div>
{!finished && ( {!finished && (
<div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200"> <div className="ml-7 h-1 overflow-hidden rounded-full bg-elevated">
<motion.div <motion.div
className="h-full rounded-full bg-amber-400" className="h-full rounded-full bg-amber-400"
animate={{ width: `${pct}%` }} animate={{ width: `${pct}%` }}
@@ -127,7 +127,7 @@ function WaitingProgress({
); );
})} })}
<p className="text-center text-[10px] text-zinc-400"> <p className="text-center text-[10px] text-muted">
{finishedCount}/{others.length} 人已完成 {finishedCount}/{others.length} 人已完成
</p> </p>
</div> </div>
@@ -326,7 +326,7 @@ export default function SwipeDeck({
{!allSwiped && !resolvedMatchId && ( {!allSwiped && !resolvedMatchId && (
<div className="mx-auto w-full max-w-sm px-4 pb-1"> <div className="mx-auto w-full max-w-sm px-4 pb-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100"> <div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
<motion.div <motion.div
className="h-full rounded-full bg-emerald-400" className="h-full rounded-full bg-emerald-400"
initial={{ width: 0 }} initial={{ width: 0 }}
@@ -336,13 +336,13 @@ export default function SwipeDeck({
transition={{ type: "spring", stiffness: 300, damping: 30 }} transition={{ type: "spring", stiffness: 300, damping: 30 }}
/> />
</div> </div>
<span className="shrink-0 text-[11px] tabular-nums text-zinc-400"> <span className="shrink-0 text-[11px] tabular-nums text-muted">
{currentIndex}/{restaurants.length} {currentIndex}/{restaurants.length}
</span> </span>
<button <button
onClick={handleUndo} onClick={handleUndo}
disabled={currentIndex === 0} 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" 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} /> <Undo2 size={12} />
撤回 撤回
@@ -385,8 +385,8 @@ export default function SwipeDeck({
{showWaiting && ( {showWaiting && (
<div className="flex h-full flex-col items-center justify-center gap-4"> <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" /> <div className="h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-accent" />
<p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p> <p className="text-sm font-medium text-muted">等待其他人完成选择</p>
<WaitingProgress <WaitingProgress
userId={userId} userId={userId}
swipeCounts={swipeCounts} swipeCounts={swipeCounts}
src/components/TopNav.tsx
+9 -9
View File
@@ -51,7 +51,7 @@ export default function TopNav({
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<button <button
onClick={() => setShowQr(true)} onClick={() => setShowQr(true)}
className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100" 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} /> <QrCode size={13} />
邀请 邀请
@@ -59,7 +59,7 @@ export default function TopNav({
{isCreator && ( {isCreator && (
<button <button
onClick={() => setShowManage(true)} onClick={() => setShowManage(true)}
className="flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-600 transition-colors active:bg-amber-100" className="flex items-center gap-1 rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 transition-colors active:bg-amber-500/25"
> >
<Crown size={13} /> <Crown size={13} />
管理 管理
@@ -67,27 +67,27 @@ export default function TopNav({
)} )}
</div> </div>
<h1 className="text-center text-base font-bold tracking-tight text-zinc-900"> <h1 className="text-center text-base font-bold tracking-tight text-white">
<span className="block leading-tight">NoWhatever</span> <span className="block leading-tight">NoWhatever</span>
<span className="block text-[10px] font-medium tracking-widest text-zinc-400"> <span className="block text-[10px] font-medium tracking-widest text-muted">
别说随便 别说随便
</span> </span>
</h1> </h1>
<div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500"> <div className="flex items-center justify-end gap-1.5 text-xs text-muted">
{locked && ( {locked && (
<Lock size={12} className="text-amber-500" /> <Lock size={12} className="text-amber-500" />
)} )}
<span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium"> <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
{roomId} {roomId}
</span> </span>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Users size={13} /> <Users size={13} />
<span className="font-semibold text-emerald-500">{userCount}</span> <span className="font-semibold text-accent">{userCount}</span>
</div> </div>
<button <button
onClick={onExit} onClick={onExit}
className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600" className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
aria-label="退出房间" aria-label="退出房间"
> >
<LogOut size={15} /> <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
<AnimatePresence> <AnimatePresence>
{toast && ( {toast && (
<motion.div <motion.div
className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg" className="fixed left-1/2 top-16 z-50 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
initial={{ opacity: 0, y: -12, x: "-50%" }} initial={{ opacity: 0, y: -12, x: "-50%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }} animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }} exit={{ opacity: 0, y: -12, x: "-50%" }}