app/components/SpecTable.vue

@@ -1,19 +1,10 @@
 <template>
     <div class="spec-collapse">
-        <el-collapse v-for="(value, key) in data" :key="key" v-model="activeName">
-            <el-collapse-item :title="key" :name="key">
+        <el-collapse  v-model="activeName">
+            <el-collapse-item v-for="item in data" :key="item.title" :title="item.title" :name="item.title">
                 <el-descriptions :column="1" border>
-                    <el-descriptions-item v-for="(subValue, subKey) in value" :key="subKey" :label="String(subKey)">
-                        <div v-if="isPrimitive(subValue)">
-                            {{ subValue }}
-                        </div>
-                        <div v-else>
-                            <ul>
-                                <li v-for="(item, index) in subValue" :key="index">
-                                    {{ index }}: {{ item }}
-                                </li>
-                            </ul>
-                        </div>
+                    <el-descriptions-item v-for="subItem in item.items" :key="subItem.label" :label="subItem.label">
+                        {{ subItem.value }}
                     </el-descriptions-item>
                 </el-descriptions>
             </el-collapse-item>
@@ -24,20 +15,13 @@
 <script lang="ts" setup>
 const props = defineProps({
     data: {
-        type: Object,
+        type: Object as () => ProductionSpecGroup[],
         required: true
     }
 })
 
-const isPrimitive = (val: unknown): boolean => {
-    return (
-        typeof val === 'string' ||
-        typeof val === 'number' ||
-        typeof val === 'boolean' ||
-        val === null
-    )
-}
-
 // 默认全部展开
-const activeName = ref<string[]>(Object.keys(props.data) || [])
+const activeName = ref<string[]>(props.data.map((item: ProductionSpecGroup) => {
+    return item.title
+}) || [])
 </script>

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

@@ -13,7 +13,9 @@
       <!-- 产品详情内容 -->
       <div class="production-header">
         <div class="production-image">
-          <el-image :src="useStrapiMedia(production?.production_image?.url || '')" :alt="production.title" fit="contain" />
+          <el-image
+:src="useStrapiMedia(production?.production_image?.url || '')" :alt="production.title"
+            fit="contain" />
         </div>
         <div class="production-info">
           <h1>{{ production.title }}</h1>
@@ -28,7 +30,7 @@
             <markdown-renderer :content="production.production_details || ''" />
           </el-tab-pane>
           <el-tab-pane label="技术规格" name="specs">
-            <spec-table :data="parsedSpecs" />
+            <spec-table :data="production.production_specs" />
           </el-tab-pane>
           <el-tab-pane label="相关文档" name="documents" />
         </el-tabs>
@@ -59,10 +61,11 @@
 </template>
 
 <script setup lang="ts">
+import type { Production } from '~/types/strapi/production'
+
 const route = useRoute()
 const { findOne } = useStrapi()
 const { getStrapiLocale } = useLocalizations()
-
 const strapiLocale = getStrapiLocale()
 
 const production = ref<Production | null>(null)
@@ -73,42 +76,28 @@ const activeName = ref('details') // 默认选中概览标签
 // 获取路由参数（slug 或 id）
 const documentId = 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<Production>('productions', documentId.value, {
-      populate: '*',
+      populate: {
+        production_specs: {
+          populate: '*',
+        },
+        production_image: {
+          populate: '*',
+        },
+      }, 
       locale: strapiLocale,
     })
     if (response.data) {
       const item = response.data
       production.value = {
-        title: item.title,
-        summary: item.summary,
-        production_type: item.production_type,
-        production_details: item.production_details,
-        production_specs: item.production_specs,
-        production_image: item.production_image,
-        documentId: item.documentId,
-        documents: item.documents || []       }
+        ...item,
+      }
+      console.log('Production details:', production.value)
     }
