fix: calibrate A01 entry visual layout

2026-07-13 15:35:16 +08:00
parent bd50f15d5c
commit f7d6d3cfb1
8 changed files with 139 additions and 129 deletions
@@ -8,7 +8,8 @@

 - 文件：[`screens/A01-启动登录引导-效果稿-v1-显式协议.png`](screens/A01-启动登录引导-效果稿-v1-显式协议.png)
 - 效果稿 v2：[`screens/A01-启动登录引导-效果稿-v2-独立注册.png`](screens/A01-启动登录引导-效果稿-v2-独立注册.png)，记录此前“四个独立按钮”的尝试；该入口结构已失效，不作当前方案依据。
- 当前效果稿 v3：[`screens/A01-启动登录引导-效果稿-v3-文字注册入口.png`](screens/A01-启动登录引导-效果稿-v3-文字注册入口.png)，体现本记录第 2 节的当前入口层级；效果稿 v3 仅作视觉比对依据，`pages/auth/entry.vue` 必须使用真实页面结构还原，不得将整张效果图作为页面内容。
+- 当前效果稿 v3：[`screens/A01-启动登录引导-效果稿-v3-文字注册入口.png`](screens/A01-启动登录引导-效果稿-v3-文字注册入口.png)，保留第 2 节的入口层级归档；它不再定义运行时像素坐标。
+- 当前运行时视觉基准：[`screens/A01-启动登录引导-栅格验收-412x915.png`](screens/A01-启动登录引导-栅格验收-412x915.png)，用于 A-01 协议未勾选状态的同尺寸像素比对；`pages/auth/entry.vue` 必须使用真实页面结构还原，不得将整张效果图作为页面内容。
 - 用途：保留本轮已确认的“家祠卷轴”欢迎页美术方向，不作为可直接还原的代码布局图，也不作为功能图标资产。
 - 画面方向：朱砂家祠红头、暖宣纸主体、古金细线与云纹、墨褐标题、两侧淡墨建筑/竹影与底部山水。登录欢迎页后续必须使用独立的红头/宣纸背景组合，不复用 G01 的列表页大山水底图。

@@ -28,8 +29,19 @@
 - A-01 只设计欢迎、入口与协议未勾选提示。账号密码与手机号验证码表单均归 `A-02`，微信授权结果归 `A-03`，注册归 `A-04`，忘记密码归 `A-05`。
 - A-01 正常态必须展示两个按钮、注册文字入口和未勾选协议；点击任一需要授权的入口但未勾选协议时，仅提示“请先阅读并同意相关协议”，不视为用户已同意。
 - 页面根容器宽度必须为 100%，不可写死为 `750rpx` 或使用整张效果图。固定设计画布仍以 `750rpx` 为测量基准，运行时由真实 DOM 按当前屏宽响应式还原。
- 朱砂家祠头图高 244rpx；标题区在头图下方保留 196rpx 起始留白。操作区左右内边距 100rpx，主按钮高度 124rpx，微信按钮与主按钮间距 32rpx，主按钮文案固定为“登录”。
- 注册文字在微信按钮下方 70rpx；协议行在注册入口下方 160rpx，底部内边距包含 `env(safe-area-inset-bottom)`。320 × 568 时页面允许纵向滚动，根容器不得以 `overflow: hidden` 截断协议行或系统安全区。
+#### 412 × 915 运行时校准表
+
+| 元素 | 412 × 915 像素基准 | 750rpx 实现基准 |
+| --- | --- | --- |
+| 朱砂家祠头图 | 高 139px | 高 253rpx |
+| 标题区起点 | 红头后约 82px | `padding-top: 150rpx` |
+| 标题分隔饰线 | 宽约 234px | 宽 426rpx；上、下间距独立 |
+| 两个按钮 | x=60px，宽约 291px，高约 65px | `margin: 95rpx 110rpx 0`，高 118rpx |
+| 两按钮间距 | 约 28px | `margin-top: 51rpx` |
+| 注册入口 | 微信按钮后约 56px；无左右短线 | `margin-top: 98rpx` |
+| 协议行 | 注册入口后约 70px | `margin-top: 128rpx` 加安全区 |
+
+- 上表是 A-01 运行时布局数值的唯一所有者。320 × 568 时页面允许纵向滚动，根容器不得以 `overflow: hidden` 截断协议行或系统安全区；底部内边距包含 `env(safe-area-inset-bottom)`。
 - 仅作静态设计验证，不代表 uni-app 运行时验收；页面实现后仍须在 Android 320 × 568、360 × 640、360 × 800、412 × 915 上重新验收。

 | 状态 | 触发 | A-01 可见结果 | 去向 |
