fix(web): Fix resource binding bug (#2572)

web/pages/construct/app/extra/index.tsx

@@ -5,8 +5,9 @@ import { EditOutlined, LeftOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 import { App, Button, Space, Spin } from 'antd';
 import classNames from 'classnames';
+import _ from 'lodash';
 import { useRouter } from 'next/router';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CreateAppModal from '../components/create-app-modal';
 import AwelLayout from './components/AwelLayout';
@@ -24,21 +25,54 @@ const ExtraAppInfo: React.FC = () => {
 
   const [loading, setLoading] = useState<boolean>(false);
   const [open, setOpen] = useState<boolean>(false);
+  const [dataReady, setDataReady] = useState<boolean>(false);
   const appParams = useRef<CreateAppParams>({});
+  const initialParams = useRef<CreateAppParams>({});
+
+  // 初始化参数，保留原有资源
+  useEffect(() => {
+    try {
+      // 深度克隆当前应用数据到初始参数和当前参数
+      initialParams.current = {
+        app_code: curApp?.app_code,
+        app_describe: curApp?.app_describe,
+        team_mode: curApp?.team_mode,
+        app_name: curApp?.app_name,
+        language: curApp?.language,
+        details: _.cloneDeep(curApp?.details || []),
+        team_context: _.cloneDeep(curApp?.team_context || {}),
+        param_need: _.cloneDeep(curApp?.param_need || []),
+        recommend_questions: _.cloneDeep(curApp?.recommend_questions || []),
+      };
+
+      // 复制一份给当前操作的参数
+      appParams.current = _.cloneDeep(initialParams.current);
+
+      setDataReady(true);
+    } catch (_) {
+      message.error(t('Update_failure'));
+    }
+  }, [curApp, message, t]);
 
   // 更新应用
   const { run: update, loading: createLoading } = useRequest(
-    async (params: CreateAppParams) =>
-      await apiInterceptors(
-        updateApp({
-          app_code: curApp?.app_code,
-          app_describe: curApp?.app_describe,
-          team_mode: curApp?.team_mode,
-          app_name: curApp?.app_name,
-          language: curApp?.language,
-          ...params,
-        }),
-      ),
+    async (params: CreateAppParams) => {
+      try {
+        return await apiInterceptors(
+          updateApp({
+            app_code: curApp?.app_code,
+            app_describe: curApp?.app_describe,
+            team_mode: curApp?.team_mode,
+            app_name: curApp?.app_name,
+            language: curApp?.language,
+            ...params,
+          }),
+        );
+      } catch (error) {
+        message.error(t('update_failed'));
+        throw error;
+      }
+    },
     {
       manual: true,
       onSuccess: data => {
@@ -50,13 +84,67 @@ const ExtraAppInfo: React.FC = () => {
           message.error(t('update_failed'));
         }
       },
+      onError: _ => {
+        message.error(t('update_failed'));
+      },
     },
   );
 
+  // 更新子组件改变的数据到appParams
+  const updateComponentData = (key: keyof CreateAppParams, value: any) => {
+    if (!appParams.current) return;
+
+    try {
+      // 使用深拷贝避免引用问题
+      appParams.current[key] = _.cloneDeep(value);
+    } catch (_) {
+      // 错误处理
+    }
+  };
+
   const submit = async () => {
-    await update({
-      ...appParams.current,
-    });
+    if (!dataReady) {
+      message.warning('Please wait, data is loading');
+      return;
+    }
+
+    if (loading) {
+      message.warning('Please wait, data is loading');
+      return;
+    }
+
+    try {
+      // 确保必要的字段存在
+      const finalParams: CreateAppParams = {};
+
+      // 添加基本信息
+      finalParams.app_code = curApp?.app_code;
+      finalParams.app_name = curApp?.app_name;
+      finalParams.app_describe = curApp?.app_describe;
+      finalParams.team_mode = curApp?.team_mode;
+      finalParams.language = curApp?.language;
+
+      // 根据模式添加相应数据
+      if (['single_agent', 'auto_plan'].includes(curApp?.team_mode)) {
+        finalParams.details = appParams.current.details || initialParams.current.details;
+      }
+
+      if (curApp?.team_mode === 'awel_layout') {
+        finalParams.team_context = appParams.current.team_context || initialParams.current.team_context;
+      }
+
+      if (curApp?.team_mode === 'native_app') {
+        finalParams.team_context = appParams.current.team_context || initialParams.current.team_context;
+        finalParams.param_need = appParams.current.param_need || initialParams.current.param_need;
+      }
+
+      finalParams.recommend_questions =
+        appParams.current.recommend_questions || initialParams.current.recommend_questions;
+
+      await update(finalParams);
+    } catch (_) {
+      message.error(t('update_failed'));
+    }
   };
 
   const recommendQuestionsStyle = useMemo(() => {
@@ -92,7 +180,7 @@ const ExtraAppInfo: React.FC = () => {
               <span>{curApp?.app_name}</span>
               <EditOutlined className='cursor-pointer hover:text-[#0c75fc]' onClick={() => setOpen(true)} />
             </Space>
-            <Button type='primary' onClick={submit} loading={createLoading}>
+            <Button type='primary' onClick={submit} loading={createLoading} disabled={loading}>
               {curApp?.isEdit ? t('update') : t('save')}
             </Button>
           </header>
@@ -103,7 +191,9 @@ const ExtraAppInfo: React.FC = () => {
                 classNames='w-3/4 mx-auto'
                 updateData={data => {
                   setLoading(data?.[0]);
-                  appParams.current.details = data?.[1];
+                  if (data?.[1]) {
+                    updateComponentData('details', data[1]);
+                  }
                 }}
                 initValue={curApp?.details}
               />
@@ -114,7 +204,9 @@ const ExtraAppInfo: React.FC = () => {
                 initValue={curApp?.team_context}
                 updateData={data => {
                   setLoading(data?.[0]);
-                  appParams.current.team_context = data?.[1];
+                  if (data?.[1]) {
+                    updateComponentData('team_context', data[1]);
+                  }
                 }}
                 classNames='px-6'
               />
@@ -129,8 +221,10 @@ const ExtraAppInfo: React.FC = () => {
                 classNames='w-3/5 mx-auto'
                 updateData={(data: any) => {
                   setLoading(data?.[0]);
-                  appParams.current.team_context = data?.[1]?.[0];
-                  appParams.current.param_need = data?.[1]?.[1];
+                  if (data?.[1]) {
+                    updateComponentData('team_context', data?.[1]?.[0]);
+                    updateComponentData('param_need', data?.[1]?.[1]);
+                  }
                 }}
               />
             )}
@@ -138,7 +232,9 @@ const ExtraAppInfo: React.FC = () => {
             {/* {curApp?.team_mode === '' && <></>} */}
             <RecommendQuestions
               updateData={data => {
-                appParams.current.recommend_questions = data as any;
+                if (data) {
+                  updateComponentData('recommend_questions', data);
+                }
               }}
               classNames={recommendQuestionsStyle}
               initValue={curApp?.recommend_questions}