leiyun
/
pc_nuxt
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
2 Commit
1 Ramo (Branch)
586 KiB
 
 
 
 
Albero (Tree): 64b466469e
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '64b466469e'
${ noResults }
pc_nuxt/app/pages/draw/anime.vue

743 righe
36 KiB
Originale Blame Cronologia 

  1. <template>

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

  3.     <!-- ========== Hero (统一使用 AppHero，保证各页高度/底色一致) ========== -->

  4.     <AppHero

  5.       kicker="ANIME AVATAR STUDIO"

  6.       title="上传自拍，生成你的动漫头像"

  7.       desc="用真实对比看效果。支持竖图、半身照和普通自拍，脸部清晰会更稳定。"

  8.     >

  9.       <template #actions>

  10.         <button

  11.           type="button"

  12.           class="h-10 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"

  13.           @click="openCompare"

  14.         >

  15.           查看对比

  16.         </button>

  17.         <button

  18.           type="button"

  19.           class="h-10 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"

  20.           @click="triggerUpload"

  21.         >

  22.           上传照片

  23.         </button>

  24.         <button

  25.           type="button"

  26.           class="inline-flex h-10 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"

  27.           @click="historyOpen = true"

  28.         >

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

  30.           历史记录

  31.         </button>

  32.       </template>

  33.       <template #aside>

  34.         <HeroComparePreview

  35.           v-if="demoPair.original && demoPair.anime"

  36.           :before="demoPair.original"

  37.           :after="demoPair.anime"

  38.           after-label="动漫"

  39.           @open="openCompare"

  40.         />

  41.       </template>

  42.     </AppHero>

  43. 

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

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

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

  47.         <!-- ===== LEFT: Form (col-span-7) ===== -->

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

  49.           <!-- 1. 参考照片 Upload Card -->

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

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

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

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

  54.                 <p class="mt-1 text-xs text-[var(--c-8a97a8)]">建议使用正面、上半身、脸部无遮挡的照片</p>

  55.               </div>

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

  57.             </div>

  58.             <!-- Upload Strip -->

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

  60.               @click="triggerUpload" @dragover.prevent @drop.prevent="onDrop">

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

  62.                 <img v-if="previewImage" :src="previewImage" class="w-full h-full object-cover" alt="preview" />

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

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

  65.                 </div>

  66.                 <div v-if="uploading" class="absolute inset-0 bg-[var(--c-111e34)]/60 text-white text-xs flex items-center justify-center">上传中</div>

  67.               </div>

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

  69.                 <div class="text-sm lg:text-base font-extrabold text-[var(--c-172033)]">{{ previewImage ? '已选择照片' : '选择一张清晰自拍' }}</div>

  70.                 <div class="mt-1.5 text-xs text-[var(--c-8a97a8)]">不用裁成正方形，竖图和半身照也可以</div>

  71.               </div>

  72.               <div class="w-16 h-9 rounded-full bg-[var(--c-1f8cff)] text-white text-xs font-extrabold flex items-center justify-center flex-shrink-0">{{ previewImage ? '更换' : '上传' }}</div>

  73.             </div>

  74.             <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />

  75.             <!-- Tips -->

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

  77.               <span class="px-3 py-1 rounded-full text-[11px] font-bold text-[var(--c-526174)] bg-[var(--c-f1f5fa)]">正面</span>

  78.               <span class="px-3 py-1 rounded-full text-[11px] font-bold text-[var(--c-526174)] bg-[var(--c-f1f5fa)]">脸部清晰</span>

  79.               <span class="px-3 py-1 rounded-full text-[11px] font-bold text-[var(--c-526174)] bg-[var(--c-f1f5fa)]">避免遮挡</span>

  80.             </div>

  81.           </div>

  82. 

  83.           <!-- 2. 头像风格 -->

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

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

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

  87.               <span class="text-xs text-[var(--c-8a97a8)] mt-1">点选切换</span>

  88.             </div>

  89.             <div v-if="styleLoading" class="mt-4 flex justify-center py-8">

  90.               <span class="w-6 h-6 border-2 border-[var(--c-1f8cff)] border-t-transparent rounded-full animate-spin" />

  91.             </div>

  92.             <template v-else>

  93.               <!-- 风格网格：移动 3 列 / 桌面 4 列，默认 2 行折叠 -->

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

  95.                 <button v-for="s in visibleStyleList" :key="s.value" type="button"

  96.                   class="p-2 rounded-2xl border-2 transition-all text-center"

  97.                   :class="form.img2img_style === String(s.value)

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

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

  100.                   @click="selectStyle(s)">

  101.                   <div class="w-full aspect-square rounded-xl overflow-hidden bg-[var(--c-eaf0f8)] flex items-center justify-center">

  102.                     <img v-if="s.pic" :src="s.pic" class="w-full h-full object-cover" :alt="s.name" />

  103.                     <span v-else class="text-xs text-[var(--c-77869a)]">{{ s.name }}</span>

  104.                   </div>

  105.                   <div class="mt-2 text-xs font-bold text-[var(--c-334155)] truncate">{{ s.name }}</div>

  106.                 </button>

  107.               </div>

  108.               <!-- 展开/收起按钮 -->

  109.               <button v-if="hasMoreStyles" type="button"

  110.                 class="mt-3 w-full h-10 rounded-xl border border-[var(--c-e5edf7)] text-[var(--c-1f8cff)] text-sm font-bold hover:bg-[var(--c-eef7ff)] transition-colors flex items-center justify-center gap-1"

  111.                 @click="styleExpanded = !styleExpanded">

  112.                 <span>{{ styleExpanded ? '收起' : '展开全部' }}</span>

  113.                 <UIcon :name="styleExpanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="size-4" />

  114.               </button>

  115.             </template>

  116.           </div>

  117. 

  118.           <!-- 3. 自由度 -->

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

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

  121.               <div>

  122.                 <h3 class="text-base lg:text-lg font-extrabold text-[var(--c-172033)]">自由度</h3>

  123.                 <p class="mt-1 text-xs text-[var(--c-8a97a8)]">{{ strengthCopy }}</p>

  124.               </div>

  125.               <span class="text-lg font-extrabold text-[var(--c-1f8cff)]">{{ form.img2img_strength.toFixed(2) }}</span>

  126.             </div>

  127.             <input type="range" min="0.1" max="1" step="0.01" v-model.number="form.img2img_strength"

  128.               class="mt-4 w-full h-2 rounded-full appearance-none bg-[var(--c-e7edf5)] accent-[var(--c-1f8cff)] cursor-pointer" />

  129.             <div class="mt-2 flex justify-between text-xs text-[var(--c-8a97a8)]">

  130.               <span>更像原图</span><span>更有创意</span>

  131.             </div>

  132.           </div>

  133. 

  134.           <!-- 4. 画面偏好 -->

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

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

  137.               <h3 class="text-base lg:text-lg font-extrabold text-[var(--c-172033)]">画面偏好</h3>

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

  139.             </div>

  140.             <div class="mt-4">

  141.               <label class="block text-xs font-bold text-[var(--c-526174)] mb-2">描述词</label>

  142.               <input v-model="form.content" type="text" maxlength="100" placeholder="例如：浅色背景、清爽、微笑"

  143.                 class="w-full h-12 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" />

  144.             </div>

  145.             <div class="mt-4">

  146.               <label class="block text-xs font-bold text-[var(--c-526174)] mb-2">反面提示词</label>

  147.               <input v-model="form.no" type="text" maxlength="100" placeholder="例如：模糊、变形、低清晰度"

  148.                 class="w-full h-12 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" />

  149.             </div>

  150.           </div>

  151. 

  152.           <!-- 5. Tips -->

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

  154.             <div class="flex items-center">

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

  156.               <span class="text-sm text-[var(--c-5f6f83)] leading-relaxed">上传照片后可直接生成，处理完成会进入作品详情页。</span>

  157.             </div>

  158.             <div class="flex items-center">

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

  160.               <span class="text-sm text-[var(--c-5f6f83)] leading-relaxed">历史记录里可以查看生成进度，也可以继续打开已完成作品。</span>

  161.             </div>

  162.           </div>

  163. 

  164.           <!-- Desktop Submit -->

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

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

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

  168.               <div v-if="isBalanceInsufficient" class="mt-1 text-xs text-[var(--c-f04438)]">点数不足，请前往充值</div>

  169.             </div>

  170.             <button type="button"

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

  172.               @click="historyOpen = true">

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

  174.               历史记录

  175.             </button>

  176.             <button type="button"

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

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

  179.               :disabled="!canSubmit || submitting" @click="handleSubmit">

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

  181.               <span>{{ submitting ? '生成中...' : submitText }}</span>

  182.             </button>

  183.           </div>

  184.         </div>

  185. 

  186.         <!-- ===== RIGHT: Result (col-span-5, sticky) ===== -->

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

  188.           <!-- 吸顶偏移 = header 高度(64px) + 间距，避免被导航遮挡 -->

  189.           <div class="space-y-4 lg:sticky lg:top-20 lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto">

  190.             <!-- Empty -->

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

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

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

  194.               <div class="text-sm text-[var(--c-a0aabb)]">上传照片并选择风格后</div>

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

  196.             </div>

  197. 

  198.             <!-- Loading -->

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

  200.               <div class="text-base font-bold text-[var(--c-172033)] mb-1">AI 正在创作中</div>

  201.               <div class="text-sm text-[var(--c-7f8896)] mb-6">预计需要 10-30 秒，请耐心等待...</div>

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

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

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

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

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

  207.                 </div>

  208.                 <div class="text-sm font-bold text-[var(--c-172033)]">正在生成你的动漫头像</div>

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

  210.               </div>

  211.             </div>

  212. 

  213.             <!-- Error -->

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

  215.               <UIcon name="i-lucide-circle-alert" class="size-12 text-red-400 mb-3 mx-auto" />

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

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

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

  219.             </div>

  220. 

  221.             <!-- Success -->

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

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

  224.                 <div class="text-base font-bold text-[var(--c-172033)] mb-4">效果对比</div>

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

  226.                   <div>

  227.                     <div class="text-xs text-[var(--c-8a95a6)] mb-2">原图</div>

  228.                     <img v-if="previewImage" :src="previewImage" class="w-full aspect-square rounded-xl object-cover bg-[var(--c-f7f9fd)]" alt="original" />

  229.                   </div>

  230.                   <div>

  231.                     <div class="text-xs text-[var(--c-8a95a6)] mb-2">动漫头像</div>

  232.                     <div class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-xl border-2 border-[var(--c-1f8cff)] bg-[var(--c-f7f9fd)]">

  233.                       <img

  234.                         v-if="genResultUrl && !resultImageFailed"

  235.                         :src="genResultUrl"

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

  237.                         alt="动漫头像生成结果"

  238.                         @error="handleResultImageError"

  239.                       >

  240.                       <div v-else class="px-4 text-center">

  241.                         <UIcon name="i-lucide-image-off" class="mx-auto mb-2 size-8 text-[var(--c-a0aabb)]" />

  242.                         <div class="text-xs leading-relaxed text-[var(--c-7f8896)]">结果图片暂时无法加载</div>

  243.                       </div>

  244.                     </div>

  245.                   </div>

  246.                 </div>

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

  248.                   <button type="button"

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

  250.                     @click="openResultCompare">

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

  252.                     对比查看

  253.                   </button>

  254.                   <button type="button"

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

  256.                     @click="downloadResult">

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

  258.                     下载头像

  259.                   </button>

  260.                 </div>

  261.               </div>

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

  263.                 <button type="button"

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

  265.                   :disabled="submitting" @click="handleSubmit">重新生成</button>

  266.               </div>

  267.             </div>

  268.           </div>

  269.         </div>

  270.       </div>

  271.     </div>

  272. 

  273.     <!-- ========== Mobile Bottom Bar ========== -->

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

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

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

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

  278.         <button v-if="isBalanceInsufficient" class="text-[var(--c-1f8cff)] text-xs font-extrabold flex-shrink-0" @click="goRecharge">去充值</button>

  279.       </div>

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

  281.         <button class="w-[120px] h-12 rounded-full bg-[var(--c-eef7ff)] text-[var(--c-1f8cff)] text-sm font-extrabold" @click="goHistory">历史记录</button>

  282.         <button class="flex-1 h-12 rounded-full text-white text-sm font-extrabold shadow-[0_12px_24px_var(--sh-31-140-255-280)] transition-opacity flex items-center justify-center"

  283.           :class="(canSubmit && !submitting) ? 'bg-gradient-to-r from-[var(--c-1f8cff)] to-[var(--c-41b9ff)]' : 'bg-gradient-to-r from-[var(--c-1f8cff)] to-[var(--c-41b9ff)] opacity-60'"

  284.           :disabled="!canSubmit || submitting" @click="handleSubmit">

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

  286.           {{ submitting ? '生成中...' : submitText }}

  287.         </button>

  288.       </div>

  289.     </div>

  290. 

  291.     <!-- ========== 历史记录抽屉 + 详情弹窗 ========== -->

  292.     <WorkHistoryDrawer v-model="historyOpen" type="anime" @select="openHistoryItem" />

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

  294. 

  295.     <!-- ========== Compare Modal (大图滑块对比，支持 demo 和生成结果) ========== -->

  296.     <Teleport to="body">

  297.       <Transition name="modal">

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

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

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

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

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

  303.               <button class="text-[var(--c-a0aabb)] text-2xl leading-none w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--c-f3f4f6)]" @click="closeCompare">×</button>

  304.             </div>

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

  306.               <div ref="largeCompareRef" class="relative w-full aspect-[3/4] max-h-[70vh] rounded-2xl overflow-hidden bg-[var(--c-dfe8f4)] cursor-ew-resize select-none"

  307.                 @mousedown="onCompareStart" @touchstart.passive="onCompareStart">

  308.                 <!-- 动漫图（底层，全尺寸） -->

  309.                 <img v-if="comparePair.anime" :src="comparePair.anime" class="absolute inset-0 w-full h-full object-cover pointer-events-none" alt="anime" />

  310.                 <!-- 原图（上层，用 clip-path 裁剪，与底层完全重叠） -->

  311.                 <img v-if="comparePair.original" :src="comparePair.original" class="absolute inset-0 w-full h-full object-cover pointer-events-none" 

  312.                   :style="{ clipPath: `inset(0 ${100 - comparePercent}% 0 0)` }" alt="original" />

  313.                 <!-- 分割线 + 拖拽手柄 -->

  314.                 <div class="absolute top-0 bottom-0 w-1 -ml-px bg-[var(--c-ffffff)]/95 shadow-[0_0_12px_var(--sh-20-37-66-220)] pointer-events-none" :style="{ left: comparePercent + '%' }">

  315.                   <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-9 h-14 rounded-full bg-[var(--c-ffffff)] shadow-[0_8px_18px_var(--sh-20-37-66-220)] flex items-center justify-center text-[var(--c-1f8cff)] text-lg font-extrabold gap-px">

  316.                     <span>‹</span><span>›</span>

  317.                   </div>

  318.                 </div>

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

  320.                 <div class="absolute top-3 right-3 px-2 py-0.5 rounded-full text-[10px] font-bold text-white bg-[var(--c-0f172a)]/50 pointer-events-none">{{ compareTarget === 'result' ? '生成图' : '动漫图' }}</div>

  321.               </div>

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

  323.             </div>

  324.           </div>

  325.         </div>

  326.       </Transition>

  327.     </Teleport>

  328.   </div>

  329. </template>

  330. 

  331. <script setup>

  332. import { computed, reactive, ref, onMounted, onUnmounted } from 'vue'

  333. 

  334. const _api = useApi()

  335. const api = _api  // _api 是 { get, post, request }，这里直接别名保持调用方式不变

  336. 

  337. await useLegacyAppSeo({

  338.   appKey: 'anime_avatar',

  339.   fallbackTitle: 'AI漫画头像-动漫头像生成',

  340.   fallbackDescription: 'AI生成漫画头像是一种新兴的技术，人工智能通过用户上传的图像处理技术，可以快速生成具有卡通、动漫等不同风格的头像。这种技术可以应用于社交媒体、游戏和虚拟现实等领域，为用户提供个性化、有趣的头像选择。',

  341.   fallbackKeywords: '漫画头像、动漫头像、漫画头像生成、ai动漫头像',

  342.   canonicalPath: '/draw/anime/',

  343. })

  344. 

  345. const user = useUser()

  346. const router = useRouter()

  347. const { uploadImage } = useUpload()

  348. const toast = useToast()

  349. 

  350. function showToast(message, color = 'red') {

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

  352. }

  353. 

  354. const ANIME_BILLING_MODEL = 'tencent_anime'

  355. 

  356. // ==================== Form ====================

  357. const form = reactive({

  358.   imgs: [], content: '', ai_type: 3, style_type: 1, ar: '1:1', no: '',

  359.   model: ANIME_BILLING_MODEL, model_type: 6, light: '', text: '', speed: '',

  360.   img2img_style: '201', age: 80, change_sex_type: '0', img2img_strength: 0.6, num: 1,

  361.   app_name: 'anime-avatar',

  362. })

  363. 

  364. // ==================== State ====================

  365. const fileInput = ref(null)

  366. const previewImage = ref('')

  367. const uploading = ref(false)

  368. const submitting = ref(false)

  369. const styleList = ref([{ value: '201', name: '默认', model: 2, pic: '' }])

  370. const styleLoading = ref(false)

  371. const styleExpanded = ref(false)

  372. const STYLE_COLLAPSED_COUNT = 8 // 2 行 × 4 列（桌面）

  373. const visibleStyleList = computed(() =>

  374.   styleExpanded.value ? styleList.value : styleList.value.slice(0, STYLE_COLLAPSED_COUNT)

  375. )

  376. const hasMoreStyles = computed(() => styleList.value.length > STYLE_COLLAPSED_COUNT)

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

  378. const quote = reactive({ points: 0 })

  379. const chatOpenId = ref('')

  380. const demoPair = ref({ original: '', anime: '' })

  381. 

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

  383. const genResultUrl = ref('')

  384. const resultImageFailed = ref(false)

  385. 

  386. let pollTimer = null

  387. let countTimer = null

  388. const pollCountdown = ref(3)

  389. 

  390. // ==================== Computed ====================

  391. const canSubmit = computed(() => form.imgs.length > 0 && !uploading.value)

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

  393. const isBalanceInsufficient = computed(() =>

  394.   user.isLogin.value && Number(quote.points || 0) > 0 && currentPoints.value >= 0 && currentPoints.value < Number(quote.points || 0)

  395. )

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

  397.   const c = Number(quote.points || 0)

  398.   if (!user.isLogin.value) return c ? `动漫头像 · ${c}点/张` : '动漫头像'

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

  400. })

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

  402.   const c = Number(quote.points || 0)

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

  404.   return c ? `立即生成 · ${c}点` : '立即生成'

  405. })

  406. const strengthCopy = computed(() => '推荐 0.6 - 0.8，保留人脸特征')

  407. 

  408. // ==================== Upload ====================

  409. function triggerUpload() {

  410.   if (!user.isLogin.value) { showToast('请先登录'); router.push('/login'); return }

  411.   fileInput.value?.click()

  412. }

  413. function onFileChange(e) {

  414.   const f = e.target.files?.[0]

  415.   if (f) handleFile(f)

  416.   e.target.value = ''

  417. }

  418. function onDrop(e) {

  419.   const f = e.dataTransfer?.files?.[0]

  420.   if (f) handleFile(f)

  421. }

  422. async function handleFile(file) {

  423.   if (uploading.value) return

  424.   uploading.value = true

  425.   try {

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

  427.     const r = await uploadImage(file)

  428.     if (r.data?.url) {

  429.       form.imgs = [r.data.url]

  430.       if (r.data.width) form.width = r.data.width

  431.       if (r.data.height) form.height = r.data.height

  432.     } else {

  433.       previewImage.value = ''

  434.       showToast(r.msg || '上传失败')

  435.     }

  436.   } catch (e) {

  437.     previewImage.value = ''

  438.     form.imgs = []

  439.     showToast(e.msg || e.message || '上传失败')

  440.   } finally {

  441.     uploading.value = false

  442.   }

  443. }

  444. 

  445. // ==================== Style List (无需登录) ====================

  446. async function loadStyles() {

  447.   styleLoading.value = true

  448.   try {

  449.     const r = await api.post('/anime/getstylelist', { model: '2' })

  450.     const rows = Array.isArray(r.list) ? r.list : (Array.isArray(r.data) ? r.data : [])

  451.     const list = rows.map((item) => ({

  452.       ...item, value: String(item.value),

  453.       pic: item.pic || item.img || item.image || item.cover || item.icon || item.url || '',

  454.     }))

  455.     if (list.length) {

  456.       styleList.value = list

  457.       if (!form.img2img_style || !list.some(s => s.value === form.img2img_style)) {

  458.         selectStyle(list[0], false)

  459.       }

  460.     }

  461.   } catch (e) { console.error('[anime-avatar] loadStyles failed:', e) }

  462.   styleLoading.value = false

  463. }

  464. function selectStyle(item, resetStrength = true) {

  465.   form.img2img_style = String(item.value)

  466.   form.ai_type = 3

  467.   if (resetStrength) form.img2img_strength = 0.6

  468. }

  469. 

  470. // ==================== Demo (for hero compare) ====================

  471. async function loadDemo() {

  472.   try {

  473.     const r = await api.post('/common/getconfig', { keys: 'anime_demo_v2,anime_demo' })

  474.     const rows = Array.isArray(r.list) ? r.list : []

  475.     const v2 = rows.find(it => it.key === 'anime_demo_v2')

  476.     const old = rows.find(it => it.key === 'anime_demo')

  477.     let list = []

  478.     if (v2 && v2.value) {

  479.       try {

  480.         const data = typeof v2.value === 'string' ? JSON.parse(v2.value) : v2.value

  481.         const arr = Array.isArray(data) ? data : [data]

  482.         list = arr.map(it => ({

  483.           original: it.original || it.before || it.source || '',

  484.           anime: it.anime || it.after || it.result || '',

  485.         })).filter(it => it.original && it.anime).slice(0, 1)

  486.       } catch {}

  487.     }

  488.     if (!list.length && old && old.value) {

  489.       const pics = String(old.value).split(',').map(s => s.trim()).filter(Boolean)

  490.       if (pics.length >= 2) list = [{ original: pics[0], anime: pics[1] }]

  491.     }

  492.     if (list.length) demoPair.value = list[0]

  493.   } catch (e) { console.error('[anime-avatar] loadDemo failed:', e) }

  494. }

  495. 

  496. // ==================== Billing ====================

  497. async function loadBilling() {

  498.   try {

  499.     const r = await api.post('/billing/config', { app_key: 'anime-avatar', model: ANIME_BILLING_MODEL })

  500.     if (r.code === 0 && r.data) {

  501.       quote.points = r.data.quote?.points || 0

  502.       if (r.data.balance) balance.points = r.data.balance.points || r.data.balance.point_balance || 0

  503.     }

  504.   } catch (e) { console.error('[anime-avatar] loadBilling failed:', e) }

  505. }

  506. async function loadBalance() {

  507.   try {

  508.     const r = await api.post('/user/getbalance', {})

  509.     if (r.code === 0 && r.data) balance.points = r.data.points || r.data.point_balance || 0

  510.   } catch (e) { console.error('[anime-avatar] loadBalance failed:', e) }

  511.   // 同步 header 显示的点数

  512.   user.refreshBalance()

  513. }

  514. 

  515. onMounted(() => {

  516.   loadStyles()

  517.   loadBilling()

  518.   loadDemo()

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

  520. })

  521. onUnmounted(() => clearPoll())

  522. 

  523. // ==================== 历史记录 / 详情 ====================

  524. const historyOpen = ref(false)

  525. const detailOpen = ref(false)

  526. const currentWork = ref({})

  527. 

  528. function openHistoryItem(item) {

  529.   currentWork.value = item

  530.   detailOpen.value = true

  531. }

  532. 

  533. // ==================== Compare Modal ====================

  534. const compareVisible = ref(false)

  535. const comparePercent = ref(50)

  536. const largeCompareRef = ref(null)

  537. const compareTarget = ref('demo') // 'demo' | 'result'

  538. let dragging = false

  539. 

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

  541.   if (compareTarget.value === 'result' && previewImage.value && genResultUrl.value) {

  542.     return { original: previewImage.value, anime: genResultUrl.value }

  543.   }

  544.   return demoPair.value

  545. })

  546. 

  547. function openCompare() {

  548.   if (!demoPair.value.original || !demoPair.value.anime) { showToast('暂无对比图'); return }

  549.   comparePercent.value = 50

  550.   compareTarget.value = 'demo'

  551.   compareVisible.value = true

  552. }

  553. function openResultCompare() {

  554.   if (!previewImage.value) {

  555.     showToast('原图暂不可用，请重新上传')

  556.     return

  557.   }

  558.   if (!genResultUrl.value || resultImageFailed.value) {

  559.     showToast('结果图片暂不可用，请稍后重试')

  560.     return

  561.   }

  562.   comparePercent.value = 50

  563.   compareTarget.value = 'result'

  564.   compareVisible.value = true

  565. }

  566. function closeCompare() { compareVisible.value = false; dragging = false }

  567. function onCompareStart(e) {

  568.   dragging = true

  569.   updateComparePercent(e)

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

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

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

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

  574. }

  575. function onCompareMove(e) {

  576.   if (!dragging) return

  577.   if (e.cancelable) e.preventDefault()

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

  579. }

  580. function onCompareEnd() {

  581.   dragging = false

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

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

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

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

  586. }

  587. function updateComparePercent(e) {

  588.   if (!largeCompareRef.value) return

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

  590.   const x = (e.clientX || 0) - rect.left

  591.   const percent = (x / rect.width) * 100

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

  593. }

  594. 

  595. function resolveResultImage(data = {}) {

  596.   const candidates = [

  597.     data.content,

  598.     data.answer,

  599.     data.result_url,

  600.     data.resultUrl,

  601.     data.image_url,

  602.     data.image,

  603.     data.url,

  604.   ]

  605.   for (const candidate of candidates) {

  606.     if (typeof candidate === 'string' && candidate.trim()) return candidate.trim()

  607.     if (candidate && typeof candidate === 'object') {

  608.       const nested = candidate.url || candidate.image_url || candidate.result_url

  609.       if (typeof nested === 'string' && nested.trim()) return nested.trim()

  610.     }

  611.   }

  612.   return ''

  613. }

  614. 

  615. function handleResultImageError() {

  616.   resultImageFailed.value = true

  617.   showToast('结果图片加载失败，请稍后重试')

  618. }

  619. 

  620. // ==================== Submit ====================

  621. function clearPoll() {

  622.   clearTimeout(pollTimer)

  623.   clearInterval(countTimer)

  624. }

  625. async function startPoll() {

  626.   clearPoll()

  627.   pollCountdown.value = 3

  628.   countTimer = setInterval(() => { pollCountdown.value = Math.max(0, pollCountdown.value - 1) }, 1000)

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

  630.     try {

  631.       const r = await api.post('/anime/getdetail', { chat_open_id: chatOpenId.value })

  632.       const d = r.data || {}

  633.       const s = Number(d.is_suc)

  634.       if (s > 0) {

  635.         const resultUrl = resolveResultImage(d)

  636.         if (!resultUrl) {

  637.           resultState.value = {

  638.             visible: true,

  639.             loading: false,

  640.             error: true,

  641.             success: false,

  642.             errorMsg: '生成已完成，但未获取到结果图片，请稍后重试',

  643.           }

  644.         } else {

  645.           genResultUrl.value = resultUrl

  646.           resultImageFailed.value = false

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

  648.         }

  649.         clearPoll()

  650.         loadBalance()

  651.       } else if (s < 0) {

  652.         resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: d.err_msg || d.msg || '生成失败，请重试' }

  653.         clearPoll()

  654.       } else {

  655.         startPoll()

  656.       }

  657.     } catch (e) {

  658.       resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: e.msg || e.message || '查询失败' }

  659.     }

  660.   }, 3000)

  661. }

  662. 

  663. async function handleSubmit() {

  664.   if (!user.isLogin.value) { showToast('请先登录'); router.push('/login'); return }

  665.   if (uploading.value) { showToast('图片正在上传'); return }

  666.   if (!form.imgs.length) { showToast('请上传参考图'); return }

  667.   if (submitting.value) return

  668. 

  669.   submitting.value = true

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

  671.   genResultUrl.value = ''

  672.   resultImageFailed.value = false

  673. 

  674.   try {

  675.     const params = { ...form, imgs: form.imgs.slice(0, 1).join(',') }

  676.     const r = await api.post('/anime/send', params)

  677. 

  678.     if (r.code === 1011) {

  679.       resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: '点数不足，请充值后重试' }

  680.       submitting.value = false

  681.       return

  682.     }

  683.     if (r.code === 1012) {

  684.       form.content = ''

  685.       resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: r.msg || '内容审核不通过，请调整后重试' }

  686.       submitting.value = false

  687.       return

  688.     }

  689.     if (r.code !== 0) {

  690.       resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: r.msg || '提交失败' }

  691.       submitting.value = false

  692.       return

  693.     }

  694. 

  695.     chatOpenId.value = r.data?.answer_chat_open_id || r.data?.chat_open_id || ''

  696.     if (!chatOpenId.value) {

  697.       resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: '未获取到任务ID' }

  698.       submitting.value = false

  699.       return

  700.     }

  701.     startPoll()

  702.   } catch (e) {

  703.     resultState.value = { visible: true, loading: false, error: true, success: false, errorMsg: e.msg || e.message || '提交失败' }

  704.   } finally {

  705.     submitting.value = false

  706.   }

  707. }

  708. 

  709. async function downloadResult() {

  710.   if (!genResultUrl.value || resultImageFailed.value) {

  711.     showToast('结果图片暂不可用，请稍后重试')

  712.     return

  713.   }

  714.   try {

  715.     const r = await fetch(genResultUrl.value)

  716.     const b = await r.blob()

  717.     const a = document.createElement('a')

  718.     a.href = URL.createObjectURL(b)

  719.     a.download = `anime-avatar-${Date.now()}.png`

  720.     a.click()

  721.     URL.revokeObjectURL(a.href)

  722.   } catch {

  723.     window.open(genResultUrl.value, '_blank')

  724.   }

  725. }

  726. 

  727. function goRecharge() { router.push('/recharge') }

  728. // 历史记录改为抽屉，不再跳转页面

  729. function goHistory() { historyOpen.value = true }

  730. </script>

  731. 

  732. <style scoped>

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

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

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

  736. @keyframes dotPulse {

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

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

  739. }

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

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

  742. </style>