66 lines
4.9 KiB
Markdown
66 lines
4.9 KiB
Markdown
# G01 切换家谱弹层设计规格
|
||
|
||
## 目标
|
||
|
||
只返工 G01“我的家谱”的“切换当前家谱”弹层。弹层在两条数据时紧凑、居中、易读；家谱数量增加时，完整背景随内容自然增高，达到视口安全上限后仅列表内部滚动。
|
||
|
||
## 范围
|
||
|
||
- 保留现有家谱数据、当前项判断、选择逻辑和遮罩关闭逻辑，不对接接口。
|
||
- 不修改 G01 其他状态，不修改公共 `AppDialog`、`AppButton` 或其他页面。
|
||
- 不生成、不覆盖、不删除任何图片资产。
|
||
- 当前状态未经用户明确通过，不标记 G01 为 `[x]`，不冻结页面。
|
||
|
||
## 完整背景与伸缩合同
|
||
|
||
- 唯一背景资产继续使用 `static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png`，源尺寸为 `1860×1560`。
|
||
- 不再用绝对定位的 `<image mode="aspectFit">` 把整张背景限制在固定高度内；容器改为单张完整 PNG 的九宫格 `border-image` 渲染。
|
||
- 九宫格源切片使用 `300 260 360 260 fill`：顶部金框与祥云、左右边框和底部山水与如意结属于固定区；只有中间无关键装饰的宣纸区域允许纵向伸缩。
|
||
- 九宫格显示边宽使用 `110rpx 48rpx 132rpx 48rpx`，分别保留顶部装饰、左右边框和底部山水安全区。
|
||
- 顶部祥云、四角纹样、边框粗细、底部山水和中央如意结不得随弹层高度纵向拉长，也不得拆成多张图片拼接。
|
||
- 弹层宽度保持 `670rpx` 且 `max-width: 100%`；两项状态的最小高度为 `600rpx`，最大高度为 `calc(100vh - 120rpx)`。
|
||
- 内容少时背景保持 `600rpx` 的紧凑基准；内容增加时背景和容器同步自然增高；达到最大高度后容器不再增高，家谱列表独立纵向滚动。
|
||
|
||
## 布局
|
||
|
||
- 弹层继续位于视口中央，遮罩深度沿用当前值。
|
||
- 内容安全区使用 `120rpx 58rpx 140rpx` 内边距，标题完整落在顶部金框和祥云下方，不得与任何装饰重叠。
|
||
- 标题“切换当前家谱”居中显示，沿用朱砂色和楷体层级。
|
||
- 标题下方使用独立列表容器；两条数据时列表不产生滚动条，也不在末项下方留下超过 `72rpx` 的纯内容空白。
|
||
- 每行最小高度 `112rpx`，整行均可点击；名称、元信息和右侧状态保持稳定左右对齐。
|
||
- 名称字号 `32rpx`；元信息字号从 `21rpx` 提升为 `24rpx`；右侧“当前／选择”字号从 `23rpx` 提升为 `25rpx`。
|
||
- 当前项使用轻量朱砂底色和边线反馈，不只依赖名称变红；可切换项保持宣纸底色。
|
||
|
||
## 关闭与交互
|
||
|
||
- 移除底部不可见的文字“关闭”入口。
|
||
- 右上复用 `static/assets/modules/genealogy/transparent/g01-dialog-close.png`，图片画布 `80rpx × 80rpx`，点击热区不小于 `80rpx × 80rpx`，可访问名称为“关闭”。
|
||
- 关闭热区相对弹层定位为 `top: 78rpx; right: 34rpx`，可见朱砂叉号与标题处于同一视觉行，并避开顶部金框。
|
||
- 点击关闭图标或遮罩关闭弹层；点击弹层内部不关闭。
|
||
- Android 返回键在切换弹层打开时优先关闭切换弹层；若添加家谱弹层打开，则优先关闭添加家谱弹层；两者均未打开时交还页面导航。
|
||
- 点击非当前家谱后继续执行现有 `selectGenealogy(item)`：更新当前家谱并关闭弹层，不增加 Toast、Loading 或接口请求。
|
||
|
||
## 响应式和长内容
|
||
|
||
- 在 `320×568`、`360×640`、`360×800`、`412×915` 下，弹层不得横向溢出，标题、关闭图标、列表和底部固定装饰不得互相遮挡。
|
||
- 两项状态在四档尺寸下均应保持紧凑且完整可见。
|
||
- 六项压力状态下背景自然增高；若仍低于最大高度，不显示列表滚动条。
|
||
- 十二项压力状态下弹层封顶，标题、关闭图标和背景顶部固定不动，只有列表可从第一项滚动到最后一项。
|
||
- 列表滚动不得穿透到后方 G01 独立列表；关闭前后保持后方列表位置。
|
||
|
||
## 验证
|
||
|
||
- 先在 `tests/g01-visual-contract.ps1` 增加失败合同，覆盖：移除固定 `720rpx`、使用完整背景九宫格、`600rpx` 最小高度、最大高度、标题安全区、列表滚动容器、关闭图标及 Android 返回键。
|
||
- 最小实现后运行 G01 视觉、空态、加载态和失败态合同，不放宽任何既有阈值。
|
||
- 只复用 9222 上唯一的 Chrome 项目标签页，依次验证四档两项状态、六项自然增高和十二项封顶滚动。
|
||
- 捕获同尺寸修改前／修改后组合证据，检查标题压线、无效空白、背景装饰变形、文本可读性和关闭入口。
|
||
- 最终恢复 `412×915`、两条真实数据、切换弹层打开的状态，等待用户审批。
|
||
- H5 截图仅为内部候选证据；Android/HBuilderX 真机或模拟器仍为未验证项。
|
||
|
||
## 非目标
|
||
|
||
- 不抽取新的全局弹层组件。
|
||
- 不改造“添加家谱”底部弹层。
|
||
- 不修改家谱切换业务数据或路由。
|
||
- 不执行 Git 提交、推送、重置或检出操作。
|