WellChina 前端细节审查报告 (Phase 1 后)

审查日期: 2026-03-29 基准文档: .impeccable.md 审查范围: Phase 1 (typeset + colorize) 完成后的全部前端页面重点: 排版细节、间距一致性、颜色协调、视觉统一性

总体评估

Phase 1 的字体（Lora + Source Sans 3）和色彩体系（teal-navy + amber + stone）已建立，品牌识别度明显提升。但细节层面有大量"各自为政"的问题——间距不统一、字号比例不协调、卡片高度参差、颜色使用缺乏节制。这些问题单独看都是小事，但积累起来严重损害"专业精致"的品牌感受。

P1 — 全站排版与间距问题

P1-1. 医院卡片：中英文名间距缺乏设计

位置: /hospitals 列表页、城市详情页医院列表
问题: 英文名（h2，serif 大字）和中文名（小字）之间间距过紧，视觉上粘在一起。中文名和城市名之间也缺少层次区分——两者都是灰色小字，用户需要仔细看才能分清。
修复:
- 英文名和中文名之间加 mt-1（当前为 0）
- 中文名使用 text-sm text-neutral-600，城市名使用 text-xs text-neutral-400，拉开层次
- 卡片标题区域整体 padding 检查，确保上下左右一致

P1-2. 医院详情页 Hero 标签框过高

位置: /hospitals/[slug] Hero 区域的 badge 行
问题: "Full English Service" / "Private Premium" / "International Dept." 标签使用了 rounded-full px-3 py-1 的样式，在深色 hero 背景上显得过于突出、占据空间过大。与白色小字 Compare 按钮的视觉权重不匹配。
修复:
- 缩小标签 padding：px-2.5 py-0.5（从 py-1 减半）
- 统一标签和 Compare 按钮的视觉层级
- 标签文字保持 text-xs

P1-3. 首页 section 间距不一致

位置: 首页各 section 之间
问题: Hero 后面的 "Popular Procedures" section 有 py-20 的巨大上边距，但内容区域（卡片网格）本身又因为数据较少显得空旷。各 section 之间的间距节奏不统一——有的 py-20 有的 py-14，缺乏设计系统级的 section spacing token。
修复:
- 定义统一的 section padding：py-16 作为标准，特殊强调 section 用 py-20
- Hero 到第一个 section 的过渡可以用 pt-12 pb-16 而非均匀的 py-20

P1-4. SectionHeader 下划线与标题间距

位置: 所有使用 SectionHeader 的页面
问题: 标题下方的 teal 装饰线（h-1 w-12）和标题之间 gap 为 4px（gap-1），视觉上贴得太紧。装饰线宽度 w-12 在大标题下显得太短/随意。
修复:
- 装饰线和标题间距增加到 gap-2
- 装饰线宽度从 w-12 增加到 w-16
- 考虑装饰线高度从 h-1 减小为 h-0.5，更精致

P1 — 卡片一致性问题

P1-5. 城市详情页医院列表卡片高度不一致

位置: /cities/[slug] 医院列表
问题: 医院卡片因为有的有 specialty badge、有的没有，导致卡片高度参差不齐。有 badge 的卡片多出一行，视觉上不整齐。badge 行和英文服务/JCI 标签不在同一水平线，布局凌乱。
修复:
- 卡片使用 min-h 确保最低高度一致
- Badge 和状态标签放在卡片右上角（水平排列），specialty badges 放在底部，确保信息层级一致
- 或统一使用 flex + items-start + justify-between 让标签区域固定位置

P1-6. Guide 卡片标题大小不协调

位置: /guides 列表页
问题: Guide 标题使用 h2（serif 字体 + clamp 流式缩放），在 2 列网格的卡片内显得字号过大、过于"标题感"。尤其是长标题如 "How to Book a Hospital Appointment in China" 换行后占据了太多垂直空间。与描述文字的字号落差太大（标题 ~28px vs 描述 ~14px）。
修复:
- 卡片内标题改用 text-xl font-semibold font-sans（不用 serif、不用 h2 的 clamp 尺寸），保持信息密度
- 或使用 h3 级别（sans 字体 + 1.25rem），让标题和描述的字号比例更合理
- 描述文字字号保持 text-sm
- 确保 4 张卡片等高（h-full 已有但标题撑高不均）

