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

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_type: item.production_type,
-        production_specs: item.production_specs || '',
+        production_details: item.production_details,
-        production_image: {
+        production_specs: item.production_specs,
-          url: item.production_image?.url
+        production_image: item.production_image,
-            ? `http://192.168.86.5:1337${item.production_image.url}`
+        documentId: item.documentId,
-            : ''
-        },
-        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)

app/pages/productions/index.vue

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

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;
+        }
+    }
+}

app/types/strapi/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './production';

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;
+}

nuxt.config.ts

@@ -80,6 +80,10 @@ export default defineNuxtConfig({
     cookieName: "strapi_jwt",
   },
 
+  imports: {
+    dirs: ['types/**']
+  },
+
 
   modules: [
     "@nuxt/eslint",