ui: 全站统一暗色主题设计系统
- 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:
@@ -95,7 +95,7 @@ export default function RoomManageModal({
|
||||
{open && (
|
||||
<motion.div
|
||||
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 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -103,7 +103,7 @@ export default function RoomManageModal({
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
<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%" }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "100%" }}
|
||||
@@ -111,16 +111,16 @@ export default function RoomManageModal({
|
||||
>
|
||||
<button
|
||||
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} />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Crown size={18} className="text-amber-500" />
|
||||
<h2 className="text-lg font-bold text-zinc-900">房间管理</h2>
|
||||
<Crown size={18} className="text-amber-400" />
|
||||
<h2 className="text-lg font-bold text-white">房间管理</h2>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-zinc-400">
|
||||
<p className="mt-1 text-xs text-muted">
|
||||
房间号 {roomId}
|
||||
</p>
|
||||
|
||||
@@ -131,8 +131,8 @@ export default function RoomManageModal({
|
||||
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 ${
|
||||
locked
|
||||
? "border border-emerald-200 bg-emerald-50 text-emerald-700 active:bg-emerald-100"
|
||||
: "border border-zinc-200 bg-white text-zinc-700 active:bg-zinc-50"
|
||||
? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
|
||||
: "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
|
||||
}`}
|
||||
>
|
||||
{loading === "lock" || loading === "unlock" ? (
|
||||
@@ -148,7 +148,7 @@ export default function RoomManageModal({
|
||||
|
||||
{/* User list with kick */}
|
||||
<div className="mt-5">
|
||||
<h3 className="text-xs font-semibold text-zinc-500">
|
||||
<h3 className="text-xs font-semibold text-muted">
|
||||
房间成员（{users.length}）
|
||||
</h3>
|
||||
<div className="mt-2 flex flex-col gap-1.5">
|
||||
@@ -164,7 +164,7 @@ export default function RoomManageModal({
|
||||
return (
|
||||
<div
|
||||
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
|
||||
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 items-center gap-1.5">
|
||||
{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} />
|
||||
房主
|
||||
</span>
|
||||
)}
|
||||
<span className="truncate text-xs font-medium text-zinc-500">
|
||||
<span className="truncate text-xs font-medium text-gray-400">
|
||||
{displayName}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`text-[11px] ${finished ? "text-emerald-500" : "text-zinc-400"}`}
|
||||
className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
|
||||
>
|
||||
{swiped}/{totalCards}
|
||||
{finished ? " 已完成" : " 进行中"}
|
||||
@@ -211,7 +211,7 @@ export default function RoomManageModal({
|
||||
</button>
|
||||
<button
|
||||
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>
|
||||
@@ -219,7 +219,7 @@ export default function RoomManageModal({
|
||||
) : (
|
||||
<button
|
||||
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} />
|
||||
移出
|
||||
@@ -236,8 +236,8 @@ export default function RoomManageModal({
|
||||
{/* End voting */}
|
||||
<div className="mt-5">
|
||||
{confirmEnd ? (
|
||||
<div className="flex flex-col gap-2 rounded-xl border border-amber-200 bg-amber-50 p-3">
|
||||
<p className="text-xs font-medium text-amber-800">
|
||||
<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-300">
|
||||
确定要结束投票吗？将根据当前已有的投票结果直接结算。
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
@@ -255,7 +255,7 @@ export default function RoomManageModal({
|
||||
</button>
|
||||
<button
|
||||
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>
|
||||
@@ -265,7 +265,7 @@ export default function RoomManageModal({
|
||||
<button
|
||||
onClick={() => setConfirmEnd(true)}
|
||||
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} />
|
||||
结束投票（立即出结果）
|
||||
|
||||
Reference in New Issue
Block a user