test: 应用通信添加基座 adapter 信息

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

@@ -25,8 +25,8 @@ const routes: RouteRecordRaw[] = [
         },
         props: {
           // url: 'https://y-code-renderer.shiyue.com/',
-          url: `${VITE_RENDERER_URL}?fileId=7pfr394d6&projectId=4`,
+          // url: `${VITE_RENDERER_URL}?fileId=7pfr394d6&projectId=4`,
-          // url: `${VITE_RENDERER_URL}`,
+          url: `${VITE_RENDERER_URL}`,
           // accessToken: localStorage.getItem('y-code-access-token'),
           fileId: '7pfr394d6',
           projectId: 4,

apps/renderer/src/App.vue

@@ -4,12 +4,22 @@ import { getCurrentInstance, onMounted, ref, watch } from 'vue';
 import { useQuery } from '@tanstack/vue-query';
 import { jsonp, request } from '@vtj/utils';
 import { createProvider } from '@vtj/web';
-import { ElLoading } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { LowCodeService } from './service';
 
-// 从 wujie props 获取数据
+// 定义 wujie props 的类型
-const wujieProps = window.$wujie?.props || {};
+interface WujieProps {
+  accessToken?: string;
+  applicationId?: number | string;
+  fileId?: string;
+  name?: string;
+  projectId?: number | string;
+  [key: string]: any;
+}
+
+// 从 wujie props 获取数据，提供默认值
+const wujieProps: WujieProps = window.$wujie?.props || {};
 console.log('wujie props:', wujieProps);
 
 // 文件加载时，清空一次 sessionStorage
@@ -19,52 +29,90 @@ sessionStorage.clear();
 const renderer = ref();
 const lowCodeService = new LowCodeService();
 const isLoading = ref(false);
-const accessToken = ref(wujieProps.accessToken || '');
-const urlParams = ref({
-  fileId: wujieProps.fileId || '',
-  projectId: Number(wujieProps.projectId) || -1,
-  applicationId: Number(wujieProps.applicationId) || -1,
-  name: wujieProps.name || '',
-});
 const provider = ref(null);
+const loadingInstance = ref(null);
 
 // 初始化请求配置
 const initRequestConfig = (token: string) => {
+  if (!token) return;
+
   request.useRequest((req) => {
     req.headers.set('Authorization', `Bearer ${token}`);
     return req;
   });
 };
 
+// 显示加载中
+const showLoading = (text = '低代码文件加载中...') => {
+  if (loadingInstance.value) return;
+
+  loadingInstance.value = ElLoading.service({ text });
+};
+
+// 隐藏加载中
+const hideLoading = () => {
+  if (loadingInstance.value) {
+    loadingInstance.value.close();
+    loadingInstance.value = null;
+  }
+};
+
+// 校验必要参数
+const validateProps = () => {
+  const { fileId, projectId } = wujieProps;
+
+  if (!fileId) {
+    ElMessage.error('缺少必要参数：fileId');
+    return false;
+  }
+
+  if (!projectId) {
+    ElMessage.error('缺少必要参数：projectId');
+    return false;
+  }
+
+  return true;
+};
+
 // 初始化低代码引擎 - 只初始化一次
 const initLowCodeEngine = async () => {
   // 如果已经初始化过，直接返回
   if (provider.value) return provider.value;
 
-  const token = accessToken.value;
+  // 校验参数
-  if (token) {
+  if (!validateProps()) {
-    initRequestConfig(token);
+    throw new Error('参数校验失败');
-    sessionStorage.setItem('y-code-access-token', token);
   }
 
-  const { provider: lowCodeProvider, onReady } = createProvider({
+  // 初始化请求配置
-    nodeEnv: import.meta.env.NODE_ENV,
+  initRequestConfig(wujieProps.accessToken);
-    service: lowCodeService,
-    project: { id: urlParams.value.projectId },
-    adapter: {
-      request,
-      jsonp,
-    },
-  });
 
-  provider.value = { provider: lowCodeProvider, onReady };
+  try {
-  return { provider: lowCodeProvider, onReady };
+    const { provider: lowCodeProvider, onReady } = createProvider({
+      nodeEnv: import.meta.env.NODE_ENV,
+      service: lowCodeService,
+      project: { id: Number(wujieProps.projectId) || -1 },
+      adapter: {
+        request,
+        jsonp,
+      },
+    });
+
+    provider.value = { provider: lowCodeProvider, onReady };
+    return { provider: lowCodeProvider, onReady };
+  } catch (error) {
+    console.error('初始化低代码引擎失败:', error);
+    ElMessage.error('初始化低代码引擎失败');
+    return Promise.reject(error);
+  }
 };
 
 // 获取渲染组件
 const getRenderComponent = async () => {
+  if (!validateProps()) return null;
+
   isLoading.value = true;
-  ElLoading.service({ text: '低代码文件加载中...' });
+  showLoading();
 
   try {
     // 1. 确保低代码引擎已初始化
@@ -77,12 +125,13 @@ const getRenderComponent = async () => {
         instance?.appContext.app.use(lowCodeProvider);
         try {
           const renderComponent = await lowCodeProvider.getRenderComponent(
-            urlParams.value.fileId,
+            wujieProps.fileId,
           );
           console.log('渲染组件获取成功');
           resolve(renderComponent);
         } catch (error) {
           console.error('获取渲染组件失败:', error);
+          ElMessage.error('获取渲染组件失败');
           resolve(null);
         }
       });
@@ -92,15 +141,17 @@ const getRenderComponent = async () => {
     return null;
   } finally {
     isLoading.value = false;
-    ElLoading.service().close();
+    hideLoading();
   }
 };
 
 // 使用 useQuery 管理渲染组件
-const { data: rendererComponent } = useQuery({
+const { data: rendererComponent, isError } = useQuery({
-  queryKey: ['getRenderer'],
+  queryKey: ['getRenderer', wujieProps.fileId, wujieProps.projectId],
   queryFn: getRenderComponent,
   enabled: false, // 初始不自动执行
+  retry: 1, // 失败后重试一次
+  staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
 });
 
 // 当组件挂载时，将渲染器组件赋值给 renderer
@@ -111,31 +162,59 @@ watch(rendererComponent, (newVal) => {
   }
 });
 
+// 向父应用发送状态消息
+const notifyParent = (event: string, data?: any) => {
+  if (window.$wujie?.bus) {
+    window.$wujie.bus.$emit(event, data);
+  }
+};
+
 // 组件挂载后执行初始化
 onMounted(async () => {
   // 通知父应用已准备就绪
-  if (window.$wujie) {
+  notifyParent('ready', 'y-code-renderer is ready');
-    window.$wujie.bus.$emit('ready', 'y-code-renderer is ready');
-  }
 
-  // 初始化低代码引擎并获取渲染组件
+  try {
-  await initLowCodeEngine();
+    await initLowCodeEngine();
-  getRenderComponent().then((component) => {
+
+    const component = await getRenderComponent();
     if (component) {
       renderer.value = component;
+      notifyParent('render-success');
+    } else {
+      notifyParent('render-fail', 'Failed to get component');
     }
-  });
+  } catch (error) {
+    console.error('初始化过程出错:', error);
+    notifyParent('render-fail', error);
+  }
 });
 </script>
 
 <template>
-  <div style="padding: 20px">
+  <div class="renderer-container">
-    <component :is="renderer" :wujie-props="wujieProps" />
+    <component :is="renderer" v-if="renderer" :wujie-props="wujieProps" />
-    <!-- <div
+
-      v-else-if="!isLoading"
+    <div v-else-if="!isLoading && isError" class="error-message">
-      style="margin-top: 50px; color: red; text-align: center"
+      组件加载失败，请检查参数和网络连接
-    >
+    </div>
+
+    <div v-else-if="!isLoading" class="error-message">
       组件加载失败，请检查控制台日志
-    </div> -->
+    </div>
   </div>
 </template>
+
+<style scoped>
+.renderer-container {
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+}
+
+.error-message {
+  margin-top: 50px;
+  color: red;
+  text-align: center;
+}
+</style>

packages/renderer-adapter/wujie-vue3/src/adapter.vue

@@ -3,6 +3,8 @@ import { onBeforeUnmount, onMounted } from 'vue';
 
 import WujieVue from 'wujie-vue3';
 
+import { version } from '/package.json';
+
 const props = defineProps<{
   [key: string]: any;
   accessToken?: string;
@@ -33,16 +35,47 @@ const handleMessage = (data: any) => {
   console.log('收到子应用消息:', data);
 };
 
+// 准备传递给子应用的数据
+const subAppProps = {
+  ...props,
+  adapterInfo: {
+    version,
+  },
+};
+
+// 监听子应用的事件
+const handleReady = (data: any) => {
+  console.log('子应用就绪:', data);
+  // 可以在这里执行一些操作
+};
+
+const handleRenderSuccess = () => {
+  console.log('子应用渲染成功');
+  // 通知父应用
+};
+
+const handleRenderFail = (error: any) => {
+  console.error('子应用渲染失败:', error);
+  // 处理错误情况
+};
+
 onMounted(() => {
+  // 注册事件监听
   bus.$on('message', handleMessage);
+  bus.$on('ready', handleReady);
+  bus.$on('render-success', handleRenderSuccess);
+  bus.$on('render-fail', handleRenderFail);
 });
 
 onBeforeUnmount(() => {
+  // 移除所有事件监听
   bus.$off('message', handleMessage);
+  bus.$off('ready', handleReady);
+  bus.$off('render-success', handleRenderSuccess);
+  bus.$off('render-fail', handleRenderFail);
 });
 </script>
 <template>
-  {{ 1 }}
   <div style="width: 100%; height: 100%">
     <WujieVue
       :id="name"
@@ -53,7 +86,7 @@ onBeforeUnmount(() => {
       :degrade="degrade"
       width="100%"
       height="100%"
-      :props="props"
+      :props="subAppProps"
       :before-load="beforeLoad"
       :after-mount="afterMount"
     />