✨ feat(vscode): 代码阅读 React 组件卡片按钩子分区：状态 / 引用 / 读取的数据 / 派生值 / 副作用 / 事件处理；副作用、处理函数成子卡片放进卡片那一行下面（库规则新增把子块放进属性表某一行的机制，事件处理表点名称展开）

vscode/webview-ui/src/codeReader/diffView.test.ts

@@ -115,6 +115,35 @@ describe('foldUnchanged', () => {
   })
 })
 
+/** 一张卡片：两个副作用放在第 7 行下面，两个处理函数放在第 8 行的子行上，后面一个留下的子块；只有第二个处理函数改了 */
+const CARD_BLOCKS = [
+  block('0', 'card', [
+    block('0.0', 'e1', [], { slot: { row: 7 } }),
+    block('0.1', 'e2', [], { slot: { row: 7 } }),
+    block('0.2', 'h1', [], { slot: { row: 8, item: 0 } }),
+    block('0.3', 'h2', [block('0.3.0', 'h2s', [], { slot: { row: 2 } })], { slot: { row: 8, item: 1 }, startLine: 4 }),
+    block('0.4', 'rest'),
+  ]),
+]
+
+function cardTree(): NonNullable<ReturnType<typeof diffTree>> {
+  return diffTree(CARD_BLOCKS, diff({ blocks: { card: { change: 'mod' }, h2: { change: 'mod' }, h2s: { change: 'mod', own: true } } }), 2, () => true)!
+}
+
+describe('放进卡片属性表里的子块', () => {
+  it('只看改动：画在卡片里的按所在的行分开折，点子行才展开的不折、改了的照样往里看', () => {
+    const { runs, folded } = foldUnchanged(CARD_BLOCKS, cardTree(), () => true, new Set(), new Set())
+    expect([...runs]).toEqual([['0.0', 2], ['0.4', 1]])
+    expect([...folded].sort()).toEqual(['0.0', '0.1', '0.4'])
+  })
+
+  it('上一处 / 下一处：要展开的是子块所在的那一行（点子行才展开的连它自己），不是卡片', () => {
+    expect(changeStops(CARD_BLOCKS, cardTree(), new Set()).map(stop => [stop.id, stop.ancestors])).toEqual([
+      ['0.3.0', ['0/p8', '0.3', '0.3/p2']],
+    ])
+  })
+})
+
 describe('changeStops', () => {
   it('新增的最外面那块、自己改了的修改块、删掉的块，照页面上的先后；修改块只算自己那几行', () => {
     const stops = changeStops(TREE_BLOCKS, tree([removed('', 'c'), removed('a', undefined)]), new Set())