# 07 — 单文件前端 demo

`Type:` task · `Status:` resolved · `Blocked by:` 03

## Question

产出 `demo/index.html`（单文件 HTML+JS，双击即用，CORS 全放开，debug token 选人——对标商机 969 行版 `​.scratch/opportunity-e2e/demo/index.html`）：覆盖客户模块核心业务流程，供人工验证与票 08 浏览器级测试的载体。

预计 tab 结构（以票 01 原型页族为准）：

- **登录选人**：debug token（管理员 + 跨部门用户下拉）
- **三 workspace**：公海 / 总览 / 我的客户——列表（分页/检索/排序含进入公海时间）+ 卡片 + 看板三分组 + 自定义视图切换
- **新增/编辑 + 查重弹窗**：三层查重交互（相似提示/信用代码硬拦/仍要创建）+ 表单全字段（类型/行业两级/省市区三级/星级等）
- **详情 8 页签**：公共头部 11 项 + 汇总卡 4 张（占位显"--"）+ 联系人 / 跟进（弹窗写入）/ 团队成员（添加/移除）/ 关联商机（只读）/ 操作日志（action 筛选、字段级叙事）
- **归属动作**：领取 / 分配 / 抛公海 / 归档 / 关注 / 重点标记（行内操作）
- **交割**：发起（reason 三值）+ 逐条分配对话框
- **导入**：模板下载 / 上传预校验 / 结果 / 失败明细
- **提醒配置**：单例 GET/PUT 表单

契约落地要点（踩过的坑直接编码进 demo）：BaseParam 分页 current/size、写端点 form 绑定、flat 路径、汇总卡失败显"--"、`Result<Void>` data=null 非失败。**票 04/05 结论出来后把已知 ⚠/❌ 接口加角标防误踩**（商机先例：发布中规则的编辑按钮替换为缺陷角标）。

## Answer

`demo/index.html` 单文件 831 行交付（HTML+内联 CSS+原生 JS，双击即用，无外部依赖），对标商机 969 行版结构与观感。

**覆盖面**：

- **登录**：页头下拉两账号（739564171091247104 罗伟健 admin / 744842318024015872 曾偲青 BUDDY）+ uid 直登输入框；`GET /api/auth/debug/token?userId=`（data 为字符串或 {token} 双形态兼容）→ localStorage 持久化，`/api/auth/me` 取显示名。
- **客户列表 tab**：三 workspace 切换（mine/overview/pool）+ viewType（ASSIGNED/COLLABORATING/FOCUSED）+ keyword 检索 + 分页（current/size）；行字段按 F-01 实测（customerNo/customerStage/customerStarLevel/ownerNameSnapshot/opportunityCount；projectCount 恒 null 显 --）；`POST /{workspace}/board/summary` 汇总卡；勾选行批量操作工具栏。
- **新建/编辑**：全字段表单（名称/类型/省市区/行业一级/信用代码/双星级/isBizNegotiated/isChild/owner）——必填链=名称→省份→行业一级（E2E f16 逐级实测）；needConfirm=true 时渲染 similarHits 相似命中框，确认后 `confirmSimilar=true` 重发（完整 create 路径，quick-create 缺口不含）；编辑回显+version CAS 带回（67005 提示）。
- **详情 tab**：`detail-head` 公共头部（快照+跟进摘要+关联计数，5 字段恒 null 显 --）+ 操作按钮组（编辑/写跟进/加联系人/加成员/关注/取关/重点/领取/抛公海/归档/恢复，单条+批量端点各一）；6 子页签：客户信息（detail 全字段 grid）/联系人（CRUD+check-phone 查重弹窗）/跟进（按日分组渲染+写跟进弹窗 datetime-local ISO-T 格式，D-02 角标）/关联商机（port 反查只读）/团队成员（添加 memberUserIds 多值+移除）/操作日志（action 徽章+detail 叙事按日分组）。页签 5/6（项目/战略协议）V1 骨架无端点（API-SUMMARY §2.5 已知缺口），demo 不渲染。
- **导入 tab**：模板下载直链+三模式下拉+上传预检（FormData file+importMode）+任务列表（taskId/importMode/状态机徽章 DRAFT→RUNNING→DONE/FAILED/五计数字段/failReason）+确认执行/结果弹窗/失败明细弹窗；**D-05(P1)+D-04(P2) 角标钉在标题**（含 INSERT 行导入必 FAILED、失败明细 0 行的提示）。
- **交割 tab**：preview 预览弹窗+initiate 表单（reason 三值；resign 不传 toDirectorId 走 D22 自动推导，调动/区域必填）+交接单分页+详情（明细表+进度 assigned/total+D23 自动完成说明）+逐条分配弹窗（BatchResult successCount）+**D-07(P1) 角标**：assignable 失败时弹窗明示「稳定超时缺陷，E2E 60s×2 实测」。
- **设置 tab**：提醒规则单例 GET 回显/PUT 全量覆盖表单（masterEnabled/firstTriggerEnabled/firstTriggerDays/secondIntervalEnabled/secondIntervalDays，字段名与 F-15 契约逐字对齐；开关缺省=0、64023 提示文案内嵌）+查重试玩三按钮（check-name/check-credit-code/check-phone 直连出 JSON）。

**契约坑已编码**：写端点全 form 绑定（reminder PUT 除外）、分页 current/size、PageResult 取 content、ID 按字符串透传、401 提示登录、404/40401 提示接口不存在、`Result<Void>` data=null 不当失败。

**缺陷角标清单**（商机先例模式）：D-02（跟进页签）、D-05/D-04（导入 tab）、D-07（交割 tab assignable）、A4-7 说明性 mark ×2。

**局限**：saved-view 自定义视图切换未做（crm-preference 依赖未在 55 端点清单，票 10 范围）；列表排序入参未暴露（CustomerPageParam 无排序字段，进入公海时间排序为池内默认）。浏览器级功能验证由票 08 webapp-testing 承接。