fix: 修复论坛详情页面

src/views/communtiy/pages.vue

@@ -36,15 +36,12 @@
                             </div>
                           </div>
                         </div>
-                        <div>
-                          <div class="content mt6">
-                            <a
-                              target="_blank"
-                              href="#"
-                              class="excerpt"
-                              v-html="forums.articleContent"
-                            ></a>
-                          </div>
+                        <!-- 将原来的文章内容显示部分替换为 -->
+                        <div class="content mt6">
+                          <div 
+                            class="markdown-body"
+                            v-html="forums.articleContent"
+                          ></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>