# grading

**Repository Path**: zz0zhu/grading

## Basic Information

- **Project Name**: grading
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-27
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 编程考试评卷系统

这是一个基于Vue 3的编程考试评分管理系统，用于管理学生的编程作业提交、查看代码和运行截图，并进行评分。

## 功能特点

- 📁 **班级管理**: 查看所有班级，显示学生人数和评分进度
- 👥 **学生列表**: 按班级查看学生列表，支持搜索和状态筛选
- 💻 **代码查看**: 查看学生提交的程序代码文件
- 🖼️ **截图预览**: 查看程序运行截图，支持放大预览
- ⭐ **评分系统**: 对程序1和程序2分别评分，添加评语
- 📊 **进度统计**: 实时显示评分进度和统计信息
- 📤 **数据导出**: 支持导出评分结果为CSV格式

## 技术栈

- **前端框架**: Vue 3 + TypeScript
- **UI组件**: Element Plus
- **构建工具**: Vite
- **开发工具**: Vue DevTools

## 项目结构

```
src/
├── components/           # 组件目录
│   ├── ClassList.vue    # 班级列表组件
│   ├── StudentList.vue  # 学生列表组件
│   └── StudentDetail.vue # 学生详情和评分组件
├── types/               # 类型定义
│   └── index.ts         # TypeScript接口定义
├── utils/               # 工具函数
│   └── fileService.ts   # 文件系统服务（模拟）
├── App.vue              # 主应用组件
└── main.ts              # 应用入口
```

## 安装和运行

1. 安装依赖：

```bash
pnpm install
```

2. 启动开发服务器：

```bash
pnpm dev
```

3. 构建生产版本：

```bash
pnpm build
```

## 使用说明

### 1. 班级视图

- 显示所有班级的卡片
- 每个班级显示学生总数、已评分人数和评分进度
- 点击班级卡片进入学生列表

### 2. 学生列表

- 显示该班级所有学生
- 支持按学号或姓名搜索
- 支持按评分状态筛选（全部/已评分/未评分）
- 显示每个学生的程序得分和总分
- 点击学生行或"评分"按钮进入评分页面

### 3. 学生评分

- 左右分栏显示程序1和程序2
- 每个程序显示：
  - 代码文件内容（只读）
  - 运行截图（可点击放大查看）
  - 评分区域（分数输入和评语）
- 底部显示总分和保存按钮

### 4. 数据导出

- 在班级列表页面可导出所有班级的评分结果
- 在学生列表页面可导出当前班级的评分结果
- 导出格式为CSV，包含学号、姓名、各程序得分、总分等信息

## 数据结构

系统使用以下主要数据结构：

### 学生信息（Student）

```typescript
interface Student {
  id: string // 学号
  name: string // 姓名
  className: string // 班级名
  folderPath: string // 文件夹路径
  program1?: ProgramSubmission // 程序1提交
  program2?: ProgramSubmission // 程序2提交
  totalScore: number // 总分
  maxScore: number // 满分
  graded: boolean // 是否已评分
  gradedAt?: Date // 评分时间
}
```

### 程序提交（ProgramSubmission）

```typescript
interface ProgramSubmission {
  name: string // 程序名称
  files: ProgramFile[] // 代码文件列表
  screenshots: string[] // 截图路径列表
  score: number // 得分
  maxScore: number // 满分
  comments: string // 评语
  graded: boolean // 是否已评分
}
```

## 注意事项

1. **文件系统访问**: 当前版本使用模拟数据，在实际部署时需要：

   - 后端API来读取文件系统中的学生文件夹
   - 文件上传功能来处理代码文件和截图
   - 数据库来持久化评分数据

2. **图片显示**: 截图当前显示为占位图，实际使用时需要：

   - 配置正确的图片路径
   - 可能需要图片服务器或CDN

3. **权限管理**: 生产环境中可能需要：
   - 用户登录认证
   - 权限控制（教师/助教角色）
   - 操作日志记录

## 扩展功能建议

1. **批量操作**: 支持批量评分、批量导出
2. **评分模板**: 预设评分标准和模板
3. **统计分析**: 更详细的成绩统计和分析图表
4. **通知系统**: 评分完成后通知学生
5. **版本控制**: 支持代码修改历史查看
6. **在线编译**: 集成在线代码编译和运行功能

## 开发说明

- 使用Vue 3 Composition API
- 响应式设计，支持不同屏幕尺寸
- TypeScript提供类型安全
- Element Plus提供统一的UI体验
- 模块化的组件设计，便于维护和扩展

## 如何连接真实的文件系统

要让这个系统能够读取您实际的学生文件夹，您需要：

1. **创建后端API**（推荐使用Node.js + Express）:

   ```bash
   # 创建后端项目
   mkdir grading-backend
   cd grading-backend
   npm init -y
   npm install express cors multer fs-extra
   ```

2. **实现文件读取API**:

   - 读取班级文件夹列表
   - 读取学生文件夹内容
   - 读取代码文件内容
   - 提供图片文件访问
   - 保存评分数据到JSON或数据库

3. **更新前端配置**:
   - 修改 `fileService.ts` 中的方法调用真实API
   - 配置API基础URL
   - 处理文件上传和图片显示

示例后端代码结构：

```javascript
// server.js
app.get('/api/classes', (req, res) => {
  // 读取文件夹，返回班级列表
})

app.get('/api/students/:className', (req, res) => {
  // 读取班级文件夹，返回学生列表
})

app.get('/api/student/:studentId', (req, res) => {
  // 读取学生文件夹内容
})

app.post('/api/grades/:studentId', (req, res) => {
  // 保存评分数据
})
```

这样您就可以将系统连接到实际的文件夹结构了！