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/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)}`;
return (
<div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-xl">
<div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-zinc-100">
<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-elevated">
{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="absolute bottom-3 left-4 flex items-center gap-1.5">
{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}
</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 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}
</h2>
<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}
className={`flex items-center justify-center rounded-full p-1 transition-colors ${
favorited
? "bg-amber-100 text-amber-500"
: "bg-zinc-50 text-zinc-400 active:bg-amber-50 active:text-amber-500"
? "bg-amber-500/20 text-amber-400"
: "bg-elevated text-muted active:bg-amber-500/15 active:text-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)}
onPointerDown={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} />
@@ -203,7 +203,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
onClick={openLink(dianpingUrl)}
onPointerDown={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} />
@@ -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 items-center gap-1">
<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}
</span>
</div>
<span className="text-sm font-semibold text-emerald-600">
<span className="text-sm font-semibold text-emerald-400">
{restaurant.price}
</span>
{restaurant.distance && (
<div className="flex items-center gap-1 text-zinc-400">
<div className="flex items-center gap-1 text-muted">
<MapPin size={13} />
<span className="text-xs">{restaurant.distance}</span>
</div>
@@ -232,13 +232,13 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
</div>
{restaurant.address && (
<p className="truncate text-xs leading-tight text-zinc-400">
<p className="truncate text-xs leading-tight text-muted">
{restaurant.address}
</p>
)}
{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} />
<span>{restaurant.openTime}</span>
</div>
@@ -252,7 +252,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
.map((t) => (
<span
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()}
</span>