fangxh2013
/
pangu-user-platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pangu-user-platform/docs/05-前端UI规范/页面问题修复清单.md

393 lines
9.5 KiB
Markdown
Raw Normal View History

docs: 添加前端UI规范文档和页面问题修复清单 通过浏览器实际检查所有页面，编写完整的前端UI规范文档： - 设计原则、色彩规范、布局规范 - 表格规范、表单规范、分页规范 - 状态Tag规范、交互规范 - Mock数据规范、文件命名规范 同时记录了各页面发现的问题： - P0: 年级/班级/学科/区域管理的Mock字段名不匹配 - P1: 应用管理授权接口列字段名不匹配 - P2: 学校管理操作列宽度不足 - P3: Mock时间数据范围过大
2026-01-31 17:19:56 +08:00
# 盘古用户平台 - 页面问题修复清单
> 基于 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*
*维护团队：湖北新华业务中台研发团队*