# Design QA

## Comparison targets

- Source visual truth:
  - `../pc-demo截图/NTB.png`
  - `../pc-demo截图/MGM.png`
  - `../pc-demo截图/层层礼.png`
  - `活动管理-达标与进度.html`（视觉样式）
  - `qa/ntb-rule-style-reference.png`（NTB 规则标签样式）
  - `qa/layer-compact-reference-tab.png`（层级 Tab 标注）
  - `qa/layer-compact-reference-rule.png`（层层礼规则布局标注）
  - `qa/layer-overseas-reference.png`（层层礼境外消费规则标注）
- Implementation screenshots:
  - `qa/implementation-ntb.png`
  - `qa/implementation-mgm.png`
  - `qa/implementation-layer-html-style.png`
  - `qa/ntb-rule-style-after.png`
  - `qa/layer-compact-after-top.png`
  - `qa/layer-compact-after-rule.png`
  - `qa/layer-overseas-after.png`
  - `qa/layer-asset-detail-after.png`
  - `qa/layer-overseas-description-after.png`
- Combined comparisons:
  - `qa/compare-ntb.png`
  - `qa/compare-mgm.png`
  - `qa/compare-layer.png`
  - `qa/ntb-rule-style-comparison.png`
  - `qa/layer-compact-comparison.png`
  - `qa/layer-overseas-comparison.png`
- Viewport: 1280 x 720
- Route: `/customization/hsbc/activities/add`
- State: “进度与奖励”Tab，分别选择 NTB、MGM、层层礼

## Full-view comparison evidence

- 三种模板的配置区顺序与截图一致。
- 页面保留现有管理后台外壳和 Element Plus 控件。
- 配置区采用 HTML 参考中的白色卡片、浅灰标题栏、灰色字段面板、轻边框、8px 圆角和紧凑按钮层级。

## Focused region comparison evidence

- NTB：提示话术、时间标签、TRB 进度标签、连续达标参数和权益奖励字段已逐项核对；规则标签卡片的纵向字段顺序、是/否下拉框、连续月数、允许断开和右上角删除图标与最新参考图一致。
- MGM：积分奖励置于规则前；开户时间、TRB、达标话术、不达标原因及被推荐人进阶奖励已逐项核对。
- 层层礼：层级1/2 Tab、层级内活动1/2、资产大类明细、境外消费和活动独立奖励已逐项核对；资产大类明细按“是否需要对比 / 基准月+新增类别 / 限制标签1达标月”三行排列；境外消费规则描述显示指定占位提示；规则内布尔项均为“是/否”下拉框。
- 浏览器 DOM 检查确认层级2可以正常切换，三个模板切换无控制台错误。

## Findings

- 未发现 P0、P1 或 P2 问题。
- P3：截图层级 Tab 使用红色强调，HTML 使用蓝色按钮和中性灰面板；按用户最新说明，视觉以 HTML 为准，保留蓝色交互强调。
- P3：参考图没有完整后台外壳，当前实现包含侧栏和顶部导航。这是现有系统框架，不属于配置区偏差。
- P3：最新 NTB 参考图内容区宽于现有后台可用区域；实现保留固定控件宽度并在窄屏自动换行，属于现有布局约束下的预期差异。

## Patches made

- 将三个模板从共用表单拆分为独立条件渲染。
- 补齐 NTB 时间标签和奖励配置。
- 按最新截图将 NTB 默认奖励改为积分，并补齐标签描述。
- 调整 MGM 奖励、规则、被推荐进度的字段顺序和默认内容。
- 补齐层层礼层级 Tab、每层多个活动、活动依赖提示。
- 层层礼默认规则调整为活动1使用 TRB、活动2使用境外消费，两项活动分别配置权益奖励。
- 保留资产大类明细作为可选规则，不再默认生成。
- 增加旧活动数据归一化，避免编辑时出现空规则和缺失活动2。
- 将 NTB 规则标签改为参考图中的纵向表单：首行集中配置标签、条件和值，后续依次配置开户当月、连续达标、标签描述及三类提示。
- NTB 布尔字段由开关改为“是/否”下拉框，连续达标时联动显示月数和是否允许断开。
- NTB 规则标签使用右上角删除图标，并在删除全部标签后阻止保存。
- 层层礼层级 Tab 改为每项 120px 的紧凑布局，不再平分整行。
- 层层礼规则首行移除“判断条件”和“规则值”标签，只保留相邻控件。
- 层层礼连续达标、连续月份、允许断开收紧为同一行；规则标题、规则描述、标签进度提示改为三行中等宽度输入框。
- 层层礼境外消费规则新增“消费时间：小于等于 + 日期”和“消费维度：笔数 + 大于等于 + 数字”两行配置。
- 境外消费规则移除“标签进度提示”，并为新增必填字段补充默认值、旧数据兼容和保存校验。
- 资产大类明细调整为三行布局，限制标签1达标月与基准月控件垂直对齐，并移除标签进度提示。
- 境外消费规则描述补充“配置?弹窗提示内容”占位。
- 层层礼规则中的开户当月、连续达标、允许断开、是否需要对比、限制标签1达标月全部改为“是/否”下拉框。

## Verification

- `npm run build`: passed
- `git diff --check`: passed
- Browser console errors: none
- Template switching: passed
- Layer tab switching: passed
- NTB rule-card DOM and visual comparison: passed
- Layer compact layout DOM and visual comparison: passed
- Layer overseas rule DOM and visual comparison: passed
- Layer asset-detail layout and boolean-select verification: passed
- Layer overseas description placeholder verification: passed

final result: passed