src/pages/componentDevelopment/componentList/importComponentModal.tsx

@@ -1,24 +1,20 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal, Button, Message, Tabs } from '@arco-design/web-react';
+import { Modal, Button, Message, Divider, Tabs, Checkbox } from '@arco-design/web-react';
 import { IconUpload, IconDelete, IconFile } from '@arco-design/web-react/icon';
 import styles from './style/importComponentModal.module.less';
 
-interface ParsedComponentInfo {
-  baseInfo?: any;
-  operates?: any[];
-}
-
 interface ImportComponentModalProps {
   visible: boolean;
   onCancel: () => void;
   onOk: (files: FileItem[]) => void;
-  onFileSelect: (file: File) => Promise<ParsedComponentInfo[] | ParsedComponentInfo | null>;
+  onFileSelect: (file: File) => void;
+  componentInfo: any; // 单次文件解析的结果
   loading: boolean;
 }
 
 interface FileItem {
   file: File;
-  componentInfo: ParsedComponentInfo[]; // 该文件包含的组件列表
+  componentInfo: any[]; // 该文件包含的组件列表
 }
 
 const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
@@ -26,10 +22,12 @@ const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
                                                                      onCancel,
                                                                      onOk,
                                                                      onFileSelect,
+                                                                     componentInfo,
                                                                      loading
                                                                    }) => {
   const [fileItems, setFileItems] = useState<FileItem[]>([]);
   const [activeTabKey, setActiveTabKey] = useState<string>('0');
+  const [pendingFile, setPendingFile] = useState<File | null>(null); // 等待解析的文件
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // 当弹窗关闭时清空所有状态
@@ -37,60 +35,56 @@ const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
     if (!visible) {
       setFileItems([]);
       setActiveTabKey('0');
+      setPendingFile(null);
     }
   }, [visible]);
 
