Merge branch 'master' of http://59.110.91.129:3000/zhangmengying/AIClass

src/views/AIPainting.vue

@@ -18,6 +18,7 @@
           <!-- 对话消息列表 -->
           <div class="message-list">
             <div v-for="(item, index) in imageAllList" :key="index">
+
               <!-- 用户消息 -->
               <div class="user-message" v-if="item.type === 'user'">
                 {{ item.content }}
@@ -25,68 +26,44 @@
 
               <!-- AI生成图片对话框 -->
               <div class="ai-message" v-if="item.type !== 'user'">
+
                 {{ item.content }}
-                {{ item.imageList }}
 
                 <div class="image-list" v-if="item.imageList">
                   <el-image
-                    v-for="(image, index) in item.imageList"
-                    :key="index"
-                    style="width: fit-content; height: 150px; margin: 10px"
-                    :src="image"
-                    :preview-src-list="item.imageList"
-                    fit="cover"
-                    show-progress
+                      v-for="(image, index) in item.imageList"
+                      :key="index"
+                      style=" width: fit-content; height: 150px; margin: 10px;"
+                      :src="image"
+                      :preview-src-list="item.imageList"
+                      fit="cover"
+                      show-progress
                   >
                     <template
-                      #toolbar="{
-                        actions,
-                        prev,
-                        next,
-                        reset,
-                        activeIndex,
-                        setActiveItem
-                      }"
+                        #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
                     >
                       <el-icon @click="prev"><Back /></el-icon>
                       <el-icon @click="next"><Right /></el-icon>
-                      <el-icon
-                        @click="setActiveItem(item.imageList.length - 1)"
-                      >
+                      <el-icon @click="setActiveItem(item.imageList.length - 1)">
                         <DArrowRight />
                       </el-icon>
                       <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
                       <el-icon
-                        @click="
-                          actions('zoomIn', {
-                            enableTransition: false,
-                            zoomRate: 2
-                          })
-                        "
-                      >
+                          @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
                         <ZoomIn />
                       </el-icon>
                       <el-icon
-                        @click="
-                          actions('clockwise', {
-                            rotateDeg: 180,
-                            enableTransition: false
-                          })
-                        "
-                      >
+                          @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })">
                         <RefreshRight />
                       </el-icon>
-                      <el-icon @click="actions('anticlockwise')"
-                        ><RefreshLeft
-                      /></el-icon>
+                      <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
                       <el-icon @click="reset"><Refresh /></el-icon>
-                      <el-icon @click="download(activeIndex)"
-                        ><Download
-                      /></el-icon>
+                      <el-icon @click="download(activeIndex)"><Download /></el-icon>
                     </template>
                   </el-image>
                 </div>
               </div>
+
             </div>
           </div>
           <!-- 输入框和发送按钮 -->
