✨ feat(vscode): 代码阅读差异加「只看改动」（连着没变的块折成一条、按工作区记住）、上一处 / 下一处改动、右边缘总览条

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

@@ -0,0 +1,48 @@
+import type { ReactElement } from 'react'
+import type { ChangeStop } from './diffView'
+import { useLayoutEffect, useState } from 'react'
+
+const CHANGE_NAMES = { add: '新增', mod: '修改', del: '删除' } as const
+
+/** 钉在预览顶部的筛选栏有多高（它换行、多出第二行时跟着变）：总览条从它下面开始。 */
+function usePinnedHeight(): number {
+  const [height, setHeight] = useState(0)
+  useLayoutEffect(() => {
+    const bar = document.querySelector<HTMLElement>('.cr-filter-bar')
+    if (!bar)
+      return
+    setHeight(bar.offsetHeight)
+    const observer = new ResizeObserver(() => setHeight(bar.offsetHeight))
+    observer.observe(bar)
+    return () => observer.disconnect()
+  }, [])
+  return height
+}
+
+/**
+ * 预览右边缘的总览条：每处改动（见 ChangeStop）按它在文件里的行画一段刻度，新增绿、修改蓝、删除红（删掉的块一条细线），
+ * 点刻度跳过去。lineCount 是新文件一共几行。
+ */
+export function OverviewRuler({ stops, lineCount, onPick }: { stops: readonly ChangeStop[], lineCount: number, onPick: (stop: ChangeStop) => void }): ReactElement {
+  const top = usePinnedHeight()
+  const total = Math.max(lineCount, 1)
+  const percent = (line: number): string => `${(Math.min(Math.max(line, 0), total) / total) * 100}%`
+  return (
+    <nav className="cr-ruler" style={{ top }} aria-label="改动总览">
+      <div className="cr-ruler-track">
+        {stops.map(stop => (
+          <button
+            key={stop.id}
+            type="button"
+            className="cr-ruler-tick"
+            data-change={stop.change}
+            style={{ top: percent(stop.from), ...(stop.change !== 'del' && { height: percent(stop.to - stop.from + 1) }) }}
+            data-tooltip={`${CHANGE_NAMES[stop.change]} · 第 ${stop.from + 1} 行`}
+            aria-label={`${CHANGE_NAMES[stop.change]}，第 ${stop.from + 1} 行`}
+            onClick={() => onPick(stop)}
+          />
+        ))}
+      </div>
+    </nav>
+  )
+}