fix: 相关命名修正

- production -> product

app/pages/products/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('our-products') }}</h1>
+      <el-breadcrumb class="breadcrumb">
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/')">{{
+            $t('navigation.home')
+          }}</NuxtLink>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item class="text-md opacity-50">
+          <NuxtLink :to="$localePath('/products')">{{
+            $t('navigation.products')
+          }}</NuxtLink>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div v-if="!pending" class="page-content">
+      <div class="products-container">
+        <el-collapse v-model="activeNames" class="product-collapse">
+          <el-collapse-item
+            v-for="(group, type) in groupedProducts"
+            :key="type"
+            :title="type || '未分类'"
+            :name="type || 'no-category'"
+          >
+            <div class="group-list">
+              <product-card
+                v-for="product in group"
+                :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>
+    </div>
+    <div v-else>
+      <el-skeleton :rows="6" animated />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const { getImageUrl } = useDirectusImage();
+
+  const { data, pending, error } = useProductList();
+
+  const activeNames = ref<string[]>([]);
+
+  const productsRaw = computed(() => data.value ?? []);
+  const products = computed(() =>
+    productsRaw.value.map((item) => toProductListView(item))
+  );
+
+  // 按类型分组
+  // 兼容 product_type 既可能为对象也可能为字符串
+  const groupedProducts = computed(() => {
+    const groups: Record<string, ProductListView[]> = {};
+    for (const prod of products.value) {
+      let typeKey = '';
+      if (typeof prod.product_type === 'string') {
+        typeKey = prod.product_type;
+      } else if (
+        prod.product_type &&
+        typeof prod.product_type === 'object' &&
+        'name' in prod.product_type
+      ) {
+        typeKey = prod.product_type || '';
+      }
+      if (!groups[typeKey]) groups[typeKey] = [];
+      groups[typeKey]?.push(prod);
+    }
+    console.log(groups);
+    return groups;
+  });
+
+  watch(groupedProducts, () => {
+    if (groupedProducts.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProducts.value),
+        'no-category',
+      ];
+    }
+  });
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
+    }
+  });
+
+  watch(pending, (value) => {
+    if (!value) {
+      console.log('AsyncData: ', data.value);
+    }
+  });
+
+  onMounted(async () => {
+    if (groupedProducts.value) {
+      activeNames.value = [
+        ...Object.keys(groupedProducts.value),
+        'no-category',
+      ];
+    }
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    padding: 2rem;
+    margin: 0 auto;
+    max-width: 1200px;
+  }
+
+  .page-header {
+    display: flex;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
+
+  .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;
+  }
+
+  :deep(.el-collapse-item__header) {
+    padding: 30px auto;
+    font-size: 1.5rem;
+  }
+</style>