P1-7. Procedures 卡片内部间距松散

位置: /procedures 列表页
问题: 手术卡片内部有图标（size-10 圆形）+ 类别标签 + 标题 + 价格 + 节省 badge。元素之间间距不紧凑，图标圆形和类别小字之间留白过多。卡片整体高度偏大，内容密度偏低。
修复:
- 图标圆形从 size-10 缩小到 size-8，图标从 size-5 缩小到 size-4
- 类别标签紧贴图标后方（同行），而非独占一行
- 减少 CardBody padding 从 p-5 到 p-4

P1 — 颜色与视觉协调问题

P1-8. 价格比较柱状图颜色单调 ✅ 待处理

位置: /pricing 页面下半部分的价格对比柱状图
问题: China 柱状图使用 primary-light（teal），US/Europe 使用 neutral-300 和 neutral-400。三种柱状图颜色过于接近（都是灰色系），China 的 teal 和灰色的对比不够强烈，用户难以一眼识别"中国价格优势"。
修复:
- China 柱状图保持 primary-light teal（已正确）
- US 柱状图改用 neutral-400（中灰，保持）
- Europe 柱状图改用 neutral-300（浅灰，保持）
- 在柱状图左侧添加色彩图例（legend），而非仅靠标签 "China" / "US" / "Europe"
- 考虑为 China 柱状图添加微妙的圆角或不同的高度，进一步区分

P1-9. 医院详情页颜色层次混乱 — ✅ 已修复 (2026-03-31)

修复内容:
- ~~Fudan 排名区域 border-yellow-*~~ → 已改用 border-[var(--color-warning)]/20
- ~~"Direct billing" 绿色标签 text-green-700~~ → 已改用 text-[var(--color-success)]
- 公开页面硬编码颜色已清理：text-gray-500 → text-[var(--color-neutral-400)]（hospitals 列表页），text-blue-100 → text-white/80 / text-white/70（首页 hero）
- 注意: Admin 后台仍有 ~127 处硬编码 Tailwind 颜色（gray-*、blue-*、green-*），暂未处理（低优先级，不影响用户端）

P1-10. 首页 Trust 区域和 CTA 区域视觉断裂

位置: 首页底部 Trust Bar → CTA Consultation
问题: Trust bar 使用 bg-[var(--color-surface)]（白色），CTA 用 bg-[var(--color-primary)]（深 teal）。两者之间没有过渡，视觉上突然"跳"到一个深色区块。且 CTA 区域的 "Need personalized advice?" 文案（serif 字体）和 "Free consultation..." 副标题的对比度在深色背景上偏低。
修复:
- CTA 文案确保对比度 ≥ 4.5:1
- Trust bar 和 CTA 之间考虑加一个微妙的 section 分隔（如更大的 padding 或渐变过渡）

P1 — 医院详情页专项优化 — ✅ 已修复 (2026-03-31)

审查范围: /hospitals/[slug] 页面，涵盖数据丰富（嘉会国际医院）和数据稀疏（北京明德医院）两种场景修复批次: /distill → /normalize → /onboard → /arrange → /polish

P1-11. 医院图片重复显示 — ✅ 已修复

问题: Hero 区使用 hospital.imageUrl 作为 20% 透明度背景叠加，同时在 Hero 下方又以独立 <Image> 全尺寸展示同一张图片。每个医院详情页首屏都出现相同图片两次。
修复: 移除独立图片块。Hero 背景图透明度从 opacity-20 提升至 opacity-25，添加从底部到顶部的渐变叠加层（bg-gradient-to-t）提升文字可读性，增大 Hero 内边距（pt-16 sm:pt-24）让图片获得更多视觉展示空间。

P1-12. 深色模式卡片不可见 — ✅ 已修复

问题: 深色模式下 --color-surface: #292524 与页面背景 --background: #1c1917 对比度仅 1.15:1，卡片几乎完全融入背景不可见。所有内容区块（专科、手术、保险、联系方式）在深色模式下消失。
修复: 调整深色模式调色板（同时更新 [data-theme="dark"] 和 @media prefers-color-scheme 两个区块）：

