feat(web): app add export & import

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;
 }