chore: 排查无界加载异常的问题

2025-03-19 00:08:19 +08:00
parent a2d308bc1a
commit 9b39f265d3
12 changed files with 369 additions and 260 deletions
--- a/apps/designer/src/views/index.vue
+++ b/apps/designer/src/views/index.vue
@@ -35,6 +35,7 @@ onMounted(async () => {
    const _engine = new Engine({
      container,
      service,
+      window,
      project: {
        // @ts-ignore
        id: model.projectId,
@@ -48,7 +49,9 @@ onMounted(async () => {
    widgetManager.set('Previewer', {
      props: {
        path: (block: any) => {
+          console.log('block', block);
          const pathname = location.pathname;
+          console.log('pathname', pathname);
          return `${pathname}#/preview/${block.id}`;
        }
      }
@@ -57,6 +60,10 @@ onMounted(async () => {
    widgetManager.set('Templates', {
      invisible: true
    });
+
+    widgetManager.set('About', {
+      invisible: true
+    });
  });
 });
 </script>
@@ -72,5 +79,6 @@ onMounted(async () => {
 .designer-container {
  width: 100%;
  height: 100%;
+  min-height: calc(100vh - 126px);
 }
 </style>
--- a/apps/platform/src/router/index.ts
+++ b/apps/platform/src/router/index.ts
@@ -9,8 +9,6 @@ import { resetStaticRoutes } from '@vben/utils';
 import { createRouterGuard } from './guard';
 import { routes } from './routes';

-console.log('routes', routes);
-
 /**
 *  @zh_CN 创建vue-router实例
 */
@@ -28,7 +26,7 @@ const router = createRouter({
    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
  },
  // 是否应该禁止尾部斜杠。
-  // strict: true,
+  strict: true,
 });

 const resetRoutes = () => resetStaticRoutes(router, routes);
--- a/apps/platform/src/router/routes/modules/application.ts
+++ b/apps/platform/src/router/routes/modules/application.ts
@@ -3,6 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
 import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';

 import { VITE_RENDERER_URL } from '#/constants';
+import { router } from '#/router';

 // 微前端路由
 const moduleName = 'application';
@@ -25,11 +26,17 @@ const routes: Array<RouteRecordRaw> = [
          icon: 'ant-design:list',
        },
        component: WujieVueRendererAdapter,
-        props: {
-          url: `${VITE_RENDERER_URL}`,
-          accessToken: localStorage.getItem('y-code-access-token'),
-          fileId: 'b91n1y9yr',
-          projectId: '4',
+        props: (route) => {
+          return {
+            url: `${VITE_RENDERER_URL}`,
+            accessToken: localStorage.getItem('y-code-access-token'),
+            fileId: 'b91n1y9yr',
+            projectId: '4',
+            getRouter: () => router,
+            route,
+            height: '100%',
+            // degrade: true,
+          };
        },
      },
    ],
--- a/apps/platform/src/router/routes/modules/micro.ts
+++ b/apps/platform/src/router/routes/modules/micro.ts
@@ -19,16 +19,26 @@ const routes: RouteRecordRaw[] = [
        path: 'designer',
        name: `${moduleName}-designer`,
        meta: {
-          keepAlive: false,
+          // keepAlive: false,
          title: '低代码编辑器',
          icon: 'ant-design:edit-outlined',
        },
+        // component: WujieVueRendererAdapter,
+        // props: {
+        //   url: `${VITE_DESIGNER_URL}`,
+        //   fileId: '4g4mz6qi8u',
+        //   projectId: 4,
+        //   name: '4g4mz6qi8u',
+        //   sync: false,
+        //   degrade: false,
+        // },
        component: RendererAdapter,
        props: {
          url: `${VITE_DESIGNER_URL}`,
          accessToken: localStorage.getItem('y-code-access-token'),
          fileId: '4g4mz6qi8u',
          projectId: '4',
+          name: 'y-code-designer',
        },
      },
      {
--- a/apps/platform/src/router/routes/modules/project.ts
+++ b/apps/platform/src/router/routes/modules/project.ts
@@ -3,6 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
 import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';

 import { VITE_RENDERER_URL } from '#/constants';
+import { router } from '#/router';

 // 微前端路由
 const moduleName = 'project';
@@ -23,13 +24,19 @@ const routes: Array<RouteRecordRaw> = [
          title: '项目列表',
          keepAlive: true,
          icon: 'ant-design:list',
+          hideInMenu: true,
        },
        component: WujieVueRendererAdapter,
-        props: {
-          url: `${VITE_RENDERER_URL}`,
-          accessToken: localStorage.getItem('y-code-access-token'),
-          fileId: '4g4mz6qi8u',
-          projectId: '4',
+        props: (route) => {
+          return {
+            url: `${VITE_RENDERER_URL}`,
+            accessToken: localStorage.getItem('y-code-access-token'),
+            fileId: '4g4mz6qi8u',
+            projectId: '4',
+            // degrade: true,
+            getRouter: () => router,
+            route,
+          };
        },
      },
      {
@@ -41,11 +48,17 @@ const routes: Array<RouteRecordRaw> = [
          icon: 'ant-design:file',
        },
        component: WujieVueRendererAdapter,
-        props: {
-          url: `${VITE_RENDERER_URL}`,
-          accessToken: localStorage.getItem('y-code-access-token'),
-          fileId: '7pftwojzu',
-          projectId: '4',
+        props: (route) => {
+          console.log('route', route);
+          console.log('route.query', route.query);
+          return {
+            url: `${VITE_RENDERER_URL}`,
+            accessToken: localStorage.getItem('y-code-access-token'),
+            fileId: '45ucatjys',
+            projectId: '4',
+            getRouter: () => router,
+            route,
+          };
        },
      },
    ],
--- a/apps/platform/src/router/routes/modules/static-file.ts
+++ b/apps/platform/src/router/routes/modules/static-file.ts
@@ -3,6 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
 import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';

 import { VITE_RENDERER_URL } from '#/constants';
+import { router } from '#/router';

 const routes: RouteRecordRaw[] = [
  {
@@ -27,7 +28,8 @@ const routes: RouteRecordRaw[] = [
          fileId: '7pfr394d6',
          projectId: 4,
          name: '7pfr394d6',
-          sync: true,
+          degrade: true,
+          getRouter: () => router,
        },
      },
    ],
--- a/apps/renderer/src/App.vue
+++ b/apps/renderer/src/App.vue
@@ -6,15 +6,8 @@ import { jsonp, request } from '@vtj/utils';
 import { createProvider } from '@vtj/web';
 import { ElLoading, ElMessage } from 'element-plus';

-import { getFile } from './io';
 import { LowCodeService } from './service';

-console.log('window', window);
-
-const rawWindow = window;
-
-console.log('window.$wujie', window.$wujie);
-
 // 定义 wujie props 的类型
 interface WujieProps {
  accessToken?: string;
@@ -26,7 +19,7 @@ interface WujieProps {
 }

 // 从 wujie props 获取数据，提供默认值
-const wujieProps: WujieProps = window.$wujie?.props || {};
+const wujieProps: WujieProps = window.$wujie?.props;
 console.log('wujie props:', wujieProps);

 // 响应式状态
@@ -104,15 +97,11 @@ const getRenderComponent = async () => {
        const instance = getCurrentInstance();
        instance?.appContext.app.use(lowCodeProvider);
        try {
-          const file = await getFile(wujieProps.fileId);
-          const { renderer } = await lowCodeProvider.createDslRenderer(
-            file.published_dsl,
-            {
-              // window: rawWindow,
-            },
+          const renderComponent = await lowCodeProvider.getRenderComponent(
+            wujieProps.fileId,
          );
          console.log('渲染组件获取成功');
-          resolve(renderer);
+          resolve(renderComponent);
        } catch (error) {
          console.error('获取渲染组件失败:', error);
          ElMessage.error('获取渲染组件失败');
@@ -177,7 +166,7 @@ onMounted(async () => {

 <template>
  <div class="renderer-container">
-    <component :is="renderer" v-if="renderer" :wujie-props="wujieProps" />
+    <component :is="renderer" v-if="renderer" v-bind="wujieProps" />

    <div v-else-if="!isLoading && isError" class="error-message">
      组件加载失败，请检查参数和网络连接
@@ -191,6 +180,7 @@ onMounted(async () => {

 <style scoped>
 .renderer-container {
+  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  width: 100%;
--- a/apps/renderer/src/index.ts
+++ b/apps/renderer/src/index.ts
@@ -8,7 +8,6 @@ import ElementPlus from 'element-plus';

 import App from './App.vue';

-// import '@sy/web-vitals';
 import 'element-plus/dist/index.css';
 import '@vtj/ui/dist/style.css';