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

feat: 完成网站前端的基本建设

Browse Source 
- 网站内容展示：首页， 产品页， 解决方案， 联系信息等
- 网站跳转逻辑：通过Vue-Router实现路由跳转
- 后端通信： 通过Nuxt Strapi与后端Strapi服务进行通信
This commit is contained in:
R2m1liA
2025-09-06 15:59:52 +08:00
parent 6470da9792
commit f957adfa5d
52 changed files with 3358 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
app/pages/solutions/[...slug].vue Normal file
View File

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

125
app/pages/solutions/index.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class="page-container">
<div class="page-header">
<h1 class="page-title">{{ $t('learn-our-solutions') }}</h1>
<el-breadcrumb class="breadcrumb">
<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>
</div>
<div class="solutions-container">
<el-tabs v-model="activeName" class="solutions-tabs">
<el-tab-pane :label="$t('all')" name="all">
<div class="solution-list">
<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'"
>
<div class="solution-list">
<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>
</div>
</div>
</template>
<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()
const activeName = ref<string>('all')
const solutions = ref<Solution[]>([])
// 按类型分组
const groupedSolutions = computed(() => {
const gourps: Record<string, Solution[]> = {}
for (const sol of solutions.value) {
let typeKey = ''
if (typeof sol.solution_type === 'string') {
typeKey = sol.solution_type
} else if (sol.solution_type && typeof sol.solution_type === 'object' && 'type' in sol.solution_type) {
typeKey = sol.solution_type.type || ''
}
if (!gourps[typeKey]) gourps[typeKey] = []
gourps[typeKey]?.push(sol)
}
return gourps
})
onMounted(async () => {
try {
const response = await find<Solution>('solutions', {
populate: {
cover: {
populate: '*',
},
solution_type: {
populate: '*',
},
},
locale: strapiLocale,
})
solutions.value = response.data.map((item: Solution) => ({
...item,
solution_type: item.solution_type,
}))
console.log('Fetched Solutions:', solutions.value)
console.log('Grouped Solutions:', groupedSolutions.value)
} catch (error) {
console.error('Failed to fetch solutions:', error)
}
})
</script>
<style scoped>
.page-container {
padding: 2rem;
}
.page-header {
display: flex;
}
.page-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--el-color-primary);
}
.breadcrumb {
margin-left: auto;
}
.solution-list {
display: flex;
flex-wrap: wrap;
padding: 1rem;
margin-bottom: 2rem;
gap: 40px;
}
</style>