4.6 KiB
4.6 KiB
页面重构进度台账
用途:记录哪些页面已并入暖橙体系、哪些还停在旧体系,以及下一步的推进顺序。 分工:配色标准、令牌表、状态色、回滚方法一律以 DESIGN.md 为准(本文不重复);本文只管「进度 + 顺序 + 每页动作」。
一、已完成(4 页)
| 页面 | 完成 | 主要动作 |
|---|---|---|
home/index(首页) |
更早 | 暖白纸面 + 白卡语言重建:hero(大标题 / 场景行 / 通栏主 CTA)→ 陪诊服务(白卡宫格 + 浅橙介绍卡)→ 常用功能(青绿待服务条 + 双列 / 通栏卡)→ 页脚文字链。页内旧令牌副本已删 |
escort/itemlist(陪诊服务列表) |
更早 | 页首短横色标 + 引导,说明白卡(开通城市 / 费用披露 + 两个入口),三组「通栏白底 + 章线」价目表,空心环「预约」按钮,浅橙收口页脚卡。页内旧令牌副本已删 |
mine/mine(我的) |
2026-10-04 | 并入暖橙体系 + 首页白卡语言:纸面底、头像与昵称直接落纸面、菜单白卡(图标走 --brand-ink)、页脚细竖线分隔。默认头像改用暖墨品牌标记 images/home-ink.png。删掉一批死样式(.user-phone、.avatar-btn、昵称输入等) |
ai/aichat(AI 陪诊助手) |
2026-10-04 | 整页重设计:纸面底 + 消息列表(头像行在上、气泡在下,用户消息整条靠右并把时间镜像到头像左侧);AI 与用户头像统一底座(浅橙底 + 暖橙描边),身份只由图形区分(品牌标记 / 人像);AI 声明由页底常驻行改为挂在每条 AI 气泡下方;清空入口移到输入框下方做成空心描边小按钮;全页圆角统一 20rpx。附带修复滚动布局(.message-list 补 min-height: 0,消息超一屏后输入区不再被顶出视口) |
DESIGN.md §5.1 已同步登记
mine/mine.wxss、ai/aichat.wxss两页迁移完成。
二、待重构(13 页 / 22 个文件)
按"离规范的距离"分三档,建议从上往下推进——同档内先易后难。
A. 旧暖橙副本(最接近,只差删副本 + 对值)|4 页 8 文件
页内各带一份 page{} 令牌副本,停在 #C2410C / #9A3412;结构基本可用。
| 页面 | 文件 | 动作 |
|---|---|---|
escort/itemdetail |
.wxss .wxml |
删页内令牌副本(改读 app.wxss),t-icon 的 color 手改 #9B4508 |
escort/attendantlist |
.wxss .wxml |
同上 |
escort/guide |
.wxss .wxml |
同上 |
mine/contact |
.wxss .wxml |
同上 |
B. 旧金色体系(#D4A853 系,改动最大)|9 页 + 3 组件/JS
| 页面 | 文件 | 动作 |
|---|---|---|
mine/about |
.wxss |
按 §5.3 映射表整体换色 |
mine/comp_address |
.wxss .wxml(switch 属性值需硬编码) |
同上 |
mine/comp_profile |
.wxss |
同上 |
health/profilelist |
.wxss .wxml .js(confirmColor) |
同上 |
health/profileedit |
.wxss |
同上 |
escort/recordlist |
.wxss |
换色 + 状态四档 |
escort/recorddetail |
.wxss .wxml |
换色 + 状态四档 |
escort/agreement |
.wxss |
底 #FAF6F1 → --paper,其余按映射表 |
C. 绿灰系(另一套冷色,需整体并入)|2 页
| 页面 | 文件 | 动作 |
|---|---|---|
hospital/contact |
.wxss |
底 #F5F7F6、字 #1F2937、绿灰线一并换成纸面 / 暖墨 / 暖线 |
hospital/ranking |
.wxss |
同上 |
D. 无需处理
| 页面 | 说明 |
|---|---|
home/webview |
仅一个 <web-view>,无色值 |
组件与 JS 里的硬编码(易漏)
comp_address.wxml 的 switch 属性、profilelist.js 的 confirmColor 走的是属性值,读不到 CSS 变量,必须硬编码暖橙。
三、系统级收口(不属任何页面)
沿用 DESIGN.md §5.2,共 4 项:app.json 的 tabBar 绿色选中图标、tabBar color: #999999、app.wxss 里整套翠绿死代码(--td-brand-color-1..10、--c-ink)、custom-tab-bar 未选中灰 #7A7068。建议放在页面重构全部完成后一次做完,避免边改边漏。
四、每页收工自检
- 灰度化后层级是否仍清楚(去掉颜色不散架)。
- 色相数量:暖橙 + 暖墨 + 至多一个状态色。
- 最浅的那行字是否
--muted或更深。 - 中文最小 24rpx、正文对比度 ≥ 4.5:1(大字 ≥ 3:1)、图标 ≥ 3:1。
- 可点项是否有显性暗示,热区是否 ≥ 56rpx。
- 页面是否还有
page{}级令牌副本;有则删掉,回归 app.wxss 唯一来源。
详细判据见 DESIGN.md「六、一句话检验」。