leiyun
/
pc_nuxt
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
12 коммитов
1 ветка
586 KiB
 
 
 
 
Дерево: 246874ad4e
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '246874ad4e'
${ noResults }
pc_nuxt/app/pages/id-photo.vue

1163 строки
49 KiB
Исходник Вина История 

  1. <template>

  2.   <div class="min-h-screen overflow-x-hidden bg-[var(--c-f3f7fb)] pb-24 lg:pb-12">

  3.     <AppHero

  4.       kicker="SMART ID PHOTO"

  5.       title="一张自拍，制作标准证件照"

  6.       desc="上传一张清晰正面照，自动换好底色、裁成所需尺寸，几秒获得可直接下载使用的高清证件照。"

  7.     >

  8.       <template #actions>

  9.         <button

  10.           type="button"

  11.           class="inline-flex h-10 items-center gap-2 rounded-full bg-[var(--c-0b8cff)] px-5 text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-240)] transition-colors hover:bg-[var(--c-087de5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 lg:h-11"

  12.           @click="triggerUpload"

  13.         >

  14.           <UIcon name="i-lucide-upload" class="size-4" />

  15.           上传照片

  16.         </button>

  17.         <button

  18.           type="button"

  19.           class="inline-flex h-10 items-center gap-2 rounded-full bg-[var(--c-ffffff)] px-5 text-sm font-extrabold text-[var(--c-52647b)] shadow-sm transition-colors hover:bg-[var(--c-f8fbff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] lg:h-11"

  20.           @click="openHistory"

  21.         >

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

  23.           历史记录

  24.         </button>

  25.       </template>

  26.       <template #aside>

  27.         <div class="hidden w-[390px] overflow-hidden rounded-[28px] border border-white/80 bg-[var(--c-ffffff)]/88 p-5 shadow-[0_20px_48px_var(--sh-31-62-112-130)] backdrop-blur lg:block">

  28.           <div class="flex items-center gap-5">

  29.             <div class="relative h-[145px] w-[116px] shrink-0">

  30.               <div class="absolute left-3 top-1 h-[136px] w-[102px] rotate-6 rounded-[20px] border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)]/75 shadow-sm" />

  31.               <div class="absolute inset-y-0 left-0 w-[104px] overflow-hidden rounded-[20px] border-[5px] border-[var(--c-e8eef7)] bg-[var(--c-438edb)] shadow-[0_14px_28px_var(--sh-44-104-168-240)]">

  32.                 <img

  33.                   src="https://cdn.aionline.cc/ai/anime/id-photo-demo.jpg"

  34.                   alt="蓝底标准证件照效果示例"

  35.                   width="295"

  36.                   height="413"

  37.                   class="h-full w-full object-cover"

  38.                   loading="eager"

  39.                   decoding="async"

  40.                   fetchpriority="high"

  41.                 >

  42.                 <span class="absolute left-2 top-2 rounded-full bg-[var(--c-ffffff)]/90 px-2 py-1 text-[9px] font-extrabold text-[var(--c-0b8cff)]">一寸</span>

  43.               </div>

  44.               <span class="absolute bottom-0 right-0 flex size-8 items-center justify-center rounded-full border-4 border-[var(--c-e8eef7)] bg-[var(--c-19ad72)] text-white shadow-md">

  45.                 <UIcon name="i-lucide-check" class="size-4" />

  46.               </span>

  47.             </div>

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

  49.               <span class="inline-flex rounded-full bg-[var(--c-fff2e8)] px-2.5 py-1 text-[10px] font-extrabold tracking-wide text-[var(--c-f06b1d)]">上传 1 张，直接得成品</span>

  50.               <h2 class="mt-2 text-lg font-extrabold leading-7 text-[var(--c-172033)]">换底、裁剪，一次完成</h2>

  51.               <ul class="mt-3 space-y-2 text-xs font-bold text-[var(--c-5f7087)]">

  52.                 <li v-for="item in heroBenefits" :key="item" class="flex items-center gap-2">

  53.                   <UIcon name="i-lucide-circle-check" class="size-3.5 shrink-0 text-[var(--c-18a66a)]" />

  54.                   {{ item }}

  55.                 </li>

  56.               </ul>

  57.             </div>

  58.           </div>

  59.         </div>

  60.       </template>

  61.     </AppHero>

  62. 

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

  64.       <div class="grid items-start gap-6 xl:grid-cols-[minmax(0,1.18fr)_minmax(380px,0.82fr)]">

  65.         <div class="min-w-0 space-y-5">

  66.           <section class="rounded-3xl border border-[var(--c-e9eff7)] bg-[var(--c-ffffff)] p-4 shadow-[0_16px_42px_var(--sh-35-64-105-80)] sm:p-6">

  67.           <div class="mb-5 flex flex-wrap items-center justify-between gap-3">

  68.             <div>

  69.               <h2 class="text-lg font-extrabold text-[var(--c-172033)]">照片预览</h2>

  70.               <p class="mt-1 text-xs text-[var(--c-8794a6)]">{{ workspaceHint }}</p>

  71.             </div>

  72.             <div v-if="localFile" class="flex items-center gap-2">

  73.               <button

  74.                 type="button"

  75.                 class="inline-flex h-9 items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-4 text-xs font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-dfefff)]"

  76.                 @click="triggerUpload"

  77.               >

  78.                 <UIcon name="i-lucide-refresh-cw" class="size-3.5" />

  79.                 更换照片

  80.               </button>

  81.               <button

  82.                 v-if="status !== 'processing'"

  83.                 type="button"

  84.                 aria-label="移除照片"

  85.                 class="flex size-9 items-center justify-center rounded-full bg-[var(--c-f7f9fc)] text-[var(--c-8190a4)] transition-colors hover:bg-[var(--c-fff0ef)] hover:text-[var(--c-e5484d)]"

  86.                 @click="clearPhoto"

  87.               >

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

  89.               </button>

  90.             </div>

  91.           </div>

  92. 

  93.           <input

  94.             ref="fileInput"

  95.             class="sr-only"

  96.             type="file"

  97.             accept="image/jpeg,image/png,image/webp"

  98.             @change="onFileChange"

  99.           >

  100. 

  101.           <div

  102.             v-if="!localFile"

  103.             class="group flex min-h-[420px] cursor-pointer flex-col items-center justify-center rounded-[28px] border-2 border-dashed px-6 text-center transition-all sm:min-h-[520px]"

  104.             :class="dragActive

  105.               ? 'border-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]'

  106.               : 'border-[var(--c-d9e3ef)] bg-[var(--c-f8fbfe)] hover:border-[var(--c-0b8cff)]/60 hover:bg-[var(--c-f3f9ff)]'"

  107.             role="button"

  108.             tabindex="0"

  109.             aria-label="选择证件照原图"

  110.             @click="triggerUpload"

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

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

  113.             @dragenter.prevent="dragActive = true"

  114.             @dragover.prevent="dragActive = true"

  115.             @dragleave.prevent="dragActive = false"

  116.             @drop.prevent="onDrop"

  117.           >

  118.             <span class="flex size-20 items-center justify-center rounded-3xl bg-[var(--c-ffffff)] text-[var(--c-0b8cff)] shadow-[0_12px_30px_var(--sh-25-101-170-120)] transition-transform group-hover:-translate-y-1">

  119.               <UIcon name="i-lucide-image-up" class="size-9" />

  120.             </span>

  121.             <h3 class="mt-6 text-lg font-extrabold text-[var(--c-172033)]">点击或拖入一张照片</h3>

  122.             <p class="mt-2 max-w-md text-sm leading-6 text-[var(--c-718096)]">

  123.               支持 JPG、PNG、WebP，文件不超过 10MB。推荐竖版半身照，避免遮挡面部。

  124.             </p>

  125.             <span class="mt-6 inline-flex h-11 items-center rounded-full bg-[var(--c-0b8cff)] px-6 text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-220)]">

  126.               选择照片

  127.             </span>

  128.             <div class="mt-8 grid w-full max-w-lg grid-cols-3 gap-3">

  129.               <div v-for="tip in uploadTips" :key="tip.label" class="rounded-2xl bg-[var(--c-ffffff)] px-2 py-3">

  130.                 <UIcon :name="tip.icon" class="mx-auto size-4 text-[var(--c-18a66a)]" />

  131.                 <div class="mt-1.5 text-[11px] font-bold text-[var(--c-607087)]">{{ tip.label }}</div>

  132.               </div>

  133.             </div>

  134.           </div>

  135. 

  136.           <div

  137.             v-else

  138.             class="relative flex min-h-[420px] items-center justify-center rounded-[28px] bg-[linear-gradient(135deg,var(--c-edf2f8)_25%,var(--c-f8fafc)_25%,var(--c-f8fafc)_50%,var(--c-edf2f8)_50%,var(--c-edf2f8)_75%,var(--c-f8fafc)_75%)] bg-[length:24px_24px] sm:min-h-[520px]"

  139.             :class="result ? 'overflow-visible' : 'overflow-hidden'"

  140.             @dragenter.prevent="dragActive = true"

  141.             @dragover.prevent="dragActive = true"

  142.             @dragleave.prevent="dragActive = false"

  143.             @drop.prevent="onDrop"

  144.           >

  145.             <img

  146.               :src="displayImage"

  147.               class="max-h-[520px] max-w-full object-contain"

  148.               :class="result ? 'rounded-[4px]' : ''"

  149.               :style="result ? resultImageStyle : undefined"

  150.               :alt="result ? '制作完成的证件照' : '待处理照片预览'"

  151.               @error="handleImageError"

  152.             >

  153. 

  154.             <div v-if="result" class="absolute left-4 top-4 rounded-full bg-[var(--c-ink)]/70 px-3 py-1.5 text-xs font-bold text-white backdrop-blur">

  155.               {{ result.spec_name }} · {{ result.width }}×{{ result.height }}px

  156.             </div>

  157. 

  158.             <div v-if="status === 'processing'" class="absolute inset-0 flex items-center justify-center bg-[var(--c-132238)]/70 p-5 backdrop-blur-sm">

  159.               <div class="w-full max-w-md rounded-3xl bg-[var(--c-ffffff)] p-6 shadow-2xl sm:p-8" aria-live="polite">

  160.                 <span class="mx-auto flex size-16 items-center justify-center rounded-3xl bg-[var(--c-eef7ff)]">

  161.                   <UIcon name="i-lucide-scan-face" class="size-8 animate-pulse text-[var(--c-0b8cff)]" />

  162.                 </span>

  163.                 <div class="mt-5 flex items-end justify-between gap-4">

  164.                   <div class="min-w-0 text-left">

  165.                     <h3 class="text-lg font-extrabold text-[var(--c-172033)]">正在制作证件照</h3>

  166.                     <p class="mt-1 text-sm text-[var(--c-7c899b)]">{{ processingStages[processingStage] }}</p>

  167.                   </div>

  168.                   <span class="shrink-0 text-2xl font-extrabold tabular-nums text-[var(--c-0b8cff)]">{{ processingProgress }}%</span>

  169.                 </div>

  170.                 <div

  171.                   class="mt-5 h-2.5 overflow-hidden rounded-full bg-[var(--c-eaf0f7)]"

  172.                   role="progressbar"

  173.                   aria-label="证件照制作进度"

  174.                   aria-valuemin="0"

  175.                   aria-valuemax="100"

  176.                   :aria-valuenow="processingProgress"

  177.                 >

  178.                   <div

  179.                     class="h-full rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-46c2ff)] transition-[width] duration-500"

  180.                     :style="{ width: `${processingProgress}%` }"

  181.                   />

  182.                 </div>

  183.                 <div class="mt-3 flex items-center justify-between gap-3 text-[11px]">

  184.                   <span class="font-bold text-[var(--c-7f8da0)]">整体进度</span>

  185.                   <span class="inline-flex items-center gap-1.5 font-bold text-[var(--c-46698d)]">

  186.                     <UIcon name="i-lucide-clock-3" class="size-3.5" />

  187.                     {{ processingRemainingText }}

  188.                   </span>

  189.                 </div>

  190.                 <div class="mt-5 grid grid-cols-4 gap-2">

  191.                   <span

  192.                     v-for="(_, index) in processingStages"

  193.                     :key="index"

  194.                     class="h-1.5 rounded-full transition-colors"

  195.                     :class="index <= processingStage ? 'bg-[var(--c-0b8cff)]' : 'bg-[var(--c-e4ebf4)]'"

  196.                   />

  197.                 </div>

  198.                 <p class="mt-5 text-center text-xs text-[var(--c-9aa6b5)]">请保持页面打开，完成后将自动展示成品</p>

  199.               </div>

  200.             </div>

  201.           </div>

  202. 

  203.           <div v-if="photoMeta.width" class="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-[var(--c-7f8c9f)]">

  204.             <span class="inline-flex items-center gap-1.5">

  205.               <UIcon name="i-lucide-maximize" class="size-3.5" />

  206.               原图 {{ photoMeta.width }}×{{ photoMeta.height }}px

  207.             </span>

  208.             <span class="inline-flex items-center gap-1.5">

  209.               <UIcon name="i-lucide-file-image" class="size-3.5" />

  210.               {{ fileSizeText }}

  211.             </span>

  212.             <span v-if="result" class="inline-flex items-center gap-1.5 text-[var(--c-18a66a)]">

  213.               <UIcon name="i-lucide-circle-check" class="size-3.5" />

  214.               已生成 300 DPI 成品

  215.             </span>

  216.           </div>

  217. 

  218.           <div v-if="errorMessage" class="mt-4 flex items-start gap-2 rounded-2xl bg-[var(--c-fff2f1)] px-4 py-3 text-sm text-[var(--c-c63d42)]">

  219.             <UIcon name="i-lucide-circle-alert" class="mt-0.5 size-4 shrink-0" />

  220.             <span>{{ errorMessage }}</span>

  221.           </div>

  222. 

  223.           <div v-if="result" class="mt-5 grid gap-3 sm:grid-cols-2">

  224.             <button

  225.               type="button"

  226.               class="inline-flex h-12 items-center justify-center gap-2 rounded-full bg-[var(--c-0b8cff)] text-sm font-extrabold text-white transition-colors hover:bg-[var(--c-087de5)]"

  227.               @click="downloadResult"

  228.             >

  229.               <UIcon name="i-lucide-download" class="size-4" />

  230.               下载证件照

  231.             </button>

  232.             <button

  233.               type="button"

  234.               class="inline-flex h-12 items-center justify-center gap-2 rounded-full bg-[var(--c-eef7ff)] text-sm font-extrabold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-dfefff)]"

  235.               @click="startOver"

  236.             >

  237.               <UIcon name="i-lucide-plus" class="size-4" />

  238.               制作新照片

  239.             </button>

  240.           </div>

  241.           </section>

  242. 

  243.           <section class="rounded-3xl border border-[var(--c-e9eff7)] bg-[var(--c-ffffff)] p-5 shadow-[0_12px_34px_var(--sh-35-64-105-60)] sm:p-6">

  244.             <div>

  245.               <h2 class="text-base font-extrabold text-[var(--c-172033)]">背景与自然优化</h2>

  246.               <p class="mt-1 text-xs text-[var(--c-8794a6)]">选择底色和画面效果，预览区会展示最终成品</p>

  247.             </div>

  248. 

  249.             <div class="mt-5 grid gap-6 sm:grid-cols-[1.05fr_0.95fr]">

  250.               <div>

  251.                 <div class="text-xs font-bold text-[var(--c-52647b)]">背景颜色</div>

  252.                 <div class="mt-3 grid grid-cols-3 gap-3">

  253.                   <button

  254.                     v-for="background in backgrounds"

  255.                     :key="background.key"

  256.                     type="button"

  257.                     class="group cursor-pointer rounded-2xl border p-2 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  258.                     :class="isBackgroundSelected(background.color)

  259.                       ? 'border-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]'

  260.                       : 'border-[var(--c-e8eef6)] hover:border-[var(--c-bcdcff)]'"

  261.                     :aria-label="`选择${background.name}背景`"

  262.                     @click="setBackground(background.color)"

  263.                   >

  264.                     <span

  265.                       class="relative mx-auto flex size-8 items-center justify-center rounded-full border border-black/10 shadow-inner"

  266.                       :style="{ backgroundColor: background.color }"

  267.                     >

  268.                       <UIcon

  269.                         v-if="isBackgroundSelected(background.color)"

  270.                         name="i-lucide-check"

  271.                         class="size-4"

  272.                         :class="isLightBackground(background.color) ? 'text-[var(--c-0b8cff)]' : 'text-white'"

  273.                       />

  274.                     </span>

  275.                     <span class="mt-1.5 block truncate text-[10px] font-bold text-[var(--c-64748a)]">{{ background.name }}</span>

  276.                   </button>

  277. 

  278.                   <UPopover

  279.                     :content="{ align: 'start', side: 'bottom', sideOffset: 10 }"

  280.                     :ui="{ content: 'rounded-2xl border border-[var(--c-dfe8f2)] bg-[var(--c-ffffff)] p-0 shadow-[0_18px_48px_var(--sh-31-62-112-160)]' }"

  281.                   >

  282.                     <button

  283.                       type="button"

  284.                       aria-label="选择自定义背景色"

  285.                       class="group cursor-pointer rounded-2xl border p-2 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  286.                       :class="isCustomBackground

  287.                         ? 'border-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]'

  288.                         : 'border-[var(--c-e8eef6)] hover:border-[var(--c-bcdcff)]'"

  289.                     >

  290.                       <span

  291.                         class="relative mx-auto flex size-8 items-center justify-center rounded-full border border-black/10 shadow-inner"

  292.                         :style="{ backgroundColor: settings.background }"

  293.                       >

  294.                         <UIcon

  295.                           v-if="isCustomBackground"

  296.                           name="i-lucide-check"

  297.                           class="size-4"

  298.                           :class="isLightBackground(settings.background) ? 'text-[var(--c-0b8cff)]' : 'text-white'"

  299.                         />

  300.                         <span class="absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border border-[var(--c-dfe8f2)] bg-[var(--c-ffffff)] text-[var(--c-0b8cff)] shadow-sm">

  301.                           <UIcon name="i-lucide-palette" class="size-2.5" />

  302.                         </span>

  303.                       </span>

  304.                       <span class="mt-1.5 block truncate text-[10px] font-bold text-[var(--c-64748a)]">自定义</span>

  305.                     </button>

  306. 

  307.                     <template #content>

  308.                       <div class="w-[220px] p-4">

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

  310.                           <div>

  311.                             <div class="text-xs font-extrabold text-[var(--c-172033)]">自定义背景色</div>

  312.                             <div class="mt-0.5 text-[10px] text-[var(--c-8794a6)]">拖动选取，成品实时应用</div>

  313.                           </div>

  314.                           <span class="shrink-0 font-mono text-[11px] font-bold uppercase text-[var(--c-52647b)]">

  315.                             {{ settings.background }}

  316.                           </span>

  317.                         </div>

  318.                         <div role="group" aria-label="自定义证件照背景颜色">

  319.                           <UColorPicker

  320.                             :model-value="settings.background"

  321.                             format="hex"

  322.                             size="sm"

  323.                             :ui="{

  324.                               selector: 'shrink-0',

  325.                               track: 'w-2 shrink-0',

  326.                               trackThumb: '-translate-x-1 rtl:translate-x-1',

  327.                             }"

  328.                             @update:model-value="setBackground"

  329.                           />

  330.                         </div>

  331.                       </div>

  332.                     </template>

  333.                   </UPopover>

  334.                 </div>

  335.               </div>

  336. 

  337.               <div>

  338.                 <div class="text-xs font-bold text-[var(--c-52647b)]">画面优化</div>

  339.                 <div class="mt-3 grid grid-cols-2 gap-3">

  340.                   <button

  341.                     v-for="option in beautyOptions"

  342.                     :key="option.key"

  343.                     type="button"

  344.                     class="rounded-2xl border p-3 text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  345.                     :class="settings.beauty === option.key

  346.                       ? 'border-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]'

  347.                       : 'border-[var(--c-e8eef6)] hover:border-[var(--c-bcdcff)]'"

  348.                     @click="settings.beauty = option.key"

  349.                   >

  350.                     <span class="flex items-center gap-2 text-xs font-extrabold text-[var(--c-172033)]">

  351.                       <UIcon :name="option.key === 'natural' ? 'i-lucide-wand-sparkles' : 'i-lucide-scan-face'" class="size-4 text-[var(--c-0b8cff)]" />

  352.                       {{ option.name }}

  353.                     </span>

  354.                     <span class="mt-1.5 block text-[10px] leading-4 text-[var(--c-8794a6)]">{{ option.desc }}</span>

  355.                   </button>

  356.                 </div>

  357.               </div>

  358.             </div>

  359. 

  360.             <div v-if="result" class="mt-6 border-t border-[var(--c-edf1f6)] pt-5">

  361.               <div class="flex items-center justify-between">

  362.                 <div class="text-xs font-bold text-[var(--c-52647b)]">构图微调</div>

  363.                 <button type="button" class="text-[11px] font-bold text-[var(--c-0b8cff)]" @click="resetAdjustments">恢复默认</button>

  364.               </div>

  365.               <div class="mt-4 grid gap-5 sm:grid-cols-3">

  366.                 <label class="block">

  367.                   <span class="flex justify-between text-[11px] text-[var(--c-7b899c)]">

  368.                     <span>人物大小</span><span>{{ Math.round(settings.scale * 100) }}%</span>

  369.                   </span>

  370.                   <input v-model.number="settings.scale" class="id-range mt-2 w-full" type="range" min="0.75" max="1.4" step="0.01">

  371.                 </label>

  372.                 <label class="block">

  373.                   <span class="flex justify-between text-[11px] text-[var(--c-7b899c)]">

  374.                     <span>水平位置</span><span>{{ adjustmentLabel(settings.offset_x) }}</span>

  375.                   </span>

  376.                   <input v-model.number="settings.offset_x" class="id-range mt-2 w-full" type="range" min="-1" max="1" step="0.02">

  377.                 </label>

  378.                 <label class="block">

  379.                   <span class="flex justify-between text-[11px] text-[var(--c-7b899c)]">

  380.                     <span>垂直位置</span><span>{{ adjustmentLabel(settings.offset_y) }}</span>

  381.                   </span>

  382.                   <input v-model.number="settings.offset_y" class="id-range mt-2 w-full" type="range" min="-1" max="1" step="0.02">

  383.                 </label>

  384.               </div>

  385.               <div class="mt-5 flex flex-col items-center justify-between gap-2 sm:flex-row">

  386.                 <p class="text-[10px] text-[var(--c-9ba7b7)]">调整已生成照片不重复扣点</p>

  387.                 <button

  388.                   type="button"

  389.                   class="flex h-11 w-full items-center justify-center gap-2 rounded-full px-6 text-sm font-extrabold transition-colors sm:w-auto"

  390.                   :class="adjustDirty && !rerendering

  391.                     ? 'bg-[var(--c-ink)] text-white hover:bg-[var(--c-26354b)]'

  392.                     : 'cursor-not-allowed bg-[var(--c-edf1f6)] text-[var(--c-a0aaba)]'"

  393.                   :disabled="!adjustDirty || rerendering"

  394.                   @click="applyAdjustments"

  395.                 >

  396.                   <span v-if="rerendering" class="size-4 animate-spin rounded-full border-2 border-white/35 border-t-white" />

  397.                   <UIcon v-else name="i-lucide-sliders-horizontal" class="size-4" />

  398.                   {{ rerendering ? '正在应用...' : '应用调整' }}

  399.                 </button>

  400.               </div>

  401.             </div>

  402.           </section>

  403.         </div>

  404. 

  405.         <aside class="min-w-0 space-y-5">

  406.           <section class="rounded-3xl border border-[var(--c-e9eff7)] bg-[var(--c-ffffff)] p-5 shadow-[0_12px_34px_var(--sh-35-64-105-60)] sm:p-6">

  407.             <div class="flex items-center justify-between">

  408.               <div>

  409.                 <h2 class="text-base font-extrabold text-[var(--c-172033)]">选择规格</h2>

  410.                 <p class="mt-1 text-xs text-[var(--c-8794a6)]">成品将严格输出为所选像素尺寸</p>

  411.               </div>

  412.               <span v-if="selectedSpec" class="rounded-full bg-[var(--c-eef7ff)] px-3 py-1 text-[11px] font-extrabold text-[var(--c-0b8cff)]">

  413.                 {{ selectedSpec.dpi }} DPI

  414.               </span>

  415.             </div>

  416. 

  417.             <div class="mt-5 flex gap-2 overflow-x-auto pb-1 no-scrollbar">

  418.               <button

  419.                 v-for="category in categories"

  420.                 :key="category.key"

  421.                 type="button"

  422.                 class="h-9 shrink-0 rounded-full px-4 text-xs font-bold transition-colors"

  423.                 :class="selectedCategory === category.key

  424.                   ? 'bg-[var(--c-ink)] text-white'

  425.                   : 'bg-[var(--c-f3f6fa)] text-[var(--c-64748a)] hover:bg-[var(--c-eaf0f7)]'"

  426.                 @click="selectedCategory = category.key"

  427.               >

  428.                 {{ category.name }}

  429.               </button>

  430.             </div>

  431. 

  432.             <label class="mt-4 flex h-10 items-center gap-2 rounded-xl bg-[var(--c-f5f8fc)] px-3 text-[var(--c-8996a8)]">

  433.               <UIcon name="i-lucide-search" class="size-4" />

  434.               <input

  435.                 v-model.trim="specKeyword"

  436.                 class="min-w-0 flex-1 bg-transparent text-sm text-[var(--c-172033)] outline-none placeholder:text-[var(--c-a8b2c0)]"

  437.                 placeholder="搜索尺寸或用途"

  438.               >

  439.             </label>

  440. 

  441.             <div v-if="configLoading" class="mt-4 grid grid-cols-2 gap-3">

  442.               <div v-for="index in 4" :key="index" class="h-[86px] animate-pulse rounded-2xl bg-[var(--c-eef2f7)]" />

  443.             </div>

  444.             <div v-else class="mt-4 grid grid-cols-2 gap-3">

  445.               <button

  446.                 v-for="spec in visibleSpecs"

  447.                 :key="spec.key"

  448.                 type="button"

  449.                 class="relative min-w-0 rounded-2xl border p-3 text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  450.                 :class="selectedSpecKey === spec.key

  451.                   ? 'border-[var(--c-0b8cff)] bg-[var(--c-eef7ff)] shadow-[0_7px_18px_var(--sh-11-140-255-100)]'

  452.                   : 'border-[var(--c-e8eef6)] bg-[var(--c-ffffff)] hover:border-[var(--c-bcdcff)]'"

  453.                 @click="selectedSpecKey = spec.key"

  454.               >

  455.                 <span v-if="spec.hot" class="absolute right-2.5 top-2.5 rounded-full bg-[var(--c-fff1e8)] px-1.5 py-0.5 text-[9px] font-extrabold text-[var(--c-f36b21)]">常用</span>

  456.                 <span class="block truncate pr-8 text-sm font-extrabold text-[var(--c-172033)]">{{ spec.name }}</span>

  457.                 <span class="mt-1.5 block text-[11px] text-[var(--c-78869a)]">{{ spec.width }}×{{ spec.height }}px</span>

  458.                 <span class="mt-0.5 block truncate text-[10px] text-[var(--c-a0aaba)]">{{ spec.print }}</span>

  459.               </button>

  460.             </div>

  461.             <p v-if="!configLoading && !visibleSpecs.length" class="py-8 text-center text-sm text-[var(--c-9aa5b4)]">没有匹配的规格</p>

  462.           </section>

  463. 

  464.           <section class="hidden rounded-3xl border border-[var(--c-ddecfb)] bg-[var(--c-f8fbff)] p-5 lg:block">

  465.             <div class="flex items-center justify-between gap-4">

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

  467.                 <div

  468.                   class="text-xs"

  469.                   :class="isFreeUsage

  470.                     ? 'font-bold text-[var(--c-18a66a)]'

  471.                     : isBalanceInsufficient

  472.                       ? 'font-bold text-[var(--c-e5484d)]'

  473.                       : 'text-[var(--c-77879b)]'"

  474.                 >

  475.                   {{ billingText }}

  476.                 </div>

  477.                 <div class="mt-1 text-base font-extrabold text-[var(--c-172033)]">{{ selectedSpec?.name || '请选择规格' }}</div>

  478.               </div>

  479.               <button

  480.                 type="button"

  481.                 class="inline-flex h-12 min-w-[180px] shrink-0 items-center justify-center gap-2 rounded-full text-sm font-extrabold text-white shadow-[0_12px_24px_var(--sh-11-140-255-240)] transition-all"

  482.                 :class="canCreate && status !== 'processing'

  483.                   ? 'bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-39b6ff)] hover:-translate-y-0.5'

  484.                   : 'cursor-not-allowed bg-[var(--c-9cc8eb)]'"

  485.                 :disabled="!canCreate || status === 'processing'"

  486.                 @click="createPhoto"

  487.               >

  488.                 <UIcon name="i-lucide-zap" class="size-4" />

  489.                 {{ createButtonText }}

  490.               </button>

  491.             </div>

  492.           </section>

  493.         </aside>

  494.       </div>

  495.     </main>

  496. 

  497.     <div class="fixed inset-x-0 bottom-0 z-50 border-t border-[var(--c-e6edf6)] bg-[var(--c-ffffff)]/95 px-4 py-3 shadow-[0_-10px_30px_var(--sh-32-56-92-100)] backdrop-blur lg:hidden" style="padding-bottom: calc(12px + env(safe-area-inset-bottom))">

  498.       <div class="mx-auto flex max-w-2xl items-center gap-3">

  499.         <button

  500.           type="button"

  501.           class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]"

  502.           aria-label="查看历史记录"

  503.           @click="openHistory"

  504.         >

  505.           <UIcon name="i-lucide-history" class="size-5" />

  506.         </button>

  507.         <button

  508.           type="button"

  509.           class="flex h-12 min-w-0 flex-1 items-center justify-center gap-2 rounded-full text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-220)]"

  510.           :class="canCreate && status !== 'processing'

  511.             ? 'bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-39b6ff)]'

  512.             : 'bg-[var(--c-9cc8eb)]'"

  513.           :disabled="!canCreate || status === 'processing'"

  514.           @click="createPhoto"

  515.         >

  516.           <span v-if="status === 'processing'" class="size-4 animate-spin rounded-full border-2 border-white/35 border-t-white" />

  517.           <UIcon v-else name="i-lucide-zap" class="size-4" />

  518.           {{ createButtonText }}

  519.         </button>

  520.       </div>

  521.     </div>

  522. 

  523.     <Teleport to="body">

  524.       <Transition name="id-dialog">

  525.         <div

  526.           v-if="insufficientOpen"

  527.           class="fixed inset-0 z-[120] flex items-center justify-center bg-[var(--c-0d1b2f)]/55 p-4 backdrop-blur-[2px]"

  528.           role="dialog"

  529.           aria-modal="true"

  530.           aria-labelledby="insufficient-points-title"

  531.           @click.self="insufficientOpen = false"

  532.         >

  533.           <div class="w-full max-w-[420px] rounded-[28px] bg-[var(--c-ffffff)] p-6 shadow-[0_28px_80px_var(--sh-8-27-54-280)] sm:p-7">

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

  535.               <span class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--c-fff2e8)] text-[var(--c-f06b1d)]">

  536.                 <UIcon name="i-lucide-coins" class="size-6" />

  537.               </span>

  538.               <button

  539.                 type="button"

  540.                 class="flex size-9 items-center justify-center rounded-full text-[var(--c-8492a6)] transition-colors hover:bg-[var(--c-f3f6fa)] hover:text-[var(--c-172033)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  541.                 aria-label="关闭点数不足提示"

  542.                 @click="insufficientOpen = false"

  543.               >

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

  545.               </button>

  546.             </div>

  547.             <h2 id="insufficient-points-title" class="mt-5 text-xl font-extrabold text-[var(--c-172033)]">点数不足</h2>

  548.             <p class="mt-2 text-sm leading-6 text-[var(--c-6f7f93)]">本次制作需要 {{ quotePoints }} 点，充值后即可继续制作当前照片。</p>

  549.             <div class="mt-5 grid grid-cols-2 divide-x divide-[var(--c-e7edf5)] rounded-2xl bg-[var(--c-f6f9fc)] px-3 py-4 text-center">

  550.               <div>

  551.                 <div class="text-[11px] text-[var(--c-8a97a8)]">当前余额</div>

  552.                 <div class="mt-1 text-lg font-extrabold text-[var(--c-172033)]">{{ balancePoints }} 点</div>

  553.               </div>

  554.               <div>

  555.                 <div class="text-[11px] text-[var(--c-8a97a8)]">还差</div>

  556.                 <div class="mt-1 text-lg font-extrabold text-[var(--c-f06b1d)]">{{ missingPoints }} 点</div>

  557.               </div>

  558.             </div>

  559.             <div class="mt-6 grid grid-cols-2 gap-3">

  560.               <button

  561.                 type="button"

  562.                 class="h-11 rounded-full border border-[var(--c-dfe6ef)] text-sm font-extrabold text-[var(--c-64748a)] transition-colors hover:bg-[var(--c-f7f9fc)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  563.                 @click="insufficientOpen = false"

  564.               >

  565.                 暂不充值

  566.               </button>

  567.               <button

  568.                 type="button"

  569.                 class="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-[var(--c-0b8cff)] text-sm font-extrabold text-white shadow-[0_10px_22px_var(--sh-11-140-255-220)] transition-colors hover:bg-[var(--c-087de5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2"

  570.                 @click="goRecharge"

  571.               >

  572.                 <UIcon name="i-lucide-wallet-cards" class="size-4" />

  573.                 去充值

  574.               </button>

  575.             </div>

  576.           </div>

  577.         </div>

  578.       </Transition>

  579.     </Teleport>

  580. 

  581.     <WorkHistoryDrawer v-model="historyOpen" type="photo" @select="openHistoryItem" />

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

  583.   </div>

  584. </template>

  585. 

  586. <script setup>

  587. const api = useApi()

  588. const { create, createRequestId } = useIdPhoto()

  589. const user = useUser()

  590. const toast = useToast()

  591. const route = useRoute()

  592. const router = useRouter()

  593. 

  594. useHead({

  595.   title: '智能证件照 - 奇想宇宙',

  596.   meta: [

  597.     {

  598.       name: 'description',

  599.       content: '在线制作标准证件照，支持自动抠图、背景替换、尺寸裁剪与自然优化。',

  600.     },

  601.   ],

  602. })

  603. 

  604. const FALLBACK_BACKGROUNDS = [

  605.   { key: 'blue', name: '常用蓝', color: '#438edb' },

  606.   { key: 'education-blue', name: '学历浅蓝', color: '#64c5ff' },

  607.   { key: 'white', name: '白色', color: '#ffffff' },

  608.   { key: 'red', name: '常用红', color: '#9d1016' },

  609.   { key: 'gray', name: '浅灰', color: '#f0f0f0' },

  610. ]

  611. 

  612. const FALLBACK_BEAUTY = [

  613.   { key: 'none', name: '关闭美化', desc: '保留原始肤色与细节' },

  614.   { key: 'natural', name: '自然优化', desc: '轻微提亮、降噪和锐化' },

  615. ]

  616. 

  617. const heroBenefits = ['常用证件照尺寸可选', '蓝、白、红等底色自由切换', '300 DPI 高清成品直接下载']

  618. 

  619. const uploadTips = [

  620.   { label: '正面平视', icon: 'i-lucide-scan-face' },

  621.   { label: '光线均匀', icon: 'i-lucide-sun' },

  622.   { label: '单人半身', icon: 'i-lucide-user-round' },

  623. ]

  624. 

  625. const processingStages = [

  626.   '正在上传并检查照片',

  627.   '正在识别人像并去除背景',

  628.   '正在按证件照标准裁剪',

  629.   '正在生成高清成品',

  630. ]

  631. const PROCESSING_ESTIMATE_SECONDS = 12

  632. 

  633. const fileInput = ref(null)

  634. const localFile = ref(null)

  635. const localPreview = ref('')

  636. const photoMeta = reactive({ width: 0, height: 0 })

  637. const dragActive = ref(false)

  638. const configLoading = ref(true)

  639. const categories = ref([])

  640. const specs = ref([])

  641. const backgrounds = ref(FALLBACK_BACKGROUNDS)

  642. const beautyOptions = ref(FALLBACK_BEAUTY)

  643. const billing = ref(null)

  644. const selectedCategory = ref('common')

  645. const selectedSpecKey = ref('one-inch')

  646. const specKeyword = ref('')

  647. const status = ref('idle')

  648. const errorMessage = ref('')

  649. const result = ref(null)

  650. const processingStage = ref(0)

  651. const processingProgress = ref(8)

  652. const processingElapsedSeconds = ref(0)

  653. const rerendering = ref(false)

  654. const adjustDirty = ref(false)

  655. const historyOpen = ref(false)

  656. const detailOpen = ref(false)

  657. const insufficientOpen = ref(false)

  658. const currentWork = ref({})

  659. let processingTimer = null

  660. let processingStartedAt = 0

  661. let objectUrl = ''

  662. 

  663. const settings = reactive({

  664.   background: '#438edb',

  665.   beauty: 'natural',

  666.   scale: 1,

  667.   offset_x: 0,

  668.   offset_y: 0,

  669. })

  670. 

  671. function normalizeHexColor(value) {

  672.   const color = String(value || '').trim().toLowerCase()

  673.   return /^#[0-9a-f]{6}$/.test(color) ? color : ''

  674. }

  675. 

  676. function setBackground(value) {

  677.   const color = normalizeHexColor(value)

  678.   if (color) settings.background = color

  679. }

  680. 

  681. function isBackgroundSelected(value) {

  682.   return normalizeHexColor(value) === normalizeHexColor(settings.background)

  683. }

  684. 

  685. function isLightBackground(value) {

  686.   const color = normalizeHexColor(value)

  687.   if (!color) return false

  688.   const red = Number.parseInt(color.slice(1, 3), 16)

  689.   const green = Number.parseInt(color.slice(3, 5), 16)

  690.   const blue = Number.parseInt(color.slice(5, 7), 16)

  691.   return (red * 299 + green * 587 + blue * 114) / 1000 >= 170

  692. }

  693. 

  694. const isCustomBackground = computed(

  695.   () => !backgrounds.value.some(background => isBackgroundSelected(background.color)),

  696. )

  697. 

  698. const selectedSpec = computed(() => specs.value.find(item => item.key === selectedSpecKey.value))

  699. const visibleSpecs = computed(() => {

  700.   const keyword = specKeyword.value.toLowerCase()

  701.   return specs.value.filter((item) => {

  702.     const matchesCategory = keyword || item.category === selectedCategory.value

  703.     const matchesKeyword = !keyword || `${item.name} ${item.print} ${item.width} ${item.height}`.toLowerCase().includes(keyword)

  704.     return matchesCategory && matchesKeyword

  705.   })

  706. })

  707. const displayImage = computed(() => result.value?.result_url || localPreview.value)

  708. const resultImageStyle = computed(() => {

  709.   const width = Number(result.value?.width || 0)

  710.   const height = Number(result.value?.height || 0)

  711.   return width && height ? { aspectRatio: `${width} / ${height}` } : {}

  712. })

  713. const fileSizeText = computed(() => {

  714.   const bytes = Number(localFile.value?.size || 0)

  715.   if (!bytes) return ''

  716.   return bytes >= 1024 * 1024

  717.     ? `${(bytes / 1024 / 1024).toFixed(1)} MB`

  718.     : `${Math.ceil(bytes / 1024)} KB`

  719. })

  720. const canCreate = computed(() => Boolean(localFile.value && selectedSpec.value))

  721. const quotePoints = computed(() => Number(billing.value?.quote?.points || 0))

  722. const balancePoints = computed(() => Number(billing.value?.balance?.points ?? user.userInfo.value?.balance ?? 0))

  723. const isFreeUsage = computed(() => (

  724.   !configLoading.value

  725.   && Boolean(billing.value?.quote)

  726.   && quotePoints.value === 0

  727. ))

  728. const isBalanceInsufficient = computed(() => (

  729.   user.isLogin.value

  730.   && quotePoints.value > 0

  731.   && balancePoints.value >= 0

  732.   && balancePoints.value < quotePoints.value

  733. ))

  734. const missingPoints = computed(() => Math.max(0, quotePoints.value - Math.max(0, balancePoints.value)))

  735. const billingText = computed(() => {

  736.   if (configLoading.value) return '计费信息加载中'

  737.   if (isFreeUsage.value) return '免费使用'

  738.   if (!user.isLogin.value) return quotePoints.value ? `登录后制作 · ${quotePoints.value}点/张` : '登录后制作'

  739.   if (balancePoints.value < 0) return quotePoints.value ? `不限点数 · 本次预计 ${quotePoints.value} 点` : '不限点数'

  740.   if (isBalanceInsufficient.value) return `余额 ${balancePoints.value} 点，还差 ${missingPoints.value} 点`

  741.   if (!quotePoints.value) return `当前余额 ${balancePoints.value} 点`

  742.   return `余额 ${balancePoints.value} 点 · 本次预计 ${quotePoints.value} 点`

  743. })

  744. const createButtonText = computed(() => {

  745.   if (status.value === 'processing') return '正在制作...'

  746.   if (result.value) return '重新制作'

  747.   if (isFreeUsage.value) return user.isLogin.value ? '免费制作' : '登录后免费制作'

  748.   if (!user.isLogin.value) return quotePoints.value ? `登录后制作 · ${quotePoints.value}点` : '登录后制作'

  749.   if (isBalanceInsufficient.value) return '点数不足 · 去充值'

  750.   return quotePoints.value ? `立即制作 · ${quotePoints.value}点` : '立即制作'

  751. })

  752. const workspaceHint = computed(() => {

  753.   if (status.value === 'processing') return '图片处理中，请稍候'

  754.   if (result.value) return '制作完成，可下载或继续微调'

  755.   if (localFile.value) return '确认右侧规格后开始制作'

  756.   return '上传清晰正面照片以获得更稳定的效果'

  757. })

  758. const processingRemainingText = computed(() => {

  759.   const remaining = Math.max(0, Math.ceil(PROCESSING_ESTIMATE_SECONDS - processingElapsedSeconds.value))

  760.   return remaining > 0 ? `预计还需约 ${remaining} 秒` : '即将完成，请稍候'

  761. })

  762. 

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

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

  765. }

  766. 

  767. function triggerUpload() {

  768.   fileInput.value?.click()

  769. }

  770. 

  771. function onFileChange(event) {

  772.   const file = event.target.files?.[0]

  773.   if (file) selectFile(file)

  774.   event.target.value = ''

  775. }

  776. 

  777. function onDrop(event) {

  778.   dragActive.value = false

  779.   const file = event.dataTransfer?.files?.[0]

  780.   if (file) selectFile(file)

  781. }

  782. 

  783. async function selectFile(file) {

  784.   errorMessage.value = ''

  785.   const types = ['image/jpeg', 'image/png', 'image/webp']

  786.   if (!types.includes(file.type)) {

  787.     showToast('仅支持 JPG、PNG、WebP 图片')

  788.     return

  789.   }

  790.   if (file.size > 10 * 1024 * 1024) {

  791.     showToast('图片大小不能超过 10MB')

  792.     return

  793.   }

  794. 

  795.   revokeObjectUrl()

  796.   objectUrl = URL.createObjectURL(file)

  797.   localFile.value = file

  798.   localPreview.value = objectUrl

  799.   result.value = null

  800.   status.value = 'ready'

  801.   adjustDirty.value = false

  802.   resetAdjustments()

  803.   try {

  804.     const size = await readImageSize(objectUrl)

  805.     photoMeta.width = size.width

  806.     photoMeta.height = size.height

  807.     if (size.width < 300 || size.height < 300) {

  808.       showToast('图片分辨率偏低，建议换一张更清晰的照片', 'warning')

  809.     }

  810.   } catch {

  811.     clearPhoto()

  812.     showToast('无法读取图片，请更换后重试')

  813.   }

  814. }

  815. 

  816. function readImageSize(url) {

  817.   return new Promise((resolve, reject) => {

  818.     const image = new Image()

  819.     image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight })

  820.     image.onerror = reject

  821.     image.src = url

  822.   })

  823. }

  824. 

  825. function clearPhoto() {

  826.   revokeObjectUrl()

  827.   localFile.value = null

  828.   localPreview.value = ''

  829.   photoMeta.width = 0

  830.   photoMeta.height = 0

  831.   result.value = null

  832.   status.value = 'idle'

  833.   errorMessage.value = ''

  834.   adjustDirty.value = false

  835. }

  836. 

  837. function startOver() {

  838.   clearPhoto()

  839.   nextTick(triggerUpload)

  840. }

  841. 

  842. function revokeObjectUrl() {

  843.   if (objectUrl) URL.revokeObjectURL(objectUrl)

  844.   objectUrl = ''

  845. }

  846. 

  847. function startProcessingProgress() {

  848.   clearInterval(processingTimer)

  849.   processingStartedAt = Date.now()

  850.   updateProcessingProgress()

  851.   processingTimer = setInterval(updateProcessingProgress, 500)

  852. }

  853. 

  854. function updateProcessingProgress() {

  855.   const elapsed = Math.max(0, Date.now() - processingStartedAt)

  856.   const seconds = elapsed / 1000

  857.   processingElapsedSeconds.value = seconds

  858. 

  859.   if (seconds < 1.5) {

  860.     processingStage.value = 0

  861.     processingProgress.value = Math.round(8 + seconds / 1.5 * 12)

  862.     return

  863.   }

  864.   if (seconds < 8) {

  865.     processingStage.value = 1

  866.     processingProgress.value = Math.round(20 + (seconds - 1.5) / 6.5 * 52)

  867.     return

  868.   }

  869.   if (seconds < 10) {

  870.     processingStage.value = 2

  871.     processingProgress.value = Math.round(72 + (seconds - 8) / 2 * 16)

  872.     return

  873.   }

  874. 

  875.   processingStage.value = 3

  876.   processingProgress.value = Math.min(96, Math.round(88 + Math.min(seconds - 10, 2) * 2 + Math.max(0, seconds - 12) / 3))

  877. }

  878. 

  879. function stopProcessingProgress(success = false) {

  880.   clearInterval(processingTimer)

  881.   processingTimer = null

  882.   if (success) {

  883.     processingStage.value = processingStages.length - 1

  884.     processingProgress.value = 100

  885.     processingElapsedSeconds.value = PROCESSING_ESTIMATE_SECONDS

  886.   }

  887. }

  888. 

  889. async function createPhoto() {

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

  891.     user.showLogin.value = true

  892.     return

  893.   }

  894.   if (!localFile.value) {

  895.     showToast('请先上传一张照片')

  896.     triggerUpload()

  897.     return

  898.   }

  899.   if (!selectedSpec.value || status.value === 'processing') return

  900.   if (isBalanceInsufficient.value) {

  901.     insufficientOpen.value = true

  902.     return

  903.   }

  904. 

  905.   status.value = 'processing'

  906.   errorMessage.value = ''

  907.   startProcessingProgress()

  908.   try {

  909.     const response = await create(localFile.value, {

  910.       request_id: createRequestId(),

  911.       spec_key: selectedSpecKey.value,

  912.       ...settings,

  913.     })

  914.     stopProcessingProgress(true)

  915.     result.value = response.data || null

  916.     status.value = 'success'

  917.     adjustDirty.value = false

  918.     currentWork.value = {

  919.       ...(response.data || {}),

  920.       id: response.data?.photo_open_id,

  921.       work_type: 'photo',

  922.       cover: response.data?.result_url,

  923.       original: response.data?.source_url,

  924.     }

  925.     await user.refreshBalance()

  926.     if (billing.value?.balance) billing.value.balance.points = user.userInfo.value.balance

  927.     showToast('证件照制作完成', 'success')

  928.   } catch (error) {

  929.     stopProcessingProgress()

  930.     if (Number(error?.code || error?.data?.code) === 1011) {

  931.       status.value = 'ready'

  932.       insufficientOpen.value = true

  933.       return

  934.     }

  935.     status.value = 'error'

  936.     errorMessage.value = friendlyError(error)

  937.     showToast(errorMessage.value)

  938.   }

  939. }

  940. 

  941. function friendlyError(error) {

  942.   const serviceCode = error?.data?.error

  943.   const map = {

  944.     NO_FACE: '没有检测到清晰人脸，请上传正面半身照',

  945.     MULTIPLE_FACES: '检测到多张人脸，请上传单人照片',

  946.     FACE_TOO_SMALL: '人脸在画面中太小，请上传更清晰的近距离照片',

  947.     FACE_TILTED: '人脸倾斜角度较大，请上传正面平视照片',

  948.     QUEUE_FULL: '当前制作人数较多，请稍后再试',

  949.   }

  950.   return map[serviceCode] || error?.message || '证件照制作失败，请稍后重试'

  951. }

  952. 

  953. async function applyAdjustments() {

  954.   if (!result.value?.photo_open_id || !adjustDirty.value || rerendering.value) return

  955.   rerendering.value = true

  956.   errorMessage.value = ''

  957.   try {

  958.     const response = await api.post('/idphoto/rerender', {

  959.       photo_open_id: result.value.photo_open_id,

  960.       ...settings,

  961.     })

  962.     result.value = { ...result.value, ...(response.data || {}) }

  963.     currentWork.value = {

  964.       ...currentWork.value,

  965.       ...result.value,

  966.       cover: result.value.result_url,

  967.       original: result.value.source_url,

  968.     }

  969.     adjustDirty.value = false

  970.     showToast('调整已应用', 'success')

  971.   } catch (error) {

  972.     errorMessage.value = friendlyError(error)

  973.     showToast(errorMessage.value)

  974.   } finally {

  975.     rerendering.value = false

  976.   }

  977. }

  978. 

  979. function resetAdjustments() {

  980.   settings.scale = 1

  981.   settings.offset_x = 0

  982.   settings.offset_y = 0

  983. }

  984. 

  985. function adjustmentLabel(value) {

  986.   const number = Number(value)

  987.   if (Math.abs(number) < 0.01) return '居中'

  988.   return number > 0 ? `+${Math.round(number * 100)}` : `${Math.round(number * 100)}`

  989. }

  990. 

  991. function openHistory() {

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

  993.     user.showLogin.value = true

  994.     return

  995.   }

  996.   historyOpen.value = true

  997. }

  998. 

  999. function goRecharge() {

  1000.   insufficientOpen.value = false

  1001.   router.push('/recharge')

  1002. }

  1003. 

  1004. function openHistoryItem(item) {

  1005.   currentWork.value = item

  1006.   detailOpen.value = true

  1007. }

  1008. 

  1009. async function downloadResult() {

  1010.   const url = result.value?.result_url

  1011.   if (!url) return

  1012.   try {

  1013.     const response = await fetch(url)

  1014.     if (!response.ok) throw new Error('download failed')

  1015.     const blob = await response.blob()

  1016.     const object = URL.createObjectURL(blob)

  1017.     const anchor = document.createElement('a')

  1018.     anchor.href = object

  1019.     anchor.download = `${result.value.spec_name || '证件照'}-${result.value.width}x${result.value.height}.jpg`

  1020.     anchor.click()

  1021.     URL.revokeObjectURL(object)

  1022.   } catch {

  1023.     window.open(url, '_blank', 'noopener')

  1024.   }

  1025. }

  1026. 

  1027. function handleImageError() {

  1028.   errorMessage.value = result.value ? '成品图片加载失败，请稍后重试' : '照片预览失败，请重新选择'

  1029. }

  1030. 

  1031. async function loadConfig() {

  1032.   configLoading.value = true

  1033.   try {

  1034.     const response = await api.post('/idphoto/config')

  1035.     const data = response.data || {}

  1036.     categories.value = Array.isArray(data.categories) ? data.categories : []

  1037.     specs.value = Array.isArray(data.specs) ? data.specs : []

  1038.     backgrounds.value = Array.isArray(data.backgrounds) && data.backgrounds.length

  1039.       ? data.backgrounds

  1040.       : FALLBACK_BACKGROUNDS

  1041.     beautyOptions.value = Array.isArray(data.beauty_options) && data.beauty_options.length

  1042.       ? data.beauty_options

  1043.       : FALLBACK_BEAUTY

  1044.     billing.value = data.billing || null

  1045.     if (!selectedSpec.value && specs.value.length) {

  1046.       selectedSpecKey.value = specs.value[0].key

  1047.       selectedCategory.value = specs.value[0].category

  1048.     }

  1049.   } catch (error) {

  1050.     errorMessage.value = error.message || '证件照配置加载失败'

  1051.     showToast(errorMessage.value)

  1052.   } finally {

  1053.     configLoading.value = false

  1054.   }

  1055. }

  1056. 

  1057. async function loadWorkFromRoute() {

  1058.   const id = String(route.query.work || '')

  1059.   if (!id || !user.isLogin.value) return

  1060.   try {

  1061.     const response = await api.post('/idphoto/getdetail', { photo_open_id: id })

  1062.     if (response.data) {

  1063.       currentWork.value = { ...response.data, work_type: 'photo' }

  1064.       detailOpen.value = true

  1065.     }

  1066.   } catch {}

  1067. }

  1068. 

  1069. watch(

  1070.   () => [settings.background, settings.beauty, settings.scale, settings.offset_x, settings.offset_y],

  1071.   () => {

  1072.     if (result.value && !rerendering.value) adjustDirty.value = true

  1073.   },

  1074. )

  1075. 

  1076. watch(() => user.isLogin.value, (loggedIn) => {

  1077.   if (loggedIn) {

  1078.     user.refreshBalance()

  1079.     loadConfig()

  1080.   }

  1081. })

  1082. 

  1083. onMounted(async () => {

  1084.   await loadConfig()

  1085.   if (user.isLogin.value) {

  1086.     await user.refreshBalance()

  1087.     await loadWorkFromRoute()

  1088.   }

  1089. })

  1090. 

  1091. onBeforeUnmount(() => {

  1092.   clearInterval(processingTimer)

  1093.   revokeObjectUrl()

  1094. })

  1095. </script>

  1096. 

  1097. <style scoped>

  1098. .no-scrollbar {

  1099.   scrollbar-width: none;

  1100.   -ms-overflow-style: none;

  1101. }

  1102. .no-scrollbar::-webkit-scrollbar {

  1103.   display: none;

  1104. }

  1105. 

  1106. .id-range {

  1107.   height: 4px;

  1108.   appearance: none;

  1109.   border-radius: 999px;

  1110.   background: var(--c-dfe7f0);

  1111.   outline: none;

  1112. }

  1113. .id-range::-webkit-slider-thumb {

  1114.   width: 18px;

  1115.   height: 18px;

  1116.   appearance: none;

  1117.   cursor: pointer;

  1118.   border: 3px solid var(--c-ffffff);

  1119.   border-radius: 50%;

  1120.   background: var(--c-0b8cff);

  1121.   box-shadow: 0 2px 8px var(--sh-11-140-255-350);

  1122. }

  1123. .id-range::-moz-range-thumb {

  1124.   width: 14px;

  1125.   height: 14px;

  1126.   cursor: pointer;

  1127.   border: 3px solid var(--c-ffffff);

  1128.   border-radius: 50%;

  1129.   background: var(--c-0b8cff);

  1130.   box-shadow: 0 2px 8px var(--sh-11-140-255-350);

  1131. }

  1132. 

  1133. .id-dialog-enter-active,

  1134. .id-dialog-leave-active {

  1135.   transition: opacity 180ms ease;

  1136. }

  1137. .id-dialog-enter-active > div,

  1138. .id-dialog-leave-active > div {

  1139.   transition: transform 180ms ease, opacity 180ms ease;

  1140. }

  1141. .id-dialog-enter-from,

  1142. .id-dialog-leave-to {

  1143.   opacity: 0;

  1144. }

  1145. .id-dialog-enter-from > div,

  1146. .id-dialog-leave-to > div {

  1147.   opacity: 0;

  1148.   transform: translateY(12px) scale(0.98);

  1149. }

  1150. 

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

  1152.   * {

  1153.     scroll-behavior: auto !important;

  1154.   }

  1155.   .id-dialog-enter-active,

  1156.   .id-dialog-leave-active,

  1157.   .id-dialog-enter-active > div,

  1158.   .id-dialog-leave-active > div {

  1159.     transition: none;

  1160.   }

  1161. }

  1162. </style>