Feature: 产品页跳转

Feature:产品总览页 & Strapi API
2025-08-15 16:00:55 +08:00 · 2025-08-15 14:20:49 +08:00
14 changed files with 885 additions and 18 deletions
--- a/app/components/JinshenFooter.vue
+++ b/app/components/JinshenFooter.vue
@ -0,0 +1,275 @@
+<template>
+  <footer class="jinshen-footer">
+    <div class="footer-container">
+      <!-- Logo 和公司信息 -->
+      <div class="footer-section">
+        <div class="footer-logo">
+          <img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image">
+          <h3>{{ $t('company-name') }}</h3>
+        </div>
+        <p class="company-description">
+          {{ $t('company-description') }}
+        </p>
+      </div>
+
+      <!-- 快速链接 -->
+      <div class="footer-section">
+        <h4>{{ $t('quick-links') }}</h4>
+        <ul class="footer-links">
+          <li>
+            <NuxtLink to="/">{{ $t('navigation.home') }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/productions">{{ $t('productions') }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/solutions">{{ $t('solutions') }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/support">{{ $t('support') }}</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/about">{{ $t('about-us') }}</NuxtLink>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 联系信息 -->
+      <div class="footer-section">
+        <h4>{{ $t('contact-info') }}</h4>
+        <div class="contact-item">
+          <el-icon><Phone /></el-icon>
+          <span>{{ $t('telephone') }}: 0573-88187988</span>
+        </div>
+        <div class="contact-item">
+          <el-icon><Message /></el-icon>
+          <span>{{ $t('email') }}: jinshen@wzjinshen.com</span>
+        </div>
+        <div class="contact-item">
+          <el-icon><Location /></el-icon>
+          <span>{{ $t('address') }}: {{ $t('company-address') }}</span>
+        </div>
+      </div>
+
+      <!-- 社交媒体 -->
+      <div class="footer-section">
+        <h4>{{ $t('follow-us') }}</h4>
+        <div class="social-links">
+          <a href="#" class="social-link" aria-label="WeChat">
+            <el-icon size="20"><ChatDotRound /></el-icon>
+          </a>
+          <a href="#" class="social-link" aria-label="Weibo">
+            <el-icon size="20"><Star /></el-icon>
+          </a>
+          <a href="#" class="social-link" aria-label="LinkedIn">
+            <el-icon size="20"><Link /></el-icon>
+          </a>
+          <a href="#" class="social-link" aria-label="Email">
+            <el-icon size="20"><Message /></el-icon>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- 版权信息 -->
+    <div class="footer-bottom">
+      <div class="footer-container">
+        <div class="copyright">
+          <p>&copy; {{ currentYear }} {{ $t('company-name') }}. {{ $t('all-rights-reserved') }}</p>
+          <p>备案号: 浙ICP备12003709号-5</p>
+        </div>
+        <div class="footer-links-bottom">
+          <NuxtLink to="/privacy">{{ $t('privacy-policy') }}</NuxtLink>
+          <span class="separator">|</span>
+          <NuxtLink to="/terms">{{ $t('terms-of-service') }}</NuxtLink>
+          <span class="separator">|</span>
+          <NuxtLink to="/sitemap">{{ $t('sitemap') }}</NuxtLink>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { 
+  Phone, 
+  Message, 
+  Location, 
+  ChatDotRound, 
+  Star, 
+  Link 
+} from '@element-plus/icons-vue'
+
+const currentYear = new Date().getFullYear()
+</script>
+
+<style scoped>
+.jinshen-footer {
+  background: var(--el-bg-color-page);
+  border-top: 1px solid var(--el-border-color);
+  margin-top: auto;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.footer-section h3,
+.footer-section h4 {
+  color: var(--el-text-color-primary);
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.logo-image {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.company-description {
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 0.5rem;
+}
+
+.footer-links a {
+  color: var(--el-text-color-regular);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+  color: var(--el-color-primary);
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--el-text-color-regular);
+}
+
+.contact-item .el-icon {
+  color: var(--el-color-primary);
+}
+
+.social-links {
+  display: flex;
+  gap: 1rem;
+}
+
+.social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--el-fill-color-light);
+  border-radius: 50%;
+  color: var(--el-text-color-regular);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.social-link:hover {
+  background: var(--el-color-primary);
+  color: white;
+  transform: translateY(-2px);
+}
+
+.footer-bottom {
+  background: var(--el-fill-color-light);
+  border-top: 1px solid var(--el-border-color-lighter);
+  padding: 1rem 0;
+}
+
+.footer-bottom .footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+  grid-template-columns: none;
+  gap: 1rem;
+}
+
+.copyright p {
+  margin: 0;
+  color: var(--el-text-color-regular);
+  font-size: 0.875rem;
+}
+
+.footer-links-bottom {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.footer-links-bottom a {
+  color: var(--el-text-color-regular);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.3s ease;
+}
+
+.footer-links-bottom a:hover {
+  color: var(--el-color-primary);
+}
+
+.separator {
+  color: var(--el-text-color-placeholder);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .footer-container {
+    grid-template-columns: 1fr;
+    padding: 1.5rem 1rem;
+  }
+  
+  .footer-bottom .footer-container {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+  }
+  
+  .footer-links-bottom {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+/* 暗色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .jinshen-footer {
+    background: var(--el-bg-color-page);
+  }
+  
+  .footer-bottom {
+    background: var(--el-fill-color-darker);
+  }
+}
+</style>
--- 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
@ -0,0 +1,72 @@
+<template>
+    <el-card class="production-card" @click="handleClick">
+        <!-- Image -->
+        <el-image :src="imageUrl" fit="cover" />
+        <template #footer>
+            <!-- Name -->
+            <div class="text-center mx-auto text-md">
+                <span class="production-name">{{ name }}</span>
+            </div>
+            <!-- Description -->
+            <div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
+        </template>
+    </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 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/layouts/default.vue
+++ b/app/layouts/default.vue
@ -6,5 +6,8 @@
        <el-main>
            <slot />
        </el-main>
+        <el-footer>
+            <jinshen-footer />
+        </el-footer>
    </el-container>
 </template>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@ -1,5 +1,76 @@
 <template>
-    <div>
-        <NuxtWelcome />
+  <div class="homepage">
+    <div class="hero-section">
+      <h1>{{ $t('company-name') }}</h1>
+      <p>{{ $t('company-description') }}</p>
+      <el-button type="primary" size="large">
+        {{ $t('learn-more') }}
+      </el-button>
    </div>
-</template>
+    
+    <div class="content-sections">
+      <div class="section">
+        <h2>{{ $t('productions') }}</h2>
+        <p>{{ $t('productions-desc') }}</p>
+      </div>
+      
+      <div class="section">
+        <h2>{{ $t('solutions') }}</h2>
+        <p>{{ $t('solutions-desc') }}</p>
+      </div>
+      
+      <div class="section">
+        <h2>{{ $t('support') }}</h2>
+        <p>{{ $t('support-desc') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.homepage {
+  padding: 2rem;
+}
+
+.hero-section {
+  text-align: center;
+  padding: 4rem 0;
+  background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
+  border-radius: 8px;
+  margin-bottom: 3rem;
+  color: white;
+}
+
+.hero-section h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.hero-section p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.content-sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.section {
+  padding: 2rem;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+  color: var(--el-color-primary);
+  margin-bottom: 1rem;
+}
+
+.section p {
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+}
+</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
@ -0,0 +1,72 @@
+<template>
+    <div class="productions-container">
+        <production-card
+            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>
+
+
+
+<script setup lang="ts">
+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(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;
+    }
+}
+
+const productions = ref<ProductionInfo[]>();
+
+onMounted(async () => {
+    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>
+
+<style scoped>
+.productions-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+}
+</style>
--- a/bun.lock
+++ b/bun.lock
@ -11,6 +11,7 @@
        "@nuxt/image": "1.11.0",
        "@nuxt/test-utils": "3.19.2",
        "@nuxtjs/i18n": "10.0.5",
+        "@nuxtjs/strapi": "2.1.1",
        "@pinia/nuxt": "^0.11.2",
        "@unocss/nuxt": "^66.4.2",
        "@vueuse/nuxt": "^13.6.0",
@ -319,6 +320,8 @@

    "@nuxtjs/i18n": ["@nuxtjs/i18n@10.0.5", "", { "dependencies": { "@intlify/core": "^11.1.11", "@intlify/h3": "^0.7.1", "@intlify/shared": "^11.1.11", "@intlify/unplugin-vue-i18n": "^6.0.8", "@intlify/utils": "^0.13.0", "@miyaneee/rollup-plugin-json5": "^1.2.0", "@nuxt/kit": "^4.0.3", "@rollup/plugin-yaml": "^4.1.2", "@vue/compiler-sfc": "^3.5.18", "cookie-es": "^2.0.0", "defu": "^6.1.4", "devalue": "^5.1.1", "h3": "^1.15.3", "knitwork": "^1.2.0", "magic-string": "^0.30.17", "mlly": "^1.7.4", "nuxt-define": "^1.0.0", "oxc-parser": "^0.81.0", "oxc-transform": "^0.81.0", "oxc-walker": "^0.4.0", "pathe": "^2.0.3", "typescript": "^5.9.2", "ufo": "^1.6.1", "unplugin": "^2.3.5", "unplugin-vue-router": "^0.14.0", "unstorage": "^1.16.1", "vue-i18n": "^11.1.11", "vue-router": "^4.5.1" } }, "sha512-rLQc/nEVWL0xMJf1a6+ndUpdQtxPBFzm4jeqG4o7HuXtDLn4HOe1dPdu7AsaIqq7EcsEjZ5T4mX4X8XnB8cT0Q=="],

+    "@nuxtjs/strapi": ["@nuxtjs/strapi@2.1.1", "", { "dependencies": { "@nuxt/kit": "^3.17.5", "defu": "^6.1.4", "graphql": "^16.11.0", "qs": "^6.14.0", "ufo": "^1.6.1" } }, "sha512-CNcsEqkhto4P5SEA4ZuRrGdfOT7swsZp/hvR7SNG3OW3J8eHJythE68P1LaszCq5uvYlg7j90Iue534sEdedtQ=="],
+
    "@oxc-minify/binding-android-arm64": ["@oxc-minify/binding-android-arm64@0.80.0", "", { "os": "android", "cpu": "arm64" }, "sha512-OLelUqrLkSJwNyjLZHgpKy9n0+zHQiMX8A0GFovJIwhgfPxjT/mt2JMnGkSoDlTnf9cw6nvALFzCsJZLTyl8gg=="],

    "@oxc-minify/binding-darwin-arm64": ["@oxc-minify/binding-darwin-arm64@0.80.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-7vJjhKHGfFVit3PCerbnrXQI0XgmmgV5HTNxlNsvxcmjPRIoYVkuwwRkiBsxO4RiBwvRRkAFPop3fY/gpuflJA=="],
@ -1277,6 +1280,8 @@

    "graphemer": ["graphemer@1.4.0", "", {}, "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="],

+    "graphql": ["graphql@16.11.0", "", {}, "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw=="],
+
    "gzip-size": ["gzip-size@7.0.0", "", { "dependencies": { "duplexer": "^0.1.2" } }, "sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA=="],

    "h3": ["h3@1.15.4", "", { "dependencies": { "cookie-es": "^1.2.2", "crossws": "^0.3.5", "defu": "^6.1.4", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.2", "radix3": "^1.1.2", "ufo": "^1.6.1", "uncrypto": "^0.1.3" } }, "sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ=="],
--- a/i18n.config.ts
+++ b/i18n.config.ts
@ -0,0 +1,6 @@
+// @ts-expect-error - defineI18nConfig is provided by @nuxtjs/i18n
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'zh',
+  fallbackLocale: 'zh'
+}))
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@ -1,9 +1,35 @@
 {
-  "back": "back",
-  "not-found": "Not found",
+  "back": "Back",
+  "not-found": "Page Not Found",
  "productions": "Productions",
  "solutions": "Solutions",
  "support": "Support",
  "about-us": "About Us",
-  "search-placeholder": "Search..."
+  "search-placeholder": "Search...",
+  "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
+  "company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
+  "learn-more": "Learn More",
+  "productions-desc": "We provide high-quality product solutions to meet various business needs.",
+  "solutions-desc": "Providing customized technology solutions for enterprises to accelerate digital transformation.",
+  "support-desc": "24/7 professional technical support to ensure stable operation of your business.",
+  "quick-links": "Quick Links",
+  "navigation": {
+    "home": "Home"
+  },
+  "contact-info": "Contact Us",
+  "telephone": "Telephone",
+  "email": "Email",
+  "address": "Address",
+  "company-address": "No. 689 Qiushi Road, Wutong Industrial Zone, Tongxiang City, Zhejiang Province, China",
+  "follow-us": "Follow Us",
+  "all-rights-reserved": "All rights reserved",
+  "privacy-policy": "Privacy Policy",
+  "terms-of-service": "Terms of Service",
+  "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
@ -5,5 +5,31 @@
  "solutions": "解决方案",
  "support": "服务支持",
  "about-us": "关于我们",
-  "search-placeholder": "搜索..."
+  "search-placeholder": "搜索...",
+  "company-name": "金申机械制造有限公司",
+  "company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
+  "learn-more": "了解更多",
+  "productions-desc": "我们提供高质量的产品解决方案，满足各种业务需求。",
+  "solutions-desc": "为企业提供定制化的技术解决方案，助力数字化转型。",
+  "support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
+  "quick-links": "快速链接",
+  "navigation": {
+    "home": "首页"
+  },
+  "contact-info": "联系我们",
+  "telephone": "电话",
+  "email": "邮箱",
+  "address": "地址",
+  "company-address": "浙江省桐乡市梧桐工业区秋实路689号",
+  "follow-us": "关注我们",
+  "all-rights-reserved": "版权所有",
+  "privacy-policy": "隐私政策",
+  "terms-of-service": "服务条款",
+  "sitemap": "网站地图",
+  "product-details": "产品详情",
+  "product-not-found": "产品未找到",
+  "product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
+  "back-to-productions": "返回产品列表",
+  "no-content-available": "暂无详细信息",
+  "loading": "加载中..."
 }
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -57,17 +57,28 @@ export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
-      cookieKey: 'i18n_redirected',
-      redirectOn: 'root'
+      cookieKey: "i18n_redirected",
+      redirectOn: "root",
    },
    locales: [
-      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
-      { code: 'zh', language: 'zh-CN', name: '简体中文', file: 'zh.json' },
+      { code: "en", language: "en-US", name: "English", file: "en.json" },
+      { code: "zh", language: "zh-CN", name: "简体中文", file: "zh.json" },
    ],
-    defaultLocale: 'zh',
-    langDir: 'locales'
+    defaultLocale: "zh",
+    langDir: "locales",
  },

+  strapi: {
+    url: process.env.STRAPI_URL || "http://localhost:1337",
+    token: process.env.STRAPI_TOKEN || undefined,
+    prefix: "/api",
+    admin: "/admin",
+    version: "v5",
+    cookie: {},
+    cookieName: "strapi_jwt",
+  },
+
+
  modules: [
    "@nuxt/eslint",
    "@nuxt/fonts",
@ -79,5 +90,6 @@ export default defineNuxtConfig({
    "@unocss/nuxt",
    "@element-plus/nuxt",
    "@nuxtjs/i18n",
+    "@nuxtjs/strapi",
  ],
-});
+});
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "@nuxt/image": "1.11.0",
    "@nuxt/test-utils": "3.19.2",
    "@nuxtjs/i18n": "10.0.5",
+    "@nuxtjs/strapi": "2.1.1",
    "@pinia/nuxt": "^0.11.2",
    "@unocss/nuxt": "^66.4.2",
    "@vueuse/nuxt": "^13.6.0",
Author	SHA1	Message	Date
R2m1liA	c77b2282da	Feature: 产品页跳转	2025-08-15 16:00:55 +08:00
R2m1liA	1c06b377d0	Feature:产品总览页 & Strapi API	2025-08-15 14:20:49 +08:00