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>