134 lines
8.7 KiB
Markdown
134 lines
8.7 KiB
Markdown
# RailwaySystem 前端多角色视图与交互方案设计 (UI & UX Design)
|
||
|
||
- **设计版本**: R.2A Design Freeze
|
||
- **设计日期**: 2026-09-15
|
||
- **核心目标**: 优化统一登录入口与注册策略，确立三角色登录后动态 Landing 重定向机制，设计轻量、高复用度的教师工作台与学员个人中心。
|
||
|
||
---
|
||
|
||
## 1. 登录入口与注册策略设计 (Registration Policy)
|
||
|
||
### 1.1 正式策略参数表
|
||
- **自主注册策略 (`SELF_REGISTRATION_POLICY`)**: `DISABLED`
|
||
- **登录页注册链接 (`LOGIN_PAGE_REGISTER_LINK`)**: `HIDE` (隐藏)
|
||
- **登录页受控提示 (`LOGIN_PAGE_NOTE`)**: `账号由培训管理部门统一创建与授权维护`
|
||
|
||
### 1.2 登录界面改造交互规范
|
||
在 `build_ui/src/views/login.vue` 中：
|
||
1. 将局部数据项直接固化为受控策略：
|
||
```javascript
|
||
// 关闭自主注册链接渲染
|
||
register: false,
|
||
```
|
||
2. 移除原有的 `<router-link :to="'/register'">立即注册</router-link>` 元素。
|
||
3. 在登录表单底部密码框与登录按钮之间增加一行浅灰色居中文本提示：
|
||
```html
|
||
<div class="login-note">
|
||
<i class="el-icon-info"></i> 本系统账号由培训管理部门统一创建与授权维护
|
||
</div>
|
||
```
|
||
4. **业务价值**: 彻底消除用户点击“立即注册”后弹出“当前系统没有开启注册功能！”的报错负反馈，向评审专家和用户清晰传递“严密组织管控、受控实名体系”的企业级安全定位。
|
||
|
||
---
|
||
|
||
## 2. 登录后动态 Landing 重定向机制 (Landing Strategy)
|
||
|
||
系统全员使用同一个登录入口 `http://192.168.139.230:8082/login`。用户验证成功颁发 JWT 后，前端路由守卫（`permission.js`）执行如下分流重定向策略：
|
||
|
||
```
|
||
用户输入账号密码
|
||
│
|
||
▼
|
||
POST /login (200 OK)
|
||
│
|
||
▼
|
||
GET /getInfo (拉取 roles 与 permissions)
|
||
│
|
||
▼
|
||
角色判定 (Role Branching)
|
||
│
|
||
┌───────────────────────────┼───────────────────────────┐
|
||
▼ ▼ ▼
|
||
拥有 admin 或 train_admin 拥有 train_teacher 拥有 train_student
|
||
│ │ │
|
||
▼ ▼ ▼
|
||
Landing 重定向至: Landing 重定向至: Landing 重定向至:
|
||
/index /train/teacher/dashboard /train/student/portal
|
||
(系统综合驾驶舱) (教师授课工作台) (学员个人培训中心)
|
||
```
|
||
|
||
- **兜底方案 (Fallback)**: 若用户被赋予复合角色或自定义角色，前端自动跳转至 `asyncRoutes` 生成的动态路由树的第一个叶子节点页面，杜绝 404 或白屏。
|
||
|
||
---
|
||
|
||
## 3. 教师端页面架构方案 (Teacher Portal)
|
||
|
||
### 3.1 核心设计理念：轻量工作台，杜绝全套克隆
|
||
- 教师端绝不照搬或复制一套庞大的管理端 CRUD 界面。
|
||
- 教师关注的核心目标极其聚焦：**“我今天什么时间在哪个场地有课？来了多少学员？是谁没来？”**。
|
||
|
||
### 3.2 页面结构与功能布局
|
||
教师登录后展示两级导航或扁平化工作台：
|
||
|
||
1. **教师授课工作台 (`/train/teacher/dashboard`)**:
|
||
- **顶部指标卡片**:
|
||
- 今日待授课次数量（如：`2 节`）
|
||
- 当前任教培训班总数（如：`1 个班`）
|
||
- 本周授课累计学时（如：`8 课时`）
|
||
- **核心日历/日程看板 (My Timetable)**:
|
||
- 复用 Element UI 的 `el-calendar` 或 FullCalendar 组件，以时间轴形式高亮渲染当前教师的授课排课卡片。
|
||
- 卡片显示：课程名称（如《钢结构实训》）、实训场地（如实训区 A）、起止时间（08:30 - 10:00）。
|
||
- 点击课次卡片：右侧弹出该课次学员即时出勤抽屉，显示打卡名单与迟到/缺勤人员。
|
||
2. **任教班级与学员名册 (`/train/teacher/classes`)**:
|
||
- 列表展示当前教师授课的培训计划（班级名称、培训周期、计划状态）。
|
||
- 点击“查看花名册”：弹出学员表格，展示学员姓名、单位、报到状态与出勤率概览（身份证脱敏为后四位，手机号中间脱敏，保护学员隐私）。
|
||
|
||
---
|
||
|
||
## 4. 学员端页面架构方案 (Student Portal)
|
||
|
||
### 4.1 核心设计理念：个人培训档案，极简清晰
|
||
- 学员作为铁路一线职工，需要操作极其简便、关键业务一目了然的个人看板。
|
||
- 主页为单页响应式布局，分为四大信息模块：
|
||
|
||
```
|
||
+─────────────────────────────────────────────────────────────────────────────+
|
||
| 【模块 1: 我的当前培训状态条】 |
|
||
| 当前班级: 铁路综合培训第一期 | 培训周期: 2026-09-15 至 2026-09-20 |
|
||
| [立项编制] ────> [✔ 待报到] ────> [已报到] ────> [在训学习] ────> [结训归档] |
|
||
| 状态: 已成功报到 (报到时间: 2026-09-15 12:35) | 分配场地: 实训区A |
|
||
+─────────────────────────────────────────────────────────────────────────────+
|
||
| 【模块 2: 我的今日课程与日程安排】 |
|
||
| ┌─────────────────────────┐ ┌─────────────────────────┐ |
|
||
| │ 上午 08:30 - 10:00 │ │ 下午 14:00 - 16:30 │ |
|
||
| │ 《铁路安全理论》 │ │ 《钢结构实训》 │ |
|
||
| │ 地点: 101教室 │ │ 地点: 实训区A │ |
|
||
| │ 讲师: 王老师 │ │ 讲师: 王老师 │ |
|
||
| └─────────────────────────┘ └─────────────────────────┘ |
|
||
+─────────────────────────────────────────────────────────────────────────────+
|
||
| 【模块 3: 我的出勤与学时汇算】 │ 【模块 4: 我的综合能力画像】 |
|
||
| - 正常出勤: 1 次 │ - 出勤表现: 100 分 |
|
||
| - 迟到记录: 1 次 (人工修正延误) │ - 理论考核: 92 分 |
|
||
| - 累计学时: 4.5 / 24 课时 │ - 实操水平: 95 分 |
|
||
| - 签退状态: 已锁定不可篡改 │ - (ECharts 五维雷达图直观渲染) |
|
||
+────────────────────────────────────┴────────────────────────────────────────+
|
||
```
|
||
|
||
### 4.2 组件高度复用
|
||
- 模块 1 复用 Element UI 的 `el-steps` 步骤条。
|
||
- 模块 2 复用现有的课表时间计算与场地标签。
|
||
- 模块 3 复用现有的考勤标签状态着色（正常绿、迟到黄、缺勤红）。
|
||
- 模块 4 直接复用管理端已有的 `views/train/portrait/index.vue` 内部封装的 ECharts 雷达渲染引擎，仅入参改为 `/train/me/portrait` 接口数据。
|
||
|
||
---
|
||
|
||
## 5. 跨角色访问越权拦截与前端路由守卫
|
||
|
||
1. **路由强拦截**:
|
||
- 若学员尝试手动在浏览器地址栏键入 `/business/teacher` 或 `/business/training-plan`：
|
||
- Vue-Router 动态路由根本未注册该 path，直接命中通配路由触发 `404 Not Found`。
|
||
2. **接口强隔离**:
|
||
- 即使恶意用户通过 DevTools 抓包提取管理端 API 发送请求，后端 Spring Security 校验缺失 `train:teacher:list` 权限，直接返回 `403 Forbidden`。
|
||
3. **实现成本与性能评估**:
|
||
- 视图层改动完全局限在 `build_ui/src/views/train/teacher/` 与 `build_ui/src/views/train/student/` 两个自服务文件夹内，不影响管理端 18 个已有模块的任何已有逻辑。
|