molong/vibe_coding

Fork 0

Files

molong 130de0fd5d 初始化

2026-03-05 21:27:11 +08:00

4.2 KiB

Raw Blame History

name, version, description, requires

name

version

description

requires

full-feature

2.1.0

Vue 3 + Hyperf 端到端功能开发工作流。当需要从数据库到 API 到 UI 全链路开发完整功能时使用。编排多个技能协同工作。

component-scaffold

vue-testing

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

Full Feature Workflow (Vue 3 + Hyperf)

触发条件

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

执行流程

Phase 1: 规划

拆分功能为子任务：
- 数据层：需要什么数据模型和数据库变更？
- 后端 API：需要哪些 Controller/Service/Repository？
- 前端 UI：需要哪些组件和页面？
- 测试：每层需要什么测试？
确认技术决策（向用户确认有争议的选择）
输出执行计划：

## 功能: <功能名称>

### 数据层
- [ ] 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 技能）

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

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

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

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

封装 API 接口

// 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}`),
}

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

Phase 5: 集成验证

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

Phase 6: 收尾

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

执行原则

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

验证

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

4.2 KiB Raw Blame History Unescape Escape