Feature: 产品常见问题 & 相关文档下载

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

@@ -15,9 +15,7 @@
       <!-- 产品详情内容 -->
       <div class="production-header">
         <div class="production-image">
-          <el-image
-:src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title"
-            fit="contain" />
+          <el-image :src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title" fit="contain" />
         </div>
         <div class="production-info">
           <h1>{{ production.title }}</h1>
@@ -27,14 +25,42 @@
 
       <!-- 产品详细描述 -->
       <div class="production-content">
-        <el-tabs v-model="activeName" class="production-tabs">
+        <el-tabs v-model="activeName" class="production-tabs" stretch>
           <el-tab-pane label="产品详情" name="details">
             <markdown-renderer :content="production.production_details || ''" />
           </el-tab-pane>
           <el-tab-pane label="技术规格" name="specs">
             <spec-table :data="production.production_specs" />
           </el-tab-pane>
-          <el-tab-pane label="相关文档" name="documents" />
+          <el-tab-pane label="常见问题" name="faq">
+            <div class="faq-list">
+              <el-collapse class="faq-collapse" accordion>
+                <el-collapse-item
+v-for="(question, index) in production.questions" :key="index" :title="question.title"
+                  :name="String(index)">
+                  <markdown-renderer :content="question.content || ''" />
+                </el-collapse-item>
+              </el-collapse>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="相关文档" name="documents">
+            <div class="document-list">
+              <el-card v-for="(doc, index) in production.documents" :key="index" class="document-card">
+                <div class="document-info">
+                  <h3>{{ doc.caption || doc.name }}</h3>
+                  <div class="document-content">
+                    <span v-if="doc.size" class="document-meta">大小: {{ formatFileSize(doc.size) }}</span>
+                    <span v-if="doc.ext" class="document-meta">格式: {{ formatFileExtension(doc.ext) }}</span>
+                    <el-button
+class="download-button" type="primary"
+                      @click="downloadFile(doc.name, useStrapiMedia(doc.url || ''))">
+                      下载
+                    </el-button>
+                  </div>
+                </div>
+              </el-card>
+            </div>
+          </el-tab-pane>
         </el-tabs>
       </div>
     </div>
@@ -76,6 +102,19 @@ const activeName = ref('details') // 默认选中概览标签
 // 获取路由参数（slug 或 id）
 const documentId = computed(() => route.params.slug as string)
 
+const downloadFile = async (filename: string, url: string) => {
+  const response = await fetch(url)
+  const blob = await response.blob()
+  const fileUrl = window.URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = fileUrl
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  window.URL.revokeObjectURL(fileUrl)
+}
 
 onMounted(async () => {
   try {
@@ -90,6 +129,12 @@ onMounted(async () => {
         cover: {
           populate: '*',
         },
+        questions: {
+          populate: '*',
+        },
+        documents: {
+          populate: '*',
+        },
       },
       locale: strapiLocale,
     })
@@ -99,6 +144,7 @@ onMounted(async () => {
         ...item,
       }
     }
+    console.log('Fetched Production:', production.value)
   } catch (error) {
     console.error('Failed to fetch production:', error)
   } finally {
@@ -125,14 +171,12 @@ useHead({
 
 .breadcrumb {
   padding: 2rem;
-  margin-bottom: 2rem;
 }
 
 .production-header {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
-  margin-bottom: 3rem;
 }
 
 .production-image .el-image {
@@ -154,12 +198,9 @@ useHead({
   margin-bottom: 2rem;
 }
 
-.production-content {
-  margin-top: 2rem;
-}
-
-.production-tabs ::v-deep(.el-tabs__item) {
-  margin-left: 20px;
+.production-tabs ::v-deep(.el-tabs__nav) {
+  min-width: 30%;
+  float: right;
 }
 
 .production-tabs ::v-deep(.el-tabs__content) {
@@ -171,6 +212,46 @@ useHead({
   margin: 0;
 }
 
+.document-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.document-meta {
+  color: var(--el-text-color-secondary);
+  font-size: 0.8rem;
+}
+
+.download-button {
+  margin-left: auto;
+}
+
+.document-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+::v-deep(.el-collapse-item__header) {
+  font-size: 1rem;
+  padding: 1rem;
+}
+
+.faq-collapse {
+  border: none;
+}
+
+.faq-collapse :deep(.el-collapse-item) {
+  margin-bottom: 1rem;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.faq-collapse :deep(.el-collapse-item__header) {
+  border: 1px solid var(--el-border-color-light);
+}
+
 .loading {
   display: flex;
   justify-content: center;

app/types/strapi/common.ts

@@ -12,6 +12,7 @@ export interface StrapiMedia {
     url: string;
     ext: string;
     name: string;
+    size: number;
     alternativeText: string;
     caption: string;
 }

app/types/strapi/index.ts

@@ -2,3 +2,4 @@ export * from './common';
 export * from './production';
 export * from './singleTypes';
 export * from './solution';
+export * from './question';

app/types/strapi/production.ts

@@ -22,6 +22,7 @@ export interface Production extends StrapiEntity {
     production_images: StrapiImage[];
     production_details: string;
     production_specs: ProductionSpecGroup[];
+    questions: Question[];
     documents: StrapiMedia[];
     show_in_production_list: boolean;
 }

app/types/strapi/question.ts

@@ -0,0 +1,4 @@
+export interface Question extends StrapiEntity {
+    title: string;
+    content: string;
+}

app/utils/file.ts

@@ -0,0 +1,12 @@
+export function formatFileSize(sizeInKB: number): string {
+    if (sizeInKB < 1024) {
+        return `${sizeInKB.toFixed(2)} KB`;
+    } else {
+        const sizeInMB = sizeInKB / 1024;
+        return `${sizeInMB.toFixed(2)} MB`;
+    }
+}
+
+export function formatFileExtension(ext: string): string {
+    return ext.startsWith('.') ? ext.slice(1).toUpperCase() : ext.toUpperCase();
+}