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

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

@@ -1,9 +1,9 @@
 import type { CSSProperties, ReactElement, ReactNode } from 'react'
-import type { DiffTree, PlacedRemoved } from './diffView'
+import type { DiffTree, FoldedRuns, PlacedRemoved } from './diffView'
 import type { QaState } from './qa'
 import type { PendingImage } from './qaImages'
 import type { BlockMarks, BlockView } from './types'
-import { ChevronDown, ChevronRight, EyeOff } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronsUpDown, EyeOff } from 'lucide-react'
 import { Fragment, useState } from 'react'
 import { AskThread } from './AskThread'
 import { BlockTools } from './BlockTools'
@@ -38,6 +38,9 @@ export interface BlockTreeState {
   qa?: QaTree
   /** 代码差异：新增、修改的块和删掉的块；侧栏开着「未提交的更改」或审查工单、基准里有这个文件时才有 */
   diff?: DiffTree
+  /** 「只看改动」开着时折起来的连着没变的块（见 foldUnchanged）；onOpenRun 点开一段（按第一块的 id） */
+  folded?: FoldedRuns
+  onOpenRun: (id: string) => void
 }
 
 /** 问 AI 的状态和动作，块按自己的记号（anchor）取 */
@@ -72,6 +75,19 @@ function ChangeRow({ tree, change, children }: { tree: BlockTreeState, change: k
   )
 }
 
+/** 「只看改动」时连着没变的几块折成的一条「… N 块没变」，点开恢复这几块。 */
+function UnchangedStrip({ count, tree, onOpen }: { count: number, tree: BlockTreeState, onOpen: () => void }): ReactElement {
+  return (
+    <ChangeRow tree={tree} change={undefined}>
+      <button type="button" className="cr-unchanged flex h-[22px] w-full items-center gap-1.5 rounded px-2.5 text-xs" onClick={onOpen}>
+        <ChevronsUpDown size={12} strokeWidth={1.8} className="shrink-0" aria-hidden />
+        {`… ${count} 块没变`}
+        <span className="cr-link">点开</span>
+      </button>
+    </ChangeRow>
+  )
+}
+
 /** 块画不画：被筛掉的、被正在编辑的祖先盖住的都不画。 */
 function shown(block: BlockView, tree: BlockTreeState): boolean {
   return !tree.hidden.has(block.id) && !tree.covered.has(block.id)
@@ -93,7 +109,7 @@ function kindProps(block: BlockView | undefined): { 'data-kind'?: string, 'data-
 /**
  * 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。被筛掉、被盖住的块不画，不留空位，竖线跟着变短。
  * owner 是这一层所属的块（顶层没有），悬停它时竖线换成它的种类色。
- * 标差异时每张卡片左边外侧一条改动色条，删掉的块收成一行放回原来的位置（见 RemovedCard）。
+ * 标差异时每张卡片左边外侧一条改动色条，删掉的块收成一行放回原来的位置（见 RemovedCard）；「只看改动」时连着没变的块折成一条（UnchangedStrip）。
  */
 export function BlockLevel({ blocks, owner, tree }: { blocks: BlockView[], owner?: BlockView, tree: BlockTreeState }): ReactElement {
   const removed = tree.diff?.removed.get(owner?.id ?? '') ?? []
@@ -110,7 +126,8 @@ export function BlockLevel({ blocks, owner, tree }: { blocks: BlockView[], owner
         {removedAfter(undefined)}
         {blocks.map(block => (
           <Fragment key={block.id}>
-            {shown(block, tree) && (
+            {tree.folded?.runs.has(block.id) && <UnchangedStrip count={tree.folded.runs.get(block.id) ?? 0} tree={tree} onOpen={() => tree.onOpenRun(block.id)} />}
+            {shown(block, tree) && !tree.folded?.folded.has(block.id) && (
               <>
                 <ChangeRow tree={tree} change={tree.diff?.changes.get(block.id)?.change}>
                   <BlockCard block={block} tree={tree} />