# 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`（由第二阶段实测票各自负责）

## 骨架必须提供的公共能力

```js
// 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 轮子。