✨ feat(vscode): 代码阅读库规则卡片不再吞掉字段中间的方法，编辑时收起子块

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

@@ -16,6 +16,8 @@ export interface BlockTreeState {
   hidden: ReadonlySet<string>
   /** 本来被筛掉、跳到定义时临时显示的块 */
   temporary: ReadonlySet<string>
+  /** 被正在编辑的祖先盖住、不画的块（它们的行在祖先的编辑范围里），见 coveredByEditing */
+  covered: ReadonlyMap<string, string>
   /** 种类标签上写什么：翻译插件给种类起的名字（库规则的种类是规则给的标签），没给就是 id */
   kindName: (kind: string) => string
   /** 刚点了「编辑」、要把光标放进去的块 */
@@ -25,9 +27,14 @@ export interface BlockTreeState {
   onToggleFold: (id: string) => void
 }
 
-/** 块下面有没有画出来的子块：子块都被筛掉时不留空的一层、不给折叠箭头。 */
+/** 块下面有没有画出来的子块：子块都被筛掉、被盖住时不留空的一层、不给折叠箭头。 */
 function hasShownChildren(block: BlockView, tree: BlockTreeState): boolean {
-  return block.children.some(child => !tree.hidden.has(child.id))
+  return block.children.some(child => shown(child, tree))
+}
+
+/** 块画不画：被筛掉的、被正在编辑的祖先盖住的都不画。 */
+function shown(block: BlockView, tree: BlockTreeState): boolean {
+  return !tree.hidden.has(block.id) && !tree.covered.has(block.id)
 }
 
 /**
@@ -44,7 +51,7 @@ function kindProps(block: BlockView | undefined): { 'data-kind'?: string, 'data-
 }
 
 /**
- * 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。被筛掉的块不画，不留空位，竖线跟着变短。
+ * 一层代码块：左边一条竖线标出这一层，每块的子块紧跟在它下面、再往右缩进一层。被筛掉、被盖住的块不画，不留空位，竖线跟着变短。
  * owner 是这一层所属的块（顶层没有），悬停它时竖线换成它的种类色。
  */
 export function BlockLevel({ blocks, owner, tree }: { blocks: BlockView[], owner?: BlockView, tree: BlockTreeState }): ReactElement {
@@ -54,7 +61,7 @@ export function BlockLevel({ blocks, owner, tree }: { blocks: BlockView[], owner
         <div className="cr-guide w-px" />
       </div>
       <div className="flex min-w-0 flex-1 flex-col gap-2">
-        {blocks.filter(block => !tree.hidden.has(block.id)).map(block => (
+        {blocks.filter(block => shown(block, tree)).map(block => (
           <Fragment key={block.id}>
             <BlockCard block={block} tree={tree} />
             {hasShownChildren(block, tree) && !tree.collapsed.has(block.id) && (