diff --git a/apps/renderer/src/App.vue b/apps/renderer/src/App.vue index 8e44a37..8a1d8d0 100644 --- a/apps/renderer/src/App.vue +++ b/apps/renderer/src/App.vue @@ -5,6 +5,8 @@ import { getCurrentInstance, onBeforeUnmount, onMounted, + provide, + reactive, ref, watch, } from 'vue'; @@ -243,7 +245,23 @@ const notifyParent = (event: string, data?: any) => { } }; -// 添加一个函数来检测 wujie props 的变化并更新 initParams +// 创建响应式上下文对象 +const contextRef = ref(null); + +// 初始化上下文 +const initContext = () => { + if (!isValidParams(initParams.value)) return; + + contextRef.value = reactive({ + ...initParams.value, + updateTimestamp: Date.now(), + }); +}; + +// 提供上下文给所有子组件 +provide('lowCodeContext', contextRef); + +// 添加一个函数来检测 wujie props 的变化并更新上下文 const setupWujiePropsWatcher = () => { if (!isWujieSubApp) return; @@ -266,17 +284,31 @@ const setupWujiePropsWatcher = () => { // 更新快照 prevPropsSnapshot = currentPropsSnapshot; - // 获取当前的 props,并确保创建新的对象引用 + // 解析新的 props const newProps = JSON.parse(currentPropsSnapshot); const oldParams = initParams.value; - // 创建新的引用,确保子组件能检测到变化 + // 更新 initParams initParams.value = { ...newProps, - _timestamp: Date.now(), // 添加时间戳确保每次更新都是新对象 + _timestamp: Date.now(), }; - console.log('initParams 已更新为新对象:', initParams.value); + // 如果上下文已初始化,更新上下文 + if (contextRef.value) { + // 使用 Object.assign 保持响应式 + Object.assign(contextRef.value, { + ...newProps, + updateTimestamp: Date.now(), + }); + + console.log('上下文已更新:', contextRef.value); + + // 触发上下文更新事件 + if (isWujieSubApp) { + window.$wujie.bus.$emit('context-updated', contextRef.value); + } + } // 如果核心参数发生变化,重新加载组件 if ( @@ -286,38 +318,15 @@ const setupWujiePropsWatcher = () => { ) { console.log('核心参数发生变化,重新加载组件'); reloadComponent(); - } else { - // 即使没有重新加载组件,也需要强制更新渲染器 - forceUpdateRenderer(); } } }, 300); - // 组件卸载时清除定时器 onBeforeUnmount(() => { clearInterval(intervalId); }); }; -// 添加一个方法强制更新渲染器 -const forceUpdateRenderer = () => { - if (renderer.value && typeof renderer.value.update === 'function') { - // 如果渲染器组件提供了 update 方法,调用它 - console.log('调用渲染器的 update 方法'); - renderer.value.update(initParams.value); - } else { - // 尝试通过临时移除并重新添加组件来强制刷新 - console.log('强制刷新渲染器组件'); - const temp = renderer.value; - renderer.value = null; - - // 在下一个周期重新设置组件,强制重新渲染 - setTimeout(() => { - renderer.value = temp; - }, 0); - } -}; - // 重新加载组件的函数 const reloadComponent = async () => { if (!isValidParams(initParams.value)) { @@ -389,6 +398,9 @@ onMounted(async () => { if (isWujieSubApp) { notifyParent('render-success'); + // 初始化上下文 + initContext(); + // 设置 wujie props 监听器 setupWujiePropsWatcher(); } @@ -411,9 +423,7 @@ onMounted(async () => { diff --git a/packages/renderer-adapter/wujie-vue3/src/adapter.vue b/packages/renderer-adapter/wujie-vue3/src/adapter.vue index e713456..79040d2 100644 --- a/packages/renderer-adapter/wujie-vue3/src/adapter.vue +++ b/packages/renderer-adapter/wujie-vue3/src/adapter.vue @@ -26,7 +26,6 @@ const props = withDefaults( projectId: number; route?: RouteRecordRaw; router?: Router; - searchParams?: Record; sync?: boolean; url?: string; }>(),