Token	修改前	修改后	效果
`--color-surface`	`#292524`	`#302c28`	卡片与背景可区分
`--color-surface-raised`	`#33302c`	`#3a3532`	浮起元素更突出
`--color-neutral-50`	`#292524`	`#302c28`	hover 状态可见
`--color-neutral-100`	`#33302c`	`#3a3532`	细微背景变化可见
`--color-neutral-200`	`#44403c`	`#524d48`	边框/分割线清晰可见

P1-13. AnimatedSection 导致内容不可见 — ✅ 已修复

问题: 所有内容区块被 AnimatedSection 包裹，初始状态 opacity: 0，仅在进入视口时触发动画。快速滚动时内容"闪入"，且在截图/辅助工具中完全不可见。
修复: 移除医院详情页所有 AnimatedSection 包裹，改用普通 <div> 容器。内容页面应立即可见，动画适用于营销页面而非数据展示页面。

P1-14. 数据稀疏医院页面空白 — ✅ 已修复

问题: 北京明德医院（0 专科、0 手术、0 保险、无电话/网站）页面仅有 Hero + 描述，70% 为空白。用户会认为页面故障或医院不可信。
前端修复 (2026-03-31):
- 无数据时显示虚线边框空状态卡片："Detailed pricing and insurance data coming soon"
- 提供双 CTA：主按钮 "Ask us about this hospital" → /contact，次按钮 "Browse all hospitals" → /hospitals
- 联系方式区块永远渲染：有电话/网站时正常显示，无时展示 "Direct contact details coming soon" + "We can help you reach this hospital" 链接
数据层修复 (2026-03-31): 全部 101 家医院已补全联系信息 + 手术关联 + 科室标签 + 复旦排名。空状态组件保留作为防御性 UI，但正常情况下不再触发。详见 docs/data-completion-plan.md

P1-15. 手术列表无分类（数据丰富页面） — ✅ 已修复

问题: 嘉会国际医院 17 项手术以平铺 divide-y 列表展示，涵盖牙科、生殖、骨科、眼科、体检、医美、减重 7 个类别，全部混在一起。用户需线性扫描全部 17 项。
修复:
- Prisma 查询新增 category.nameEn
- 按 category.slug 分组，每组显示带图标的大写类别子标题（bg-[var(--color-neutral-50)] 背景行）
- 智能分支：单一类别 = 平铺列表（无多余子标题），多类别 = 分组展示

P1-16. 联系方式与实用信息细节打磨 — ✅ 已修复

问题:
- 支付方式显示为原始逗号分隔文本 "visa, mastercard, amex, wechat, alipay, cash, direct billing"
- "Data verified" 日期孤零零地悬浮在最后一张卡片和返回链接之间
- 无实用信息时联系方式仅占一半宽度（grid 布局未自适应）
修复:
- 支付方式和预约方式改为标签药丸展示，配合 PAYMENT_LABELS / BOOKING_LABELS 映射表（Visa、Mastercard、WeChat Pay、Alipay 等）
- "Data verified" 移入联系方式卡片底部 footer 行
- 无实用信息时联系方式区块撑满全宽（不再使用 grid 两栏布局）

P2 — 页面级问题

P2-1. 城市列表页卡片高度不一致

位置: /cities 列表
问题: 城市卡片因 stats 数量不同（有的显示 3 个 stat，有的只有 2 个）导致高度不齐。有些卡片有 "High accessibility" 字样过长换行，加剧不齐。
修复: 卡片添加 h-full + 父级 grid 使用 grid-rows-[masonry] 或等高策略

P2-2. 首页内容区大片空白

位置: 首页 Popular Procedures 后面到 Price Highlights 之间
问题: 如果数据库只有少量手术数据，卡片网格下方会有大面积空白。其他 section 同理。
修复: 这是数据问题而非设计问题，但可以在数据不足时调整 grid 布局（如 2 列而非 4 列）

P2-3. Contact 表单缺少标题区 SectionHeader

位置: /contact
问题: 使用 SectionHeader 组件，但下方的表单卡片和标题之间的关系不够紧密。表单整体宽度 max-w-2xl 和页面其他元素的 max-w-6xl 不一致。
修复: 表单宽度考虑 max-w-xl 或 max-w-lg，居中对齐

