docs: 更新文档

README.md

@@ -60,6 +60,7 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
 | [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Vuex`, 提供状态管理能力 |
 | [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) |  基于 `qiankun`，提供微服务能力 |
 | [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) |  样式支持sass |
+| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：

docs/.vuepress/configs/sidebar/en.ts

@@ -62,6 +62,7 @@ export const en: SidebarConfig = {
         '/reference/plugin/plugins/vuex.md',
         '/reference/plugin/plugins/qiankun.md',
         '/reference/plugin/plugins/sass.md',
+        '/reference/plugin/plugins/editor.md',
       ],
     },
     {

docs/.vuepress/configs/sidebar/zh.ts

@@ -62,6 +62,7 @@ export const zh: SidebarConfig = {
         '/zh/reference/plugin/plugins/vuex.md',
         '/zh/reference/plugin/plugins/qiankun.md',
         '/zh/reference/plugin/plugins/sass.md',
+        '/zh/reference/plugin/plugins/editor.md',
       ],
     },
     {

docs/guide/config.md

@@ -20,7 +20,7 @@ export default {
     },
     layout: {
         title: "Fes.js",
-        footer: 'Created by MumbleFe',
+        footer: 'Created by MumbelFe',
         multiTabs: false,
         menus: [{
             name: 'index'

docs/guide/css.md

@@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
 </style>
 ```
 
+## CSS Modules
+支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
+```vue
+<style module>
+.layout-content {
+  max-width: 1000px;
+}
+```
+如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
+```js
+import style from '@/styles/index.module.css'
+console.log(style)
+```
+
 ## CSS 预处理器
 Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。

docs/guide/getting-started.md

@@ -1,7 +1,7 @@
 # 快速上手
 
 ## 依赖环境
-首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 `10.13` 或以上。
+首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
 ```bash
 # 打印 node 版本
 node -v

docs/guide/mock.md

@@ -4,7 +4,7 @@ Mock 数据是前端开发过程中必不可少的一环，是分离前后端开
 
 ## 约定式 Mock 文件
 
-Fes.js 约定 `src/mock.js` 为 mock 文件。
+Fes.js 约定 `./mock.js` 为 mock 文件。
 
 比如：
 ```
@@ -172,7 +172,6 @@ export default function ({ cgiMock, mockjs, utils }) {
 - utils.file(path)，从项目根目录根据path寻找文件，返回文件流。
 
 ## 配置 Mock
-
 详见配置 [mock](../reference/config/#mock)。
 
 ## 关闭 Mock

docs/guide/runtime-config.md

@@ -39,6 +39,26 @@ export function beforeRender(lastOpts) {
 };
 ```
 
+### patchRoutes
+
+patchRoutes({routes })
+
+
+修改路由。
+
+比如在最前面添加一个 /foo 路由：
+```
+export function patchRoutes({ routes }) {
+  routes.unshift({
+    path: '/foo',
+    component: require('@/extraRoutes/foo').default,
+  });
+}
+```
+:::tip
+直接修改 `routes`, 不需要返回
+:::
+
 ### modifyClientRenderOpts
 
 modifyClientRenderOpts(lastOpts)
@@ -83,26 +103,6 @@ export function rootContainer(container) {
 }
 ```
 
-### patchRoutes
-
-patchRoutes({routes })
-
-
-修改路由。
-
-比如在最前面添加一个 /foo 路由：
-```
-export function patchRoutes({ routes }) {
-  routes.unshift({
-    path: '/foo',
-    component: require('@/extraRoutes/foo').default,
-  });
-}
-```
-:::tip
-直接修改 `routes`, 不需要返回
-:::
-
 ### onAppCreated
 
 onAppCreated({app})
@@ -126,6 +126,10 @@ render(oldRender: Function)
 
 覆写 render。
 
+比如用于渲染之前做权限校验。
+
+
+
 ### onRouterCreated
 
 onRouterCreated({router})

docs/guide/template.md

@@ -1,4 +1,4 @@
-# HTML模板
+# HTML和静态资源
 
 Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认 HTML模板 是：
 ```html
@@ -51,3 +51,33 @@ export default {
 - `NODE_ENV`
 - `FES_ENV`
 - `.env` 文件中以 `FES_APP_` 开头的变量
+
+## 处理静态资源
+
+放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
+
+### `public` 文件夹
+
+任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
+
+* 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
+
+```html
+<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+```
+
+* 在模板中，你首先需要向你的组件传入基础 URL：
+
+```html
+setup() {
+  return {
+    publicPath: process.env.BASE_URL
+  }
+}
+```
+
+然后：
+
+```html
+<img :src="`${publicPath}my-image.png`">
+```

docs/reference/config/README.md

@@ -144,6 +144,24 @@ export default {
 }
 ```
 
+
+## extraBabelPlugins
+
+- 类型： `array`
+- 默认值： `[]`
+- 详情：  
+
+ 配置额外的 babel 插件。
+
+- 示例：
+```js
+export default {
+    extraBabelPlugins: [
+        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
+    ],
+}
+```
+
 ## extraPostCSSPlugins
 
 - 类型： `array`
@@ -278,6 +296,12 @@ export default {
 
     配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
 
+## router
+
+- 类型： `object`
+- 默认值： `{ mode: 'hash' }`
+- 详情： 配置路由，具体请查看指南中关于路由的介绍
+
 ## singular
 - 类型： `boolean`
 - 默认值： `false`

docs/reference/plugin/plugins/editor.md

@@ -0,0 +1,120 @@
+# @fesjs/plugin-monaco-editor
+
+
+## 介绍
+我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-monaco-editor": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+### 编译时配置
+在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript', 'html', 'json']
+    }
+}
+```
+我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
+
+
+#### filename
+- **类型**：自定义worker脚本名称
+  
+- **默认值**：`'[name].worker.js'`
+
+#### publicPath
+- **类型**：自定义worker脚本的路径
+  
+- **默认值**：`''`
+
+#### languages
+- **类型**：需要支持的语言类型
+  
+- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
+
+- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript']
+    }
+}
+```
+
+## API
+
+### monaco
+编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
+```js
+import { monaco } from '@fesjs/fes';
+
+monaco.editor.defineTheme('myCoolTheme', {
+	base: 'vs',
+	inherit: false,
+	rules: [
+		{ token: 'custom-info', foreground: '808080' },
+		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+		{ token: 'custom-notice', foreground: 'FFA500' },
+		{ token: 'custom-date', foreground: '008800' },
+	]
+});
+
+```
+
+### 组件 MonacoEditor
+
+```vue
+<template>
+    <MonacoEditor 
+        v-model="json"
+        language="json"
+        height="400px"
+        check>
+    </MonacoEditor>
+</template>
+<script>
+import { MonacoEditor } from '@fesjs/fes';
+export default {
+    components: {
+        MonacoEditor
+    },
+    setup(){
+        const json = ref('');
+        return {
+            json
+        };
+    }
+}
+</script>
+```
+
+#### props
+| 属性 | 说明 | 类型 | 默认值  |
+| ------------- | ------------- | ------------- | ------------- |
+| theme  | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
+| language | 编辑器的语言 | string | - |
+| height  | 编辑器的高度 | string | `100%` |
+| width  | 编辑器的宽度 | string | `100%` |
+| modelValue(v-model)  | 编辑器的代码 | string | - |
+| readOnly  | 是否只读 | boolean | `false` |
+| options  | 编辑器的配置对象 | object | `{}` |
+| check  | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
+
+#### events
+
+| 事件名称 | 说明 | 回调参数 |
+| ------------- | ------------- | ------------- |
+| onload  | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
+| scrollChange  | 滚动时触发 | (e) => void |

docs/reference/plugin/plugins/layout.md

@@ -14,12 +14,23 @@
   
 - 可配置页面是否需要 layout。
 
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-layout": "^2.0.0"
+    },
+}
+```
+
 ## 布局类型
-配置参数是 `navigation`, 内容默认是 `side`：
+配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
 ```js
 export default {
     layout: {
-        navigation: 'side
+        navigation: 'side'
     }
 }
 ```
@@ -36,28 +47,31 @@ export default {
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">
 
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-layout": "^2.0.0"
-    },
-}
-```
-
 ### 页面禁用布局
