.shoudate/demo-vue/src/views/ProductsDetail.vue

<!-- src/views/ProductsDetail.vue -->
<template>
  <div class="products-page">
    <!-- 顶部导航栏 -->
    <HeaderComponent />

    <!-- 页面内容 -->
    <main class="products-content">
      <!-- 头部 Banner 区域 -->
      <section class="products-banner">
        <div class="banner-wrapper">
          <h1 class="banner-title">{{ t('productsPage.bannerTitle') }}</h1>
          <p class="banner-description">
            {{ t('productsPage.bannerSub') }}
          </p>
        </div>
      </section>

      <!-- 产品分类筛选 -->
      <section class="category-filter">
        <div class="filter-wrapper">
          <span class="filter-label">{{ t('productsPage.filterLabel') }}</span>
          <div class="filter-tags">
            <span
              v-for="catKey in categoryKeys"
              :key="catKey"
              :class="['filter-tag', { active: currentCategoryKey === catKey }]"
              @click="selectCategory(catKey)"
            >
              {{ t('catalog.categoryLabels.' + catKey) }}
            </span>
          </div>
        </div>
      </section>

      <!-- 产品展示区域 -->
      <section class="products-grid">
        <div class="products-wrapper">
          <div class="product-card" v-for="product in filteredProducts" :key="product.id">
            <div class="product-image-section">
              <el-carousel
                height="340px"
                indicator-position="outside"
                :autoplay="false"
                :interval="3000"
                trigger="click"
                arrow="always"
              >
                <el-carousel-item v-for="(img, imgIndex) in product.images" :key="imgIndex">
                  <img :src="img" :alt="product.name" class="product-img" />
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>

              <div class="product-tags">
                <span class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex">{{ tag }}</span>
              </div>

              <p class="product-description">{{ product.description }}</p>

              <div class="product-specs">
                <div class="specs-header">
                  <span class="specs-title">{{ t('common.specBasicCn') }}</span>
                  <span class="specs-subtitle">{{ t('common.specBasicEn') }}</span>
                </div>
                <div class="spec-row" v-for="(spec, specIndex) in getVisibleSpecs(product, product.id)" :key="specIndex">
                  <div class="spec-label-cn">{{ spec.label }}</div>
                  <div class="spec-label-en">{{ spec.enLabel }}</div>
                  <div class="spec-value-cn">{{ spec.value }}</div>
                  <div class="spec-value-en">{{ spec.valueEn || '' }}</div>
                </div>
                <div class="show-more-btn" v-if="product.specs.length > 3" @click="toggleSpecs(product.id)">
                  <span>{{ expandedIndices.has(product.id) ? t('common.collapse') : t('common.more') }}</span>
                  <el-icon><ArrowDown v-if="!expandedIndices.has(product.id)" /><ArrowUp v-else /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部 Footer -->
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import HeaderComponent from '@/components/HeaderComponent.vue'
import FooterComponent from '@/components/FooterComponent.vue'
import { productImagesById } from '@/data/productImages'
import type { ProductItemText } from '@/locales/types'

const { t, tm } = useI18n()

const categoryKeys = ['all', 'ebike', 'emoto', 'trike', 'tractor'] as const
type CategoryKey = (typeof categoryKeys)[number]
const currentCategoryKey = ref<CategoryKey>('all')

const selectCategory = (key: CategoryKey) => {
  currentCategoryKey.value = key
}

const expandedIndices = ref<Set<string>>(new Set())

type ProductView = ProductItemText & { images: string[] }

const products = computed((): ProductView[] => {
  const list = tm('catalog.products') as ProductItemText[]
  return list.map((p) => ({
    ...p,
    images: (productImagesById[p.id] as string[] | undefined) || []
  }))
})

const getVisibleSpecs = (product: ProductView, productId: string) => {
  if (expandedIndices.value.has(productId)) {
    return product.specs
  }
  return product.specs.slice(0, 3)
}

const toggleSpecs = (productId: string) => {
  if (expandedIndices.value.has(productId)) {
    expandedIndices.value.delete(productId)
  } else {
    expandedIndices.value.add(productId)
  }
}

const filteredProducts = computed(() => {
  if (currentCategoryKey.value === 'all') {
    return products.value
  }
  return products.value.filter(
    (product) => product.categoryKey === currentCategoryKey.value
  )
})
</script>

<style scoped lang="less">
.products-page {
  width: 100%;
  min-height: 100vh;
  background: #f8f9fa;
}

.products-content {
  width: 100%;
  background: #f8f9fa;
  padding-top: 70px;
}

.products-banner {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  padding: 80px 0 60px;
  text-align: center;

  .banner-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
  }

  .banner-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.4;
  }

  .banner-description {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

.category-filter {
  background: #fff;
  padding: 24px 0;
  border-bottom: 1px solid #e8e8e8;

  .filter-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
  }

  .filter-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .filter-tag {
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;

    &:hover {
      background: #e8e8e8;
      color: #1a1a1a;
    }

    &.active {
      background: #1a1a1a;
      color: #fff;
    }
  }
}

.products-grid {
  padding: 40px 0 80px;

  .products-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
  }

  .product-image-section {
    width: 100%;
    height: 340px;
    background: #f5f5f5;
    overflow: hidden;
    position: relative;

    .product-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .product-info {
    padding: 20px;

    .product-name {
      font-size: 18px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 12px;
    }

    .product-tags {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;

      .tag {
        padding: 4px 12px;
        font-size: 12px;
        color: #666;
        background: #f5f5f5;
        border-radius: 12px;
      }
    }

    .product-description {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
      margin: 0 0 20px;
    }

    .product-specs {
      .specs-header {
        background: #ff5722;
        padding: 10px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .specs-title {
          font-size: 16px;
          font-weight: 700;
          color: #fff;
        }

        .specs-subtitle {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.9);
        }
      }

      .spec-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
        align-items: flex-start;
        border-bottom: 1px solid #f0f0f0;

        &:nth-child(even) {
          background: #fafafa;
        }

        .spec-label-cn {
          font-size: 14px;
          font-weight: 600;
          color: #1a1a1a;
          min-width: 80px;
          flex-shrink: 0;
        }

        .spec-label-en {
          font-size: 12px;
          color: #999;
          min-width: 120px;
          flex-shrink: 0;
        }

        .spec-value-cn {
          font-size: 14px;
          color: #333;
          flex: 1;
          word-break: break-all;
          line-height: 1.5;
        }

        .spec-value-en {
          font-size: 12px;
          color: #666;
          flex: 1;
          word-break: break-all;
          line-height: 1.5;
          text-align: left;
        }
      }

      .show-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 12px;
        color: #1890ff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: #f0f8ff;
        }

        .el-icon {
          font-size: 16px;
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  .products-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .products-wrapper {
    grid-template-columns: 1fr !important;
  }

  .banner-wrapper,
  .filter-wrapper,
  .products-wrapper {
    padding: 0 24px;
  }

  .banner-title {
    font-size: 28px;
  }
}
</style>