diff --git a/docs/src/admin/introduction.md b/docs/src/admin/introduction.md
index a51470a0..802fda35 100644
--- a/docs/src/admin/introduction.md
+++ b/docs/src/admin/introduction.md
@@ -132,13 +132,13 @@ server 文件夹下面这些敏感文件，需要开发者参考示例进行替
 │   │   ├── keyExample.ts（加密秘钥配置）
 ```
 
-- 关于登陆态：
-  magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登陆态
+- 关于登录态：
+  magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登录态
 
 ```js
 // web/src/App.vue
 watchEffect(async () => {
-  // 登陆态获取交由开发者实现
+  // 登录态获取交由开发者实现
   const userName = process.env.VUE_APP_USER_NAME || "defaultName";
   Cookies.set("userName", userName);
 });
diff --git a/docs/src/guide/advanced/magic-form.md b/docs/src/guide/advanced/magic-form.md
index 01b8ef00..9b0a02d2 100644
--- a/docs/src/guide/advanced/magic-form.md
+++ b/docs/src/guide/advanced/magic-form.md
@@ -1,13 +1,14 @@
 # Magic-Form
+
 魔方的表单配置，核心就是使用了 magic-form 来作为渲染器。magic-form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。
 
-Magic-Form 接受一个表单配置，详细配置可参考[表单api](/docs/api/form.md)。
+Magic-Form 接受一个表单配置，详细配置可参考[表单 api](/docs/api/form.md)。
 
 ## 安装
 
 ```bash
 # 最新稳定版
-$ npm install @tmagic/form@next
+$ npm install @tmagic/form@latest
 ```
 
 ```bash
@@ -20,21 +21,21 @@ $ npm install element-plus
 
 ### 引入 Magic-Form
 
-MagicForm使用了element-ui库
+MagicForm 使用了 element-ui 库
 
 在 main.js 中写入以下内容：
 
 ```javascript
-import { createApp } from 'vue';
-import ElementPlus from 'element-plus';
-import MagicForm from '@tmagic/form';
-import 'element-plus/lib/theme-chalk/index.css';
-import App from './App.vue';
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import MagicForm from "@tmagic/form";
+import "element-plus/lib/theme-chalk/index.css";
+import App from "./App.vue";
 
 const app = createApp(App);
 app.use(ElementUI);
 app.use(MagicForm);
-app.mount('#app');
+app.mount("#app");
 ```
 
 在 App.Vue 中写入以下内容：
@@ -43,61 +44,70 @@ app.mount('#app');
 <m-form :config="config" :init-values="initValue"></m-form>
 
 <script>
-export default {
-  data() {
-    return {
-      config: [{
-        text: '文本',
-        name: 'text'
-      }, {
-        type: 'number',
-        text: '计数器',
-        name: 'number'
-      }, {
-        type: 'row',
-        items: [{
-          type: 'date',
-          text: '日期',
-          name: 'date'
-        }, {
-          type: 'checkbox',
-          text: '多选框',
-          name: 'checkbox'
-        }]
-      }, {
-        type: 'fieldset',
-        name: 'fieldset',
-        legend: '分组',
-        items: [{
-          type: 'select',
-          text: '下拉选项',
-          name: 'select',
-          options: [
-            { text: '选项1', value: 1 },
-            { text: '选项2', value: 2 }
-          ]
-        }]
-      }],
-      initValue: {
-        text: '文本',
-        number: 10,
-        fieldset: {
-          select: 1
-        }
-      }
-    }
-  }
-}
+  export default {
+    data() {
+      return {
+        config: [
+          {
+            text: "文本",
+            name: "text",
+          },
+          {
+            type: "number",
+            text: "计数器",
+            name: "number",
+          },
+          {
+            type: "row",
+            items: [
+              {
+                type: "date",
+                text: "日期",
+                name: "date",
+              },
+              {
+                type: "checkbox",
+                text: "多选框",
+                name: "checkbox",
+              },
+            ],
+          },
+          {
+            type: "fieldset",
+            name: "fieldset",
+            legend: "分组",
+            items: [
+              {
+                type: "select",
+                text: "下拉选项",
+                name: "select",
+                options: [
+                  { text: "选项1", value: 1 },
+                  { text: "选项2", value: 2 },
+                ],
+              },
+            ],
+          },
+        ],
+        initValue: {
+          text: "文本",
+          number: 10,
+          fieldset: {
+            select: 1,
+          },
+        },
+      };
+    },
+  };
 </script>
 ```
 