P2-4. Compare 空状态设计可改善

位置: /compare
问题: 空状态使用了 dashed border 卡片 + Scale 图标 + 两个按钮。"Browse Hospitals" 是 primary 按钮，"Talk to an Expert" 是 secondary。但两个按钮视觉权重几乎相同，用户不确定该点哪个。
修复: "Browse Hospitals" 保持 primary，"Talk to an Expert" 改为 ghost variant

P2-5. 404 页面未品牌化

位置: 任意不存在的 URL
问题: 使用 Next.js 默认 404 页面（黑色背景 + 白字 "404 | This page could not be found"），与品牌完全脱节
修复: 创建 src/app/not-found.tsx 品牌化 404 页面

P3 — 细节打磨

P3-1. 筛选器 select 组件视觉

位置: 医院/手术列表页的 FilterBar
问题: select 下拉框使用浏览器原生样式，与品牌设计不匹配
修复: 考虑自定义 select 样式或使用 Base UI Select 组件

P3-2. Pagination 组件间距

位置: 各列表页底部
问题: "< Previous" 和 "Next >" 按钮之间的 "Page 1 of 4" 文字与按钮对齐不完美
修复: 检查 flex alignment

P3-3. 城市详情页医院列表无分页

位置: /cities/[slug]
问题: 上海有 17 家医院，全部一次性展示，页面很长
修复: 添加 "Show more" 按钮或分页

P3-4. Pricing 表格和对比图之间重复分页

位置: /pricing
问题: 表格下方有分页，然后是对比图区域，然后又是分页。两个分页功能混淆。
修复: 分页只出现一次，对比图跟随表格数据

位置: Footer "Find Care" 列
问题: Cities 链接前有 MapPin 图标，其他链接没有，导致文字不对齐
修复: 要么所有链接都有图标，要么都不要

WellChina 前端细节审查报告 (Phase 1 后)

总体评估

P1 — 全站排版与间距问题

P1-1. 医院卡片：中英文名间距缺乏设计

P1-2. 医院详情页 Hero 标签框过高

P1-3. 首页 section 间距不一致

P1-4. SectionHeader 下划线与标题间距

P1 — 卡片一致性问题

P1-5. 城市详情页医院列表卡片高度不一致

P1-6. Guide 卡片标题大小不协调

P1-7. Procedures 卡片内部间距松散

P1 — 颜色与视觉协调问题

P1-8. 价格比较柱状图颜色单调 ✅ 待处理

P1-9. 医院详情页颜色层次混乱 — ✅ 已修复 (2026-03-31)

P1-10. 首页 Trust 区域和 CTA 区域视觉断裂

P1 — 医院详情页专项优化 — ✅ 已修复 (2026-03-31)

P1-11. 医院图片重复显示 — ✅ 已修复

P1-12. 深色模式卡片不可见 — ✅ 已修复

P1-13. AnimatedSection 导致内容不可见 — ✅ 已修复

P1-14. 数据稀疏医院页面空白 — ✅ 已修复

P1-15. 手术列表无分类（数据丰富页面） — ✅ 已修复

P1-16. 联系方式与实用信息细节打磨 — ✅ 已修复

P2 — 页面级问题

P2-1. 城市列表页卡片高度不一致

P2-2. 首页内容区大片空白

P2-3. Contact 表单缺少标题区 SectionHeader

P2-4. Compare 空状态设计可改善

P2-5. 404 页面未品牌化

P3 — 细节打磨

P3-1. 筛选器 select 组件视觉

P3-3. 城市详情页医院列表无分页

P3-4. Pricing 表格和对比图之间重复分页

P3-5. Footer "Cities" 前面的 MapPin 图标对齐

推荐执行顺序

优先级	命令	聚焦范围	状态
1	`/polish`	P1-1 ~ P1-4 排版间距统一	待处理
2	`/arrange`	P1-5 ~ P1-7 卡片一致性	待处理
3	`/normalize`	P1-9 硬编码颜色清理	✅ 公开页面已修复
4	`/colorize`	P1-8 价格对比图颜色优化	待处理
5	`/onboard`	P2-4 + P2-5 空状态和 404 页面	待处理
6	`/polish`	P3 细节打磨	待处理
新增	医院详情页	P1-11 ~ P1-16	✅ 全部已修复

