rongshu/工作空间/产研/权益/汇丰全行/产品原型/pc-demo/design-qa.md

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