leiyun
/
pc_nuxt
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
1 コミット
1 ブランチ
586 KiB
 
 
 
 
ツリー: 31cb912c3b
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'31cb912c3b' から
${ noResults }
pc_nuxt/app/pages/anime-avatar.vue

645 行
32 KiB
Raw Blame 履歴 

  1. <template>

  2.   <div class="min-h-screen bg-[#f3f7fb]">

  3.     <!-- ========== Hero (对齐 V2 渐变风格) ========== -->

  4.     <div class="relative overflow-hidden"

  5.       style="background: linear-gradient(135deg, #ffffff 0%, #edf6ff 58%, #fff7f0 100%)">

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

  7.         <div class="lg:flex lg:items-center lg:justify-between gap-8">

  8.           <div class="max-w-[480px]">

  9.             <div class="text-[11px] lg:text-xs font-extrabold tracking-wider text-[#1f8cff]">ANIME AVATAR STUDIO</div>

  10.             <h1 class="mt-3 text-[26px] lg:text-[36px] font-extrabold leading-tight text-[#172033]">上传自拍，生成你的动漫头像</h1>

  11.             <p class="mt-3 text-sm lg:text-base text-[#66758a] leading-relaxed">用真实对比看效果。支持竖图、半身照和普通自拍，脸部清晰会更稳定。</p>

  12.             <div class="mt-5 flex items-center gap-3">

  13.               <button type="button"

  14.                 class="h-10 lg:h-11 px-5 rounded-full text-white text-sm font-extrabold bg-[#1f8cff] shadow-[0_10px_20px_rgba(31,140,255,0.22)] hover:bg-[#1979e6] transition-colors"

  15.                 @click="openCompare">查看对比</button>

  16.               <button type="button"

  17.                 class="h-10 lg:h-11 px-5 rounded-full text-[#1f8cff] text-sm font-extrabold bg-white hover:bg-[#f7faff] transition-colors"

  18.                 @click="triggerUpload">上传照片</button>

  19.             </div>

  20.           </div>

  21.           <!-- 预览对比卡片 (所有屏幕可见) -->

  22.           <div v-if="demoPair.original && demoPair.anime" class="mt-6 lg:mt-0 lg:w-[200px] flex-shrink-0 cursor-pointer" @click="openCompare">

  23.             <div class="relative w-[140px] h-[210px] lg:w-[180px] lg:h-[270px] mx-auto rounded-[28px] overflow-hidden shadow-[0_18px_38px_rgba(31,62,112,0.18)] bg-[#dfe8f4]">

  24.               <img :src="demoPair.anime" class="w-full h-full object-cover" alt="anime" />

  25.               <div class="absolute left-0 top-0 bottom-0 w-1/2 overflow-hidden">

  26.                 <img :src="demoPair.original" class="w-[140px] lg:w-[180px] h-full object-cover" alt="original" />

  27.               </div>

  28.               <div class="absolute top-0 bottom-0 left-1/2 w-0.5 -ml-px bg-white/95 shadow-[0_0_12px_rgba(20,37,66,0.22)]" />

  29.               <div class="absolute top-3 left-3 px-2 py-0.5 rounded-full text-[10px] font-bold text-white bg-[#0f172a]/50">原图</div>

  30.               <div class="absolute top-3 right-3 px-2 py-0.5 rounded-full text-[10px] font-bold text-white bg-[#0f172a]/50">动漫</div>

  31.             </div>

  32.           </div>

  33.         </div>

  34.       </div>

  35.     </div>

  36. 

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

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

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

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

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

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

  43.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_10px_28px_rgba(32,56,92,0.05)]">

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

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

  46.                 <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">参考照片</h3>

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

  48.               </div>

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

  50.             </div>

  51.             <!-- Upload Strip -->

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

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

  54.               <div class="w-20 h-28 rounded-2xl bg-[#edf3fb] overflow-hidden relative flex-shrink-0">

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

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

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

  58.                 </div>

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

  60.               </div>

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

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

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

  64.               </div>

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

  66.             </div>

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

  68.             <!-- Tips -->

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

  70.               <span class="px-3 py-1 rounded-full text-[11px] font-bold text-[#526174] bg-[#f1f5fa]">正面</span>

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

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

  73.             </div>

  74.           </div>

  75. 

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

  77.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_10px_28px_rgba(32,56,92,0.05)]">

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

  79.               <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">头像风格</h3>

  80.               <span class="text-xs text-[#8a97a8] mt-1">点选切换</span>

  81.             </div>

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

  83.               <span class="w-6 h-6 border-2 border-[#1f8cff] border-t-transparent rounded-full animate-spin" />

  84.             </div>

  85.             <template v-else>

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

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

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

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

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

  91.                     ? 'bg-[#eef7ff] border-[#1f8cff]'

  92.                     : 'bg-[#f6f9fd] border-transparent hover:border-[#e5edf7]'"

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

  94.                   <div class="w-full aspect-square rounded-xl overflow-hidden bg-[#eaf0f8] flex items-center justify-center">

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

  96.                     <span v-else class="text-xs text-[#77869a]">{{ s.name }}</span>

  97.                   </div>

  98.                   <div class="mt-2 text-xs font-bold text-[#334155] truncate">{{ s.name }}</div>

  99.                 </button>

  100.               </div>

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

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

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

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

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

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

  107.               </button>

  108.             </template>

  109.           </div>

  110. 

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

  112.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_10px_28px_rgba(32,56,92,0.05)]">

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

  114.               <div>

  115.                 <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">自由度</h3>

  116.                 <p class="mt-1 text-xs text-[#8a97a8]">{{ strengthCopy }}</p>

  117.               </div>

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

  119.             </div>

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

  121.               class="mt-4 w-full h-2 rounded-full appearance-none bg-[#e7edf5] accent-[#1f8cff] cursor-pointer" />

  122.             <div class="mt-2 flex justify-between text-xs text-[#8a97a8]">

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

  124.             </div>

  125.           </div>

  126. 

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

  128.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_10px_28px_rgba(32,56,92,0.05)]">

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

  130.               <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">画面偏好</h3>

  131.               <span class="text-xs text-[#8a97a8] mt-1">可选</span>

  132.             </div>

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

  134.               <label class="block text-xs font-bold text-[#526174] mb-2">描述词</label>

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

  136.                 class="w-full h-12 rounded-xl bg-[#f6f9fd] px-4 text-sm text-[#172033] placeholder:text-[#a0aabb] focus:outline-none focus:ring-2 focus:ring-[#1f8cff]/30" />

  137.             </div>

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

  139.               <label class="block text-xs font-bold text-[#526174] mb-2">反面提示词</label>

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

  141.                 class="w-full h-12 rounded-xl bg-[#f6f9fd] px-4 text-sm text-[#172033] placeholder:text-[#a0aabb] focus:outline-none focus:ring-2 focus:ring-[#1f8cff]/30" />

  142.             </div>

  143.           </div>

  144. 

  145.           <!-- 5. Tips -->

  146.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_10px_28px_rgba(32,56,92,0.05)] space-y-3">

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

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

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

  150.             </div>

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

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

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

  154.             </div>

  155.           </div>

  156. 

  157.           <!-- Desktop Submit -->

  158.           <div class="hidden lg:flex items-center gap-3 rounded-2xl bg-white p-4 shadow-[0_10px_28px_rgba(32,56,92,0.05)]">

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

  160.               <div class="text-sm font-bold text-[#172033] whitespace-nowrap">{{ balanceText }}</div>

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

  162.             </div>

  163.             <button type="button"

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

  165.               :class="submitting ? 'bg-[#1979e6]' : 'bg-gradient-to-r from-[#1f8cff] to-[#41b9ff] hover:opacity-90'"

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

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

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

  169.             </button>

  170.           </div>

  171.         </div>

  172. 

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

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

  175.           <div class="lg:sticky lg:top-6 space-y-4">

  176.             <!-- Empty -->

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

  178.               <UIcon name="i-lucide-image" class="size-12 text-[#a0aabb] mb-4" />

  179.               <div class="text-base font-medium text-[#172033] mb-1">等待生成</div>

  180.               <div class="text-sm text-[#a0aabb]">上传照片并选择风格后</div>

  181.               <div class="text-sm text-[#a0aabb]">点击"立即生成"即可看到效果</div>

  182.             </div>

  183. 

  184.             <!-- Loading -->

  185.             <div v-if="resultState.loading" class="bg-white rounded-2xl p-6 lg:p-8 shadow-sm">

  186.               <div class="text-base font-bold text-[#172033] mb-1">AI 正在创作中</div>

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

  188.               <div class="rounded-2xl bg-[#f7f9fd] py-10 flex flex-col items-center">

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

  190.                   <span class="w-2.5 h-2.5 rounded-full bg-[#1f8cff] animate-pulse-dot" />

  191.                   <span class="w-2.5 h-2.5 rounded-full bg-[#1f8cff] animate-pulse-dot2" />

  192.                   <span class="w-2.5 h-2.5 rounded-full bg-[#1f8cff] animate-pulse-dot3" />

  193.                 </div>

  194.                 <div class="text-sm font-bold text-[#172033]">正在生成你的动漫头像</div>

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

  196.               </div>

  197.             </div>

  198. 

  199.             <!-- Error -->

  200.             <div v-if="resultState.error" class="bg-white rounded-2xl p-6 lg:p-8 shadow-sm text-center py-10">

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

  202.               <div class="text-base font-medium text-[#f04438] mb-2">生成失败</div>

  203.               <div class="text-sm text-[#7f8896] mb-4">{{ resultState.errorMsg }}</div>

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

  205.             </div>

  206. 

  207.             <!-- Success -->

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

  209.               <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-sm">

  210.                 <div class="text-base font-bold text-[#172033] mb-4">效果对比</div>

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

  212.                   <div>

  213.                     <div class="text-xs text-[#8a95a6] mb-2">原图</div>

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

  215.                   </div>

  216.                   <div>

  217.                     <div class="text-xs text-[#8a95a6] mb-2">动漫头像</div>

  218.                     <img :src="genResultUrl" class="w-full aspect-square rounded-xl object-cover border-2 border-[#1f8cff] bg-[#f7f9fd]" alt="result" />

  219.                   </div>

  220.                 </div>

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

  222.                   <button type="button"

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

  224.                     @click="openResultCompare">

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

  226.                     对比查看

  227.                   </button>

  228.                   <button type="button"

  229.                     class="flex-1 h-12 rounded-full bg-[#1f8cff] hover:bg-[#1979e6] text-white font-bold text-base shadow-[0_8px_20px_rgba(31,140,255,0.2)] transition-colors flex items-center justify-center"

  230.                     @click="downloadResult">

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

  232.                     下载头像

  233.                   </button>

  234.                 </div>

  235.               </div>

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

  237.                 <button type="button"

  238.                   class="flex-1 h-12 rounded-full border-2 border-[#1f8cff] text-[#1f8cff] font-bold hover:bg-[#eef7ff] transition-colors"

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

  240.               </div>

  241.             </div>

  242.           </div>

  243.         </div>

  244.       </div>

  245.     </div>

  246. 

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

  248.     <div class="lg:hidden fixed left-0 right-0 bottom-0 z-50 bg-white/95 backdrop-blur shadow-[0_-10px_30px_rgba(32,56,92,0.1)]"

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

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

  251.         <div class="min-w-0 truncate text-[#7b8797]">{{ balanceText }}</div>

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

  253.       </div>

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

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

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

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

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

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

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

  261.         </button>

  262.       </div>

  263.     </div>

  264. 

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

  266.     <Teleport to="body">

  267.       <Transition name="modal">

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

  269.           <div class="absolute inset-0 bg-[#0f172a]/60" @click="closeCompare" />

  270.           <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden">

  271.             <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">

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

  273.               <button class="text-[#a0aabb] text-2xl leading-none w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100" @click="closeCompare">×</button>

  274.             </div>

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

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

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

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

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

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

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

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

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

  284.                 <div class="absolute top-0 bottom-0 w-1 -ml-px bg-white/95 shadow-[0_0_12px_rgba(20,37,66,0.22)] pointer-events-none" :style="{ left: comparePercent + '%' }">

  285.                   <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-9 h-14 rounded-full bg-white shadow-[0_8px_18px_rgba(20,37,66,0.22)] flex items-center justify-center text-[#1f8cff] text-lg font-extrabold gap-px">

  286.                     <span>‹</span><span>›</span>

  287.                   </div>

  288.                 </div>

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

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

  291.               </div>

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

  293.             </div>

  294.           </div>

  295.         </div>

  296.       </Transition>

  297.     </Teleport>

  298.   </div>

  299. </template>

  300. 

  301. <script setup>

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

  303. 

  304. const _api = useApi()

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

  306. const user = useUser()

  307. const router = useRouter()

  308. const { uploadImage } = useUpload()

  309. const toast = useToast()

  310. 

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

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

  313. }

  314. 

  315. const ANIME_BILLING_MODEL = 'tencent_anime'

  316. 

  317. // ==================== Form ====================

  318. const form = reactive({

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

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

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

  322.   app_name: 'anime-avatar',

  323. })

  324. 

  325. // ==================== State ====================

  326. const fileInput = ref(null)

  327. const previewImage = ref('')

  328. const uploading = ref(false)

  329. const submitting = ref(false)

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

  331. const styleLoading = ref(false)

  332. const styleExpanded = ref(false)

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

  334. const visibleStyleList = computed(() =>

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

  336. )

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

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

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

  340. const chatOpenId = ref('')

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

  342. 

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

  344. const genResultUrl = ref('')

  345. 

  346. let pollTimer = null

  347. let countTimer = null

  348. const pollCountdown = ref(3)

  349. 

  350. // ==================== Computed ====================

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

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

  353. const isBalanceInsufficient = computed(() =>

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

  355. )

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

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

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

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

  360. })

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

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

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

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

  365. })

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

  367. 

  368. // ==================== Upload ====================

  369. function triggerUpload() {

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

  371.   fileInput.value?.click()

  372. }

  373. function onFileChange(e) {

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

  375.   if (f) handleFile(f)

  376.   e.target.value = ''

  377. }

  378. function onDrop(e) {

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

  380.   if (f) handleFile(f)

  381. }

  382. async function handleFile(file) {

  383.   if (uploading.value) return

  384.   uploading.value = true

  385.   try {

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

  387.     const r = await uploadImage(file)

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

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

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

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

  392.     } else {

  393.       previewImage.value = ''

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

  395.     }

  396.   } catch (e) {

  397.     previewImage.value = ''

  398.     form.imgs = []

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

  400.   } finally {

  401.     uploading.value = false

  402.   }

  403. }

  404. 

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

  406. async function loadStyles() {

  407.   styleLoading.value = true

  408.   try {

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

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

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

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

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

  414.     }))

  415.     if (list.length) {

  416.       styleList.value = list

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

  418.         selectStyle(list[0], false)

  419.       }

  420.     }

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

  422.   styleLoading.value = false

  423. }

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

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

  426.   form.ai_type = 3

  427.   if (resetStrength) form.img2img_strength = 0.6

  428. }

  429. 

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

  431. async function loadDemo() {

  432.   try {

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

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

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

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

  437.     let list = []

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

  439.       try {

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

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

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

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

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

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

  446.       } catch {}

  447.     }

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

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

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

  451.     }

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

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

  454. }

  455. 

  456. // ==================== Billing ====================

  457. async function loadBilling() {

  458.   try {

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

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

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

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

  463.     }

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

  465. }

  466. async function loadBalance() {

  467.   try {

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

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

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

  471. }

  472. 

  473. onMounted(() => {

  474.   loadStyles()

  475.   loadBilling()

  476.   loadDemo()

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

  478. })

  479. onUnmounted(() => clearPoll())

  480. 

  481. // ==================== Compare Modal ====================

  482. const compareVisible = ref(false)

  483. const comparePercent = ref(50)

  484. const largeCompareRef = ref(null)

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

  486. let dragging = false

  487. 

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

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

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

  491.   }

  492.   return demoPair.value

  493. })

  494. 

  495. function openCompare() {

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

  497.   comparePercent.value = 50

  498.   compareTarget.value = 'demo'

  499.   compareVisible.value = true

  500. }

  501. function openResultCompare() {

  502.   if (!previewImage.value || !genResultUrl.value) return

  503.   comparePercent.value = 50

  504.   compareTarget.value = 'result'

  505.   compareVisible.value = true

  506. }

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

  508. function onCompareStart(e) {

  509.   dragging = true

  510.   updateComparePercent(e)

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

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

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

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

  515. }

  516. function onCompareMove(e) {

  517.   if (!dragging) return

  518.   if (e.cancelable) e.preventDefault()

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

  520. }

  521. function onCompareEnd() {

  522.   dragging = false

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

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

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

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

  527. }

  528. function updateComparePercent(e) {

  529.   if (!largeCompareRef.value) return

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

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

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

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

  534. }

  535. 

  536. // ==================== Submit ====================

  537. function clearPoll() {

  538.   clearTimeout(pollTimer)

  539.   clearInterval(countTimer)

  540. }

  541. async function startPoll() {

  542.   clearPoll()

  543.   pollCountdown.value = 3

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

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

  546.     try {

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

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

  549.       const s = Number(d.is_suc)

  550.       if (s > 0) {

  551.         genResultUrl.value = d.answer || d.result_url || d.url || ''

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

  553.         clearPoll()

  554.         loadBalance()

  555.       } else if (s < 0) {

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

  557.         clearPoll()

  558.       } else {

  559.         startPoll()

  560.       }

  561.     } catch (e) {

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

  563.     }

  564.   }, 3000)

  565. }

  566. 

  567. async function handleSubmit() {

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

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

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

  571.   if (submitting.value) return

  572. 

  573.   submitting.value = true

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

  575.   genResultUrl.value = ''

  576. 

  577.   try {

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

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

  580. 

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

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

  583.       submitting.value = false

  584.       return

  585.     }

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

  587.       form.content = ''

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

  589.       submitting.value = false

  590.       return

  591.     }

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

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

  594.       submitting.value = false

  595.       return

  596.     }

  597. 

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

  599.     if (!chatOpenId.value) {

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

  601.       submitting.value = false

  602.       return

  603.     }

  604.     startPoll()

  605.   } catch (e) {

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

  607.   } finally {

  608.     submitting.value = false

  609.   }

  610. }

  611. 

  612. async function downloadResult() {

  613.   if (!genResultUrl.value) return

  614.   try {

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

  616.     const b = await r.blob()

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

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

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

  620.     a.click()

  621.     URL.revokeObjectURL(a.href)

  622.   } catch {

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

  624.   }

  625. }

  626. 

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

  628. function goHistory() {

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

  630.   router.push('/works')

  631. }

  632. </script>

  633. 

  634. <style scoped>

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

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

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

  638. @keyframes dotPulse {

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

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

  641. }

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

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

  644. </style>