From 00c4c80e49751b06a786315bfc1a1d5ca579ba66 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Wed, 29 Oct 2025 17:19:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将产品详情页的相关部分提取为ProductHeader与ProductDetail两个组件
---
 .../pages/products/ProductDetail.vue          |  45 ++++++
 .../pages/products/ProductHeader.vue          | 102 +++++++++++++
 app/pages/products/[...slug].vue              | 137 +-----------------
 3 files changed, 149 insertions(+), 135 deletions(-)
 create mode 100644 app/components/pages/products/ProductDetail.vue
 create mode 100644 app/components/pages/products/ProductHeader.vue

diff --git a/app/components/pages/products/ProductDetail.vue b/app/components/pages/products/ProductDetail.vue
new file mode 100644
index 0000000..84ba87f
--- /dev/null
+++ b/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>
diff --git a/app/components/pages/products/ProductHeader.vue b/app/components/pages/products/ProductHeader.vue
new file mode 100644
index 0000000..9c256fa
--- /dev/null
+++ b/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>
diff --git a/app/pages/products/[...slug].vue b/app/pages/products/[...slug].vue
index 2fbfe71..7a670c9 100644
--- a/app/pages/products/[...slug].vue
+++ b/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>