✨ feat(vscode): 代码阅读预览单击名字高亮它在文件里的各处出现

vscode/webview-ui/src/codeReader/SegmentText.tsx

@@ -1,12 +1,26 @@
 import type { ReactElement } from 'react'
 import type { Segment } from './types'
+import { useContext } from 'react'
+import { segmentOccurrence } from './occurrences'
+import { HighlightContext } from './useOccurrences'
 
-/** 按词性给每一段上色，颜色在 codeReader.css 的 .cr-role-* 里按主题切换；带源码下标的名字记在 data-offset 上，跳到定义用。 */
+/**
+ * 按词性给每一段上色，颜色在 codeReader.css 的 .cr-role-* 里按主题切换；带源码下标的名字记在 data-offset 上，
+ * 跳到定义、高亮各处出现用；是眼下高亮着的名字的一处出现时 data-occurrence 标出底色。
+ */
 export function SegmentText({ segments }: { segments: Segment[] }): ReactElement {
+  const highlight = useContext(HighlightContext)
   return (
     <>
       {segments.map((segment, index) => (
-        <span key={index} className={`cr-role-${segment.role}`} data-offset={segment.offset}>{segment.text}</span>
+        <span
+          key={index}
+          className={`cr-role-${segment.role}`}
+          data-offset={segment.offset}
+          data-occurrence={highlight && segmentOccurrence(segment, highlight.occurrences)}
+        >
+          {segment.text}
+        </span>
       ))}
     </>
   )