⚡ perf(vscode): 代码阅读预览发给页面的块只记相对位置：块在源码里占的地方记成离前一块多远、自己多长，块里名字的下标从块的开头算，页面从文件开头累加回文件里的位置、和扩展端打交道的地方都在一处换算；靠前改了代码，后面内容没变的块发过去一模一样，扩展端自己的块和发给页面的块分成两种类型

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

@@ -3,7 +3,7 @@ import type { BlockView, StickyScrollSettings } from './types'
 import { useContext, useLayoutEffect, useMemo } from 'react'
 import { KindIcon } from './kindIcons'
 import { pageLayout } from './pageLayout'
-import { SegmentText, TextMarksContext } from './SegmentText'
+import { BlockIdContext, SegmentText, TextMarksContext } from './SegmentText'
 import { selectStore } from './store'
 import { flash } from './useReveal'
 import { usePinnedHeight } from './useScrollPosition'
@@ -24,20 +24,22 @@ function blocksById(blocks: readonly BlockView[]): Map<string, BlockView> {
 
 /**
  * 钉住的一行里卡片的头：折叠箭头那格留空、概念图标、标题，各自的位置同卡片上的，一行放不下省略。
- * 标题同卡片上的写法（中文名照换）：属性表的第一行（名称）的值，或一行译文；Markdown 只取第一行。
+ * 标题同卡片上的写法（中文名照换，标题里的下标同卡片上的从这块的开头算）：属性表的第一行（名称）的值，或一行译文；Markdown 只取第一行。
  */
 export function PinnedHead({ block }: { block: BlockView }): ReactElement {
   const title = 'properties' in block ? block.properties[0]?.value : block.translation
   return (
-    <div className="flex h-full min-w-0 items-center gap-2.5 pr-2.5 pl-[9px]">
-      <span className="w-3.5 shrink-0" />
-      <KindIcon concepts={block.concepts} />
-      <p className="cr-code cr-sticky-title min-w-0 flex-1">
-        {title && ('markdown' in title
-          ? <span className="cr-role-comment">{title.markdown.split('\n', 1)[0].trim()}</span>
-          : <SegmentText segments={title} />)}
-      </p>
-    </div>
+    <BlockIdContext value={block.id}>
+      <div className="flex h-full min-w-0 items-center gap-2.5 pr-2.5 pl-[9px]">
+        <span className="w-3.5 shrink-0" />
+        <KindIcon concepts={block.concepts} />
+        <p className="cr-code cr-sticky-title min-w-0 flex-1">
+          {title && ('markdown' in title
+            ? <span className="cr-role-comment">{title.markdown.split('\n', 1)[0].trim()}</span>
+            : <SegmentText segments={title} />)}
+        </p>
+      </div>
+    </BlockIdContext>
   )
 }
 
@@ -55,7 +57,7 @@ export function StickyLines({ content, blocks, settings }: { content: RefObject<
   const byId = useMemo(() => blocksById(blocks), [blocks])
   // 钉着的名字照换中文名，不画页面上的高亮
   const marks = useContext(TextMarksContext)
-  const unhighlighted = useMemo(() => selectStore(marks, ({ names }) => ({ names })), [marks])
+  const unhighlighted = useMemo(() => selectStore(marks, ({ names, placement }) => ({ names, placement })), [marks])
   const count = lines.scopes.length
   const height = count * STICKY_LINE_HEIGHT + lines.offset
 
@@ -90,6 +92,7 @@ export function StickyLines({ content, blocks, settings }: { content: RefObject<
             <div
               key={scope.id}
               className="cr-sticky-line"
+              data-id={scope.id}
               data-last={last ? '' : undefined}
               style={{ top: index * STICKY_LINE_HEIGHT + (last ? lines.offset : 0), height: STICKY_LINE_HEIGHT }}
               onClick={() => jump(scope.id)}