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,27 +1,36 @@
 <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">
+  <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>
-  </div>
 </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: [
+const router = useRouter();
+
+const resultVisible = ref(false);
+const result = ref('');
+const form = ref<InstanceType<typeof MForm>>();
+
+const config = ref([
   {
     text: '文本',
     name: 'text',
@@ -286,9 +295,9 @@ export default defineComponent({
       },
     ],
   },
-      ],
+]);
 
-      initValue: {
+const initValue = ref({
   text: '文本',
   number: 10,
   fieldset: {
@@ -298,30 +307,34 @@ export default defineComponent({
     { id: 1, name: 'a' },
     { id: 2, name: 'b' },
   ],
-      },
+});
 
-      tableConfig: [
+const menu: MenuButton[] = [
   {
-          label: 'id',
-          prop: 'id',
+    type: 'button',
+    text: 'Editor Playground',
+    handler: () => router.push('/'),
   },
   {
-          label: 'name',
-          prop: 'name',
+    type: 'button',
+    text: 'Table Playground',
+    handler: () => router.push('table'),
   },
-      ],
-      tableData: [
-        { id: 1, name: 'xx' },
-        { id: 2, name: 'xx2' },
-      ],
-    };
+  {
+    type: 'button',
+    text: '提交',
+    icon: markRaw(Coin),
+    handler: () => {
+      submit();
     },
-  methods: {
-    async submit() {
+  },
+];
+
+async function submit() {
   try {
-        const values = await (this.$refs.form as InstanceType<typeof MForm>).submitForm();
-        this.resultVisible = true;
-        this.result = JSON.stringify(values, null, 2);
+    const values = await form.value?.submitForm();
+    resultVisible.value = true;
+    result.value = JSON.stringify(values, null, 2);
   } catch (e: any) {
     console.error(e);
     ElMessage.error({
@@ -331,22 +344,33 @@ export default defineComponent({
       dangerouslyUseHTMLString: true,
     });
   }
-    },
+}
 
-    spanMethod({ rowIndex, columnIndex }: any) {
-      if (columnIndex === 0) {
-        if (rowIndex % 2 === 0) {
-          return {
-            rowspan: 2,
-            colspan: 1,
-          };
+function change(value: string) {
+  try {
+    // eslint-disable-next-line no-eval
+    config.value = eval(value);
+    ElMessage.success('更新成功');
+  } catch (e: any) {
+    ElMessage.error(e.message);
   }
-        return {
-          rowspan: 0,
-          colspan: 0,
-        };
 }
-    },
-  },
-});
 </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>