remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SSR): 将解决方案页改为SSR

Browse Source 
- 使用Nuxt的useAsyncData
- 添加i18n信息
This commit is contained in:
R2m1liA
2025-09-28 16:11:35 +08:00
parent dbd9346362
commit a7a4551528
4 changed files with 92 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
app/pages/solutions/[...slug].vue
View File

@ -1,36 +1,52 @@
<template>
<div class="page-container">
<div v-if="solution">
<div class="page-header">
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{
$t('navigation.home')
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/solutions')">{{
$t('navigation.solutions')
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">{{
solution.title
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<div class="solution-info">
<h1>{{ solution.title }}</h1>
<div class="solution-meta">
<span class="solution-date">
CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
</span>
<div v-if="!pending">
<div v-if="solution">
<div class="page-header">
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{
$t('navigation.home')
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/solutions')">{{
$t('navigation.solutions')
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">{{
solution.title
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<div class="solution-info">
<h1>{{ solution.title }}</h1>
<div class="solution-meta">
<span class="solution-date">
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>
<p class="summary">{{ solution.summary }}</p>
<div class="solution-content">
<markdown-renderer :content="solution.content || ''" />
</div>
</div>
<div v-else class="not-found">
<el-result
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 v-else class="loading">
@ -45,27 +61,23 @@
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();
const solution = ref<Solution | null>(null);
// 获取路由参数(documentId)
const documentId = computed(() => route.params.slug as string);
onMounted(async () => {
try {
const response = await findOne<Solution>('solutions', documentId.value, {
const { data, pending, error } = useAsyncData(
() => `solution-${documentId.value}`,
() =>
findOne<Solution>('solutions', documentId.value, {
populate: '*',
locale: strapiLocale,
});
if (response.data) {
solution.value = {
...response.data,
// 确保 solution_type 保持原始类型
solution_type: response.data.solution_type,
};
}
console.log('Fetched Solution:', solution.value);
} catch (error) {
console.error('Failed to fetch solution:', error);
})
);
const solution = computed(() => data.value?.data ?? null);
watch(error, (value) => {
if (value) {
console.error('数据获取失败: ', value);
}
});
</script>
@ -127,4 +139,11 @@
align-items: center;
margin-top: 1rem;
}
.not-found {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
</style>