chore: vtj 依赖更新，微应用集成 postmate

2025-02-26 17:26:19 +08:00
parent 11018965bd
commit f7468bde86
22 changed files with 1581 additions and 1035 deletions
--- a/apps/platform/package.json
+++ b/apps/platform/package.json
@@ -29,6 +29,8 @@
  "dependencies": {
    "@ant-design/icons-vue": "~7.0.1",
    "@iconify/vue": "^4.3.0",
+    "@iframe-resizer/parent": "^5.3.3",
+    "@sy/low-code-renderer-adapter": "workspace:*",
    "@vueuse/core": "~11.1.0",
    "ant-design-vue": "~4.2.6",
    "axios": "~1.7.9",
@@ -42,6 +44,7 @@
    "nprogress": "1.0.0-1",
    "pinia": "~2.2.8",
    "pinia-plugin-persistedstate": "^4.2.0",
+    "postmate": "^1.5.2",
    "qs": "~6.13.1",
    "sortablejs": "~1.15.6",
    "vue": "~3.5.13",
@@ -49,7 +52,7 @@
    "vue-router": "~4.4.5",
    "vue-types": "~5.1.3",
    "vue-virtual-scroller": "2.0.0-beta.8",
-    "wujie-vue3": "^1.0.24",
+    "wujie": "^1.0.25",
    "xlsx": "~0.18.5"
  },
  "devDependencies": {
--- a/apps/platform/src/components/micro-container/index.vue
+++ b/apps/platform/src/components/micro-container/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- <div id="container" /> -->
  <iframe
    ref="iframeRef"
    width="100%"
@@ -10,8 +11,23 @@
 </template>

 <script setup>
+  import { onMounted } from 'vue';
+  import { setupApp, startApp } from 'wujie';
  import { useRoute } from 'vue-router';
-  import WujieVue from 'wujie-vue3';
-
  const route = useRoute();
+  console.log(route.meta?.app);
+  // onMounted(() => {
+  //   setupApp({
+  //     el: '#container',
+  //     ...route.meta?.app,
+  //   });
+  //   startApp({ ...route.meta?.app });
+  // });
 </script>
+
+<style scoped>
+  #container {
+    width: 100%;
+    height: 100%;
+  }
+</style>
--- a/apps/platform/src/components/renderer-adapter/index.vue
+++ b/apps/platform/src/components/renderer-adapter/index.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  import Postmate from 'postmate';
+  import { Spin, Alert, Button } from 'ant-design-vue';
+
+  const route = useRoute();
+  const MAX_RETRIES = 3;
+
+  const loading = ref(true);
+  const errorMessage = ref('');
+  const retryCount = ref(0);
+
+  const initPostmate = async () => {
+    loading.value = true;
+    errorMessage.value = '';
+    const container = document.getElementById('low-code-adapter');
+    console.log('container', container);
+    if (!container) {
+      errorMessage.value = '容器元素未找到';
+      loading.value = false;
+      return;
+    }
+
+    const handle = new Postmate({
+      container,
+      url: route.meta?.app?.url,
+      name: 'low-code-renderer',
+      classListArray: ['responsive-iframe'],
+      model: {
+        id: route.meta?.app?.url,
+      },
+    });
+
+    handle
+      .then((instance) => {
+        console.log('Postmate连接成功', instance);
+        retryCount.value = 0; // 重置重试计数器
+      })
+      .catch((err) => {
+        retryCount.value++;
+        errorMessage.value = `连接失败: ${err.message}`;
+        if (retryCount.value < MAX_RETRIES) {
+          initPostmate(); // 自动重试
+        } else {
+          errorMessage.value = '已达到最大重试次数，请检查网络连接';
+        }
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  onMounted(() => {
+    initPostmate();
+  });
+</script>
+
+<template>
+  <div class="iframe-container">
+    <div id="low-code-adapter" />
+
+    <!-- <div v-if="loading" class="loading-overlay">
+      <Spin :tip="`正在连接应用（${retryCount + 1}/${MAX_RETRIES}）`" />
+    </div> -->
+
+    <!-- <div v-if="errorMessage" class="error-overlay">
+      <Alert type="error" :message="errorMessage" show-icon />
+      <Button v-if="retryCount < MAX_RETRIES" @click="initPostmate">重新连接</Button>
+    </div> -->
+  </div>
+</template>
+
+<style>
+  .responsive-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+</style>
+
+<style lang="scss" scoped>
+  .iframe-container {
+    position: relative;
+    height: 100%;
+  }
+
+  #low-code-adapter {
+    width: 100%;
+    height: 100%;
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .error-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+  }
+</style>
--- a/apps/platform/src/main.ts
+++ b/apps/platform/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import Wujie from 'wujie-vue3';
+// import Wujie from 'wujie-vue3';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import utc from 'dayjs/plugin/utc';
@@ -29,7 +29,7 @@ function setupPlugins() {
 }

 async function setupApp() {
-  app.use(Wujie);
+  // app.use(Wujie);

  // 设置时区为上海
  dayjs.tz.setDefault('Asia/Shanghai');
--- a/apps/platform/src/router/routes/modules/application.ts
+++ b/apps/platform/src/router/routes/modules/application.ts
@@ -0,0 +1,36 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+// 微前端路由
+const moduleName = 'application';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/application',
+    name: moduleName,
+    meta: {
+      title: '应用管理',
+      icon: 'ant-design:appstore-outlined',
+    },
+    children: [
+      {
+        path: 'list',
+        name: `${moduleName}-list`,
+        meta: {
+          title: '应用列表',
+          keepAlive: true,
+          icon: 'ant-design:list',
+          app: {
+            url: 'https://localhost:10010',
+            name: 'low-code-platform-application-list',
+            sync: true,
+            alive: true,
+            degrade: true,
+          },
+        },
+        component: () => import('@/components/renderer-adapter/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
--- a/apps/platform/src/router/routes/modules/index.ts
+++ b/apps/platform/src/router/routes/modules/index.ts
@@ -1,5 +1,6 @@
 import dashboard from './dashboard';
 import user from './user';
 import micro from './micro';
+import application from './application';

-export default [...dashboard, ...user, ...micro];
+export default [...dashboard, ...user, ...micro, ...application];
--- a/apps/platform/src/router/routes/modules/micro.ts
+++ b/apps/platform/src/router/routes/modules/micro.ts
@@ -21,9 +21,9 @@ const routes: Array<RouteRecordRaw> = [
          app: {
            url: 'https://localhost:10011',
            name: 'low-code-designer',
-            sync: true,
-            alive: true,
-            degrade: true,
+            // sync: true,
+            // alive: true,
+            // degrade: true,
          },
        },
        component: () => import('@/components/micro-container/index.vue'),
@@ -41,7 +41,7 @@ const routes: Array<RouteRecordRaw> = [
            name: 'low-code-renderer',
            // sync: true,
            // alive: true,
-            // degrade: true,
+            degrade: true,
          },
        },
        component: () => import('@/components/micro-container/index.vue'),
@@ -59,7 +59,7 @@ const routes: Array<RouteRecordRaw> = [
            name: 'y-code-v1',
            // sync: true,
            // alive: true,
-            // degrade: true,
+            degrade: true,
          },
        },
        component: () => import('@/components/micro-container/index.vue'),
--- a/apps/platform/vite.config.ts
+++ b/apps/platform/vite.config.ts
@@ -44,6 +44,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
    },
    server: {
      open: true,
+      host: true,
    },
    plugins: [
      vue(),