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

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

@@ -7,6 +7,7 @@ import { Fragment } from 'react'
 import { AskThread } from './AskThread'
 import { BlockTools } from './BlockTools'
 import { CodeEditor } from './CodeEditor'
+import { KindIcon } from './kindIcons'
 import { PropertyGrid } from './PropertyGrid'
 import { asksOf, historyOf } from './qa'
 import { TextPreview } from './TextPreview'
@@ -22,7 +23,7 @@ export interface BlockTreeState {
   temporary: ReadonlySet<string>
   /** 被正在编辑的祖先盖住、不画的块（它们的行在祖先的编辑范围里），见 coveredByEditing */
   covered: ReadonlyMap<string, string>
-  /** 种类标签上写什么：翻译插件给种类起的名字（库规则的种类是规则给的标签），没给就是 id */
+  /** 种类叫什么（种类图标的悬停提示和 aria-label）：翻译插件给种类起的名字（库规则的种类是规则给的 badge.label），没给就是 id */
   kindName: (kind: string) => string
   /** 刚点了「编辑」、要把光标放进去的块 */
   focusId: string | null
@@ -123,7 +124,7 @@ function BlockPreview({ block, tree }: { block: BlockView, tree: BlockTreeState
   )
 }
 
-/** 一块：折叠箭头、种类标签、预览内容或源码、右上角的一排图标按钮（BlockTools）。 */
+/** 一块：折叠箭头、种类图标、预览内容或源码、右上角的一排图标按钮（BlockTools）。 */
 function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }): ReactElement {
   const editing = tree.editing.has(block.id)
   const collapsed = tree.collapsed.has(block.id)
@@ -150,9 +151,7 @@ function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }):
             </button>
           )
         : <span className="w-3.5 shrink-0" />}
-      <span className="cr-badge flex h-5 min-w-11 shrink-0 items-center justify-center rounded px-1 text-[11px] leading-[14px] font-medium whitespace-nowrap">
-        {tree.kindName(block.kind)}
-      </span>
+      <KindIcon block={block} name={tree.kindName(block.kind)} />
       <div className="min-w-0 flex-1">
         {editing
           ? (