Fix:修正前后端Bug

app/components/JinshenHeader.vue

@@ -129,12 +129,13 @@ onMounted(() => {
     background-color: transparent !important;
 }
 
-.header-menu .el-menu-item:active {
-    border-bottom: 2px solid var(--el-color-primary);
+.header-menu .el-menu-item.is-active {
+    border-bottom: 2.5px solid var(--el-color-primary-dark-2);
+    color: var(--el-color-primary);
 }
 
 .header-menu .el-menu-item:hover {
-    border-bottom: 2px solid var(--el-color-primary);
+    border-bottom: 2.5px solid var(--el-color-primary);
 }
 
 .header-actions {

app/components/MarkdownRenderer.vue

@@ -17,6 +17,8 @@ const contentWithAbsoluteUrls = convertMedia(props.content)
 const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
 // const safeHtml = computed(() => renderMarkdown(props.content))
 
+console.log('Rendered HTML:', safeHtml.value)
+
 </script>
 
 <style>
@@ -25,15 +27,47 @@ const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
   line-height: 1.6;
 }
 
-.markdown-body h1,
+.markdown-body h1 {
+  color: var(--el-color-primary);
+  font-size: 1.5em;
+  margin-bottom: 0.5em;
+  text-align: center;
+}
+
 .markdown-body h2 {
   color: var(--el-color-primary);
   font-size: 1.5em;
   margin-bottom: 0.5em;
 }
 
+.markdown-body h3 {
+  color: var(--el-color-primary);
+  font-size: 1.2em;
+  margin-bottom: 0.5em;
+}
+
+.markdown-body p {
+  text-indent: 2em;
+  text-align: justify;
+  margin: 0.5em 0;
+  margin-bottom: 1em;
+}
+
 .markdown-body ol {
   list-style-type: decimal;
   padding-left: 2em;
+  margin-bottom: 1em;
+}
+
+.markdown-body ul {
+  list-style-type: disc;
+  padding-left: 2em;
+  margin-bottom: 1em;
+}
+
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--el-border-color);
+  margin: 20px 0;
 }
 </style>

app/components/ProductionCard.vue

@@ -1,15 +1,18 @@
 <template>
     <el-card class="production-card" @click="handleClick">
-        <!-- Image -->
-        <el-image class="production-image" :src="imageUrl" fit="contain" />
-        <template #footer>
+        <template #header>
+            <!-- Image -->
+            <el-image class="production-image" :src="imageUrl" fit="contain" />
+        </template>
+
+        <div class="card-body">
             <!-- Name -->
-            <div class="text-center mx-auto text-md">
+            <div class="text-center">
                 <span class="production-name">{{ name }}</span>
             </div>
             <!-- Description -->
-            <div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
-        </template>
+            <div class="card-description text-left opacity-25">{{ description }}</div>
+        </div>
     </el-card>
 </template>
 
