leiyun
/
pc_nuxt
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 커밋
1 브렌치
586 KiB
 
 
 
 
트리: 39bd91f8ae
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '39bd91f8ae'
${ noResults }
pc_nuxt/app/components/WorkDetailModal.vue

566 lines
24 KiB
Raw Blame 히스토리 

  1. <template>

  2.   <Teleport to="body">

  3.     <Transition name="wd-modal">

  4.       <div v-if="modelValue" class="fixed inset-0 z-[120] flex items-center justify-center overflow-hidden p-3 sm:p-4">

  5.         <div class="absolute inset-0 bg-[var(--c-0f172a)]/55 backdrop-blur-sm" @click="close" />

  6. 

  7.         <div class="relative flex max-h-[calc(100dvh-1.5rem)] w-full max-w-3xl flex-col overflow-hidden rounded-2xl bg-[var(--c-ffffff)] shadow-2xl sm:max-h-[88dvh]">

  8.           <!-- 头部 -->

  9.           <div class="flex shrink-0 items-center justify-between gap-3 border-b border-[var(--c-eef2f7)] px-5 py-4">

  10.             <div class="min-w-0">

  11.               <h3 class="truncate text-base font-extrabold text-[var(--c-172033)]">{{ headerTitle }}</h3>

  12.               <div v-if="addTimeText" class="mt-0.5 text-xs text-[var(--c-8a97a8)]">{{ addTimeText }}</div>

  13.             </div>

  14.             <button

  15.               class="flex size-8 shrink-0 items-center justify-center rounded-full text-[var(--c-a0aabb)] transition-colors hover:bg-[var(--c-f1f5fa)] hover:text-[var(--c-172033)]"

  16.               @click="close"

  17.             >

  18.               <UIcon name="i-lucide-x" class="size-5" />

  19.             </button>

  20.           </div>

  21. 

  22.           <!-- 内容 -->

  23.           <div class="detail-scroll min-h-[220px] flex-1 overflow-y-auto overscroll-contain px-5 py-5">

  24.             <!-- 加载中 -->

  25.             <div v-if="loading" class="flex flex-col items-center justify-center gap-3 py-16">

  26.               <span class="size-8 animate-spin rounded-full border-[3px] border-[var(--c-0b8cff)]/20 border-t-[var(--c-0b8cff)]" />

  27.               <span class="text-sm text-[var(--c-8a95a6)]">加载详情中...</span>

  28.             </div>

  29. 

  30.             <!-- 出错 -->

  31.             <div v-else-if="errorMsg" class="py-16 text-center">

  32.               <UIcon name="i-lucide-circle-alert" class="mx-auto mb-3 size-10 text-[var(--c-f04438)]" />

  33.               <div class="text-sm text-[var(--c-f04438)]">{{ errorMsg }}</div>

  34.               <button

  35.                 class="mt-4 rounded-full bg-[var(--c-eef7ff)] px-5 py-2 text-xs font-bold text-[var(--c-0b8cff)]"

  36.                 @click="load"

  37.               >

  38.                 重试

  39.               </button>

  40.             </div>

  41. 

  42.             <template v-else>

  43.               <!-- ============ AI 取名详情 ============ -->

  44.               <template v-if="isName">

  45.                 <div v-if="detail.question_content" class="mb-4 rounded-2xl bg-[var(--c-f7f9fd)] p-4">

  46.                   <div class="mb-1 text-xs font-bold text-[var(--c-8a97a8)]">取名条件</div>

  47.                   <div class="whitespace-pre-wrap text-sm leading-relaxed text-[var(--c-4b5b70)]">{{ detail.question_content }}</div>

  48.                 </div>

  49. 

  50.                 <div v-if="nameResult.summary" class="mb-4 rounded-2xl bg-[var(--c-eef7ff)] p-4 text-sm leading-relaxed text-[var(--c-3a5878)]">

  51.                   {{ nameResult.summary }}

  52.                 </div>

  53. 

  54.                 <div v-if="nameResult.names.length" class="space-y-3">

  55.                   <div

  56.                     v-for="(item, idx) in nameResult.names"

  57.                     :key="idx"

  58.                     class="rounded-2xl border border-[var(--c-eef2f7)] p-4"

  59.                   >

  60.                     <div class="mb-2 flex items-center justify-between">

  61.                       <span class="text-2xl font-extrabold text-[var(--c-0b8cff)]">{{ item.name }}</span>

  62.                       <span v-if="item.score" class="text-base font-extrabold text-[var(--c-ff8a00)]">{{ item.score }}分</span>

  63.                     </div>

  64.                     <div v-if="item.pinyin" class="mb-3 text-xs text-[var(--c-8a97a8)]">{{ item.pinyin }}</div>

  65.                     <div class="space-y-2">

  66.                       <div v-for="f in NAME_FIELDS" :key="f.key">

  67.                         <div v-if="item[f.key]" class="flex items-start gap-2.5">

  68.                           <span class="inline-flex h-[24px] shrink-0 items-center rounded-full bg-[var(--c-eef6ff)] px-2 text-[11px] font-bold text-[var(--c-0b8cff)]">

  69.                             {{ f.label }}

  70.                           </span>

  71.                           <span class="pt-0.5 text-sm leading-relaxed text-[var(--c-172033)]">{{ item[f.key] }}</span>

  72.                         </div>

  73.                       </div>

  74.                     </div>

  75.                   </div>

  76.                 </div>

  77. 

  78.                 <!-- 生成中 / 无结果 -->

  79.                 <div v-else class="py-14 text-center">

  80.                   <template v-if="isPending">

  81.                     <span class="mx-auto mb-3 block size-8 animate-spin rounded-full border-[3px] border-[var(--c-0b8cff)]/20 border-t-[var(--c-0b8cff)]" />

  82.                     <div class="text-sm font-bold text-[var(--c-172033)]">名字整理中</div>

  83.                     <div class="mt-1 text-xs text-[var(--c-8a95a6)]">稍后可再次打开查看</div>

  84.                   </template>

  85.                   <template v-else>

  86.                     <UIcon name="i-lucide-search-x" class="mx-auto mb-3 size-10 text-[var(--c-a0aabb)]" />

  87.                     <div class="text-sm text-[var(--c-8a95a6)]">暂无名字结果</div>

  88.                   </template>

  89.                 </div>

  90.               </template>

  91. 

  92.               <!-- ============ 图片类详情（动漫头像 / 证件照等） ============ -->

  93.               <template v-else>

  94.                 <div

  95.                   v-if="imageUrl"

  96.                   class="grid min-h-0 gap-3 sm:gap-4"

  97.                   :class="isPhoto ? 'mx-auto w-full max-w-md grid-cols-1' : 'grid-cols-2'"

  98.                 >

  99.                   <!-- 原图 -->

  100.                   <div v-if="originalUrl && !isPhoto" class="min-w-0">

  101.                     <div class="mb-2 text-xs font-bold text-[var(--c-8a97a8)]">原图</div>

  102.                     <div

  103.                       class="flex max-h-[calc(100dvh-13rem)] items-center justify-center overflow-hidden rounded-2xl bg-[var(--c-f7f9fd)] sm:max-h-[calc(88dvh-13rem)]"

  104.                       :class="{ 'aspect-square': !isPhoto }"

  105.                       :style="imageAspectStyle"

  106.                     >

  107.                       <img :src="originalUrl" class="size-full" :class="isPhoto ? 'object-contain' : 'object-cover'" alt="原图">

  108.                     </div>

  109.                   </div>

  110.                   <!-- 结果图 -->

  111.                   <div

  112.                     class="min-w-0"

  113.                     :class="{ 'col-span-2 mx-auto w-full max-w-md': !originalUrl && !isPhoto }"

  114.                   >

  115.                     <div class="mb-2 text-xs font-bold text-[var(--c-8a97a8)]">{{ resultLabel }}</div>

  116.                     <div

  117.                       class="flex max-h-[calc(100dvh-13rem)] items-center justify-center overflow-hidden rounded-2xl border-2 border-[var(--c-0b8cff)] bg-[var(--c-f7f9fd)] sm:max-h-[calc(88dvh-13rem)]"

  118.                       :class="{ 'aspect-square': !isPhoto }"

  119.                       :style="imageAspectStyle"

  120.                     >

  121.                       <img :src="imageUrl" class="size-full" :class="isPhoto ? 'object-contain' : 'object-cover'" :alt="resultLabel">

  122.                     </div>

  123.                   </div>

  124.                 </div>

  125. 

  126.                 <!-- 形象照一单多张：缩略图切换 -->

  127.                 <div v-if="imageUrl && portraitUrls.length > 1" class="mt-4 flex flex-wrap gap-2.5">

  128.                   <button

  129.                     v-for="(url, index) in portraitUrls"

  130.                     :key="url"

  131.                     type="button"

  132.                     class="size-14 cursor-pointer overflow-hidden rounded-xl border-2 transition-colors"

  133.                     :class="activePortraitIndex === index ? 'border-[var(--c-0b8cff)]' : 'border-transparent hover:border-[var(--c-e5edf7)]'"

  134.                     :aria-label="`查看第 ${index + 1} 张`"

  135.                     :aria-pressed="activePortraitIndex === index"

  136.                     @click="activePortraitIndex = index"

  137.                   >

  138.                     <img :src="url" class="size-full object-cover" :alt="`第 ${index + 1} 张`">

  139.                   </button>

  140.                 </div>

  141. 

  142.                 <div v-if="!imageUrl" class="py-14 text-center">

  143.                   <template v-if="isPending">

  144.                     <span class="mx-auto mb-3 block size-8 animate-spin rounded-full border-[3px] border-[var(--c-0b8cff)]/20 border-t-[var(--c-0b8cff)]" />

  145.                     <div class="text-sm font-bold text-[var(--c-172033)]">正在创作</div>

  146.                     <div class="mt-1 text-xs text-[var(--c-8a95a6)]">完成后可在此查看结果</div>

  147.                   </template>

  148.                   <template v-else-if="isFailed">

  149.                     <UIcon name="i-lucide-circle-alert" class="mx-auto mb-3 size-10 text-[var(--c-f04438)]" />

  150.                     <div class="text-sm text-[var(--c-f04438)]">{{ detail.err_msg || '生成失败' }}</div>

  151.                   </template>

  152.                   <template v-else>

  153.                     <UIcon name="i-lucide-image-off" class="mx-auto mb-3 size-10 text-[var(--c-a0aabb)]" />

  154.                     <div class="text-sm text-[var(--c-8a95a6)]">暂无图片</div>

  155.                   </template>

  156.                 </div>

  157.               </template>

  158.             </template>

  159.           </div>

  160. 

  161.           <!-- 底部操作 -->

  162.           <div v-if="!loading && !errorMsg" class="flex shrink-0 flex-wrap justify-end gap-3 border-t border-[var(--c-eef2f7)] px-5 py-4">

  163.             <button

  164.               v-if="canDelete"

  165.               type="button"

  166.               :disabled="deleting"

  167.               class="mr-auto inline-flex items-center gap-1.5 rounded-full border border-[var(--c-f04438)]/30 px-5 py-2.5 text-sm font-bold text-[var(--c-f04438)] transition-colors hover:bg-[var(--c-fff1f0)] disabled:cursor-not-allowed disabled:opacity-60"

  168.               @click="deleteRecord"

  169.             >

  170.               <UIcon name="i-lucide-trash-2" class="size-4" />

  171.               {{ deleting ? '删除中...' : '删除记录' }}

  172.             </button>

  173.             <button

  174.               v-if="canCompare"

  175.               type="button"

  176.               class="inline-flex items-center gap-1.5 rounded-full border border-[var(--c-0b8cff)] px-5 py-2.5 text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-eef7ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2"

  177.               @click="openCompare"

  178.             >

  179.               <UIcon name="i-lucide-split-square-horizontal" class="size-4" />

  180.               对比效果

  181.             </button>

  182.             <button

  183.               class="rounded-full border border-[var(--c-e5edf7)] px-5 py-2.5 text-sm font-bold text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-f7f9fd)]"

  184.               @click="close"

  185.             >

  186.               关闭

  187.             </button>

  188.             <button

  189.               v-if="isName && nameResult.names.length"

  190.               class="rounded-full bg-[var(--c-0b8cff)] px-5 py-2.5 text-sm font-bold text-white transition-colors hover:bg-[var(--c-0a7ce0)]"

  191.               @click="copyNames"

  192.             >

  193.               复制结果

  194.             </button>

  195.             <a

  196.               v-if="!isName && imageUrl"

  197.               :href="imageUrl"

  198.               target="_blank"

  199.               rel="noopener"

  200.               download

  201.               class="rounded-full bg-[var(--c-0b8cff)] px-5 py-2.5 text-sm font-bold text-white transition-colors hover:bg-[var(--c-0a7ce0)]"

  202.             >

  203.               {{ isPhoto ? '下载证件照' : '下载图片' }}

  204.             </a>

  205.           </div>

  206.         </div>

  207.       </div>

  208.     </Transition>

  209. 

  210.     <Transition name="wd-modal">

  211.       <div v-if="modelValue && compareOpen" class="fixed inset-0 z-[140] flex items-center justify-center overflow-hidden p-3 sm:p-4">

  212.         <div class="absolute inset-0 bg-[var(--c-0f172a)]/70 backdrop-blur-sm" @click="closeCompare" />

  213.         <div class="relative flex max-h-[calc(100dvh-1.5rem)] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-[var(--c-ffffff)] shadow-2xl sm:max-h-[90dvh]">

  214.           <div class="flex shrink-0 items-center justify-between border-b border-[var(--c-eef2f7)] px-5 py-4">

  215.             <div>

  216.               <h3 class="text-base font-extrabold text-[var(--c-172033)]">{{ compareTitle }}</h3>

  217.               <p class="mt-0.5 text-xs text-[var(--c-8a97a8)]">左右拖动分割线查看生成前后变化</p>

  218.             </div>

  219.             <button

  220.               type="button"

  221.               aria-label="关闭对比"

  222.               class="flex size-8 shrink-0 items-center justify-center rounded-full text-[var(--c-8a97a8)] transition-colors hover:bg-[var(--c-f1f5fa)] hover:text-[var(--c-172033)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  223.               @click="closeCompare"

  224.             >

  225.               <UIcon name="i-lucide-x" class="size-5" />

  226.             </button>

  227.           </div>

  228. 

  229.           <div class="min-h-0 flex-1 p-4 sm:p-5">

  230.             <div

  231.               ref="compareSurface"

  232.               class="relative mx-auto max-h-[calc(100dvh-8.5rem)] w-full max-w-[min(100%,640px)] touch-none select-none overflow-hidden rounded-2xl bg-[var(--c-e8eef6)] cursor-ew-resize sm:max-h-[calc(90dvh-8.5rem)]"

  233.               :class="{ 'aspect-square': !isPhoto }"

  234.               :style="imageAspectStyle"

  235.               @pointerdown="startCompareDrag"

  236.             >

  237.               <img :src="imageUrl" class="pointer-events-none absolute inset-0 size-full" :class="isPhoto ? 'object-contain' : 'object-cover'" :alt="resultLabel">

  238.               <img

  239.                 :src="originalUrl"

  240.                 class="pointer-events-none absolute inset-0 size-full"

  241.                 :class="isPhoto ? 'object-contain' : 'object-cover'"

  242.                 :style="{ clipPath: `inset(0 ${100 - comparePercent}% 0 0)` }"

  243.                 alt="原图"

  244.               >

  245.               <div

  246.                 class="pointer-events-none absolute bottom-0 top-0 w-1 -ml-px bg-[var(--c-ffffff)] shadow-[0_0_14px_var(--sh-15-23-42-280)]"

  247.                 :style="{ left: `${comparePercent}%` }"

  248.               >

  249.                 <div class="absolute left-1/2 top-1/2 flex h-14 w-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--c-ffffff)] text-lg font-extrabold text-[var(--c-0b8cff)] shadow-[0_8px_22px_var(--sh-15-23-42-240)]">

  250.                   <span>‹</span><span>›</span>

  251.                 </div>

  252.               </div>

  253.               <span class="pointer-events-none absolute left-3 top-3 rounded-full bg-[var(--c-0f172a)]/55 px-2.5 py-1 text-[11px] font-bold text-white">原图</span>

  254.               <span class="pointer-events-none absolute right-3 top-3 rounded-full bg-[var(--c-0f172a)]/55 px-2.5 py-1 text-[11px] font-bold text-white">{{ resultLabel }}</span>

  255.             </div>

  256.           </div>

  257.         </div>

  258.       </div>

  259.     </Transition>

  260.   </Teleport>

  261. </template>

  262. 

  263. <script setup>

  264. import dayjs from 'dayjs'

  265. import { parseNameResult, buildNameCopyText, NAME_FIELDS } from '~/utils/nameParse'

  266. 

  267. const props = defineProps({

  268.   modelValue: { type: Boolean, default: false },

  269.   /** 作品项：需含 work_type 与 chat_open_id（或 id） */

  270.   work: { type: Object, default: () => ({}) },

  271. })

  272. const emit = defineEmits(['update:modelValue', 'deleted'])

  273. 

  274. const { post } = useApi()

  275. const toast = useToast()

  276. 

  277. const loading = ref(false)

  278. const deleting = ref(false)

  279. const errorMsg = ref('')

  280. const detail = ref({})

  281. const compareOpen = ref(false)

  282. const comparePercent = ref(50)

  283. const compareSurface = ref(null)

  284. let compareDragging = false

  285. 

  286. const isName = computed(() => props.work?.work_type === 'ainame')

  287. const isPhoto = computed(() => props.work?.work_type === 'photo')

  288. const isOldPhoto = computed(() => props.work?.work_type === 'oldphoto')

  289. const isPortrait = computed(() => props.work?.work_type === 'portrait')

  290. 

  291. /**

  292.  * 状态归一。

  293.  * 老照片与形象照任务用的是自己的一套状态（10排队 20处理中 30成功 -10失败 -20审核不通过），

  294.  * 这里换算成作品列表通用的 0生成中 / 1完成 / -1失败，避免详情加载完还一直显示「生成中」。

  295.  */

  296. const statusValue = computed(() => {

  297.   if ((isOldPhoto.value || isPortrait.value) && detail.value.status !== undefined) {

  298.     const status = Number(detail.value.status)

  299.     if (status === 30) return 1

  300.     return status < 0 ? -1 : 0

  301.   }

  302.   return Number(detail.value.is_suc ?? props.work?.status ?? 0)

  303. })

  304. const isPending = computed(() => statusValue.value === 0)

  305. const isFailed = computed(() => statusValue.value < 0)

  306. const resultLabel = computed(() => {

  307.   if (isPhoto.value) return '证件照'

  308.   if (isOldPhoto.value) return '修复结果'

  309.   return '生成结果'

  310. })

  311. const compareTitle = computed(() => {

  312.   if (isPhoto.value) return '证件照效果对比'

  313.   if (isOldPhoto.value) return '老照片修复对比'

  314.   if (isPortrait.value) return '形象照效果对比'

  315.   return '动漫头像效果对比'

  316. })

  317. 

  318. /** 形象照一单可能有多张图，详情里支持切换，切换后对比与下载都跟着走 */

  319. const portraitUrls = computed(() => {

  320.   if (!isPortrait.value) return []

  321.   const urls = detail.value.result_urls || props.work?.pic_list || []

  322.   return Array.isArray(urls) ? urls.filter(Boolean) : []

  323. })

  324. const activePortraitIndex = ref(0)

  325. const activePortraitUrl = computed(

  326.   () => portraitUrls.value[activePortraitIndex.value] || portraitUrls.value[0] || '',

  327. )

  328. const imageAspectStyle = computed(() => {

  329.   if (!isPhoto.value) return {}

  330.   const width = Number(detail.value.width || props.work?.width || 0)

  331.   const height = Number(detail.value.height || props.work?.height || 0)

  332.   return width > 0 && height > 0

  333.     ? { aspectRatio: `${width} / ${height}` }

  334.     : { aspectRatio: '5 / 7' }

  335. })

  336. 

  337. const headerTitle = computed(() => {

  338.   const map = {

  339.     ainame: 'AI 取名详情',

  340.     anime: '动漫头像详情',

  341.     photo: '证件照详情',

  342.     oldphoto: '老照片详情',

  343.     portrait: '形象照详情',

  344.     image: '作品详情',

  345.   }

  346.   return map[props.work?.work_type] || '作品详情'

  347. })

  348. 

  349. const addTimeText = computed(() => {

  350.   const t = detail.value.add_time || props.work?.add_time

  351.   return t ? dayjs(Number(t) * 1000).format('YYYY-MM-DD HH:mm') : ''

  352. })

  353. 

  354. const nameResult = computed(() => {

  355.   if (!isName.value) return { summary: '', names: [] }

  356.   // 优先用后端结构化的 detail，其次解析 content 文本

  357.   const d = detail.value.detail

  358.   if (d && Array.isArray(d.names) && d.names.length) {

  359.     return { summary: d.summary || '', names: d.names }

  360.   }

  361.   return parseNameResult(detail.value.content || '')

  362. })

  363. 

  364. const imageUrl = computed(() =>

  365.   (isPortrait.value ? activePortraitUrl.value : '')

  366.   || detail.value.answer

  367.   || detail.value.result_url

  368.   || detail.value.url

  369.   || (!isName.value ? detail.value.content : '')

  370.   || props.work?.cover

  371.   || (!isName.value ? props.work?.content : '')

  372.   || '')

  373. const originalUrl = computed(() => {

  374.   const imgs = detail.value.original

  375.     || detail.value.original_url

  376.     || detail.value.original_imgs

  377.     || detail.value.imgs

  378.     || detail.value.img

  379.     || props.work?.original

  380.     || props.work?.original_url

  381.     || props.work?.imgs

  382.     || props.work?.img

  383.     || ''

  384.   if (Array.isArray(imgs)) return imgs[0] || ''

  385.   return typeof imgs === 'string' && imgs ? imgs.split(',')[0] : ''

  386. })

  387. const canCompare = computed(() =>

  388.   !isName.value

  389.   && !isPhoto.value

  390.   && Boolean(originalUrl.value && imageUrl.value)

  391.   && !isPending.value

  392.   && !isFailed.value)

  393. const canDelete = computed(() => Boolean(resolveWorkId()))

  394. 

  395. function resolveWorkId() {

  396.   return props.work?.photo_open_id || props.work?.chat_open_id || props.work?.id || ''

  397. }

  398. 

  399. async function load() {

  400.   const id = resolveWorkId()

  401.   if (!id) {

  402.     errorMsg.value = '缺少作品标识'

  403.     return

  404.   }

  405.   loading.value = true

  406.   errorMsg.value = ''

  407.   try {

  408.     let path = isName.value ? '/ainame/getdetail' : '/anime/getdetail'

  409.     let body = { chat_open_id: id }

  410.     if (isPhoto.value) {

  411.       path = '/idphoto/getdetail'

  412.       body = { photo_open_id: id }

  413.     }

  414.     if (isOldPhoto.value) {

  415.       path = '/oldphoto/getdetail'

  416.       body = { photo_open_id: id }

  417.     }

  418.     if (isPortrait.value) {

  419.       path = '/portrait/getdetail'

  420.       body = { photo_open_id: id }

  421.     }

  422.     const res = await post(path, body)

  423.     detail.value = res.data || {}

  424.     // 还在处理中就继续拉：老照片是异步任务，弹窗里也要能等到结果

  425.     schedulePendingReload()

  426.   } catch (e) {

  427.     errorMsg.value = e.message || '详情加载失败'

  428.   } finally {

  429.     loading.value = false

  430.   }

  431. }

  432. 

  433. function getDeleteRequest() {

  434.   const id = resolveWorkId()

  435.   if (!id) return null

  436.   if (isPhoto.value) return { path: '/idphoto/del', body: { photo_open_id: id } }

  437.   if (isOldPhoto.value) return { path: '/oldphoto/del', body: { photo_open_id: id } }

  438.   if (isPortrait.value) return { path: '/portrait/del', body: { photo_open_id: id } }

  439.   if (isName.value) return { path: '/ainame/del', body: { chat_open_id: id } }

  440.   if (props.work?.work_type === 'anime') return { path: '/anime/del', body: { chat_open_id: id } }

  441.   return { path: '/chat/del', body: { chat_open_id: id } }

  442. }

  443. 

  444. async function deleteRecord() {

  445.   const req = getDeleteRequest()

  446.   if (!req || deleting.value) return

  447.   if (!window.confirm('确认删除该作品记录？删除后将不再展示。')) return

  448.   deleting.value = true

  449.   try {

  450.     await post(req.path, req.body)

  451.     toast.add({ title: '删除成功', color: 'success' })

  452.     emit('deleted', props.work)

  453.     close()

  454.   } catch (e) {

  455.     toast.add({ title: e.message || '删除失败', color: 'error' })

  456.   } finally {

  457.     deleting.value = false

  458.   }

  459. }

  460. 

  461. let pendingTimer = null

  462. function schedulePendingReload() {

  463.   clearPendingReload()

  464.   if (!props.modelValue || !isPending.value) return

  465.   pendingTimer = setTimeout(() => load(), 3000)

  466. }

  467. function clearPendingReload() {

  468.   if (pendingTimer) clearTimeout(pendingTimer)

  469.   pendingTimer = null

  470. }

  471. onUnmounted(() => clearPendingReload())

  472. 

  473. function close() {

  474.   closeCompare()

  475.   clearPendingReload()

  476.   emit('update:modelValue', false)

  477. }

  478. 

  479. function openCompare() {

  480.   if (!canCompare.value) {

  481.     toast.add({ title: '当前作品缺少原图或结果图', color: 'error' })

  482.     return

  483.   }

  484.   comparePercent.value = 50

  485.   compareOpen.value = true

  486. }

  487. 

  488. function closeCompare() {

  489.   compareOpen.value = false

  490.   stopCompareDrag()

  491. }

  492. 

  493. function startCompareDrag(event) {

  494.   if (!compareSurface.value) return

  495.   compareDragging = true

  496.   updateComparePercent(event)

  497.   window.addEventListener('pointermove', moveCompareDrag)

  498.   window.addEventListener('pointerup', stopCompareDrag)

  499.   window.addEventListener('pointercancel', stopCompareDrag)

  500. }

  501. 

  502. function moveCompareDrag(event) {

  503.   if (!compareDragging) return

  504.   if (event.cancelable) event.preventDefault()

  505.   updateComparePercent(event)

  506. }

  507. 

  508. function stopCompareDrag() {

  509.   compareDragging = false

  510.   window.removeEventListener('pointermove', moveCompareDrag)

  511.   window.removeEventListener('pointerup', stopCompareDrag)

  512.   window.removeEventListener('pointercancel', stopCompareDrag)

  513. }

  514. 

  515. function updateComparePercent(event) {

  516.   if (!compareSurface.value) return

  517.   const rect = compareSurface.value.getBoundingClientRect()

  518.   const percent = ((Number(event.clientX) - rect.left) / rect.width) * 100

  519.   comparePercent.value = Math.max(2, Math.min(98, Number(percent.toFixed(1))))

  520. }

  521. 

  522. function copyNames() {

  523.   const text = buildNameCopyText(nameResult.value)

  524.   if (!text) {

  525.     toast.add({ title: '暂无可复制内容', color: 'error' })

  526.     return

  527.   }

  528.   navigator.clipboard.writeText(text)

  529.     .then(() => toast.add({ title: '复制成功', color: 'success' }))

  530.     .catch(() => toast.add({ title: '复制失败', color: 'error' }))

  531. }

  532. 

  533. // 打开时加载详情

  534. watch(() => props.modelValue, (open) => {

  535.   if (open) {

  536.     detail.value = {}

  537.     compareOpen.value = false

  538.     activePortraitIndex.value = 0

  539.     load()

  540.   } else {

  541.     closeCompare()

  542.     clearPendingReload()

  543.   }

  544. })

  545. 

  546. onBeforeUnmount(stopCompareDrag)

  547. </script>

  548. 

  549. <style scoped>

  550. .wd-modal-enter-active,

  551. .wd-modal-leave-active { transition: opacity 0.2s ease; }

  552. .wd-modal-enter-from,

  553. .wd-modal-leave-to { opacity: 0; }

  554. 

  555. .detail-scroll {

  556.   scrollbar-width: none;

  557.   -ms-overflow-style: none;

  558. }

  559. .detail-scroll::-webkit-scrollbar { display: none; }

  560. 

  561. @media (prefers-reduced-motion: reduce) {

  562.   .wd-modal-enter-active,

  563.   .wd-modal-leave-active { transition: none; }

  564. }

  565. </style>