diff --git a/.codebuddy/plans/wx-review-compliance-fix_674eae13.md b/.codebuddy/plans/wx-review-compliance-fix_674eae13.md new file mode 100644 index 0000000..231ff39 --- /dev/null +++ b/.codebuddy/plans/wx-review-compliance-fix_674eae13.md @@ -0,0 +1,210 @@ +--- +name: wx-review-compliance-fix +overview: 整改微信小程序两项审核驳回：① 登录页改为默认不勾选的《用户协议》《隐私政策》勾选框，未勾选不得登录（点击登录弹窗确认）；② 将衣橱页设为启动首页，未登录用户以「游客态 + 本地示例内容」浏览各 tab 页，仅在主动使用受限功能时才引导登录。 +design: + styleKeywords: + - 墨色极简 + - 细描边 + - 玻璃弹层 + - 示例角标 + - 无侵入引导 + fontSystem: + fontFamily: PingFang-SC + heading: + size: 60rpx + weight: 500 + subheading: + size: 30rpx + weight: 500 + body: + size: 26rpx + weight: 400 + colorSystem: + primary: + - "#0A0A0A" + - "#1C1C1E" + background: + - "#FFFFFF" + - "#F7F7F5" + text: + - "#0A0A0A" + - "#6E6E73" + - "#AEAEB2" + functional: + - "#0A0A0A" + - "#C9C9CE" + - "#6E6E73" +todos: + - id: entry-guest-utils + content: 调整 app.json 启动页为衣橱页，新增 utils/guest.ts 提供示例数据与 goLogin 登录引导 + status: completed + - id: wardrobe-guest + content: 衣橱页实现游客态示例浏览、分类本地筛选与登录引导，受限操作改走 goLogin + status: completed + dependencies: + - entry-guest-utils + - id: login-consent + content: 登录页新增默认不勾选协议勾选框、未勾选弹窗确认与「先逛逛」返回浏览入口 + status: completed + dependencies: + - entry-guest-utils + - id: other-tabs-guest + content: 穿搭/运势/分享/我的页增加游客态示例或引导，移除未登录强制跳登录 + status: completed + dependencies: + - entry-guest-utils + - id: verify-compliance + content: 用 [skill:lsp-code-analysis] 核查登录守卫调用点，自测游客浏览、主动登录与 401 兜底全链路 + status: completed + dependencies: + - wardrobe-guest + - login-consent + - other-tabs-guest +--- + +## 背景与目标 + +小程序提审被驳回两条：一是隐私政策不合规，默认自动同意《用户协议》《隐私政策》，须由用户自主阅读后自行选择是否同意；二是打开小程序一进入首页即要求授权登录，须先浏览体验功能服务，再由用户自行选择是否授权登录。本次整改解决这两项合规问题，使小程序可通过重新提审。 + +## 核心功能 + +1. 「衣橱」改为启动首页：打开小程序不再直达登录页，未登录用户以游客身份直接进入并可浏览页面。 +2. 游客态浏览体验：衣橱展示本地示例衣物网格（可切换分类即时筛选），穿搭展示示例搭配，运势展示示例运势内容，均带「示例」标注，并附低调的登录引导；不发起任何需要授权的请求，不打断浏览。 +3. 登录仅在用户主动选择时发生：未登录用户点击上传衣物、AI 推荐、创建分享、编辑资料、通知、订单等需登录的功能时，才进入登录页；登录页提供「暂不登录，先逛逛」入口，可随时返回继续浏览。 +4. 协议同意整改：登录按钮下方提供默认未勾选的勾选框，文案为「我已阅读并同意《用户协议》和《隐私政策》」，两份协议均可点击查看；未勾选直接点击登录时弹出确认弹窗，选择「同意并继续」才继续登录，选择「不同意」则关闭弹窗并停留在当前页。 +5. 分享、我的两个页面在未登录时呈现引导状态：分享页提示登录后可创建与查看分享，我的页显示未登录资料卡与「点击登录」，其中协议、关于等只读入口在未登录时仍可访问。 +6. 登录成功后的原有流程保持：新用户礼包、生日完善引导、回到衣橱或回跳来源页，均与现状一致。 + +## 视觉与交互效果 + +- 延续现有黑白墨色极简风格：直角卡片、细描边、线稿图标、玻璃弹层，不引入新的色彩与控件体系。 +- 游客态顶部为一条细描边浏览提示条，示例内容统一带「示例」胶囊角标，受限操作点击后进入登录页，不做强制打断。 +- 勾选框为墨色方框：未选为空心细描边，选中为黑色实底加白色对勾；未勾选点击登录时的确认弹窗沿用现有毛玻璃居中卡片与双按钮样式。 + +## 技术栈 + +- 微信小程序原生开发（WXML/WXSS/TypeScript，`miniprogram` 目录，无 npm 构建步骤），类型依赖 `miniprogram-api-typings`。 +- 复用现有资产，零新增依赖、零后端改动：自定义组件 `v2-overlay`（玻璃弹层，`login.json` 已注册）、`empty-state`、`navigation-bar`、`clothes-card`；设计令牌 CSS 变量（`--ink`/`--ink-2`/`--ink-3`/`--paper`/`--hairline`/`--fill`）与线稿图标库 `styles/icons.wxss`（含 `icon-check`）；工具层沿用 `utils/logger` 统一日志与 `utils/auth.isLoggedIn()` 判据。 + +## 实现思路与关键决策 + +1. 入口调整：`app.json` 的 `pages` 首位改为 `pages/wardrobe/wardrobe`（游客可浏览的首页），`pages/login/login` 保留在页面列表中作为按需页；tabBar 结构与顺序不变。 +2. 新增 `utils/guest.ts` 收敛游客态：本地示例数据（示例衣物/搭配/运势文案）+ `goLogin({ redirect? })` 统一登录引导入口（防抖、已在登录页则跳过、`wx.navigateTo` 到登录页，支持登录后回跳）。此方式避免使用 `reLaunch` 直达登录页带来的「清栈式强推登录」观感。 +3. 页面游客分支：5 个 tab 页 `onShow` 中把 `!isLoggedIn()` 分支从「强制 `redirectToLogin()`」改为「渲染本地示例/引导并 return」，游客态零网络请求；已登录用户走原有 `refresh()` 逻辑不变。受限动作（上传、AI 入口、创建分享、编辑资料、额度/订单、通知等）在游客态统一走 `goLogin()`，深链页（upload/notification/mall/order/ai-*）内部逻辑保持不变，因入口已被拦截。 +4. 协议合规交互：`login.wxml` 删除「登录即代表同意」默认强制文案，替换为自绘墨色勾选行 + 可点击的协议链接（链接用 `catchtap` 阻止冒泡，避免误触勾选）；未勾选点击登录时用 `v2-overlay` modal 二次确认（「不同意」/「同意并继续」），确认后置 `agreed=true` 并继续原登录流程。登录链路仍仅使用 `wx.login`，不新增任何手机号/头像/昵称授权接口。 +5. 状态同步与回跳：`goLogin` 的 `redirect` 参数复用 `login.ts` 既有 `goAfterLogin()` 回跳能力；登录成功回到衣橱时 `onShow` 自然切到已登录分支拉取真实数据，并保留 `firstShown` 首帧延迟刷新以规避 webview 首帧 setData 冲突。 + +## 架构与流程 + +```mermaid +flowchart TD + A[启动小程序] --> B[衣橱首页] + B -->|未登录| C[游客态: 本地示例与浏览提示] + C -->|点击受限功能| D[登录页] + D -->|未勾选协议点登录| E[确认弹窗: 不同意 / 同意并继续] + E -->|不同意| C + E -->|同意并继续| F[wx.login 换取登录态] + D -->|勾选后点登录| F + D -->|先逛逛| C + F --> B + B -->|已登录| G[真实数据: 衣物列表与上传额度] + G -->|401 登录失效| H[redirectToLogin 幂等跳转] + H --> D +``` + +## 性能与可靠性 + +- 游客态零请求、零存储写入；示例数据为模块级常量，仅本地 filter（O(n)，n≤8），无渲染放大与内存残留。 +- 不改动 `utils/request.ts` 的 401 → 刷新 token → `redirectToLogin` 幂等链路，也不改 `app.ts` 的清态 handler；游客态不发送鉴权请求，因此不会触发 `reLaunch` 打断路由。 +- 回退方案：若审核对自绘勾选控件存疑，可仅替换为原生 `checkbox`（`color="#0A0A0A"`），数据字段 `agreed` 与交互分支无需改动。 + +## 目录结构（仅列新增/修改文件） + +``` +miniprogram/ +├── app.json # [MODIFY] pages 首位改为 pages/wardrobe/wardrobe，login 保留为按需页 +├── app.wxss # [MODIFY] 新增游客态通用样式：浏览提示条、示例角标、登录引导按钮（复用 --ink/--hairline/--fill 令牌） +├── utils/ +│ └── guest.ts # [NEW] 游客态唯一数据源与登录引导：示例衣物/搭配/运势数据 + goLogin({redirect})（防抖、已在登录页跳过、navigateTo 登录页） +├── pages/ +│ ├── wardrobe/ +│ │ ├── wardrobe.ts # [MODIFY] onShow 增加游客分支：不发请求、渲染示例数据；分类本地筛选；onUpload/onClothesTap/onRefresh 游客态走 goLogin；resolvePending 仅登录态执行 +│ │ ├── wardrobe.wxml # [MODIFY] 游客态渲染示例网格（示例角标）、浏览提示条与登录引导；加载/空态/正常三分支保持不变 +│ │ └── wardrobe.wxss # [MODIFY] 示例卡片等游客态局部样式 +│ ├── login/ +│ │ ├── login.ts # [MODIFY] 新增 agreed/consentVisible 状态、onToggleAgree、未勾选点击登录的弹窗分支、onBrowse（先逛逛 → switchTab 衣橱）；wx.login/礼包/生日引导/回跳逻辑保持不变 +│ │ ├── login.wxml # [MODIFY] 删除「登录即代表同意」文案；新增自绘勾选行与协议链接（catchtap 防冒泡）、「暂不登录，先逛逛」、协议确认 v2-overlay +│ │ ├── login.wxss # [MODIFY] 勾选行与「先逛逛」样式，沿用 --ink 系列令牌 +│ │ └── login.json # [不变] 已注册 v2-overlay，无需改动 +│ ├── outfit/ +│ │ ├── outfit.ts # [MODIFY] onShow 游客分支（本地示例、零请求）；tab 切换与收藏入口在游客态走 goLogin +│ │ ├── outfit.wxml # [MODIFY] 游客态示例搭配列表 + 登录引导 +│ │ └── outfit.wxss # [MODIFY] 游客态局部样式（如有必要） +│ ├── horoscope/ +│ │ ├── horoscope.ts # [MODIFY] 游客分支返回本地静态示例运势，不请求；「去设置生日」/重试在游客态走 goLogin +│ │ └── horoscope.wxml # [MODIFY] 游客态示例运势卡 + 登录引导（复用 hs-* 样式） +│ ├── closet-share/ +│ │ ├── closet-share.ts # [MODIFY] 游客分支：不发请求，渲染引导态；创建分享入口走 goLogin +│ │ └── closet-share.wxml # [MODIFY] 游客态 empty-state 引导（登录后可创建与查看分享） +│ └── profile/ +│ ├── profile.ts # [MODIFY] onShow 游客分支：不请求 fetchUser；编辑资料/额度/订单/通知等入口走 goLogin +│ ├── profile.wxml # [MODIFY] 游客资料卡（icon-user 占位 + 点击登录），保留协议/关于等可浏览入口 +│ └── profile.wxss # [MODIFY] 游客资料卡样式 +``` + +## 保持不变（回归重点） + +- `utils/request.ts`、`utils/auth.ts`、`app.ts`：401 → 刷新 → `redirectToLogin` 幂等链路与清态 handler 不动。 +- `pages/notification`、`pages/upload`、`pages/mall`、`pages/order`、`pages/ai-*` 等深链页：入口已在游客态被 `goLogin` 拦截，页面内部逻辑与未登录兜底提示维持现状。 +- `custom-tab-bar/index.ts` 未登录时红点静默置 0，无需改动；`pages/agreement` 与 `utils/legal.ts` 已满足「未登录可访问」，不再改动。 + +## 关键接口（guest.ts） + +```ts +export interface GuestClothes { + key: string // 本地唯一 key（wx:key 用） + name: string + category: string // 与衣橱分类条 value 对齐：上装/下装/连衣裙/外套/鞋/配饰 + icon: string // icons.wxss 线稿图标类名，如 'icon-shirt' +} +export interface GuestOutfit { key: string; name: string; icons: string[]; tags: string[] } +export const GUEST_WARDROBE: GuestClothes[] +export const GUEST_OUTFITS: GuestOutfit[] +export const GUEST_HOROSCOPE: { zodiac: string; score: number; lines: string[] } +export function goLogin(options?: { redirect?: string }): void +``` + +## 设计风格 + +延续 v2 墨色极简体系：零彩色灰阶、发丝线分隔、衬线大标题、线稿图标、毛玻璃弹层，仅在既有版式内追加「游客态」视觉层，整改前后观感一致，不引入新组件库与彩色。 + +## 首页（衣橱）游客态 + +- 页头保留杂志式大标题「我的衣橱」，统计行改为「浏览模式 · 登录后上传你的衣物」。 +- 分类条保持可点，对本地示例数据即时筛选，提供可操作、可体验的浏览感。 +- 主体为两列直角示例卡：细描边 + 线稿图标占位，右上角「示例」胶囊角标（浅填充底 + 灰色字）。 +- 顶部一条细描边提示条说明当前为浏览模式；右下角保留上传悬浮按钮，点击进入登录页。 + +## 其他页面游客态 + +- 穿搭、运势直接呈现本地示例内容（示例搭配、示例运势卡），统一带「示例」角标，底部一行低调的「登录后查看你的专属内容」引导。 +- 分享、我的使用现成空态与资料卡：用户线稿占位头像 + 「点击登录」，协议与关于等只读入口保持可点。 + +## 登录页 + +- 勾选行位于登录按钮下方：小号灰字 + 自绘方框（未选为细描边空心，选中为墨色实底加白色对勾，120ms 缓动），协议链接保留下划线。 +- 「暂不登录，先逛逛」为居中细描边文字按钮，与主按钮形成清晰主次。 +- 未勾选点击登录的确认弹窗复用 v2-overlay 毛玻璃居中卡，按钮为「不同意」（描边）与「同意并继续」（墨色实底主按钮）。 + +## 交互与响应式 + +- 新增控件热区不小于 88rpx，反馈使用 hover-class 或 120ms 透明度过渡，不使用弹跳动画；过渡遵循既有 --ease 缓动。 +- 底部间距沿用安全区适配；示例网格按屏幕宽度两列自适应，游客态切换为登录态时列表淡入，避免闪跳。 + +## Agent Extensions + +### Skill + +- **lsp-code-analysis** +- Purpose: 在整改中做调用点核查与影响分析，检索并确认全部 `auth.isLoggedIn` 强制跳转分支、`redirectToLogin` 既有调用点与新增 `goLogin` 调用点，避免遗漏或误改登录守卫链路。 +- Expected outcome: 输出完整的引用清单与改动覆盖确认，确保游客态零请求、登录态原逻辑无回归。 \ No newline at end of file diff --git a/miniprogram/app.json b/miniprogram/app.json index 5c5e173..2452363 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,7 +1,7 @@ { "pages": [ - "pages/login/login", "pages/wardrobe/wardrobe", + "pages/login/login", "pages/outfit/outfit", "pages/horoscope/horoscope", "pages/notification/notification", diff --git a/miniprogram/app.wxss b/miniprogram/app.wxss index 9c77acc..d8c0b8b 100644 --- a/miniprogram/app.wxss +++ b/miniprogram/app.wxss @@ -841,3 +841,73 @@ swiper-item { .modal-act:active { background: var(--fill); } .modal-act + .modal-act { border-left: 1rpx solid var(--hairline); } .modal-act--main { color: var(--ink); font-weight: 600; } + +/* ============================================================================ + §18 游客浏览态（未登录） + 合规要求：打开小程序可先浏览体验功能，登录仅由用户主动选择。 + 样式只在既有版式内追加一层：细描边提示条 + 示例角标 + 低调登录引导。 + ========================================================================== */ +.guest-bar { + display: flex; + align-items: center; + gap: 14rpx; + margin: 26rpx var(--pad) 0; + padding: 20rpx 24rpx; + border: 1rpx solid var(--hairline-2); + border-radius: var(--r-ctrl); + background: var(--paper-2); + transition: background .18s var(--ease); +} +.guest-bar:active { background: var(--fill); } +.guest-bar .icon { + width: 30rpx; + height: 30rpx; + color: var(--ink-3); + flex-shrink: 0; +} +.guest-bar .gb-t { + flex: 1; + font-size: 24rpx; + line-height: 1.45; + color: var(--ink-2); + letter-spacing: .01em; +} +.guest-bar .gb-a { + font-size: 24rpx; + font-weight: 600; + color: var(--ink); + flex-shrink: 0; +} +/* 示例内容角标：浅填充底 + 灰字，弱于业务状态胶囊 */ +.guest-flag { + position: absolute; + top: 14rpx; + left: 14rpx; + height: 38rpx; + padding: 0 14rpx; + border-radius: 20rpx; + background: var(--fill-2); + font-size: 19rpx; + font-weight: 500; + line-height: 38rpx; + color: var(--ink-2); +} +/* 游客态底部一行登录引导 */ +.guest-foot { + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + padding: 52rpx var(--pad) 0; + font-size: 23rpx; + color: var(--ink-3); + letter-spacing: .02em; +} +.guest-foot .gf-a { + color: var(--ink); + font-weight: 600; + text-decoration: underline; + text-underline-offset: 7rpx; + text-decoration-thickness: 1rpx; + text-decoration-color: var(--ink-4); +} diff --git a/miniprogram/pages/closet-share/closet-share.ts b/miniprogram/pages/closet-share/closet-share.ts index 7967c15..3232fa5 100644 --- a/miniprogram/pages/closet-share/closet-share.ts +++ b/miniprogram/pages/closet-share/closet-share.ts @@ -1,10 +1,11 @@ -import { request, redirectToLogin } from '../../utils/request' +import { request } from '../../utils/request' import * as auth from '../../utils/auth' import { PagedResult, ClosetShareItem, OutfitShareItem } from '../../types/models' import { ShareStatus, ShareType } from '../../utils/config' import { normalizePaged } from '../../utils/paged' import { setTabBarSelected } from '../../utils/tabbar' import { navScroll } from '../../utils/nav' +import { GUEST_SHARES, goLogin } from '../../utils/guest' import { logger } from '../../utils/logger' // 日志模块名 @@ -25,6 +26,20 @@ interface ShareListItem { _invalid: boolean } +// 游客态示例列表：与真实列表同构，复用同一套模板渲染，仅补「示例」标注 +function guestShareList(): ShareListItem[] { + return GUEST_SHARES.map((it) => ({ + kind: it.kind, + share_uuid: it.key, + title: it.title, + typeText: it.typeText, + expireText: it.expireText, + status: ShareStatus.NORMAL, + created_at: 0, + _invalid: false, + })) +} + Page({ data: { tabs: [ @@ -40,16 +55,36 @@ Page({ hasMore: true, // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动 navScrolled: false, + // 游客态（未登录）：展示本地示例分享，不发需要授权的请求 + guest: false, }, // scroll-view 滚动 → 导航收缩为玻璃小标题 onNavScroll: navScroll, + onLoad() { + // 首帧渲染前判定游客态：未登录直接渲染示例列表，避免首帧 setData 冲突 + if (!auth.isLoggedIn()) { + this.setData({ guest: true, list: guestShareList(), loading: false, hasMore: false }) + logger.info(LOG, '未登录进入分享页，渲染游客态示例内容') + } + }, + onShow() { this.syncTabBar() - // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求 + // 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求） if (!auth.isLoggedIn()) { - redirectToLogin() + if (!this.data.guest) { + this.setData({ guest: true, list: guestShareList(), loading: false, hasMore: false }) + } + return + } + // 登录成功回到本页：清掉示例数据，切回真实列表 + if (this.data.guest) { + logger.info(LOG, '检测到登录态，从游客态切回真实分享列表') + ;(this as any).firstShown = true + this.setData({ guest: false, list: [], loading: true, hasMore: true }) + this.refresh() return } // 首帧渲染未结束就 setData 会触发「Expected updated data but get first rendering data」， @@ -69,16 +104,28 @@ Page({ onTabTap(e: WechatMiniprogram.TouchEvent) { const index = Number(e.currentTarget.dataset.index) if (index === this.data.activeTab) return + // 游客态：分段仍可切换，示例内容用于体验浏览，不发请求 + if (this.data.guest) { + this.setData({ activeTab: index }) + return + } this.setData({ activeTab: index, list: [], loading: true }) this.refresh() }, + // 游客态点击示例分享 / 受限入口：统一进入登录页，由用户自行选择是否登录 + onGuestLogin() { + logger.debug(LOG, '游客态点击受限入口，引导登录') + goLogin() + }, + refresh() { this.setData({ page: 1, hasMore: true, loading: this.data.list.length === 0 }) this.fetchList(1) }, onReachBottom() { + if (this.data.guest) return if (!this.data.hasMore || this.data.loading || this.data.loadingMore) return this.fetchList(this.data.page + 1) }, @@ -216,6 +263,11 @@ Page({ }, onCreate() { + // 新建分享需登录：游客态先引导登录，不直接进入创建页 + if (this.data.guest) { + this.onGuestLogin() + return + } wx.navigateTo({ url: '/pages/closet-share-create/closet-share-create', fail: (e) => logger.warn(LOG, 'navigateTo 创建分享失败, err=', e && e.errMsg), @@ -223,6 +275,10 @@ Page({ }, onItemTap(e: WechatMiniprogram.TouchEvent) { + if (this.data.guest) { + this.onGuestLogin() + return + } const uuid = e.currentTarget.dataset.uuid as string const kind = e.currentTarget.dataset.kind as string logger.debug(LOG, '点击分享项, kind=', kind, 'uuid=', uuid) diff --git a/miniprogram/pages/closet-share/closet-share.wxml b/miniprogram/pages/closet-share/closet-share.wxml index b952cd7..fea819b 100644 --- a/miniprogram/pages/closet-share/closet-share.wxml +++ b/miniprogram/pages/closet-share/closet-share.wxml @@ -10,6 +10,14 @@ 分享 + + + + 浏览模式 · 以下为示例分享 + 登录 + + + @@ -24,7 +32,7 @@ {{item.title}} + 示例 {{item.typeText}} {{item.expireText}} {{item.expireText}} @@ -73,7 +82,11 @@ - 没有更多了 + 没有更多了 + + 登录后可创建分享，并查看好友分享给你的内容 + 去登录 + diff --git a/miniprogram/pages/horoscope/horoscope.ts b/miniprogram/pages/horoscope/horoscope.ts index 8104124..60482ba 100644 --- a/miniprogram/pages/horoscope/horoscope.ts +++ b/miniprogram/pages/horoscope/horoscope.ts @@ -1,8 +1,9 @@ -import { request, redirectToLogin } from '../../utils/request' +import { request } from '../../utils/request' import * as auth from '../../utils/auth' import { HoroscopeData } from '../../types/models' import { setTabBarSelected } from '../../utils/tabbar' import { navScroll } from '../../utils/nav' +import { guestHoroscope, goLogin } from '../../utils/guest' import { logger } from '../../utils/logger' import { STORAGE_KEYS } from '../../utils/config' @@ -41,16 +42,52 @@ Page({ errorText: '', // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动 navScrolled: false, + // 游客态（未登录）：展示本地示例运势，不发需要授权的请求 + guest: false, }, // scroll-view 滚动 → 导航收缩为玻璃小标题 onNavScroll: navScroll, + onLoad() { + // 首帧渲染前判定游客态：未登录直接用本地示例运势渲染，避免首帧 setData 冲突 + if (!auth.isLoggedIn()) { + const demo = guestHoroscope() + this.setData({ + guest: true, + horoscope: demo, + statDate: this.formatStatDate(demo.stat_date), + luckyColorHex: COLOR_MAP[demo.lucky_color] || '#AEAEB2', + loading: false, + }) + logger.info(LOG, '未登录进入运势页，渲染游客态示例运势') + } + }, + onShow() { this.syncTabBar() - // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求 + // 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求） if (!auth.isLoggedIn()) { - redirectToLogin() + if (!this.data.guest) { + const demo = guestHoroscope() + this.setData({ + guest: true, + horoscope: demo, + statDate: this.formatStatDate(demo.stat_date), + luckyColorHex: COLOR_MAP[demo.lucky_color] || '#AEAEB2', + loading: false, + noBirth: false, + error: false, + }) + } + return + } + // 登录成功回到本页：清掉示例运势，拉取真实数据 + if (this.data.guest) { + logger.info(LOG, '检测到登录态，从游客态切回真实运势') + ;(this as any).firstShown = true + this.setData({ guest: false, horoscope: null, loading: true }) + this.fetchHoroscope(0) return } // 首帧渲染未结束就 setData 会触发「Expected updated data but get first rendering data」， @@ -116,15 +153,30 @@ Page({ }, onRetry() { + if (this.data.guest) { + this.onGuestLogin() + return + } this.fetchHoroscope(0) }, + // 游客态点击受限入口（设置生日 / 生成穿搭）：统一进入登录页 + onGuestLogin() { + logger.debug(LOG, '游客态点击受限入口，引导登录') + goLogin() + }, + formatStatDate(d: number): string { const s = String(d) return `${s.slice(0, 4)}.${s.slice(4, 6)}.${s.slice(6, 8)}` }, onGoProfile() { + // 设置生日需登录：游客态先引导登录，不做强制跳转 + if (!auth.isLoggedIn()) { + this.onGuestLogin() + return + } // switchTab 不支持 query 传参，用 storage 标记让「我的」页 onShow 自动弹出编辑弹窗 wx.setStorageSync(STORAGE_KEYS.OPEN_PROFILE_EDIT, 1) wx.switchTab({ @@ -138,6 +190,10 @@ Page({ }, onGenerate() { + if (this.data.guest) { + this.onGuestLogin() + return + } wx.navigateTo({ url: '/pages/ai-recommend/ai-recommend', fail: (e) => logger.warn(LOG, 'navigateTo AI 推荐失败, err=', e && e.errMsg), diff --git a/miniprogram/pages/horoscope/horoscope.wxml b/miniprogram/pages/horoscope/horoscope.wxml index 2cdb223..d556248 100644 --- a/miniprogram/pages/horoscope/horoscope.wxml +++ b/miniprogram/pages/horoscope/horoscope.wxml @@ -1,6 +1,7 @@ - 去设置生日 + 登录 + 去设置生日 @@ -10,6 +11,14 @@ 每日运势 + + + + 浏览模式 · 以下为示例运势 + 登录 + + + @@ -46,6 +55,7 @@ {{horoscope.zodiac}} + 示例 {{statDate}} @@ -136,6 +146,11 @@ 生成今日推荐穿搭 + + + 登录并设置生日，查看你的专属运势 + 去登录 + diff --git a/miniprogram/pages/login/login.ts b/miniprogram/pages/login/login.ts index e275e90..0296b3b 100644 --- a/miniprogram/pages/login/login.ts +++ b/miniprogram/pages/login/login.ts @@ -27,11 +27,27 @@ Page({ { text: '稍后再说', value: '' }, { text: '去完善', value: 'ok', type: 'main' }, ], + // 协议同意：默认不勾选，由用户自主阅读后自行选择（微信审核合规要求） + agreed: false, + consentVisible: false, + consentButtons: [ + { text: '不同意', value: '' }, + { text: '同意并继续', value: 'ok', type: 'main' }, + ], }, onLoad(query: Record) { logger.debug(LOG, 'onLoad, query=', JSON.stringify(query), 'isLoggedIn=', auth.isLoggedIn()) - if (query.redirect) this.setData({ redirect: query.redirect }) + if (query.redirect) { + // goLogin 侧对 redirect 做了 encodeURIComponent，这里解码还原（decode 失败时用原值兜底） + let redirect = query.redirect + try { + redirect = decodeURIComponent(redirect) + } catch (e) { + logger.warn(LOG, 'redirect 解码失败，使用原值, err=', e) + } + this.setData({ redirect }) + } if (auth.isLoggedIn()) { this.goAfterLogin() } @@ -57,11 +73,54 @@ Page({ }) }, + // 勾选 / 取消勾选协议：完全由用户操作驱动，不存在默认勾选 + onToggleAgree() { + const agreed = !this.data.agreed + logger.debug(LOG, '协议勾选状态切换, agreed=', agreed) + this.setData({ agreed }) + }, + + // 未勾选协议点击登录：弹窗二次确认，由用户主动选择是否同意 onLogin() { if (this.data.loading) { logger.debug(LOG, '登录中，忽略重复点击') return } + if (!this.data.agreed) { + logger.info(LOG, '未勾选协议，弹出确认弹窗') + this.setData({ consentVisible: true }) + return + } + this.doLogin() + }, + + onConsentCancel() { + logger.debug(LOG, '用户未同意协议，停留在登录页') + this.setData({ consentVisible: false }) + }, + + onConsentConfirm(e: WechatMiniprogram.CustomEvent) { + this.setData({ consentVisible: false }) + // 弹窗主按钮才代表同意；其余分支（不同意）只关闭弹窗，用户仍可浏览 + if (e.detail.value !== 'ok') { + logger.info(LOG, '用户选择不同意协议') + return + } + logger.info(LOG, '用户同意协议，继续登录') + this.setData({ agreed: true }) + this.doLogin() + }, + + // 暂不登录：回到衣橱首页继续浏览（游客态），不产生任何授权请求 + onBrowse() { + logger.info(LOG, '用户选择先逛逛，返回衣橱继续浏览') + wx.switchTab({ + url: '/pages/wardrobe/wardrobe', + fail: (e) => logger.warn(LOG, 'switchTab 衣橱失败, err=', e && e.errMsg), + }) + }, + + doLogin() { logger.debug(LOG, '点击登录, redirect=', this.data.redirect) this.setData({ loading: true }) diff --git a/miniprogram/pages/login/login.wxml b/miniprogram/pages/login/login.wxml index 944d38c..b499500 100644 --- a/miniprogram/pages/login/login.wxml +++ b/miniprogram/pages/login/login.wxml @@ -23,12 +23,22 @@ {{loading ? '登录中…' : '微信一键登录'}} - - 登录即代表同意 - 《用户协议》 - 和 - 《隐私政策》 + + + + + + + + 我已阅读并同意 + 《用户协议》 + 和 + 《隐私政策》 + + + + 暂不登录，先逛逛 @@ -65,4 +75,15 @@ bind:confirm="onBirthConfirm" bind:cancel="onBirthCancel" /> + + + diff --git a/miniprogram/pages/login/login.wxss b/miniprogram/pages/login/login.wxss index 057672d..c1a5f0d 100644 --- a/miniprogram/pages/login/login.wxss +++ b/miniprogram/pages/login/login.wxss @@ -81,15 +81,48 @@ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.5 3C5.36 3 2 5.69 2 9c0 1.87 1.03 3.54 2.62 4.65L4 16.5l3.27-1.72c.73.2 1.47.3 2.23.3h.5A6.2 6.2 0 0 1 9 12c0-3.3 3.36-6 7.5-6h.5A5.7 5.7 0 0 0 9.5 3z'/%3E%3Cpath d='M22 12c0-2.76-2.69-5-6-5s-6 2.24-6 5 2.69 5 6 5c.72 0 1.42-.1 2.06-.28L20.5 18l-.42-2.6c1.17-.88 1.92-2.06 1.92-3.4z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } -.lg-terms { - margin-top: 28rpx; - text-align: center; +/* 协议同意行：默认未勾选（空心细描边），勾选后为墨色实底 + 白色对勾 */ +.lg-consent { + display: flex; + align-items: flex-start; + gap: 16rpx; + margin-top: 30rpx; + padding: 0 4rpx; +} + +.lg-check { + width: 34rpx; + height: 34rpx; + margin-top: 5rpx; + flex-shrink: 0; + border-radius: 8rpx; + box-shadow: inset 0 0 0 1rpx var(--ink-4); + color: transparent; + display: flex; + align-items: center; + justify-content: center; + transition: background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); +} + +.lg-check .icon { + width: 24rpx; + height: 24rpx; +} + +.lg-check.is-on { + background: var(--ink); + box-shadow: none; + color: #fff; +} + +.lg-consent-t { + flex: 1; font-size: 22rpx; line-height: 1.75; color: var(--ink-3); } -.lg-terms .link { +.lg-consent-t .link { color: var(--ink-2); text-decoration: underline; text-underline-offset: 6rpx; @@ -97,6 +130,23 @@ text-decoration-color: var(--ink-4); } +/* 暂不登录：细描边文字按钮，与主按钮形成主次 */ +.lg-browse { + margin-top: 28rpx; + height: 84rpx; + display: flex; + align-items: center; + justify-content: center; + font-size: 26rpx; + color: var(--ink-2); + letter-spacing: .02em; + transition: opacity .18s var(--ease); +} + +.lg-browse:active { + opacity: .5; +} + /* 新手礼包 */ .lg-gift-ic { width: 88rpx; diff --git a/miniprogram/pages/outfit/outfit.ts b/miniprogram/pages/outfit/outfit.ts index a37a766..849728c 100644 --- a/miniprogram/pages/outfit/outfit.ts +++ b/miniprogram/pages/outfit/outfit.ts @@ -1,4 +1,4 @@ -import { request, redirectToLogin } from '../../utils/request' +import { request } from '../../utils/request' import * as auth from '../../utils/auth' import { PagedResult, OutfitItem, CommunityOutfitItem } from '../../types/models' import { OutfitSource, STORAGE_KEYS } from '../../utils/config' @@ -8,6 +8,7 @@ import { OutfitStatusPill, isPendingSave, outfitStatusPill } from '../../utils/o import { setTabBarSelected } from '../../utils/tabbar' import { formatRelativeTime } from '../../utils/format' import { navScroll } from '../../utils/nav' +import { GUEST_OUTFITS, goLogin } from '../../utils/guest' import { logger } from '../../utils/logger' // 日志模块名 @@ -44,16 +45,36 @@ Page({ pendingCount: 0, // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动 navScrolled: false, + // 游客态（未登录）：展示本地示例穿搭，不发需要授权的请求 + guest: false, + guestList: GUEST_OUTFITS, }, // scroll-view 滚动 → 导航收缩为玻璃小标题 onNavScroll: navScroll, + onLoad() { + // 首帧渲染前判定游客态，避免首帧 setData 冲突 + if (!auth.isLoggedIn()) { + this.setData({ guest: true, loading: false }) + logger.info(LOG, '未登录进入穿搭页，渲染游客态示例内容') + } + }, + onShow() { this.syncTabBar() - // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求 + // 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求） if (!auth.isLoggedIn()) { - redirectToLogin() + if (!this.data.guest) this.setData({ guest: true, list: [], loading: false }) + return + } + // 登录成功回到本页：清空示例数据，切回真实列表 + if (this.data.guest) { + logger.info(LOG, '检测到登录态，从游客态切换为真实穿搭列表') + ;(this as any).firstShown = true + this.setData({ guest: false, guestList: [], list: [], loading: true }) + this.refresh() + this.fetchPendingCount() return } const openCollect = wx.getStorageSync(STORAGE_KEYS.OPEN_COLLECT) @@ -86,16 +107,32 @@ Page({ onTabChange(e: WechatMiniprogram.TouchEvent) { const index = Number(e.currentTarget.dataset.index) if (index === this.data.activeTab) return + // 游客态：分段仍可切换，示例内容用于体验浏览，不发请求 + if (this.data.guest) { + this.setData({ activeTab: index }) + return + } this.setData({ activeTab: index, list: [], loading: true }) this.refresh() }, + // 游客态点击示例穿搭 / 受限入口：统一进入登录页，由用户自行选择是否登录 + onGuestLogin() { + logger.debug(LOG, '游客态点击受限入口，引导登录') + goLogin() + }, + refresh() { this.setData({ page: 1, hasMore: true, loading: this.data.list.length === 0 }) this.fetchList(1) }, onRefresh() { + // 游客态没有服务端数据可刷新，直接收起下拉动画 + if (this.data.guest) { + this.setData({ refreshing: false }) + return + } this.setData({ refreshing: true }) Promise.all([this.fetchList(1), this.fetchPendingCount()]).finally(() => this.setData({ refreshing: false }) @@ -103,6 +140,7 @@ Page({ }, onReachBottom() { + if (this.data.guest) return if (!this.data.hasMore || this.data.loading || this.data.loadingMore) return this.fetchList(this.data.page + 1) }, @@ -192,6 +230,10 @@ Page({ }, onCreate() { + if (this.data.guest) { + this.onGuestLogin() + return + } wx.navigateTo({ url: '/pages/outfit-edit/outfit-edit', fail: (e) => logger.warn(LOG, 'navigateTo 新建穿搭失败, err=', e && e.errMsg), @@ -199,6 +241,10 @@ Page({ }, onAiRecommend() { + if (this.data.guest) { + this.onGuestLogin() + return + } wx.navigateTo({ url: '/pages/ai-recommend/ai-recommend', fail: (e) => logger.warn(LOG, 'navigateTo AI 推荐失败, err=', e && e.errMsg), @@ -207,6 +253,10 @@ Page({ // 进入 AI 穿搭页：AI 生成结果的统一管理入口（待保存 / 已保存） onAiPending() { + if (this.data.guest) { + this.onGuestLogin() + return + } wx.navigateTo({ url: '/pages/ai-pending/ai-pending', fail: (e) => logger.warn(LOG, 'navigateTo AI 穿搭失败, err=', e && e.errMsg), @@ -214,6 +264,10 @@ Page({ }, onOutfitTap(e: WechatMiniprogram.TouchEvent) { + if (this.data.guest) { + this.onGuestLogin() + return + } const uuid = e.currentTarget.dataset.uuid as string const owner = this.data.activeTab === 0 ? '1' : '0' logger.debug(LOG, '点击穿搭, uuid=', uuid, 'owner=', owner) diff --git a/miniprogram/pages/outfit/outfit.wxml b/miniprogram/pages/outfit/outfit.wxml index 65b4d6f..dc7225e 100644 --- a/miniprogram/pages/outfit/outfit.wxml +++ b/miniprogram/pages/outfit/outfit.wxml @@ -16,6 +16,14 @@ 穿搭 + + + + 浏览模式 · 以下为示例穿搭 + 登录 + + + @@ -32,12 +40,12 @@ AI 穿搭 AI 生成的搭配在这里保存与管理 - {{pendingCount}} 套待保存 + {{pendingCount}} 套待保存 - + @@ -47,7 +55,7 @@ + + + + + + + + 示例 + + + {{item.name}} + {{item.scene}} + + {{item.desc}} + + {{item.icons.length}} 件衣物 + + + + - + + + + + - 没有更多了 + 没有更多了 + + 登录后查看你的专属穿搭与收藏 + 去登录 + diff --git a/miniprogram/pages/profile/profile.ts b/miniprogram/pages/profile/profile.ts index f1748a9..0f4f7dc 100644 --- a/miniprogram/pages/profile/profile.ts +++ b/miniprogram/pages/profile/profile.ts @@ -1,10 +1,11 @@ -import { request, uploadFile, redirectToLogin } from '../../utils/request' +import { request, uploadFile } from '../../utils/request' import * as auth from '../../utils/auth' import { UserInfo, QuotaItem } from '../../types/models' import { QuotaType, QUOTA_NAMES, VIP_TYPE_NAMES, STORAGE_KEYS } from '../../utils/config' import { formatDate } from '../../utils/format' import { setTabBarSelected, setTabBarUnread, setTabBarHidden } from '../../utils/tabbar' import { navScroll } from '../../utils/nav' +import { goLogin } from '../../utils/guest' import { logger } from '../../utils/logger' // 日志模块名 @@ -51,6 +52,8 @@ Page({ quotaStats: [] as Array<{ key: number; label: string; remain: number; total: number }>, // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动 navScrolled: false, + // 游客态（未登录）：展示资料引导卡，只读入口仍可访问，不发请求 + guest: false, }, // scroll-view 滚动 → 导航收缩为玻璃小标题 @@ -58,6 +61,11 @@ Page({ onLoad() { this.setToday() + // 首帧渲染前判定游客态，避免首帧 setData 冲突 + if (!auth.isLoggedIn()) { + this.setData({ guest: true }) + logger.info(LOG, '未登录进入我的页，渲染游客态资料卡') + } }, // 跨零点后回到本页时，生日选择器上限需重算，不能停留在昨天 @@ -72,17 +80,46 @@ Page({ this.setToday() // 回到本页时按抽屉状态校准标签栏，防止切前后台/切 tab 后残留隐藏 setTabBarHidden(!!this.data.editVisible) - // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求 + // 未登录：游客态展示引导卡，零请求，不再强制跳登录（微信审核合规要求） if (!auth.isLoggedIn()) { - redirectToLogin() + if (!this.data.guest) { + // 退出登录后回到本页时清掉残留资料，避免展示上一账号信息 + this.setData({ + guest: true, + userInfo: {} as UserInfo, + vipLabel: '', + zodiac: '', + quotaStats: [], + uploadRemain: 0, + unread: 0, + }) + } return } + // 登录成功回到本页：清掉游客态，拉取真实资料 + if (this.data.guest) { + logger.info(LOG, '检测到登录态，从游客态切回真实资料') + this.setData({ guest: false }) + } this.consumeOpenEditMark() this.fetchUser() this.fetchQuota() this.fetchUnread() }, + // 未登录时的统一拦截：进入登录页，由用户自行选择是否登录 + needLogin(): boolean { + if (auth.isLoggedIn()) return false + logger.debug(LOG, '游客态点击受限入口，引导登录') + goLogin() + return true + }, + + // 游客态点击资料卡 / 登录引导 + onGuestLogin() { + this.needLogin() + }, + // 离开本页时恢复标签栏：此时抽屉不再可见，标签栏不能残留隐藏 onHide() { setTabBarHidden(false) @@ -172,6 +209,7 @@ Page({ }, onEdit() { + if (this.needLogin()) return const u = this.data.userInfo // 抽屉打开期间隐藏悬浮标签栏：tabBar 由框架渲染在页面之上，否则会压住抽屉底部按钮 setTabBarHidden(true) @@ -284,24 +322,28 @@ Page({ }, onTapMall() { + if (this.needLogin()) return wx.navigateTo({ url: '/pages/mall/mall', fail: (e) => logger.warn(LOG, 'navigateTo 商城失败, err=', e && e.errMsg), }) }, onTapOrder() { + if (this.needLogin()) return wx.navigateTo({ url: '/pages/order/order', fail: (e) => logger.warn(LOG, 'navigateTo 订单失败, err=', e && e.errMsg), }) }, onTapNotification() { + if (this.needLogin()) return wx.navigateTo({ url: '/pages/notification/notification', fail: (e) => logger.warn(LOG, 'navigateTo 通知失败, err=', e && e.errMsg), }) }, onTapCollect() { + if (this.needLogin()) return wx.setStorageSync(STORAGE_KEYS.OPEN_COLLECT, 1) wx.switchTab({ url: '/pages/outfit/outfit', @@ -309,6 +351,7 @@ Page({ }) }, onTapFlow() { + if (this.needLogin()) return wx.navigateTo({ url: '/pages/mall/mall?tab=flow', fail: (e) => logger.warn(LOG, 'navigateTo 流水失败, err=', e && e.errMsg), diff --git a/miniprogram/pages/profile/profile.wxml b/miniprogram/pages/profile/profile.wxml index a67a4f0..e351378 100644 --- a/miniprogram/pages/profile/profile.wxml +++ b/miniprogram/pages/profile/profile.wxml @@ -7,8 +7,25 @@ Profile + + + + + + + 未登录 + + 浏览模式 + + + + 点击登录 + + + + - + @@ -36,8 +53,8 @@ - - + + Quota 我的额度 @@ -113,6 +130,10 @@ + + 登录后同步你的衣橱、穿搭与额度 + 去登录 + v1.0.0 diff --git a/miniprogram/pages/wardrobe/wardrobe.ts b/miniprogram/pages/wardrobe/wardrobe.ts index 746193d..1fdcd41 100644 --- a/miniprogram/pages/wardrobe/wardrobe.ts +++ b/miniprogram/pages/wardrobe/wardrobe.ts @@ -1,4 +1,4 @@ -import { request, redirectToLogin } from '../../utils/request' +import { request } from '../../utils/request' import * as auth from '../../utils/auth' import { PagedResult, ClothesItem, QuotaItem } from '../../types/models' import { QuotaType } from '../../utils/config' @@ -7,6 +7,7 @@ import { clothesStatusFlag } from '../../utils/clothes-status' import { resolvePendingClothes } from '../../utils/pending-clothes' import { setTabBarSelected } from '../../utils/tabbar' import { navScroll } from '../../utils/nav' +import { GUEST_WARDROBE, GuestClothes, goLogin } from '../../utils/guest' import { logger } from '../../utils/logger' // 日志模块名 @@ -22,6 +23,12 @@ const CATEGORIES = [ { name: '配饰', value: '配饰' }, ] +// 游客态分类筛选：与分类条 value 对齐，「全部」返回完整示例 +function filterGuestClothes(index: number): GuestClothes[] { + const cat = CATEGORIES[index] ? CATEGORIES[index].value : '' + return cat ? GUEST_WARDROBE.filter((it) => it.category === cat) : GUEST_WARDROBE +} + Page({ data: { categories: CATEGORIES, @@ -45,16 +52,37 @@ Page({ { text: '知道了', value: '' }, { text: '查看衣物', value: 'ok', type: 'main' }, ], + // 游客态（未登录）：展示本地示例内容，不发任何需要授权的请求 + guest: false, + guestList: GUEST_WARDROBE, }, // scroll-view 滚动 → 导航收缩为玻璃小标题 onNavScroll: navScroll, + onLoad() { + // 首帧渲染前判定游客态：未登录直接渲染本地示例，避免首帧 setData 冲突 + if (!auth.isLoggedIn()) { + this.setData({ guest: true, loading: false }) + logger.info(LOG, '未登录进入首页，渲染游客态示例内容') + } + }, + onShow() { this.syncTabBar() - // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求 + // 未登录：游客态浏览，零请求，不再强制跳登录（微信审核合规要求： + // 用户可先浏览体验功能服务，登录与否由用户自行选择） if (!auth.isLoggedIn()) { - redirectToLogin() + if (!this.data.guest) this.setData({ guest: true, list: [], loading: false }) + return + } + // 登录成功回到首页：清空示例数据，切回真实衣橱 + if (this.data.guest) { + logger.info(LOG, '检测到登录态，从游客态切换为真实衣橱') + ;(this as any).firstShown = true + this.setData({ guest: false, guestList: [], list: [], total: 0, uploadRemain: 0, loading: true }) + this.resolvePending() + this.refresh() return } // 核对「上传后退出小程序」的衣物最终处理结果（pending 为空时零请求） @@ -82,6 +110,11 @@ Page({ }, onRefresh() { + // 游客态没有服务端数据可刷新，直接收起下拉动画 + if (this.data.guest) { + this.setData({ refreshing: false }) + return + } this.setData({ refreshing: true }) Promise.all([this.fetchList(1), this.fetchQuota()]).finally(() => { this.setData({ refreshing: false }) @@ -89,6 +122,7 @@ Page({ }, onReachBottom() { + if (this.data.guest) return if (!this.data.hasMore || this.data.loading || this.data.loadingMore) return this.fetchList(this.data.page + 1) }, @@ -186,11 +220,27 @@ Page({ onCategoryTap(e: WechatMiniprogram.TouchEvent) { const index = Number(e.currentTarget.dataset.index) if (index === this.data.activeCategory) return - this.setData({ activeCategory: index, list: [], loading: true }) + this.setData({ activeCategory: index }) + // 游客态：本地示例数据即时筛选，提供可操作的浏览体验，不发请求 + if (this.data.guest) { + this.setData({ guestList: filterGuestClothes(index) }) + return + } + this.setData({ list: [], loading: true }) this.refresh() }, + // 游客态点击示例内容 / 受限入口：统一进入登录页，由用户自行选择是否登录 + onGuestLogin() { + logger.debug(LOG, '游客态点击受限入口，引导登录') + goLogin() + }, + onClothesTap(e: WechatMiniprogram.CustomEvent) { + if (this.data.guest) { + this.onGuestLogin() + return + } const item = e.detail.item as ClothesItem logger.debug(LOG, '点击衣物, uuid=', item && item.clothes_uuid) wx.navigateTo({ @@ -200,6 +250,11 @@ Page({ }, onUpload() { + // 上传需登录：游客态先引导登录，不直接进入上传页 + if (!auth.isLoggedIn()) { + this.onGuestLogin() + return + } wx.navigateTo({ url: '/pages/upload/upload', fail: (e) => logger.warn(LOG, 'navigateTo 上传页失败, err=', e && e.errMsg), diff --git a/miniprogram/pages/wardrobe/wardrobe.wxml b/miniprogram/pages/wardrobe/wardrobe.wxml index 231dcba..3c8f681 100644 --- a/miniprogram/pages/wardrobe/wardrobe.wxml +++ b/miniprogram/pages/wardrobe/wardrobe.wxml @@ -14,7 +14,16 @@ Wardrobe 我的衣橱 - 共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次 + 浏览模式 · 以下为功能示例，登录后同步你的衣物 + 共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次 + + + + + + 浏览模式 · 示例内容仅供体验 + 登录 + @@ -33,7 +42,7 @@ - + @@ -43,7 +52,7 @@ + + + + + + 示例 + + {{item.name}} + {{item.category}} · {{item.color}}色 + + 该分类暂无示例内容 + + @@ -63,7 +85,11 @@ - 没有更多了 + 没有更多了 + + 登录后上传你的衣物，AI 自动抠图与识别 + 去登录 + diff --git a/miniprogram/pages/wardrobe/wardrobe.wxss b/miniprogram/pages/wardrobe/wardrobe.wxss index a9373e6..5a88661 100644 --- a/miniprogram/pages/wardrobe/wardrobe.wxss +++ b/miniprogram/pages/wardrobe/wardrobe.wxss @@ -52,3 +52,32 @@ .wd-tile:active { transform: scale(.975); } + +/* ===== 游客态：示例衣物瓦片（线稿占位 + 示例角标） ===== */ +.gd-img { + position: relative; + width: 100%; + aspect-ratio: 1 / 1; + background: var(--paper-2); + border-radius: var(--r-img); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.gd-img .gd-ph { + width: 56%; + height: 56%; + color: var(--art); +} + +/* 分类下无示例时的整行占位 */ +.gd-none { + grid-column: 1 / -1; + padding: 72rpx 0; + text-align: center; + font-size: 24rpx; + color: var(--ink-3); + letter-spacing: .02em; +} diff --git a/miniprogram/utils/guest.ts b/miniprogram/utils/guest.ts new file mode 100644 index 0000000..5aa2f4d --- /dev/null +++ b/miniprogram/utils/guest.ts @@ -0,0 +1,140 @@ +import { HoroscopeData } from '../types/models' +import { logger } from './logger' + +// 日志模块名 +const LOG = 'guest' + +/** + * 游客态唯一数据源：未登录浏览时展示的本地示例内容 + 统一登录引导。 + * + * 合规背景（微信审核驳回整改）： + * 1. 打开小程序不得直接要求授权登录，用户应能先浏览体验功能服务； + * 2. 仅在用户主动点击受限功能时，才由用户自行选择是否登录。 + * + * 本模块不发起任何网络请求、不改动登录态，只提供静态示例数据与登录跳转入口。 + */ + +// 衣物示例：icon 取 styles/icons.wxss 的线稿图标类名 +export interface GuestClothes { + key: string + name: string + category: string // 与衣橱分类条 value 对齐 + color: string + icon: string +} + +// 穿搭示例：icons 为拼图封面里的线稿占位图标 +export interface GuestOutfit { + key: string + name: string + scene: string + desc: string + icons: string[] +} + +// 分享示例 +export interface GuestShare { + key: string + kind: 'closet' | 'outfit' + title: string + typeText: string + expireText: string +} + +export const GUEST_WARDROBE: GuestClothes[] = [ + { key: 'g1', name: '白衬衫', category: '上装', color: '白', icon: 'icon-shirt' }, + { key: 'g2', name: '直筒牛仔裤', category: '下装', color: '蓝', icon: 'icon-hanger' }, + { key: 'g3', name: '针织开衫', category: '外套', color: '灰', icon: 'icon-shirt' }, + { key: 'g4', name: '黑色连衣裙', category: '连衣裙', color: '黑', icon: 'icon-hanger' }, + { key: 'g5', name: '小白鞋', category: '鞋', color: '白', icon: 'icon-image' }, + { key: 'g6', name: '丝巾', category: '配饰', color: '米', icon: 'icon-sparkles' }, + { key: 'g7', name: '风衣', category: '外套', color: '卡其', icon: 'icon-shirt' }, + { key: 'g8', name: '半身裙', category: '下装', color: '棕', icon: 'icon-hanger' }, +] + +export const GUEST_OUTFITS: GuestOutfit[] = [ + { + key: 'go1', + name: '通勤的干净线条', + scene: '通勤', + desc: '衬衫配直筒裤，外搭一件风衣', + icons: ['icon-shirt', 'icon-hanger', 'icon-image'], + }, + { + key: 'go2', + name: '周末的松弛感', + scene: '周末', + desc: '针织开衫配半身裙，鞋选小白鞋', + icons: ['icon-shirt', 'icon-hanger'], + }, + { + key: 'go3', + name: '晚间约会的黑色', + scene: '约会', + desc: '黑色连衣裙加一条丝巾点亮', + icons: ['icon-hanger', 'icon-sparkles'], + }, +] + +export const GUEST_SHARES: GuestShare[] = [ + { key: 'gs1', kind: 'closet', title: '衣柜分享 · 12 件', typeText: '全量衣橱', expireText: '示例内容' }, + { key: 'gs2', kind: 'outfit', title: '通勤的干净线条', typeText: '穿搭分享 · 3 件', expireText: '示例内容' }, +] + +// 运势示例：日期取当天，保证页头日期不出现过去时间 +export function guestHoroscope(): HoroscopeData { + const d = new Date() + const pad = (n: number) => (n < 10 ? `0${n}` : String(n)) + return { + stat_date: Number(`${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}`), + zodiac: '天秤座', + overall_score: 4, + love_score: 4, + career_score: 3, + wealth_score: 3, + daily_text: + '适合整理衣橱的一天：把常穿的几件放在最容易拿到的位置，出门前的犹豫会少很多。新的配色值得记录，晚间适合与朋友聊聊近况。', + lucky_color: '蓝色', + lucky_number: '7', + } +} + +// 登录跳转防抖：连续点击多个受限入口时只跳一次 +let lastNavAt = 0 + +/** + * 统一登录引导入口（游客态所有受限操作都走这里）。 + * + * 与 utils/request.ts 的 redirectToLogin 的区别： + * - redirectToLogin 用于「登录态失效」的被动兜底，reLaunch 清栈； + * - goLogin 用于用户主动点击受限功能的场景，navigateTo 保留返回路径， + * 用户可随时返回继续浏览，不会被强制清栈。 + */ +export function goLogin(options: { redirect?: string } = {}): void { + const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : [] + const current = pages[pages.length - 1] + if (current && current.route === 'pages/login/login') { + logger.debug(LOG, '已在登录页，忽略本次登录引导') + return + } + const now = Date.now() + if (now - lastNavAt < 800) { + logger.debug(LOG, '登录引导防抖，忽略重复点击') + return + } + lastNavAt = now + + const query = options.redirect ? `?redirect=${encodeURIComponent(options.redirect)}` : '' + logger.info(LOG, '引导进入登录页, redirect=', options.redirect || '') + wx.navigateTo({ + url: `/pages/login/login${query}`, + fail: (e) => { + // 页面栈过深或跳转被占用时降级 redirectTo，保证受限操作一定有出口 + logger.warn(LOG, 'navigateTo 登录页失败，降级 redirectTo, err=', e && e.errMsg) + wx.redirectTo({ + url: `/pages/login/login${query}`, + fail: (err) => logger.warn(LOG, 'redirectTo 登录页失败, err=', err && err.errMsg), + }) + }, + }) +} diff --git a/stitch_ai_ui/1/code.html b/stitch_ai_ui/1/code.html deleted file mode 100644 index 665d4d5..0000000 --- a/stitch_ai_ui/1/code.html +++ /dev/null @@ -1,378 +0,0 @@ - - - - - - 微信授权登录 - 纸条AI衣橱 - - - - - - -
-
- - 第 1 屏｜微信授权登录 -
- 375 × 812 pt -
- - -
- - -
- 9:41 -
- - - - - - -
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - -
- - - - - - - - - -
- - -

