Merge pull request #526 from SuanmoSuanyangTechnology/feature/app_zy

feat(web): app add export & import

web/src/api/application.ts

@@ -135,4 +135,12 @@ export const getExperienceConfig = (share_token: string) => {
       'Authorization': `Bearer ${localStorage.getItem(`shareToken_${share_token}`)}`
     }
   })
+}
+// Export application
+export const appExport = (app_id: string, appName: string, data?: { release_version: string }) => {
+  return request.getDownloadFile(`/apps/${app_id}/export`, `${appName}.yml`, data)
+}
+// Import application
+export const appImport = (formData: FormData) => {
+  return request.uploadFile(`/apps/import`, formData)
 }

web/src/utils/request.ts

@@ -347,6 +347,23 @@ export const request = {
       document.body.removeChild(link);
       callback?.()
     });
+  },
+  getDownloadFile(url: string, fileName: string, data?: unknown, callback?: () => void) {
+    service.get(url, {
+      params: paramFilter(data as Record<string, string | number | boolean | ObjectWithPush | null | undefined>),
+      responseType: "blob",
+    })
+      .then(res => {
+        const link = document.createElement("a");
+        const blob = new Blob([res as unknown as BlobPart]);
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        link.setAttribute("download", decodeURI(fileName || fileName));
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        callback?.()
+      });
   }
 };
 

web/src/views/ApplicationConfig/ReleasePage.tsx

@@ -11,7 +11,7 @@ import { Button, Space, Input, Form, App } from 'antd';
 
 import Tag, { type TagProps } from './components/Tag'
 import RbCard from '@/components/RbCard/Card'
-import { getReleaseList, rollbackRelease } from '@/api/application'
+import { getReleaseList, rollbackRelease, appExport } from '@/api/application'
 import ReleaseModal from './components/ReleaseModal'
 import ReleaseShareModal from './components/ReleaseShareModal'
 import type { Release, ReleaseModalRef, ReleaseShareModalRef } from './types'
@@ -67,6 +67,9 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
       message.success(t('common.operateSuccess'))
     })
   }
