393 lines
9.5 KiB
Markdown
393 lines
9.5 KiB
Markdown
# 盘古用户平台 - 页面问题修复清单
|
||
|
||
> 基于 2026-01-31 浏览器实际检查结果
|
||
> 作者：湖北新华业务中台研发团队
|
||
|
||
---
|
||
|
||
## 概述
|
||
|
||
本文档记录了通过浏览器检查发现的所有页面问题，按模块分类，标注优先级和修复方案。
|
||
|
||
---
|
||
|
||
## 一、登录页面 `/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*
|
||
*维护团队：湖北新华业务中台研发团队*
|