From cd352dd1680b54a4465de328eeecfc9112078ad1 Mon Sep 17 00:00:00 2001
From: DebugIsFalse <511418503@qq.com>
Date: Wed, 22 May 2024 16:11:49 +0800
Subject: [PATCH] feature: Content.vue

---
 components/i/search/Content.vue | 115 ++++++++++++++++++++++++++++++++
 pages/search/[id].vue           |  91 +++----------------------
 2 files changed, 125 insertions(+), 81 deletions(-)

diff --git a/components/i/search/Content.vue b/components/i/search/Content.vue
index e69de29..0c0097f 100644
--- a/components/i/search/Content.vue
+++ b/components/i/search/Content.vue
@@ -0,0 +1,115 @@
+<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>
+            </template>
+            <template #item>
+                <div class="flex flex-col gap-2">
+                    <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>找到 {{ 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>
+            </template>
+        </UAccordion>
+    </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>
+    </div>
+    <IMdMdc :content="item.article" />
+    <div class="space-x-2" v-if="item.showActions">
+        <UButton size="xs" color="gray" @click="handleCopyMD" leading-icon="i-heroicons-document-duplicate-20-solid" label="复制" />
+        <UButton size="xs" color="gray" @click="handleShare" leading-icon="i-heroicons-share-20-solid" label="分享" />
+        <UButton v-if="isLastIndex" size="xs" color="gray" @click="handleReGenerate" leading-icon="i-heroicons-arrow-path-rounded-square-20-solid" label="重写" />
+    </div>
+    <template v-if="!asking && item.source && item.source.length > 0">
+        <div class="text-xl flex items-center space-x-1">
+            <UIcon name="i-heroicons-link-20-solid" />
+            <span>来源</span>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <ISearchSource :source="item.source" />
+        </div>
+    </template>
+</template>
+<script setup>
+const toast = useToast()
+const props = defineProps({
+    item: {
+        type: Object,
+        default: (() => {})
+    },
+    sourceCount: {
+        type: Number,
+        default: 0
+    },
+    asking: {
+        type: Boolean,
+        default: false
+    },
+    isLastIndex: {
+        type: Boolean,
+        default: false
+    },
+    index: {
+        type: Number,
+        default: 0
+    }
+})
+const emits = defineEmits(['regenerate'])
+function handleReGenerate () {
+    emits('regenerate', props.index)
+}
+function handleCopyMD () {
+    useCopyToClipboard().copy(props.item.article)
+    toast.add({
+        icon: 'i-heroicons-information-circle-20-solid',
+        timeout: 1000,
+        title: '复制成功'
+    })
+}
+function handleShare () {
+    const hash = props.index + 1;
+    useCopyToClipboard().copy(window.location.href + (hash ? '#' + hash : ''))
+    toast.add({
+        icon: 'i-heroicons-information-circle-20-solid',
+        timeout: 2000,
+        title: '链接已复制到剪贴板'
+    })
+}
+</script>
\ No newline at end of file
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index b8d544c..6f41e79 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -35,73 +35,14 @@
                 <div class="grid" v-if="index !== 0">
                     <h1 class="text-3xl" :id="index + 1">{{ item.question }}</h1>
                 </div>
-                <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>
-                        </template>
-                        <template #item>
-                            <div class="flex flex-col gap-2">
-                                <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>找到 {{ 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>
-                        </template>
-                    </UAccordion>
-                </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>
-                </div>
-                <IMdMdc :content="item.article" />
-                <div class="space-x-2" v-if="item.showActions">
-                    <UButton size="xs" color="gray" @click="handleCopyMD(index)" leading-icon="i-heroicons-document-duplicate-20-solid" label="复制" />
-                    <UButton size="xs" color="gray" @click="handleShare(index + 1)" leading-icon="i-heroicons-share-20-solid" label="分享" />
-                    <UButton v-if="index === data.length - 1" size="xs" color="gray" @click="handleReGenerate(index)" leading-icon="i-heroicons-arrow-path-rounded-square-20-solid" label="重写" />
-                </div>
-                <template v-if="!asking && item.source && item.source.length > 0">
-                    <div class="text-xl flex items-center space-x-1">
-                        <UIcon name="i-heroicons-link-20-solid" />
-                        <span>来源</span>
-                    </div>
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-                        <ISearchSource :source="item.source" />
-                    </div>
-                </template>
+                <ISearchContent
+                    :item="item"
+                    :source-count="sourceCount"
+                    :asking="asking"
+                    :is-last-index="data.length - 1 === index"
+                    :index="index"
+                    @regenerate="handleReGenerate"
+                />
                 <UDivider v-if="index !== data.length - 1" class="pt-3 pb-2" />
             </template>
             <ISearchRecommendQuestion
@@ -138,7 +79,6 @@ useHead({
 
 // 是否停止自动滚动到底部
 const isAutoToBottom = ref(true)
-let markedWindowScrollTop = 0
 const handleScroll = (event, params) => {
     // 在asking操作的时候生效
     if (!asking.value || !isAutoToBottom.value) return
@@ -146,8 +86,6 @@ const handleScroll = (event, params) => {
         const top = window.scrollY;
         if (top < y.value) {
             isAutoToBottom.value = false
-        } else {
-            markedWindowScrollTop = top
         }
     })
 }
@@ -166,23 +104,14 @@ const handleFocusTitle = () => {
 const handleBlurTitle = () => {
     isEditTitle.value = false
 }
-const handleShare = (hash) => {
-    useCopyToClipboard().copy(window.location.href + (hash ? '#' + hash : ''))
+function handleShare () {
+    useCopyToClipboard().copy(window.location.href)
     toast.add({
         icon: 'i-heroicons-information-circle-20-solid',
         timeout: 2000,
         title: '链接已复制到剪贴板'
     })
 }
-const handleCopyMD = (index) => {
-    const article = data.value[index].article
-    useCopyToClipboard().copy(article)
-    toast.add({
-        icon: 'i-heroicons-information-circle-20-solid',
-        timeout: 1000,
-        title: '复制成功'
-    })
-}
 const handleReGenerate = (index) => {
     editIndex.value = index
     const question = data.value[editIndex.value].question
-- 
GitLab