Feature: 页面内Markdown渲染 & 规格参数表格

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

@@ -13,7 +13,7 @@
       <!-- 产品详情内容 -->
       <div class="production-header">
         <div class="production-image">
-          <el-image :src="production.image_url" :alt="production.title" fit="contain" />
+          <el-image :src="production.production_image.url" :alt="production.title" fit="contain" />
         </div>
         <div class="production-info">
           <h1>{{ production.title }}</h1>
@@ -25,10 +25,11 @@
       <div class="production-content">
         <el-tabs v-model="activeName">
           <el-tab-pane label="产品详情" name="details">
-            <h2>{{ production.title }}</h2>
-            <p class="summary">{{ production.summary }}</p>
+            <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="specs" />
           <el-tab-pane label="相关文档" name="documents" />
         </el-tabs>
       </div>
@@ -36,7 +37,7 @@
 
     <!-- 加载状态 -->
     <div v-else-if="pending" class="loading">
-      <el-loading-text>{{ $t('loading') }}</el-loading-text>
+      {{ $t('loading') }}
     </div>
 
     <!-- 未找到产品 -->
@@ -53,20 +54,23 @@
 </template>
 
 <script setup lang="ts">
-interface ProductionDetail {
+interface ProductionDetails {
   id: number
   title: string
   summary: string
-  content?: string
-  image_url: string
-  slug?: string
+  production_type?: string
+  production_image: {
+    url: string
+  }
+  production_details?: string
+  production_specs?: string | object
+  documentId?: string
 }
 
 const route = useRoute()
-const router = useRouter()
-const { find } = useStrapi()
+const { findOne } = useStrapi()
 
-const production = ref<ProductionDetail | null>(null)
+const production = ref<ProductionDetails | null>(null)
 const pending = ref(true)
 
 const activeName = ref('details') // 默认选中概览标签
@@ -77,9 +81,9 @@ const productionParam = computed(() => route.params.slug as string)
 onMounted(async () => {
   try {
 
-    const response = await find(`productions/${productionParam.value}`, {
+    const response = await findOne<ProductionDetails>('productions', productionParam.value, {
       populate: '*',
-    }) as any
+    })
 
     if (response.data) {
       const item = response.data
@@ -87,12 +91,18 @@ onMounted(async () => {
         id: item.id,
         title: item.title,
         summary: item.summary,
-        content: item.content,
-        image_url: item.production_image?.url
+        production_details: item.production_details || '',
+        production_specs: item.production_specs || '',
+        production_image: {
+          url: item.production_image?.url
           ? `http://192.168.86.5:1337${item.production_image.url}`
-          : '',
-        slug: item.slug
+          : ''
+        },
+        documentId: item.documentId || '',
       }
+
+      console.log('Fetched production:', production.value)
+      console.log('Raw specs:', production.value.production_specs)
     }
   } catch (error) {
     console.error('Failed to fetch production:', error)
@@ -101,10 +111,6 @@ onMounted(async () => {
   }
 })
 
-const goBack = () => {
-  router.back()
-}
-
 // SEO
 useHead({
   title: computed(() => production.value?.title || 'Product Detail'),

app/pages/productions/index.vue

@@ -15,10 +15,23 @@
 
 
 <script setup lang="ts">
+import type { StrapiLocale } from '@nuxtjs/strapi'
+
 const { find } = useStrapi()
+const { locale: i18nLocale } = useI18n()
 
 const baseUrl = 'http://192.168.86.5:1337';
 
+interface Production {
+    id: number;
+    title: string;
+    summary: string;
+    production_image?: {
+        url: string;
+    };
+    documentId?: string;
+}
+
 class ProductionInfo {
     id: number;
     title: string;
@@ -35,17 +48,21 @@ class ProductionInfo {
     }
 }
 
+const strapiLocales = {
+    'zh': 'zh-Hans' as StrapiLocale, // 简体中文
+    'en': 'en' as StrapiLocale // 英文
+};
+
 const productions = ref<ProductionInfo[]>();
 
 onMounted(async () => {
     try {
-         
-        const response = await find('productions', {
+        const response = await find<Production>('productions', {
             populate: '*',
-        }) as any
+            locale: strapiLocales[i18nLocale.value], // 使用简体中文
+        })
         
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        productions.value = response.data.map((item: any) => {
+        productions.value = response.data.map((item: Production) => {
             return new ProductionInfo(
                 item.id,
                 item.title,
@@ -66,7 +83,7 @@ onMounted(async () => {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 20px;
     padding: 20px;
+    gap: 20px;
 }
 </style>