fix(ui): show table summary with hover tooltip for full table view
Table fields now show a compact summary (first row preview + table icon) with the full rendered table appearing on hover via Tooltip component, consistent with the existing overflow tooltip behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -546,11 +546,31 @@ const ReactTableTooltip = ({ content }: { content: string }) => {
|
||||
|
||||
|
||||
|
||||
// 表格内容直接渲染表格组件,非表格内容保持原有行为
|
||||
// 表格内容:主区域显示摘要,hover 悬浮显示完整表格
|
||||
if (isTableLike) {
|
||||
// 生成摘要文本:取第一行数据作为预览
|
||||
const summaryText = (() => {
|
||||
const firstLine = content.split('\n').find(l => l.trim() && !/^\s*\|[-\s:]+\|/.test(l));
|
||||
return firstLine ? firstLine.trim().substring(0, 80) + (firstLine.length > 80 ? '...' : '') : content.substring(0, 80);
|
||||
})();
|
||||
|
||||
return (
|
||||
<div className="text-xs p-1 rounded cursor-text w-full text-left">
|
||||
{renderedContent}
|
||||
<Tooltip
|
||||
content={renderedContent}
|
||||
placement="top"
|
||||
theme="light"
|
||||
trigger="hover"
|
||||
showArrow={true}
|
||||
className="tooltip-custom-offset"
|
||||
scrollable={true}
|
||||
maxHeight={400}
|
||||
>
|
||||
<div className="text-gray-800 break-all overflow-hidden line-clamp-2 flex items-center gap-1">
|
||||
<i className="ri-table-line text-blue-400 flex-shrink-0"></i>
|
||||
<span>{summaryText}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user