27 KiB

Raw Blame History

盘古用户平台 - 多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

// 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等

执行顺序：

先完成 Agent-1（启动dev server，保持运行）
Agent-2~7 并行开发（只创建文件，不启动server）
每个Agent完成后刷新浏览器验证

前端编码规范（所有Agent必须遵守）

1. 表格规范

<!-- ✅ 正确：表格必须设置这些属性 -->
<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. 长文本处理

<!-- 使用 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. 表格响应式

<!-- 使用 el-scrollbar 包裹，确保水平滚动 -->
<el-scrollbar>
  <el-table :data="tableData" style="width: 100%; min-width: 800px;">
    <!-- 列定义 -->
  </el-table>
</el-scrollbar>

5. 搜索表单规范

<!-- ✅ 正确：使用 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. 分页规范

<!-- 分页组件，右对齐 -->
<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. 弹窗规范

<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颜色规范

<!-- 状态：正常-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. 空数据处理

<!-- 表格空数据提示 -->
<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. 删除确认规范

// 使用 ElMessageBox 确认删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 调用删除API
    deleteApi(row.id).then(() => {
      ElMessage.success('删除成功')
      handleQuery()
    })
  }).catch(() => {})
}

11. 页面布局规范

<!-- 标准页面结构 -->
<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响应格式

// 成功响应
{ code: 200, msg: '操作成功', data: { ... } }

// 分页响应
{ code: 200, msg: '查询成功', total: 100, rows: [ ... ] }

// 错误响应
{ code: 500, msg: '操作失败' }

3. Mock数据规范

// 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

完成后

运行 npm run dev 启动开发服务器
确认 http://localhost:3000 可以正常访问
保持服务器运行，其他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数据：

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'

检查各页面表格是否无右侧空白
测试CRUD功能是否正常

文档作者：pangu 创建时间：2026-01-31

27 KiB Raw Blame History Unescape Escape

盘古用户平台 - 多Agent协同开发指南

重要：协同开发规则

1. 开发服务器管理

2. 文件边界划分

3. 共享文件更新规则

4. 验证方式

项目概述

Agent分工

前端编码规范（所有Agent必须遵守）

1. 表格规范

2. 列宽分配原则

3. 长文本处理

4. 表格响应式

5. 搜索表单规范

6. 分页规范

7. 弹窗规范

8. 状态Tag颜色规范

9. 空数据处理

10. 删除确认规范

11. 页面布局规范

共享约定

1. 目录结构

2. API响应格式

3. Mock数据规范

Agent-1：核心基础设施

5. 创建用户Mock src/mock/user.js

6. 创建工具函数 src/utils/request.js

7. 创建首页 src/views/dashboard/index.vue

8. 确保 src/main.js 正确引入所有依赖

9. 确保 src/router/index.js 路由配置正确

设计参考

完成后

项目信息

⚠️ 重要：不要启动dev server

你只能操作这些文件

编码规范

你的任务

1. 创建登录页面 src/views/login/index.vue

2. 验证码Mock（在 src/mock/user.js 中添加）

3. 样式要求

Mock数据说明

完成后

项目信息

⚠️ 重要：不要启动dev server

你只能操作这些文件

编码规范

你的任务

1. 创建页面 src/views/school/index.vue

2. 创建弹窗 src/views/school/components/SchoolDialog.vue

3. 创建弹窗 src/views/school/components/GradeDialog.vue

4. 创建弹窗 src/views/school/components/ClassDialog.vue

5. 创建API src/api/school.js

6. 创建Mock src/mock/school.js

7. 在 src/mock/index.js 中添加 import './school'

完成后

项目信息

⚠️ 重要：不要启动dev server

你只能操作这些文件

编码规范

你的任务

1. 创建页面 src/views/member/index.vue

2. 创建弹窗 src/views/member/components/MemberDialog.vue

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'

完成后

项目信息

⚠️ 重要：不要启动dev server

你只能操作这些文件

编码规范

你的任务

1. 创建页面 src/views/student/index.vue

2. 创建弹窗 src/views/student/components/StudentDialog.vue

3. 创建弹窗 src/views/student/components/ImportDialog.vue

4. 创建API src/api/student.js

5. 创建Mock src/mock/student.js

6. 在 src/mock/index.js 中添加 import './student'

完成后

27 KiB

Raw Blame History