@@ -105,12 +82,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import {
-  AiImageStatusEnum,
-  CreatePainting,
-  PaintingGetMys
-} from '@/api/questions.js'
+import { ref, onMounted,onUnmounted} from 'vue'
+import {AiImageStatusEnum, CreatePainting, PaintingGetMys} from '@/api/questions.js'
 import { useRouter, useRoute } from 'vue-router'
 import {
   Document,
@@ -127,37 +100,49 @@ const goBack = () => {
 const router = useRouter()
 const route = useRoute()
 
+// AI生成图片
+// CreatePainting({
+//   modelId: 56,
+//   prompt:''
+// }).then(res=>{
+//   console.log(res);
+// })
+
+// 获取绘图记录
+// CreatePaintingGetMy().then(res=>{
+//   console.log(res);
+// })
+
 // 消息列表和输入内容的响应式变量
 const messages = ref([])
 
 const inputMessage = ref('')
 // 发送消息函数
 const sendMessage = () => {
+  console.log(inputMessage.value)
   if (inputMessage.value.trim()) {
     // messages.value.push(inputMessage.value.trim())
- 
+    // inputMessage.value = ''
 
-    let content = inputMessage.value.trim()
-    console.log('-------', content)
-       inputMessage.value = ''
-    content = '给我一个小妖怪'
-    console.log('-------', content)
+    let content = inputMessage.value;
+    inputMessage.value = ''
 
     imageAllList.value.push({
       type: 'user',
-      content: content
+      content: content,
     })
     imageAllList.value.push({
       type: 'ai',
-      content: '正在为您生成图片，请稍等...'
+      content: "正在为您生成图片，请稍等...",
     })
+
     CreatePainting({
-      modelId: 56,
-      prompt: content,
-      width: 1024,
-      height: 1024
-    }).then(res => {
-      console.log('生成图片', res)
+      "modelId": 56,
+      "prompt":content,
+      "width":1024,
+      "height":1024
+    }).then(res=>{
+      console.log("生成图片",res)
       //目前写死调用已生成的图片，全部通了后再改
       inProgressImageMap.value[res.data] = {id:res.data,status:AiImageStatusEnum.IN_PROGRESS}
       // inProgressImageMap.value[260] = {id:260,status:AiImageStatusEnum.IN_PROGRESS}
@@ -176,72 +161,70 @@ import {
   RefreshRight,
   Right,
   ZoomIn,
-  ZoomOut
+  ZoomOut,
 } from '@element-plus/icons-vue'
 
 
-// const url =
-//   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-// const srcList = [
-//   'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-// ]
-
-
 const imageAllList = ref([]) // 对话的消息列表
 const imageList = ref([]) // image 列表
 // 图片轮询相关的参数（正在生成中的）
 const inProgressImageMap = ref({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
 const inProgressTimer = ref() // 生成中的 image 定时器，轮询生成进展
 
+
 /** 轮询生成中的 image 列表 */
 const refreshWatchImages = async () => {
   const imageIds = Object.keys(inProgressImageMap.value).map(Number)
   if (imageIds.length === 0) {
     return
   }
-  console.log('轮询生成中的 image 列表', imageIds)
   console.log("轮询生成中的 image 列表",imageIds,imageIds.join(','))
   const list = await PaintingGetMys(imageIds)
-  console.log('轮询生成中的 image 列表', list)
+  console.log("轮询生成中的 image 列表",list)
   const newWatchImages = {}
-  // 添加空值检查
-  if (list.data) {
-    list.data.forEach(image => {
-      if (image.status === AiImageStatusEnum.IN_PROGRESS) {
-        newWatchImages[image.id] = image
-      } else {
-        //   const index = imageList.value.findIndex((oldImage) => image.id === oldImage.id)
-        //   if (index >= 0) {
-        // 更新 imageList
-        // imageList.value[index] = image
-        imageAllList.value.pop()
-        imageAllList.value.push({
-          type: 'ai',
-          content: '已为您生成图片：',
-          imageList:image.picUrl
-        })
-        // }
-      }
-    })
-  }
-  console.log("================",imageAllList)
+  list.data.forEach((image) => {
+    if (image.status === AiImageStatusEnum.IN_PROGRESS) {
+      newWatchImages[image.id] = image
+    } else {
+
+      imageAllList.value.pop();
+      imageAllList.value.push({
+        type: 'ai',
+        content: "已为您生成图片：",
+        imageList: [image.picUrl],
+      })
+    }
+  })
   inProgressImageMap.value = newWatchImages
+  if (newWatchImages.size === 0) {
+    inProgressTimerFun()
+  }
 }
 
+
 /** 组件挂在的时候 */
 onMounted(async () => {
-  // 自动刷新 image 列表
-  inProgressTimer.value = setInterval(async () => {
-    await refreshWatchImages()
-  }, 1000 * 3)
+  refreshWatchImagesFun()
 })
 
 /** 组件取消挂在的时候 */
 onUnmounted(async () => {
+  inProgressTimerFun()
+})
+
+// 自动刷新 image 列表
+const refreshWatchImagesFun = () => {
+  inProgressTimer.value = setInterval(async () => {
+    await refreshWatchImages()
+  }, 1000 * 3)
+}
+
+// 停止刷新image列表
+const inProgressTimerFun = () => {
   if (inProgressTimer.value) {
     clearInterval(inProgressTimer.value)
   }
-})
+}
 </script>
 
 <style scoped lang="scss">
@@ -372,4 +355,4 @@ onUnmounted(async () => {
   display: flex;
   flex-wrap: wrap;
 }
-</style>
+</style>