feat(SSR): 为站点添加SSR机制 #38
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div v-if="content">
|
<div v-if="!pending">
|
||||||
<el-breadcrumb class="breadcrumb" separator="/">
|
<el-breadcrumb class="breadcrumb" separator="/">
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
<NuxtLink :to="$localePath('/')">
|
<NuxtLink :to="$localePath('/')">
|
||||||
@ -40,27 +40,19 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { findOne } = useStrapi();
|
const { findOne } = useStrapi();
|
||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
|
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const content = ref<string | null>(null);
|
const { data, pending, error } = useAsyncData('company-profile', () =>
|
||||||
|
findOne<StrapiCompanyProfile>('company-profile', undefined, {
|
||||||
|
locale: strapiLocale,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
onMounted(async () => {
|
const content = computed(() => data.value?.data.content);
|
||||||
try {
|
|
||||||
const response = await findOne<StrapiCompanyProfile>(
|
watch(error, (value) => {
|
||||||
'company-profile',
|
if (value) {
|
||||||
undefined,
|
console.error('数据获取失败: ', value);
|
||||||
{
|
|
||||||
locale: strapiLocale,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (response.data) {
|
|
||||||
content.value = response.data.content || '';
|
|
||||||
} else {
|
|
||||||
console.warn('No company profile data found');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch company profile:', error);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
<div v-if="!pending" class="carousel">
|
<section v-if="!pending" class="carousel-section">
|
||||||
<el-carousel
|
<el-carousel
|
||||||
class="homepage-carousel"
|
class="homepage-carousel"
|
||||||
height="auto"
|
height="auto"
|
||||||
@ -8,7 +8,7 @@
|
|||||||
arrow="never"
|
arrow="never"
|
||||||
autoplay
|
autoplay
|
||||||
>
|
>
|
||||||
<el-carousel-item v-for="(item, index) in carouselImages" :key="index">
|
<el-carousel-item v-for="(item, index) in carousel" :key="index">
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
<el-image
|
<el-image
|
||||||
class="carousel-image"
|
class="carousel-image"
|
||||||
@ -23,11 +23,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
<section class="homepage-section">
|
</section>
|
||||||
<h2>推荐产品</h2>
|
<section v-else>
|
||||||
<p>
|
<el-skeleton :rows="5" animated />
|
||||||
探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
|
</section>
|
||||||
</p>
|
|
||||||
|
<section class="homepage-section">
|
||||||
|
<h2>推荐产品</h2>
|
||||||
|
<p>
|
||||||
|
探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
|
||||||
|
</p>
|
||||||
|
<div v-if="!pending">
|
||||||
<el-carousel
|
<el-carousel
|
||||||
class="recommend-carousel"
|
class="recommend-carousel"
|
||||||
height="auto"
|
height="auto"
|
||||||
@ -72,10 +78,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</section>
|
</div>
|
||||||
<section class="homepage-section">
|
<div v-else>
|
||||||
<h2>推荐解决方案</h2>
|
<el-skeleton :rows="4" animated />
|
||||||
<p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="homepage-section">
|
||||||
|
<h2>推荐解决方案</h2>
|
||||||
|
<p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
|
||||||
|
<div v-if="!pending">
|
||||||
<el-carousel
|
<el-carousel
|
||||||
class="recommend-carousel"
|
class="recommend-carousel"
|
||||||
height="auto"
|
height="auto"
|
||||||
@ -120,11 +131,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
<div v-else>
|
||||||
<div v-else class="loading">
|
<el-skeleton :rows="4" animated />
|
||||||
<el-skeleton :rows="3" animated />
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -133,47 +144,42 @@
|
|||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const carouselImages = ref<StrapiImage[]>([]);
|
const { data, pending, error } = useAsyncData('homepage', () =>
|
||||||
const recommend_productions = ref<Production[]>([]);
|
findOne<StrapiHomepage>('homepage', undefined, {
|
||||||
const recommend_solutions = ref<Solution[]>([]);
|
populate: {
|
||||||
|
carousel: {
|
||||||
const pending = ref(true);
|
populate: '*',
|
||||||
|
},
|
||||||
onMounted(async () => {
|
recommend_productions: {
|
||||||
try {
|
populate: {
|
||||||
const response = await findOne<StrapiHomepage>('homepage', undefined, {
|
cover: {
|
||||||
populate: {
|
populate: '*',
|
||||||
carousel: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
recommend_productions: {
|
|
||||||
populate: {
|
|
||||||
cover: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
recommend_solutions: {
|
|
||||||
populate: {
|
|
||||||
cover: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
locale: strapiLocale,
|
recommend_solutions: {
|
||||||
});
|
populate: {
|
||||||
if (response.data) {
|
cover: {
|
||||||
carouselImages.value = response.data.carousel || [];
|
populate: '*',
|
||||||
recommend_productions.value = response.data.recommend_productions || [];
|
},
|
||||||
recommend_solutions.value = response.data.recommend_solutions || [];
|
},
|
||||||
console.log('推荐产品:', recommend_productions.value);
|
},
|
||||||
console.log('推荐解决方案:', recommend_solutions.value);
|
},
|
||||||
}
|
locale: strapiLocale,
|
||||||
} catch (error) {
|
})
|
||||||
console.error('Error fetching homepage data:', error);
|
);
|
||||||
} finally {
|
|
||||||
pending.value = false;
|
const carousel = computed(() => data.value?.data.carousel || []);
|
||||||
|
const recommend_productions = computed(
|
||||||
|
() => data.value?.data.recommend_productions || []
|
||||||
|
);
|
||||||
|
const recommend_solutions = computed(
|
||||||
|
() => data.value?.data.recommend_solutions || []
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(error, (value) => {
|
||||||
|
if (value) {
|
||||||
|
console.error('数据获取失败: ', value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -213,6 +219,10 @@
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.carousel-section {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.homepage-carousel .el-carousel__item {
|
.homepage-carousel .el-carousel__item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 33vw;
|
height: 33vw;
|
||||||
|
|||||||
@ -1,90 +1,108 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div v-if="production">
|
<div v-if="!pending">
|
||||||
<!-- 面包屑导航 -->
|
<div v-if="production">
|
||||||
<el-breadcrumb class="breadcrumb" separator="/">
|
<!-- 面包屑导航 -->
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
<el-breadcrumb class="breadcrumb" separator="/">
|
||||||
<NuxtLink :to="$localePath('/')">{{
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
$t('navigation.home')
|
<NuxtLink :to="$localePath('/')">{{
|
||||||
}}</NuxtLink>
|
$t('navigation.home')
|
||||||
</el-breadcrumb-item>
|
}}</NuxtLink>
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
</el-breadcrumb-item>
|
||||||
<NuxtLink :to="$localePath('/productions')">{{
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
$t('navigation.productions')
|
<NuxtLink :to="$localePath('/productions')">{{
|
||||||
}}</NuxtLink>
|
$t('navigation.productions')
|
||||||
</el-breadcrumb-item>
|
}}</NuxtLink>
|
||||||
<el-breadcrumb-item class="text-md opactiy-50">{{
|
</el-breadcrumb-item>
|
||||||
production.title
|
<el-breadcrumb-item class="text-md opactiy-50">{{
|
||||||
}}</el-breadcrumb-item>
|
production.title
|
||||||
</el-breadcrumb>
|
}}</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
|
||||||
<!-- 产品详情内容 -->
|
<!-- 产品详情内容 -->
|
||||||
<div class="production-header">
|
<div class="production-header">
|
||||||
<div class="production-image">
|
<div class="production-image">
|
||||||
<el-image
|
<el-image
|
||||||
v-if="production.production_images.length <= 1"
|
v-if="production.production_images.length <= 1"
|
||||||
:src="useStrapiMedia(production?.cover?.url || '')"
|
:src="useStrapiMedia(production?.cover?.url || '')"
|
||||||
:alt="production.title"
|
:alt="production.title"
|
||||||
fit="contain"
|
fit="contain"
|
||||||
/>
|
/>
|
||||||
<el-carousel
|
<el-carousel
|
||||||
v-else
|
v-else
|
||||||
class="production-carousel"
|
class="production-carousel"
|
||||||
height="500px"
|
height="500px"
|
||||||
:autoplay="false"
|
:autoplay="false"
|
||||||
:loop="false"
|
:loop="false"
|
||||||
arrow="always"
|
arrow="always"
|
||||||
>
|
|
||||||
<el-carousel-item
|
|
||||||
v-for="(item, index) in production.production_images || []"
|
|
||||||
:key="index"
|
|
||||||
>
|
>
|
||||||
<div class="production-carousel-item">
|
<el-carousel-item
|
||||||
<el-image
|
v-for="(item, index) in production.production_images || []"
|
||||||
:src="useStrapiMedia(item.url || '')"
|
:key="index"
|
||||||
:alt="item.alternativeText || production.title"
|
>
|
||||||
fit="contain"
|
<div class="production-carousel-item">
|
||||||
lazy
|
<el-image
|
||||||
/>
|
:src="useStrapiMedia(item.url || '')"
|
||||||
<p v-if="item.caption" class="production-image-caption">
|
:alt="item.alternativeText || production.title"
|
||||||
{{ item.caption }}
|
fit="contain"
|
||||||
</p>
|
lazy
|
||||||
</div>
|
/>
|
||||||
</el-carousel-item>
|
<p v-if="item.caption" class="production-image-caption">
|
||||||
</el-carousel>
|
{{ item.caption }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="production-info">
|
||||||
|
<h1>{{ production.title }}</h1>
|
||||||
|
<p class="summary">{{ production.summary }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="production-info">
|
|
||||||
<h1>{{ production.title }}</h1>
|
<!-- 产品详细描述 -->
|
||||||
<p class="summary">{{ production.summary }}</p>
|
<div class="production-content">
|
||||||
|
<el-tabs v-model="activeName" class="production-tabs" stretch>
|
||||||
|
<el-tab-pane label="产品详情" name="details">
|
||||||
|
<markdown-renderer
|
||||||
|
:content="production.production_details || ''"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="技术规格" name="specs">
|
||||||
|
<spec-table :data="production.production_specs" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="常见问题" name="faq">
|
||||||
|
<question-list :questions="production.questions" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="相关文档" name="documents">
|
||||||
|
<document-list
|
||||||
|
:documents="
|
||||||
|
production.production_documents.map(
|
||||||
|
(item) => item.document
|
||||||
|
) || []
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 未找到产品 -->
|
||||||
<!-- 产品详细描述 -->
|
<div v-else class="not-found">
|
||||||
<div class="production-content">
|
<el-result
|
||||||
<el-tabs v-model="activeName" class="production-tabs" stretch>
|
icon="warning"
|
||||||
<el-tab-pane label="产品详情" name="details">
|
:title="$t('product-not-found')"
|
||||||
<markdown-renderer :content="production.production_details || ''" />
|
:sub-title="$t('product-not-found-desc')"
|
||||||
</el-tab-pane>
|
>
|
||||||
<el-tab-pane label="技术规格" name="specs">
|
<template #extra>
|
||||||
<spec-table :data="production.production_specs" />
|
<el-button type="primary" @click="$router.push('/productions')">
|
||||||
</el-tab-pane>
|
{{ $t('back-to-productions') }}
|
||||||
<el-tab-pane label="常见问题" name="faq">
|
</el-button>
|
||||||
<question-list :questions="production.questions" />
|
</template>
|
||||||
</el-tab-pane>
|
</el-result>
|
||||||
<el-tab-pane label="相关文档" name="documents">
|
|
||||||
<document-list
|
|
||||||
:documents="
|
|
||||||
production.production_documents.map((item) => item.document) ||
|
|
||||||
[]
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="loading">
|
||||||
<!-- 加载状态 -->
|
|
||||||
<div v-else-if="pending" class="loading">
|
|
||||||
<el-skeleton style="--el-skeleton-circle-size: 400px">
|
<el-skeleton style="--el-skeleton-circle-size: 400px">
|
||||||
<template #template>
|
<template #template>
|
||||||
<el-skeleton-item variant="circle" />
|
<el-skeleton-item variant="circle" />
|
||||||
@ -92,21 +110,6 @@
|
|||||||
</el-skeleton>
|
</el-skeleton>
|
||||||
<el-skeleton :rows="5" animated />
|
<el-skeleton :rows="5" animated />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 未找到产品 -->
|
|
||||||
<div v-else class="not-found">
|
|
||||||
<el-result
|
|
||||||
icon="warning"
|
|
||||||
:title="$t('product-not-found')"
|
|
||||||
:sub-title="$t('product-not-found-desc')"
|
|
||||||
>
|
|
||||||
<template #extra>
|
|
||||||
<el-button type="primary" @click="$router.push('/productions')">
|
|
||||||
{{ $t('back-to-productions') }}
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-result>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -116,51 +119,41 @@
|
|||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const production = ref<Production | null>(null);
|
|
||||||
const pending = ref(true);
|
|
||||||
|
|
||||||
const activeName = ref('details'); // 默认选中概览标签
|
|
||||||
|
|
||||||
// 获取路由参数（slug 或 id）
|
// 获取路由参数（slug 或 id）
|
||||||
const documentId = computed(() => route.params.slug as string);
|
const documentId = computed(() => route.params.slug as string);
|
||||||
|
|
||||||
onMounted(async () => {
|
const { data, pending, error } = useAsyncData(
|
||||||
try {
|
() => `production-${documentId.value}`,
|
||||||
const response = await findOne<Production>(
|
() =>
|
||||||
'productions',
|
findOne<Production>('productions', documentId.value, {
|
||||||
documentId.value,
|
populate: {
|
||||||
{
|
production_specs: {
|
||||||
populate: {
|
populate: '*',
|
||||||
production_specs: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
production_images: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
cover: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
questions: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
production_documents: {
|
|
||||||
populate: 'document',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
locale: strapiLocale,
|
production_images: {
|
||||||
}
|
populate: '*',
|
||||||
);
|
},
|
||||||
if (response.data) {
|
cover: {
|
||||||
const item = response.data;
|
populate: '*',
|
||||||
production.value = {
|
},
|
||||||
...item,
|
questions: {
|
||||||
};
|
populate: '*',
|
||||||
console.log('Fetched production:', production.value);
|
},
|
||||||
}
|
production_documents: {
|
||||||
} catch (error) {
|
populate: 'document',
|
||||||
console.error('Failed to fetch production:', error);
|
},
|
||||||
} finally {
|
},
|
||||||
pending.value = false;
|
locale: strapiLocale,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const production = computed(() => data.value?.data ?? null);
|
||||||
|
|
||||||
|
const activeName = ref('details'); // 默认选中概览标签
|
||||||
|
|
||||||
|
watch(error, (value) => {
|
||||||
|
if (value) {
|
||||||
|
console.error('数据获取失败: ', value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
</el-breadcrumb-item>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-content">
|
<div v-if="!pending" class="page-content">
|
||||||
<div class="productions-container">
|
<div class="productions-container">
|
||||||
<el-collapse v-model="activeNames" class="production-collapse">
|
<el-collapse v-model="activeNames" class="production-collapse">
|
||||||
<el-collapse-item
|
<el-collapse-item
|
||||||
@ -38,18 +38,44 @@
|
|||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-skeleton :rows="6" animated />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { find } = useStrapi();
|
const { find } = useStrapi();
|
||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
|
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
|
const { data, pending, error } = useAsyncData(
|
||||||
|
'productions',
|
||||||
|
() =>
|
||||||
|
find<Production>('productions', {
|
||||||
|
populate: {
|
||||||
|
cover: {
|
||||||
|
populate: '*',
|
||||||
|
},
|
||||||
|
production_type: {
|
||||||
|
populate: '*',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
show_in_production_list: {
|
||||||
|
$eq: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
locale: strapiLocale,
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
lazy: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const activeNames = ref<string[]>([]);
|
const activeNames = ref<string[]>([]);
|
||||||
|
|
||||||
const productions = ref<Production[]>([]);
|
const productions = computed(() => data.value?.data ?? []);
|
||||||
|
|
||||||
// 按类型分组
|
// 按类型分组
|
||||||
// 兼容 production_type 既可能为对象也可能为字符串
|
// 兼容 production_type 既可能为对象也可能为字符串
|
||||||
@ -72,34 +98,27 @@
|
|||||||
return groups;
|
return groups;
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
watch(groupedProductions, () => {
|
||||||
try {
|
if (groupedProductions.value) {
|
||||||
const response = await find<Production>('productions', {
|
activeNames.value = [
|
||||||
populate: {
|
...Object.keys(groupedProductions.value),
|
||||||
cover: {
|
'no-category',
|
||||||
populate: '*',
|
];
|
||||||
},
|
}
|
||||||
production_type: {
|
});
|
||||||
populate: '*',
|
|
||||||
},
|
watch(error, (value) => {
|
||||||
},
|
if (value) {
|
||||||
filters: {
|
console.error('数据获取失败: ', value);
|
||||||
show_in_production_list: {
|
}
|
||||||
$eq: true, // 只获取在产品列表中显示的产品
|
});
|
||||||
},
|
|
||||||
},
|
onMounted(() => {
|
||||||
locale: strapiLocale,
|
if (groupedProductions.value) {
|
||||||
});
|
activeNames.value = [
|
||||||
productions.value = response.data.map((item: Production) => ({
|
...Object.keys(groupedProductions.value),
|
||||||
...item,
|
'no-category',
|
||||||
// 保持 production_type 原始类型，兼容对象或字符串
|
];
|
||||||
production_type: item.production_type,
|
|
||||||
}));
|
|
||||||
// 默认展开所有分组
|
|
||||||
activeNames.value = Object.keys(groupedProductions.value);
|
|
||||||
activeNames.value.push('no-category'); // 展开未分类
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch productions:', error);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -101,12 +101,23 @@
|
|||||||
const localePath = useLocalePath();
|
const localePath = useLocalePath();
|
||||||
|
|
||||||
// 搜索相关
|
// 搜索相关
|
||||||
const loading = ref(true);
|
|
||||||
const { search } = useMeilisearch();
|
const { search } = useMeilisearch();
|
||||||
const keyword = ref('');
|
const keyword = ref('');
|
||||||
const activeRequestId = ref(0);
|
const activeRequestId = ref(0);
|
||||||
|
|
||||||
const sections = ref<SearchSection[]>([]);
|
const {
|
||||||
|
data: sections,
|
||||||
|
pending: loading,
|
||||||
|
error,
|
||||||
|
} = await useAsyncData(
|
||||||
|
() => `search-${route.query.query ?? ''}`,
|
||||||
|
async () => {
|
||||||
|
const q = String(route.query.query ?? '').trim();
|
||||||
|
if (!q) return [];
|
||||||
|
return await search(q, { limit: 12 });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// 本地化+空Section过滤
|
// 本地化+空Section过滤
|
||||||
const filteredSections = computed(() =>
|
const filteredSections = computed(() =>
|
||||||
sections.value
|
sections.value
|
||||||
@ -137,7 +148,7 @@
|
|||||||
return map;
|
return map;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 分类控制
|
// 分页控制
|
||||||
const currentPage = ref(1);
|
const currentPage = ref(1);
|
||||||
|
|
||||||
const hasResults = computed(() =>
|
const hasResults = computed(() =>
|
||||||
@ -165,7 +176,6 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
loading.value = true;
|
|
||||||
try {
|
try {
|
||||||
const results = await search(trimmed, { limit: 12 });
|
const results = await search(trimmed, { limit: 12 });
|
||||||
if (requestId === activeRequestId.value) {
|
if (requestId === activeRequestId.value) {
|
||||||
@ -178,10 +188,6 @@
|
|||||||
if (requestId === activeRequestId.value) {
|
if (requestId === activeRequestId.value) {
|
||||||
sections.value = [];
|
sections.value = [];
|
||||||
}
|
}
|
||||||
} finally {
|
|
||||||
if (requestId === activeRequestId.value) {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -203,15 +209,17 @@
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
watch(error, (value) => {
|
||||||
if (typeof route.query.query === 'string' && route.query.query.trim()) {
|
if (value) {
|
||||||
keyword.value = route.query.query;
|
console.error('数据获取失败: ', value);
|
||||||
performSearch(route.query.query);
|
|
||||||
} else {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (typeof route.query.query === 'string' && route.query.query.trim())
|
||||||
|
keyword.value = route.query.query;
|
||||||
|
});
|
||||||
|
|
||||||
useHead(() => ({
|
useHead(() => ({
|
||||||
title: t('search.head-title'),
|
title: t('search.head-title'),
|
||||||
}));
|
}));
|
||||||
|
|||||||
@ -1,36 +1,52 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div v-if="solution">
|
<div v-if="!pending">
|
||||||
<div class="page-header">
|
<div v-if="solution">
|
||||||
<el-breadcrumb class="breadcrumb" separator="/">
|
<div class="page-header">
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
<el-breadcrumb class="breadcrumb" separator="/">
|
||||||
<NuxtLink :to="$localePath('/')">{{
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
$t('navigation.home')
|
<NuxtLink :to="$localePath('/')">{{
|
||||||
}}</NuxtLink>
|
$t('navigation.home')
|
||||||
</el-breadcrumb-item>
|
}}</NuxtLink>
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
</el-breadcrumb-item>
|
||||||
<NuxtLink :to="$localePath('/solutions')">{{
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
$t('navigation.solutions')
|
<NuxtLink :to="$localePath('/solutions')">{{
|
||||||
}}</NuxtLink>
|
$t('navigation.solutions')
|
||||||
</el-breadcrumb-item>
|
}}</NuxtLink>
|
||||||
<el-breadcrumb-item class="text-md opacity-50">{{
|
</el-breadcrumb-item>
|
||||||
solution.title
|
<el-breadcrumb-item class="text-md opacity-50">{{
|
||||||
}}</el-breadcrumb-item>
|
solution.title
|
||||||
</el-breadcrumb>
|
}}</el-breadcrumb-item>
|
||||||
</div>
|
</el-breadcrumb>
|
||||||
<div class="page-content">
|
</div>
|
||||||
<div class="solution-info">
|
<div class="page-content">
|
||||||
<h1>{{ solution.title }}</h1>
|
<div class="solution-info">
|
||||||
<div class="solution-meta">
|
<h1>{{ solution.title }}</h1>
|
||||||
<span class="solution-date">
|
<div class="solution-meta">
|
||||||
CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
|
<span class="solution-date">
|
||||||
</span>
|
CreatedAt:
|
||||||
|
{{ new Date(solution.createdAt).toLocaleDateString() }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="summary">{{ solution.summary }}</p>
|
||||||
|
<div class="solution-content">
|
||||||
|
<markdown-renderer :content="solution.content || ''" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="summary">{{ solution.summary }}</p>
|
</div>
|
||||||
<div class="solution-content">
|
<div v-else class="not-found">
|
||||||
<markdown-renderer :content="solution.content || ''" />
|
<el-result
|
||||||
</div>
|
icon="warning"
|
||||||
|
:title="$t('solution-not-found')"
|
||||||
|
:sub-title="$t('solution-not-found-desc')"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<el-button type="primary" @click="$router.push('/productions')">
|
||||||
|
{{ $t('back-to-solutions') }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-result>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="loading">
|
<div v-else class="loading">
|
||||||
@ -45,27 +61,23 @@
|
|||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const solution = ref<Solution | null>(null);
|
|
||||||
|
|
||||||
// 获取路由参数(documentId)
|
// 获取路由参数(documentId)
|
||||||
const documentId = computed(() => route.params.slug as string);
|
const documentId = computed(() => route.params.slug as string);
|
||||||
|
|
||||||
onMounted(async () => {
|
const { data, pending, error } = useAsyncData(
|
||||||
try {
|
() => `solution-${documentId.value}`,
|
||||||
const response = await findOne<Solution>('solutions', documentId.value, {
|
() =>
|
||||||
|
findOne<Solution>('solutions', documentId.value, {
|
||||||
populate: '*',
|
populate: '*',
|
||||||
locale: strapiLocale,
|
locale: strapiLocale,
|
||||||
});
|
})
|
||||||
if (response.data) {
|
);
|
||||||
solution.value = {
|
|
||||||
...response.data,
|
const solution = computed(() => data.value?.data ?? null);
|
||||||
// 确保 solution_type 保持原始类型
|
|
||||||
solution_type: response.data.solution_type,
|
watch(error, (value) => {
|
||||||
};
|
if (value) {
|
||||||
}
|
console.error('数据获取失败: ', value);
|
||||||
console.log('Fetched Solution:', solution.value);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch solution:', error);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -127,4 +139,11 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.not-found {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
</el-breadcrumb-item>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div class="solutions-container">
|
<div v-if="!pending" class="solutions-container">
|
||||||
<el-tabs v-model="activeName" class="solutions-tabs">
|
<el-tabs v-model="activeName" class="solutions-tabs">
|
||||||
<el-tab-pane :label="$t('all')" name="all">
|
<el-tab-pane :label="$t('all')" name="all">
|
||||||
<div class="solution-list">
|
<div class="solution-list">
|
||||||
@ -48,18 +48,34 @@
|
|||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-skeleton :rows="6" animated />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { find } = useStrapi();
|
const { find } = useStrapi();
|
||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
|
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
|
const { data, pending, error } = useAsyncData('solutions', () =>
|
||||||
|
find<Solution>('solutions', {
|
||||||
|
populate: {
|
||||||
|
cover: {
|
||||||
|
populate: '*',
|
||||||
|
},
|
||||||
|
solution_type: {
|
||||||
|
populate: '*',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
locale: strapiLocale,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
const activeName = ref<string>('all');
|
const activeName = ref<string>('all');
|
||||||
|
|
||||||
const solutions = ref<Solution[]>([]);
|
const solutions = computed(() => data.value?.data ?? []);
|
||||||
|
|
||||||
// 按类型分组
|
// 按类型分组
|
||||||
const groupedSolutions = computed(() => {
|
const groupedSolutions = computed(() => {
|
||||||
@ -81,27 +97,9 @@
|
|||||||
return gourps;
|
return gourps;
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
watch(error, (value) => {
|
||||||
try {
|
if (value) {
|
||||||
const response = await find<Solution>('solutions', {
|
console.error('数据获取失败: ', value);
|
||||||
populate: {
|
|
||||||
cover: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
solution_type: {
|
|
||||||
populate: '*',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
locale: strapiLocale,
|
|
||||||
});
|
|
||||||
solutions.value = response.data.map((item: Solution) => ({
|
|
||||||
...item,
|
|
||||||
solution_type: item.solution_type,
|
|
||||||
}));
|
|
||||||
console.log('Fetched Solutions:', solutions.value);
|
|
||||||
console.log('Grouped Solutions:', groupedSolutions.value);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch solutions:', error);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,31 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div v-if="content">
|
<support-tabs model-value="contact-us" />
|
||||||
<support-tabs model-value="contact-us" />
|
<div class="page-header">
|
||||||
<div class="page-header">
|
<h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
|
||||||
<h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
|
<el-breadcrumb class="breadcrumb" separator="/">
|
||||||
<el-breadcrumb class="breadcrumb" separator="/">
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
<NuxtLink :to="$localePath('/')">
|
||||||
<NuxtLink :to="$localePath('/')">
|
{{ $t('navigation.home') }}
|
||||||
{{ $t('navigation.home') }}
|
</NuxtLink>
|
||||||
</NuxtLink>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb-item>
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
<NuxtLink :to="$localePath('/support')">
|
||||||
<NuxtLink :to="$localePath('/support')">
|
{{ $t('navigation.support') }}
|
||||||
{{ $t('navigation.support') }}
|
</NuxtLink>
|
||||||
</NuxtLink>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb-item>
|
<el-breadcrumb-item class="text-md opacity-50">
|
||||||
<el-breadcrumb-item class="text-md opacity-50">
|
<NuxtLink :to="$localePath('/support/contact-us')">
|
||||||
<NuxtLink :to="$localePath('/support/contact-us')">
|
{{ $t('navigation.contact-info') }}
|
||||||
{{ $t('navigation.contact-info') }}
|
</NuxtLink>
|
||||||
</NuxtLink>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb-item>
|
</el-breadcrumb>
|
||||||
</el-breadcrumb>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-content">
|
<div v-if="!pending" class="page-content">
|
||||||
<markdown-renderer :content="content || ''" />
|
<markdown-renderer :content="content || ''" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="loading">
|
<div v-else class="loading">
|
||||||
<el-skeleton :rows="5" animated />
|
<el-skeleton :rows="5" animated />
|
||||||
@ -36,28 +34,20 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { findOne } = useStrapi();
|
const { findOne } = useStrapi();
|
||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
|
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const content = ref<string>('');
|
const { data, pending, error } = useAsyncData('contact-info', () =>
|
||||||
|
findOne<StrapiContactInfo>('contact-info', undefined, {
|
||||||
|
populate: '*',
|
||||||
|
locale: strapiLocale,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
onMounted(async () => {
|
const content = computed(() => data.value?.data.content ?? '');
|
||||||
try {
|
|
||||||
const response = await findOne<StrapiContactInfo>(
|
watch(error, (value) => {
|
||||||
'contact-info',
|
if (value) {
|
||||||
undefined,
|
console.error('数据获取失败: ', value);
|
||||||
{
|
|
||||||
populate: '*',
|
|
||||||
locale: strapiLocale,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (response.data) {
|
|
||||||
content.value = response.data.content || '';
|
|
||||||
} else {
|
|
||||||
console.warn('No contact info data found');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch contact info:', error);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -37,26 +37,23 @@
|
|||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const pending = ref(true);
|
const { data, pending, error } = useAsyncData('documents', () =>
|
||||||
|
find<ProductionDocument>('production-documents', {
|
||||||
|
populate: 'document',
|
||||||
|
locale: strapiLocale,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
const documents = ref<StrapiMedia[]>([]);
|
const documents = computed(
|
||||||
|
() =>
|
||||||
|
data.value?.data.map((item) => ({
|
||||||
|
...item.document,
|
||||||
|
})) || []
|
||||||
|
);
|
||||||
|
|
||||||
onMounted(async () => {
|
watch(error, (value) => {
|
||||||
try {
|
if (value) {
|
||||||
const response = await find<ProductionDocument>('production-documents', {
|
console.error('数据获取失败: ', value);
|
||||||
locale: strapiLocale,
|
|
||||||
populate: 'document',
|
|
||||||
});
|
|
||||||
if (response.data) {
|
|
||||||
documents.value =
|
|
||||||
response.data.map((item) => ({
|
|
||||||
...item.document,
|
|
||||||
})) || [];
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching documents:', error);
|
|
||||||
} finally {
|
|
||||||
pending.value = false;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div v-if="pending" class="flex justify-center items-center h-64">
|
<div v-if="pending" class="flex justify-center items-center h-64">
|
||||||
<el-spinner />
|
<el-skeleton :rows="6" animated />
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<support-tabs model-value="faq" />
|
<support-tabs model-value="faq" />
|
||||||
@ -37,22 +37,17 @@
|
|||||||
const { getStrapiLocale } = useLocalizations();
|
const { getStrapiLocale } = useLocalizations();
|
||||||
const strapiLocale = getStrapiLocale();
|
const strapiLocale = getStrapiLocale();
|
||||||
|
|
||||||
const questions = ref<Question[]>([]);
|
const { data, pending, error } = useAsyncData('questions', () =>
|
||||||
|
find<Question>('questions', {
|
||||||
|
locale: strapiLocale,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
const pending = ref(true);
|
const questions = computed(() => data.value?.data ?? null);
|
||||||
|
|
||||||
onMounted(async () => {
|
watch(error, (value) => {
|
||||||
try {
|
if (value) {
|
||||||
const faqData = await find<Question>('questions', {
|
console.error('数据获取失败: ', value);
|
||||||
locale: strapiLocale,
|
|
||||||
});
|
|
||||||
if (faqData) {
|
|
||||||
questions.value = faqData.data || [];
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch FAQ data:', error);
|
|
||||||
} finally {
|
|
||||||
pending.value = false;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -51,6 +51,9 @@
|
|||||||
"product-not-found": "Product Not Found",
|
"product-not-found": "Product Not Found",
|
||||||
"product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
|
"product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
|
||||||
"back-to-productions": "Back to Products",
|
"back-to-productions": "Back to Products",
|
||||||
|
"solution-not-found": "Solution Not Found",
|
||||||
|
"solution-not-found-desc": "Sorry, the solution you are lokking for does not exist or has been removed.",
|
||||||
|
"back-to-solutions": "Back to Solutions",
|
||||||
"no-content-available": "No detailed information available",
|
"no-content-available": "No detailed information available",
|
||||||
"loading": "Loading...",
|
"loading": "Loading...",
|
||||||
"our-productions": "Our Productions",
|
"our-productions": "Our Productions",
|
||||||
|
|||||||
@ -51,6 +51,9 @@
|
|||||||
"product-not-found": "产品未找到",
|
"product-not-found": "产品未找到",
|
||||||
"product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
|
"product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
|
||||||
"back-to-productions": "返回产品列表",
|
"back-to-productions": "返回产品列表",
|
||||||
|
"solution-not-found": "解决方案未找到",
|
||||||
|
"solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
|
||||||
|
"back-to-solutions": "返回解决方案列表",
|
||||||
"no-content-available": "暂无详细信息",
|
"no-content-available": "暂无详细信息",
|
||||||
"loading": "加载中...",
|
"loading": "加载中...",
|
||||||
"our-productions": "我们的产品",
|
"our-productions": "我们的产品",
|
||||||
|
|||||||
Reference in New Issue
Block a user