---
name: full-feature
version: 2.1.0
description: "Vue 3 + Hyperf 端到端功能开发工作流。当需要从数据库到 API 到 UI 全链路开发完整功能时使用。编排多个技能协同工作。"
requires: [component-scaffold, vue-testing]
---

> ⚠️ 核心执行流程已在 `.cursor/rules/skill-full-feature.mdc` 中由 Cursor 自动注入。
> 本文件提供完整模板、代码示例和边缘场景处理，供 Agent 按需深入 Read。

# Full Feature Workflow (Vue 3 + Hyperf)

## 触发条件

用户要求开发一个完整功能（前端 + 后端 + 数据库 + 测试）。

## 执行流程

### Phase 1: 规划

1. **拆分功能为子任务**：
   - 数据层：需要什么数据模型和数据库变更？
   - 后端 API：需要哪些 Controller/Service/Repository？
   - 前端 UI：需要哪些组件和页面？
   - 测试：每层需要什么测试？

2. **确认技术决策**（向用户确认有争议的选择）

3. **输出执行计划**：

```
## 功能: <功能名称>

### 数据层
- [ ] Hyperf Migration — 创建/修改表
- [ ] Model 定义 — 关联、Casts、Fillable

### 后端 API 层
- [ ] POST /admin/<resources> — 创建
- [ ] GET /admin/<resources> — 列表
- [ ] GET /admin/<resources>/:id — 详情
- [ ] PUT /admin/<resources>/:id — 更新
- [ ] DELETE /admin/<resources>/:id — 删除
- [ ] Service 业务逻辑
- [ ] FormRequest 参数验证
- [ ] 路由注册 + 中间件

### 前端 UI 层
- [ ] API 接口封装 (src/api/<module>)
- [ ] 列表页 (src/views/<module>/<resource>/index.vue)
- [ ] 表单组件 (src/components/custom/<Resource>Form.vue)
- [ ] 详情页 (可选)
- [ ] 路由配置 (src/router/routes/<module>.ts)
- [ ] Store 模块 (如需跨页面状态)

### 测试
- [ ] PHPUnit — Service 层测试
- [ ] Vitest — 组件渲染测试
```

### Phase 2: 数据层（使用 database-migration 技能）

1. 生成迁移: `php bin/hyperf.php gen:migration create_<table>_table`
2. 编写迁移（遵循高并发表设计规范）
3. 执行迁移: `php bin/hyperf.php migrate`
4. 生成 Model: `php bin/hyperf.php gen:model <table>`
5. 补充 Model 关联和类型转换

### Phase 3: 后端 API 层（使用 api-scaffold + hyperf-service 技能）

1. 创建 Controller（接收请求、调用 Service）
2. 创建 Service（核心业务逻辑、事务管理）
3. 创建 Repository（可选，复杂查询时使用）
4. 创建 FormRequest（输入验证）
5. 注册路由 + 挂载中间件
6. 编写 PHPUnit 测试

### Phase 4: 前端 UI 层（使用 component-scaffold + vue-page 技能）

1. 封装 API 接口

```typescript
// src/api/<module>/<resource>.ts
import request from '@/utils/request'

export const {{resource}}Api = {
  list: (params) => request.get('/admin/{{resources}}', { params }),
  getById: (id) => request.get(`/admin/{{resources}}/${id}`),
  create: (data) => request.post('/admin/{{resources}}', data),
  update: (id, data) => request.put(`/admin/{{resources}}/${id}`, data),
  delete: (id) => request.delete(`/admin/{{resources}}/${id}`),
}
```

2. 创建列表页（管理端：Element Plus 表格 + 分页；用户端：Tailwind 卡片/表格 + 自定义分页，禁止 Element Plus）
3. 创建表单组件（管理端：Element Plus Form + 验证；用户端：Headless UI + Tailwind 表单，禁止 Element Plus）
4. 创建详情页（如需要）
5. 配置 Vue Router 路由
6. 连接 API 到 Pinia Store（如需跨页面状态）

### Phase 5: 集成验证

1. 后端测试: `composer test`
2. 后端静态分析: `composer analyse`
3. 前端 Lint 检查: `npm run lint`
5. 手动测试功能流程（CRUD 全路径）

### Phase 6: 收尾

1. 更新相关文档（data-model.md、api-contracts.md）
2. Git commit（遵循 Conventional Commits）
3. 汇报完成状态

## 执行原则

- **自底向上**：先数据层，再后端 API，再前端 UI
- **每步验证**：每个 Phase 完成后运行测试
- **可中断**：每个 Phase 独立可提交
- **用已有技能**：尽量调用其他 Skill 而非从零写
- **前后端分离**：API 契约先行，前后端可并行开发

## 验证

1. [ ] 后端测试全部通过
2. [ ] 前端 ESLint 无报错
3. [ ] 功能端到端可用（创建、列表、详情、编辑、删除）
4. [ ] 代码遵循项目现有模式
5. [ ] 文档已更新