⚡ perf(vscode): 代码阅读预览按卡片订阅状态：中文名、调用树棵数、单击高亮、问答一条消息只重画受影响的卡片和文字，新文档里内容没变的块沿用原来的对象不重画，没展开又没说过的块不画问答区

vscode/webview-ui/src/codeReader/useOccurrences.ts

@@ -1,15 +1,15 @@
 import type { Click, Highlight, ScrollPosition } from './occurrences'
+import type { TextMarks } from './SegmentText'
+import type { Store } from './store'
 import type { BlockView, Occurrence } from './types'
-import { createContext, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { documentNameAt, PEEK_ATTRIBUTE } from './definitionPeek'
 import { clickAction, KeyScroll, OccurrenceHighlight, occurrenceJumpKey, OccurrenceNavigation } from './occurrences'
 import { occurrencePlan } from './reveal'
+import { useStore } from './store'
 import { showInViewport } from './useReveal'
 import { onMessage, postMessage } from './vscode'
 
-/** 眼下高亮着的名字，SegmentText 按它给各处出现上底色、给当前那一处描边。 */
-export const HighlightContext = createContext<Highlight | undefined>(undefined)
-
 /** 自己管点击的东西：点在上面（名字以外的地方）高亮不动。定义卡片浮窗里的名字是别的文件的，点了也不动 */
 const CONTROLS = `a, button, input, select, textarea, [role="listbox"], [role="dialog"], .cr-filter-bar, .cr-prop-label, [${PEEK_ATTRIBUTE}]`
 
@@ -72,15 +72,16 @@ function scrollBack({ x, y }: ScrollPosition, own: (position: ScrollPosition) =>
 }
 
 /**
- * 单击名字高亮它在文档里的各处出现，点空白处、Esc、换文档版本或翻译清掉；返回眼下高亮着的名字，和筛选栏上「上一处 / 下一处」用的跳转。
+ * 单击名字高亮它在文档里的各处出现，点空白处、Esc、换文档版本或翻译清掉；高亮着的名字记进 marks（页面文字的标记），返回它和筛选栏上「上一处 / 下一处」用的跳转。
  * 高亮着时扩展端的「跳到下一处 / 上一处高亮」命令发来 moveOccurrence，筛选栏上的按钮走同一条跳转：当前那一处换成下一处页面上找得到的出现，
  * 展开把它折叠住的块、属性行和子行，再把它滚进视口。按钮不是按键，不按 ⌘↓ 那样拉回按键时的位置。
  * 默认的 ⌘↓ / ⌘↑（Windows 是 ctrl）在能跳的时候取消浏览器滚到底 / 滚到顶，但不停事件继续传（VS Code 在后面才把按键收成命令）。
  * 别的键浏览器仍可能自己滚，跳的时候盖掉它，见 KeyScroll。
  */
-export function useOccurrences(version: number | undefined, translatorId: string | undefined, page: OccurrencePage | undefined): { highlight: Highlight | undefined, moveOccurrence: (step: 1 | -1) => void } {
-  const [highlight, setHighlight] = useState<Highlight | undefined>()
-  const [occurrences] = useState(() => new OccurrenceHighlight(postMessage, setHighlight))
+export function useOccurrences(version: number | undefined, translatorId: string | undefined, page: OccurrencePage | undefined, marks: Store<TextMarks>): { highlight: Highlight | undefined, moveOccurrence: (step: 1 | -1) => void } {
+  // 高亮记在页面文字的标记里（TextMarksContext），各段文字按自己那几段订阅，换个名字高亮只重画画法变了的那几段
+  const highlight = useStore(marks, current => current.highlight)
+  const [occurrences] = useState(() => new OccurrenceHighlight(postMessage, next => marks.set(current => ({ ...current, highlight: next }))))
   const [navigation] = useState(() => new OccurrenceNavigation(postMessage, { focused: document.hasFocus(), typing: isTyping(document.activeElement) }))
   const [keyScroll] = useState(() => new KeyScroll())
   /** 用键盘或筛选栏按钮跳过几次：每跳一次，画完后把当前那一处滚进视口 */