Feature: 产品列表增加页头 & Markdown渲染器增加图像Url转换功能

app/components/JinshenFooter.vue

@@ -20,16 +20,16 @@
             <NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
           </li>
           <li>
-            <NuxtLink :to="$localePath('/productions')">{{ $t('productions') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
           </li>
           <li>
-            <NuxtLink :to="$localePath('/solutions')">{{ $t('solutions') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
           </li>
           <li>
-            <NuxtLink :to="$localePath('/support')">{{ $t('support') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
           </li>
           <li>
-            <NuxtLink :to="$localePath('/about')">{{ $t('about-us') }}</NuxtLink>
+            <NuxtLink :to="$localePath('/about')">{{ $t('navigation.about-us') }}</NuxtLink>
           </li>
         </ul>
       </div>

app/components/JinshenHeader.vue

@@ -10,16 +10,16 @@
         <!-- 导航菜单 -->
         <el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
             <el-menu-item :index="$localePath('/productions')">
-                <span class="title">{{ $t('productions') }}</span>
+                <span class="title">{{ $t('navigation.productions') }}</span>
             </el-menu-item>
             <el-menu-item :index="$localePath('/solutions')">
-                <span class="title">{{ $t('solutions') }}</span>
+                <span class="title">{{ $t('navigation.solutions') }}</span>
             </el-menu-item>
             <el-menu-item :index="$localePath('/support')">
-                <span class="title">{{ $t('support') }}</span>
+                <span class="title">{{ $t('navigation.support') }}</span>
             </el-menu-item>
             <el-menu-item :index="$localePath('/about')">
-                <span class="title">{{ $t('about-us') }}</span>
+                <span class="title">{{ $t('navigation.about-us') }}</span>
             </el-menu-item>
         </el-menu>
 

app/components/MarkdownRenderer.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <!-- 用 v-html 渲染解析后的 HTML -->
-  <div class="markdown-body" v-html="safeHtml"/>
+  <div class="markdown-body" v-html="safeHtml" />
 </template>
 
 <script setup lang="ts">
@@ -11,8 +11,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
+
+const contentWithAbsoluteUrls = convertMedia(props.content)
+
 // 将 Markdown 转换成 HTML
-const safeHtml = computed(() => renderMarkdown(props.content))
+const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
+
 </script>
 
 <style>
@@ -23,13 +27,13 @@ const safeHtml = computed(() => renderMarkdown(props.content))
 
 .markdown-body h1,
 .markdown-body h2 {
-    color: var(--el-color-primary);
+  color: var(--el-color-primary);
-    font-size: 1.5em;
+  font-size: 1.5em;
-    margin-bottom: 0.5em;
+  margin-bottom: 0.5em;
 }
 
 .markdown-body ol {
-    list-style-type: decimal;
+  list-style-type: decimal;
-    padding-left: 2em;
+  padding-left: 2em;
 }
 </style>

app/pages/productions/index.vue

@@ -1,18 +1,31 @@
 <template>
-    <div class="productions-container">
+    <div class="page-container">
-        <el-collapse v-model="activeNames" class="production-collapse">
+        <div class="page-header">
-            <el-collapse-item
+            <h1 class="page-title">{{ $t('our-productions') }}</h1>
+            <el-breadcrumb class="breadcrumb">
+                <el-breadcrumb-item class="text-sm opacity-50">
+                    <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="text-sm opacity-50">
+                    <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="productions-container">
+            <el-collapse v-model="activeNames" class="production-collapse">
+                <el-collapse-item
 v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
-                :name="type || 'no-category'">
+                    :name="type || 'no-category'">
-                <div class="group-list">
+                    <div class="group-list">
-                    <production-card
+                        <production-card
 v-for="production in group" :key="production.documentId || production.id"
-                        :slug="production.documentId"
+                            :slug="production.documentId"
-                        :image-url="useStrapiMedia(production?.production_image?.url || '')" :name="production.title"
+                            :image-url="useStrapiMedia(production?.production_image?.url || '')"
-                        :description="production.summary || ''" />
+                            :name="production.title" :description="production.summary || ''" />
-                </div>
+                    </div>
-            </el-collapse-item>
+                </el-collapse-item>
-        </el-collapse>
+            </el-collapse>
+        </div>
     </div>
 </template>
 
@@ -78,6 +91,21 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.page-header {
+    display: flex;
+    padding: 20px;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+}
+
+.breadcrumb {
+    margin-left: auto;
+}
+
 .productions-container {
     display: flex;
     flex-direction: column;

app/utils/markdown.ts

@@ -19,3 +19,16 @@ export function renderMarkdown(content: string): string {
     return dirtyHtml
 }
 
+export function convertMedia(content: string): string {
+    // 通过正则表达式替换Markdown中的图片链接
+    // ![alt text](image-url) -> ![alt text](strapiMedia(image-url))
+
+    if(!content) return '';
+
+    const contentWithAbsoluteUrls = content.replace(
+        /!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
+        (_, alt, url) => `![${alt}](${useStrapiMedia(url)})`
+    )
+
+    return contentWithAbsoluteUrls;
+}

i18n/locales/en.json

@@ -1,10 +1,6 @@
 {
   "back": "Back",
   "not-found": "Page Not Found",
-  "productions": "Productions",
-  "solutions": "Solutions",
-  "support": "Support",
-  "about-us": "About Us",
   "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.",
@@ -14,7 +10,11 @@
   "support-desc": "24/7 professional technical support to ensure stable operation of your business.",
   "quick-links": "Quick Links",
   "navigation": {
-    "home": "Home"
+    "home": "Home",
+    "productions": "Productions",
+    "solutions": "Solutions",
+    "support": "Support",
+    "about-us": "About Us"
   },
   "contact-info": "Contact Us",
   "telephone": "Telephone",
@@ -31,5 +31,6 @@
   "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..."
+  "loading": "Loading...",
+  "our-productions": "Our Productions"
 }

i18n/locales/zh.json

@@ -1,10 +1,6 @@
 {
   "back": "返回",
   "not-found": "页面不存在",
-  "productions": "产品中心",
-  "solutions": "解决方案",
-  "support": "服务支持",
-  "about-us": "关于我们",
   "search-placeholder": "搜索...",
   "company-name": "金申机械制造有限公司",
   "company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
@@ -14,7 +10,11 @@
   "support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
   "quick-links": "快速链接",
   "navigation": {
-    "home": "首页"
+    "home": "主页",
+    "productions": "产品中心",
+    "solutions": "解决方案",
+    "support": "服务支持",
+    "about-us": "关于我们"
   },
   "contact-info": "联系我们",
   "telephone": "电话",
@@ -31,5 +31,6 @@
   "product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
   "back-to-productions": "返回产品列表",
   "no-content-available": "暂无详细信息",
-  "loading": "加载中..."
+  "loading": "加载中...",
+  "our-productions": "我们的产品"
 }