fix(ui): dynamic tooltip width/height based on table dimensions
Table tooltip now calculates maxWidth from column count (140px/col, min 400, max 85vw) and maxHeight from row count (30px/row, min 150, max 70vh) for better readability of large tables. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -554,6 +554,31 @@ const ReactTableTooltip = ({ content }: { content: string }) => {
|
|||||||
return firstLine ? firstLine.trim().substring(0, 80) + (firstLine.length > 80 ? '...' : '') : content.substring(0, 80);
|
return firstLine ? firstLine.trim().substring(0, 80) + (firstLine.length > 80 ? '...' : '') : content.substring(0, 80);
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// 根据列数动态计算宽度:每列约 120px,最小 400,最大 90vw
|
||||||
|
const colCount = (() => {
|
||||||
|
if (isMdTable) {
|
||||||
|
const sepMatch = content.match(/\|[\s-:]+(?:\|[\s-:]+)+\|/);
|
||||||
|
return sepMatch ? (sepMatch[0].match(/---/g) || []).length : 4;
|
||||||
|
}
|
||||||
|
const firstDataLine = content.split('\n').find(l => l.includes('|'));
|
||||||
|
return firstDataLine ? firstDataLine.split('|').filter(c => c.trim()).length : 4;
|
||||||
|
})();
|
||||||
|
const tableMaxWidth = Math.min(Math.max(colCount * 140, 400), window.innerWidth * 0.85);
|
||||||
|
|
||||||
|
// 根据行数动态计算高度:表头 36px + 每行 30px,最小 150,最大 70vh
|
||||||
|
const rowCount = (() => {
|
||||||
|
if (isMdTable) {
|
||||||
|
const sepMatch = content.match(/\|[\s-:]+(?:\|[\s-:]+)+\|/);
|
||||||
|
if (sepMatch) {
|
||||||
|
const bodyPart = content.substring(content.indexOf(sepMatch[0]) + sepMatch[0].length);
|
||||||
|
const bodyCells = bodyPart.split('|').filter(c => c.trim()).length;
|
||||||
|
return Math.ceil(bodyCells / colCount);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return content.split('\n').filter(l => l.trim() && l.includes('|')).length;
|
||||||
|
})();
|
||||||
|
const tableMaxHeight = Math.min(Math.max(36 + rowCount * 30 + 20, 150), window.innerHeight * 0.7);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="text-xs p-1 rounded cursor-text w-full text-left">
|
<div className="text-xs p-1 rounded cursor-text w-full text-left">
|
||||||
<Tooltip
|
<Tooltip
|
||||||
@@ -564,7 +589,8 @@ const ReactTableTooltip = ({ content }: { content: string }) => {
|
|||||||
showArrow={true}
|
showArrow={true}
|
||||||
className="tooltip-custom-offset"
|
className="tooltip-custom-offset"
|
||||||
scrollable={true}
|
scrollable={true}
|
||||||
maxHeight={400}
|
maxWidth={tableMaxWidth}
|
||||||
|
maxHeight={tableMaxHeight}
|
||||||
>
|
>
|
||||||
<div className="text-gray-800 break-all overflow-hidden line-clamp-2 flex items-center gap-1">
|
<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>
|
<i className="ri-table-line text-blue-400 flex-shrink-0"></i>
|
||||||
|
|||||||
Reference in New Issue
Block a user