leiyun
/
pc_nuxt
1
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
1 Cometer
1 Ramo
586 KiB
 
 
 
 
Árvore: 31cb912c3b
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '31cb912c3b'
${ noResults }
pc_nuxt/app/pages/ai-name.vue

724 linhas
38 KiB
Em bruto Responsabilidade Histórico 

  1. <template>

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

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

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

  5.       style="background: linear-gradient(135deg, #138cff 0%, #34c3ff 54%, #79e0df 100%)">

  6.       <div class="absolute w-[360px] h-[360px] rounded-full bg-white/20 -right-[110px] -top-[140px]" />

  7.       <div class="absolute w-[240px] h-[240px] rounded-full bg-white/15 right-[86px] -bottom-[130px]" />

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

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

  10.           <div class="max-w-[460px]">

  11.             <div class="text-[11px] lg:text-xs font-bold tracking-wider text-white/75">AI NAME STUDIO</div>

  12.             <h1 class="mt-3 text-[26px] lg:text-[36px] font-extrabold leading-tight">给宝宝取一个有出处的好名字</h1>

  13.             <p class="mt-3 text-sm lg:text-base text-white/90 leading-relaxed">结合姓氏、性别、诗词典故和音律寓意，生成可直接挑选的名字方案。</p>

  14.           </div>

  15.           <div class="hidden lg:block w-[260px] flex-shrink-0">

  16.             <div class="rounded-3xl border border-white/40 bg-white/20 backdrop-blur p-5 shadow-[0_18px_34px_rgba(0,92,190,0.16)]">

  17.               <div class="text-3xl font-extrabold">{{ previewName }}</div>

  18.               <div class="mt-1.5 text-xs text-white/85">李白《独坐敬亭山》</div>

  19.             </div>

  20.             <div class="mt-3 h-12 rounded-2xl border border-white/40 bg-white/20 backdrop-blur flex items-center justify-between px-4 text-xs text-white/90">

  21.               <span>音律</span><span>寓意</span><span>出处</span>

  22.             </div>

  23.           </div>

  24.         </div>

  25.       </div>

  26.     </div>

  27. 

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

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

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

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

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

  33.           <!-- 1. 基础信息 Card -->

  34.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_rgba(34,68,112,0.05)]">

  35.             <div class="flex items-baseline mb-4">

  36.               <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">基础信息</h3>

  37.               <span class="ml-auto text-xs text-[#8a95a6]">必填</span>

  38.             </div>

  39.             <!-- Surname + Gender (一行，对齐 V2 surname-box) -->

  40.             <div class="flex items-stretch gap-3 rounded-2xl bg-[#f6f9fe] p-3.5">

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

  42.                 <label class="block text-sm font-bold text-[#172033]">姓氏</label>

  43.                 <input v-model="form.surname" type="text" maxlength="5" placeholder="输入姓氏"

  44.                   class="w-full mt-1 bg-transparent text-xl lg:text-2xl font-extrabold text-[#172033] placeholder:text-[#a0aabb] focus:outline-none" />

  45.               </div>

  46.               <div class="w-[180px] flex-shrink-0 p-1.5 rounded-[28px] bg-white shadow-[inset_0_0_0_1px_#edf2f7] flex">

  47.                 <button v-for="opt in genderOptions" :key="opt.value" type="button"

  48.                   class="flex-1 h-10 rounded-[24px] text-sm font-bold transition-all"

  49.                   :class="form.sex === opt.value ? 'bg-[#0b8cff] text-white' : 'text-[#7f8896]'"

  50.                   @click="form.sex = opt.value">{{ opt.label }}</button>

  51.               </div>

  52.             </div>

  53. 

  54.             <!-- 出生信息开关 -->

  55.             <div class="mt-4 rounded-2xl border-2 transition-colors"

  56.               :class="birthInfoIgnored ? 'bg-[#f7f9fd] border-[#edf2f7]' : 'bg-[#eff8ff] border-[#0b8cff]/20'">

  57.               <div class="flex items-center p-4 cursor-pointer" @click="toggleBirthInfo">

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

  59.                   <div class="text-sm font-extrabold text-[#172033]">参考出生信息</div>

  60.                   <div class="mt-1 text-xs text-[#7f8896]">{{ birthInfoIgnored ? '已关闭，生成时不参考农历和五行' : '开启后会结合农历和五行倾向' }}</div>

  61.                 </div>

  62.                 <div class="ml-3 w-[60px] h-7 p-1 rounded-full transition-colors flex-shrink-0"

  63.                   :class="!birthInfoIgnored ? 'bg-[#0b8cff]' : 'bg-[#d7deea]'">

  64.                   <div class="w-5 h-5 rounded-full bg-white shadow transition-transform"

  65.                     :class="!birthInfoIgnored && 'translate-x-7'" />

  66.                 </div>

  67.               </div>

  68.               <div v-if="!birthInfoIgnored" class="px-4 pb-4 space-y-3">

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

  70.                   <div class="rounded-2xl bg-[#f6f9fe] p-4 flex items-start justify-between cursor-pointer min-h-[88px]"

  71.                     @click="openDatePicker">

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

  73.                       <div class="text-sm font-bold text-[#172033]">出生日期</div>

  74.                       <div class="mt-2 text-sm text-[#7f8896]">{{ birthDate || '请选择日期' }}</div>

  75.                     </div>

  76.                     <span class="ml-2 text-2xl text-[#a0aabb] leading-none flex-shrink-0">›</span>

  77.                   </div>

  78.                   <div class="rounded-2xl bg-[#f6f9fe] p-4 flex items-start justify-between cursor-pointer min-h-[88px]"

  79.                     :class="{ 'opacity-80': birthTimeUnknown }" @click="openTimePicker">

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

  81.                       <div class="text-sm font-bold text-[#172033]">出生时分</div>

  82.                       <div class="mt-2 text-sm text-[#7f8896]">{{ birthClockText }}</div>

  83.                     </div>

  84.                     <span class="ml-2 text-2xl text-[#a0aabb] leading-none flex-shrink-0">›</span>

  85.                   </div>

  86.                 </div>

  87.                 <!-- 农历显示 -->

  88.                 <div v-if="birthLunarText" class="rounded-2xl bg-[#eff8ff] p-4 flex items-center">

  89.                   <span class="mr-3 px-3 py-0.5 rounded-full bg-white text-[#0b8cff] text-xs font-extrabold flex-shrink-0">农历</span>

  90.                   <span class="text-sm font-bold text-[#3a5878] min-w-0">{{ birthLunarText }}</span>

  91.                 </div>

  92.                 <!-- 不知道具体时间 -->

  93.                 <div class="inline-flex items-center rounded-full px-4 py-2 cursor-pointer transition-colors border-2"

  94.                   :class="birthTimeUnknown ? 'bg-[#eff8ff] border-[#0b8cff] text-[#0b8cff]' : 'bg-[#f6f9fe] border-transparent text-[#7f8896]'"

  95.                   @click="toggleBirthTimeUnknown">

  96.                   <span class="w-1.5 h-1.5 mr-2 rounded-full bg-current" />

  97.                   <span class="text-xs font-bold">不知道具体时间</span>

  98.                 </div>

  99.               </div>

  100.             </div>

  101.           </div>

  102. 

  103.           <!-- 2. 名字出处 Card -->

  104.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_rgba(34,68,112,0.05)]">

  105.             <div class="flex items-baseline">

  106.               <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">名字出处</h3>

  107.               <span class="ml-auto text-xs text-[#8a95a6]">选择偏好的文化来源</span>

  108.             </div>

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

  110.               <button v-for="src in visibleSourceOptions" :key="src.id" type="button"

  111.                 class="min-h-[72px] p-3 rounded-2xl border-2 transition-all text-left"

  112.                 :class="form.name_source === src.id

  113.                   ? 'bg-[#eff8ff] border-[#0b8cff] shadow-[0_8px_20px_rgba(11,140,255,0.1)]'

  114.                   : 'bg-[#f7f9fd] border-transparent hover:border-[#e7edf5]'"

  115.                 @click="form.name_source = src.id">

  116.                 <div class="text-sm font-extrabold text-[#172033] text-center">{{ src.label }}</div>

  117.                 <div class="mt-1 text-[11px] text-[#8a95a6] text-center">{{ src.desc }}</div>

  118.               </button>

  119.               <button type="button"

  120.                 class="min-h-[72px] p-3 rounded-2xl border-2 bg-white border-[#e7edf5] hover:border-[#0b8cff]/30 transition-all text-left"

  121.                 @click="sourceExpanded = !sourceExpanded">

  122.                 <div class="text-sm font-extrabold text-[#172033] text-center">{{ sourceExpanded ? '收起' : '更多' }}</div>

  123.                 <div class="mt-1 text-[11px] text-[#8a95a6] text-center">{{ sourceExpanded ? '精简显示' : '展开全部' }}</div>

  124.               </button>

  125.             </div>

  126.           </div>

  127. 

  128.           <!-- 3. 名字偏好 Card -->

  129.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_rgba(34,68,112,0.05)]">

  130.             <div class="flex items-baseline">

  131.               <h3 class="text-base lg:text-lg font-extrabold text-[#172033]">名字偏好</h3>

  132.               <span class="ml-auto text-xs text-[#8a95a6]">用于控制生成结果的方向</span>

  133.             </div>

  134. 

  135.             <!-- 字数 -->

  136.             <div class="mt-5">

  137.               <div class="text-sm font-bold text-[#172033]">名字字数 <span class="text-xs font-normal text-[#8a95a6]">包含姓氏</span></div>

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

  139.                 <button v-for="wc in wordOptions" :key="wc.id" type="button"

  140.                   class="h-10 px-5 rounded-full text-sm font-bold transition-all border-2"

  141.                   :class="form.words_num === wc.id ? 'bg-[#eff8ff] border-[#0b8cff] text-[#0b8cff]' : 'bg-[#f6f9fe] border-transparent text-[#596579]'"

  142.                   @click="form.words_num = wc.id">{{ wc.label }}</button>

  143.               </div>

  144.             </div>

  145. 

  146.             <!-- 是否叠词 -->

  147.             <div class="mt-5">

  148.               <div class="text-sm font-bold text-[#172033]">是否叠词</div>

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

  150.                 <button v-for="r in redupOptions" :key="r.id" type="button"

  151.                   class="h-10 px-5 rounded-full text-sm font-bold transition-all border-2"

  152.                   :class="form.is_redup === r.id ? 'bg-[#eff8ff] border-[#0b8cff] text-[#0b8cff]' : 'bg-[#f6f9fe] border-transparent text-[#596579]'"

  153.                   @click="form.is_redup = r.id">{{ r.label }}</button>

  154.               </div>

  155.             </div>

  156. 

  157.             <!-- 指定包含字 -->

  158.             <div class="mt-5 flex items-center rounded-2xl bg-[#f7f9fd] p-4">

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

  160.                 <div class="text-sm font-bold text-[#172033]">指定包含字</div>

  161.                 <div class="mt-1 text-xs text-[#8a95a6]">可选，限制 1 个字</div>

  162.               </div>

  163.               <input v-model="form.special_word" type="text" maxlength="1" placeholder="如：辰"

  164.                 class="ml-auto w-24 h-12 rounded-2xl bg-white text-center text-lg font-extrabold text-[#172033] placeholder:text-[#a0aabb] focus:outline-none focus:ring-2 focus:ring-[#0b8cff]/30" />

  165.             </div>

  166. 

  167.             <!-- 补充描述 -->

  168.             <div class="mt-4 rounded-2xl bg-[#f7f9fd] p-4">

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

  170.                 <div>

  171.                   <div class="text-sm font-bold text-[#172033]">补充描述</div>

  172.                   <div class="mt-1 text-xs text-[#8a95a6]">额外要求、寓意和期望</div>

  173.                 </div>

  174.                 <div class="text-xs text-[#9aa5b5] flex-shrink-0">{{ (form.content || '').length }}/200</div>

  175.               </div>

  176.               <textarea v-model="form.content" rows="3" maxlength="200" placeholder="您可以补充您的额外要求，也可以添加您的寓意和期望。200字以内..."

  177.                 class="mt-3 w-full bg-transparent text-sm text-[#172033] placeholder:text-[#a0aabb] focus:outline-none resize-none leading-relaxed"></textarea>

  178.             </div>

  179.           </div>

  180. 

  181.           <!-- 4. Promise Card -->

  182.           <div class="bg-white rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_rgba(34,68,112,0.05)] space-y-4">

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

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

  185.               <span class="text-sm text-[#596579] leading-relaxed">可关闭出生信息参考，关闭后不结合农历和五行</span>

  186.             </div>

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

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

  189.               <span class="text-sm text-[#596579] leading-relaxed">开启后可选择日期和时分，不确定时辰可选"不知道具体时间"</span>

  190.             </div>

  191.           </div>

  192. 

  193.           <!-- Desktop Submit -->

  194.           <div class="hidden lg:flex items-center gap-3 rounded-2xl bg-white p-4 shadow-[0_8px_28px_rgba(34,68,112,0.05)]">

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

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

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

  198.             </div>

  199.             <button type="button"

  200.               class="px-10 h-14 rounded-full bg-[#0b8cff] hover:bg-[#0a7ce0] active:bg-[#096dca] text-white font-bold text-base shadow-[0_12px_24px_rgba(11,140,255,0.25)] transition-all flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-w-[160px]"

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

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

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

  204.             </button>

  205.           </div>

  206.         </div>

  207. 

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

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

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

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

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

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

  214.               <div class="text-sm text-[#a0aabb]">填写左侧信息并点击"开始取名"</div>

  215.               <div class="text-sm text-[#a0aabb]">AI将为您推荐最佳名字方案</div>

  216.             </div>

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

  218.               <div class="text-base font-bold text-[#172033] mb-1">{{ questionTitle }}</div>

  219.               <div class="text-sm text-[#7f8896] mb-6">AI 正在分析音律、寓意和出处...</div>

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

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

  222.                   <span class="w-2.5 h-2.5 rounded-full bg-[#0b8cff] animate-pulse-dot" />

  223.                   <span class="w-2.5 h-2.5 rounded-full bg-[#0b8cff] animate-pulse-dot2" />

  224.                   <span class="w-2.5 h-2.5 rounded-full bg-[#0b8cff] animate-pulse-dot3" />

  225.                 </div>

  226.                 <div class="text-sm font-bold text-[#172033]">正在整理名字方案</div>

  227.               </div>

  228.             </div>

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

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

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

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

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

  234.             </div>

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

  236.               <UIcon name="i-lucide-search-x" class="size-12 text-[#a0aabb] mb-3 mx-auto" />

  237.               <div class="text-base font-bold text-[#172033] mb-1">本次没有可用名字</div>

  238.               <div class="text-sm text-[#7f8896] max-w-xs mx-auto">{{ result.summary || 'AI 返回的候选名未通过姓名可用性筛选，请调整条件或重新生成。' }}</div>

  239.               <UButton color="primary" size="sm" class="mt-5" @click="handleSubmit">重新生成</UButton>

  240.             </div>

  241.             <template v-if="resultState.success">

  242.               <div v-if="result.summary" class="bg-white rounded-2xl p-5 lg:p-6 shadow-sm">

  243.                 <div class="text-sm text-[#596579] leading-relaxed">{{ result.summary }}</div>

  244.               </div>

  245.               <div v-for="(item, idx) in result.names" :key="idx" class="bg-white rounded-2xl p-5 lg:p-6 shadow-sm">

  246.                 <div class="flex items-center justify-between mb-2">

  247.                   <span class="text-2xl lg:text-3xl font-bold text-[#0b8cff]">{{ item.name }}</span>

  248.                   <span v-if="item.score" class="text-lg font-bold text-[#ff8a00]">{{ item.score }}分</span>

  249.                 </div>

  250.                 <div v-if="item.pinyin" class="text-xs text-[#7f8896] mb-3">{{ item.pinyin }}</div>

  251.                 <div class="space-y-2.5">

  252.                   <div v-for="field in nameFields" :key="field.key">

  253.                     <div v-if="item[field.key]" class="flex items-start gap-2.5">

  254.                       <span class="flex-shrink-0 inline-flex items-center justify-center h-[26px] px-2 rounded-full bg-[#eef6ff] text-[#0b8cff] text-[11px] font-medium">{{ field.label }}</span>

  255.                       <span class="text-sm text-[#172033] leading-relaxed pt-0.5">{{ item[field.key] }}</span>

  256.                     </div>

  257.                   </div>

  258.                 </div>

  259.               </div>

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

  261.                 <UButton color="primary" variant="outline" size="lg" class="flex-1 !rounded-full" :loading="submitting" @click="handleSubmit">重新生成</UButton>

  262.                 <UButton color="primary" size="lg" class="flex-1 !rounded-full" @click="copyResult">复制结果</UButton>

  263.               </div>

  264.             </template>

  265.           </div>

  266.         </div>

  267.       </div>

  268.     </div>

  269. 

  270.     <!-- ========== Mobile Bottom Bar (fixed) ========== -->

  271.     <div class="lg:hidden fixed left-0 right-0 bottom-0 z-50 bg-white/95 backdrop-blur shadow-[0_-8px_24px_rgba(35,55,90,0.08)]"

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

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

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

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

  276.       </div>

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

  278.         <button class="w-[120px] h-12 rounded-full bg-[#eef6ff] text-[#0b8cff] text-sm font-bold" @click="goHistory">历史记录</button>

  279.         <button class="flex-1 h-12 rounded-full text-white font-bold shadow-[0_12px_24px_rgba(11,140,255,0.2)] transition-opacity"

  280.           :class="(canSubmit && !submitting) ? 'bg-[#0b8cff]' : 'bg-[#0b8cff] opacity-60'"

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

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

  283.         </button>

  284.       </div>

  285.     </div>

  286. 

  287.     <!-- ========== Date Picker Modal (custom calendar grid) ========== -->

  288.     <Teleport to="body">

  289.       <Transition name="modal">

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

  291.           <div class="absolute inset-0 bg-black/50" @click="dateOpen = false" />

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

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

  294.               <h3 class="text-base font-extrabold text-[#172033]">选择出生日期</h3>

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

  296.             </div>

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

  298.               <div class="flex items-center justify-between mb-4">

  299.                 <button type="button" class="w-9 h-9 rounded-full hover:bg-gray-100 flex items-center justify-center text-[#172033]" @click="prevMonth">

  300.                   <UIcon name="i-lucide-chevron-left" class="size-5" />

  301.                 </button>

  302.                 <div class="text-base font-extrabold text-[#172033]">{{ calendarYear }}年{{ calendarMonth }}月</div>

  303.                 <button type="button" class="w-9 h-9 rounded-full hover:bg-gray-100 flex items-center justify-center text-[#172033] disabled:opacity-30 disabled:cursor-not-allowed" :disabled="isNextMonthDisabled" @click="nextMonth">

  304.                   <UIcon name="i-lucide-chevron-right" class="size-5" />

  305.                 </button>

  306.               </div>

  307.               <div class="grid grid-cols-7 gap-1 text-center text-xs text-[#7f8896] mb-2">

  308.                 <div v-for="dow in ['日', '一', '二', '三', '四', '五', '六']" :key="dow" class="h-8 flex items-center justify-center">{{ dow }}</div>

  309.               </div>

  310.               <div class="grid grid-cols-7 gap-1">

  311.                 <button v-for="day in calendarDays" :key="day.key" type="button"

  312.                   class="aspect-square flex items-center justify-center text-sm rounded-full transition-colors relative"

  313.                   :class="{

  314.                     'text-[#cbd5e1]': day.otherMonth && !day.isSelected,

  315.                     'text-[#172033] hover:bg-gray-100': !day.otherMonth && !day.isSelected && !day.isToday && !day.disabled,

  316.                     'ring-1 ring-[#0b8cff] text-[#0b8cff] font-bold': day.isToday && !day.isSelected,

  317.                     'bg-[#0b8cff] text-white font-bold': day.isSelected,

  318.                     'opacity-30 cursor-not-allowed': day.disabled,

  319.                   }"

  320.                   :disabled="day.disabled"

  321.                   @click="selectDay(day)">

  322.                   {{ day.day }}

  323.                 </button>

  324.               </div>

  325.               <div class="mt-4 text-center text-xs text-[#7f8896]">小贴士：可选过去日期，今日及之前可选</div>

  326.             </div>

  327.             <div class="flex gap-3 px-5 py-4 border-t border-gray-100">

  328.               <button type="button" class="flex-1 h-11 rounded-full border border-gray-200 text-[#596579] font-bold hover:bg-gray-50" @click="dateOpen = false">取消</button>

  329.               <button type="button" class="flex-1 h-11 rounded-full bg-[#0b8cff] text-white font-bold hover:bg-[#0a7ce0]" @click="confirmDate">确定</button>

  330.             </div>

  331.           </div>

  332.         </div>

  333.       </Transition>

  334.     </Teleport>

  335. 

  336.     <!-- ========== Time Picker Modal (UInputTime) ========== -->

  337.     <Teleport to="body">

  338.       <Transition name="modal">

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

  340.           <div class="absolute inset-0 bg-black/50" @click="timeOpen = false" />

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

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

  343.               <h3 class="text-base font-extrabold text-[#172033]">选择出生时分</h3>

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

  345.             </div>

  346.             <div class="p-6">

  347.               <UInputTime v-model="tempTimeValue" class="w-full" />

  348.               <div class="mt-4 text-center text-xs text-[#7f8896]">不确定时辰？点下方"不知道具体时间"</div>

  349.             </div>

  350.             <div class="flex gap-3 px-5 py-4 border-t border-gray-100">

  351.               <button type="button" class="flex-1 h-11 rounded-full border border-gray-200 text-[#0b8cff] font-bold hover:bg-gray-50" @click="timeUnknownPick">不知道具体时间</button>

  352.               <button type="button" class="flex-1 h-11 rounded-full bg-[#0b8cff] text-white font-bold hover:bg-[#0a7ce0]" @click="confirmTime">确定</button>

  353.             </div>

  354.           </div>

  355.         </div>

  356.       </Transition>

  357.     </Teleport>

  358.   </div>

  359. </template>

  360. 

  361. <script setup>

  362. import { ref, reactive, computed, watch, onMounted } from 'vue'

  363. import { Time } from '@internationalized/date'

  364. 

  365. const _api = useApi()

  366. const api = _api  // _api 是 { get, post, request }，别名保持 api.post(...) 调用

  367. const user = useUser()

  368. const router = useRouter()

  369. const toast = useToast()

  370. 

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

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

  373. }

  374. 

  375. // ==================== Options (对齐 V2) ====================

  376. const genderOptions = [

  377.   { label: '男孩', value: 1 },

  378.   { label: '女孩', value: 2 },

  379. ]

  380. const sourceOptions = [

  381.   { id: '0', label: '不限', desc: '综合推荐' },

  382.   { id: '1', label: '诗经', desc: '温润雅致' },

  383.   { id: '2', label: '楚辞', desc: '浪漫开阔' },

  384.   { id: '3', label: '离骚', desc: '清朗有骨' },

  385.   { id: '4', label: '周易', desc: '稳重含蓄' },

  386.   { id: '5', label: '史记', desc: '大气有典' },

  387.   { id: '6', label: '诗词歌赋', desc: '文采舒展' },

  388.   { id: '7', label: '成语典故', desc: '寓意明确' },

  389.   { id: '8', label: '佛教', desc: '清净平和' },

  390.   { id: '9', label: '道教', desc: '自然洒脱' },

  391.   { id: '10', label: '自然景观', desc: '明亮灵动' },

  392. ]

  393. const wordOptions = [

  394.   { id: '0', label: '不限' }, { id: '2', label: '2字' }, { id: '3', label: '3字' },

  395.   { id: '4', label: '4字' }, { id: '5', label: '5字' },

  396. ]

  397. const redupOptions = [

  398.   { id: '0', label: '不限' }, { id: '1', label: '是' }, { id: '2', label: '否' },

  399. ]

  400. const nameFields = [

  401.   { key: 'source', label: '出处' }, { key: 'wuxing', label: '五行' },

  402.   { key: 'meaning', label: '寓意' }, { key: 'tone', label: '音律' }, { key: 'reason', label: '推荐' },

  403. ]

  404. 

  405. // ==================== Form ====================

  406. const form = reactive({

  407.   surname: '', sex: 0, name_source: '0', words_num: '0',

  408.   is_redup: '0', special_word: '', content: '',

  409.   birth_date: '', birth_clock: '', birth_time_unknown: 1,

  410. })

  411. const sourceExpanded = ref(false)

  412. const visibleSourceOptions = computed(() => {

  413.   if (sourceExpanded.value) return sourceOptions

  414.   const selected = sourceOptions.find(i => i.id === form.name_source)

  415.   const rows = [sourceOptions[0]]

  416.   if (selected && selected.id !== '0') rows.push(selected)

  417.   sourceOptions.slice(1).forEach(i => { if (rows.length < 5 && !rows.some(r => r.id === i.id)) rows.push(i) })

  418.   return rows

  419. })

  420. 

  421. // ==================== Birth Info ====================

  422. const birthInfoIgnored = ref(false)

  423. const birthDate = ref('')

  424. const birthClock = ref('')

  425. const birthTimeUnknown = ref(true)

  426. const dateOpen = ref(false)

  427. const timeOpen = ref(false)

  428. const tempTimeValue = ref(new Time(8, 0))

  429. 

  430. // Custom calendar grid

  431. const todayDate = new Date()

  432. const calendarYear = ref(todayDate.getFullYear())

  433. const calendarMonth = ref(todayDate.getMonth() + 1)

  434. const pendingDay = ref(null) // 用户在网格里点击但未确认的日期

  435. 

  436. const calendarDays = computed(() => {

  437.   const year = calendarYear.value

  438.   const month = calendarMonth.value

  439.   const firstDayOfWeek = new Date(year, month - 1, 1).getDay() // 0=Sun

  440.   const daysInMonth = new Date(year, month, 0).getDate()

  441.   const daysInPrevMonth = new Date(year, month - 1, 0).getDate()

  442.   const todayStr = formatYMD(todayDate)

  443.   const currentPending = pendingDay.value

  444. 

  445.   const days = []

  446.   // 上月填充

  447.   for (let i = firstDayOfWeek - 1; i >= 0; i--) {

  448.     const d = daysInPrevMonth - i

  449.     const dateStr = formatYMD(year, month - 1, d)

  450.     days.push({ key: `prev-${dateStr}`, day: d, otherMonth: true, date: dateStr, disabled: true, isToday: false, isSelected: false })

  451.   }

  452.   // 当月

  453.   for (let d = 1; d <= daysInMonth; d++) {

  454.     const dateStr = formatYMD(year, month, d)

  455.     const isFuture = dateStr > todayStr

  456.     const isSelected = !!currentPending && currentPending === dateStr

  457.     days.push({

  458.       key: `cur-${dateStr}`, day: d, otherMonth: false, date: dateStr,

  459.       disabled: isFuture, isToday: dateStr === todayStr, isSelected,

  460.     })

  461.   }

  462.   // 下月填充至 42 格

  463.   let nextDay = 1

  464.   while (days.length < 42) {

  465.     const dateStr = formatYMD(year, month + 1, nextDay)

  466.     days.push({ key: `next-${dateStr}`, day: nextDay, otherMonth: true, date: dateStr, disabled: true, isToday: false, isSelected: false })

  467.     nextDay++

  468.   }

  469.   return days

  470. })

  471. 

  472. const isNextMonthDisabled = computed(() => {

  473.   const today = new Date()

  474.   return calendarYear.value > today.getFullYear() ||

  475.     (calendarYear.value === today.getFullYear() && calendarMonth.value >= today.getMonth() + 1)

  476. })

  477. 

  478. function formatYMD(year, month, day) {

  479.   const m = month < 0 ? 12 : month > 12 ? 1 : month

  480.   return `${year}-${String(m).padStart(2, '0')}-${String(day).padStart(2, '0')}`

  481. }

  482. 

  483. function prevMonth() {

  484.   if (calendarMonth.value === 1) { calendarMonth.value = 12; calendarYear.value-- }

  485.   else calendarMonth.value--

  486. }

  487. function nextMonth() {

  488.   if (isNextMonthDisabled.value) return

  489.   if (calendarMonth.value === 12) { calendarMonth.value = 1; calendarYear.value++ }

  490.   else calendarMonth.value++

  491. }

  492. function selectDay(day) {

  493.   if (day.disabled) return

  494.   pendingDay.value = day.date

  495. }

  496. function toggleBirthInfo() {

  497.   birthInfoIgnored.value = !birthInfoIgnored.value

  498.   syncBirthFields()

  499. }

  500. function toggleBirthTimeUnknown() {

  501.   if (birthInfoIgnored.value) return

  502.   birthTimeUnknown.value = !birthTimeUnknown.value

  503.   if (birthTimeUnknown.value) birthClock.value = ''

  504.   syncBirthFields()

  505. }

  506. function openDatePicker() {

  507.   if (birthInfoIgnored.value) return

  508.   if (birthDate.value) {

  509.     const p = birthDate.value.split('-')

  510.     calendarYear.value = +p[0]

  511.     calendarMonth.value = +p[1]

  512.     pendingDay.value = birthDate.value

  513.   } else {

  514.     calendarYear.value = todayDate.getFullYear()

  515.     calendarMonth.value = todayDate.getMonth() + 1

  516.     pendingDay.value = null

  517.   }

  518.   dateOpen.value = true

  519. }

  520. function confirmDate() {

  521.   if (pendingDay.value) {

  522.     birthDate.value = pendingDay.value

  523.     syncBirthFields()

  524.   }

  525.   dateOpen.value = false

  526. }

  527. function openTimePicker() {

  528.   if (birthInfoIgnored.value) return

  529.   const clock = birthClock.value || '08:00'

  530.   const [h, m] = clock.split(':')

  531.   tempTimeValue.value = new Time(+h, +m)

  532.   timeOpen.value = true

  533. }

  534. function confirmTime() {

  535.   const t = tempTimeValue.value

  536.   if (t) {

  537.     birthClock.value = `${String(t.hour).padStart(2, '0')}:${String(t.minute).padStart(2, '0')}`

  538.     birthTimeUnknown.value = false

  539.     syncBirthFields()

  540.   }

  541.   timeOpen.value = false

  542. }

  543. function timeUnknownPick() {

  544.   birthTimeUnknown.value = true

  545.   birthClock.value = ''

  546.   syncBirthFields()

  547.   timeOpen.value = false

  548. }

  549. function syncBirthFields() {

  550.   if (birthInfoIgnored.value) {

  551.     form.birth_date = ''; form.birth_clock = ''; form.birth_time_unknown = 1

  552.     return

  553.   }

  554.   form.birth_date = birthDate.value || ''

  555.   form.birth_clock = birthTimeUnknown.value ? '' : (birthClock.value || '')

  556.   form.birth_time_unknown = birthTimeUnknown.value ? 1 : 0

  557. }

  558. 

  559. const birthClockText = computed(() => {

  560.   if (birthTimeUnknown.value) return '不知道具体时间'

  561.   return birthClock.value || '请选择时分'

  562. })

  563. const previewName = '白敬亭'

  564. 

  565. // 农历

  566. const birthLunarText = ref('')

  567. watch(birthDate, async (val) => {

  568.   if (!val) { birthLunarText.value = ''; return }

  569.   try {

  570.     const { Solar } = await import('lunar-javascript')

  571.     const p = val.split('-')

  572.     const lunar = Solar.fromYmd(+p[0], +p[1], +p[2]).getLunar()

  573.     birthLunarText.value = `农历${lunar.getYearInGanZhi()}年 ${lunar.getMonthInChinese()}${lunar.getDayInChinese()}`

  574.   } catch { birthLunarText.value = '' }

  575. }, { immediate: true })

  576. 

  577. // ==================== Billing & Submit ====================

  578. const billing = reactive({ loaded: false, points: 0 })

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

  580. async function loadBilling() {

  581.   try {

  582.     const res = await api.post('/billing/config', { app_key: 'ai-name' })

  583.     if (res.code === 0 && res.data) {

  584.       billing.points = res.data.quote?.points || res.data.points || 0

  585.       if (res.data.balance) balance.points = res.data.balance.points || res.data.balance.point_balance || 0

  586.     }

  587.   } catch {} finally { billing.loaded = true }

  588. }

  589. async function loadBalance() {

  590.   try {

  591.     const res = await api.post('/user/getbalance', {})

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

  593.   } catch {}

  594. }

  595. onMounted(() => { loadBilling(); if (user.isLogin.value) loadBalance() })

  596. 

  597. const submitting = ref(false)

  598. const questionTitle = ref('')

  599. const canSubmit = computed(() => !!form.surname && !submitting.value)

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

  601.   const cost = Number(billing.points || 0)

  602.   if (!user.isLogin.value) return cost ? `AI取名 · ${cost}点/次` : 'AI取名'

  603.   return cost ? `余额${balance.points}点 · 预计消耗${cost}点` : `余额${balance.points}点`

  604. })

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

  606.   const cost = Number(billing.points || 0)

  607.   if (!user.isLogin.value) return cost ? `登录后取名 · ${cost}点` : '登录后取名'

  608.   return cost ? `立即取名 · ${cost}点` : '立即取名'

  609. })

  610. const isBalanceInsufficient = computed(() => {

  611.   const cost = Number(billing.points || 0)

  612.   return user.isLogin.value && cost > 0 && balance.points >= 0 && balance.points < cost

  613. })

  614. 

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

  616. const result = ref({ summary: '', names: [] })

  617. 

  618. async function handleSubmit() {

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

  620.   if (!form.surname) { showToast('请输入姓氏'); return }

  621.   if (submitting.value) return

  622.   syncBirthFields()

  623.   submitting.value = true

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

  625.   result.value = { summary: '', names: [] }

  626.   questionTitle.value = `${form.surname}${form.sex === 2 ? '女孩' : form.sex === 1 ? '男孩' : ''}好名字`

  627. 

  628.   const params = {

  629.     surname: form.surname, sex: form.sex, name_source: form.name_source,

  630.     words_num: form.words_num, is_redup: form.is_redup, special_word: form.special_word,

  631.     content: form.content, model: 4,

  632.     birth_date: form.birth_date, birth_clock: form.birth_clock, birth_time_unknown: form.birth_time_unknown,

  633.   }

  634. 

  635.   try {

  636.     const res = await api.post('/ainame/send', params)

  637.     if (res.code === 1011) {

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

  639.       return

  640.     }

  641.     if (res.code !== 0) {

  642.       resultState.value = { ...resultState.value, loading: false, error: true, errorMsg: res.msg || '生成失败' }

  643.       return

  644.     }

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

  646.     const parsed = parseResult(data.content || data)

  647.     if (parsed.names && parsed.names.length > 0) {

  648.       result.value = parsed

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

  650.     } else {

  651.       result.value = parsed

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

  653.     }

  654.   } catch (e) {

  655.     resultState.value = { ...resultState.value, loading: false, error: true, errorMsg: e.msg || '网络异常，请重试' }

  656.   } finally { submitting.value = false }

  657. }

  658. 

  659. function parseResult(content) {

  660.   if (!content) return { summary: '', names: [] }

  661.   let text = String(content).trim().replace(/^```json\s*/i, '').replace(/^```\s*/i, '').replace(/```$/i, '').trim()

  662.   const line = parseJsonLines(text); if (line.names.length) return line

  663.   const marked = parseMarkedText(text); if (marked.names.length) return marked

  664.   const s = text.indexOf('{'), e = text.lastIndexOf('}')

  665.   if (s >= 0 && e > s) text = text.substring(s, e + 1)

  666.   try { const d = JSON.parse(text); return { summary: d.summary || '', names: Array.isArray(d.names) ? d.names : [] } }

  667.   catch { return { summary: text, names: [] } }

  668. }

  669. function parseJsonLines(text) {

  670.   const d = { summary: '', names: [] }

  671.   String(text || '').split(/\r?\n/).forEach(l => { l = l.trim(); if (!l) return; try { const i = JSON.parse(l); if (i.type === 'summary') d.summary = i.content || ''; if (i.type === 'name' && i.data) d.names.push(i.data) } catch {} })

  672.   return d

  673. }

  674. function parseMarkedText(text) {

  675.   const d = { summary: '', names: [] }; const v = String(text || '')

  676.   const sm = v.match(/整体建议[:：]([\s\S]*?)(?=\n\s*【|$)/); if (sm) d.summary = sm[1].trim()

  677.   const reg = /【([^】]+)】([\s\S]*?)(?=\n\s*【|$)/g; let m

  678.   while ((m = reg.exec(v))) {

  679.     const body = m[2] || '', name = resolveNameBlockTitle(m[1], body)

  680.     d.names.push({ name, pinyin: mf(body, '拼音'), score: parseInt(mf(body, '评分')) || 90, source: mf(body, '出处'), wuxing: mf(body, '五行'), meaning: mf(body, '寓意'), tone: mf(body, '音律'), reason: mf(body, '推荐') })

  681.   }

  682.   d.names = d.names.filter(i => i.name).slice(0, 5); return d

  683. }

  684. function resolveNameBlockTitle(title, body) {

  685.   const n = String(title || '').trim(); if (!['姓名', '名字', '候选名'].includes(n)) return n

  686.   const fr = /^(拼音|评分|出处|五行|寓意|音律|推荐)[:：]/; const line = String(body || '').split(/\r?\n/).map(i => i.trim()).find(i => i && !fr.test(i))

  687.   return line ? line.replace(/^姓名[:：]/, '').trim() : n

  688. }

  689. function mf(body, label) { const r = new RegExp(`${label}[:：]([^\\n\\r]*)`); const m = String(body || '').match(r); return m ? m[1].trim() : '' }

  690. 

  691. function copyResult() {

  692.   const names = result.value.names || []

  693.   if (!names.length) { showToast('暂无可复制内容'); return }

  694.   const lines = []

  695.   if (result.value.summary) lines.push(result.value.summary)

  696.   names.forEach(item => {

  697.     lines.push(`${item.name}${item.score ? `（${item.score}分）` : ''}`)

  698.     if (item.pinyin) lines.push(`拼音：${item.pinyin}`)

  699.     if (item.source) lines.push(`出处：${item.source}`)

  700.     if (item.wuxing) lines.push(`五行：${item.wuxing}`)

  701.     if (item.meaning) lines.push(`寓意：${item.meaning}`)

  702.     if (item.tone) lines.push(`音律：${item.tone}`)

  703.     if (item.reason) lines.push(`推荐：${item.reason}`)

  704.     lines.push('')

  705.   })

  706.   navigator.clipboard.writeText(lines.join('\n')).then(() => showToast('复制成功', 'primary')).catch(() => showToast('复制失败'))

  707. }

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

  709. function goHistory() { router.push('/ai-name-history') }

  710. </script>

  711. 

  712. <style scoped>

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

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

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

  716. @keyframes dotPulse {

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

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

  719. }

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

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

  722. .modal-enter-active > div:last-child, .modal-leave-active > div:last-child { transition: transform 0.2s ease; }

  723. .modal-enter-from > div:last-child, .modal-leave-to > div:last-child { transform: scale(0.95); }

  724. </style>