feat(params-table): 为参数表格添加文本溢出提示功能

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

@@ -1,8 +1,39 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Select, Table, Button } from '@arco-design/web-react';
+import { Input, Select, Table, Button, Popover } from '@arco-design/web-react';
 import { IconDelete } from '@arco-design/web-react/icon';
 import { useSelector } from 'react-redux';
 
+// 文本溢出显示组件，超出时显示 Popover
+const EllipsisWithPopover: React.FC<{ text: string; maxWidth?: number }> = ({ text, maxWidth = 100 }) => {
+  if (!text) return <span>-</span>;
+
+  const style: React.CSSProperties = {
+    maxWidth,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  };
+
+  // 简单判断：文本长度超过一定值时显示 Popover
+  const shouldShowPopover = text.length > maxWidth / 8;
+
+  if (shouldShowPopover) {
+    return (
+      <Popover
+        content={<div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{text}</div>}
+        position="top"
+        trigger="hover"
+      >
+        <span style={style}>{text}</span>
+      </Popover>
+    );
+  }
+
+  return <span style={style}>{text}</span>;
+};
+
 interface TableDataItem {
   key: number | string;
   id: string;
@@ -72,13 +103,20 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
       dataIndex: 'id',
       render: (_: any, record: TableDataItem) => (
         record.id === 'maxTime' ? (
-          <span>{record.id}</span>
+          <EllipsisWithPopover text={record.id} maxWidth={100} />
         ) : (
+          <Popover
+            content={record.id ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.id}</div> : null}
+            position="top"
+            trigger="hover"
+            disabled={!record.id || record.id.length <= 12}
+          >
             <Input
               value={record.id}
               autoWidth={{ minWidth: 50, maxWidth: 100 }}
               onChange={(value) => handleSave({ ...record, id: value })}
             />
+          </Popover>
         )
       )
     },
@@ -121,12 +159,19 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
       dataIndex: 'desc',
       render: (_: any, record: TableDataItem) => (
         record.id === 'maxTime' ? (
-          <span>{record.desc}</span>
+          <EllipsisWithPopover text={record.desc} maxWidth={120} />
         ) : (
+          <Popover
+            content={record.desc ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.desc}</div> : null}
+            position="top"
+            trigger="hover"
+            disabled={!record.desc || record.desc.length <= 15}
+          >
             <Input
               value={record.desc}
               onChange={(value) => handleSave({ ...record, desc: value })}
             />
+          </Popover>
         )
       )
     },
@@ -154,12 +199,19 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
                 style={{ width: '100%', minWidth: 100 }}
                 autoWidth={{ minWidth: 150, maxWidth: 200 }}
               />
+              <Popover
+                content={record.defaultValue ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.defaultValue}</div> : null}
+                position="top"
+                trigger="hover"
+                disabled={!record.defaultValue || record.defaultValue.length <= 20}
+              >
                 <Input
                   style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
                   value={record.defaultValue}
                   onChange={(value) => handleSave({ ...record, defaultValue: value })}
                   placeholder="请输入默认值"
                 />
+              </Popover>
             </>
           );
         }
@@ -179,12 +231,19 @@ const ParamsTable: React.FC<ParamsTableProps> = ({
           }
 
           return (
+            <Popover
+              content={record.defaultValue ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.defaultValue}</div> : null}
+              position="top"
+              trigger="hover"
+              disabled={!record.defaultValue || record.defaultValue.length <= 20}
+            >
               <Input
                 style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
                 value={record.defaultValue}
                 onChange={(value) => handleSave({ ...record, defaultValue: value })}
                 placeholder="请输入默认值"
               />
+            </Popover>
           );
         }
       }