yunzerwebsite/yunzer_go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善文章详情页

Browse Source
This commit is contained in:
李志强 2025-12-26 15:28:42 +08:00
parent 46fc7b2739
commit b86941fc9c
2 changed files with 540 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/assets/css/bootstrap.min.css vendored
View File

@ -107,7 +107,7 @@
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius: 8px;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
@ -4988,10 +4988,12 @@ fieldset:disabled .btn {
height: var(--bs-card-height);
color: var(--bs-body-color);
word-wrap: break-word;
background-color: var(--bs-card-bg);
background-color: var(--white);
background-clip: border-box;
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: var(--bs-card-border-radius)
/* border: var(--bs-card-border-width) solid var(--bs-card-border-color); */
border-radius: var(--bs-card-border-radius);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
padding:20px;
}
.card>hr {
@ -5004,6 +5006,17 @@ fieldset:disabled .btn {
border-bottom: inherit
}
.card>.list-group>.item{
margin-bottom:20px;
border:1px solid #ddd;
border-radius:8px;
}
.card>.list-group>.item:hover{
transform:translateY(-5px);
transition:all .3s ease;
}
.card>.list-group:first-child {
border-top-width: 0;
border-top-left-radius: var(--bs-card-inner-border-radius);

740
frontend/src/views/components/detail_article.vue
View File

@ -19,15 +19,10 @@ const getImageUrl = (imagePath: string) => {
};
// 格式化日期
const formatDate = (timestamp: string | number) => {
if (!timestamp) return "";
const numTimestamp = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp;
const date = new Date(numTimestamp < 1e10 ? numTimestamp * 1000 : numTimestamp);
return date.toLocaleDateString("zh-CN", {
year: "numeric",
month: "2-digit",
day: "2-digit",
});
const formatDate = (dateStr: string) => {
if (!dateStr) return "";
// 如果包含空格，取日期部分
return dateStr.split(" ")[0];
};
// 获取文章详情
@ -43,8 +38,10 @@ const fetchArticleDetail = async () => {
// 使用article API获取文章详情
const response: any = await article.getArticleDetail(articleId.value);
if (response.data?.data) {
// console.log(response)
if (response.data.code === 0) {
articleData.value = response.data.data;
// console.log(articleData.value)
} else {
ElMessage.warning(response.data?.msg || "获取文章详情失败");
router.push("/");
@ -64,275 +61,584 @@ onMounted(() => {
</script>
<template>
<Header />
<div class="article-detail">
<div class="container">
<!-- 面包屑导航 -->
<div class="breadcrumb-wrapper" v-if="article">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/siteInformation' }">站点资讯</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading">
<el-icon class="is-loading">
<Loading />
</el-icon>
<span>加载中...</span>
</div>
<!-- 文章不存在 -->
<div v-else-if="!article" class="error">
<el-empty description="文章不存在或已删除"></el-empty>
</div>
<!-- 文章内容 -->
<div v-else class="article-content">
<!-- 文章标题 -->
<div class="article-header">
<h1 class="article-title">{{ articleData.title }}</h1>
<div class="article-meta">
<span class="article-date">
<i class="fas fa-calendar"></i>
{{ formatDate(articleData.publishdate || articleData.created_at) }}
</span>
<span class="article-views" v-if="articleData.view">
<i class="fas fa-eye"></i>
{{ articleData.view }} 阅读
</span>
<span class="article-likes" v-if="articleData.likes">
<i class="fas fa-heart"></i>
{{ articleData.likes }} 点赞
</span>
</div>
</div>
<!-- 文章图片 -->
<div class="article-image" v-if="articleData.image">
<img :src="getImageUrl(articleData.image)" :alt="articleData.title" />
</div>
<!-- 文章正文 -->
<div class="article-body">
<div
class="article-text"
v-html="articleData.content"
></div>
</div>
<!-- 文章标签 -->
<div class="article-tags" v-if="articleData.tags && articleData.tags.length">
<span class="tag-label">标签：</span>
<el-tag
v-for="tag in articleData.tags"
:key="tag"
size="small"
class="article-tag"
>
{{ tag }}
</el-tag>
</div>
</div>
</div>
<Header />
<div class="article-detail">
<!-- 面包屑导航 -->
<div class="breadcrumb-wrapper" v-if="article">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/siteInformation' }"
>站点资讯</el-breadcrumb-item
>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<Footer />
<div class="container">
<div class="container-left">
<!-- 加载状态 -->
<div v-if="loading" class="loading">
<el-icon class="is-loading">
<Loading />
</el-icon>
<span>加载中...</span>
</div>
<!-- 文章不存在 -->
<div v-else-if="!article" class="error">
<el-empty description="文章不存在或已删除"></el-empty>
</div>
<!-- 文章内容 -->
<div v-else class="article-content">
<!-- 文章标题 -->
<div class="article-header">
<h1 class="article-title">{{ articleData.article.title }}</h1>
<div class="article-meta">
<span class="article-date">
<i class="fas fa-calendar"></i>
{{
formatDate(
articleData.article.publishdate ||
articleData.article.create_time
)
}}
</span>
<span class="article-views">
<i class="fas fa-eye"></i>
{{ articleData.article.views }} 阅读
</span>
<span class="article-likes">
<i class="fas fa-heart"></i>
{{ articleData.article.likes }} 点赞
</span>
</div>
</div>
<!-- 文章图片 -->
<div class="article-image" v-if="articleData.article.image">
<img
:src="getImageUrl(articleData.article.image)"
:alt="articleData.article.title"
/>
</div>
<!-- 文章正文 -->
<div class="article-body">
<div
class="article-text"
v-html="articleData.article.content"
></div>
<el-divider></el-divider>
<div class="disclaimers">
<div class="disclaimer-item">
<div class="disclaimer-title">免责声明:</div>
<div class="disclaimer-content">
<p>
本站非盈利性站点，所有资源仅供学习参考，并不贩卖软件不存在任何商业目的及用途，如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途。
</p>
<p>
本站所发布的一切软件资源均来自于互联网仅限用于学习和研究目的；
</p>
<p>
不得将上述内容用于商业或者非法用途，否则一切后果请用户自负；
</p>
<p>本站所有软件信息来自网络，版权争议与本站无关；</p>
<p>
您必须在下载后的24个小时之内从您的电脑中彻底删除，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务；
</p>
<p>
如有侵权请邮件与我们联系处理，我们会及时处理，
邮箱：yunzer_cn#163.com（#换成@）
</p>
</div>
</div>
</div>
<el-divider />
<div class="navigation">
<div class="prev" id="prev">
<template v-if="articleData.prev_article">
<a
:href="`/index/resource/detail?id=${articleData.prev_article.id}`"
>
<i class="fa fa-arrow-left"></i>
上一篇：{{ articleData.prev_article.title }}
</a>
</template>
<template v-else>
<span class="no-content">
<i class="fa fa-arrow-left"></i>
上一篇：暂无
</span>
</template>
</div>
<div class="next" id="next">
<template v-if="articleData.next_article">
<a
:href="`/index/resource/detail?id=${articleData.next_article.id}`"
>
下一篇：{{ articleData.next_article.title }}
<i class="fa fa-arrow-right"></i>
</a>
</template>
<template v-else>
<span class="no-content">
下一篇：暂无
<i class="fa fa-arrow-right"></i>
</span>
</template>
</div>
</div>
</div>
<!-- 文章标签 -->
<div
class="article-tags"
v-if="articleData.tags && articleData.tags.length"
>
<span class="tag-label">标签：</span>
<el-tag
v-for="tag in articleData.tags"
:key="tag"
size="small"
class="article-tag"
>
{{ tag }}
</el-tag>
</div>
</div>
</div>
<div class="container-right">
<div v-if="articleData" class="aboutauthor">
<div class="aboutauthor-title">关于作者</div>
<div class="aboutauthor-main">
<div class="aboutauthor-main-top">
<div class="aboutauthor-avatar">
<img src="@/assets/imgs/avatar.png" alt="作者头像" />
</div>
<div class="aboutauthor-info">
<div class="author-name">{{ articleData.article.author }}</div>
</div>
</div>
<div class="aboutauthor-main-middle">
<div class="author-stats">
<div class="author-stats-item">
<h6>资源</h6>
<span class="count">{{
articleData.article.articlecount
}}</span>
</div>
<div class="author-stats-item">
<h6>文章</h6>
<span class="count">{{
articleData.article.resourcecount
}}</span>
</div>
<div class="author-stats-item">
<h6>粉丝</h6>
<span class="count"> 0 </span>
</div>
</div>
</div>
</div>
<div class="aboutauthor-btn">
<button class="follow-btn">
<i class="fa fa-user-plus"></i>
关注他
</button>
<button class="message-btn">
<i class="fa fa-envelope"></i>
发私信
</button>
</div>
</div>
<div
v-if="
articleData &&
articleData.related_articles &&
articleData.related_articles.length > 0
"
class="related-articles card mt-4"
>
相关资源
<el-divider />
<div class="list-group">
<div
v-for="article in articleData.related_articles"
:key="article.id"
class="item"
>
<div class="card-img">
<img
class="thumb-img p-3"
:src="getImageUrl(article.image)"
:alt="article.title"
/>
</div>
<div class="card-title px-3">{{ article.title }}</div>
<div class="time pb-3 px-3">
<i class="fas fa-clock"></i>
{{ formatDate(article.publishdate) }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</template>
<style lang="less" scoped>
.article-detail {
padding-top: 100px;
min-height: 100vh;
background: #f9fafc;
padding: 100px 0;
background: #f9fafc;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 20px;
.container-left {
width: 70%;
}
.container-right {
width: 30%;
.aboutauthor {
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
.aboutauthor-title {
height: 60px;
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #eee;
font-weight: 700;
}
.aboutauthor-main {
display: flex;
flex-direction: column;
.aboutauthor-main-top {
display: flex;
align-items: center;
padding-left: 20px !important;
padding: 20px 0;
padding-left: 0px;
border-bottom: 1px solid #efefef;
margin-bottom: 20px;
.aboutauthor-avatar {
margin-right: 12px;
img {
width: 60px;
height: 60px;
border-radius: 4px;
box-sizing: border-box;
margin: 0px;
min-width: 0px;
max-width: 100%;
background-color: #fff;
}
}
.aboutauthor-info {
.author-name {
font-size: 20px;
font-weight: 700;
}
}
}
.aboutauthor-main-middle {
.author-stats {
display: flex;
justify-content: space-evenly;
.author-stats-item {
display: flex;
flex-direction: column;
align-items: center;
.count {
font-weight: 700;
}
}
}
}
}
.aboutauthor-btn {
display: flex;
justify-content: space-evenly;
padding: 20px 0;
.follow-btn {
background-color: #0081ff;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
border: none;
}
.message-btn {
color: #0081ff;
padding: 10px 20px;
border-radius: 8px;
border: 1px solid #eee;
}
}
}
.related-articles {
font-weight: 700;
.time {
font-size: 1em;
color: #ccc;
font-weight: 400;
}
}
}
}
.breadcrumb-wrapper {
margin-bottom: 30px;
width: 1100px;
margin: 30px auto;
:deep(.el-breadcrumb__inner) {
color: #fff !important;
font-weight: bolder !important;
}
a {
color: #666;
text-decoration: none;
&:hover {
color: #007bff;
}
a {
color: #666;
text-decoration: none;
&:hover {
color: #007bff;
}
}
}
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 0;
color: #666;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 0;
color: #666;
.el-icon {
font-size: 24px;
margin-bottom: 10px;
}
.el-icon {
font-size: 24px;
margin-bottom: 10px;
}
}
.error {
padding: 50px 0;
padding: 50px 0;
}
.article-content {
background: white;
border-radius: 8px;
padding: 40px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
background: white;
border-radius: 8px;
padding: 40px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.article-header {
border-bottom: 1px solid #eee;
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
margin-bottom: 30px;
}
.article-title {
font-size: 2.5rem;
font-weight: bold;
color: #333;
line-height: 1.3;
margin: 0 0 20px 0;
font-size: 1.8rem;
font-weight: bold;
color: #333;
line-height: 1.3;
margin: 0 0 20px 0;
}
.article-meta {
display: flex;
gap: 20px;
color: #666;
font-size: 14px;
span {
display: flex;
gap: 20px;
color: #666;
font-size: 14px;
align-items: center;
gap: 5px;
span {
display: flex;
align-items: center;
gap: 5px;
i {
font-size: 16px;
}
i {
font-size: 16px;
}
}
}
.article-image {
margin-bottom: 30px;
text-align: center;
margin-bottom: 30px;
text-align: center;
img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
}
.article-body {
color: #333;
line-height: 1.8;
font-size: 16px;
color: #333;
line-height: 1.8;
font-size: 16px;
.disclaimers {
color: #b1b1b1;
width: 80%;
margin: 20px auto;
margin-bottom: 20px;
margin-bottom: 60px;
.disclaimer-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.disclaimer-content {
font-size: 14px;
line-height: 1.6;
}
.actions {
display: flex;
justify-content: center;
#downloadBtn {
padding: 0 20px;
}
.codebtn {
color: #0d6efd;
padding: 15px 30px;
border-radius: 8px;
border: 1px solid #0d6efd;
cursor: pointer;
transition: all 0.3s ease;
background-color: #fff;
}
}
}
.navigation {
display: flex;
justify-content: space-between;
margin: 30px 0;
a {
color: #333;
}
}
}
.article-text {
:deep(p) {
margin-bottom: 16px;
line-height: 1.8;
}
:deep(p) {
margin-bottom: 16px;
line-height: 1.8;
}
:deep(img) {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 16px 0;
}
:deep(img) {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 16px 0;
}
:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
color: #333;
margin: 24px 0 16px 0;
font-weight: 600;
}
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
color: #333;
margin: 24px 0 16px 0;
font-weight: 600;
}
:deep(ul), :deep(ol) {
padding-left: 24px;
margin-bottom: 16px;
}
:deep(ul),
:deep(ol) {
padding-left: 24px;
margin-bottom: 16px;
}
:deep(code) {
background: #f6f8fa;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 14px;
}
:deep(code) {
background: #f6f8fa;
padding: 2px 6px;
border-radius: 3px;
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 14px;
}
:deep(pre) {
background: #f6f8fa;
padding: 16px;
border-radius: 6px;
overflow-x: auto;
margin: 16px 0;
:deep(pre) {
background: #f6f8fa;
padding: 16px;
border-radius: 6px;
overflow-x: auto;
margin: 16px 0;
code {
background: none;
padding: 0;
}
code {
background: none;
padding: 0;
}
}
:deep(blockquote) {
border-left: 4px solid #ddd;
padding-left: 16px;
margin: 16px 0;
color: #666;
font-style: italic;
}
:deep(blockquote) {
border-left: 4px solid #ddd;
padding-left: 16px;
margin: 16px 0;
color: #666;
font-style: italic;
}
}
.article-tags {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
.tag-label {
color: #666;
font-size: 14px;
margin-right: 10px;
}
.tag-label {
color: #666;
font-size: 14px;
margin-right: 10px;
}
.article-tag {
margin-right: 8px;
margin-bottom: 8px;
}
.article-tag {
margin-right: 8px;
margin-bottom: 8px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.container {
padding: 0 15px;
}
.article-content {
padding: 20px;
}
.article-content {
padding: 20px;
}
.article-title {
font-size: 2rem;
}
.article-title {
font-size: 2rem;
}
.article-meta {
flex-direction: column;
gap: 8px;
}
.article-meta {
flex-direction: column;
gap: 8px;
}
}
</style>
.thumb-img {
width: 100%;
}
</style>