leiyun
/
pc_nuxt
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4 Commits
1 Branch
586 KiB
 
 
 
 
Tree: 13c838bad7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '13c838bad7'
${ noResults }
pc_nuxt/app/pages/writing/naming.vue

1014 lines
56 KiB
Raw Blame History 

  1. <template>

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

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

  4.     <AppHero

  5.       kicker="AI NAME STUDIO"

  6.       title="给宝宝取一个有出处的好名字"

  7.       desc="结合姓氏、性别、诗词典故和音律寓意，生成可直接挑选的名字方案。"

  8.     >

  9.       <template #actions>

  10.         <button

  11.           type="button"

  12.           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-0b8cff)] shadow-sm transition-colors hover:bg-[var(--c-f7faff)]"

  13.           @click="historyOpen = true"

  14.         >

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

  16.           历史记录

  17.         </button>

  18.       </template>

  19.       <template #aside>

  20.         <div class="hidden w-[260px] lg:block">

  21.           <div class="rounded-3xl border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)]/80 p-5 shadow-[0_18px_34px_var(--sh-0-92-190-100)] backdrop-blur">

  22.             <div class="text-3xl font-extrabold text-[var(--c-0b8cff)]">{{ previewName }}</div>

  23.             <div class="mt-1.5 text-xs text-[var(--c-8a97a8)]">李白《独坐敬亭山》</div>

  24.           </div>

  25.           <div class="mt-3 flex h-12 items-center justify-between rounded-2xl border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)]/70 px-4 text-xs font-bold text-[var(--c-66758a)] backdrop-blur">

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

  27.           </div>

  28.         </div>

  29.       </template>

  30.     </AppHero>

  31. 

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

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

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

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

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

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

  38.           <div class="bg-[var(--c-ffffff)] rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_var(--sh-34-68-112-50)]">

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

  40.               <h3 class="text-base lg:text-lg font-extrabold text-[var(--c-172033)]">基础信息</h3>

  41.               <span class="ml-auto text-xs text-[var(--c-8a95a6)]">必填</span>

  42.             </div>

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

  44.             <div class="flex items-stretch gap-3 rounded-2xl bg-[var(--c-f6f9fe)] p-3.5">

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

  46.                 <label class="block text-sm font-bold text-[var(--c-172033)]">姓氏</label>

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

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

  49.               </div>

  50.               <div class="w-[180px] flex-shrink-0 p-1.5 rounded-[28px] bg-[var(--c-ffffff)] shadow-[inset_0_0_0_1px_var(--c-edf2f7)] flex">

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

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

  53.                   :class="form.sex === opt.value ? 'bg-[var(--c-0b8cff)] text-white' : 'text-[var(--c-7f8896)]'"

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

  55.               </div>

  56.             </div>

  57. 

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

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

  60.               :class="birthInfoIgnored ? 'bg-[var(--c-f7f9fd)] border-[var(--c-edf2f7)]' : 'bg-[var(--c-eff8ff)] border-[var(--c-0b8cff)]/20'">

  61.               <div class="flex items-center p-4">

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

  63.                   <div class="text-sm font-extrabold text-[var(--c-172033)]">参考出生信息</div>

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

  65.                 </div>

  66.                 <button

  67.                   type="button"

  68.                   class="ml-3 h-7 w-[60px] flex-shrink-0 rounded-full p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2"

  69.                   :class="!birthInfoIgnored ? 'bg-[var(--c-0b8cff)]' : 'bg-[var(--c-d7deea)]'"

  70.                   :aria-pressed="!birthInfoIgnored"

  71.                   aria-label="切换参考出生信息"

  72.                   @click="toggleBirthInfo"

  73.                 >

  74.                   <div class="w-5 h-5 rounded-full bg-[var(--c-ffffff)] shadow transition-transform"

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

  76.                 </button>

  77.               </div>

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

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

  80.                   <div class="rounded-2xl bg-[var(--c-f6f9fe)] p-4 flex items-start justify-between cursor-pointer min-h-[88px]"

  81.                     @click="openDatePicker">

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

  83.                       <div class="text-sm font-bold text-[var(--c-172033)]">出生日期</div>

  84.                       <div class="mt-2 text-sm text-[var(--c-7f8896)]">{{ birthDate || '请选择日期' }}</div>

  85.                     </div>

  86.                     <span class="ml-2 text-2xl text-[var(--c-a0aabb)] leading-none flex-shrink-0">›</span>

  87.                   </div>

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

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

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

  91.                       <div class="text-sm font-bold text-[var(--c-172033)]">出生时分</div>

  92.                       <div class="mt-2 text-sm text-[var(--c-7f8896)]">{{ birthClockText }}</div>

  93.                     </div>

  94.                     <span class="ml-2 text-2xl text-[var(--c-a0aabb)] leading-none flex-shrink-0">›</span>

  95.                   </div>

  96.                 </div>

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

  98.                 <div v-if="birthLunarText" class="rounded-2xl bg-[var(--c-eff8ff)] p-4 flex items-center">

  99.                   <span class="mr-3 px-3 py-0.5 rounded-full bg-[var(--c-ffffff)] text-[var(--c-0b8cff)] text-xs font-extrabold flex-shrink-0">农历</span>

  100.                   <span class="text-sm font-bold text-[var(--c-3a5878)] min-w-0">{{ birthLunarText }}</span>

  101.                 </div>

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

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

  104.                   :class="birthTimeUnknown ? 'bg-[var(--c-eff8ff)] border-[var(--c-0b8cff)] text-[var(--c-0b8cff)]' : 'bg-[var(--c-f6f9fe)] border-transparent text-[var(--c-7f8896)]'"

  105.                   @click="toggleBirthTimeUnknown">

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

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

  108.                 </div>

  109.               </div>

  110.             </div>

  111.           </div>

  112. 

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

  114.           <div class="bg-[var(--c-ffffff)] rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_var(--sh-34-68-112-50)]">

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

  116.               <h3 class="text-base lg:text-lg font-extrabold text-[var(--c-172033)]">名字出处</h3>

  117.               <span class="ml-auto text-xs text-[var(--c-8a95a6)]">选择偏好的文化来源</span>

  118.             </div>

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

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

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

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

  123.                   ? 'bg-[var(--c-eff8ff)] border-[var(--c-0b8cff)] shadow-[0_8px_20px_var(--sh-11-140-255-100)]'

  124.                   : 'bg-[var(--c-f7f9fd)] border-transparent hover:border-[var(--c-e7edf5)]'"

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

  126.                 <div class="text-sm font-extrabold text-[var(--c-172033)] text-center">{{ src.label }}</div>

  127.                 <div class="mt-1 text-[11px] text-[var(--c-8a95a6)] text-center">{{ src.desc }}</div>

  128.               </button>

  129.               <button type="button"

  130.                 class="min-h-[72px] p-3 rounded-2xl border-2 bg-[var(--c-ffffff)] border-[var(--c-e7edf5)] hover:border-[var(--c-0b8cff)]/30 transition-all text-left"

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

  132.                 <div class="text-sm font-extrabold text-[var(--c-172033)] text-center">{{ sourceExpanded ? '收起' : '更多' }}</div>

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

  134.               </button>

  135.             </div>

  136.           </div>

  137. 

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

  139.           <div class="bg-[var(--c-ffffff)] rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_var(--sh-34-68-112-50)]">

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

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

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

  143.             </div>

  144. 

  145.             <!-- 字数 -->

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

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

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

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

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

  151.                   :class="form.words_num === wc.id ? 'bg-[var(--c-eff8ff)] border-[var(--c-0b8cff)] text-[var(--c-0b8cff)]' : 'bg-[var(--c-f6f9fe)] border-transparent text-[var(--c-596579)]'"

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

  153.               </div>

  154.             </div>

  155. 

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

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

  158.               <div class="text-sm font-bold text-[var(--c-172033)]">是否叠词</div>

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

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

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

  162.                   :class="form.is_redup === r.id ? 'bg-[var(--c-eff8ff)] border-[var(--c-0b8cff)] text-[var(--c-0b8cff)]' : 'bg-[var(--c-f6f9fe)] border-transparent text-[var(--c-596579)]'"

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

  164.               </div>

  165.             </div>

  166. 

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

  168.             <div class="mt-5 flex items-center rounded-2xl bg-[var(--c-f7f9fd)] p-4">

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

  170.                 <div class="text-sm font-bold text-[var(--c-172033)]">指定包含字</div>

  171.                 <div class="mt-1 text-xs text-[var(--c-8a95a6)]">可选，限制 1 个字</div>

  172.               </div>

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

  174.                 class="ml-auto w-24 h-12 rounded-2xl bg-[var(--c-ffffff)] text-center text-lg font-extrabold text-[var(--c-172033)] placeholder:text-[var(--c-a0aabb)] focus:outline-none focus:ring-2 focus:ring-[var(--c-0b8cff)]/30" />

  175.             </div>

  176. 

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

  178.             <div class="mt-4 rounded-2xl bg-[var(--c-f7f9fd)] p-4">

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

  180.                 <div>

  181.                   <div class="text-sm font-bold text-[var(--c-172033)]">补充描述</div>

  182.                   <div class="mt-1 text-xs text-[var(--c-8a95a6)]">额外要求、寓意和期望</div>

  183.                 </div>

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

  185.               </div>

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

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

  188.             </div>

  189.           </div>

  190. 

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

  192.           <div class="bg-[var(--c-ffffff)] rounded-2xl p-5 lg:p-6 shadow-[0_8px_28px_var(--sh-34-68-112-50)] space-y-4">

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

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

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

  196.             </div>

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

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

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

  200.             </div>

  201.           </div>

  202. 

  203.           <!-- Desktop Submit -->

  204.           <div class="hidden lg:flex items-center gap-3 rounded-2xl bg-[var(--c-ffffff)] p-4 shadow-[0_8px_28px_var(--sh-34-68-112-50)]">

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

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

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

  208.             </div>

  209.             <button type="button"

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

  211.               @click="historyOpen = true">

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

  213.               历史记录

  214.             </button>

  215.             <button type="button"

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

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

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

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

  220.             </button>

  221.           </div>

  222.         </div>

  223. 

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

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

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

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

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

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

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

  231.               <div class="text-sm text-[var(--c-a0aabb)]">填写左侧信息并点击"开始取名"</div>

  232.               <div class="text-sm text-[var(--c-a0aabb)]">AI将为您推荐最佳名字方案</div>

  233.             </div>

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

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

  236.               <div class="text-sm text-[var(--c-7f8896)] mb-6">AI 正在分析音律、寓意和出处，内容将实时显示...</div>

  237.               <div v-if="streamContent" ref="streamPreviewRef" class="max-h-[420px] overflow-y-auto rounded-2xl bg-[var(--c-f7f9fd)] p-4 text-sm leading-7 text-[var(--c-334155)] whitespace-pre-wrap break-words">

  238.                 {{ streamContent }}<span class="ml-1 inline-block h-4 w-1.5 animate-pulse rounded-sm bg-[var(--c-0b8cff)] align-middle" />

  239.               </div>

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

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

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

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

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

  245.                 </div>

  246.                 <div class="text-sm font-bold text-[var(--c-172033)]">正在整理名字方案</div>

  247.               </div>

  248.             </div>

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

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

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

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

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

  254.             </div>

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

  256.               <UIcon name="i-lucide-search-x" class="size-12 text-[var(--c-a0aabb)] mb-3 mx-auto" />

  257.               <div class="text-base font-bold text-[var(--c-172033)] mb-1">本次没有可用名字</div>

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

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

  260.             </div>

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

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

  263.                 <div class="text-sm text-[var(--c-596579)] leading-relaxed">{{ result.summary }}</div>

  264.               </div>

  265.               <div v-for="(item, idx) in result.names" :key="idx" class="bg-[var(--c-ffffff)] rounded-2xl p-5 lg:p-6 shadow-sm">

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

  267.                   <span class="text-2xl lg:text-3xl font-bold text-[var(--c-0b8cff)]">{{ item.name }}</span>

  268.                   <span v-if="item.score" class="text-lg font-bold text-[var(--c-ff8a00)]">{{ item.score }}分</span>

  269.                 </div>

  270.                 <div v-if="item.pinyin" class="text-xs text-[var(--c-7f8896)] mb-3">{{ item.pinyin }}</div>

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

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

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

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

  275.                       <span class="text-sm text-[var(--c-172033)] leading-relaxed pt-0.5">{{ item[field.key] }}</span>

  276.                     </div>

  277.                   </div>

  278.                 </div>

  279.               </div>

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

  281.                 <button

  282.                   type="button"

  283.                   class="flex h-12 flex-1 items-center justify-center gap-2 rounded-full border border-[var(--c-0b8cff)] bg-[var(--c-ffffff)] px-5 text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-eef7ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"

  284.                   :disabled="submitting"

  285.                   @click="handleSubmit"

  286.                 >

  287.                   <UIcon v-if="submitting" name="i-lucide-loader-circle" class="size-4 animate-spin" />

  288.                   <UIcon v-else name="i-lucide-refresh-cw" class="size-4" />

  289.                   {{ submitting ? '生成中...' : '重新生成' }}

  290.                 </button>

  291.                 <button

  292.                   type="button"

  293.                   class="flex h-12 flex-1 items-center justify-center gap-2 rounded-full bg-[var(--c-0b8cff)] px-5 text-sm font-bold text-white shadow-[0_10px_22px_var(--sh-11-140-255-200)] transition-colors hover:bg-[var(--c-0a7ce0)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2"

  294.                   @click="copyResult"

  295.                 >

  296.                   <UIcon name="i-lucide-copy" class="size-4" />

  297.                   复制结果

  298.                 </button>

  299.               </div>

  300.             </template>

  301.           </div>

  302.         </div>

  303.       </div>

  304.     </div>

  305. 

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

  307.     <div class="lg:hidden fixed left-0 right-0 bottom-0 z-50 bg-[var(--c-ffffff)]/95 backdrop-blur shadow-[0_-8px_24px_var(--sh-35-55-90-80)]"

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

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

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

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

  312.       </div>

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

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

  315.         <button class="flex-1 h-12 rounded-full text-white font-bold shadow-[0_12px_24px_var(--sh-11-140-255-200)] transition-opacity"

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

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

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

  319.         </button>

  320.       </div>

  321.     </div>

  322. 

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

  324.     <WorkHistoryDrawer v-model="historyOpen" type="ainame" @select="openHistoryItem" />

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

  326. 

  327.     <!-- ========== Date Picker Modal (solar + lunar calendar) ========== -->

  328.     <Teleport to="body">

  329.       <Transition name="modal">

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

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

  332.           <div

  333.             class="relative flex max-h-[92dvh] w-full max-w-md flex-col overflow-hidden rounded-t-3xl bg-[var(--c-ffffff)] shadow-2xl sm:rounded-2xl"

  334.             role="dialog"

  335.             aria-modal="true"

  336.             aria-labelledby="birth-date-dialog-title"

  337.           >

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

  339.               <h3 id="birth-date-dialog-title" class="text-base font-extrabold text-[var(--c-172033)]">选择出生日期</h3>

  340.               <button

  341.                 type="button"

  342.                 class="flex size-10 items-center justify-center rounded-full text-[var(--c-8793a5)] transition-colors hover:bg-[var(--c-f3f4f6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  343.                 aria-label="关闭日期选择"

  344.                 @click="dateOpen = false"

  345.               >

  346.                 <UIcon name="i-lucide-x" class="size-5" />

  347.               </button>

  348.             </div>

  349.             <div class="overflow-y-auto px-4 py-4 sm:px-5">

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

  351.                 <button type="button" class="flex size-11 items-center justify-center rounded-full text-[var(--c-172033)] transition-colors hover:bg-[var(--c-f3f4f6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] disabled:cursor-not-allowed disabled:opacity-30" aria-label="上一个月" :disabled="isPrevMonthDisabled" @click="prevMonth">

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

  353.                 </button>

  354.                 <div class="flex items-center gap-2" aria-label="选择年月">

  355.                   <label class="relative">

  356.                     <span class="sr-only">年份</span>

  357.                     <select

  358.                       v-model.number="calendarYear"

  359.                       class="h-10 appearance-none rounded-xl border border-[var(--c-dce4ee)] bg-[var(--c-ffffff)] py-0 pl-3 pr-8 text-sm font-extrabold text-[var(--c-172033)] outline-none transition focus:border-[var(--c-0b8cff)] focus:ring-2 focus:ring-[var(--c-0b8cff)]/15"

  360.                     >

  361.                       <option v-for="year in calendarYearOptions" :key="year" :value="year">{{ year }}年</option>

  362.                     </select>

  363.                     <UIcon name="i-lucide-chevron-down" class="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--c-8793a5)]" />

  364.                   </label>

  365.                   <label class="relative">

  366.                     <span class="sr-only">月份</span>

  367.                     <select

  368.                       v-model.number="calendarMonth"

  369.                       class="h-10 appearance-none rounded-xl border border-[var(--c-dce4ee)] bg-[var(--c-ffffff)] py-0 pl-3 pr-8 text-sm font-extrabold text-[var(--c-172033)] outline-none transition focus:border-[var(--c-0b8cff)] focus:ring-2 focus:ring-[var(--c-0b8cff)]/15"

  370.                     >

  371.                       <option

  372.                         v-for="month in calendarMonthOptions"

  373.                         :key="month"

  374.                         :value="month"

  375.                       >

  376.                         {{ month }}月

  377.                       </option>

  378.                     </select>

  379.                     <UIcon name="i-lucide-chevron-down" class="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--c-8793a5)]" />

  380.                   </label>

  381.                 </div>

  382.                 <button type="button" class="flex size-11 items-center justify-center rounded-full text-[var(--c-172033)] transition-colors hover:bg-[var(--c-f3f4f6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] disabled:cursor-not-allowed disabled:opacity-30" aria-label="下一个月" :disabled="isNextMonthDisabled" @click="nextMonth">

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

  384.                 </button>

  385.               </div>

  386.               <div class="grid grid-cols-7 gap-1 text-center text-xs text-[var(--c-7f8896)] mb-2">

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

  388.               </div>

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

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

  391.                   class="relative flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-0.5 text-sm transition-colors focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  392.                   :class="{

  393.                     'text-[var(--c-cbd5e1)]': day.otherMonth && !day.isSelected,

  394.                     'text-[var(--c-172033)] hover:bg-[var(--c-f3f4f6)]': !day.otherMonth && !day.isSelected && !day.isToday && !day.disabled,

  395.                     'ring-1 ring-[var(--c-0b8cff)] text-[var(--c-0b8cff)] font-bold': day.isToday && !day.isSelected,

  396.                     'bg-[var(--c-0b8cff)] text-white font-bold': day.isSelected,

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

  398.                   }"

  399.                   :disabled="day.disabled"

  400.                   :aria-label="day.ariaLabel"

  401.                   :aria-pressed="day.isSelected"

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

  403.                   <span class="leading-none">{{ day.day }}</span>

  404.                   <span

  405.                     v-if="day.lunar"

  406.                     class="max-w-full truncate text-[10px] font-normal leading-none"

  407.                     :class="day.isSelected ? 'text-white/90' : (day.lunar.special ? 'text-[var(--c-f06b3c)]' : 'text-[var(--c-8b96a8)]')"

  408.                   >

  409.                     {{ day.lunar.label }}

  410.                   </span>

  411.                 </button>

  412.               </div>

  413.               <div class="mt-4 flex items-center justify-center gap-2 text-xs text-[var(--c-7f8896)]">

  414.                 <span>日期下方为农历</span>

  415.                 <span class="size-1 rounded-full bg-[var(--c-cbd5e1)]" />

  416.                 <span>{{ calendarRangeText }}</span>

  417.               </div>

  418.             </div>

  419.             <div class="flex gap-3 px-5 py-4 border-t border-[var(--c-f3f4f6)]">

  420.               <button type="button" class="h-12 flex-1 rounded-full border border-[var(--c-e5e7eb)] text-[var(--c-596579)] font-bold transition-colors hover:bg-[var(--c-f9fafb)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]" @click="dateOpen = false">取消</button>

  421.               <button type="button" class="h-12 flex-1 rounded-full bg-[var(--c-0b8cff)] text-white font-bold transition-colors hover:bg-[var(--c-0a7ce0)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" :disabled="!pendingDay" @click="confirmDate">确定</button>

  422.             </div>

  423.           </div>

  424.         </div>

  425.       </Transition>

  426.     </Teleport>

  427. 

  428.     <!-- ========== Time Picker Modal (24-hour segmented selector) ========== -->

  429.     <Teleport to="body">

  430.       <Transition name="modal">

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

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

  433.           <div

  434.             class="relative w-full max-w-md overflow-hidden rounded-t-3xl bg-[var(--c-ffffff)] shadow-2xl sm:rounded-2xl"

  435.             role="dialog"

  436.             aria-modal="true"

  437.             aria-labelledby="birth-time-dialog-title"

  438.           >

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

  440.               <div>

  441.                 <h3 id="birth-time-dialog-title" class="text-base font-extrabold text-[var(--c-172033)]">选择出生时分</h3>

  442.                 <p class="mt-1 text-xs text-[var(--c-8793a5)]">使用 24 小时制</p>

  443.               </div>

  444.               <button

  445.                 type="button"

  446.                 class="flex size-10 items-center justify-center rounded-full text-[var(--c-8793a5)] transition-colors hover:bg-[var(--c-f3f4f6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  447.                 aria-label="关闭时间选择"

  448.                 @click="timeOpen = false"

  449.               >

  450.                 <UIcon name="i-lucide-x" class="size-5" />

  451.               </button>

  452.             </div>

  453.             <div class="p-5 sm:p-6">

  454.               <div class="mb-5 flex items-center justify-between rounded-2xl border border-[var(--c-dbeaff)] bg-[var(--c-f5faff)] px-4 py-3.5">

  455.                 <div>

  456.                   <div class="text-3xl font-black tabular-nums tracking-tight text-[var(--c-172033)]">{{ timePreviewText }}</div>

  457.                   <div class="mt-1 text-xs text-[var(--c-64748b)]">{{ shichenInfo.name }} · {{ shichenInfo.range }}</div>

  458.                 </div>

  459.                 <div class="flex size-11 items-center justify-center rounded-xl bg-[var(--c-ffffff)] text-[var(--c-0b8cff)] shadow-sm">

  460.                   <UIcon name="i-lucide-clock-3" class="size-5" />

  461.                 </div>

  462.               </div>

  463. 

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

  465.                 <label>

  466.                   <span class="mb-2 block text-sm font-bold text-[var(--c-596579)]">小时</span>

  467.                   <span class="relative block">

  468.                     <select

  469.                       v-model.number="tempHour"

  470.                       class="h-14 w-full appearance-none rounded-xl border border-[var(--c-dce4ee)] bg-[var(--c-ffffff)] px-4 pr-10 text-base font-bold tabular-nums text-[var(--c-172033)] outline-none transition focus:border-[var(--c-0b8cff)] focus:ring-2 focus:ring-[var(--c-0b8cff)]/15"

  471.                     >

  472.                       <option v-for="option in hourOptions" :key="option.value" :value="option.value">{{ option.label }}</option>

  473.                     </select>

  474.                     <UIcon name="i-lucide-chevron-down" class="pointer-events-none absolute right-3.5 top-1/2 size-5 -translate-y-1/2 text-[var(--c-8793a5)]" />

  475.                   </span>

  476.                 </label>

  477.                 <label>

  478.                   <span class="mb-2 block text-sm font-bold text-[var(--c-596579)]">分钟</span>

  479.                   <span class="relative block">

  480.                     <select

  481.                       v-model.number="tempMinute"

  482.                       class="h-14 w-full appearance-none rounded-xl border border-[var(--c-dce4ee)] bg-[var(--c-ffffff)] px-4 pr-10 text-base font-bold tabular-nums text-[var(--c-172033)] outline-none transition focus:border-[var(--c-0b8cff)] focus:ring-2 focus:ring-[var(--c-0b8cff)]/15"

  483.                     >

  484.                       <option v-for="option in minuteOptions" :key="option.value" :value="option.value">{{ option.label }}</option>

  485.                     </select>

  486.                     <UIcon name="i-lucide-chevron-down" class="pointer-events-none absolute right-3.5 top-1/2 size-5 -translate-y-1/2 text-[var(--c-8793a5)]" />

  487.                   </span>

  488.                 </label>

  489.               </div>

  490. 

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

  492.                 <div class="mb-2 text-xs font-medium text-[var(--c-8793a5)]">快捷选择分钟</div>

  493.                 <div class="grid grid-cols-4 gap-2">

  494.                   <button

  495.                     v-for="minute in quickMinuteOptions"

  496.                     :key="minute"

  497.                     type="button"

  498.                     class="h-11 rounded-xl border text-sm font-bold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  499.                     :class="tempMinute === minute ? 'border-[var(--c-0b8cff)] bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]' : 'border-[var(--c-e2e8f0)] text-[var(--c-596579)] hover:bg-[var(--c-f9fafb)]'"

  500.                     @click="tempMinute = minute"

  501.                   >

  502.                     :{{ padTime(minute) }}

  503.                   </button>

  504.                 </div>

  505.               </div>

  506. 

  507.               <button

  508.                 type="button"

  509.                 class="mt-5 flex min-h-12 w-full items-center justify-between rounded-xl bg-[var(--c-f6f8fb)] px-4 text-left transition-colors hover:bg-[var(--c-eef2f7)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"

  510.                 @click="timeUnknownPick"

  511.               >

  512.                 <span>

  513.                   <span class="block text-sm font-bold text-[var(--c-334155)]">不知道具体时间</span>

  514.                   <span class="mt-0.5 block text-xs text-[var(--c-8793a5)]">仍可继续生成，系统将不使用具体时辰</span>

  515.                 </span>

  516.                 <UIcon name="i-lucide-chevron-right" class="size-5 flex-none text-[var(--c-a0aabb)]" />

  517.               </button>

  518.             </div>

  519.             <div class="flex gap-3 px-5 py-4 border-t border-[var(--c-f3f4f6)]">

  520.               <button type="button" class="h-12 flex-1 rounded-full border border-[var(--c-e5e7eb)] text-[var(--c-596579)] font-bold transition-colors hover:bg-[var(--c-f9fafb)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]" @click="timeOpen = false">取消</button>

  521.               <button type="button" class="h-12 flex-1 rounded-full bg-[var(--c-0b8cff)] text-white font-bold transition-colors hover:bg-[var(--c-0a7ce0)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2" @click="confirmTime">确定</button>

  522.             </div>

  523.           </div>

  524.         </div>

  525.       </Transition>

  526.     </Teleport>

  527.   </div>

  528. </template>

  529. 

  530. <script setup>

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

  532. 

  533. const _api = useApi()

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

  535. 

  536. await useLegacyAppSeo({

  537.   appKey: 'naming',

  538.   fallbackTitle: 'AI取昵称-AI取名生成器-AI取名字大全免费查询',

  539.   fallbackDescription: '一个好的名字应该简洁明了，易于记忆和识别，AI取名可以通过你对海量的数据模型，给你的宝宝或者宠物取一个非常有特色的名字。',

  540.   fallbackKeywords: 'AI取名、AI取昵称、取名、取名字',

  541.   canonicalPath: '/writing/naming/',

  542. })

  543. 

  544. const user = useUser()

  545. const router = useRouter()

  546. const toast = useToast()

  547. 

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

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

  550. }

  551. 

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

  553. const genderOptions = [

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

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

  556. ]

  557. const sourceOptions = [

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

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

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

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

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

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

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

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

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

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

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

  569. ]

  570. const wordOptions = [

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

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

  573. ]

  574. const redupOptions = [

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

  576. ]

  577. const nameFields = [

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

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

  580. ]

  581. 

  582. // ==================== Form ====================

  583. const form = reactive({

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

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

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

  587. })

  588. const sourceExpanded = ref(false)

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

  590.   if (sourceExpanded.value) return sourceOptions

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

  592.   const rows = [sourceOptions[0]]

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

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

  595.   return rows

  596. })

  597. 

  598. // ==================== Birth Info ====================

  599. const birthInfoIgnored = ref(false)

  600. const birthDate = ref('')

  601. const birthClock = ref('')

  602. const birthTimeUnknown = ref(true)

  603. const dateOpen = ref(false)

  604. const timeOpen = ref(false)

  605. const tempHour = ref(8)

  606. const tempMinute = ref(0)

  607. const quickMinuteOptions = [0, 15, 30, 45]

  608. const hourOptions = Array.from({ length: 24 }, (_, value) => ({ value, label: `${String(value).padStart(2, '0')} 时` }))

  609. const minuteOptions = Array.from({ length: 60 }, (_, value) => ({ value, label: `${String(value).padStart(2, '0')} 分` }))

  610. 

  611. // Custom calendar grid

  612. const todayDate = new Date()

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

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

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

  616. const calendarLunarMap = ref({})

  617. let calendarLunarRequestId = 0

  618. const minCalendarYear = todayDate.getFullYear() - 20

  619. const maxCalendarYear = todayDate.getFullYear() + 2

  620. const calendarYearOptions = Array.from(

  621.   { length: maxCalendarYear - minCalendarYear + 1 },

  622.   (_, index) => maxCalendarYear - index,

  623. )

  624. const calendarMonthOptions = Array.from({ length: 12 }, (_, index) => index + 1)

  625. const calendarRangeText = `${minCalendarYear}–${maxCalendarYear} 年可选`

  626. 

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

  628.   const year = calendarYear.value

  629.   const month = calendarMonth.value

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

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

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

  633.   const todayStr = formatYMD(todayDate)

  634.   const currentPending = pendingDay.value

  635. 

  636.   const days = []

  637.   // 上月填充

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

  639.     const d = daysInPrevMonth - i

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

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

  642.   }

  643.   // 当月

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

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

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

  647.     days.push({

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

  649.       disabled: false, isToday: dateStr === todayStr, isSelected,

  650.       lunar: calendarLunarMap.value[dateStr] || null,

  651.       ariaLabel: buildCalendarAriaLabel(dateStr, calendarLunarMap.value[dateStr], false),

  652.     })

  653.   }

  654.   // 下月填充至 42 格

  655.   let nextDay = 1

  656.   while (days.length < 42) {

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

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

  659.     nextDay++

  660.   }

  661.   return days

  662. })

  663. 

  664. const isPrevMonthDisabled = computed(() => calendarYear.value === minCalendarYear && calendarMonth.value === 1)

  665. const isNextMonthDisabled = computed(() => calendarYear.value === maxCalendarYear && calendarMonth.value === 12)

  666. 

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

  668.   const date = year instanceof Date ? year : new Date(year, month - 1, day)

  669.   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`

  670. }

  671. 

  672. function buildCalendarAriaLabel(dateStr, lunar, disabled) {

  673.   const [year, month, day] = dateStr.split('-')

  674.   const lunarText = lunar?.full ? `，${lunar.full}` : ''

  675.   const disabledText = disabled ? '，不可选择' : ''

  676.   return `${year}年${Number(month)}月${Number(day)}日${lunarText}${disabledText}`

  677. }

  678. 

  679. async function refreshCalendarLunar(year, month) {

  680.   const requestId = ++calendarLunarRequestId

  681.   try {

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

  683.     const lunarMap = {}

  684.     const dayCount = new Date(year, month, 0).getDate()

  685.     for (let day = 1; day <= dayCount; day++) {

  686.       const dateStr = formatYMD(year, month, day)

  687.       const solar = Solar.fromYmd(year, month, day)

  688.       const lunar = solar.getLunar()

  689.       const solarFestival = solar.getFestivals()[0]

  690.       const lunarFestival = lunar.getFestivals()[0]

  691.       const jieQi = lunar.getJieQi()

  692.       const specialLabel = solarFestival || lunarFestival || jieQi

  693.       const lunarDay = lunar.getDayInChinese()

  694.       lunarMap[dateStr] = {

  695.         label: specialLabel || (lunarDay === '初一' ? `${lunar.getMonthInChinese()}月` : lunarDay),

  696.         full: `农历${lunar.getMonthInChinese()}月${lunarDay}`,

  697.         special: Boolean(specialLabel),

  698.       }

  699.     }

  700.     if (requestId === calendarLunarRequestId) calendarLunarMap.value = lunarMap

  701.   } catch {

  702.     if (requestId === calendarLunarRequestId) calendarLunarMap.value = {}

  703.   }

  704. }

  705. 

  706. function prevMonth() {

  707.   if (isPrevMonthDisabled.value) return

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

  709.   else calendarMonth.value--

  710. }

  711. function nextMonth() {

  712.   if (isNextMonthDisabled.value) return

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

  714.   else calendarMonth.value++

  715. }

  716. function selectDay(day) {

  717.   if (day.disabled) return

  718.   pendingDay.value = day.date

  719. }

  720. function toggleBirthInfo() {

  721.   birthInfoIgnored.value = !birthInfoIgnored.value

  722.   syncBirthFields()

  723. }

  724. function toggleBirthTimeUnknown() {

  725.   if (birthInfoIgnored.value) return

  726.   birthTimeUnknown.value = !birthTimeUnknown.value

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

  728.   syncBirthFields()

  729. }

  730. function openDatePicker() {

  731.   if (birthInfoIgnored.value) return

  732.   if (birthDate.value) {

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

  734.     const selectedYear = Number(p[0])

  735.     if (selectedYear >= minCalendarYear && selectedYear <= maxCalendarYear) {

  736.       calendarYear.value = selectedYear

  737.       calendarMonth.value = Number(p[1])

  738.       pendingDay.value = birthDate.value

  739.     } else {

  740.       calendarYear.value = todayDate.getFullYear()

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

  742.       pendingDay.value = null

  743.     }

  744.   } else {

  745.     calendarYear.value = todayDate.getFullYear()

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

  747.     pendingDay.value = null

  748.   }

  749.   dateOpen.value = true

  750.   refreshCalendarLunar(calendarYear.value, calendarMonth.value)

  751. }

  752. function confirmDate() {

  753.   if (pendingDay.value) {

  754.     birthDate.value = pendingDay.value

  755.     syncBirthFields()

  756.   }

  757.   dateOpen.value = false

  758. }

  759. function openTimePicker() {

  760.   if (birthInfoIgnored.value) return

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

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

  763.   tempHour.value = Number(h)

  764.   tempMinute.value = Number(m)

  765.   timeOpen.value = true

  766. }

  767. function confirmTime() {

  768.   birthClock.value = `${padTime(tempHour.value)}:${padTime(tempMinute.value)}`

  769.   birthTimeUnknown.value = false

  770.   syncBirthFields()

  771.   timeOpen.value = false

  772. }

  773. function timeUnknownPick() {

  774.   birthTimeUnknown.value = true

  775.   birthClock.value = ''

  776.   syncBirthFields()

  777.   timeOpen.value = false

  778. }

  779. function syncBirthFields() {

  780.   if (birthInfoIgnored.value) {

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

  782.     return

  783.   }

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

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

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

  787. }

  788. 

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

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

  791.   if (!birthClock.value) return '请选择时分'

  792.   const hour = Number(birthClock.value.split(':')[0])

  793.   return `${birthClock.value} · ${getShichenInfo(hour).name}`

  794. })

  795. const timePreviewText = computed(() => `${padTime(tempHour.value)}:${padTime(tempMinute.value)}`)

  796. const shichenInfo = computed(() => getShichenInfo(tempHour.value))

  797. const previewName = '白敬亭'

  798. 

  799. function padTime(value) {

  800.   return String(value).padStart(2, '0')

  801. }

  802. 

  803. function getShichenInfo(hour) {

  804.   const shichen = [

  805.     { name: '子时', range: '23:00–00:59' },

  806.     { name: '丑时', range: '01:00–02:59' },

  807.     { name: '寅时', range: '03:00–04:59' },

  808.     { name: '卯时', range: '05:00–06:59' },

  809.     { name: '辰时', range: '07:00–08:59' },

  810.     { name: '巳时', range: '09:00–10:59' },

  811.     { name: '午时', range: '11:00–12:59' },

  812.     { name: '未时', range: '13:00–14:59' },

  813.     { name: '申时', range: '15:00–16:59' },

  814.     { name: '酉时', range: '17:00–18:59' },

  815.     { name: '戌时', range: '19:00–20:59' },

  816.     { name: '亥时', range: '21:00–22:59' },

  817.   ]

  818.   return hour === 23 ? shichen[0] : shichen[Math.floor((hour + 1) / 2)]

  819. }

  820. 

  821. watch([calendarYear, calendarMonth], ([year, month]) => {

  822.   if (dateOpen.value) refreshCalendarLunar(year, month)

  823. })

  824. 

  825. // 农历

  826. const birthLunarText = ref('')

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

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

  829.   try {

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

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

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

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

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

  835. }, { immediate: true })

  836. 

  837. // ==================== Billing & Submit ====================

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

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

  840. async function loadBilling() {

  841.   try {

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

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

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

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

  846.     }

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

  848. }

  849. async function loadBalance() {

  850.   try {

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

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

  853.   } catch {}

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

  855.   user.refreshBalance()

  856. }

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

  858. watch(() => user.isLogin.value, (loggedIn) => {

  859.   if (loggedIn) loadBalance()

  860. })

  861. 

  862. const submitting = ref(false)

  863. const questionTitle = ref('')

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

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

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

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

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

  869. })

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

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

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

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

  874. })

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

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

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

  878. })

  879. 

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

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

  882. const streamContent = ref('')

  883. const streamPreviewRef = ref(null)

  884. 

  885. async function handleSubmit() {

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

  887.     showToast('请先登录')

  888.     user.showLogin.value = true

  889.     return

  890.   }

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

  892.   if (submitting.value) return

  893.   syncBirthFields()

  894.   submitting.value = true

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

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

  897.   streamContent.value = ''

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

  899. 

  900.   const params = {

  901.     surname: form.surname, sex: form.sex, name_source: form.name_source,

  902.     words_num: form.words_num, is_redup: form.is_redup, special_word: form.special_word,

  903.     content: form.content, model: 4,

  904.     birth_date: form.birth_date, birth_clock: form.birth_clock, birth_time_unknown: form.birth_time_unknown,

  905.   }

  906. 

  907.   try {

  908.     const data = await api.postStream('/ainame/send', params, {

  909.       onMessage(packet) {

  910.         if (!packet?.content) return

  911.         streamContent.value += packet.content

  912.         nextTick(() => {

  913.           if (streamPreviewRef.value) streamPreviewRef.value.scrollTop = streamPreviewRef.value.scrollHeight

  914.         })

  915.       },

  916.     })

  917.     const parsed = data.result && Array.isArray(data.result.names)

  918.       ? data.result

  919.       : parseResult(data.content || streamContent.value)

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

  921.       result.value = parsed

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

  923.       loadBalance() // 消耗点数后刷新余额（含 header）

  924.     } else {

  925.       result.value = parsed

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

  927.     }

  928.   } catch (e) {

  929.     const errorMsg = e.code === 1011 ? '点数不足，请充值后重试' : (e.message || '网络异常，请重试')

  930.     resultState.value = { ...resultState.value, loading: false, error: true, errorMsg }

  931.   } finally { submitting.value = false }

  932. }

  933. 

  934. function parseResult(content) {

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

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

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

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

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

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

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

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

  943. }

  944. function parseJsonLines(text) {

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

  946.   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 {} })

  947.   return d

  948. }

  949. function parseMarkedText(text) {

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

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

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

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

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

  955.     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, '推荐') })

  956.   }

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

  958. }

  959. function resolveNameBlockTitle(title, body) {

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

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

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

  963. }

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

  965. 

  966. function copyResult() {

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

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

  969.   const lines = []

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

  971.   names.forEach(item => {

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

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

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

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

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

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

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

  979.     lines.push('')

  980.   })

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

  982. }

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

  984. 

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

  986. const historyOpen = ref(false)

  987. const detailOpen = ref(false)

  988. const currentWork = ref({})

  989. 

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

  991. 

  992. function openHistoryItem(item) {

  993.   currentWork.value = item

  994.   detailOpen.value = true

  995. }

  996. </script>

  997. 

  998. <style scoped>

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

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

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

  1002. @keyframes dotPulse {

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

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

  1005. }

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

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

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

  1009. .modal-enter-from > div:last-child, .modal-leave-to > div:last-child { transform: translateY(100%); }

  1010. @media (min-width: 640px) {

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

  1012. }

  1013. </style>