WellChina 前端细节审查报告 (Phase 1 后) ​

总体评估 ​

P1 — 全站排版与间距问题 ​

P1-1. 医院卡片：中英文名间距缺乏设计 ​

P1-2. 医院详情页 Hero 标签框过高 ​

P1-3. 首页 section 间距不一致 ​

P1-4. SectionHeader 下划线与标题间距 ​

P1 — 卡片一致性问题 ​

P1-5. 城市详情页医院列表卡片高度不一致 ​

P1-6. Guide 卡片标题大小不协调 ​

P1-7. Procedures 卡片内部间距松散 ​

P1 — 颜色与视觉协调问题 ​

P1-8. 价格比较柱状图颜色单调 ✅ 待处理 ​

P1-9. 医院详情页颜色层次混乱 — ✅ 已修复 (2026-03-31) ​

P1-10. 首页 Trust 区域和 CTA 区域视觉断裂 ​

P1 — 医院详情页专项优化 — ✅ 已修复 (2026-03-31) ​

P1-11. 医院图片重复显示 — ✅ 已修复 ​

P1-12. 深色模式卡片不可见 — ✅ 已修复 ​

P1-13. AnimatedSection 导致内容不可见 — ✅ 已修复 ​

P1-14. 数据稀疏医院页面空白 — ✅ 已修复 ​

P1-15. 手术列表无分类（数据丰富页面） — ✅ 已修复 ​

P1-16. 联系方式与实用信息细节打磨 — ✅ 已修复 ​

P2 — 页面级问题 ​

P2-1. 城市列表页卡片高度不一致 ​

P2-2. 首页内容区大片空白 ​

P2-3. Contact 表单缺少标题区 SectionHeader ​

P2-4. Compare 空状态设计可改善 ​

P2-5. 404 页面未品牌化 ​

P3 — 细节打磨 ​

P3-1. 筛选器 select 组件视觉 ​

P3-2. Pagination 组件间距 ​

P3-3. 城市详情页医院列表无分页 ​

P3-4. Pricing 表格和对比图之间重复分页 ​

P3-5. Footer "Cities" 前面的 MapPin 图标对齐 ​

推荐执行顺序 ​

WellChina 前端细节审查报告 (Phase 1 后)

总体评估

P1 — 全站排版与间距问题

P1-1. 医院卡片：中英文名间距缺乏设计

P1-2. 医院详情页 Hero 标签框过高

P1-3. 首页 section 间距不一致

P1-4. SectionHeader 下划线与标题间距

P1 — 卡片一致性问题

P1-5. 城市详情页医院列表卡片高度不一致

P1-6. Guide 卡片标题大小不协调

P1-7. Procedures 卡片内部间距松散

P1 — 颜色与视觉协调问题

P1-8. 价格比较柱状图颜色单调 ✅ 待处理

P1-9. 医院详情页颜色层次混乱 — ✅ 已修复 (2026-03-31)

P1-10. 首页 Trust 区域和 CTA 区域视觉断裂

P1 — 医院详情页专项优化 — ✅ 已修复 (2026-03-31)

P1-11. 医院图片重复显示 — ✅ 已修复

P1-12. 深色模式卡片不可见 — ✅ 已修复

P1-13. AnimatedSection 导致内容不可见 — ✅ 已修复

P1-14. 数据稀疏医院页面空白 — ✅ 已修复

P1-15. 手术列表无分类（数据丰富页面） — ✅ 已修复

P1-16. 联系方式与实用信息细节打磨 — ✅ 已修复

P2 — 页面级问题

P2-1. 城市列表页卡片高度不一致

P2-2. 首页内容区大片空白

P2-3. Contact 表单缺少标题区 SectionHeader

P2-4. Compare 空状态设计可改善

P2-5. 404 页面未品牌化

P3 — 细节打磨

P3-1. 筛选器 select 组件视觉

P3-2. Pagination 组件间距

P3-3. 城市详情页医院列表无分页

P3-4. Pricing 表格和对比图之间重复分页

P3-5. Footer "Cities" 前面的 MapPin 图标对齐

推荐执行顺序