jinshen-website/app/pages/products/[...slug].vue

<template>
  <div class="page-container">
    <div v-if="!pending">
      <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>

        <!-- 产品详细描述 -->
        <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>
      </div>
      <!-- 未找到产品 -->
      <div v-else class="not-found">
        <el-result
          icon="warning"
          :title="$t('product-not-found')"
          :sub-title="$t('product-not-found-desc')"
        >
          <template #extra>
            <el-button
              type="primary"
              @click="$router.push($localePath('/products'))"
            >
              {{ $t('back-to-products') }}
            </el-button>
          </template>
        </el-result>
      </div>
    </div>
    <div v-else class="loading">
      <el-skeleton style="--el-skeleton-circle-size: 400px">
        <template #template>
          <el-skeleton-item variant="circle" />
        </template>
      </el-skeleton>
      <el-skeleton :rows="5" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
  const route = useRoute();
  const localePath = useLocalePath();

  const { getImageUrl } = useDirectusImage();

  // 获取路由参数
  const id = computed(() => route.params.slug as string);

  const { data, pending, error } = await useProduct(id.value);

  const rawProduct = computed(() => data.value ?? null);
  const product = computed(() => {
    if (rawProduct.value === null) {
      return null;
    }
    return toProductView(rawProduct.value);
  });

  const activeName = ref('details'); // 默认选中概览标签

  const breadcrumbItems = computed(() => [
    { label: $t('navigation.home'), to: localePath('/') },
    { label: $t('navigation.products'), to: localePath('/products') },
    { label: product.value?.name || '' },
  ]);

  watch(error, (value) => {
    if (value) {
      console.error('数据获取失败: ', value);
    }
  });

  // SEO
  useHead({
    title: computed(() => product.value?.name || 'Product Detail'),
    meta: [
      {
        name: 'description',
        content: computed(() => product.value?.summary || ''),
      },
    ],
  });
</script>

<style scoped>
  .page-container {
    min-height: 80vh;
    max-width: 1200px;
    margin: 0 auto;
  }

  .breadcrumb {
    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;
    align-items: center;
    margin-top: 1rem;
  }

  .not-found {
    display: flex;
    justify-content: center;
    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>