pangu-user-platform/docs/05-前端UI规范/页面问题修复清单.md

# 盘古用户平台 - 页面问题修复清单

> 基于 2026-01-31 浏览器实际检查结果
> 作者：pangu

---

## 概述

本文档记录了通过浏览器检查发现的所有页面问题，按模块分类，标注优先级和修复方案。

---

## 一、登录页面 `/login`

| 状态 | 问题 |
|:----:|------|
| ✅ | 无明显问题，样式正常 |

**页面截图确认：**
- 渐变背景色正常
- 登录卡片居中显示
- 表单字段完整
- 验证码正常显示

---

## 二、首页 `/dashboard`

| 状态 | 问题 |
|:----:|------|
| ✅ | 无明显问题，样式正常 |

**页面截图确认：**
- 欢迎卡片显示正常
- 统计卡片（学校数、会员数、学生数、应用数）正常显示
- 数据展示：128、5680、23456、12

---

## 三、学校管理 `/school`

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P2 | 操作列按钮换行显示，较拥挤 | ⬜ |
| 2 | P3 | 创建时间列在窄屏下可能被截断 | ⬜ |

### 修复方案

**问题1：操作列过窄**

```vue
<!-- 修改 src/views/school/index.vue -->
<!-- 将操作列宽度从 200 改为 240 -->
<el-table-column label="操作" width="240" fixed="right" align="center">
```

或者精简按钮文字：

```vue
<el-button link type="primary" @click="handleAddGrade(row)">加年级</el-button>
<el-button link type="primary" @click="handleAddClass(row)">加班级</el-button>
```

---

## 四、会员管理 `/member`

| 状态 | 问题 |
|:----:|------|
| ✅ | 无明显问题，样式正常 |

**页面截图确认：**
- 搜索表单完整（手机号、昵称、身份类型、状态、注册时间）
- 表格数据正常显示
- 手机号脱敏显示正常（如 165****2844）
- 身份类型、状态Tag颜色正确
- 分页正常

---

## 五、学生管理 `/student`

| 状态 | 问题 |
|:----:|------|
| ✅ | 无明显问题，样式正常 |

**页面截图确认：**
- 左侧学校树正常显示
- 右侧搜索表单完整
- 表格数据正常显示
- 新增、导入按钮正常

---

## 六、应用管理 `/application`

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P1 | 授权接口列为空，数据不显示 | ⬜ |

### 根因分析

视图文件使用 `row.apis`，但Mock数据返回的是 `row.apiAuth`。

**视图代码（第36-42行）：**
```vue
<el-table-column prop="apis" label="授权接口" min-width="250">
  <template #default="{ row }">
    <el-tag v-for="api in (row.apis || []).slice(0, 3)" :key="api" ...>
```

**Mock数据（第32行）：**
```javascript
apiAuth: randomApis,  // 字段名是 apiAuth，不是 apis
```

### 修复方案

**方案A：修改视图（推荐）**

```diff
# 文件：src/views/application/index.vue

- <el-table-column prop="apis" label="授权接口" min-width="250">
+ <el-table-column prop="apiAuth" label="授权接口" min-width="250">
    <template #default="{ row }">
-     <el-tag v-for="api in (row.apis || []).slice(0, 3)" :key="api" size="small" style="margin-right: 4px; margin-bottom: 2px">
+     <el-tag v-for="api in (row.apiAuth || []).slice(0, 3)" :key="api" size="small" style="margin-right: 4px; margin-bottom: 2px">
        {{ api }}
      </el-tag>
-     <el-tag v-if="(row.apis || []).length > 3" size="small" type="info">+{{ row.apis.length - 3 }}</el-tag>
+     <el-tag v-if="(row.apiAuth || []).length > 3" size="small" type="info">+{{ row.apiAuth.length - 3 }}</el-tag>
    </template>
```

**方案B：修改Mock**

```diff
# 文件：src/mock/application.js

- apiAuth: randomApis,
+ apis: randomApis,
```

---

## 七、基础数据 - 年级管理 `/base/grade`

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P0 | 表格显示"No Data"，数据不显示 | ⬜ |

### 根因分析

**与区域管理相同的问题：字段名不匹配！**

视图使用 `prop="gradeName"` 和 `prop="gradeCode"`，但Mock返回 `name` 和 `code`。

**视图代码（第31-32行）：**
```vue
<el-table-column prop="gradeName" label="年级名称" min-width="150" />
<el-table-column prop="gradeCode" label="年级编码" width="120" />
```

**Mock数据（grade.js 第9行）：**
```javascript
{ id: 1, name: '一年级', code: 'G01', ... }
// 字段是 name/code，不是 gradeName/gradeCode
```

### 修复方案

**方案A：修改Mock数据（推荐）**

```diff
# 文件：src/mock/grade.js

const gradeData = [
- { id: 1, name: '一年级', code: 'G01', sort: 1, status: '0', createTime: '2026-01-01 10:00:00' },
+ { id: 1, gradeName: '一年级', gradeCode: 'G01', sort: 1, status: '0', createTime: '2026-01-01 10:00:00' },
  // ... 其他数据同理
]
```

**方案B：修改视图**

