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} />
         ) : (
-          <Input
+          <Popover
-            value={record.id}
+            content={record.id ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.id}</div> : null}
-            autoWidth={{ minWidth: 50, maxWidth: 100 }}
+            position="top"
-            onChange={(value) => handleSave({ ...record, id: value })}
+            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} />
         ) : (
-          <Input
+          <Popover
-            value={record.desc}
+            content={record.desc ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.desc}</div> : null}
-            onChange={(value) => handleSave({ ...record, desc: value })}
+            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 }}
               />
-              <Input
+              <Popover
-                style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
+                content={record.defaultValue ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.defaultValue}</div> : null}
-                value={record.defaultValue}
+                position="top"
-                onChange={(value) => handleSave({ ...record, defaultValue: value })}
+                trigger="hover"
-                placeholder="请输入默认值"
+                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 (
-            <Input
+            <Popover
-              style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
+              content={record.defaultValue ? <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>{record.defaultValue}</div> : null}
-              value={record.defaultValue}
+              position="top"
-              onChange={(value) => handleSave({ ...record, defaultValue: value })}
+              trigger="hover"
-              placeholder="请输入默认值"
+              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>
           );
         }
       }