chore: 依赖调整

2025-03-21 10:30:12 +08:00
parent e329f77cb2
commit b76b9e9013
9 changed files with 459 additions and 1004 deletions
--- a/apps/renderer/src/App.vue
+++ b/apps/renderer/src/App.vue
@@ -10,22 +10,28 @@ import { LowCodeService } from './service';

 // 定义 wujie props 的类型
 interface WujieProps {
-  // 增加一个 axios 请求拦截器
  interceptors?: {
    request?: (config: any) => any;
    response?: (response: any) => any;
  };
-  accessToken?: string;
+  // 必填参数
+  fileId: string;
+  projectId: number | string;
+  // 可选参数
  applicationId?: number | string;
-  fileId?: string;
  name?: string;
-  projectId?: number | string;
  [key: string]: any;
 }

-// 从 wujie props 获取数据，提供默认值
-const wujieProps: WujieProps = window.$wujie?.props;
-console.log('wujie props:', wujieProps);
+// 定义必要的初始化参数
+interface InitParams {
+  // 必填参数
+  fileId: string;
+  projectId: number | string;
+  // 可选参数
+  applicationId?: number | string;
+  [key: string]: any;
+}

 // 响应式状态
 const renderer = ref();
@@ -33,29 +39,68 @@ const lowCodeService = new LowCodeService();
 const isLoading = ref(false);
 const provider = ref(null);
 const loadingInstance = ref(null);
+const errorMessage = ref('');
+const initParams = ref<InitParams | null>(null);
+
+// 判断是否为wujie子应用
+const isWujieSubApp = window.$wujie !== undefined;
+
+// 从URL解析查询参数
+const getParamsFromUrl = (): Partial<InitParams> => {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    fileId: params.get('fileId') || undefined,
+    projectId: params.get('projectId') || undefined,
+    applicationId: params.get('applicationId') || undefined,
+  };
+};
+
+// 按优先级获取初始化参数
+const getInitParams = (): InitParams | null => {
+  // 1. 优先从wujie props获取
+  if (isWujieSubApp && window.$wujie?.props) {
+    const props = window.$wujie.props;
+    // 确保必填参数存在
+    if (props.fileId && props.projectId) {
+      console.log('使用wujie props初始化渲染器');
+      return props as InitParams;
+    }
+  }
+
+  // 2. 其次从URL参数获取
+  const urlParams = getParamsFromUrl();
+  if (urlParams.fileId && urlParams.projectId) {
+    console.log('使用URL参数初始化渲染器:', urlParams);
+    return urlParams as InitParams;
+  }
+
+  // 3. 都不满足，返回null
+  console.error('无法获取初始化参数');
+  errorMessage.value = '无法获取初始化参数，请检查无界配置或URL参数';
+  return null;
+};
+
+// 检查参数是否有效
+const isValidParams = (params: InitParams | null): params is InitParams => {
+  return !!params && !!params.fileId && !!params.projectId;
+};

 // 初始化请求配置
