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

app/app.vue

@@ -10,19 +10,13 @@
 
 <script setup lang="ts">
 import { ElConfigProvider } from 'element-plus';
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
-import en from 'element-plus/es/locale/lang/en';
 
 const { login } = useStrapiAuth();
 
-const { locale } = useI18n();
+const { getElementPlusLocale } = useLocalizations();
 
-const elementPlusLocales = {
+const elementPlusLocale = getElementPlusLocale();
-  'zh': zhCn,
-  'en': en,
-}
 
-const elementPlusLocale = computed(() => elementPlusLocales[locale.value] || zhCn);
 
 onMounted(() => {
   // 检查用户是否已登录

app/components/JinshenFooter.vue

@@ -17,19 +17,19 @@
         <h4>{{ $t('quick-links') }}</h4>
         <ul class="footer-links">
           <li>
-            <NuxtLink to="/">{{ $t('navigation.home') }}</NuxtLink>
+            <NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
           </li>
           <li>
-            <NuxtLink to="/productions">{{ $t('productions') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/productions')">{{ $t('productions') }}</NuxtLink>
           </li>
           <li>
-            <NuxtLink to="/solutions">{{ $t('solutions') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/solutions')">{{ $t('solutions') }}</NuxtLink>
           </li>
           <li>
-            <NuxtLink to="/support">{{ $t('support') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/support')">{{ $t('support') }}</NuxtLink>
           </li>
           <li>
-            <NuxtLink to="/about">{{ $t('about-us') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/about')">{{ $t('about-us') }}</NuxtLink>
           </li>
         </ul>
       </div>
@@ -79,11 +79,11 @@
           <p>备案号: 浙ICP备12003709号-5</p>
         </div>
         <div class="footer-links-bottom">
-          <NuxtLink to="/privacy">{{ $t('privacy-policy') }}</NuxtLink>
+          <NuxtLink :to="$localePath('/privacy')">{{ $t('privacy-policy') }}</NuxtLink>
           <span class="separator">|</span>
-          <NuxtLink to="/terms">{{ $t('terms-of-service') }}</NuxtLink>
+          <NuxtLink :to="$localePath('/terms')">{{ $t('terms-of-service') }}</NuxtLink>
           <span class="separator">|</span>
-          <NuxtLink to="/sitemap">{{ $t('sitemap') }}</NuxtLink>
+          <NuxtLink :to="$localePath('/sitemap')">{{ $t('sitemap') }}</NuxtLink>
         </div>
       </div>
     </div>

app/components/JinshenHeader.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="header-container">
         <div class="logo-section">
-            <NuxtLink to="/" class="logo-link">
+            <NuxtLink :to="$localePath('/')" class="logo-link">
                 <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
             </NuxtLink>
         </div>
@@ -9,16 +9,16 @@
 
         <!-- 导航菜单 -->
         <el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
-            <el-menu-item index="/productions">
+            <el-menu-item :index="$localePath('/productions')">
                 <span class="title">{{ $t('productions') }}</span>
             </el-menu-item>
-            <el-menu-item index="/solutions">
+            <el-menu-item :index="$localePath('/solutions')">
                 <span class="title">{{ $t('solutions') }}</span>
             </el-menu-item>
-            <el-menu-item index="/support">
+            <el-menu-item :index="$localePath('/support')">
                 <span class="title">{{ $t('support') }}</span>
             </el-menu-item>
-            <el-menu-item index="/about">
+            <el-menu-item :index="$localePath('/about')">
                 <span class="title">{{ $t('about-us') }}</span>
             </el-menu-item>
         </el-menu>

app/components/ProductionCard.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script setup lang="ts">
+
 interface Props {
     name: string
     description: string
@@ -23,13 +24,13 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const router = useRouter()
+const localePath = useLocalePath()
 
 const handleClick = () => {
     // 优先使用 slug，如果没有则使用 id
     const routeParam = props.slug || props.id
     if (routeParam) {
-        router.push(`/productions/${routeParam}`)
+        navigateTo(localePath(`/productions/${routeParam}`))
     }
 }
 </script>

app/composables/useLocalizations.ts

@@ -0,0 +1,39 @@
+import type { StrapiLocale } from '@nuxtjs/strapi';
+import type { Language as ElementLanguage } from 'element-plus/es/locale';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import en from 'element-plus/es/locale/lang/en';
+
+// Strapi本地化映射
+export const strapiLocales: Record<string, StrapiLocale> = {
+    'zh': 'zh-Hans',
+    'en': 'en'
+}
+
+// Element Plus本地化映射
+export const elementPlusLocales: Record<string, ElementLanguage> = {
+    'zh': zhCn,
+    'en': en
+}
+
+export const useLocalizations = () => {
+    const { locale } = useI18n();
+
+    // 获取Strapi本地化代码
+    const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
+        const currentLocale = nuxtLocale || locale.value;
+        return strapiLocales[currentLocale] || 'zh-Hans';
+    }
+
+    // 获取Element Plus本地化
+    const getElementPlusLocale = (nuxtLocale?: string) => {
+        const currentLocale = nuxtLocale || locale.value;
+        const elementPlusLocale = elementPlusLocales[currentLocale] || elementPlusLocales['zh'];
+        return elementPlusLocale;
+    }
+
+    return {
+        locale: readonly(locale),
+        getStrapiLocale,
+        getElementPlusLocale,
+    }
+}

app/pages/productions/[...slug].vue

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

app/pages/productions/index.vue

@@ -15,10 +15,10 @@
 
 
 <script setup lang="ts">
-import type { StrapiLocale } from '@nuxtjs/strapi'
-
 const { find } = useStrapi()
-const { locale: i18nLocale } = useI18n()
+const { getStrapiLocale } = useLocalizations()
+
+const strapiLocale = getStrapiLocale()
 
 const baseUrl = 'http://192.168.86.5:1337';
 
@@ -48,18 +48,13 @@ class ProductionInfo {
     }
 }
 
-const strapiLocales = {
-    'zh': 'zh-Hans' as StrapiLocale, // 简体中文
-    'en': 'en' as StrapiLocale // 英文
-};
-
 const productions = ref<ProductionInfo[]>();
 
 onMounted(async () => {
     try {
         const response = await find<Production>('productions', {
             populate: '*',
-            locale: strapiLocales[i18nLocale.value], // 使用简体中文
+            locale: strapiLocale, // 使用简体中文
         })
         
         productions.value = response.data.map((item: Production) => {

nuxt.config.ts

@@ -59,12 +59,14 @@ export default defineNuxtConfig({
       useCookie: true,
       cookieKey: "i18n_redirected",
       redirectOn: "root",
+      alwaysRedirect: true
     },
     locales: [
       { code: "en", language: "en-US", name: "English", file: "en.json" },
       { code: "zh", language: "zh-CN", name: "简体中文", file: "zh.json" },
     ],
     defaultLocale: "zh",
+    strategy: "prefix_except_default",
     langDir: "locales",
   },