refactor: 调整components目录

- 将components根据作用范围/可复用性进行分类

app/components/shared/ProductCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-card class="product-card" @click="handleClick">
+    <template #header>
+      <!-- Image -->
+      <el-image class="product-image" :src="imageUrl" fit="contain" />
+    </template>
+
+    <div class="card-body">
+      <!-- Name -->
+      <div class="text-center">
+        <span class="product-name">{{ name }}</span>
+      </div>
+      <!-- Description -->
+      <div class="card-description text-left opacity-25">{{ description }}</div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    name: string;
+    description: string;
+    imageUrl: string;
+    id?: string | number;
+    slug?: string;
+  }
+
+  const props = defineProps<Props>();
+  const localePath = useLocalePath();
+
+  const handleClick = () => {
+    // 优先使用 slug，如果没有则使用 id
+    const routeParam = props.slug || props.id;
+    if (routeParam) {
+      navigateTo(localePath(`/products/${routeParam}`));
+    }
+  };
+</script>
+
+<style scoped>
+  .product-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .product-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .product-name {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
+
+  .product-card .el-image {
+    height: 150px;
+    border-radius: 4px;
+  }
+
+  .card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+    height: 100px;
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 1200px) {
+    .product-card {
+      width: 45%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .product-card {
+      width: 90%;
+    }
+  }
+</style>