- 纸条AI衣橱 -

- - -

- 把你的衣橱，交给 AI 打理 -

- - -
- - 智能抠图 - - - 15维属性识别 - - - 星座运势穿搭 - -
- -
- - -
- - - - - -
- 登录即代表同意 - 《用户协议》 - 和 - 《隐私政策》 -
- -
- - -
- -
- - -
-
- 伴生交互状态原型说明 -
- - -
-
-
- - - - - -
-
- 微信授权取消或失败 - 网络波动或用户未授权，提示「授权登录未完成，请重试」 -
-
- Toast 异常态 -
-
- - - diff --git a/stitch_ai_ui/1/screen.png b/stitch_ai_ui/1/screen.png deleted file mode 100644 index 7ca4483..0000000 Binary files a/stitch_ai_ui/1/screen.png and /dev/null differ diff --git a/stitch_ai_ui/10_tabbar/code.html b/stitch_ai_ui/10_tabbar/code.html deleted file mode 100644 index 5222dec..0000000 --- a/stitch_ai_ui/10_tabbar/code.html +++ /dev/null @@ -1,549 +0,0 @@ - - - - - - 第10屏 通知（tabBar全状态画板） - - - - - - - -
-
-
- -

第 10 屏 ｜ 通知（ tabBar 核心页 · 全状态画板 ）