@@ -50,11 +62,12 @@

 ## 4. 静态设计验收与剩余缺口

- 静态设计验收已覆盖 320 × 568、360 × 640、360 × 800、412 × 915；四个尺寸均保持两个大按钮与单行文字注册入口。A-01 本地页以真实 DOM 还原 v3 的层级和比例，运行时仍须截图对比，不得以整图页面替代。
+- 静态设计验收已覆盖 320 × 568、360 × 640、360 × 800、412 × 915；四个尺寸均保持两个大按钮与单行文字注册入口。`412 × 915` 图是 A-01 协议未勾选状态的运行时像素基准；A-01 本地页以真实 DOM 还原其层级和比例，运行时仍须截图对比，不得以整图页面替代。
 - 归档文件：[320 × 568](screens/A01-启动登录引导-栅格验收-320x568.png)、[360 × 640](screens/A01-启动登录引导-栅格验收-360x640.png)、[360 × 800](screens/A01-启动登录引导-栅格验收-360x800.png)、[412 × 915](screens/A01-启动登录引导-栅格验收-412x915.png)。
 - 此结论只验证设计稿与固定栅格，不替代 uni-app 页面实现后的 Android 运行时验收。
 - 仍未确定《家谱用户协议》与《隐私政策》的最终页面去向及返回路径；在这两页完成设计前，A-01 不得标记为完整设计完成。
 - 页面实现阶段仍须按本记录在 Android 实机或同等运行环境复核四个尺寸的安全区、滚动与文字折行。
+- 2026-07-13 已按 412 × 915 参考图重新校准真实 DOM 的标题区、分隔饰线、双按钮、注册入口与协议行；静态合同通过，但仍须由同尺寸 HBuilderX 或 Android 截图叠图确认，未确认前不得标记 A-01 完成。

 ## 5. 推进约束

@@ -16,7 +16,7 @@

 - 使用现有 `static/assets/backgrounds/auth-ancestral-header-v1.png`、`auth-rice-paper-v1.jpg`、`auth-ink-scenery-v1.png` 作为独立认证页背景；使用 `login-outline-v1.png` 和 `wechat-licensed-v1.png` 作为本地图标。
 - 顺序固定为：朱砂家祠头图、标题“家谱”、副标题“为家族留存可传承的记忆”、朱砂主按钮“登录”、描边按钮“微信登录”、单行文字“还没有账号？注册账号”、未勾选协议行。
- 页面遵循 A-01 记录中的 750rpx 栅格、638rpx 内容宽度、108rpx 按钮高和安全区规则。
+- A-01 的运行时布局唯一遵循 `docs/design/A01_启动登录引导_设计记录.md` 中的“412 × 915 运行时校准表”；本文件不再重复或定义按钮与间距数值。

 ## A-02 双标签登录页

@@ -4,29 +4,15 @@

 以 `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` 的协议未勾选状态作为唯一视觉基准，把 `pages/auth/entry.vue` 的真实 DOM 校准到同一比例。此次只修正标题区、两条分隔饰线、双按钮、注册入口和协议行；现有认证背景图不在本次视觉校准范围内，接口、路由和 A-02 均不变。

-## 基准坐标
+## Contract ownership

-以下为 412 x 915 设计图的可见边界；实现按 `750rpx / 412px` 换算并保持纵向流式滚动。
-
-| 元素 | 设计图像素 | 750rpx 基准 | 实现约束 |
-| --- | --- | --- | --- |
-| 朱砂家祠头图 | y=0, h=139 | h≈253rpx | 头图与印章作为独立层，不能用页面留白补高度。 |
-| 标题字面 | y≈222–286 | y≈404–521rpx | 标题区从红头后开始独立校准，不能沿用 196rpx 的未验证留白。 |
-| 上分隔饰线 | x≈89–323, y≈316 | x≈162–588rpx, y≈575rpx | 使用与图一致的小型居中金饰；上、下分隔线分别控制间距。 |
-| 副标题 | y≈345–366 | y≈628–666rpx | 保持单行、居中。 |
-| 下分隔饰线 | x≈89–323, y≈385 | x≈162–588rpx, y≈701rpx | 不能复用上分隔线的通用外边距。 |
-| 登录按钮 | x≈60, y≈463, w≈291, h≈65 | x≈109, y≈843, w≈530, h≈118 | 朱砂实底、细金内外框和小角饰均以参考图为准。 |
-| 微信登录按钮 | x≈60, y≈555, w≈291, h≈65 | x≈109, y≈1,010, w≈530, h≈118 | 宣纸底、细金框，和主按钮保持相同外框尺寸。 |
-| 注册入口 | y≈675 | y≈1,229rpx | 不加左右装饰短线。 |
-| 协议行 | y≈767 | y≈1,397rpx | 保留安全区和小屏滚动能力。 |
-
-坐标以图像可见内容为准，边缘抗锯齿可允许约 2px 误差；最终仍以同尺寸运行截图叠图确认。
+`docs/design/A01_启动登录引导_设计记录.md` owns the calibrated 412 × 915 coordinate table and acceptance thresholds. This implementation specification records scope and component strategy only; it does not define duplicate layout values.

 ## 组件策略

 - 页面继续使用真实 DOM 与现有本地认证背景，不使用整图作为页面内容。
