feat: add 'Find in API' and 'Find in Mock' commands with integration into respective tree views

Author: cyole

README.md

@@ -43,6 +43,8 @@ A VS Code extension for managing and generating code from YAPI APIs.
 | `crabu.copyApiPath`               | Copy API Path                        |
 | `crabu.aiGenerateMock`            | AI Generate Mock                     |
 | `crabu.updateAiQueueStatus`       | Crabu: Update AI Queue Status        |
+| `crabu.findInApi`                 | Crabu: Find in API                   |
+| `crabu.findInMock`                | Crabu: Find in Mock                  |
 
 <!-- commands -->
 

package.json

@@ -146,6 +146,20 @@
         "command": "crabu.updateAiQueueStatus",
         "title": "Update AI Queue Status",
         "category": "Crabu"
+      },
+      {
+        "command": "crabu.findInApi",
+        "title": "Find in API",
+        "icon": "$(search)",
+        "category": "Crabu",
+        "enablement": "view == apiTreeView"
+      },
+      {
+        "command": "crabu.findInMock",
+        "title": "Find in Mock",
+        "icon": "$(search)",
+        "category": "Crabu",
+        "enablement": "view == mockTreeView"
       }
     ],
     "configuration": {
@@ -231,10 +245,15 @@
     "menus": {
       "view/title": [
         {
-          "command": "crabu.searchApi",
+          "command": "crabu.findInApi",
           "when": "view == apiTreeView",
           "group": "navigation"
         },
+        {
+          "command": "crabu.findInMock",
+          "when": "view == mockTreeView",
+          "group": "navigation"
+        },
         {
           "command": "crabu.searchApiGroup",
           "when": "view == apiTreeView",

src/views/api.ts

@@ -36,12 +36,21 @@ async function getYapiMenuData(projectId?: number, token?: string) {
 export const useApiTreeView = createSingletonComposable(async () => {
   const roots = ref<TreeViewNode[]>([])
 
+  const treeView = useTreeView(
+    'apiTreeView',
+    roots,
+    {
+      showCollapseAll: true,
+    },
+  )
+
   async function getRootNode(projects: Project[]) {
     return await Promise.all(projects.map(async project => ({
       children: await getChildNodes(project),
       treeItem: {
         label: project.name,
-        collapsibleState: TreeItemCollapsibleState.Collapsed,
+        contextValue: 'apiProject',
+        collapsibleState: TreeItemCollapsibleState.Expanded,
       },
     })))
   }
@@ -258,11 +267,8 @@ export const useApiTreeView = createSingletonComposable(async () => {
     executeCommand(commands.addApiGroupToMock, selection?.node)
   })
 
-  return useTreeView(
-    'apiTreeView',
-    roots,
-    {
-      showCollapseAll: true,
-    },
-  )
+  useCommand(commands.findInApi, async () => {
+    await treeView.reveal(roots.value?.[0], { focus: true })
+    executeCommand('list.find')
+  })
 })

src/views/mock.ts

@@ -1,7 +1,7 @@
 import type { TreeViewNode } from 'reactive-vscode'
 import type { ApiDetail, MockApiData } from '../types'
 import { parse, stringify } from 'comment-json'
-import { createSingletonComposable, executeCommand, ref, useCommand, useTreeView } from 'reactive-vscode'
+import { createSingletonComposable, executeCommand, ref, useCommand, useTreeView, watchEffect } from 'reactive-vscode'
 import { TreeItemCollapsibleState, Uri, window, workspace } from 'vscode'
 import { config } from '../config'
 import { crabuDiffNewScheme, crabuDiffOldScheme } from '../constants'
@@ -48,6 +48,13 @@ function handleData(data: MockApiData[]) {
 
 export const useMockTreeView = createSingletonComposable(async () => {
   const roots = ref<TreeViewNode[]>([])
+  const treeView = useTreeView(
+    'mockTreeView',
+    roots,
+    {
+      showCollapseAll: true,
+    },
+  )
 
   async function getRootNode() {
     try {
@@ -65,6 +72,7 @@ export const useMockTreeView = createSingletonComposable(async () => {
   }
 
   async function refreshMockTreeView() {
+    logger.info('refreshMockTreeView')
     window.withProgress({
       location: { viewId: 'mockTreeView' },
     }, async (progress) => {
@@ -73,7 +81,7 @@ export const useMockTreeView = createSingletonComposable(async () => {
     })
   }
 
-  await refreshMockTreeView()
+  watchEffect(refreshMockTreeView)
 
   useCommand(commands.refreshMockTreeView, refreshMockTreeView)
   useCommand(commands.showCrabuWebviewWithMock, (event) => {
@@ -199,11 +207,8 @@ export const useMockTreeView = createSingletonComposable(async () => {
     executeCommand('vscode.diff', oldUri, newUri, `检查变更：${mockItem.label}`)
   })
 
-  return useTreeView(
-    'mockTreeView',
-    roots,
-    {
-      showCollapseAll: true,
-    },
-  )
+  useCommand(commands.findInMock, async () => {
+    await treeView.reveal(roots.value?.[0], { focus: true })
+    executeCommand('list.find')
+  })
 })