refactor: 重构产品页

- 将产品详情页的相关部分提取为ProductHeader与ProductDetail两个组件

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

@@ -4,66 +4,10 @@
       <div v-if="product">
         <!-- 面包屑导航 -->
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
-
         <!-- 产品详情内容 -->
-        <div class="product-header">
-          <div class="product-image">
-            <el-image
-              v-if="product.images.length <= 1"
-              :src="getImageUrl(product.images[0].image)"
-              :alt="product.name"
-              fit="contain"
-            />
-            <el-carousel
-              v-else
-              class="product-carousel"
-              height="500px"
-              :autoplay="false"
-              :loop="false"
-              arrow="always"
-            >
-              <el-carousel-item
-                v-for="(item, index) in product.images || []"
-                :key="index"
-              >
-                <div class="product-carousel-item">
-                  <el-image
-                    :src="getImageUrl(item.image || '')"
-                    :alt="product.name"
-                    fit="contain"
-                    lazy
-                  />
-                  <p v-if="item.caption" class="product-image-caption">
-                    {{ item.caption }}
-                  </p>
-                </div>
-              </el-carousel-item>
-            </el-carousel>
-          </div>
-
-          <div class="product-info">
-            <h1>{{ product.name }}</h1>
-            <p class="summary">{{ product.summary }}</p>
-          </div>
-        </div>
-
+        <product-header :product="product" />
         <!-- 产品详细描述 -->
-        <div class="product-content">
-          <el-tabs v-model="activeName" class="product-tabs" stretch>
-            <el-tab-pane label="产品详情" name="details">
-              <markdown-renderer :content="product.description || ''" />
-            </el-tab-pane>
-            <el-tab-pane label="技术规格" name="specs">
-              <spec-table :data="product.specs" />
-            </el-tab-pane>
-            <el-tab-pane label="常见问题" name="faq">
-              <question-list :questions="product.faqs" />
-            </el-tab-pane>
-            <el-tab-pane label="相关文档" name="documents">
-              <document-list :documents="product.documents" />
-            </el-tab-pane>
-          </el-tabs>
-        </div>
+        <product-detail :product="product" />
       </div>
       <!-- 未找到产品 -->
       <div v-else class="not-found">
@@ -90,8 +34,6 @@
   const route = useRoute();
   const localePath = useLocalePath();
 
-  const { getImageUrl } = useDirectusImage();
-
   // 获取路由参数
   const id = computed(() => route.params.slug as string);
 
@@ -105,8 +47,6 @@
     return toProductView(rawProduct.value);
   });
 
-  const activeName = ref('details'); // 默认选中概览标签
-
   const breadcrumbItems = computed(() => [
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.products'), to: localePath('/products') },
@@ -142,67 +82,6 @@
     padding: 2rem;
   }
 
-  .product-header {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 3rem;
-  }
-
-  .product-image .el-image {
-    position: relative;
-    width: 100%;
-    height: 500px;
-    border-radius: 8px;
-  }
-
-  .product-image-caption {
-    position: absolute;
-    bottom: 10px;
-    /* left: 10%; */
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    padding: 5px 10px;
-    text-align: center;
-    color: white;
-    font-size: 0.8rem;
-  }
-
-  .product-carousel :deep(.el-carousel__button) {
-    /* 指示器按钮样式 */
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: #475669;
-    transition: all 0.3s ease;
-  }
-
-  .product-info h1 {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    font-size: 2rem;
-  }
-
-  .summary {
-    color: var(--el-color-info);
-    font-size: 1rem;
-    line-height: 1.6;
-    margin-bottom: 2rem;
-  }
-
-  .product-tabs ::v-deep(.el-tabs__nav) {
-    min-width: 30%;
-    float: right;
-  }
-
-  .product-tabs ::v-deep(.el-tabs__content) {
-    padding: 10px;
-  }
-
-  .product-content h2 {
-    color: var(--el-text-color-primary);
-    margin: 0;
-  }
-
   .loading {
     display: flex;
     justify-content: center;
@@ -216,16 +95,4 @@
     align-items: center;
     min-height: 400px;
   }
-
-  /* 响应式设计 */
-  @media (max-width: 768px) {
-    .product-header {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-    }
-
-    .product-info h1 {
-      font-size: 2rem;
-    }
-  }
 </style>