---
name: business-ui-codegen
description: SpecPow business-ui-codegen skill
---

# UI 代码生成

> 根据设计文档和接口定义，生成前端页面/UI 代码

## 技术栈配置

本技能的**默认**技术栈为 Vue2 + View Design，但会根据项目实际使用的框架自动适配：

- **前端框架** — 优先使用项目已有的框架（Vue2 / Vue3 / React / Angular）
- **UI 组件库** — 匹配项目已有组件库（View Design / Element / Ant Design / MUI）
- **状态管理** — 使用项目已有的状态管理（Vuex / Pinia / Redux / NgRx）
- **样式方案** — 沿用项目已有的 CSS 方案（CSS Modules / Scoped CSS / Tailwind / Less / SCSS）

如果项目无已有前端代码，则在阶段 1 询问用户确认技术选型。

## 触发条件

- 用户要求生成前端页面/UI 代码
- 执行 apply-change 时涉及前端任务
- 用户提到"生成页面"/"写组件"/"创建表单"

## 铁律

1. **接口先行** — 必须确认后端 API 已定义（路径、参数、返回值）
2. **组件复用** — 优先使用 View Design 组件，不造轮子
3. **样式规范** — 使用项目已有的 CSS 变量/mixin
4. **响应式** — 表格、表单必须适配常见分辨率

## 工作流

### 阶段 1：上下文收集

1. 读取 design.md 获取页面结构和交互设计
2. 确认 API 接口定义（路径、Method、参数、响应）
3. **扫描项目已有页面，识别技术栈**（框架、组件库、状态管理、样式方案）
4. 如果项目无已有前端代码，询问用户确认技术选型
5. 确认路由配置方式

### 阶段 2：代码生成

按以下顺序生成：

**2.1 API 接口文件**
```
文件: src/api/xxx.js
- 使用 axios 封装
- 每个接口一个导出函数
- 请求/响应拦截器统一处理
```

**2.2 页面主文件**
```
文件: src/views/xxx/index.vue
- <template>: View Design 组件组合
- <script>: data/methods/computed/watch 标准结构
- <style scoped>: 局部样式
```

**2.3 列表页模板**
```
- 搜索表单（Form + FormItem）
- 操作按钮栏（新增/导出/批量操作）
- 数据表格（Table + columns 配置）
- 分页（Page 组件）
- 新增/编辑弹窗（Modal + Form）
```

**2.4 表单页模板**
```
- 表单验证规则（rules）
- 提交前校验
- 返回/重置按钮
```

**2.5 路由配置**
```
- 路由路径与菜单对应
- meta 包含 title、icon、权限
```

### 阶段 3：验证

1. 语法检查：Vue 模板无报错
2. 组件引用：所有使用的组件已注册
3. API 调用：接口路径和参数与设计一致

## 输出格式

```
文件: src/views/xxx/index.vue
类型: 页面组件
依赖: View Design, axios, 路由
```

## 红旗（立即停止）

- API 接口未定义 → 先完成后端
- 项目未使用 View Design → 确认 UI 框架
- 发现已有同名页面 → 报告冲突