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,22 @@
+# G09 申请卡片九宫格边框设计
+
+## 问题
+
+`list-slip-frame.png` 原始尺寸为 `720×144`，比例为 `5:1`。G09 卡片当前约为 `672×228rpx`，比例约 `2.95:1`，并使用 `background-size: 100% 100%`，导致整张边框素材被纵向拉伸。卡片上、下内距和卡片间距也偏宽。
+
+## 方案
+
+- `.application-card` 停止使用拉伸背景，改用 CSS `border-image` 九宫格切片。
+- 使用原素材 `list-slip-frame.png`，切片固定为上/下 `24px`、左/右 `32px`；四角不变，只拉伸中间边线。
+- 卡片边框宽度使用上/下 `18rpx`、左/右 `24rpx`。
+- 卡片最小高度从 `228rpx` 收紧到 `210rpx`，卡片间距从 `18rpx` 收紧到 `12rpx`。
+- 卡片正文最小高度使用 `174rpx`，网格间距使用 `8rpx 14rpx`，内距使用 `26rpx 28rpx 22rpx 40rpx`。
+- 保留 `white-space: nowrap`，不修改操作文案、状态、模拟数据和交互。
+
+## 验证
+
+- 合同禁止 `.application-card` 继续使用 `background: ... list-slip-frame.png ... 100% 100%`。
+- 合同要求 `border-image-source`、`border-image-slice: 24 32`、边框宽度和收紧后的布局值。
+- G09 视觉、文档流和业务状态合同通过。
+- MuMu 原生画面中四角比例正常，卡片内容间距更紧凑，“修改后重新提交”保持单行且不溢出。
+- 不执行 Git 操作，不启用多代理。
@@ -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 操作，不启用多代理。
@@ -0,0 +1,38 @@
+# 全项目通用提示文案设计
+
+## 目标
+
+所有用户可见的输入提示、示例和辅助说明不得使用具体人物姓名或具体家族名称。页面模拟数据继续使用现有姓名，不纳入本次修改。
+
+## 适用范围
+
+纳入检查：
+
+- `placeholder` 属性和表单配置中的 `placeholder` 字段。
+- 带“例如”“比如”“如：”的用户示例文案。
+- 紧邻输入框、用于说明填写格式的辅助文字。
+
+排除检查：
+
+- 成员目录、人物档案、申请记录、审核记录等模拟数据。
+- 自动化测试填写的模拟输入值。
+- 已录入数据在详情页或卡片中的展示。
+
+## 本轮替换
+
+- G08 关系输入：`例如：汤正华堂侄` → `例如：某某某堂侄`。
+- G08 关系辅助说明：`请以家谱中一位已知长辈为参照，例如：汤正华堂侄` → `请以家谱中一位已知长辈为参照，例如：某某某堂侄`。
+- G03 姓氏：`如：汤` → `请输入姓氏`。
+- G03 谱名：`如：汤氏家谱` → `请输入家谱名称`。
+- `TreeMemberForm` 首位成员姓名：`汤文远` → `请输入首位成员姓名`。
+- `TreeMemberForm` 当前成员：`汤文远` → `请选择当前成员`。
+
+其他不含具体姓名的格式示例保留，例如“长子、配偶”“1992年”“春节团圆”“家风家训”。
+
+## 合同与验收
+
+- 新增提示文案合同，只扫描 `.vue` 文件中含 `placeholder`、`例如`、`比如`、`如：` 的行，以及 G08 的关系辅助说明。
+- 合同禁止上述提示上下文出现当前模拟人物姓名或具体家族名称，不扫描普通模拟数据行。
+- 聚焦合同与受影响页面现有合同通过。
+- MuMu 复核 G08 默认表单，关系输入和辅助说明必须显示“某某某堂侄”。
+- 不执行 Git 操作，不启用多代理。
@@ -0,0 +1,180 @@
+# 全项目响应式布局与装饰素材自适应设计
+
+## 背景
+
+当前项目共有 65 个 Vue 文件。静态扫描发现：
+
+- 27 个文件包含固定 `height`。
+- 29 个文件包含 `background-size: 100% 100%` 或等价整图拉伸。
+
+这些规则混合了两类完全不同的用途：导航栏、图标和最低触控目标需要稳定尺寸；弹窗、表单、卡片、列表、状态说明等内容容器必须由内容和屏幕决定尺寸。当前缺少统一契约，导致同一装饰素材在不同页面被重复拉伸，短内容产生大块空白，长内容被压缩或溢出。
+
+本设计建立全项目唯一响应式规则，不再针对单页写专用高度。
+
+## 总体原则
+
+### 内容容量
+
+- 内容容器不得使用固定 `height` 表达内容容量。
+- 卡片、弹窗、表单面板、状态面板、列表项和正文区域由内容自然撑开。
+- 允许使用 `min-height` 保证最小视觉基线或触控目标，但内容增加时必须继续增高。
+- 只有受到视口限制的浮层允许 `max-height`；超过上限时在浮层内部滚动，不压缩正文和操作区。
+- 页面主区域使用正常文档流；除 Toast、遮罩、必要悬浮反馈外，不用绝对定位补偿尺寸。
+
+### 宽度与重排
+
+- 页面内容区使用 `width: 100%`、`max-width: 100%` 和 `box-sizing: border-box`。
+- flex/grid 的可变文本列必须使用 `min-width: 0`。
+- 数据文本默认允许换行，并使用 `overflow-wrap: anywhere` 保护窄屏。
+- 只有短、固定语义的操作按钮允许 `white-space: nowrap`；按钮皮肤和文字容量必须同时验证。
+- 多列布局在紧凑宽度无法保证文字容量时改为单列或分行，不使用缩小字体规避。
+
+### 高度与安全区
+
+- `PageHeader`、`AppTabbar`、状态栏占位、图标、头像和媒体缩略图可以保留固定尺寸或 `aspect-ratio`。
+- 按钮可以保留最低触控高度，不得用固定高度截断多行标签。
+- 页面最小高度使用 `min-height: 100vh`；底部操作同时考虑安全区。
+- 键盘弹出、状态栏高度变化和短屏不能让主要操作移出可达区域。
+
+## 装饰素材规则
+
+### 可变内容表面
+
+弹窗、内容卡、表单框、状态框、通知卡、人员卡等承载可变内容的装饰素材必须使用九宫格：
+
+- 使用真实 PNG 作为 `border-image-source`。
+- 切片值和渲染边框宽度由唯一的素材档案维护。
+- 四角、卷轴端头和边缘纹样不拉伸，只拉伸中间区域。
+- 不允许在这些容器上使用 `background-size: 100% 100%`。
+
+### 固定比例素材
+
+Logo、图标、头像、印章、插画、完整按钮图和媒体缩略图可以使用 `aspectFit`、`widthFix`、`contain` 或明确的 `aspect-ratio`。
+
+完整按钮图只有在按钮槽位比例与素材比例兼容时使用 `aspectFit`；窄按钮使用紧凑九宫格皮肤，不得缩成细条。
+
+### 允许例外
+
+分隔线、纯纹理层、固定比例的非内容装饰和明确允许裁切的背景可以继续使用拉伸或裁切，但必须登记到统一白名单并说明理由。页面不得自行新增例外。
+
+## 单一所有者
+
+### 素材档案
+
+新增 `styles/adaptive-frame-profiles.scss` 作为九宫格素材的唯一所有者。每个档案包含：
+
+- 档案名称。
+- PNG 路径。
+- `border-image-slice`。
+- `border-width` / `border-image-width`。
+- 是否使用 `fill`。
+
+首批档案至少覆盖：
+
+- `auth-dialog`
+- `genealogy-slip`
+- `module-content`
+- `module-field`
+- `tree-panel`
+- `tree-field`
+- `notification-card`
+- `profile-summary`
+- `records-content`
+- `records-field`
+
+页面和组件只消费档案，不重复定义切片值。
+
+### 响应式例外白名单
+
+新增 `tests/responsive-layout-allowlist.json`，作为固定高度和整图拉伸例外的唯一所有者。每条记录必须包含：
+
+- 文件路径。
+- 选择器。
+- 允许的属性。
+- 固定尺寸或拉伸成立的具体原因。
+
+旧例外路径不保留在其他测试或文档中；新增例外必须修改该文件和全局合同。
+
+### 全局合同
+
+新增 `tests/project-responsive-layout-contract.ps1` 扫描 `components/**/*.vue` 与 `pages/**/*.vue`：
+
+- 内容容器出现固定 `height` 且不在白名单时失败。
+- 可变内容表面出现 `100% 100%` 整图拉伸且不在白名单时失败。
+- 九宫格档案在页面重复定义切片值时失败。
+- 需要换行的数据区域出现无理由 `nowrap` 时失败。
+- 共享组件的默认响应式契约缺失时失败。
+
+新增 `tests/responsive-layout-coverage.json` 作为分阶段覆盖清单。第一阶段先纳入公共组件；后续每完成一个模块，就把该模块全部 Vue 文件加入清单。已经纳入的文件不得移出，最终阶段要求清单与 `components/**/*.vue`、`pages/**/*.vue` 的实际文件集合完全一致，并删除所有仅用于迁移过程的覆盖缺口。该清单不是例外白名单，不能登记允许违规的理由。
+
+## 共享组件设计
+
+### AppDialog
+
+- 删除 `.app-dialog` 和 `.app-dialog__content` 的固定 `520rpx` 最小高度。
+- `a01-scroll-dialog-v3.png` 改为 `auth-dialog` 九宫格档案。
+- 弹窗使用 `width: 650rpx; max-width: 100%`，外层保留视口安全间距，避免依赖额外的 CSS 函数兼容性。
+- 内容高度由标题、正文、插槽和操作区自然撑开。
+- 操作区使用正常间距，不再使用 `margin-top: auto` 制造固定空白。
+- 弹窗使用视口最大高度；内容超出时内部滚动。
+- 通过确认会自动收紧；拒绝原因出现后弹窗自动增高；极短屏才滚动。
+
+### AppButton
+
+- 保留默认完整宽按钮和显式 `compact` 九宫格变体。
+- 使用 `min-height` 保证触控目标，不用固定高度截断标签。
+- 紧凑按钮根据容器宽度保持四字操作容量。
+
+### ModulePage
+
+- `module-content` 和 `module-field` 表面改为统一九宫格档案。
+- 模块页正文、状态卡和表单由内容撑开。
+- 分隔线等固定非内容装饰可登记白名单。
+
+### PageHeader 与 AppTabbar
+
+- 作为结构性导航保留固定内容高度和安全区计算。
+- 标题区保留 `min-width: 0`，长标题按既定规则缩放或换行，不影响左右操作区。
+- 这些固定高度必须进入白名单并说明为导航结构，不允许页面复制其值。
+
+## 模块迁移顺序
+
+全项目迁移拆分为可独立验收的阶段，不在一次修改中混合 65 个页面：
+
+1. **基础层**：素材档案、全局合同、白名单、AppDialog、AppButton、ModulePage。
+2. **A/G 模块**：登录注册、家谱列表、创建、搜索、申请、审核、设置、字辈诗。
+3. **T 模块**：树图、成员档案、添加／编辑关系、成员目录与状态页。
+4. **F 模块**：动态、文章、相册和媒体上传。
+5. **R/N/M 模块**：人物档案、消息通知、个人中心和设置页。
+
+每个阶段必须满足：合同先失败、实现后通过、MuMu 关键页面通过，才能进入下一阶段。
+
+## MuMu 响应式验证矩阵
+
+视觉验收只使用 MuMu Android 原生画面。每个阶段至少验证三种 Android 逻辑视口：
+
+- 紧凑屏：`360 × 640dp`。
+- 常规长屏：`360 × 800dp`。
+- 宽长屏：`412 × 915dp`。
+
+使用 MuMu 的 Android 分辨率／密度配置或 `adb shell wm size` 与 `wm density` 临时切换；每轮结束恢复用户当前配置。不得用浏览器截图代替。
+
+每个页面至少覆盖默认、加载、空、错误和主要弹窗／表单校验状态；没有某状态的页面记录为不适用。
+
+## 验收标准
+
+- 短内容容器不出现由固定高度造成的大块空白。
+- 长内容容器不拥挤、不压边、不遮挡操作区。
+- 装饰四角、卷轴端头、边框纹样不变形。
+- 文本放大、长姓名、长关系说明和错误文案不会被截断。
+- 主要操作始终可见或可通过页面／浮层内部滚动到达。
+- 三种 MuMu 视口均无水平滚动、非预期裁切或点击区域错位。
+- 已通过页面的业务逻辑、路由、数据状态和文案不因布局迁移改变。
+
+## 约束
+
+- 不修改业务接口、状态枚举、模拟数据和页面路由。
+- 不以缩小字体作为适配方案。
+- 不新增页面专用固定高度补丁。
+- 不保留旧拉伸规则作为回退路径。
+- 不执行 Git 操作，不启用多代理。