crm-backend-matt/.scratch/opportunity-verify/issues/02-frontend-demo-scaffold.md

02 — 前端 demo 骨架（多页共享 common.js）

Type: task Status: open Blocked by: —

Question

搭建 .scratch/opportunity-verify/frontend/ 目录下的多页 demo 骨架，为第二阶段实测票复用：

• common.js — 抽取原 e2e/frontend/app.js 里的 token / fetch 封装 / 消息 toast / 响应 pretty-print
• common.css — 复用原样式 + 加"响应面板"样式（每个接口调用一个可折叠 JSON 显示块）
• index.html — 门户页，链接到各子域测试页
• 每个子域一个 .html（由第二阶段实测票各自负责）

骨架必须提供的公共能力

// common.js API
window.crm = {
  api: 'http://localhost:8080',
  login(userId),          // 拿 debug token，塞 localStorage
  token(),                // 读 token
  call(method, path, {json, form, query}),  // 统一 fetch，含 auth
  panel(id, title),       // 创建一个响应显示块
  render(id, {status, body, error}),        // 把结果渲染进 panel
};

完成判据

• .scratch/opportunity-verify/frontend/{common.js, common.css, index.html} 存在
• index.html 在浏览器里能加载、能登录、能显示 token 状态
• 门户页列出待建的子域测试页链接（第二阶段每个实测票填一个）
• 用 webapp-testing 打开 index.html，能完成"输入 userId → 拿 token → 显示已登录" 冒烟

不做

• 具体接口测试面板 — 归第二阶段实测票
• 样式打磨 — 极简就够

传出

搭好后，第二阶段的每张实测票只需一个 .html、复用 common.js，无需重复造 fetch/token 轮子。