视觉审核完成30%
This commit is contained in:
rain
@@ -0,0 +1,16 @@
|
||||
# A01 品牌 Logo 尺寸微调设计
|
||||
|
||||
## 目标
|
||||
|
||||
将 A01 顶部现有 `brand-seal.png` 从 `220×264rpx` 缩小为 `184×221rpx`，降低它对宗祠主体的遮挡感，同时保持“谱”字清晰可辨。
|
||||
|
||||
## 已确认方案
|
||||
|
||||
- 资产、宽高比、水平中心线和 `top: 64rpx` 均不变。
|
||||
- 只修改 `.brand-seal` 的 `width` 与 `height`。
|
||||
- 不移动标题、宗祠底图、登录内容或其他页面。
|
||||
- 412×915 真实运行截图中，Logo 应完整位于宗祠区域、没有拉伸或裁切，并与标题保持清楚的上下层级。
|
||||
|
||||
## 验证边界
|
||||
|
||||
先用 A01 静态契约锁定精确尺寸，再运行四档 H5 smoke，并人工查看 412×915 截图。H5 通过仍不代表 Android/HBuilderX 或用户整页验收完成。
|
||||
@@ -0,0 +1,101 @@
|
||||
# A01 公用卷轴云纹皮肤设计规格
|
||||
|
||||
> 日期：2026-07-16
|
||||
> 状态：用户已确认第 2 套卷轴云纹四件套视觉，待用户复核本规格后进入实施计划。
|
||||
> 初选视觉源：`docs/design/assets/a01-vnext/A01-shared-skin-family-option-2-selected.png`
|
||||
> 最终视觉源：`docs/design/assets/a01-vnext/A01-shared-scroll-skins-with-dialog-approved.png`
|
||||
|
||||
## 1. 目标与范围
|
||||
|
||||
本轮只重新设计并落地 A01 的公用视觉皮肤，不改登录流程、文案、图标、字号、按钮槽位或接口状态。
|
||||
|
||||
需要形成同一视觉家族中的四个独立成品：
|
||||
|
||||
1. 朱砂主按钮皮肤：用于登录等主操作。
|
||||
2. 暖宣纸次按钮皮肤：用于微信登录等次操作。
|
||||
3. 暖宣纸提示框皮肤：用于项目自定义 Toast；与次按钮同族，但更轻、更简洁并允许内容增高。
|
||||
4. 暖宣纸验证弹窗皮肤：用于安全验证弹窗；使用同族卷轴金线、祥云和底部淡墨山水。
|
||||
|
||||
按钮版和提示版不强行共用同一张最终 PNG。它们共享纹样语言、色板和生产组件，但分别适配自己的槽位与伸缩行为。
|
||||
|
||||
## 2. 选定视觉语言
|
||||
|
||||
- 方向：第 2 套卷轴云纹。
|
||||
- 主按钮使用深朱砂纸面、古金双线、左右卷轴端头、清晰祥云角花和上下中心盘长结。
|
||||
- 次按钮使用暖宣纸纸面和同构古金纹样，边线对比度必须高于当前按钮，缩到 320px 屏幕仍能识别花纹。
|
||||
- Toast 使用同族暖宣纸和祥云，但减少卷轴端头与边线层级，避免抢占错误文案；不能看成缩小的微信按钮。
|
||||
- 验证弹窗使用清晰的祥云角花和古金双线，淡墨山水仅占底部约 22%，中央保持安静，不能干扰标题、说明和操作按钮。
|
||||
- 文字、微信图标和提示文案全部由 Vue 保持为活内容，不烘焙进资产。
|
||||
- 不引入现代渐变、玻璃拟态、高亮白外圈、绿色残边或与宗祠头图冲突的重阴影。
|
||||
|
||||
## 3. 公用资产结构
|
||||
|
||||
### 3.1 按钮皮肤
|
||||
|
||||
按钮采用“横向三段式主皮肤 + 独立中心结饰”的结构：
|
||||
|
||||
- 左端：固定宽度，保存卷轴端头、左侧祥云和角线。
|
||||
- 中段：只保存连续朱砂／宣纸纹理与直线，可横向伸缩。
|
||||
- 右端：固定宽度，保存卷轴端头、右侧祥云和角线。
|
||||
- 中心结饰：单独透明叠加，始终几何居中，不随中段拉伸。
|
||||
|
||||
这样既忠实保留选定图中的端头、祥云和中心结，又不会把花纹整体横向拉扁。定位只用于皮肤层、结饰层和文字层叠放；按钮本身仍参与正常文档流。
|
||||
|
||||
### 3.2 Toast 皮肤
|
||||
|
||||
Toast 使用独立的轻量九宫格／三段式皮肤：
|
||||
|
||||
- 左右祥云和折角固定。
|
||||
- 中央纸面与直线允许横向伸缩。
|
||||
- 上下方向允许在字体放大或文案换行时增高。
|
||||
- 不使用按钮卷轴端柱，避免提示框显得过重。
|
||||
|
||||
如果 Android WebView 对九宫格表现不一致，则由同一 master 通过 Python 离线导出项目已知槽位尺寸，不允许回退到 `scaleToFill` 整图拉伸。
|
||||
|
||||
### 3.3 验证弹窗皮肤
|
||||
|
||||
验证弹窗使用独立九宫格皮肤：
|
||||
|
||||
- 四角祥云、折角和双层金线固定，不随弹窗宽高变化而拉伸。
|
||||
- 中央暖宣纸区域允许双向伸缩，用于活标题、说明文案和操作区。
|
||||
- 底部淡墨山水作为独立安全区，只能在水平方向延展或按目标槽位离线导出，不能侵入正文区域。
|
||||
- 弹窗内容与操作按钮保持代码原生；遮罩、关闭交互和验证流程不改变。
|
||||
- 现有 `a02-login-panel.png` 约为 `944×1668px` 竖版图，却被 `scaleToFill` 铺进 `620×520rpx` 横向槽位，属于明确比例变形；新资产不得沿用该比例和渲染方式。
|
||||
|
||||
## 4. 尺寸合同
|
||||
|
||||
| 成品 | 逻辑槽位 | 3× 基准输出 | 伸缩策略 |
|
||||
| --- | --- | --- | --- |
|
||||
| 主按钮 | `622×92rpx` | `1866×276px` | 左右端固定，中段横向伸缩，结饰独立居中 |
|
||||
| 次按钮 | `622×100rpx` | `1866×300px` | 左右端固定，中段横向伸缩，结饰独立居中 |
|
||||
| Toast | `590×82rpx` 起 | `1770×246px` 起 | 四角固定，中部可横向和纵向扩展 |
|
||||
| 验证弹窗 | `620×520rpx` | `1860×1560px` | 四角与底部山水固定安全区，中央双向伸缩 |
|
||||
|
||||
320×568 下按钮允许随页面自然滚动，不为同屏展示压缩按钮高度。Toast 宽度不得超出安全区，字体放大后不得裁字。
|
||||
|
||||
## 5. 生产方法
|
||||
|
||||
1. 以选定视觉图作为艺术方向，不直接从带展示背景的整图粗裁最终资产。
|
||||
2. 使用 ImageGen 分别生成无文字、无图标、无展示阴影的主按钮、次按钮、Toast 和验证弹窗 master。
|
||||
3. 用 Python/Pillow 完成透底、去白边／绿边、对称校正、切片、sRGB 与精确尺寸导出。
|
||||
4. Node manifest 记录 master、切片安全区、消费者、槽位和输出；禁止页面重复定义同一合同。
|
||||
5. A01 先作为唯一试点，Android 和用户确认前不推广到其他页面。
|
||||
|
||||
## 6. 验收标准
|
||||
|
||||
- 320px 宽真实运行截图中，卷轴端头、祥云和金线能够清楚识别。
|
||||
- 左右纹样对称；中心结不偏移、不拉伸；按钮文字与微信图标不被纹样干扰。
|
||||
- 主／次按钮没有白边、绿边、黑边、透明 RGB 或比例变形。
|
||||
- Toast 在短文案、长文案和字体放大状态下均不裁字、不拉坏角花。
|
||||
- 验证弹窗在 `620×520rpx` 槽位中不得出现横向压扁、模糊角花或山水侵入正文；标题、说明和两个操作入口必须保持清晰。
|
||||
- `320×568`、`360×640`、`360×800`、`412×915` H5 检查通过。
|
||||
- Android/HBuilderX 真机或模拟器复核通过后，才具备公用推广资格。
|
||||
- 用户没有明确说“通过”前，A01 始终保持 `[~]`。
|
||||
|
||||
## 7. 非目标
|
||||
|
||||
- 不修改 A01 以外页面的按钮。
|
||||
- 不清理旧按钮资产或历史截图。
|
||||
- 不对接登录接口。
|
||||
- 不制作深色主题。
|
||||
- 不把内部 H5 截图写成用户验收证据。
|
||||
@@ -0,0 +1,39 @@
|
||||
# A04 同步 A01 新视觉体系设计
|
||||
|
||||
## 目标
|
||||
|
||||
将 A04 注册账号页内仍在使用的旧认证视觉替换为 A01 已经通过用户审核的新体系，同时保持 A04 的注册字段、校验逻辑、协议入口和返回登录流程不变。
|
||||
|
||||
## 已确认方案
|
||||
|
||||
用户选择“方案 1：完整同步 A01 新体系”。本次只修改 `pages/auth/a04-register.vue`、A04 聚焦测试和必要文档，不修改 A01 或其他页面。
|
||||
|
||||
### 视觉合同
|
||||
|
||||
- 继续使用现有宗祠水墨底板和 `brand-seal.png`。
|
||||
- A04 Logo 与 A01 完全一致：`184×221rpx`、`top: 64rpx`、水平居中。
|
||||
- 页面不再声明 `STSong/SimSun`，统一继承全局 `STKaiti / KaiTi`。
|
||||
- 标题分隔改用 `a01-vnext-divider-v1.png` 与 `aspectFit`。
|
||||
- 注册主按钮改用 `a01-scroll-primary-v3.png` 与 `aspectFit`；文字继续由 Vue 独立承载。
|
||||
- 反馈 Toast 改用 `a01-scroll-toast-v3.png` 的 `border-image` 切片；文案继续由 Vue 承载。
|
||||
- A04 协议勾选／未勾选图标继续使用 A01 当前已审核的同款资产，不因文件名含 `a02` 而重复造图。
|
||||
- 返回箭头和宗祠底板属于仍在使用的共享资产，不列为旧视觉替换对象。
|
||||
|
||||
### 滑动验证边界
|
||||
|
||||
- 删除 A04 当前 `a02-login-panel.png` 自定义安全验证占位视觉及对应开关状态。
|
||||
- 完整本地校验通过后，只用新版自定义 Toast 提示“滑动验证待接口接入”。
|
||||
- 后续接口阶段由真实滑动验证组件的自带滑块、轨道、拼图和结果样式接管；本轮不制作新的自定义验证面板。
|
||||
|
||||
## 状态与交互
|
||||
|
||||
- 保留手机号、设置密码、确认密码三字段和就近错误提示。
|
||||
- 保留协议未勾选错误、勾选后即时清除、返回 A01 和协议入口。
|
||||
- 不接注册接口，不伪造注册成功，不新增页面或路由。
|
||||
|
||||
## 验证
|
||||
|
||||
- 测试先锁定新资产、全局字体、Logo 尺寸和旧资产禁用，再实施页面修改。
|
||||
- 检查默认、字段错误、协议错误、协议勾选和滑动验证待接入 Toast。
|
||||
- H5 覆盖 320×568、360×640、360×800、412×915；412×915 在用户当前 Chrome 中逐状态审核。
|
||||
- H5 通过不代表 Android/HBuilderX 或用户整页验收完成，A04 保持 `[~]`。
|
||||
@@ -0,0 +1,48 @@
|
||||
# A05 向 A01 视觉体系收拢设计
|
||||
|
||||
> 设计决定：2026-07-16 用户确认采用完整收拢方案。本文只约束 A05 的视觉资产与字体迁移，不改变接口边界和重置密码业务流程。
|
||||
|
||||
## 目标
|
||||
|
||||
把 A05 重设密码页仍在使用的旧认证视觉替换为 A01 已确定的新体系，使 A01、A04、A05 在品牌 Logo、字体、标题分隔、主按钮和项目自定义 Toast 上保持一致。
|
||||
|
||||
## 唯一视觉真源
|
||||
|
||||
- A01 当前真实运行视觉与 `docs/design/screens/handoff/2026-07-16/A01-current-password-sms-contact-824x915.png`。
|
||||
- 全局字体合同：`styles/global.scss` 中的 `"STKaiti", "KaiTi", serif`。
|
||||
- Logo：`static/assets/foundation/transparent/brand-seal.png`，A05 使用与 A01 相同的 `184×221rpx` 槽位、`top: 64rpx` 和水平居中规则。
|
||||
- 标题分隔：`static/assets/modules/auth/transparent/a01-vnext-divider-v1.png`，使用 `aspectFit`，不得拉伸。
|
||||
- 朱砂主按钮：`static/assets/foundation/transparent/a01-scroll-primary-v3.png`，用于“确认重设”和成功结果中的“返回登录”，使用 `aspectFit`。
|
||||
- 浅色卷轴 Toast：`static/assets/foundation/transparent/a01-scroll-toast-v3.png`，使用九宫格 `border-image`，不得用绝对定位图片层拉伸。
|
||||
|
||||
## 页面结构
|
||||
|
||||
1. 保留现有红色宗祠水墨底图、返回按钮、标题、副标题、四字段表单、获取验证码入口、重设提示和返回登录入口。
|
||||
2. 删除 A05 内所有局部 `font-family`，统一继承项目全局楷体。
|
||||
3. Logo 缩小到 A01 已确认尺寸；不改底图，不把 Logo 烘焙进背景。
|
||||
4. 标题分隔线、页面主按钮和成功结果按钮换成 A01 新资产；按钮文字仍由真实 DOM 承担。
|
||||
5. Toast 删除旧 `feedback-toast__skin` 图片层，改用新浅色卷轴九宫格背景。
|
||||
|
||||
## 行为验证与结果态边界
|
||||
|
||||
- A05 仍在“获取验证码”前校验手机号。
|
||||
- 真实滑动验证必须使用后续接口组件自带样式；旧 `a02-login-panel.png` 验证面板不作为最终视觉证据。
|
||||
- 本轮移除旧自定义验证面板的最终视觉依赖。手机号通过后只显示“滑动验证待接口接入”的项目自定义 Toast，不伪造滑块完成、验证码发送成功或倒计时。
|
||||
- 四字段本地校验和成功结果层继续保留，用于当前页面视觉流程审核；成功结果层换用 `a01-scroll-dialog-v3.png` 作为国风卷轴容器，但该资产在滑动验证场景仍不得冒充真实组件。
|
||||
- 返回登录仍使用 `/pages/auth/a01-entry`，不恢复已删除的 A02。
|
||||
|
||||
## 不变范围
|
||||
|
||||
- 不接短信、滑动验证、重置密码或登录接口。
|
||||
- 不新增路由，不修改 A01、A04 或其他页面。
|
||||
- 不改变手机号、验证码、新密码、确认新密码的字段和现有就近错误文案。
|
||||
- 不新增深色主题，不压缩 320×568；短屏继续自然纵向滚动。
|
||||
- 不使用 `uni.showToast`、`uni.showModal`、`uni.showLoading` 或 `uni.showActionSheet`。
|
||||
|
||||
## 验收标准
|
||||
|
||||
- 静态合同要求 A05 引用新 Logo 尺寸、标题分隔、两处朱砂按钮与九宫格 Toast，且不再引用旧主按钮、旧次按钮、旧登录面板或局部字体。
|
||||
- 运行时覆盖默认空表单、手机号错误、滑动验证待接入 Toast、全字段错误、密码不一致和成功结果层。
|
||||
- 320×568、360×640、360×800、412×915 无横向溢出；320×568 允许纵向滚动。
|
||||
- 只保存一张 412×915 代表图或一张复杂状态联系表；H5 只作为候选证据。
|
||||
- Android/HBuilderX、真实滑动验证和真实接口结果继续待审，A05 保持 `[~]`，不冻结。
|
||||
@@ -0,0 +1,26 @@
|
||||
# A06 向 A01 视觉体系收拢设计
|
||||
|
||||
> 2026-07-16 用户确认直接收拢。本文复用 A01/A04/A05 已确定的认证视觉合同，不探索新方向。
|
||||
|
||||
## 目标与真源
|
||||
|
||||
- A06 保留 `frozen|disabled|risk` 三种阻断状态、未知状态回落、原因/影响/恢复信息、恢复说明层与返回 A01 行为。
|
||||
- Logo 使用 `brand-seal.png` 与 A01 相同的 `184×221rpx`、`top: 64rpx` 居中槽位。
|
||||
- 页面删除全部局部 `font-family`，继承 `styles/global.scss` 的全局楷体。
|
||||
- 标题分隔使用 `a01-vnext-divider-v1.png` 与 `aspectFit`。
|
||||
- 页面“查看恢复方式”和恢复层“我知道了”使用 `a01-scroll-primary-v3.png` 与 `aspectFit`。
|
||||
- 恢复说明层使用 `a01-scroll-dialog-v3.png` 与 `aspectFit`，仅作为项目自定义信息层，不冒充接口结果。
|
||||
|
||||
## 不变范围
|
||||
|
||||
- 不改状态文案、查询参数、状态回落、打开/关闭恢复层和返回 A01 的逻辑。
|
||||
- 不接账号申诉、身份核验或恢复接口。
|
||||
- 不修改其他页面，不清理旧资产文件。
|
||||
- 基础版本仅浅色；320×568 自然纵向滚动。
|
||||
- A06 保持 `[~]`，真实入口、接口和 Android/HBuilderX 仍待复核。
|
||||
|
||||
## 验收
|
||||
|
||||
- 静态合同要求四项新资产、Logo 尺寸、两处新版按钮和全局字体继承；禁止旧按钮、旧面板、旧分隔与局部字体。
|
||||
- 运行态覆盖冻结、停用、风险限制、未知回落、恢复说明层关闭和返回 A01。
|
||||
- 复核 320×568、360×640、360×800、412×915，无横向溢出，短屏可滚动。
|
||||
@@ -0,0 +1,23 @@
|
||||
# G01 加入申请卡片间距设计
|
||||
|
||||
## 决定
|
||||
|
||||
G01“加入申请”组三张记录继续使用现有独立卷轴卡片资产。相邻卡片之间增加 `12rpx` 垂直间距，第一张卡片与分组标题之间保持现状。
|
||||
|
||||
## 原因
|
||||
|
||||
- 每张卡片代表一条独立申请，适度留白能强化独立点击与状态扫读。
|
||||
- 现有卷轴卡片包含完整上下边框和四角装饰；直接相连会造成双边框和角花碰撞。
|
||||
- `12rpx` 能消除接缝拥挤，同时保持三条记录属于同一分组，不明显增加页面长度。
|
||||
|
||||
## 范围
|
||||
|
||||
- 只修改 `pages/genealogy/g01-my-genealogies.vue` 中相邻 `.application-record` 的垂直间距。
|
||||
- 不修改卡片资产、卡片高度、内边距、文案、状态颜色、分组标题、其他家谱卡片和页面导航。
|
||||
- 在 412×915 Chrome H5 真实运行画面复核；Android/HBuilderX 仍留在最终设备验收阶段。
|
||||
|
||||
## 验收
|
||||
|
||||
- `.application-record + .application-record` 的 `margin-top` 为 `12rpx`。
|
||||
- 第一张申请卡没有新增顶部间距。
|
||||
- 页面不存在横向溢出，三张卡片边框不再相接。
|
||||
@@ -0,0 +1,31 @@
|
||||
# G01 列表背景资产设计
|
||||
|
||||
## 当前决定
|
||||
|
||||
先生成并保留三个 G01 列表背景母版，不修改页面滚动结构，也不替换现有运行资产。下一轮先由用户选择方向，再创建唯一正式运行资产并接入页面。
|
||||
|
||||
## 已生成方向
|
||||
|
||||
- A：上方远山、左下亭台、右侧竹影，纯绿幕背景，适合提取透明叠加层。
|
||||
- B：上下远山形成纵向框景、左中亭台、右侧竹影，纯绿幕背景，适合提取透明叠加层。
|
||||
- C：云气、树枝、亭台、竹影和山水从上到下连续分布，带完整暖宣纸底，适合直接作为不透明列表背景。
|
||||
|
||||
三个母版都只作为候选，不等于用户已选择，也不进入页面引用。母版位于 `docs/design/assets/g01-background/masters/`。
|
||||
|
||||
## 生产合同
|
||||
|
||||
1. ImageGen 只负责艺术母版；准确提示词、母版路径和处理模式写入 `design-pipeline/manifests/g01-background-candidates.json`。
|
||||
2. Python/Pillow 负责解码、绿幕转 Alpha、去绿边、清理透明 RGB、sRGB 输出和确定性压缩。
|
||||
3. Node 负责校验清单路径与源尺寸、调用 Python，并把结果写入已忽略的 `design-pipeline/generated/g01-background/`。
|
||||
4. 另一台电脑使用仓库内母版构建时应得到相同像素结果；再次调用模型只能得到同方向的新母版，不能保证逐像素一致。
|
||||
5. 用户选择方向前，不创建 `static/assets/` 正式输出，不修改 G01 页面。
|
||||
|
||||
## 下一轮页面结构待讨论
|
||||
|
||||
用户提出 G01 应只滚动下方列表：红色标题栏、当前家谱大卡片、四个快捷入口和分隔线固定；从“我创建的”开始独立滚动。新背景预计固定在列表滚动窗口背后，而不是作为列表末尾内容。该结构尚未批准实施，下一轮继续讨论并进行四档尺寸验证。
|
||||
|
||||
## 质量与仓库边界
|
||||
|
||||
- 候选生成结果不写入 `docs/design/screens/handoff/`，避免扩大交接截图合同。
|
||||
- `generated/`、虚拟环境、Node 依赖和 `tmp/` 不进入 Git。
|
||||
- 三个母版是当前选择尚未完成时的必要设计输入；选定正式方向后，再由用户决定是否保留未选母版。
|
||||
Reference in New Issue
Block a user