962 lines
27 KiB
Markdown
962 lines
27 KiB
Markdown
|
# 盘古用户平台 - 多Agent协同开发指南
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 重要：协同开发规则
|
|||
|
|
|
|||
|
|
### 1. 开发服务器管理
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
⚠️ 关键规则：
|
|||
|
|
- 只有 Agent-1 负责启动 npm run dev（端口3000）
|
|||
|
|
- Agent-2 ~ Agent-7 只创建/修改文件，绝不启动dev server
|
|||
|
|
- 所有Agent共享同一个项目目录，自动热更新
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 文件边界划分
|
|||
|
|
|
|||
|
|
每个Agent只能操作自己负责的文件，避免冲突：
|
|||
|
|
|
|||
|
|
| Agent | 可操作的文件 |
|
|||
|
|
|-------|------------|
|
|||
|
|
| Agent-1 | src/layout/*, src/mock/index.js, src/mock/user.js, src/utils/*, src/views/dashboard/*, src/main.js, src/router/index.js, src/App.vue |
|
|||
|
|
| Agent-2 | src/views/login/* |
|
|||
|
|
| Agent-3 | src/views/school/*, src/api/school.js, src/mock/school.js |
|
|||
|
|
| Agent-4 | src/views/member/*, src/api/member.js, src/mock/member.js |
|
|||
|
|
| Agent-5 | src/views/student/*, src/api/student.js, src/mock/student.js |
|
|||
|
|
| Agent-6 | src/views/application/*, src/api/application.js, src/mock/application.js |
|
|||
|
|
| Agent-7 | src/views/base/*, src/api/grade.js, src/api/class.js, src/api/subject.js, src/api/region.js, src/mock/grade.js, src/mock/class.js, src/mock/subject.js, src/mock/region.js |
|
|||
|
|
|
|||
|
|
### 3. 共享文件更新规则
|
|||
|
|
|
|||
|
|
`src/mock/index.js` 需要汇总所有mock文件：
|
|||
|
|
- Agent-1 创建基础结构，只import user.js
|
|||
|
|
- Agent-3~7 完成后，各自在末尾追加自己的import
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// Agent-1 创建的基础内容
|
|||
|
|
import './user'
|
|||
|
|
|
|||
|
|
// Agent-3 追加
|
|||
|
|
import './school'
|
|||
|
|
|
|||
|
|
// Agent-4 追加
|
|||
|
|
import './member'
|
|||
|
|
|
|||
|
|
// ... 以此类推
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 验证方式
|
|||
|
|
|
|||
|
|
- Agent-1 完成后启动 `npm run dev`，保持运行
|
|||
|
|
- Agent-2~7 完成后，刷新浏览器即可看到新页面（Vite热更新）
|
|||
|
|
- 无需重启服务器
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
使用多个AI Agent并行开发前端页面，每个Agent负责一个独立模块。
|
|||
|
|
|
|||
|
|
**技术栈**：Vue 3 + Vite + Element Plus + Pinia + Vue Router + MockJS
|
|||
|
|
|
|||
|
|
**项目路径**：`/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui`
|
|||
|
|
|
|||
|
|
**原型地址**：https://modao.cc/proto/atlwMul8t9pi6yxQ42W7up/sharing
|
|||
|
|
|
|||
|
|
**作者**：pangu
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent分工
|
|||
|
|
|
|||
|
|
| Agent | 负责模块 | 启动Server | 文件范围 |
|
|||
|
|
|-------|---------|:----------:|---------|
|
|||
|
|
| Agent-1 | 核心基础设施 | ✅ 是 | layout, utils, mock入口, dashboard |
|
|||
|
|
| Agent-2 | 登录页面 | ❌ 否 | views/login |
|
|||
|
|
| Agent-3 | 学校管理 | ❌ 否 | views/school, api/school, mock/school |
|
|||
|
|
| Agent-4 | 会员管理 | ❌ 否 | views/member, api/member, mock/member |
|
|||
|
|
| Agent-5 | 学生管理 | ❌ 否 | views/student, api/student, mock/student |
|
|||
|
|
| Agent-6 | 应用管理 | ❌ 否 | views/application, api/application, mock/application |
|
|||
|
|
| Agent-7 | 基础数据 | ❌ 否 | views/base/*, api/grade等, mock/grade等 |
|
|||
|
|
|
|||
|
|
**执行顺序**：
|
|||
|
|
1. 先完成 Agent-1（启动dev server，保持运行）
|
|||
|
|
2. Agent-2~7 并行开发（只创建文件，不启动server）
|
|||
|
|
3. 每个Agent完成后刷新浏览器验证
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 前端编码规范（所有Agent必须遵守）
|
|||
|
|
|
|||
|
|
### 1. 表格规范
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- ✅ 正确：表格必须设置这些属性 -->
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
border
|
|||
|
|
stripe
|
|||
|
|
v-loading="loading"
|
|||
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<!-- 列宽度必须明确指定，避免右侧大量空白 -->
|
|||
|
|
<el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="code" label="编码" width="120" />
|
|||
|
|
<el-table-column prop="status" label="状态" width="80" align="center" />
|
|||
|
|
<el-table-column prop="createTime" label="创建时间" width="160" />
|
|||
|
|
<!-- 操作列固定右侧 -->
|
|||
|
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
|
|||
|
|
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<!-- ❌ 错误：不设置列宽会导致右侧大量空白 -->
|
|||
|
|
<el-table :data="tableData">
|
|||
|
|
<el-table-column prop="name" label="名称" />
|
|||
|
|
</el-table>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 列宽分配原则
|
|||
|
|
|
|||
|
|
| 字段类型 | 推荐宽度 | 说明 |
|
|||
|
|
|---------|---------|------|
|
|||
|
|
| ID/编号 | 80-100px | 固定宽度 |
|
|||
|
|
| 名称/标题 | min-width: 120-200px | 弹性宽度，使用min-width |
|
|||
|
|
| 状态/类型 | 80-100px | 固定宽度，居中 |
|
|||
|
|
| 日期时间 | 160-180px | 固定宽度 |
|
|||
|
|
| 手机号 | 120px | 固定宽度 |
|
|||
|
|
| 操作列 | 根据按钮数量，120-200px | 固定右侧 |
|
|||
|
|
|
|||
|
|
### 3. 长文本处理
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 使用 show-overflow-tooltip 处理长文本，鼠标悬停显示全部 -->
|
|||
|
|
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
|
|||
|
|
|
|||
|
|
<!-- 手机号脱敏显示 -->
|
|||
|
|
<el-table-column prop="phone" label="手机号" width="120">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
{{ row.phone ? row.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '-' }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 表格响应式
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 使用 el-scrollbar 包裹，确保水平滚动 -->
|
|||
|
|
<el-scrollbar>
|
|||
|
|
<el-table :data="tableData" style="width: 100%; min-width: 800px;">
|
|||
|
|
<!-- 列定义 -->
|
|||
|
|
</el-table>
|
|||
|
|
</el-scrollbar>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. 搜索表单规范
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- ✅ 正确：使用 inline 表单，合理分布 -->
|
|||
|
|
<el-form :model="queryParams" ref="queryFormRef" :inline="true" class="search-form">
|
|||
|
|
<el-form-item label="名称" prop="name">
|
|||
|
|
<el-input v-model="queryParams.name" placeholder="请输入名称" clearable style="width: 200px" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="状态" prop="status">
|
|||
|
|
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 120px">
|
|||
|
|
<el-option label="全部" value="" />
|
|||
|
|
<el-option label="正常" value="0" />
|
|||
|
|
<el-option label="停用" value="1" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
|
|||
|
|
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮行 -->
|
|||
|
|
<el-row :gutter="10" class="mb-8">
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 6. 分页规范
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 分页组件，右对齐 -->
|
|||
|
|
<div style="display: flex; justify-content: flex-end; margin-top: 16px;">
|
|||
|
|
<el-pagination
|
|||
|
|
v-model:current-page="queryParams.pageNum"
|
|||
|
|
v-model:page-size="queryParams.pageSize"
|
|||
|
|
:page-sizes="[10, 20, 50, 100]"
|
|||
|
|
:total="total"
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|||
|
|
@size-change="handleQuery"
|
|||
|
|
@current-change="handleQuery"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 7. 弹窗规范
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="dialogVisible"
|
|||
|
|
:title="dialogTitle"
|
|||
|
|
width="600px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
destroy-on-close
|
|||
|
|
>
|
|||
|
|
<el-form
|
|||
|
|
ref="formRef"
|
|||
|
|
:model="form"
|
|||
|
|
:rules="rules"
|
|||
|
|
label-width="100px"
|
|||
|
|
>
|
|||
|
|
<!-- 表单项 -->
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 8. 状态Tag颜色规范
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 状态：正常-success，停用-danger -->
|
|||
|
|
<el-tag :type="row.status === '0' ? 'success' : 'danger'">
|
|||
|
|
{{ row.status === '0' ? '正常' : '停用' }}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<!-- 身份类型：家长-primary，教师-success -->
|
|||
|
|
<el-tag :type="row.identityType === '1' ? '' : 'success'">
|
|||
|
|
{{ row.identityType === '1' ? '家长' : '教师' }}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<!-- 性别：男-primary，女-danger，未知-info -->
|
|||
|
|
<el-tag :type="row.gender === '1' ? '' : row.gender === '2' ? 'danger' : 'info'">
|
|||
|
|
{{ { '0': '未知', '1': '男', '2': '女' }[row.gender] }}
|
|||
|
|
</el-tag>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 9. 空数据处理
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 表格空数据提示 -->
|
|||
|
|
<el-table :data="tableData">
|
|||
|
|
<template #empty>
|
|||
|
|
<el-empty description="暂无数据" />
|
|||
|
|
</template>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<!-- 字段空值显示 -->
|
|||
|
|
<el-table-column prop="remark" label="备注">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
{{ row.remark || '-' }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 10. 删除确认规范
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 使用 ElMessageBox 确认删除
|
|||
|
|
const handleDelete = (row) => {
|
|||
|
|
ElMessageBox.confirm(`确定要删除"${row.name}"吗？`, '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
// 调用删除API
|
|||
|
|
deleteApi(row.id).then(() => {
|
|||
|
|
ElMessage.success('删除成功')
|
|||
|
|
handleQuery()
|
|||
|
|
})
|
|||
|
|
}).catch(() => {})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 11. 页面布局规范
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 标准页面结构 -->
|
|||
|
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<!-- 搜索区域 -->
|
|||
|
|
<el-card shadow="never" class="search-wrapper">
|
|||
|
|
<el-form>...</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 表格区域 -->
|
|||
|
|
<el-card shadow="never" style="margin-top: 12px;">
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<el-row :gutter="10" style="margin-bottom: 12px;">
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button type="primary" :icon="Plus">新增</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<!-- 表格 -->
|
|||
|
|
<el-table>...</el-table>
|
|||
|
|
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<el-pagination />
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 弹窗 -->
|
|||
|
|
<el-dialog>...</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.app-container {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
.search-wrapper {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 共享约定
|
|||
|
|
|
|||
|
|
### 1. 目录结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── api/ # API接口定义
|
|||
|
|
├── assets/styles/ # 全局样式
|
|||
|
|
├── components/ # 公共组件
|
|||
|
|
├── layout/ # 布局组件
|
|||
|
|
├── mock/ # Mock数据
|
|||
|
|
│ ├── index.js # Mock入口（汇总所有mock）
|
|||
|
|
│ ├── user.js
|
|||
|
|
│ ├── school.js
|
|||
|
|
│ └── ...
|
|||
|
|
├── router/ # 路由配置
|
|||
|
|
├── store/ # Pinia Store
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
└── views/ # 页面视图
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. API响应格式
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 成功响应
|
|||
|
|
{ code: 200, msg: '操作成功', data: { ... } }
|
|||
|
|
|
|||
|
|
// 分页响应
|
|||
|
|
{ code: 200, msg: '查询成功', total: 100, rows: [ ... ] }
|
|||
|
|
|
|||
|
|
// 错误响应
|
|||
|
|
{ code: 500, msg: '操作失败' }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. Mock数据规范
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// mock/xxx.js 格式
|
|||
|
|
import Mock from 'mockjs'
|
|||
|
|
|
|||
|
|
// GET请求用RegExp匹配URL
|
|||
|
|
Mock.mock(/\/api\/xxx\/list/, 'get', (options) => {
|
|||
|
|
return { code: 200, total: 100, rows: [...] }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// POST/PUT/DELETE用字符串匹配
|
|||
|
|
Mock.mock('/api/xxx', 'post', { code: 200, msg: '新增成功' })
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-1：核心基础设施
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建核心基础设施。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Vite + Element Plus + Pinia + Vue Router + MockJS
|
|||
|
|
- 作者：pangu
|
|||
|
|
|
|||
|
|
## 重要：你是唯一需要启动dev server的Agent
|
|||
|
|
完成开发后，执行 npm run dev 启动服务器（端口3000），并保持运行。
|
|||
|
|
其他Agent会在你之后并行开发，共享同一个项目。
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范。
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
### 1. 创建布局组件 src/layout/index.vue
|
|||
|
|
- 左侧边栏（可折叠，展开200px，折叠64px）
|
|||
|
|
- 顶部导航栏（显示用户信息、退出按钮）
|
|||
|
|
- 右侧主内容区（<router-view>）
|
|||
|
|
|
|||
|
|
### 2. 创建 src/layout/components/Sidebar.vue
|
|||
|
|
菜单项：
|
|||
|
|
- 首页 (icon: HomeFilled)
|
|||
|
|
- 学校管理 (icon: School)
|
|||
|
|
- 会员管理 (icon: User)
|
|||
|
|
- 学生管理 (icon: UserFilled)
|
|||
|
|
- 应用管理 (icon: Grid)
|
|||
|
|
- 基础数据 (icon: Setting, 有子菜单)
|
|||
|
|
- 年级管理
|
|||
|
|
- 班级管理
|
|||
|
|
- 学科管理
|
|||
|
|
- 区域管理
|
|||
|
|
|
|||
|
|
### 3. 创建 src/layout/components/Navbar.vue
|
|||
|
|
- 折叠按钮
|
|||
|
|
- 面包屑导航
|
|||
|
|
- 右侧：用户头像、昵称、下拉菜单（退出登录）
|
|||
|
|
|
|||
|
|
### 4. 创建Mock入口 src/mock/index.js
|
|||
|
|
```javascript
|
|||
|
|
import './user'
|
|||
|
|
// 其他Agent会在此添加import
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. 创建用户Mock src/mock/user.js
|
|||
|
|
- POST /api/login - 登录（返回token）
|
|||
|
|
- GET /api/getInfo - 获取用户信息（返回用户名、头像、权限）
|
|||
|
|
- POST /api/logout - 退出
|
|||
|
|
|
|||
|
|
### 6. 创建工具函数 src/utils/request.js
|
|||
|
|
- 基于axios封装
|
|||
|
|
- 请求拦截器：添加Authorization头
|
|||
|
|
- 响应拦截器：处理code!=200的情况，弹出错误提示
|
|||
|
|
|
|||
|
|
### 7. 创建首页 src/views/dashboard/index.vue
|
|||
|
|
- 欢迎信息卡片
|
|||
|
|
- 统计卡片（学校数、会员数、学生数、应用数）使用Mock数据
|
|||
|
|
|
|||
|
|
### 8. 确保 src/main.js 正确引入所有依赖
|
|||
|
|
|
|||
|
|
### 9. 确保 src/router/index.js 路由配置正确
|
|||
|
|
|
|||
|
|
## 设计参考
|
|||
|
|
- 主题色：#409EFF
|
|||
|
|
- 侧边栏背景：#304156
|
|||
|
|
- 布局参考RuoYi-Vue
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
1. 运行 npm run dev 启动开发服务器
|
|||
|
|
2. 确认 http://localhost:3000 可以正常访问
|
|||
|
|
3. 保持服务器运行，其他Agent会继续开发
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-2：登录页面
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建登录页面。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Element Plus
|
|||
|
|
- 作者：pangu
|
|||
|
|
|
|||
|
|
## ⚠️ 重要：不要启动dev server
|
|||
|
|
Agent-1已经启动了开发服务器（端口3000），你只需创建文件。
|
|||
|
|
完成后刷新浏览器即可看到效果（Vite热更新）。
|
|||
|
|
|
|||
|
|
## 你只能操作这些文件
|
|||
|
|
- src/views/login/index.vue（新建）
|
|||
|
|
- src/views/login/其他组件（如需要）
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范。
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
### 1. 创建登录页面 src/views/login/index.vue
|
|||
|
|
|
|||
|
|
页面设计：
|
|||
|
|
- 居中登录卡片（宽度400px，圆角8px，阴影）
|
|||
|
|
- 背景：渐变色 linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|
|||
|
|
- 标题：盘古用户平台
|
|||
|
|
- 副标题：统一用户管理系统
|
|||
|
|
|
|||
|
|
表单字段：
|
|||
|
|
- 用户名（el-input，前缀图标User，placeholder="请输入用户名"）
|
|||
|
|
- 密码（el-input type="password"，前缀图标Lock，show-password）
|
|||
|
|
- 验证码（el-input + 右侧验证码图片，点击刷新）
|
|||
|
|
- 记住密码（el-checkbox）
|
|||
|
|
- 登录按钮（el-button type="primary" 全宽，高度40px）
|
|||
|
|
|
|||
|
|
功能：
|
|||
|
|
- 表单验证（用户名、密码、验证码必填）
|
|||
|
|
- 点击验证码图片刷新
|
|||
|
|
- 登录成功存储token，跳转首页
|
|||
|
|
- 登录失败显示错误提示
|
|||
|
|
|
|||
|
|
### 2. 验证码Mock（在 src/mock/user.js 中添加）
|
|||
|
|
- GET /api/captchaImage - 返回 { code: 200, img: 'base64图片', uuid: 'xxx' }
|
|||
|
|
- 可以用Mock生成简单的文字验证码
|
|||
|
|
|
|||
|
|
### 3. 样式要求
|
|||
|
|
- 登录卡片居中显示
|
|||
|
|
- 响应式适配移动端
|
|||
|
|
|
|||
|
|
## Mock数据说明
|
|||
|
|
调用接口：
|
|||
|
|
- GET /api/captchaImage
|
|||
|
|
- POST /api/login { username, password, code, uuid }
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
确保登录页面可以正常显示，输入admin/admin123可以登录成功
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-3：学校管理
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建学校管理模块。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Element Plus
|
|||
|
|
- 作者：pangu
|
|||
|
|
- 原型参考：https://modao.cc/proto/atlwMul8t9pi6yxQ42W7up/sharing
|
|||
|
|
|
|||
|
|
## ⚠️ 重要：不要启动dev server
|
|||
|
|
Agent-1已经启动了开发服务器（端口3000），你只需创建文件。
|
|||
|
|
完成后刷新浏览器即可看到效果（Vite热更新）。
|
|||
|
|
|
|||
|
|
## 你只能操作这些文件
|
|||
|
|
- src/views/school/*（新建）
|
|||
|
|
- src/api/school.js（新建）
|
|||
|
|
- src/mock/school.js（新建）
|
|||
|
|
- src/mock/index.js（追加import './school'）
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范，特别是：
|
|||
|
|
- 表格列必须指定宽度，避免右侧空白
|
|||
|
|
- 使用min-width让名称列自适应
|
|||
|
|
- 操作列fixed="right"
|
|||
|
|
- 长文本使用show-overflow-tooltip
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
### 1. 创建页面 src/views/school/index.vue
|
|||
|
|
|
|||
|
|
布局（左右分栏，使用el-row el-col）：
|
|||
|
|
- 左侧（span=6，约250px）：区域树
|
|||
|
|
- 右侧（span=18）：学校列表
|
|||
|
|
|
|||
|
|
左侧区域树：
|
|||
|
|
- 使用 el-tree，带搜索过滤
|
|||
|
|
- 数据：湖北省 > 武汉市 > 武昌区/汉口区/汉阳区...
|
|||
|
|
- 点击节点筛选右侧表格
|
|||
|
|
|
|||
|
|
右侧列表：
|
|||
|
|
- 搜索条件：学校名称(input)、状态(select)
|
|||
|
|
- 表格字段（指定列宽）：
|
|||
|
|
- 名称 min-width="150" show-overflow-tooltip
|
|||
|
|
- 类型 width="100"
|
|||
|
|
- 所属区域 min-width="180" show-overflow-tooltip
|
|||
|
|
- 状态 width="80" align="center"
|
|||
|
|
- 创建时间 width="160"
|
|||
|
|
- 创建人 width="100"
|
|||
|
|
- 操作 width="200" fixed="right"
|
|||
|
|
- 操作按钮：编辑、删除、新增年级、新增班级
|
|||
|
|
- 分页
|
|||
|
|
|
|||
|
|
### 2. 创建弹窗 src/views/school/components/SchoolDialog.vue
|
|||
|
|
- 新增/编辑学校
|
|||
|
|
- 字段：学校名称(必填)、学校类型(下拉)、所属区域(级联)、状态(开关)
|
|||
|
|
|
|||
|
|
### 3. 创建弹窗 src/views/school/components/GradeDialog.vue
|
|||
|
|
- 为学校新增年级
|
|||
|
|
- 字段：年级选择（多选checkbox）
|
|||
|
|
|
|||
|
|
### 4. 创建弹窗 src/views/school/components/ClassDialog.vue
|
|||
|
|
- 为年级新增班级
|
|||
|
|
- 字段：班级选择（多选checkbox）
|
|||
|
|
|
|||
|
|
### 5. 创建API src/api/school.js
|
|||
|
|
|
|||
|
|
### 6. 创建Mock src/mock/school.js
|
|||
|
|
区域树Mock数据：
|
|||
|
|
```javascript
|
|||
|
|
const regionTree = [
|
|||
|
|
{
|
|||
|
|
regionId: 1, regionName: '湖北', children: [
|
|||
|
|
{ regionId: 11, regionName: '武汉', children: [
|
|||
|
|
{ regionId: 111, regionName: '武昌区' },
|
|||
|
|
{ regionId: 112, regionName: '汉口区' },
|
|||
|
|
{ regionId: 113, regionName: '汉阳区' },
|
|||
|
|
{ regionId: 114, regionName: '江夏区' }
|
|||
|
|
]},
|
|||
|
|
{ regionId: 12, regionName: '黄冈', children: [
|
|||
|
|
{ regionId: 121, regionName: '黄州区' },
|
|||
|
|
{ regionId: 122, regionName: '红安县' }
|
|||
|
|
]}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 7. 在 src/mock/index.js 中添加 import './school'
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
确保页面可以正常展示，左侧树点击可筛选，CRUD功能正常
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-4：会员管理
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建会员管理模块。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Element Plus
|
|||
|
|
- 作者：pangu
|
|||
|
|
|
|||
|
|
## ⚠️ 重要：不要启动dev server
|
|||
|
|
Agent-1已经启动了开发服务器（端口3000），你只需创建文件。
|
|||
|
|
完成后刷新浏览器即可看到效果（Vite热更新）。
|
|||
|
|
|
|||
|
|
## 你只能操作这些文件
|
|||
|
|
- src/views/member/*（新建）
|
|||
|
|
- src/api/member.js（新建）
|
|||
|
|
- src/mock/member.js（新建）
|
|||
|
|
- src/mock/index.js（追加import './member'）
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范，特别是：
|
|||
|
|
- 表格列必须指定宽度
|
|||
|
|
- 手机号脱敏显示 138****5678
|
|||
|
|
- 状态使用Tag组件
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
### 1. 创建页面 src/views/member/index.vue
|
|||
|
|
|
|||
|
|
搜索条件：
|
|||
|
|
- 手机号(input, width=150px)
|
|||
|
|
- 昵称(input, width=150px)
|
|||
|
|
- 身份类型(select: 全部/家长/教师, width=120px)
|
|||
|
|
- 状态(select: 全部/正常/停用, width=100px)
|
|||
|
|
- 注册时间(date-picker范围, width=240px)
|
|||
|
|
|
|||
|
|
表格字段（列宽）：
|
|||
|
|
- 会员编号 width="140"
|
|||
|
|
- 手机号 width="120" （脱敏显示）
|
|||
|
|
- 昵称 min-width="100"
|
|||
|
|
- 性别 width="60" align="center"
|
|||
|
|
- 出生日期 width="100"
|
|||
|
|
- 身份类型 width="80" align="center" （Tag）
|
|||
|
|
- 注册时间 width="160"
|
|||
|
|
- 注册来源 width="80"
|
|||
|
|
- 状态 width="70" align="center" （Tag）
|
|||
|
|
- 操作 width="180" fixed="right"
|
|||
|
|
|
|||
|
|
操作按钮：编辑、重置密码、删除
|
|||
|
|
|
|||
|
|
### 2. 创建弹窗 src/views/member/components/MemberDialog.vue
|
|||
|
|
字段：
|
|||
|
|
- 手机号（必填）
|
|||
|
|
- 昵称
|
|||
|
|
- 性别（radio：男/女/未知）
|
|||
|
|
- 出生日期（date-picker）
|
|||
|
|
- 身份类型（radio：家长/教师）
|
|||
|
|
- 当身份=教师时显示：区域、学校、年级、班级（级联）
|
|||
|
|
- 状态（switch）
|
|||
|
|
|
|||
|
|
学生绑定区域（表格）：
|
|||
|
|
- 显示已绑定学生
|
|||
|
|
- 添加/移除按钮
|
|||
|
|
|
|||
|
|
### 3. 创建弹窗 src/views/member/components/ResetPwdDialog.vue
|
|||
|
|
- 显示新密码
|
|||
|
|
- 复制按钮
|
|||
|
|
|
|||
|
|
### 4. 创建API src/api/member.js
|
|||
|
|
|
|||
|
|
### 5. 创建Mock src/mock/member.js
|
|||
|
|
|
|||
|
|
### 6. 在 src/mock/index.js 中添加 import './member'
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
确保页面可以正常展示和交互
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-5：学生管理
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建学生管理模块。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Element Plus
|
|||
|
|
- 作者：pangu
|
|||
|
|
|
|||
|
|
## ⚠️ 重要：不要启动dev server
|
|||
|
|
Agent-1已经启动了开发服务器（端口3000），你只需创建文件。
|
|||
|
|
完成后刷新浏览器即可看到效果（Vite热更新）。
|
|||
|
|
|
|||
|
|
## 你只能操作这些文件
|
|||
|
|
- src/views/student/*（新建）
|
|||
|
|
- src/api/student.js（新建）
|
|||
|
|
- src/mock/student.js（新建）
|
|||
|
|
- src/mock/index.js（追加import './student'）
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范。
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
### 1. 创建页面 src/views/student/index.vue
|
|||
|
|
|
|||
|
|
布局（左右分栏）：
|
|||
|
|
- 左侧（span=6）：学校树（学校>年级>班级，使用el-tree）
|
|||
|
|
- 右侧（span=18）：学生列表
|
|||
|
|
|
|||
|
|
搜索条件：姓名、学号、性别、用户手机号、学科
|
|||
|
|
|
|||
|
|
表格字段（列宽）：
|
|||
|
|
- 姓名 min-width="80"
|
|||
|
|
- 学号 width="100"
|
|||
|
|
- 性别 width="60" align="center"
|
|||
|
|
- 出生年月 width="100"
|
|||
|
|
- 地区 min-width="150" show-overflow-tooltip
|
|||
|
|
- 学校 min-width="140" show-overflow-tooltip
|
|||
|
|
- 年级 width="80"
|
|||
|
|
- 班级 width="60"
|
|||
|
|
- 学科 width="60"
|
|||
|
|
- 用户昵称 width="100"
|
|||
|
|
- 用户手机号 width="120"（脱敏）
|
|||
|
|
- 操作 width="120" fixed="right"
|
|||
|
|
|
|||
|
|
功能按钮：新增学生、批量导入
|
|||
|
|
|
|||
|
|
### 2. 创建弹窗 src/views/student/components/StudentDialog.vue
|
|||
|
|
字段：姓名(必填)、学号、性别、出生日期、学校信息(级联,必填)、学科、归属用户
|
|||
|
|
|
|||
|
|
### 3. 创建弹窗 src/views/student/components/ImportDialog.vue
|
|||
|
|
- 下载模板按钮
|
|||
|
|
- 上传Excel（el-upload）
|
|||
|
|
- 导入结果展示
|
|||
|
|
|
|||
|
|
### 4. 创建API src/api/student.js
|
|||
|
|
|
|||
|
|
### 5. 创建Mock src/mock/student.js
|
|||
|
|
|
|||
|
|
### 6. 在 src/mock/index.js 中添加 import './student'
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
确保页面可以正常展示和交互
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-6：应用管理
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建应用管理模块。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Element Plus
|
|||
|
|
- 作者：pangu
|
|||
|
|
|
|||
|
|
## ⚠️ 重要：不要启动dev server
|
|||
|
|
Agent-1已经启动了开发服务器（端口3000），你只需创建文件。
|
|||
|
|
完成后刷新浏览器即可看到效果（Vite热更新）。
|
|||
|
|
|
|||
|
|
## 你只能操作这些文件
|
|||
|
|
- src/views/application/*（新建）
|
|||
|
|
- src/api/application.js（新建）
|
|||
|
|
- src/mock/application.js（新建）
|
|||
|
|
- src/mock/index.js（追加import './application'）
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范。
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
### 1. 创建页面 src/views/application/index.vue
|
|||
|
|
|
|||
|
|
搜索条件：应用名称、应用编码、状态
|
|||
|
|
|
|||
|
|
表格字段（列宽）：
|
|||
|
|
- 应用名称 min-width="150"
|
|||
|
|
- 应用编码 width="120"
|
|||
|
|
- 授权接口 min-width="250"（多个用Tag展示，show-overflow-tooltip）
|
|||
|
|
- 状态 width="80" align="center"
|
|||
|
|
- 创建时间 width="160"
|
|||
|
|
- 创建人 width="100"
|
|||
|
|
- 操作 width="180" fixed="right"
|
|||
|
|
|
|||
|
|
操作按钮：编辑、重置密钥、删除
|
|||
|
|
|
|||
|
|
### 2. 创建弹窗 src/views/application/components/AppDialog.vue
|
|||
|
|
字段：
|
|||
|
|
- 应用名称（必填）
|
|||
|
|
- 应用编码（自动生成，disabled）
|
|||
|
|
- 应用描述
|
|||
|
|
- 联系人、联系电话
|
|||
|
|
- 状态
|
|||
|
|
- 接口授权（checkbox-group）：
|
|||
|
|
- 查询学生信息
|
|||
|
|
- 查询学校信息
|
|||
|
|
- 查询年级信息
|
|||
|
|
- 查询班级信息
|
|||
|
|
- 查询会员信息
|
|||
|
|
- 查询区域树
|
|||
|
|
|
|||
|
|
### 3. 创建弹窗 src/views/application/components/SecretDialog.vue
|
|||
|
|
- 显示密钥（只读input）
|
|||
|
|
- 复制按钮
|
|||
|
|
|
|||
|
|
### 4. 创建API src/api/application.js
|
|||
|
|
|
|||
|
|
### 5. 创建Mock src/mock/application.js
|
|||
|
|
|
|||
|
|
### 6. 在 src/mock/index.js 中添加 import './application'
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
确保页面可以正常展示和交互
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Agent-7：基础数据
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
你是一个Vue 3前端开发专家。请为"盘古用户平台"创建基础数据管理模块（年级/班级/学科/区域）。
|
|||
|
|
|
|||
|
|
## 项目信息
|
|||
|
|
- 项目路径：/Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui
|
|||
|
|
- 技术栈：Vue 3 + Element Plus
|
|||
|
|
- 作者：pangu
|
|||
|
|
|
|||
|
|
## ⚠️ 重要：不要启动dev server
|
|||
|
|
Agent-1已经启动了开发服务器（端口3000），你只需创建文件。
|
|||
|
|
完成后刷新浏览器即可看到效果（Vite热更新）。
|
|||
|
|
|
|||
|
|
## 你只能操作这些文件
|
|||
|
|
- src/views/base/*（新建）
|
|||
|
|
- src/api/grade.js, class.js, subject.js, region.js（新建）
|
|||
|
|
- src/mock/grade.js, class.js, subject.js, region.js（新建）
|
|||
|
|
- src/mock/index.js（追加import）
|
|||
|
|
|
|||
|
|
## 编码规范
|
|||
|
|
请严格遵守本文档"前端编码规范"章节的所有规范。
|
|||
|
|
|
|||
|
|
## 你的任务
|
|||
|
|
|
|||
|
|
这4个页面结构相似，可以复用代码模式。
|
|||
|
|
|
|||
|
|
### 1. 年级管理 src/views/base/grade/index.vue
|
|||
|
|
搜索：年级名称、状态
|
|||
|
|
表格字段（列宽）：
|
|||
|
|
- 年级名称 min-width="150"
|
|||
|
|
- 年级编码 width="120"
|
|||
|
|
- 排序 width="80" align="center"
|
|||
|
|
- 状态 width="80" align="center"
|
|||
|
|
- 创建时间 width="160"
|
|||
|
|
- 操作 width="150" fixed="right"
|
|||
|
|
|
|||
|
|
弹窗字段：年级名称(必填)、年级编码(自动生成)、排序、状态
|
|||
|
|
|
|||
|
|
### 2. 班级管理 src/views/base/class/index.vue
|
|||
|
|
（结构同年级管理）
|
|||
|
|
|
|||
|
|
### 3. 学科管理 src/views/base/subject/index.vue
|
|||
|
|
（结构同年级管理）
|
|||
|
|
|
|||
|
|
### 4. 区域管理 src/views/base/region/index.vue
|
|||
|
|
特殊布局：
|
|||
|
|
- 使用树形表格（el-table + row-key + tree-props）
|
|||
|
|
- 展示省-市-区结构
|
|||
|
|
- 操作：新增子区域、编辑、删除
|
|||
|
|
|
|||
|
|
### 5. 创建API
|
|||
|
|
- src/api/grade.js
|
|||
|
|
- src/api/class.js
|
|||
|
|
- src/api/subject.js
|
|||
|
|
- src/api/region.js
|
|||
|
|
|
|||
|
|
### 6. 创建Mock（预置数据）
|
|||
|
|
- src/mock/grade.js：一年级~六年级、七年级~九年级、高一~高三
|
|||
|
|
- src/mock/class.js：1班~10班
|
|||
|
|
- src/mock/subject.js：语文、数学、英语、物理、化学、生物、历史、地理、政治
|
|||
|
|
- src/mock/region.js：复用school.js的区域数据
|
|||
|
|
|
|||
|
|
### 7. 在 src/mock/index.js 中添加所有import
|
|||
|
|
|
|||
|
|
## 完成后
|
|||
|
|
确保4个页面都可以正常展示和交互
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 执行指南
|
|||
|
|
|
|||
|
|
### 第一步：启动Agent-1（必须先完成）
|
|||
|
|
|
|||
|
|
1. 开启新会话，复制本文档
|
|||
|
|
2. 告诉Cursor：`请完成Agent-1的任务`
|
|||
|
|
3. Agent-1会创建文件并启动 `npm run dev`（端口3000）
|
|||
|
|
4. **保持这个会话和服务器运行**
|
|||
|
|
|
|||
|
|
### 第二步：并行启动Agent-2~7
|
|||
|
|
|
|||
|
|
1. 开启6个新会话
|
|||
|
|
2. 每个会话复制本文档
|
|||
|
|
3. 分别告诉Cursor：
|
|||
|
|
- `请完成Agent-2的任务`
|
|||
|
|
- `请完成Agent-3的任务`
|
|||
|
|
- ... 以此类推
|
|||
|
|
|
|||
|
|
### 关键规则
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
✅ Agent-1：创建文件 + 启动dev server + 保持运行
|
|||
|
|
✅ Agent-2~7：只创建文件，不启动server
|
|||
|
|
✅ 验证方式：刷新浏览器（Vite自动热更新）
|
|||
|
|
❌ 错误：每个Agent都启动npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 完成后检查
|
|||
|
|
|
|||
|
|
1. 访问 http://localhost:3000 验证所有页面
|
|||
|
|
2. 检查 `src/mock/index.js` 是否引入了所有mock文件：
|
|||
|
|
```javascript
|
|||
|
|
import './user'
|
|||
|
|
import './school'
|
|||
|
|
import './member'
|
|||
|
|
import './student'
|
|||
|
|
import './application'
|
|||
|
|
import './grade'
|
|||
|
|
import './class'
|
|||
|
|
import './subject'
|
|||
|
|
import './region'
|
|||
|
|
```
|
|||
|
|
3. 检查各页面表格是否无右侧空白
|
|||
|
|
4. 测试CRUD功能是否正常
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
*文档作者：pangu*
|
|||
|
|
*创建时间：2026-01-31*
|