-以上代码便完成了 MagicForm 的引入。需要注意的是，ElementUI的样式文件需要单独引入。
+以上代码便完成了 MagicForm 的引入。需要注意的是，ElementUI 的样式文件需要单独引入。
 
 ### 开始使用
 
 至此，一个基于 Vue 和 MagicForm 的开发环境已经搭建完毕，现在就可以编写代码了。
 
-
 ### 示例
 
 <demo-block type="form" :config="[{
diff --git a/docs/src/guide/installation.md b/docs/src/guide/installation.md
index 2e5ab94b..bdfdf24e 100644
--- a/docs/src/guide/installation.md
+++ b/docs/src/guide/installation.md
@@ -1,5 +1,6 @@
 # 快速开始
-魔方的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的，但使用编辑器的业务可以不限框架，可以用vue2、react等开发业务组件。
+
+魔方的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的，但使用编辑器的业务可以不限框架，可以用 vue2、react 等开发业务组件。
 
 ## 安装
 
@@ -11,35 +12,36 @@ node.js > 14
 
 ```bash
 # 最新稳定版
-$ npm install @tmagic/editor@next -S
+$ npm install @tmagic/editor@latest -S
 ```
 
-editor中组件自定义属性配置由[magic-form](../form/introduction.md)提供，需要添加@tmagic/form依赖；editor 与 form 中使用到的UI组件都由 [element-plus](https://element-plus.org/)提供，需要添加element-plus依赖。
+editor 中组件自定义属性配置由[magic-form](../form/introduction.md)提供，需要添加@tmagic/form 依赖；editor 与 form 中使用到的 UI 组件都由 [element-plus](https://element-plus.org/)提供，需要添加 element-plus 依赖。
 
 ```bash
-$ npm install @tmagic/form@next element-plus -S
+$ npm install @tmagic/form@latest element-plus -S
 ```
 
-editor中还包含了[monaco-editor](https://github.com/microsoft/monaco-editor)，可以参考monaco-editor的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
+editor 中还包含了[monaco-editor](https://github.com/microsoft/monaco-editor)，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
 
 ## 快速上手
 
 ### 引入 @tmagic/editor
 
 在 main.js 中写入以下内容：
+
 ```js
-import { createApp } from 'vue';
-import ElementPlus from 'element-plus';
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 
-import MagicEditor from '@tmagic/editor';
-import MagicForm from '@tmagic/form';
+import MagicEditor from "@tmagic/editor";
+import MagicForm from "@tmagic/form";
 
-import App from './App.vue';
+import App from "./App.vue";
 
-import 'element-plus/dist/index.css';
-import '@tmagic/editor/dist/style.css';
-import '@tmagic/form/dist/style.css';
+import "element-plus/dist/index.css";
+import "@tmagic/editor/dist/style.css";
+import "@tmagic/form/dist/style.css";
 
 const app = createApp(App);
 app.use(ElementPlus, {
@@ -47,14 +49,15 @@ app.use(ElementPlus, {
 });
 app.use(MagicEditor);
 app.use(MagicForm);
-app.mount('#app');
-
+app.mount("#app");
 ```
+
 以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。
 
 ### 使用 m-editor 组件
 
 在 App.vue 中写入以下内容：
+
 ```html
 <template>
   <m-editor
@@ -69,60 +72,61 @@ app.mount('#app');
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref } from "vue";
 
-export default defineComponent({
-  name: 'App',
+  export default defineComponent({
+    name: "App",
 
-  setup() {
-    return {
-      menu: ref({
-        left: [
-          // 顶部左侧菜单按钮
-        ],
-        center: [
-          // 顶部中间菜单按钮
-        ],
-        right: [
-          // 顶部右侧菜单按钮
-        ],
-      }),
+    setup() {
+      return {
+        menu: ref({
+          left: [
+            // 顶部左侧菜单按钮
+          ],
+          center: [
+            // 顶部中间菜单按钮
+          ],
+          right: [
+            // 顶部右侧菜单按钮
+          ],
+        }),
 
-      data: ref({
-        // 初始化页面数据
-      }),
+        data: ref({
+          // 初始化页面数据
+        }),
 
-      runtimeUrl: '/runtime/vue3/playground.html',
-      propsConfigs: [],
-      propsValues: [],
+        runtimeUrl: "/runtime/vue3/playground.html",
+        propsConfigs: [],
+        propsValues: [],
 
-      componentGroupList: ref([
-        // 组件列表
-      ]),
-    };
-  },
-});
+        componentGroupList: ref([
+          // 组件列表
+        ]),
+      };
+    },
+  });
 </script>
 
 <style lang="scss">
-#app {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
+  #app {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
 
-.m-editor {
-  flex: 1;
-  height: 100%;
-}
+  .m-editor {
+    flex: 1;
+    height: 100%;
+  }
 </style>
 ```
 
-关于 Magic-Editor 组件，更多的属性配置详情请参考[编辑器API](/docs/api/editor.md)。
+关于 Magic-Editor 组件，更多的属性配置详情请参考[编辑器 API](/docs/api/editor.md)。
 
 其中，**有四个需要注意的属性配置项**：`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
 
 ### runtimeUrl
+
 该配置涉及到 [runtime 概念](/docs/guide/conception.html#runtime)，魔方编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
 
 ::: tip 如何快速得到一个 runtime
@@ -130,12 +134,15 @@ export default defineComponent({
 :::
 
 ### componentGroupList
+
 `componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](/docs/api/editor.html#componentgrouplist)。
 
 ### propsConfigs/propsValues
+
 `propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](/docs/component/introduction.html#组件开发)会通过 formConfig 配置来声明这份内容。
 
 `configs` 既可以通过 hardcode 方式写上每个组件的表单配置，也可以通过组件打包方式得到对应内容，然后通过异步加载来载入。比如：
+
 ```javascript
 setup() {
   asyncLoadJs(`/runtime/vue3/assets/config.js`).then(() => {
@@ -152,10 +159,12 @@ setup() {
 :::
 
 ### 更多
+
 通过上述步骤，可以快速得到一个初始化的简单编辑器。在编辑器中，对于使用者来说，需要了解的核心内容：
+
 - [魔方编辑器的基础概念](/docs/guide/conception)
 - [编辑器的产物 uiconfig]()
 - [runtime 的概念](/docs/page/introduction.html)
 - [如何实现一个 runtime](/docs/page/advanced.html)
 
-除了上述内容外，文档的其他章节中，也会更深入的描述整个魔方的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解魔方。
\ No newline at end of file
+除了上述内容外，文档的其他章节中，也会更深入的描述整个魔方的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解魔方。
diff --git a/magic-admin/README.md b/magic-admin/README.md
index a51470a0..74d9d011 100644
--- a/magic-admin/README.md
+++ b/magic-admin/README.md
@@ -132,13 +132,13 @@ server 文件夹下面这些敏感文件，需要开发者参考示例进行替
 │   │   ├── keyExample.ts（加密秘钥配置）
 ```
 
-- 关于登陆态：
-  magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登陆态
+- 关于登录态：
+  magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登录态
 
 ```js
 // web/src/App.vue
 watchEffect(async () => {
-  // 登陆态获取交由开发者实现
+  // 登录态获取交由开发者实现
   const userName = process.env.VUE_APP_USER_NAME || "defaultName";
   Cookies.set("userName", userName);
 });
@@ -158,7 +158,7 @@ watchEffect(async () => {
 
 - **在管理端引入 runtime**
 
-在管理端中我们提供了一个可视化的模拟画布，他需要依赖 runtime 核心库，因此我们需要先在 magic 根目录下运行
+在管理端中我们提供了一个可视化的模拟器，他需要依赖 runtime 核心库，因此我们需要先在 magic 根目录下运行
 
 ```js
 cd magic