✨ feat(vscode): 代码阅读的块种类只画图标（lucide，种类色），种类名放进鼠标停上去的提示和读屏文字；库规则给自己的图标

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

@@ -0,0 +1,51 @@
+import type { LucideIcon } from 'lucide-react'
+import type { ReactElement } from 'react'
+import type { BlockKind, BlockView } from './types'
+import { icons, SquareDashed } from 'lucide-react'
+
+/**
+ * 内置种类的图标（lucide 图标名，和库规则给的 badge.icon 同一种写法）：块左边只画图标，名字是悬停提示。
+ * 同一类语义共用一个颜色（codeReader.css 的 --cr-kind-*：常量 / 变量 / 字段都是数据，尝试 / 捕获都是异常处理），图标区分具体是哪种。
+ */
+export const KIND_ICONS: Record<BlockKind, string> = {
+  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',
+}
+
+const LUCIDE: Record<string, LucideIcon | undefined> = icons
+
+/** lucide 图标名（kebab-case，`square-function`）→ 图标组件；认不出的名字（规则写错了）画虚线方块。 */
+export function lucideIcon(name: string): LucideIcon {
+  return LUCIDE[name.replace(/(?:^|-)([a-z0-9])/g, (_, first: string) => first.toUpperCase())] ?? SquareDashed
+}
+
+const BUILT_IN: Partial<Record<string, string>> = KIND_ICONS
+
+/**
+ * 块左边的种类：只画图标，和一行字等高（20px 的框、16px 的图形），颜色是种类色（--kind）。图标是库规则给的（badge.icon），
+ * 没有就按内置种类查 KIND_ICONS；名字（翻译插件给种类起的，库规则的种类是规则给的）写在悬停提示（title）和读屏念的 aria-label 里。
+ */
+export function KindIcon({ block, name }: { block: Pick<BlockView, 'kind' | 'badge'>, name: string }): ReactElement {
+  const Icon = lucideIcon(block.badge?.icon ?? BUILT_IN[block.kind] ?? '')
+  return (
+    <span className="cr-kind flex size-5 shrink-0 items-center justify-center" role="img" title={name} aria-label={name}>
+      <Icon size={16} strokeWidth={2.2} aria-hidden />
+    </span>
+  )
+}