Feature: 产品页跳转

app/components/ProductionCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card class="production-card">
+    <el-card class="production-card" @click="handleClick">
         <!-- Image -->
         <el-image :src="imageUrl" fit="cover" />
         <template #footer>
@@ -14,16 +14,59 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-    name: string;
-    description: string;
-    imageUrl: string;
-}>();
+interface Props {
+    name: string
+    description: string
+    imageUrl: string
+    id?: string | number
+    slug?: string
+}
+
+const props = defineProps<Props>()
+const router = useRouter()
+
+const handleClick = () => {
+    // 优先使用 slug，如果没有则使用 id
+    const routeParam = props.slug || props.id
+    if (routeParam) {
+        router.push(`/productions/${routeParam}`)
+    }
+}
 </script>
 
 <style scoped>
 .production-card {
     width: 30%;
     margin: 20px auto;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.production-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.production-name {
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+}
+
+.production-card .el-image {
+    height: 200px;
+    border-radius: 4px;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .production-card {
+        width: 45%;
+    }
+}
+
+@media (max-width: 768px) {
+    .production-card {
+        width: 90%;
+    }
 }
 </style>