leiyun
/
pc_nuxt
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
12 Commitit
1 Haara
586 KiB
 
 
 
 
Puu: 246874ad4e
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '246874ad4e'
${ noResults }
pc_nuxt/app/pages/old-photo.vue

718 rivejä
31 KiB
Raaka Blame Historia 

  1. <template>

  2.   <div class="min-h-screen bg-[var(--c-f3f7fb)]">

  3.     <!-- ========== Hero ========== -->

  4.     <AppHero

  5.       kicker="OLD PHOTO RESTORE"

  6.       title="老照片修复 / 上色"

  7.       desc="黑白、泛黄、模糊、有划痕的照片都能修。AI 会重绘上色，五官可能有轻微变化。"

  8.     >

  9.       <template #actions>

  10.         <button

  11.           v-if="hasDemo"

  12.           type="button"

  13.           class="h-10 cursor-pointer rounded-full bg-[var(--c-0b8cff)] px-5 text-sm font-extrabold text-white shadow-[0_10px_20px_var(--sh-11-140-255-220)] transition-colors hover:bg-[var(--c-0a7ce0)] lg:h-11"

  14.           @click="openDemoCompare"

  15.         >

  16.           查看对比

  17.         </button>

  18.         <button

  19.           type="button"

  20.           class="h-10 cursor-pointer rounded-full bg-[var(--c-ffffff)] px-5 text-sm font-extrabold text-[var(--c-0b8cff)] shadow-sm transition-colors hover:bg-[var(--c-f7faff)] lg:h-11"

  21.           @click="triggerUpload"

  22.         >

  23.           上传照片

  24.         </button>

  25.         <button

  26.           type="button"

  27.           class="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-[var(--c-ffffff)] px-5 text-sm font-extrabold text-[var(--c-5b6b80)] shadow-sm transition-colors hover:bg-[var(--c-f7faff)] lg:h-11"

  28.           @click="historyOpen = true"

  29.         >

  30.           <UIcon name="i-lucide-history" class="size-4" />

  31.           历史记录

  32.         </button>

  33.       </template>

  34.       <template #aside>

  35.         <HeroComparePreview

  36.           v-if="hasDemo"

  37.           :before="demoPair.original"

  38.           :after="demoPair.result"

  39.           after-label="修复"

  40.           @open="openDemoCompare"

  41.         />

  42.       </template>

  43.     </AppHero>

  44. 

  45.     <!-- ========== Main Grid ========== -->

  46.     <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:py-8">

  47.       <div class="lg:grid lg:grid-cols-12 lg:gap-8">

  48.         <!-- ===== LEFT: 表单 ===== -->

  49.         <div class="space-y-5 pb-28 lg:col-span-7 lg:pb-0">

  50.           <!-- 1. 上传 -->

  51.           <div class="rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-[0_10px_28px_var(--sh-32-56-92-50)] lg:p-6">

  52.             <div class="mb-4 flex items-start justify-between gap-4">

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

  54.                 <h3 class="text-base font-extrabold text-[var(--c-172033)] lg:text-lg">老照片</h3>

  55.                 <p class="mt-1 text-xs text-[var(--c-8a97a8)]">支持黑白、泛黄、模糊、划痕或破损照片，单张不超过 10M</p>

  56.               </div>

  57.               <span class="flex-shrink-0 rounded-full bg-[var(--c-fff1f1)] px-3 py-1 text-[11px] font-bold text-[var(--c-ff6b6b)]">必选</span>

  58.             </div>

  59. 

  60.             <div

  61.               class="flex cursor-pointer items-center gap-4 rounded-2xl border-2 border-[var(--c-e5edf7)] bg-[var(--c-f7faff)] p-4 transition-colors hover:border-[var(--c-1f8cff)]/40"

  62.               role="button"

  63.               tabindex="0"

  64.               @click="triggerUpload"

  65.               @keydown.enter.prevent="triggerUpload"

  66.               @keydown.space.prevent="triggerUpload"

  67.               @dragover.prevent

  68.               @drop.prevent="onDrop"

  69.             >

  70.               <div class="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-2xl bg-[var(--c-edf3fb)]">

  71.                 <img v-if="previewImage" :src="previewImage" class="h-full w-full object-cover" alt="已选照片预览">

  72.                 <div v-else class="flex h-full w-full items-center justify-center">

  73.                   <span class="flex size-9 items-center justify-center rounded-full bg-[var(--c-1f8cff)] text-2xl font-light text-white">+</span>

  74.                 </div>

  75.               </div>

  76.               <div class="min-w-0 flex-1">

  77.                 <div class="text-sm font-extrabold text-[var(--c-172033)] lg:text-base">{{ previewImage ? '已选择照片' : '选择需要修复的老照片' }}</div>

  78.                 <div class="mt-1.5 text-xs text-[var(--c-8a97a8)]">建议主体清晰、人物未被严重遮挡；也可以直接把文件拖进来</div>

  79.               </div>

  80.               <div class="flex h-9 w-16 flex-shrink-0 items-center justify-center rounded-full bg-[var(--c-1f8cff)] text-xs font-extrabold text-white">

  81.                 {{ previewImage ? '更换' : '上传' }}

  82.               </div>

  83.             </div>

  84.             <input ref="fileInput" type="file" accept="image/*" class="hidden" aria-label="选择老照片" @change="onFileChange">

  85. 

  86.             <div class="mt-3 flex flex-wrap gap-2.5">

  87.               <span class="rounded-full bg-[var(--c-f1f5fa)] px-3 py-1 text-[11px] font-bold text-[var(--c-526174)]">黑白照片</span>

  88.               <span class="rounded-full bg-[var(--c-f1f5fa)] px-3 py-1 text-[11px] font-bold text-[var(--c-526174)]">泛黄褪色</span>

  89.               <span class="rounded-full bg-[var(--c-f1f5fa)] px-3 py-1 text-[11px] font-bold text-[var(--c-526174)]">划痕破损</span>

  90.             </div>

  91.           </div>

  92. 

  93.           <!-- 2. 修复档位 -->

  94.           <div class="rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-[0_10px_28px_var(--sh-32-56-92-50)] lg:p-6">

  95.             <div class="flex items-start justify-between gap-4">

  96.               <h3 class="text-base font-extrabold text-[var(--c-172033)] lg:text-lg">修复档位</h3>

  97.               <span class="mt-1 text-xs text-[var(--c-8a97a8)]">按张计费</span>

  98.             </div>

  99. 

  100.             <!-- 加载骨架：>300ms 的等待都要有反馈 -->

  101.             <div v-if="configLoading" class="mt-4 space-y-2.5">

  102.               <div v-for="i in 3" :key="i" class="h-[76px] animate-pulse rounded-2xl bg-[var(--c-f1f5fa)]" />

  103.             </div>

  104. 

  105.             <div v-else class="mt-4 space-y-2.5">

  106.               <button

  107.                 v-for="item in modes"

  108.                 :key="item.key"

  109.                 type="button"

  110.                 class="flex w-full cursor-pointer items-center gap-4 rounded-2xl border-2 p-4 text-left transition-colors"

  111.                 :class="activeMode === item.key

  112.                   ? 'border-[var(--c-1f8cff)] bg-[var(--c-eef7ff)]'

  113.                   : 'border-transparent bg-[var(--c-f6f9fd)] hover:border-[var(--c-e5edf7)]'"

  114.                 :aria-pressed="activeMode === item.key"

  115.                 @click="activeMode = item.key"

  116.               >

  117.                 <span

  118.                   class="flex size-5 flex-shrink-0 items-center justify-center rounded-full border-2 transition-colors"

  119.                   :class="activeMode === item.key ? 'border-[var(--c-1f8cff)]' : 'border-[var(--c-c3cddb)]'"

  120.                 >

  121.                   <span v-if="activeMode === item.key" class="size-2.5 rounded-full bg-[var(--c-1f8cff)]" />

  122.                 </span>

  123.                 <span class="min-w-0 flex-1">

  124.                   <span class="block text-sm font-extrabold text-[var(--c-172033)]">{{ item.name }}</span>

  125.                   <span class="mt-1 block text-xs leading-relaxed text-[var(--c-8a97a8)]">{{ item.desc }}</span>

  126.                 </span>

  127.                 <span class="flex-shrink-0 text-sm font-extrabold text-[var(--c-0b8cff)]">{{ item.points }}点</span>

  128.               </button>

  129.             </div>

  130.           </div>

  131. 

  132.           <!-- 3. 补充说明 -->

  133.           <div class="rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-[0_10px_28px_var(--sh-32-56-92-50)] lg:p-6">

  134.             <div class="flex items-start justify-between gap-4">

  135.               <h3 class="text-base font-extrabold text-[var(--c-172033)] lg:text-lg">补充说明</h3>

  136.               <span class="mt-1 text-xs text-[var(--c-8a97a8)]">选填</span>

  137.             </div>

  138.             <label class="mt-4 block text-xs font-bold text-[var(--c-526174)]" for="old-photo-extra">照片里的事实信息</label>

  139.             <input

  140.               id="old-photo-extra"

  141.               v-model="extraPrompt"

  142.               type="text"

  143.               maxlength="100"

  144.               placeholder="例如：军装是绿色的、背景是老家的院子"

  145.               class="mt-2 h-12 w-full rounded-xl bg-[var(--c-f6f9fd)] px-4 text-sm text-[var(--c-172033)] placeholder:text-[var(--c-a0aabb)] focus:outline-none focus:ring-2 focus:ring-[var(--c-1f8cff)]/30"

  146.             >

  147.             <p class="mt-2 text-xs text-[var(--c-8a97a8)]">只用来补充客观信息，不要写风格化描述，避免影响人物还原。</p>

  148.           </div>

  149. 

  150.           <!-- 4. 说明 -->

  151.           <div class="space-y-3 rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-[0_10px_28px_var(--sh-32-56-92-50)] lg:p-6">

  152.             <div v-for="(tip, index) in tips" :key="tip" class="flex items-start">

  153.               <span class="mr-3 mt-0.5 flex h-5 w-7 flex-shrink-0 items-center justify-center rounded-[14px] bg-[var(--c-eef7ff)] text-[11px] font-extrabold text-[var(--c-1f8cff)]">

  154.                 {{ String(index + 1).padStart(2, '0') }}

  155.               </span>

  156.               <span class="text-sm leading-relaxed text-[var(--c-5f6f83)]">{{ tip }}</span>

  157.             </div>

  158.           </div>

  159. 

  160.           <!-- Desktop 提交 -->

  161.           <div class="hidden items-center gap-3 rounded-2xl bg-[var(--c-ffffff)] p-4 shadow-[0_10px_28px_var(--sh-32-56-92-50)] lg:flex">

  162.             <div class="min-w-0 flex-1">

  163.               <div class="whitespace-nowrap text-sm font-bold text-[var(--c-172033)]">{{ balanceText }}</div>

  164.               <button v-if="isBalanceInsufficient" type="button" class="mt-1 cursor-pointer text-xs text-[var(--c-f04438)] hover:underline" @click="goRecharge">

  165.                 点数不足，前往充值

  166.               </button>

  167.             </div>

  168.             <button

  169.               type="button"

  170.               class="flex h-14 flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-[var(--c-e5edf7)] px-6 text-sm font-bold text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-f7f9fd)]"

  171.               @click="historyOpen = true"

  172.             >

  173.               <UIcon name="i-lucide-history" class="size-4" />

  174.               历史记录

  175.             </button>

  176.             <button

  177.               type="button"

  178.               class="flex h-14 min-w-[168px] flex-shrink-0 cursor-pointer items-center justify-center rounded-full px-10 text-base font-bold text-white shadow-[0_12px_24px_var(--sh-31-140-255-280)] transition-all disabled:cursor-not-allowed disabled:opacity-50"

  179.               :class="submitting ? 'bg-[var(--c-1979e6)]' : 'bg-gradient-to-r from-[var(--c-1f8cff)] to-[var(--c-41b9ff)] hover:opacity-90'"

  180.               :disabled="!canSubmit"

  181.               @click="handleSubmit"

  182.             >

  183.               <UIcon v-if="!submitting" name="i-lucide-zap" class="mr-1.5 size-4" />

  184.               <span>{{ submitting ? '提交中...' : submitText }}</span>

  185.             </button>

  186.           </div>

  187.         </div>

  188. 

  189.         <!-- ===== RIGHT: 结果 ===== -->

  190.         <div class="lg:col-span-5">

  191.           <div class="space-y-4 lg:sticky lg:top-20">

  192.             <!-- 空态 -->

  193.             <div v-if="!resultState.visible" class="flex min-h-[300px] flex-col items-center justify-center rounded-2xl bg-[var(--c-ffffff)] p-8 text-center shadow-sm lg:p-10">

  194.               <UIcon name="i-lucide-image" class="mb-4 size-12 text-[var(--c-a0aabb)]" />

  195.               <div class="mb-1 text-base font-medium text-[var(--c-172033)]">等待修复</div>

  196.               <div class="text-sm text-[var(--c-a0aabb)]">上传老照片并选择档位后</div>

  197.               <div class="text-sm text-[var(--c-a0aabb)]">点击"立即修复"即可看到效果</div>

  198.             </div>

  199. 

  200.             <!-- 处理中 -->

  201.             <div v-if="resultState.loading" class="rounded-2xl bg-[var(--c-ffffff)] p-6 shadow-sm lg:p-8">

  202.               <div class="mb-1 text-base font-bold text-[var(--c-172033)]">{{ pendingTitle }}</div>

  203.               <div class="mb-6 text-sm text-[var(--c-7f8896)]">混元生图未购买并发，高峰期会排队，请耐心等待</div>

  204.               <div class="flex flex-col items-center rounded-2xl bg-[var(--c-f7f9fd)] py-10">

  205.                 <div class="mb-4 flex gap-1.5">

  206.                   <span class="animate-pulse-dot size-2.5 rounded-full bg-[var(--c-1f8cff)]" />

  207.                   <span class="animate-pulse-dot2 size-2.5 rounded-full bg-[var(--c-1f8cff)]" />

  208.                   <span class="animate-pulse-dot3 size-2.5 rounded-full bg-[var(--c-1f8cff)]" />

  209.                 </div>

  210.                 <div class="text-sm font-bold text-[var(--c-172033)]">已等待 {{ waitedSeconds }}s</div>

  211.                 <div v-if="pollCountdown > 0" class="mt-2 text-xs text-[var(--c-8a95a6)]">下次刷新 {{ pollCountdown }}s</div>

  212.               </div>

  213.             </div>

  214. 

  215.             <!-- 失败 -->

  216.             <div v-if="resultState.error" class="rounded-2xl bg-[var(--c-ffffff)] p-6 py-10 text-center shadow-sm lg:p-8">

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

  218.               <div class="mb-2 text-base font-medium text-[var(--c-f04438)]">修复失败</div>

  219.               <div class="mb-4 text-sm text-[var(--c-7f8896)]">{{ resultState.errorMsg }}</div>

  220.               <UButton color="primary" variant="outline" size="sm" @click="handleSubmit">重试</UButton>

  221.             </div>

  222. 

  223.             <!-- 成功 -->

  224.             <div v-if="resultState.success" class="space-y-4">

  225.               <div class="rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-sm lg:p-6">

  226.                 <div class="mb-4 flex items-center justify-between gap-3">

  227.                   <div class="text-base font-bold text-[var(--c-172033)]">修复结果</div>

  228.                   <span class="rounded-full bg-[var(--c-edfdf4)] px-2.5 py-1 text-[11px] font-extrabold text-[var(--c-159a54)]">{{ job.mode_name }}</span>

  229.                 </div>

  230.                 <!-- 主视图直接看成品，对比放进弹层 -->

  231.                 <div class="overflow-hidden rounded-xl bg-[var(--c-f7f9fd)]">

  232.                   <img :src="job.result_url" class="w-full" alt="老照片修复结果">

  233.                 </div>

  234.                 <div class="mt-5 flex gap-3">

  235.                   <button

  236.                     type="button"

  237.                     class="flex h-12 flex-1 cursor-pointer items-center justify-center rounded-full border-2 border-[var(--c-1f8cff)] font-bold text-[var(--c-1f8cff)] transition-colors hover:bg-[var(--c-eef7ff)]"

  238.                     @click="openResultCompare"

  239.                   >

  240.                     <UIcon name="i-lucide-columns-2" class="mr-1.5 size-4" />

  241.                     查看对比

  242.                   </button>

  243.                   <button

  244.                     type="button"

  245.                     class="flex h-12 flex-1 cursor-pointer items-center justify-center rounded-full bg-[var(--c-1f8cff)] text-base font-bold text-white shadow-[0_8px_20px_var(--sh-31-140-255-200)] transition-colors hover:bg-[var(--c-1979e6)]"

  246.                     @click="downloadResult"

  247.                   >

  248.                     <UIcon name="i-lucide-download" class="mr-1.5 size-4" />

  249.                     下载

  250.                   </button>

  251.                 </div>

  252.               </div>

  253.               <button

  254.                 type="button"

  255.                 class="h-12 w-full cursor-pointer rounded-full border-2 border-[var(--c-1f8cff)] font-bold text-[var(--c-1f8cff)] transition-colors hover:bg-[var(--c-eef7ff)]"

  256.                 @click="resetJob"

  257.               >

  258.                 再修一张

  259.               </button>

  260.               <p class="text-center text-xs leading-relaxed text-[var(--c-8a97a8)]">

  261.                 AI 会重绘上色，五官可能出现轻微变化，建议对照原图确认

  262.               </p>

  263.             </div>

  264.           </div>

  265.         </div>

  266.       </div>

  267.     </div>

  268. 

  269.     <!-- ========== 移动端底部操作条 ========== -->

  270.     <div

  271.       class="fixed bottom-0 left-0 right-0 z-50 bg-[var(--c-ffffff)]/95 shadow-[0_-10px_30px_var(--sh-32-56-92-100)] backdrop-blur lg:hidden"

  272.       style="padding: 14px 16px calc(14px + env(safe-area-inset-bottom))"

  273.     >

  274.       <div class="mb-2.5 flex items-center justify-between gap-3 text-sm">

  275.         <div class="min-w-0 truncate text-[var(--c-7b8797)]">{{ balanceText }}</div>

  276.         <button v-if="isBalanceInsufficient" type="button" class="flex-shrink-0 cursor-pointer text-xs font-extrabold text-[var(--c-1f8cff)]" @click="goRecharge">

  277.           去充值

  278.         </button>

  279.       </div>

  280.       <div class="flex gap-3">

  281.         <button type="button" class="h-12 w-[120px] cursor-pointer rounded-full bg-[var(--c-eef7ff)] text-sm font-extrabold text-[var(--c-1f8cff)]" @click="historyOpen = true">

  282.           历史记录

  283.         </button>

  284.         <button

  285.           type="button"

  286.           class="flex h-12 flex-1 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-[var(--c-1f8cff)] to-[var(--c-41b9ff)] text-sm font-extrabold text-white shadow-[0_12px_24px_var(--sh-31-140-255-280)] transition-opacity disabled:opacity-60"

  287.           :disabled="!canSubmit"

  288.           @click="handleSubmit"

  289.         >

  290.           <UIcon v-if="!submitting" name="i-lucide-zap" class="mr-1.5 size-4" />

  291.           {{ submitting ? '提交中...' : submitText }}

  292.         </button>

  293.       </div>

  294.     </div>

  295. 

  296.     <!-- ========== 历史记录 / 详情 ========== -->

  297.     <WorkHistoryDrawer v-model="historyOpen" type="oldphoto" @select="openHistoryItem" />

  298.     <WorkDetailModal v-model="detailOpen" :work="currentWork" />

  299. 

  300.     <!-- ========== 对比弹层（demo 与成品共用） ========== -->

  301.     <Teleport to="body">

  302.       <Transition name="modal">

  303.         <div v-if="compareVisible" class="fixed inset-0 z-[100] flex items-center justify-center p-4">

  304.           <div class="absolute inset-0 bg-[var(--c-0f172a)]/60" @click="closeCompare" />

  305.           <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl bg-[var(--c-ffffff)] shadow-2xl">

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

  307.               <h3 class="text-base font-extrabold text-[var(--c-172033)]">{{ compareTarget === 'result' ? '修复结果对比' : '效果对比' }}</h3>

  308.               <button

  309.                 type="button"

  310.                 class="flex size-8 cursor-pointer items-center justify-center rounded-full text-2xl leading-none text-[var(--c-a0aabb)] transition-colors hover:bg-[var(--c-f3f4f6)]"

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

  312.                 @click="closeCompare"

  313.               >

  314.                 ×

  315.               </button>

  316.             </div>

  317.             <div class="p-5">

  318.               <div

  319.                 ref="largeCompareRef"

  320.                 class="relative max-h-[70vh] w-full cursor-ew-resize select-none overflow-hidden rounded-2xl bg-[var(--c-dfe8f4)]"

  321.                 style="aspect-ratio: 3 / 4"

  322.                 @mousedown="onCompareStart"

  323.                 @touchstart.passive="onCompareStart"

  324.               >

  325.                 <img :src="comparePair.after" class="pointer-events-none absolute inset-0 h-full w-full object-contain" alt="修复后">

  326.                 <img

  327.                   :src="comparePair.before"

  328.                   class="pointer-events-none absolute inset-0 h-full w-full object-contain"

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

  330.                   alt="原图"

  331.                 >

  332.                 <div

  333.                   class="pointer-events-none absolute bottom-0 top-0 -ml-px w-1 bg-[var(--c-ffffff)]/95 shadow-[0_0_12px_var(--sh-20-37-66-220)]"

  334.                   :style="{ left: comparePercent + '%' }"

  335.                 >

  336.                   <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 gap-px rounded-full bg-[var(--c-ffffff)] text-lg font-extrabold text-[var(--c-1f8cff)] shadow-[0_8px_18px_var(--sh-20-37-66-220)]">

  337.                     <span>‹</span><span>›</span>

  338.                   </div>

  339.                 </div>

  340.                 <div class="pointer-events-none absolute left-3 top-3 rounded-full bg-[var(--c-0f172a)]/50 px-2 py-0.5 text-[10px] font-bold text-white">原图</div>

  341.                 <div class="pointer-events-none absolute right-3 top-3 rounded-full bg-[var(--c-0f172a)]/50 px-2 py-0.5 text-[10px] font-bold text-white">修复后</div>

  342.               </div>

  343.               <div class="mt-3 text-center text-xs text-[var(--c-64748b)]">左右拖动中间按钮查看变化</div>

  344.             </div>

  345.           </div>

  346.         </div>

  347.       </Transition>

  348.     </Teleport>

  349.   </div>

  350. </template>

  351. 

  352. <script setup>

  353. useSeoMeta({

  354.   title: '老照片修复上色 - AI在线',

  355.   description: '上传黑白、泛黄、有划痕的老照片，AI 自动修复破损并自然上色，支持前后对比查看与原图下载。',

  356. })

  357. 

  358. const { post } = useApi()

  359. const { create: createOldPhoto, createRequestId } = useOldPhoto()

  360. const user = useUser()

  361. const router = useRouter()

  362. const toast = useToast()

  363. 

  364. const POLL_INTERVAL = 3000

  365. const POLL_LIMIT = 5 * 60 * 1000

  366. const DEMO_CONFIG_KEY = 'old_photo_demo'

  367. const APP_KEY = 'old-photo'

  368. 

  369. // ==================== State ====================

  370. const fileInput = ref(null)

  371. const selectedFile = ref(null)

  372. const previewImage = ref('')

  373. const extraPrompt = ref('')

  374. const activeMode = ref('colorize')

  375. const modes = ref([])

  376. const tips = ref([])

  377. const configLoading = ref(true)

  378. const submitting = ref(false)

  379. const balance = reactive({ points: 0 })

  380. const job = ref({})

  381. const demoPair = ref({ original: '', result: '' })

  382. const historyOpen = ref(false)

  383. const detailOpen = ref(false)

  384. const currentWork = ref({})

  385. 

  386. const resultState = ref({ visible: false, loading: false, error: false, success: false, errorMsg: '' })

  387. const pollCountdown = ref(3)

  388. const waitedSeconds = ref(0)

  389. let pollTimer = null

  390. let countTimer = null

  391. let pollStart = 0

  392. 

  393. // ==================== Computed ====================

  394. const hasDemo = computed(() => Boolean(demoPair.value.original && demoPair.value.result))

  395. const currentMode = computed(() => modes.value.find(item => item.key === activeMode.value) || {})

  396. const currentCost = computed(() => Number(currentMode.value.points || 0))

  397. const currentPoints = computed(() => Number(balance.points || 0))

  398. const isBalanceInsufficient = computed(

  399.   () => user.isLogin.value && currentCost.value > 0 && currentPoints.value < currentCost.value,

  400. )

  401. const canSubmit = computed(() => Boolean(selectedFile.value) && !submitting.value && !resultState.value.loading)

  402. const balanceText = computed(() => {

  403.   const cost = currentCost.value

  404.   if (!user.isLogin.value) return cost ? `老照片修复 · ${cost}点/张` : '老照片修复'

  405.   return cost ? `余额${currentPoints.value}点 · 预计消耗${cost}点` : `余额${currentPoints.value}点`

  406. })

  407. const submitText = computed(() => {

  408.   const cost = currentCost.value

  409.   if (!user.isLogin.value) return cost ? `登录后修复 · ${cost}点` : '登录后修复'

  410.   return cost ? `立即修复 · ${cost}点` : '立即修复'

  411. })

  412. const pendingTitle = computed(() => (Number(job.value.status) === 10 ? '排队中，等待 AI 处理' : 'AI 正在修复上色'))

  413. 

  414. function showToast(message, color = 'error') {

  415.   toast.add({ title: message, color })

  416. }

  417. 

  418. // ==================== 配置 / 示例 / 余额 ====================

  419. async function loadConfig() {

  420.   try {

  421.     const res = await post('/oldphoto/config', { mode: activeMode.value })

  422.     const data = res.data || {}

  423.     modes.value = data.modes || []

  424.     tips.value = data.tips || []

  425.     if (data.default_mode && !modes.value.some(item => item.key === activeMode.value)) {

  426.       activeMode.value = data.default_mode

  427.     }

  428.     if (data.billing?.balance) {

  429.       balance.points = data.billing.balance.points || data.billing.balance.point_balance || 0

  430.     }

  431.   } catch (e) {

  432.     showToast(e.message || '配置加载失败')

  433.   } finally {

  434.     configLoading.value = false

  435.   }

  436. }

  437. 

  438. /** 示例对比图走配置项 old_photo_demo，格式 [{ original, result }] */

  439. async function loadDemo() {

  440.   try {

  441.     const res = await post('/common/getconfig', { keys: DEMO_CONFIG_KEY })

  442.     const rows = Array.isArray(res.list) ? res.list : []

  443.     const item = rows.find(it => it.key === DEMO_CONFIG_KEY)

  444.     if (!item?.value) return

  445.     const data = typeof item.value === 'string' ? JSON.parse(item.value) : item.value

  446.     const first = Array.isArray(data) ? data[0] : data

  447.     if (!first) return

  448.     demoPair.value = {

  449.       original: first.original || first.before || first.source || '',

  450.       result: first.result || first.after || '',

  451.     }

  452.   } catch (e) {

  453.     console.error('[old-photo] loadDemo failed:', e)

  454.   }

  455. }

  456. 

  457. async function loadBalance() {

  458.   try {

  459.     const res = await post('/point/balance', {})

  460.     if (res.code === 0 && res.data) balance.points = res.data.points || res.data.point_balance || 0

  461.   } catch (e) {

  462.     console.error('[old-photo] loadBalance failed:', e)

  463.   }

  464.   user.refreshBalance()

  465. }

  466. 

  467. onMounted(() => {

  468.   loadConfig()

  469.   loadDemo()

  470.   if (user.isLogin.value) loadBalance()

  471. })

  472. onUnmounted(() => clearPoll())

  473. 

  474. // ==================== 上传 ====================

  475. function triggerUpload() {

  476.   if (!user.isLogin.value) {

  477.     user.showLogin.value = true

  478.     return

  479.   }

  480.   fileInput.value?.click()

  481. }

  482. 

  483. function onFileChange(e) {

  484.   const file = e.target.files?.[0]

  485.   if (file) handleFile(file)

  486.   e.target.value = ''

  487. }

  488. 

  489. function onDrop(e) {

  490.   if (!user.isLogin.value) {

  491.     user.showLogin.value = true

  492.     return

  493.   }

  494.   const file = e.dataTransfer?.files?.[0]

  495.   if (file) handleFile(file)

  496. }

  497. 

  498. function handleFile(file) {

  499.   if (!/^image\//.test(file.type)) return showToast('请选择图片文件')

  500.   if (file.size > 10 * 1024 * 1024) return showToast('图片不能超过 10M')

  501.   if (previewImage.value) URL.revokeObjectURL(previewImage.value)

  502.   selectedFile.value = file

  503.   previewImage.value = URL.createObjectURL(file)

  504.   resultState.value = { visible: false, loading: false, error: false, success: false, errorMsg: '' }

  505.   job.value = {}

  506. }

  507. 

  508. // ==================== 提交与轮询 ====================

  509. function clearPoll() {

  510.   clearTimeout(pollTimer)

  511.   clearInterval(countTimer)

  512.   pollTimer = null

  513.   countTimer = null

  514. }

  515. 

  516. async function handleSubmit() {

  517.   if (!user.isLogin.value) {

  518.     user.showLogin.value = true

  519.     return

  520.   }

  521.   if (!selectedFile.value) return showToast('请先上传老照片')

  522.   if (!canSubmit.value) return

  523.   if (isBalanceInsufficient.value) return showToast('点数不足，请充值后重试')

  524. 

  525.   submitting.value = true

  526.   resultState.value = { visible: true, loading: true, error: false, success: false, errorMsg: '' }

  527.   waitedSeconds.value = 0

  528.   pollStart = Date.now()

  529. 

  530.   try {

  531.     const res = await createOldPhoto(selectedFile.value, {

  532.       mode: activeMode.value,

  533.       extra_prompt: extraPrompt.value,

  534.       request_id: createRequestId(),

  535.     })

  536.     job.value = res.data || {}

  537.     if (Number(job.value.status) === 30) {

  538.       onSuccess()

  539.     } else {

  540.       startPoll()

  541.     }

  542.   } catch (e) {

  543.     const msg = e.code === 1011 ? '点数不足，请充值后重试' : (e.message || '提交失败，请稍后重试')

  544.     resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: msg }

  545.   } finally {

  546.     submitting.value = false

  547.   }

  548. }

  549. 

  550. function startPoll() {

  551.   clearPoll()

  552.   pollCountdown.value = POLL_INTERVAL / 1000

  553.   countTimer = setInterval(() => {

  554.     pollCountdown.value = Math.max(0, pollCountdown.value - 1)

  555.     waitedSeconds.value = Math.round((Date.now() - pollStart) / 1000)

  556.   }, 1000)

  557.   pollTimer = setTimeout(async () => {

  558.     if (Date.now() - pollStart > POLL_LIMIT) {

  559.       clearPoll()

  560.       resultState.value = {

  561.         visible: true,

  562.         loading: false,

  563.         error: true,

  564.         success: false,

  565.         errorMsg: '生成时间较长，可稍后从历史记录查看结果',

  566.       }

  567.       return

  568.     }

  569.     try {

  570.       const res = await post('/oldphoto/getdetail', { photo_open_id: job.value.photo_open_id })

  571.       const data = res.data || {}

  572.       job.value = data

  573.       const status = Number(data.status)

  574.       if (status === 30) {

  575.         clearPoll()

  576.         onSuccess()

  577.       } else if (status < 0) {

  578.         clearPoll()

  579.         resultState.value = {

  580.           visible: true,

  581.           loading: false,

  582.           error: true,

  583.           success: false,

  584.           errorMsg: data.error_msg || '修复失败，本次未扣点',

  585.         }

  586.       } else {

  587.         startPoll()

  588.       }

  589.     } catch (e) {

  590.       // 单次查询失败不打断轮询

  591.       startPoll()

  592.     }

  593.   }, POLL_INTERVAL)

  594. }

  595. 

  596. function onSuccess() {

  597.   resultState.value = { visible: true, loading: false, error: false, success: true, errorMsg: '' }

  598.   loadBalance()

  599. }

  600. 

  601. function resetJob() {

  602.   clearPoll()

  603.   job.value = {}

  604.   selectedFile.value = null

  605.   if (previewImage.value) URL.revokeObjectURL(previewImage.value)

  606.   previewImage.value = ''

  607.   extraPrompt.value = ''

  608.   resultState.value = { visible: false, loading: false, error: false, success: false, errorMsg: '' }

  609. }

  610. 

  611. async function downloadResult() {

  612.   if (!job.value.result_url) return

  613.   try {

  614.     const res = await fetch(job.value.result_url)

  615.     const blob = await res.blob()

  616.     const link = document.createElement('a')

  617.     link.href = URL.createObjectURL(blob)

  618.     link.download = `old-photo-${Date.now()}.jpg`

  619.     link.click()

  620.     URL.revokeObjectURL(link.href)

  621.   } catch {

  622.     window.open(job.value.result_url, '_blank')

  623.   }

  624. }

  625. 

  626. function goRecharge() {

  627.   router.push('/recharge')

  628. }

  629. 

  630. function openHistoryItem(item) {

  631.   currentWork.value = item

  632.   detailOpen.value = true

  633. }

  634. 

  635. // ==================== 对比弹层 ====================

  636. const compareVisible = ref(false)

  637. const comparePercent = ref(50)

  638. const compareTarget = ref('demo')

  639. const largeCompareRef = ref(null)

  640. let dragging = false

  641. 

  642. const comparePair = computed(() => {

  643.   if (compareTarget.value === 'result') {

  644.     return { before: job.value.source_url || previewImage.value, after: job.value.result_url }

  645.   }

  646.   return { before: demoPair.value.original, after: demoPair.value.result }

  647. })

  648. 

  649. function openDemoCompare() {

  650.   if (!hasDemo.value) return showToast('暂无对比图')

  651.   comparePercent.value = 50

  652.   compareTarget.value = 'demo'

  653.   compareVisible.value = true

  654. }

  655. 

  656. function openResultCompare() {

  657.   if (!job.value.result_url) return showToast('结果图暂不可用')

  658.   comparePercent.value = 50

  659.   compareTarget.value = 'result'

  660.   compareVisible.value = true

  661. }

  662. 

  663. function closeCompare() {

  664.   compareVisible.value = false

  665.   onCompareEnd()

  666. }

  667. 

  668. function onCompareStart(e) {

  669.   dragging = true

  670.   updateComparePercent(e.touches?.[0] || e)

  671.   window.addEventListener('mousemove', onCompareMove)

  672.   window.addEventListener('mouseup', onCompareEnd)

  673.   window.addEventListener('touchmove', onCompareMove, { passive: false })

  674.   window.addEventListener('touchend', onCompareEnd)

  675. }

  676. 

  677. function onCompareMove(e) {

  678.   if (!dragging) return

  679.   if (e.cancelable) e.preventDefault()

  680.   updateComparePercent(e.touches?.[0] || e)

  681. }

  682. 

  683. function onCompareEnd() {

  684.   dragging = false

  685.   window.removeEventListener('mousemove', onCompareMove)

  686.   window.removeEventListener('mouseup', onCompareEnd)

  687.   window.removeEventListener('touchmove', onCompareMove)

  688.   window.removeEventListener('touchend', onCompareEnd)

  689. }

  690. 

  691. function updateComparePercent(e) {

  692.   if (!largeCompareRef.value) return

  693.   const rect = largeCompareRef.value.getBoundingClientRect()

  694.   const percent = (((e.clientX || 0) - rect.left) / rect.width) * 100

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

  696. }

  697. </script>

  698. 

  699. <style scoped>

  700. .animate-pulse-dot { animation: dotPulse 1.1s ease-in-out infinite; }

  701. .animate-pulse-dot2 { animation: dotPulse 1.1s ease-in-out 0.15s infinite; }

  702. .animate-pulse-dot3 { animation: dotPulse 1.1s ease-in-out 0.3s infinite; }

  703. @keyframes dotPulse {

  704.   0%, 100% { opacity: 0.35; transform: scale(0.82); }

  705.   50% { opacity: 1; transform: scale(1); }

  706. }

  707. .modal-enter-active, .modal-leave-active { transition: opacity 0.2s ease; }

  708. .modal-enter-from, .modal-leave-to { opacity: 0; }

  709. 

  710. /* 尊重系统的减少动效设置 */

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

  712.   .animate-pulse-dot,

  713.   .animate-pulse-dot2,

  714.   .animate-pulse-dot3 { animation: none; }

  715.   .modal-enter-active, .modal-leave-active { transition: none; }

  716. }

  717. </style>