From ea556d69f6a0c5260b38bb5cc2b8176c5b427942 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 25 Jul 2024 17:51:49 +0800
Subject: [PATCH] =?UTF-8?q?style(playground):=20=E5=AE=8C=E5=96=84ts?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/src/configs/dsl.ts   | 23 +++++++++++++----------
 playground/src/pages/Editor.vue |  5 +++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
index cce78fd1..fc42b8c3 100644
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-// @ts-nocheck
-export default {
-  id: '75f0extui9d7yksklx27hff8xg',
+import { ActionType, type MApp, NodeType } from '@tmagic/schema';
+
+const dsl: MApp = {
+  id: '1',
   name: 'test',
-  type: 'app',
+  type: NodeType.ROOT,
   codeBlocks: {
     code_5336: {
       name: 'getData',
@@ -50,7 +51,7 @@ export default {
   },
   items: [
     {
-      type: 'page',
+      type: NodeType.PAGE,
       id: 'page_299',
       name: 'index',
       title: '',
@@ -76,7 +77,7 @@ export default {
           name: 'magic:common:events:click', // 事件名
           actions: [
             {
-              actionType: 'code', // 联动动作类型
+              actionType: ActionType.CODE, // 联动动作类型
               codeId: 'code_5336', // 代码块id
               params: {
                 age: 12, // 参数
@@ -88,7 +89,7 @@ export default {
           name: 'magic:common:events:click', // 事件名
           actions: [
             {
-              actionType: 'code', // 联动动作类型
+              actionType: ActionType.CODE, // 联动动作类型
               codeId: 'code_5316', // 代码块id
               params: {},
             },
@@ -220,7 +221,7 @@ export default {
               name: 'magic:common:events:click',
               actions: [
                 {
-                  actionType: 'comp',
+                  actionType: ActionType.COMP,
                   to: 'overlay_2159',
                   method: 'openOverlay',
                 },
@@ -421,7 +422,7 @@ export default {
         },
       ],
       methods: [],
-      events: '',
+      events: [],
       mocks: [],
       beforeRequest: '',
       afterResponse: '',
@@ -456,7 +457,7 @@ export default {
           },
         },
       ],
-      events: '',
+      events: [],
       mocks: [],
       beforeRequest: '',
       afterResponse: '',
@@ -471,3 +472,5 @@ export default {
     },
   },
 };
+
+export default dsl;
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 32c10be9..34667f59 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -59,7 +59,7 @@ import {
   type Services,
   TMagicEditor,
 } from '@tmagic/editor';
-import type { MContainer, MNode } from '@tmagic/schema';
+import type { MApp, MContainer, MNode } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type { CustomizeMoveableOptionsCallbackConfig } from '@tmagic/stage';
 import { asyncLoadJs, calcValueByFontsize } from '@tmagic/utils';
@@ -78,7 +78,7 @@ const editor = ref<InstanceType<typeof TMagicEditor>>();
 const deviceGroup = ref<InstanceType<typeof DeviceGroup>>();
 const iframe = ref<HTMLIFrameElement>();
 const previewVisible = ref(false);
-const value = ref(dsl);
+const value = ref<MApp>(dsl);
 const defaultSelected = ref(dsl.items[0].id);
 const propsValues = ref<Record<string, any>>({});
 const propsConfigs = ref<Record<string, any>>({});
@@ -101,6 +101,7 @@ const previewUrl = computed(
 );
 
 const collectorOptions = {
+  id: '',
   name: '蒙层',
   isTarget: (key: string | number, value: any) =>
     typeof key === 'string' && typeof value === 'string' && key.includes('events') && value.startsWith('overlay_'),