✨ feat(vscode): 代码阅读块悬停高亮

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

@@ -36,19 +36,22 @@ export interface BlockTreeState {
   onToggleFold: (id: string) => void
 }
 
-/** 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。 */
-export function BlockLevel({ blocks, tree }: { blocks: BlockView[], tree: BlockTreeState }): ReactElement {
+/**
+ * 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。
+ * kind 是这一层所属块的种类（顶层没有），悬停那个块时竖线换成它的颜色。
+ */
+export function BlockLevel({ blocks, kind, tree }: { blocks: BlockView[], kind?: BlockKind, tree: BlockTreeState }): ReactElement {
   return (
-    <div className="flex gap-2">
+    <div className="cr-level flex gap-2" data-kind={kind}>
       <div className="flex w-3 shrink-0 justify-center">
-        <div className="w-px bg-[var(--vscode-editorIndentGuide-background1)]" />
+        <div className="cr-guide w-px" />
       </div>
       <div className="flex min-w-0 flex-1 flex-col gap-2">
         {blocks.map(block => (
           <Fragment key={block.id}>
             <BlockCard block={block} tree={tree} />
             {block.children.length > 0 && !tree.collapsed.has(block.id) && (
-              <BlockLevel blocks={block.children} tree={tree} />
+              <BlockLevel blocks={block.children} kind={block.kind} tree={tree} />
             )}
           </Fragment>
         ))}