添加下载功能

src/components/ai/image/ImageToImage.vue

@@ -32,7 +32,7 @@
                     <el-icon @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })"><RefreshRight /></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="(e) => download(e, activeIndex)"><Download /></el-icon>
                   </template>
                 </el-image>
               </div>
@@ -69,7 +69,7 @@
                     </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="(e) => download(e, activeIndex)"><Download /></el-icon>
                   </template>
                 </el-image>
               </div>
@@ -175,6 +175,10 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
 import { getModelIdByType } from '@/api/teachers.js'
 import { ModelTypeEnum } from '@/api/teachers.js'
 
+// 图片
+import list_img03 from "@/assets/programming/list_img03.png";
+
+
 // 存储上传的图片
 const uploadedImage = ref('');
 
@@ -335,7 +339,18 @@ import {
 } from '@element-plus/icons-vue'
 
 
-const imageAllList = ref([]) // 对话的消息列表
+const imageAllList = ref([
+  {
+    type: 'user',
+    content: '请帮我生成一张类似的图片',
+    imageUrl: list_img03
+  },
+  {
+    type: 'ai',
+    content: '已为您生成图片：',
+    imageList: [list_img03]
+  }
+]) // 对话的消息列表
 // 图片轮询相关的参数（正在生成中的）
 const inProgressImageMap = ref({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
 const inProgressTimer = ref() // 生成中的 image 定时器，轮询生成进展
@@ -409,6 +424,33 @@ const handleStyleSelectChange = (style) => {
   inputRef.value?.focus();
 }
 
+// 图片下载功能
+const download = (event, activeIndex) => {
+  // 获取当前点击的图片
+  const target = event.target || {};
+  // 从父元素找到图片预览器，并获取当前图片URL
+  const imgPreview = target.closest('.el-image-viewer__wrapper');
+  if (!imgPreview) return;
+  // 获取所有预览图片
+  const imgElements = imgPreview.querySelectorAll('.el-image-viewer__img');
+  if (!imgElements || imgElements.length === 0) return;
+  // 确定要下载的图片URL，根据传入的 activeIndex 获取对应图片的URL
+  let imgUrl;
+  if (imgElements[activeIndex]) {
+    imgUrl = imgElements[activeIndex].src;
+  } else {
+    imgUrl = imgElements[0].src;
+  }
+  // 创建下载链接并触发下载
+  const link = document.createElement('a');
+  link.download = `image_${new Date().getTime()}.png`;
+  link.href = imgUrl;
+  // 触发下载
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 </script>
 
 <style scoped lang="scss">