# 04 — 前端 demo 客户信息联调验收

**What to build:** 在既有商机 E2E demo（`.scratch/opportunity-e2e/demo/index.html`）上补齐"客户信息区"联调界面，让用户能在浏览器里点着验收前面三张票的成果。demo 需真实调用后端接口，把本次最小联调范围端到端串起来：新增/添加关联客户流程中——"客户类型"与"客户角色"两个下拉从字典接口取真值、关联客户搜索走候选池接口、选中客户后"客户联系人"下拉调 stub 端点级联刷新（空/mock 也要能看出级联在动）、最终提交新增/关联成功。demo 的 dict 预加载已含 `customer_role`，本票补 `customer_type` 分组并把客户信息区控件接上真接口。

**Blocked by:** 01, 02, 03

**Status:** resolved

- [ ] demo 的 `DICT_GROUPS` 预加载补上 `customer_type`，"客户类型"下拉出 6 项真值
- [ ] "客户角色"下拉从 `customer_role` 字典出 6 项真值
- [ ] 关联客户搜索框调 `POST /api/opportunity/customer/search`，输入关键字能出候选客户
- [ ] 选中关联客户后"客户联系人"下拉调 stub 端点级联刷新（切换客户会重新拉取、可见级联行为），空/mock 返回不报错
- [ ] 走通"搜客户→选客户→选角色→联系人级联→提交"整条链路，无 404/500，结果可在 demo 上看到
- [ ] 用户在浏览器打开 demo 完成人工验收

## Answer

在既有 demo `.scratch/opportunity-e2e/demo/index.html` 上完成客户信息区联调改造：
- `DICT_GROUPS` 增补 `customer_type`，demo 启动预加载。
- 关联客户 subtab 新增「+ 添加关联客户」按钮 → `dlgAddCustomer()` 弹窗：客户类型筛选（customer_type 字典）/ 关联客户搜索（`POST /customer/search`）/ 选客户后客户联系人级联（`GET /customer/{id}/contacts` stub）/ 客户角色（customer_role 字典）/ 是否主要 → 提交 `POST /customer/add`。

**Playwright 无头回归全绿**（`drive-demo04.py`，连线上后端 :8080 verify profile）：

| 校验点 | 结果 |
|---|---|
| 字典预加载 | customer_type=6, customer_role=6 |
| 弹窗下拉渲染 | customerType 7 项(全部+6)、customerRole 7 项(必选+6) |
| 客户搜索 | 返回 10 条候选 |
| 选客户 + 联系人级联 | 选中「华东设计院（E2E第二客户）」，联系人下拉级联刷新（stub 空 → 显示「已触发」提示项） |
| 提交关联 | 成功，客户列表 +1 |
| 控制台错误 | 无 |

截图证据：`.scratch/opp-customer-dependency/demo04-1..5-*.png`（客户subtab / 弹窗 / 搜索结果 / 选中级联 / 关联后）。

**待用户人工验收**：起服务 `SPRING_PROFILES_ACTIVE=verify java -jar crm-app/target/crm-app-1.0.0-SNAPSHOT.jar`，浏览器打开 demo index.html → 选人登录 → 打开任一商机详情 → 关联客户 Tab → +添加关联客户，走一遍搜索/级联/提交。