hanye-website/pages/products/index.vue

<template>
  <div class="py-8">
    <div class="container-custom">
      <h1 class="text-3xl font-bold mb-8">{{ $t('products.title') }}</h1>
      
      <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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="product in products" :key="product.id" class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div class="h-48 bg-gray-100 flex items-center justify-center">
              <!-- 产品图片占位符 -->
              <span class="text-gray-400">{{ product.title }}</span>
            </div>
            <div class="p-6">
              <h2 class="text-xl font-semibold mb-2">{{ product.title }}</h2>
              <p class="text-gray-600 mb-4">{{ product.description }}</p>
              <NuxtLink :to="`/products/${product.id}`" class="text-blue-600 hover:text-blue-800 font-medium">
                {{ $t('products.viewDetails') }}
              </NuxtLink>
            </div>
          </div>
        </div>
      </ErrorBoundary>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 产品列表页面
 * 展示所有产品
 */
import { ref, onMounted } from 'vue';
import { useErrorHandler } from '~/composables/useErrorHandler';

// 产品接口定义
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>