feat: add 'Update AI Queue Status' command and integrate it into the status bar and API handling

Author: cyole

README.md

@@ -42,6 +42,7 @@ A VS Code extension for managing and generating code from YAPI APIs.
 | `crabu.compareWithLatestVersion`  | Compare with Latest Version          |
 | `crabu.copyApiPath`               | Copy API Path                        |
 | `crabu.aiGenerateMock`            | AI Generate Mock                     |
+| `crabu.updateAiQueueStatus`       | Crabu: Update AI Queue Status        |
 
 <!-- commands -->
 

package.json

@@ -141,6 +141,11 @@
         "title": "AI Generate Mock",
         "icon": "$(copilot)",
         "enablement": "viewItem == mockItem"
+      },
+      {
+        "command": "crabu.updateAiQueueStatus",
+        "title": "Update AI Queue Status",
+        "category": "Crabu"
       }
     ],
     "configuration": {
@@ -334,6 +339,7 @@
     "@types/node": "catalog:types",
     "@types/vscode": "^1.99.3",
     "@vscode/vsce": "catalog:dev",
+    "@vueuse/core": "catalog:frontend",
     "bumpp": "catalog:dev",
     "comment-json": "catalog:build",
     "eslint": "catalog:dev",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import { useTimeoutPoll } from '@vueuse/core'
 import { computed, ref, useCommand, useStatusBarItem, watchEffect } from 'reactive-vscode'
 import { StatusBarAlignment, ThemeColor, window } from 'vscode'
 import { config } from './config'
@@ -9,33 +10,57 @@ export async function useCrabuMockStatus() {
   const crabuMockStatus = ref(false)
   const crabuMockStatusError = ref(false)
 
-  const statusBarItemText = computed(() => {
+  const crabuStatusBarItemText = computed(() => {
     if (crabuMockStatusError.value)
       return 'Crabu 服务异常'
 
     return crabuMockStatus.value ? 'Mock 已启动' : 'Mock 未启动'
   })
 
-  const statusBarItemColor = computed(() => {
+  const crabuStatusBarItemColor = computed(() => {
     return crabuMockStatus.value
       ? new ThemeColor('statusBarItem.prominentBackground')
       : undefined
   })
 
-  const statusBarItemBackgroundColor = computed(() => {
+  const crabuStatusBarItemBackgroundColor = computed(() => {
     return crabuMockStatusError.value
       ? new ThemeColor('statusBarItem.warningBackground')
       : undefined
   })
 
-  const statusBarItem = useStatusBarItem({
+  const crabuStatusBarItem = useStatusBarItem({
     alignment: StatusBarAlignment.Left,
-    text: statusBarItemText,
-    color: statusBarItemColor,
-    backgroundColor: statusBarItemBackgroundColor,
+    text: crabuStatusBarItemText,
+    color: crabuStatusBarItemColor,
+    backgroundColor: crabuStatusBarItemBackgroundColor,
     command: commands.switchMockStatus,
   })
 
+  const aiQueueStatusBarItemText = ref('')
+  const { pause, resume } = useTimeoutPoll(updateAiQueueStatus, 1000)
+
+  async function updateAiQueueStatus() {
+    logger.info('更新 AI 队列状态中...')
+    const aiQueue = await ofetch<{
+      processing: number
+      waiting: number
+    }>(`${config.crabuServerBaseUrl}/mock/template/ai/process`)
+
+    if (aiQueue.processing + aiQueue.waiting === 0) {
+      pause()
+      aiQueueStatusBarItemText.value = ''
+      return
+    }
+    aiQueueStatusBarItemText.value = `$(loading~spin) 进行中 ${aiQueue.processing} 排队中 ${aiQueue.waiting}`
+  }
+
+  useStatusBarItem({
+    alignment: StatusBarAlignment.Left,
+    text: aiQueueStatusBarItemText,
+    color: new ThemeColor('statusBarItem.prominentBackground'),
+  })
+
   window.onDidChangeWindowState((e) => {
     if (e.focused) {
       updateCrabuMockStatus()
@@ -61,7 +86,7 @@ export async function useCrabuMockStatus() {
       return
 
     isSwitching = true
-    statusBarItem.text = `$(loading~spin) ${crabuMockStatus.value ? '停止中...' : '启动中...'}`
+    crabuStatusBarItem.text = `$(loading~spin) ${crabuMockStatus.value ? '停止中...' : '启动中...'}`
     await sleep(1000)
     await ofetch(`${config.crabuServerBaseUrl}/mock/on`, {
       method: 'POST',
@@ -71,4 +96,13 @@ export async function useCrabuMockStatus() {
 
     logger.info('Mock 状态更新为：', crabuMockStatus.value)
   })
+
+  useCommand(commands.updateAiQueueStatus, async (action: 'start' | 'stop') => {
+    if (action === 'start') {
+      resume()
+    }
+    else {
+      pause()
+    }
+  })
 }

src/status.ts

@@ -120,6 +120,7 @@ export const useApiTreeView = createSingletonComposable(async () => {
     await ofetch(`${config.crabuServerBaseUrl}/interface/add/${api.project_id}/${api._id}`, { method: 'POST' })
     await executeCommand(commands.refreshMockTreeView)
     await executeCommand(commands.aiGenerateMock, { treeItem: { mockItem: transformApiToMock(api) } })
+    await executeCommand(commands.updateAiQueueStatus, 'start')
   })
 
   useCommand(commands.addApiGroupToMock, async (event) => {
@@ -145,6 +146,7 @@ export const useApiTreeView = createSingletonComposable(async () => {
         try {
           await ofetch(`${config.crabuServerBaseUrl}/interface/add/${api.project_id}/${api._id}`, { method: 'POST' })
           await executeCommand(commands.aiGenerateMock, { treeItem: { mockItem: transformApiToMock(api) } })
+          await executeCommand(commands.updateAiQueueStatus, 'start')
           progress.report({
             message: `正在导入API... ${i + 1}/${totalCount}`,
             increment: 100 / totalCount,