From 830eb1955df77ec071eaddf1a9262562f41a68ff Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 22 May 2024 18:20:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=90=9C=E7=B4=A2=E8=BF=87?=
 =?UTF-8?q?=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/i/Collapse.vue       | 39 +++++++++++++++
 components/i/search/Content.vue | 88 ++++++++++++++++++---------------
 pages/search/[id].vue           |  4 --
 3 files changed, 88 insertions(+), 43 deletions(-)
 create mode 100644 components/i/Collapse.vue

diff --git a/components/i/Collapse.vue b/components/i/Collapse.vue
new file mode 100644
index 0000000..ee7dd86
--- /dev/null
+++ b/components/i/Collapse.vue
@@ -0,0 +1,39 @@
+<template>
+    <Transition
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+    >
+        <div v-show="open" class="flex transition-[height] overflow-hidden"><slot /></div>
+    </Transition>
+</template>
+<script setup>
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: true
+    }
+})
+function onEnter(_el, done) {
+    const el = _el
+    el.style.height = '0'
+    el.offsetHeight
+    el.style.height = el.scrollHeight + 'px'
+    el.addEventListener('transitionend', done, { once: true })
+}
+function onBeforeLeave(_el) {
+    const el = _el
+    el.style.height = el.scrollHeight + 'px'
+    el.offsetHeight
+}
+function onAfterEnter(_el) {
+    const el = _el
+    el.style.height = 'auto'
+}
+function onLeave(_el, done) {
+    const el = _el
+    el.style.height = '0'
+    el.addEventListener('transitionend', done, { once: true })
+}
+</script>
diff --git a/components/i/search/Content.vue b/components/i/search/Content.vue
index 0c0097f..93b7190 100644
--- a/components/i/search/Content.vue
+++ b/components/i/search/Content.vue
@@ -1,52 +1,48 @@
 <template>
     <UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
-        <UAccordion :items="[{}]" default-open>
-            <template #default="{ open }">
-                <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="open ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'"
-                        :ui="{ rounded: 'rounded-full' }"
-                    />
+        <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>
-            <template #item>
-                <div class="flex flex-col gap-2">
+                <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-inbox-arrow-down" />
-                        理解问题
+                        <UIcon name="i-heroicons-magnifying-glass" />
+                        搜索项目
                     </div>
-                    <template v-if="item.desLoading">
+                    <template v-if="item.searchLoading">
                         <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>找到 {{ sourceCount }} 条来源</div>
-                    </template>
-                    <div class="text-base flex items-center gap-1" v-if="item.ansLoading !== undefined">
-                        <UIcon name="i-heroicons-pencil-square" />
-                        整理答案
-                    </div>
+                    <div class="text-xs pl-5" v-else>找到 {{ sourceCount }} 条来源</div>
+                </template>
+                <div class="text-base flex items-center gap-1" v-if="item.ansLoading !== undefined">
+                    <UIcon name="i-heroicons-pencil-square" />
+                    整理答案
                 </div>
-            </template>
-        </UAccordion>
+            </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>
@@ -92,6 +88,20 @@ const props = defineProps({
     }
 })
 const emits = defineEmits(['regenerate'])
+const openCollapse = ref(true)
+function handleToggleCollapse () {
+    openCollapse.value = !openCollapse.value
+}
+watch(
+    () => props.item.ansLoading,
+    (value, oldValue) => {
+        if (oldValue === undefined) {
+            setTimeout(() => {
+                openCollapse.value = false
+            }, 500)
+        }
+    }
+)
 function handleReGenerate () {
     emits('regenerate', props.index)
 }
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index f45a47d..ec656e6 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -143,9 +143,6 @@ const sourceCount = computed(() => {
     return currentData.source.length
 })
 let asking = ref(false)
-const handleClearInput = () => {
-    continueQuestion.value = ''
-}
 const handleContinueAsk = (question) => {
     if (asking.value) return
     isAutoToBottom.value = true
@@ -153,7 +150,6 @@ const handleContinueAsk = (question) => {
     editIndex.value = data.value.length
     createGenerateInitItem(question)
     generateFetchData(question)
-    handleClearInput()
     scrollToView()
 }
 
-- 
GitLab