实践教学评价平台

📋 项目概述

这是一个专业的实践教学评价平台演示项目，支持企业、教师、行业协会专家、学生四类角色进行实践成果提交、评价、画像展示、报告生成等功能。

🎨 最新界面设计

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》

—— 以上，如无异议即进入开发。