297 lines
24 KiB
Markdown
297 lines
24 KiB
Markdown
---
|
||
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 屏基准截图 + 与实现值的对照结论（间距、字号、发丝线、玻璃透明度、悬浮层避让），据此修正偏差 |