- 微信小程序 tabBar页 · 375 × 812 pt -
-
- 系统蓝 #007AFF - 系统红 #FF3B30 - 分组底色 #F2F2F7 - 5 Tab 架构已激活「通知」 -
-
-
- 严格遵循业务约束：不展示发送者头像，不提供「全部已读」入口 - 未读标识：标题左侧 6pt 系统蓝小圆点 + 左边缘极浅系统蓝边线 - tabBar 通知 Tab 携带红色未读徽标「7」 - 包含：列表正常态、通知详情二级页面、空态界面 -
-
- - -
- - -
-
- - 状态 1 · 通知列表正常态 ( tabBar 选中 + 未读数「7」) -
- -
- -
- -
- 9:41 -
- - 5G - -
-
- -
-
- 通知 -
- -
- -
-
- - -
-
- 全部 -
-
- 点赞 -
-
- 订单 -
-
- 系统 -
-
-
- - -
- - -
- -
- - -
- -
- - -
-
-
- - - 收到新的点赞 -
- 2小时前 -
-

- 你的穿搭「周末休闲通勤套」收到了一个赞 -

-
-
- - -
-
-
- -
-
-
-
- - 收到新的点赞 -
- 4小时前 -
-

- 你的穿搭「法式复古碎花裙搭配」收到了 3 个新点赞 -

