eafonyang
114 lines
4.4 KiB
Vue
114 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import type { ProductListConfig, ProductSeries } from '~/types/site';
|
|
|
|
const { t, locale } = useI18n();
|
|
const localePath = useLocalePath();
|
|
const siteStore = useSiteStore();
|
|
const { getPageConfig } = useSiteApi();
|
|
|
|
// SEO：产品列表页
|
|
await usePageSeo('products', undefined, `${t('app.name')} - ${t('nav.products')}`);
|
|
|
|
// 页面配置（hero + 列数），未配置时用默认值
|
|
const config = ref<ProductListConfig | null>(null);
|
|
const loading = ref(true);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const [cfg] = await Promise.all([getPageConfig<ProductListConfig>('product-list')]);
|
|
config.value = cfg;
|
|
} catch {
|
|
config.value = null;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
|
|
// 产品系列（store 已在 app 启动时加载）
|
|
const { productSeries } = storeToRefs(siteStore);
|
|
|
|
const maxColumns = computed(() => Math.min(Math.max(config.value?.max_columns || 3, 1), 4));
|
|
|
|
// 有产品的系列才展示
|
|
const visibleSeries = computed(() =>
|
|
(productSeries.value || []).filter((s) => (s.products || []).length > 0)
|
|
);
|
|
|
|
const heroTitle = computed(() => (locale.value === 'en' ? config.value?.hero_title_en : config.value?.hero_title_zh) || (locale.value === 'en' ? 'Products' : '产品中心'));
|
|
const heroSubtitle = computed(() => (locale.value === 'en' ? config.value?.hero_subtitle_en : config.value?.hero_subtitle_zh) || '');
|
|
const heroOverline = computed(() => (locale.value === 'en' ? config.value?.hero_overline_en : config.value?.hero_overline_zh) || '');
|
|
|
|
function seriesName(s: ProductSeries): string {
|
|
return locale.value === 'en' ? s.name_en : s.name_zh;
|
|
}
|
|
|
|
function seriesSubtitle(s: ProductSeries): string {
|
|
return locale.value === 'en' ? s.subtitle_en : s.subtitle_zh;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<PageHero
|
|
:title="heroTitle"
|
|
:subtitle="heroSubtitle || undefined"
|
|
:overline="heroOverline || undefined"
|
|
:bg-url="config?.hero_bg_url || undefined"
|
|
/>
|
|
|
|
<div v-if="loading" class="py-80px text-center text-sm text-gray-400">
|
|
{{ t('common.loading') }}
|
|
</div>
|
|
|
|
<!-- 按系列分组的产品卡片 -->
|
|
<div v-else-if="visibleSeries.length" class="section-container py-64px md:py-80px flex flex-col gap-80px">
|
|
<section v-for="series in visibleSeries" :key="series.id">
|
|
<div class="mb-32px flex flex-col gap-8px">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">{{ seriesName(series) }}</h2>
|
|
<p v-if="seriesSubtitle(series)" class="text-gray-500 dark:text-gray-400">{{ seriesSubtitle(series) }}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="grid gap-24px"
|
|
:class="{
|
|
'grid-cols-1': maxColumns === 1,
|
|
'sm:grid-cols-2': maxColumns === 2,
|
|
'sm:grid-cols-2 lg:grid-cols-3': maxColumns === 3,
|
|
'sm:grid-cols-2 lg:grid-cols-4': maxColumns === 4
|
|
}"
|
|
>
|
|
<NuxtLink
|
|
v-for="product in series.products"
|
|
:key="product.id"
|
|
:to="localePath(`/products/${product.slug}`)"
|
|
class="group flex flex-col rounded-16px border border-gray-100 dark:border-dark-700 overflow-hidden bg-white dark:bg-dark-800 hover:shadow-xl hover:-translate-y-4px transition-all duration-300"
|
|
>
|
|
<div class="aspect-[16/10] bg-gray-50 dark:bg-dark-700 overflow-hidden">
|
|
<img
|
|
v-if="product.cover_url"
|
|
:src="product.cover_url"
|
|
:alt="locale === 'en' ? product.name_en : product.name_zh"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div v-else class="w-full h-full flex-center text-gray-300 dark:text-gray-600 text-4xl">🎧</div>
|
|
</div>
|
|
<div class="p-20px flex flex-col gap-8px flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-primary transition-colors">
|
|
{{ locale === 'en' ? product.name_en : product.name_zh }}
|
|
</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
|
|
{{ locale === 'en' ? product.intro_en : product.intro_zh }}
|
|
</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 空状态 -->
|
|
<div v-else class="section-container py-80px text-center">
|
|
<p class="text-gray-400">{{ t('common.empty') }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|