@@ -38,7 +41,6 @@ const handleClick = () => {
 <style scoped>
 .production-card {
     width: 20%;
-    /* margin: 20px auto; */
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
@@ -50,15 +52,26 @@ const handleClick = () => {
 }
 
 .production-name {
+    font-size: 1rem;
     font-weight: 600;
-    color: var(--el-text-color-primary);
+}
+
+.card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
 }
 
 .production-card .el-image {
-    height: 200px;
+    height: 150px;
     border-radius: 4px;
 }
 
+.card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+    height: 100px;
+}
+
 /* 响应式设计 */
 @media (max-width: 1200px) {
     .production-card {

app/components/SolutionCard.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-card class="solution-card" body-class="card-body" header-class="card-header" @click="handleClick">
+        <template #header>
+            <!-- Cover Image -->
+            <el-image class="solution-cover" :src="coverUrl" fit="cover" />
+        </template>
+        <!-- Title -->
+        <template #default>
+            <div class="text-center mx-auto text-md">
+                <span class="solution-title">{{ title }}</span>
+            </div>
+            <!-- Summary -->
+            <div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
+        </template>
+    </el-card>
+</template>
+
+
+<script setup lang="ts">
+interface Props {
+    title: string
+    summary: string
+    coverUrl: string
+    documentId?: string
+}
+
+const props = defineProps<Props>()
+const localePath = useLocalePath()
+
+const handleClick = () => {
+    const routeParam = props.documentId
+    if (routeParam) {
+        navigateTo(localePath(`/solutions/${routeParam}`))
+    }
+}
+</script>
+
+
+<style scoped>
+.solution-card {
+    width: 30%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.solution-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.solution-title {
+    font-weight: 600;
+}
+
+:deep(.card-header) {
+    padding: 0;
+    border-bottom: none !important;
+}
+
+:deep(.card-body) {
+    margin: 10px auto;
+    padding: 1px auto;
+}
+
+
+.solution-card .el-image {
+    height: 250px;
+}
+
+@media (max-width: 1200px) {
+    .solution-card {
+        width: 45%;
+    }
+}
+
+@media (max-width: 768px) {
+    .solution-card {
+        width: 90%;
+        margin: 10px auto;
+    }
+}
+</style>

app/composables/useLocalizations.ts

@@ -5,7 +5,7 @@ import en from 'element-plus/es/locale/lang/en';
 
 // Strapi本地化映射
 export const strapiLocales: Record<string, StrapiLocale> = {
-    'zh': 'zh-Hans',
+    'zh': 'zh-CN',
     'en': 'en'
 }
 

app/layouts/default.vue

@@ -1,12 +1,12 @@
 <template>
     <el-container class="app-container">
-        <el-header class="page-header">
+        <el-header height="auto" class="page-header">
             <jinshen-header />
         </el-header>
         <el-main class="main-content">
             <slot />
         </el-main>
-        <el-footer class="page-footer">
+        <el-footer height="auto" class="page-footer">
             <jinshen-footer />
         </el-footer>
     </el-container>
@@ -16,20 +16,21 @@
 .app-container {
     display: flex;
     flex-direction: column;
+    padding: 0;
 }
 
 .page-header {
     padding: 0px;
+    margin-bottom: auto;
 }
 
 .main-content {
     flex: 1;
-    padding: 20px;
+    padding: 0;
     flex-direction: column;
 }
 
 .page-footer {
     padding: 0px;
 }
-
 </style>

app/pages/about/contact-us.vue

@@ -63,11 +63,11 @@ onMounted(async () => {
     margin-bottom: 2rem;
 }
 
-:deep(.markdown-body p) {
-    margin-bottom: 1rem;
-}
-
 :deep(.markdown-body h2) {
     text-align: center;
 }
+
+:deep(.markdown-body ul) {
+    list-style-type: none;
+}
 </style>

app/pages/index.vue

@@ -1,12 +1,51 @@
 <template>
   <div class="homepage">
-    <p>主页还没做^^</p>
+    <div class="carousel">
+      <el-carousel height="auto" :interval="5000" arrow="never" autoplay>
+        <el-carousel-item v-for="(item, index) in 3" :key="index">
+          <div class="carousel-item">
+            <!-- <el-image class="carousel-image" :src="useStrapiMedia('/uploads/201605211508029798_e37af77a48.png')" fit="fill" /> -->
+            <p class="image-label">{{ item }}</p>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.homepage {
-  padding: 2rem;
+.carousel-item {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f7fa;
+}
+
+.carousel-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.el-carousel__item {
+  width: 100%;
+  height: 33vw;
+  /* 16:9 Aspect Ratio */
+}
+
+.el-carousel__item h3 {
+  display: flex;
+  color: #475669;
+  opacity: 0.8;
+  line-height: 300px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  /* background-color: #99a9bf; */
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  /* background-color: #d3dce6; */
 }
 
 .section p {

app/pages/productions/[...slug].vue

@@ -16,7 +16,7 @@
       <div class="production-header">
         <div class="production-image">
           <el-image
-:src="useStrapiMedia(production?.production_image?.url || '')" :alt="production.title"
+:src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title"
             fit="contain" />
         </div>
         <div class="production-info">
@@ -63,8 +63,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Production } from '~/types/strapi/production'
-
 const route = useRoute()
 const { findOne } = useStrapi()
 const { getStrapiLocale } = useLocalizations()
@@ -86,7 +84,10 @@ onMounted(async () => {
         production_specs: {
           populate: '*',
         },
-        production_image: {
+        production_images: {
+          populate: '*',
+        },
+        cover: {
           populate: '*',
         },
       },

app/pages/productions/index.vue

@@ -20,7 +20,7 @@ v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分
                         <production-card
 v-for="production in group" :key="production.documentId || production.id"
                             :slug="production.documentId"
-                            :image-url="useStrapiMedia(production?.production_image?.url || '')"
+                            :image-url="useStrapiMedia(production?.cover?.url || '')"
                             :name="production.title" :description="production.summary || ''" />
                     </div>
                 </el-collapse-item>
@@ -62,7 +62,10 @@ onMounted(async () => {
     try {
         const response = await find<Production>('productions', {
             populate: {
-                production_image: {
+                cover: {
+                    populate: '*',
+                },
+                production_images: {
                     populate: '*',
                 },
                 production_type: {
@@ -76,6 +79,7 @@ onMounted(async () => {
             },
             locale: strapiLocale,
         })
+        console.log('Fetched productions:', response.data)
         productions.value = response.data.map((item: Production) => ({
             ...item,
             // 保持 production_type 原始类型，兼容对象或字符串
@@ -103,7 +107,7 @@ onMounted(async () => {
     font-size: 2rem;
     font-weight: bold;
     color: var(--el-color-primary);
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 }
 
 .breadcrumb {

app/pages/solutions/[...slug].vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="page-container">
+        <div v-if="solution">
+            <div class="page-header">
+                <el-breadcrumb class="breadcrumb" separator="/">
+                    <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('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="text-md opacity-50">{{ solution.title }}</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+            <div class="page-content">
+                <div class="solution-info">
+                    <h1>{{ solution.title }}</h1>
+                    <div class="solution-meta">
+                        <span class="solution-date">
+                            CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
+                        </span>
+                    </div>
+                </div>
+                <p class="summary">{{ solution.summary }}</p>
+                <div class="solution-content">
+                    <markdown-renderer :content="solution.content || ''" />
+                </div>
+            </div>
+        </div>
+        <div v-else class="loading">
+            <el-skeleton :rows="5" animated />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const { findOne } = useStrapi()
+const { getStrapiLocale } = useLocalizations()
+const strapiLocale = getStrapiLocale()
+
+const solution = ref<Solution | null>(null)
+
+// 获取路由参数(documentId)
+const documentId = computed(() => route.params.slug as string)
+
+onMounted(async () => {
+    try {
+        const response = await findOne<Solution>('solutions', documentId.value, {
+            populate: '*',
+            locale: strapiLocale,
+        })
+        if (response.data) {
+            solution.value = {
+                ...response.data,
+                // 确保 solution_type 保持原始类型
+                solution_type: response.data.solution_type,
+            }
+        }
+        console.log('Fetched Solution:', solution.value)
+    } catch (error) {
+        console.error('Failed to fetch solution:', error)
+    }
+})
+</script>
+
+<style scoped>
+.page-container {
+    padding: 1rem;
+    min-height: 60vh;
+}
+
+.breadcrumb {
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.solution-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.solution-header el-image {
+    width: 200px;
+    height: 200px;
+    border-radius: 4px;
+}
+
+.page-content h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    text-align: center;
+}
+
+.solution-meta {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+}
+
+.summary {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+}
+
+.solution-content {
+    margin-top: 1rem;
+}
+
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+}
+</style>

app/pages/solutions/index.vue

@@ -15,22 +15,25 @@
             <el-tabs v-model="activeName" class="solutions-tabs">
                 <el-tab-pane :label="$t('all')" name="all">
                     <div class="solution-list">
-                        <production-card
-v-for="solution in solutions" :key="solution.documentId || solution.id"
-                            :slug="solution.documentId"
-                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
-                            :name="solution.title" :description="solution.summary || ''" />
+                        <solution-card
+v-for="solution in solutions" :key="solution.documentId" :title="solution.title"
+                            :summary="solution.summary || ''" :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :document-id="solution.documentId" />
                     </div>
                 </el-tab-pane>
-                <el-tab-pane
-v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
-                    :name="type || 'no-category'">
+                <el-tab-pane 
+                    v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
+                    :name="type || 'no-category'"
+                >
                     <div class="solution-list">
-                        <production-card
-v-for="solution in group" :key="solution.documentId || solution.id"
-                            :slug="solution.documentId"
-                            :image-url="useStrapiMedia(solution?.cover?.url || '')"
-                            :name="solution.title" :description="solution.summary || ''" />
+                        <solution-card 
+                            v-for="solution in group" 
+                            :key="solution.documentId"
+                            :document-id="solution.documentId" 
+                            :cover-url="useStrapiMedia(solution?.cover?.url || '')"
+                            :title="solution.title" 
+                            :summary="solution.summary || ''" 
+                        />
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -104,6 +107,7 @@ onMounted(async () => {
 .page-title {
     font-size: 2rem;
     font-weight: bold;
+    margin-bottom: 1rem;
     color: var(--el-color-primary);
 }
 
@@ -114,6 +118,8 @@ onMounted(async () => {
 .solution-list {
     display: flex;
     flex-wrap: wrap;
+    padding: 1rem;
+    margin-bottom: 2rem;
     gap: 40px;
 }
 </style>

app/pages/support/index.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="page-container">
+        <div class="page-header">
+            <el-breadcrumb class="breadcrumb" separator="/">
+                <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('/support')">{{ $t('navigation.support') }}</NuxtLink>
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="page-content">
+            <el-divider content-position="left">选择我们的服务</el-divider>
+            <div class="button-group">
+                <NuxtLink :to="$localePath('/about/contact-us')">
+                    <el-card class="card-button">
+                        <el-icon class="icon" size="80">
+                            <ElIconService />
+                        </el-icon>
+                        <br>
+                        联系我们
+                    </el-card>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.page-container {
+    padding: 2rem 1rem;
+}
+
+.breadcrumb {
+    padding: 1rem 1rem;
+}
+
+:deep(.el-divider__text) {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.button-group {
+    display: flex;
+    justify-content: left;
+    margin-top: 2rem;
+    margin-left: 2rem;
+}
+
+.card-button {
+    width: 20%;
+    min-width: 200px;
+    padding: 20px;
+    margin: 0 auto;
+    cursor: pointer;
+    text-align: center;
+    font-size: 1.5em;
+}
+
+.card-button:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+</style>

app/types/strapi/production.ts

@@ -18,7 +18,8 @@ export interface Production extends StrapiEntity {
     title: string;
     summary: string;
     production_type: ProductionType;
-    production_image: StrapiImage;
+    cover: StrapiImage;
+    production_images: StrapiImage[];
     production_details: string;
     production_specs: ProductionSpecGroup[];
     documents: StrapiMedia[];

nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   app: {
     // head
     head: {
-      title: "Jinshen Website",
+      title: "金申机械制造有限公司",
       meta: [
         { name: "viewport", content: "width=device-width, initial-scale=1" },
         {