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

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

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

---

概述

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

---

一、登录页面 /login

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

页面截图确认：

• 渐变背景色正常
• 登录卡片居中显示
• 表单字段完整
• 验证码正常显示

---

二、首页 /dashboard

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

页面截图确认：

• 欢迎卡片显示正常
• 统计卡片（学校数、会员数、学生数、应用数）正常显示
• 数据展示：128、5680、23456、12

---

三、学校管理 /school

问题列表

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

修复方案

问题1：操作列过窄

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

或者精简按钮文字：

<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行）：

<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行）：

apiAuth: randomApis,  // 字段名是 apiAuth，不是 apis

修复方案

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

# 文件：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

# 文件：src/mock/application.js

- apiAuth: randomApis,
+ apis: randomApis,

---

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

问题列表

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

根因分析

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

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

视图代码（第31-32行）：

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

Mock数据（grade.js 第9行）：

{ id: 1, name: '一年级', code: 'G01', ... }
// 字段是 name/code，不是 gradeName/gradeCode

修复方案

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

# 文件：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：修改视图

# 文件：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行）：

{ id: 1, name: '1班', code: 'C01', ... }

修复方案

参照年级管理修复方案。

---

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

问题列表

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

根因分析

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

Mock数据（subject.js 第9行）：

{ id: 1, name: '语文', code: 'S01', ... }

修复方案

参照年级管理修复方案。

---

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

问题列表

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

根因分析

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

视图代码：

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

Mock数据：

{
  id: 1,
  name: '湖北省',    // 应该是 regionName
  code: 'HB',        // 应该是 regionCode
  ...
}

修复方案

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

# 文件：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：修改视图

# 文件：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时间生成规则：

// 使用固定范围的时间
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