refactor: 文档更新

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);
 });

docs/src/guide/advanced/magic-form.md

@@ -1,4 +1,5 @@
 # Magic-Form
+
 魔方的表单配置，核心就是使用了 magic-form 来作为渲染器。magic-form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。
 
 Magic-Form 接受一个表单配置，详细配置可参考[表单 api](/docs/api/form.md)。
@@ -7,7 +8,7 @@ Magic-Form 接受一个表单配置，详细配置可参考[表单api](/docs/api
 
 ```bash
 # 最新稳定版
-$ npm install @tmagic/form@next
+$ npm install @tmagic/form@latest
 ```
 
 ```bash
@@ -25,16 +26,16 @@ MagicForm使用了element-ui库
 在 main.js 中写入以下内容：
 
 ```javascript
-import { createApp } from 'vue';
+import { createApp } from "vue";
-import ElementPlus from 'element-plus';
+import ElementPlus from "element-plus";
-import MagicForm from '@tmagic/form';
+import MagicForm from "@tmagic/form";
-import 'element-plus/lib/theme-chalk/index.css';
+import "element-plus/lib/theme-chalk/index.css";
-import App from './App.vue';
+import App from "./App.vue";
 
 const app = createApp(App);
 app.use(ElementUI);
 app.use(MagicForm);
-app.mount('#app');
+app.mount("#app");
 ```
 
 在 App.Vue 中写入以下内容：
@@ -46,48 +47,58 @@ app.mount('#app');
   export default {
     data() {
       return {
-      config: [{
+        config: [
-        text: '文本',
+          {
-        name: 'text'
+            text: "文本",
-      }, {
+            name: "text",
-        type: 'number',
+          },
-        text: '计数器',
+          {
-        name: 'number'
+            type: "number",
-      }, {
+            text: "计数器",
-        type: 'row',
+            name: "number",
-        items: [{
+          },
-          type: 'date',
+          {
-          text: '日期',
+            type: "row",
-          name: 'date'
+            items: [
-        }, {
+              {
-          type: 'checkbox',
+                type: "date",
-          text: '多选框',
+                text: "日期",
-          name: 'checkbox'
+                name: "date",
-        }]
+              },
-      }, {
+              {
-        type: 'fieldset',
+                type: "checkbox",
-        name: 'fieldset',
+                text: "多选框",
-        legend: '分组',
+                name: "checkbox",
-        items: [{
+              },
-          type: 'select',
+            ],
-          text: '下拉选项',
+          },
-          name: 'select',
+          {
+            type: "fieldset",
+            name: "fieldset",
+            legend: "分组",
+            items: [
+              {
+                type: "select",
+                text: "下拉选项",
+                name: "select",
                 options: [
-            { text: '选项1', value: 1 },
+                  { text: "选项1", value: 1 },
-            { text: '选项2', value: 2 }
+                  { text: "选项2", value: 2 },
-          ]
+                ],
-        }]
+              },
-      }],
+            ],
+          },
+        ],
         initValue: {
-        text: '文本',
+          text: "文本",
           number: 10,
           fieldset: {
-          select: 1
+            select: 1,
-        }
+          },
-      }
+        },
-    }
+      };
-  }
+    },
-}
+  };
 </script>
 ```
 
@@ -97,7 +108,6 @@ export default {
 
 至此，一个基于 Vue 和 MagicForm 的开发环境已经搭建完毕，现在就可以编写代码了。
 
-
 ### 示例
 
 <demo-block type="form" :config="[{

docs/src/guide/installation.md

@@ -1,4 +1,5 @@
 # 快速开始
+
 魔方的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的，但使用编辑器的业务可以不限框架，可以用 vue2、react 等开发业务组件。
 
 ## 安装
@@ -11,13 +12,13 @@ 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 依赖。
 
 ```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)。
@@ -27,19 +28,20 @@ editor中还包含了[monaco-editor](https://github.com/microsoft/monaco-editor)
 ### 引入 @tmagic/editor
 
 在 main.js 中写入以下内容：
+
 ```js
-import { createApp } from 'vue';
+import { createApp } from "vue";
-import ElementPlus from 'element-plus';
+import ElementPlus from "element-plus";
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 
-import MagicEditor from '@tmagic/editor';
+import MagicEditor from "@tmagic/editor";
-import MagicForm from '@tmagic/form';
+import MagicForm from "@tmagic/form";
 
-import App from './App.vue';
+import App from "./App.vue";
 
-import 'element-plus/dist/index.css';
+import "element-plus/dist/index.css";
-import '@tmagic/editor/dist/style.css';
+import "@tmagic/editor/dist/style.css";
-import '@tmagic/form/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,10 +72,10 @@ app.mount('#app');
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref } from "vue";
 
   export default defineComponent({
-  name: 'App',
+    name: "App",
 
     setup() {
       return {
@@ -92,7 +95,7 @@ export default defineComponent({
           // 初始化页面数据
         }),
 
-      runtimeUrl: '/runtime/vue3/playground.html',
+        runtimeUrl: "/runtime/vue3/playground.html",
         propsConfigs: [],
         propsValues: [],
 
@@ -123,6 +126,7 @@ export default defineComponent({
 其中，**有四个需要注意的属性配置项**：`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,7 +159,9 @@ setup() {
 :::
 
 ### 更多
+
 通过上述步骤，可以快速得到一个初始化的简单编辑器。在编辑器中，对于使用者来说，需要了解的核心内容：
+
 - [魔方编辑器的基础概念](/docs/guide/conception)
 - [编辑器的产物 uiconfig]()
 - [runtime 的概念](/docs/page/introduction.html)

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