diff --git a/components/ModulePage.vue b/components/ModulePage.vue new file mode 100644 index 0000000..6888d48 --- /dev/null +++ b/components/ModulePage.vue @@ -0,0 +1,83 @@ + + + + + + diff --git a/data/page-catalog.js b/data/page-catalog.js new file mode 100644 index 0000000..b543a46 --- /dev/null +++ b/data/page-catalog.js @@ -0,0 +1,54 @@ +// 全量视觉交付的本地页面目录：只保存页面内容与状态，样式由 ModulePage 的六类母版统一维护。 +export const pageCatalog = { + a03: { number: 'A-03', title: '手机验证', subtitle: '验证手机号，守护家谱记忆', template: 'auth', fields: ['手机号', '验证码'], action: '验证并继续', note: '验证码服务待接入' }, + a04: { number: 'A-04', title: '注册账号', subtitle: '创建属于你的家谱账号', template: 'auth', fields: ['手机号', '设置密码', '确认密码'], action: '提交注册', note: '注册服务待接入' }, + a05: { number: 'A-05', title: '重设密码', subtitle: '通过手机号找回登录凭证', template: 'auth', fields: ['手机号', '验证码', '新密码'], action: '确认重设', note: '密码重设服务待接入' }, + a06: { number: 'A-06', title: '登录状态', subtitle: '账户安全提醒与登录结果', template: 'status', badge: '安', lead: '当前没有需要处理的登录异常', note: '授权取消、账号受限和登录失败会显示在这里', action: '返回登录' }, + + g02: { number: 'G-02', title: '我的家谱', subtitle: '等待第一段家族记忆开始', template: 'status', badge: '谱', lead: '你还没有加入任何家谱', note: '创建自己的家谱，或搜索并申请加入家族', action: '搜索家谱' }, + g07: { number: 'G-07', title: '搜索结果', subtitle: '为你找到 3 部公开家谱', template: 'list', sections: [['洛阳汤氏家谱', '河南 · 洛阳 · 158 位成员'], ['汝南周氏家谱', '河南 · 周口 · 86 位成员'], ['清河张氏家谱', '河北 · 邢台 · 214 位成员']], action: '申请加入' }, + g08: { number: 'G-08', title: '申请加入家谱', subtitle: '留下真实姓名，等待管理员审核', template: 'form', fields: ['真实姓名', '与家谱关系', '申请说明'], action: '提交申请', note: '提交后可在我的申请中查看进度' }, + g09: { number: 'G-09', title: '我的申请', subtitle: '查看加入家谱的审核进度', template: 'timeline', sections: [['洛阳汤氏家谱', '审核中 · 已提交于今天'], ['清河张氏家谱', '已通过 · 可进入家谱']], action: '查看申请说明' }, + g11: { number: 'G-11', title: '家谱设置', subtitle: '管理名称、公开范围与访问说明', template: 'settings', sections: [['家谱名称', '汤氏家谱'], ['公开范围', '仅成员可见'], ['访问说明', '家族资料，请妥善保存'], ['转让管理权', '功能待接入']], action: '保存设置' }, + g12: { number: 'G-12', title: '字辈诗', subtitle: '承载世代相传的字序与家训', template: 'detail', sections: [['启宗敦本，继世传芳', '当前使用字辈 · 敦'], ['字辈维护说明', '管理员可补录或调整字辈诗']], action: '维护字辈诗' }, + + t02: { number: 'T-02', title: '世系提示', subtitle: '世系图当前状态', template: 'status', badge: '树', lead: '请横屏查看完整世系图', note: '无成员、加载失败和权限不足会在此处提示', action: '返回成员目录' }, + t04: { number: 'T-04', title: '新增亲属', subtitle: '补全一段真实的家族关系', template: 'form', fields: ['姓名', '与本人关系', '出生日期', '性别'], action: '保存亲属', note: '保存后将在世系图中显示' }, + t05: { number: 'T-05', title: '编辑成员资料', subtitle: '妥善记录家人的生命信息', template: 'form', fields: ['姓名', '字辈', '出生日期', '人物简介'], action: '保存资料', note: '隐私字段仅向有权限成员展示' }, + t06: { number: 'T-06', title: '编辑亲属关系', subtitle: '确认成员之间的血缘与婚姻关系', template: 'form', fields: ['关联成员', '关系类型', '生效日期'], action: '保存关系', note: '发现关系冲突时会提示管理员处理' }, + t07: { number: 'T-07', title: '成员目录', subtitle: '按世系、姓名或字辈查找成员', template: 'list', sections: [['汤文正', '第 18 世 · 家谱管理员'], ['汤文德', '第 19 世 · 已完善资料'], ['汤文清', '第 19 世 · 待补充信息']], action: '搜索成员' }, + t08: { number: 'T-08', title: '成员状态', subtitle: '隐私、离世与访问权限说明', template: 'settings', sections: [['隐私成员', '仅本人和管理员可见'], ['已故成员', '在世系图中以纪念样式展示'], ['无访问权限', '请联系家谱管理员']], action: '查看隐私说明' }, + + f03: { number: 'F-03', title: '动态详情', subtitle: '一段属于家人的共同记忆', template: 'detail', sections: [['端午家宴', '今年端午全家相聚，留下了许多温暖照片。'], ['家人评论', '愿家族和睦兴旺，岁岁平安。']], action: '写下评论' }, + f04: { number: 'F-04', title: '谱文', subtitle: '收录家族文章、家训与往事', template: 'list', sections: [['家风家训', '代代相传的处世之道'], ['家族往事', '珍贵的口述与文字记录'], ['族谱序言', '一部家谱的起源']], action: '新建谱文' }, + f05: { number: 'F-05', title: '谱文详情', subtitle: '家族文字档案', template: 'detail', sections: [['家风家训', '孝友传家，勤俭立业；敬祖睦宗，诚实待人。'], ['收录时间', '2024 年 5 月 12 日']], action: '收藏谱文' }, + f06: { number: 'F-06', title: '编辑谱文', subtitle: '把值得传承的故事写下来', template: 'form', fields: ['文章标题', '文章分类', '正文内容'], action: '保存谱文', note: '草稿和发布功能待接入' }, + f07: { number: 'F-07', title: '家族相册', subtitle: '让每一张照片都回到家人身边', template: 'list', sections: [['2024 春节团圆', '18 张照片 · 更新于今天'], ['祖居旧影', '32 张照片 · 家族档案'], ['儿童成长', '46 张照片 · 持续更新']], action: '新建相册' }, + f08: { number: 'F-08', title: '相册详情', subtitle: '2024 春节团圆', template: 'detail', sections: [['相册说明', '一家人围坐团圆，留下新春最温暖的瞬间。'], ['照片墙', '共 18 张 · 点击照片可预览']], action: '添加照片' }, + f09: { number: 'F-09', title: '上传照片', subtitle: '选择照片并补充拍摄说明', template: 'form', fields: ['选择照片', '照片说明', '所属相册'], action: '开始上传', note: '上传失败时可在此重新尝试' }, + f10: { number: 'F-10', title: '家族视频', subtitle: '记录会动的家族记忆', template: 'status', badge: '影', lead: '视频服务暂未开放', note: '开放后可在这里浏览家族影像与纪念视频', action: '返回家族首页' }, + + r01: { number: 'R-01', title: '人物录', subtitle: '记录家族中值得铭记的人', template: 'list', sections: [['汤文正', '家谱管理员 · 第 18 世'], ['汤淑华', '家族长辈 · 第 17 世'], ['汤文清', '青年代表 · 第 19 世']], action: '新建人物' }, + r02: { number: 'R-02', title: '人物详情', subtitle: '汤文正', template: 'detail', sections: [['人物小传', '勤于修谱，常年整理族中旧照片与口述资料。'], ['家族印记', '参与维护汤氏家谱与家风家训。']], action: '编辑人物' }, + r03: { number: 'R-03', title: '贺礼簿', subtitle: '记录每一份家人之间的心意', template: 'list', sections: [['新春贺礼', '2024 年春节 · 12 条记录'], ['寿宴礼单', '汤老先生八十寿辰'], ['添丁祝福', '家族新成员的祝愿']], action: '新增贺礼' }, + r04: { number: 'R-04', title: '编辑贺礼', subtitle: '如实留下礼仪往来记录', template: 'form', fields: ['贺礼名称', '赠送人', '日期', '备注'], action: '保存贺礼', note: '删除确认功能待接入' }, + r05: { number: 'R-05', title: '礼仪活动', subtitle: '家族的重要时刻与礼序', template: 'list', sections: [['清明祭祖', '2024 年 4 月 4 日'], ['中秋家宴', '2024 年 9 月 17 日'], ['新春团拜', '2025 年 1 月 29 日']], action: '新建礼仪' }, + r06: { number: 'R-06', title: '礼仪详情', subtitle: '清明祭祖', template: 'detail', sections: [['活动说明', '缅怀先祖，凝聚家人，共叙家风传承。'], ['参与人员', '已登记 26 位家人']], action: '编辑活动' }, + r07: { number: 'R-07', title: '编辑礼仪', subtitle: '补全时间、地点与活动说明', template: 'form', fields: ['活动名称', '活动日期', '举办地点', '活动说明'], action: '保存活动', note: '发布提醒功能待接入' }, + r08: { number: 'R-08', title: '成长日志', subtitle: '珍藏生命成长中的每一个瞬间', template: 'timeline', sections: [['第一次叫爸爸', '2024 年 3 月 · 家人共同记录'], ['入园第一天', '2024 年 9 月 · 留下勇敢的笑脸']], action: '记录成长' }, + r09: { number: 'R-09', title: '人生事', subtitle: '记录值得回望的人生节点', template: 'timeline', sections: [['大学毕业', '2018 年 6 月 · 新的起点'], ['结为连理', '2022 年 10 月 · 家人见证']], action: '新增人生事' }, + r10: { number: 'R-10', title: '家族备忘', subtitle: '把重要的事留给未来的自己', template: 'list', sections: [['修谱资料整理', '请在本月底前补充老照片信息'], ['重阳敬老活动', '10 月 11 日上午在祠堂集合']], action: '新增备忘' }, + r11: { number: 'R-11', title: '功德记录', subtitle: '致谢每一份对家族的守护', template: 'list', sections: [['修缮祠堂', '2024 年春 · 家族共同支持'], ['奖学助学', '2024 年夏 · 鼓励后辈勤学']], action: '新增记录' }, + + n02: { number: 'N-02', title: '消息详情', subtitle: '家谱提醒', template: 'detail', sections: [['申请待审核', '汤文清申请加入家谱，请在审核页面查看。'], ['收到时间', '今天 10:28']], action: '标记已读' }, + + m02: { number: 'M-02', title: '个人资料', subtitle: '完善你的家谱身份信息', template: 'form', fields: ['头像昵称', '真实姓名', '常住地区', '个人简介'], action: '保存资料', note: '头像上传服务待接入' }, + m03: { number: 'M-03', title: '账号与安全', subtitle: '保护你的家谱账号', template: 'settings', sections: [['登录密码', '建议定期更新'], ['绑定手机号', '用于登录和安全验证'], ['登录设备', '暂无异常设备']], action: '检查账号安全' }, + m04: { number: 'M-04', title: '修改密码', subtitle: '设置新的安全密码', template: 'form', fields: ['当前密码', '新密码', '确认新密码'], action: '确认修改', note: '密码服务待接入' }, + m05: { number: 'M-05', title: '修改手机号', subtitle: '更换用于登录的手机号', template: 'form', fields: ['当前手机号', '新手机号', '验证码'], action: '确认更换', note: '短信验证服务待接入' }, + m06: { number: 'M-06', title: '帮助中心', subtitle: '常见问题与使用说明', template: 'settings', sections: [['如何创建家谱', '从家谱首页点击新建家谱'], ['如何邀请家人', '通过申请审核或邀请码加入'], ['资料隐私说明', '个人信息按权限展示']], action: '联系家谱助手' }, + m07: { number: 'M-07', title: '意见反馈', subtitle: '你的建议会让家谱更好', template: 'form', fields: ['反馈类型', '问题描述', '联系方式'], action: '提交反馈', note: '反馈服务待接入' }, + m08: { number: 'M-08', title: '应用推广', subtitle: '邀请亲友共建家族记忆', template: 'detail', sections: [['邀请家人', '将家谱分享给家人，共同补全家族故事。'], ['推广说明', '邀请功能与奖励规则待接入。']], action: '生成邀请海报' }, + m09: { number: 'M-09', title: 'VIP 与订单', subtitle: '家谱服务与订阅记录', template: 'status', badge: '礼', lead: '当前没有订阅订单', note: 'VIP 服务开放后会在这里展示权益与订单', action: '查看服务说明' }, + m10: { number: 'M-10', title: '关于家谱', subtitle: '传承每一段值得珍藏的家族记忆', template: 'settings', sections: [['用户协议', '功能待接入'], ['隐私政策', '功能待接入'], ['当前版本', '1.0.0'], ['退出登录', '仅本地演示']], action: '查看版本说明' } +} diff --git a/design-qa.md b/design-qa.md index 9e818ff..a18b8ac 100644 --- a/design-qa.md +++ b/design-qa.md @@ -1,18 +1,63 @@ -# A-01 Runtime Visual QA +# A02 账号登录 Design QA -- Source visual truth: `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` -- Target state: `412 × 915`, agreement unchecked. -- Static contract: passed on 2026-07-13. -- Runtime screenshot: current `412 × 915` capture accepted by the user on 2026-07-13 as the A-01 visual baseline. +## Comparison target -## Evidence +- Source visual truth: `docs/design/screens/runtime/2026-07-13/A01-360x800.png` and `docs/design/screens/runtime/2026-07-13/G01-360x800.png` are the user-approved brand references. They are not a user-approved A02 mockup. +- Earlier A02 implementation: `docs/design/screens/runtime/2026-07-13/A02-before-360x800.png`. +- Current implementation: `docs/design/screens/runtime/2026-07-13/A02-after-360x800.png`. +- Full-view comparison evidence: `docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png` at 360 × 800. +- Focused region review: full-view comparison is sufficient for this iteration because the corrected areas are the whole panel proportion, complete frame, button ratio and background treatment; no text or icon asset is too small to identify in the captured images. -- The accepted `412 × 915` capture preserves a continuous paper-and-ink background, complete button frames, the intended entry hierarchy and a single-line agreement row. -- The user explicitly accepted this capture as the current A-01 visual baseline; no additional visual tuning is authorized in this phase. +## Comparison history -## Accepted scope +### Iteration 1: Before refactor -- This result accepts A-01's current visual baseline only. -- Existing local behavior remains unchanged: agreement selection enables the A-02 login route; other entries remain local prepared-state prompts. +**Findings** -final result: passed +- [P1] The login form was a thin CSS rectangle rather than a complete genealogy panel. + Location: `pages/auth/a02-login.vue`, `.login-panel`. + Evidence: the left half of `A02-before-after-360x800.png` has a narrow plain outline, unlike A01’s complete buttons and G01’s complete title slips. + Fix: introduced `static/assets/modules/auth/opaque/a02-login-panel.png` as the full opaque paper, double-gold-frame and corner-ornament surface. + +- [P1] The A01 primary button skin was vertically compressed. + Location: `pages/auth/a02-login.vue`, `.login-submit`. + Evidence: the earlier button had a noticeably flatter appearance than the A01 reference. + Fix: set the A02 display slot to 128rpx high and preserved the complete skin as the only button surface. + +- [P2] The main task was visually weaker than the scenery below it. + Location: the A02 above-the-fold layout. + Evidence: the earlier card ended high in the viewport and left more visual weight to the empty mountain background. + Fix: aligned the header with A01 and expanded the panel so its lower paper landscape becomes a deliberate task-ending surface. + +### Iteration 2: Current implementation + +**Findings** + +- [P3] The page uses one existing cloud asset at the heading while the new panel supplies additional pale clouds. This is visually coherent at 360 × 800, but user review should decide whether the heading cloud is one layer too many. + Location: A02 heading, right side. + Evidence: `A02-after-360x800.png`. + Follow-up: remove only the heading cloud if the user finds the top-right decoration busy; do not alter the panel frame or input structure. + +## Required fidelity surfaces + +- Fonts and typography: A02 uses the project’s existing STKaiti/KaiTi hierarchy; current capture keeps the title above form labels and retains readable body copy. +- Spacing and layout rhythm: the larger panel establishes a clear header → title → tab → form → action cadence; 320 × 568 and 360 × 640 intentionally scroll rather than clip the action. +- Colors and visual tokens: cinnabar remains limited to the header, selected Tab, helper action and primary button; antique gold frames and ink-brown body text follow A01/G01. +- Image quality and asset fidelity: the panel is a complete opaque PNG with no generated text, placeholder controls, or CSS-drawn frame; the button remains the approved complete A01 asset. +- Copy and content: account and SMS flows retain their original Chinese copy and real input controls; no visible workflow was invented. + +## Primary interactions checked + +- Account/password state captured at 320 × 568, 360 × 640, 360 × 800 and 412 × 915. +- SMS Tab was clicked through the Chrome debugging session and captured at 360 × 800: `docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png`. +- Form submission behavior is covered by the existing A01/A02 contract and was not changed in this visual pass. + +## Open question + +There is no user-approved A02 visual mockup at the same route and state. A01 and G01 establish the visual language, but they cannot prove that this exact A02 composition meets the user’s subjective standard. + +## Final result + +final result: blocked + +Blocker: wait for the user’s visual approval of the captured A02 account-password state before treating it as the final authentication module sample or propagating it to A03–A05. diff --git a/docs/design/2026-07-13-A01-G01-A02-视觉审视.md b/docs/design/2026-07-13-A01-G01-A02-视觉审视.md new file mode 100644 index 0000000..087dfc2 --- /dev/null +++ b/docs/design/2026-07-13-A01-G01-A02-视觉审视.md @@ -0,0 +1,56 @@ +# A01、G01 与 A02 视觉审视 + +> 日期：2026-07-13 +> 方法：通过用户授权的 Chrome 调试端口捕获真实 360 × 800 页面画面，并逐张检查。 +> 范围：只审视 A01、G01 两张已验收基准页与 A02 当前登录页；本记录不是用户最终验收。 + +## 1. 截图证据 + +| 页面 | 状态 | 截图 | +| --- | --- | --- | +| A01 启动／登录引导 | 用户已验收的认证基准 | `screens/runtime/2026-07-13/A01-360x800.png` | +| G01 我的家谱 | 用户已验收的家谱基准 | `screens/runtime/2026-07-13/G01-360x800.png` | +| A02 账号登录 | 当前实现，未验收 | `screens/runtime/2026-07-13/A02-before-360x800.png` | + +## 2. A01、G01 共同的可继承规则 + +1. **完整资产承担外观。** 朱砂页头、纸纹、主／次按钮、题签框、谱印框、云纹和分区线都有明确的图片资产；文字与交互位于图片之上。 +2. **一屏只有一个视觉主角。** A01 是“家谱”标题与两枚操作按钮；G01 是当前家谱题签。其余山水、竹影和金线只托住主角。 +3. **信息层级有节奏。** 大号楷体标题、常规正文、弱化元信息分明；每一段间保留足够纸面，不把内容挤成普通管理表单。 +4. **朱砂只表达关键动作或当前状态。** A01 的登录、G01 的当前谱印与选中 Tab 使用朱砂；古金负责边框、图标和分隔。 +5. **同一类元素使用同一套成品。** A01 两枚按钮保持一致比例；G01 的当前题签、列表题签、谱印、快捷图标和底部导航形成连续的组件语言。 +6. **背景不抢任务。** 纸纹先提供可读底色，淡墨山水只落在空白和底部，不能穿过输入区或元信息。 + +## 3. A02 当前状态 + +### 可保留项 + +- 已有 A01 同源的纸纹、祠堂页头、谱印、淡墨背景和朱砂按钮皮肤。 +- 账号密码／手机验证码双 Tab、真实 input、忘记密码入口、协议判断与 A05 跳转仍应保留。 +- 360 × 800 下页面没有横向裁切，主按钮可见。 + +### 必须解决的可见问题 + +1. **登录面板是普通的细金线矩形。** 它没有完整纸面、双线、角纹或题签结构，和 A01 的完整按钮、G01 的完整谱签不属于同一视觉系统。 +2. **卡片内容过小且过密。** 标题、双 Tab、标签、占位文本、忘记密码与协议提示都落在一张矮卡内，用户进入后感受到的是“填写控件”，不是“进入家谱”。 +3. **按钮比例被压扁。** 当前主按钮使用约 4.49:1 的 A01 皮肤，却放入更扁的容器，边角和纹样失去端正的卷轴比例。 +4. **标题装饰没有成为层级。** 单侧云纹和细小返回符号像零散点缀，无法支撑“登录家谱”作为当前任务标题。 +5. **底部留白失衡。** 表单卡结束后到山水背景之间有大块无任务留白，而面板内部反而拥挤；需要把留白放在卡片外、把可读空间还给表单。 + +## 4. A02 设计决策 + +- 继续使用“家祠卷轴 · 庄重留白”，不另起现代渐变、玻璃卡片或圆角后台表单画风。 +- 认证头部与 A01 使用同一祠堂高度和谱印位置；头部以下先给清楚的“登录家谱”题签标题，再给完整不透明的认证面板资产。 +- 认证面板只承载 Tab、输入、忘记密码与协议说明；面板自身纸纹、金边和角纹由一张完整不透明 PNG 提供。 +- 主按钮只能按完整皮肤原比例显示；空间不足时缩小宽度或增加高度，不能纵向压缩图片。 +- 淡墨山水放到卡片结束后的留白与底部，作为收束，不穿过输入行。 + +## 5. 可见性与无障碍风险 + +- A02 的弱提示和协议文字在 360 × 800 下偏小，后续实现要保证正文至少 24rpx，主要点击区至少约 44dp。 +- 截图不能证明键盘焦点、读屏标签、错误提示朗读和真实 Android 字体回退；实施后仍需在 HBuilderX/Android 复核。 +- 本次只验证了正常态，没有验证输入错误、验证码倒计时或网络失败态；这些状态保持现有功能边界，不在本轮扩展接口。 + +## 6. 下一步 + +先为 A02 建立完整认证面板和正确比例按钮的资产合同，再做 A02 四尺寸前后对比；用户确认 A02 后，才将它作为 A03–A05 的认证样板。 diff --git a/docs/design/A01_启动登录引导_设计记录.md b/docs/design/A01_启动登录引导_设计记录.md index 25a9cee..85e0635 100644 --- a/docs/design/A01_启动登录引导_设计记录.md +++ b/docs/design/A01_启动登录引导_设计记录.md @@ -62,7 +62,7 @@ | `docs/design/screens/A01-启动登录引导-效果稿-v3-文字注册入口.png` | A-01 视觉比对依据 | 已归档并由用户确认的 v3 效果稿 | `852 × 1846px` PNG；仅作真实 DOM 页面还原和运行时验收对照，不直接作为页面内容 | | `static/assets/backgrounds/auth-ancestral-header-v1.png`、`auth-rice-paper-v1.jpg`、`auth-ink-scenery-v1.png` | A-01 分层页面背景 | 2026-07-13 内置图像生成 | 当前 A-01 使用；不得复用 G-01 背景 | | `static/assets/icons/auth/login-outline-v1.png`、`static/assets/icons/auth/wechat-licensed-v1.png` | A-01 两个按钮图标 | 登录图标复用项目既有资产；微信图标来源与许可见旧记录 | 当前 A-01 使用；微信图标免费使用须在应用“关于/设置”及应用商店描述中保留 Icons8 署名链接 | -| `static/assets/icons/auth/auth-button-corner-v1.png` | 两个入口按钮的四角卷草装饰 | 2026-07-13 根据 412 × 915 视觉基准生成，去绿幕后保存 | `160 × 160px` 透明 PNG；同一张素材镜像至四角 | +| `static/assets/foundation/opaque/a01-primary-button.png`、`a01-secondary-button.png` | A01 登录与微信登录的完整按钮皮肤 | 2026-07-13 以运行时视觉基准的比例与画风生成；不裁切设计图 | `1877 × 418px`、`1881 × 419px` 不透明 PNG；分别承担底色、双线边框和四角纹样，DOM 仅叠放图标与文案 | | `static/assets/icons/auth/auth-divider-knot-v1.png` | 标题上下金线的中心对称中结 | 2026-07-13 根据 412 × 915 视觉基准生成，去绿幕后保存 | `160 × 96px` 透明 PNG；不得改用长祥云 | | `static/assets/icons/auth/auth-title-cloud-v1.png` | “家谱”标题左右祥云 | 2026-07-13 根据 412 × 915 视觉基准生成，去绿幕后保存 | `200 × 120px` 透明 PNG；右侧只允许镜像该素材 | diff --git a/docs/design/A02_账号登录_设计记录.md b/docs/design/A02_账号登录_设计记录.md new file mode 100644 index 0000000..0a1b5e7 --- /dev/null +++ b/docs/design/A02_账号登录_设计记录.md @@ -0,0 +1,55 @@ +# A02 账号登录设计记录 + +> 状态：实现与运行时截图已完成，等待用户视觉验收。 +> 路由：`pages/auth/a02-login?agreed=1` +> 视觉来源：已验收的 A01 启动／登录引导与 G01 我的家谱。 + +## 1. 页面任务 + +让已确认协议的用户在“账号密码登录”与“手机验证码登录”之间切换并进入家谱。页面只保留本地字段校验、A05 忘记密码跳转与待接入 toast；不新增真实账号、短信、微信或后端逻辑。 + +## 2. 视觉结构 + +1. 使用与 A01 同高度的朱砂祠堂头和居中谱印，保证认证入口属于同一品牌场景。 +2. 头部下方放置一张完整不透明的卷轴认证面板，而不是普通 CSS 矩形卡；标题、双 Tab、输入、辅助链接和按钮文字都是可编辑的 Vue 内容层。 +3. 面板上部承载任务标题和双 Tab，中部承载两行输入与辅助操作，下部留给原比例朱砂按钮、协议提示与淡墨山水收束。 +4. 主按钮继续复用 A01 的 `a01-primary-button.png`，显示槽高度为 128rpx；不把约 4.49:1 的皮肤压进旧的 100rpx 矮按钮。 +5. 背景山水只出现在认证面板之外和面板底部，保证输入、标签与占位文本的对比度。 + +## 3. 资产合同 + +| 路径 | 属性／原图尺寸 | 页面显示与职责 | +| --- | --- | --- | +| `static/assets/foundation/opaque/auth-header.png` | opaque / 750×196 | 认证祠堂头，A01 与 A02 共用。 | +| `static/assets/foundation/transparent/brand-seal.png` | transparent / 240×288 | 头部谱印。 | +| `static/assets/modules/auth/opaque/a02-login-panel.png` | opaque / 940×1672 | 完整卷轴登录面板，承载纸纹、双金线、角纹、云纹与底部山水；A02 容器 666rpx × 1184rpx。 | +| `static/assets/foundation/opaque/a01-primary-button.png` | opaque / 1877×418 | A02 唯一主操作按钮皮肤，显示槽 128rpx 高。 | +| `static/assets/foundation/transparent/chevron-right.png` | transparent / 96×96 | 返回图标，水平翻转后使用，不再用文字符号或 CSS 圆框。 | + +认证面板由内置 ImageGen 根据 A01、G01 的已验收截图生成；提示词约束为“完整不透明暖宣纸、双古金线、角纹、边缘淡云竹、中央留给真实控件、无文字无按钮无图标”。生成源保留在 Codex 生成目录，项目运行时只引用上表中的最终资产。 + +## 4. 交互与可读性 + +- 两个 Tab 仍由 `activeTab` 切换；已验证手机验证码 Tab 的真实页面状态。 +- 账号、密码、手机号、验证码继续使用原生 `input`，不烘焙到图片。 +- A02 不绘制面板或主按钮的 CSS `border`／`background`；对应完整外观由图片资产承担。 +- 320 × 568 下可纵向滚动，主按钮位于首屏可达区域；360 × 640、360 × 800、412 × 915 均无横向裁切。 + +## 5. 运行时证据 + +| 状态 | 截图 | +| --- | --- | +| 改造前，账号密码 Tab，360×800 | `screens/runtime/2026-07-13/A02-before-360x800.png` | +| 改造后，账号密码 Tab，320×568 | `screens/runtime/2026-07-13/A02-after-320x568.png` | +| 改造后，账号密码 Tab，360×640 | `screens/runtime/2026-07-13/A02-after-360x640.png` | +| 改造后，账号密码 Tab，360×800 | `screens/runtime/2026-07-13/A02-after-360x800.png` | +| 改造后，账号密码 Tab，412×915 | `screens/runtime/2026-07-13/A02-after-412x915.png` | +| 改造后，手机验证码 Tab，360×800 | `screens/runtime/2026-07-13/A02-sms-360x800.png` | + +## 6. 自动检查 + +- `tests/a02-asset-alpha-audit.ps1`：A02 卷轴面板存在、尺寸稳定、比例稳定、四角不透明。 +- `tests/a01-a02-ui-contract.ps1`：A02 使用完整卷轴面板与完整主按钮；保留 Tab、原生输入、A05 跳转；拒绝 CSS 面板和 CSS 主按钮外观。 +- `tests/compile-audit.ps1`：Vue 结构可编译。 + +用户未确认前，A02 不得在规划中标记为视觉验收完成，也不得作为其他认证页的最终样板直接复制。 diff --git a/docs/design/P00_页面结构与资产清单.md b/docs/design/P00_页面结构与资产清单.md index 04f519d..1051d01 100644 --- a/docs/design/P00_页面结构与资产清单.md +++ b/docs/design/P00_页面结构与资产清单.md @@ -1,6 +1,6 @@ # P00 页面结构与资产清单 -> 状态：页面与现有资产迁移已完成；A01 完整按钮候选待设计图复核，两页截图回归待办。 +> 状态：59 条最终编号路由与第一版统一视觉母版已落地；A01/G01 运行时截图回归及全量逐页视觉精修待办。 > 目的：让页面、路由和资产都有唯一、可读、可审计的归属；本文件是 P-00 的执行清单。 ## 1. 页面命名规则 @@ -16,7 +16,7 @@ 尚未被全量设计确认、但为了保留现有功能骨架的通用页面，必须在文件名中使用 `skeleton`，不能使用含义不明的 `index.vue`、`list.vue`、`detail.vue`。 -## 2. 当前 15 个路由的迁移映射 +## 2. 首批 15 个路由的历史迁移映射 | 当前路由 | 当前可确认用途 | 目标文件 | 处理状态 | | --- | --- | --- | --- | @@ -32,10 +32,11 @@ | `pages/tree/t03-member-profile` | T03 成员档案 | `pages/tree/t03-member-profile.vue` | 已迁移；未验收 | | `pages/family/f01-family-feed` | F01 家族动态 | `pages/family/f01-family-feed.vue` | 已迁移；未验收 | | `pages/family/f02-publish-feed` | F02 发布动态 | `pages/family/f02-publish-feed.vue` | 已迁移；未验收 | -| `pages/skeleton/content-list-skeleton` | 多类型内容列表功能骨架 | `pages/skeleton/content-list-skeleton.vue` | 已迁移；不能计为设计页 | | `pages/notification/n01-message-center` | N01 消息中心 | `pages/notification/n01-message-center.vue` | 已迁移；未验收 | | `pages/profile/m01-profile-home` | M01 我的首页 | `pages/profile/m01-profile-home.vue` | 已迁移；未验收 | +上述表仅保留首批迁移的历史背景；当前最终 59 路由、文件存在性和中文编号注释的唯一合同是 `tests/full-page-visual-contract.ps1`。临时 `content-list-skeleton` 已由谱文、相册、礼仪、备忘录和字辈诗最终页面替代并移除。 + 迁移要求：同一轮更新页面文件、`pages.json`、所有跳转路径、测试和中文文件头注释；未完成全部引用更新时，不得删除旧路径。 ## 3. 最终资产目录 @@ -47,14 +48,18 @@ static/assets/ page-paper.jpg auth-page-paper.jpg auth-header.png + a01-primary-button.png + a01-secondary-button.png root-header-cinnabar.jpg transparent/ brand-seal.png auth-title-cloud.png auth-divider-knot.png - auth-button-corner.png ... modules/ + auth/ + opaque/ + a02-login-panel.png genealogy/ opaque/ transparent/ @@ -66,7 +71,7 @@ static/assets/ transparent/ ``` -当前已迁入的资产以第 4 节台账为准。`auth-primary-button.png`、`auth-secondary-button.png` 尚未生成：在它们验收并替换 A01 的旧角标拼接实现前，A01 不能按“完整资产规则”关闭地基验收。 +当前已迁入的资产以第 4 节台账为准。A01 已使用 `a01-primary-button.png`、`a01-secondary-button.png` 两张完整按钮皮肤替换旧角标拼接实现；是否维持用户验收效果仍以运行时截图回归为准。 ## 4. 当前资产台账 @@ -81,9 +86,9 @@ static/assets/ | `foundation/transparent/auth-ink-scenery.png` | transparent / 750×1334 | 认证页淡墨叠层 | A01、A02 | 保留 | | `foundation/transparent/auth-title-cloud.png` | transparent / 200×120 | A01 标题左右云纹 | A01 | 保留 | | `foundation/transparent/auth-divider-knot.png` | transparent / 160×96 | A01 文案分隔结 | A01 | 保留 | -| `foundation/transparent/auth-button-corner.png` | transparent / 160×160 | A01 旧按钮角标；待完整按钮替换 | A01 | 过渡保留 | -| `foundation/opaque/a01-primary-button-candidate.png` | opaque / 1983×793 | A01 主按钮完整图片候选；未接入 | 无 | 待设计图复核 | -| `foundation/opaque/a01-secondary-button-candidate.png` | opaque / 1983×793 | A01 次按钮完整图片候选；未接入 | 无 | 待设计图复核 | +| `foundation/opaque/a01-primary-button.png` | opaque / 1877×418 | A01 朱砂主按钮完整皮肤 | A01 | 保留；待运行截图回归 | +| `foundation/opaque/a01-secondary-button.png` | opaque / 1881×419 | A01 宣纸次按钮完整皮肤 | A01 | 保留；待运行截图回归 | +| `modules/auth/opaque/a02-login-panel.png` | opaque / 940×1672 | A02 完整卷轴登录面板，含纸纹、双金线、角纹、云纹与底部山水 | A02 | 保留；待用户视觉验收 | | `foundation/transparent/auth-login-outline.png` | transparent / 96×96 | 登录图标 | A01 | 保留 | | `foundation/transparent/auth-wechat.png` | transparent / 96×96 | 微信图标 | A01 | 保留 | | `foundation/transparent/brand-seal.png` | transparent / 240×288 | 品牌谱印 | A01、A02、`PageHeader` | 保留 | @@ -112,7 +117,7 @@ static/assets/ | `modules/genealogy/transparent/shortcut-generation-poem.png` | transparent / 96×96 | 字辈诗入口 | G01 | 保留 | | `modules/genealogy/transparent/shortcut-application.png` | transparent / 96×96 | 审核入口 | G01 | 保留 | -本轮已迁入 35 项在用资产，删除 24 项运行时零引用的旧副本。两张 A01 候选由图像生成工具制作，不是设计图裁切，当前比例约为 2.5:1，尚不符合现有按钮约 3.6:1 的显示比例，严禁直接接入或作为验收通过依据。旧版设计记录中的历史路径不再是资产依据；后续只按本台账引用和维护。 +本轮已迁入 35 项在用资产，删除 24 项运行时零引用的旧副本。A01 的两张完整按钮皮肤由图像生成工具制作，不是设计图裁切；它们的原始比例均约为 4.49:1，并由 A01 页面作为单张底层皮肤引用。旧版设计记录中的历史路径不再是资产依据；后续只按本台账引用和维护。 ## 5. 图片属性规则 diff --git a/docs/design/screens/runtime/2026-07-13/A01-360x800.png b/docs/design/screens/runtime/2026-07-13/A01-360x800.png new file mode 100644 index 0000000..539844c Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A01-360x800.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-after-320x568.png b/docs/design/screens/runtime/2026-07-13/A02-after-320x568.png new file mode 100644 index 0000000..f0d7c13 Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-after-320x568.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-after-360x640.png b/docs/design/screens/runtime/2026-07-13/A02-after-360x640.png new file mode 100644 index 0000000..fcf2b55 Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-after-360x640.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-after-360x800.png b/docs/design/screens/runtime/2026-07-13/A02-after-360x800.png new file mode 100644 index 0000000..98179ba Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-after-360x800.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-after-412x915.png b/docs/design/screens/runtime/2026-07-13/A02-after-412x915.png new file mode 100644 index 0000000..cc1dc75 Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-after-412x915.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-before-360x800.png b/docs/design/screens/runtime/2026-07-13/A02-before-360x800.png new file mode 100644 index 0000000..227f0ea Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-before-360x800.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png b/docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png new file mode 100644 index 0000000..8ce1e06 Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png differ diff --git a/docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png b/docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png new file mode 100644 index 0000000..98179ba Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png differ diff --git a/docs/design/screens/runtime/2026-07-13/G01-360x800.png b/docs/design/screens/runtime/2026-07-13/G01-360x800.png new file mode 100644 index 0000000..5ba2716 Binary files /dev/null and b/docs/design/screens/runtime/2026-07-13/G01-360x800.png differ diff --git a/docs/design/视觉设计交接手册.md b/docs/design/视觉设计交接手册.md new file mode 100644 index 0000000..7391ec1 --- /dev/null +++ b/docs/design/视觉设计交接手册.md @@ -0,0 +1,212 @@ +# 家谱 APP 视觉设计交接手册 + +> 更新日期：2026-07-14 +> 用途：在新电脑或交给新的 GPT 后，按本手册恢复当前工作；它只记录已发生的事实，不把待验收写成已完成。 + +## 1. 当前停点：先看这一节 + +项目已有 59 条最终编号路由，第一版都可以浏览；这不等于 59 个页面已完成视觉验收。 + +- 用户已经验收的视觉基准只有两个：**A01 启动/登录引导**、**G01 我的家谱**。它们的可见效果已冻结。 +- **A02 账号登录**已经完成一次资产化重做、功能回归和多尺寸截图，但**仍在等待用户审美验收**。在用户确认前，不得把 A02 标记为完成，也不得把它的样式批量传播到 A03--A06。 +- 其余模块的页面仍属于后续视觉设计任务；其中不少页面目前由 `components/ModulePage.vue` 与 `data/page-catalog.js` 提供第一版可浏览壳。这个壳是过渡方案，不是最终 UI。 +- 不提交、不推送、不上传 Git；由用户自行处理版本库操作。 + +下一位执行者的第一件事不是开始做新页面，而是请用户查看 A02 的前后对比： + +- `docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png` +- `docs/design/screens/runtime/2026-07-13/A02-after-412x915.png` +- `docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png` + +用户若要求调整，只修改 A02 并重新截图、复核；用户若明确通过，才进入 A03--A06。 + +## 1.1 迁移前必须保留的文件 + +本手册和截图工具是本轮新增文件；换电脑前，用户需在自行提交/上传时包含它们，或完整复制当前工作区。我没有执行任何 Git 暂存、提交、推送或上传操作。 + +至少要保留：`docs/design/视觉设计交接手册.md`、`docs/交接记录.md`、`scripts/capture-chrome-page.js`、A02 页面/资产/测试、`docs/design/screens/runtime/2026-07-13/` 的运行证据，以及现有计划与设计记录。只复制已提交的旧版本会丢失当前停点。 + +## 2. 必读文件与唯一职责 + +| 文件 | 负责什么 | +| --- | --- | +| `AGENTS.md` | 最小修改、保护既有未提交内容、验证后再交付的项目规则。 | +| `docs/规划.md` | 59 个页面的范围、模块顺序和“完成”的定义。 | +| `docs/design/D1_安卓视觉规范与页面壳.md` | Android 页面、资产、布局与中文注释的硬约束。 | +| `docs/design/P00_页面结构与资产清单.md` | 路由、页面文件和资产台账的唯一清单。 | +| `docs/superpowers/plans/2026-07-13-product-design-visual-refinement.md` | 已批准的分模块视觉精修计划和验收顺序。 | +| `docs/design/2026-07-13-A01-G01-A02-视觉审视.md` | A01/G01 视觉证据与旧 A02 的问题定位。 | +| `docs/design/A02_账号登录_设计记录.md` | A02 当前实现、资产、截图和测试记录。 | +| `design-qa.md` | A02 的 Design QA；当前 `final result: blocked`，原因是缺少用户的审美确认。 | +| `docs/交接记录.md` | 简版当前状态与恢复入口；本手册提供完整操作细节。 | + +发生冲突时，按“用户最新明确指令 > AGENTS.md > 上表中的当前台账/计划 > 历史文档”的顺序处理。不要以旧的草案或已废弃的截图切片方案为依据。 + +## 3. 已验收的风格与绝对禁区 + +### A01 与 G01 是可观察的品牌真源 + +- A01 参考图：`docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` +- G01 参考图：`docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png` + +共同语言是“家祠卷轴”：暖宣纸、朱砂主色、古金框线和元数据、墨褐字、低对比淡墨山水。主信息应先于背景被读到，留白是结构的一部分。 + +必须遵守： + +1. 完整按钮、卡片、标题签、页面头图和有边框的装饰面，使用完整的**不透明位图资产**承载底色、纹理和边框。 +2. 透明 PNG 仅承担 Logo、图标、祥云、纹样等叠加元素；CSS 只承担布局、文字、状态与交互，不能伪造完整框、祥云、按钮或卡片。 +3. 不能把整张设计截图或局部截图裁进运行页面；运行资产必须是可复用的独立元素。 +4. 不要修改 A01/G01 已验收的可见布局、比例、配色或装饰。可读其实现和资产，但不能借“整理”改变效果。 +5. 不要用一个通用卡片母版覆盖所有模块。家谱、世系树、内容档案、人物记录、通知和设置必须在同一视觉语言下有各自的信息密度与层级。 + +## 4. A02 的精确状态 + +### 实现内容 + +- 路由与页面：`pages/auth/a02-login.vue` +- 新面板资产：`static/assets/modules/auth/opaque/a02-login-panel.png` + - 实际尺寸：940 × 1672 + - 属性：四角不透明，承载宣纸底、双古金框、角饰与淡纹样 +- 主按钮继续复用已验收完整资产：`static/assets/foundation/opaque/a01-primary-button.png` +- 账号密码与短信验证码 Tab、输入、忘记密码跳转和原有交互均保留；短信 Tab 已经通过真实 Chrome 调试点击截图。 + +### 已保存的运行证据 + +目录：`docs/design/screens/runtime/2026-07-13/` + +| 文件 | 状态 | +| --- | --- | +| `A02-before-360x800.png` | 改造前基线。 | +| `A02-after-320x568.png` | 小屏账号密码态；允许纵向滚动，不允许横向裁切。 | +| `A02-after-360x640.png` | 中屏账号密码态。 | +| `A02-after-360x800.png` | 主对比尺寸。 | +| `A02-after-412x915.png` | 大屏账号密码态。 | +| `A02-sms-360x800.png` | 真实切换后的短信验证码态。 | +| `A02-before-after-360x800.png` | 左旧右新的并排对比。 | + +### 通过/未通过的界线 + +已通过的是：资产尺寸与不透明角审计、A01/A02 页面契约、编译检查、A02 的多尺寸运行截图和短信 Tab 交互。 + +未通过的是：用户对 A02 的最终审美确认。因此 `design-qa.md` 必须保持 `blocked`，直至用户明确确认。用户若觉得顶部祥云偏多，只可先移除 A02 标题右侧的单个祥云；不要无根据改动面板框、输入区或交互。 + +## 5. 换电脑后如何恢复截图与审视能力 + +### 必备环境 + +- Windows、Chrome、HBuilderX（项目当前以 Android `uni-app` 为目标）。 +- Node.js 22 或更高版本；当前脚本已在 Node 24 环境使用原生 `fetch` 与 `WebSocket`。 +- 先在 HBuilderX 启动本地 H5 调试页，并确认它能在 `http://localhost:5173` 打开。不要臆测项目的 npm 启动命令。 + +用专用 Chrome 调试实例开启远程端口；它与用户日常 Chrome 隔离： + +```powershell +$chrome = "$env:ProgramFiles\Google\Chrome\Application\chrome.exe" +Start-Process -FilePath $chrome -ArgumentList ` + '--remote-debugging-port=9222', ` + "--user-data-dir=$env:TEMP\jiapu-chrome-debug", ` + 'http://localhost:5173/#/pages/auth/a02-login?agreed=1' +``` + +确认调试端口与应用页面存在： + +```powershell +Invoke-RestMethod 'http://127.0.0.1:9222/json/list' | Select-Object title, url +``` + +使用项目内的正式脚本截图。它会导航**专用调试 Chrome**的当前标签页、写出 PNG，并在结束时清除设备尺寸覆盖；不能操作或关闭用户的日常 Chrome。 + +```powershell +node scripts/capture-chrome-page.js ` + 'http://localhost:5173/#/pages/auth/a02-login?agreed=1' ` + '.login-page' ` + 'docs/design/screens/runtime/2026-07-14/A02-after-360x800.png' ` + 360 800 +``` + +截图只作为 `docs/design/screens/runtime/<日期>/` 下的设计证据，绝不能放回 `static/assets/` 作为运行资源。每个代表页面至少做 360 × 800；模块代表页还要做 320 × 568、360 × 640、360 × 800、412 × 915。最终 Android/HBuilderX 截图仍需补做，H5 Chrome 截图不能替代它。 + +## 6. 后续执行顺序与每轮产物 + +### 门禁 0：先处理 A02 + +1. 让用户审 A02 前后对比与 412 × 915、短信 Tab 图。 +2. 若不通过：只在 A02 修正明确问题，先调整对应契约测试，再改页面/资产，重新截全尺寸图。 +3. 若通过：把 A02 状态同步到 `docs/规划.md`、`docs/交接记录.md`、`docs/design/A02_账号登录_设计记录.md` 与 `design-qa.md`，再开始 A03--A06。 + +### 其后的模块顺序 + +1. **账号 A03--A06**：以已验收 A02 为认证样板，但每个页面保留各自的任务与状态，不能直接复制表单。 +2. **家谱 G02--G12**：先做空态/创建、家谱概览与世代字等代表页，再扩展搜索、申请、设置。 +3. **世系树 T01--T08**：先建立树、成员档案、关系编辑三类代表页。 +4. **家族内容 F01--F10**：动态、文章、相册、媒体上传分别建立内容档案式层级。 +5. **人物记录 R01--R11**：人物档案、礼仪活动、成长时间线先定样板。 +6. **通知 N01--N02**：区分未读、已读、时间和详情层级，不只依赖颜色。 +7. **我的 M01--M10**：个人身份首页与安全设置先做，后续设置页按统一行式结构展开。 + +`ModulePage.vue`/`page-catalog.js` 中属于本轮模块的临时入口，必须在同一轮被真实页面替换并移除相应依赖；不得保留“新旧两套入口”或把通用壳伪称为精修完成。 + +### 每个模块的固定工作流 + +1. 用 Product Design 对已运行页面截图审视，明确该模块与 A01/G01 的继承点、不同的信息结构与验收尺寸。 +2. 先补/改最小的页面契约测试并看到失败，再实现页面；只有缺少真实视觉资产时才生成资产。 +3. 资产生成后记录路径、尺寸、是否不透明、用途和引用页到 P00；生成图必须经过本地检查后进入 `static/assets/`。 +4. 保留既有可用跳转和返回行为，删除本轮替换后不再使用的临时导入、目录项和样式。 +5. 运行受影响的测试、编译审计、真实路由截图，再更新设计记录、规划和交接状态。 +6. 在用户验收之前，状态统一写“实现与截图完成，视觉待用户验收”。 + +## 7. 下一位 GPT 需要具备并实际调用的能力 + +这不是“只改 CSS”的任务。执行视觉页前应先读取对应技能说明，并在对用户的工作说明中指出正在使用的技能及目的。 + +| 能力/技能 | 何时使用 | 项目中的正确做法 | +| --- | --- | --- | +| `product-design:index`、`product-design:audit` | 审视、评价或设计一个已运行页面/流程时。 | 先拿到真实路由截图，再依据 A01/G01 与页面任务写审视结论；不要靠源码猜好不好看。 | +| Product Design 的 `user-context`、`get-context`、`ideate`、`image-to-code`、Design QA 流程 | 需要探索方向、选择视觉方案、将已选样稿落地、或交付前比对时。 | 有明确视觉真源时先忠实落地；没有真源且需要新方向时先给可比较方案，选定后再实现；最后在 `design-qa.md` 诚实记录通过或阻塞。 | +| `imagegen` | 现有资产无法承担完整视觉面时。 | 先用 A01/G01 实图作为参考，明确输出是完整不透明面板还是透明叠加件；检查实际尺寸/Alpha 后再放入项目。不能用截图代替资产。 | +| `superpowers:brainstorming` 与 `superpowers:writing-plans` | 新模块或会改变页面行为的创作工作开始前。 | 先写清用户目标、交互和验收，不以“尽快”跳过设计决定。 | +| `superpowers:test-driven-development` | 修改功能、路由契约、可审计视觉结构前。 | 先让最小契约测试失败，再做实现；视觉资产同样写尺寸/Alpha/引用审计。 | +| `superpowers:systematic-debugging` | 截图、路由、构建或测试出现意外时。 | 先复现和定位单一根因，禁止靠删测试、盲改样式掩盖问题。 | +| `superpowers:verification-before-completion` | 任何“完成/修好/通过”的表述前。 | 以命令输出、运行截图和用户确认作证据；不能用意图代替验证。 | + +若新电脑没有 Product Design 或 ImageGen 插件，应先安装/启用同等能力；在能力缺失时不能假装完成视觉审计或资产生成。当前环境曾因 Windows 的 `python`/`python3` 只是商店占位符而无法保存 Product Design 的持久 context，这不影响当前项目文件和截图恢复；新环境若有可用 Python，可重新运行该插件的 context 预检。 + +## 8. 验证命令 + +先看工作区，再运行与改动相匹配的聚焦测试；模块阶段结束前运行全量 PowerShell 审计： + +```powershell +git status --short + +Get-ChildItem tests -Filter *.ps1 | Sort-Object Name | ForEach-Object { + & powershell.exe -NoProfile -ExecutionPolicy Bypass -File $_.FullName + if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE } +} + +git diff --check +``` + +A02 当前的最小回归集合： + +```powershell +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a02-asset-alpha-audit.ps1 +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1 +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1 +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/full-page-visual-contract.ps1 +git diff --check +``` + +`git diff --check` 可能提示仓库既有的 CRLF 行尾警告；只有真正的空白错误或非零退出码才算失败。不要 reset、checkout、清空或覆盖用户已有改动。 + +## 9. 文档与资源维护清单 + +每次完成一个页面/模块，按事实更新： + +- `docs/规划.md`：用户验收状态与下一个模块。 +- `docs/design/P00_页面结构与资产清单.md`：新旧资产、尺寸、透明属性、引用位置与去留。 +- `docs/design/<页面>_设计记录.md`：设计意图、截图、交互与测试。 +- `docs/design/screens/runtime/<日期>/`：真实运行截图。 +- `design-qa.md`：修复项、未决项与最终 `passed/blocked` 结果。 +- `docs/交接记录.md` 与本手册：真实停点、风险、下一步；未获得用户确认就不能写成“已完成”。 + +当前工作区已经存在用户和历史任务的未提交改动。后续工作只能触及当前任务需要的文件；若改动与当前设计目标无关，只报告，不清理。 diff --git a/docs/superpowers/plans/2026-07-13-a01-complete-button-assets.md b/docs/superpowers/plans/2026-07-13-a01-complete-button-assets.md new file mode 100644 index 0000000..94b5c58 --- /dev/null +++ b/docs/superpowers/plans/2026-07-13-a01-complete-button-assets.md @@ -0,0 +1,63 @@ +# A01 Complete Button Assets Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` or `superpowers:executing-plans` task by task. Steps use checkbox syntax for tracking. + +**Goal:** Replace A01's temporary CSS-and-corner construction with two audited, complete opaque button images that match the approved A01 button proportion. + +**Architecture:** `pages/auth/a01-entry.vue` remains the owner of button text, icons, agreement gating, and navigation. `a01-primary-button.png` and `a01-secondary-button.png` own each button's paper/vermillion surface, double border, and all four corner ornaments; they render as one non-interactive image beneath the DOM content. + +**Tech Stack:** uni-app Vue 3, scoped SCSS, local opaque PNG assets, PowerShell/System.Drawing audits. + +## Global Constraints + +- Use the approved `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` only as the visual reference; never crop it into a runtime asset. +- Both final assets are opaque, complete button skins at a 4.492:1 native ratio; preserve DOM labels, icons, events, and agreement behaviour. +- Do not use CSS, SVG, or four independently placed corner images to render the final visible border or ornament. +- Work directly in the current checkout. Do not commit, push, or upload Git changes; the user will do that. +- Change only A01 assets, its page, focused audits, and the affected asset ledger/record. + +--- + +### Task 1: Define the complete-button contracts + +**Files:** +- Modify: `tests/a01-asset-alpha-audit.ps1` +- Modify: `tests/a01-a02-ui-contract.ps1` + +**Interfaces:** Produces assertions for `a01-primary-button.png`, `a01-secondary-button.png`, and a single `.entry-button__skin` image per A01 button. + +- [x] Add a `$buttons` list containing the two final assets. For each, load the bitmap, require fully opaque four corners, require an aspect ratio within `0.01` of `4.492`, and output a pass message. Do not add these assets to the transparent-icon loop. +- [x] Require `a01-primary-button.png`, `a01-secondary-button.png`, and `entry-button__skin`; reject `auth-button-corner.png`, `button-corner-asset`, `.entry-button::after`, and the button CSS `background`/`border` construction. +- [x] Verify RED with `powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1` and `powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1`. Both failed because the final assets and page structure did not exist. + +### Task 2: Generate and audit complete opaque button skins + +**Files:** +- Create: `static/assets/foundation/opaque/a01-primary-button.png` +- Create: `static/assets/foundation/opaque/a01-secondary-button.png` + +**Interfaces:** Each asset is a complete opaque PNG skin at 4.492:1. Primary uses muted cinnabar with antique-gold double rules and compact symmetrical corner curls; secondary uses warm rice paper with antique-gold double rules and matching curls. Neither contains copy, icons, a screenshot crop, watermark, or transparency. + +- [x] Generate one source for each skin from the approved A01 visual reference. The sources contain no Chinese text, icon, shadow, or external background in the final crop. +- [x] Crop only the generated source's own button surface. The central paper/vermillion field and vertical side rules were extended without scaling the corner artwork; both skins are within `0.01` of `4.492` and contain no cropped A01 reference pixels. +- [x] Verify asset GREEN with `powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1`; all transparent-asset checks and both opaque-button checks pass. + +### Task 3: Replace the A01 temporary construction and document ownership + +**Files:** +- Modify: `pages/auth/a01-entry.vue` +- Modify: `docs/design/P00_页面结构与资产清单.md` +- Modify: `docs/交接记录.md` + +**Interfaces:** `openLogin`, `prepareWechatLogin`, `prepareRegister`, `prepareAgreement`, and `toggleAgreement` remain unchanged. Each `.entry-button` contains one `.entry-button__skin` image below `.entry-button__content`. + +- [x] Delete the eight `button-corner-asset` images and their CSS. Add the primary/secondary `.entry-button__skin` image as the visual layer inside each button. Remove button borders, pseudo-element inner borders, and button CSS backgrounds; keep dimensions, text, icons, event handlers, and `entry-button__content` stacking unchanged. +- [x] Replace the two unapproved candidate rows in P00 with the two final opaque assets, their actual dimensions, A01 ownership, page reference, and retained status. Update the handoff record to say that the candidates were replaced locally and that runtime screenshot regression remains pending. +- [x] Verify page GREEN with `powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1`, `powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1`, `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`, `powershell -ExecutionPolicy Bypass -File tests\compile-audit.ps1`, and `git diff --check`. Every command exits `0`. + +### Task 4: Complete local verification + +**Files:** None unless a focused audit exposes a defect. + +- [x] Run `Get-ChildItem -LiteralPath tests -Filter *.ps1 | Sort-Object Name | ForEach-Object { & powershell -ExecutionPolicy Bypass -File $_.FullName; if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE } }` and `git diff --check`. All scripts pass and diff check exits `0`. +- [ ] The user captures unchecked A01 screenshots at `412 × 915` and `320 × 568` in HBuilderX/Android. Do not mark visual acceptance complete until those screenshots confirm the button borders, text placement, and small-screen agreement row. diff --git a/docs/superpowers/plans/2026-07-13-full-page-visual-delivery.md b/docs/superpowers/plans/2026-07-13-full-page-visual-delivery.md new file mode 100644 index 0000000..11ae25c --- /dev/null +++ b/docs/superpowers/plans/2026-07-13-full-page-visual-delivery.md @@ -0,0 +1,42 @@ +# 59 页面视觉全量交付执行计划 + +**Goal:** 在 2026-07-17 前完成 59 个规划页面／状态单元的统一移动端视觉与本地可浏览流程。 + +**Architecture:** 以 A01/G01 的宣纸、朱砂、古金、淡墨视觉为唯一系统。新增共享页面壳、六类精致母版与本地页面目录：页面目录只维护内容，母版拥有各自的视觉比例、卡片层级、空状态和操作区；现有页面保留已可用逻辑并接入对应母版。所有页面先覆盖正常／空／待接入可见状态，接口后置。 + +**Global Constraints:** 不改 A01/G01 的已验收可见结构；不接真实接口；只在当前工作目录改动；不执行 Git 提交、推送或上传；每页必须有编号语义路径和中文用途注释。 + +### Task 1: 建立全量路由红灯合同 + +- Create `tests/full-page-visual-contract.ps1`，固定 A01-A06、G01-G12、T01-T08、F01-F10、R01-R11、N01-N02、M01-M10 共 59 条最终路由；检查每条路由对应 Vue 文件、中文页面注释和页面壳引用。 +- 先运行该测试，预期因缺少 44 条路由／页面失败。 + +### Task 2: 建立共享页面壳与本地页面目录 + +- Create `components/ModulePage.vue`：负责纸纹、认证／业务页头、分区、信息卡、表单、列表、空状态、主按钮及安全区；按认证、列表详情、表单编辑、成员档案、内容流、个人消息六种精致母版渲染，禁止只替换标题的单一通用卡片。 +- Create `data/page-catalog.js`：唯一维护每个新增页面的标题、类型、说明、分组和本地操作反馈。 +- Create `components/ModulePage` 所需的最小本地样式，不引入依赖。 + +### Task 3: 补齐账户与家谱模块 + +- Create A03-A06、G02、G07-G09、G11-G12 的页面与路由。 +- Update A02、G03-G06、G10 的样式壳／跳转，保留现有功能逻辑。 +- 每页使用 `ModulePage` 与页面目录的唯一配置；本地操作只提示待接入或进入已设计页面。 + +### Task 4: 补齐世系与家族内容模块 + +- Create T02、T04-T08、F03-F10 的页面与路由。 +- Update T01、T03、F01、F02 的样式壳／跳转，保留当前可用逻辑。 +- 通过成员、关系、动态、谱文、相册、视频的列表／详情／表单三类母版覆盖全部状态。 + +### Task 5: 补齐人物、消息和个人中心模块 + +- Create R01-R11、N02、M02-M10 的页面与路由。 +- Update N01、M01 的样式壳／跳转。 +- 完成档案、礼仪、礼物、成长记录、消息、设置、帮助、VIP 等页面的本地展示与操作反馈。 + +### Task 6: 替换临时入口并完成全量回归 + +- Update `pages.json`、现有跳转路径、`docs/规划.md`、`docs/design/P00_页面结构与资产清单.md`，让 59 路由与页面目录一致；确认零引用后移除临时 `content-list-skeleton` 入口。 +- Run `full-page-visual-contract.ps1`、现有页面／编译审计、`git diff --check`。 +- 在 320×568、360×640、360×800、412×915 集中检查模块代表页；记录用户接下来逐页精修的起点。 diff --git a/docs/superpowers/plans/2026-07-13-product-design-visual-refinement.md b/docs/superpowers/plans/2026-07-13-product-design-visual-refinement.md new file mode 100644 index 0000000..ec93394 --- /dev/null +++ b/docs/superpowers/plans/2026-07-13-product-design-visual-refinement.md @@ -0,0 +1,365 @@ +# 家谱 App Product Design 视觉精修实施计划 + +> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` to implement this plan task-by-task. Do not use parallel agents in this shared workspace. + +**Goal:** 在不改变已验收 A01、G01 可见效果和既有业务交互的前提下，把其余 57 个页面从“可浏览的第一版”精修为同一套、可在 Android 小屏上成立的家祠卷轴界面。 + +**Architecture:** A01、G01 是唯一的视觉源，不把它们当作可以随意模仿的截图，而是提炼为“完整图片资产承担可见外观，Vue/CSS 只承担布局、文字和状态”的设计系统。每个模块先完成一张可截图验收的代表页，再将已确认的面板、按钮、列表或状态结构复用到同模块；不得用 `ModulePage.vue` 的单一通用卡片替代不同任务的页面设计。 + +**Tech Stack:** Vue 3、` diff --git a/pages/auth/a04-register.vue b/pages/auth/a04-register.vue new file mode 100644 index 0000000..f034aa7 --- /dev/null +++ b/pages/auth/a04-register.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/auth/a05-reset-password.vue b/pages/auth/a05-reset-password.vue new file mode 100644 index 0000000..8f64739 --- /dev/null +++ b/pages/auth/a05-reset-password.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/auth/a06-auth-status.vue b/pages/auth/a06-auth-status.vue new file mode 100644 index 0000000..41f7dcf --- /dev/null +++ b/pages/auth/a06-auth-status.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f01-family-feed.vue b/pages/family/f01-family-feed.vue index 29aaeae..378096c 100644 --- a/pages/family/f01-family-feed.vue +++ b/pages/family/f01-family-feed.vue @@ -31,7 +31,15 @@ onMounted(async () => { if (!genealogyId.value) { loadError.value = '请先从“我的家谱”选择一个家谱。'; return } try { feeds.value = await appApi.getFeeds(genealogyId.value) } catch (error) { loadError.value = error.message || '家族动态加载失败。' } }) -const openSection = (type) => uni.navigateTo({ url: `/pages/skeleton/content-list-skeleton?type=${type}&genealogyId=${genealogyId.value}` }) +const openSection = (type) => { + const routes = { + article: '/pages/family/f04-article-list', + album: '/pages/family/f07-album-list', + ceremony: '/pages/records/r05-ritual-list', + record: '/pages/records/r10-memo-list' + } + uni.navigateTo({ url: `${routes[type]}?genealogyId=${genealogyId.value}` }) +} const publishFeed = () => { if (!genealogyId.value) { uni.showToast({ title: '请先选择家谱', icon: 'none' }); return } uni.navigateTo({ url: `/pages/family/f02-publish-feed?type=feed&genealogyId=${genealogyId.value}` }) diff --git a/pages/family/f03-feed-detail.vue b/pages/family/f03-feed-detail.vue new file mode 100644 index 0000000..fc24b03 --- /dev/null +++ b/pages/family/f03-feed-detail.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f04-article-list.vue b/pages/family/f04-article-list.vue new file mode 100644 index 0000000..da8c03d --- /dev/null +++ b/pages/family/f04-article-list.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f05-article-detail.vue b/pages/family/f05-article-detail.vue new file mode 100644 index 0000000..dee77fd --- /dev/null +++ b/pages/family/f05-article-detail.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f06-article-editor.vue b/pages/family/f06-article-editor.vue new file mode 100644 index 0000000..d582099 --- /dev/null +++ b/pages/family/f06-article-editor.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f07-album-list.vue b/pages/family/f07-album-list.vue new file mode 100644 index 0000000..9fc63e2 --- /dev/null +++ b/pages/family/f07-album-list.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f08-album-detail.vue b/pages/family/f08-album-detail.vue new file mode 100644 index 0000000..01af8d3 --- /dev/null +++ b/pages/family/f08-album-detail.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f09-media-upload.vue b/pages/family/f09-media-upload.vue new file mode 100644 index 0000000..3330ff4 --- /dev/null +++ b/pages/family/f09-media-upload.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/family/f10-video-list.vue b/pages/family/f10-video-list.vue new file mode 100644 index 0000000..8a95d9e --- /dev/null +++ b/pages/family/f10-video-list.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/genealogy/g01-my-genealogies.vue b/pages/genealogy/g01-my-genealogies.vue index 9cf9bf2..b36330f 100644 --- a/pages/genealogy/g01-my-genealogies.vue +++ b/pages/genealogy/g01-my-genealogies.vue @@ -217,7 +217,7 @@ const openShortcut = (key) => { const paths = { tree: "/pages/tree/t01-tree-overview", members: `/pages/genealogy/g05-genealogy-overview?id=${currentGenealogy.value.id}`, - poem: "/pages/skeleton/content-list-skeleton?type=poem", + poem: "/pages/genealogy/g12-generation-poems", applications: "/pages/genealogy/g10-application-review", }; uni.navigateTo({ url: paths[key] }); diff --git a/pages/genealogy/g02-empty-genealogies.vue b/pages/genealogy/g02-empty-genealogies.vue new file mode 100644 index 0000000..3862431 --- /dev/null +++ b/pages/genealogy/g02-empty-genealogies.vue @@ -0,0 +1,3 @@ + + + diff --git a/pages/genealogy/g05-genealogy-overview.vue b/pages/genealogy/g05-genealogy-overview.vue index 5b3b826..8a61a15 100644 --- a/pages/genealogy/g05-genealogy-overview.vue +++ b/pages/genealogy/g05-genealogy-overview.vue @@ -1,7 +1,7 @@ @@ -57,7 +57,9 @@ const toTree = () => uni.navigateTo({ url: `/pages/tree/t01-tree-overview?geneal const toFirstPerson = () => uni.navigateTo({ url: `/pages/genealogy/g04-first-ancestor?genealogyId=${genealogyId.value}` }) const toFamily = () => uni.reLaunch({ url: '/pages/family/f01-family-feed' }) const toApplications = () => uni.navigateTo({ url: `/pages/genealogy/g10-application-review?genealogyId=${genealogyId.value}` }) -const showSoon = () => uni.showToast({ title: '该模块将在后续阶段接入', icon: 'none' }) +const toSettings = () => uni.navigateTo({ url: `/pages/genealogy/g11-genealogy-settings?genealogyId=${genealogyId.value}` }) +const toGenerationPoems = () => uni.navigateTo({ url: `/pages/genealogy/g12-generation-poems?genealogyId=${genealogyId.value}` }) +const toJoinApplication = () => uni.navigateTo({ url: `/pages/genealogy/g08-join-application?genealogyId=${genealogyId.value}` }) diff --git a/pages/tree/t01-tree-overview.vue b/pages/tree/t01-tree-overview.vue index fec4bbc..098c82c 100644 --- a/pages/tree/t01-tree-overview.vue +++ b/pages/tree/t01-tree-overview.vue @@ -2,14 +2,14 @@ @@ -40,7 +40,9 @@ const loadTree = async (query) => { onLoad(loadTree) const nodeStyle = (member) => ({ left: `${member.x}%`, top: `${member.y}%` }) const toMember = () => uni.navigateTo({ url: `/pages/tree/t03-member-profile?genealogyId=${genealogyId.value}&personId=${selected.value.id}` }) -const showSoon = () => uni.showToast({ title: '亲属关系编辑将在下一阶段接入', icon: 'none' }) +const toDirectory = () => uni.navigateTo({ url: `/pages/tree/t07-member-directory?genealogyId=${genealogyId.value}` }) +const toRelationship = () => uni.navigateTo({ url: `/pages/tree/t06-edit-relationship?genealogyId=${genealogyId.value}` }) +const toAddRelative = () => uni.navigateTo({ url: `/pages/tree/t04-add-relative?genealogyId=${genealogyId.value}&personId=${selected.value.id}` })