✨ feat(vscode): 代码阅读卡片横排多个概念图标

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

@@ -1,6 +1,6 @@
 import type { LucideIcon } from 'lucide-react'
-import type { ReactElement } from 'react'
-import type { BlockKind, BlockView, KindIconName } from './types'
+import type { CSSProperties, ReactElement } from 'react'
+import type { BlockConcept, KindIconName } from './types'
 import {
   Activity,
   Atom,
@@ -79,53 +79,24 @@ export const KIND_ICON_COMPONENTS: Record<KindIconName, LucideIcon> = {
 }
 
 /**
- * 内置种类的图标：块左边只画图标，名字是悬停提示。
- * 同一类语义共用一个颜色（codeReader.css 的 --cr-kind-*：常量 / 变量 / 字段都是数据，尝试 / 捕获都是异常处理），图标区分具体是哪种。
+ * 卡片左边的概念图标，横排，各 20px，间距紧。图标名由宿主放进概念列表，这里只按名字画。
+ * 没有颜色的是语言的种类，按 id 用 CSS 的种类色；有颜色的只给这个图标上色。
+ * 每个图标悬停自己的名字（data-tooltip，见 components/ui/tooltip.tsx）；读屏把名字连起来念。
  */
-export const KIND_ICONS: Record<BlockKind, KindIconName> = {
-  import: 'import',
-  function: 'square-function',
-  class: 'box',
-  type: 'braces',
-  enum: 'list-ordered',
-  exception: 'triangle-alert',
-  field: 'tag',
-  const: 'lock',
-  variable: 'variable',
-  if: 'split',
-  else: 'corner-down-right',
-  loop: 'repeat',
-  try: 'shield',
-  catch: 'shield-alert',
-  finally: 'shield-check',
-  return: 'corner-down-left',
-  statement: 'code',
-  comment: 'message-square-text',
-  interpreter: 'terminal',
-  options: 'sliders-horizontal',
-  case: 'signpost',
-  command: 'square-terminal',
-  pipeline: 'square-terminal',
-  directive: 'terminal',
-  stage: 'layers',
-  run: 'square-terminal',
-  copy: 'copy',
-  setting: 'sliders-horizontal',
-  label: 'tag',
-  health: 'activity',
-  start: 'play',
-}
-
-/**
- * 块左边的种类：只画图标，和一行字等高（20px 的框、16px 的图形），颜色是种类色（--kind）。图标是库规则给的（badge.icon），
- * 没有就是内置种类的（KIND_ICONS，没带 badge 的块 kind 是 BlockKind）；名字（翻译插件给种类起的，库规则的种类是规则给的）
- * 写在悬停提示（data-tooltip，见 components/ui/tooltip.tsx）和读屏念的 aria-label 里。
- */
-export function KindIcon({ block, name }: { block: Pick<BlockView, 'kind' | 'badge'>, name: string }): ReactElement {
-  const Icon = KIND_ICON_COMPONENTS[block.badge?.icon ?? KIND_ICONS[block.kind as BlockKind]]
+export function KindIcon({ concepts }: { concepts: readonly BlockConcept[] }): ReactElement {
   return (
-    <span className="cr-kind flex size-5 shrink-0 items-center justify-center" role="img" data-tooltip={name} aria-label={name}>
-      <Icon size={16} strokeWidth={2.2} aria-hidden />
+    <span className="flex shrink-0 items-center gap-0.5" role="img" aria-label={concepts.map(concept => concept.label).join('，')}>
+      {concepts.map((concept) => {
+        const Icon = KIND_ICON_COMPONENTS[concept.icon]
+        const tint = concept.color
+          ? { 'data-badge': '' as const, 'style': { '--kind-dark': concept.color.dark, '--kind-light': concept.color.light } as CSSProperties }
+          : { 'data-kind': concept.id }
+        return (
+          <span key={concept.id} className="cr-kind flex size-5 shrink-0 items-center justify-center" data-tooltip={concept.label} aria-hidden {...tint}>
+            <Icon size={16} strokeWidth={2.2} aria-hidden />
+          </span>
+        )
+      })}
     </span>
   )
 }