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

refactor: 将解决方案页文章提取为单独的组件

Browse Source
This commit is contained in:
R2m1liA
2025-10-29 17:03:28 +08:00
parent 5f78c888a2
commit 9982481c83
2 changed files with 55 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/components/pages/solutions/SolutionDetail.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<article class="solution-defail">
<header class="solution-header">
<h1 class="solution-title">{{ solution.title }}</h1>
<dl class="solution-meta">
<dt class="visually-hidden">CreatedAt:</dt>
<dd class="solution-date">
{{ new Date(solution.createAt).toLocaleDateString() }}
</dd>
</dl>
<p class="solution-summary">{{ solution.summary }}</p>
</header>
<section class="solution-content">
<markdown-renderer :content="solution?.content || ''" />
</section>
</article>
</template>
<script setup lang="ts">
defineProps({
solution: {
type: Object as PropType<SolutionView>,
default: null,
},
});
</script>
<style scoped>
.solution-title {
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);
}
.solution-summary {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
text-align: center;
}
.solution-content {
margin-top: 1rem;
}
</style>

54
app/pages/solutions/[...slug].vue
View File

@ -5,21 +5,7 @@
<div class="page-header">
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
</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.createAt).toLocaleDateString() }}
</span>
</div>
</div>
<p class="summary">{{ solution.summary }}</p>
<div class="solution-content">
<markdown-renderer :content="solution.content || ''" />
</div>
</div>
<solution-detail :solution="solution" />
</div>
<div v-else class="not-found">
<not-found-result
@ -78,44 +64,6 @@
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;