# data-struct-oj

**Repository Path**: qsdream/data-struct-oj

## Basic Information

- **Project Name**: data-struct-oj
- **Description**: 专门用来应付数据结构考试练习而生的一个OJ系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-07
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Data Struct OJ（前端版）

一个基于 **Vue 3 + JavaScript + Vite + Ant Design Vue** 的前端刷题系统。
当前阶段目标是先完成可展示、可交互、可扩展的前端形态，并通过执行器接口为后续远程判题沙箱预留能力。

## 项目定位

- 首页展示题目列表，支持分类筛选与本地分页（默认每页 10 条）
- 点击“做题”进入题目详情页
- 详情页采用左右布局：左侧题面与样例，右侧 Java 编辑器与结果区
- 支持“运行代码”（当前为前端模拟判题流程）
- 支持前端敏感关键字拦截提示（后续接入）
- 支持“查看答案”弹窗与代码复制

## 技术栈

- 框架：Vue 3
- 构建：Vite
- UI：Ant Design Vue
- 路由：Vue Router
- 状态管理：Pinia
- 代码编辑器：Monaco Editor（Java 高亮）

## 架构分层

- **表现层（views/components）**：页面展示与交互
- **状态层（stores）**：题库状态、分页状态、编辑器状态、运行状态
- **服务层（services）**：题目查询、判题、敏感词检测、答案服务（当前逐步完善）
- **数据层（mocks）**：本地题目与样例数据

## 当前已实现功能

- 基础框架与路由接入（`/`、`/problems/:id`）
- 首页题目列表、分类筛选、本地分页
- 题目详情页左右双栏布局
- Java 编辑器（Monaco）高亮输入
- 运行结果面板（模拟结果）
- 标准答案弹窗与复制
- 样例输入/输出一键复制
- 导航栏样式修复（浅色风格）

## 目录结构

```text
src/
  App.vue
  main.js
  router/
    index.js
  stores/
    question.js
    judge.js
  views/
    HomeView.vue
    ProblemDetailView.vue
  layouts/
    AppLayout.vue
  components/
    problem/
      ProblemDescription.vue
      ProblemSamples.vue
    editor/
      CodeEditor.vue
      JudgeResultPanel.vue
      AnswerModal.vue
    common/
      PageHeader.vue
  services/
    executors/
  mocks/
    questions.js
  styles/
    index.css
```

## 快速开始

### 1) 安装依赖

```bash
npm install
```

### 2) 启动开发环境

```bash
npm run dev
```

### 3) 生产构建

```bash
npm run build
```

## 页面说明

### 首页 `/`

- 分类筛选
- 题目表格（标题/分类/知识点/难度/操作）
- 分页器（默认每页 10 条）
- 点击“做题”进入详情页

### 题目详情 `/problems/:id`

- 左侧：题目描述、输入输出说明、样例说明
- 右侧：Java 编辑器、运行按钮、结果面板、查看答案
- 支持返回首页
- 样例输入/输出支持复制

## 运行与安全边界说明

当前版本为 **MVP 前端展示版**：

- “运行代码”是前端模拟执行流程，用于打通交互与状态
- 前端敏感调用检测仅能作为体验级提示，不是最终安全防护
- 真实 Java 编译/运行建议在后续接入远程沙箱服务

## 后续规划

- 完成 `securityService`：敏感关键字拦截与提示
- 完成 `judgeService + mockJavaExecutor`：更完整模拟判题状态
- 抽象 `remoteJudgeExecutor`：平滑切换到远程判题
- 补充提交记录、排行榜、收藏等扩展模块

## 设计来源

项目实现遵循仓库内文档：

- `frontend-oj-architecture.md`