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

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

@@ -1,14 +1,25 @@
 import type { ReactElement } from 'react'
 import type { DocumentDiff } from './types'
-import { FilePlus, GitCompare } from 'lucide-react'
+import { ArrowDown, ArrowUp, FilePlus, GitCompare } from 'lucide-react'
 import { Fragment } from 'react'
 import { statsParts } from './diffView'
 
+export interface DiffBarProps {
+  diff: DocumentDiff
+  /** 「只看改动」开着：连着没变的块折成一条 */
+  onlyChanges: boolean
+  onToggleOnly: () => void
+  /** 有没有改动可以跳（筛掉的不算） */
+  canMove: boolean
+  /** 跳到上一处（-1）/ 下一处（1）改动 */
+  onMove: (step: 1 | -1) => void
+}
+
 /**
  * 筛选栏第二行（标差异时才有）：对比基准（「对比：上一次提交」），改动统计（「新增 2 · 修改 3 · 删除 1」，各按改动色，
- * 没有的那种不写，都没有写「没有改动」）。基准里没有这个文件时不写统计，看横幅。
+ * 没有的那种不写，都没有写「没有改动」），右边「只看改动」开关、上一处 / 下一处。基准里没有这个文件时只写基准，看横幅。
  */
-export function DiffBar({ diff }: { diff: DocumentDiff }): ReactElement {
+export function DiffBar({ diff, onlyChanges, onToggleOnly, canMove, onMove }: DiffBarProps): ReactElement {
   const parts = statsParts(diff.stats)
   return (
     <div className="mx-auto box-content flex h-[30px] max-w-[880px] items-center gap-2 px-6 text-xs whitespace-nowrap text-[var(--vscode-descriptionForeground)]">
@@ -30,6 +41,28 @@ export function DiffBar({ diff }: { diff: DocumentDiff }): ReactElement {
                   </Fragment>
                 ))}
           </span>
+          <span className="flex-1" />
+          <button type="button" className="cr-only-changes flex h-6 items-center gap-1.5 rounded px-1.5" aria-pressed={onlyChanges} onClick={onToggleOnly}>
+            <span className="cr-switch" data-on={onlyChanges ? '' : undefined} aria-hidden>
+              <span className="cr-switch-knob" />
+            </span>
+            只看改动
+          </button>
+          <span className="flex items-center gap-0.5" role="group" aria-label="改动之间跳">
+            {([[-1, ArrowUp, '上一处改动'], [1, ArrowDown, '下一处改动']] as const).map(([step, Icon, label]) => (
+              <button
+                key={step}
+                type="button"
+                className="cr-tool flex h-[22px] w-6 items-center justify-center rounded disabled:opacity-40"
+                data-tooltip={label}
+                aria-label={label}
+                disabled={!canMove}
+                onClick={() => onMove(step)}
+              >
+                <Icon size={14} strokeWidth={1.8} className="text-[var(--vscode-foreground)]" aria-hidden />
+              </button>
+            ))}
+          </span>
         </>
       )}
     </div>