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/profile/page.tsx
+54 -55
View File
@@ -26,7 +26,6 @@ import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Rest
function firstImage(r: Restaurant): string {
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;
return typeof legacy === "string" ? legacy : "";
}
@@ -253,7 +252,7 @@ export default function ProfilePage() {
if (loading) {
return (
<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>
);
}
@@ -266,21 +265,21 @@ export default function ProfilePage() {
: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
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">
<button
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} />
</button>
<h1 className="text-base font-bold text-zinc-900">个人中心</h1>
<h1 className="text-base font-bold text-white">个人中心</h1>
</nav>
<div className="mx-auto max-w-sm px-5">
{/* Profile card */}
<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 }}
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)}`}
>
{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} />
</span>
</button>
@@ -306,34 +305,34 @@ export default function ProfilePage() {
}}
maxLength={16}
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
onClick={handleSaveUsername}
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} />}
</button>
<button
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} />
</button>
</div>
) : (
<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
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} />
</button>
</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>
@@ -354,8 +353,8 @@ export default function ProfilePage() {
onClick={() => handleSaveAvatar(a.emoji)}
className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
profile.avatar === a.emoji
? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1`
: "bg-zinc-50 hover:bg-zinc-100"
? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
: "bg-elevated hover:bg-subtle"
}`}
>
{a.emoji}
@@ -369,7 +368,7 @@ export default function ProfilePage() {
{/* Change password */}
<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 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.05 }}
@@ -378,8 +377,8 @@ export default function ProfilePage() {
onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
className="flex w-full items-center gap-2"
>
<Lock size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">修改密码</h3>
<Lock size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
</button>
<AnimatePresence>
@@ -393,46 +392,46 @@ export default function ProfilePage() {
>
<div className="mt-3 flex flex-col gap-3">
<div>
<p className="text-xs text-zinc-400">当前密码</p>
<p className="text-xs text-muted">当前密码</p>
<div className="relative mt-1">
<input
type={showPassword ? "text" : "password"}
value={currentPassword}
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
type="button"
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} />}
</button>
</div>
</div>
<div>
<p className="text-xs text-zinc-400">新密码</p>
<p className="text-xs text-muted">新密码</p>
<input
type={showPassword ? "text" : "password"}
value={newPassword}
onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
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>
<p className="text-xs text-zinc-400">确认新密码</p>
<p className="text-xs text-muted">确认新密码</p>
<input
type={showPassword ? "text" : "password"}
value={confirmPassword}
onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
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>
{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}
</p>
)}
@@ -440,7 +439,7 @@ export default function ProfilePage() {
<button
onClick={handleSavePassword}
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" /> : "保存新密码"}
</button>
@@ -452,15 +451,15 @@ export default function ProfilePage() {
{/* Email binding */}
<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 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.1 }}
>
<div className="flex items-center gap-2">
<Mail size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">绑定邮箱</h3>
<span className="text-[10px] text-zinc-400">（可选）</span>
<Mail size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
<span className="text-[10px] text-dim">（可选）</span>
</div>
<div className="mt-3 flex gap-2">
<input
@@ -471,18 +470,18 @@ export default function ProfilePage() {
setEmail(e.target.value);
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
onClick={handleSaveEmail}
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" /> : "保存"}
</button>
</div>
{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}
</p>
)}
@@ -490,7 +489,7 @@ export default function ProfilePage() {
{/* Decision History */}
<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 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.15 }}
@@ -500,15 +499,15 @@ export default function ProfilePage() {
className="flex w-full items-center justify-between"
>
<div className="flex items-center gap-2">
<Clock size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">
<Clock size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">
决策记录 {history.length > 0 && `(${history.length})`}
</h3>
</div>
<motion.span
animate={{ rotate: showHistory ? 180 : 0 }}
transition={{ duration: 0.2 }}
className="text-zinc-400"
className="text-muted"
>
<ChevronDown size={16} />
</motion.span>
@@ -525,10 +524,10 @@ export default function ProfilePage() {
>
{historyLoading ? (
<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>
) : 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>
) : (
@@ -539,7 +538,7 @@ export default function ProfilePage() {
href={amapNavUrl(d.restaurantData)}
target="_blank"
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) && (
<img
@@ -550,8 +549,8 @@ export default function ProfilePage() {
/>
)}
<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>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
<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-muted">
<span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
<span>{d.participants} 人参与</span>
<span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
@@ -568,7 +567,7 @@ export default function ProfilePage() {
{/* Favorites */}
<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 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.2 }}
@@ -578,15 +577,15 @@ export default function ProfilePage() {
className="flex w-full items-center justify-between"
>
<div className="flex items-center gap-2">
<Star size={15} className="text-zinc-400" />
<h3 className="text-sm font-semibold text-zinc-700">
<Star size={15} className="text-muted" />
<h3 className="text-sm font-semibold text-gray-300">
收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
</h3>
</div>
<motion.span
animate={{ rotate: showFavorites ? 180 : 0 }}
transition={{ duration: 0.2 }}
className="text-zinc-400"
className="text-muted"
>
<ChevronDown size={16} />
</motion.span>
@@ -603,10 +602,10 @@ export default function ProfilePage() {
>
{favLoading ? (
<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>
) : 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>
) : (
@@ -616,7 +615,7 @@ export default function ProfilePage() {
return (
<div
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) && (
<img
@@ -627,8 +626,8 @@ export default function ProfilePage() {
/>
)}
<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>
<div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
<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-muted">
<span className="flex items-center gap-0.5">
<Star size={10} className="fill-amber-400 text-amber-400" />
{r.rating}
@@ -644,7 +643,7 @@ export default function ProfilePage() {
</div>
<button
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} />
</button>
@@ -667,7 +666,7 @@ export default function ProfilePage() {
>
<button
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} />
退出登录
@@ -678,7 +677,7 @@ export default function ProfilePage() {
<AnimatePresence>
{toast && (
<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%" }}
animate={{ opacity: 1, y: 0, x: "-50%" }}
exit={{ opacity: 0, y: -12, x: "-50%" }}