feat: improve error handling

components/ResearchFeedback.vue

@@ -54,6 +54,9 @@
       }
     } catch (e: any) {
       console.error('Error getting feedback:', e)
+      if (e.message.includes('Failed to fetch')) {
+        e.message += `\n${t('error.requestBlockedByCORS')}`
+      }
       error.value = t('modelFeedback.error', [e.message])
     } finally {
       isLoading.value = false
@@ -82,10 +85,13 @@
     </template>
 
     <div class="flex flex-col gap-2">
-      <p v-if="error" class="text-red-500">{{ error }}</p>
-      <div v-if="!feedback.length && !error">{{ $t('modelFeedback.waiting') }}</div>
+      <div v-if="!feedback.length && !error">
+        {{ $t('modelFeedback.waiting') }}
+      </div>
       <template v-else>
-        <div v-if="error" class="text-red-500">{{ error }}</div>
+        <div v-if="error" class="text-red-500 whitespace-pre-wrap">
+          {{ error }}
+        </div>
         <div
           v-for="(feedback, index) in feedback"
           class="flex flex-col gap-2"

components/Tree.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import type { ButtonProps } from '@nuxt/ui'
   import type { ResearchStep } from '~/lib/deep-research'
 
   export type TreeNodeStatus = Exclude<ResearchStep['type'], 'complete'>
@@ -24,38 +25,43 @@
     (e: 'select', value: TreeNode): void
   }>()
 
-  const icon = computed(() => {
-    const result = { name: '', pulse: false }
+  const theme = computed(() => {
+    const result = {
+      icon: '',
+      pulse: false,
+      color: 'info' as ButtonProps['color'],
+    }
     if (!props.node.status) return result
 
     switch (props.node.status) {
       case 'generating_query':
-        result.name = 'i-lucide-clipboard-list'
+        result.icon = 'i-lucide-clipboard-list'
         result.pulse = true
         break
       case 'generated_query':
-        // FIXME: 因为 deepResearch 有并发限制，这个 case 是为了明确区分状态。
-        // 但是目前进入这个状态之后再进入 searching 状态，图标不会更新成 search，不知道原因
-        // 暂时禁用了这个 case
-        // result.name = 'i-lucide-pause'
-        // result.pulse = true
-        // break
+      // FIXME: 因为 deepResearch 有并发限制，这个 case 是为了明确区分状态。
+      // 但是目前进入这个状态之后再进入 searching 状态，图标不会更新成 search，不知道原因
+      // 暂时禁用了这个 case
+      // result.name = 'i-lucide-pause'
+      // result.pulse = true
+      // break
       case 'searching':
-        result.name = 'i-lucide-search'
+        result.icon = 'i-lucide-search'
         result.pulse = true
         break
       case 'search_complete':
-        result.name = 'i-lucide-search-check'
+        result.icon = 'i-lucide-search-check'
         break
       case 'processing_serach_result':
-        result.name = 'i-lucide-brain'
+        result.icon = 'i-lucide-brain'
         result.pulse = true
         break
       case 'processed_search_result':
-        result.name = 'i-lucide-circle-check-big'
+        result.icon = 'i-lucide-circle-check-big'
         break
       case 'error':
-        result.name = 'i-lucide-octagon-x'
+        result.icon = 'i-lucide-octagon-x'
+        result.color = 'error'
         break
     }
     return result
@@ -66,10 +72,10 @@
   <div class="flex items-center gap-1">
     <UIcon name="i-lucide-circle-dot" />
     <UButton
-      :class="['max-w-90 shrink-0', icon.pulse && 'animate-pulse']"
-      :icon="icon.name"
+      :class="['max-w-90 shrink-0', theme.pulse && 'animate-pulse']"
+      :icon="theme.icon"
       size="sm"
-      :color="selectedNode?.id === node.id ? 'primary' : 'info'"
+      :color="selectedNode?.id === node.id ? 'primary' : theme.color"
       :variant="selectedNode?.id === node.id ? 'soft' : 'outline'"
       @click="emit('select', node)"
     >