+    console.log('Parsed production:', production.value?.production_specs)
   } catch (error) {
     console.error('Failed to fetch production:', error)
   } finally {

app/pages/productions/index.vue

@@ -1,9 +1,18 @@
 <template>
     <div class="productions-container">
-        <production-card
-v-for="production in productions" :id="production.id" :key="production.id"
-            :slug="production.documentId" :image-url="useStrapiMedia(production?.production_image?.url || '')"
-            :name="production.title" :description="production.summary || ''" />
+        <el-collapse v-model="activeNames" class="production-collapse">
+            <el-collapse-item
+v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
+                :name="type || 'no-category'">
+                <div class="group-list">
+                    <production-card
+v-for="production in group" :key="production.documentId || production.id"
+                        :slug="production.documentId"
+                        :image-url="useStrapiMedia(production?.production_image?.url || '')" :name="production.title"
+                        :description="production.summary || ''" />
+                </div>
+            </el-collapse-item>
+        </el-collapse>
     </div>
 </template>
 
@@ -15,7 +24,26 @@ const { getStrapiLocale } = useLocalizations()
 
 const strapiLocale = getStrapiLocale()
 
-const productions = ref<Production[]>();
+const activeNames = ref<string[]>([])
+
+const productions = ref<Production[]>([])
+
+// 按类型分组
+// 兼容 production_type 既可能为对象也可能为字符串
+const groupedProductions = computed(() => {
+    const groups: Record<string, Production[]> = {}
+    for (const prod of productions.value) {
+        let typeKey = ''
+        if (typeof prod.production_type === 'string') {
+            typeKey = prod.production_type
+        } else if (prod.production_type && typeof prod.production_type === 'object' && 'type' in prod.production_type) {
+            typeKey = prod.production_type.type || ''
+        }
+        if (!groups[typeKey]) groups[typeKey] = []
+        groups[typeKey]?.push(prod)
+    }
+    return groups
+})
 
 onMounted(async () => {
     try {
@@ -29,28 +57,47 @@ onMounted(async () => {
             locale: strapiLocale,
         })
         productions.value = response.data.map((item: Production) => ({
-            title: item.title,
-            summary: item.summary,
+            ...item,
+            // 保持 production_type 原始类型，兼容对象或字符串
             production_type: item.production_type,
-            production_image: item.production_image,
-            production_details: item.production_details,
-            production_specs: item.production_specs,
-            documentId: item.documentId,
-            show_in_production_list: item.show_in_production_list,
         }))
+        // 默认展开所有分组
+        activeNames.value = Object.keys(groupedProductions.value)
+        activeNames.value.push('no-category') // 展开未分类
     } catch (error) {
         console.error('Failed to fetch productions:', error)
     }
 });
-
 </script>
 
 <style scoped>
 .productions-container {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-direction: column;
+    gap: 40px;
     padding: 20px;
+}
+
+.production-group {
+    margin-bottom: 32px;
+}
+
+.group-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: var(--el-color-primary);
+}
+
+.group-list {
+    display: flex;
+    flex-wrap: wrap;
     gap: 20px;
+    justify-content: flex-start;
+}
+
+:deep(.el-collapse-item__header) {
+    padding: 30px auto;
+    font-size: 1.5rem;
 }
 </style>

app/types/strapi/common.ts

@@ -1,19 +1,19 @@
 export interface StrapiEntity {
-    id?: number;
-    documentId?: string;
-    createdAt?: string;
-    updatedAt?: string;
-    publishedAt?: string;
-    locale?: string;
+    id: number;
+    documentId: string;
+    createdAt: string;
+    updatedAt: string;
+    publishedAt: string;
+    locale: string;
 }
 
 export interface StrapiMedia {
     id: number;
     url: string;
-    ext?: string;
-    name?: string;
-    alternativeText?: string;
-    caption?: string;
+    ext: string;
+    name: string;
+    alternativeText: string;
+    caption: string;
 }
 
 export interface StrapiImageFormat {
@@ -24,19 +24,19 @@ export interface StrapiImageFormat {
 }
 
 export interface StrapiImage extends StrapiMedia {
-    width?: number;
-    height?: number;
-    formats?: {
-        small?: StrapiImageFormat;
-        medium?: StrapiImageFormat;
-        thumbnail?: StrapiImageFormat;
+    width: number;
+    height: number;
+    formats: {
+        small: StrapiImageFormat;
+        medium: StrapiImageFormat;
+        thumbnail: StrapiImageFormat;
     }
 }
 
 export interface StrapiResponse<T> {
     data: T;
-    meta?: {
-        pagination?: {
+    meta: {
+        pagination: {
             page: number;
             pageSize: number;
             pageCount: number;

app/types/strapi/production.ts

@@ -4,13 +4,23 @@ export interface ProductionType extends StrapiEntity {
     type: string;
 }
 
+export interface ProductionSpecItem {
+    label: string;
+    value: string;
+}
+
+export interface ProductionSpecGroup {
+    title: string;
+    items: ProductionSpecItem[];
+}
+
 export interface Production extends StrapiEntity {
     title: string;
-    summary?: string;
-    production_type?: ProductionType;
-    production_image?: StrapiImage;
-    production_details?: string;
-    production_specs?: string | object;
-    documents?: StrapiMedia[];
-    show_in_production_list?: boolean;
+    summary: string;
+    production_type: ProductionType;
+    production_image: StrapiImage;
+    production_details: string;
+    production_specs: ProductionSpecGroup[];
+    documents: StrapiMedia[];
+    show_in_production_list: boolean;
 }