24 KiB
24 KiB
name, overview, design, todos
| name | overview | design | todos | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 小程序UI全量改版V2灰阶杂志风 | 把 miniprogram/ 现有 18 个页面的 UI 从旧 iOS 蓝白风格全量重写为 stitch_ai_ui_v2 的「零彩色灰阶杂志风 + 毛玻璃悬浮层」，保持全部业务逻辑与状态矩阵不变，并补齐上传页处理中三步进度等 v2 稿未覆盖的细节，交付真机可运行的小程序代码。 |
|
|
产品概述
把正在运行的「纸条 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 页各写一套视觉。
- 令牌层先行：重写
app.wxss，用page选择器固化灰阶、双字阶、发丝线、玻璃、圆角、缓动与排版工具类；全量删除旧彩色类（.tag-blue/.tag-green/.tag-red/.tag-orange/.tag-indigo/.btn-primary蓝底/.fab蓝底蓝阴影等，页面侧仅约 35 处引用），不留兼容别名，防止零彩色纪律被绕过。 - 组件层收敛重复：重写
custom-tab-bar（通栏 → 悬浮玻璃胶囊，选中态实心黑 + 顶部短横线）、components/navigation-bar（同标签名原地重写，页面 JSON 不用改，保留胶囊安全区计算与页面栈不足 switchTab 兜底）、components/clothes-card、components/empty-state；新增components/v2-overlay承载 Modal / ActionSheet / Toast 三类玻璃弹层。 - 页面层只改结构与样式：18 页 WXML/WXSS 按 v2 稿逐屏重排（下划线式分类条与分段、规格表、数字条、无缝拼图、悬浮玻璃操作条等），TS 仅在必要处改动：状态角标语义字段（如
_statusType: 'blue'→ 灰阶语义）、弹层调用替换、滚动收缩 handler 接入。 - 滚动收缩驱动方式：15 个页面用
<scroll-view>（wardrobe 还带 refresher 与上拉分页），3 个页面（login / notification-detail / upload）用页面级滚动。统一新增utils/nav.ts导出共享 handler，页面侧仅一行接入；scroll-view 页面加bindscroll="onNavScroll"，页面级滚动页面用onPageScroll。 - 上传处理过程补全：processing 态改为
Processingeyebrow + 衬线大标题「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 原型基准截图 + 静态自查 + 用户真机/开发者工具预览」，需在收尾时输出逐页验收清单。
架构设计
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）：
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 屏基准截图 + 与实现值的对照结论（间距、字号、发丝线、玻璃透明度、悬浮层避让），据此修正偏差