【代码优化】AI：绘图 index.vue 代码梳理 50%（ImageDetail.vue）

Author: YunaiV

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() {

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()
 

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">