feature: 拆分搜索过程组件

components/i/search/Content.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>
     <div class="text-xl flex items-center space-x-1"  v-if="item.ansLoading !== undefined">
         <UIcon name="i-heroicons-chat-bubble-left-right-20-solid" />
         <span>{{ item.ansLoading ? '回答中' : '回答' }}</span>
@@ -82,33 +38,11 @@ const props = defineProps({
     index: {
         type: Number,
         default: 0
-    },
-    collapse: {
-        type: Boolean,
-        default: true
     }
 })
 const emits = defineEmits(['regenerate'])
-const openCollapse = ref(props.collapse)
-function handleToggleCollapse () {
-    openCollapse.value = !openCollapse.value
-}
-function handleCollapse (state) {
-    openCollapse.value = state
-}
-watch(
-    () => props.item.ansLoading,
-    (value, oldValue) => {
-        if (oldValue === undefined && value) {
-            setTimeout(() => {
-                handleCollapse(false)
-            }, 500)
-        }
-    },
-    { immediate: true }
-)
+
 function handleReGenerate () {
-    handleCollapse(true)
     emits('regenerate', props.index)
 }
 function handleCopyMD () {
@@ -124,5 +58,4 @@ function handleShare () {
     const url = window.location.href + (hash ? '#' + hash : '')
     Search.handleUpdateOpenState(url)
 }
-defineExpose({ handleCollapse })
 </script>
\ No newline at end of file

components/i/search/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>
-defineProps({
+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.item.ansLoading,
+    (value, oldValue) => {
+        if (oldValue === undefined && value) {
+            setTimeout(() => {
+                handleCollapse(false)
+            }, 500)
+        }
+    },
+    { immediate: true }
+)
+defineExpose({ handleCollapse })
 </script>

pages/search/[id].vue

@@ -14,27 +14,27 @@
                     <div class="grid">
                         <ISearchTitle as="h2" :title="item.question" :id="index + 1" />
                     </div>
+                    <ISearchProcess ref="historyAskRefs" :item="item" :collapse="false" />
                     <ISearchContent
                         :item="item"
-                        ref="historyAskRefs"
                         :asking="false"
-                        :collapse="false"
                         :is-last-index="false"
                         :index="index"
                     />
                     <UDivider v-if="data.length !== index + 1 || askingData.question" class="pt-3 pb-2" />
                 </template>
-                <div class="grid" v-if="askingData.question">
-                    <ISearchTitle as="h2" :title="askingData.question" :id="data.length + 1" />
-                </div>
-                <ISearchContent
-                    v-if="askingData.question"
-                    :item="askingData"
-                    :asking="asking"
-                    ref="askingRef"
-                    :is-last-index="true"
-                    @regenerate="handleReGenerate"
-                />
+                <template v-if="askingData.question">
+                    <div class="grid">
+                        <ISearchTitle as="h2" :title="askingData.question" :id="data.length + 1" />
+                    </div>
+                    <ISearchProcess ref="askingRef" :item="askingData" :collapse="false" />
+                    <ISearchContent
+                        :item="askingData"
+                        :asking="asking"
+                        :is-last-index="true"
+                        @regenerate="handleReGenerate"
+                    />
+                </template>
                 <ISearchRecommendQuestion
                     v-if="recommendQuestions.length > 0 && !asking"
                     :recommend-questions="recommendQuestions"
@@ -147,6 +147,9 @@ const handleReGenerate = () => {
         question,
         desLoading: true
     }
+    nextTick(() => {
+        askingRef.value && askingRef.value.handleCollapse(true)
+    })
     generateFetchData(`根据上述回答，对问题"${question}"重新生成`)
 }