chore: 渲染适配器版本更新

chore: 使用 provide 实现上下文共享
test: 渲染器应用深度监听当入参发生变化时重新渲染组件
2025-03-31 13:49:22 +08:00 · 2025-03-31 11:30:50 +08:00 · 2025-03-31 11:23:19 +08:00 · 2025-03-31 11:13:05 +08:00 · 2025-03-31 10:43:18 +08:00 · 2025-03-30 18:13:47 +08:00
26 changed files with 1795 additions and 1547 deletions
--- a/apps/designer/package.json
+++ b/apps/designer/package.json
@ -15,17 +15,17 @@
    "typecheck": "vue-tsc --noEmit --skipLibCheck"
  },
  "dependencies": {
-    "@vtj/core": "^0.11.7",
-    "@vtj/designer": "0.11.7",
-    "@vtj/icons": "0.11.7",
-    "@vtj/local": "^0.11.7",
-    "@vtj/materials": "^0.11.7",
+    "@vtj/core": "^0.11.12",
+    "@vtj/designer": "0.11.12",
+    "@vtj/icons": "0.11.12",
+    "@vtj/local": "^0.11.12",
+    "@vtj/materials": "^0.11.12",
    "@vtj/node": "0.11.2",
-    "@vtj/pro": "^0.11.7",
-    "@vtj/renderer": "^0.11.7",
-    "@vtj/ui": "^0.11.7",
-    "@vtj/utils": "0.11.7",
-    "@vtj/web": "^0.11.7",
+    "@vtj/pro": "^0.11.12",
+    "@vtj/renderer": "^0.11.12",
+    "@vtj/ui": "^0.11.12",
+    "@vtj/utils": "0.11.12",
+    "@vtj/web": "^0.11.12",
    "axios": "^1.8.1",
    "element-plus": "^2.9.4",
    "licia-es": "^1.46.0",
--- a/apps/designer/src/views/index.vue
+++ b/apps/designer/src/views/index.vue
@ -28,10 +28,10 @@ onMounted(async () => {
    console.log('get parent model', model);
    userStore.setToken(model.accessToken);
    localStorage.setItem('y-code-access-token', model.accessToken);
-    // request.useRequest((req) => {
-    //   req.headers.set('Authorization', `Bearer ${model.accessToken}`);
-    //   return req;
-    // });
+    request.useRequest((req) => {
+      req.headers.set('Authorization', `Bearer ${model.accessToken}`);
+      return req;
+    });
    sessionStorage.setItem('projectId', model.projectId);
    const _engine = new Engine({
      container,
@ -66,7 +66,7 @@ onMounted(async () => {

    widgetManager.set('History', {
      // 有 bug，先隐藏
-      invisible: true
+      // invisible: true
    });
  });
 });
--- a/apps/designer/src/views/preview.vue
+++ b/apps/designer/src/views/preview.vue
@ -9,10 +9,10 @@ import { jsonp, request } from '@vtj/utils';

 const userStore = useUserStore();
 const service = new LowCodeService();
-// request.useRequest((req) => {
-//   req.headers.set('Authorization', `Bearer ${userStore.token}`);
-//   return req;
-// });
+request.useRequest((req) => {
+  req.headers.set('Authorization', `Bearer ${userStore.token}`);
+  return req;
+});
 const { provider, onReady } = createProvider({
  mode: ContextMode.Runtime,
  service,
--- a/apps/platform/CHANGELOG.md
+++ b/apps/platform/CHANGELOG.md
@ -1,5 +1,12 @@
 # @sy/y-code-platform

+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @sy/wujie-vue3-renderer-adapter@1.0.2
+
 ## 1.0.1

 ### Patch Changes
--- a/apps/platform/package.json
+++ b/apps/platform/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sy/y-code-platform",
-  "version": "1.0.1",
+  "version": "1.0.2",
  "private": true,
  "author": {
    "name": "wangxuefeng",
--- a/apps/platform/src/router/routes/modules/application.ts
+++ b/apps/platform/src/router/routes/modules/application.ts
@ -11,6 +11,7 @@ const routes: Array<RouteRecordRaw> = [
    meta: {
      title: '应用管理',
      icon: 'ant-design:appstore-outlined',
+      hideInMenu: true,
    },
    children: [
      {
--- a/apps/platform/src/router/routes/modules/micro.ts
+++ b/apps/platform/src/router/routes/modules/micro.ts
@ -33,6 +33,7 @@ const routes: RouteRecordRaw[] = [
            url: `${VITE_DESIGNER_URL}`,
            projectId: LOW_CODE_PROJECT_ID,
            name: 'admin-designer',
+            accessToken: localStorage.getItem('y-code-access-token'),
            route,
          };
        },
--- a/apps/platform/src/router/routes/modules/project.ts
+++ b/apps/platform/src/router/routes/modules/project.ts
@ -12,9 +12,10 @@ const routes: Array<RouteRecordRaw> = [
    path: '/project',
    name: moduleName,
    meta: {
-      hideInMenu: true,
+      // hideInMenu: true,
      title: '项目管理',
      icon: 'ant-design:appstore-outlined',
+      redirect: '/project/list',
    },
    children: [
      {
@ -23,7 +24,7 @@ const routes: Array<RouteRecordRaw> = [
        meta: {
          title: '项目列表',
          icon: 'ant-design:list',
-          hideInMenu: true,
+          // hideInMenu: true,
        },
        component: Renderer,
        props: (route) => {
--- a/apps/renderer/index.html
+++ b/apps/renderer/index.html
@ -10,5 +10,19 @@
  <body>
    <div id="y-code-renderer" style="width: 100%; height: 100%"></div>
    <script type="module" src="/src/index.ts"></script>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-LPQRRS1VVF"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-LPQRRS1VVF');
+    </script>
  </body>
 </html>
--- a/apps/renderer/package.json
+++ b/apps/renderer/package.json
@ -16,15 +16,15 @@
  "dependencies": {
    "@sentry/vue": "^9.7.0",
    "@tanstack/vue-query": "^5.69.0",
-    "@vtj/charts": "^0.11.7",
-    "@vtj/core": "^0.11.7",
-    "@vtj/icons": "0.11.7",
-    "@vtj/materials": "^0.11.7",
-    "@vtj/pro": "^0.11.7",
-    "@vtj/renderer": "^0.11.7",
-    "@vtj/ui": "^0.11.7",
-    "@vtj/utils": "^0.11.7",
-    "@vtj/web": "^0.11.7",
+    "@vtj/charts": "^0.11.12",
+    "@vtj/core": "^0.11.12",
+    "@vtj/icons": "0.11.12",
+    "@vtj/materials": "^0.11.12",
+    "@vtj/pro": "^0.11.12",
+    "@vtj/renderer": "^0.11.12",
+    "@vtj/ui": "^0.11.12",
+    "@vtj/utils": "^0.11.12",
+    "@vtj/web": "^0.11.12",
    "ant-design-vue": "catalog:",
    "axios": "catalog:",
    "core-js": "catalog:",
--- a/apps/renderer/src/App.vue
+++ b/apps/renderer/src/App.vue
@ -1,7 +1,15 @@
 <script setup lang="ts">
 import type { AxiosInterceptorManager, AxiosResponse } from 'axios';

-import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  watch,
+} from 'vue';

 import { useQuery } from '@tanstack/vue-query';
 import { jsonp, request } from '@vtj/utils';
@ -49,7 +57,7 @@ interface InitParams {
 // 响应式状态
 const renderer = ref();
 const lowCodeService = new LowCodeService();
-const isLoading = ref(false);
+const isLoading = ref(true);
 const provider = ref(null);
 const loadingInstance = ref(null);
 const errorMessage = ref('');
@ -237,6 +245,131 @@ const notifyParent = (event: string, data?: any) => {
  }
 };

+// 创建响应式上下文对象
+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;
+
+  // 获取当前 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;
+
+      // 解析新的 props
+      const newProps = JSON.parse(currentPropsSnapshot);
+      const oldParams = initParams.value;
+
+      // 更新 initParams
+      initParams.value = {
+        ...newProps,
+        _timestamp: Date.now(),
+      };
+
+      // 如果上下文已初始化，更新上下文
+      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 (
+        isValidParams(initParams.value) &&
+        (oldParams?.fileId !== initParams.value.fileId ||
+          oldParams?.projectId !== initParams.value.projectId)
+      ) {
+        console.log('核心参数发生变化，重新加载组件');
+        reloadComponent();
+      }
+    }
+  }, 300);
+
+  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 +377,7 @@ onMounted(async () => {
    notifyParent('ready', 'y-code-renderer is ready');
  }

-  // 获取初始化参数 - 在挂载时执行一次
+  // 获取初始化参数
  initParams.value = getInitParams();
  const paramsValid = isValidParams(initParams.value);

@ -264,6 +397,12 @@ onMounted(async () => {
      renderer.value = component;
      if (isWujieSubApp) {
        notifyParent('render-success');
+
+        // 初始化上下文
+        initContext();
+
+        // 设置 wujie props 监听器
+        setupWujiePropsWatcher();
      }
    } else {
      if (isWujieSubApp) {
@ -284,8 +423,7 @@ onMounted(async () => {
    <component
      :is="renderer"
      v-if="renderer"
-      :ctx-props="initParams"
-      v-bind="initParams"
+      :ctx-props="contextRef"
      style="width: 100%; height: 100%"
    />

@ -296,10 +434,6 @@ onMounted(async () => {
    <div v-else-if="!isLoading && isError" class="error-message">
      {{ errorMessage || '组件加载失败，请检查参数和网络连接' }}
    </div>
-
-    <div v-else-if="!isLoading" class="error-message">
-      {{ errorMessage || '组件加载失败，请检查控制台日志' }}
-    </div>
  </div>
 </template>

--- a/apps/y-code-v1/.env.development
+++ b/apps/y-code-v1/.env.development
@ -7,4 +7,6 @@ VITE_OA_BASEURL = https://oa-pre.shiyue.com

 VITE_YCODE_BASEURL = https://custom-chart-pre-api.shiyue.com

+VITE_CLIENT_ID = y-code-v1
+
 VITE_YCODE_BASEURL_FRONT = https://custom-chart.shiyue.com
--- a/apps/y-code-v1/index.html
+++ b/apps/y-code-v1/index.html
@ -7,7 +7,7 @@
    <title>悦码后台</title>
  </head>
  <body>
-    <div id="y-code-app"></div>
+    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/apps/y-code-v1/package.json
+++ b/apps/y-code-v1/package.json
@ -4,7 +4,7 @@
  "private": true,
  "type": "module",
  "scripts": {
-    "dev": "vite start --mode development",
+    "dev": "vite start --mode development --config vite.config.ts",
    "dev:staging": "vite start --mode dev-staging",
    "dev:prod": "vite start --mode dev-production",
    "build": "vite build --mode production",
@ -23,6 +23,7 @@
    "core-js": "^3.40.0",
    "cross-env": "^7.0.3",
    "dayjs": "catalog:",
+    "jsrsasign": "11.1.0",
    "lodash-es": "^4.17.21",
    "p-limit": "^6.1.0",
    "pinia": "catalog:",
--- a/apps/y-code-v1/src/main.ts
+++ b/apps/y-code-v1/src/main.ts
@ -49,7 +49,7 @@ function render(props: object = {}) {
  app.use(router);
  app.use(VueGridLayout);
  app.use(createPinia());
-  app.mount('#y-code-app');
+  app.mount('#app');
 }

 function setStyleSheet(styles: object = {}) {
--- a/apps/y-code-v1/src/utils/request.ts
+++ b/apps/y-code-v1/src/utils/request.ts
@ -2,6 +2,8 @@ import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

 import { message } from 'ant-design-vue';
 import axios, { AxiosError } from 'axios';
+// 导入 RSA 相关库
+import { KEYUTIL, KJUR } from 'jsrsasign';

 export interface ResopnseType<T> {
  reason: string;
@ -9,11 +11,55 @@ export interface ResopnseType<T> {
  data: T;
  ts: string;
 }
-// export const YCODE_BASEURL: string = import.meta.env.VITE_YCODE_BASEURL;
+export const YCODE_BASEURL: string = import.meta.env.VITE_YCODE_BASEURL;

-// https://custom-chart-pre-api.shiyue.com
+// RSA 签名相关配置
+const CLIENT_ID = import.meta.env.VITE_CLIENT_ID;

-export const YCODE_BASEURL: string = 'https://custom-chart-pre-api.shiyue.com';
+// 私钥配置，请在实际使用中安全存储
+const PRIVATE_KEY = `-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAySeb8CMlvGzI8KasmiQwMCX4240e8Ap6W8Pb63iX57pBFpmV
+fcOy7BAsfOEtp3TrJkssszUxdnCmsASZQNHaJtIhide7DjXjct9MQ3tqeEtc2R2K
+EkauK7oLsAiQqkpb9XpWAURfoE+83kCrJuQ49frw/zz7PElTPgjAjPknyF/JJFEp
+BoasWhoFBwrZWFwQKWUmFaUodG3UjtXdepYFVfdGKmgPYerm1Os3BQu6oSCKvh+p
+4uaRrAyKLBdTYXHfYiJi+oRt9wSSA0eGS8IcMxWn0azzEeZoPldLRSZ4Hpxx9Amq
+iNOu7FmKP5azKxmTG6dp+ZyVgpQt9FA4YYNU9wIDAQABAoIBAFZEQGIKEMLwPHTI
+Zjlsz6W2gzVVHjF/rN3x7zza6PqeLA/PKgdXiEIo5Ytg3r10LOytTKxGYcITqcjP
+EBJ2bQI9F9kPxc7gWX0IOqKuKQkR+O2791zDJyrljOGfqrr9TNbH8l50vjX4PF1s
+inoRYkRLrFMqCeze3W47Pqi2qdMKTmb0fjAjf9pQM/lE/jAWquUQhU8efZW0+2SD
+MMhXJceMS7SgkoOgsg1Qw7iEY5iMBMUOMb9bh4RxRkEZDECgm1iZsZqq004wFuVz
+RKbM//jGyNDQYZKH6TCZgC4UAPXt+PrwLC0oPrL0qZgK47dJznWzLZln2efYli+I
+PuAa6DECgYEA67J/XfLbyow2fLArbmiO1Gt9fQtFnd9xapMcj+xOQtP/DBmbukLK
+CYluSKED8+zKdP33t0dk4FHsrshEI85NsfBjp3GiHjbcFiOjddEyY9tHZxzMlJxB
+dS9u+LAfkPN8LBk4hX5YJ/oAhWcmCJ7agDPSGt+nJeTP2U3Mu5+7B+MCgYEA2ntk
+s3Gmi+n6gFQq97ANsYik+81wo/TDtqTcbmekqgSelsfNFlOeN4EOWJnXdt6/lZqs
+54kmlTUZzXy3I1Fe+z8FKBpulKxvVlCZ+Ks4tbjI5peJXL0mWHdbJ2Tg4AvbjQ5E
+z5efQGHbuBeFMty20JnjFlUrDd4x8Mj+dwP3Qt0CgYAhje3YACUONtvi8GmedEAx
+OYRJ8vrcON06oOrmCmwx02Bx5otm/u8oYGpU6KdZaJKCCU3kx8MytDcPwu8AcfRZ
+qrFlOyYrSwAWHsi8kyWrVaJaqZzuYzhmaHRR7zDvP9qjpIuJZa1DM7IzS7X8cDEH
+I1l7/e8b0/FLLGpDI8BKpQKBgQCJos5vlRs8bSwYB+4Bl3Eo9FIrJuLdBub8eqM7
+EiPTz5Ewn7H9bLPxd2XYPyJTikPbNVPTkL0zpf4ZS4X7w9k4Ih1XhD9Bfdet4pz8
+4LCbGkvFqJUqTSaI+Lf9+zkHK7EmDWUf+f6jCoLmWDrbLdwlUayTdxfmZqHDdHuJ
+8n+kKQKBgA1lR4zITE1qh+eMsueYPlOs32SP9jcx5fbTPxQpaqQJXSqvVb7ZHmfx
+qwzhQTzcKjSEhlD15ct5RqxD+4KmGid8bM5fewzYnORw+u2O1g74owgq0ApCVsRU
+/wsYRNpoRHJxU69kzkl8rSulJjQ0rOOz0/TyDbONhmM7Bv0cQAAA
+-----END RSA PRIVATE KEY-----`;
+
+// 需要添加签名的 API 路径前缀
+const NEED_SIGN_PATHS = [
+  '/v1/project',
+  '/v1/preview',
+  '/v1/modular',
+  '/v1/field',
+];
+
+// 初始化私钥
+let privateKey: string;
+try {
+  privateKey = KEYUTIL.getKey(PRIVATE_KEY);
+} catch (error) {
+  console.error('RSA 私钥初始化失败:', error);
+}

 const requestType = {
  base: YCODE_BASEURL,
@ -25,6 +71,57 @@ const baseAxios: AxiosInstance = axios.create({
  withCredentials: true,
 });

+// 创建 RSA 签名
+function createSignature(message: string): string {
+  try {
+    const sig = new KJUR.crypto.Signature({ alg: 'SHA256withRSA' });
+    sig.init(privateKey);
+    sig.updateString(message);
+    return btoa(sig.sign());
+  } catch (error) {
+    console.error('签名创建失败:', error);
+    return '';
+  }
+}
+
+// 请求拦截器 - 添加 RSA 签名认证
+baseAxios.interceptors.request.use(
+  (config) => {
+    // 检查是否需要添加签名
+    const needSign = NEED_SIGN_PATHS.some(
+      (path) => config.url && config.url.startsWith(path),
+    );
+
+    if (needSign && privateKey) {
+      // 生成当前时间戳（秒）
+      const timestamp = Math.floor(Date.now() / 1000).toString();
+
+      // 构建要签名的消息: clientID + timestamp
+      const message = CLIENT_ID + timestamp;
+
+      // 创建签名
+      const signature = createSignature(message);
+
+      // 设置请求头
+      config.headers = config.headers || {};
+      config.headers['X-Client-ID'] = CLIENT_ID;
+      config.headers['X-Timestamp'] = timestamp;
+      config.headers['X-Signature'] = signature;
+
+      console.log('已添加签名认证:', {
+        url: config.url,
+        clientId: CLIENT_ID,
+        timestamp,
+      });
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
 const errorHandle = (error: AxiosError) => {
  if (error.response) {
    const status = error.response?.status;
--- a/apps/y-code-v1/start/components.d.ts
+++ b/apps/y-code-v1/start/components.d.ts
@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/apps/y-code-v1/vite.config.ts
+++ b/apps/y-code-v1/vite.config.ts
@ -9,7 +9,7 @@ import mkcert from 'vite-plugin-mkcert';
 import qiankun from 'vite-plugin-qiankun';

 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), ['VITE_']);
+  const env = loadEnv(mode, process.cwd());
  const isDev = env.VITE_NODE_ENV === 'development';

  return {
--- a/packages/renderer-adapter/wujie-vue2/CHANGELOG.md
+++ b/packages/renderer-adapter/wujie-vue2/CHANGELOG.md
@ -1,5 +1,11 @@
 # @sy/wujie-vue2-renderer-adapter

+## 1.0.1
+
+### Patch Changes
+
+- 渲染适配器增加 props 深度监听处理
+
 ## 1.0.0

 ### Patch Changes
--- a/packages/renderer-adapter/wujie-vue2/package.json
+++ b/packages/renderer-adapter/wujie-vue2/package.json
@ -1,6 +1,6 @@
 {
  "name": "@sy/wujie-vue2-renderer-adapter",
-  "version": "1.0.0",
+  "version": "1.0.1",
  "description": "wujie-vue2 ycode renderer adapter",
  "type": "module",
  "scripts": {
--- a/packages/renderer-adapter/wujie-vue2/src/adapter.vue
+++ b/packages/renderer-adapter/wujie-vue2/src/adapter.vue
@ -9,11 +9,53 @@ import { version } from '/package.json';

 export default defineComponent({
  name: 'WujieAdapter',
+  data() {
+    return {
+      // 使用 data 创建可变的 subAppProps
+      subAppPropsData: this.getInitialSubAppProps(),
+    };
+  },
  computed: {
    finalUrl() {
      return `${this.url}?fileId=${this.fileId}&projectId=${this.projectId}&applicationId=${this.applicationId}`;
    },
-    subAppProps() {
+  },
+  watch: {
+    // 监听所有 props 变化
+    $props: {
+      handler(newProps) {
+        console.log('props 发生变化，更新 subAppProps');
+        this.updateSubAppProps(newProps);
+      },
+      deep: true, // 深度监听，捕获嵌套属性变化
+      immediate: true, // 立即执行一次
+    },
+    // 单独监听常用的几个关键 prop，以确保它们的变化被捕获
+    fileId() {
+      this.updateSubAppProps(this.$props);
+    },
+    projectId() {
+      this.updateSubAppProps(this.$props);
+    },
+    applicationId() {
+      this.updateSubAppProps(this.$props);
+    },
+    payload: {
+      handler() {
+        this.updateSubAppProps(this.$props);
+      },
+      deep: true,
+    },
+    searchParams: {
+      handler() {
+        this.updateSubAppProps(this.$props);
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    // 获取初始 subAppProps
+    getInitialSubAppProps() {
      return {
        ...this.$props,
        adapterInfo: {
@ -21,15 +63,26 @@ export default defineComponent({
        },
      };
    },
-  },
-  beforeUnmount() {
-    const { bus } = WujieVue;
-    bus.$off('message', this.handleMessage);
-    bus.$off('ready', this.handleReady);
-    bus.$off('render-success', this.handleRenderSuccess);
-    bus.$off('render-fail', this.handleRenderFail);
-  },
-  methods: {
+    // 更新 subAppProps
+    updateSubAppProps(props) {
+      this.subAppPropsData = {
+        ...props,
+        adapterInfo: {
+          version,
+        },
+        _timestamp: Date.now(), // 添加时间戳确保每次更新都是新对象
+      };
+
+      // 如果子应用已加载，可以通过 bus 通知它 props 已更新
+      if (this.name || this.fileId) {
+        try {
+          const { bus } = WujieVue;
+          bus.$emit('props-updated', this.subAppPropsData);
+        } catch (error) {
+          console.error('发送 props 更新事件失败:', error);
+        }
+      }
+    },
    afterMount(appWindow: any) {
      console.log(`${this.name || this.fileId} 加载完成`, appWindow);
    },
@ -56,6 +109,13 @@ export default defineComponent({
    bus.$on('render-success', this.handleRenderSuccess);
    bus.$on('render-fail', this.handleRenderFail);
  },
+  beforeUnmount() {
+    const { bus } = WujieVue;
+    bus.$off('message', this.handleMessage);
+    bus.$off('ready', this.handleReady);
+    bus.$off('render-success', this.handleRenderSuccess);
+    bus.$off('render-fail', this.handleRenderFail);
+  },
  props: {
    applicationId: {
      required: true,
@ -90,6 +150,10 @@ export default defineComponent({
    router: {
      type: Object,
    },
+    searchParams: {
+      default: () => ({}),
+      type: Object,
+    },
    sync: {
      default: true,
      type: Boolean,
@ -110,7 +174,7 @@ export default defineComponent({
    width="100%"
    height="100%"
    :degrade="degrade"
-    :props="subAppProps"
+    :props="subAppPropsData"
    :before-load="beforeLoad"
    :after-mount="afterMount"
    :interceptors="interceptors"
--- a/packages/renderer-adapter/wujie-vue3/CHANGELOG.md
+++ b/packages/renderer-adapter/wujie-vue3/CHANGELOG.md
@ -1,5 +1,11 @@
 # @sy/wujie-vue3-renderer-adapter

+## 1.0.2
+
+### Patch Changes
+
+- 渲染适配器增加 props 深度监听处理
+
 ## 1.0.0

 ### Patch Changes
--- 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.2",
  "description": "wujie-vue3 ycode renderer adapter",
  "type": "module",
  "scripts": {
--- 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';

@ -41,6 +41,7 @@ const props = withDefaults(
    route: undefined,
    // 默认不使用 router
    router: undefined,
+    searchParams: () => ({}),
    sync: true,
    url: 'https://y-code-renderer.shiyue.com',
  },
@ -62,6 +63,28 @@ const { bus } = WujieVue;
 //   // InstanceofPlugin(),
 // ];

+// 使用 ref 创建响应式的 subAppProps
+const subAppProps = ref({
+  ...props,
+  adapterInfo: {
+    version,
+  },
+});
+
+// 监听 props 的所有变化
+watch(
+  () => ({ ...props }),
+  (newProps) => {
+    subAppProps.value = {
+      ...newProps,
+      adapterInfo: {
+        version,
+      },
+    };
+  },
+  { deep: true },
+);
+
 // 生命周期钩子
 const beforeLoad = (appWindow: Window) => {
  console.log(`${props.name} 开始加载`, appWindow);
@ -76,14 +99,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}`;
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -166,7 +166,7 @@ catalog:
  unbuild: ^3.5.0
  unplugin-element-plus: ^0.9.1
  vee-validate: ^4.15.0
-  vite: ^6.2.1
+  vite: ^6.2.2
  vite-plugin-compression: ^0.5.1
  vite-plugin-dts: ^4.5.3
  vite-plugin-html: ^3.2.2
Author	SHA1	Message	Date
wangxuefeng	813547331d	chore: 渲染适配器版本更新	2025-03-31 13:49:22 +08:00
wangxuefeng	6b2c7bad00	chore: 使用 provide 实现上下文共享	2025-03-31 11:30:50 +08:00
wangxuefeng	a64433e57b	test: 渲染器应用深度监听当入参发生变化时重新渲染组件	2025-03-31 11:23:19 +08:00
wangxuefeng	2df2e3cffb	test: 深监听检测测试	2025-03-31 11:13:05 +08:00
wangxuefeng	99b207ec59	chore: 渲染器定时查询 wujieProps 确认是否修改了入参	2025-03-31 10:43:18 +08:00
wangxuefeng	cf1fab8c58	chore: 更新低代码引擎版本，更新平台页面	2025-03-30 18:13:47 +08:00
wangxuefeng	aa6f8cfd62	替换渲染器的 ga id	2025-03-28 17:01:13 +08:00
wangxuefeng	fcd44e49d2	chore: 悦码渲染器增加 ga 分析	2025-03-28 16:12:53 +08:00
wangxuefeng	799a775a8d	chore(renderer): 删除异常提示	2025-03-27 18:58:55 +08:00
wangxuefeng	e201381495	chore(renderer): 初始渲染器时默认处于 loading 中	2025-03-27 18:52:52 +08:00