✨ feat(vscode): 代码阅读认出代码里起的中文名（Annotated[…, Comment("…")]、@Comment 装饰器、行尾 # @Comment、docstring / JSDoc 的参数说明），预览里定义和用到它的各处都写中文名，悬停看原名，定义处后面淡淡写原名

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

@@ -3,31 +3,40 @@ import type { ReactElement } from 'react'
 import type { GroupStyle, Inline, SegmentGroup } from './types'
 import { Repeat } from 'lucide-react'
 import { useContext } from 'react'
+import { DisplayNameContext, shownName } from './displayNames'
 import { isCurrent, segmentOccurrence } from './occurrences'
 import { HighlightContext } from './useOccurrences'
 
 /**
  * 按词性给每一段上色，颜色在 codeReader.css 的 .cr-role-* 里按主题切换；带源码下标的名字记在 data-offset 上，
  * 跳到定义、高亮各处出现用；是眼下高亮着的名字的一处出现时 data-occurrence 标出底色，是当前那一处（点中的、用键盘跳到的）时
- * 再标 data-current。框起来的一组词画成小框，框里的词同样处理。
+ * 再标 data-current。起了中文名的名字显示中文名（data-name），悬停看原名，定义处本身在后面淡淡写原名；下标照旧，跳到定义、高亮照常。
+ * 框起来的一组词画成小框，框里的词同样处理。
  */
 export function SegmentText({ segments }: { segments: Inline[] }): ReactElement {
   const highlight = useContext(HighlightContext)
+  const names = useContext(DisplayNameContext)
   return (
     <>
-      {segments.map((piece, index) => 'role' in piece
-        ? (
-            <span
-              key={index}
-              className={`cr-role-${piece.role}`}
-              data-offset={piece.offset}
-              data-occurrence={highlight && segmentOccurrence(piece, highlight.occurrences)}
-              data-current={highlight && isCurrent(piece, highlight) ? '' : undefined}
-            >
-              {piece.text}
-            </span>
-          )
-        : <GroupBox key={index} group={piece} />)}
+      {segments.map((piece, index) => {
+        if (!('role' in piece))
+          return <GroupBox key={index} group={piece} />
+        const shown = shownName(piece, names)
+        return (
+          <span
+            key={index}
+            className={`cr-role-${piece.role}`}
+            data-offset={piece.offset}
+            data-occurrence={highlight && segmentOccurrence(piece, highlight.occurrences)}
+            data-current={highlight && isCurrent(piece, highlight) ? '' : undefined}
+            data-name={shown?.name}
+            title={shown && `原名 ${piece.text}`}
+          >
+            {shown ? shown.name : piece.text}
+            {shown?.definition && <span className="cr-original">{piece.text}</span>}
+          </span>
+        )
+      })}
     </>
   )
 }