feat: add AI Generate Mock command and integrate comment-json for improved JSON handling

Author: cyole

README.md

@@ -40,6 +40,7 @@ A VS Code extension for managing and generating code from YAPI APIs.
 | `crabu.genBusinessCode`           | Generate Business Code               |
 | `crabu.compareWithLatestVersion`  | Compare with Latest Version          |
 | `crabu.copyApiPath`               | Copy API Path                        |
+| `crabu.aiGenerateMock`            | AI Generate Mock                     |
 
 <!-- commands -->
 

package.json

@@ -135,6 +135,12 @@
         "title": "Copy API Path",
         "icon": "$(copy)",
         "enablement": "viewItem == apiItem || viewItem == mockItem"
+      },
+      {
+        "command": "crabu.aiGenerateMock",
+        "title": "AI Generate Mock",
+        "icon": "$(copilot)",
+        "enablement": "viewItem == mockItem"
       }
     ],
     "configuration": {
@@ -268,9 +274,14 @@
         },
         {
           "command": "crabu.removeFromMock",
-          "when": "view == mockTreeView && (viewItem == mockNode || viewItem == mockItem)",
+          "when": "view == mockTreeView && viewItem == mockItem",
           "group": "context"
         },
+        {
+          "command": "crabu.removeFromMock",
+          "when": "view == mockTreeView && viewItem == mockNode",
+          "group": "inline"
+        },
         {
           "command": "crabu.updateMockToLatestVersion",
           "when": "view == mockTreeView && viewItem == mockItem",
@@ -289,6 +300,11 @@
         {
           "command": "crabu.copyApiPath",
           "when": "viewItem == apiItem || viewItem == mockItem",
+          "group": "context"
+        },
+        {
+          "command": "crabu.aiGenerateMock",
+          "when": "viewItem == mockItem",
           "group": "inline"
         }
       ]
@@ -314,6 +330,7 @@
     "@types/vscode": "^1.99.3",
     "@vscode/vsce": "catalog:dev",
     "bumpp": "catalog:dev",
+    "comment-json": "catalog:build",
     "eslint": "catalog:dev",
     "esno": "catalog:dev",
     "pnpm": "catalog:dev",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ catalogs:
     '@tomjs/vscode-extension-webview': ^2.0.0
     '@vitejs/plugin-vue': ^6.0.1
     '@vitejs/plugin-vue-jsx': ^5.0.1
+    comment-json: ^4.2.5
     tsdown: ^0.13.0
     unocss: ^66.3.3
     unplugin-auto-import: ^19.3.0

pnpm-workspace.yaml

@@ -48,7 +48,7 @@ export async function useAnnotations() {
     const { document } = editor.value
 
     const matchedApiData = allApiData.value.map((item) => {
-      const regex = new RegExp(`'${item.path}'`, 'g')
+      const regex = new RegExp(`['"\`]${item.path}['"\`]`, 'g')
       const match = regex.exec(document.getText())
 
       if (!match) {

src/annotations.ts

@@ -1,3 +1,5 @@
+import type { CommentJSONValue } from 'comment-json'
+
 export interface FetchResponse<T> {
   data: T
   errcode: number
@@ -100,8 +102,8 @@ export interface YApiDetail {
 export interface ApiDetail {
   path: string
   tags: string[]
-  req_body: string
-  res_body: string
+  req_body: string | CommentJSONValue
+  res_body: string | CommentJSONValue
 }
 
 export interface ApiDetailRaw {

src/types.ts

@@ -1,5 +1,6 @@
 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 { TreeItemCollapsibleState, Uri, window, workspace } from 'vscode'
 import { config } from '../config'
@@ -151,6 +152,21 @@ export const useMockTreeView = createSingletonComposable(async () => {
     })
   })
 
+  useCommand(commands.aiGenerateMock, async (event) => {
+    if (!event.treeItem || !event.treeItem.mockItem) {
+      logger.error('No mock item found in the event.')
+      return
+    }
+
+    const mockItem = event.treeItem.mockItem as MockApiData
+    const [projectId, catId, interfaceId] = mockItem.key.split('/')
+    await ofetch(`${crabuApiBaseUrl}/mock/template/ai/${projectId}/${catId}/${interfaceId}`, {
+      method: 'POST',
+    })
+
+    window.showInformationMessage('正在使用AI生成Mock数据，请稍后...')
+  })
+
   useCommand(commands.compareWithLatestVersion, async (event) => {
     if (!event.treeItem || !event.treeItem.mockItem) {
       logger.error('No mock item found in the event.')
@@ -162,25 +178,25 @@ export const useMockTreeView = createSingletonComposable(async () => {
     const oldDetail = await ofetch<ApiDetail>(`${crabuApiBaseUrl}/interface/local/json/${mockItem.key}`)
     const newDetail = await ofetch<ApiDetail>(`${crabuApiBaseUrl}/interface/json/${projectId}/${interfaceId}`)
 
-    oldDetail.req_body = JSON.parse(oldDetail.req_body)
-    oldDetail.res_body = JSON.parse(oldDetail.res_body)
-    newDetail.req_body = JSON.parse(newDetail.req_body)
-    newDetail.res_body = JSON.parse(newDetail.res_body)
+    oldDetail.req_body = parse(oldDetail.req_body as string)
+    oldDetail.res_body = parse(oldDetail.res_body as string)
+    newDetail.req_body = parse(newDetail.req_body as string)
+    newDetail.res_body = parse(newDetail.res_body as string)
 
     workspace.registerTextDocumentContentProvider(crabuDiffOldScheme, {
       provideTextDocumentContent: () => {
-        return JSON.stringify(oldDetail, null, 2)
+        return stringify(oldDetail, null, 2)
       },
     })
 
     workspace.registerTextDocumentContentProvider(crabuDiffNewScheme, {
       provideTextDocumentContent: () => {
-        return JSON.stringify(newDetail, null, 2)
+        return stringify(newDetail, null, 2)
       },
     })
 
-    const oldUri = Uri.parse(`${crabuDiffOldScheme}:${mockItem.label}.json`)
-    const newUri = Uri.parse(`${crabuDiffNewScheme}:${mockItem.label}.json`)
+    const oldUri = Uri.parse(`${crabuDiffOldScheme}:${mockItem.label}.jsonc`)
+    const newUri = Uri.parse(`${crabuDiffNewScheme}:${mockItem.label}.jsonc`)
 
     executeCommand('vscode.diff', oldUri, newUri, `检查变更：${mockItem.label}`)
   })