Files
wxapp_escort/doc/RERACT_PLAN.md
T

5.5 KiB
Raw Blame History

页面重构进度台账

用途:记录哪些页面已并入暖橙体系、哪些还停在旧体系,以及下一步的推进顺序。 分工:配色标准、令牌表、状态色、回滚方法一律以 DESIGN.md 为准(本文不重复);本文只管「进度 + 顺序 + 每页动作」。


一、已完成(6 页)

页面 完成 主要动作
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 气泡下方;空态图标改用 images/ai-ink.png;清空入口移到输入框下方做成空心描边小按钮,并在其旁增加「常见问题」入口——点击把常见问题清单整块铺进会话流(行间以横线分隔,可重复点选),空会话欢迎区复用同一清单块样式;全页圆角统一 20rpx。附带修复滚动布局(.message-list 补 min-height: 0,消息超一屏后输入区不再被顶出视口)
mine/profileedit(个人信息) 2026-10-04 由 mine 页上的 comp_profile 浮层改为真页面(不再用 fixed 浮层,返回键交给页面栈)。表单沿用 mine 的通栏白块语言:标签左走 --muted、值右走 --ink,选中态用软橙底 + 实心橙描边;保存是本页唯一实心橙块
mine/addressedit(邮寄地址) 2026-10-04 由 comp_address 浮层改为真页面,列表 / 表单两态同页切换并同步导航栏标题。地址卡走白卡 + chevron 点击暗示,默认地址用图形 + 文字双通道传达状态;表单态取消走空心、保存走实心橙

DESIGN.md §5.1 已登记 mine/mine.wxss、ai/aichat.wxss 两页迁移完成;mine/profileedit.wxss、mine/addressedit.wxss 待补登。


二、待重构(11 页 / 19 个文件)

按"离规范的距离"分三档,建议从上往下推进——同档内先易后难。

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 系,改动最大)|7 页 + 1 组件/JS

页面 文件 动作
mine/about .wxss 按 §5.3 映射表整体换色
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 里的硬编码(易漏)

addressedit.wxml 的 switch 属性、profilelist.js 的 confirmColor 走的是属性值,读不到 CSS 变量,必须硬编码暖橙(mine/addressedit 迁移时已按此处理,health/profilelist 待处理)。


三、系统级收口(不属任何页面)

沿用 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「六、一句话检验」。