-
-
- - -
-
-
- -
-
-
-
- - 额度包购买成功 -
- 昨天 16:40 -
-

- 你已成功购买「AI 抠图识别 20 次额度包」，现已发放至您的账户，可在衣物上传中直接使用。 -

-
-
- - -
-
-
- -
-
-
-
- - 系统版本更新通知 -
- 昨天 10:15 -
-

- 「纸条AI衣橱」v2.4.0 全新上线：支持穿搭社区多维度标签筛选及衣柜加密分享。 -

-
-
- - -
-
- -
-
-
- 收到新的点赞 - 3天前 -
-

- 你的穿搭「初春干练西装通勤风」收到了 5 个赞 -

-
-
- - -
-
- -
-
-
- 衣柜分享到期提醒 - 5天前 -
-

- 你于 2025.04.08 创建的「春夏全量衣橱」公开快照已到期失效。 -

-
-
- - -
- 已加载全部通知 -
- -
- - -
-
- -
- - 发现 -
- -
- - 衣橱 -
- -
- - 穿搭 -
- -
-
- - - - 7 - -
- 通知 -
- -
- - 我的 -
-
- -
-
- -
-
- - -
-
- - 二级页面 · 通知详情 (点击后自动标为已读) -
- -
- -
-
- 9:41 -
- - 5G - -
-
- -
- - 通知详情 -
- -
- -
-
-
- - -
- -
- - -
- -
- - -

收到新的点赞

- - - 2025-04-15 14:32 - - -
- - -
-

- 你的穿搭「周末休闲通勤套」收到了一个赞。 -

-

- 提示：持续在社区分享高分穿搭，可获得更多穿搭达人推荐与曝光！ -

-
- - -
-
-
- -
-
-
周末休闲通勤套
-
包含 3 件单品 · AI 推荐
-
-
-
- 查看穿搭 - -
-
- -
- - -
- - 该条通知已自动标记为已读，返回列表后小蓝点将消失 -
- -
- - -
-
-
- -
-
- - -
-
- - 状态 3 · 空态界面 (暂无通知消息) -
- -
- -
-
- 9:41 -
- - 5G - -
-
-
-
- 通知 -
- -
- -
-
- - -
-
- 全部 -
-
- 点赞 -
-
- 订单 -
-
- 系统 -
-
-
- - -
- - -
-
- -
- - - -
- - -

还没有消息

-

- 穿搭被点赞、订单动态都会出现在这里 -

- - - - -
- - -
-
-
- - 发现 -
-
- - 衣橱 -
-
- - 穿搭 -
- -
- - 通知 -
-
- - 我的 -
-
-
-
- -
-
- -
- - -
-
- -

第 10 屏 通知规范设计核查表与交互约束

- （严格遵守产品约束与微信小程序规范） -
- -
-
-
- 1. 明确负向约束恪守 -
-

- 界面中绝不展示发送者头像（仅保留左侧分类圆形图标），且不提供「全部已读」入口，分类栏仅提供「全部、点赞、订单、系统」四项轻量切换。 -

-
- -
-
- 2. 未读与已读强弱对比 -
-

- 未读项在标题左侧配置 6pt 系统蓝小圆点，卡片左边缘有一条 3.5px 极浅系统蓝高亮线；已读项移除圆点及边线，文字与图标整体转为柔和灰阶，层级分明。 -

-
- -
-
- 3. 40pt 类型图标配色体系 -
-

- 点赞为心形（浅粉底 #FFE8EC 红字 #FF3B30）、订单为票据（淡蓝底 #E8F2FF 系统蓝）、系统为铃铛（浅灰底 #F2F2F7 灰字）。 -

-
- -
-
- 4. tabBar 联动与二级页面 -
-

- tabBar 通知图标右上角显示红色未读数徽标「7」；点击单条可平滑推入「通知详情」二级页面，进入即刻完成状态回写标记为已读。 -

-
-
-
- - - diff --git a/stitch_ai_ui/10_tabbar/screen.png b/stitch_ai_ui/10_tabbar/screen.png deleted file mode 100644 index 088c100..0000000 Binary files a/stitch_ai_ui/10_tabbar/screen.png and /dev/null differ diff --git a/stitch_ai_ui/11/code.html b/stitch_ai_ui/11/code.html deleted file mode 100644 index 4d6ad89..0000000 --- a/stitch_ai_ui/11/code.html +++ /dev/null @@ -1,610 +0,0 @@ - - - - - - 第11屏 额度与会员商城 - - - - - - - -
-
-
- -

第 11 屏 ｜ 额度与会员商城（全状态画板）

- 微信小程序二级页 · 375 × 812 pt -
-
- 系统蓝 #007AFF - 警示橙 #FF9500 - 淡蓝卡 #E8F2FF - 底色 #F2F2F7 -
-
-
- 严格负向约束：商品绝不展示图片与标签，只呈现名称、描述、售价与原价 - SF Symbols 线性风格图标体系（皇冠/相机/星星/衣柜/衣架） - 包含：商城全量服务、2×2额度网格预警、以及「订单确认」收银级二级子页面 -
-
- - -
- - -
-
- - 状态 1 · 额度与会员商城首页（二级页 · 375×812） -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
- - 我的 -
- 额度与会员 - -
-
-
-
-
-
- - -
- - -
-
- -
- -
-
-
-

月度会员

- VIP -
-

有效期至 2025-05-15

-
-
- - -
- - -
-
- 我的额度 - 剩余 < 20% 时高亮预警 -
-
- - -
-
- 上传额度 -
- 13 - / 20 -
-
- -
-
-
-
-
-
- - -
-
- AI 推荐额度 -
- 18 - / 50 -
-
- -
-
-
-
-
-
- - -
-
- 社区分享额度 - -
-
- 2 - / 20 -
- -
-
-
-
-
-
- - -
-
- 衣柜分享额度 -
- 4 - / 10 -
-
- -
-
-
-
-
-
- -
-
- - -
-
- - 额度明细 -
-
- 近30天消耗流水 - -
-
- - -
- 额度与会员充值 - - -
- - - - - - -
- - -
- - -
-
- -
- -
-
-

月度会员

-

开通后 30 天内无限使用 AI 推荐

-
-
-
-
- ¥19.00 - ¥29.00 -
- -
-
- - -
-
- -
- -
-
-

AI识图上传 20次包

-

智能精准抠图与属性标签解析

-
-
-
-
- ¥6.00 - ¥10.00 -
- -
-
- - -
-
- -
- -
-
-

AI 穿搭推荐 30次包

-

根据天气与场景一键定制穿搭方案

-
-
-
-
- ¥9.90 - ¥15.00 -
- -
-
- - -
-
- -
- -
-
-

衣柜分享额度 5次包

-

支持生成整橱与精选快照给好友

-
-
-
-
- ¥3.00 - ¥5.00 -
- -
-
- - -
-
- -
- -
-
-

社区搭配分享 10次包

-

将个人穿搭方案公开发布至社区展示

-
-
-
-
- ¥4.50 - ¥8.00 -
- -
-
- -
-
- -
- - -
-
-
- -
-
- - -
-
- - 状态 2 · 二级子页面：订单确认（375×812） -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
- - 额度与会员 -
- 订单确认 - -
-
-
-
-
-
- - -
- - -
- 实付金额 -
- ¥19.00 -
-
- - 微信支付官方安全环境 -
-
- - -
-
- 购买商品明细 - 单号: ZT202504159821 -
- - -
-
-
- -
-
-

月度会员服务

-

服务期限：30天（支付成功后即时生效）

-
-
-
-
¥19.00
-
¥29.00
-
-
- - -
-
包含尊享会员权益：
-
- - 无限次使用 AI 智能穿搭推荐 -
-
- - 每月额外赠送 50 次高清抠图上传额度 -
-
- - 专属会员身份标识与好友衣橱全量快照权限 -
-
-
- - -
-
- 商品总价 - ¥29.00 -
-
- 限时立减优惠 - -¥10.00 -
-
- 支付方式 -
- - 微信支付 - -
-
-
- - -

- 点击「微信支付」即代表你同意《会员增值服务协议》。充值额度与会员服务为虚拟数字化商品，开通后不支持退款。 -

- -
- - -
-
- 实付应结： -
- 实付 ¥19.00 -
-
- -
- - -
-
-
- -
-
- - -
-
- - 状态 3 · 状态对比：非会员用户视角的顶部会员卡 -
- -
-
若当前用户为普通未付费用户，顶部展示状态如下：
- - -
-
-
- -
-
-

开通会员

-

解锁更多 AI 与上传权益

-
-
- - -
- -
-
业务映射机制：
-
• 点击「立即开通」后将平滑呼起右侧「订单确认」页面完成支付。
-
• 支付完成后，卡片切换为淡蓝 #E8F2FF 底，并展示有效期至 30 天后。
-
-
-
- -
- - -
-
- - 第 11 屏 额度与会员商城设计核查表与规则映射 - （严格遵守产品约束与微信小程序 HIG） -
-
-
-
- 1. 明确负向约束恪守 -
- 商品卡彻底移除任何形式的商品展示图片与标签，仅展示名称、精简描述、加粗系统蓝售价「¥ + 两位小数」与灰色删除线原价。 -
-
-
- 2. 2×2 额度网格与预警 -
- 上传、AI推荐、社区分享、衣柜分享 4 卡。展示「剩余/总量」等宽大字；进度条默认系统蓝，剩余低于 20% 时自动转为警示橙 #FF9500。 -
-
-
- 3. SF Symbols 线性映射 -
- 严格对齐：会员=皇冠（crown）、上传=相机（camera）、AI=星星（sparkles）、衣柜分享=衣柜（closet）、搭配分享=衣架（hanger）。 -
-
-
- 4. 订单确认二级链路 -
- 包含单号、商品摘要卡、权益清单、优惠核销、实付金额与固定底部「微信支付」主操作，形成真实完整的变现转化漏斗。 -
-
-
- - - diff --git a/stitch_ai_ui/11/screen.png b/stitch_ai_ui/11/screen.png deleted file mode 100644 index 0309ac4..0000000 Binary files a/stitch_ai_ui/11/screen.png and /dev/null differ diff --git a/stitch_ai_ui/12/code.html b/stitch_ai_ui/12/code.html deleted file mode 100644 index df4de67..0000000 --- a/stitch_ai_ui/12/code.html +++ /dev/null @@ -1,547 +0,0 @@ - - - - - - 第12屏 订单（全状态画板） - - - - - - - -
-
-
- -

