论文查重监测预警系统

概述

部署并定制一套完整的论文查重监测预警系统（Paper Plagiarism Detection & Early Warning System）—— 一款功能完备的单页应用（SPA），专为学术诚信监控而设计。系统包含趋势图表仪表盘、支持模拟四阶段检测流程的论文上传模块、带高亮文本比对的详细相似度分析、AI生成内容识别、多级严重性告警管理，以及报告生成功能。

技术栈：React 19 + TypeScript 6.0 + Vite 8.0 + Tailwind CSS 3.4 + Recharts 3.8 + Lucide React

适用场景

• 用户提出构建或部署查重、论文查重、学术诚信类系统的需求
• 用户希望在现有平台中集成相似度检查或AI内容分析能力
• 用户需要面向学术论文的监控型仪表盘
• 用户需要针对内容相似度的告警/预警机制
• 用户提及关键词：论文查重、查重检测、抄袭检测、学术不端、相似度分析、AI生成检测

快速启动 —— 基于模板部署

部署论文查重系统操作如下：

1. 复制项目模板：从 assets/project-template/ 复制至目标目录。
2. 安装依赖：在项目根目录下运行 npm install。
3. 启动开发服务器：运行 npm run dev（默认访问地址为 http://localhost:5173）。
4. 预览应用：使用 preview_url 在浏览器中打开应用。

# 完整部署命令
cp -r assets/project-template/ D:/plagiarism-system/
cd D:/plagiarism-system/
npm install
npm run dev

该系统完全在浏览器中运行，使用模拟数据，无需后端服务。全部数据（8 篇论文、5 条检测结果、5 条告警、3 份报告、监控统计信息）均已预配置于 src/data/mock.ts 中。

核心功能

1. 监控仪表盘（dashboard）

主入口页面，划分为四大功能区：

• 统计卡片：论文总数、待检数量、平均相似率、高风险论文数
• 7 日趋势图：基于 Recharts 的折线图，展示每日论文提交量与平均相似率变化
• 相似度分布图：饼图，按相似度区间（0–20%、20–40%、40–60%、60–80%、80–100%）分组统计论文数量
• 近期告警与论文：带快捷操作按钮的预览列表

2. 论文上传与管理（upload）

• 支持拖拽上传 PDF、DOCX、TXT 格式文件
• 模拟四阶段检测流水线（上传 → 解析 → 检测 → 分析），含动画进度指示
• 论文列表，含状态标签（待处理 / 处理中 / 已完成 / 警告 / 严重）
• 审核操作：通过（通过）/ 拒绝（不通过）判定
• 点击任一论文可弹出详情模态框，支持全文浏览
• 上传动作将通过 src/utils/generate-detection.ts 动态生成检测结果

3. 检测结果（detection）

采用左右分栏布局分析检测结果：

• 左侧面板：可滚动的已检测论文列表，显示相似率及风险等级标签
• 右侧面板：标签式详情视图，包含：
  • 相似片段 tab：列出所有相似段落，并标注来源出处
  • 匹配来源 tab：来源文献表格（知网 / 万方 / 维普）
  • AI分析结论 tab：可编辑的AI分析结论，含原创性/语法/结构评分、优势、不足、改进建议及风险评估
• 支持审核判定操作（通过 / 拒绝）

4. 告警中心（alerts）

支持多级严重性的告警管理：

• 按严重性筛选：全部 / 严重 / 警告 / 通知（All / Critical / Warning / Info）
• 告警类型：similarity_detected、ai_generated_suspected、citation_issue、format_error、system
• 支持逐条标记为已读，或一键标记全部为已读
• 点击告警项可在模态框中查看详细信息
• 导航栏铃铛图标显示未读告警数量徽标

5. 报告管理器（reports）

报告生成与管理功能：

• 支持生成三类报告：综合周报（Weekly Summary）、详细报告（Detailed）、预警报告（Alert）
• 模拟报告生成过程（生成中 → 就绪），含加载状态反馈
• 历史报告列表，含时间戳与关联论文数量
• 点击报告项可在模态框中查看完整内容

6. API 测试控制台（api-test）

用于集成测试的模拟 API 测试界面：

• 预置 8 个 REST 接口（GET / POST / PUT / DELETE）
• 支持单个测试或批量执行全部测试
• 显示 HTTP 状态码与响应耗时
• 提供 JSON 格式的请求/响应示例
• 响应体结构严格匹配系统内部数据模型

7. 系统设置（settings）

可配置阈值与功能开关：

• 相似度阈值滑块（10% – 50%）
• AI生成内容检测阈值（20% – 80%）
• 功能开关：Auto-check、Email notifications、Strict mode
• 支持保存 / 恢复默认配置

8. 全文阅读器（支持查重高亮）

详情模态框（DetailModal.tsx）内嵌 PaperContentViewer 组件，具备以下能力：

