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

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

app/pages/products/[slug].vue

@@ -35,11 +35,12 @@
   const localePath = useLocalePath();
 
   // 获取路由参数
-  const id = computed(() => route.params.slug as string);
+  const id = route.params.slug as string;
 
-  const { data, pending, error } = await useProduct(id.value);
+  const { data, pending, error } = await useProduct(id);
+
+  const rawProduct = computed(() => data.value.products_by_id ?? null);
 
-  const rawProduct = computed(() => data.value ?? null);
   const product = computed(() => {
     if (rawProduct.value === null) {
       return null;
@@ -60,10 +61,10 @@
   });
 
   // SEO
-  usePageSeo({
-    title: product.value.name || $t('page-title.products'),
-    description: product.value.summary || '',
-  });
+  // usePageSeo({
+  //   title: product.value.name || $t('page-title.products'),
+  //   description: product.value.summary || '',
+  // });
 </script>
 
 <style scoped>

app/pages/products/index.vue

@@ -37,7 +37,7 @@
   const localePath = useLocalePath();
   const { getImageUrl } = useDirectusImage();
 
-  const { data, pending, error } = useProductList();
+  const { data, pending, error } = await useProductList();
 
   const activeNames = ref<string[]>([]);
 
@@ -46,12 +46,13 @@
     { label: $t('navigation.products') },
   ];
 
-  const productsRaw = computed(() => data.value ?? []);
+  const productsRaw = computed(() => data.value.products ?? []);
+
   const products = computed(() =>
     productsRaw.value.map((item) => toProductListView(item))
   );
 
-  logger.debug('products: ', products.value);
+  logger.debug('产品列表数据: ', products.value);
 
   // 按类型分组
   const groupedProducts = computed(() => {