refactor: 重构产品页

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

app/components/pages/products/ProductDetail.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="product-detail">
+    <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>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    product: {
+      type: Object as PropType<ProductView>,
+      required: true,
+    },
+  });
+
+  const activeName = ref('details'); // 默认选中概览标签
+</script>
+
+<style scoped>
+  .product-tabs ::v-deep(.el-tabs__nav) {
+    min-width: 30%;
+    float: right;
+  }
+
+  .product-tabs ::v-deep(.el-tabs__content) {
+    padding: 10px;
+  }
+
+  .product-detail h2 {
+    color: var(--el-text-color-primary);
+    margin: 0;
+  }
+</style>

app/components/pages/products/ProductHeader.vue

@@ -0,0 +1,102 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    product: {
+      type: Object as PropType<ProductView>,
+      required: true,
+    },
+  });
+
+  const { getImageUrl } = useDirectusImage();
+</script>
+
+<style scoped>
+  .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;
+  }
+</style>