Fix search highlighting scroll issue and improve color contrast

- Remove overlay-based highlighting that stayed in place during scroll
- Switch between read-only highlighted view and editable textarea based on search state
- Enhance color contrast: current match (red text + yellow bg), other matches (blue text + light blue bg)
- Use font-bold for better visibility of search results
- Ensure highlights follow text content during scrolling
This commit is contained in:
ZacharyZcR
2025-09-16 18:06:15 +08:00
parent 1d79fd721e
commit 978981dd6b

View File

@@ -240,10 +240,10 @@ export function FileViewer({
<span <span
key={`match-${index}`} key={`match-${index}`}
className={cn( className={cn(
"font-semibold", "font-bold",
isCurrentMatch isCurrentMatch
? "text-orange-500" ? "text-red-600 bg-yellow-200"
: "text-blue-600" : "text-blue-800 bg-blue-100"
)} )}
> >
{text.substring(match.start, match.end)} {text.substring(match.start, match.end)}
@@ -522,32 +522,29 @@ export function FileViewer({
{shouldShowAsText && !showLargeFileWarning && ( {shouldShowAsText && !showLargeFileWarning && (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
{isEditable ? ( {isEditable ? (
<div className="relative h-full"> <div className="h-full">
{/* 高亮背景层 */} {searchText && searchMatches.length > 0 ? (
{searchText && ( // 当有搜索结果时,显示只读的高亮文本
<div <div className={cn(
className={cn( "h-full p-4 font-mono text-sm whitespace-pre-wrap overflow-auto",
"absolute inset-0 p-4 font-mono text-sm whitespace-pre-wrap overflow-auto pointer-events-none", fileTypeInfo.type === 'code' ? "bg-muted text-foreground" : "bg-background text-foreground"
"text-transparent z-0", )}>
fileTypeInfo.type === 'code' && "bg-muted"
)}
>
{renderHighlightedText(editedContent)} {renderHighlightedText(editedContent)}
</div> </div>
) : (
// 没有搜索时显示可编辑的textarea
<textarea
value={editedContent}
onChange={(e) => handleContentChange(e.target.value)}
className={cn(
"w-full h-full p-4 border-none resize-none outline-none",
"font-mono text-sm overflow-auto bg-background text-foreground",
fileTypeInfo.type === 'code' && "bg-muted text-foreground"
)}
placeholder="Start typing..."
spellCheck={false}
/>
)} )}
{/* 编辑器文本区域 */}
<textarea
value={editedContent}
onChange={(e) => handleContentChange(e.target.value)}
className={cn(
"relative w-full h-full p-4 border-none resize-none outline-none z-10",
"font-mono text-sm overflow-auto",
searchText ? "bg-transparent text-foreground" : "bg-background text-foreground",
fileTypeInfo.type === 'code' && !searchText && "bg-muted text-foreground"
)}
placeholder="Start typing..."
spellCheck={false}
/>
</div> </div>
) : ( ) : (
<div className={cn( <div className={cn(