主题
WellChina 前端全面整改执行计划
创建日期: 2026-03-27 基准文档:
.impeccable.md+docs/design-critique.md状态: 待执行
执行依赖图
Phase 1 — 基础设施（必须先完成，后续所有改动依赖此阶段）
├── 1. /typeset 字体系统重建
└── 2. /colorize 色彩体系 + Dark Mode 基础设施
Phase 2 — 视觉重塑（基于新字体和色彩）
├── 3. /bolder Hero 区域重设计
├── 4. /arrange 布局多样化
└── 5. /animate 动画系统丰富化
Phase 3 — 体验打磨
├── 6. /normalize 组件一致性（含 Admin 迁移）
├── 7. /delight 微反馈补全
├── 8. /distill 信息密度优化
└── 9. /onboard 空状态与边缘体验
Phase 4 — 收尾
└── 10. /polish 最终打磨 + 回归验证Phase 1 内部 typeset 和 colorize 可并行。Phase 2 三项可并行。Phase 3 四项可并行。Phase 4 必须最后执行。
1. /typeset — 字体系统重建
目标
替换 Inter，建立有品牌识别度的字体组合。标题有个性，正文高可读。
涉及文件
| 文件 | 改动 |
|---|---|
src/app/layout.tsx | 替换 Google Fonts 导入（Inter → 新字体） |
src/app/globals.css | 更新 --font-sans / --font-* 变量；重新校准 .text-display / .text-heading / .text-body / .text-caption 的 font-family、letter-spacing、line-height、font-weight |
package.json | 如使用非 Google Fonts 字体需添加依赖 |
设计决策点
- 标题字体候选（需确认）：
DM Serif Display— 衬线，温暖优雅，有品质感Fraunces— 可变衬线，柔和有机，温暖感强Source Serif 4— 衬线，专业可靠，适合信息密集场景Playfair Display— 衬线，高端但可能过于杂志感
- 正文字体候选（需确认）：
DM Sans— 几何人文，干净但比 Inter 有更多个性Plus Jakarta Sans— 现代人文，温暖圆润Source Sans 3— 专业中性，比 Inter 更有人文气质Outfit— 几何但柔和，现代感强
- 推荐组合：标题衬线 + 正文无衬线，形成对比层次。例如 Fraunces + Plus Jakarta Sans（温暖路线）或 DM Serif Display + DM Sans（统一家族路线）
校准要点
- Display 级别：标题字体，加大 letter-spacing 负值（衬线字体通常需要更紧的间距）
- Heading 级别：标题字体，适度紧凑
- Body 级别：正文字体，保持 16px / 1.6 line-height 的舒适阅读
- Caption 级别：正文字体，可适当增加 letter-spacing
- Navbar / Button / Badge 等组件内文字：正文字体，semibold
验收标准
- [ ] 全站无 Inter 残留
- [ ] 标题和正文字体有明确的视觉区分
- [ ] 各级排版在 320px ~ 1440px 屏幕上均舒适可读
- [ ] 字体加载策略合理（
font-display: swap或optional），不造成布局抖动
2. /colorize — 色彩体系重建 + Dark Mode
目标
将冰冷的纯蓝体系调整为偏暖的专业色彩；实现完整的 Dark Mode 支持。
涉及文件
| 文件 | 改动 |
|---|---|
src/app/globals.css | 重新定义 :root 全部色彩变量；新增 [data-theme="dark"] 或 .dark 下的深色变量；新增 @media (prefers-color-scheme: dark) |
src/app/layout.tsx | <html> 标签添加 theme class/attribute；引入 theme 初始化脚本（避免 flash） |
src/components/layout/Navbar.tsx | 添加主题切换按钮（Sun/Moon 图标） |
新文件: src/lib/theme.ts 或 src/components/ui/ThemeToggle.tsx | 主题切换逻辑 + localStorage 持久化 |
| 所有使用硬编码颜色的文件 | 替换为 CSS 变量引用 |
色彩设计决策点
浅色主题
| 变量 | 当前值 | 调整方向 |
|---|---|---|
--color-primary | #1e3a5f 纯蓝 | 偏向蓝绿 teal（如 #1a4a4a、#2d4a5c、#1e4d5c），保留专业感但更温暖 |
--color-primary-light | #2d5a8e | 随主色联动调整 |
--color-primary-dark | #152b47 | 随主色联动调整 |
--color-accent | #0ea5e9 cyan | 替换为暖色系（琥珀 #d97706、珊瑚 #e8734a、暖金 #b8860b），或暖色 teal |
--color-accent-light | #38bdf8 | 随 accent 联动 |
--background | #ffffff 纯白 | 微暖 off-white（#faf8f5 或 #f9f7f4） |
--foreground | #171717 纯黑 | 微调为暖黑（#1a1a18 或 #201e1b） |
--color-neutral-* | Slate 系 (偏蓝灰) | 切换到 Stone/Warm Gray 系（偏暖灰），从 slate 迁移到 stone |
深色主题
- 背景：不用纯黑
#000，用暖深色（#1a1a18、#1c1917） - 表面色：card/section 背景用
#262520或类似暖灰 - 文字：不用纯白
#fff，用微暖的#f5f3ef - 主色和强调色：保持与浅色版一致的色相，但调整亮度以确保对比度
- 边框：从
neutral-200变为暖深灰 - 阴影：深色模式下改用微光或边框代替阴影
主题切换机制
1. 首次访问 → 读取 localStorage('theme')
2. 如无存储 → 读取 prefers-color-scheme
3. 用户手动切换 → 写入 localStorage + 更新 html attribute
4. 使用 <script> 在 <head> 中同步执行（避免闪烁）需要排查的硬编码颜色
- Hero 区域：
to-[#1e6fa8]（硬编码蓝色） - HeroSearch：
hover:bg-gray-50、text-gray-400等原生 Tailwind 灰色 - 各页面中散落的
bg-white、text-white、border-white需评估是否需要改为变量 - Admin 全部页面（Phase 3 /normalize 处理）
验收标准
- [ ] 浅色主题视觉温度明显提升（不再"冰冷"）
- [ ] 深色主题独立调色完成，温暖感延续
- [ ] 主题跟随系统偏好自动切换
- [ ] Navbar 有手动切换按钮
- [ ] 主题偏好持久化到 localStorage
- [ ] 切换无闪烁（FOUC-free）
- [ ] 所有语义色在两个主题下对比度均达到 4.5:1 (AA)
3. /bolder — Hero 区域重设计
目标
告别渐变 blob 模板感，建立有品牌特色的首页第一印象。
涉及文件
| 文件 | 改动 |
|---|---|
src/app/page.tsx | 重写 Hero section 结构和样式 |
src/app/globals.css | 如需新增 Hero 专属样式/动画 |
public/ | 如使用品牌图形资产需添加 |
设计决策点
- 背景方案（选一）：
- A. 高品质摄影（中国城市天际线/医院内景）+ 色彩叠加
- B. 品牌色块 + 几何图形语言（非 blob）
- C. 微妙纹理/图案（如中国传统纹样的现代化抽象）+ 纯色
- D. 分栏布局：左文字右插画/图形，打破居中对称
- Trust items 重设计：
- 当前：CheckCircle + 纯文字水平列表 → 太常见
- 方案：数字卡片（"100+ hospitals"、"13 cities"）、logo 墙式合作伙伴展示、或融入 hero 布局而非独立区块
- 搜索框：
- 保留功能但视觉重新设计
- 考虑与新色彩系统的融合
- 深色模式下的表现
验收标准
- [ ] Hero 不再使用蓝色渐变 + blur blob
- [ ] 视觉上无法被识别为 "AI 模板"
- [ ] 在 3 秒内传达 WellChina 的核心价值
- [ ] 移动端和桌面端均有良好表现
- [ ] 深色模式适配
4. /arrange — 布局多样化
目标
打破"标题→网格→分页"的单调节奏，不同内容用不同布局策略。
涉及文件
| 文件 | 改动方向 |
|---|---|
src/app/page.tsx | 首页各 section 差异化布局 |
src/app/hospitals/page.tsx | 医院列表布局优化 |
src/app/procedures/page.tsx | 手术列表布局优化 |
src/app/cities/page.tsx | 城市列表布局优化 |
src/app/pricing/page.tsx | 价格表格移动端适配 |
src/app/guides/page.tsx | 指南列表布局 |
src/components/ui/Card.tsx | 可能需要卡片变体（horizontal/featured/compact） |
具体方案
首页 section 差异化
| Section | 当前 | 建议 |
|---|---|---|
| Popular Procedures | 4列均匀网格 | 首行 2 个大卡（featured）+ 下方 4-6 个小卡，或横向滚动 carousel |
| Price Highlights | 4列小卡 | 保持但加入迷你柱状图或数据可视化元素 |
| Featured Cities | 3列均匀网格 | Masonry 布局或大小卡混排（第一个城市大图，其余小图） |
| Quick Tools | 3列卡片 | 考虑全宽横条（horizontal card）+ 图标更大更突出 |
| Trust Bar | 4列图标列表 | 横向滚动 marquee 或更紧凑的单行展示 |
列表页差异化
- 医院卡片：加入更多视觉信息（英文服务等级用色彩条而非文字、JCI 用徽章而非文字标签）
- 手术卡片：价格信息更突出（大字号、对比条）
- 城市卡片：图片占比更大，信息覆盖在图片上（overlay）
验收标准
- [ ] 首页至少 3 种不同的 section 布局
- [ ] 医院/手术/城市卡片有视觉区分
- [ ] 移动端各列表页不再是简单的单列堆叠
- [ ] 信息层次通过布局（而非仅靠字号）传达
5. /animate — 动画系统丰富化
目标
不只 fade-up，引入有目的的多样化动画，建立动画语言体系。
涉及文件
| 文件 | 改动 |
|---|---|
src/components/ui/AnimatedSection.tsx | 扩展动画变体；考虑新增动画组件 |
src/app/page.tsx | 各 section 使用不同动画类型 |
src/app/globals.css | CSS 动画 keyframes（如需） |
| 各页面文件 | 根据内容选择合适的动画 |
动画语言定义
| 场景 | 动画类型 | 目的 |
|---|---|---|
| Section 进入 | fade-up（保留但不是唯一） | 引导滚动阅读 |
| 卡片列表 | stagger（保留）+ scale-in | 节奏感 |
| 数字/统计 | count-up | 强调数据 |
| 图片 | reveal (clip-path) 或 parallax | 品质感 |
| 页面切换 | crossfade | 流畅感 |
| Hover 交互 | subtle scale + shadow | 可交互暗示 |
| 状态变化 | spring physics | 活力感 |
约束
- 所有动画必须
prefers-reduced-motion友好 - 动画时长不超过 500ms（除 parallax 等持续性动画）
- 不做纯装饰动画（每个动画都要有信息传达目的）
验收标准
- [ ] 全站至少使用 3 种不同的入场动画类型
- [ ] 支持
prefers-reduced-motion: reduce - [ ] 动画不造成布局抖动（CLS）
- [ ] Hero 区域有独特的动画节奏，区别于内容区
6. /normalize — 组件一致性（含 Admin）
目标
Admin 页面迁移到 CSS 变量体系，全站设计语言统一。
涉及文件
| 文件 | 改动 |
|---|---|
src/app/admin/login/page.tsx | gray-* → CSS 变量 |
src/app/admin/(dashboard)/page.tsx | 统一使用 Card/Badge/Button 组件 |
src/app/admin/(dashboard)/hospitals/page.tsx | 表格样式迁移 |
src/app/admin/(dashboard)/hospitals/[id]/page.tsx | 表单样式迁移 |
src/app/admin/(dashboard)/procedures/page.tsx | 表格样式迁移 |
src/app/admin/(dashboard)/procedures/[id]/page.tsx | 表单样式迁移 |
src/app/admin/(dashboard)/insurance/page.tsx | 表格样式迁移 |
src/app/admin/(dashboard)/insurance/[id]/page.tsx | 表单样式迁移 |
src/app/admin/(dashboard)/contacts/page.tsx | 表格样式迁移 |
具体替换清单
| 当前（Admin） | 替换为 |
|---|---|
bg-gray-50 | bg-[var(--color-neutral-50)] |
bg-gray-900 | bg-[var(--color-primary)] |
text-gray-700 | text-[var(--color-neutral-600)] |
text-gray-500 | text-[var(--color-neutral-400)] |
border-gray-200 | border-[var(--color-neutral-200)] |
hover:bg-gray-50 | hover:bg-[var(--color-neutral-50)] |
bg-white (在 Admin 上下文) | bg-[var(--color-background)] 或保持但确认 dark mode 覆盖 |
| 内联 Badge 样式 | 复用 Badge 组件 |
| 内联 Button 样式 | 复用 Button 组件 |
验收标准
- [ ] Admin 页面零 Tailwind 原生灰色类（全部使用 CSS 变量）
- [ ] Admin 使用与前台相同的 Button/Badge/Card 组件
- [ ] Admin Dark Mode 正常工作
- [ ] Admin 表单输入框样式与前台一致
7. /delight — 微反馈补全
目标
补全交互反馈的空白，让用户明确知道"操作已生效"。
涉及文件
| 文件 | 改动 |
|---|---|
src/components/ui/HeroSearch.tsx | 搜索 loading spinner |
src/app/contact/page.tsx | 表单提交 loading + 成功/失败动画 |
src/components/compare/CompareButton.tsx | 添加/移除时的微动画 |
src/components/compare/CompareBar.tsx | 物品变化时的过渡动画 |
src/components/ui/FilterBar.tsx | 已激活筛选器视觉标记 |
新文件: src/components/ui/Skeleton.tsx | 骨架屏组件 |
新文件: src/components/ui/Toast.tsx（可选） | 轻量 toast 通知 |
| 各列表页 | 添加 loading / skeleton 状态 |
具体方案
| 交互 | 当前反馈 | 补充反馈 |
|---|---|---|
| 搜索输入 | 无 | Input 右侧显示 spinner；无结果时即时提示 |
| 表单提交 | 按钮文字变化 | 按钮 spinner + disabled；成功后显示 checkmark 动画 |
| 对比添加 | CompareBar 出现 | 按钮 scale-bounce 微动画 + Bar 新增项 slide-in |
| 对比移除 | 项目消失 | Slide-out 动画 + 如果清空则 bar fade-out |
| 筛选选择 | Select 值变化 | 已激活筛选器添加 accent 色 pill 标记 |
| 页面加载 | 空白等待 | 骨架屏（card shape + pulse animation） |
验收标准
- [ ] 所有异步操作有 loading 指示
- [ ] 表单提交有明确的成功/失败状态
- [ ] 对比工具添加/移除有动画过渡
- [ ] 列表页有骨架屏或 loading 占位
8. /distill — 信息密度优化
目标
关键页面的信息组织优化，善用渐进式披露。
涉及文件
| 文件 | 改动 |
|---|---|
src/app/hospitals/[slug]/page.tsx | 信息分段（tabs 或 accordion） |
src/app/pricing/page.tsx | 移动端卡片式布局替代表格 |
src/app/cities/page.tsx | 信息主次分层 |
src/app/procedures/[category]/[slug]/page.tsx | 手术详情信息分组 |
具体方案
医院详情页
当前：所有信息垂直堆叠（基本信息 → 专科 → Fudan → 手术价格 → 保险 → 联系方式） 建议：
- 顶部保留基本信息 hero（名称、类型、英文服务、JCI、城市）
- 下方使用 Tab 导航：概览 | 手术与价格 | 保险 | 联系方式
- 或使用粘性侧边导航（桌面端）跳转到各 section
Pricing 页面
当前：宽表格 + overflow-x-auto（移动端需横向滚动） 建议：
- 桌面端保持表格
- 移动端（< md）切换为卡片列表，每个手术一张卡片，内含价格对比
城市列表
当前：所有 stats 平铺 建议：
- 主信息：城市名 + 医院数（始终显示）
- 次信息：expat 人口 + 可达性（hover 或展开显示）
验收标准
- [ ] 医院详情页有信息分段机制
- [ ] Pricing 在 375px 屏幕上无需横向滚动
- [ ] 各列表页主次信息有视觉权重区分
9. /onboard — 空状态与边缘体验
目标
将空状态从"死胡同"转变为"引导入口"。
涉及文件
| 文件 | 改动 |
|---|---|
src/app/compare/page.tsx | 对比空状态重设计 |
src/app/search/page.tsx | 搜索无结果重设计 |
新文件: src/app/not-found.tsx | 自定义 404 页面 |
src/app/page.tsx | Fallback 数据提取为独立常量 |
具体方案
| 场景 | 当前 | 改进 |
|---|---|---|
| 对比空状态 | Scale 图标 + 说明文字 | 示意图/动画展示对比功能 + "Browse Hospitals" CTA 按钮 |
| 搜索无结果 | "No results found" + 帮助链接 | 友好插画 + "Try searching for..." 热门推荐 + 联系入口 |
| 404 | Next.js 默认 | 品牌化 404 页面 + 导航建议 + 搜索框 |
| DB 无数据 fallback | 硬编码在 page.tsx | 提取到 src/lib/fallback-data.ts |
验收标准
- [ ] 对比空状态有视觉引导和明确 CTA
- [ ] 搜索无结果有热门推荐
- [ ] 自定义 404 页面上线
- [ ] Fallback 数据从页面文件中提取
10. /polish — 最终打磨
目标
全站回归验证，修复前 9 步引入的不一致和遗留细节。
检查清单
- [ ] 间距审查 — 所有 section padding、card padding、gap 在新布局下保持一致
- [ ] 色彩审查 — 全站无硬编码颜色残留（包括
text-white、bg-white等） - [ ] 字体审查 — 无 Inter 残留，新字体在所有组件中正确应用
- [ ] Dark Mode 全量测试 — 每个页面、每个组件在深色模式下正常显示
- [ ] 响应式审查 — 375px / 768px / 1024px / 1440px 四个断点全量测试
- [ ] 动画审查 —
prefers-reduced-motion下无动画残留 - [ ] 无障碍审查 — 对比度检查（至少 AA）、焦点指示器、ARIA 标签
- [ ] Favicon — 替换 Next.js 默认 favicon 为品牌 icon
- [ ] OG Image — 添加社交分享预览图
- [ ] 硬编码字符串 — 确认所有面向用户的文案走 i18n 系统
- [ ] Footer Guide slugs — 从数据库动态获取或至少抽为常量
- [ ] HeroSearch 键盘导航 — 上下箭头选择 + Enter 确认
- [ ] Admin 删除确认 — 所有 DELETE 操作添加确认对话框
- [ ] z-index 冲突 — CompareBar 和 Navbar 的层级关系确认
- [ ] console 报错清零 — 开发和生产模式下无 warning/error
- [ ] Lighthouse 跑分 — Performance > 90, Accessibility > 90, SEO > 95
工作量预估概览
| Phase | 任务 | 复杂度 | 依赖 |
|---|---|---|---|
| 1 | /typeset | 中 | 无 |
| 1 | /colorize | 高 | 无 |
| 2 | /bolder | 高 | Phase 1 |
| 2 | /arrange | 高 | Phase 1 |
| 2 | /animate | 中 | Phase 1 |
| 3 | /normalize | 中 | Phase 1 (colorize) |
| 3 | /delight | 中 | 无强依赖 |
| 3 | /distill | 中 | Phase 2 (arrange) |
| 3 | /onboard | 低 | Phase 1 |
| 4 | /polish | 中 | 全部 |
备注
- 每完成一个 Phase 建议跑一次
/critique看分数变化 - Phase 1 是地基，如果字体和色彩选得好，后续改动会自然流畅
- Hero 重设计（/bolder）可能是视觉感知变化最大的单项改动
- Admin 的 /normalize 工作量不大但非常琐碎，适合批量搜索替换