第 12 屏 ｜ 我的订单（全状态高保真画板）

- 微信小程序二级页 · 375 × 812 pt -
-
- 警示橙 #FF9500 (待支付) - 成功绿 #34C759 (已支付) - 系统蓝 #007AFF (已退款) - 系统灰 #8E8E93 (已过期/取消) -
-
-
-
SF Symbols线性图标体系（订单：doc.text）
-
金额展示等宽数字「¥ + 两位小数」
-
6种订单全状态（待支付、已支付、已取消、已过期、已退款、退款中）
-
完整映射：主列表 + 微信支付半屏 + 申请退款半屏 + 优雅空态
-
-
- - -
- - -
-
- - 状态 1 · 订单列表主页（多态混排） -
- -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
- - 我的 -
-
- 我的订单 -
- -
-
- - - -
-
-
- -
-
-
- - -
- - - - - - -
-
- - -
- - -
- -
-
- - 订单号 …8b29 -
- - 待支付 - -
- -
-
-

月度会员

-

30 天无限使用 AI 推荐与尊享权益

-
- x 1 -
- -
-
- 实付 ¥19.00 -
-
- 剩余 14:32 - - -
-
-
- - -
- -
-
- - 订单号 …9c41 -
- - 已支付 - -
- -
-
-

AI识图上传 20次包

-

永久有效 · 支持高清智能抠图属性识别

-
- x 1 -
- -
-
- 实付 ¥6.00 -
-
- -
-
-
- - -
- -
-
- - 订单号 …7a10 -
- - 已退款 - -
- -
-
-

AI 推荐额度 50次包

-

退款金额原路退回至微信零钱账户

-
- x 1 -
- -
-
- 实付 ¥12.00 -
- 已全额原路返还 -
-
- - -
-
-
- - 订单号 …3f92 -
- - 已取消 - -
-
-
-

衣柜分享 10次包

-

用户手动取消订单

-
- x 1 -
-
-
- 实付 ¥4.00 -
- 交易已关闭 -
-
- - -
- 仅展示近 1 年内生成的有效订单 -
-
-
-
- - -
-
- - 状态 2 · 底部呼起「微信支付面板」 -
- -
- -
- - -
-
- 9:41 -
- - -
-
-
- < 我的 - 我的订单 -
-
-
- - -
- -
- -
- - 微信支付 -
- -
- - -
-

纸条AI衣橱 · 月度会员服务

-
- ¥ - 19.00 -
-
- 官方安全支付环境 -
-
- - -
-
- - 招商银行储蓄卡(8920) -
- -
- - -
- -

- 点击确认即授权微信支付扣款协议 -

-
-
-
-
- - -
-
- - 状态 3 · 弹出「申请退款面板」与轻提示 -
- -
- -
- - -
-
- - 退款申请已提交，等待审核 -
-
- - -
-
- 9:41 -
- -
-
-
- < 我的 - 我的订单 -
-
- - -
- -
-

申请退款

- -
- - -
- -
-
-

AI识图上传 20次包

-

订单号：202504159821

-
- ¥6.00 -
- - -
-
- - 34 / 200字 -
-
- -
-
- - -
- - 未使用的额度与服务在购买7日内支持极速退款，已消耗额度将扣除对应成本。 -
- - -
- -
-
-
-
-
- - -
-
- - 状态 4 · 缺省空态（还没有订单） -
- -
- -
-
- 9:41 -
- -
-
-
-
- - 我的 -
-
- 我的订单 -
-
-
-
-
-
-
- -
- 全部 - 待支付 - 已支付 -
-
- - -
- -
- -
-
-
-
-
-
-
- ¥ -
-
-
- - -
- -

还没有订单

-

- 您还没有产生任何购买记录，开通会员或购买额度包即可畅享智能穿搭 -

- - - -
- - -
-
-
- -
- - -
-
-
-

- 状态徽标与色彩对齐 -

-

- 待支付采用警示橙 #FF9500 并配倒计时；已支付采用成功绿 #34C759；已退款为系统蓝 #007AFF；已取消/已过期为系统灰 #8E8E93。 -

-
-
-

- 微信支付呼起交互 -

-

- 点击待支付卡片的「去支付」，底部滑出标准微信收银台，醒目呈现 ¥19.00 等宽大字、支付方式选择及原生绿色 #07C160「确认支付」按钮。 -

-
-
-

- 申请退款与审核流 -

-

- 已支付订单提供「申请退款」入口，呼起具备 200 字限制的多行输入框；提交后伴随 iOS 样式深色 Toast「退款申请已提交，等待审核」，状态自动进入「退款中」。 -

-
-
-

- 票据线稿空态与引导 -

-

- 缺省时通过极简票据线稿插画 + 灰色文案「还没有订单」承接，并通过描边按钮「去看看额度包」平滑引导用户回流至商城（第 11 屏）。 -

-
-
-
- - - diff --git a/stitch_ai_ui/12/screen.png b/stitch_ai_ui/12/screen.png deleted file mode 100644 index 02713a4..0000000 Binary files a/stitch_ai_ui/12/screen.png and /dev/null differ diff --git a/stitch_ai_ui/13_tabbar/code.html b/stitch_ai_ui/13_tabbar/code.html deleted file mode 100644 index 0f7e7f4..0000000 --- a/stitch_ai_ui/13_tabbar/code.html +++ /dev/null @@ -1,719 +0,0 @@ - - - - - - 第13屏 我的（tabBar全状态画板） - - - - - - - -
-
- -

第 13 屏 ｜ 我的（tabBar 全状态高保真画板）

- 微信小程序 5 个核心 tabBar 之一 - iPhone 375 × 812 pt -
-
-
系统强调蓝 #007AFF
-
警示橙 #FF9500 (低额度预警)
-
健康状态绿 #34C759
-
iOS 分组灰底 #F2F2F7
-
发丝分割线 0.5px #E5E5EA (左缩进16pt)
-
SF Symbols 线性图标系
-
-
- - -
- - -
-
- - 状态 1 · 我的（常规状态 · tabBar 第5项选中） -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
-
我的
-
- -
- -
-
- - -
- - -
-
- -
- -
-
-
-
- 小雨 - - - -
-
- -
- - 月度会员 · 05-15 到期 -
- -
- 白羊座 -
-
-
-
- - - -
- - -
- -
-
-
- -
- 我的额度 -
-
- 上传额度剩 13 - -
-
- - -
-
-
- -
- 我的订单 -
-
- -
-
- - -
-
-
- -
- 我的分享 -
-
- -
-
- - -
-
-
- -
- 我的收藏 -
-
- -
-
- - -
-
-
- -
- 额度明细 -
-
- -
-
-
- - -
- -
-
-
- -
- 编辑资料 -
-
- -
-
- - -
-
-
- -
- 设置生日 -
-
- 03月28日 - -
-
- - -
-
-
- -
- 客服与反馈 -
-
- -
-
- - -
-
-
- -
- 关于纸条AI衣橱 -
-
- -
-
-
- - -
- 纸条AI衣橱 v1.0.0 -
- -
- - -
- -
- - 衣橱 -
- -
- - 穿搭 -
- -
- - 运势 -
- -
- - 通知 -
- -
- - 我的 -
-
-
-
- - -
-
- - 状态 2 · 顶部浅橙额度提示条 + 未设置生日 -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
-
我的
-
- -
- -
-
- - -
-
- - 你的上传额度仅剩 2 次，点击购买额度包 -
- -
- - -
- - -
-
- -
- -
-
-
- 微信用户_928 -
-
- -
- 普通用户 -
- -
- - 设置生日 -
-
-
-
- - - -
- - -
- -
-
-
- -
- 我的额度 -
-
- 上传额度仅剩 2 - -
-
- - -
-
-
- -
- 我的订单 -
-
- - 1 笔待支付 - -
-
- - -
-
-
- -
- 我的分享 -
-
- -
-
- - -
-
-
- -
- 我的收藏 -
-
- -
-
- - -
-
-
- -
- 额度明细 -
-
- -
-
-
- - -
- -
-
-
- -
- 编辑资料 -
-
- -
-
- - -
-
-
- -
- 设置生日 -
-
- 去完善 - -
-
- - -
-
-
- -
- 客服与反馈 -
-
- -
-
- - -
-
-
- -
- 关于纸条AI衣橱 -
-
- -
-
-
- - -
- 纸条AI衣橱 v1.0.0 -
- -
- - -
-
- - 衣橱 -
-
- - 穿搭 -
-
- - 运势 -
-
- - 通知 -
-
- - 我的 -
-
-
-
- - -
-
- - 状态 3 · 子页面「编辑资料」（二级表单 + 原生保存） -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
- -
编辑资料
-
- -
- -
-
- - -
- - -
-
-
- -
-
- -
-
- 点击更换头像 -
- - -
- -
- 昵称 - -
- - -
- 性别 -
- - -
-
- - -
- 生日 -
- 1998-03-28 - -
-
- - -
- 手机号 -
- 138 **** 8920 - 微信绑定 -
-
-
- - -
-

- * 生日用于每日穿搭运势算法计算，不可选择晚于今天的日期；手机号与微信直接绑定，如需修改请解绑微信手机号。 -

-
- -
- - -
- -
- -
-
- -
- - -
-
-
- - 设计规范落地总结（微信小程序 + iOS Human Interface Guidelines） -
-

- 1. 严格对齐 375×812pt 原生栅格与 44pt 状态栏；SF Symbols 线性图标系统；发丝线 0.5px #E5E5EA 并严格左缩进 16pt 与正文标签精准对齐。
- 2. 全面支持个人中心全状态切换：正常个人资料态、额度不足浅橙预警条态（仅剩2次）、以及「编辑资料」二级子页面。 -

-
-
- 纸条AI衣橱 · 全套14屏设计闭环 -
-
- - - diff --git a/stitch_ai_ui/13_tabbar/screen.png b/stitch_ai_ui/13_tabbar/screen.png deleted file mode 100644 index ec91f28..0000000 Binary files a/stitch_ai_ui/13_tabbar/screen.png and /dev/null differ diff --git a/stitch_ai_ui/2_tabbar/code.html b/stitch_ai_ui/2_tabbar/code.html deleted file mode 100644 index e4ecc57..0000000 --- a/stitch_ai_ui/2_tabbar/code.html +++ /dev/null @@ -1,400 +0,0 @@ - - - - - - 第2屏 衣橱（tabBar） - - - - - -
- -
- - - 第 2 屏 ｜ 我的衣橱 (tabBar) - - 375 × 812 pt -
- - -
- -
- -
- 9:41 -
- - - - - - - - - - - - -
-
-
-
-
- - -
-
- -

我的衣橱

- - -
- - - - - - -
- - - - - -
-
- - -
- -
- - - - - - - -
- - -
- 共 128 件 · 上传额度剩余 13 次 - - - - - 云端同步就绪 - -
-
-
- - -
- -
-
-
-
-
- - -
- - -
- -
- - - - - - - -
-
-

白色纯棉T恤

-

上装 · T恤 · 白色

-
-
- - -
-
- - - - - -
- - AI 抠图中 -
-
-
-

复古高腰牛仔裤

-

下装 · 牛仔裤 · 浅蓝

-
-
- - -
-
- - - - - -
- - 智能分类中 -
-
-
-

法式碎花茶歇裙

-

连衣裙 · 中长款 · 碎花

-
-
- - -
-
- - - - - -
- - 排队中 -
-
-
-

燕麦色羊绒开衫

-

外套 · 针织开衫 · 米色

-
-
- - -
-
- - - - - -
- - - - - 失败 · 重试 -
-
-
-

廓形西装外套

-

光线过暗，点击重新识别

-
-
- - -
-
- - - - -
-
-

马衔扣乐福鞋

-

鞋 · 平底鞋 · 棕色

-
-
- -
- - -
- 正在加载更多衣物... -
-
- - - -
- -
- - - -
-
- - -
- - - - - - 衣橱 -
- - -
- - - - - 穿搭 -
- - -
- - - - - 运势 -
- - -
- - - - - 通知 -
- - -
- - - - - - 我的 -
- -
- -
-
-
-
-
- - -
-
伴生交互状态说明（规范要求）
- - -
-
- 衣橱空状态 - Empty State -
- - -
- - - - -
- -

衣橱还空着

-

拍照上传第一件衣物，AI 自动抠图并识别属性

- - -
- - -
-
- 首屏骨架加载态 - Skeleton Screen -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
- - - diff --git a/stitch_ai_ui/2_tabbar/screen.png b/stitch_ai_ui/2_tabbar/screen.png deleted file mode 100644 index b0e17a5..0000000 Binary files a/stitch_ai_ui/2_tabbar/screen.png and /dev/null differ diff --git a/stitch_ai_ui/3/code.html b/stitch_ai_ui/3/code.html deleted file mode 100644 index 17906dc..0000000 --- a/stitch_ai_ui/3/code.html +++ /dev/null @@ -1,560 +0,0 @@ - - - - - - 第3屏 衣物上传（全状态画板） - - - - - - - - -
-
-
-

第 3 屏 ｜ 衣物上传（全状态画板）

- 微信小程序二级规范 · 375 × 812 pt -
-
- 主色: #007AFF - 失败色: #FF3B30 - 背景: #F2F2F7 - | 全状态交付：初始态、动作面板、处理中、失败态、额度不足 -
-
- - -
- -
- - -
-
- 状态 1 · 初始态与 iOS ActionSheet -

40% 虚线上传区 + 底部原生 ActionSheet 面板

-
- -
- -
- 9:41 -
- - - -
-
- - -
-
- - 衣橱 -
-
- 上传衣物 -
- -
-
- - - - - -
-
-
- - - -
-
-
- - -
- -
- -
- -
-
拍照或从相册选择
-
- 支持 JPG / PNG，单张不超过 20MB
上传消耗 1 次上传额度 -
- -
- 剩余 13 次 -
-
- - -
- - AI 将自动抠图并识别 15 项属性 -
- - -
-
📸 拍照建议以获得最佳效果：
-
-
- - 平铺或悬挂单件 -
-
- - 光线充足背景整洁 -
-
-
-
- - -
- - -
- -
- -
-
-
- - -
- 选择上传方式（消耗 1 次额度） -
- - - - - - -
- - -
- -
-
- -
-
-
- - -
-
- 状态 2 · 处理中（Processing） -

所选缩略图 + 三步横向步骤条 + 呼吸动效

-
- -
-
- -
- 9:41 -
- - - -
-
- - -
-
- - 返回 -
-
- 正在处理 -
-
-
- - - - - -
-
-
- - - -
-
-
- - -
- -
- - - - - - - -
- -
- - 分析中... -
-
- - -
-
AI 识别流水线
- - -
- -
- -
-
- - -
-
- -
- 排队中 - 已就绪 -
- - -
-
-
- -
-
-
- AI 抠图 - 进行中 -
- - -
-
- -
- 智能分类 - 等待中 -
-
-
- - -
-
- AI 正在识别你的衣物… -
-
- 通常需要 10 秒左右，请稍候 -
-
- - -
- -
- 处理完成后将自动跳转至衣物详情页，您可微调 15 维智能识别属性。 -
-
-
-
- - -
- 支持切换至后台运行，识别成功后通知推送 -
- -
-
-
- - -
-
- 状态 3 · 失败态（Error Fallback） -

红感叹号 + 额度回退声明 + 双操作分支

-
- -
-
- -
- 9:41 -
- - - -
-
- - -
-
- - 衣橱 -
-
- 上传结果 -
-
-
- - - - - -
-
-
- - - -
-
-
- - -
- -
- -
- - -
- 识别失败：图片抠图失败 -
- - -
- - 本次上传额度已自动退回 -
- -
- 可能是衣物轮廓不够清晰、背景与衣服颜色过于接近，或光线过暗导致。 -
- - -
-
- - 建议尝试： -
-
    -
  • 将衣物平铺在纯色（如纯白/木质地板）背景上
    • -
  • 避免画面中同时出现多件杂物
    • -
  • 开启室内照明或闪光灯重新拍摄
    • -
-
-
-
- - -
- - - - - -
- -
-
-
- -
- - -
-
- -

第 3 屏 异常拦截规范与设计核查表

- （遵循 iOS HIG Alert 对话框规范与小程序异步额度防重机制） -
- -
- -
-
场景：上传前额度为 0 拦截（iOS Alert 规范）
- - -
-
-
- -
-
上传额度不足
-
- 当前剩余 0 次，购买额度包后可继续上传 -
-
- - -
- - -
-
- -

- 符合微信小程序与 iOS 居中 Alert 标准，点击「去购买」直接吊起轻量充值半屏。 -

