leiyun
/
pc_nuxt
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
2 Incheckningar
1 Gren
586 KiB
 
 
 
 
Träd: 64b466469e
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '64b466469e'
${ noResults }
pc_nuxt/app/components/WorkDetailModal.vue

522 rader
22 KiB
Rå Blame Historik 

  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="canCompare"

  165.               type="button"

  166.               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"

  167.               @click="openCompare"

  168.             >

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

  170.               对比效果

  171.             </button>

  172.             <button

  173.               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)]"

  174.               @click="close"

  175.             >

  176.               关闭

  177.             </button>

  178.             <button

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

  180.               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)]"

  181.               @click="copyNames"

  182.             >

  183.               复制结果

  184.             </button>

  185.             <a

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

  187.               :href="imageUrl"

  188.               target="_blank"

  189.               rel="noopener"

  190.               download

  191.               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)]"

  192.             >

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

  194.             </a>

  195.           </div>

  196.         </div>

  197.       </div>

  198.     </Transition>

  199. 

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

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

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

  203.         <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]">

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

  205.             <div>

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

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

  208.             </div>

  209.             <button

  210.               type="button"

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

  212.               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)]"

  213.               @click="closeCompare"

  214.             >

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

  216.             </button>

  217.           </div>

  218. 

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

  220.             <div

  221.               ref="compareSurface"

  222.               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)]"

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

  224.               :style="imageAspectStyle"

  225.               @pointerdown="startCompareDrag"

  226.             >

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

  228.               <img

  229.                 :src="originalUrl"

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

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

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

  233.                 alt="原图"

  234.               >

  235.               <div

  236.                 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)]"

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

  238.               >

  239.                 <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)]">

  240.                   <span>‹</span><span>›</span>

  241.                 </div>

  242.               </div>

  243.               <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>

  244.               <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>

  245.             </div>

  246.           </div>

  247.         </div>

  248.       </div>

  249.     </Transition>

  250.   </Teleport>

  251. </template>

  252. 

  253. <script setup>

  254. import dayjs from 'dayjs'

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

  256. 

  257. const props = defineProps({

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

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

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

  261. })

  262. const emit = defineEmits(['update:modelValue'])

  263. 

  264. const { post } = useApi()

  265. const toast = useToast()

  266. 

  267. const loading = ref(false)

  268. const errorMsg = ref('')

  269. const detail = ref({})

  270. const compareOpen = ref(false)

  271. const comparePercent = ref(50)

  272. const compareSurface = ref(null)

  273. let compareDragging = false

  274. 

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

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

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

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

  279. 

  280. /**

  281.  * 状态归一。

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

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

  284.  */

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

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

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

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

  289.     return status < 0 ? -1 : 0

  290.   }

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

  292. })

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

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

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

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

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

  298.   return '生成结果'

  299. })

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

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

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

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

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

  305. })

  306. 

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

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

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

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

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

  312. })

  313. const activePortraitIndex = ref(0)

  314. const activePortraitUrl = computed(

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

  316. )

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

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

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

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

  321.   return width > 0 && height > 0

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

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

  324. })

  325. 

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

  327.   const map = {

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

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

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

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

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

  333.     image: '作品详情',

  334.   }

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

  336. })

  337. 

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

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

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

  341. })

  342. 

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

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

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

  346.   const d = detail.value.detail

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

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

  349.   }

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

  351. })

  352. 

  353. const imageUrl = computed(() =>

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

  355.   || detail.value.answer

  356.   || detail.value.result_url

  357.   || detail.value.url

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

  359.   || props.work?.cover

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

  361.   || '')

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

  363.   const imgs = detail.value.original

  364.     || detail.value.original_url

  365.     || detail.value.original_imgs

  366.     || detail.value.imgs

  367.     || detail.value.img

  368.     || props.work?.original

  369.     || props.work?.original_url

  370.     || props.work?.imgs

  371.     || props.work?.img

  372.     || ''

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

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

  375. })

  376. const canCompare = computed(() =>

  377.   !isName.value

  378.   && !isPhoto.value

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

  380.   && !isPending.value

  381.   && !isFailed.value)

  382. 

  383. async function load() {

  384.   const id = props.work?.photo_open_id || props.work?.chat_open_id || props.work?.id

  385.   if (!id) {

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

  387.     return

  388.   }

  389.   loading.value = true

  390.   errorMsg.value = ''

  391.   try {

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

  393.     let body = { chat_open_id: id }

  394.     if (isPhoto.value) {

  395.       path = '/idphoto/getdetail'

  396.       body = { photo_open_id: id }

  397.     }

  398.     if (isOldPhoto.value) {

  399.       path = '/oldphoto/getdetail'

  400.       body = { photo_open_id: id }

  401.     }

  402.     if (isPortrait.value) {

  403.       path = '/portrait/getdetail'

  404.       body = { photo_open_id: id }

  405.     }

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

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

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

  409.     schedulePendingReload()

  410.   } catch (e) {

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

  412.   } finally {

  413.     loading.value = false

  414.   }

  415. }

  416. 

  417. let pendingTimer = null

  418. function schedulePendingReload() {

  419.   clearPendingReload()

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

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

  422. }

  423. function clearPendingReload() {

  424.   if (pendingTimer) clearTimeout(pendingTimer)

  425.   pendingTimer = null

  426. }

  427. onUnmounted(() => clearPendingReload())

  428. 

  429. function close() {

  430.   closeCompare()

  431.   clearPendingReload()

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

  433. }

  434. 

  435. function openCompare() {

  436.   if (!canCompare.value) {

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

  438.     return

  439.   }

  440.   comparePercent.value = 50

  441.   compareOpen.value = true

  442. }

  443. 

  444. function closeCompare() {

  445.   compareOpen.value = false

  446.   stopCompareDrag()

  447. }

  448. 

  449. function startCompareDrag(event) {

  450.   if (!compareSurface.value) return

  451.   compareDragging = true

  452.   updateComparePercent(event)

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

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

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

  456. }

  457. 

  458. function moveCompareDrag(event) {

  459.   if (!compareDragging) return

  460.   if (event.cancelable) event.preventDefault()

  461.   updateComparePercent(event)

  462. }

  463. 

  464. function stopCompareDrag() {

  465.   compareDragging = false

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

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

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

  469. }

  470. 

  471. function updateComparePercent(event) {

  472.   if (!compareSurface.value) return

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

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

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

  476. }

  477. 

  478. function copyNames() {

  479.   const text = buildNameCopyText(nameResult.value)

  480.   if (!text) {

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

  482.     return

  483.   }

  484.   navigator.clipboard.writeText(text)

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

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

  487. }

  488. 

  489. // 打开时加载详情

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

  491.   if (open) {

  492.     detail.value = {}

  493.     compareOpen.value = false

  494.     activePortraitIndex.value = 0

  495.     load()

  496.   } else {

  497.     closeCompare()

  498.     clearPendingReload()

  499.   }

  500. })

  501. 

  502. onBeforeUnmount(stopCompareDrag)

  503. </script>

  504. 

  505. <style scoped>

  506. .wd-modal-enter-active,

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

  508. .wd-modal-enter-from,

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

  510. 

  511. .detail-scroll {

  512.   scrollbar-width: none;

  513.   -ms-overflow-style: none;

  514. }

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

  516. 

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

  518.   .wd-modal-enter-active,

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

  520. }

  521. </style>