系统的核心组件包括：
1. TextRangeSelector：主容器组件，负责整合所有子组件并提供DnD上下文
2. Renderer：负责渲染文本和分段的可视化表示，包含三层结构
3. BackgroundLayer：处理文本分段的背景色渲染（第一层）
4. DndDropLayer：处理拖拽目标区域（第二层）
5. DndDragLayer：处理拖拽操作的视觉反馈（第三层）
6. NewTRSContext：提供全局状态管理，存储原文和分段数据
三层渲染结构
系统采用三层结构渲染每个文本段落，确保清晰的视觉表现和精确的交互控制：
return (
<div style={style}>
{/* 第一层：背景层 - 负责显示分段的背景颜色 */}
<div className={clsx('absolute left-0 top-0 max-w-full')}>
{parts && <BackgroundLayer parts={parts} />}
</div>
{/* 第二层：DnD Drop层 - 负责处理拖拽放置 */}
<div
className={clsx(
'absolute left-0 top-0 break-all',
// !isDragging && 'pointer-events-none',
)}
>
<DndDropLayer text={text} startPos={startPos} />
</div>
{/* 第三层：DnD Drag层 - 负责处理拖拽视觉反馈 */}
<div className={clsx('absolute left-0 top-0', 'pointer-events-none')}>
{showDragLayer && <DndDragLayer parts={parts} />}
</div>
</div>
);
数据模型
系统处理两类主要数据：
1. 原文数组：包含完整的文本内容，按段落分割
2.分段数据：由大模型生成的文本分段信息，每个分段包含起始位置(s)和结束位置(e)
分段之间可能存在重叠，系统需要正确处理这种情况并提供直观的可视化表示。
虚拟化列表实现
为了高效处理大型文本，系统采用react-window库的VariableSizeList组件实现虚拟化列表，只渲染当前视口中可见的文本部分。这大大提高了系统在处理长文本时的性能。
return (
<List
ref={variableListRef}
className="!h-full px-6 py-6 [&>:first-child]:relative text-[14px] leading-[30px] !overflow-y-scroll"
itemSize={getItemSize} // 每行高度
height={height} // 父容器高度
itemCount={chunks.length} // 总块数
width="100%"// 宽度适应父容器
estimatedItemSize={30}
onItemsRendered={({
visibleStartIndex,
visibleStopIndex,
}: {
visibleStartIndex: number;
visibleStopIndex: number;
}) => {
// 更新当前可视区域
console.log('range:', visibleStartIndex, visibleStopIndex);
setNewLineRange(visibleStartIndex, visibleStopIndex);
}}
innerElementType={CustomInnerElement}
>
{rowRenderer}
</List>
);
系统动态计算每行文本的高度，确保虚拟列表能够准确渲染不同长度的文本段落：
// 动态计算行高
const getLineHeight = (line: string, index: number) => {
if (!virtualListRef.current) return30;
console.log('计算行高', index);
const tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.whiteSpace = 'pre-wrap';
tempElement.style.width = '100%';
tempElement.style.fontSize = '14px';
tempElement.style.lineHeight = '30px';
tempElement.style.wordBreak = 'break-all';
tempElement.innerText = line;
virtualListRef.current.appendChild(tempElement);
const height = tempElement.getBoundingClientRect().height;
virtualListRef.current.removeChild(tempElement);
return height;
};
三层结构详解
🔹第一层：背景层（BackgroundLayer）
背景层负责根据分段数据渲染不同颜色的背景，直观地展示文本的分段情况。系统使用不同的颜色区分奇数段、偶数段、重叠区域和空隙区域：
return (
<span
className={clsx(
'cursor-pointer break-all',
isGap && 'bg-[#276DDC4D]', // 激活状态
!overlapped && isEven && 'bg-[#0AA6A44D]', // 偶数区域
!overlapped && isOdd && 'bg-[#FF61614D]', // 奇数区域
overlapped && 'bg-[#B6C3C3] cursor-default', // 重叠部分
)}
onClick={() => highlight(part)}
>
{partText}
</span>
);
🔹第二层：DnD Drop层（DndDropLayer）
DnD Drop层负责处理拖拽目标区域，允许用户将游标拖放到文本的特定位置。该层在拖拽过程中接收游标的放置操作，并更新分段的边界：
function DndLayer({ text, startPos }: { text: string; startPos: number }) {
const { handleDropped, isDragging } = useContext(NewTRSContext);
const onDrop = (pos: CursorPosition, newPos: number) => {
// const p = newPos + lineIndex * LineCharCount;
// setIsDropping();
handleDropped(pos, newPos);
};
console.log('text:', text);
return (
<>
{/* 只有在拖拽的时候才渲染 */}
{isDragging
? text.split(splitter).map((char, index) => (
<Char key={index} index={index + startPos} onDrop={onDrop}>
{char}
</Char>
))
: null}
</>
);
}
为了优化性能，DnD Drop层只在拖拽过程中渲染，避免不必要的DOM元素创建。
🔹第三层：DnD Drag层（DndDragLayer）
DnD Drag层负责处理拖拽操作的视觉反馈，显示当前选中分段的游标，并在拖拽过程中提供视觉指引：
const DndDragLayer = ({ parts }: { parts: SplittedByLineTextRange[] }) => {
// TODO: 注意这一层只负责 Cursor 的拖动， 因此 所有文字是透明的并且不响应事件
const { activatedObject } = useContext(NewTRSContext);
return (
<>
{parts.map((part, index) => {
return (
<Fragment key={index}>
{activatedObject?.activatedRange &&
activatedObject.activatedRange.s === part.s && (
<CursorGhost
pos={{
index: activatedObject.index,
type: 's',
pos: part.s,
}}
/>
)}
<span className="text-transparent break-all">{part.text}</span>
{activatedObject?.activatedRange &&
activatedObject.activatedRange.e === part.e && (
<CursorGhost
pos={{
index: activatedObject.index,
type: 'e',
pos: part.e,
}}
/>
)}
</Fragment>
);
})}
</>
);
};
DndDragLayer组件显示两种游标：起始位置游标和结束位置游标，用户可以拖拽这些游标来调整分段的边界。
拖拽实现细节
系统使用React DnD库实现拖拽功能，主要包括以下组件：
1.CustomInnerElement：定义拖拽源，使用 useDrag钩子创建可拖拽的游标
2.Char：定义拖拽目标，使用useDrop钩子接收游标的放置操作
3.CursorGhost：提供拖拽元素的视觉反馈
const [{}, startDrag, startPreview] = useDrag(
() => ({
type: 'CURSOR',
item: () => {
return {
index: activatedObject?.index,
type: 's',
pos: activatedObject?.activatedRange.s,
};
},
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}),
[activatedObject],
);
当用户拖拽游标时，系统会更新全局状态中的分段数据，并重新渲染视图以反映变化。
粤ICP备14082021号
免费POC，
零成本试错