- 标题两侧云纹和分隔线中心饰物拆成各自的语义元素；不能再把 `create-cloud-v2.png` 同时用作两类饰物。
- 两个按钮共享尺寸，不共享未经校准的通用“方括号”角饰。直线边框由 CSS 承担；可见角饰必须使用与参考图一致的透明 PNG 资产。
+- 标题两侧云纹和标题分隔线中心饰物保持独立语义元素；注册链接不得增加设计图中不存在的左右短线。
+- 两个按钮共享经过校准的外框尺寸，不使用通用“方括号”角饰；直线边框由 scoped CSS 承担。
 - 登录图标保持白色、微信图标保持其许可的原色；按钮文字按参考图缩小并移除全局通用按钮样式造成的额外字重或圆角干扰。
 - 视觉常量只定义在 `pages/auth/entry.vue` 的 A-01 样式中；旧的 A-01 实现合同中互相冲突的 `638rpx/108rpx` 说明不再作为运行时布局依据。

@@ -101,10 +101,10 @@ powershell -ExecutionPolicy Bypass -File tests\vue3-entry.ps1

 ## 9. 2026-07-13 流程纠正记录

- A-01 的历史效果稿 v1、v2 与当前效果稿 v3 均已归档；当前入口依据为 `docs/design/screens/A01-启动登录引导-效果稿-v3-文字注册入口.png`，对应说明见 `docs/design/A01_启动登录引导_设计记录.md`。
+- A-01 的历史效果稿 v1、v2、v3 与四尺寸栅格稿均已归档；当前协议未勾选状态的运行时视觉依据为 `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png`，对应说明见 `docs/design/A01_启动登录引导_设计记录.md`。
 - A-01 的固定栅格、状态、独立背景/图标及 320 × 568、360 × 640、360 × 800、412 × 915 静态效果稿已归档并经审计；它们仍不替代 uni-app 页面实现后的 Android 运行时验收。
 - 先前误建的 A-01 规格和“四个独立按钮”执行计划已降为失效历史；2026-07-13 已确认文字注册入口方案，唯一需求所有者为 `docs/design/A01_启动登录引导_设计记录.md`。用户随后授权 A-01 欢迎入口与 A-02 双标签登录页的本地 UI 落地；不得接接口、执行真实登录或替其他未设计页面造功能。
 - 所有后续页面效果图必须先保存到 `docs/design/screens/`，并在对应页面设计记录写明用途、状态和验收缺口；未完成归档不得展示为可推进的设计成果。
 - G-01 已于 2026-07-13 经用户确认结项；当前进入 D2 / A-01 的设计工作，接口、真实登录和 Android 打包仍暂停。
 - A-01 入口页与 A-02 双标签登录页已于 2026-07-13 落地本地 UI：路由入口为 `pages/auth/entry`；只有在 A-01 显式勾选协议后才可进入 A-02。页面不调用接口、不写登录态、不跳转家谱；微信、注册、协议、忘记密码和验证码仅提示待相应页面或能力完成。A-01/A-02 运行时四尺寸验收仍待执行。
- A-01 首次本地预览与 v3 效果稿存在红头高度、按钮宽度和垂直节奏偏差。整图视觉层方案已被用户否决并撤销；现以真实 DOM、分层背景和按钮图标重建页面，下一次 Android 预览必须以 v3 截图作同尺寸对比。
+- A-01 首次本地预览与 412 × 915 栅格验收图存在红头高度、按钮宽度和垂直节奏偏差。整图视觉层方案已被用户否决并撤销；现以真实 DOM、分层背景和按钮图标重建页面，下一次 Android 预览必须以该图作同尺寸对比。