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