From 311f400b756571f7a2fd544dcbcdec703425bbc5 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 13 Jun 2022 19:28:12 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(playground):=20=E6=B7=BB=E5=8A=A0form?=
 =?UTF-8?q?=E3=80=81table=20playground=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |   2 +-
 playground/src/configs/componentGroupList.ts |  83 +++++++++++++
 playground/src/{config.ts => configs/dsl.ts} |   0
 playground/src/pages/Editor.vue              | 123 ++++---------------
 4 files changed, 111 insertions(+), 97 deletions(-)
 create mode 100644 playground/src/configs/componentGroupList.ts
 rename playground/src/{config.ts => configs/dsl.ts} (100%)

diff --git a/README.md b/README.md
index 48ceee161..519db98a8 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ $ pnpm playground
 
 最后在浏览器中打开
 
-http://localhost:8098/
+http://localhost:8098/tmagic-editor/playground/
 
 即可得到一个魔方编辑器示例项目
 
diff --git a/playground/src/configs/componentGroupList.ts b/playground/src/configs/componentGroupList.ts
new file mode 100644
index 000000000..ad579756f
--- /dev/null
+++ b/playground/src/configs/componentGroupList.ts
@@ -0,0 +1,83 @@
+import { FolderOpened, Grid, PictureFilled, SwitchButton, Tickets } from '@element-plus/icons';
+
+export default [
+  {
+    title: '示例容器',
+    items: [
+      {
+        icon: FolderOpened,
+        text: '组',
+        type: 'container',
+      },
+      {
+        icon: FolderOpened,
+        text: '蒙层',
+        type: 'overlay',
+      },
+    ],
+  },
+  {
+    title: '示例组件',
+    items: [
+      {
+        icon: Tickets,
+        text: '文本',
+        type: 'text',
+      },
+      {
+        icon: SwitchButton,
+        text: '按钮',
+        type: 'button',
+      },
+      {
+        icon: PictureFilled,
+        text: '图片',
+        type: 'img',
+      },
+      {
+        icon: Grid,
+        text: '二维码',
+        type: 'qrcode',
+      },
+    ],
+  },
+  {
+    title: '组合',
+    items: [
+      {
+        icon: Tickets,
+        text: '弹窗',
+        data: {
+          type: 'overlay',
+          style: {
+            position: 'fixed',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          },
+          name: '弹窗',
+          items: [
+            {
+              type: 'container',
+              style: {
+                position: 'absolute',
+                width: '80%',
+                height: '400',
+                top: '143.87',
+                left: 37.5,
+                backgroundColor: 'rgba(255, 255, 255, 1)',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: '100% 100%',
+              },
+              name: '组',
+              items: [],
+              layout: 'absolute',
+            },
+          ],
+        },
+      },
+    ],
+  },
+];
diff --git a/playground/src/config.ts b/playground/src/configs/dsl.ts
similarity index 100%
rename from playground/src/config.ts
rename to playground/src/configs/dsl.ts
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 8a72c58bb..794189737 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -27,16 +27,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, toRaw } from 'vue';
-import {
-  Coin,
-  Connection,
-  Document,
-  FolderOpened,
-  Grid,
-  PictureFilled,
-  SwitchButton,
-  Tickets,
-} from '@element-plus/icons';
+import { useRouter } from 'vue-router';
+import { Coin, Connection, Document } from '@element-plus/icons';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import serialize from 'serialize-javascript';
 
