✨ feat(vscode): 代码阅读支持库规则，内置 SQLAlchemy 模型类显示成数据表卡片

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

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react'
-import type { BlockKind, BlockView } from './types'
+import type { CSSProperties, ReactElement } from 'react'
+import type { BlockView } from './types'
 import { ChevronDown, ChevronRight, Eye, EyeOff, Pencil } from 'lucide-react'
 import { Fragment } from 'react'
 import { cn } from '@/lib/utils'
@@ -16,8 +16,8 @@ export interface BlockTreeState {
   hidden: ReadonlySet<string>
   /** 本来被筛掉、跳到定义时临时显示的块 */
   temporary: ReadonlySet<string>
-  /** 种类标签上写什么：翻译插件给种类起的名字，没给就是 id */
-  kindName: (kind: BlockKind) => string
+  /** 种类标签上写什么：翻译插件给种类起的名字（库规则的种类是规则给的标签），没给就是 id */
+  kindName: (kind: string) => string
   /** 刚点了「编辑」、要把光标放进去的块 */
   focusId: string | null
   onFocused: () => void
@@ -31,12 +31,25 @@ function hasShownChildren(block: BlockView, tree: BlockTreeState): boolean {
 }
 
 /**
- * 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。被筛掉的块不画，不留空位，竖线跟着变短。
- * kind 是这一层所属块的种类（顶层没有），悬停那个块时竖线换成它的颜色。
+ * 块的种类色写在哪：内置种类按 data-kind 取 CSS 里的配色；库规则认领的块（带 badge）按规则给的颜色，
+ * 暗色、亮色两个都写在 style 上，CSS 按主题挑一个（见 [data-badge]）。
  */
-export function BlockLevel({ blocks, kind, tree }: { blocks: BlockView[], kind?: BlockKind, tree: BlockTreeState }): ReactElement {
+function kindProps(block: BlockView | undefined): { 'data-kind'?: string, 'data-badge'?: '', 'style'?: CSSProperties } {
+  if (!block)
+    return {}
+  if (!block.badge)
+    return { 'data-kind': block.kind }
+  const { dark, light } = block.badge.color
+  return { 'data-kind': block.kind, 'data-badge': '', 'style': { '--kind-dark': dark, '--kind-light': light } as CSSProperties }
+}
+
+/**
+ * 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。被筛掉的块不画，不留空位，竖线跟着变短。
+ * owner 是这一层所属的块（顶层没有），悬停它时竖线换成它的种类色。
+ */
+export function BlockLevel({ blocks, owner, tree }: { blocks: BlockView[], owner?: BlockView, tree: BlockTreeState }): ReactElement {
   return (
-    <div className="cr-level flex gap-2" data-kind={kind}>
+    <div className="cr-level flex gap-2" {...kindProps(owner)}>
       <div className="flex w-3 shrink-0 justify-center">
         <div className="cr-guide w-px" />
       </div>
@@ -45,7 +58,7 @@ export function BlockLevel({ blocks, kind, tree }: { blocks: BlockView[], kind?:
           <Fragment key={block.id}>
             <BlockCard block={block} tree={tree} />
             {hasShownChildren(block, tree) && !tree.collapsed.has(block.id) && (
-              <BlockLevel blocks={block.children} kind={block.kind} tree={tree} />
+              <BlockLevel blocks={block.children} owner={block} tree={tree} />
             )}
           </Fragment>
         ))}
@@ -54,7 +67,7 @@ export function BlockLevel({ blocks, kind, tree }: { blocks: BlockView[], kind?:
   )
 }
 
-/** 预览状态的内容：函数、类、导入、常量、变量块是属性表，其余是一行译文。 */
+/** 预览状态的内容：函数、类、导入、常量、变量块和库规则认领的块是属性表，其余是一行译文。 */
 function BlockPreview({ block, tree }: { block: BlockView, tree: BlockTreeState }): ReactElement {
   if ('properties' in block)
     return <PropertyGrid blockId={block.id} rows={block.properties} collapsed={tree.collapsed} onToggleFold={tree.onToggleFold} />
@@ -70,7 +83,7 @@ function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }):
   return (
     <div
       className="cr-block flex items-start gap-2.5 rounded-lg py-2 pr-2.5 pl-2"
-      data-kind={block.kind}
+      {...kindProps(block)}
       data-id={block.id}
       data-line={block.startLine}
       data-editing={editing ? '' : undefined}
@@ -88,7 +101,7 @@ function BlockCard({ block, tree }: { block: BlockView, tree: BlockTreeState }):
             </button>
           )
         : <span className="w-3.5 shrink-0" />}
-      <span className="cr-badge flex h-5 w-11 shrink-0 items-center justify-center rounded text-[11px] leading-[14px] font-medium">
+      <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>
       <div className="min-w-0 flex-1">