diff --git a/src/component/Comment/Comment.vue b/src/component/Comment/Comment.vue
index bc0020ec49a2a9dc5d6871501f34892de2679443..dd5aa27f3a1855257a0df5605319958842248a58 100644
--- a/src/component/Comment/Comment.vue
+++ b/src/component/Comment/Comment.vue
@@ -1,56 +1,54 @@
 <template>
-    <section class="box comments">
-        <hr />
-        <h3 class="title is-5">{{$t('comment.title')}}</h3>
-        <comment-form :slug="slug" v-if="token" @loadComment="fetchComment"/>
+  <section class="box comments">
+    <hr />
+    <h3 class="title is-5">{{ $t("comment.title") }}</h3>
+    <comment-form :slug="slug" v-if="token" @loadComment="fetchComment" />
 
-        <comment-item
-          v-for="comment in comments"
-          :key="`comment-${comment.id}`"
-          :comment="comment"
-        />
-    </section>
+    <comment-item
+      v-for="comment in comments"
+      :key="`comment-${comment.id}`"
+      :comment="comment"
+    />
+  </section>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { fetchCommentByTopicId } from '@/api/comment'
-import CommentForm from './CommentForm'
-import CommentItem from './CommentItem'
+import { mapGetters } from "vuex";
+import { fetchCommentByTopicId } from "@/api/comment";
+import CommentForm from "./CommentForm";
+import CommentItem from "./CommentItem";
 
 export default {
-    name: 'Comment',
-    components: {
-        CommentForm,
-        CommentItem
-    }, 
-    data() {
-        return {
-            comments: []
-        }
+  name: "Comment",
+  components: {
+    CommentForm,
+    CommentItem,
+  },
+  data() {
+    return {
+      comments: [],
+    };
+  },
+  props: {
+    slug: {
+      type: String,
+      default: null,
     },
-    props: {
-        slug: {
-            type: String,
-            default: null
-        }
+  },
+  computed: {
+    ...mapGetters(["token"]),
+  },
+  async mounted() {
+    await this.fetchComment(this.slug);
+  },
+  methods: {
+    async fetchComment(topic_id) {
+      console.log(topic_id);
+      fetchCommentByTopicId(topic_id).then((response) => {
+        const { data } = response;
+        this.comments = data;
+      });
     },
-    computed: {
-        ...mapGetters([
-            'token'
-        ])
-    },
-    async mounted () {
-        await this.fetchComment(this.slug)
-    },
-    methods: {
-        async fetchComment(topic_id){
-            console.log(topic_id)
-            fetchCommentByTopicId(topic_id).then(response => {
-                const { data } = response
-                this.comments = data
-            })
-        }
-    }
-}
+  },
+};
 </script>
diff --git a/src/component/Comment/CommentForm.vue b/src/component/Comment/CommentForm.vue
index 3848c3432c3b52f6155abfa40a6e9e10601962ac..fa1e2b82c58b58c01b66f37c5e0009691180dbd8 100644
--- a/src/component/Comment/CommentForm.vue
+++ b/src/component/Comment/CommentForm.vue
@@ -66,10 +66,10 @@ export default {
           this.$message.success(this.$t("comment.success"));
           this.commentText = "";
         } else {
-          this.$message.error(this.$t("comment.empty"))
+          this.$message.error(this.$t("comment.empty"));
         }
       } catch (e) {
-        this.$message.error(this.$t("comment.failed", [e]))
+        this.$message.error(this.$t("comment.failed", [e]));
       } finally {
         this.isLoading = false;
       }
diff --git a/src/component/Comment/CommentItem.vue b/src/component/Comment/CommentItem.vue
index b9e66d3047cd5fc24750a55342382edc4ce950ed..ba48ee3d2b9afc74bef0ac9a2272f4716d8a4c6f 100644
--- a/src/component/Comment/CommentItem.vue
+++ b/src/component/Comment/CommentItem.vue
@@ -1,33 +1,50 @@
 <template>
-    <article class="media">
-        <div class="media-left">
-            <el-avatar :size="48" :src="comment.avatar" />
-        </div>
-        <div class="media-content">
-            <div class="content">
-                <p>
-                    <router-link :to="{name: 'user', params: { username: comment.username }}">
-                        <strong>{{ comment.username }}</strong>
-                    </router-link>
-                    <small class="m1-2" > {{ comment.createTime | date }}</small>
-                    <br />
-                    {{ comment.content }}
-                </p> 
-            </div>
-        </div>
-    </article>
+  <article class="media">
+    <div class="media-left">
+      <el-avatar :size="48" :src="comment.avatar" />
+    </div>
+    <div class="media-content">
+      <div class="content">
+        <p class="is-size-5 mb-5">
+          <router-link
+            :to="{
+              name: 'user',
+              params: { username: comment.username },
+            }"
+          >
+            {{ comment.alias }}
+            <span class="is-size-7 has-text-grey">{{
+              "@" + comment.username
+            }}</span>
+          </router-link>
+          <small class="m1-2" style="float:right;>">
+            {{ comment.createTime | date }}</small
+          >
+          <br />
+          <span style="white-space: pre-wrap" class="content">{{
+            comment.content
+          }}</span>
+        </p>
+      </div>
+    </div>
+  </article>
 </template>
 
-<script>
-
-export default{
-    name: 'CommentItem',
-    props: {
-        comment: {
-            type: Object,
-            requried: true
-        }
-    }
+<style>
+.content {
+  word-break: break-all;
 }
+</style>
+
+<script>
+export default {
+  name: "CommentItem",
+  props: {
+    comment: {
+      type: Object,
+      requried: true,
+    },
+  },
+};
 </script>