@@ -45,7 +37,8 @@ import { Id, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { asyncLoadJs } from '@tmagic/utils';
 
-import config from '../config';
+import componentGroupList from '../configs/componentGroupList';
+import dsl from '../configs/dsl';
 
 const { VITE_RUNTIME_PATH } = import.meta.env;
 
@@ -53,10 +46,11 @@ export default defineComponent({
   name: 'EditorApp',
 
   setup() {
+    const router = useRouter();
     const editor = ref<InstanceType<typeof TMagicEditor>>();
     const previewVisible = ref(false);
-    const value = ref(config);
-    const defaultSelected = ref(config.items[0].id);
+    const value = ref(dsl);
+    const defaultSelected = ref(dsl.items[0].id);
     const propsValues = ref<Record<string, any>>({});
     const propsConfigs = ref<Record<string, any>>({});
     const eventMethodList = ref<Record<string, any>>({});
@@ -81,12 +75,23 @@ export default defineComponent({
       ],
       center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
       right: [
+        {
+          type: 'button',
+          text: 'Form Playground',
+          handler: () => router.push('form'),
+        },
+        {
+          type: 'button',
+          text: 'Table Playground',
+          handler: () => router.push('table'),
+        },
+        '/',
         {
           type: 'button',
           text: '预览',
           icon: Connection,
-          handler: async () => {
-            if (editor.value?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
+          handler: async (services) => {
+            if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
               try {
                 await ElMessageBox.confirm('有修改未保存，是否先保存再预览', '提示', {
                   confirmButtonText: '保存并预览',
@@ -148,87 +153,7 @@ export default defineComponent({
 
       runtimeUrl: `${VITE_RUNTIME_PATH}/playground.html`,
 
-      componentGroupList: ref([
-        {
-          title: '示例容器',
-          items: [
-            {
-              icon: FolderOpened,
-              text: '组',
-              type: 'container',
-            },
-            {
-              icon: FolderOpened,
-              text: '蒙层',
-              type: 'overlay',
-            },
-          ],
-        },
-        {
-          title: '示例组件',
-          items: [
-            {
-              icon: Tickets,
-              text: '文本',
-              type: 'text',
-            },
-            {
-              icon: SwitchButton,
-              text: '按钮',
-              type: 'button',
-            },
-            {
-              icon: PictureFilled,
-              text: '图片',
-              type: 'img',
-            },
-            {
-              icon: Grid,
-              text: '二维码',
-              type: 'qrcode',
-            },
-          ],
-        },
-        {
-          title: '组合',
-          items: [
-            {
-              icon: Tickets,
-              text: '弹窗',
-              data: {
-                type: 'overlay',
-                style: {
-                  position: 'fixed',
-                  width: '100%',
-                  height: '100%',
-                  top: 0,
-                  left: 0,
-                  backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                },
-                name: '弹窗',
-                items: [
-                  {
-                    type: 'container',
-                    style: {
-                      position: 'absolute',
-                      width: '80%',
-                      height: '400',
-                      top: '143.87',
-                      left: 37.5,
-                      backgroundColor: 'rgba(255, 255, 255, 1)',
-                      backgroundRepeat: 'no-repeat',
-                      backgroundSize: '100% 100%',
-                    },
-                    name: '组',
-                    items: [],
-                    layout: 'absolute',
-                  },
-                ],
-              },
-            },
-          ],
-        },
-      ]),
+      componentGroupList,
 
       moveableOptions: (core?: StageCore): MoveableOptions => {
         const options: MoveableOptions = {};
@@ -283,5 +208,11 @@ html {
       padding: 0;
     }
   }
+
+  .menu-left {
+    .menu-item-text {
+      margin-left: 10px;
+    }
+  }
 }
 </style>

From 735949fafe5b1a53770222e24c835da3314ed814 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 13 Jun 2022 19:47:40 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(playground):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E8=AE=BE=E5=A4=87=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/src/components/DeviceGroup.vue | 135 ++++++++++++++++++++++
 playground/src/pages/Editor.vue           |  11 +-
 2 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 playground/src/components/DeviceGroup.vue

diff --git a/playground/src/components/DeviceGroup.vue b/playground/src/components/DeviceGroup.vue
new file mode 100644
index 000000000..6c363ad89
--- /dev/null
+++ b/playground/src/components/DeviceGroup.vue
@@ -0,0 +1,135 @@
+<template>
+  <el-radio-group size="small" v-model="viewerDevice" :class="viewerDevice" @change="deviceSelect">
+    <el-radio-button label="phone">Phone</el-radio-button>
+    <el-radio-button label="pad">Pad</el-radio-button>
+    <el-radio-button label="pc">PC</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+import { editorService } from '@tmagic/editor';
+import type StageCore from '@tmagic/stage';
+
+enum DeviceType {
+  Phone = 'phone',
+  Pad = 'pad',
+  PC = 'pc',
+}
+
+const devH: Record<DeviceType, number> = {
+  phone: 817,
+  pad: 1024,
+  pc: 900,
+};
+
+const devW: Record<DeviceType, number> = {
+  phone: 375,
+  pad: 768,
+  pc: 1600,
+};
+
+const getDeviceHeight = (viewerDevice: DeviceType) => devH[viewerDevice];
+
+const getDeviceWidth = (viewerDevice: DeviceType) => devW[viewerDevice];
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({
+        width: '375',
+      }),
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    const calcFontsize = (width: number) => {
+      const fontSize = width / 3.75;
+      const { iframe } = editorService.get<StageCore>('stage').renderer;
+      if (!iframe?.contentWindow) return;
+      iframe.contentWindow.document.documentElement.style.fontSize = `${fontSize}px`;
+    };
+
+    const viewerDevice = ref(DeviceType.Phone);
+
+    return {
+      viewerDevice,
+
+      deviceSelect(device: DeviceType) {
+        const width = getDeviceWidth(device);
+        const height = getDeviceHeight(device);
+        emit('update:modelValue', {
+          width,
+          height,
+        });
+
+        calcFontsize(width);
+      },
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@media screen and (max-width: 1440px) {
+  .m-editor-workspace {
+    .el-radio-group {
+      transform: rotate(90deg) translateY(-255px);
+      transform-origin: left top;
+
+      &.tv {
+        transform: none;
+      }
+    }
+  }
+}
+
+.m-editor-workspace {
+  * {
+    user-select: none;
+  }
+
+  .el-slider {
+    position: absolute;
+    bottom: 40px;
+    left: 20px;
+    width: 250px;
+    opacity: 0.5;
+    transition: opacity 1s;
+  }
+
+  .el-slider:hover {
+    opacity: 1;
+  }
+
+  .el-radio-group {
+    position: absolute;
+    top: 10px;
+    right: 40px;
+    z-index: 10;
+  }
+
+  .viewer-scrollbar > .el-scrollbar__bar {
+    display: none;
+  }
+
+  .select-component {
+    text-align: center;
+    transform: translate3d(0, -70px, 0);
+
+    p {
+      margin-top: 8px;
+    }
+  }
+
+  .close-pop-button {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+  }
+}
+</style>
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 794189737..f6a6d283c 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -12,7 +12,12 @@
       :default-selected="defaultSelected"
       :moveable-options="moveableOptions"
       :auto-scroll-into-view="true"
-    ></m-editor>
+      :stage-rect="stageRect"
+    >
+      <template #workspace-content>
+        <device-group v-model="stageRect"></device-group>
+      </template>
+    </m-editor>
 
     <el-dialog v-model="previewVisible" destroy-on-close :width="375" custom-class="pre-viewer" title="预览">
       <iframe
@@ -37,6 +42,7 @@ import { Id, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { asyncLoadJs } from '@tmagic/utils';
 
+import DeviceGroup from '../components/DeviceGroup.vue';
 import componentGroupList from '../configs/componentGroupList';
 import dsl from '../configs/dsl';
 
@@ -45,6 +51,8 @@ const { VITE_RUNTIME_PATH } = import.meta.env;
 export default defineComponent({
   name: 'EditorApp',
 
+  components: { DeviceGroup },
+
   setup() {
     const router = useRouter();
     const editor = ref<InstanceType<typeof TMagicEditor>>();
@@ -148,6 +156,7 @@ export default defineComponent({
       propsValues,
       propsConfigs,
       eventMethodList,
+      stageRect: ref(),
 
       previewVisible,
 

From 0ae4ccbbf796ef78ad3e3f914d831ccf7b9e55f9 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 13 Jun 2022 21:01:35 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(playground):=20=E4=BC=98=E5=8C=96form/?=
 =?UTF-8?q?table=20playground?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/src/components/NavMenu.vue |  38 ++
 playground/src/pages/Form.vue         | 688 +++++++++++++-------------
 playground/src/pages/Table.vue        |  72 ++-
 3 files changed, 465 insertions(+), 333 deletions(-)
 create mode 100644 playground/src/components/NavMenu.vue

diff --git a/playground/src/components/NavMenu.vue b/playground/src/components/NavMenu.vue
new file mode 100644
index 000000000..93d74ce21
--- /dev/null
+++ b/playground/src/components/NavMenu.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="m-editor-nav-menu">
+    <el-button
+      v-for="(item, index) in data"
+      class="menu-item button"
+      :key="index"
+      size="small"
+      text
+      @click="item.handler"
+    >
+      <el-icon><component :is="item.icon"></component></el-icon><span>{{ item.text }}</span>
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { MenuButton } from '@tmagic/editor';
+
+export default defineComponent({
+  name: 'nav-menu',
+
+  props: {
+    data: {
+      type: Array as PropType<MenuButton[]>,
+      default: () => [],
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+.m-editor-nav-menu {
+  justify-content: flex-end;
+  height: 35px;
+}
+</style>
diff --git a/playground/src/pages/Form.vue b/playground/src/pages/Form.vue
index b149f5ef7..ae6210fc1 100644
--- a/playground/src/pages/Form.vue
+++ b/playground/src/pages/Form.vue
@@ -1,352 +1,376 @@
 <template>
-  <div style="padding: 20px">
-    <m-form ref="form" :config="config" :init-values="initValue" size="small"></m-form>
-    <el-button @click="submit">提交</el-button>
-    <el-dialog v-model="resultVisible" title="result">
-      <pre><code class="language-javascript hljs" v-html="result"></code></pre>
-    </el-dialog>
+  <div style="width: 100%">
+    <nav-menu :data="menu"></nav-menu>
+    <div class="form-content">
+      <m-form ref="form" :config="config" :init-values="initValue" size="small" height="100%"></m-form>
+
+      <magic-code-editor class="code-editor-content" :init-values="config" @save="change"></magic-code-editor>
+    </div>
   </div>
+
+  <el-dialog v-model="resultVisible" title="result" append-to-body>
+    <pre><code class="language-javascript hljs" v-html="result"></code></pre>
+  </el-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { markRaw, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { Coin } from '@element-plus/icons';
 import { ElMessage } from 'element-plus';
 
+import { MenuButton } from '@tmagic/editor';
 import { MForm } from '@tmagic/form';
 
-export default defineComponent({
-  name: 'App',
-  data() {
-    return {
-      resultVisible: false,
-      result: '',
+import NavMenu from '../components/NavMenu.vue';
 
-      config: [
-        {
-          text: '文本',
-          name: 'text',
-          tooltip: (vm: any, { model }: any) => model.text,
-          extra: (vm: any, { model }: any) => `${model.text}extra`,
-          rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-        },
-        {
-          type: 'checkbox',
-          text: 'checkbox',
-          name: 'option',
-          activeValue: 1,
-          inactiveValue: 0,
-          defaultValue: 1,
-        },
-        {
-          type: 'link',
-          displayText: '链接',
-          text: 'link',
-          name: 'link',
-          href: '',
-          tooltip: 'element-ui',
-        },
-        {
-          type: 'display',
-          text: '展示',
-          name: 'display',
-          initValue: 'display',
-          tooltip: 'hello',
-        },
-        {
-          type: 'number',
-          text: '计数器',
-          name: 'number',
-        },
-        {
-          type: 'textarea',
-          text: '输入框',
-          name: 'textarea1',
-        },
-        {
-          type: 'datetime',
-          text: '日期',
-          name: 'datetime',
-        },
-        {
-          type: 'switch',
-          text: '开关',
-          name: 'switch',
-          filter: 'number',
-          defaultValue: 1,
-        },
-        {
-          type: 'daterange',
-          text: '日期范围',
-          name: 'daterange',
-          // names: ['one', 'two'],
-        },
-        {
-          type: 'time',
-          text: '日期选择',
-          name: 'time',
-        },
-        {
-          type: 'colorPicker',
-          text: '取色器',
-          name: 'colorPicker',
-        },
-        {
-          type: 'checkbox-group',
-          text: '选项组',
-          name: 'checkGroup',
-          options: [
-            {
-              value: 1,
-              text: 'one',
-            },
-            {
-              value: 2,
-              text: 'two',
-            },
-          ],
-        },
-        {
-          type: 'radio-group',
-          text: '单选框',
-          name: 'radioGroup',
-          options: [
-            {
-              value: 1,
-              text: 'one',
-            },
-            {
-              value: 2,
-              text: 'two',
-            },
-          ],
-        },
-        {
-          type: 'cascader',
-          text: '级联选择',
-          placeholder: 'test',
-          name: 'cascader',
-          options: [
-            {
-              value: 1,
-              label: 'one',
-              children: [
-                {
-                  value: 3,
-                  label: 'three',
-                  children: [
-                    {
-                      value: 8,
-                      label: 'eight',
-                    },
-                  ],
-                },
-                {
-                  value: 4,
-                  label: 'four',
-                },
-                {
-                  value: 6,
-                  label: 'six',
-                },
-              ],
-            },
-            {
-              value: 2,
-              label: 'two',
-              children: [
-                {
-                  value: 5,
-                  label: 'five',
-                },
-                {
-                  value: 7,
-                  label: 'seven',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: 'dynamic-field',
-          name: 'dynamic-field',
-          dynamicKey: 'textarea',
-          text: '动态表单',
-          returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
-        },
-        {
-          type: 'row',
-          items: [
-            {
-              type: 'date',
-              text: '日期',
-              name: 'date',
-            },
-            {
-              type: 'checkbox',
-              text: '多选框',
-              name: 'checkbox',
-              tooltip: '分组xxxxxxxxxxxx',
-              extra: 'extra',
-            },
-          ],
-        },
-        {
-          type: 'fieldset',
-          name: 'fieldset',
-          text: '分组',
-          extra: 'extra',
-          checkbox: true,
-          expand: 'checkbox',
-          // schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
-          items: [
-            {
-              type: 'select',
-              text: '下拉选项',
-              name: 'select',
-              options: [
-                { text: '选项1', value: 1 },
-                { text: '选项2', value: 2 },
-              ],
-            },
-          ],
-        },
-        {
-          type: 'table',
-          name: 'table',
-          defautSort: { prop: 'name', order: 'descending' },
-          extra: 'extra',
-          itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
-          items: [
-            {
-              label: 'id',
-              name: 'id',
-              sortable: true,
-              tooltip: '分组xxxxxxxxxxxx',
-              rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-            },
-            {
-              label: '名称',
-              name: 'name',
-            },
-          ],
-        },
-        {
-          type: 'groupList',
-          name: 'groupList',
-          extra: '分组xxxxxxxxxxxx',
-          itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
-          items: [
-            {
-              text: 'id',
-              name: 'id',
-              rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
-            },
-            {
-              text: '名称',
-              name: 'name',
-            },
-          ],
-        },
+const router = useRouter();
 
-        {
-          type: 'panel',
-          title: 'panel',
-          extra: 'panel',
-          schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
-          items: [
-            {
-              text: '名称',
-              name: 'name',
-            },
-          ],
-        },
+const resultVisible = ref(false);
+const result = ref('');
+const form = ref<InstanceType<typeof MForm>>();
 
-        {
-          type: 'step',
-          items: [
-            {
-              name: 'step1',
-              title: 'step1',
-              items: [
-                {
-                  text: '名称',
-                  name: 'name',
-                },
-              ],
-            },
-            {
-              name: 'step2',
-              title: 'step2',
-              items: [
-                {
-                  text: '名称2',
-                  name: 'name',
-                },
-              ],
-            },
-          ],
-        },
-      ],
+const config = ref([
+  {
+    text: '文本',
+    name: 'text',
+    tooltip: (vm: any, { model }: any) => model.text,
+    extra: (vm: any, { model }: any) => `${model.text}extra`,
+    rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+  },
+  {
+    type: 'checkbox',
+    text: 'checkbox',
+    name: 'option',
+    activeValue: 1,
+    inactiveValue: 0,
+    defaultValue: 1,
+  },
+  {
+    type: 'link',
+    displayText: '链接',
+    text: 'link',
+    name: 'link',
+    href: '',
+    tooltip: 'element-ui',
+  },
+  {
+    type: 'display',
+    text: '展示',
+    name: 'display',
+    initValue: 'display',
+    tooltip: 'hello',
+  },
+  {
+    type: 'number',
+    text: '计数器',
+    name: 'number',
+  },
+  {
+    type: 'textarea',
+    text: '输入框',
+    name: 'textarea1',
+  },
+  {
+    type: 'datetime',
+    text: '日期',
+    name: 'datetime',
+  },
+  {
+    type: 'switch',
+    text: '开关',
+    name: 'switch',
+    filter: 'number',
+    defaultValue: 1,
+  },
+  {
+    type: 'daterange',
+    text: '日期范围',
+    name: 'daterange',
+    // names: ['one', 'two'],
+  },
+  {
+    type: 'time',
+    text: '日期选择',
+    name: 'time',
+  },
+  {
+    type: 'colorPicker',
+    text: '取色器',
+    name: 'colorPicker',
+  },
+  {
+    type: 'checkbox-group',
+    text: '选项组',
+    name: 'checkGroup',
+    options: [
+      {
+        value: 1,
+        text: 'one',
+      },
+      {
+        value: 2,
+        text: 'two',
+      },
+    ],
+  },
+  {
+    type: 'radio-group',
+    text: '单选框',
+    name: 'radioGroup',
+    options: [
+      {
+        value: 1,
+        text: 'one',
+      },
+      {
+        value: 2,
+        text: 'two',
+      },
+    ],
+  },
+  {
+    type: 'cascader',
+    text: '级联选择',
+    placeholder: 'test',
+    name: 'cascader',
+    options: [
+      {
+        value: 1,
+        label: 'one',
+        children: [
+          {
+            value: 3,
+            label: 'three',
+            children: [
+              {
+                value: 8,
+                label: 'eight',
+              },
+            ],
+          },
+          {
+            value: 4,
+            label: 'four',
+          },
+          {
+            value: 6,
+            label: 'six',
+          },
+        ],
+      },
+      {
+        value: 2,
+        label: 'two',
+        children: [
+          {
+            value: 5,
+            label: 'five',
+          },
+          {
+            value: 7,
+            label: 'seven',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'dynamic-field',
+    name: 'dynamic-field',
+    dynamicKey: 'textarea',
+    text: '动态表单',
+    returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
+  },
+  {
+    type: 'row',
+    items: [
+      {
+        type: 'date',
+        text: '日期',
+        name: 'date',
+      },
+      {
+        type: 'checkbox',
+        text: '多选框',
+        name: 'checkbox',
+        tooltip: '分组xxxxxxxxxxxx',
+        extra: 'extra',
+      },
+    ],
+  },
+  {
+    type: 'fieldset',
+    name: 'fieldset',
+    text: '分组',
+    extra: 'extra',
+    checkbox: true,
+    expand: 'checkbox',
+    // schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
+    items: [
+      {
+        type: 'select',
+        text: '下拉选项',
+        name: 'select',
+        options: [
+          { text: '选项1', value: 1 },
+          { text: '选项2', value: 2 },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'table',
+    name: 'table',
+    defautSort: { prop: 'name', order: 'descending' },
+    extra: 'extra',
+    itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
+    items: [
+      {
+        label: 'id',
+        name: 'id',
+        sortable: true,
+        tooltip: '分组xxxxxxxxxxxx',
+        rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+      },
+      {
+        label: '名称',
+        name: 'name',
+      },
+    ],
+  },
+  {
+    type: 'groupList',
+    name: 'groupList',
+    extra: '分组xxxxxxxxxxxx',
+    itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
+    items: [
+      {
+        text: 'id',
+        name: 'id',
+        rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+      },
+      {
+        text: '名称',
+        name: 'name',
+      },
+    ],
+  },
+
+  {
+    type: 'panel',
+    title: 'panel',
+    extra: 'panel',
+    schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
+    items: [
+      {
+        text: '名称',
+        name: 'name',
+      },
+    ],
+  },
 
-      initValue: {
-        text: '文本',
-        number: 10,
-        fieldset: {
-          select: 1,
-        },
-        table: [
-          { id: 1, name: 'a' },
-          { id: 2, name: 'b' },
+  {
+    type: 'step',
+    items: [
+      {
+        name: 'step1',
+        title: 'step1',
+        items: [
+          {
+            text: '名称',
+            name: 'name',
+          },
         ],
       },
+      {
+        name: 'step2',
+        title: 'step2',
+        items: [
+          {
+            text: '名称2',
+            name: 'name',
+          },
+        ],
+      },
+    ],
+  },
+]);
 
-      tableConfig: [
-        {
-          label: 'id',
-          prop: 'id',
-        },
-        {
-          label: 'name',
-          prop: 'name',
-        },
-      ],
-      tableData: [
-        { id: 1, name: 'xx' },
-        { id: 2, name: 'xx2' },
-      ],
-    };
+const initValue = ref({
+  text: '文本',
+  number: 10,
+  fieldset: {
+    select: 1,
   },
-  methods: {
-    async submit() {
-      try {
-        const values = await (this.$refs.form as InstanceType<typeof MForm>).submitForm();
-        this.resultVisible = true;
-        this.result = JSON.stringify(values, null, 2);
-      } catch (e: any) {
-        console.error(e);
-        ElMessage.error({
-          duration: 10000,
-          showClose: true,
-          message: e.message,
-          dangerouslyUseHTMLString: true,
-        });
-      }
-    },
+  table: [
+    { id: 1, name: 'a' },
+    { id: 2, name: 'b' },
+  ],
+});
 
-    spanMethod({ rowIndex, columnIndex }: any) {
-      if (columnIndex === 0) {
-        if (rowIndex % 2 === 0) {
-          return {
-            rowspan: 2,
-            colspan: 1,
-          };
-        }
-        return {
-          rowspan: 0,
-          colspan: 0,
-        };
-      }
+const menu: MenuButton[] = [
+  {
+    type: 'button',
+    text: 'Editor Playground',
+    handler: () => router.push('/'),
+  },
+  {
+    type: 'button',
+    text: 'Table Playground',
+    handler: () => router.push('table'),
+  },
+  {
+    type: 'button',
+    text: '提交',
+    icon: markRaw(Coin),
+    handler: () => {
+      submit();
     },
   },
-});
+];
+
+async function submit() {
+  try {
+    const values = await form.value?.submitForm();
+    resultVisible.value = true;
+    result.value = JSON.stringify(values, null, 2);
+  } catch (e: any) {
+    console.error(e);
+    ElMessage.error({
+      duration: 10000,
+      showClose: true,
+      message: e.message,
+      dangerouslyUseHTMLString: true,
+    });
+  }
+}
+
+function change(value: string) {
+  try {
+    // eslint-disable-next-line no-eval
+    config.value = eval(value);
+    ElMessage.success('更新成功');
+  } catch (e: any) {
+    ElMessage.error(e.message);
+  }
+}
 </script>
+
+<style lang="scss">
+.form-content {
+  display: flex;
+  height: calc(100% - 75px);
+
+  .code-editor-content,
+  .m-form {
+    width: 50%;
+  }
+
+  .m-form {
+    padding: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+</style>
diff --git a/playground/src/pages/Table.vue b/playground/src/pages/Table.vue
index 42772b04b..e5c5e84c6 100644
--- a/playground/src/pages/Table.vue
+++ b/playground/src/pages/Table.vue
@@ -1,9 +1,30 @@
 <template>
-  <m-table :columns="columns" :data="data" :show-header="true"></m-table>
+  <div style="width: 100%">
+    <nav-menu :data="menu"></nav-menu>
+    <div class="table-content">
+      <m-table class="left-panel" :columns="columns" :data="data" :show-header="true"></m-table>
+      <el-tabs class="right-panel" modelValue="columns">
+        <el-tab-pane label="columns" name="columns">
+          <magic-code-editor class="code-editor-content" :init-values="columns" @save="change"></magic-code-editor>
+        </el-tab-pane>
+        <el-tab-pane label="data" name="data">
+          <magic-code-editor class="code-editor-content" :init-values="data" @save="changeData"></magic-code-editor>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+
+import { MenuButton } from '@tmagic/editor';
+
+import NavMenu from '../components/NavMenu.vue';
+
+const router = useRouter();
 
 const columns = ref([
   {
@@ -32,4 +53,53 @@ const data = ref([
     ],
   },
 ]);
+
+const menu: MenuButton[] = [
+  {
+    type: 'button',
+    text: 'Editor Playground',
+    handler: () => router.push('/'),
+  },
+  {
+    type: 'button',
+    text: 'Form Playground',
+    handler: () => router.push('form'),
+  },
+];
+
+function change(value: string) {
+  try {
+    // eslint-disable-next-line no-eval
+    columns.value = eval(value);
+    ElMessage.success('更新成功');
+  } catch (e: any) {
+    ElMessage.error(e.message);
+  }
+}
+
+function changeData(value: string) {
+  try {
+    // eslint-disable-next-line no-eval
+    data.value = eval(value);
+    ElMessage.success('更新成功');
+  } catch (e: any) {
+    ElMessage.error(e.message);
+  }
+}
 </script>
+
+<style lang="scss">
+.table-content {
+  display: flex;
+  height: calc(100% - 35px);
+
+  .right-panel,
+  .left-panel {
+    width: 50%;
+  }
+
+  .code-editor-content {
+    height: calc(100vh - 100px);
+  }
+}
+</style>