leiyun
/
pc_nuxt
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
15 Revize
1 Větev
586 KiB
 
 
 
 
Strom: 39bd91f8ae
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „39bd91f8ae“
${ noResults }
pc_nuxt/app/layouts/default.vue

438 řádky
19 KiB
Surový Blame Historie 

  1. <template>

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

  3.     <!-- ==================== 顶部导航 ==================== -->

  4.     <header class="sticky top-0 z-50 border-b border-[var(--c-e8eef7)] bg-[var(--c-ffffff)]/85 backdrop-blur-md">

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

  6.         <div class="flex h-16 items-center gap-4">

  7.           <!-- Logo + Slogan -->

  8.           <NuxtLink to="/" class="flex shrink-0 items-center gap-2.5">

  9.             <img

  10.               src="/logo.png"

  11.               alt="AI在线"

  12.               class="h-9 w-9 rounded-xl shadow-[0_6px_16px_var(--sh-11-140-255-220)]"

  13.             >

  14.             <div class="hidden leading-tight sm:block">

  15.               <div class="text-[17px] font-extrabold tracking-tight text-[var(--c-172033)]">AI 在线</div>

  16.               <div class="text-[11px] font-medium text-[var(--c-8a97a8)]">解放你的生产力</div>

  17.             </div>

  18.           </NuxtLink>

  19. 

  20.           <!-- 主导航（AI 绘画为一级入口，hover 展开二级菜单，直接点击进动漫头像） -->

  21.           <nav class="ml-2 hidden items-center gap-1 md:flex">

  22.             <template v-for="item in navItems" :key="item.label">

  23.               <div

  24.                 v-if="item.children"

  25.                 class="relative"

  26.                 @mouseenter="drawMenuOpen = true"

  27.                 @mouseleave="drawMenuOpen = false"

  28.                 @focusin="drawMenuOpen = true"

  29.                 @focusout="onDrawMenuFocusOut"

  30.               >

  31.                 <NuxtLink

  32.                   :to="item.to"

  33.                   class="inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"

  34.                   :class="isGroupActive(item)

  35.                     ? 'bg-[var(--c-eef7ff)] text-[var(--c-0b8cff)]'

  36.                     : 'text-[var(--c-5b6b80)]'"

  37.                   :aria-expanded="drawMenuOpen"

  38.                 >

  39.                   {{ item.label }}

  40.                   <UIcon

  41.                     name="i-lucide-chevron-down"

  42.                     class="size-3.5 transition-transform"

  43.                     :class="drawMenuOpen && 'rotate-180'"

  44.                   />

  45.                 </NuxtLink>

  46. 

  47.                 <Transition name="menu">

  48.                   <!-- 外层留 pt-2 把触发区和面板连起来，避免鼠标移动时菜单闪退 -->

  49.                   <div v-if="drawMenuOpen" class="absolute left-0 top-full z-50 pt-2">

  50.                     <div class="w-64 overflow-hidden rounded-xl border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] py-1.5 shadow-[0_12px_32px_var(--sh-23-32-51-140)]">

  51.                       <NuxtLink

  52.                         v-for="child in item.children"

  53.                         :key="child.to"

  54.                         :to="child.to"

  55.                         class="block px-4 py-2.5 transition-colors hover:bg-[var(--c-f7fbff)]"

  56.                         active-class="bg-[var(--c-f7fbff)]"

  57.                         @click="drawMenuOpen = false"

  58.                       >

  59.                         <span class="block text-sm font-bold text-[var(--c-172033)]">{{ child.label }}</span>

  60.                         <span class="mt-0.5 block text-xs text-[var(--c-8a97a8)]">{{ child.desc }}</span>

  61.                       </NuxtLink>

  62.                     </div>

  63.                   </div>

  64.                 </Transition>

  65.               </div>

  66. 

  67.               <NuxtLink

  68.                 v-else

  69.                 :to="item.to"

  70.                 class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"

  71.                 active-class="!text-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]"

  72.               >

  73.                 {{ item.label }}

  74.               </NuxtLink>

  75.             </template>

  76.           </nav>

  77. 

  78.           <!-- 右侧操作 -->

  79.           <div class="ml-auto flex items-center gap-2 sm:gap-3">

  80.             <!-- 亮色 / 暗色切换 -->

  81.             <ThemeToggle />

  82. 

  83.             <template v-if="isLogin">

  84.               <!-- 点数余额 -->

  85.               <NuxtLink

  86.                 to="/bill"

  87.                 class="hidden items-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] px-3 py-1.5 text-xs font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e0f0ff)] sm:flex"

  88.               >

  89.                 <UIcon name="i-lucide-coins" class="size-3.5" />

  90.                 <span>{{ userInfo.balance || 0 }} 点</span>

  91.               </NuxtLink>

  92.               <NuxtLink

  93.                 to="/recharge"

  94.                 class="hidden rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-4 py-1.5 text-xs font-bold text-white shadow-[0_6px_14px_var(--sh-11-140-255-250)] transition-opacity hover:opacity-90 sm:block"

  95.               >

  96.                 充值

  97.               </NuxtLink>

  98. 

  99.               <!-- 用户菜单（自定义面板，保证背景与排版可控） -->

  100.               <div ref="userMenuRef" class="relative">

  101.                 <button

  102.                   aria-label="用户菜单"

  103.                   :aria-expanded="userMenuOpen"

  104.                   class="flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-[var(--c-eef7ff)] ring-1 ring-[var(--c-dbeafe)] transition-shadow hover:ring-[var(--c-0b8cff)]/40"

  105.                   @click="userMenuOpen = !userMenuOpen"

  106.                 >

  107.                   <img v-if="userInfo.avatar" :src="userInfo.avatar" class="h-full w-full object-cover" alt="avatar">

  108.                   <span v-else class="text-xs font-extrabold text-[var(--c-0b8cff)]">

  109.                     {{ (userInfo.nickname || userInfo.user_name || '用')[0] }}

  110.                   </span>

  111.                 </button>

  112. 

  113.                 <Transition name="menu">

  114.                   <div

  115.                     v-if="userMenuOpen"

  116.                     class="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-xl border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] py-1.5 shadow-[0_12px_32px_var(--sh-23-32-51-140)]"

  117.                   >

  118.                     <!-- 用户信息 -->

  119.                     <div class="border-b border-[var(--c-f1f5fa)] px-4 pb-2.5 pt-1.5">

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

  121.                         {{ userInfo.nickname || userInfo.user_name || '我的账号' }}

  122.                       </div>

  123.                       <div class="mt-0.5 text-xs text-[var(--c-8a97a8)]">余额 {{ userInfo.balance || 0 }} 点</div>

  124.                     </div>

  125. 

  126.                     <NuxtLink

  127.                       v-for="item in userMenuLinks"

  128.                       :key="item.to"

  129.                       :to="item.to"

  130.                       class="flex items-center gap-2.5 px-4 py-2.5 text-sm text-[var(--c-4b5b70)] transition-colors hover:bg-[var(--c-f7fbff)] hover:text-[var(--c-0b8cff)]"

  131.                       @click="userMenuOpen = false"

  132.                     >

  133.                       <UIcon :name="item.icon" class="size-4 shrink-0" />

  134.                       <span>{{ item.label }}</span>

  135.                     </NuxtLink>

  136. 

  137.                     <div class="my-1 border-t border-[var(--c-f1f5fa)]" />

  138. 

  139.                     <button

  140.                       class="flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm text-[var(--c-f04438)] transition-colors hover:bg-[var(--c-fff5f5)]"

  141.                       @click="onLogout"

  142.                     >

  143.                       <UIcon name="i-lucide-log-out" class="size-4 shrink-0" />

  144.                       <span>退出登录</span>

  145.                     </button>

  146.                   </div>

  147.                 </Transition>

  148.               </div>

  149.             </template>

  150. 

  151.             <button

  152.               v-else

  153.               class="cursor-pointer rounded-full bg-gradient-to-r from-[var(--c-0b8cff)] to-[var(--c-3aa9ff)] px-5 py-2 text-sm font-bold text-white shadow-[0_8px_18px_var(--sh-11-140-255-250)] transition-opacity hover:opacity-90"

  154.               @click="showLogin = true"

  155.             >

  156.               登录

  157.             </button>

  158. 

  159.             <!-- 移动端菜单按钮 -->

  160.             <button

  161.               class="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] md:hidden"

  162.               @click="mobileOpen = !mobileOpen"

  163.             >

  164.               <UIcon :name="mobileOpen ? 'i-lucide-x' : 'i-lucide-menu'" class="size-5" />

  165.             </button>

  166.           </div>

  167.         </div>

  168.       </div>

  169. 

  170.       <!-- 移动端下拉导航 -->

  171.       <Transition name="slide">

  172.         <nav v-if="mobileOpen" class="border-t border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] md:hidden">

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

  174.             <template v-for="item in navItems" :key="item.label">

  175.               <!-- 移动端没有 hover，二级菜单直接平铺缩进展示 -->

  176.               <div v-if="item.children">

  177.                 <div class="px-3 pb-1 pt-2.5 text-xs font-bold text-[var(--c-8a97a8)]">{{ item.label }}</div>

  178.                 <NuxtLink

  179.                   v-for="child in item.children"

  180.                   :key="child.to"

  181.                   :to="child.to"

  182.                   class="block rounded-lg px-3 py-2.5 pl-6 text-sm font-medium text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"

  183.                   active-class="!text-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]"

  184.                   @click="mobileOpen = false"

  185.                 >

  186.                   {{ child.label }}

  187.                 </NuxtLink>

  188.               </div>

  189.               <NuxtLink

  190.                 v-else

  191.                 :to="item.to"

  192.                 class="block rounded-lg px-3 py-2.5 text-sm font-medium text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"

  193.                 active-class="!text-[var(--c-0b8cff)] bg-[var(--c-eef7ff)]"

  194.                 @click="mobileOpen = false"

  195.               >

  196.                 {{ item.label }}

  197.               </NuxtLink>

  198.             </template>

  199.           </div>

  200.         </nav>

  201.       </Transition>

  202.     </header>

  203. 

  204.     <!-- ==================== 主体内容 ==================== -->

  205.     <main class="flex-1">

  206.       <slot />

  207.     </main>

  208. 

  209.     <!-- ==================== 页脚（白色系、紧凑，二维码与内容同行） ==================== -->

  210.     <footer class="mt-auto border-t border-[var(--c-e8eef7)] bg-[var(--c-ffffff)]">

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

  212.         <div class="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">

  213.           <!-- 品牌 -->

  214.           <div class="max-w-xs">

  215.             <div class="flex items-center gap-2.5">

  216.               <img src="/logo.png" alt="AI在线" class="h-8 w-8 rounded-lg">

  217.               <span class="text-base font-extrabold text-[var(--c-172033)]">AI 在线</span>

  218.             </div>

  219.             <p class="mt-2.5 text-sm leading-relaxed text-[var(--c-8a97a8)]">

  220.               解放你的生产力。AI 取名、动漫头像、证件照，一站式智能创作平台。

  221.             </p>

  222.           </div>

  223. 

  224.           <!-- 链接 + 二维码同行 -->

  225.           <div class="flex flex-wrap items-start gap-10 sm:gap-14">

  226.             <div>

  227.               <div class="mb-2.5 text-sm font-bold text-[var(--c-172033)]">产品</div>

  228.               <ul class="space-y-2 text-sm text-[var(--c-8a97a8)]">

  229.                 <li v-for="item in productLinks" :key="item.to">

  230.                   <NuxtLink :to="item.to" class="transition-colors hover:text-[var(--c-0b8cff)]">{{ item.label }}</NuxtLink>

  231.                 </li>

  232.               </ul>

  233.             </div>

  234.             <div>

  235.               <div class="mb-2.5 text-sm font-bold text-[var(--c-172033)]">资讯</div>

  236.               <ul class="space-y-2 text-sm text-[var(--c-8a97a8)]">

  237.                 <li v-for="item in infoLinks" :key="item.to">

  238.                   <NuxtLink :to="item.to" class="transition-colors hover:text-[var(--c-0b8cff)]">{{ item.label }}</NuxtLink>

  239.                 </li>

  240.               </ul>

  241.             </div>

  242.             <div>

  243.               <div class="mb-2.5 text-sm font-bold text-[var(--c-172033)]">我的</div>

  244.               <ul class="space-y-2 text-sm text-[var(--c-8a97a8)]">

  245.                 <li><NuxtLink to="/works" class="transition-colors hover:text-[var(--c-0b8cff)]">我的作品</NuxtLink></li>

  246.                 <li v-if="earnEnabled"><NuxtLink to="/earn-points" class="transition-colors hover:text-[var(--c-0b8cff)]">获得点数</NuxtLink></li>

  247.                 <li v-if="inviteEnabled"><NuxtLink to="/invite" class="transition-colors hover:text-[var(--c-0b8cff)]">邀请好友</NuxtLink></li>

  248.                 <li><NuxtLink to="/bill" class="transition-colors hover:text-[var(--c-0b8cff)]">账单明细</NuxtLink></li>

  249.                 <li><NuxtLink to="/recharge" class="transition-colors hover:text-[var(--c-0b8cff)]">充值中心</NuxtLink></li>

  250.               </ul>

  251.             </div>

  252.             <!-- 公众号二维码 -->

  253.             <div class="flex flex-col items-center">

  254.               <img

  255.                 src="https://cdn.aionline.cc/ai/aionline_qr.jpg"

  256.                 alt="AI在线公众号"

  257.                 class="h-20 w-20 rounded-lg border border-[var(--c-e8eef7)] bg-[var(--c-ffffff)] p-1"

  258.                 loading="lazy"

  259.               >

  260.               <div class="mt-2 text-xs text-[var(--c-8a97a8)]">扫码关注我们</div>

  261.             </div>

  262.           </div>

  263.         </div>

  264. 

  265.         <!-- 备案与协议（对齐 pc 站点） -->

  266.         <div class="mt-6 flex flex-col items-center gap-2 border-t border-[var(--c-eef2f7)] pt-5 text-xs text-[var(--c-9aa5b5)] sm:flex-row sm:justify-center sm:gap-5">

  267.           <NuxtLink to="/terms" class="transition-colors hover:text-[var(--c-0b8cff)]">服务条款</NuxtLink>

  268.           <NuxtLink to="/privacy" class="transition-colors hover:text-[var(--c-0b8cff)]">隐私政策</NuxtLink>

  269.           <span>四川内宇科技有限公司</span>

  270.           <a

  271.             href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702042692"

  272.             target="_blank"

  273.             rel="noopener"

  274.             class="transition-colors hover:text-[var(--c-0b8cff)]"

  275.           >川公网安备51010702042692号</a>

  276.           <a

  277.             href="https://beian.miit.gov.cn/#/Integrated/index"

  278.             target="_blank"

  279.             rel="noopener"

  280.             class="transition-colors hover:text-[var(--c-0b8cff)]"

  281.           >蜀ICP备2023026929号-1</a>

  282.           <span>&copy; {{ new Date().getFullYear() }} AI在线</span>

  283.         </div>

  284.       </div>

  285.     </footer>

  286. 

  287.     <!-- 全局回到顶部（所有页面共用，滚动超过一屏才出现） -->

  288.     <BackToTop />

  289. 

  290.     <!-- 登录弹窗 -->

  291.     <LoginModal

  292.       v-if="showLogin"

  293.       @close="showLogin = false"

  294.       @login-success="onLoginSuccess"

  295.     />

  296.   </div>

  297. </template>

  298. 

  299. <script setup>

  300. // 顶部导航。图像类能力收进「AI 绘画」二级菜单，一级入口本身指向动漫头像。

  301. const drawChildren = [

  302.   { label: '动漫头像', to: '/draw/anime/', desc: '自拍一键变动漫风头像' },

  303.   { label: '形象照 / 写真', to: '/portrait-photo', desc: '商务、职业照与艺术写真' },

  304.   { label: '老照片修复', to: '/old-photo', desc: '修复破损并自然上色' },

  305.   { label: 'AI 证件照', to: '/id-photo', desc: '换底色、标准尺寸' },

  306. ]

  307. const navItems = [

  308.   { label: '首页', to: '/' },

  309.   { label: 'AI 取名', to: '/writing/naming/' },

  310.   { label: 'AI 绘画', to: '/draw/anime/', children: drawChildren },

  311.   { label: 'AI 资讯', to: '/info' },

  312.   { label: '我的作品', to: '/works' },

  313. ]

  314. // 注：AI 图片（/pic）页面保留，只是不放顶部导航和页脚入口

  315. 

  316. // 页脚「产品」列：只放真正的产品能力，个人相关的放「我的」列

  317. const productLinks = [

  318.   { label: 'AI 取名', to: '/writing/naming/' },

  319.   { label: '动漫头像', to: '/draw/anime/' },

  320.   { label: '形象照 / 写真', to: '/portrait-photo' },

  321.   { label: '老照片修复', to: '/old-photo' },

  322.   { label: 'AI 证件照', to: '/id-photo' },

  323. ]

  324. 

  325. // 页脚「资讯」列

  326. const infoLinks = [

  327.   { label: 'AI 资讯', to: '/info' },

  328.   { label: '前沿资讯', to: '/info/new' },

  329.   { label: '使用教程', to: '/info/course' },

  330.   { label: 'AI 问答', to: '/info/what' },

  331. ]

  332. 

  333. const { userInfo, isLogin, showLogin, setLogin, logout, refreshBalance } = useUser()

  334. const { post } = useApi()

  335. const mobileOpen = ref(false)

  336. const userMenuOpen = ref(false)

  337. const drawMenuOpen = ref(false)

  338. const userMenuRef = ref(null)

  339. const route = useRoute()

  340. 

  341. /** 二级菜单里任一页面命中时，一级「AI 绘画」也保持选中态 */

  342. function isGroupActive(item) {

  343.   const path = route.path.replace(/\/+$/, '') || '/'

  344.   return (item.children || []).some((child) => {

  345.     const target = child.to.replace(/\/+$/, '') || '/'

  346.     return path === target || path.startsWith(`${target}/`)

  347.   })

  348. }

  349. 

  350. /** 焦点移出整个下拉区域才收起，键盘 Tab 浏览时菜单不会跳掉 */

  351. function onDrawMenuFocusOut(event) {

  352.   if (!event.currentTarget.contains(event.relatedTarget)) drawMenuOpen.value = false

  353. }

  354. 

  355. // 后台未启用邀请活动时，入口默认不渲染；请求失败同样按未启用处理。

  356. const { data: inviteConfigResponse } = await useAsyncData(

  357.   'global-invite-entry-config',

  358.   () => post('/invite/config'),

  359. )

  360. const inviteEnabled = computed(

  361.   () => Number(inviteConfigResponse.value?.data?.config?.status) === 1,

  362. )

  363. 

  364. // 获得点数：签到、邀请与看广告任一开启才有入口，全部关闭时整条不渲染

  365. const { entryEnabled: earnEnabled, load: loadEarnConfig } = useEarnPoints()

  366. await loadEarnConfig()

  367. 

  368. const allUserMenuLinks = [

  369.   { label: '我的作品', icon: 'i-lucide-image', to: '/works' },

  370.   { label: '获得点数', icon: 'i-lucide-gift', to: '/earn-points', earnOnly: true },

  371.   { label: '邀请好友', icon: 'i-lucide-user-plus', to: '/invite', inviteOnly: true },

  372.   { label: '账单明细', icon: 'i-lucide-receipt', to: '/bill' },

  373.   { label: '充值中心', icon: 'i-lucide-coins', to: '/recharge' },

  374. ]

  375. const userMenuLinks = computed(

  376.   () => allUserMenuLinks.filter((item) => {

  377.     if (item.inviteOnly && !inviteEnabled.value) return false

  378.     if (item.earnOnly && !earnEnabled.value) return false

  379.     return true

  380.   }),

  381. )

  382. 

  383. // 路由切换时收起菜单

  384. watch(() => route.fullPath, () => {

  385.   mobileOpen.value = false

  386.   userMenuOpen.value = false

  387.   drawMenuOpen.value = false

  388. })

  389. 

  390. // 点击外部关闭用户菜单

  391. function onDocClick(e) {

  392.   if (userMenuOpen.value && userMenuRef.value && !userMenuRef.value.contains(e.target)) {

  393.     userMenuOpen.value = false

  394.   }

  395. }

  396. onMounted(() => {

  397.   document.addEventListener('click', onDocClick)

  398.   // 已登录时刷新点数，保证 header 显示的是最新余额

  399.   if (isLogin.value) refreshBalance()

  400. })

  401. onUnmounted(() => document.removeEventListener('click', onDocClick))

  402. 

  403. // 登录状态变化时同步点数

  404. watch(isLogin, (v) => { if (v) refreshBalance() })

  405. 

  406. function onLogout() {

  407.   userMenuOpen.value = false

  408.   logout()

  409. }

  410. 

  411. function onLoginSuccess(data) {

  412.   setLogin(data)

  413.   showLogin.value = false

  414.   refreshBalance()

  415. }

  416. </script>

  417. 

  418. <style scoped>

  419. .slide-enter-active,

  420. .slide-leave-active {

  421.   transition: opacity 0.18s ease;

  422. }

  423. .slide-enter-from,

  424. .slide-leave-to {

  425.   opacity: 0;

  426. }

  427. 

  428. .menu-enter-active,

  429. .menu-leave-active {

  430.   transition: opacity 0.15s ease, transform 0.15s ease;

  431. }

  432. .menu-enter-from,

  433. .menu-leave-to {

  434.   opacity: 0;

  435.   transform: translateY(-4px);

  436. }

  437. </style>