79 lines
7.7 KiB
Markdown
79 lines
7.7 KiB
Markdown
# G01 添加家谱底部弹层设计
|
||
|
||
## 视觉目标
|
||
|
||
唯一视觉目标为 `docs/design/mockups/2026-07-19/g01-add-dialog-paper-sheet-target.png`。采用用户选择的第 3 版结构、第 1 版卷轴按钮，并将右上“关闭”文字替换为关闭图标。
|
||
|
||
## 范围
|
||
|
||
只返工 G01“我的家谱”的“添加家谱”弹层。正常列表态、空态、加载态、失败态、切换家谱弹层、独立滚动及其他页面均不修改；三个入口继续调用现有跳转逻辑，不对接接口。
|
||
|
||
## 删除当前无用元素
|
||
|
||
- 弹层不再引用 `a01-scroll-dialog-v3.png` 完整卷轴背景。
|
||
- 删除完整封闭金框、四角祥云、底部山水和为这些装饰预留的空白区域。
|
||
- 删除标题与关闭入口为躲避祥云而增加的偏移样式。
|
||
- 删除文字“关闭”，不保留旧“取消”入口。
|
||
- 删除本轮被否决实现产生且不再被模板使用的 G01 添加弹层专用样式；不删除任何现有资产文件、候选截图、测试或文档。
|
||
|
||
## 背景资产与伸缩规则
|
||
|
||
- 用户确认采用“单张完整 PNG + 九宫格伸缩”方案。唯一底板资产为 `static/assets/modules/genealogy/transparent/g01-add-sheet-background-v3.png`，源尺寸 `1536×1024`。
|
||
- 顶部透明轮廓、左右圆肩、古金收边、中央如意结和连续宣纸纹理全部属于同一张资产；弹层不得再把矩形宣纸、顶部过渡图或独立结饰拼接成底板。
|
||
- 资产按九宫格中的纵向三段规则渲染：顶部装饰安全区固定、底部收口固定，只允许中间无关键装饰的宣纸区域纵向伸缩。弹层变高时，顶部曲线、如意结、金线粗细和圆肩比例不得发生纵向变形。
|
||
- 当前三按钮状态的弹层最小高度为 `780rpx`；在 412px 宽审批视口中约为 `429px`，完整底板的可见弧形上沿应到达用户截图箭头所指的列表中部位置。
|
||
- 标题、说明和按钮组组成一个内容整体。三按钮状态中，该整体必须在弹层可用区域内垂直居中，新增高度不得只堆积为顶部或底部的大块空白。
|
||
- 居中使用内容容器的上下自动边距实现，不使用可导致超高内容顶部被裁掉的 `justify-content: center`，也不使用只适配三按钮数量的固定坐标。
|
||
- 未来出现更多按钮、表单或说明时，上下自动边距归零，同一底板随内容自然增高，中间纸面扩展；达到 `calc(100vh - 80rpx)` 后由内容区纵向滚动，并保证首项可滚动到可视区域顶部。
|
||
- 本轮只在 G01 落地该伸缩结构，不提前迁移其他页面，也不为尚未出现的第二个消费者抽取全局组件；后续真实页面需要同类底部弹层时，再以该资产和伸缩规则为单一视觉合同抽取复用。
|
||
|
||
## 新弹层结构
|
||
|
||
- 弹层是贴紧视口底部的全宽宣纸面板，处理底部安全区。
|
||
- 面板底面只使用完整底板资产 `static/assets/modules/genealogy/transparent/g01-add-sheet-background-v3.png`；不再引用 `page-paper.jpg` 和 `a01-paper-transition-v1.png` 拼接当前弹层。
|
||
- 左上依次显示标题“添加家谱”和说明“建议先搜索已有家谱，避免重复创建”。
|
||
- 标题、说明和三个操作统一放入 `add-dialog__body` 内容容器；该容器以 `margin-block: auto`（落地时使用兼容现有构建链的上下 `auto` 边距写法）完成三按钮状态的垂直居中。
|
||
- 右上使用独立关闭图标，实际可见朱砂叉号约 `34rpx`，触控区域不小于 `80rpx × 80rpx`。新增真实透明 PNG `static/assets/modules/genealogy/transparent/g01-dialog-close.png`，以选定目标中的朱砂细线关闭图标为视觉参考生成；由于源图透明画布约占六成，图片元素使用 `80rpx × 80rpx` 才能达到目标视觉尺寸。不从截图裁切，也不使用文字字符、CSS 线条或手绘 SVG 冒充。
|
||
- 关闭控件放入标题容器并相对标题定位，不能再使用相对整个弹层的固定顶部坐标；因此三按钮居中、六按钮增高或超高滚动时，关闭图标始终跟随标题。
|
||
- 三个操作直接复用项目现有 `AppButton`，不得根据效果图重新绘制、生成或近似实现按钮皮肤：
|
||
1. `AppButton` 主按钮继续使用 `static/assets/foundation/transparent/a01-scroll-primary-v3.png`，文案“搜索家谱”；
|
||
2. `AppButton` 次按钮继续使用 `static/assets/foundation/transparent/a01-scroll-secondary-v3.png`，文案“邀请码加入”；
|
||
3. `AppButton` 次按钮继续使用 `static/assets/foundation/transparent/a01-scroll-secondary-v3.png`，文案“继续创建家谱”。
|
||
- 三个按钮之间统一使用 `24rpx` 间距；在 412px 审批视口中约为 `13.2px`。间距只施加在相邻 `AppButton` 之间，不改变按钮图片或按钮内部文案。
|
||
- 三个按钮以当前红色主按钮的可见宽度为统一基准。仅在 G01“添加家谱”弹层内，将三个按钮容器设为响应式 `595rpx × 96rpx` 基准并水平居中；412px 审批视口中约为 `327px × 53px`，两张按钮皮肤均继续使用 `aspectFit`，使左右卷轴端点对齐且不做横向拉伸。
|
||
- 等宽规则不得修改公共 `AppButton` 的默认尺寸，不得影响其他页面，不得生成或改写按钮图片资产。按钮宽度受弹层可用宽度约束，在 320px 档位按 rpx 等比缩放并保持 `max-width: 100%`。
|
||
- 按钮组增高后仍作为 `add-dialog__body` 的一部分整体居中；`780rpx` 最小高度和可见上沿位置不变，由上下自动边距等量缩小吸收新增高度，不得把按钮组单独推向顶部或底部。
|
||
- 遮罩使用当前已验证的深度，使后方列表退居背景但仍能辨认所在页面。
|
||
|
||
## 交互
|
||
|
||
- 点击关闭图标关闭弹层。
|
||
- 点击遮罩关闭弹层。
|
||
- Android 返回键优先关闭弹层，不离开 G01。
|
||
- 点击弹层内部不触发遮罩关闭。
|
||
- 三个入口继续复用现有 `applyToJoin`、`joinByInvite`、`createGenealogy`，不改变路由契约。
|
||
|
||
## 响应式与可访问性
|
||
|
||
- 320px 宽度下 `780rpx` 和 `24rpx` 按钮间距等比缩放，页面不得横向溢出，标题、说明、关闭图标和三个按钮不得互相遮挡。
|
||
- 568px 高度下三个操作必须同时可达；内容超过安全高度时弹层内容区纵向滚动，且滚动起点不得裁掉标题或关闭入口。
|
||
- 三按钮基准高度与长内容压力高度必须使用同一张底板；压力高度只扩展中间纸面，顶部曲线、圆肩和如意结尺寸保持一致。
|
||
- 关闭图标必须有可访问名称“关闭”，不能只依赖图形表达。
|
||
- 弹层打开时阻止后方独立列表滚动穿透，关闭前后保持列表位置。
|
||
|
||
## 验证
|
||
|
||
- 先修改 G01 视觉契约，使其因仍引用完整卷轴背景、仍使用文字关闭、仍拼接矩形宣纸与顶部过渡图，或缺少完整可伸缩底板而失败。
|
||
- 最小实现后运行 G01 视觉、空态、加载态和失败态契约，且不得放宽既有阈值。
|
||
- 运行时只检查当前“添加家谱”状态，在 320×568 和 412×915 验证 `780rpx` 最小高度、`24rpx` 按钮间距、三个按钮左右端点对齐、内容整体居中、关闭、遮罩与滚动位置；以六按钮验证自然增高，并以超过最大高度的长内容验证可从顶部开始滚动。最后恢复 412×915 三按钮状态并保持弹层打开。
|
||
- 在唯一 9222 Chrome 项目标签页中展示；不新开浏览器或第二个项目标签页。
|
||
- H5 截图只作为内部候选证据；Android/HBuilderX 仍单独保留为未验证项。
|
||
|
||
## 非目标
|
||
|
||
- 当前仅建立可伸缩视觉合同，不在只有一个消费者时抽取新的通用弹层组件。
|
||
- 不修改切换家谱弹层。
|
||
- 不删除任何现有静态资产文件或历史候选证据。
|
||
- 不更改接口、数据结构或业务跳转。
|
||
- 不冻结 G01，不更新为 `[x]`。
|