系统的核心组件包括：
1. TextRangeSelector：主容器组件，负责整合所有子组件并提供DnD上下文
2. Renderer：负责渲染文本和分段的可视化表示，包含三层结构
3. BackgroundLayer：处理文本分段的背景色渲染（第一层）
4. DndDropLayer：处理拖拽目标区域（第二层）
5. DndDragLayer：处理拖拽操作的视觉反馈（第三层）
6. NewTRSContext：提供全局状态管理，存储原文和分段数据
三层渲染结构
系统采用三层结构渲染每个文本段落，确保清晰的视觉表现和精确的交互控制：
return (
<divstyle={style}>
{/* 第一层：背景层 - 负责显示分段的背景颜色 */}
<divclassName={clsx('absoluteleft-0top-0max-w-full')}>
{parts &&<BackgroundLayerparts={parts}/>}
</div>
{/* 第二层：DnD Drop层 - 负责处理拖拽放置 */}
<div
className={clsx(
'absoluteleft-0top-0break-all',
// !isDragging&& 'pointer-events-none',
)}
>
<DndDropLayertext={text}startPos={startPos}/>
</div>
{/* 第三层：DnD Drag层 - 负责处理拖拽视觉反馈 */}
<divclassName={clsx('absoluteleft-0top-0', 'pointer-events-none')}>
{showDragLayer &&<DndDragLayerparts={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>
);
系统动态计算每行文本的高度，确保虚拟列表能够准确渲染不同长度的文本段落：
// 动态计算行高
constgetLineHeight =(line:string, index:number) =>{
if(!virtualListRef.current)return30;
console.log('计算行高', index);
consttempElement =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);
constheight = tempElement.getBoundingClientRect().height;
virtualListRef.current.removeChild(tempElement);
returnheight;
};
三层结构详解
🔹第一层：背景层（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层负责处理拖拽目标区域，允许用户将游标拖放到文本的特定位置。该层在拖拽过程中接收游标的放置操作，并更新分段的边界：
functionDndLayer({ text, startPos }: { text: string; startPos: number }){
const{ handleDropped, isDragging } = useContext(NewTRSContext);
constonDrop =(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) => (
<Charkey={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 (
<Fragmentkey={index}>
{activatedObject?.activatedRange &&
activatedObject.activatedRange.s === part.s && (
<CursorGhost
pos={{
index:activatedObject.index,
type:'s',
pos:part.s,
}}
/>
)}
<spanclassName="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,
};
},
collectmonitor)=>({
isDragging: !!monitor.isDragging(),
}),
}),
[activatedObject],
);
当用户拖拽游标时，系统会更新全局状态中的分段数据，并重新渲染视图以反映变化。
