feat: 实现基础组件只允许修改默认值的功能

src/components/FlowEditor/nodeEditors/BasicNodeEditor.tsx

@@ -75,7 +75,8 @@ const BasicNodeEditor: React.FC<NodeEditorProps> = ({
 
   const getCompInfo = () => {
     const flatData = getCurrentProjectStoreData();
-    setCurrentCompInfo(flatData.find((item: any) => item.id === nodeData.compId));
+    const compInfo = flatData.find((item: any) => item.id === nodeData.compId);
+    setCurrentCompInfo(compInfo);
   };
   const getCompInstance = async () => {
     const res: any = await queryInstance(nodeData.compId);
@@ -93,6 +94,10 @@ const BasicNodeEditor: React.FC<NodeEditorProps> = ({
     getCompInfo();
     getCompInstance();
   }, []);
+
+  // 判断是否为基础组件（基础组件只允许修改默认值）
+  const isBaseComponent = nodeData.type === 'BASIC';
+
   return (
     <Form layout="vertical">
       <Form.Item label="节点标题">
@@ -124,7 +129,6 @@ const BasicNodeEditor: React.FC<NodeEditorProps> = ({
         <Select
           value={nodeData?.component?.compIdentifier || ''}
           onChange={(value) => {
-            console.log(value);
             updateNodeData('component', {
               ...nodeData.component,
               compIdentifier: value,
@@ -143,6 +147,7 @@ const BasicNodeEditor: React.FC<NodeEditorProps> = ({
             dataIns: data
           });
         }}
+        readonly={isBaseComponent}
       />
       <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输出参数</Typography.Title>
       <ParamsTable
@@ -153,6 +158,7 @@ const BasicNodeEditor: React.FC<NodeEditorProps> = ({
             dataOuts: data
           });
         }}
+        readonly={isBaseComponent}
       />
     </Form>
   );

src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx

@@ -48,11 +48,13 @@ interface TableDataItem {
 interface ParamsTableProps {
   initialData: TableDataItem[];
   onUpdateData: (data: TableDataItem[]) => void;
+  readonly?: boolean; // 只读模式，用于基础组件（仅允许修改默认值）
 }
 
 const ParamsTable: React.FC<ParamsTableProps> = ({
                                                    initialData,
-                                                   onUpdateData
+                                                   onUpdateData,
+                                                   readonly = false
                                                  }) => {
   const [data, setData] = useState<TableDataItem[]>([]);
   const { gloBalVarList } = useSelector((state: any) => state.ideContainer);
@@ -102,7 +104,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
       title: '标识',
       dataIndex: 'id',
       render: (_: any, record: TableDataItem) => (
-        record.id === 'maxTime' ? (
+        record.id === 'maxTime' || readonly ? (
           <EllipsisWithPopover text={record.id} maxWidth={100} />
         ) : (
           <Popover
@@ -123,10 +125,11 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
     {
       title: '数据类型',
       dataIndex: 'dataType',
-      render: (_: any, record: TableDataItem) => (
+      render: (_: any, record: TableDataItem) => {
-        record.id === 'maxTime' ? (
+        if (record.id === 'maxTime' || readonly) {
-          <span>{record.dataType === 'INTEGER' ? '整数' : record.dataType}</span>
+          return <span>{record.dataType === 'INTEGER' ? '整数' : record.dataType}</span>;
-        ) : (
+        }
+        return (
           <Select
             autoWidth={{ minWidth: 150, maxWidth: 200 }}
             options={dataTypeOptions}
@@ -134,14 +137,15 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
             onChange={(value) => handleSave({ ...record, dataType: value })}
             placeholder="请选择数据类型"
           />
-        )
+        );
-      )
+      }
     },
     {
       title: '数组类型',
       dataIndex: 'arrayType',
-      render: (_: any, record: TableDataItem) => (
+      render: (_: any, record: TableDataItem) => {
-        record.dataType === 'ARRAY' ? (
+        if (record.dataType === 'ARRAY' && !readonly) {
+          return (
             <Select
               autoWidth={{ minWidth: 150, maxWidth: 200 }}
               options={arrayTypeOptions}
@@ -149,16 +153,19 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
               onChange={(value) => handleSave({ ...record, arrayType: value })}
               placeholder="请选择数组类型"
             />
-        ) : (
+          );
-          <div style={{ minWidth: 70, maxWidth: 100 }}>-</div>
+        }
-        )
+        if (record.dataType === 'ARRAY' && readonly) {
-      )
+          return <span>{record.arrayType}</span>;
+        }
+        return <div style={{ minWidth: 70, maxWidth: 100 }}>-</div>;
+      }
     },
     {
       title: '描述',
       dataIndex: 'desc',
       render: (_: any, record: TableDataItem) => (
-        record.id === 'maxTime' ? (
+        record.id === 'maxTime' || readonly ? (
           <EllipsisWithPopover text={record.desc} maxWidth={120} />
         ) : (
           <Popover
@@ -252,7 +259,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
       title: '操作',
       dataIndex: 'op',
       render: (_: any, record: TableDataItem) => (
-        record.id !== 'maxTime' &&
+        !readonly && record.id !== 'maxTime' &&
         <Button onClick={() => removeRow(record.key)} type="text" status="danger" style={{ maxWidth: 40 }}>
           <IconDelete />
         </Button>
@@ -297,6 +304,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
   return (
     <>
       <Table columns={columns} data={data} pagination={false} />
+      {!readonly && (
         <Button
           style={{ height: 45 }}
           long
@@ -305,6 +313,7 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
         >
           + 添加
         </Button>
+      )}
     </>
   );
 };