style: 调整代码格式

- 根据ESLint文件规范格式化app文件夹中的代码

app/pages/productions/[...slug].vue

@@ -4,23 +4,51 @@
       <!-- 面包屑导航 -->
       <el-breadcrumb class="breadcrumb" separator="/">
         <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+          <NuxtLink :to="$localePath('/')">{{
+            $t("navigation.home")
+          }}</NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opacity-50">
-          <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
+          <NuxtLink :to="$localePath('/productions')">{{
+            $t("navigation.productions")
+          }}</NuxtLink>
         </el-breadcrumb-item>
-        <el-breadcrumb-item class="text-md opactiy-50">{{ production.title }}</el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opactiy-50">{{
+          production.title
+        }}</el-breadcrumb-item>
       </el-breadcrumb>
 
       <!-- 产品详情内容 -->
       <div class="production-header">
         <div class="production-image">
-          <el-image v-if="production.production_images.length <= 1" :src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title" fit="contain" />
-          <el-carousel v-else class="production-carousel" height="500px" :autoplay="false" :loop="false" arrow="always">
-            <el-carousel-item v-for="(item, index) in production.production_images || []" :key="index">
+          <el-image
+            v-if="production.production_images.length <= 1"
+            :src="useStrapiMedia(production?.cover?.url || '')"
+            :alt="production.title"
+            fit="contain"
+          />
+          <el-carousel
+            v-else
+            class="production-carousel"
+            height="500px"
+            :autoplay="false"
+            :loop="false"
+            arrow="always"
+          >
+            <el-carousel-item
+              v-for="(item, index) in production.production_images || []"
+              :key="index"
+            >
               <div class="production-carousel-item">
-                <el-image :src="useStrapiMedia(item.url || '')" :alt="item.alternativeText || production.title" fit="contain" lazy />
-                <p v-if="item.caption" class="production-image-caption">{{ item.caption }}</p>
+                <el-image
+                  :src="useStrapiMedia(item.url || '')"
+                  :alt="item.alternativeText || production.title"
+                  fit="contain"
+                  lazy
+                />
+                <p v-if="item.caption" class="production-image-caption">
+                  {{ item.caption }}
+                </p>
               </div>
             </el-carousel-item>
           </el-carousel>
@@ -44,7 +72,12 @@
             <question-list :questions="production.questions" />
           </el-tab-pane>
           <el-tab-pane label="相关文档" name="documents">
-            <document-list :documents="production.production_documents.map(item => item.document) || []" />
+            <document-list
+              :documents="
+                production.production_documents.map((item) => item.document) ||
+                []
+              "
+            />
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -62,10 +95,14 @@
 
     <!-- 未找到产品 -->
     <div v-else class="not-found">
-      <el-result icon="warning" :title="$t('product-not-found')" :sub-title="$t('product-not-found-desc')">
+      <el-result
+        icon="warning"
+        :title="$t('product-not-found')"
+        :sub-title="$t('product-not-found-desc')"
+      >
         <template #extra>
           <el-button type="primary" @click="$router.push('/productions')">
-            {{ $t('back-to-productions') }}
+            {{ $t("back-to-productions") }}
           </el-button>
         </template>
       </el-result>
@@ -74,65 +111,69 @@
 </template>
 
 <script setup lang="ts">
-const route = useRoute()
-const { findOne } = useStrapi()
-const { getStrapiLocale } = useLocalizations()
-const strapiLocale = getStrapiLocale()
+const route = useRoute();
+const { findOne } = useStrapi();
+const { getStrapiLocale } = useLocalizations();
+const strapiLocale = getStrapiLocale();
 
-const production = ref<Production | null>(null)
-const pending = ref(true)
+const production = ref<Production | null>(null);
+const pending = ref(true);
 
-const activeName = ref('details') // 默认选中概览标签
+const activeName = ref("details"); // 默认选中概览标签
 
 // 获取路由参数（slug 或 id）
-const documentId = computed(() => route.params.slug as string)
+const documentId = computed(() => route.params.slug as string);
 
 onMounted(async () => {
   try {
-    const response = await findOne<Production>('productions', documentId.value, {
-      populate: {
-        production_specs: {
-          populate: '*',
+    const response = await findOne<Production>(
+      "productions",
+      documentId.value,
+      {
+        populate: {
+          production_specs: {
+            populate: "*",
+          },
+          production_images: {
+            populate: "*",
+          },
+          cover: {
+            populate: "*",
+          },
+          questions: {
+            populate: "*",
+          },
+          production_documents: {
+            populate: "document",
+          },
         },
-        production_images: {
-          populate: '*',
-        },
-        cover: {
-          populate: '*',
-        },
-        questions: {
-          populate: '*',
-        },
-        production_documents: {
-          populate: 'document',
-        },
-      },
-      locale: strapiLocale,
-    })
+        locale: strapiLocale,
+      }
+    );
     if (response.data) {
-      const item = response.data
+      const item = response.data;
       production.value = {
         ...item,
-      }
-      console.log('Fetched production:', production.value)
+      };
+      console.log("Fetched production:", production.value);
     }
   } catch (error) {
-    console.error('Failed to fetch production:', error)
+    console.error("Failed to fetch production:", error);
   } finally {
-    pending.value = false
+    pending.value = false;
   }
-})
+});
 
 // SEO
 useHead({
-  title: computed(() => production.value?.title || 'Product Detail'),
+  title: computed(() => production.value?.title || "Product Detail"),
   meta: [
     {
-      name: 'description',
-      content: computed(() => production.value?.summary || '')
-    }
-  ]
-})
+      name: "description",
+      content: computed(() => production.value?.summary || ""),
+    },
+  ],
+});
 </script>
 
 <style scoped>

