Fix: 修正产品规格参数显示问题

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>