Fix: 修正国际化的显示、跳转问题

This commit is contained in:
2025-08-16 15:40:08 +08:00
parent daa91ac56f
commit eaf7d3be38
8 changed files with 94 additions and 37 deletions

View File

@ -28,7 +28,7 @@
<markdown-renderer :content="production.production_details || ''" />
</el-tab-pane>
<el-tab-pane label="技术规格" name="specs">
<spec-table :data="production.production_specs" />
<spec-table :data="parsedSpecs" />
</el-tab-pane>
<el-tab-pane label="相关文档" name="documents" />
</el-tabs>
@ -37,7 +37,12 @@
<!-- 加载状态 -->
<div v-else-if="pending" class="loading">
{{ $t('loading') }}
<el-skeleton style="--el-skeleton-circle-size: 400px">
<template #template>
<el-skeleton-item variant="circle" />
</template>
</el-skeleton>
<el-skeleton :rows="5" animated />
</div>
<!-- 未找到产品 -->
@ -69,6 +74,9 @@ interface ProductionDetails {
const route = useRoute()
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()
const production = ref<ProductionDetails | null>(null)
const pending = ref(true)
@ -78,11 +86,29 @@ const activeName = ref('details') // 默认选中概览标签
// 获取路由参数slug 或 id
const productionParam = computed(() => route.params.slug as string)
const parsedSpecs = computed(() => {
if (!production.value?.production_specs) return JSON.parse('{}')
const specs = production.value.production_specs
if (typeof specs === 'string') {
try {
return JSON.parse(specs)
} catch (error) {
console.error('Failed to parse production_specs:', error)
return specs
}
}
return specs
})
onMounted(async () => {
try {
const response = await findOne<ProductionDetails>('productions', productionParam.value, {
populate: '*',
locale: strapiLocale,
})
if (response.data) {
@ -95,8 +121,8 @@ onMounted(async () => {
production_specs: item.production_specs || '',
production_image: {
url: item.production_image?.url
? `http://192.168.86.5:1337${item.production_image.url}`
: ''
? `http://192.168.86.5:1337${item.production_image.url}`
: ''
},
documentId: item.documentId || '',
}
@ -176,7 +202,7 @@ useHead({
display: flex;
justify-content: center;
align-items: center;
height: 300px;
margin-top: 1rem;
}
.not-found {