From 790dc388849b4769b39d9c2a4fa082422d33de7c Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 5 Dec 2025 14:26:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(params-table):=20=E4=B8=BA=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=A1=A8=E6=A0=BC=E6=B7=BB=E5=8A=A0=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E6=BA=A2=E5=87=BA=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodeEditors/components/ParamsTable.tsx    | 107 ++++++++++++++----
 1 file changed, 83 insertions(+), 24 deletions(-)

diff --git a/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx b/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx
index 1263994..4f2567e 100644
--- a/src/components/FlowEditor/nodeEditors/components/ParamsTable.tsx
+++ b/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
-            value={record.id}
-            autoWidth={{ minWidth: 50, maxWidth: 100 }}
-            onChange={(value) => handleSave({ ...record, id: value })}
-          />
+          <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} />
         ) : (
-          <Input
-            value={record.desc}
-            onChange={(value) => handleSave({ ...record, desc: value })}
-          />
+          <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 }}
               />
-              <Input
-                style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
-                value={record.defaultValue}
-                onChange={(value) => handleSave({ ...record, defaultValue: value })}
-                placeholder="请输入默认值"
-              />
+              <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 (
-            <Input
-              style={{ width: '100%', minWidth: 150, maxWidth: 200, marginTop: 10 }}
-              value={record.defaultValue}
-              onChange={(value) => handleSave({ ...record, defaultValue: value })}
-              placeholder="请输入默认值"
-            />
+            <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>
           );
         }
       }