⚡ perf(vscode): 代码阅读预览差异到了不再给每张卡片外面包一层：改动色条画在卡片里、挪到卡片外侧，卡片不拆掉重建

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react'
+import type { CSSProperties, ReactElement } from 'react'
 import type { RewriteTool } from './BlockTools'
 import type { DiffTree, FoldedRuns, PlacedRemoved } from './diffView'
 import type { GridSlots } from './PropertyGrid'
@@ -146,28 +146,22 @@ function hasShownChildren(block: BlockView, state: BlockTreeState): boolean {
 
 const CHANGE_NAMES = { add: '新增', mod: '修改', del: '删除' } as const
 
-/** 标差异时卡片左边外侧的改动色条（没变的留一条透明的，同一层照样对齐）；不标差异时原样。 */
-function ChangeRow({ diff, change, children }: { diff: boolean, change: keyof typeof CHANGE_NAMES | undefined, children: ReactNode }): ReactElement {
-  if (!diff)
-    return <>{children}</>
-  return (
-    <div className="cr-change-row flex gap-[5px]">
-      <span className="cr-change-bar" data-change={change} data-tooltip={change && CHANGE_NAMES[change]} />
-      <div className="min-w-0 flex-1">{children}</div>
-    </div>
-  )
+/**
+ * 标差异时卡片左边外侧的改动色条（没变的是一条透明的）：画在卡片里、由 CSS 挪到卡片左边外侧（同一层的卡片让出它的位置，见 .cr-level[data-diff]），
+ * 差异到了、走了，卡片都还是原来那个元素，不拆掉重建。
+ */
+function ChangeBar({ change }: { change: keyof typeof CHANGE_NAMES | undefined }): ReactElement {
+  return <span className="cr-change-bar" data-change={change} data-tooltip={change && CHANGE_NAMES[change]} />
 }
 
 /** 「只看改动」时连着没变的几块折成的一条「… N 块没变」，点开恢复这几块。 */
 function UnchangedStrip({ count, onOpen }: { count: number, onOpen: () => void }): ReactElement {
   return (
-    <ChangeRow diff 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>
+    <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>
   )
 }
 
@@ -306,9 +300,7 @@ const BlockItem = memo(({ block }: { block: BlockView }): ReactElement => {
       {shape.run !== undefined && <UnchangedStrip count={shape.run} onOpen={() => tree.onOpenRun(block.id)} />}
       {shape.shown && (
         <>
-          <ChangeRow diff={shape.diff} change={shape.change?.change}>
-            <BlockCard block={block} shape={shape} ask={ask} rewrite={rewriting} />
-          </ChangeRow>
+          <BlockCard block={block} shape={shape} ask={ask} rewrite={rewriting} />
           {/* 输入框、展开状态跟着块的记号走，文档刷新块 id 变了也不丢 */}
           {qa && ask.chat && (
             <AskThread
@@ -358,7 +350,10 @@ export function BlockLevel({ blocks, owner, slotted = false }: { blocks: BlockVi
   const tree = useBlockTree()
   // 挂在卡片子行上的子块画在卡片属性表里（slotted 的那一层），这一层不画；删掉的块都放回卡片后面这一层
   const listed = useMemo(() => slotted ? blocks : blocks.filter(block => !block.slot), [blocks, slotted])
-  const removed = useStore(tree.state, state => slotted ? NO_REMOVED : state.diff?.removed.get(owner?.id ?? '') ?? NO_REMOVED)
+  const { removed, diff } = useStore(tree.state, state => ({
+    removed: slotted ? NO_REMOVED : state.diff?.removed.get(owner?.id ?? '') ?? NO_REMOVED,
+    diff: state.diff !== undefined,
+  }), shallowEqual)
   const listedIds = new Set(listed.map(block => block.id))
   // 删掉的块排在它原来前面那块后面；那块被筛掉了也照排，不跟着消失；那块画在卡片里时排到这一层最后
   const removedAfter = (id: string | undefined): ReactElement[] => removed
@@ -368,7 +363,7 @@ export function BlockLevel({ blocks, owner, slotted = false }: { blocks: BlockVi
     .filter(item => item.after !== undefined && !listedIds.has(item.after))
     .map(item => <RemovedCard key={item.id} placed={item} />)
   return (
-    <div className="cr-level flex gap-2" {...kindProps(owner)} data-owner={owner?.id}>
+    <div className="cr-level flex gap-2" {...kindProps(owner)} data-owner={owner?.id} data-diff={diff ? '' : undefined}>
       <div className="flex w-3 shrink-0 justify-center">
         <div className="cr-guide w-px" />
       </div>
@@ -466,6 +461,7 @@ function BlockCard({ block, shape, ask, rewrite }: { block: BlockView, shape: Bl
       data-editing={shape.editing ? '' : undefined}
       data-change={change?.change}
     >
+      {shape.diff && <ChangeBar change={change?.change} />}
       {change?.outermost && <span className="cr-added-badge">新增</span>}
       {shape.hasChildren
         ? (
@@ -529,31 +525,30 @@ function RemovedCard({ placed }: { placed: PlacedRemoved }): ReactElement {
   // 旧块的 id 是旧版本里的位置，换成页面上认删掉的块用的 id，属性行的 id 才不和现在的块撞上
   const old = useMemo(() => ({ ...block, id: placed.id }), [block, placed.id])
   return (
-    <ChangeRow diff change="del">
-      <div className="cr-block cr-removed flex items-start gap-2.5 rounded-lg py-2 pr-2.5 pl-2" {...kindProps(block)} data-id={placed.id}>
-        <button
-          type="button"
-          className="flex h-5 w-3.5 shrink-0 items-center justify-center rounded-sm text-[var(--vscode-descriptionForeground)] hover:text-[var(--vscode-foreground)]"
-          aria-label={open ? '收起删掉的内容' : '展开删掉的内容'}
-          aria-expanded={open}
-          onClick={toggle}
-        >
-          <Chevron size={14} strokeWidth={1.8} />
-        </button>
-        <KindIcon concepts={block.concepts} />
-        <div className="min-w-0 flex-1">
-          <div className="cr-removed-head cursor-pointer truncate text-[12.5px] leading-5" onClick={toggle}>
-            <span className="cr-removed-label">已删除 · </span>
-            {kindName}
-            {title && <span className="cr-removed-title">{` ${title}`}</span>}
-          </div>
-          {open && (
-            <div className="cr-removed-old mt-1">
-              <BlockPreview block={old} folds={folds} />
-            </div>
-          )}
+    <div className="cr-block cr-removed relative flex items-start gap-2.5 rounded-lg py-2 pr-2.5 pl-2" {...kindProps(block)} data-id={placed.id}>
+      <ChangeBar change="del" />
+      <button
+        type="button"
+        className="flex h-5 w-3.5 shrink-0 items-center justify-center rounded-sm text-[var(--vscode-descriptionForeground)] hover:text-[var(--vscode-foreground)]"
+        aria-label={open ? '收起删掉的内容' : '展开删掉的内容'}
+        aria-expanded={open}
+        onClick={toggle}
+      >
+        <Chevron size={14} strokeWidth={1.8} />
+      </button>
+      <KindIcon concepts={block.concepts} />
+      <div className="min-w-0 flex-1">
+        <div className="cr-removed-head cursor-pointer truncate text-[12.5px] leading-5" onClick={toggle}>
+          <span className="cr-removed-label">已删除 · </span>
+          {kindName}
+          {title && <span className="cr-removed-title">{` ${title}`}</span>}
         </div>
+        {open && (
+          <div className="cr-removed-old mt-1">
+            <BlockPreview block={old} folds={folds} />
+          </div>
+        )}
       </div>
-    </ChangeRow>
+    </div>
   )
 }