OJ前端页面开发
Markdown编辑器
推荐的 Md 编辑器：https://github.com/bytedance/bytemd
阅读官方文档，下载编辑器主体、以及 gfm（表格支持）插件、highlight 代码高亮插件
npm i @bytemd/vue-next npm i @bytemd/plugin-highlight @bytemd/plugin-gfm新建 MdEditor 组件，编写代码：
隐藏编辑器中不需要的操作图标（比如 GitHub 图标）：
要把 MdEditor 当前输入的值暴露给父组件，便于父组件去使用，同时也是提高组件的通用
性，需要定义属性，把 value 和 handleChange 事件交给父组件去管理：
MdEditor 示例代码：
代码编辑器
微软官方编辑器：https://github.com/microsoft/monaco-editor
官方提供的整合教程：https://github.com/microsoft/monaco-editor/blob/main/docs/
integrate-esm.md
安装编辑器
vue-cli 项目（webpack 项目）整合 monaco-editor。
先安装 monaco-editor-webpack-pluginhttps://github.com/microsoft/monaco
editor/blob/main/webpack-plugin/README.md
在 vue.config.js 中配置 webpack 插件：
全量加载：
按需加载：
如何使用 Monaco Editor？查看示例教程：
https://microsoft.github.io/monaco-editor/playground.html?
source=v0.40.0#example-creating-the-editor-hello-world<https://
microsoft.github.io/monaco-editor/playground.html?source=v0.40.0#example
creating-the-editor-hello-world>
整合教程参考：http://chart.zhenglinglu.cn/pages/2244bd/#%E5%9C%A8-vue-
%E4%B8%AD%E4%BD%BF%E7%94%A8<http://chart.zhenglinglu.cn/pages/2244bd/
#%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8>
注意，monaco editor 在读写值的时候，要使用 toRaw(编辑器实例）的语法来执行操作，否
则会卡死。
示例整合代码如下：
通 Md 编辑器一样，也要接受父组件的传值，把显示的输入交给父组件去控制，从而能够让父
组件实时得到用户输入的代码：
页面开发
创建题目页面
重新根据后端生成前端请求代码：
openapi -- input http://localhost:8121/api/v2/api-docs -- output ./generated -- client axios在 JetBrains 系列编辑器中打开设置，搜索 live Templates，先创建一个自定义模板组，在组
下创建代码模板。
效果：输入缩写，即可生成模板代码。
示例模板：
<template> <div id="$ID$"></div> </template> <script setup lang="ts"> $END$ </script> <style scoped> #$ID$ { } </style>注意，其中的 ID 是根据表达式自动生成的：camelCase(fileNameWithoutExtension())
使用表单组件，先复制示例代码，再修改：https://arco.design/vue/component/form
此处我用到了
嵌套表单：https://arco.design/vue/component/form#nest
动态增减表单：https://arco.design/vue/component/form#dynamic
注意，自定义的代码编辑器组件不会被组件库识别，需要手动指定 value 和
handleChange 函数。
题目管理页面开发
1）使用表格组件：https://arco.design/vue/component/table#custom<https://
arco.design/vue/component/table#custom>（需要找到自定义操作的示例）
2）查询数据
3）定义表格列
4）加载数据
5）调整格式
比如 json 格式不好看，有 2 种方法调整：
1.使用组件库自带的语法，自动格式化（更方便）
2.完全自定义渲染，想展示什么就展示什么（更灵活）
6）添加删除、更新操作
删除后要执行 loadData 刷新数据
如果想学习 React And Design 框架的管理页面开发，去看用户中心项目