修复展示遮罩挡住 修复最大字数
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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' ? '把末帧设为首帧' : '作为参考图'"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user