feat: ui update

2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
@@ -0,0 +1,297 @@
+---
+name: 小程序UI全量改版V2灰阶杂志风
+overview: 把 miniprogram/ 现有 18 个页面的 UI 从旧 iOS 蓝白风格全量重写为 stitch_ai_ui_v2 的「零彩色灰阶杂志风 + 毛玻璃悬浮层」，保持全部业务逻辑与状态矩阵不变，并补齐上传页处理中三步进度等 v2 稿未覆盖的细节，交付真机可运行的小程序代码。
+design:
+  styleKeywords:
+    - 零彩色灰阶
+    - 毛玻璃浮层
+    - 杂志大留白
+    - 衬线大标题
+    - 发丝线分隔
+    - 悬浮胶囊标签栏
+    - 买手店线稿质感
+    - 苹果级缓动
+  fontSystem:
+    fontFamily: Songti SC / PingFang SC
+    heading:
+      size: 68rpx
+      weight: 500
+    subheading:
+      size: 34rpx
+      weight: 600
+    body:
+      size: 30rpx
+      weight: 400
+  colorSystem:
+    primary:
+      - "#0A0A0A"
+      - "#1C1C1E"
+      - "#2C2C2E"
+    background:
+      - "#FFFFFF"
+      - "#F7F7F5"
+      - "#EFEFED"
+    text:
+      - "#0A0A0A"
+      - "#6E6E73"
+      - "#AEAEB2"
+    functional:
+      - "#C9C9CE"
+      - "#B9B9BE"
+      - "#E5E5E7"
+      - "#D2D2D7"
+todos:
+  - id: baseline-tokens
+    content: 用 [subagent:code-explorer] 盘点旧彩色类与原生弹窗引用，重写 app.wxss 令牌与 icons.wxss 图标
+    status: completed
+  - id: shell
+    content: 重写悬浮玻璃胶囊 tabBar 与「大标题+滚动收缩」导航，新增 utils/nav.ts 阈值 handler
+    status: completed
+    dependencies:
+      - baseline-tokens
+  - id: overlay
+    content: 新增 v2-overlay 玻璃弹层组件（Modal/ActionSheet/Toast）并替换原生确认与选择弹窗
+    status: completed
+    dependencies:
+      - baseline-tokens
+  - id: tab-pages
+    content: 重写 5 个 tab 页（衣橱/穿搭/运势/分享/我的）的视觉与信息层级
+    status: completed
+    dependencies:
+      - shell
+      - overlay
+  - id: detail-pages
+    content: 重写详情与表单页（衣物详情/穿搭详情/穿搭编辑/AI 推荐/通知两页）
+    status: completed
+    dependencies:
+      - shell
+      - overlay
+  - id: upload-flow
+    content: 补全上传处理过程三态，重写登录/分享三页/商城/订单
+    status: completed
+    dependencies:
+      - shell
+      - overlay
+  - id: qa
+    content: 用 [skill:playwright-cli] 逐屏对照 v2 基准走查，清理零彩色与类名残留并输出真机验收清单
+    status: completed
+    dependencies:
+      - tab-pages
+      - detail-pages
+      - upload-flow
+---
+
+## 产品概述
+
+把正在运行的「纸条 AI 衣橱」微信小程序（`miniprogram/`，当前仍是 iOS 蓝白彩色风）整体升级为 v2 设计语言：零彩色灰阶、毛玻璃浮层、杂志式大留白、衬线大标题。18 个页面全部覆盖，真机可运行，业务逻辑与在途改动保持不变。同时补全 v2 相对现有前端需要强化的部分，重点是衣物上传后的处理过程界面。
+
+## 核心功能
+
+- 全局设计系统替换：旧 iOS 彩色令牌（#007AFF 蓝等）→ v2 灰阶令牌、衬线/无衬线双字阶、1rpx 发丝线、玻璃层与统一缓动
+- 导航体系重构：进入页面为左对齐衬线大标题 + 大写英文 eyebrow，向下滚动收缩为居中玻璃小标题
+- 底部标签栏改为悬浮玻璃胶囊，未读徽标零彩色化（黑底白字数字胶囊）
+- 18 个页面按 v2 重排信息层级与视觉：登录、衣橱、穿搭、运势、分享、我的、上传、衣物详情、穿搭详情、穿搭编辑、AI 推荐、通知列表与详情、分享创建与两个分享详情、额度与会员、订单
+- 衣物处理过程界面补全：选图后显示用户实际图片 + 三段发丝线进度轨（排队中 / AI 抠图 / 智能分类，由 ProcessStatus 轮询驱动 step 0/1/2）+ 失败态与重新上传 / 手动填写 / 额度不足弹窗，并保持衣橱「AI 处理中」角标与衣物详情处理中态一致
+- 弹层视觉统一：居中玻璃卡、底部动作表、深色玻璃胶囊 Toast
+- 全状态覆盖：骨架屏 / 空态 / 列表 / 加载更多 / 没有更多了 / 失败 / 失效 / 只读
+
+## 视觉要求
+
+- 零彩色纪律：所有颜色取自灰阶令牌，唯一彩色例外是运势页幸运色的 8px 色点；旧状态色语义在零彩色下重建（进行中=实心黑胶囊，中性=浅灰胶囊，失效=降透明度或删除线，AI 来源=黑底白字描边胶囊，删除/取消=黑字下划线文字按钮）
+- 内容区像杂志内页：纯白纸面、超大留白、发丝线分组、大块内容保持直角，圆角只出现在胶囊/抽屉/小控件
+- 衣物图片是唯一主角；导航、底部标签、弹窗与抽屉毛玻璃悬浮在内容之上
+- 交互保持顺滑：统一缓动、按压缩放反馈、列表递进入场，滚动收缩不做逐帧重绘
+
+## 边界与约束
+
+- 只改 UI 层（WXML/WXSS + 必要的 TS 触点），不重构请求、轮询、支付、分享、日志等业务逻辑
+- 工作区存在未提交改动（穿搭详情、穿搭页、分享页、衣物详情、AI 推荐、config.ts、models.ts），必须以当前工作区版本为基线保留
+- 不做设计稿 HTML 的新增或修改，`stitch_ai_ui_v2/index.html` 仅作只读视觉基准
+
+## 技术栈
+
+- 微信小程序原生开发：WXML + WXSS + TypeScript（`strict` 严格模式），`renderer: webview`，无框架、无构建链、无组件库
+- 视觉事实来源：`stitch_ai_ui_v2/index.html`（单文件 375×812 交互原型，只读）
+- 单位换算规则：v2 的 px × 2 = rpx（`--pad:20px`→`40rpx`，`.display:34px`→`68rpx`，`.eyebrow:10px`→`20rpx`），0.5px 发丝线 → `1rpx`
+- 图标：沿用现有 `styles/icons.wxss` 的 CSS mask + `currentColor` 方案（天然单色，符合零彩色），把内联 SVG 的 `stroke-width` 由 2 调整为 1.5，并补齐 v2 用到的图标（返回 chevron-left、时钟、图片、锁、向上箭头等）
+- 字体：系统字体栈（衬线 `"Songti SC","STSong","Noto Serif SC",Georgia,serif`；无衬线 `-apple-system,BlinkMacSystemFont,"PingFang SC"`），禁用 `wx.loadFontFace`（需 https 外链）
+
+## 实现方案
+
+核心策略：**令牌层 → 组件层 → 页面层** 三段式。先把设计系统落到 `app.wxss` 与共享组件，再逐页重排 WXML/WXSS，TS 只做最小触点修改，避免 18 页各写一套视觉。
+
+1. **令牌层先行**：重写 `app.wxss`，用 `page` 选择器固化灰阶、双字阶、发丝线、玻璃、圆角、缓动与排版工具类；全量删除旧彩色类（`.tag-blue/.tag-green/.tag-red/.tag-orange/.tag-indigo/.btn-primary` 蓝底/`.fab` 蓝底蓝阴影等，页面侧仅约 35 处引用），**不留兼容别名**，防止零彩色纪律被绕过。
+2. **组件层收敛重复**：重写 `custom-tab-bar`（通栏 → 悬浮玻璃胶囊，选中态实心黑 + 顶部短横线）、`components/navigation-bar`（同标签名原地重写，页面 JSON 不用改，保留胶囊安全区计算与页面栈不足 switchTab 兜底）、`components/clothes-card`、`components/empty-state`；新增 `components/v2-overlay` 承载 Modal / ActionSheet / Toast 三类玻璃弹层。
+3. **页面层只改结构与样式**：18 页 WXML/WXSS 按 v2 稿逐屏重排（下划线式分类条与分段、规格表、数字条、无缝拼图、悬浮玻璃操作条等），TS 仅在必要处改动：状态角标语义字段（如 `_statusType: 'blue'` → 灰阶语义）、弹层调用替换、滚动收缩 handler 接入。
+4. **滚动收缩驱动方式**：15 个页面用 `<scroll-view>`（wardrobe 还带 refresher 与上拉分页），3 个页面（login / notification-detail / upload）用页面级滚动。统一新增 `utils/nav.ts` 导出共享 handler，页面侧仅一行接入；scroll-view 页面加 `bindscroll="onNavScroll"`，页面级滚动页面用 `onPageScroll`。
+5. **上传处理过程补全**：processing 态改为 `Processing` eyebrow + 衬线大标题「AI 正在识别你的衣物…」+ 灰字「通常需要 10 秒左右，请稍候」+ 用户实际选中图片（`imagePath`，极小圆角、居中留白）+ 三段发丝线进度轨（实心/空心圆点 + 1px 连线，`step` 由既有 `pollStatus` 驱动）；failed 态为「！」+ 衬线标题 + 双按钮；保留「衣物已上传」弹窗、额度不足弹窗与手动填写跳转。
+
+关键取舍：
+
+- **不引入组件库（tdesign 等）**：v2 需要精确控制字距、行高、发丝线与玻璃透明度，组件库反而增加覆盖成本与体积；原生 WXSS 即可满足。
+- **弹层不做全量替换**：`utils/request` 层统一的 `wx.showToast` 错误提示保留原生（非阻塞、改动风险高），仅把用户可见的确认/选择类弹窗（上传来源选择、上传完成、额度不足、删除确认、公开确认、取消分享、AI 生成确认、支付确认）迁移到 `v2-overlay`，回调分支与原逻辑一一对应。
+- **不做逐页独立样式**：所有页面只消费令牌与通用类，避免出现 18 份近似样式，降低后续维护成本。
+
+性能与可靠性：
+
+- 滚动监听只在跨越阈值（约 56px）时翻转布尔值 `setData`，绝不逐帧 setData；避免 `scroll-view` 高频事件造成卡顿
+- `backdrop-filter` 每屏限制 2 层（导航 + tabBar 或浮层），并给出 `rgba` 兜底底色，规避 Android 低版本不支持导致的透明穿帮
+- 保留 `lazy-load`、`wx:key`、`mergePaged` 分页合并、未读轮询 30s 节流与 tabBar 首帧安全 setData 机制
+- 页面切换动画用 CSS `animation` 实现，不重建 DOM，不增加运行时开销
+
+## 执行注意
+
+- **未提交改动保护**：`outfit-detail.wxml/.ts`、`outfit.wxml/.ts/.wxss`、`closet-share.wxml/.ts`、`closet-share-create.ts`、`clothes-detail.ts`、`ai-recommend.ts`、`outfit-share-detail.ts`、`types/models.ts`、`utils/config.ts` 的在途逻辑必须原样保留，以工作区当前版本为基线改写 WXML，禁止回退或覆盖。
+- **零彩色自查**：改完后用正则扫描 `miniprogram/**/*.wxss`，除幸运色色点与衣物线稿灰阶外，不允许出现任何有彩色 hex / rgba 彩色通道。
+- **类名一致性**：WXML 引用的每个类都要在 WXSS（页面或全局）中有定义，避免残留 `.card/.tag-*` 等已删除类造成样式丢失。
+- **悬浮层避让**：悬浮 tabBar 与悬浮操作条要求内容区 `padding-bottom` 预留（≥200rpx），避免最后一行内容被遮挡；滚动收缩的导航下内容顶部要预留状态栏 + 导航高度。
+- **组件样式隔离**：`clothes-card`/`empty-state` 已是 `apply-shared`，可继续复用全局令牌与通用类；新增组件若需复用全局类，同样在 `.json` 声明 `styleIsolation: apply-shared`。
+- **日志规范**：沿用 `utils/logger`，本次不新增噪声日志；弹层与滚动逻辑异常只走 `logger.warn`。
+- **验收方式**：Linux 环境无法启动微信开发者工具，视觉验收依赖「v2 原型基准截图 + 静态自查 + 用户真机/开发者工具预览」，需在收尾时输出逐页验收清单。
+
+## 架构设计
+
+```mermaid
+graph TD
+  A["令牌层 app.wxss：灰阶 / 双字阶 / 发丝线 / 玻璃 / 圆角 / 缓动"] --> B["图标层 styles/icons.wxss：1.5px 描边 mask 图标"]
+  A --> C["壳层：custom-tab-bar 悬浮胶囊 + navigation-bar 大标题收缩 + utils/nav.ts 滚动阈值"]
+  A --> D["通用组件层：clothes-card / empty-state / v2-overlay(Modal·ActionSheet·Toast)"]
+  C --> E["页面层：5 个 tab 页 / 详情页 / 表单流程页 / 分享页 / 交易页 / 登录页"]
+  D --> E
+  E --> F["业务逻辑层：pages/*/*.ts 保持不变（请求 / 轮询 / 支付 / 分享 / 日志）"]
+```
+
+## 目录结构
+
+```
+/root/zt-closet-wxmini-frontend/miniprogram/
+├── app.wxss                                   # [MODIFY] 全量替换为 v2 令牌与通用类：灰阶墨阶/纸面/发丝线/玻璃/深色块、
+│                                              #   衬线+无衬线双字阶、.eyebrow/.display/.t-*/.num/.hair/.pad 工具类、
+│                                              #   .btn(ink/ghost/text)/.tag(零彩色变体)/.chip/.skeleton/.seg/.spec/.statbar/.tile/.empty、
+│                                              #   悬浮层与安全区；删除全部旧彩色类与旧卡片投影
+├── app.json                                   # [MODIFY] window.backgroundColor → #FFFFFF；tabBar color #AEAEB2 /
+│                                              #   selectedColor #0A0A0A / backgroundColor #FFFFFF（custom tabBar 的兜底色）
+├── styles/icons.wxss                          # [MODIFY] 26 个 mask 图标描边 2 → 1.5；补齐 chevron-left / clock / image /
+│                                              #   lock / arrow-up-right / star-half 等 v2 用到的图标；尺寸档位对齐 v2（21px→42rpx 等）
+├── utils/nav.ts                               # [NEW] 导出 onNavScroll / onPageScrollNav 共享 handler：按阈值（56px）翻转
+│                                              #   navScrolled 布尔值，跨阈值才 setData；供 18 页一行接入
+├── custom-tab-bar/index.wxml                  # [MODIFY] 通栏 → 悬浮玻璃胶囊结构；选中态实心黑 + 顶部短横线；徽标零彩色
+├── custom-tab-bar/index.wxss                  # [MODIFY] 左右各 32rpx、圆角 56rpx、距底 24rpx + env(safe-area-inset-bottom)、
+│                                              #   rgba(255,255,255,.72) + backdrop-filter + 1rpx 发丝边；.tab-badge 黑底白字数字胶囊
+├── custom-tab-bar/index.ts                    # [KEEP] 未读轮询节流、首帧安全 setData、matchRoute 选中态逻辑不动
+├── components/navigation-bar/                 # [MODIFY] 原地重写（标签名不变，页面 JSON 无需改）
+│   ├── navigation-bar.wxml                    #   结构：状态栏占位 + 返回按钮 + 右侧操作槽；大标题态在页面内容顶部渲染
+│   ├── navigation-bar.wxss                    #   非滚动：透明无边框；滚动后：玻璃底 + 居中 30rpx 小标题 + 1rpx 发丝下边
+│   ├── navigation-bar.ts                      #   保留 getMenuButtonBoundingClientRect 安全区计算与页面栈不足 switchTab 兜底；
+│   │                                          #   新增 large / eyebrow / scrolled / actionText 属性
+│   └── navigation-bar.json                    # [MODIFY] 如需复用全局 .icon/.eyebrow 则声明 styleIsolation: apply-shared
+├── components/clothes-card/                   # [MODIFY] 去卡片容器与描边，图下两行（衬线品名 + 灰色属性行）；
+│   └── (wxml/wxss)                            #   状态角标改零彩色（进行中=实心黑胶囊，其他=浅灰胶囊）；勾选圈改细描边黑圈
+├── components/empty-state/                    # [MODIFY] 细描边线稿图标 + 衬线标题 + 灰字描述 + 黑胶囊/描边双按钮
+│   └── (wxml/wxss)
+├── components/v2-overlay/                     # [NEW] 统一玻璃弹层组件
+│   ├── index.wxml / index.wxss                #   modal 居中玻璃卡 / actionsheet 底部动作表（含抓手）/ toast 深色玻璃胶囊
+│   ├── index.ts                               #   properties: type/title/content/buttons/visible；methods: open/close；
+│   │                                          #   triggerEvent('confirm'|'cancel'|'select')，与原生回调分支一一对应
+│   └── index.json                             #   styleIsolation: apply-shared
+└── pages/                                     # 18 页：WXML/WXSS 重排 + 必要 TS 触点
+    ├── login/                                 # [MODIFY] 全屏纯白 + 居中线稿 Logo + 衬线品牌名 + 灰字 slogan + 底部实心黑胶囊；
+    │                                          #   新手礼包改居中玻璃卡 + 发丝线权益列表
+    ├── wardrobe/                              # [MODIFY] 衬线大标题 + 右侧统计行；分类由横滑胶囊改下划线式分类条（保留 categories
+    │                                          #   数据与选中绑定）；网格去卡片容器；FAB 改黑底白玻璃圆钮；
+    │                                          #   ts 仅改 _statusType 语义（'blue' → 零彩色变体）
+    ├── outfit/                                # [MODIFY] 分段改下划线式文字分段；「创建穿搭」「AI 推荐」合并为 tabBar 上方
+    │                                          #   悬浮玻璃双按钮条；社区卡改瀑布流编辑排版
+    ├── horoscope/                             # [MODIFY] 巨大衬线星座名 + 超大衬线数字 + 5 个细描边星；三项评分改横向发丝线刻度尺；
+    │                                          #   长文本改衬线引文排版；幸运色/数字两栏发丝线小格（幸运色色点保留）
+    ├── closet-share/                          # [MODIFY] 下划线分段；分享卡改横向条目（左 72×72 灰度拼图 + 右衬线标题/灰字有效期）；
+    │                                          #   失效项降至 40% 透明度 + 描边角标
+    ├── profile/                               # [MODIFY] 72px 头像 + 衬线昵称 + 灰字副信息；额度概览改四栏发丝线数字条；
+    │                                          #   功能列表改纯发丝线分组列表（行高 104rpx + 灰色值 + 极细箭头）
+    ├── upload/                                # [MODIFY] 三态重写：idle 巨大虚线发丝线方框 + 细描边相机 + 衬线引导语；
+    │                                          #   processing 显示实际图片 + 三段发丝线进度轨（排队中/AI 抠图/智能分类）；
+    │                                          #   failed 极简「！」+ 衬线标题 + 双按钮；ts 接入 v2-overlay 替换弹窗
+    ├── clothes-detail/                        # [MODIFY] 属性改规格表（左 13px 灰标签 / 右 15px 黑值 + 发丝线行，分组用中英文 eyebrow）；
+    │                                          #   量化评分改细描边方点；适用场合改描边胶囊；保留处理中/失败/失效/只读四态
+    ├── outfit-detail/                         # [MODIFY] 无缝白缝拼图封面 + 衬线大标题 + eyebrow 来源标签 + 发丝线标签行 +
+    │                                          #   横滑单品缩略图；底部改悬浮玻璃胶囊操作条；保留属主/访客双角色与在途逻辑
+    ├── outfit-edit/                           # [MODIFY] 表单视图与选择衣物视图双视图重排；选择态改细描边勾选 + 黑胶囊计数条
+    ├── ai-recommend/                          # [MODIFY] 生成态改呼吸感细描边圆环 + 衬线文案；结果态改拼图卡 + 横滑单品；ts 替换确认弹窗
+    ├── notification/                          # [MODIFY] 未读用左侧 2.5px 黑竖条 + 黑字标题，已读降为 ink-3；3 态覆盖
+    ├── notification-detail/                   # [MODIFY] 衬线标题 + eyebrow 时间 + 发丝线正文排版
+    ├── closet-share-create/                   # [MODIFY] 配置 / 选择衣物 / 成功预览三视图重排；底部实心黑胶囊按钮
+    ├── closet-share-detail/                   # [MODIFY] 分享者行 + 无缝拼图 + 只读网格 + 悬浮玻璃「分享给好友」黑胶囊；保留需登录/失效态
+    ├── outfit-share-detail/                   # [MODIFY] 同上结构，保留双角色与失效态
+    ├── mall/                                  # [MODIFY] 会员卡用全稿唯一深色块（--block）；额度改四栏数字条；商品行左线稿图标 /
+    │                                          #   中名称描述 / 右 tabular 价格 + 黑胶囊「购买」；ts 替换支付确认弹窗
+    └── order/                                 # [MODIFY] 订单状态改描边胶囊（文案不依赖颜色）；待支付倒计时改 tabular 衬线数字；3 态覆盖
+```
+
+## 关键代码结构
+
+`app.wxss` 的令牌块是全部 18 页与所有组件的共享契约（rpx 已按 px×2 换算，`page` 选择器替代 `:root`）：
+
+```css
+page {
+  /* 墨阶 */
+  --ink: #0A0A0A; --ink-2: #6E6E73; --ink-3: #AEAEB2; --ink-4: #C9C9CE; --art: #B9B9BE;
+  /* 纸面 */
+  --paper: #FFFFFF; --paper-2: #F7F7F5; --paper-3: #EFEFED;
+  /* 发丝线与填充 */
+  --hairline: rgba(0,0,0,.08); --hairline-2: rgba(0,0,0,.14);
+  --fill: rgba(120,120,128,.07); --fill-2: rgba(120,120,128,.13);
+  /* 深色块（全稿唯一视觉锚点：商城会员卡） */
+  --block: #1C1C1E; --block-2: #2C2C2E;
+  /* 玻璃 */
+  --glass: rgba(255,255,255,.72); --glass-2: rgba(255,255,255,.86); --glass-dark: rgba(28,28,30,.82);
+  /* 字族与缓动 */
+  --serif: "Songti SC","STSong","Noto Serif SC",Georgia,serif;
+  --sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
+  --ease: cubic-bezier(.32,.72,0,1);
+  /* 圆角与度量 */
+  --r-img: 8rpx; --r-ctrl: 20rpx; --r-sheet: 40rpx; --r-pill: 999rpx;
+  --pad: 40rpx; --nav-h: 88rpx; --tab-h: 120rpx;
+}
+```
+
+## 设计风格
+
+沿用 v2 稿的「安静的展厅」：把衣橱当成一间高级买手店，内容区是一张纯白纸张，衣物图片是唯一主角，所有 UI 元素退到发丝线级别；导航、底部标签、弹窗做成悬浮在纸面上的毛玻璃层。零彩色，靠字重对比、留白尺度、发丝线与玻璃透明度建立秩序。
+
+## 布局与信息架构
+
+- 页面左右边距 40rpx；区块垂直间距 64rpx，块内 32rpx；正文行高 1.6~1.75；图文之间永远留白
+- 分组用 1rpx 发丝线而非卡片描边/投影；大块内容保持直角，圆角只出现在胶囊、抽屉与小控件
+- 导航：进入页面为左对齐衬线大标题 + 大写英文 eyebrow，向下滚动收缩为居中玻璃小标题
+- 底部标签：悬浮玻璃胶囊（左右各 32rpx、圆角 56rpx、距底 24rpx + 安全区），选中态实心黑 + 顶部短横线
+- 分类与分段：由横滑胶囊改为下划线式极简条，选中项黑字加粗 + 2rpx 黑色下划线
+
+## 页面要点
+
+- 五个 tab 页：衣橱为衬线大标题 + 统计行 + 下划线分类条 + 无容器网格；穿搭为下划线分段 + tabBar 上方悬浮玻璃双按钮条；运势为杂志内页（巨大衬线星座名、超大数字、发丝线刻度尺、衬线引文、两栏小格）；分享为横向条目卡 + 失效降透明；我的为四栏数字条 + 纯发丝线分组列表
+- 详情页：规格表（左灰标签 / 右黑值）+ 细描边方点评分 + 描边胶囊标签 + 无缝拼图封面 + 悬浮玻璃底部操作条
+- 表单流程页：上传 idle 为巨大虚线方框 + 细描边相机；processing 为实际图片 + 三段发丝线进度轨（实心/空心圆点 + 1px 连线）；failed 为极简「！」+ 衬线标题 + 双按钮；穿搭编辑为表单与选择双视图
+- 分享与交易：分享创建三视图 + 两个分享详情只读网格；额度与会员用全稿唯一深色块 + 四栏数字条 + 黑胶囊购买；订单用描边状态胶囊 + tabular 衬线倒计时
+- 登录：全屏纯白 + 居中线稿 Logo + 衬线品牌名 + 灰字 slogan + 底部实心黑胶囊按钮，新手礼包为居中玻璃卡
+
+## 交互与动效
+
+统一缓动 cubic-bezier(.32,.72,0,1)，时长 320~420ms；按压 scale(.97) + 透明度 0.6；列表入场 40ms 递增；页面切换右滑入 + 轻微缩放淡入；弹层自底部滑入带轻微回弹；四类弹层（居中玻璃卡 / 底部抽屉 / 动作表 / 深色玻璃 Toast）统一由 v2-overlay 管理，保证可开关且不遮挡导航与标签栏。
+
+## 响应式与适配
+
+以 375pt 为基准，全量使用 rpx 自适应；顶部状态栏与微信胶囊由 navigation-bar 组件按 `wx.getMenuButtonBoundingClientRect()` 动态计算；底部安全区用 `env(safe-area-inset-bottom)`；悬浮层下内容预留 padding，避免最后一行被遮挡。
+
+## Agent Extensions
+
+### SubAgent
+
+- **code-explorer**
+- Purpose: 改造前一次性盘点旧彩色类与原生弹窗的全部引用点、18 个页面的区块与状态矩阵基线，形成逐页改造清单，避免漏改导致样式丢失或弹窗语义错位
+- Expected outcome: 一份可逐条勾选的清单：旧彩色类引用位置（约 35 处）、`wx.showModal/showActionSheet` 调用点、每页 WXML 区块与状态分支、各页滚动容器类型
+
+### Skill
+
+- **playwright-cli**
+- Purpose: 用无头浏览器打开 `stitch_ai_ui_v2/index.html`，逐屏截图存档为视觉基准，并在收尾阶段对关键屏做尺寸、颜色、字阶的像素级对照走查
+- Expected outcome: 18 屏基准截图 + 与实现值的对照结论（间距、字号、发丝线、玻璃透明度、悬浮层避让），据此修正偏差