remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
R2m1liA
2025-08-21 14:26:58 +08:00
parent 0a31a1fa85
commit 2fe8797551
7 changed files with 86 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/JinshenFooter.vue
View File

@ -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>

8
app/components/JinshenHeader.vue
View File

@ -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>

18
app/components/MarkdownRenderer.vue
View File

@ -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);
font-size: 1.5em;
margin-bottom: 0.5em;
color: var(--el-color-primary);
font-size: 1.5em;
margin-bottom: 0.5em;
}
.markdown-body ol {
list-style-type: decimal;
padding-left: 2em;
list-style-type: decimal;
padding-left: 2em;
}
</style>

52
app/pages/productions/index.vue
View File

@ -1,18 +1,31 @@
<template>
<div class="productions-container">
<el-collapse v-model="activeNames" class="production-collapse">
<el-collapse-item
<div class="page-container">
<div class="page-header">
<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'">
<div class="group-list">
<production-card
:name="type || 'no-category'">
<div class="group-list">
<production-card
v-for="production in group" :key="production.documentId || production.id"
:slug="production.documentId"
:image-url="useStrapiMedia(production?.production_image?.url || '')" :name="production.title"
:description="production.summary || ''" />
</div>
</el-collapse-item>
</el-collapse>
:slug="production.documentId"
:image-url="useStrapiMedia(production?.production_image?.url || '')"
:name="production.title" :description="production.summary || ''" />
</div>
</el-collapse-item>
</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;

13
app/utils/markdown.ts
View File

@ -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;
}