-const initRequestConfig = (token: string) => {
-  if (!token) return;
-
-  if (wujieProps.interceptors?.request) {
-    request.useRequest(wujieProps.interceptors.request);
+const initRequestConfig = () => {
+  // 处理请求拦截器
+  if (initParams.value?.interceptors?.request) {
+    request.useRequest(initParams.value.interceptors.request);
  }

-  if (wujieProps.interceptors?.response) {
-    request.useResponse(wujieProps.interceptors.response);
+  // 处理响应拦截器
+  if (initParams.value?.interceptors?.response) {
+    request.useResponse(initParams.value.interceptors.response);
  }
-
-  request.useRequest((req) => {
-    req.headers.set('Authorization', `Bearer ${token}`);
-    return req;
-  });
 };

 // 显示加载中
 const showLoading = (text = '低代码文件加载中...') => {
  if (loadingInstance.value) return;
-
  loadingInstance.value = ElLoading.service({ text });
 };

@@ -72,14 +117,21 @@ const initLowCodeEngine = async () => {
  // 如果已经初始化过，直接返回
  if (provider.value) return provider.value;

+  // 检查参数是否有效
+  if (!isValidParams(initParams.value)) {
+    const error = new Error('缺少必要参数：fileId 和 projectId');
+    errorMessage.value = error.message;
+    throw error;
+  }
+
  // 初始化请求配置
-  initRequestConfig(wujieProps.accessToken);
+  initRequestConfig();

  try {
    const { provider: lowCodeProvider, onReady } = createProvider({
      nodeEnv: import.meta.env.NODE_ENV,
      service: lowCodeService,
-      project: { id: Number(wujieProps.projectId) },
+      project: { id: Number(initParams.value.projectId) },
      adapter: {
        request,
        jsonp,
@@ -90,6 +142,7 @@ const initLowCodeEngine = async () => {
    return { provider: lowCodeProvider, onReady };
  } catch (error) {
    console.error('初始化低代码引擎失败:', error);
+    errorMessage.value = '初始化低代码引擎失败';
    ElMessage.error('初始化低代码引擎失败');
    return Promise.reject(error);
  }
@@ -97,6 +150,11 @@ const initLowCodeEngine = async () => {

 // 获取渲染组件
 const getRenderComponent = async () => {
+  if (!isValidParams(initParams.value)) {
+    errorMessage.value = '缺少必要参数：fileId 和 projectId';
+    return null;
+  }
+
  isLoading.value = true;
  showLoading();

@@ -111,12 +169,13 @@ const getRenderComponent = async () => {
        instance?.appContext.app.use(lowCodeProvider);
        try {
          const renderComponent = await lowCodeProvider.getRenderComponent(
-            wujieProps.fileId,
+            initParams.value!.fileId,
          );
          console.log('渲染组件获取成功');
          resolve(renderComponent);
        } catch (error) {
          console.error('获取渲染组件失败:', error);
+          errorMessage.value = '获取渲染组件失败';
          ElMessage.error('获取渲染组件失败');
          resolve(null);
        }
@@ -133,9 +192,13 @@ const getRenderComponent = async () => {

 // 使用 useQuery 管理渲染组件
 const { data: rendererComponent, isError } = useQuery({
-  queryKey: ['getRenderer', wujieProps.fileId, wujieProps.projectId],
+  queryKey: [
+    'getRenderer',
+    initParams.value?.fileId,
+    initParams.value?.projectId,
+  ],
  queryFn: getRenderComponent,
-  enabled: false, // 初始不自动执行
+  enabled: false, // 初始不自动执行，改为手动控制
  retry: 1, // 失败后重试一次
  staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
 });
@@ -150,15 +213,29 @@ watch(rendererComponent, (newVal) => {

 // 向父应用发送状态消息
 const notifyParent = (event: string, data?: any) => {
-  if (window.$wujie?.bus) {
+  if (isWujieSubApp && window.$wujie?.bus) {
    window.$wujie.bus.$emit(event, data);
  }
 };

 // 组件挂载后执行初始化
 onMounted(async () => {
-  // 通知父应用已准备就绪
-  notifyParent('ready', 'y-code-renderer is ready');
+  // 通知父应用已准备就绪（如果是wujie子应用）
+  if (isWujieSubApp) {
+    notifyParent('ready', 'y-code-renderer is ready');
+  }
+
+  // 获取初始化参数 - 在挂载时执行一次
+  initParams.value = getInitParams();
+  const paramsValid = isValidParams(initParams.value);
+
+  if (!paramsValid) {
+    errorMessage.value = '缺少必要参数：fileId 和 projectId';
+    if (isWujieSubApp) {
+      notifyParent('render-fail', errorMessage.value);
+    }
+    return;
+  }

  try {
    await initLowCodeEngine();
@@ -166,13 +243,19 @@ onMounted(async () => {
    const component = await getRenderComponent();
    if (component) {
      renderer.value = component;
-      notifyParent('render-success');
+      if (isWujieSubApp) {
+        notifyParent('render-success');
+      }
    } else {
-      notifyParent('render-fail', 'Failed to get component');
+      if (isWujieSubApp) {
+        notifyParent('render-fail', 'Failed to get component');
+      }
    }
  } catch (error) {
    console.error('初始化过程出错:', error);
-    notifyParent('render-fail', error);
+    if (isWujieSubApp) {
+      notifyParent('render-fail', error);
+    }
  }
 });
 </script>
@@ -182,16 +265,20 @@ onMounted(async () => {
    <component
      :is="renderer"
      v-if="renderer"
-      :ctx-props="wujieProps"
-      v-bind="wujieProps"
+      :ctx-props="initParams"
+      v-bind="initParams"
    />

+    <div v-else-if="!isValidParams(initParams)" class="error-message">
+      {{ errorMessage || '缺少必要参数：fileId 和 projectId' }}
+    </div>
+
    <div v-else-if="!isLoading && isError" class="error-message">
-      组件加载失败，请检查参数和网络连接
+      {{ errorMessage || '组件加载失败，请检查参数和网络连接' }}
    </div>

    <div v-else-if="!isLoading" class="error-message">
-      组件加载失败，请检查控制台日志
+      {{ errorMessage || '组件加载失败，请检查控制台日志' }}
    </div>
  </div>
 </template>