-Fes.js 渲染路由时，如果路由元信息存在配置 `layout` 为 `false`，则表示禁用此配置，用户只需要如下配置：
+布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
 ```vue
-<config>
+<config lang="json">
 {
     "layout": false
 }
 </config>
-<script>
-</script>
 ```
+如果只是不想展示`side`，则：
+<config lang="json">
+{
+    "layout": {
+        "side": false
+    }
+}
+</config>
+```
+`layout`的可选配置有：
+
+- **side**： 左侧区域
+  
+- **top**： 头部区域
+
+- **logo**：logo和标题区域。
 
 ## 配置
 
@@ -174,13 +188,13 @@ export default {
     - 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
 ```js
 {
-    name: "user"
+    icon: "user"
 }
 ```
-    - 图表使用本地或者远程svg图片。
+    - 图标使用本地或者远程svg图片。
 ```js
 {
-    name: "/wine-outline.svg"
+    icon: "/wine-outline.svg"
 }
 ```
   
@@ -201,7 +215,7 @@ export const layout = {
   
 - **默认值**：`null`
 
-- **详情**：布局的 Header 部位提供组件自定义功能。
+- **详情**：top的区域部分位置提供组件自定义功能。
 
 #### unAccessHandler
 - **类型**：`Function`

docs/reference/plugin/plugins/qiankun.md

@@ -136,6 +136,30 @@ export default {
 </script>
 ```
 
