Files
wxapp_escort/doc/RERACT_PLAN.md
T

4.6 KiB
Raw Blame History

页面重构进度台账

用途:记录哪些页面已并入暖橙体系、哪些还停在旧体系,以及下一步的推进顺序。 分工:配色标准、令牌表、状态色、回滚方法一律以 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。建议放在页面重构全部完成后一次做完,避免边改边漏。


四、每页收工自检

  1. 灰度化后层级是否仍清楚(去掉颜色不散架)。
  2. 色相数量:暖橙 + 暖墨 + 至多一个状态色。
  3. 最浅的那行字是否 --muted 或更深。
  4. 中文最小 24rpx、正文对比度 ≥ 4.5:1(大字 ≥ 3:1)、图标 ≥ 3:1。
  5. 可点项是否有显性暗示,热区是否 ≥ 56rpx。
  6. 页面是否还有 page{} 级令牌副本;有则删掉,回归 app.wxss 唯一来源。

详细判据见 DESIGN.md「六、一句话检验」。