rain
95 lines
4.9 KiB
Markdown
95 lines
4.9 KiB
Markdown
# 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 操作，不启用多代理。
|