sladro
bd6734d6b8
### 🎨 重大视觉更新 #### 全新设计系统 - 采用专业教育主题配色：深蓝主色调体现可信度 - 统一设计系统变量：颜色、间距、圆角、阴影规范 - 现代CSS架构：支持响应式和流畅动画 #### 登录页面完全重构 - 左右分割式布局：品牌展示区(60%) + 登录区(40%) - 数据可视化：统计卡片展示平台活跃度 - 交互优化：悬浮动画、表单验证、快速体验按钮 #### 主页界面革新 - 专业仪表板布局：侧边栏导航 + 主内容区 - 实时数据统计：4个彩色卡片显示关键指标 - 功能模块网格：大卡片设计，清晰层次结构 - 角色权限适配：根据用户角色显示相应功能 ### 🔧 技术改进 - Vue3组件完全重构，保持接口兼容性 - Flexbox和Grid布局合理运用 - 响应式设计适配不同屏幕尺寸 - 流畅过渡动画提升用户体验 ### 📊 用户体验提升 - 信息架构更加清晰，专业性大幅提升 - 符合教育管理系统的视觉定位 - 数据展示直观，功能组织合理 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
178 lines
7.9 KiB
Markdown
178 lines
7.9 KiB
Markdown
# 实践教学评价平台
|
||
|
||
## 📋 项目概述
|
||
|
||
这是一个专业的实践教学评价平台演示项目，支持企业、教师、行业协会专家、学生四类角色进行实践成果提交、评价、画像展示、报告生成等功能。
|
||
|
||
## 🎨 最新界面设计
|
||
|
||
### V2.0 界面重构特色
|
||
- **现代仪表板设计**：专业的侧边栏导航 + 主内容区布局
|
||
- **分割式登录页**：品牌展示区 + 简洁登录区的左右分割设计
|
||
- **数据可视化**：实时统计卡片，彩色主题区分不同数据类型
|
||
- **专业配色系统**：深蓝主色调，体现教育平台的专业性和可信度
|
||
|
||
### 技术特色
|
||
- **Vue3 + ElementPlus + ECharts**
|
||
- **纯前端项目**：Mock数据，无后端依赖
|
||
- **响应式设计**：适配不同屏幕尺寸
|
||
- **现代CSS架构**：统一的设计系统变量
|
||
|
||
---
|
||
|
||
## 产品需求文档（PRD）
|
||
版本：V2.0
|
||
更新日期：2024-12-14
|
||
|
||
1. 文档目的
|
||
本 PRD 用于指导开发、测试、UI/UX、运维团队一次性、零偏差地实现《平台设计.docx》中提出的全部功能。任何需求冲突以本 PRD 为准。
|
||
|
||
2. 项目背景
|
||
学校需要一套线上实践教学评价系统，支持企业、教师、行业协会专家、学生四类角色，完成实践成果提交、评价、画像展示、报告生成等闭环流程。
|
||
|
||
3. 产品范围
|
||
• 范围包含：登录、首页双入口、评价流程、学生能力画像、发展监测、专项分析、报告下载。
|
||
• 非范围：真实 AI 影像/音频/文本分析算法、真实数据对接、移动端适配（本期仅支持 PC Web）。
|
||
|
||
4. 目标用户
|
||
角色 | 描述
|
||
-----------|------------------------------
|
||
学校管理员 | 仅维护账号，不参与业务
|
||
企业 | 对学生实践成果进行指标打分、上传佐证材料
|
||
教师 | 同上 + 查看学生画像、生成报告
|
||
行业协会专家 | 仅输入评价指标与意见
|
||
学生 | 提交成果、自评、互评
|
||
|
||
5. 功能需求
|
||
以下章节采用「用户故事 + 验收标准」格式，可直接转为测试用例。
|
||
|
||
5.1 登录与鉴权
|
||
US-1 作为任意角色用户，我可以通过学校统一登录页进入系统，以便进行后续操作。
|
||
• 字段：用户名、密码、角色下拉（学生/教师/企业/行业协会专家）。
|
||
• 登录后根据角色写 Session / JWT，后续路由守卫校验。
|
||
• 失败提示：「用户名或密码错误」。
|
||
|
||
5.2 首页双入口
|
||
US-2 登录成功后，我可以看到两个卡片入口：
|
||
A. 评价页面（所有角色可见）
|
||
B. 学生能力评价画像（仅教师角色可见，其余角色前端隐藏）
|
||
|
||
5.3 评价流程
|
||
5.3.1 筛选页
|
||
US-3 点击「评价页面」后，我首先进入筛选页：
|
||
• 下拉：学期（2023-2024-1…）、年级（2021…）、班级（计科1班…）、项目名称（XX公司实训）。
|
||
• 「确认」按钮，校验四项全部已选才可点击。
|
||
|
||
5.3.2 角色专属评价页
|
||
路由：/evaluate
|
||
US-4 企业/教师：
|
||
• 两个按钮：
|
||
①「输入评价指标」——弹框输入文本，保存后按钮变「已填写」。
|
||
②「上传学生材料」——多文件上传（pdf/doc/jpg/png），大小≤10 MB，列表展示文件名、大小、删除图标。
|
||
|
||
US-5 行业协会专家：
|
||
• 两个按钮：
|
||
①「输入评价指标」——同上。
|
||
②「输入评价意见」——同上。
|
||
|
||
US-6 学生：
|
||
• 三个按钮：
|
||
①「提交实践成果」——文件上传同上。
|
||
②「自评」——弹框打分（1-5 星）+ 文字评语。
|
||
③「互评」——表格列出同组同学，每人打分+评语。
|
||
• 全部完成后显示绿色「提交完成」Toast，2 秒后自动返回首页。
|
||
|
||
5.4 学生能力评价画像（仅教师）
|
||
路由：/portrait
|
||
静态页面，假数据即可。布局如下：
|
||
┌────────────┬────────────┬────────────┐
|
||
│ 成绩分布 │ 中上：学生人数 │ 学生名单 │
|
||
│ 柱状图 │ 文本+图标 │ 姓名/学号/ │
|
||
│ │ │ 年级/超链 │
|
||
├────────────┼────────────┼────────────┤
|
||
│ 能力矩阵 │ 中下：信息块 │ 多维度检测 │
|
||
│ 三角形雷达 │ │ 三个按钮 │
|
||
└────────────┴────────────┴────────────┘
|
||
|
||
• 成绩分布：ECharts 柱状图，X 轴 5 档成绩，Y 轴人数。
|
||
• 能力矩阵：三角形雷达，三指标（专业基础、专业综合、数智应用），值随机 60-95。
|
||
• 学生名单：表格，最后一列「评价报告」为蓝色按钮，点击跳转到 /report/{studentId}。
|
||
• 多维度检测：影像分析 / 音频分析 / 文本分析（仅 UI 按钮，点击弹 Toast「功能暂未开放」）。
|
||
• 右下角再置两个按钮：
|
||
①「评价报告」——同名单里的跳转。
|
||
②「历史记录查看」——暂留空页面，二期实现。
|
||
|
||
5.5 评价报告页（/report/{studentId}）
|
||
布局：左侧垂直导航（平台首页 | 发展监测 | 能力报告分析），右侧动态内容。
|
||
|
||
5.5.1 平台首页
|
||
• 点击直接返回 /portrait。
|
||
|
||
5.5.2 发展监测
|
||
路由：/report/{id}/monitor
|
||
• 顶部三筛选：学年区间、班级、项目（与评价流程一致）。
|
||
• 上左：学生基本信息卡片（姓名、学期、年级、参加项目）。
|
||
• 上右：柱状图，展示企业/行业/教师/学生四类主体评分（假数据）。
|
||
• 中间：
|
||
左：大数字「总体分数 88」。
|
||
右：横向条形图（示例：专业能力 90，团队协作 85…）。
|
||
|
||
5.5.3 能力报告分析（专项分析）
|
||
路由：/report/{id}/analysis
|
||
• 三栏文本：
|
||
① 优势分析（占位段落）
|
||
② 不足分析（占位段落）
|
||
③ 改进建议（占位段落）
|
||
• 历史评分：折线图，X 轴学年，Y 轴分数，随机 3 个点。
|
||
• 底部按钮「生成评价报告」：
|
||
- 点击调用后端接口 /api/report/generate，返回 PDF URL，浏览器下载。
|
||
- 若后端未就绪，前端 mock：下载一个静态 PDF（占位）。
|
||
|
||
6. 非功能需求
|
||
• 技术栈：Vue3 + ElementPlus + ECharts + SpringBoot + MySQL。
|
||
• 兼容性：Chrome 90+、Edge 90+。
|
||
• 性能：页面首屏 < 2s，接口 95% < 500 ms。
|
||
• 安全：密码加盐哈希（bcrypt），上传文件类型白名单，XSS/CSRF 防护。
|
||
• 可用性：上线率 99.9%，数据每日自动备份。
|
||
|
||
7. 数据字典（核心表）
|
||
表 user
|
||
id | username | password_hash | role(enum)
|
||
|
||
表 project
|
||
id | name | semester | grade | class
|
||
|
||
表 evaluation
|
||
id | project_id | student_id | evaluator_role | evaluator_id | score | comment | file_urls(json)
|
||
|
||
表 portrait_data（假数据用）
|
||
student_id | score_distribution_json | ability_matrix_json
|
||
|
||
8. 接口清单（关键）
|
||
POST /api/login
|
||
GET /api/projects?semester=&grade=&class=
|
||
POST /api/evaluation
|
||
GET /api/portrait/{studentId}
|
||
GET /api/report/{studentId}/monitor
|
||
GET /api/report/{studentId}/analysis
|
||
POST /api/report/generate
|
||
|
||
9. 里程碑
|
||
阶段 | 时间 | 交付物
|
||
---------|-----------|------------------
|
||
需求冻结 | T0 | 本 PRD + 原型
|
||
UI 设计 | T0+3 天 | Figma 高保真
|
||
前端完成 | T0+2 周 | 静态页面 + 联调
|
||
后端完成 | T0+3 周 | 接口 + 假数据
|
||
测试 | T0+4 周 | 测试报告
|
||
上线 | T0+5 周 | 生产环境
|
||
|
||
10. 风险与应对
|
||
风险：专家角色并发量低，可能遗漏测试。
|
||
应对：在测试用例中强制覆盖专家流程。
|
||
|
||
11. 附录
|
||
• 原型链接（Figma）：https://figma.com/xxx
|
||
• 设计稿切图命名规范：见《UI规范.pdf》
|
||
|
||
—— 以上，如无异议即进入开发。 |