---
name: frontend-doc-generation
description: 前端联调方案生成规则
metadata:
  type: feedback
---

# 前端联调方案规则

## 规则

后端接口变更时，**不生成前端代码**，只生成前端联调方案文档，输出到 `docs/` 目录。

## 禁止内容

- ❌ 禁止写 Vue 模板代码（`<el-table-column>`、`<el-form-item>` 等）
- ❌ 禁止写 JavaScript/TypeScript 代码（方法、函数、逻辑判断等）
- ❌ 禁止写 CSS 样式代码
- ❌ 禁止写前端组件使用示例

## 联调方案内容要求

文档应只包含以下内容：

- **API 说明**：路径、方法、请求参数、响应格式
- **涉及的前端页面**：列出需要修改的页面名称
- **数据带入说明**：重点强调信息如何从上一步带入（如采购订单 -> 到货通知 -> 采购入库）
- **接口调用时序**：说明何时调用哪个接口获取关联数据
- **字段展示规则**：用表格说明字段展示位置和说明，不写代码
- **业务规则说明**：用文字或表格说明业务逻辑
- **注意事项**：需要前端注意的边界情况

## 文档模板

```markdown
# 功能名称 - 前端联调方案

## 涉及页面

- 页面1
- 页面2

## 业务流程与数据带入

1. 步骤1 -> 步骤2：字段A、字段B 从步骤1自动带入
2. 步骤2 -> 步骤3：字段C 从步骤2自动带入

## API

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | /xxx/xxx | 说明 |

**请求参数：**

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| xxx | String | 是 | xxx |

**响应字段新增：**

| 字段 | 类型 | 说明 |
|------|------|------|
| xxx | String | xxx |

**响应示例：**

```json
{
  "code": 0,
  "data": {}
}
```

## 字段展示规则

| 字段 | 展示位置 | 说明 |
|------|----------|------|
| 字段A | 列表、详情 | 说明 |
| 字段B | 详情 | 说明 |

## 业务规则说明

| 场景 | 规则 |
|------|------|
| 场景1 | 规则说明 |
| 场景2 | 规则说明 |

## 注意事项

- 注意事项1
- 注意事项2
```