app/pages/productions/index.vue

@@ -1,143 +1,158 @@
 <template>
-    <div class="page-container">
-        <div class="page-header">
-            <h1 class="page-title">{{ $t('our-productions') }}</h1>
-            <el-breadcrumb class="breadcrumb">
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
-                </el-breadcrumb-item>
-                <el-breadcrumb-item class="text-md opacity-50">
-                    <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="page-content">
-            <div class="productions-container">
-                <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?.cover?.url || '')"
-                                :name="production.title" :description="production.summary || ''" />
-                        </div>
-                    </el-collapse-item>
-                </el-collapse>
-            </div>
-        </div>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">{{ $t("our-productions") }}</h1>
+      <el-breadcrumb class="breadcrumb">
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/')">{{
+            $t("navigation.home")
+          }}</NuxtLink>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/productions')">{{
+            $t("navigation.productions")
+          }}</NuxtLink>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
+    <div class="page-content">
+      <div class="productions-container">
+        <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?.cover?.url || '')"
+                :name="production.title"
+                :description="production.summary || ''"
+              />
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
+  </div>
 </template>
 
-
-
 <script setup lang="ts">
-const { find } = useStrapi()
-const { getStrapiLocale } = useLocalizations()
+const { find } = useStrapi();
+const { getStrapiLocale } = useLocalizations();
 
-const strapiLocale = getStrapiLocale()
+const strapiLocale = getStrapiLocale();
 
-const activeNames = ref<string[]>([])
+const activeNames = ref<string[]>([]);
 
-const productions = ref<Production[]>([])
+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)
+  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 || "";
     }
-    return groups
-})
+    if (!groups[typeKey]) groups[typeKey] = [];
+    groups[typeKey]?.push(prod);
+  }
+  return groups;
+});
 
 onMounted(async () => {
-    try {
-        const response = await find<Production>('productions', {
-            populate: {
-                cover: {
-                    populate: '*',
-                },
-                production_type: {
-                    populate: '*'
-                },
-            },
-            filters: {
-                show_in_production_list: {
-                    $eq: true, // 只获取在产品列表中显示的产品
-                },
-            },
-            locale: strapiLocale,
-        })
-        productions.value = response.data.map((item: Production) => ({
-            ...item,
-            // 保持 production_type 原始类型，兼容对象或字符串
-            production_type: item.production_type,
-        }))
-        // 默认展开所有分组
-        activeNames.value = Object.keys(groupedProductions.value)
-        activeNames.value.push('no-category') // 展开未分类
-    } catch (error) {
-        console.error('Failed to fetch productions:', error)
-    }
+  try {
+    const response = await find<Production>("productions", {
+      populate: {
+        cover: {
+          populate: "*",
+        },
+        production_type: {
+          populate: "*",
+        },
+      },
+      filters: {
+        show_in_production_list: {
+          $eq: true, // 只获取在产品列表中显示的产品
+        },
+      },
+      locale: strapiLocale,
+    });
+    productions.value = response.data.map((item: Production) => ({
+      ...item,
+      // 保持 production_type 原始类型，兼容对象或字符串
+      production_type: item.production_type,
+    }));
+    // 默认展开所有分组
+    activeNames.value = Object.keys(groupedProductions.value);
+    activeNames.value.push("no-category"); // 展开未分类
+  } catch (error) {
+    console.error("Failed to fetch productions:", error);
+  }
 });
 </script>
 
 <style scoped>
 .page-container {
-    padding: 2rem;
-    margin: 0 auto;
-    max-width: 1200px;
+  padding: 2rem;
+  margin: 0 auto;
+  max-width: 1200px;
 }
 
 .page-header {
-    display: flex;
+  display: flex;
 }
 
 .page-title {
-    font-size: 2rem;
-    font-weight: bold;
-    color: var(--el-color-primary);
-    margin-bottom: 1rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--el-color-primary);
+  margin-bottom: 1rem;
 }
 
 .breadcrumb {
-    margin-left: auto;
+  margin-left: auto;
 }
 
 .productions-container {
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
 }
 
 .production-group {
-    margin-bottom: 32px;
+  margin-bottom: 32px;
 }
 
 .group-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 16px;
-    color: var(--el-color-primary);
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: var(--el-color-primary);
 }
 
 .group-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding-top: 1rem;
-    gap: 20px;
-    justify-content: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 1rem;
+  gap: 20px;
+  justify-content: flex-start;
 }
 
 :deep(.el-collapse-item__header) {
-    padding: 30px auto;
-    font-size: 1.5rem;
+  padding: 30px auto;
+  font-size: 1.5rem;
 }
-</style>
+</style>