Feature: 产品页跳转

2025-08-15 16:00:55 +08:00
parent 1c06b377d0
commit c77b2282da
7 changed files with 397 additions and 34 deletions
--- a/app/components/JinshenHeader.vue
+++ b/app/components/JinshenHeader.vue
@ -1,8 +1,11 @@
 <template>
    <div class="header-container">
-        <NuxtLink to="/" class="logo-section">
-            <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
-        </NuxtLink>
+        <div class="logo-section">
+            <NuxtLink to="/" class="logo-link">
+                <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
+            </NuxtLink>
+        </div>
+

        <!-- 导航菜单 -->
        <el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
@ -51,7 +54,7 @@ const handleSearch = () => {
    if (searchQuery.value.trim()) {
        // 这里可以添加搜索逻辑，例如导航到搜索结果页面
        console.log('Searching for:', searchQuery.value);
-// 示例：导航到搜索结果页面
+        // 示例：导航到搜索结果页面
        // router.push({ path: '/search', query: { q: searchQuery.value } });
    }
 }
@ -72,6 +75,12 @@ const handleSearch = () => {
    align-items: center;
 }

+.logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
 .website-logo {
    height: 64px;
    width: auto;
--- a/app/components/ProductionCard.vue
+++ b/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>
--- a/app/pages/productions/[...slug].vue
+++ b/app/pages/productions/[...slug].vue
@ -0,0 +1,194 @@
+<template>
+  <div class="production-detail">
+    <div v-if="production">
+      <!-- 面包屑导航 -->
+      <el-breadcrumb class="breadcrumb" separator="/">
+        <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: '/' }">{{ $t('navigation.home')
+          }}</el-breadcrumb-item>
+        <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: '/productions' }">{{ $t('productions')
+          }}</el-breadcrumb-item>
+        <el-breadcrumb-item class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <!-- 产品详情内容 -->
+      <div class="production-header">
+        <div class="production-image">
+          <el-image :src="production.image_url" :alt="production.title" fit="contain" />
+        </div>
+        <div class="production-info">
+          <h1>{{ production.title }}</h1>
+          <p class="summary">{{ production.summary }}</p>
+        </div>
+      </div>
+
+      <!-- 产品详细描述 -->
+      <div class="production-content">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="产品详情" name="details">
+            <h2>{{ production.title }}</h2>
+            <p class="summary">{{ production.summary }}</p>
+          </el-tab-pane>
+          <el-tab-pane label="技术规格" name="specs" />
+          <el-tab-pane label="相关文档" name="documents" />
+        </el-tabs>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-else-if="pending" class="loading">
+      <el-loading-text>{{ $t('loading') }}</el-loading-text>
+    </div>
+
+    <!-- 未找到产品 -->
+    <div v-else class="not-found">
+      <el-result icon="warning" :title="$t('product-not-found')" :sub-title="$t('product-not-found-desc')">
+        <template #extra>
+          <el-button type="primary" @click="$router.push('/productions')">
+            {{ $t('back-to-productions') }}
+          </el-button>
+        </template>
+      </el-result>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ProductionDetail {
+  id: number
+  title: string
+  summary: string
+  content?: string
+  image_url: string
+  slug?: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const { find } = useStrapi()
+
+const production = ref<ProductionDetail | null>(null)
+const pending = ref(true)
+
+const activeName = ref('details') // 默认选中概览标签
+
+// 获取路由参数（slug 或 id）
+const productionParam = computed(() => route.params.slug as string)
+
+onMounted(async () => {
+  try {
+
+    const response = await find(`productions/${productionParam.value}`, {
+      populate: '*',
+    }) as any
+
+    if (response.data) {
+      const item = response.data
+      production.value = {
+        id: item.id,
+        title: item.title,
+        summary: item.summary,
+        content: item.content,
+        image_url: item.production_image?.url
+          ? `http://192.168.86.5:1337${item.production_image.url}`
+          : '',
+        slug: item.slug
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch production:', error)
+  } finally {
+    pending.value = false
+  }
+})
+
+const goBack = () => {
+  router.back()
+}
+
+// SEO
+useHead({
+  title: computed(() => production.value?.title || 'Product Detail'),
+  meta: [
+    {
+      name: 'description',
+      content: computed(() => production.value?.summary || '')
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.production-detail {
+  min-height: 60vh;
+}
+
+.breadcrumb {
+  padding: 1rem 1rem;
+  margin-bottom: 2rem;
+}
+
+.breadcrumb-item {
+  color: var(--el-text-color-regular);
+}
+
+.production-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.production-image .el-image {
+  width: 100%;
+  height: 400px;
+  border-radius: 8px;
+}
+
+.production-info h1 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}
+
+.summary {
+  color: var(--el-color-info);
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+}
+
+.production-content {
+  margin-top: 2rem;
+}
+
+.production-content h2 {
+  color: var(--el-text-color-primary);
+  margin: 0;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.not-found {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .production-header {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .production-info h1 {
+    font-size: 2rem;
+  }
+}
+</style>
--- a/app/pages/productions/example.vue
+++ b/app/pages/productions/example.vue
@ -0,0 +1,95 @@
+<template>
+    <div class="production-detail">
+        <div>
+            <el-breadcrumb class="breadcrumb" separator="/">
+                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
+                    {{ $t('navigation.home') }}
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
+                    {{ $t('productions') }}
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
+                    示例
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+
+
+            <div class="production-header">
+                <div class="production-image">
+                    <el-empty description="产品图片" class="border" />
+                </div>
+                <div class="production-info">
+                    <h1>产品名称</h1>
+                    <p class="summary">产品描述...</p>
+                </div>
+            </div>
+
+            <div class="production-content">
+                <el-tabs v-model="activeName" class="production-tabs">
+                    <el-tab-pane label="产品详情" name="details">
+                        <p>这里是产品的详细描述内容...</p>
+                    </el-tab-pane>
+                    <el-tab-pane label="技术规格" name="specs">
+                        <p>这里是产品的技术规格内容...</p>
+                    </el-tab-pane>
+                    <el-tab-pane label="常见问题" name="faq">
+                        <p>这里是产品的常见问题内容...</p>
+                    </el-tab-pane>
+                    <el-tab-pane label="相关资料" name="resources">
+                        <p>这里是产品的相关资料内容...</p>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const activeName = ref('details')
+</script>
+
+<style scoped lang="scss">
+.production-detail {
+    min-height: 60vh;
+}
+
+.breadcrumb {
+    padding: 0rem 1rem;
+    margin-bottom: 2rem;
+}
+
+.breadcrumb-item {
+    color: var(--el-color-info);
+}
+
+.production-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    margin-bottom: 3rem;
+}
+
+.production-image .el-empty {
+    width: 100%;
+    height: 400px;
+    border-radius: 8px;
+}
+
+.production-info h1 {
+    color: var(--el-color-text);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 2rem;
+}
+
+.production-info p {
+    color: var(--el-color-info);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 2rem;
+}
+
+.el-tab-pane {
+    margin-top: 1rem;
+}
+</style>
--- a/app/pages/productions/index.vue
+++ b/app/pages/productions/index.vue
@ -1,10 +1,15 @@
 <template>
    <div class="productions-container">
        <production-card
-v-for="production in productions" :key="production.title" :image-url="production.image_url"
-            :name="production.title" :description="production.summary" />
+            v-for="production in productions" 
+            :id="production.id"
+            :key="production.id" 
+            :slug="production.slug"
+            :image-url="production.image_url"
+            :name="production.title" 
+            :description="production.summary" 
+        />
    </div>
-
 </template>


@ -15,38 +20,43 @@ const { find } = useStrapi()
 const baseUrl = 'http://192.168.86.5:1337';

 class ProductionInfo {
+    id: number;
    title: string;
    summary: string;
    image_url: string;
+    slug?: string;

-    constructor(title: string, summary: string, image_url: string) {
+    constructor(id: number, title: string, summary: string, image_url: string, slug?: string) {
+        this.id = id;
        this.title = title;
        this.summary = summary;
        this.image_url = baseUrl + image_url;
+        this.slug = slug;
    }
 }

-interface StrapiProduction {
-    title: string;
-    summary: string;
-    production_image?: {
-        url: string;
-    };
-}
-
 const productions = ref<ProductionInfo[]>();

 onMounted(async () => {
-    const response = await find<StrapiProduction>('productions', {
-        populate: '*',
-    })
-    productions.value = response.data.map((item: StrapiProduction) => {
-        return new ProductionInfo(
-            item.title,
-            item.summary,
-            item.production_image?.url || ''
-        );
-    });
+    try {
+         
+        const response = await find('productions', {
+            populate: '*',
+        }) as any
+        
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        productions.value = response.data.map((item: any) => {
+            return new ProductionInfo(
+                item.id,
+                item.title,
+                item.summary,
+                item.production_image?.url || '',
+                item.documentId ? item.documentId : undefined
+            );
+        });
+    } catch (error) {
+        console.error('Failed to fetch productions:', error)
+    }
 });

 </script>
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@ -25,5 +25,11 @@
  "all-rights-reserved": "All rights reserved",
  "privacy-policy": "Privacy Policy",
  "terms-of-service": "Terms of Service",
-  "sitemap": "Sitemap"
+  "sitemap": "Sitemap",
+  "product-details": "Product Details",
+  "product-not-found": "Product Not Found",
+  "product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
+  "back-to-productions": "Back to Products",
+  "no-content-available": "No detailed information available",
+  "loading": "Loading..."
 }
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@ -25,5 +25,11 @@
  "all-rights-reserved": "版权所有",
  "privacy-policy": "隐私政策",
  "terms-of-service": "服务条款",
-  "sitemap": "网站地图"
+  "sitemap": "网站地图",
+  "product-details": "产品详情",
+  "product-not-found": "产品未找到",
+  "product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
+  "back-to-productions": "返回产品列表",
+  "no-content-available": "暂无详细信息",
+  "loading": "加载中..."
 }