前端文档

1. 页面信息架构

角色	一级导航	核心页面
学员	我的课程、通知、个人中心	课程详情、任务详情、在线 IDE、提交历史、成绩详情
教师	课程管理、任务管理、批改中心、统计分析	课程编辑、任务发布、语言 / 用例配置、提交详情、成绩总表
管理员	平台概览、平台配置、组织用户、审计日志	配置发布、用户导入、审计检索

2. 路由组织

• public/*：登录、无权限、系统维护页
• student/*：学员门户
• teacher/*：教师与助教门户
• admin/*：平台治理门户

建议采用三个布局组件：

• StudentLayout
• TeacherLayout
• AdminLayout

3. 组件目录

src/
  layouts/
  pages/
    student/
    teacher/
    admin/
  components/
    forms/
    tables/
    charts/
    editor/
      ide-shell/
      file-tree/
      code-tabs/
      run-console/
  stores/
  services/
  router/
  utils/

4. 状态管理

Store	字段
authStore	用户信息、角色、菜单权限、登录状态
courseStore	当前课程、成员列表、资源列表
taskStore	当前任务、提交规则、语言配置、测试用例、Rubric
ideStore	当前工作区、文件树、活动文件、编辑脏状态、保存状态
runStore	运行输入、最近运行记录、stdout、stderr、资源摘要
submissionStore	当前提交、提交历史、评测状态
notificationStore	未读数、通知列表、公告列表

5. 前后端联调约定

• 所有请求通过统一 apiClient 发出。
• 统一拦截 401、403、429 和系统错误。
• 表格分页统一使用 page、pageSize、total。
• 时间字段统一以 ISO 8601 字符串返回，前端本地格式化展示。
• 运行结果与正式评测结果使用不同接口和不同状态枚举，不混用组件状态。

6. 关键页面设计

6.1 任务详情页

• 顶部：任务标题、截止时间、状态标签、剩余次数。
• 中部：Markdown 任务说明、附件下载、样例输入输出、支持语言说明。
• 底部：进入在线 IDE 按钮、历史提交列表、当前评测结果摘要。

6.2 在线 IDE 页

• 左侧：文件树、文件操作按钮、语言切换。
• 中部：Monaco 编辑器、多标签切换、未保存状态提示。
• 下方：运行控制台、输入面板、最近运行记录。
• 右侧：任务说明摘要、样例、正式提交按钮、提交规则提示。

6.3 提交详情页

• 左栏：代码快照、文件列表、提交元信息。
• 右栏：评测状态、测试点结果、错误摘要、人工评分区。

6.4 平台概览页

• 指标卡：活跃用户、课程数、提交量、评测成功率。
• 趋势图：近 7 天提交量、评测延迟、运行失败率。
• 风险表：失败任务、异常登录、待处理告警。

7. 交互规范

• 所有异步写操作必须显示进行中状态。
• 工作区编辑采用防抖自动保存，并在保存失败时展示显式警告。
• “运行代码”与“正式提交”按钮在颜色、文案和确认流程上必须明显区分。
• 对发布、撤回、重新评测等操作显示二次确认。
• 页面必须显式区分空态、加载态、异常态和无权限态。
• 学员侧错误提示应面向操作结果，教师侧可显示更细的业务上下文。