+  const handleExport = () => {
+    appExport(data.id, data.name)
+  }
   return (
     <div className="rb:flex rb:h-[calc(100vh-64px)]">
       <div className="rb:h-full rb:overflow-y-auto rb:w-108 rb:flex-[0_0_auto] rb:border-r rb:border-[#DFE4ED] rb:p-4">
@@ -123,7 +126,7 @@ const ReleasePage: FC<{data: Application; refresh: () => void}> = ({data, refres
 
             <Space size={10}>
               {selectedVersion && <>
-                {/* <Button>{t('application.exportDSLFile')}</Button> */}
+                {data?.type !== 'multi_agent' && <Button onClick={handleExport}>{t('common.export')}</Button>}
                 {data.current_release_id !== selectedVersion.id && <Button onClick={handleRollback}>{t('application.willRollToThisVersion')}</Button>}
                 <Button type="primary" ghost onClick={() => releaseShareModalRef.current?.handleOpen()}>{t('application.share')}</Button>
               </>}

web/src/views/ApplicationConfig/components/ConfigHeader.tsx

@@ -19,9 +19,8 @@ import deleteIcon from '@/assets/images/delete_hover.svg'
 import type { Application, ApplicationModalRef } from '@/views/ApplicationManagement/types';
 import ApplicationModal from '@/views/ApplicationManagement/components/ApplicationModal'
 import type { CopyModalRef, AgentRef, ClusterRef, WorkflowRef } from '../types'
-import { deleteApplication } from '@/api/application'
+import { deleteApplication, appExport } from '@/api/application'
 import CopyModal from './CopyModal'
-import { exportToYaml } from '@/utils/yamlExport';
 
 const { Header } = Layout;
 
@@ -85,16 +84,16 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
    * Handle menu item click
    */
   const handleClick: MenuProps['onClick'] = ({ key }) => {
+    if (!application) return
     switch (key) {
       case 'edit':
-        applicationModalRef.current?.handleOpen(application as Application)
+        applicationModalRef.current?.handleOpen(application)
         break;
       case 'copy':
         copyModalRef.current?.handleOpen()
         break;
       case 'export':
-        console.log('export', workflowRef?.current?.config)
-        exportToYaml(workflowRef?.current?.config, application?.name ?`${application?.name}.yml`: undefined)
+        appExport(application.id, application.name)
         break;
       case 'delete':
         handleDelete()
@@ -153,7 +152,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
    * Format dropdown menu items
    */
   const formatMenuItems = useMemo(() => {
-    const items =  (application?.type === 'workflow' ? ['edit', 'copy', 'export', 'delete'] : ['edit', 'copy', 'delete']).map(key => ({
+    const items = (application?.type !== 'multi_agent' ? ['edit', 'copy', 'export', 'delete'] : ['edit', 'copy', 'delete']).map(key => ({
       key,
       icon: <img src={menuIcons[key]} className="rb:w-4 rb:h-4 rb:mr-2" />,
       label: t(`common.${key}`),

web/src/views/ApplicationManagement/components/UploadModal.tsx

@@ -0,0 +1,256 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-28 14:08:14 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-06 12:05:46
+ */
+/**
+ * UploadModal Component
+ * 
+ * This component provides a modal for uploading workflow files with a multi-step process:
+ * 1. Upload - Select platform and file
+ * 2. Complex - Show warnings and errors if any
+ * 3. SureInfo - Confirm and edit workflow information
+ * 4. Completed - Show success message and options
+ */
+import { forwardRef, useImperativeHandle, useState, useMemo } from 'react';
+import { Form, Steps, Flex, Alert, Button, Result, message } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { Application, UploadModalRef } from '../types'
+import RbModal from '@/components/RbModal'
+import UploadFiles from '@/components/Upload/UploadFiles'
+import { appImport } from '@/api/application'
+
+/**
+ * Props for UploadModal component
+ */
+interface UploadModalProps {
+  /** Function to refresh the parent component after workflow import */
+  refresh: () => void;
+}
+
+
+/**
+ * Steps definition for the upload process
+ */
+const steps = [
+  'upload',      // Step 1: File upload
+  'complex',     // Step 2: Error/warning display
+  'completed'    // Step 4: Success message
+]
+/**
+ * UploadModal component
+ * 
+ * @param {UploadModalProps} props - Component props
+ * @param {React.Ref<UploadModalRef>} ref - Ref for imperative methods
+ */
+const UploadModal = forwardRef<UploadModalRef, UploadModalProps>(({
+  refresh
+}, ref) => {
+  const { t } = useTranslation();
+  
+  // State management
+  const [visible, setVisible] = useState(false);           // Modal visibility
+  const [form] = Form.useForm<{ file: File[] }>();  // Form instance
+  const [loading, setLoading] = useState(false);           // Loading state
+  const [current, setCurrent] = useState<number>(0);       // Current step
+  const [appId, setAppId] = useState<string | null>(null); // Imported application ID
+  const [warnings, setWarnings] = useState<string[]>([])
+
+  /**
+   * Handle modal close
+   * Resets all states and form fields
+   */
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setCurrent(0);
+    setAppId(null);
+    setLoading(false);
+    setWarnings([])
+  };
+
+  /**
+   * Handle modal open
+   * Resets form fields and shows modal
+   */
+  const handleOpen = () => {
+    form.resetFields();
+    setVisible(true);
+  };
+
+  /**
+   * Handle save/submit action
+   * Processes different logic based on current step
+   */
+  const handleSave = () => {
+    const values = form.getFieldsValue();
+    
+    switch(current) {
+      case 0: // Step 1: Upload file
+        if (!values.file || values.file.length === 0) {
+          message.warning(t('application.pleaseUploadFile'));
+          return;
+        }
+        const formData = new FormData();
+        formData.append('file', values.file[0]);
+
+        setLoading(true)
+        // Call import API
+        appImport(formData)
+          .then(res => {
+            const { warnings, app } = res as { warnings: string[]; app: Application };
+
+            setAppId(app?.id)
+            if (warnings.length) {
+              setCurrent(1)
+              setWarnings(warnings)
+            } else {
+              setCurrent(2)
+            }
+          })
+          .finally(() => setLoading(false));
+        break;
+      case 2:
+        break;
+    }
+  };
+
+  // Expose methods to parent component via ref
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  /**
+   * Handle navigation after successful import
+   * @param {string} type - Navigation type ('detail' or 'list')
+   */
+  const handleJump = (type: string) => {
+    handleClose();
+    refresh();
+    setTimeout(() => {
+      switch (type) {
+        case 'detail':
+          // Open application detail page in new tab
+          window.open(`/#/application/config/${appId}`, '_blank');
+          break;
+      }
+    }, 100)
+  };
+
+  /**
+   * Generate modal footer based on current step
+   */
+  const getFooter = useMemo(() => {
+    switch (current) {
+      case 0: // Step 1: Upload
+        return [
+          <Button key="back" onClick={handleClose}>
+            {t('common.cancel')}
+          </Button>,
+          <Button
+            key="confirm"
+            type="primary"
+            loading={loading}
+            onClick={handleSave}
+          >
+            {t('common.confirm')}
+          </Button>
+        ];
+      case 1:
+        return [
+          <Button key="back" onClick={() => handleJump('list')}>
+            {t('application.gotoList')}
+          </Button>,
+          <Button
+            key="submit"
+            type="primary"
+            loading={loading}
+            onClick={() => handleJump('detail')}
+          >
+            {t('application.gotoDetail')}
+          </Button>
+        ]
+      default:
+        return null;
+    }
+  }, [current, loading]);
+  return (
+    <RbModal
+      title={t('application.import')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.confirm')}
+      onOk={handleSave}
+      footer={getFooter}
+    >
+      {/* Steps indicator */}
+      <div className='rb:p-3 rb:bg-[#FBFDFF] rb:rounded-lg rb:border rb:border-[#DFE4ED] rb:mb-3'>
+        <Steps
+          labelPlacement="vertical"
+          size="small"
+          current={current}
+          items={steps.map(key => ({ title: t(`application.${key}`) }))}
+        />
+      </div>
+      {current === 0 &&
+        <Form
+          form={form}
+          layout="vertical"
+        >
+          <Form.Item
+            name="file"
+            valuePropName="fileList"
+            noStyle
+          >
+            <UploadFiles
+              isAutoUpload={false}
+              isCanDrag={true}
+              fileSize={100}
+              maxCount={1}
+              fileType={['yml']}
+              draggerHeight={200}
+            />
+          </Form.Item>
+        </Form>
+      }
+      {/* Step 2: Error/warning display */}
+      {current === 1 &&
+        <Flex vertical gap={12}>
+          {warnings.map((vo, index) => (
+            <Alert
+              key={index}
+              message={<div>{vo}</div>}
+              type="warning"
+              showIcon
+            />
+          ))}
+        </Flex>
+      }
+      {current === 2 &&
+        <Result
+          status="success"
+          title={t('application.importSuccess')}
+          subTitle={t('application.importSuccessDesc')}
+          extra={[
+            <Button key="back" onClick={() => handleJump('list')}>
+              {t('application.gotoList')}
+            </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              loading={loading}
+              onClick={() => handleJump('detail')}
+            >
+              {t('application.gotoDetail')}
+            </Button>
+          ]}
+        />
+      }
+    </RbModal>
+  );
+});
+
+export default UploadModal;

web/src/views/ApplicationManagement/index.tsx

@@ -25,6 +25,7 @@ import { getApplicationListUrl, deleteApplication } from '@/api/application'
 import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
 import { formatDateTime } from '@/utils/format';
 import UploadWorkflowModal from './components/UploadWorkflowModal'
+import UploadModal from './components/UploadModal'
 
 /**
  * Application management main component
@@ -37,6 +38,7 @@ const ApplicationManagement: React.FC = () => {
   const applicationModalRef = useRef<ApplicationModalRef>(null);
   const scrollListRef = useRef<PageScrollListRef>(null)
   const uploadWorkflowModalRef = useRef<UploadWorkflowModalRef>(null);
+  const uploadModalRef = useRef<UploadWorkflowModalRef>(null);
 
   useEffect(() => {
     // Convert URLSearchParams to a plain object for easier access
@@ -91,6 +93,8 @@ const ApplicationManagement: React.FC = () => {
       case 'thirdParty':
         handleImport()
         break;
+      case 'import':
+        uploadModalRef.current?.handleOpen()
     }
   }
   return (
@@ -121,6 +125,7 @@ const ApplicationManagement: React.FC = () => {
             <Dropdown
               menu={{ items: [
                 { key: 'thirdParty', label: t('application.importWorkflow') },
+                { key: 'import', label: t('application.import') },
               ], onClick: handleClick }}
               placement="bottomRight"
             >
@@ -186,6 +191,10 @@ const ApplicationManagement: React.FC = () => {
         ref={uploadWorkflowModalRef}
         refresh={refresh}
       />
+      <UploadModal
+        ref={uploadModalRef}
+        refresh={refresh}
+      />
     </>
   );
 };

web/src/views/ApplicationManagement/types.ts

@@ -233,4 +233,12 @@ export interface UploadData extends WorkflowConfig {
 export interface UploadWorkflowModalRef {
   /** Open the upload workflow modal */
   handleOpen: () => void;
+}
+
+/**
+ * Upload app modal ref interface
+ */
+export interface UploadModalRef {
+  /** Open the upload workflow modal */
+  handleOpen: () => void;
 }