From 57a59c7c76f21cb05ccc04fdbdfb71cc51d6bd25 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Wed, 1 Jul 2026 16:44:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B1=95=E7=A4=BA=E9=81=AE?=
 =?UTF-8?q?=E7=BD=A9=E6=8C=A1=E4=BD=8F=20=E4=BF=AE=E5=A4=8D=E6=9C=80?=
 =?UTF-8?q?=E5=A4=A7=E5=AD=97=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../internal/http/handler/user_generation.go  |  4 +-
 backend/internal/http/handler/v1.go           |  2 +-
 backend/internal/service/v1.go                | 12 +++
 frontend/src/components/MediaLightbox.vue     | 84 +++++++------------
 frontend/src/views/ImagesView.vue             |  8 --
 frontend/src/views/LogsView.vue               | 12 ++-
 frontend/src/views/PlaygroundView.vue         | 13 ++-
 frontend/src/views/UserLogsTableView.vue      | 10 ++-
 frontend/src/views/UserLogsView.vue           |  8 --
 9 files changed, 75 insertions(+), 78 deletions(-)

diff --git a/backend/internal/http/handler/user_generation.go b/backend/internal/http/handler/user_generation.go
index a38af9b..d432657 100644
--- a/backend/internal/http/handler/user_generation.go
+++ b/backend/internal/http/handler/user_generation.go
@@ -70,7 +70,7 @@ func (h *UserGenerationHandler) Generate(c *gin.Context) {
 		switch {
 		case errors.Is(err, service.ErrUnknownModel):
 			c.JSON(http.StatusNotFound, gin.H{"detail": err.Error()})
-		case errors.Is(err, service.ErrUnsupportedParams):
+		case errors.Is(err, service.ErrUnsupportedParams), errors.Is(err, service.ErrPromptTooLong):
 			c.JSON(http.StatusBadRequest, gin.H{"detail": err.Error()})
 		case errors.Is(err, service.ErrInsufficientFunds):
 			c.JSON(http.StatusPaymentRequired, gin.H{"detail": "积分不足"})
@@ -132,7 +132,7 @@ func (h *UserGenerationHandler) Test(c *gin.Context) {
 		switch {
 		case errors.Is(err, service.ErrUnknownModel):
 			c.JSON(http.StatusNotFound, gin.H{"detail": err.Error()})
-		case errors.Is(err, service.ErrUnsupportedParams):
+		case errors.Is(err, service.ErrUnsupportedParams), errors.Is(err, service.ErrPromptTooLong):
 			c.JSON(http.StatusBadRequest, gin.H{"detail": err.Error()})
 		case errors.Is(err, service.ErrProviderQuota):
 			c.JSON(http.StatusTooManyRequests, gin.H{"detail": err.Error()})
diff --git a/backend/internal/http/handler/v1.go b/backend/internal/http/handler/v1.go
index 4bd0827..a5a61af 100644
--- a/backend/internal/http/handler/v1.go
+++ b/backend/internal/http/handler/v1.go
@@ -316,7 +316,7 @@ func (h *V1Handler) writeV1Error(c *gin.Context, err error, payload map[string]a
 	switch {
 	case errors.Is(err, service.ErrUnknownModel):
 		c.JSON(http.StatusNotFound, gin.H{"detail": err.Error()})
-	case errors.Is(err, service.ErrUnsupportedParams):
+	case errors.Is(err, service.ErrUnsupportedParams), errors.Is(err, service.ErrPromptTooLong):
 		c.JSON(http.StatusBadRequest, gin.H{"detail": err.Error()})
 	case errors.Is(err, service.ErrInsufficientFunds):
 		c.JSON(http.StatusPaymentRequired, gin.H{"detail": err.Error()})
diff --git a/backend/internal/service/v1.go b/backend/internal/service/v1.go
index 737639d..6f7c24b 100644
--- a/backend/internal/service/v1.go
+++ b/backend/internal/service/v1.go
@@ -14,6 +14,7 @@ import (
 	"sync"
 	"sync/atomic"
 	"time"
+	"unicode/utf8"
 
 	"strconv"
 
@@ -37,6 +38,7 @@ var (
 	ErrInvalidAPIKey       = errors.New("invalid api key")
 	ErrUnknownModel        = errors.New("unknown model")
 	ErrUnsupportedParams   = errors.New("unsupported or unpriced parameters for this model")
+	ErrPromptTooLong       = errors.New("prompt too long (max 2000 characters)")
 	ErrInsufficientFunds   = errors.New("insufficient credits")
 	ErrGenerationPending   = errors.New("generation executor not implemented yet")
 	ErrProviderAuth        = errors.New("provider token invalid or expired")
@@ -57,6 +59,10 @@ var (
 	ErrVideoNotReady    = errors.New("video is not ready yet")
 )
 
+// maxPromptRunes caps prompt length (counted as characters, so Chinese = 1),
+// matching the 画图台 counter. Enforced for both 画图台 and API-key calls.
+const maxPromptRunes = 2000
+
 // maxReferenceImageBytes bounds a single decoded reference image. 8 MB
 // comfortably covers real photos/screenshots; anything larger is almost
 // certainly abuse or a mistake. Mirrors Python core/refs.py.
@@ -939,6 +945,9 @@ func (s *V1Service) prepareImage(ctx context.Context, principal *APIPrincipal, i
 	if modelID == "" || prompt == "" {
 		return nil, "", "", 0, errors.New("model and prompt required")
 	}
+	if utf8.RuneCountInString(prompt) > maxPromptRunes {
+		return nil, "", "", 0, ErrPromptTooLong
+	}
 	modelItem, err := s.models.Get(ctx, modelID)
 	if err != nil {
 		if errors.Is(err, gorm.ErrRecordNotFound) {
@@ -1002,6 +1011,9 @@ func (s *V1Service) prepareVideo(ctx context.Context, principal *APIPrincipal, i
 	if modelID == "" || prompt == "" {
 		return nil, "", "", "", 0, errors.New("model and prompt required")
 	}
+	if utf8.RuneCountInString(prompt) > maxPromptRunes {
+		return nil, "", "", "", 0, ErrPromptTooLong
+	}
 	if duration == "" {
 		return nil, "", "", "", 0, errors.New("duration required")
 	}
diff --git a/frontend/src/components/MediaLightbox.vue b/frontend/src/components/MediaLightbox.vue
index 0fe4bf9..ff4cc09 100644
--- a/frontend/src/components/MediaLightbox.vue
+++ b/frontend/src/components/MediaLightbox.vue
@@ -1,72 +1,50 @@
 <script setup>
-// Shared full-screen preview for a generated image/video. One look across the
-// admin (图片管理 / 日志) and the user-facing (画图记录) surfaces. Parent controls
-// mount via v-if and passes the resolved media URL + meta; the component owns the
-// overlay shell, image/video element, prompt + meta block, and action buttons.
-import { ref } from 'vue'
-import { copyText } from '../utils/clipboard'
-import Icon from './Icon.vue'
+// 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.
+import { ref, watch } from 'vue'
 
 const props = defineProps({
-  src: { type: String, required: true },     // resolved media URL (generatedUrl)
+  src: { type: String, required: true },     // resolved media URL
   kind: { type: String, default: 'image' },  // 'image' | 'video'
   prompt: { type: String, default: '' },
-  meta: { type: String, default: '' },        // primary meta line (mono)
-  metaSub: { type: String, default: '' },     // optional second meta line
+  meta: { type: String, default: '' },
+  metaSub: { type: String, default: '' },
   downloadName: { type: String, default: '' },
 })
 const emit = defineEmits(['close'])
 
-const toast = ref('')
-let toastTimer = null
-async function copyPrompt() {
-  if (!props.prompt) return
-  toast.value = (await copyText(props.prompt)) ? '指令已复制' : '复制失败'
-  clearTimeout(toastTimer)
-  toastTimer = setTimeout(() => (toast.value = ''), 1800)
-}
+// Render the image as a CSS background (not <img>) so Edge/Bing shows no
+// "visual search" hover icon. Load it to learn its aspect ratio, then size the
+// div to fit the viewport while preserving ratio — mirrors object-contain.
+const imgRatio = ref(1)
+watch(() => props.src, (src) => {
+  if (props.kind !== 'image' || !src) return
+  const im = new Image()
+  im.onload = () => { if (im.naturalHeight) imgRatio.value = im.naturalWidth / im.naturalHeight }
+  im.src = src
+}, { immediate: true })
 </script>
 
 <template>
+  <!-- Teleport to <body> so the overlay escapes the layout's `main` (relative
+       z-10) stacking context — otherwise the fixed z-index sits BELOW the
+       root-level sidebar (z-30) and the logo pokes through the backdrop. -->
+  <Teleport to="body">
   <transition name="lb-fade" appear>
-    <div class="media-card fixed inset-0 z-50 bg-slate-950/85 backdrop-blur-sm flex items-center justify-center p-6"
+    <div class="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4"
          @click.self="emit('close')">
-      <div v-if="toast"
-           class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[60] bg-slate-900 text-white text-xs px-4 py-2 rounded-lg shadow-lg ring-1 ring-white/10">
-        {{ toast }}
-      </div>
-      <!-- Wrapper shrinks to the media's rendered width, so the info row below
-           lines up flush with the image's left & right edges (one clean column). -->
-      <div class="flex flex-col max-h-full max-w-full">
-        <video v-if="kind === 'video'" :src="src" controls autoplay
-               class="max-h-[76vh] max-w-[88vw] rounded-xl shadow-2xl object-contain"></video>
-        <img v-else :src="src" class="max-h-[76vh] max-w-[88vw] rounded-xl shadow-2xl object-contain" />
-
-        <div class="mt-3 flex items-start justify-between gap-4 text-white">
-          <div class="min-w-0 flex-1">
-            <div v-if="prompt" @click="copyPrompt" title="点击复制提示词"
-                 class="text-sm font-medium leading-snug line-clamp-3 break-words cursor-pointer transition-colors hover:text-white/75">{{ prompt }}</div>
-            <div v-if="meta" class="text-xs text-white/60 mt-1 font-mono break-all">{{ meta }}</div>
-            <div v-if="metaSub" class="text-xs text-white/45 mt-1">{{ metaSub }}</div>
-          </div>
-          <div class="flex items-center gap-2 shrink-0">
-            <a :href="src" target="_blank"
-               class="inline-flex items-center gap-1.5 rounded-lg bg-white/10 hover:bg-white/20 px-3 py-1.5 text-xs transition-colors">
-              <Icon name="open" class="w-3.5 h-3.5" /> 原图
-            </a>
-            <a :href="src" :download="downloadName"
-               class="inline-flex items-center gap-1.5 rounded-lg bg-white text-slate-900 hover:bg-slate-100 px-3 py-1.5 text-xs font-medium transition-colors">
-              <Icon name="download" class="w-3.5 h-3.5" /> 下载
-            </a>
-            <button @click="emit('close')"
-               class="w-8 h-8 rounded-lg bg-white/10 hover:bg-white/20 grid place-items-center transition-colors">
-              <Icon name="close" class="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      </div>
+      <video v-if="kind === 'video'" :src="src" controls autoplay
+             class="max-h-[94vh] max-w-[96vw] rounded-lg"
+             controlslist="nodownload noremoteplayback noplaybackrate"
+             disablepictureinpicture disableremoteplayback></video>
+      <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>
     </div>
   </transition>
+  </Teleport>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/ImagesView.vue b/frontend/src/views/ImagesView.vue
index 2c31f2e..7fc824c 100644
--- a/frontend/src/views/ImagesView.vue
+++ b/frontend/src/views/ImagesView.vue
@@ -159,14 +159,6 @@ 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">
-          <a :href="generatedUrl(f.name)" target="_blank" @click.stop 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="open" class="w-3.5 h-3.5" />
-          </a>
-          <button @click.stop="copyLink(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>
           <a :href="generatedUrl(f.name)" :download="f.name.split('/').pop()" @click.stop 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="download" class="w-3.5 h-3.5" />
diff --git a/frontend/src/views/LogsView.vue b/frontend/src/views/LogsView.vue
index e3767e6..88f3253 100644
--- a/frontend/src/views/LogsView.vue
+++ b/frontend/src/views/LogsView.vue
@@ -25,6 +25,12 @@ async function copyPrompt(e) {
   clearTimeout(toastTimer)
   toastTimer = setTimeout(() => (toast.value = ''), 1800)
 }
+async function copyError(e) {
+  if (!e.error) return
+  toast.value = (await copyText(e.error)) ? '错误已复制' : '复制失败'
+  clearTimeout(toastTimer)
+  toastTimer = setTimeout(() => (toast.value = ''), 1800)
+}
 
 async function load() {
   loading.value = true
@@ -294,8 +300,10 @@ const sourcePill = (s) => ({
                    :class="e.prompt ? 'cursor-pointer hover:text-white' : ''"
                    :title="e.prompt ? '点击复制提示词' : ''"
                    @click="e.prompt && copyPrompt(e)">{{ e.prompt || '—' }}</div>
-              <div v-if="e.error" class="mt-1 text-[11px] text-rose-300/85 truncate flex items-center gap-1.5" :title="e.error">
-                <Icon name="close" class="w-3 h-3 shrink-0" />
+              <div v-if="e.error" class="mt-1 text-[11px] text-rose-300/85 truncate flex items-center gap-1.5 cursor-pointer hover:text-rose-200 transition-colors"
+                   :title="e.error + ' — 点击复制'"
+                   @click.stop="copyError(e)">
+                <Icon name="copy" class="w-3 h-3 shrink-0" />
                 {{ e.error }}
               </div>
             </td>
diff --git a/frontend/src/views/PlaygroundView.vue b/frontend/src/views/PlaygroundView.vue
index 8884d71..fe47d92 100644
--- a/frontend/src/views/PlaygroundView.vue
+++ b/frontend/src/views/PlaygroundView.vue
@@ -524,8 +524,11 @@ onUnmounted(() => {
 
       <!-- prompt -->
       <div>
-        <label class="block text-xs font-medium text-slate-500 mb-1.5">提示词</label>
-        <textarea v-model="prompt" rows="4" class="field resize-none disabled:opacity-60 disabled:cursor-not-allowed"
+        <div class="flex items-center justify-between mb-1.5">
+          <label class="block text-xs font-medium text-slate-500">提示词</label>
+          <span class="text-[11px] tabular-nums" :class="prompt.length >= 2000 ? 'text-rose-500' : 'text-slate-400'">{{ prompt.length }}/2000</span>
+        </div>
+        <textarea v-model="prompt" rows="4" maxlength="2000" class="field resize-none disabled:opacity-60 disabled:cursor-not-allowed"
                   placeholder="描述想要的画面…如：黄昏时分,金色麦田里奔跑的金毛猎犬,电影感"></textarea>
       </div>
 
@@ -646,7 +649,11 @@ onUnmounted(() => {
             <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 via-black/30 to-transparent pointer-events-none"></div>
             <!-- hover action: 上参考图. Image → use as reference; video → 末帧设为首帧
                  (only shown when the model supports 首尾帧). Clicking the media zooms. -->
-            <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+            <div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <a :href="item.url" :download="(item.url || '').split('/').pop()" @click.stop 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="download" class="w-3.5 h-3.5" />
+              </a>
               <button v-if="item.kind === 'video' ? (refMode === 'frame' && maxRefs > 0) : (maxRefs > 0)"
                       @click.stop="item.kind === 'video' ? useVideoFrame(item) : useAsRef(item)"
                       :title="item.kind === 'video' ? '把末帧设为首帧' : '作为参考图'"
diff --git a/frontend/src/views/UserLogsTableView.vue b/frontend/src/views/UserLogsTableView.vue
index 395adce..4451405 100644
--- a/frontend/src/views/UserLogsTableView.vue
+++ b/frontend/src/views/UserLogsTableView.vue
@@ -32,6 +32,12 @@ async function copyPrompt(e) {
   clearTimeout(toastTimer)
   toastTimer = setTimeout(() => (toast.value = ''), 1800)
 }
+async function copyError(e) {
+  if (!e.error) return
+  toast.value = (await copyText(e.error)) ? '错误已复制' : '复制失败'
+  clearTimeout(toastTimer)
+  toastTimer = setTimeout(() => (toast.value = ''), 1800)
+}
 
 // 来源筛选走服务端:画图台 = source "user",API = source "v1"。
 const SOURCE_PARAM = { web: 'user', api: 'v1' }
@@ -246,7 +252,9 @@ const params = (e) => {
                    :class="e.prompt ? 'cursor-pointer hover:text-slate-900' : ''"
                    :title="e.prompt ? '点击复制提示词' : ''"
                    @click="e.prompt && copyPrompt(e)">{{ e.prompt || '—' }}</div>
-              <div v-if="e.error" class="mt-1 text-[11px] text-rose-600 truncate" :title="e.error">⚠ {{ e.error }}</div>
+              <div v-if="e.error" class="mt-1 text-[11px] text-rose-600 truncate cursor-pointer hover:text-rose-700 transition-colors"
+                   :title="e.error + ' — 点击复制'"
+                   @click.stop="copyError(e)">⚠ {{ e.error }}</div>
             </td>
             <td class="px-3 py-3 align-middle text-xs text-slate-500 tabular-nums">{{ params(e) || '—' }}</td>
             <td class="px-3 py-3 align-middle text-right text-xs text-slate-700 tabular-nums">{{ e.cost ? points(e.cost) : '—' }}</td>
diff --git a/frontend/src/views/UserLogsView.vue b/frontend/src/views/UserLogsView.vue
index 8a8d5a4..36f5afa 100644
--- a/frontend/src/views/UserLogsView.vue
+++ b/frontend/src/views/UserLogsView.vue
@@ -190,14 +190,6 @@ 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">
-          <a :href="generatedUrl(e.file)" target="_blank" @click.stop 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="open" class="w-3.5 h-3.5" />
-          </a>
-          <button @click.stop="copyLink(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>
           <a :href="generatedUrl(e.file)" :download="e.file.split('/').pop()" @click.stop 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="download" class="w-3.5 h-3.5" />