feat: unify project responsive layouts

2026-07-21 20:59:10 +08:00
parent a0d19f4aab
commit 5d99bae3f2
94 changed files with 2324 additions and 404 deletions
@@ -0,0 +1,94 @@
+# 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 操作，不启用多代理。