129 lines
4.2 KiB
Markdown
129 lines
4.2 KiB
Markdown
---
|
||
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. [ ] 文档已更新
|