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/invite/[id]/page.tsx
+31 -31
View File
@@ -62,7 +62,7 @@ export default function InvitePage() {
if (status === "loading") {
return (
<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>
);
}
@@ -70,16 +70,16 @@ export default function InvitePage() {
if (status === "not_found") {
return (
<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">
<Utensils size={28} className="text-zinc-400" />
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
<Utensils size={28} className="text-muted" />
</div>
<h1 className="text-xl font-bold text-zinc-900">房间不存在</h1>
<p className="text-center text-sm text-zinc-500">
<h1 className="text-xl font-bold text-white">房间不存在</h1>
<p className="text-center text-sm text-muted">
这个房间已过期或不存在，请让朋友重新分享链接
</p>
<button
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>
@@ -88,44 +88,44 @@ export default function InvitePage() {
}
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
className="flex flex-col items-center"
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
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" />}
</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
</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>
</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 }}
animate={{ y: 0, opacity: 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}
</p>
<div className="flex items-center gap-2 text-sm text-zinc-500">
<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">
<div className="flex items-center gap-2 text-sm text-muted">
<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}
</span>
</div>
{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} />
<span>
已有 <span className="font-semibold text-emerald-500">{userCount}</span> 人在房间
已有 <span className="font-semibold text-accent">{userCount}</span> 人在房间
</span>
</div>
)}
@@ -138,35 +138,35 @@ export default function InvitePage() {
transition={{ duration: 0.5, delay: 0.2 }}
>
<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">
<Users size={18} className="text-emerald-500" />
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
<Users size={18} className="text-accent" />
</div>
<span className="text-xs font-semibold text-zinc-700">加入房间</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">
<span className="text-xs font-semibold text-gray-300">加入房间</span>
<span className="text-[10px] leading-tight text-muted text-center">
和朋友一起
</span>
</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 h-10 w-10 items-center justify-center rounded-full bg-amber-50">
<Heart size={18} className="text-amber-500" />
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
<Heart size={18} className="text-amber-400" />
</div>
<span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">
<span className="text-xs font-semibold text-gray-300">各自滑卡</span>
<span className="text-[10px] leading-tight text-muted text-center">
右滑喜欢的店
</span>
</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 h-10 w-10 items-center justify-center rounded-full bg-rose-50">
<Sparkles size={18} className="text-rose-500" />
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
<Sparkles size={18} className="text-rose-400" />
</div>
<span className="text-xs font-semibold text-zinc-700">匹配结果</span>
<span className="text-[10px] leading-tight text-zinc-400 text-center">
<span className="text-xs font-semibold text-gray-300">匹配结果</span>
<span className="text-[10px] leading-tight text-muted text-center">
滑中同一家就去
</span>
</div>
@@ -181,7 +181,7 @@ export default function InvitePage() {
<button
onClick={handleJoin}
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 ? (
<>