Function useSearchHighlight

src/renderer/src/hooks/useSearchHighlight.ts:27–180

({
  containerRef,
  messages,
  searchState,
  pageId,
  onMatchesChange
}: UseSearchHighlightOptions)

 * 搜索高亮 Hook
 */
export function useSearchHighlight({
  containerRef,
  messages,
  searchState,
  pageId,
  onMatchesChange
}: UseSearchHighlightOptions): UseSearchHighlightResult {
  const rangesRef = useRef<Map<number, Range>>(new Map())

  // 计算搜索选项
  const searchOptions: SearchOptions = useMemo(
    () => ({
      matchCase: searchState.matchCase,
      useRegex: searchState.useRegex,
      matchWholeWord: searchState.matchWholeWord
    }),
    [searchState.matchCase, searchState.useRegex, searchState.matchWholeWord]
  )

  // 防抖后的查询
  const [debouncedQuery, setDebouncedQuery] = useState(searchState.query)

  // 防抖处理
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedQuery(searchState.query)
    }, DEBOUNCE_DELAY)

    return () => clearTimeout(timer)
  }, [searchState.query])

  // 计算匹配结果（使用防抖后的查询）
  const matches = useMemo(() => {
    if (!searchState.isOpen || !debouncedQuery.trim()) {
      return []
    }
    return findAllMatches(messages, debouncedQuery, searchOptions)
  }, [messages, searchState.isOpen, debouncedQuery, searchOptions])

  // 通知匹配结果变化
  useEffect(() => {
    onMatchesChange?.(matches)
  }, [matches, onMatchesChange])

  // 应用 CSS Custom Highlight - 当 matches 变化时重新创建所有 Range
  useEffect(() => {
    // 清除之前的高亮
    if ('highlights' in CSS) {
      CSS.highlights.delete('search-highlight')
      CSS.highlights.delete('search-current')
    }
    rangesRef.current.clear()

    const container = containerRef.current
    if (!container || matches.length === 0 || !('highlights' in CSS)) {
      return
    }