jiapuapp/docs/superpowers/specs/2026-07-21-g10-all-states-responsive-visual-design.md

G10 全状态响应式视觉调整设计

问题与目标

MuMu 原生画面确认 G10“入谱审核”存在三类问题：

1. 列表卡片和状态卡使用 list-slip-frame.png 整图 100% 100% 拉伸，四角与上下边框纵向变形。
2. 列表双操作和确认弹窗双操作把比例约 6.2:1 至 6.8:1 的卷轴素材放入窄按钮后使用 aspectFit，可见皮肤缩成细横条。
3. AppDialog 的标题和说明是相邻文本节点，MuMu 中会连成同一行，信息层级不清楚。

目标是在不改变审核业务逻辑的前提下，让列表、弹窗、审核结果及空／错／无权限状态在 MuMu 中保持真实素材比例、清晰层级和完整触控视觉。

组件边界

AppButton

• 新增布尔属性 compact，默认值为 false。
• 只有显式设置 compact 时启用紧凑九宫格皮肤；其他已通过页面继续使用当前 aspectFit 皮肤，默认视觉不变。
• 紧凑按钮隐藏原 <image> 皮肤，在按钮根节点使用对应的真实卷轴素材作为 border-image：
  • 主按钮：a01-scroll-primary-v3.png
  • 次按钮：a01-scroll-secondary-v3.png
• 紧凑切片固定为 border-image-slice: 56 300 fill，边框宽度固定为 10rpx 26rpx，重复方式为 stretch。
• 紧凑按钮继续保留原有点击、禁用、按下态、无障碍标签和文字层。

AppDialog

• 新增布尔属性 compactActions，默认值为 false。
• 当 compactActions 为真且 showCancel 为真时，取消和确认按钮继续左右并排，并向两个 AppButton 传递 compact。
• 单按钮弹窗不启用紧凑模式，继续显示当前完整宽卷轴按钮。
• 标题与说明放入独立的 .app-dialog__copy 容器；标题和说明均为独立块级行、宽度 100%，说明保持 22rpx 上间距。
• 不修改弹窗遮罩、背景画、关闭规则、焦点恢复和事件名称。

G10 页面设计

列表与状态卡

• .application-card 改用 list-slip-frame.png 九宫格边框：
  • border-image-slice: 24 32
  • border-width: 18rpx 24rpx
  • border-image-width: 18rpx 24rpx
  • border-image-repeat: stretch
• 列表卡片最小高度使用 218rpx，卡片间距使用 12rpx。
• .application-card__body 最小高度使用 182rpx，间距使用 8rpx 0，内距使用 28rpx 28rpx 22rpx 40rpx。
• 关系说明上间距从 15rpx 收紧为 8rpx。
• .review-state-card 同样使用 24 32 九宫格切片，不再整图拉伸；状态文案、加载分支和重试行为不变。

待审核操作

• G10 列表改为复用 AppButton compact，拒绝和通过继续左右并排。
• 每个按钮保持 148rpx × 68rpx 的可见尺寸，间距保持 12rpx。
• 拒绝使用 secondary，通过使用 primary；按钮文字和点击回调保持不变。
• 页面不再直接渲染 a01-primary-button-v2.png 或 a01-secondary-button-v2.png 的 aspectFit 图片。

审核结果

• review-result 保持 308rpx × 68rpx，使用与紧凑按钮相同的九宫格切片规则。
• 已通过使用 a01-scroll-primary-v3.png，已拒绝使用 a01-scroll-secondary-v3.png。
• 结果状态是静态展示，不改成可点击按钮，不增加隐藏点击区域。

审核弹窗

• G10 的 AppDialog 显式传入 compact-actions。
• 审核说明：标题“审核说明”和说明正文分行；单个“我知道了”按钮保持完整宽卷轴。
• 通过确认：标题与说明分行；取消／确认通过左右并排并使用紧凑九宫格皮肤。
• 拒绝确认：标题与说明分行；拒绝原因输入框保持现有结构；取消／确认拒绝左右并排并使用紧凑九宫格皮肤。
• 不改变拒绝原因必填校验、审核状态写入、反馈提示和弹窗关闭行为。

状态覆盖

MuMu 原生验收依次覆盖：

1. 待审核列表。
2. 审核说明。
3. 通过确认。
4. 通过完成与反馈提示。
5. 拒绝确认。
6. 空拒绝原因校验。
7. 拒绝完成与反馈提示。
8. 空数据。
9. 加载。
10. 错误与重新查看。
11. 无权限。

合同与验证

• 先补充失败合同，再修改组件和页面。
• AppButton 合同要求 compact 默认关闭，并固定紧凑九宫格素材与切片值。
• AppDialog 合同要求 compactActions 默认关闭、双按钮显式传递紧凑模式，并固定标题／说明独立布局。
• G10 视觉合同禁止列表卡和状态卡继续使用完整背景 100% 100% 拉伸。
• G10 视觉合同固定列表卡、状态卡、操作按钮和结果状态的九宫格规则与尺寸。
• 运行 AppButton、AppDialog、G08–G10 流程、G09/G10 业务状态和 G10 全状态视觉合同。
• 每个可见状态只以 MuMu Android 原生截图验收，不使用浏览器截图代替。
• 不修改文案、模拟数据、状态枚举、路由、审核结果和交互流程。
• 不执行 Git 操作，不启用多代理。