test: 低代码依赖升级尝试

apps/designer/package.json

@@ -15,17 +15,17 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@vtj/core": "^0.10.15",
+    "@vtj/core": "^0.11.1",
-    "@vtj/designer": "0.10.15",
+    "@vtj/designer": "0.11.1",
-    "@vtj/icons": "0.10.15",
+    "@vtj/icons": "0.11.1",
-    "@vtj/local": "^0.10.15",
+    "@vtj/local": "^0.11.1",
-    "@vtj/materials": "^0.10.15",
+    "@vtj/materials": "^0.11.1",
-    "@vtj/node": "0.10.3",
+    "@vtj/node": "0.11.1",
-    "@vtj/pro": "^0.10.15",
+    "@vtj/pro": "^0.11.1",
-    "@vtj/renderer": "^0.10.15",
+    "@vtj/renderer": "^0.11.1",
-    "@vtj/ui": "^0.10.15",
+    "@vtj/ui": "^0.11.1",
-    "@vtj/utils": "0.10.15",
+    "@vtj/utils": "0.11.1",
-    "@vtj/web": "^0.10.15",
+    "@vtj/web": "^0.11.1",
     "axios": "^1.8.1",
     "element-plus": "^2.9.4",
     "licia-es": "^1.46.0",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/postmate": "catalog:",
-    "@vtj/cli": "^0.10.4",
+    "@vtj/cli": "^0.11.1",
     "vite": "catalog:",
     "vite-plugin-mkcert": "catalog:",
     "vitest": "catalog:"

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

@@ -17,21 +17,16 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/static-file/list',
         name: 'StaticFileList',
-        // component: RendererAdapter,
         component: WujieVueRendererAdapter,
         meta: {
           icon: 'ant-design:file-text',
           title: '静态文件列表',
         },
         props: {
-          // url: 'https://y-code-renderer.shiyue.com/',
-          // url: `${VITE_RENDERER_URL}?fileId=7pfr394d6&projectId=4`,
           url: `${VITE_RENDERER_URL}`,
-          // accessToken: localStorage.getItem('y-code-access-token'),
+          fileId: '7pfr394d6',
-          // fileId: '7pfr394d6',
-          fileId: '7pg2k840j',
           projectId: 4,
-          name: 'StaticFileList',
+          name: '7pfr394d6',
           sync: true,
         },
       },

apps/renderer/package.json

@@ -17,14 +17,14 @@
     "@sentry/vue": "^9.5.0",
     "@sy/web-vitals": "workspace:*",
     "@tanstack/vue-query": "^5.66.9",
-    "@vtj/core": "^0.10.15",
+    "@vtj/core": "^0.11.1",
-    "@vtj/icons": "0.10.15",
+    "@vtj/icons": "0.11.1",
-    "@vtj/materials": "^0.10.15",
+    "@vtj/materials": "^0.11.1",
-    "@vtj/pro": "^0.10.15",
+    "@vtj/pro": "^0.11.1",
-    "@vtj/renderer": "^0.10.15",
+    "@vtj/renderer": "^0.11.1",
-    "@vtj/ui": "^0.10.15",
+    "@vtj/ui": "^0.11.1",
-    "@vtj/utils": "^0.10.15",
+    "@vtj/utils": "^0.11.1",
-    "@vtj/web": "^0.10.15",
+    "@vtj/web": "^0.11.1",
     "axios": "catalog:",
     "core-js": "^3.40.0",
     "element-plus": "catalog:",
@@ -38,7 +38,7 @@
     "@farmfe/core": "catalog:",
     "@types/postmate": "catalog:",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vtj/cli": "^0.10.4",
+    "@vtj/cli": "^0.11.1",
     "vite": "catalog:",
     "vite-plugin-mkcert": "catalog:"
   }

apps/renderer/src/App.vue

@@ -11,7 +11,9 @@ import { LowCodeService } from './service';
 // 解析 url 参数
 const urlParams = new URLSearchParams(window.location.search);
 const fileId = urlParams.get('fileId');
+console.log('urlParams-fileId', fileId);
 const projectId = urlParams.get('projectId');
+console.log('urlParams-projectId', projectId);
 
 // 定义 wujie props 的类型
 interface WujieProps {
@@ -65,33 +67,11 @@ const hideLoading = () => {
   }
 };
 
-// 校验必要参数
-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;
 
-  // 校验参数
-  if (!validateProps()) {
-    throw new Error('参数校验失败');
-  }
-
   // 初始化请求配置
   initRequestConfig(wujieProps.accessToken);
 
