refactor: 产品页与产品列表的API重构

- 将产品页与产品列表的API由REST重构为GraphQL
- 修改Mapper与单元测试

app/pages/products/[slug].vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="page-container">
+    <div v-if="!pending">
+      <div v-if="product">
+        <!-- 面包屑导航 -->
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+        <!-- 产品详情内容 -->
+        <product-header :product="product" />
+        <!-- 产品详细描述 -->
+        <product-detail :product="product" />
+      </div>
+      <!-- 未找到产品 -->
+      <div v-else class="not-found">
+        <not-found-result
+          :title="$t('product-not-found')"
+          :sub-title="$t('product-not-found-desc')"
+          :back-text="$t('back-to-products')"
+          :on-back="() => $router.push($localePath('/products'))"
+        />
+      </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 id = route.params.slug as string;
+
+  const { data, pending, error } = await useProduct(id);
+
+  const rawProduct = computed(() => data.value.products_by_id ?? null);
+
+  const product = computed(() => {
+    if (rawProduct.value === null) {
+      return null;
+    }
+    return toProductView(rawProduct.value);
+  });
+
+  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) {
+      logger.error('数据获取失败: ', value);
+    }
+  });
+
+  // SEO
+  // usePageSeo({
+  //   title: product.value.name || $t('page-title.products'),
+  //   description: product.value.summary || '',
+  // });
+</script>
+
+<style scoped>
+  .page-container {
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .breadcrumb {
+    padding: 2rem;
+  }
+
+  .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;
+  }
+</style>