chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复展示遮罩挡住 修复最大字数

Browse Source
This commit is contained in:
chiyi
2026-07-01 16:44:29 +08:00
parent 9be5c1b31f
commit 57a59c7c76
9 changed files with 75 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MediaLightbox.vue
+31 -53
View File
@@ -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>
frontend/src/views/ImagesView.vue
-8
View File
@@ -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" />
frontend/src/views/LogsView.vue
+10 -2
View File
@@ -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>
frontend/src/views/PlaygroundView.vue
+10 -3
View File
@@ -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' ? '把末帧设为首帧' : '作为参考图'"
frontend/src/views/UserLogsTableView.vue
+9 -1
View File
@@ -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>
frontend/src/views/UserLogsView.vue
-8
View File
@@ -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" />