hanye-website/pages/products/index.vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <!-- 加载中 -->
        <div
          class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else>
        <div class="w-full mb-12 relative">
          <div class="absolute top-0 left-0 w-full h-full z-10">
            <div
              class="max-w-screen-2xl mx-auto h-full flex flex-col justify-center gap-4 p-4"
            >
              <div
                class="justify-start text-white text-2xl font-normal md:text-4xl lg:text-6xl"
              >
                製品一覧
              </div>
              <div
                class="text-white text-sm lg:text-lg font-normal leading-loose"
              >
                卓越した製品は、実績に裏打ちされた優れた技術と、<br />継続的な革新デザインとの融合により、生み出されます。
              </div>
            </div>
          </div>
          <img
            :src="banner"
            alt="products-banner"
            class="w-full object-cover h-60 lg:h-full"
          />
        </div>
        <div class="max-w-full mb-6 xl:px-2 lg:px-2 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              to="/"
              class="justify-start text-white/60 text-base font-normal"
              >ホーム</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link to="/products" class="text-white text-base font-normal"
              >製品一覧</nuxt-link
            >
          </div>
        </div>
        <div
          class="max-w-full mb-12 md:mb-20 lg:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"
        >
          <div class="max-w-screen-2xl mx-auto">
            <div class="w-full grid grid-cols-1 md:grid-cols-10 gap-8 md:gap-2">
              <div
                class="col-span-1 md:col-span-2 flex flex-col gap-16 mb-8 md:mb-0"
              >
                <div class="flex flex-col gap-4">
                  <div class="text-white text-3xl font-medium">
                    製品カテゴリー
                  </div>
                  <div class="flex flex-col gap-4">
                    <div
                      class="opacity-80 justify-start text-white text-base font-normal"
                    >
                      PCメモリ
                    </div>
                    <div
                      class="opacity-80 justify-start text-white text-base font-normal"
                    >
                      PCメモリ
                    </div>
                  </div>
                </div>

                <div class="flex flex-col gap-4">
                  <div class="text-white text-3xl font-medium">
                    製品カテゴリー
                  </div>
                  <div class="flex flex-col gap-4">
                    <div
                      class="opacity-80 justify-start text-white text-base font-normal"
                    >
                      PCメモリ
                    </div>
                    <div
                      class="opacity-80 justify-start text-white text-base font-normal"
                    >
                      PCメモリ
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-span-1 md:col-span-8">
                <div class="flex flex-col gap-16">
                  <div class="flex flex-col gap-4">
                    <div class="w-full text-white text-4xl font-normal mb-4">
                      2.5-inch SSD
                    </div>
                    <div
                      class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
                    >
                      <div class="bg-zinc-900 rounded-lg">
                        <div class="w-full p-8">
                          <img
                            src="https://placehold.co/400x400"
                            alt=""
                            class="w-full h-full object-cover rounded-lg mb-4"
                          />
                          <div
                            class="text-center justify-start text-white text-xl font-normal"
                          >
                            Hanye Q60-256GST3
                          </div>
                          <div
                            class="text-center justify-start text-stone-400 text-base font-normal leading-normal"
                          >
                            256GB / 512GB / 1TB / 2TB
                          </div>
                        </div>
                      </div>
                      <div class="bg-zinc-900 rounded-lg"></div>
                      <div class="bg-zinc-900 rounded-lg"></div>
                      <div class="bg-zinc-900 rounded-lg"></div>
                    </div>
                  </div>
                  <div class="flex flex-col gap-4">
                    <div class="w-full text-white text-4xl font-normal mb-4">
                      2.5-inch SSD
                    </div>
                    <div
                      class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
                    >
                      <div class="bg-zinc-900 rounded-lg">
                        <div class="w-full p-8">
                          <img
                            src="https://placehold.co/400x400"
                            alt=""
                            class="w-full h-full object-cover rounded-lg mb-4"
                          />
                          <div
                            class="text-center justify-start text-white text-xl font-normal"
                          >
                            Hanye Q60-256GST3
                          </div>
                          <div
                            class="text-center justify-start text-stone-400 text-base font-normal leading-normal"
                          >
                            256GB / 512GB / 1TB / 2TB
                          </div>
                        </div>
                      </div>
                      <div class="bg-zinc-900 rounded-lg">
                        <div class="w-full p-8">
                          <img
                            src="https://placehold.co/400x400"
                            alt=""
                            class="w-full h-full object-cover rounded-lg mb-4"
                          />
                          <div
                            class="text-center justify-start text-white text-xl font-normal"
                          >
                            Hanye Q60-256GST3
                          </div>
                          <div
                            class="text-center justify-start text-stone-400 text-base font-normal leading-normal"
                          >
                            256GB / 512GB / 1TB / 2TB
                          </div>
                        </div>
                      </div>
                      <div class="bg-zinc-900 rounded-lg">
                        <div class="w-full p-8">
                          <img
                            src="https://placehold.co/400x400"
                            alt=""
                            class="w-full h-full object-cover rounded-lg mb-4"
                          />
                          <div
                            class="text-center justify-start text-white text-xl font-normal"
                          >
                            Hanye Q60-256GST3
                          </div>
                          <div
                            class="text-center justify-start text-stone-400 text-base font-normal leading-normal"
                          >
                            256GB / 512GB / 1TB / 2TB
                          </div>
                        </div>
                      </div>
                      <div class="bg-zinc-900 rounded-lg">
                        <div class="w-full p-8">
                          <img
                            src="https://placehold.co/400x400"
                            alt=""
                            class="w-full h-full object-cover rounded-lg mb-4"
                          />
                          <div
                            class="text-center justify-start text-white text-xl font-normal"
                          >
                            Hanye Q60-256GST3
                          </div>
                          <div
                            class="text-center justify-start text-stone-400 text-base font-normal leading-normal"
                          >
                            256GB / 512GB / 1TB / 2TB
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 产品列表页面
 * 展示所有产品
 */
import { useErrorHandler } from "~/composables/useErrorHandler";
import banner from "@/assets/images/product-banner.webp";

// 产品接口定义
interface Product {
  id: number;
  title: string;
  description: string;
}

const { error, isLoading, wrapAsync } = useErrorHandler();
const products = ref<Product[]>([]);

/**
 * 加载产品数据
 */
async function loadProducts() {
  await wrapAsync(async () => {
    // 模拟API请求延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 模拟数据，实际项目中应从API获取
    products.value = [
      {
        id: 1,
        title: "产品一",
        description: "这是产品一的详细描述，介绍产品特点和用途。",
      },
      {
        id: 2,
        title: "产品二",
        description: "这是产品二的详细描述，介绍产品特点和用途。",
      },
      {
        id: 3,
        title: "产品三",
        description: "这是产品三的详细描述，介绍产品特点和用途。",
      },
      {
        id: 4,
        title: "产品四",
        description: "这是产品四的详细描述，介绍产品特点和用途。",
      },
      {
        id: 5,
        title: "产品五",
        description: "这是产品五的详细描述，介绍产品特点和用途。",
      },
      {
        id: 6,
        title: "产品六",
        description: "这是产品六的详细描述，介绍产品特点和用途。",
      },
    ];

    return products.value;
  });
}

// 页面加载时获取产品数据
onMounted(() => {
  loadProducts();
});

// SEO优化
useHead({
  title: "产品列表 - Hanye",
  meta: [
    {
      name: "description",
      content: "浏览我们的产品列表，找到适合您的解决方案。",
    },
  ],
});
</script>