-
- - -
-
-
- - 关键设计与业务逻辑核对 -
-
    -
  • - 1. - 占屏约 40% 虚线框：精确控制在 310pt 高度，居中布局大相机图标、规格说明（JPG/PNG、20MB 内）与额度提示。 -
    • -
  • - 2. - iOS ActionSheet 标准规格：顶部附带 36×5pt 胶囊 Grabber，选项间配备 0.5px 发丝线；取消项独立成组并与上方保留严格 8pt 间距。 -
    • -
  • - 3. - 三步横向步骤条：清晰划分「排队中（对勾）→ AI 抠图（实心蓝+呼吸动效进行中）→ 智能分类（浅灰圆点等待中）」，并标注文案「AI 正在识别你的衣物… 通常需要 10 秒左右」。 -
    • -
  • - 4. - 识别失败与额度返还：明确提示「识别失败：图片抠图失败」并突出强调「本次上传额度已自动退回」，同时提供「重新上传」与「手动填写信息」双兜底通道。 -
    • -
  • - 5. - 额度不足前置拦截：当剩余上传额度为 0 时，用户点击上传区域或入口即刻弹出 270pt iOS Alert 居中弹窗，避免无谓触发相机权限。 -
    • -
-
-
-
-
-
- - - \ No newline at end of file diff --git a/stitch_ai_ui/3/screen.png b/stitch_ai_ui/3/screen.png deleted file mode 100644 index 717e3b2..0000000 Binary files a/stitch_ai_ui/3/screen.png and /dev/null differ diff --git a/stitch_ai_ui/4/code.html b/stitch_ai_ui/4/code.html deleted file mode 100644 index f85a2f6..0000000 --- a/stitch_ai_ui/4/code.html +++ /dev/null @@ -1,571 +0,0 @@ - - - - - - 第4屏 衣物详情与编辑 - - - - - - - -
-
- - 第 4 屏 ｜ 衣物详情与编辑 - iPhone 375 × 812 pt 规范 · 微信小程序 -
- 浏览态 / 编辑态 / 伴生删除弹窗规范 -
- - -
- - -
-
- 状态 A：标准浏览态 (View State) -
- - -
- - -
- -
- 9:41 -
- - - -
-
- - -
- - - - - 衣物详情 - - -
-
- - - -
-
-
-
-
-
-
-
- - -
- - -
- -
- - - - - - - - - - -
- - AI已识别 -
-
-
- - -
- - -
-
-

白色纯棉T恤

-

识别耗时 1.8s · 15维属性完整

-
- -
- - -
-
基础属性
- - -
- 大类 -
- 上装 - -
-
- - -
- 小类 -
- T恤 - -
-
- - -
- 风格 -
- 简约 - -
-
- - -
- 主色 -
- 白色 - - -
-
- - -
- 副色 -
- — - -
-
-
- - -
-
版型与材质
- - -
- 厚度 -
- 薄 - -
-
- - -
- 版型 -
- 宽松 - -
-
- - -
- 材质 -
- 纯棉 - -
-
- - -
- 花纹 -
- 纯色 - -
-
- - -
- 袖型 -
- 短袖 - -
-
- - -
- 衣长 -
- 常规 - -
-
- - -
- 领型 -
- 圆领 - -
-
-
- - -
-
智能量化评估
- - -
- 正式程度 -
-
- - - - - -
- 3/5 - -
-
- - -
- 适用场合 -
- 休闲 - 通勤 - -
-
- - -
- 视觉冲击力 -
-
- - - - - -
- 4/5 - -
-
-
- - -
-
备注信息
-

去年夏天买的，领口略松

-
- - -
- -
- -
-
- - -
-
-
-
-
- - - -
-
- 状态 B：正在编辑态 (Edit Mode) -
- - -
- - -
- -
- 9:41 -
- - - -
-
- - -
- - - - 编辑衣物 - - -
-
- - - -
-
-
-
-
-
-
-
- - -
- - -
-
- - - - - -
- - 点击重新拍照/上传 -
-
-
- - -
- - -
-
- - -
- -
- - -
-
- 属性微调 (点击弹起选择器) - AI推导准确率 96% -
- - -
- 大类 -
- 上装 - -
-
- - -
- 主色 -
- 白色 - - -
-
- - -
- 版型 -
- 宽松 - -
-
- - -
- 正式程度 -
-
- - - - - -
- 3/5 -
-
- - -
- 适用场合 -
- 休闲 × - 通勤 × - + -
-
-
- - -
-
备注说明
- -
- - -
-
- 底部选择面板示例（大类） - 完成 -
-
- 上装 - 下装 - 连衣裙 - 外套 - 鞋 - 配饰 -
-
- -
-
- - -
-
-
-
-
- -
- - -
-
- -

伴生交互弹窗规范（iOS Alert & 额度回退规则）

- 符合 Apple HIG 居中确认框与业务逻辑 -
- -
- - -
-
场景 1：处理中 / 已成功衣物（回退额度）
- - -
-
-

删除这件衣物？

-

删除后将退回 1 次上传额度，确认删除？

-
-
- - -
-
- - 额度池同步 +1 - -
- - -
-
场景 2：识别失败的衣物（失败时已自动退回）
- - -
-
-

确认删除？

-

该衣物识别失败时额度已返还，删除后将彻底移除记录。

-
-
- - -
-
- - 避免文案误导用户二次退回 - -
- -
-
- - - \ No newline at end of file diff --git a/stitch_ai_ui/4/screen.png b/stitch_ai_ui/4/screen.png deleted file mode 100644 index f34e5bb..0000000 Binary files a/stitch_ai_ui/4/screen.png and /dev/null differ diff --git a/stitch_ai_ui/5_tabbar/code.html b/stitch_ai_ui/5_tabbar/code.html deleted file mode 100644 index c9e9aa0..0000000 --- a/stitch_ai_ui/5_tabbar/code.html +++ /dev/null @@ -1,465 +0,0 @@ - - - - - - 第 5 屏 穿搭（tabBar） - - - - - - -
-
- - 第 5 屏 ｜ 穿搭 (tabBar) - iPhone 375 × 812 pt · 微信小程序规范 -
-
- 我的穿搭 / 已收藏分段流 - 拼图式衣物封面 - 伴生双态空状态 -
-
- - -
- - -
- - -
- -
- 9:41 -
- - - - - - - - - - - - -
-
-
-
-
- - -
- 穿搭 - - -
- - - - - -
-
-
-
-
-
-
- - -
- - -
- - - -
- - -
-
- 共 12 套穿搭组合 -
-
- - - - -
-
- - - - -
- -
- -
- - -
- - - - - 纯棉短T -
- - -
- - - - - - 牛仔裤 -
- - -
- - - - - - 针织开衫 -
- - -
- - - - - - 乐福鞋 -
- - -
- 4 件组合 -
-
- - -
- -
-

初秋通勤三件套

-
- - - - AI 推荐 - - - 已公开 -
-
- - -

- 白T配直筒牛仔裤，清爽干净，外搭浅燕麦开衫保暖又有层次，适合初秋通勤与日常出行。 -

- - -
-
- 通勤 - 休闲 - 4 件衣物 -
- - -
- -
- - - - 128 -
- - -
- - - -
-
-
-
-
- - -
- -
- -
- - - - - 碎花茶歇裙 -
- - -
-
- - - - - 斜挎包 -
-
- - - - 玛丽珍 -
-
- -
- 3 件组合 -
-
- - -
-
-

周末法式漫步装

- - 仅自己可见 -
- -

- 法式碎花中长裙搭配复古玛丽珍鞋与浅色手袋，轻盈惬意，适合周末野餐、画展或咖啡约会。 -

- -
-
- 约会 - 假日 - 3 件衣物 -
- - -
-
- - - - 14 -
- - -
- - - -
-
-
-
-
- - -
- 已经到底了 · 点击右上角可生成更多穿搭 -
- -
- - -
- -
- - - - 衣橱 -
- - -
- - - - 穿搭 -
- - -
- - - - 运势 -
- - -
- - - - 通知 -
- - -
- - - - - 我的 -
-
- - -
-
-
- -
- - -
- - -
-
- -

伴生状态规范（严格遵循全局与微信小程序约定）

-
-

- 穿搭页承担用户核心审美与搭配沉淀。支持「我的穿搭」与「已收藏」双分段切换。卡片统一为白底 16pt 圆角，内嵌多件衣物抠图错落拼图封面（最多10件）。 -

- - -
-
- - - - -
-
还没有穿搭
-
从衣橱挑几件，搭一套吧
- -
「我的穿搭」Tab 空状态
-
- - -
-
- - - -
-
还没有收藏的穿搭
-
在社区或AI推荐中点亮小星星，喜欢的穿搭会出现在这里
-
「已收藏」Tab 空状态
-
-
- - -
-
📐 规范落地核查表
-
- - 分段控件：iOS 标配微滑块，未选中态字色 #8E8E93 -
-
- - 两项操作入口：描边「+ 创建穿搭」+ 实心系统蓝「AI 推荐」 -
-
- - 拼图封面：浅灰圆角底 + 单件抠图微旋转错落排布，右下角标数量 -
-
- - 三态标签：仅自己可见（灰）、已公开（蓝）、AI推荐（#5856D6 靛蓝） -
-
- - 交互图标：点赞（heart）+ 收藏（star，未收藏线框 / 已收藏实心蓝） -
-
- -
- -
- - - diff --git a/stitch_ai_ui/5_tabbar/screen.png b/stitch_ai_ui/5_tabbar/screen.png deleted file mode 100644 index 8d64556..0000000 Binary files a/stitch_ai_ui/5_tabbar/screen.png and /dev/null differ diff --git a/stitch_ai_ui/6/code.html b/stitch_ai_ui/6/code.html deleted file mode 100644 index 267de03..0000000 --- a/stitch_ai_ui/6/code.html +++ /dev/null @@ -1,582 +0,0 @@ - - - - - - 第6屏 穿搭详情（全状态画板） - - - - - - - -
-
-
- -

第 6 屏 ｜ 穿搭详情（全状态高保真画板）

- 二级页面 · 微信小程序规范 - 375 × 812 pt -
-
-
主色 #007AFF
-
情感粉 #FF2D55
-
辅助靛蓝 #5856D6
-
底色 #F2F2F7
-
-
-

涵盖：属主视角（私密与公开控制/更多面板）、他人浏览视角（纯净互动）、公开到社区二次确认弹窗，以及右上角更多动作面板（iOS ActionSheet 规范）。

-
- - -
- - -
-
-
- 视角 1 · 属主管理视角（已公开态） -
-

右上更多面板呼起 · 底部支持「取消公开 / 分享」

-
- - -
- - -
- 9:41 -
- - - -
-
- - -
-
- - 返回 -
- 晴日轻复古通勤 - -
- -
- -
-
- - -
- - -
-
-
- - 拼图大片 · 4 件组合 -
- - - - -
- -
- - - - - 米白针织开衫 (主装) -
- -
-
- - - - 白色纯棉T -
-
- - - - 直筒牛仔裤 -
-
-
- - -
-
-
- -
- 配饰鞋品 -
- 经典黑色皮质乐福鞋 -
-
-
- - -
-
-
-
-

晴日轻复古通勤

-
- - - 通勤 - - - - - AI 推荐 - - - - - 已公开至社区 - -
-
- - -
- - -

- 今日综合运势 4 星。以温暖质感的米白粗棒针织开衫中和修身T恤，搭配高腰直筒原色牛仔裤与皮质乐福鞋，兼顾早晚通勤温差与室内舒适度。 -

- - -
- 生成时间：今天 09:41 · 白羊座运势定制 - 创建于 我的衣橱 -
-
-
- - -
-
- 包含衣物 (4) - 点击卡片查看单品详情 -
- -
- -
-
- - - -
- 米白针织开衫 - 上装 · 针织 -
- - -
-
- - - -
- 白色纯棉T恤 - 上装 · 基础 -
- - -
-
- - - -
- 直筒牛仔裤 - 下装 · 牛仔 -
- - -
-
- -
- 皮质乐福鞋 - 鞋履 · 休闲 -
-
-
-
- - -
-
- - - - -
- - -
- - -
-
- - -
-
-
-
- 穿搭管理与维护 -
- - - - -
- - -
- - -
-
-
- - - -
-
-
- 交互 2 · 公开到社区确认弹窗 -
-

「公开到社区」系统蓝主按钮 · 额度扣减警示

-
- - -
- - -
- 9:41 -
- - - -
-
- - -
-
- - 返回 -
- 山系周末露营搭 -
- -
- -
-
- - -
- -
-
-
-
- - - - - - -
-
自建穿搭
-
-
-
- - -
-
-

山系周末露营搭

-
- 休闲/户外 - 自建 - - - - 仅自己可见 - -
-

防风机能工装外搭与耐磨工装裤，满足轻度徒步与营地露营需求。

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
- -
-

公开穿搭到社区？

-

- 公开后将展示在社区供他人点赞收藏，并消耗 1 次 社区分享额度。 -

-
- 当前剩余分享额度：5 次 -
-
- -
- - -
-
-
- - -
-
-
- - - -
-
-
- 视角 3 · 他人浏览视角（社区公开展现） -
-

右上无更多管理 · 底部操作栏仅保留点赞与收藏

-
- - -
- - -
- 9:41 -
- - - -
-
- - -
-
- - 发现 -
- 法式慵懒周末搭 -
- -
- -
-
- - -
- - -
-
-
- L -
-
-
林小鹿的衣橱
-
已收录 94 件单品 · 搭配博主
-
-
- -
- - -
-
-
- 3 件单品搭配 -
-
-
- - - -
-
- - - -
-
-
-
- - -
-
-

法式慵懒周末搭

-
- - 约会/逛街 - - - AI 灵感推荐 - - - 公开精选 - -
-

- 经典条纹海魂衫搭配高腰阔腿西装裤，随性自在。配搭珍珠小耳钉与法式帆布托特包，自带巴黎左岸假日悠闲氛围。 -

-
-
- - -
- 穿搭所含衣物 (3) -
-
-
- - - -
- 条纹海魂衫 -
-
-
- - - -
- 高腰阔腿裤 -
-
-
- -
- 法式帆布包 -
-
-
-
- - -
- - - - - -
- - -
-
-
- -
- - -
-
- -

第 6 屏 穿搭详情设计核查表与权限映射

-
- -
-
-

1. 视角权限与右上更多面板： 属主视角右上角配备更多操作，点击呼起遵循 iOS ActionSheet 规范的面板（编辑穿搭、高亮警示红的删除穿搭）；他人浏览视角则严格移除编辑/删除/公开等敏感入口。

-

2. 拼图封面与包含衣物清单： 顶部大幅拼图组合多件衣物，下方设有横向横滑包含衣物卡片，单品标注大类与小类，支持点击无缝进入第 4 屏衣物详情。

-
-
-

3. 底部操作栏状态联动： 属主未公开时显示「公开到社区」（系统蓝高亮），已公开时转为描边按钮「取消公开」；他人视角仅保留纯粹的双主互动按钮（点赞与收藏），杜绝非属主误触管理。

-

4. 公开到社区二次确认弹窗： 采用 iOS 标准 270pt 居中毛玻璃 Alert，文案严谨提示「公开后将展示在社区供他人点赞收藏，并消耗 1 次社区分享额度」，防止额度误扣。

-
-
-
- - - diff --git a/stitch_ai_ui/6/screen.png b/stitch_ai_ui/6/screen.png deleted file mode 100644 index 241663d..0000000 Binary files a/stitch_ai_ui/6/screen.png and /dev/null differ diff --git a/stitch_ai_ui/7_ai/code.html b/stitch_ai_ui/7_ai/code.html deleted file mode 100644 index 42e423a..0000000 --- a/stitch_ai_ui/7_ai/code.html +++ /dev/null @@ -1,626 +0,0 @@ - - - - - - 第 7 屏 ｜ AI 穿搭推荐 - 纸条AI衣橱 - - - - - - - -
-
-
- -

第 7 屏 ｜ AI 穿搭推荐

- 二级页面 · 规范级高保真 - iPhone 375 × 812 pt · 微信小程序规范 -
-

从穿搭页进入，涵盖场景选择半屏弹窗、生成中全屏动效、AI推荐结果页及伴生三态异常与180秒频率保护机制。

-
-
- 主色：#007AFF - 辅助：#5856D6 靛蓝 -
-
- - -
- - -
-
- - 阶段 1 · 场景选择半屏弹窗 (可跳过) - -
- -
- -
- 9:41 -
- - - -
-
- - -
- -
-
- AI 推荐 -
-
-
-
-
- - -
- - -
- -
- -
-
-

选择推荐场景

-

结合你的衣橱 128 件衣物精准匹配

-
- -
- - -
- -
-
-
- -
-
-
- 每日推荐 - 默认 -
-

- 按今日白羊座运势、天气与衣橱自动搭配 -

-
-
-
- -
-
- - -
-
-
-
- -
-
- 自定义场景 -

为特定活动或出行场合量身打造

-
-
-
-
- - -
-
- - -
-
-
-
- - -
- - 剩余 AI 推荐额度：5 次 - - 额度说明 -
- - - - - -
-
-
-
-

半屏 Sheet 规范：375pt 贴合底边，支持点击遮罩/跳过直接按每日推荐生成。

-
- - -
-
- - 阶段 2 · 生成中全屏动效页 - -
- -
- -
- 9:41 -
- - - -
-
- - -
- - AI 正在搭配 -
- ··· -
- -
-
- - -
- -
- - - -
- - -
- - - - - - - - - - - - - 智能匹配中 - -
- - -
-

