# web_plugin

**Repository Path**: dot123dot/web_plugin

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 考试监控系统

一个完整的在线考试监控解决方案，包括浏览器插件、后端服务和管理系统前端。

## 项目结构

```
├── extension/          # 浏览器插件 (Chrome/Edge/Firefox)
│   ├── manifest.json   # 插件配置文件 (Manifest V3)
│   ├── popup/          # 弹出页面
│   ├── content/        # 内容脚本
│   ├── background/     # 后台服务
│   └── icons/          # 插件图标
│
├── backend/            # 后端服务 (Node.js + Express + MongoDB)
│   ├── src/
│   │   ├── index.js    # 入口文件
│   │   ├── models/     # 数据模型
│   │   ├── routes/     # API 路由
│   │   ├── middleware/ # 中间件
│   │   └── scripts/    # 脚本文件
│   └── package.json
│
└── frontend/           # 管理系统前端 (React + Vite + Tailwind)
    ├── src/
    │   ├── pages/      # 页面组件
    │   ├── components/ # 通用组件
    │   ├── contexts/   # React Context
    │   └── utils/      # 工具函数
    └── package.json
```

## 功能特性

### 浏览器插件
- ✅ 学生登录并开始监控
- ✅ 记录所有鼠标点击事件
- ✅ 检测可疑行为（复制/粘贴、切换窗口、右键菜单等）
- ✅ 实时上报数据到后台
- ✅ 支持 Chrome、Edge、Firefox

### 后端服务
- ✅ RESTful API 接口
- ✅ 用户认证 (JWT)
- ✅ 会话管理
- ✅ 点击数据存储
- ✅ 警告记录
- ✅ 作弊风险评估

### 管理系统
- ✅ 仪表板统计
- ✅ 班级管理
- ✅ 学生管理
- ✅ 考试管理
- ✅ 会话监控
- ✅ 点击热力图
- ✅ 警告记录审核
- ✅ 作弊分析报告

## 快速开始

### 环境要求
- Node.js 18+
- 现代浏览器 (Chrome/Edge/Firefox)

> 注意：本项目使用 SQLite 数据库，无需额外安装数据库服务。

### 1. 安装后端

```bash
cd backend
npm install
```

创建 `.env` 文件：
```env
PORT=3000
NODE_ENV=development
DATABASE_PATH=./data/exam_monitor.db
JWT_SECRET=your-secret-key
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=admin123456
```

初始化数据库并启动：
```bash
npm run seed   # 创建管理员账户和示例数据
npm run dev    # 开发模式启动
```

### 2. 安装前端

```bash
cd frontend
npm install
npm run dev
```

访问 http://localhost:5173 进入管理系统。

默认账户：
- 邮箱: admin@example.com
- 密码: admin123456

### 3. 安装浏览器插件

#### Chrome/Edge
1. 打开 `chrome://extensions/` 或 `edge://extensions/`
2. 开启「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择 `extension` 文件夹

#### Firefox
1. 打开 `about:debugging#/runtime/this-firefox`
2. 点击「临时加载附加组件」
3. 选择 `extension/manifest.json`

> 注意：Firefox 需要将 manifest.json 中的 `service_worker` 改为 `scripts`

## 使用流程

### 学生端
1. 安装浏览器插件
2. 点击插件图标，填写学号、姓名、班级、考试编号
3. 点击「开始监控」
4. 在考试页面进行答题，插件会自动记录点击行为
5. 考试结束后点击「停止监控」

### 管理员端
1. 登录管理系统
2. 在「班级管理」中创建班级
3. 在「考试管理」中创建考试
4. 在「监控会话」中查看实时监控数据
5. 在「警告记录」中审核可疑行为
6. 点击会话详情查看热力图和作弊分析

## 作弊检测规则

系统会检测以下可疑行为：

| 行为类型 | 风险等级 | 说明 |
|---------|---------|------|
| 窗口切换 | 中 | 切换到其他窗口/标签页 |
| 页面隐藏 | 中 | 页面被隐藏或最小化 |
| 右键菜单 | 中 | 使用右键菜单 |
| 复制操作 | 高 | Ctrl+C 复制内容 |
| 粘贴操作 | 高 | Ctrl+V 粘贴内容 |
| 开发者工具 | 极高 | 尝试打开 F12 开发者工具 |
| 外部链接 | 中 | 点击外部链接 |

## API 文档

### 认证相关
- `POST /api/auth/login` - 登录
- `GET /api/auth/me` - 获取当前用户

### 会话管理
- `POST /api/session/start` - 开始监控会话
- `POST /api/session/end` - 结束监控会话

### 点击记录
- `POST /api/clicks/batch` - 批量上报点击
- `GET /api/clicks/:studentId/:examId` - 获取点击记录
- `GET /api/clicks/heatmap/:studentId/:examId` - 获取热力图数据

### 统计分析
- `GET /api/stats/dashboard` - 仪表板统计
- `GET /api/stats/student/:studentId/exam/:examId` - 学生考试详情
- `GET /api/stats/cheating-analysis/:studentId/:examId` - 作弊分析

## 技术栈

- **插件**: JavaScript, Chrome Extension API (Manifest V3)
- **后端**: Node.js, Express, SQLite, Sequelize, JWT
- **前端**: React 18, Vite, Tailwind CSS, Recharts, Lucide Icons

## 开发说明

### 图标生成
SVG 图标需要转换为 PNG 格式：

```bash
# 使用在线工具或 ImageMagick
convert -background none icon16.svg icon16.png
convert -background none icon48.svg icon48.png
convert -background none icon128.svg icon128.png
```

### 生产部署

后端：
```bash
cd backend
npm start
```

前端：
```bash
cd frontend
npm run build
# 将 dist 目录部署到 Web 服务器
```

## 许可证

MIT License