feat: 可通过配置入参来初始化编辑器

apps/designer/package.json

@@ -29,6 +29,7 @@
     "licia-es": "^1.46.0",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "postmate": "^1.5.2",
     "unplugin-auto-import": "^19.1.1",
     "vue": "~3.5.13",
     "vue-router": "~4.5.0"

apps/designer/src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

apps/designer/src/views/index.vue

@@ -1,40 +1,50 @@
-<template>
-  <div class="designer-container" ref="container"></div>
-</template>
-
 <script lang="ts" setup>
 import { ref } from 'vue';
-import {
-  Engine,
-  widgetManager
-  // type ProjectModel
-} from '@vtj/pro';
+import Postmate from 'postmate';
+import { Engine, widgetManager } from '@vtj/pro';
 
 import { LowCodeService } from '@/service';
 
 const container = ref();
 const service = new LowCodeService();
 
-const engine = new Engine({
-  container,
-  service,
-  project: {
-    // @ts-ignore
-    id: 4,
-    name: '低代码平台'
-  }
-});
+onMounted(async () => {
+  // 数据模型
+  const model = {
+    name: '',
+    applicationId: -1,
+    url: ''
+  };
 
-widgetManager.set('Previewer', {
-  props: {
-    path: (block: any) => {
-      const pathname = location.pathname;
-      return `${pathname}#/preview/${block.id}`;
-    }
-  }
+  const handshake = new Postmate.Model({});
+  await handshake.then((parent) => {
+    parent.emit('sync-context', 'Hello, World!');
+    Object.assign(model, parent.model);
+    console.log('model', model);
+    const engine = new Engine({
+      container,
+      service,
+      project: {
+        id: model.applicationId,
+        name: model.name
+      }
+    });
+    widgetManager.set('Previewer', {
+      props: {
+        path: (block: any) => {
+          const pathname = location.pathname;
+          return `${pathname}#/preview/${block.id}`;
+        }
+      }
+    });
+  });
 });
 </script>
 
+<template>
+  <div class="designer-container" ref="container"></div>
+</template>
+
 <style scoped>
 .designer-container {
   height: 100%;