chore: 子应用独立运行测试

apps/platform/src/router/routes/modules/static-file.ts

@@ -1,43 +1,29 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { h } from 'vue';
-
 import RendererAdapter from '@sy/vue3-renderer-adapter';
 
-import { VITE_RENDERER_URL } from '#/constants';
+const routes: RouteRecordRaw[] = [
-import {
-  LOW_CODE_APPLICATION_ID,
-  LOW_CODE_PROJECT_ID,
-} from '#/constants/low-code';
-
-// 微前端路由
-const moduleName = 'static-file';
-
-const routes: Array<RouteRecordRaw> = [
   {
     path: '/static-file',
-    name: moduleName,
+    name: 'StaticFile',
     meta: {
-      title: '静态文件管理',
       icon: 'ant-design:file',
+      order: 2,
+      title: '静态文件管理',
     },
     children: [
       {
-        path: 'list',
+        path: '/static-file/list',
-        name: `${moduleName}-list`,
+        name: 'StaticFileList',
+        component: RendererAdapter,
         meta: {
+          icon: 'ant-design:file-text',
           title: '静态文件列表',
-          keepAlive: false,
-          icon: 'ant-design:file',
         },
-        component: () =>
+        props: {
-          h(RendererAdapter, {
+          url: 'https://localhost:10012/?fileId=7pfr394d6&projectId=4',
-            url: VITE_RENDERER_URL,
+          accessToken: localStorage.getItem('y-code-access-token'),
-            name: 'y-code-platform-application-list',
+        },
-            applicationId: LOW_CODE_APPLICATION_ID,
-            projectId: LOW_CODE_PROJECT_ID,
-            fileId: '7pfr394d6',
-          }),
       },
     ],
   },

apps/renderer/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getCurrentInstance, ref, watch } from 'vue';
+import { getCurrentInstance, onMounted, ref, watch } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
 import { jsonp, request } from '@vtj/utils';
@@ -7,77 +7,176 @@ import { createProvider } from '@vtj/web';
 import { ElLoading } from 'element-plus';
 import Postmate from 'postmate';
 
-import { getFile } from './io';
 import { LowCodeService } from './service';
-// import * as VtjUI from '@vtj/ui'
 
 // 响应式状态
 const renderer = ref();
 const lowCodeService = new LowCodeService();
+const isLoading = ref(false);
+const handshakeCompleted = ref(false);
+const accessToken = ref('');
+const urlParams = ref(parseUrlParams());
+const provider = ref(null);
 
-// Postmate 握手协议
+// 从 URL 解析参数
-const postmate = new Postmate.Model({
+function parseUrlParams() {
-  sayHi: (data: any) => {
+  const urlParams = new URLSearchParams(window.location.search);
-    console.log('sayHi', data);
+  const params = {
-  },
+    fileId: urlParams.get('fileId') || '',
-});
+    projectId: Number(urlParams.get('projectId')) || -1,
+    applicationId: Number(urlParams.get('applicationId')) || -1,
+    name: urlParams.get('name') || '',
+  };
+  console.log('解析URL参数:', params);
+  return params;
+}
 
-// 数据模型
+// 初始化 Postmate 握手
-const model = {
+const initPostmateHandshake = async () => {
-  name: '',
+  const model = new Postmate.Model({
-  applicationId: -1,
+    sayHi: (data: any) => {
-  projectId: -1,
+      console.log('sayHi', data);
-  fileId: '',
+    },
-  url: '',
+  });
-  accessToken: '',
+
+  return model.then((parent) => {
+    // 只获取 accessToken
+    accessToken.value = parent.model.accessToken || '';
+    localStorage.setItem('y-code-access-token', accessToken.value);
+    parent.emit('renderer-ready', 'y-code-renderer is ready');
+
+    // 更新请求配置
+    if (accessToken.value) {
+      initRequestConfig(accessToken.value);
+    }
+
+    handshakeCompleted.value = true;
+    return accessToken.value;
+  });
 };
 
-// 数据查询
+// 初始化请求配置
-const { data: file, isFetching } = useQuery({
+const initRequestConfig = (token: string) => {
-  queryKey: ['getFile'],
+  request.useRequest((req) => {
-  queryFn: async () => {
+    req.headers.set('Authorization', `Bearer ${token}`);
-    await postmate.then((parent) => {
+    return req;
-      parent.emit('some-event', 'y-code-renderer is ready');
+  });
-      Object.assign(model, parent.model);
+};
-      localStorage.setItem('y-code-access-token', model.accessToken || '');
-    });
 
-    return getFile(model.fileId).then(() => {
+// 初始化低代码引擎 - 只初始化一次
-      request.useRequest((req) => {
+const initLowCodeEngine = async () => {
-        req.headers.set('Authorization', `Bearer ${model.accessToken}`);
+  // 如果已经初始化过，直接返回
-        return req;
+  if (provider.value) return provider.value;
-      });
+
-      console.log('import.meta.env.NODE_ENV', import.meta.env.NODE_ENV);
+  const token =
-      const { provider, onReady } = createProvider({
+    accessToken.value || localStorage.getItem('y-code-access-token') || '';
-        nodeEnv: import.meta.env.NODE_ENV,
+  if (token) {
-        service: lowCodeService,
+    initRequestConfig(token);
-        project: { id: model.projectId },
+  }
-        adapter: {
+
-          request,
+  const { provider: lowCodeProvider, onReady } = createProvider({
-          jsonp,
+    nodeEnv: import.meta.env.NODE_ENV,
-        },
+    service: lowCodeService,
-      });
+    project: { id: urlParams.value.projectId },
+    adapter: {
+      request,
+      jsonp,
+    },
+  });
+
+  provider.value = { provider: lowCodeProvider, onReady };
+  return { provider: lowCodeProvider, onReady };
+};
+
+// 获取渲染组件
+const getRenderComponent = async () => {
+  isLoading.value = true;
+  ElLoading.service({ text: '低代码文件加载中...' });
+
+  try {
+    // 1. 确保低代码引擎已初始化
+    const { provider: lowCodeProvider, onReady } = await initLowCodeEngine();
+
+    // 3. 获取渲染组件
+    return new Promise<any>((resolve) => {
       onReady(async () => {
         const instance = getCurrentInstance();
-        instance?.appContext.app.use(provider);
+        instance?.appContext.app.use(lowCodeProvider);
-        renderer.value = await provider.getRenderComponent(model.fileId);
+        try {
+          const renderComponent = await lowCodeProvider.getRenderComponent(
+            urlParams.value.fileId,
+          );
+          console.log('渲染组件获取成功');
+          resolve(renderComponent);
+        } catch (error) {
+          console.error('获取渲染组件失败:', error);
+          resolve(null);
+        }
       });
     });
-  },
+  } catch (error) {
-});
+    console.error('获取渲染组件过程出错:', error);
-
+    return null;
-// 加载状态监控
+  } finally {
-watch(isFetching, (newVal) => {
+    isLoading.value = false;
-  if (newVal) {
-    ElLoading.service({ text: '低代码文件加载中...' });
-  } else {
     ElLoading.service().close();
   }
+};
+
+// 使用 useQuery 管理渲染组件（但不实际使用）
+const { data: rendererComponent } = useQuery({
+  queryKey: ['getRenderer'],
+  queryFn: getRenderComponent,
+  enabled: false, // 初始不自动执行
+});
+
+// 当组件挂载时，将渲染器组件赋值给 renderer
+watch(rendererComponent, (newVal) => {
+  if (newVal) {
+    renderer.value = newVal;
+    console.log('渲染器组件已更新');
+  }
+});
+
+// 监听握手完成状态
+watch(handshakeCompleted, (newVal) => {
+  if (newVal) {
+    console.log('握手完成，开始获取渲染组件');
+    getRenderComponent().then((component) => {
+      if (component) {
+        renderer.value = component;
+      }
+    });
+  }
+});
+
+// 组件挂载后执行初始化
+onMounted(async () => {
+  // 1. 初始化低代码引擎
+  await initLowCodeEngine();
+
+  // 2. 开始获取渲染组件
+  getRenderComponent().then((component) => {
+    if (component) {
+      renderer.value = component;
+    }
+  });
+
+  // 3. 同时启动握手过程，但不阻塞主流程
+  initPostmateHandshake().catch((error) => {
+    console.warn('握手失败:', error);
+  });
 });
 </script>
 
 <template>
   <div style="padding: 20px">
     <component :is="renderer" v-if="renderer" />
+    <div
+      v-else-if="!isLoading"
+      style="margin-top: 50px; color: red; text-align: center"
+    >
+      组件加载失败，请检查控制台日志
+    </div>
   </div>
 </template>