+####  使用 `<MicroAppWithMemoHistory />` 组件的方式
+如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
+
+
+`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。
+
+ ```vue
+<template>
+    <MicroApp :name="name" url="/" />
+</template>
+<script>
+import { MicroApp } from '@fesjs/fes';
+
+export default {
+    components: { MicroApp },
+    setup(){
+        const name = "app1"
+        return {
+            name
+        }
+    }
+}
+</script>
+```
 
 ## 子应用配置
 

docs/reference/plugin/plugins/request.md

@@ -19,7 +19,7 @@
 ```js
 export default {
     request: {
-        dataField: 'result',
+        dataField: 'result'
     },
 }
 ```
@@ -32,6 +32,16 @@ export default {
 
     `dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
 
+
+#### base(即将废弃)
+
+- 类型： `string`
+- 默认值： `''`
+- 详情：
+
+    `base` 接口前缀。 
+
+⚠️警告，这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
 ### 运行时配置
 
 在 `app.js` 中进行运行时配置。
@@ -42,6 +52,8 @@ export const request = {
     responseDataAdaptor: (data) => {
 
     },
+    // 关闭 response data 校验（只判断 xhr status）
+    closeResDataCheck: false,
     // 请求拦截器
     requestInterceptors: [],
     // 相应拦截器
@@ -50,17 +62,45 @@ export const request = {
     // 内部以 reponse.data.code === '0' 判断请求是否成功
     // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
     errorHandler: {
-        11199: (response) => {
+        11199(response) {
-
+            // 特殊 code 处理逻辑
         },
-        404: (error) => {
+        404(error) {
-
+        },
+        default(error) {
+            // 异常统一处理
         }
     },
     // 其他 axios 配置
     ...otherConfigs
 }
 ```
+
+#### skipErrorHandler
+
+- 类型： `boolean | string | number | array<string | number>`
+- 默认值： ``
+- 详情：
+
+    指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。
+
+- 示列：
+
+```js
+import {request} from '@fesjs/fes';
+
+request('/api/login', null, {
+    skipErrorHandler: '110'
+}).then((res) => {
+    // do something
+}).catch((err) => {
+    // 这里处理 code 为 110 的异常
+    // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
+})
+```
+
+
+
 ## 使用
 
 ### 发起一个普通 post 请求
@@ -78,6 +118,27 @@ request('/api/login', {
 })
 ```
 
+### merge 重复请求
+
+连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。
+
+当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
+
+```js
+import {request} from '@fesjs/fes';
+
+request('/api/login', {
+    username: 'robby',
+    password: '123456'
+}, {
+    mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
+}).then((res) => {
+    // do something
+}).catch((err) => {
+    // 处理异常
+})
+```
+
 ### 请求节流
 
 ```js
@@ -106,7 +167,7 @@ request('/api/login', {
 }, {
     cache: {
         cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
-        cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min
+        cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
     },
 }).then((res) => {
     // do something
@@ -117,6 +178,7 @@ request('/api/login', {
 
 若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。
 
+
 ### 结合 use 使用
 
 ```js

docs/reference/plugin/plugins/sass.md

@@ -1,4 +1,4 @@
-# @fesjs/plugin-access
+# @fesjs/plugin-sass
 
 
 

docs/reference/plugin/plugins/vuex.md

@@ -49,13 +49,6 @@ store.getters[GETTER_TYPES.user.address]
 store.commit(MUTATION_TYPES.counter.increment)
 store.dispatch(ACTION_TYPES.user.login)
 ```
-
-```js
-import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES, store } from '@fesjs/fes';
-store.getters[GETTER_TYPES.user.address]
-store.commit(MUTATION_TYPES.counter.increment)
-store.dispatch(ACTION_TYPES.user.login)
-```
 ## API
 ### MUTATION_TYPES
 * 类型 `Object`

docs/zh/reference/plugin/plugins/editor.md

@@ -0,0 +1,120 @@
+# @fesjs/plugin-monaco-editor
+
+
+## 介绍
+我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-monaco-editor": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+### 编译时配置
+在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript', 'html', 'json']
+    }
+}
+```
+我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
+
+
+#### filename
+- **类型**：自定义worker脚本名称
+  
+- **默认值**：`'[name].worker.js'`
+
+#### publicPath
+- **类型**：自定义worker脚本的路径
+  
+- **默认值**：`''`
+
+#### languages
+- **类型**：需要支持的语言类型
+  
+- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
+
+- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript']
+    }
+}
+```
+
+## API
+
+### monaco
+编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
+```js
+import { monaco } from '@fesjs/fes';
+
+monaco.editor.defineTheme('myCoolTheme', {
+	base: 'vs',
+	inherit: false,
+	rules: [
+		{ token: 'custom-info', foreground: '808080' },
+		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+		{ token: 'custom-notice', foreground: 'FFA500' },
+		{ token: 'custom-date', foreground: '008800' },
+	]
+});
+
+```
+
+### 组件 MonacoEditor
+
+```vue
+<template>
+    <MonacoEditor 
+        v-model="json"
+        language="json"
+        height="400px"
+        check>
+    </MonacoEditor>
+</template>
+<script>
+import { MonacoEditor } from '@fesjs/fes';
+export default {
+    components: {
+        MonacoEditor
+    },
+    setup(){
+        const json = ref('');
+        return {
+            json
+        };
+    }
+}
+</script>
+```
+
+#### props
+| 属性 | 说明 | 类型 | 默认值  |
+| ------------- | ------------- | ------------- | ------------- |
+| theme  | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
+| language | 编辑器的语言 | string | - |
+| height  | 编辑器的高度 | string | `100%` |
+| width  | 编辑器的宽度 | string | `100%` |
+| modelValue(v-model)  | 编辑器的代码 | string | - |
+| readOnly  | 是否只读 | boolean | `false` |
+| options  | 编辑器的配置对象 | object | `{}` |
+| check  | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
+
+#### events
+
+| 事件名称 | 说明 | 回调参数 |
+| ------------- | ------------- | ------------- |
+| onload  | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
+| scrollChange  | 滚动时触发 | (e) => void |

packages/fes-template/.fes.js

@@ -87,6 +87,6 @@ export default {
         ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
     ],
     monacoEditor: {
-        // languages: ['javascript', 'typescript', 'html', 'json']
+        languages: ['javascript', 'typescript', 'html', 'json']
     }
 };