jinshen-website/app/pages/products/index.vue

<template>
  <div class="page-container">
    <div class="page-header">
      <div>
        <h1 class="page-title">{{ $t('our-products') }}</h1>
        <p class="page-subtitle">
          {{ $t('products-desc') }}{{ $t('find-discontinued-products') }}
        </p>
      </div>

      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
    </div>
    <div>
      <el-skeleton
        animated
        :loading="pending"
        :throttle="{ leading: 500, trailing: 500 }"
      >
        <template #template>
          <div v-for="i in 3" :key="i" class="products-container">
            <el-skeleton-item variant="h1" class="skeleton-collapse" />
            <div class="skeleton-group-list">
              <el-skeleton-item
                v-for="j in 3"
                :key="j"
                variant="rect"
                class="skeleton-card"
              />
            </div>
          </div>
        </template>
        <template #default>
          <div class="products-container">
            <el-collapse v-model="activeNames" class="product-collapse">
              <el-collapse-item
                v-for="[key, value] in Object.entries(groupedProducts)"
                :key="key"
                :title="key || '未分类'"
                :name="key || 'no-category'"
              >
                <div class="group-list">
                  <product-card
                    v-for="product in value.data"
                    :key="product.id"
                    :slug="product.id.toString()"
                    :image-url="getImageUrl(product.cover.toString())"
                    :name="product.name"
                    :description="product.summary || ''"
                  />
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup lang="ts">
  const localePath = useLocalePath();
  const { getImageUrl } = useDirectusImage();

  const { data: products, pending, error } = await useProductList();

  const activeNames = ref<string[]>([]);

  const breadcrumbItems = [
    { label: $t('navigation.home'), to: localePath('/') },
    { label: $t('navigation.products') },
  ];

  // 按类型分组
  const groupedProducts = computed(() => {
    const groups: Record<string, { data: ProductListView[]; sort: number }> =
      {};
    for (const prod of products.value) {
      const typeKey = prod.product_type?.name ?? '';
      if (!groups[typeKey]) {
        groups[typeKey] = { data: [], sort: prod.product_type?.sort ?? 999 };
      }
      groups[typeKey]?.data.push(prod);
    }
    const sortedGroups = Object.fromEntries(
      Object.entries(groups).sort(([, a], [, b]) => a.sort - b.sort)
    );
    return sortedGroups;
  });

  watch(groupedProducts, () => {
    if (groupedProducts.value) {
      activeNames.value = [
        ...Object.keys(groupedProducts.value),
        'no-category',
      ];
    }
  });

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

  onMounted(async () => {
    if (groupedProducts.value) {
      activeNames.value = [
        ...Object.keys(groupedProducts.value),
        'no-category',
      ];
    }
  });

  const pageTitle = $t('page-title.products');
  usePageSeo({
    title: pageTitle,
  });
</script>

<style scoped>
  .page-container {
    padding: 2rem;
    margin: 0 auto;
    max-width: 1200px;
  }

  .page-header {
    display: flex;
    margin-bottom: 1rem;
  }

  .page-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--el-color-primary);
  }

  .page-subtitle {
    font-size: 0.8rem;
    color: var(--el-text-color-secondary);
  }

  .breadcrumb {
    margin-left: auto;
  }

  .products-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .product-group {
    margin-bottom: 32px;
  }

  .group-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 16px;
    color: var(--el-color-primary);
  }

  .group-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1rem;
    gap: 20px;
    justify-content: flex-start;
  }

  .skeleton-collapse {
    height: 50px;
    width: 100%;
  }

  .skeleton-group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start;
    margin-bottom: 2rem;
  }

  .skeleton-card {
    width: 30%;
    height: 250px;
    margin-right: 1rem;
  }

  @media (max-width: 1200px) {
    .skeleton-card {
      width: 45%;
    }
  }

  @media (max-width: 768px) {
    .group-list {
      justify-content: center;
      align-items: center;
    }
    .skeleton-group-list {
      justify-content: center;
      align-items: center;
    }

    .skeleton-card {
      width: 90%;
    }
  }

  :deep(.el-collapse-item__header) {
    padding: 30px auto;
    font-size: 1.5rem;
  }
</style>