✨ feat(vscode): 代码阅读把推导式换成按读的顺序重排的遍历小框

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

@@ -1,27 +1,48 @@
+import type { LucideIcon } from 'lucide-react'
 import type { ReactElement } from 'react'
-import type { Segment } from './types'
+import type { GroupStyle, Inline, SegmentGroup } from './types'
+import { Repeat } from 'lucide-react'
 import { useContext } from 'react'
 import { segmentOccurrence } from './occurrences'
 import { HighlightContext } from './useOccurrences'
 
 /**
  * 按词性给每一段上色，颜色在 codeReader.css 的 .cr-role-* 里按主题切换；带源码下标的名字记在 data-offset 上，
- * 跳到定义、高亮各处出现用；是眼下高亮着的名字的一处出现时 data-occurrence 标出底色。
+ * 跳到定义、高亮各处出现用；是眼下高亮着的名字的一处出现时 data-occurrence 标出底色。框起来的一组词画成小框，框里的词同样处理。
  */
-export function SegmentText({ segments }: { segments: Segment[] }): ReactElement {
+export function SegmentText({ segments }: { segments: Inline[] }): ReactElement {
   const highlight = useContext(HighlightContext)
   return (
     <>
-      {segments.map((segment, index) => (
-        <span
-          key={index}
-          className={`cr-role-${segment.role}`}
-          data-offset={segment.offset}
-          data-occurrence={highlight && segmentOccurrence(segment, highlight.occurrences)}
-        >
-          {segment.text}
-        </span>
-      ))}
+      {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)}
+            >
+              {piece.text}
+            </span>
+          )
+        : <GroupBox key={index} group={piece} />)}
     </>
   )
 }
+
+/** 框的样式 → 框头图标；颜色在 codeReader.css 的 .cr-group[data-style] 里。 */
+const GROUP_ICONS: Record<GroupStyle, LucideIcon> = { iteration: Repeat }
+
+/** 框起来的一组词：嵌在前后文字里的小框，放不下时整个挪到下一行，比一行还长时在框里换行。 */
+function GroupBox({ group }: { group: SegmentGroup }): ReactElement {
+  const Icon = GROUP_ICONS[group.style]
+  return (
+    <span className="cr-group" data-style={group.style}>
+      <span className="cr-group-head">
+        <Icon size={12} strokeWidth={2} aria-hidden />
+        {group.label}
+      </span>
+      <SegmentText segments={group.segments} />
+    </span>
+  )
+}