Fix: 小修小补 & 优化代码结构

app/pages/productions/index.vue

@@ -4,10 +4,10 @@
             v-for="production in productions" 
             :id="production.id"
             :key="production.id" 
-            :slug="production.slug"
-            :image-url="production.image_url"
+            :slug="production.documentId"
+            :image-url="useStrapiMedia(production?.production_image?.url || '')"
             :name="production.title" 
-            :description="production.summary" 
+            :description="production.summary || ''" 
         />
     </div>
 </template>
@@ -20,35 +20,7 @@ const { getStrapiLocale } = useLocalizations()
 
 const strapiLocale = getStrapiLocale()
 
-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;
-    summary: string;
-    image_url: string;
-    slug?: string;
-
-    constructor(id: number, title: string, summary: string, image_url: string, slug?: string) {
-        this.id = id;
-        this.title = title;
-        this.summary = summary;
-        this.image_url = baseUrl + image_url;
-        this.slug = slug;
-    }
-}
-
-const productions = ref<ProductionInfo[]>();
+const productions = ref<Production[]>();
 
 onMounted(async () => {
     try {
@@ -56,16 +28,15 @@ onMounted(async () => {
             populate: '*',
             locale: strapiLocale, // 使用简体中文
         })
-        
-        productions.value = response.data.map((item: Production) => {
-            return new ProductionInfo(
-                item.id,
-                item.title,
-                item.summary,
-                item.production_image?.url || '',
-                item.documentId ? item.documentId : undefined
-            );
-        });
+        productions.value = response.data.map((item: Production) => ({
+            title: item.title,
+            summary: item.summary,
+            production_type: item.production_type,
+            production_image: item.production_image,
+            production_details: item.production_details,
+            production_specs: item.production_specs,
+            documentId: item.documentId
+        }))
     } catch (error) {
         console.error('Failed to fetch productions:', error)
     }