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%;

apps/platform/src/components/renderer-adapter/index.vue

@@ -2,7 +2,7 @@
   import { ref, onMounted } from 'vue';
   import { useRoute } from 'vue-router';
   import Postmate from 'postmate';
-  import { Spin, Alert, Button } from 'ant-design-vue';
+  // import { Spin, Alert, Button } from 'ant-design-vue';
 
   const route = useRoute();
   const MAX_RETRIES = 3;
@@ -15,7 +15,6 @@
     loading.value = true;
     errorMessage.value = '';
     const container = document.getElementById('low-code-adapter');
-    console.log('container', container);
     if (!container) {
       errorMessage.value = '容器元素未找到';
       loading.value = false;

apps/platform/src/router/routes/modules/micro.ts

@@ -21,31 +21,33 @@ const routes: Array<RouteRecordRaw> = [
           app: {
             url: 'https://localhost:10011',
             name: 'y-code-designer',
+            applicationId: 4,
             // sync: true,
             // alive: true,
             // degrade: true,
           },
         },
-        component: () => import('@/components/micro-container/index.vue'),
-      },
-      {
-        path: 'renderer',
-        name: `${moduleName}-renderer`,
-        meta: {
-          title: '低代码渲染器',
-          keepAlive: true,
-          // hideInMenu: true,
-          icon: 'ant-design:eye-outlined',
-          app: {
-            url: 'https://localhost:10010',
-            name: 'y-code-renderer',
-            // sync: true,
-            // alive: true,
-            degrade: true,
-          },
-        },
-        component: () => import('@/components/micro-container/index.vue'),
+        component: () => import('@/components/renderer-adapter/index.vue'),
       },
+      // {
+      //   path: 'renderer',
+      //   name: `${moduleName}-renderer`,
+      //   meta: {
+      //     title: '低代码渲染器',
+      //     keepAlive: true,
+      //     // hideInMenu: true,
+      //     icon: 'ant-design:eye-outlined',
+      //     app: {
+      //       url: 'https://localhost:10010',
+      //       name: 'y-code-renderer',
+      //       applicationId: 4,
+      //       // sync: true,
+      //       // alive: true,
+      //       // degrade: true,
+      //     },
+      //   },
+      //   component: () => import('@/components/renderer-adapter/index.vue'),
+      // },
       {
         path: 'y-code-v1',
         name: `${moduleName}-y-code-v1`,