AI 正在为你搭配…

-

- 结合今日白羊座运势与你的 128 件衣物 -

-
- - -
- - - -
- - -
- - 预计耗时 2~3 秒，正在分析色彩和谐度 -
-
- - -
-
-
-
-

生成中全屏态：中央矢量线稿交替，融合星座运势文案，增强感知价值。

-
- - -
-
- - 阶段 3 · AI 推荐结果页 (核心态) - -
- -
- -
- 9:41 -
- - - -
-
- - -
- -
- AI 穿搭推荐 - - - 待保存 - -
-
- ··· -
- -
-
- - -
- -
-
- -
- - AI 专属运势匹配 - - - 4 件单品组合 - -
- - -
- -
- - - - - 米白开衫 -
- - -
- - - - 白色纯棉T -
- - -
- - - - - 直筒牛仔裤 -
- - -
- - - - - 皮质乐福鞋 -
-
- - -
- 点击单品可查看衣物详情 -
-
-
- - -
-
-
-

晴日轻复古通勤组合

- - 通勤 - -
- - -
-
- - - - - - 今日综合运势 4 星 -
-

适合以米白针织开衫搭配直筒牛仔裤，清爽又有层次，兼顾室内空调温度与户外舒适度。

-
- -
- 生成时间：今日 09:41 - 风格：法式轻复古 · 简约 -
-
-
- - -
-
- 推荐单品清单 (4) - 向右滑动查看 -
- -
- -
-
- -
-
-

米白针织开衫

-

上装 · 针织

-
-
- - -
-
- -
-
-

白色纯棉T恤

-

上装 · T恤

-
-
- - -
-
- -
-
-

复古高腰牛仔

-

下装 · 牛仔裤

-
-
-
-
-
- - -
-
- - - - -
- -

- 换一套将再消耗 1 次推荐额度 · 受 180 秒频控保护 -

-
-
-
-

结果页：顶部大拼图 + 4星运势推荐语 + 单品横滑 + 底部固定双操作栏。

-
- -
- - -
-
-
- -

第 7 屏伴生交互状态与三种异常态规范

-
- 微信小程序异常设计规范 (Empty States & Alerts) -
- -
- - -
-
-
- 异常态 1 · 缺少素材 - 前置校验拦截 -
- - -
-
- -
-

还没有可用衣物

-

- 先上传几件处理成功的衣物吧，AI 至少需要 2~3 件单品才能为您搭配 -

-
-
- - -
- - -
-
-
- 异常态 2 · 商业化额度 - 弹窗 Alert 态 -
- - -
-
- -
-
AI 推荐额度不足
-

- 本月免费推荐额度已用完。开通会员或购买加油包，解锁无限次 AI 专属穿搭灵感。 -

-
- - -
-
-
- -

符合 Apple IAP / 微信小程序虚拟支付合规指引

-
- - -
-
-
- 异常态 3 · 180秒频控保护 - 防抖 & HTTP 429 -
- - -
- -
- - 正在生成中，请稍候 (倒计时 142s) -
- - -
- -

上一套生成后 180s 内点击不向后端发起请求，仅轻提示

-
-
-
- -
- 保存交互规范：点击「保存到我的穿搭」后弹出轻提示「已保存到我的穿搭」，并平滑跳转至穿搭详情，标签由「待保存」变为「已保存」。 -
-
- -
-
- - - diff --git a/stitch_ai_ui/7_ai/screen.png b/stitch_ai_ui/7_ai/screen.png deleted file mode 100644 index c11c3d1..0000000 Binary files a/stitch_ai_ui/7_ai/screen.png and /dev/null differ diff --git a/stitch_ai_ui/8_tabbar/code.html b/stitch_ai_ui/8_tabbar/code.html deleted file mode 100644 index 559a00a..0000000 --- a/stitch_ai_ui/8_tabbar/code.html +++ /dev/null @@ -1,638 +0,0 @@ - - - - - - 第8屏 运势（tabBar 全状态画板） - - - - - - - -
-
-
-
- -

第 8 屏 ｜ 运势（ tabBar 全状态高保真画板 ）

- 微信小程序 tabBar 核心页 · 375 × 812 pt -
-

- 规范约束：主色 #007AFF · 浅蓝块面 #E8F2FF · 背景底色 #F2F2F7 · 纯白卡片圆角 16pt · 0.5px 发丝分割线。严格遵循用户生日推算运势机制（不设切换星座），仅设「去设置生日」入口；四项标准维度（综合/爱情/工作/财富）及幸运色与数字。 -

-
-
-
系统蓝 #007AFF
-
淡蓝块面 #E8F2FF
-
底色 #F2F2F7
-
-
-
- - -
- - - - -
-
- - 状态 1 · 每日运势正常展示态（tabBar 选中） -
- 淡蓝圆角大卡 · 四项等宽数字评分 · 幸运色彩与快捷推荐穿搭 - -
- -
- -
- 9:41 -
- - 5G - -
-
- -
-
- 每日运势 - -
- - - -
-
-
- - -
- - -
- -
-
- -
- - - - - -
-
-
- 白羊座 - 火象星座 -
-
-
-
- 2025.04.15 - | - -
-
- - -
-
-
综合运势
-
- 4.0 - / 5.0 -
-
- -
- - - - - -
-
- - -
- - -
-
爱情运势
-
- - - - - -
-
3/5
-
- - -
-
工作运势
-
- - - - - -
-
5/5
-
- - -
-
财富运势
-
- - - - - -
-
4/5
-
- -
-
- - -
-
- - 今日运势解读 -
-

- 今天适合主动出击，贵人运旺，适合尝试新的穿搭风格。 -

-
- - -
- -
-
- 幸运色 -
- - 红色 -
-
-
- -
-
- - -
-
- 幸运数字 - 6 -
-
- -
-
-
- - -
- -

将结合今日综合 4 星运势与衣橱自动搭配

-
- -
- - -
- -
- - 发现 -
- - -
- - 衣橱 -
- - -
- - 穿搭 -
- - -
-
- -
- 运势 -
- - -
- - 我的 -
-
- - -
-
-
-
-
- - - - - -
-
- - 状态 2 · 异常态（用户未设置生日） -
- 插画空态 · 友好引导提示 · 系统蓝「去完善资料」按钮 - -
- -
-
- 9:41 -
- - 5G - -
-
-
-
- 每日运势 -
- - - -
-
-
- - -
- - -
- - - - - - - -
- - - - - - - - - - - -
-
- - -

还没有设置生日

-

- 设置生日后即可查看你的专属星座运势与每日穿搭指南 -

- - - - - 隐私提示：生日仅用于推算星座，不作公开 - -
- - -
-
- - 发现 -
-
- - 衣橱 -
-
- - 穿搭 -
-
- - 运势 -
-
- - 我的 -
-
- - -
-
-
-
-
- - - - - -
-
- - 状态 3 · 加载态与「运势生成中」提示 -
- 骨架屏呼吸微动效 · iOS Toast 轻提示 · 3~5秒自动重试机制 - -
- -
-
- 9:41 -
- - 5G - -
-
-
-
- 每日运势 -
- - - -
-
-
- - -
- - -
-
- - 运势生成中，请稍后重试 - 3s后重试 -
-
- - -
- -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
- -
- - -
-
- - 发现 -
-
- - 衣橱 -
-
- - 穿搭 -
-
- - 运势 -
-
- - 我的 -
-
- - -
-
-
-
-
- -
- - -
-
- -

第 8 屏 运势规范设计核查表与状态机映射

- （严格恪守产品与交互逻辑约束） -
- -
-
-
- - 1. 星座推算与修改边界 -
-

- 严格不提供用户自由「切换星座」的选择器能力，杜绝数据失真；仅通过生日推算。右上角只放「去设置生日」文字按钮，跳转「编辑资料」页面更改生日。 -

-
- -
-
- - 2. 四维评分与等宽数字 -
-

- 仅有综合（4.0）、爱情（3/5）、工作（5/5）、财富（4/5）四项，不臆造健康、社交等未定义维度；数字统一采用 SF Mono 等宽字体。 -

-
- -
-
- - 3. 业务闭环联动 -
-

- 底部提供「生成今日推荐穿搭」描边按钮，直接作为第 7 屏「AI 穿搭推荐」的快捷触发源，携带今日运势评分与幸运色彩参数进入。 -

-
- -
-
- - 4. 首次异步加载与容错 -
-

- 首次无缓存时异步计算，展示整卡骨架屏并弹出 iOS 原生轻提示 Toast「运势生成中，请稍后重试」，前端定时器 3~5 秒后静默自动轮询重试一次。 -

-
-
-
- - - diff --git a/stitch_ai_ui/8_tabbar/screen.png b/stitch_ai_ui/8_tabbar/screen.png deleted file mode 100644 index d9c37f0..0000000 Binary files a/stitch_ai_ui/8_tabbar/screen.png and /dev/null differ diff --git a/stitch_ai_ui/9/code.html b/stitch_ai_ui/9/code.html deleted file mode 100644 index f9b2b4f..0000000 --- a/stitch_ai_ui/9/code.html +++ /dev/null @@ -1,668 +0,0 @@ - - - - - - 第9屏 衣柜分享（全流程画板） - - - - - - - -
-
-
-
- -

第 9 屏 ｜ 衣柜分享（ 3 个全状态核心画板 ）

- 微信小程序二级页面 · 375 × 812 pt -
-

- 规范约束：主色 #007AFF · 背景底色 #F2F2F7 · 纯白卡片圆角 16pt · 0.5px 发丝分割线 · 严格区分属主与访客权限 · 包含有效期面板、分享预览与失效态。 -

-
-
- 3 核心画板 - | - 有效期面板 - | - 小程序分享卡 -
-
-
- - -
- - - - -
-
- -

① 衣柜分享 - 我的分享

- 列表管理 · 正常/过期/取消全态 -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
- - 我的 -
- 衣柜分享 -
- - - -
-
- - -
- - -
-
-
衣柜分享额度
-
当前剩余 4 次分享
-
- -
- -
分享记录 (3)
- - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-

衣柜分享 · 12 件

- 有效中 -
-
- 部分衣物 - 已浏览 28 次 -
-
-
- - 3 天后过期 - - - 管理 - -
-
-
-
- - -
-
- -
-
- -
-
- -
-
- -
-
- +48 -
-
- -
-
-
-

春夏季全量衣橱 · 52 件

-
-
- 全量衣橱 - 已浏览 142 次 -
-
-
- 长期有效 - - 管理 - -
-
-
-
- - -
- 已过期 -
-
-
-
-
-
-
-
-
-

复古通勤胶囊 · 6 件

-
- 部分衣物 - 2025.04.01 过期 -
-
-
- 已失效（不可再查看） -
-
-
-
- - -
- 已取消 -
-
-
-
-
-
-
-
-
-

周末休闲风 · 4 件

-
- 部分衣物 - 属主手动撤销 -
-
-
- 已手动取消公开分享 -
-
-
-
- -
- - -
-
-
- - - - - -
-
- -

② 衣柜分享 - 创建分享

- 多选网格 + 底部有效期面板 + 微信卡片预览 -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
- - 取消 -
- 创建衣柜分享 -
- - - -
-
- - -
- -
第 1 步：选择分享模式
-
- -
-
- -
-
- -
-
部分衣物
-

挑选几件衣物分享给好友

-
- - -
-
- -
-
全量快照
-

分享当前衣橱的全部衣物

-
-
- - -
- 挑选衣物 (已勾选 6 件) - 全选 -
- -
- -
-
- -
- -
-
-
经典条纹海魂衫
-
上装 · T恤
-
- - -
-
- -
- -
-
-
米白针织马甲
-
上装 · 针织
-
-
-
- - -
- - -
- -
- -
-
-

设置分享有效期

-

已选 6 件衣物 · 到期后自动转为失效态

-
- -
- - -
-
- 1 天（临时私密分享） - -
-
- 7 天（推荐常用） -
- -
-
-
- 30 天（整月搭配参考） - -
-
- 长期有效（随时可手动取消） - -
-
- - -
-
- 分享给微信好友卡片样式预览 - 7天有效 -
-
-
-
雨
-
- 小雨 向你分享了 6 件精选衣物 -
-
-
- - - - +3 件 -
-
- 纸条AI衣橱 · 衣柜快照 - 查看衣橱 > -
-
-
- - - -
- - -
-
-
- - - - - -
-
- -

③ 衣柜分享 - 分享详情

- 属主管理态（含取消操作）+ 失效态浮层 -
- -
- -
- 9:41 -
- - 5G - -
-
- - -
-
- - 返回 -
- 衣橱快照详情 -
- - - -
-
- - -
- - -
-
-
-
- 雨 -
-
-
- 小雨 - 属主视角 -
-
分享了 12 件衣橱单品
-
-
-
- - 3 天后过期 - -
访客仅可只读浏览
-
-
- -
- 已获 28 次浏览 · 4 次好友收藏 - -
-
- - -
- 包含衣物清单 (12) - 只读不可编辑 -
- -
- -
-
- -
-
经典条纹海魂衫
-
上装 · 棉质
-
- - -
-
- -
-
米白针织开衫
-
上装 · 羊毛混纺
-
- - -
-
- -
-
高腰阔腿西装裤
-
下装 · 垂坠面料
-
- - -
-
- -
-
法式帆布托特包
-
配饰 · 帆布/皮
-
-
-
- - -
-
- 属主管理视角（访客无此栏） -
- -
- - -
-
- - 伴随状态：失效态展示说明 - - 过期或撤回即触发 -
-
-
- -
-
-
该分享已过期或已被取消
-
属主已关闭查看权限，点击下方即可返回首页
-
- -
-
- - -
-
-
- -
- - -
-

- - 第 9 屏 衣柜分享规范设计核查表与权限映射 -

-
-
-
1. ①「我的分享」全态列表
-

支持 2×2 衣物小图缩略、类型标签（部分/全量）、有效期计算。已取消或已过期卡片统一下降透明度并在右上角加盖灰色胶囊角标「已取消」「已过期」。

-
-
-
2. ② 创建分享与模式单选
-

「部分衣物」与「全量快照」大卡片单选；选部分进入双列勾选网格（蓝描边 + 对勾）；底部操作栏呼起 1/7/30/长期 4 档单选面板与额度消耗提示。

-
-
-
3. ③ 分享卡片预览契约
-

微信原生卡片样式：展示分享者头像与昵称「小雨 向你分享了 6 件精选衣物」、横排衣物缩略图与「查看衣橱」跳转入口，符合社交传播心理。

-
-
-
4. ④ 属主权限与失效态兜底
-

属主底部固定栏专属「取消分享」高危按钮；访客视角纯净无操作栏；失效态整页呈现灰色插画 +「该分享已过期或已被取消」+「返回首页」。

-
-
-
- - - diff --git a/stitch_ai_ui/9/screen.png b/stitch_ai_ui/9/screen.png deleted file mode 100644 index d059717..0000000 Binary files a/stitch_ai_ui/9/screen.png and /dev/null differ diff --git a/stitch_ai_ui/code.html b/stitch_ai_ui/code.html deleted file mode 100644 index 606535b..0000000 --- a/stitch_ai_ui/code.html +++ /dev/null @@ -1,673 +0,0 @@ - - - - - - 补充页 创建 / 编辑穿搭（全状态画板） - - - - - - - -
-
-
-
- 微信小程序 - • - 补充页原型规范 -
-

创建 / 编辑穿搭 · 全场景状态画板

-

严格遵循 375×812pt 原生小程序规范、iOS 设计语言与交互反馈体系

-
-
-
系统强调色 #007AFF
-
删除危险色 #FF3B30
-
底色 #F2F2F7
-
-
-
- - -
-
- - -
-
- State 01 -

创建穿搭 · 初始空态

-

无衣物预览占位、保存按钮置灰禁用

-
- -
- -
- 9:41 -
- - - -
-
- - -
-
- -
-
创建穿搭
- -
-
- -
-
-
-
-
-
-
- - -
- -
-
- -
-

还没有选择衣物

- 点击下方「选择衣物」添加你的单品 -
- - -
- -
-
- - 0/32 -
- -
- - -
-
- - 0/500 -
- -
- - -
-
- - 最多3个 -
-
- - 如：通勤、约会、旅行 -
-
-
- - -
-
-
- -
-
-
选择衣橱单品
-
选择 1~10 件衣物合成画报
-
-
-
- 未选择 - -
-
-
- - -
- -
-
-
- - - -
-
- State 02 -

编辑穿搭 · 预填状态

-

顶部多图抠图拼贴错落摆放、含删除红色按钮

-
- -
- -
- 9:41 -
- - - -
-
- - -
-
- -
-
编辑穿搭
-
-
- -
-
-
-
-
-
-
- - -
- -
-
- 穿搭画报拼图 - 已组合 4 件单品 -
- -
- -
-
- -
- 羊毛西装 - 外套 -
- -
-
- -
- 高领打底 - 上装 -
- -
-
- -
- 垂坠阔腿裤 - 下装 -
- -
-
- -
- 复古乐福 - 鞋履 -
-
-
- - -
- -
-
- - 7/32 -
- -
- - -
-
- - 28/500 -
- -
- - -
-
- - 已选 2 个 -
-
- - 通勤 - - - - 商务会谈 - - - -
-
-
- - -
-
-
- -
-
-
选择衣橱单品
-
点击调整当前穿搭包含的衣物
-
-
-
- 已选 4 件 - -
-
-
- - -
- -
- -
- - -
-
-
- - - -
-
- State 03 -

