# 纯前端改动：临时 mock 路由 + Playwright 端到端验证

## 场景

修改 `FormRenderer` / `FormFieldRenderer` 这种纯前端组件，要验证 7 个新字段类型能否正确渲染、交互、写入 state。常规流程是：起 docker → push schema → seed → 起 backend → 起 frontend → 登录 → 打开实际表单。但本仓库的 L2 测试表单 `l2__b1n918bc` **不在 seed 里**（是某次手测时建的），fresh DB 跑 seed 也拿不到这个表单。

## 解决思路

跳过 DB+backend 整条链路，只起 frontend dev server + 一个临时路由：

1. 在 `frontend/src/app/<temp-name>/page.tsx` 写一个 `'use client'` 页面
2. 直接构造 `schema` / `uiSchema` / `formData` 喂给 `FormRenderer`
3. 起 `npm run dev`（无需 backend）
4. Playwright MCP 走访问 → snapshot → click → snapshot 验流程
5. 完事 `rm -rf` 临时路由

整个验证 < 5 分钟，比起后端拉起来 + 登录链路省掉 80% 时间。

## 关键点

- **路由放 `app/` 顶层**（不进 `(modules)` 等 route group），避免 layout 里的认证 / 组织上下文请求 backend——虽然失败但不影响目标组件渲染
- **接受 console 里 `ECONNREFUSED localhost:4001` 的网络 error**：来自 `useAuth.reload` / `OrganizationContext`，跟你的组件无关。验证时只看是否有**新增** runtime error
- **dev server 用 Bash `run_in_background: true` 启动，不要在命令里加 `&`**（见 2026-05-01-bash-bg-detach.md）
- **测完务必删临时路由再 commit**——别让 dev-only 路由进 PR

## 适用范围

- 纯组件修改（renderer / 表单字段 / 通用 UI）
- 不依赖真实数据的逻辑验证

## 不适用

- 跟 backend API 契约相关的改动（必须真实接口）
- 权限 / 多租户上下文敏感的页面（mock 上下文成本反而更高）
- 跨页面导航流程（用真实路由更合适）