From 99b207ec5932bdce03ee4d6df77a879db2fd6e44 Mon Sep 17 00:00:00 2001
From: wangxuefeng <wangxuefeng@shiyue.com>
Date: Mon, 31 Mar 2025 10:43:18 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B8=B2=E6=9F=93=E5=99=A8=E5=AE=9A?=
 =?UTF-8?q?=E6=97=B6=E6=9F=A5=E8=AF=A2=20wujieProps=20=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E4=BF=AE=E6=94=B9=E4=BA=86=E5=85=A5=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/renderer/src/App.vue                     | 104 +++++++++++++++++-
 .../renderer-adapter/wujie-vue3/package.json  |   2 +-
 .../wujie-vue3/src/adapter.vue                |  35 ++++--
 3 files changed, 129 insertions(+), 12 deletions(-)

diff --git a/apps/renderer/src/App.vue b/apps/renderer/src/App.vue
index 9628bb4..3d2a7e4 100644
--- a/apps/renderer/src/App.vue
+++ b/apps/renderer/src/App.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import type { AxiosInterceptorManager, AxiosResponse } from 'axios';
 
-import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
 import { jsonp, request } from '@vtj/utils';
@@ -237,6 +243,97 @@ const notifyParent = (event: string, data?: any) => {
   }
 };
 
+// 添加一个函数来检测 wujie props 的变化并更新 initParams
+const setupWujiePropsWatcher = () => {
+  if (!isWujieSubApp) return;
+
+  // 获取当前 props 的快照
+  let prevPropsSnapshot = window.$wujie?.props
+    ? JSON.stringify(window.$wujie.props)
+    : null;
+
+  // 设置定时器定期检查 props 变化
+  const intervalId = setInterval(() => {
+    if (!window.$wujie?.props) return;
+
+    // 获取最新的 props 并序列化
+    const currentPropsSnapshot = JSON.stringify(window.$wujie.props);
+
+    // 比较是否发生变化
+    if (currentPropsSnapshot !== prevPropsSnapshot) {
+      console.log('检测到 wujie props 变化:', window.$wujie.props);
+
+      // 更新快照
+      prevPropsSnapshot = currentPropsSnapshot;
+
+      // 更新 initParams
+      const newParams = window.$wujie.props as WujieProps;
+      const oldParams = initParams.value;
+
+      // 更新参数
+      initParams.value = newParams;
+
+      // 如果核心参数发生变化，重新加载组件
+      if (
+        isValidParams(newParams) &&
+        (oldParams?.fileId !== newParams.fileId ||
+          oldParams?.projectId !== newParams.projectId)
+      ) {
+        console.log('核心参数发生变化，重新加载组件');
+        reloadComponent();
+      }
+    }
+  }, 300); // 每300ms检查一次，避免过于频繁
+
+  // 组件卸载时清除定时器
+  onBeforeUnmount(() => {
+    clearInterval(intervalId);
+  });
+};
+
+// 重新加载组件的函数
+const reloadComponent = async () => {
+  if (!isValidParams(initParams.value)) {
+    errorMessage.value = '缺少必要参数：fileId 和 projectId';
+    if (isWujieSubApp) {
+      notifyParent('render-fail', errorMessage.value);
+    }
+    return;
+  }
+
+  isLoading.value = true;
+  showLoading('参数已更新，重新加载组件...');
+
+  try {
+    // 如果需要，重置 provider 以强制重新初始化
+    provider.value = null;
+
+    // 重新初始化低代码引擎
+    await initLowCodeEngine();
+
+    // 获取新的渲染组件
+    const component = await getRenderComponent();
+    if (component) {
+      renderer.value = component;
+      if (isWujieSubApp) {
+        notifyParent('render-success');
+      }
+    } else {
+      if (isWujieSubApp) {
+        notifyParent('render-fail', 'Failed to get component');
+      }
+    }
+  } catch (error) {
+    console.error('重新加载过程出错:', error);
+    if (isWujieSubApp) {
+      notifyParent('render-fail', error);
+    }
+  } finally {
+    isLoading.value = false;
+    hideLoading();
+  }
+};
+
 // 组件挂载后执行初始化
 onMounted(async () => {
   // 通知父应用已准备就绪（如果是wujie子应用）
@@ -244,7 +341,7 @@ onMounted(async () => {
     notifyParent('ready', 'y-code-renderer is ready');
   }
 
-  // 获取初始化参数 - 在挂载时执行一次
+  // 获取初始化参数
   initParams.value = getInitParams();
   const paramsValid = isValidParams(initParams.value);
 
@@ -264,6 +361,9 @@ onMounted(async () => {
       renderer.value = component;
       if (isWujieSubApp) {
         notifyParent('render-success');
+
+        // 设置 wujie props 监听器
+        setupWujiePropsWatcher();
       }
     } else {
       if (isWujieSubApp) {
diff --git a/packages/renderer-adapter/wujie-vue3/package.json b/packages/renderer-adapter/wujie-vue3/package.json
index f0065ca..c33c4d1 100644
--- a/packages/renderer-adapter/wujie-vue3/package.json
+++ b/packages/renderer-adapter/wujie-vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sy/wujie-vue3-renderer-adapter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "wujie-vue3 ycode renderer adapter",
   "type": "module",
   "scripts": {
diff --git a/packages/renderer-adapter/wujie-vue3/src/adapter.vue b/packages/renderer-adapter/wujie-vue3/src/adapter.vue
index cf2d06d..e713456 100644
--- a/packages/renderer-adapter/wujie-vue3/src/adapter.vue
+++ b/packages/renderer-adapter/wujie-vue3/src/adapter.vue
@@ -3,7 +3,7 @@ import type { AxiosInterceptorManager } from 'axios';
 
 import type { Router, RouteRecordRaw } from 'vue-router';
 
-import { computed, onBeforeUnmount, onMounted } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import WujieVue from 'wujie-vue3';
 
@@ -26,6 +26,7 @@ const props = withDefaults(
     projectId: number;
     route?: RouteRecordRaw;
     router?: Router;
+    searchParams?: Record<string, any>;
     sync?: boolean;
     url?: string;
   }>(),
@@ -41,6 +42,7 @@ const props = withDefaults(
     route: undefined,
     // 默认不使用 router
     router: undefined,
+    searchParams: () => ({}),
     sync: true,
     url: 'https://y-code-renderer.shiyue.com',
   },
@@ -62,6 +64,29 @@ const { bus } = WujieVue;
 //   // InstanceofPlugin(),
 // ];
 
+// 使用 ref 创建响应式的 subAppProps
+const subAppProps = ref({
+  ...props,
+  adapterInfo: {
+    version,
+  },
+});
+
+// 监听 props 的所有变化
+watch(
+  () => ({ ...props }),
+  (newProps) => {
+    console.log('props 发生变化', newProps);
+    subAppProps.value = {
+      ...newProps,
+      adapterInfo: {
+        version,
+      },
+    };
+  },
+  { deep: true },
+);
+
 // 生命周期钩子
 const beforeLoad = (appWindow: Window) => {
   console.log(`${props.name} 开始加载`, appWindow);
@@ -76,14 +101,6 @@ const handleMessage = (data: any) => {
   console.log(`${props.name} 收到子应用消息:`, data);
 };
 
-// 准备传递给子应用的数据
-const subAppProps = {
-  ...props,
-  adapterInfo: {
-    version,
-  },
-};
-
 const finalUrl = computed(() => {
   return `${props.url}?fileId=${props.fileId}&projectId=${props.projectId}&applicationId=${props.applicationId}`;
 });