# G01 切换家谱弹层设计规格 ## 目标 只返工 G01“我的家谱”的“切换当前家谱”弹层。弹层在两条数据时紧凑、居中、易读;家谱数量增加时,完整背景随内容自然增高,达到视口安全上限后仅列表内部滚动。 ## 范围 - 保留现有家谱数据、当前项判断、选择逻辑和遮罩关闭逻辑,不对接接口。 - 不修改 G01 其他状态,不修改公共 `AppDialog`、`AppButton` 或其他页面。 - 不生成、不覆盖、不删除任何图片资产。 - 当前状态未经用户明确通过,不标记 G01 为 `[x]`,不冻结页面。 ## 完整背景与伸缩合同 - 唯一背景资产继续使用 `static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png`,源尺寸为 `1860×1560`。 - 不再用绝对定位的 `` 把整张背景限制在固定高度内;容器改为单张完整 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 提交、推送、重置或检出操作。