pangu-user-platform/docs/多Agent协同开发指南.md

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