update

src/components/MyPhoto.vue

@@ -221,6 +221,26 @@ markers.value = [
   { x: 0, y: 32, width: 50, height: 14 }
 ];
 
+// 从URL中提取文件名
+const getFileNameFromUrl = (url) => {
+  if (!url) return null;
+  return url.substring(url.lastIndexOf('/') + 1);
+};
+
+const downloadGenerateImg = (item)=> {
+  try {
+    const link = document.createElement('a');
+    link.href = item.result_url;
+    link.download = getFileNameFromUrl(item.result_url) || 'downloaded-image.jpg';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    ElMessage.success('下载成功！');
+  } catch (error) {
+    ElMessage.success('下载失败！');
+  }
+}
+
 </script>
 
 <template>
@@ -276,7 +296,8 @@ markers.value = [
             :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
           >
           </div> 
-          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">         
+          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">   
+          <img v-if="item.result_url !== failedImg" @click="downloadGenerateImg(item)" src="../assets/images/download.webp" class="download-btn" alt="下载图片">         
           <img 
             :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
              ? activeBorderImage : defaultBorderImage" 
@@ -361,11 +382,19 @@ markers.value = [
   color: #855211;
   font-size: 3.6vw;
 }
+.download-btn {
+  width: 12.6vw;
+  position: absolute;
+  bottom: 7vw;
+  right: 3vw;
+  cursor: pointer;
+  z-index: 9;
+}
 .refresh-btn {
   width: 12vw;
   position: absolute;
-  top: 12%;
-  right: 8%;
+  top: 7vw;
+  right: 3vw;
   cursor: pointer;
   z-index: 9;
 }