Feature: 产品页跳转

app/pages/productions/index.vue

@@ -1,10 +1,15 @@
 <template>
     <div class="productions-container">
         <production-card
-v-for="production in productions" :key="production.title" :image-url="production.image_url"
-            :name="production.title" :description="production.summary" />
+            v-for="production in productions" 
+            :id="production.id"
+            :key="production.id" 
+            :slug="production.slug"
+            :image-url="production.image_url"
+            :name="production.title" 
+            :description="production.summary" 
+        />
     </div>
-
 </template>
 
 
@@ -15,38 +20,43 @@ const { find } = useStrapi()
 const baseUrl = 'http://192.168.86.5:1337';
 
 class ProductionInfo {
+    id: number;
     title: string;
     summary: string;
     image_url: string;
+    slug?: string;
 
-    constructor(title: string, summary: string, image_url: 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;
     }
 }
 
-interface StrapiProduction {
-    title: string;
-    summary: string;
-    production_image?: {
-        url: string;
-    };
-}
-
 const productions = ref<ProductionInfo[]>();
 
 onMounted(async () => {
-    const response = await find<StrapiProduction>('productions', {
-        populate: '*',
-    })
-    productions.value = response.data.map((item: StrapiProduction) => {
-        return new ProductionInfo(
-            item.title,
-            item.summary,
-            item.production_image?.url || ''
-        );
-    });
+    try {
+         
+        const response = await find('productions', {
+            populate: '*',
+        }) as any
+        
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        productions.value = response.data.map((item: any) => {
+            return new ProductionInfo(
+                item.id,
+                item.title,
+                item.summary,
+                item.production_image?.url || '',
+                item.documentId ? item.documentId : undefined
+            );
+        });
+    } catch (error) {
+        console.error('Failed to fetch productions:', error)
+    }
 });
 
 </script>