feat(playground): 优化form/table playground

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>

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',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-
-      initValue: {
-        text: '文本',
-        number: 10,
-        fieldset: {
-          select: 1,
-        },
-        table: [
-          { id: 1, name: 'a' },
-          { id: 2, name: 'b' },
+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',
+          },
         ],
       },
-
-      tableConfig: [
-        {
-          label: 'id',
-          prop: 'id',
-        },
-        {
-          label: 'name',
-          prop: 'name',
-        },
-      ],
-      tableData: [
-        { id: 1, name: 'xx' },
-        { id: 2, name: 'xx2' },
-      ],
-    };
+      {
+        value: 2,
+        label: 'two',
+        children: [
+          {
+            value: 5,
+            label: 'five',
+          },
+          {
+            value: 7,
+            label: 'seven',
+          },
+        ],
+      },
+    ],
   },
-  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,
-        });
-      }
-    },
-
-    spanMethod({ rowIndex, columnIndex }: any) {
-      if (columnIndex === 0) {
-        if (rowIndex % 2 === 0) {
-          return {
-            rowspan: 2,
-            colspan: 1,
-          };
-        }
-        return {
-          rowspan: 0,
-          colspan: 0,
-        };
-      }
-    },
+  {
+    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',
+      },
+    ],
+  },
+
+  {
+    type: 'step',
+    items: [
+      {
+        name: 'step1',
+        title: 'step1',
+        items: [
+          {
+            text: '名称',
+            name: 'name',
+          },
+        ],
+      },
+      {
+        name: 'step2',
+        title: 'step2',
+        items: [
+          {
+            text: '名称2',
+            name: 'name',
+          },
+        ],
+      },
+    ],
+  },
+]);
+
+const initValue = ref({
+  text: '文本',
+  number: 10,
+  fieldset: {
+    select: 1,
+  },
+  table: [
+    { id: 1, name: 'a' },
+    { id: 2, name: 'b' },
+  ],
 });
+
+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>

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>