From a78d892a578cae24ad2473b259f71203ee93c1fe Mon Sep 17 00:00:00 2001
From: wangxuefeng <wangxuefeng@shiyue.com>
Date: Tue, 4 Mar 2025 15:01:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B8=B2=E6=9F=93=E5=99=A8=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E5=BC=82=E7=AB=AF=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/renderer/src/App.vue | 81 ++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 43 deletions(-)

diff --git a/apps/renderer/src/App.vue b/apps/renderer/src/App.vue
index ddbb467..fac5944 100644
--- a/apps/renderer/src/App.vue
+++ b/apps/renderer/src/App.vue
@@ -1,68 +1,63 @@
 <script setup lang="ts">
-import { onMounted, computed, watch } from 'vue';
-import { ElLoading  } from 'element-plus';
-import Postmate from 'postmate';
+// @ts-nocheck
+import { computed, watch, ref, getCurrentInstance } from 'vue'
+import { ElLoading } from 'element-plus'
+import Postmate from 'postmate'
 import { createRenderer, createProvider } from '@vtj/renderer'
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery } from '@tanstack/vue-query'
 
 import { LowCodeService } from './service'
+import { getFile } from './io'
 
-import { getFile } from './io';
+// 响应式状态
+const renderer = ref()
+const lowCodeService = new LowCodeService()
 
-const lowCodeService = new LowCodeService();
-
-const handshake = new Postmate.Model({});
+// Postmate 握手协议
+const handshake = new Postmate.Model({})
 
+// 数据模型
 const model = {
   name: '',
   applicationId: -1,
   projectId: -1,
   fileId: '',
-  url: '',
+  url: ''
 }
 
+// 数据查询
 const { data: file, isFetching } = useQuery({
   queryKey: ['getFile'],
   queryFn: async () => {
-    await handshake.then(parent => {
-    parent.emit('sync-context', 'Hello, World!');
-    Object.assign(model, parent.model);
-    console.log('model', model);
-  });
-    return getFile(model.fileId);
-  },
-});
+    await handshake.then((parent) => {
+      parent.emit('sync-context', 'Hello, World!')
+      Object.assign(model, parent.model)
+      console.log('model', model)
+    })
 
+    return getFile(model.fileId).then(() => {
+      const { provider, onReady } = createProvider({
+        service: lowCodeService,
+        project: { id: '4' }
+      })
+      onReady(async () => {
+        console.log('onReady')
+        const instance = getCurrentInstance()
+        instance?.appContext.app.use(provider)
+        renderer.value = await provider.getRenderComponent(model.fileId)
+      })
+    })
+  }
+})
+
+// 加载状态监控
 watch(isFetching, (newVal) => {
   if (newVal) {
-    ElLoading.service({
-      text: '低代码文件加载中...',
-    });
+    ElLoading.service({ text: '低代码文件加载中...' })
   } else {
-    ElLoading.service().close();
+    ElLoading.service().close()
   }
-});
-
-const { provider, onReady } = createProvider({
-  // runtime: 'web',
-  service: lowCodeService,
-  project: {
-    id: '4'
-  },
-});
-
-
-onReady(() => {
-  console.log('onReady');
-});
-
-const renderer = computed(() => {
-  console.log(file?.value?.dsl.id);
-  if (file?.value?.dsl) {
-    return createRenderer({ dsl: file.value.dsl }).renderer;
-  }
-  return null;
-});
+})
 </script>
 
 <template>