feat(SSR): 将服务支持页面改为SSR

This commit is contained in:
2025-09-28 16:27:01 +08:00
parent a7a4551528
commit d4c079286e
3 changed files with 59 additions and 77 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>