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,270 @@
+---
+name: 纸条AI衣橱小程序UI全量重构设计稿
+overview: 为「纸条AI衣橱」微信小程序（18 个页面）重新设计一套「杂志风纯白留白 + 毛玻璃悬浮层、纯黑白灰零彩色」的苹果式简约高级 UI，并以单个自包含 HTML 文件交付可点击跳转、tab 可切换、弹窗可开关的高保真交互原型，完整覆盖现有全部功能与全部状态。
+design:
+  architecture:
+    framework: html
+  styleKeywords:
+    - 杂志编辑部风
+    - 毛玻璃浮层
+    - 零彩色灰阶
+    - 大留白
+    - 发丝线分隔
+    - 衬线大标题
+    - 悬浮胶囊标签栏
+    - 苹果级缓动
+    - 买手店线稿质感
+  fontSystem:
+    fontFamily: Songti SC / PingFang SC
+    heading:
+      size: 34px
+      weight: 500
+    subheading:
+      size: 17px
+      weight: 500
+    body:
+      size: 15px
+      weight: 400
+  colorSystem:
+    primary:
+      - "#0A0A0A"
+      - "#1C1C1E"
+      - "#2C2C2E"
+    background:
+      - "#FFFFFF"
+      - "#F7F7F5"
+      - "#EFEFED"
+    text:
+      - "#0A0A0A"
+      - "#6E6E73"
+      - "#AEAEB2"
+    functional:
+      - "#E5E5E7"
+      - "#D2D2D7"
+      - "#0A0A0A"
+      - "#AEAEB2"
+todos:
+  - id: baseline
+    content: 用 [subagent:code-explorer] 核对 18 页区块、状态矩阵与微文案，产出页面清单基线
+    status: completed
+  - id: design-system
+    content: 建立零彩色设计令牌、双字阶、设备壳、毛玻璃浮层与 SVG 图标衣物线稿组件库
+    status: completed
+    dependencies:
+      - baseline
+  - id: interaction-core
+    content: 实现栈式路由、标签与分段切换、状态切换器、四类弹层控制器与左侧索引
+    status: completed
+    dependencies:
+      - design-system
+  - id: flow-closet
+    content: 完成登录、衣橱网格、上传三态与衣物详情四态页面
+    status: completed
+    dependencies:
+      - interaction-core
+  - id: flow-outfit
+    content: 完成穿搭三段式、穿搭详情、穿搭编辑双视图与 AI 推荐页
+    status: completed
+    dependencies:
+      - interaction-core
+  - id: flow-share
+    content: 完成运势内页、分享列表、衣柜分享创建三视图与两个分享详情
+    status: completed
+    dependencies:
+      - interaction-core
+  - id: flow-profile
+    content: 完成我的页、通知列表与通知详情、编辑资料底部抽屉
+    status: completed
+    dependencies:
+      - interaction-core
+  - id: flow-commerce
+    content: 完成商城双视图与订单页，含支付确认弹窗与待支付倒计时
+    status: completed
+    dependencies:
+      - interaction-core
+  - id: spec-and-qa
+    content: 补设计规范页，用 [skill:playwright-cli] 逐屏截图走查全链路与状态矩阵
+    status: completed
+    dependencies:
+      - flow-closet
+      - flow-outfit
+      - flow-share
+      - flow-profile
+      - flow-commerce
+  - id: deploy-preview
+    content: 用 [integration:cloudStudio] 部署原型，产出手机可预览链接
+    status: completed
+    dependencies:
+      - spec-and-qa
+---
+
+## 产品概述
+
+「纸条 AI 衣橱」是一款智能衣橱与穿搭小程序，覆盖衣物管理、AI 穿搭推荐、每日运势、好友分享、会员额度与订单等完整业务。本次对全部 18 个页面做整体 UI 重构，产出可点击走通全流程的单文件交互原型，整体基调为「苹果简约高级」。
+
+## 核心功能
+
+- 登录与新手礼包引导
+- 衣橱：分类浏览、拍照上传衣物（含 AI 识别进度）、衣物详情与 15 项属性编辑
+- 穿搭：我的穿搭 / 已收藏 / 社区三段浏览，创建与编辑穿搭，AI 推荐生成与保存
+- 运势：星座今日运势、四项评分、幸运色与幸运数字
+- 分享：衣柜分享与穿搭分享的创建、查看、只读浏览与失效态
+- 我的：资料与额度概览、通知、商城会员与额度包、订单管理
+- 全局：5 个底部标签、骨架屏 / 空态 / 异常态、弹窗与底部抽屉、未读红点
+
+## 视觉要求
+
+- 采用「浅色为底 + 玻璃浮层」：内容区像杂志内页，纯白纸面、衬线大标题、超大留白、发丝分隔线，衣物图片是唯一主角；导航栏、底部标签、弹窗与抽屉用毛玻璃悬浮在内容之上
+- 零彩色：完全用黑白灰层次表达信息与状态，唯一色彩来自衣物本身与幸运色
+- 页面间可真实点击跳转、标签可切换、弹窗可开关，能像真机一样走完整流程
+- 重构不只是换皮，需按产品设计逻辑重排信息架构、层级与交互反馈
+
+## 技术栈
+
+- 交付物：单个自包含 HTML 文件，路径 `/root/zt-closet-wxmini-frontend/stitch_ai_ui_v2/index.html`（新建目录，不覆盖旧 `stitch_ai_ui/`）
+- 纯原生 HTML5 + CSS3（CSS 自定义属性设计令牌、Grid/Flex、backdrop-filter、clip-path）+ 原生 ES6 JavaScript，无框架、无构建、无包管理
+- 零外部依赖：不使用 Tailwind CDN / FontAwesome / Google Fonts（旧稿的致命问题：离线打开即掉样式），图标全部用内联 `<svg><symbol>` sprite，字体走系统字体栈
+- 图片占位：内联 SVG 灰度线稿（衬衫 / 裤装 / 连衣裙 / 外套 / 鞋 / 包 / 配饰剪影），既离线可用又天然契合零彩色调性
+- 验证：用 playwright-cli 以 `file://` 打开原型，逐屏截图并点击走查
+
+## 实现方案
+
+核心策略：**一套设计令牌 + 一个页面容器 + 一个路由栈 + 一个状态机**，让 18 屏共享同一套视觉与交互内核，避免逐页重造。
+
+1. **设计系统先行**：用 CSS 变量固化零彩色灰阶、衬线/无衬线双字阶、间距刻度、发丝线、玻璃材质、软阴影与统一缓动曲线。所有页面只消费令牌，禁止硬编码颜色。
+2. **页面容器**：18 屏写成 `<section class="screen" data-screen="wardrobe">`，默认 `display:none`，由路由控制显隐；5 个 tab 屏共享同一个底部玻璃 tabBar（提到 screen 之外，随 tab 路由显隐），与真实小程序 `custom-tab-bar` 的共享方式一致。
+3. **栈式路由**：`navigate(screen, params)` / `back()`，维护页面栈以支持真实返回；`params` 驱动同一屏的变体（`owner=1|0` 决定穿搭详情是属主态还是访客态、`readonly=true` 决定衣物详情是否隐藏编辑删除、`tab=flow` 决定商城进入额度明细视图）。
+4. **状态机**：每屏内用 `data-state`（`skeleton | empty | list | loading | error`）切换，右侧状态切换器直接改这个属性，一套标记覆盖完整状态矩阵，无需为每个状态写重复结构。
+5. **统一弹层**：四类 —— Modal（居中玻璃卡）、Sheet（底部抽屉带抓手）、ActionSheet（iOS 底部动作表）、Toast（深色玻璃胶囊），全部由同一 overlay 控制器管理，保证「可开关」。
+6. **真实跳转**：所有可点元素声明 `data-nav="clothes-detail"` + `data-params='{"uuid":"c1"}'`，在 `#app` 上做事件委托统一处理，保证能像真机一样点着走。
+
+关键取舍：
+
+- **不引 Tailwind CDN**：离线可用 + 杂志风排版需要精确控制字距、行高、发丝线、玻璃透明度，原子类反而增加噪音。代价是 CSS 体积更大 → 用「令牌 + 语义类」收敛，禁止逐页堆裸样式。
+- **不引字体 CDN**：中文衬线用 `"Songti SC", "STSong", "Noto Serif SC", serif` 回退栈，拉丁回退 `Georgia`，保证任何环境打开都不掉字。
+- **占位图用 SVG 线稿而非图床外链**：后端 `processed_image` 在原型中取不到，外链图会离线失效且引入杂色；灰度线稿的代价是不如实拍图真实，通过大量留白与统一构图补足质感。
+- **单文件而非多文件**：用户明确要「单文件可点击交互原型」。代价是文件较大 → 用分节注释 + 页面名前缀类名组织。
+
+性能与可靠性：
+
+- 单文件无网络请求，首屏即渲染，无加载抖动。`backdrop-filter` 是唯一较重属性 → 限制每屏玻璃层数量（导航栏 + 底部栏/浮层，最多 2 层），避免大面积模糊导致滚动掉帧。
+- 事件委托统一在 `#app` 上，避免 18 屏 × N 元素逐个绑定监听。
+- 页面切换只切 `display`，不重建 DOM，保证跳转瞬时响应。
+
+## 架构设计
+
+```mermaid
+graph TD
+  A["原型外壳：左索引 + iPhone 设备框 + 右状态切换器"] --> B["路由层：navigate / back / params 页面栈"]
+  B --> C["页面层：18 个 section.screen + data-state 状态机"]
+  B --> D["浮层层：tabBar / Modal / Sheet / ActionSheet / Toast"]
+  C --> E["组件层：按钮 / 分段 / 胶囊 / 列表行 / 规格行 / 卡片 / 骨架 / 空态"]
+  D --> E
+  E --> F["令牌层：零彩色灰阶 / 双字阶 / 间距 / 发丝线 / 玻璃 / 阴影 / 缓动"]
+  C --> G["素材层：内联 SVG symbol 图标 + 衣物线稿占位插画"]
+```
+
+## 目录结构
+
+```
+/root/zt-closet-wxmini-frontend/
+├── stitch_ai_ui_v2/                          # [NEW] 新版设计稿目录（旧 stitch_ai_ui/ 原样保留）
+│   └── index.html                            # [NEW] 单文件可点击交互原型，内部按以下分节组织：
+│       #  <style>
+│       #   §1 设计令牌：零彩色灰阶 / 双字阶 / 间距刻度 / 圆角 / 发丝线 / 玻璃 / 阴影 / 缓动
+│       #   §2 基础层：reset、排版类（.display-serif / .eyebrow / .num）、发丝线工具类
+│       #   §3 外壳层：工作台背景、左索引面板、iPhone 375×812 设备框、状态栏、微信胶囊、安全区
+│       #   §4 玻璃层：.glass-nav / .glass-tabbar / .glass-sheet / .glass-modal / .toast
+│       #   §5 组件层：按钮（实心黑/描边/文字）、分段控件、胶囊标签、列表行、规格行、统计数字条、评分点阵、进度轨、衣物卡、穿搭拼图卡、分享卡、订单卡、骨架屏、空态、徽标
+│       #   §6 页面层：18 屏专属样式，类名带页面前缀（.wd- / .of- / .cd- / .hs- / .cs- / .pf- / .up- / .od- / .ai- / .nt- / .ml- / .lg-）
+│       #  <body>
+│       #   左索引面板：分组（登录 / 核心 Tab / 详情 / 表单流程 / 分享 / 交易 / 规范）
+│       #   设备框 → <main id="app"> 内含 18 个 <section class="screen">
+│       #   共享浮层容器：tabBar + overlay（Modal / Sheet / ActionSheet / Toast）
+│       #   右状态切换器：skeleton / empty / list / error / loading
+│       #   底部：色板与字阶规范展示
+│       #  <script>
+│       #   §A 数据：18 页 mock 数据（衣物、穿搭、运势、分享、商品、订单、通知）
+│       #   §B 路由：navigate / back / 页面栈 / params 分发
+│       #   §C 状态机：setState(screen, state)
+│       #   §D 弹层控制器：openModal / openSheet / openActionSheet / toast
+│       #   §E 交互：事件委托、tab 切换、分段控件、多选计数、点赞收藏乐观更新、倒计时
+│       #   §F 引导：默认进入衣橱屏
+└── miniprogram/                              # 只读参考，本次不修改任何文件
+    ├── app.json                              # 参考：18 页注册 + 5 tab 配置
+    ├── app.wxss                              # 参考：旧设计令牌（本次全量替换的依据）
+    ├── styles/icons.wxss                     # 参考：24 个图标的语义与命名
+    ├── types/models.ts                       # 参考：全部实体字段名
+    ├── custom-tab-bar/                       # 参考：tab 结构 + 未读红点规则
+    ├── components/                           # 参考：navigation-bar / clothes-card / empty-state
+    └── pages/*/*.wxml                        # 参考：每页区块结构与微文案（唯一事实来源）
+```
+
+## 执行注意
+
+- **字段与文案以 `.wxml` / `.ts` 为唯一事实来源**（如「共 N 件 · 上传额度剩余 N 次」「AI 正在识别你的衣物…通常需要 10 秒左右」），不要凭印象造文案。
+- **零彩色纪律**：所有颜色只能取自令牌（`--paper` / `--paper-2` / `--ink` / `--ink-2` / `--ink-3` / `--hairline` / `--fill` / `--glass`），禁止出现任何有彩色 hex。唯一例外是幸运色的 8px 色点（业务数据）与衣物线稿本身的灰阶。
+- **旧状态色语义需在零彩色下重建**：进行中/强调 = 实心黑胶囊；中性 = 浅灰胶囊；失效/已读 = 降透明度或删除线；AI 来源 = 黑底白字描边胶囊；删除/取消 = 黑字下划线文字按钮，不依赖红色。
+- **小程序真实感三件套**：微信右上角胶囊（87×32pt）、状态栏 44px、底部安全区 `env(safe-area-inset-bottom)`，每一屏都必须体现。
+- **不修改 `miniprogram/` 下任何文件，不覆盖 `stitch_ai_ui/`**；本次只新增 `stitch_ai_ui_v2/index.html`。
+- 玻璃层下方滚动内容需预留 padding，避免内容被悬浮导航/底栏遮挡。
+
+## 设计主题
+
+「安静的展厅」—— 把衣橱当成一间高级买手店：内容区是一张纯白纸张，衣物图片是唯一主角，所有 UI 元素退到发丝线级别；导航、底部标签、弹窗做成一层悬浮在纸面上的毛玻璃。零彩色，靠字重对比、留白尺度、发丝线、灰阶层次与玻璃透明度建立秩序与高级感。
+
+## 视觉语言
+
+- **布局**：页面左右边距 20px；区块垂直间距 32px，块内 16px；正文行高 1.6~1.75；图片与文字之间永远留白，绝不贴边。卡片取消描边与投影，改用留白 + 发丝线分组，仅极少数关键卡保留极软阴影。
+- **双字阶**：衬线（Songti SC / STSong / Noto Serif SC / Georgia）用于页面主标题、数字大数与穿搭名，字重 400~500、负字距 -0.01em；无衬线（-apple-system / PingFang SC）用于正文、按钮、标签与导航。10~11px 大写英文 eyebrow 标签（`WARDROBE` / `AI STYLIST`），字距 0.16em、`--ink-3` 灰，是最关键的「高级感」装置。
+- **发丝线替代边框**：所有分隔用 0.5px `rgba(0,0,0,.08)`，圆角只在小尺寸控件上出现（胶囊、抽屉），大块内容保持直角，强化杂志感。
+- **玻璃材质**：`rgba(255,255,255,.72)` + `backdrop-filter: saturate(180%) blur(20px)` + 0.5px 发丝边。底部标签用悬浮胶囊（左右各留 16px、圆角 28px、距底 12px + 安全区），而非通栏。
+- **动效**：统一缓动 `cubic-bezier(.32,.72,0,1)`，时长 320~420ms。页面切换从右滑入 + 轻微缩放淡入；列表入场 40ms 递增 stagger；按压 `scale(.97)` + 透明度 0.6；弹层自底部滑入并带轻微回弹。
+- **图片处理**：衣物图统一用内联 SVG 灰度线稿，1:1 或 3:4 画幅，居中留白 12%，无边框、仅 4px 极小圆角，像买手店目录里的商品线稿；穿搭拼图封面用 1px 白缝的无缝网格。
+
+## 色彩系统（零彩色灰阶语义）
+
+`--ink` #0A0A0A（主文字 / 主按钮 / 选中态）→ `--ink-2` #6E6E73（次要文字 / 描述）→ `--ink-3` #AEAEB2（弱化 / 占位 / 已读）→ `--hairline` rgba(0,0,0,.08)（分隔）→ `--paper-2` #F7F7F5（页面底）→ `--paper` #FFFFFF（内容纸面）。唯一深色块用于商城会员卡（#1C1C1E），作为全稿视觉锚点。
+
+## 导航与信息架构重构
+
+全局自定义导航改为 Apple 式行为：进入页面时是 34px 左对齐衬线大标题 + eyebrow 小标签，向下滚动时收缩为居中玻璃小标题 —— 这是最大的高级感来源，也让每个 tab 页有杂志封面感。tabBar 从通栏改为悬浮玻璃胶囊，图标改 1.5px 细线性描边，选中态用实心黑 + 顶部 3px 短横线，不再使用彩色。
+
+## 逐页重构要点
+
+- **登录**：全屏纯白 + 居中线稿 Logo + 衬线品牌名「纸条 AI 衣橱」+ 灰字 slogan + 底部实心黑胶囊按钮；新手礼包改为居中玻璃卡 + 发丝线权益列表。
+- **衣橱**：大标题 + 右侧统计；分类由横滑胶囊改为下划线式极简分类条；网格去卡片容器，图下两行（衬线品名 + 灰色属性行）；FAB 改黑底白玻璃圆钮。
+- **穿搭**：分段改下划线式文字分段；取消独立入口按钮行，把「创建穿搭」「AI 推荐」合并为 tabBar 上方的悬浮玻璃双按钮条；社区卡改瀑布流编辑排版，meta 用细描边图标 + tabular 数字。
+- **运势**：做成杂志内页 —— 巨大衬线星座名；综合运势用超大衬线数字 + 5 个细描边星；三项评分改横向发丝线刻度尺；长文本用衬线引文式排版；幸运色/数字改两栏发丝线小格。
+- **分享**：下划线分段；分享卡改横向条目（左 72×72 灰度拼图 + 右衬线标题/灰字有效期）；失效项降至 40% 透明度 + 描边小角标；新建分享移到导航栏右侧「＋」。
+- **我的**：大号头像 72px + 衬线昵称 + 一行灰字副信息；额度概览改四栏发丝线分隔数字条（大号 tabular 数字 + 10px eyebrow）；功能列表改纯发丝线分组列表（行高 52px、右侧灰色值 + 极细箭头）；会员权益用描边胶囊。
+- **上传**：idle 为巨大虚线发丝线方框 + 中央细描边相机 + 衬线引导语；processing 用三段发丝线进度轨（实心/空心圆点 + 1px 连线）；failed 用极简「！」+ 衬线标题 + 双按钮。
+- **衣物详情**：属性展示改为规格表 —— 左标签（13px 灰）/ 右值（15px 黑）的发丝线行，分组标题用「中文 / 大写英文」eyebrow；量化评分改 5 个细描边方点；适用场合用无底色描边胶囊。
+- **穿搭详情 / AI 推荐 / 穿搭编辑**：封面用无缝白缝网格；信息区为衬线大标题 + eyebrow 来源标签 + 发丝线标签行 + 描述 + 横滑单品（80×80 无边框缩略图）；底部操作改悬浮玻璃胶囊条。AI 生成态用呼吸感细描边圆环 + 衬线文案替代 spinner。
+- **商城 / 订单 / 通知 / 分享详情**：商城会员卡用唯一深色块，额度改四栏数字条，商品行左线稿图标 / 中名称描述 / 右 tabular 价格 + 黑胶囊「购买」；订单状态用描边胶囊 + 文案不依赖颜色，倒计时用 tabular 衬线数字；通知未读用左侧 4px 黑竖条 + 黑字标题；分享详情为分享者行 + 无缝拼图 + 只读网格 + 悬浮玻璃「分享给好友」黑胶囊。
+
+## 交互与适配
+
+- 所有列表覆盖「骨架屏 → 空态 → 正常列表 → 加载更多 → 没有更多了」；表单覆盖「默认 / 校验置灰 / 提交中 / 成功」；详情覆盖「正常 / 处理中 / 失败 / 失效 / 只读」。
+- 右侧状态切换器可即时切换任一屏的状态，左侧索引按「登录 / 核心 Tab / 详情 / 表单流程 / 分享 / 交易 / 规范」分组，点击直达。
+- 适配：以 375×812pt 为基准，设备框固定宽高、内容区独立滚动；底部安全区用 `env(safe-area-inset-bottom)` 模拟；工作台外层在窄屏下自动纵向堆叠，保证在桌面浏览器与手机浏览器都能正常预览。
+
+## Agent Extensions
+
+### SubAgent
+
+- **code-explorer**
+- Purpose: 在执行前核对 18 个页面的 UI 区块、状态矩阵、微文案与跳转关系，并盘点旧稿 `stitch_ai_ui/` 已覆盖的状态，形成页面清单基线。
+- Expected outcome: 一份可驱动左侧索引面板与右侧状态切换器的页面/状态清单，确保重构不漏功能、不漏状态。
+
+### Skill
+
+- **playwright-cli**
+- Purpose: 用无头浏览器以 `file://` 打开本地原型，逐屏截图、点击走查跳转链路、开关弹层与状态切换器。
+- Expected outcome: 18 屏截图 + 跳转链路验证结果，据此发现并修复渲染错位、玻璃层遮挡、路由断链等缺陷。
+
+### Integration
+
+- **cloudStudio**
+- Purpose: 将原型目录部署为可访问链接，便于在手机上真机预览毛玻璃与滚动效果。
+- Expected outcome: 一个可在手机浏览器/微信中打开预览的线上地址；若部署失败则以本地文件交付为准，不阻塞主交付物。