fix: 修复论坛详情页面

This commit is contained in:
Shu Guang 2025-05-17 18:24:48 +08:00
parent 702d0d6aec
commit 87d3ffdf39

View File

@ -36,15 +36,12 @@
</div>
</div>
</div>
<div>
<!-- 将原来的文章内容显示部分替换为 -->
<div class="content mt6">
<a
target="_blank"
href="#"
class="excerpt"
<div
class="markdown-body"
v-html="forums.articleContent"
></a>
</div>
></div>
</div>
<div class="flex ac jsb mt10">
<div class="action-meta flex0 flex jsb">
@ -196,7 +193,8 @@ import {
DeleteComments,
AllUser,
} from "@/api";
import ColumnSetting from "@/components/common/ColumnSetting.vue";
import MarkdownIt from 'markdown-it';
export default {
name: "UserCenter",
data() {
@ -277,48 +275,61 @@ export default {
});
},
// markdown
renderMarkdown(content) {
if (!content) return '';
return this.md.render(content);
},
fetchData() {
//
let datas = { id: this.ArticleId };
ArticleById(datas)
.then((res) => {
if (res.code === 200) {
this.forums = res.data;
//
this.getuser();
// markdown-it
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true,
breaks: true
});
// Markdown HTML
this.forums = {
...res.data,
articleContent: md.render(res.data.articleContent || '')
};
//
this.fetchComments();
}
})
.catch((error) => {
console.log(error);
});
},
//
DeleteComments(item) {
DeleteComments(item.commentId)
.then((res) => {
if (res.code == 200) {
this.$message.success("删除成功");
//
this.fetchComments();
}
})
.catch((error) => {
this.$message.error(error || "删除失败");
console.error("获取文章失败:", error);
this.$message.error("获取文章失败");
});
},
fetchComments() {
//
let data = { id: this.ArticleId };
let data = { id: this.ArticleId }; // 使 id
CommentsById(data)
.then((res) => {
this.msg = res.data.length || 0;
this.comments = res.data;
// console.log(this.comments);
console.log(this.comments);
if (res.code === 200) {
this.comments = res.data || []; // comments
this.msg = this.comments.length;
} else {
this.$message.error(res.msg || "获取评论失败");
this.comments = []; //
this.msg = 0;
}
})
.catch((error) => {
console.log(error);
console.error("获取评论失败:", error);
this.$message.error("获取评论失败");
this.comments = []; //
this.msg = 0;
});
},
//
@ -431,4 +442,73 @@ button {
margin-top: 8px;
line-height: 1.6;
}
/* 添加 Markdown 样式 */
:deep(.markdown-body) {
color: #24292e;
font-size: 16px;
line-height: 1.5;
}
:deep(.markdown-body h1),
:deep(.markdown-body h2),
:deep(.markdown-body h3),
:deep(.markdown-body h4),
:deep(.markdown-body h5),
:deep(.markdown-body h6) {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
:deep(.markdown-body code) {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(27,31,35,0.05);
border-radius: 3px;
}
:deep(.markdown-body pre) {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
:deep(.markdown-body img) {
max-width: 100%;
box-sizing: content-box;
}
:deep(.markdown-body p) {
margin-bottom: 16px;
}
:deep(.markdown-body blockquote) {
padding: 0 1em;
color: #6a737d;
border-left: 0.25em solid #dfe2e5;
}
:deep(.markdown-body table) {
display: block;
width: 100%;
overflow: auto;
border-spacing: 0;
border-collapse: collapse;
}
:deep(.markdown-body table th),
:deep(.markdown-body table td) {
padding: 6px 13px;
border: 1px solid #dfe2e5;
}
:deep(.markdown-body table tr:nth-child(2n)) {
background-color: #f6f8fa;
}
</style>