```diff
# 文件：src/views/base/grade/index.vue

- <el-table-column prop="gradeName" label="年级名称" min-width="150" />
- <el-table-column prop="gradeCode" label="年级编码" width="120" />
+ <el-table-column prop="name" label="年级名称" min-width="150" />
+ <el-table-column prop="code" label="年级编码" width="120" />
```

同时修改搜索参数和表单字段。

---

## 八、基础数据 - 班级管理 `/base/class`

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P0 | 表格数据不显示（同年级管理问题） | ⬜ |

### 根因分析

Mock数据使用 `name` 和 `code`，视图可能使用 `className` 和 `classCode`。

**Mock数据（class.js 第9行）：**
```javascript
{ id: 1, name: '1班', code: 'C01', ... }
```

### 修复方案

参照年级管理修复方案。

---

## 九、基础数据 - 学科管理 `/base/subject`

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P0 | 表格数据不显示（同年级管理问题） | ⬜ |

### 根因分析

Mock数据使用 `name` 和 `code`，视图可能使用 `subjectName` 和 `subjectCode`。

**Mock数据（subject.js 第9行）：**
```javascript
{ id: 1, name: '语文', code: 'S01', ... }
```

### 修复方案

参照年级管理修复方案。

---

## 十、基础数据 - 区域管理 `/base/region`

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P0 | 区域名称列为空，数据不显示 | ⬜ |
| 2 | P0 | 区域编码列为空 | ⬜ |

### 根因分析

视图使用 `prop="regionName"` 和 `prop="regionCode"`，但Mock返回的是 `name` 和 `code`。

**视图代码：**
```vue
<el-table-column prop="regionName" label="区域名称" min-width="200" />
<el-table-column prop="regionCode" label="区域编码" width="120" />
```

**Mock数据：**
```javascript
{
  id: 1,
  name: '湖北省',    // 应该是 regionName
  code: 'HB',        // 应该是 regionCode
  ...
}
```

### 修复方案

**方案A：修改Mock数据（推荐）**

```diff
# 文件：src/mock/region.js

const regionTree = [
  {
    id: 1,
-   name: '湖北省',
-   code: 'HB',
+   regionName: '湖北省',
+   regionCode: 'HB',
    level: 1,
    parentId: 0,
    status: '0',
+   sort: 1,
    createTime: '2026-01-01 10:00:00',
    children: [
      {
        id: 11,
-       name: '武汉市',
-       code: 'WH',
+       regionName: '武汉市',
+       regionCode: 'WH',
        ...
      }
    ]
  }
]
```

**方案B：修改视图**

```diff
# 文件：src/views/base/region/index.vue

- <el-table-column prop="regionName" label="区域名称" min-width="200" />
- <el-table-column prop="regionCode" label="区域编码" width="120" />
+ <el-table-column prop="name" label="区域名称" min-width="200" />
+ <el-table-column prop="code" label="区域编码" width="120" />
```

同时需要修改弹窗表单中的字段引用。

---

## 十一、全局Mock数据问题

### 问题列表

| 序号 | 优先级 | 问题描述 | 状态 |
|:----:|:------:|----------|:----:|
| 1 | P3 | 时间数据不合理（1970年、1971年等） | ⬜ |

### 修复方案

修改Mock时间生成规则：

```javascript
// 使用固定范围的时间
createTime: Mock.Random.datetime('yyyy-MM-dd HH:mm:ss', 2020, 2026)

// 或使用最近5年的时间
createTime: (() => {
  const year = Mock.Random.integer(2020, 2026)
  return Mock.Random.datetime('yyyy-MM-dd HH:mm:ss').replace(/^\d{4}/, year)
})()
```

---

## 修复执行顺序

### 第一批（P0-阻塞性问题）

**问题统一根因：Mock数据字段名与视图prop不匹配**

| 模块 | Mock字段 | 视图prop | 需修改 |
|------|----------|----------|--------|
| 年级管理 | `name`, `code` | `gradeName`, `gradeCode` | Mock或视图 |
| 班级管理 | `name`, `code` | `className`, `classCode` | Mock或视图 |
| 学科管理 | `name`, `code` | `subjectName`, `subjectCode` | Mock或视图 |
| 区域管理 | `name`, `code` | `regionName`, `regionCode` | Mock或视图 |

**推荐方案：统一修改Mock数据**

修改文件列表：
- [ ] `src/mock/grade.js` - 字段改为 `gradeName`, `gradeCode`
- [ ] `src/mock/class.js` - 字段改为 `className`, `classCode`
- [ ] `src/mock/subject.js` - 字段改为 `subjectName`, `subjectCode`
- [ ] `src/mock/region.js` - 字段改为 `regionName`, `regionCode`

### 第二批（P1-功能缺失）

- [ ] `src/views/application/index.vue` - 将 `row.apis` 改为 `row.apiAuth`

### 第三批（P2-体验优化）

- [ ] `src/views/school/index.vue` - 操作列宽度从 200 改为 240

### 第四批（P3-数据优化）

- [ ] 各Mock文件 - 优化时间生成规则，限制为近5年

---

*文档版本：v1.0*  
*创建时间：2026-01-31*  
*维护团队：pangu*