-  const updateFileItem = (file: File, componentInfo: ParsedComponentInfo[] | ParsedComponentInfo) => {
+  // 当 componentInfo 更新时，添加到 fileItems`
-    const componentList = Array.isArray(componentInfo) ? componentInfo : [componentInfo];
+  useEffect(() => {
-    let nextActiveKey = '0';
+    if (pendingFile && componentInfo) {
+      const componentList = Array.isArray(componentInfo) ? componentInfo : [componentInfo];
 
-    setFileItems((prev) => {
+      // 检查文件是否已存在
-      const existingIndex = prev.findIndex((item) => item.file.name === file.name);
+      const existingIndex = fileItems.findIndex(item => item.file.name === pendingFile.name);
 
       if (existingIndex >= 0) {
-        nextActiveKey = String(existingIndex);
+        // 更新现有文件
-        const nextItems = [...prev];
+        const newFileItems = [...fileItems];
-        nextItems[existingIndex] = {
+        newFileItems[existingIndex] = {
-          file,
+          file: pendingFile,
           componentInfo: componentList
         };
-        return nextItems;
+        setFileItems(newFileItems);
       }
-
+      else {
-      nextActiveKey = String(prev.length);
+        // 添加新文件
-      return [
+        const newFileItem: FileItem = {
-        ...prev,
+          file: pendingFile,
-        {
-          file,
           componentInfo: componentList
-        }
+        };
-      ];
+        const updatedFileItems = [...fileItems, newFileItem];
-    });
+        setFileItems(updatedFileItems);
-
+        setActiveTabKey(String(fileItems.length)); // 切换到新添加的标签页
-    setActiveTabKey(nextActiveKey);
+      }
-  };
-
-  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFiles = Array.from(event.target.files ?? []);
-    if (selectedFiles.length === 0) return;
-
-    const validFiles = selectedFiles.filter((file) => file.name.match(/\.zip$/i));
-    const invalidFileCount = selectedFiles.length - validFiles.length;
 
-    if (invalidFileCount > 0) {
+      setPendingFile(null);
-      Message.error('请选择 ZIP 压缩包文件');
     }
+  }, [componentInfo]);
 
-    for (const file of validFiles) {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const parsedComponentInfo = await onFileSelect(file);
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
 
-      if (!parsedComponentInfo) {
+    // 验证文件类型 (.zip)
-        continue;
+    const file = files[0];
-      }
+    if (!file.name.match(/\.zip$/i)) {
-
+      Message.error('请选择ZIP压缩包文件');
-      updateFileItem(file, parsedComponentInfo);
+      event.target.value = '';
+      return;
     }
 
+    setPendingFile(file);
+    onFileSelect(file);
     event.target.value = '';
   };
 
@@ -122,6 +116,7 @@ const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
   const handleClose = () => {
     setFileItems([]);
     setActiveTabKey('0');
+    setPendingFile(null);
     onCancel();
   };
 
@@ -156,7 +151,6 @@ const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
     >
       <input
         ref={fileInputRef}
-        multiple
         type="file"
         accept=".zip"
         style={{ display: 'none' }}
@@ -164,7 +158,7 @@ const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
       />
 
       <div className={styles['import-modal-content']}>
-        {fileItems.length === 0 && (
+        {fileItems.length === 0 && !pendingFile && (
           <div className={styles['empty-state']}>
             <p className={styles['empty-text']}>请点击下方&#34;添加文件&#34;按钮选择组件压缩包</p>
             <p className={styles['empty-hint']}>支持 .zip 格式文件，可添加多个文件</p>
@@ -178,9 +172,9 @@ const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
             type="card"
           >
             {fileItems.map((fileItem, fileIndex) => {
-              const currentComponent = fileItem.componentInfo[0];
+              const current = fileItems[activeTabKey];
-              const baseInfo = currentComponent?.baseInfo || {};
+              const baseInfo = current.componentInfo[0].baseInfo;
-              const operates = currentComponent?.operates || [];
+              const operates = current.componentInfo[0].operates;
               return (
                 <Tabs.TabPane
                   key={String(fileIndex)}

src/pages/componentDevelopment/componentList/index.tsx

@@ -84,6 +84,7 @@ const GlobalVarContainer = () => {
     { label: 'Python', value: 'Python' }
   ];
   const [importModalVisible, setImportModalVisible] = useState(false); // 导入弹窗
+  const [importComponentInfo, setImportComponentInfo] = useState(null); // 导入组件信息
   const [importLoading, setImportLoading] = useState(false); // 导入加载状态
   const [showOffSaleModal, setShowOffSaleModal] = useState(false);
   const [offSaleComponent, setOffSaleComponent] = useState(null);
@@ -422,16 +423,16 @@ const GlobalVarContainer = () => {
       const res: any = await getImportComponentInfo({ file });
 
       if (res.code === 200) {
+        setImportComponentInfo(res.data);
         Message.success('组件信息解析成功');
-        return res.data;
       }
       else {
         Message.error(res.msg || '解析组件信息失败');
-        return null;
+        setImportComponentInfo(null);
       }
     } catch (error) {
       Message.error('解析组件信息失败');
-      return null;
+      setImportComponentInfo(null);
     } finally {
       setImportLoading(false);
     }
@@ -452,6 +453,7 @@ const GlobalVarContainer = () => {
       if (res.code === 200) {
         Message.success('组件导入成功');
         setImportModalVisible(false);
+        setImportComponentInfo(null);
         fetchComponentData(); // 刷新列表
       }
       else {
@@ -469,6 +471,7 @@ const GlobalVarContainer = () => {
   // 关闭导入弹窗
   const handleImportCancel = () => {
     setImportModalVisible(false);
+    setImportComponentInfo(null);
   };
 
   // 查看审核历史
@@ -887,6 +890,7 @@ const GlobalVarContainer = () => {
         onCancel={handleImportCancel}
         onOk={handleImportConfirm}
         onFileSelect={handleImportFileSelect}
+        componentInfo={importComponentInfo}
         loading={importLoading}
       />