audio/admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

官网开发 0804

Browse Source
This commit is contained in:
eafonyang
2026-08-04 19:18:35 +08:00
parent f37b6451ef
commit 816281bf2d
31 changed files with 1177 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/app/components/AppHeader.vue
+42 -24
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { NavItem } from '~/types/site';
import type { NavItem, Product } from '~/types/site';
const { t, locale, locales } = useI18n();
const localePath = useLocalePath();
@@ -60,9 +60,16 @@ function openMega() {
function closeMega() {
megaTimer = setTimeout(() => {
megaOpen.value = false;
hoveredProduct.value = null;
}, 120);
}
// Mega Menu 右侧大图预览：hover 某产品时展示其封面，默认展示第一个产品
const hoveredProduct = ref<Product | null>(null);
const previewProduct = computed<Product | null>(
() => hoveredProduct.value ?? productSeries.value.find(s => s.products?.length)?.products[0] ?? null
);
// 移动端：关闭抽屉
function closeMobile() {
appStore.toggleMobileMenu(false);
@@ -112,31 +119,42 @@ function closeMobile() {
v-if="megaOpen"
class="absolute top-64px left-50% -translate-x-50% min-w-640px bg-white/95 backdrop-blur-xl rounded-12px shadow-xl border border-gray-100 p-24px dark:bg-dark-900/95 dark:border-dark-700"
>
<div class="flex gap-40px">
<div v-for="series in productSeries" :key="series.id" class="min-w-200px">
<p class="text-12px font-semibold text-gray-400 mb-12px uppercase tracking-wide">
{{ locale === 'en' ? series.name_en : series.name_zh }}
</p>
<div class="flex flex-col gap-8px">
<NuxtLink
v-for="product in series.products"
:key="product.id"
:to="localePath(`/products/${product.slug}`)"
class="flex items-center gap-12px p-8px rounded-8px hover:bg-gray-50 transition-colors dark:hover:bg-dark-800"
@click="megaOpen = false"
>
<img
v-if="product.cover_url"
:src="product.cover_url"
:alt="product.name_zh"
class="w-48px h-36px object-cover rounded-6px bg-gray-100"
/>
<span class="text-sm text-gray-800 dark:text-gray-100">
{{ locale === 'en' ? product.name_en : product.name_zh }}
</span>
</NuxtLink>
<div class="flex gap-32px">
<!-- 左侧：系列/产品列表 -->
<div class="flex gap-40px">
<div v-for="series in productSeries" :key="series.id" class="min-w-200px">
<p class="text-12px font-semibold text-gray-400 mb-12px uppercase tracking-wide">
{{ locale === 'en' ? series.name_en : series.name_zh }}
</p>
<div class="flex flex-col gap-8px">
<NuxtLink
v-for="product in series.products"
:key="product.id"
:to="localePath(`/products/${product.slug}`)"
class="p-8px rounded-8px hover:bg-gray-50 transition-colors dark:hover:bg-dark-800"
@click="megaOpen = false"
@mouseenter="hoveredProduct = product"
>
<span class="text-sm text-gray-800 dark:text-gray-100">
{{ locale === 'en' ? product.name_en : product.name_zh }}
</span>
</NuxtLink>
</div>
</div>
</div>
<!-- 右侧：hover 产品封面大图预览 -->
<div v-if="previewProduct" class="w-360px shrink-0 border-l border-gray-100 pl-32px dark:border-dark-700">
<img
v-if="previewProduct.cover_url"
:src="previewProduct.cover_url"
:alt="locale === 'en' ? previewProduct.name_en : previewProduct.name_zh"
class="w-full h-240px object-contain rounded-8px bg-gray-50 dark:bg-dark-800"
/>
<p class="mt-12px text-lg font-bold text-gray-900 dark:text-gray-100">
{{ locale === 'en' ? previewProduct.name_en : previewProduct.name_zh }}
</p>
</div>
</div>
</div>
</transition>