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:
@@ -66,7 +66,7 @@ export default function QrInviteModal({
|
||||
{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 }}
|
||||
@@ -74,7 +74,7 @@ export default function QrInviteModal({
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
<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%" }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "100%" }}
|
||||
@@ -82,33 +82,33 @@ export default function QrInviteModal({
|
||||
>
|
||||
<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 flex-col items-center">
|
||||
<div className="flex items-center gap-2 text-zinc-800">
|
||||
<QrCode size={18} className="text-emerald-500" />
|
||||
<div className="flex items-center gap-2 text-white">
|
||||
<QrCode size={18} className="text-accent" />
|
||||
<h2 className="text-lg font-bold">邀请饭搭子</h2>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-zinc-400">
|
||||
<p className="mt-1 text-xs text-muted">
|
||||
{sceneConfig.qrSubtitle}
|
||||
</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
|
||||
value={inviteUrl}
|
||||
size={180}
|
||||
level="M"
|
||||
bgColor="transparent"
|
||||
fgColor="#18181b"
|
||||
fgColor="#e5e7eb"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center gap-2">
|
||||
<span className="text-xs text-zinc-400">房间号</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="text-xs text-muted">房间号</span>
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
@@ -116,14 +116,14 @@ export default function QrInviteModal({
|
||||
<div className="mt-5 flex w-full gap-2.5">
|
||||
<button
|
||||
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} />
|
||||
复制链接
|
||||
</button>
|
||||
<button
|
||||
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} />
|
||||
发送邀请
|
||||
|
||||
Reference in New Issue
Block a user