React 18 Project - FrontEndSim

项目任务书

项目名称: FrontEndSim

目标: 创建一个用户友好的前端场景题 Web 应用程序，方便熟悉前端js语法，练习前端场景题。

项目架构设计

顶层架构

主要数据结构设计

系统采用数据驱动的设计方法，以JSON格式定义题目数据。主要数据结构如下：

{
  "id": "question-001",
  "title": "数组扁平化",
  "tags": ["array", "recursion"],
  "description": "实现一个函数，将多维数组扁平化为一维数组",
  "examples": [
    {
      "input": "[1, [2, [3, 4], 5]]",
      "output": "[1, 2, 3, 4, 5]"
    }
  ],
  "defaultCode": "function flattenArray(arr) {\n  // 请实现该函数\n}",
  "testCases": [
    {
      "input": "[1, [2, [3, 4], 5]]",
      "expectedOutput": "[1, 2, 3, 4, 5]"
    },
    {
      "input": "[]",
      "expectedOutput": "[]"
    }
  ],
  "solution": "function flattenArray(arr) {\n  return arr.flat(Infinity);\n}"
}

主要功能模块
模块名称 说明
题目区域 显示题目描述、要求、示例输入输出
编辑器区域 候选人写 JS 代码（支持 ES6+）
运行结果 展示 console 输出或报错
预设测试按钮 自动插入题目对应的测试用例
题目选择 多题切换（可配置 JSON 数据）

技术选型

前端框架与工具

• 框架：React 18
• 构建工具: vite
• 包管理: pnpm
• 富文本展示: Tiptap
• 编辑器: monaco-editor
• 样式：Tailwind CSS
• 多人协作: Yjs

代码沙盒执行环境

代码沙盒：Function + iframe 安全执行候选人代码

主要页面

0. 主页

简单介绍项目，设计一个按钮跳转到代码界面。

1. 代码编写界面

2. 编辑界面

目录结构

创建项目

编码 代码编辑界面

https://tailwind.nodejs.cn/docs/installation/using-vite
https://www.npmjs.com/package/@monaco-editor/react

pnpm create vite@latest frontend-scenario-platform --template react

pnpm i react-monaco-editor @monaco-editor/react
pnpm i tailwindcss @tailwindcss/vite

Note:
随着版本迭代，很多写法运行不了！
Tailwind

@import "tailwindcss";

vite-plugin-monaco-editor or vite-plugin-monaco-editor-esm 等插件都不要安装！

vite.config.js中也不需要配置monaco。

尝试运行下面的Demo。检查编辑器是否正常
App.jsx

import React from 'react'
import Editor from '@monaco-editor/react';

function App() {
  return <Editor height="90vh" defaultLanguage="javascript" defaultValue="// some comment" />;
}

export default App