✨ feat(vscode): 代码阅读修改的卡片里标出改了哪儿（改值旧值划掉接新值、加行 + 淡绿底、删行 − 淡红底划掉、说明按词 / 字标增删）

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

@@ -2,12 +2,13 @@ import type { CSSProperties, ReactElement, ReactNode } from 'react'
 import type { DiffTree, PlacedRemoved } from './diffView'
 import type { QaState } from './qa'
 import type { PendingImage } from './qaImages'
-import type { BlockView } from './types'
+import type { BlockMarks, BlockView } from './types'
 import { ChevronDown, ChevronRight, EyeOff } from 'lucide-react'
 import { Fragment, useState } from 'react'
 import { AskThread } from './AskThread'
 import { BlockTools } from './BlockTools'
 import { CodeEditor } from './CodeEditor'
+import { DiffText } from './DiffText'
 import { removedTitle } from './diffView'
 import { KindIcon } from './kindIcons'
 import { PropertyGrid, PropertyTable } from './PropertyGrid'
@@ -147,20 +148,20 @@ function BlockQa({ anchor, qa }: { anchor: string, qa: QaTree }): ReactElement {
 
 /**
  * 预览状态的内容：函数、类、枚举、导入、常量、变量块和库规则的卡片是属性表，其余是一行译文；
- * 译文下面依次接着摊开实参的表（跨几行写的调用）、说明。
+ * 译文下面依次接着摊开实参的表（跨几行写的调用）、说明。标差异时 marks 是这块自己的内容改了哪些（页面上正是差异算的那一版才给）。
  */
-function BlockPreview({ block, tree }: { block: BlockView, tree: BlockTreeState }): ReactElement {
+function BlockPreview({ block, tree, marks }: { block: BlockView, tree: BlockTreeState, marks?: BlockMarks }): ReactElement {
   if ('properties' in block)
-    return <PropertyGrid blockId={block.id} rows={block.properties} collapsed={tree.collapsed} onToggleFold={tree.onToggleFold} />
+    return <PropertyGrid blockId={block.id} rows={block.properties} collapsed={tree.collapsed} onToggleFold={tree.onToggleFold} marks={marks?.rows} />
   return (
     <>
-      <TextPreview text={block.translation} />
+      {marks?.translation ? <DiffText diff={marks.translation} /> : <TextPreview text={block.translation} />}
       {block.table && (
         <div className="mt-[3px]">
-          <PropertyTable parentId={tableId(block.id)} columns={block.table.columns} items={block.table.items} />
+          <PropertyTable parentId={tableId(block.id)} columns={block.table.columns} items={block.table.items} marks={marks?.table} />
         </div>
       )}
-      {block.doc && <TextPreview text={block.doc} className="mt-0.5" />}
+      {marks?.doc ? <DiffText diff={marks.doc} className="mt-0.5" /> : block.doc && <TextPreview text={block.doc} className="mt-0.5" />}
     </>
   )
 }
@@ -207,7 +208,7 @@ function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }):
                 onExit={() => tree.onToggleEdit(block.id)}
               />
             )
-          : <BlockPreview block={block} tree={tree} />}
+          : <BlockPreview block={block} tree={tree} marks={tree.diff?.current ? change?.marks : undefined} />}
       </div>
       {tree.temporary.has(block.id) && (
         <span className="cr-temporary flex h-5 shrink-0 items-center gap-1 rounded px-1.5 text-[11px] whitespace-nowrap">