From ac46a376381eb97b1e4be8d518d0733f1e1d3a12 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 9 Jul 2024 09:13:10 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=91AI=EF=BC=9A=E7=BB=98=E5=9B=BE=20index.vue=20=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A2=B3=E7=90=86=2050%=EF=BC=88ImageDetail.vue?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index/components/message/MessageList.vue  | 15 ++---
 src/views/ai/chat/index/index.vue             |  6 +-
 .../ai/image/index/components/ImageDetail.vue | 64 ++++++++-----------
 3 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/views/ai/chat/index/components/message/MessageList.vue b/src/views/ai/chat/index/components/message/MessageList.vue
index b48fc295..2cc84079 100644
--- a/src/views/ai/chat/index/components/message/MessageList.vue
+++ b/src/views/ai/chat/index/components/message/MessageList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="messageContainer" class="h-100% overflow-y relative">
+  <div ref="messageContainer" class="h-100% overflow-y-auto relative">
     <div class="chat-list" v-for="(item, index) in list" :key="index">
       <!-- 靠左 message：system、assistant 类型 -->
       <div class="left-message message-item" v-if="item.type !== 'user'">
@@ -101,13 +101,12 @@ const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']) // 定义
 
 /** 滚动到底部 */
 const scrollToBottom = async (isIgnore?: boolean) => {
-  // 注意要使用 nextTick 以免获取不到dom
-  await nextTick(() => {
-    if (isIgnore || !isScrolling.value) {
-      messageContainer.value.scrollTop =
-        messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
-    }
-  })
+  // 注意要使用 nextTick 以免获取不到 dom
+  await nextTick()
+  if (isIgnore || !isScrolling.value) {
+    messageContainer.value.scrollTop =
+      messageContainer.value.scrollHeight - messageContainer.value.offsetHeight
+  }
 }
 
 function handleScroll() {
diff --git a/src/views/ai/chat/index/index.vue b/src/views/ai/chat/index/index.vue
index 0c53ebea..6b79f138 100644
--- a/src/views/ai/chat/index/index.vue
+++ b/src/views/ai/chat/index/index.vue
@@ -394,7 +394,6 @@ const doSendMessage = async (content: string) => {
   } as ChatMessageVO)
 }
 
-// TODO @fan：= = 不知道哪里被改动了。点击【发送】后，不会跳转到消息最底部了。。
 /** 真正执行【发送】消息操作 */
 const doSendMessageStream = async (userMessage: ChatMessageVO) => {
   // 创建 AbortController 实例，以便中止请求
@@ -421,9 +420,8 @@ const doSendMessageStream = async (userMessage: ChatMessageVO) => {
       createTime: new Date()
     } as ChatMessageVO)
     // 1.2 滚动到最下面
-    nextTick(async () => {
-      await scrollToBottom() // 底部
-    })
+    await nextTick()
+    await scrollToBottom() // 底部
     // 1.3 开始滚动
     textRoll()
 
diff --git a/src/views/ai/image/index/components/ImageDetail.vue b/src/views/ai/image/index/components/ImageDetail.vue
index c4b90b6c..1877f28e 100644
--- a/src/views/ai/image/index/components/ImageDetail.vue
+++ b/src/views/ai/image/index/components/ImageDetail.vue
@@ -7,52 +7,49 @@
   >
     <!-- 图片 -->
     <div class="item">
-      <!--      <div class="header">-->
-      <!--        <div>图片</div>-->
-      <!--        <div>-->
-      <!--        </div>-->
-      <!--      </div>-->
       <div class="body">
-        <!-- TODO @fan: 要不，这里只展示图片？？？不用 ImageCard -->
-        <ImageCard :image-detail="imageDetail" />
+        <el-image
+          class="image"
+          :src="detail?.picUrl"
+          :preview-src-list="[detail.picUrl]"
+          preview-teleported
+        />
       </div>
     </div>
-    <!--  时间  -->
+    <!-- 时间 -->
     <div class="item">
       <div class="tip">时间</div>
       <div class="body">
-        <div>提交时间：{{ imageDetail.createTime }}</div>
-        <div>生成时间：{{ imageDetail.finishTime }}</div>
+        <div>提交时间：{{ detail.createTime }}</div>
+        <div>生成时间：{{ detail.finishTime }}</div>
       </div>
     </div>
-    <!--  模型  -->
+    <!-- 模型 -->
     <div class="item">
       <div class="tip">模型</div>
-      <div class="body">
-        {{ imageDetail.model }}({{ imageDetail.height }}x{{ imageDetail.width }})
-      </div>
+      <div class="body"> {{ detail.model }}({{ detail.height }}x{{ detail.width }}) </div>
     </div>
-    <!--  提示词  -->
+    <!-- 提示词 -->
     <div class="item">
       <div class="tip">提示词</div>
       <div class="body">
-        {{ imageDetail.prompt }}
+        {{ detail.prompt }}
       </div>
     </div>
-    <!--  地址  -->
+    <!-- 地址 -->
     <div class="item">
       <div class="tip">图片地址</div>
       <div class="body">
-        {{ imageDetail.picUrl }}
+        {{ detail.picUrl }}
       </div>
     </div>
     <!-- 风格 -->
-    <div class="item" v-if="imageDetail?.options?.style">
+    <div class="item" v-if="detail?.options?.style">
       <div class="tip">风格</div>
       <div class="body">
         <!-- TODO @fan：貌似需要把 imageStyleList 搞到 api/image/index.ts 枚举起来？ -->
         <!-- TODO @fan：这里的展示，可能需要按照平台做区分 -->
-        {{ imageDetail?.options?.style }}
+        {{ detail?.options?.style }}
       </div>
     </div>
   </el-drawer>
@@ -63,7 +60,7 @@ import { ImageApi, ImageVO } from '@/api/ai/image'
 import ImageCard from './ImageCard.vue'
 
 const showDrawer = ref<boolean>(false) // 是否显示
-const imageDetail = ref<ImageVO>({} as ImageVO) // 图片详细信息
+const detail = ref<ImageVO>({} as ImageVO) // 图片详细信息
 
 const props = defineProps({
   show: {
@@ -77,35 +74,30 @@ const props = defineProps({
   }
 })
 
-/**  抽屉 - close  */
+/** 关闭抽屉  */
 const handleDrawerClose = async () => {
   emits('handleDrawerClose')
 }
 
-/**  获取 - 图片 detail  */
-const getImageDetail = async (id) => {
-  // 获取图片详细
-  imageDetail.value = await ImageApi.getImageMy(id)
-}
-
-/**  任务 - detail  */
-const handleTaskDetail = async () => {
-  showDrawer.value = true
-}
-
-// watch show
+/** 监听 drawer 是否打开 */
 const { show } = toRefs(props)
 watch(show, async (newValue, oldValue) => {
   showDrawer.value = newValue as boolean
 })
-// watch id
+
+/**  获取图片详情  */
+const getImageDetail = async (id: number) => {
+  detail.value = await ImageApi.getImageMy(id)
+}
+
+/** 监听 id 变化，加载最新图片详情 */
 const { id } = toRefs(props)
 watch(id, async (newVal, oldVal) => {
   if (newVal) {
     await getImageDetail(newVal)
   }
 })
-//
+
 const emits = defineEmits(['handleDrawerClose'])
 </script>
 <style scoped lang="scss">