🐛 fix(vscode): 调用树按钮一直显示，点开时没数到就当场再查

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

@@ -66,7 +66,7 @@ describe('块右上角的图标按钮', () => {
     expect(buttons[2]).toContain('data-tooltip="编辑"')
   })
 
-  it('调用树棵数大于 0 时排在编辑后面，按钮上是这个数字；棵数是 0 不出现', () => {
+  it('调用树排在编辑后面；棵数大于 0 时按钮上带这个数字，是 0 时只有图标', () => {
     const html = render(false, { asking: false }, { rewriting: false }, { count: 3 })
     const buttons = [...html.matchAll(/<button[^>]*>/g)].map(match => match[0])
     expect(buttons).toHaveLength(4)
@@ -74,8 +74,11 @@ describe('块右上角的图标按钮', () => {
     expect(buttons[3]).toContain('data-tooltip="调用树" aria-label="调用树"')
     expect(buttons[3]).toContain('data-call-tree="fn"')
     expect(visibleText(html)).toBe('3')
-    const hidden = render(false, { asking: false }, { rewriting: false }, { count: 0 })
-    expect(hidden).not.toContain('调用树')
-    expect(hidden.match(/<button/g)).toHaveLength(3)
+    const zero = render(false, { asking: false }, { rewriting: false }, { count: 0 })
+    const zeroButtons = [...zero.matchAll(/<button[^>]*>/g)].map(match => match[0])
+    expect(zeroButtons).toHaveLength(4)
+    expect(zeroButtons[3]).toContain('data-tooltip="调用树" aria-label="调用树"')
+    expect(visibleText(zero)).toBe('')
+    expect(zero).not.toContain('cr-call-count')
   })
 })

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

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react'
 import { Eye, GitBranch, MessageSquareText, Pencil, Sparkles } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 /** 「重写注释」按钮的样子和动作：fresh 是块还没有注释、点了新写一段；正在重写时不能再点。 */
 export interface RewriteTool {
@@ -23,7 +24,7 @@ export function BlockTools({ editing, onToggleEdit, asking, onToggleAsk, rewrite
   onToggleAsk?: () => void
   /** 没给就不显示「按注释规范重写」（不能写注释的块） */
   rewrite?: RewriteTool
-  /** 没给，或棵数是 0，就不显示调用树（还没查到、没有调用者、语言不提供） */
+  /** 没给就不显示调用树。count 是后台数出的棵数，大于 0 时按钮上带这个数字，是 0 时只有图标（还没数到、没有调用者，点开时会当场再问） */
   callTree?: { anchor: string, count: number, open: boolean, onOpen: () => void }
 }): ReactElement {
   const label = editing ? '预览' : '编辑'
@@ -67,10 +68,10 @@ export function BlockTools({ editing, onToggleEdit, asking, onToggleAsk, rewrite
       >
         <Icon size={14} strokeWidth={1.8} aria-hidden />
       </button>
-      {callTree && callTree.count > 0 && (
+      {callTree && (
         <button
           type="button"
-          className="cr-tool flex h-5 items-center justify-center gap-px rounded px-1"
+          className={cn('cr-tool flex h-5 items-center justify-center rounded', callTree.count > 0 ? 'gap-px px-1' : 'w-6')}
           data-call-tree={callTree.anchor}
           data-active={callTree.open ? '' : undefined}
           data-tooltip="调用树"
@@ -79,7 +80,7 @@ export function BlockTools({ editing, onToggleEdit, asking, onToggleAsk, rewrite
           onClick={callTree.onOpen}
         >
           <GitBranch size={14} strokeWidth={1.8} aria-hidden />
-          <span className="cr-call-count">{callTree.count}</span>
+          {callTree.count > 0 && <span className="cr-call-count">{callTree.count}</span>}
         </button>
       )}
     </div>

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

@@ -104,10 +104,10 @@ const MANY: CallTree[] = [
 ]
 
 describe('调用树弹框', () => {
-  it('棵数为 0 的函数没有按钮，类有，语句没有；只读的树一排按钮都没有', async () => {
+  it('函数和类都有按钮，棵数为 0 只有图标、大于 0 带数字，语句没有；只读的树一排按钮都没有', async () => {
     const counts = new Map([['function', 0], ['class', 2], ['statement', 4]])
     await render(<BlockLevel blocks={[block('function'), block('class'), block('statement')]} tree={tree({ counts, onOpen: () => {} })} />)
-    expect(container.querySelector('[data-call-tree="function"]')).toBeNull()
+    expect(container.querySelector('[data-call-tree="function"]')!.textContent).toBe('')
     expect(container.querySelector('[data-call-tree="statement"]')).toBeNull()
     expect(container.querySelector('[data-call-tree="class"]')).not.toBeNull()
     expect(container.querySelector('[data-call-tree="class"]')!.textContent).toBe('2')