From 19626810d19fea179232f7ccf5ba10988a6dd8b8 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Sun, 5 Jul 2026 01:31:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=8D=E5=88=B6=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MediaLightbox.vue | 59 +++++++++++++++++++++--
 frontend/src/views/ImagesView.vue         |  2 +-
 frontend/src/views/PlaygroundView.vue     |  2 +-
 frontend/src/views/UserLogsView.vue       |  2 +-
 4 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/MediaLightbox.vue b/frontend/src/components/MediaLightbox.vue
index ff4cc09..1fa4eb5 100644
--- a/frontend/src/components/MediaLightbox.vue
+++ b/frontend/src/components/MediaLightbox.vue
@@ -1,9 +1,9 @@
 <script setup>
-// Full-screen preview: just the enlarged image/video on a dark backdrop.
-// Click the dark area (or Esc, handled by the parent) to close. No prompt, no
-// meta, no buttons — deliberately bare. Props beyond src/kind are accepted for
-// call-site compatibility but intentionally not rendered.
+// Full-screen preview: the enlarged image/video on a dark backdrop, plus a
+// small top-right action row (copy-to-clipboard for images, download for
+// both). Click the dark area (or Esc, handled by the parent) to close.
 import { ref, watch } from 'vue'
+import Icon from './Icon.vue'
 
 const props = defineProps({
   src: { type: String, required: true },     // resolved media URL
@@ -25,6 +25,40 @@ watch(() => props.src, (src) => {
   im.onload = () => { if (im.naturalHeight) imgRatio.value = im.naturalWidth / im.naturalHeight }
   im.src = src
 }, { immediate: true })
+
+const toast = ref('')
+let toastTimer = null
+function flash(msg) {
+  toast.value = msg
+  clearTimeout(toastTimer)
+  toastTimer = setTimeout(() => (toast.value = ''), 1800)
+}
+
+async function copyImage() {
+  try {
+    const blob = await (await fetch(props.src)).blob()
+    const pngBlob = blob.type === 'image/png'
+      ? blob
+      : await new Promise((resolve, reject) => {
+          createImageBitmap(blob).then((bitmap) => {
+            const canvas = document.createElement('canvas')
+            canvas.width = bitmap.width
+            canvas.height = bitmap.height
+            const ctx = canvas.getContext('2d')
+            if (!ctx) { reject(new Error('no canvas ctx')); return }
+            ctx.drawImage(bitmap, 0, 0)
+            canvas.toBlob((out) => {
+              if (out) resolve(out)
+              else reject(new Error('png convert failed'))
+            }, 'image/png')
+          }).catch(reject)
+        })
+    await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
+    flash('图片已复制')
+  } catch {
+    flash('复制失败')
+  }
+}
 </script>
 
 <template>
@@ -42,6 +76,23 @@ watch(() => props.src, (src) => {
       <div v-else
            :style="{ width: `min(96vw, calc(94vh * ${imgRatio}))`, aspectRatio: imgRatio, backgroundImage: `url(${src})` }"
            class="rounded-lg bg-contain bg-center bg-no-repeat"></div>
+
+      <!-- actions: copy (images only) + download -->
+      <div class="absolute top-4 right-4 flex gap-2">
+        <button v-if="kind !== 'video'" @click.stop="copyImage" title="复制图片"
+                class="w-9 h-9 rounded-lg bg-black/60 ring-1 ring-white/15 hover:bg-black/80 text-white grid place-items-center">
+          <Icon name="copy" class="w-4 h-4" />
+        </button>
+        <a :href="src" :download="downloadName || src.split('/').pop()" @click.stop title="下载"
+           class="w-9 h-9 rounded-lg bg-black/60 ring-1 ring-white/15 hover:bg-black/80 text-white grid place-items-center">
+          <Icon name="download" class="w-4 h-4" />
+        </a>
+      </div>
+
+      <div v-if="toast"
+           class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-slate-900 text-white text-xs px-4 py-2 rounded-lg shadow-lg">
+        {{ toast }}
+      </div>
     </div>
   </transition>
   </Teleport>
diff --git a/frontend/src/views/ImagesView.vue b/frontend/src/views/ImagesView.vue
index 046d70a..1002aba 100644
--- a/frontend/src/views/ImagesView.vue
+++ b/frontend/src/views/ImagesView.vue
@@ -194,7 +194,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
 
         <!-- quick actions, hover-revealed; same style as 首页内容 -->
         <div class="absolute top-3 right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button v-if="f.kind !== 'video'" @click.stop.prevent="copyImage(thumbUrl(f.name))" title="复制缩略图"
+          <button v-if="f.kind !== 'video'" @click.stop.prevent="copyImage(generatedUrl(f.name))" title="复制图片"
                   class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
             <Icon name="copy" class="w-3.5 h-3.5" />
           </button>
diff --git a/frontend/src/views/PlaygroundView.vue b/frontend/src/views/PlaygroundView.vue
index 328fc5b..1818f25 100644
--- a/frontend/src/views/PlaygroundView.vue
+++ b/frontend/src/views/PlaygroundView.vue
@@ -712,7 +712,7 @@ onUnmounted(() => {
             <!-- hover action: 上参考图. Image → use as reference; video → 末帧设为首帧
                  (only shown when the model supports 首尾帧). Clicking the media zooms. -->
             <div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-              <button v-if="item.kind !== 'video'" @click.stop.prevent="copyImage(item.url + '.thumb.jpg')" title="复制缩略图"
+              <button v-if="item.kind !== 'video'" @click.stop.prevent="copyImage(item.url)" title="复制图片"
                       class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
                 <Icon name="copy" class="w-3.5 h-3.5" />
               </button>
diff --git a/frontend/src/views/UserLogsView.vue b/frontend/src/views/UserLogsView.vue
index f4a04df..2d21827 100644
--- a/frontend/src/views/UserLogsView.vue
+++ b/frontend/src/views/UserLogsView.vue
@@ -226,7 +226,7 @@ onUnmounted(() => {
         <!-- hover actions (only when there's a file) -->
         <div v-if="e.status === 'success' && e.file"
              class="absolute top-3 right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button v-if="e.kind !== 'video'" @click.stop.prevent="copyImage(thumbUrl(e.file))" title="复制缩略图"
+          <button v-if="e.kind !== 'video'" @click.stop.prevent="copyImage(generatedUrl(e.file))" title="复制图片"
                   class="w-7 h-7 rounded-lg bg-black/50 ring-1 ring-white/10 hover:bg-black/70 text-white grid place-items-center">
             <Icon name="copy" class="w-3.5 h-3.5" />
           </button>