## 演示代码参照

> **UI 类 change 必填**。演示可为 Vue/React；生产实现须达到相同交互与功能，允许换 UI 库。
> 纯后端/无 UI 时在 change 文档首行写：`DEMO_REFERENCE_EXEMPT: <原因>`

- **演示代码根路径**：`（填写绝对或相对路径，如 /path/to/demo 或 docs/demo-v234）`
- **技术栈**：`vue` | `react` | `其他`
- **生产 UI 库**：`（如 Naive UI / Ant Design）`
- **迁移说明**：（可选）演示 Element Plus → 生产 Naive UI，布局与交互 SSOT 仍以演示为准

### 演示模块 → 生产组件映射（门禁 SSOT）

| 演示模块 | 演示文件/组件 | 生产组件路径 | 关键交互信号（须在生产代码出现） | 触发方式 | 壳层类型 | E2E 点击绑定（getByText/click） |
|---------|--------------|-------------|--------------------------------|---------|---------|--------------------------------|
| （示例）列表页 | FinancialOverview.vue | src/views/finance/index.vue | 请输入项目ID或名称、拉取欢聚最新数据 | click | page | getByPlaceholder('请输入项目ID或名称') |
| （示例）账期规则 | ContractManagement.vue | src/views/finance/contractTerm/index.vue | 编辑保存、合同账期 | dblclick+click | inline | |
| （示例）详情-BD预估 | ProjectDetail.vue | src/views/finance/components/BdEstimateSection.vue | 编辑预估、BD预计开票日期 | click | drawer | getByRole('button', { name: '编辑预估' }).click() |
| （示例）详情 | ProjectDetail.vue | src/views/finance/components/DetailDrawer.vue | 项目信息、财务明细 | click | tab | |
| （示例）导入管理 | ImportManagement.vue | src/views/finance/components/ImportDialog.vue | 上传预览、确认覆盖 | click | modal | |
| （填写） | | | | | | |

**触发方式**说明：`dblclick`=双击触发；`click`=点击触发；`hover`=悬停触发；`auto`=系统自动。多个触发方式用`+`连接。
**壳层类型**说明：`inline`=行内编辑；`modal`=弹窗；`drawer`=抽屉；`tab`=Tab切换；`toast`=消息提示；`page`=独立页面。

### 禁止的实现方式

- 禁止仅用单个 `*DetailDrawer.vue` 只读 `info-grid` 代替演示中的多区块/可编辑/弹窗。
- 禁止 tasks 只写「实现 DetailDrawer」而不拆演示模块。
- 禁止 08 报告证据仅写 `index.vue:1`。
- 禁止用弹窗代替行内编辑（当 shellType=inline 时）。
- 禁止用垂直堆叠代替 Tab 切换（当 shellType=tab 时）。
- 禁止用 JSON 文本代替结构化表格预览（当演示代码含 `<el-table>`/`<n-data-table>` 预览时）。
- 禁止省略步骤指示器（当演示代码含步骤条时）。