• 解析 Markdown 格式的完整学术论文内容
• 基于字符偏移匹配，叠加颜色编码的查重高亮：
  • 🔴 红色（≥70%）：高相似度
  • 🟠 橙色（40–69%）：中等相似度
  • 🟡 黄色（<40%）：低相似度
• 每段高亮段落均附带相似率百分比及来源标题标签
• 悬停可显示完整匹配详情

项目结构

project-root/
├── index.html                    # 入口 HTML（lang="zh-CN"）
├── package.json                  # 依赖项与脚本定义
├── vite.config.ts                # Vite 配置（含 @/ 路径别名）
├── tailwind.config.ts            # 自定义主题（主色 / 强调色 / 表面色）
├── tsconfig.json                 # TypeScript 项目引用配置
└── src/
    ├── main.tsx                  # React 入口文件
    ├── App.tsx                   # 根组件 —— 路由控制与全局模态框状态管理
    ├── index.css                 # Tailwind + 自定义组件样式
    ├── lib/utils.ts              # cn() 工具函数（clsx + tailwind-merge）
    ├── types/index.ts            # 所有 TypeScript 接口定义
    ├── data/mock.ts              # 模拟数据（论文、检测结果、告警、报告）
    ├── utils/
    │   ├── generate-content.ts   # 全文 Markdown 内容生成器
    │   └── generate-detection.ts # 动态检测结果生成器
    └── components/
        ├── layout/
        │   ├── Sidebar.tsx       # 导航侧边栏（7 个页面 + v2.1.0 版本标识）
        │   └── Header.tsx        # 顶部栏（含标题、铃铛图标、管理员头像）
        ├── pages/
        │   ├── Dashboard.tsx     # 基于 Recharts 的监控仪表盘
        │   ├── PaperUpload.tsx   # 论文上传与管理页面
        │   ├── DetectionResult.tsx # 带标签页的检测结果页面
        │   ├── DetailModal.tsx   # 通用详情模态框（788 行，核心组件）
        │   ├── AlertCenter.tsx   # 告警管理中心
        │   ├── ReportManager.tsx # 报告生成与列表页面
        │   ├── ApiTestPage.tsx   # API 测试控制台
        │   ├── SettingsPage.tsx  # 系统设置页面
        │   └── ArchitecturePage.tsx # 系统架构图展示页
        └── ui/
            ├── Badge.tsx         # 状态标签组件
            ├── Button.tsx        # 支持 5 种变体的按钮组件
            ├── Card.tsx          # 卡片容器组件
            ├── Modal.tsx         # 模态对话框组件
            ├── Progress.tsx      # 进度条组件
            └── Tabs.tsx          # 标签页组件

关键架构模式

数据流（单向流动）

所有数据源自 src/data/mock.ts，并自上而下贯穿组件树。根组件 App.tsx 统一管理：

• activePage：当前页面状态
• detailModal：全局模态框状态（DetailModalState 联合类型）
• openDetail() / closeDetail()：作为 props 向下传递的回调函数

动态内容生成

• generate-content.ts：依据主题关键词（AI、区块链、医疗健康、新能源、云原生、环境、交通、密码学）生成完整学术论文 Markdown 内容，每篇论文含 10 个主要章节，内容符合中文学术规范。
• generate-detection.ts：当无预设检测结果匹配某篇论文时，动态生成检测结果，其中相似段落按比例分配字符偏移范围。

相似段落高亮算法

DetailModal.tsx 中的 PaperContentViewer 组件实现如下逻辑：

1. 预先计算所有高亮区间（来自 SimilaritySegment[]，按起始位置排序）
2. 逐行解析 Markdown，持续跟踪累计字符偏移量
3. 对每个段落，检查其是否与任意高亮区间存在重叠
4. 若检测到重叠，则将该段落包裹于 HighlightedParagraph 组件中渲染，添加渐变背景与元数据标签

配置说明

自定义方式

如需定制本系统，请参考以下操作：

• 修改模拟数据：编辑 src/data/mock.ts —— 所有论文、检测结果、告警与报告均在此维护
• 调整论文内容：编辑 src/utils/generate-content.ts 中基于关键词的模板
• 优化检测逻辑：修改 src/utils/generate-detection.ts 中的段落生成策略
• 更改样式：调整 tailwind.config.ts 中的自定义调色板，或修改 src/index.css 中的组件样式
• 新增页面：在 src/components/pages/ 下创建新页面组件，在 Sidebar.tsx 中添加导航项，并在 App.tsx 中补充路由分支逻辑

常用命令

npm run dev      # 启动开发服务器
npm run build    # TypeScript 类型检查 + Vite 生产构建
npm run lint     # ESLint 代码检查
npm run preview  # 预览生产构建产物

参考资料

如需查阅详细的架构图、数据 Schema 及设计依据，请参阅 references/architecture.md。