重构 Process

archive/Process.vue

+<template>
+    <UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center gap-2 text-lg">
+                <UIcon name="i-heroicons-sparkles-20-solid" />
+                搜索过程
+            </div>
+            <UButton
+                size="md"
+                color="gray"
+                variant="ghost"
+                :icon="openCollapse ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'"
+                :ui="{ rounded: 'rounded-full' }"
+                @click="handleToggleCollapse"
+            />
+        </div>
+        <ICollapse :open="openCollapse" class="mt-2">
+            <div class="flex flex-col gap-2 w-full text-gray-500 dark:text-gray-400">
+                <div class="text-base flex items-center gap-1">
+                    <UIcon name="i-heroicons-inbox-arrow-down" />
+                    理解问题
+                </div>
+                <template v-if="item.desLoading">
+                    <USkeleton class="h-4" />
+                    <USkeleton class="h-4 w-2/3" />
+                </template>
+                <IMdMdc v-else :content="item.description" />
+                <template v-if="item.searchLoading !== undefined">
+                    <div class="text-base flex items-center gap-1">
+                        <UIcon name="i-heroicons-magnifying-glass" />
+                        搜索项目
+                    </div>
+                    <template v-if="item.searchLoading">
+                        <USkeleton class="h-4" />
+                        <USkeleton class="h-4 w-2/3" />
+                    </template>
+                    <div class="text-xs pl-5" v-else>找到 {{ item.source && item.source.length || 0 }} 条来源</div>
+                </template>
+                <div class="text-base flex items-center gap-1" v-if="item.ansLoading !== undefined">
+                    <UIcon name="i-heroicons-pencil-square" />
+                    整理答案
+                </div>
+            </div>
+        </ICollapse>
+    </UCard>
+</template>
+<script setup>
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'search'
+    },
+    item: {
+        type: Object,
+        default: (() => {})
+    },
+    collapse: {
+        type: Boolean,
+        default: true
+    }
+})
+const openCollapse = ref(props.collapse)
+function handleToggleCollapse () {
+    openCollapse.value = !openCollapse.value
+}
+function handleCollapse (state) {
+    openCollapse.value = state
+}
+watch(() => props.collapse, () => {
+    if (props.collapse) {
+        handleCollapse(true)
+    } else {
+        setTimeout(() => {
+            handleCollapse(false)
+        }, 500)
+    }
+}, { immediate: true})
+defineExpose({ handleCollapse })
+</script>

components/i/search/Process.vue

@@ -16,25 +16,35 @@
         </div>
         <ICollapse :open="openCollapse" class="mt-2">
             <div class="flex flex-col gap-2 w-full text-gray-500 dark:text-gray-400">
+                <template v-for="action in actions" :key="action.action">
+                    <template v-if="action.action === 'rephrase_question'">
                         <div class="text-base flex items-center gap-1">
                             <UIcon name="i-heroicons-inbox-arrow-down" />
                             理解问题
                         </div>
-                <template v-if="item.desLoading">
-                    <USkeleton class="h-4" />
-                    <USkeleton class="h-4 w-2/3" />
+                        <IMdMdc :content="action.output" />
                     </template>
-                <IMdMdc v-else :content="item.description" />
-                <template v-if="item.searchLoading !== undefined">
+                    <template v-if="action.action === 'search_file'">
                         <div class="text-base flex items-center gap-1">
                             <UIcon name="i-heroicons-magnifying-glass" />
                             搜索项目
                         </div>
-                    <template v-if="item.searchLoading">
-                        <USkeleton class="h-4" />
-                        <USkeleton class="h-4 w-2/3" />
+                        <div class="text-xs pl-5">找到 {{ action.output.length }} 条来源</div>
+                    </template>
+                    <template v-if="action.action === 'search_web'">
+                        <div class="text-base flex items-center gap-1">
+                            <UIcon name="i-heroicons-magnifying-glass" />
+                            搜索网页
+                        </div>
+                        <div class="text-xs pl-5">找到 {{ action.output.length }} 条来源</div>
+                    </template>
+                    <template v-if="action.action === 'tool_select'">
+                        <div class="text-base flex items-center gap-1">
+                            <UIcon name="i-heroicons-magnifying-glass" />
+                            使用工具
+                        </div>
+                        <div class="text-xs pl-5">{{ action.output }}</div>
                     </template>
-                    <div class="text-xs pl-5" v-else>找到 {{ item.source && item.source.length || 0 }} 条来源</div>
                 </template>
                 <div class="text-base flex items-center gap-1" v-if="item.ansLoading !== undefined">
                     <UIcon name="i-heroicons-pencil-square" />
@@ -57,6 +67,10 @@ const props = defineProps({
     collapse: {
         type: Boolean,
         default: true
+    },
+    actions: {
+        type: Array,
+        default: () => []
     }
 })
 const openCollapse = ref(props.collapse)