From c3964b8e35de88a7290044a21c7be2960fa00c87 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Sat, 16 Aug 2025 17:13:51 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20=E5=B0=8F=E4=BF=AE=E5=B0=8F=E8=A1=A5=20&?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/productions/[...slug].vue | 36 +++++--------------
 app/pages/productions/index.vue     | 55 +++++++----------------------
 app/types/strapi/common.ts          | 41 +++++++++++++++++++++
 app/types/strapi/index.ts           |  2 ++
 app/types/strapi/production.ts      | 14 ++++++++
 nuxt.config.ts                      |  4 +++
 6 files changed, 83 insertions(+), 69 deletions(-)
 create mode 100644 app/types/strapi/common.ts
 create mode 100644 app/types/strapi/index.ts
 create mode 100644 app/types/strapi/production.ts

diff --git a/app/pages/productions/[...slug].vue b/app/pages/productions/[...slug].vue
index 0cb88c1..c142e77 100644
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@@ -13,7 +13,7 @@
       <!-- 产品详情内容 -->
       <div class="production-header">
         <div class="production-image">
-          <el-image :src="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>
@@ -59,32 +59,19 @@
 </template>
 
 <script setup lang="ts">
-interface ProductionDetails {
-  id: number
-  title: string
-  summary: string
-  production_type?: string
-  production_image: {
-    url: string
-  }
-  production_details?: string
-  production_specs?: string | object
-  documentId?: string
-}
-
 const route = useRoute()
 const { findOne } = useStrapi()
 const { getStrapiLocale } = useLocalizations()
 
 const strapiLocale = getStrapiLocale()
 
-const production = ref<ProductionDetails | null>(null)
+const production = ref<Production | null>(null)
 const pending = ref(true)
 
 const activeName = ref('details') // 默认选中概览标签
 
 // 获取路由参数（slug 或 id）
-const productionParam = computed(() => route.params.slug as string)
+const documentId = computed(() => route.params.slug as string)
 
 const parsedSpecs = computed(() => {
   if (!production.value?.production_specs) return JSON.parse('{}')
@@ -106,7 +93,7 @@ const parsedSpecs = computed(() => {
 onMounted(async () => {
   try {
 
-    const response = await findOne<ProductionDetails>('productions', productionParam.value, {
+    const response = await findOne<Production>('productions', documentId.value, {
       populate: '*',
       locale: strapiLocale,
     })
@@ -114,21 +101,16 @@ onMounted(async () => {
     if (response.data) {
       const item = response.data
       production.value = {
-        id: item.id,
         title: item.title,
         summary: item.summary,
-        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}`
-            : ''
-        },
-        documentId: item.documentId || '',
+        production_type: item.production_type,
+        production_details: item.production_details,
+        production_specs: item.production_specs,
+        production_image: item.production_image,
+        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)
diff --git a/app/pages/productions/index.vue b/app/pages/productions/index.vue
index 76745a3..453cbdf 100644
--- a/app/pages/productions/index.vue
+++ b/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)
     }
diff --git a/app/types/strapi/common.ts b/app/types/strapi/common.ts
new file mode 100644
index 0000000..ef5fb21
--- /dev/null
+++ b/app/types/strapi/common.ts
@@ -0,0 +1,41 @@
+export interface StrapiEntity {
+    id?: number;
+    documentId?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    publishedAt?: string;
+    locale?: string;
+}
+
+export interface StrapiImage {
+    id: number;
+    url: string;
+    alternativeText?: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+    formats?: {
+        small?: StrapiImageFormat;
+        medium?: StrapiImageFormat;
+        thumbnail?: StrapiImageFormat;
+    }
+}
+
+export interface StrapiImageFormat {
+    url: string;
+    width: number;
+    height: number;
+    size: number;
+}
+
+export interface StrapiResponse<T> {
+    data: T;
+    meta?: {
+        pagination?: {
+            page: number;
+            pageSize: number;
+            pageCount: number;
+            total: number;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/types/strapi/index.ts b/app/types/strapi/index.ts
new file mode 100644
index 0000000..45240a7
--- /dev/null
+++ b/app/types/strapi/index.ts
@@ -0,0 +1,2 @@
+export * from './common';
+export * from './production';
\ No newline at end of file
diff --git a/app/types/strapi/production.ts b/app/types/strapi/production.ts
new file mode 100644
index 0000000..ac84b18
--- /dev/null
+++ b/app/types/strapi/production.ts
@@ -0,0 +1,14 @@
+import type { StrapiEntity, StrapiImage } from './common';
+
+export interface ProductionType extends StrapiEntity {
+    type: string;
+}
+
+export interface Production extends StrapiEntity {
+    title: string;
+    summary?: string;
+    production_type?: ProductionType;
+    production_image?: StrapiImage;
+    production_details?: string;
+    production_specs?: string | object;
+}
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 03462fe..487a4ad 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -80,6 +80,10 @@ export default defineNuxtConfig({
     cookieName: "strapi_jwt",
   },
 
+  imports: {
+    dirs: ['types/**']
+  },
+
 
   modules: [
     "@nuxt/eslint",