leiyun
/
pc_nuxt
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
2 Revīzijas
1 Atzars
586 KiB
 
 
 
 
Koks: 64b466469e
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '64b466469e'
${ noResults }
pc_nuxt/app/pages/portrait-photo.vue

875 rindas
38 KiB
Neapstrādāts Vainot Vēsture 

  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">图片比例与张数</h3>

  166.               <span class="mt-1 text-xs font-extrabold text-[var(--c-0b8cff)]">{{ unitPoints }}点/张 · 共{{ totalPoints }}点</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 class="mt-5 flex items-center gap-4">

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

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

  188.                 <button

  189.                   type="button"

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

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

  192.                   :disabled="quantity <= 1"

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

  194.                 >

  195.                   －

  196.                 </button>

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

  198.                 <button

  199.                   type="button"

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

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

  202.                   :disabled="quantity >= maxCount"

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

  204.                 >

  205.                   ＋

  206.                 </button>

  207.               </div>

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

  209.             </div>

  210.           </div>

  211. 

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

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

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

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

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

  217.             </div>

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

  219.             <input

  220.               id="portrait-extra"

  221.               v-model="extraPrompt"

  222.               type="text"

  223.               maxlength="100"

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

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

  226.             >

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

  228.           </div>

  229. 

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

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

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

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

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

  235.               </span>

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

  237.             </div>

  238.           </div>

  239. 

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

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

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

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

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

  245.                 点数不足，前往充值

  246.               </button>

  247.             </div>

  248.             <button

  249.               type="button"

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

  251.               @click="historyOpen = true"

  252.             >

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

  254.               历史记录

  255.             </button>

  256.             <button

  257.               type="button"

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

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

  260.               :disabled="!canSubmit"

  261.               @click="handleSubmit"

  262.             >

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

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

  265.             </button>

  266.           </div>

  267.         </div>

  268. 

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

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

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

  272.             <!-- 空态 -->

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

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

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

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

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

  278.             </div>

  279. 

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

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

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

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

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

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

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

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

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

  289.                 </div>

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

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

  292.                 </div>

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

  294.               </div>

  295.             </div>

  296. 

  297.             <!-- 失败 -->

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

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

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

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

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

  303.             </div>

  304. 

  305.             <!-- 成功 -->

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

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

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

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

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

  311.                 </div>

  312. 

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

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

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

  316.                 </div>

  317. 

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

  319.                   <button

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

  321.                     :key="url"

  322.                     type="button"

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

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

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

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

  327.                     @click="activeIndex = index"

  328.                   >

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

  330.                   </button>

  331.                 </div>

  332. 

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

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

  335.                 </div>

  336. 

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

  338.                   <button

  339.                     type="button"

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

  341.                     @click="openResultCompare"

  342.                   >

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

  344.                     查看对比

  345.                   </button>

  346.                   <button

  347.                     type="button"

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

  349.                     @click="downloadResult"

  350.                   >

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

  352.                     下载

  353.                   </button>

  354.                 </div>

  355.               </div>

  356.               <button

  357.                 type="button"

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

  359.                 @click="resetJob"

  360.               >

  361.                 再拍一组

  362.               </button>

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

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

  365.               </p>

  366.             </div>

  367.           </div>

  368.         </div>

  369.       </div>

  370.     </div>

  371. 

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

  373.     <div

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

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

  376.     >

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

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

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

  380.           去充值

  381.         </button>

  382.       </div>

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

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

  385.           历史记录

  386.         </button>

  387.         <button

  388.           type="button"

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

  390.           :disabled="!canSubmit"

  391.           @click="handleSubmit"

  392.         >

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

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

  395.         </button>

  396.       </div>

  397.     </div>

  398. 

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

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

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

  402. 

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

  404.     <Teleport to="body">

  405.       <Transition name="modal">

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

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

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

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

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

  411.               <button

  412.                 type="button"

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

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

  415.                 @click="closeCompare"

  416.               >

  417.                 ×

  418.               </button>

  419.             </div>

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

  421.               <div

  422.                 ref="largeCompareRef"

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

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

  425.                 @mousedown="onCompareStart"

  426.                 @touchstart.passive="onCompareStart"

  427.               >

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

  429.                 <img

  430.                   :src="comparePair.before"

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

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

  433.                   alt="原图"

  434.                 >

  435.                 <div

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

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

  438.                 >

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

  440.                     <span>‹</span><span>›</span>

  441.                   </div>

  442.                 </div>

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

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

  445.               </div>

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

  447.             </div>

  448.           </div>

  449.         </div>

  450.       </Transition>

  451.     </Teleport>

  452.   </div>

  453. </template>

  454. 

  455. <script setup>

  456. useSeoMeta({

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

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

  459. })

  460. 

  461. const { post } = useApi()

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

  463. const user = useUser()

  464. const router = useRouter()

  465. const toast = useToast()

  466. 

  467. const POLL_INTERVAL = 3000

  468. const POLL_LIMIT = 8 * 60 * 1000

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

  470. const DEMO_CONFIG_KEY = 'portrait_photo_demo'

  471. 

  472. // ==================== State ====================

  473. const fileInput = ref(null)

  474. const selectedFile = ref(null)

  475. const previewImage = ref('')

  476. const extraPrompt = ref('')

  477. const models = ref([])

  478. const styles = ref([])

  479. const ratios = ref([])

  480. const tips = ref([])

  481. const activeModel = ref('')

  482. const activeStyle = ref('')

  483. const activeRatio = ref('')

  484. const options = reactive({})

  485. const quantity = ref(1)

  486. const maxCount = ref(4)

  487. const unitPoints = ref(0)

  488. const configLoading = ref(true)

  489. const submitting = ref(false)

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

  491. const job = ref({})

  492. const activeIndex = ref(0)

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

  494. const historyOpen = ref(false)

  495. const detailOpen = ref(false)

  496. const currentWork = ref({})

  497. 

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

  499. const pollCountdown = ref(3)

  500. const waitedSeconds = ref(0)

  501. let pollTimer = null

  502. let countTimer = null

  503. let pollStart = 0

  504. 

  505. // ==================== Computed ====================

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

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

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

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

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

  511. const totalPoints = computed(() => unitPoints.value * quantity.value)

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

  513. const isBalanceInsufficient = computed(

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

  515. )

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

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

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

  519.   return totalPoints.value

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

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

  522. })

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

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

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

  526. })

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

  528. 

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

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

  531. }

  532. 

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

  534. async function loadConfig(silent = false) {

  535.   try {

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

  537.       style: activeStyle.value || undefined,

  538.       model: activeModel.value || undefined,

  539.       count: quantity.value,

  540.     })

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

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

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

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

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

  546.     maxCount.value = Number(data.max_count || 4)

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

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

  549.     if (!activeRatio.value) {

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

  551.     }

  552.     if (!activeStyle.value) {

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

  554.       applyStyleDefaults()

  555.     }

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

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

  558.     }

  559.   } catch (e) {

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

  561.   } finally {

  562.     configLoading.value = false

  563.   }

  564. }

  565. 

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

  567. function applyStyleDefaults() {

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

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

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

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

  572.   }

  573. }

  574. 

  575. function selectStyle(key) {

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

  577.   activeStyle.value = key

  578.   applyStyleDefaults()

  579. }

  580. 

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

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

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

  584. })

  585. 

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

  587. async function loadDemo() {

  588.   try {

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

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

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

  592.     if (!item?.value) return

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

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

  595.     if (!first) return

  596.     demoPair.value = {

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

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

  599.     }

  600.   } catch (e) {

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

  602.   }

  603. }

  604. 

  605. async function loadBalance() {

  606.   try {

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

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

  609.   } catch (e) {

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

  611.   }

  612.   user.refreshBalance()

  613. }

  614. 

  615. onMounted(() => {

  616.   loadConfig()

  617.   loadDemo()

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

  619. })

  620. onUnmounted(() => clearPoll())

  621. 

  622. // ==================== 上传 ====================

  623. function triggerUpload() {

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

  625.     user.showLogin.value = true

  626.     return

  627.   }

  628.   fileInput.value?.click()

  629. }

  630. 

  631. function onFileChange(e) {

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

  633.   if (file) handleFile(file)

  634.   e.target.value = ''

  635. }

  636. 

  637. function onDrop(e) {

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

  639.     user.showLogin.value = true

  640.     return

  641.   }

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

  643.   if (file) handleFile(file)

  644. }

  645. 

  646. function handleFile(file) {

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

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

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

  650.   selectedFile.value = file

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

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

  653.   job.value = {}

  654.   activeIndex.value = 0

  655. }

  656. 

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

  658. function clearPoll() {

  659.   clearTimeout(pollTimer)

  660.   clearInterval(countTimer)

  661.   pollTimer = null

  662.   countTimer = null

  663. }

  664. 

  665. async function handleSubmit() {

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

  667.     user.showLogin.value = true

  668.     return

  669.   }

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

  671.   if (!canSubmit.value) return

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

  673. 

  674.   submitting.value = true

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

  676.   waitedSeconds.value = 0

  677.   activeIndex.value = 0

  678.   pollStart = Date.now()

  679. 

  680.   try {

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

  682.       style: activeStyle.value,

  683.       model: activeModel.value,

  684.       ratio: activeRatio.value,

  685.       count: quantity.value,

  686.       extra_prompt: extraPrompt.value,

  687.       request_id: createRequestId(),

  688.       options: { ...options },

  689.     })

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

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

  692.       onSuccess()

  693.     } else {

  694.       startPoll()

  695.     }

  696.   } catch (e) {

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

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

  699.   } finally {

  700.     submitting.value = false

  701.   }

  702. }

  703. 

  704. function startPoll() {

  705.   clearPoll()

  706.   pollCountdown.value = POLL_INTERVAL / 1000

  707.   countTimer = setInterval(() => {

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

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

  710.   }, 1000)

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

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

  713.       clearPoll()

  714.       resultState.value = {

  715.         visible: true,

  716.         loading: false,

  717.         error: true,

  718.         success: false,

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

  720.       }

  721.       return

  722.     }

  723.     try {

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

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

  726.       job.value = data

  727.       const status = Number(data.status)

  728.       if (status === 30) {

  729.         clearPoll()

  730.         onSuccess()

  731.       } else if (status < 0) {

  732.         clearPoll()

  733.         resultState.value = {

  734.           visible: true,

  735.           loading: false,

  736.           error: true,

  737.           success: false,

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

  739.         }

  740.       } else {

  741.         startPoll()

  742.       }

  743.     } catch (e) {

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

  745.       startPoll()

  746.     }

  747.   }, POLL_INTERVAL)

  748. }

  749. 

  750. function onSuccess() {

  751.   activeIndex.value = 0

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

  753.   loadBalance()

  754. }

  755. 

  756. function resetJob() {

  757.   clearPoll()

  758.   job.value = {}

  759.   activeIndex.value = 0

  760.   selectedFile.value = null

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

  762.   previewImage.value = ''

  763.   extraPrompt.value = ''

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

  765. }

  766. 

  767. async function downloadResult() {

  768.   const url = activeResultUrl.value

  769.   if (!url) return

  770.   try {

  771.     const res = await fetch(url)

  772.     const blob = await res.blob()

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

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

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

  776.     link.click()

  777.     URL.revokeObjectURL(link.href)

  778.   } catch {

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

  780.   }

  781. }

  782. 

  783. function goRecharge() {

  784.   router.push('/recharge')

  785. }

  786. 

  787. function openHistoryItem(item) {

  788.   currentWork.value = item

  789.   detailOpen.value = true

  790. }

  791. 

  792. // ==================== 对比弹层 ====================

  793. const compareVisible = ref(false)

  794. const comparePercent = ref(50)

  795. const compareTarget = ref('demo')

  796. const largeCompareRef = ref(null)

  797. let dragging = false

  798. 

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

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

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

  802.   }

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

  804. })

  805. 

  806. function openDemoCompare() {

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

  808.   comparePercent.value = 50

  809.   compareTarget.value = 'demo'

  810.   compareVisible.value = true

  811. }

  812. 

  813. function openResultCompare() {

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

  815.   comparePercent.value = 50

  816.   compareTarget.value = 'result'

  817.   compareVisible.value = true

  818. }

  819. 

  820. function closeCompare() {

  821.   compareVisible.value = false

  822.   onCompareEnd()

  823. }

  824. 

  825. function onCompareStart(e) {

  826.   dragging = true

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

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

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

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

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

  832. }

  833. 

  834. function onCompareMove(e) {

  835.   if (!dragging) return

  836.   if (e.cancelable) e.preventDefault()

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

  838. }

  839. 

  840. function onCompareEnd() {

  841.   dragging = false

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

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

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

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

  846. }

  847. 

  848. function updateComparePercent(e) {

  849.   if (!largeCompareRef.value) return

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

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

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

  853. }

  854. </script>

  855. 

  856. <style scoped>

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

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

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

  860. @keyframes dotPulse {

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

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

  863. }

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

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

  866. 

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

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

  869.   .animate-pulse-dot,

  870.   .animate-pulse-dot2,

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

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

  873. }

  874. </style>