衣橱多选网格

-

两列卡片、系统蓝选中描边、右上蓝对勾、最多10件

-
- -
- -
- 9:41 -
- - - -
-
- - -
-
- -
-
选择衣橱单品
-
-
- -
-
-
-
-
-
-
- - -
- - - - - -
- - -
-
- -
-
- -
-
- -
-
黑色双排扣西装
-
- 外套 · 秋冬 - 羊毛 -
-
- - -
-
- -
-
- -
-
米白高领羊绒衫
-
- 上装 · 秋冬 - 羊绒 -
-
- - -
-
- -
-
- -
-
垂感高腰阔腿西裤
-
- 下装 · 四季 - 西装面料 -
-
- - -
-
- -
-
- -
-
复古厚底乐福鞋
-
- 鞋履 · 四季 - 牛皮 -
-
- - -
-
- -
-
- -
-
金属细框墨镜
-
- 配饰 · 夏季 - 合金 -
-
- - -
-
- -
-
- -
-
焦糖色托特手袋
-
- 包袋 · 四季 - 植鞣皮 -
-
-
-
- - -
-
-
- 已选 4 件 -
-
最多可选择 10 件单品
-
- -
-
-
- - - -
-
- State 04 -

异常提示 & 确认删除

-

毛玻璃轻提示浮层、iOS 原生系统级确认对话框

-
- -
- -
- 9:41 -
- - - -
-
- - -
-
- -
-
编辑穿搭
-
-
- -
-
-
-
-
- - -
- - -
-
未选衣物点击保存触发：
-
-
- -
- 至少选择 1 件衣物 -
-
- - -
-
名称为空触发：
-
-
- -
- 请填写穿搭名称 -
-
- - -
-
多选超过10件触发：
-
-
- -
- 最多选择 10 件衣物 -
-
- - -
-
保存成功反馈：
-
- - 已保存 -
-
- - -
-
-
确认删除这套穿搭？
-
删除后不可恢复，但不会影响衣橱内的单品。
-
-
- - -
-
- -
- - -
-
-
- -
-
- - -
-
-

- - 补充页设计规范落地检查清单 -

-
-
-
1. 视图与拼图引擎
-

顶部预览区在未选衣物时展示 #F2F2F7 占位与线性衣架；已选时自适应渲染错落层次抠图卡片，并标注已选件数。

-
-
-
2. 完整表单与交互约束
-

名称必填（上限32字）、描述多行（上限500字含字数计数器）、场景快捷标签，底部保存按钮未就绪时降低透明度置灰禁用。

-
-
-
3. 编辑状态与异常防御
-

编辑态顶部为预填数据与独立红色「删除穿搭」入口，弹窗带二次确认；集成 1~10 件衣物阈值校验与毛玻璃 Toast 轻提示。

-
-
-
-
- - - diff --git a/stitch_ai_ui/screen.png b/stitch_ai_ui/screen.png deleted file mode 100644 index 41d4d1a..0000000 Binary files a/stitch_ai_ui/screen.png and /dev/null differ diff --git a/stitch_ai_ui_v2/index.html b/stitch_ai_ui_v2/index.html deleted file mode 100644 index 9bc4a33..0000000 --- a/stitch_ai_ui_v2/index.html +++ /dev/null @@ -1,4123 +0,0 @@ - - - - - -纸条 AI 衣橱 · UI 重构原型 V2 - - - - - - - - -
- - - -
-
-
- -
- 9:41 - - - - - -
- -
- - - -
- -
- -
-
-
-
- - - - - -
- -

纸条AI衣橱

-

把你的衣橱，交给 AI 打理

-
-
-
- -
-
- -
-

登录即代表同意《用户协议》和《隐私政策》

-
-
-
- - -
-
-
-
我的衣橱
-
-
-
-
Wardrobe
-

我的衣橱

-
共 24 件 · 上传额度剩余 3 次
-
- -
-
- - - - - - - -
-
- -
-
-
-
-
-
-
-
-
-
- -
-
- -
衣橱还空着
-
拍照上传第一件衣物，AI 自动抠图并识别属性
- -
-
- -
-
- - - - - - - - -
-
没有更多了
-
-
- -
- - -
-
-
-
穿搭
-
-
-
-
Styling
-

穿搭

-
- -
-
- - - -
-
- -
-
-
-
-
-
- -
-
- -
还没有穿搭
-
从衣橱挑几件，搭一套吧
- -
-
- -
-
- - - - - - - - - -
-
没有更多了
-
-
- -
- - -
-
- - -
-
-
-
每日运势
- -
-
-
-
Daily Fortune
-

每日运势

-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
- -
还没有设置生日
-
设置生日后即可查看你的星座运势
- -
-
- -
-
- -
运势加载失败
-
运势加载失败，请重试
- -
-
- -
-
-
- - 天秤座 -
-
2026.09.15
-
- -
-
-
综合运势
-
8.0
-
-
- - - - - -
-
- -
-
-
爱情运势4/5
-
-
-
-
-
-
-
-
-
工作运势5/5
-
-
-
-
-
-
-
-
-
财富运势3/5
-
-
-
-
-
-
-
-
- -
-
今日运势
-

今天的你在人群中格外松弛，适合把积压的社交邀约一次性兑现。工作上不必急于表态，先听完再回应，会有人替你说话。财运平平，但一件早就想买的基础款值得出手。

-
- -
-
-
幸运色
-
粉色
-
-
-
幸运数字
-
7
-
-
- -
- -
-
-
-
- - -
-
-
-
分享
- -
-
-
-
Sharing
-

分享

-
- -
-
- - -
-
- -
-
- -
还没有分享
-
把衣橱或精选衣物分享给好友
- -
-
- -
-
- - - - - - - -
-
没有更多了
-
-
-
- - -
-
-
-
我的
-
-
-
-
Profile
-
- -
-
-
-
微信用户
-
- 女 - 月度会员 - 天秤座 -
-
- -
- -
- - 你的上传额度仅剩 2 次，点击购买额度包 - -
- - - -
账户Account
-
- - - - -
- -
设置Settings
-
- - - - -
- -
v1.0.0
-
-
- -
-
-
- -
-
上传衣物
-
-
- -
-
-
Upload
-

上传衣物

-
- -
AI 将自动抠图并识别 15 项属性
-
- -
-
-
Processing
-

AI 正在识别你的衣物…

-
通常需要 10 秒左右，请稍候
-
-
-
-
排队中
-
AI 抠图
-
智能分类
-
-
- -
-
-
!
-
识别失败：图片模糊
-
本次上传额度已自动退回
-
-
- - -
-
- -
-
- - -
-
-
- - - -
-
衣物详情
-
- -
- -
-
- -
衣物不存在
-
缺少衣物标识，无法查看详情
- -
-
- -
-
-
Processing
-

AI 正在识别你的衣物…

-
通常需要 10 秒左右，请稍候
-
-
-
-
排队中
-
AI 抠图
-
智能分类
-
-
- -
-
-
!
-
识别失败：图片模糊
-
本次上传额度已自动退回，你可以删除或重新上传
-
-
基础信息Basics
-
-
名称未命名衣物
-
失败原因图片模糊
-
-
- -
-
- -
-
Item
-

白色棉质衬衫

- -
- -
基础属性Basics
-
- - - - - -
- -
版型与材质Cut & Fabric
-
- - - - - - - -
- -
智能量化评估AI Assessment
-
- - - -
- -
备注Notes
-
衣橱里最百搭的一件，配西裤和牛仔裤都不会出错。
- -
- -
- -
- - -
-
- -
-
-
- - - -
-
周末咖啡散步
-
-
-
-
-
-
-
- 3 件 -
-
-
-

周末咖啡散步

-
- 休闲 - 自建 - 仅自己可见 -
-

白衬衫配阔腿西裤，松弛又利落。包袋选深棕，压住整体的轻飘感，周末去咖啡馆或逛展都合适。

-
- -
包含衣物Items
-
- - - -
-
- -
-
- - - - - -
-
-
- - -
-
-
- - - -
-
创建穿搭
-
选择衣橱单品
-
- -
- -
-
-
New Look
-

创建穿搭

-
- -
-
- -
还没有选择衣物
-
点击下方「选择衣物」添加你的单品
-
-
- -
-
-
穿搭名称 *0/32
- -
-
-
穿搭描述0/500
- -
-
-
适合场景0/100
- -
-
- - -
- -
-
-
- - - - - - - -
-
-
- - - - - - -
-
- -
- -
-
- - - -
-
- -
-
-
-
已选 0 件
-
最多可选择 10 件单品
-
- -
-
-
- - -
-
-
- -
-
AI 穿搭推荐
-
- -
- -
-
-
-
AI 正在为你搭配…
-
结合今日运势与你的衣橱
-
-
- -
-
- -
还没有可用衣物
-
先上传几件处理成功的衣物吧
- -
-
- -
-
-
-
-
-
-
- 4 件 -
-
-
-

通勤极简三件套

-
- 通勤 - AI 推荐 -
-

白衬衫打底，阔腿西裤收出腰线，外面加一件驼色大衣。整体只用三种颜色，适合 18~24℃ 的春秋通勤。

-
- -
推荐单品Picks
-
- - - - -
-
- -
- -
-
- - -
-
换一套将再消耗 1 次推荐额度
-
-
- -
-
-
- - - -
-
创建分享
-
选择衣物
-
- -
- -
-
-
New Share
-

创建分享

-
- -
分享方式Method
-
- - -
- - - -
有效期Expiry
-
- - - - -
-
- -
-
-
- - - - - - - -
-
-
- - - - - - -
-
- -
-
-
-
分享已创建
-
-
-
- - 微信用户 向你分享了 8 件衣物 -
-
- - - - -
-
-
- -
- -
- -
- -
-
-
-
已选 1 件
-
部分衣物分享至少选择 1 件
-
- -
-
- -
-
- - -
-
-
- - -
-
-
- -
-
分享详情
-
- -
- -
-
- -
请先登录
-
登录后即可查看好友分享的衣柜
- -
-
- -
-
- -
分享已过期
-
该分享链接已超过有效期
- -
-
- -
-
-
Shared Closet
-

林小满的衣橱

-
-
-
-
-
林小满 分享了 8 件衣物
-
有效期至 2026-09-22 18:30
-
-
-
-
白色棉质衬衫
上装 · 衬衫
-
高腰阔腿西裤
下装 · 长裤
-
米色针织开衫
上装 · 针织衫
-
黑色吊带连衣裙
连衣裙 · 吊带裙
-
驼色羊绒大衣
外套 · 大衣
-
白色真皮小白鞋
鞋 · 板鞋
-
深棕通勤托特包
配饰 · 包袋
-
未命名衣物
 
-
-
没有更多了
-
- -
- -
- - -
-
- - -
-
-
- -
-
穿搭分享
-
- -
- -
-
- -
请先登录
-
登录后即可查看好友分享的穿搭
- -
-
- -
-
- -
分享已取消
-
该分享已被创建者取消
- -
-
- -
-
-
-
-
林小满 分享了穿搭
-
共 3 件单品
-
-
- -
-
-
-
-
- 3 件 -
-
- -
-

通勤极简三件套

-
- 通勤 - 自建 -
-

驼色大衣打底，白衬衫做层次，配西裤收出腰线。整体只用三种颜色，开会与通勤都撑得住。

-
- -
包含衣物Items
-
- - - -
-
- -
- -
- - -
-
- -
-
-
- -
-
通知
-
-
-
-
Inbox
-

通知

-
- -
-
- - - - -
-
- -
-
-
-
-
-
-
- -
-
- -
还没有消息
-
穿搭被点赞、订单动态都会出现在这里
-
-
- -
-
- - - - -
-
没有更多了
-
-
-
- - -
-
-
- -
-
通知详情
-
-
-
-
-
Like
-

你的穿搭被点赞了

-
2026-09-15 09:29
-
林小满 赞了你的穿搭「通勤极简三件套」，去看看吧。公开到社区的穿搭每被点赞一次，都会在这里留下记录。
-
-
-
- - -
-
-
- -
-
额度与会员
-
- -
- -
-
-
Membership
-

额度与会员

-
- -
-
- -
-
开通会员
-
开通会员，解锁更多 AI 与上传权益
-
-
- -
- -
-
我的额度Quota
-
-
2/10
上传
-
6/10
AI 推荐
-
8/10
社区分享
-
4/10
衣柜分享
-
-
- - - -
-
- - - - - - -
-
- -
-
- -
-
月度会员
-
30 天会员权益，含上传 20 次与 AI 推荐 30 次/天
-
¥18.00¥28.00
-
- -
-
- -
-
上传额度包 · 20 次
-
永久有效，每次上传衣物消耗 1 次
-
¥12.00
-
- -
-
- -
-
AI 推荐额度包 · 30 次
-
每日 0 点重置，当日有效
-
¥9.90¥15.00
-
- -
-
- -
-
衣柜分享额度包 · 10 次
-
永久有效，创建衣柜分享时消耗 1 次
-
¥6.00
-
- -
-
-
- -
- -
-
Quota Ledger
-

额度明细

-
-
-
-
上传衣物消耗
2026-09-14 10:22
-
-1
剩余 2
-
-
-
购买上传额度包
2026-09-12 21:05
-
+20
剩余 3
-
-
-
AI 推荐消耗
2026-09-12 08:40
-
-1
剩余 6
-
-
-
删除衣物回退
2026-09-10 19:12
-
+1
剩余 7
-
-
-
创建衣柜分享消耗
2026-09-08 15:31
-
-1
剩余 4
-
-
-
没有更多了
-
- -
-
- - -
-
-
- -
-
我的订单
-
-
-
-
Orders
-

我的订单

-
- -
-
- - - - - - -
-
- -
-
-
-
-
-
- -
-
- -
还没有订单
- -
-
- -
-
- -
-
- 订单 …A3F7 - 虚拟支付 - - 待支付 -
-
月度会员
-
30 天会员
-
- 实付¥18.00 - 剩余 14:52 - - -
-
- -
-
- 订单 …F5B2 - - 待支付 -
-
搭配分享额度包 · 5 次
-
- 实付¥4.90 - 剩余 08:31 - - - -
-
- -
-
- 订单 …B91C - 虚拟支付 - - 已支付 -
-
上传额度包 · 20 次
-
- 实付¥12.00 - - -
-
- -
-
- 订单 …C4D8 - 虚拟支付 - - 已退款 -
-
AI 推荐额度包 · 30 次
-
- 实付¥9.90 -
-
- -
-
- 订单 …7E20 - 虚拟支付 - - 已过期 -
-
衣柜分享额度包 · 10 次
-
- 实付¥6.00 -
-
- -
-
没有更多了
-
-
-
- - -
-
-
- -
-
设计规范
-
-
-
-
Design System
-

设计规范

-
- -
-
零彩色灰阶Ink
-
-
墨黑
#0A0A0A
-
次要
#6E6E73
-
弱化
#AEAEB2
-
占位
#C9C9CE
-
纸面 2
#F7F7F5
-
纸面
#FFFFFF
-
深色块
#1C1C1E
-
-
- 全稿仅允许以上灰阶。唯一彩色例外是业务数据：幸运色色点、衣物主色色点、色板选择器。 -
-
- -
-
双字阶Type Scale
-
-
Display 34我的衣橱
-
Title 26通勤极简三件套
-
Head 20天秤座 · 8.0
-
Body 17白色棉质衬衫
-
Text 15把你的衣橱，交给 AI 打理
-
Caption 13通常需要 10 秒左右，请稍候
-
Eyebrow 10Wardrobe · AI Stylist
-
-
- 衬线（Songti SC / Georgia）用于页面主标题、数字大数与穿搭名；无衬线（PingFang SC）用于正文、按钮与标签。10px 大写英文 eyebrow 是全稿最关键的「高级感装置」。 -
-
- -
-
按钮与胶囊Controls
-
- - - - - -
-
- AI 推荐 - 已支付 - 已过期 - 已退款 - 中性 - 休闲 -
-
- 旧版蓝/绿/橙/红状态色语义已重建为：实心黑＝进行中/强调，描边黑＝已完成，浅灰＝失效/已读，极淡描边＝历史记录。删除与取消一律用黑色下划线文字按钮，不依赖红色。 -
-
- -
-
毛玻璃浮层Glass
-
- 导航栏、底部标签、分段条、弹窗与抽屉统一使用 rgba(255,255,255,.72) + saturate(180%) blur(20px) + 0.5px 发丝边。每屏玻璃层不超过两层，避免滚动掉帧。 -
-
- -
-
度量与发丝线Metrics
-
-
页面边距20px
-
区块间距32px
-
块内间距16px
-
发丝线0.5px rgba(0,0,0,.08)
-
图片圆角4px（大块内容保持直角）
-
控件圆角10px / 胶囊 999px
-
缓动cubic-bezier(.32,.72,0,1) · 320~420ms
-
-
- -
-
衣物线稿占位Line Art
-
-
上装
-
下装
-
连衣裙
-
外套
-
鞋
-
配饰
-
-
- 原型中后端 processed_image 不可得，统一用内联 SVG 灰度线稿占位：1:1 画幅、居中留白、无边框、4px 圆角，像买手店目录里的商品线稿。 -
-
-
-
- -
- - - -
-
-
-
-
-
-
- -
点击页内元素可真实跳转 · 左侧切换页面 · 右侧切换状态与视图
-
- - - -
- - - -