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

922 rader
40 KiB
Rå Blame Historik 

  1. <template>

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

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

  4.     <AppHero

  5.       kicker="PORTRAIT PHOTO STUDIO"

  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.           </div>

  86. 

  87.           <!-- 2. 生成模型（只有一个模型时不展示，后续多模型自动出现） -->

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

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

  90.               <h3 class="text-base font-extrabold text-[var(--c-172033)] lg:text-lg">生成模型</h3>

  91.               <span class="mt-1 text-xs text-[var(--c-8a97a8)]">不同模型价格可能不同</span>

  92.             </div>

  93.             <div class="mt-4 grid gap-2.5 sm:grid-cols-2">

  94.               <button

  95.                 v-for="item in models"

  96.                 :key="item.key"

  97.                 type="button"

  98.                 class="cursor-pointer rounded-2xl border-2 p-4 text-left transition-colors"

  99.                 :class="activeModel === item.key

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

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

  102.                 :aria-pressed="activeModel === item.key"

  103.                 @click="activeModel = item.key"

  104.               >

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

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

  107.               </button>

  108.             </div>

  109.           </div>

  110. 

  111.           <!-- 3. 照片风格 + 选项 -->

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

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

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

  115.               <span class="mt-1 text-xs text-[var(--c-8a97a8)]">选择生成方向</span>

  116.             </div>

  117. 

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

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

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

  121.             </div>

  122. 

  123.             <template v-else>

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

  125.                 <button

  126.                   v-for="item in styles"

  127.                   :key="item.key"

  128.                   type="button"

  129.                   class="cursor-pointer rounded-2xl border-2 p-4 text-left transition-colors"

  130.                   :class="activeStyle === item.key

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

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

  133.                   :aria-pressed="activeStyle === item.key"

  134.                   @click="selectStyle(item.key)"

  135.                 >

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

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

  138.                 </button>

  139.               </div>

  140. 

  141.               <div v-for="group in currentGroups" :key="group.key" class="mt-5">

  142.                 <div class="text-sm font-extrabold text-[var(--c-172033)]">{{ group.name }}</div>

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

  144.                   <button

  145.                     v-for="item in group.items"

  146.                     :key="item.key"

  147.                     type="button"

  148.                     class="h-10 cursor-pointer rounded-full border-2 px-4 text-xs font-bold transition-colors"

  149.                     :class="options[group.key] === item.key

  150.                       ? 'border-[var(--c-1f8cff)] bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]'

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

  152.                     :aria-pressed="options[group.key] === item.key"

  153.                     @click="options[group.key] = item.key"

  154.                   >

  155.                     {{ item.name }}

  156.                   </button>

  157.                 </div>

  158.               </div>

  159.             </template>

  160.           </div>

  161. 

  162.           <!-- 4. 比例与张数 -->

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

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

  165.               <h3 class="text-base font-extrabold text-[var(--c-172033)] lg:text-lg">{{ quantityEnabled ? '图片比例与张数' : '图片比例' }}</h3>

  166.               <span class="mt-1 text-xs font-extrabold text-[var(--c-0b8cff)]">{{ quantityPriceText }}</span>

  167.             </div>

  168. 

  169.             <div class="mt-4 flex flex-wrap gap-2.5">

  170.               <button

  171.                 v-for="item in ratios"

  172.                 :key="item.key"

  173.                 type="button"

  174.                 class="h-10 w-[76px] cursor-pointer rounded-xl border-2 text-xs font-extrabold transition-colors"

  175.                 :class="activeRatio === item.key

  176.                   ? 'border-[var(--c-1f8cff)] bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]'

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

  178.                 :aria-pressed="activeRatio === item.key"

  179.                 @click="activeRatio = item.key"

  180.               >

  181.                 {{ item.name }}

  182.               </button>

  183.             </div>

  184. 

  185.             <div v-if="configLoading" class="mt-5 h-14 animate-pulse rounded-2xl bg-[var(--c-f1f5fa)]" />

  186. 

  187.             <div v-else-if="quantityEnabled" class="mt-5 flex items-center gap-4">

  188.               <span class="text-sm font-bold text-[var(--c-526174)]">生成张数</span>

  189.               <div class="flex items-center gap-3">

  190.                 <button

  191.                   type="button"

  192.                   class="flex size-10 cursor-pointer items-center justify-center rounded-xl bg-[var(--c-eef7ff)] text-lg font-extrabold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e0f0ff)] disabled:cursor-not-allowed disabled:opacity-50"

  193.                   aria-label="减少张数"

  194.                   :disabled="quantity <= 1"

  195.                   @click="quantity = Math.max(1, quantity - 1)"

  196.                 >

  197.                   －

  198.                 </button>

  199.                 <span class="min-w-8 text-center text-lg font-extrabold text-[var(--c-172033)]">{{ quantity }}</span>

  200.                 <button

  201.                   type="button"

  202.                   class="flex size-10 cursor-pointer items-center justify-center rounded-xl bg-[var(--c-eef7ff)] text-lg font-extrabold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e0f0ff)] disabled:cursor-not-allowed disabled:opacity-50"

  203.                   aria-label="增加张数"

  204.                   :disabled="quantity >= maxCount"

  205.                   @click="quantity = Math.min(maxCount, quantity + 1)"

  206.                 >

  207.                   ＋

  208.                 </button>

  209.               </div>

  210.               <span class="text-xs text-[var(--c-8a97a8)]">一次最多 {{ maxCount }} 张，按张扣点，失败的不扣</span>

  211.             </div>

  212. 

  213.             <div v-else class="mt-5 rounded-2xl bg-[var(--c-f7faff)] px-4 py-3">

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

  215.                 <span class="text-sm font-bold text-[var(--c-526174)]">生成张数</span>

  216.                 <span class="rounded-full bg-[var(--c-eef7ff)] px-3 py-1 text-xs font-extrabold text-[var(--c-0b8cff)]">固定 1 张</span>

  217.               </div>

  218.               <p class="mt-1 text-xs leading-relaxed text-[var(--c-8a97a8)]">后台已关闭多张生成，本次只生成 1 张。</p>

  219.             </div>

  220.           </div>

  221. 

  222.           <!-- 5. 补充描述 -->

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

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

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

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

  227.             </div>

  228.             <label class="mt-4 block text-xs font-bold text-[var(--c-526174)]" for="portrait-extra">职业、服装、背景等客观信息</label>

  229.             <input

  230.               id="portrait-extra"

  231.               v-model="extraPrompt"

  232.               type="text"

  233.               maxlength="100"

  234.               placeholder="例如：程序员、深灰西装、浅色背景"

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

  236.             >

  237.             <p class="mt-2 text-xs text-[var(--c-8a97a8)]">只用来补充客观信息，风格由上方选项决定。</p>

  238.           </div>

  239. 

  240.           <!-- 6. 说明 -->

  241.           <div v-if="tips.length" 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">

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

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

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

  245.               </span>

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

  247.             </div>

  248.           </div>

  249. 

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

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

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

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

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

  255.                 点数不足，前往充值

  256.               </button>

  257.             </div>

  258.             <button

  259.               type="button"

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

  261.               @click="historyOpen = true"

  262.             >

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

  264.               历史记录

  265.             </button>

  266.             <button

  267.               type="button"

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

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

  270.               :disabled="!canSubmit"

  271.               @click="handleSubmit"

  272.             >

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

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

  275.             </button>

  276.           </div>

  277.         </div>

  278. 

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

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

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

  282.             <!-- 空态 -->

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

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

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

  286.               <div class="text-sm text-[var(--c-a0aabb)]">上传人像并选好风格后</div>

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

  288.             </div>

  289. 

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

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

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

  293.               <div class="mb-6 text-sm text-[var(--c-7f8896)]">每张单独生成，混元未购买并发，高峰期会排队</div>

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

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

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

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

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

  299.                 </div>

  300.                 <div class="text-sm font-bold text-[var(--c-172033)]">

  301.                   {{ job.success_count || 0 }} / {{ job.count || effectiveQuantity }} 张 · 已等待 {{ waitedSeconds }}s

  302.                 </div>

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

  304.               </div>

  305.             </div>

  306. 

  307.             <!-- 失败 -->

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

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

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

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

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

  313.             </div>

  314. 

  315.             <!-- 成功 -->

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

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

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

  319.                   <div class="text-base font-bold text-[var(--c-172033)]">生成结果</div>

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

  321.                 </div>

  322. 

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

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

  325.                   <img :src="activeResultUrl" class="w-full" alt="形象照生成结果">

  326.                 </div>

  327. 

  328.                 <div v-if="resultUrls.length > 1" class="mt-3 flex flex-wrap gap-2.5">

  329.                   <button

  330.                     v-for="(url, index) in resultUrls"

  331.                     :key="url"

  332.                     type="button"

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

  334.                     :class="activeIndex === index ? 'border-[var(--c-1f8cff)]' : 'border-transparent hover:border-[var(--c-e5edf7)]'"

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

  336.                     :aria-pressed="activeIndex === index"

  337.                     @click="activeIndex = index"

  338.                   >

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

  340.                   </button>

  341.                 </div>

  342. 

  343.                 <div v-if="job.fail_count" class="mt-3 text-xs text-[var(--c-f04438)]">

  344.                   有 {{ job.fail_count }} 张生成失败，失败的不扣点

  345.                 </div>

  346. 

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

  348.                   <button

  349.                     type="button"

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

  351.                     @click="openResultCompare"

  352.                   >

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

  354.                     查看对比

  355.                   </button>

  356.                   <button

  357.                     type="button"

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

  359.                     @click="downloadResult"

  360.                   >

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

  362.                     下载

  363.                   </button>

  364.                 </div>

  365.               </div>

  366.               <button

  367.                 type="button"

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

  369.                 @click="resetJob"

  370.               >

  371.                 再拍一组

  372.               </button>

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

  374.                 AI 会重绘服装与背景，五官可能出现轻微变化，建议对照原图确认

  375.               </p>

  376.             </div>

  377.           </div>

  378.         </div>

  379.       </div>

  380.     </div>

  381. 

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

  383.     <div

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

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

  386.     >

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

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

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

  390.           去充值

  391.         </button>

  392.       </div>

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

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

  395.           历史记录

  396.         </button>

  397.         <button

  398.           type="button"

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

  400.           :disabled="!canSubmit"

  401.           @click="handleSubmit"

  402.         >

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

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

  405.         </button>

  406.       </div>

  407.     </div>

  408. 

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

  410.     <WorkHistoryDrawer v-model="historyOpen" type="portrait" @select="openHistoryItem" />

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

  412. 

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

  414.     <Teleport to="body">

  415.       <Transition name="modal">

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

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

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

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

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

  421.               <button

  422.                 type="button"

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

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

  425.                 @click="closeCompare"

  426.               >

  427.                 ×

  428.               </button>

  429.             </div>

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

  431.               <div

  432.                 ref="largeCompareRef"

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

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

  435.                 @mousedown="onCompareStart"

  436.                 @touchstart.passive="onCompareStart"

  437.               >

  438.                 <img :src="comparePair.after" class="pointer-events-none absolute inset-0 h-full w-full object-contain" alt="生成结果">

  439.                 <img

  440.                   :src="comparePair.before"

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

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

  443.                   alt="原图"

  444.                 >

  445.                 <div

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

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

  448.                 >

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

  450.                     <span>‹</span><span>›</span>

  451.                   </div>

  452.                 </div>

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

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

  455.               </div>

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

  457.             </div>

  458.           </div>

  459.         </div>

  460.       </Transition>

  461.     </Teleport>

  462.   </div>

  463. </template>

  464. 

  465. <script setup>

  466. useSeoMeta({

  467.   title: 'AI 形象照 / 职业照 / 写真 - AI在线',

  468.   description: '上传一张人像照片，AI 生成商务形象照、日常职业照与古风、港风等艺术写真，支持多张生成、前后对比与原图下载。',

  469. })

  470. 

  471. const { post } = useApi()

  472. const { create: createPortrait, createRequestId } = usePortrait()

  473. const user = useUser()

  474. const router = useRouter()

  475. const toast = useToast()

  476. 

  477. const POLL_INTERVAL = 3000

  478. const POLL_LIMIT = 8 * 60 * 1000

  479. // 首屏示例对比图由配置项下发（同 old_photo_demo），不在端上硬编码

  480. const DEMO_CONFIG_KEY = 'portrait_photo_demo'

  481. 

  482. // ==================== State ====================

  483. const fileInput = ref(null)

  484. const selectedFile = ref(null)

  485. const previewImage = ref('')

  486. const extraPrompt = ref('')

  487. const models = ref([])

  488. const styles = ref([])

  489. const ratios = ref([])

  490. const tips = ref([])

  491. const activeModel = ref('')

  492. const activeStyle = ref('')

  493. const activeRatio = ref('')

  494. const options = reactive({})

  495. const quantity = ref(1)

  496. const maxCount = ref(4)

  497. const quantityEnabled = ref(true)

  498. const unitPoints = ref(0)

  499. const configLoading = ref(true)

  500. const submitting = ref(false)

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

  502. const job = ref({})

  503. const activeIndex = ref(0)

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

  505. const historyOpen = ref(false)

  506. const detailOpen = ref(false)

  507. const currentWork = ref({})

  508. 

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

  510. const pollCountdown = ref(3)

  511. const waitedSeconds = ref(0)

  512. let pollTimer = null

  513. let countTimer = null

  514. let pollStart = 0

  515. 

  516. // ==================== Computed ====================

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

  518. const currentStyle = computed(() => styles.value.find(item => item.key === activeStyle.value) || {})

  519. const currentGroups = computed(() => currentStyle.value.groups || [])

  520. const resultUrls = computed(() => job.value.result_urls || [])

  521. const activeResultUrl = computed(() => resultUrls.value[activeIndex.value] || resultUrls.value[0] || '')

  522. const effectiveQuantity = computed(() => (quantityEnabled.value ? quantity.value : 1))

  523. const totalPoints = computed(() => unitPoints.value * effectiveQuantity.value)

  524. const quantityPriceText = computed(() => {

  525.   if (!unitPoints.value) return quantityEnabled.value ? `共${totalPoints.value}点` : '固定1张'

  526.   return quantityEnabled.value ? `${unitPoints.value}点/张 · 共${totalPoints.value}点` : `${unitPoints.value}点/张 · 固定1张`

  527. })

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

  529. const isBalanceInsufficient = computed(

  530.   () => user.isLogin.value && totalPoints.value > 0 && currentPoints.value < totalPoints.value,

  531. )

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

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

  534.   if (!user.isLogin.value) return unitPoints.value ? `形象照 · ${unitPoints.value}点/张` : '形象照'

  535.   return totalPoints.value

  536.     ? `余额${currentPoints.value}点 · 预计消耗${totalPoints.value}点`

  537.     : `余额${currentPoints.value}点`

  538. })

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

  540.   if (!user.isLogin.value) return totalPoints.value ? `登录后生成 · ${totalPoints.value}点` : '登录后生成'

  541.   return totalPoints.value ? `立即生成 · ${totalPoints.value}点` : '立即生成'

  542. })

  543. const pendingTitle = computed(() => (Number(job.value.status) === 10 ? '排队中，等待 AI 处理' : 'AI 正在生成形象照'))

  544. 

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

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

  547. }

  548. 

  549. function pickFirstDefined(values) {

  550.   return values.find(value => value !== undefined && value !== null && value !== '')

  551. }

  552. 

  553. function normalizeQuantityEnabled(data = {}) {

  554.   const raw = pickFirstDefined([

  555.     data.quantity_enabled,

  556.     data.quantity_supported,

  557.     data.product?.quantity_enabled,

  558.     data.billing?.product?.quantity_enabled,

  559.     data.billing?.quote?.product?.quantity_enabled,

  560.   ])

  561.   if (raw === undefined) return Number(data.max_count || 1) > 1

  562.   if (typeof raw === 'boolean') return raw

  563.   return !['0', 'false', 'no', 'off', 'unsupported', 'not_support', '不支持'].includes(String(raw).toLowerCase())

  564. }

  565. 

  566. function applyQuantityConfig(data = {}) {

  567.   const enabled = normalizeQuantityEnabled(data)

  568.   const rawMax = pickFirstDefined([

  569.     data.max_count,

  570.     data.product?.max_quantity,

  571.     data.billing?.product?.max_quantity,

  572.     data.billing?.quote?.product?.max_quantity,

  573.   ])

  574.   const nextMax = enabled ? Math.max(1, Number(rawMax || maxCount.value || 1)) : 1

  575.   quantityEnabled.value = enabled

  576.   maxCount.value = nextMax

  577.   quantity.value = enabled ? Math.min(Math.max(1, quantity.value), nextMax) : 1

  578. }

  579. 

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

  581. async function loadConfig(silent = false) {

  582.   try {

  583.     const res = await post('/portrait/config', {

  584.       style: activeStyle.value || undefined,

  585.       model: activeModel.value || undefined,

  586.       count: effectiveQuantity.value,

  587.     })

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

  589.     models.value = data.models || []

  590.     styles.value = data.styles || []

  591.     ratios.value = data.ratios || []

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

  593.     applyQuantityConfig(data)

  594.     unitPoints.value = Number(data.unit_points || 0)

  595.     if (!activeModel.value) activeModel.value = data.default_model || models.value[0]?.key || ''

  596.     if (!activeRatio.value) {

  597.       activeRatio.value = (ratios.value.find(item => item.is_default) || ratios.value[0] || {}).key || ''

  598.     }

  599.     if (!activeStyle.value) {

  600.       activeStyle.value = data.default_style || styles.value[0]?.key || ''

  601.       applyStyleDefaults()

  602.     }

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

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

  605.     }

  606.   } catch (e) {

  607.     if (!silent) showToast(e.message || '配置加载失败')

  608.   } finally {

  609.     configLoading.value = false

  610.   }

  611. }

  612. 

  613. /** 切换风格时把该风格的选项重置为默认值 */

  614. function applyStyleDefaults() {

  615.   Object.keys(options).forEach(key => delete options[key])

  616.   for (const group of currentGroups.value) {

  617.     const picked = group.items.find(item => item.is_default) || group.items[0]

  618.     if (picked) options[group.key] = picked.key

  619.   }

  620. }

  621. 

  622. function selectStyle(key) {

  623.   if (activeStyle.value === key) return

  624.   activeStyle.value = key

  625.   applyStyleDefaults()

  626. }

  627. 

  628. // 换模型会影响单价，重新取一次报价

  629. watch(activeModel, (value, old) => {

  630.   if (old && value && value !== old) loadConfig(true)

  631. })

  632. 

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

  634. async function loadDemo() {

  635.   try {

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

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

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

  639.     if (!item?.value) return

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

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

  642.     if (!first) return

  643.     demoPair.value = {

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

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

  646.     }

  647.   } catch (e) {

  648.     console.error('[portrait-photo] loadDemo failed:', e)

  649.   }

  650. }

  651. 

  652. async function loadBalance() {

  653.   try {

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

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

  656.   } catch (e) {

  657.     console.error('[portrait-photo] loadBalance failed:', e)

  658.   }

  659.   user.refreshBalance()

  660. }

  661. 

  662. onMounted(() => {

  663.   loadConfig()

  664.   loadDemo()

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

  666. })

  667. onUnmounted(() => clearPoll())

  668. 

  669. // ==================== 上传 ====================

  670. function triggerUpload() {

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

  672.     user.showLogin.value = true

  673.     return

  674.   }

  675.   fileInput.value?.click()

  676. }

  677. 

  678. function onFileChange(e) {

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

  680.   if (file) handleFile(file)

  681.   e.target.value = ''

  682. }

  683. 

  684. function onDrop(e) {

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

  686.     user.showLogin.value = true

  687.     return

  688.   }

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

  690.   if (file) handleFile(file)

  691. }

  692. 

  693. function handleFile(file) {

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

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

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

  697.   selectedFile.value = file

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

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

  700.   job.value = {}

  701.   activeIndex.value = 0

  702. }

  703. 

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

  705. function clearPoll() {

  706.   clearTimeout(pollTimer)

  707.   clearInterval(countTimer)

  708.   pollTimer = null

  709.   countTimer = null

  710. }

  711. 

  712. async function handleSubmit() {

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

  714.     user.showLogin.value = true

  715.     return

  716.   }

  717.   if (!selectedFile.value) return showToast('请先上传人像照片')

  718.   if (!canSubmit.value) return

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

  720. 

  721.   submitting.value = true

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

  723.   waitedSeconds.value = 0

  724.   activeIndex.value = 0

  725.   pollStart = Date.now()

  726. 

  727.   try {

  728.     const res = await createPortrait(selectedFile.value, {

  729.       style: activeStyle.value,

  730.       model: activeModel.value,

  731.       ratio: activeRatio.value,

  732.       count: effectiveQuantity.value,

  733.       extra_prompt: extraPrompt.value,

  734.       request_id: createRequestId(),

  735.       options: { ...options },

  736.     })

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

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

  739.       onSuccess()

  740.     } else {

  741.       startPoll()

  742.     }

  743.   } catch (e) {

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

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

  746.   } finally {

  747.     submitting.value = false

  748.   }

  749. }

  750. 

  751. function startPoll() {

  752.   clearPoll()

  753.   pollCountdown.value = POLL_INTERVAL / 1000

  754.   countTimer = setInterval(() => {

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

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

  757.   }, 1000)

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

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

  760.       clearPoll()

  761.       resultState.value = {

  762.         visible: true,

  763.         loading: false,

  764.         error: true,

  765.         success: false,

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

  767.       }

  768.       return

  769.     }

  770.     try {

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

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

  773.       job.value = data

  774.       const status = Number(data.status)

  775.       if (status === 30) {

  776.         clearPoll()

  777.         onSuccess()

  778.       } else if (status < 0) {

  779.         clearPoll()

  780.         resultState.value = {

  781.           visible: true,

  782.           loading: false,

  783.           error: true,

  784.           success: false,

  785.           errorMsg: data.error_msg || '生成失败，本次未扣点',

  786.         }

  787.       } else {

  788.         startPoll()

  789.       }

  790.     } catch (e) {

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

  792.       startPoll()

  793.     }

  794.   }, POLL_INTERVAL)

  795. }

  796. 

  797. function onSuccess() {

  798.   activeIndex.value = 0

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

  800.   loadBalance()

  801. }

  802. 

  803. function resetJob() {

  804.   clearPoll()

  805.   job.value = {}

  806.   activeIndex.value = 0

  807.   selectedFile.value = null

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

  809.   previewImage.value = ''

  810.   extraPrompt.value = ''

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

  812. }

  813. 

  814. async function downloadResult() {

  815.   const url = activeResultUrl.value

  816.   if (!url) return

  817.   try {

  818.     const res = await fetch(url)

  819.     const blob = await res.blob()

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

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

  822.     link.download = `portrait-photo-${Date.now()}.jpg`

  823.     link.click()

  824.     URL.revokeObjectURL(link.href)

  825.   } catch {

  826.     window.open(url, '_blank')

  827.   }

  828. }

  829. 

  830. function goRecharge() {

  831.   router.push('/recharge')

  832. }

  833. 

  834. function openHistoryItem(item) {

  835.   currentWork.value = item

  836.   detailOpen.value = true

  837. }

  838. 

  839. // ==================== 对比弹层 ====================

  840. const compareVisible = ref(false)

  841. const comparePercent = ref(50)

  842. const compareTarget = ref('demo')

  843. const largeCompareRef = ref(null)

  844. let dragging = false

  845. 

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

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

  848.     return { before: job.value.source_url || previewImage.value, after: activeResultUrl.value }

  849.   }

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

  851. })

  852. 

  853. function openDemoCompare() {

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

  855.   comparePercent.value = 50

  856.   compareTarget.value = 'demo'

  857.   compareVisible.value = true

  858. }

  859. 

  860. function openResultCompare() {

  861.   if (!activeResultUrl.value) return showToast('结果图暂不可用')

  862.   comparePercent.value = 50

  863.   compareTarget.value = 'result'

  864.   compareVisible.value = true

  865. }

  866. 

  867. function closeCompare() {

  868.   compareVisible.value = false

  869.   onCompareEnd()

  870. }

  871. 

  872. function onCompareStart(e) {

  873.   dragging = true

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

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

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

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

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

  879. }

  880. 

  881. function onCompareMove(e) {

  882.   if (!dragging) return

  883.   if (e.cancelable) e.preventDefault()

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

  885. }

  886. 

  887. function onCompareEnd() {

  888.   dragging = false

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

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

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

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

  893. }

  894. 

  895. function updateComparePercent(e) {

  896.   if (!largeCompareRef.value) return

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

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

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

  900. }

  901. </script>

  902. 

  903. <style scoped>

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

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

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

  907. @keyframes dotPulse {

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

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

  910. }

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

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

  913. 

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

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

  916.   .animate-pulse-dot,

  917.   .animate-pulse-dot2,

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

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

  920. }

  921. </style>