@@ -99,7 +79,7 @@ const initLowCodeEngine = async () => {
     const { provider: lowCodeProvider, onReady } = createProvider({
       nodeEnv: import.meta.env.NODE_ENV,
       service: lowCodeService,
-      project: { id: Number(wujieProps.projectId) || -1 },
+      project: { id: Number(wujieProps.projectId) },
       adapter: {
         request,
         jsonp,
@@ -117,8 +97,6 @@ const initLowCodeEngine = async () => {
 
 // 获取渲染组件
 const getRenderComponent = async () => {
-  if (!validateProps()) return null;
-
   isLoading.value = true;
   showLoading();
 

apps/renderer/src/wujie-vue-app.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+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, ElMessage } from 'element-plus';
+
+import { LowCodeService } from './service';
+
+// 解析 url 参数
+const urlParams = new URLSearchParams(window.location.search);
+const fileId = urlParams.get('fileId');
+console.log('urlParams-fileId', fileId);
+const projectId = urlParams.get('projectId');
+console.log('urlParams-projectId', projectId);
+
+// 定义 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 || {
+  fileId,
+  projectId,
+};
+console.log('wujie props:', wujieProps);
+
+// 文件加载时，清空一次 sessionStorage
+sessionStorage.clear();
+
+// 响应式状态
+const renderer = ref();
+const lowCodeService = new LowCodeService();
+const isLoading = ref(false);
+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 initLowCodeEngine = async () => {
+  // 如果已经初始化过，直接返回
+  if (provider.value) return provider.value;
+
+  // 初始化请求配置
+  initRequestConfig(wujieProps.accessToken);
+
+  try {
+    const { provider: lowCodeProvider, onReady } = createProvider({
+      nodeEnv: import.meta.env.NODE_ENV,
+      service: lowCodeService,
+      project: { id: Number(wujieProps.projectId) },
+      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 () => {
+  isLoading.value = true;
+  showLoading();
+
+  try {
+    // 1. 确保低代码引擎已初始化
+    const { provider: lowCodeProvider, onReady } = await initLowCodeEngine();
+
+    // 2. 获取渲染组件
+    return new Promise<any>((resolve) => {
+      onReady(async () => {
+        const instance = getCurrentInstance();
+        instance?.appContext.app.use(lowCodeProvider);
+        try {
+          const renderComponent = await lowCodeProvider.getRenderComponent(
+            wujieProps.fileId,
+          );
+          console.log('渲染组件获取成功');
+          resolve(renderComponent);
+        } catch (error) {
+          console.error('获取渲染组件失败:', error);
+          ElMessage.error('获取渲染组件失败');
+          resolve(null);
+        }
+      });
+    });
+  } catch (error) {
+    console.error('获取渲染组件过程出错:', error);
+    return null;
+  } finally {
+    isLoading.value = false;
+    hideLoading();
+  }
+};
+
+// 使用 useQuery 管理渲染组件
+const { data: rendererComponent, isError } = useQuery({
+  queryKey: ['getRenderer', wujieProps.fileId, wujieProps.projectId],
+  queryFn: getRenderComponent,
+  enabled: false, // 初始不自动执行
+  retry: 1, // 失败后重试一次
+  staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
+});
+
+// 当组件挂载时，将渲染器组件赋值给 renderer
+watch(rendererComponent, (newVal) => {
+  if (newVal) {
+    renderer.value = newVal;
+    console.log('渲染器组件已更新');
+  }
+});
+
+// 向父应用发送状态消息
+const notifyParent = (event: string, data?: any) => {
+  if (window.$wujie?.bus) {
+    window.$wujie.bus.$emit(event, data);
+  }
+};
+
+// 组件挂载后执行初始化
+onMounted(async () => {
+  // 通知父应用已准备就绪
+  notifyParent('ready', 'y-code-renderer is ready');
+
+  try {
+    await initLowCodeEngine();
+
+    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 class="renderer-container">
+    <component :is="renderer" v-if="renderer" :wujie-props="wujieProps" />
+
+    <div v-else-if="!isLoading && isError" class="error-message">
+      组件加载失败，请检查参数和网络连接
+    </div>
+
+    <div v-else-if="!isLoading" class="error-message">
+      组件加载失败，请检查控制台日志
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.renderer-container {
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+}
+
+.error-message {
+  margin-top: 50px;
+  color: red;
+  text-align: center;
+}
+</style>