OJ Next
基于 Vue 3 + TypeScript 的在线判题系统前端项目。
项目特性
- 🎯 现代化技术栈 - Vue 3 + TypeScript + Vite
- 📊 数据可视化 - 丰富的图表和统计功能
- 🎨 流程图编辑器 - 内置 FlowchartEditor 组件
- 📱 响应式设计 - 支持多端适配
- ⚡ 高性能 - 优化的组件和状态管理
核心组件
FlowchartEditor 流程图编辑器
一个功能完整的流程图编辑器组件，支持：
- 🎯 拖拽创建节点 - 从工具栏拖拽节点到画布
- 🔗 节点连接 - 支持节点间的连线操作
- ✏️ 节点编辑 - 双击节点进行文本编辑
- 📋 节点操作 - 复制、删除、批量操作
- ↩️ 撤销重做 - 完整的历史记录管理
- ⌨️ 键盘快捷键 - Ctrl+Z/Ctrl+Y 撤销重做，Delete 删除
- 💾 自动保存 - 本地缓存，防止数据丢失
- 🎨 多种节点类型 - 开始、输入、处理、判断、循环、输出、结束
- 🖱️ 交互优化 - 流畅的拖拽体验和视觉反馈
核心特性：
- 基于 Vue Flow 构建，性能优异
- 模块化设计，易于扩展
- 响应式布局，支持多端适配
- 完整的 TypeScript 支持
详细文档：FlowchartEditor 文档
技术栈
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集
- Rsbuild - 基于 Rspack 的构建工具
- Vue Flow - 流程图组件库
- Composition API - Vue 3 组合式 API
- Naive UI - Vue 3 组件库
- Chart.js - 图表可视化库
- CodeMirror - 代码编辑器
- Yjs - 实时协作框架
项目结构
src/
├── shared/ # 共享组件和工具
│ ├── components/
│ │ └── FlowchartEditor/ # 流程图编辑器
│ │ ├── index.vue # 主组件
│ │ ├── CustomNode.vue # 自定义节点
│ │ ├── Toolbar.vue # 工具栏
│ │ ├── NodeHandles.vue # 节点操作
│ │ ├── NodeActions.vue # 节点动作
│ │ ├── useCache.ts # 缓存管理
│ │ ├── useDnD.ts # 拖拽处理
│ │ ├── useFlowOperations.ts # 流程操作
│ │ ├── useHistory.ts # 历史记录
│ │ └── useNodeStyles.ts # 节点样式
│ ├── composables/ # 组合式函数
│ ├── layout/ # 布局组件
│ ├── store/ # 状态管理
│ └── themes/ # 主题配置
├── oj/ # 主要业务组件
│ ├── ai/ # AI分析模块
│ ├── problem/ # 题目相关
│ ├── contest/ # 竞赛相关
│ ├── submission/ # 提交相关
│ └── store/ # 业务状态管理
├── admin/ # 管理后台组件
└── utils/ # 工具函数
开发指南
安装依赖
npm install
启动开发服务器
npm start
# 或
npm run start
构建生产版本
npm run build
构建测试环境版本
npm run build:test
构建预发布版本
npm run build:staging
文档
贡献
欢迎提交 Issue 和 Pull Request！
许可证
MIT License