✨ feat(vscode): FastAPI 接口卡片的调用树带上前端调用它的地方

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

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import type { BlockTreeState } from './BlockTree'
 import type { NameMap, VersionNames } from './displayNames'
-import type { BlockView, CallTree, DocumentDiff, DocumentMessage, Excluded, Reveal } from './types'
+import type { BlockView, CallTree, ContractMiss, DocumentDiff, DocumentMessage, Excluded, KindBadge, Reveal } from './types'
 import type { OccurrencePage } from './useOccurrences'
 import type { ViewState } from './viewState'
 import { TriangleAlert } from 'lucide-react'
@@ -43,15 +43,15 @@ function savedBlockModes(): BlockModes {
   return { editing, folds }
 }
 
-function blockKind(blocks: readonly BlockView[], anchor: string): string {
+function blockAt(blocks: readonly BlockView[], anchor: string): BlockView | undefined {
   for (const block of blocks) {
     if (block.anchor === anchor)
-      return block.kind
-    const inner = blockKind(block.children, anchor)
+      return block
+    const inner = blockAt(block.children, anchor)
     if (inner)
       return inner
   }
-  return ''
+  return undefined
 }
 
 export function App(): ReactElement | null {
@@ -86,7 +86,9 @@ export function App(): ReactElement | null {
     name: string
     where: string
     kind: string
+    badge?: KindBadge
     trees: CallTree[]
+    contractMiss?: ContractMiss
   } | null>(null)
   /** 块树所在的页面内容：钉住卡片时在这里面量 */
   const content = useRef<HTMLDivElement>(null)
@@ -157,7 +159,7 @@ export function App(): ReactElement | null {
           setOpenCall((prev) => {
             if (!prev || prev.anchor !== msg.anchor || prev.version !== msg.version)
               return prev
-            return { ...prev, status: 'ready', name: msg.name, where: msg.where, trees: msg.trees }
+            return { ...prev, status: 'ready', name: msg.name, where: msg.where, trees: msg.trees, contractMiss: msg.contractMiss }
           })
           return
         case 'reveal':
@@ -192,7 +194,8 @@ export function App(): ReactElement | null {
   const onOpenCall = useCallback((anchor: string) => {
     if (!doc)
       return
-    setOpenCall({ anchor, version: doc.version, status: 'loading', name: '', where: '', kind: blockKind(doc.blocks, anchor) || 'function', trees: [] })
+    const block = blockAt(doc.blocks, anchor)
+    setOpenCall({ anchor, version: doc.version, status: 'loading', name: '', where: '', kind: block?.kind ?? 'function', ...(block?.badge && { badge: block.badge }), trees: [] })
     postMessage({ type: 'openCallTree', version: doc.version, anchor })
   }, [doc])
   const kindNames = useMemo(() => new Map(doc?.attributes.find(attribute => attribute.id === 'kind')?.values.map(value => [value.id, value.name])), [doc])
@@ -303,11 +306,17 @@ export function App(): ReactElement | null {
         {openCall && (
           <CallTreeDialog
             kind={openCall.kind}
+            badge={openCall.badge}
             name={openCall.name}
             where={openCall.where}
             status={openCall.status === 'loading' ? 'loading' : openCall.trees.length === 0 ? 'empty' : 'ready'}
             trees={openCall.trees}
+            contractMiss={openCall.contractMiss}
             onClose={() => setOpenCall(null)}
+            onJump={(jump) => {
+              setOpenCall(null)
+              postMessage({ type: 'goToCallNode', ...jump })
+            }}
           />
         )}
       </DisplayNameContext>