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

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

@@ -0,0 +1,59 @@
+import type { BlockView } from './types'
+import { Database, SquareDashed, SquareFunction } from 'lucide-react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { KIND_ICONS, KindIcon, lucideIcon } from './kindIcons'
+
+function render(block: Pick<BlockView, 'kind' | 'badge'>, name: string): string {
+  return renderToStaticMarkup(<KindIcon block={block} name={name} />)
+}
+
+/** 标签之间的字：图标（svg）没有字 */
+const visibleText = (html: string): string => html.replace(/<[^>]*>/g, '').trim()
+
+describe('块的种类图标', () => {
+  it('内置种类各有一个图标，和原型的一一对应', () => {
+    expect(KIND_ICONS).toEqual({
+      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',
+    })
+    for (const name of Object.values(KIND_ICONS))
+      expect(lucideIcon(name), name).not.toBe(SquareDashed)
+  })
+
+  it('lucide 图标名按 kebab-case 认；认不出的名字画虚线方块', () => {
+    expect(lucideIcon('square-function')).toBe(SquareFunction)
+    expect(lucideIcon('database')).toBe(Database)
+    expect(lucideIcon('no-such-icon')).toBe(SquareDashed)
+  })
+
+  it('只画图标不带字，名字在悬停提示和 aria-label 里；20px 的框、16px 的图形', () => {
+    const html = render({ kind: 'function' }, '函数')
+    expect(visibleText(html)).toBe('')
+    expect(html).toMatch(/^<span class="cr-kind [^"]*size-5[^"]*" role="img" title="函数" aria-label="函数"><svg/)
+    expect(html).toContain('lucide-square-function')
+    expect(html).toContain('width="16" height="16"')
+  })
+
+  it('库规则的卡片用规则给的图标，名字是规则给的', () => {
+    const html = render({ kind: 'sqlalchemy.table', badge: { label: '数据表', color: { dark: '#e8a860', light: '#a3590d' }, icon: 'database' } }, '数据表')
+    expect(html).toContain('lucide-database')
+    expect(html).toContain('title="数据表" aria-label="数据表"')
+  })
+})