From 1a77e36bde21af3ba41fbd5bff9eb1e3db311686 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Wed, 22 Apr 2020 11:29:55 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=9B=9E=E5=A4=8D?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/build.sh                      |   2 +
 server/controllers/render/render.go  |  17 +-
 server/model/response.go             |  14 +-
 site/assets/styles/comment.scss      | 189 +++++++++++++
 site/assets/styles/main.scss         |   1 +
 site/components/Comment.vue          | 402 +++------------------------
 site/components/CommentInput.vue     | 120 ++++++++
 site/components/CommentList.vue      | 139 +++++++++
 site/components/CommentTextInput.vue | 116 ++++++++
 site/pages/tweet/_id.vue             |  13 +
 10 files changed, 629 insertions(+), 384 deletions(-)
 create mode 100644 site/assets/styles/comment.scss
 create mode 100644 site/components/CommentInput.vue
 create mode 100644 site/components/CommentList.vue
 create mode 100644 site/components/CommentTextInput.vue

diff --git a/server/build.sh b/server/build.sh
index d6f54d790..5ab713e5d 100755
--- a/server/build.sh
+++ b/server/build.sh
@@ -1 +1,3 @@
+
 GOOS=linux GOARCH=386 go build
+
diff --git a/server/controllers/render/render.go b/server/controllers/render/render.go
index eeb4bc3fe..e0904bb7f 100644
--- a/server/controllers/render/render.go
+++ b/server/controllers/render/render.go
@@ -1,7 +1,6 @@
 package render
 
 import (
-	"html/template"
 	"strconv"
 	"strings"
 
@@ -115,13 +114,13 @@ func BuildArticle(article *model.Article) *model.ArticleResponse {
 
 	if article.ContentType == model.ContentTypeMarkdown {
 		mr := simple.NewMd(simple.MdWithTOC()).Run(article.Content)
-		rsp.Content = template.HTML(BuildHtmlContent(mr.ContentHtml))
-		rsp.Toc = template.HTML(mr.TocHtml)
+		rsp.Content = BuildHtmlContent(mr.ContentHtml)
+		rsp.Toc = mr.TocHtml
 		if len(rsp.Summary) == 0 {
 			rsp.Summary = mr.SummaryText
 		}
 	} else if article.ContentType == model.ContentTypeHtml {
-		rsp.Content = template.HTML(BuildHtmlContent(article.Content))
+		rsp.Content = BuildHtmlContent(article.Content)
 		if len(rsp.Summary) == 0 {
 			rsp.Summary = simple.GetSummary(article.Content, 256)
 		}
@@ -233,8 +232,8 @@ func BuildTopic(topic *model.Topic) *model.TopicResponse {
 	rsp.Tags = BuildTags(tags)
 
 	mr := simple.NewMd(simple.MdWithTOC()).Run(topic.Content)
-	rsp.Content = template.HTML(BuildHtmlContent(mr.ContentHtml))
-	rsp.Toc = template.HTML(mr.TocHtml)
+	rsp.Content = BuildHtmlContent(mr.ContentHtml)
+	rsp.Toc = mr.TocHtml
 
 	return rsp
 }
@@ -333,11 +332,11 @@ func BuildProject(project *model.Project) *model.ProjectResponse {
 	rsp.CreateTime = project.CreateTime
 
 	if project.ContentType == model.ContentTypeHtml {
-		rsp.Content = template.HTML(BuildHtmlContent(project.Content))
+		rsp.Content = BuildHtmlContent(project.Content)
 		rsp.Summary = simple.GetSummary(simple.GetHtmlText(project.Content), 256)
 	} else {
 		mr := simple.NewMd().Run(project.Content)
-		rsp.Content = template.HTML(BuildHtmlContent(mr.ContentHtml))
+		rsp.Content = BuildHtmlContent(mr.ContentHtml)
 		rsp.Summary = mr.SummaryText
 	}
 
@@ -419,7 +418,7 @@ func _buildComment(comment *model.Comment, buildQuote bool) *model.CommentRespon
 		quote := _buildComment(services.CommentService.Get(comment.QuoteId), false)
 		if quote != nil {
 			ret.Quote = quote
-			ret.QuoteContent = template.HTML(quote.User.Nickname+"：") + quote.Content
+			ret.QuoteContent = quote.User.Nickname + "：" + quote.Content
 		}
 	}
 	return ret
diff --git a/server/model/response.go b/server/model/response.go
index 7891b7a5a..2a049825d 100644
--- a/server/model/response.go
+++ b/server/model/response.go
@@ -1,9 +1,5 @@
 package model
 
-import (
-	"html/template"
-)
-
 type UserInfo struct {
 	Id           int64    `json:"id"`
 	Username     string   `json:"username"`
@@ -54,8 +50,8 @@ type ArticleSimpleResponse struct {
 
 type ArticleResponse struct {
 	ArticleSimpleResponse
-	Content template.HTML `json:"content"`
-	Toc     template.HTML `json:"toc"`
+	Content string `json:"content"`
+	Toc     string `json:"toc"`
 }
 
 type NodeResponse struct {
@@ -82,8 +78,8 @@ type TopicSimpleResponse struct {
 // 帖子详情返回实体
 type TopicResponse struct {
 	TopicSimpleResponse
-	Content template.HTML `json:"content"`
-	Toc     template.HTML `json:"toc"`
+	Content string `json:"content"`
+	Toc     string `json:"toc"`
 }
 
 // 帖子列表返回实体
@@ -114,7 +110,7 @@ type ProjectSimpleResponse struct {
 // 项目详情
 type ProjectResponse struct {
 	ProjectSimpleResponse
-	Content template.HTML `json:"content"`
+	Content string `json:"content"`
 }
 
 type CommentResponse struct {
diff --git a/site/assets/styles/comment.scss b/site/assets/styles/comment.scss
new file mode 100644
index 000000000..5b2a4dd3a
--- /dev/null
+++ b/site/assets/styles/comment.scss
@@ -0,0 +1,189 @@
+.comment-form {
+  background-color: #fff;
+  padding: 10px;
+  margin-bottom: 10px;
+
+  .comment-create {
+    /*border: 1px solid #f0f0f0;*/
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+    padding: 0;
+    box-sizing: border-box;
+
+    .comment-quote-info {
+      font-size: 12px;
+      color: #000;
+
+      i {
+        font-size: 12px !important;
+        color: blue;
+        cursor: pointer;
+      }
+
+      i:hover {
+        color: red;
+      }
+    }
+
+    .comment-input-wrapper {
+      margin-bottom: 8px;
+
+      .text-input {
+        outline: none;
+        width: 100%;
+        height: 85px;
+        font-size: 14px;
+        padding: 10px 40px 10px 10px;
+        color: #54412e;
+        line-height: 16px;
+        max-width: 100%;
+        resize: none;
+        border: 1px solid #e9e9e9;
+        box-sizing: border-box;
+        border-radius: var(--jinsom-border-radius);
+      }
+    }
+
+    .comment-button-wrapper {
+      user-select: none;
+      display: flex;
+      float: right;
+      height: 30px;
+      line-height: 30px;
+
+      span {
+        color: #c2c2c2;
+        font-size: 13px;
+        margin-right: 5px;
+      }
+
+      button {
+        font-weight: 500;
+      }
+    }
+  }
+
+  .comment-not-login {
+    border: 1px solid #f0f0f0;
+    border-radius: 0px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .comment-login-div {
+      color: #d5d5d5;
+      cursor: pointer;
+      border-radius: 3px;
+      padding: 0 10px;
+
+      a {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.comments {
+  background-color: #fff;
+  padding: 0 10px;
+
+  .comment {
+    padding: 8px 0;
+    overflow: hidden;
+
+    &:not(:last-child) {
+      border-bottom: 1px dashed #d1d1d1;
+    }
+
+    .comment-avatar {
+      float: left;
+      padding: 3px;
+      margin-right: 5px;
+
+      .avatar {
+        min-width: 36px;
+        min-height: 36px;
+        width: 36px;
+        height: 36px;
+      }
+    }
+
+    .comment-meta {
+      position: relative;
+      height: 36px;
+
+      .comment-nickname {
+        position: relative;
+        font-size: 14px;
+        font-weight: 800;
+        margin-right: 5px;
+        cursor: pointer;
+        color: #1abc9c;
+        text-decoration: none;
+        display: inline-block;
+      }
+
+      .comment-time {
+        font-size: 12px;
+        color: #999999;
+        line-height: 1;
+        display: inline-block;
+        position: relative;
+      }
+
+      .comment-reply {
+        float: right;
+        font-size: 12px;
+      }
+    }
+
+    .comment-content {
+      word-wrap: break-word;
+      word-break: break-all;
+      text-align: justify;
+      color: #4a4a4a;
+      font-size: 14px;
+      line-height: 1.6;
+      position: relative;
+      padding-left: 45px;
+      margin-top: -5px;
+    }
+
+    .comment-quote {
+      font-size: 12px;
+      padding: 10px 10px;
+      border-left: 2px solid #5978f3;
+
+      &::after {
+        content: '\201D';
+        font-family: Georgia, serif;
+        font-size: 60px;
+        font-weight: bold;
+        color: #aaa;
+        position: absolute;
+        right: 0px;
+        top: -18px;
+      }
+
+      .comment-quote-user {
+        display: flex;
+
+        .quote-nickname {
+          line-height: 20px;
+          font-weight: 700;
+          margin-left: 5px;
+        }
+
+        .quote-time {
+          line-height: 20px;
+          margin-left: 5px;
+          color: rgba(134, 142, 150, 0.8);
+        }
+      }
+    }
+  }
+}
diff --git a/site/assets/styles/main.scss b/site/assets/styles/main.scss
index aa52dc929..18e2448e6 100644
--- a/site/assets/styles/main.scss
+++ b/site/assets/styles/main.scss
@@ -2,5 +2,6 @@
 @import "./article";
 @import "./topic";
 @import "./tweets";
+@import "./comment";
 @import "./link";
 @import "./ad";
diff --git a/site/components/Comment.vue b/site/components/Comment.vue
index 31113abe6..e937c0682 100644
--- a/site/components/Comment.vue
+++ b/site/components/Comment.vue
@@ -1,136 +1,46 @@
 <template>
-  <div class="comment-component main-content">
-    <div ref="commentTitle" class="comment-title">
-      评论<span v-if="commentCount > 0">({{ commentCount }})</span>
-    </div>
-    <div class="comment-form">
-      <div v-if="isLogin" class="comment-create">
-        <div ref="commentEditor" class="comment-input-wrapper">
-          <div v-if="quote" class="comment-quote-info">
-            回复：
-            <label v-text="quote.user.nickname" />
-            <i
-              @click="cancelReply"
-              class="iconfont icon-close"
-              alt="取消回复"
-            />
-          </div>
-          <markdown-editor
-            ref="mdEditor"
-            v-model="content"
-            @submit="ctrlEnterCreate"
-            editor-id="createEditor"
-            height="200px"
-            placeholder="请发表你的观点..."
-          />
-        </div>
-        <div class="comment-button-wrapper">
-          <button @click="create" v-text="btnName" class="button is-light" />
-        </div>
-      </div>
-      <div v-else class="comment-not-login">
-        <div class="comment-login-div">
-          请
-          <a @click="toLogin" style="font-weight: 700;">登录</a>后发表观点
-        </div>
-      </div>
-    </div>
-
-    <div v-if="showAd">
-      <!-- 展示广告 -->
-      <adsbygoogle ad-slot="1742173616" />
-    </div>
-
-    <load-more
-      ref="commentsLoadMore"
-      v-if="commentsPage"
-      v-slot="{ results }"
-      :init-data="commentsPage"
-      :params="{ entityType: entityType, entityId: entityId }"
-      url="/api/comment/list"
-    >
-      <ul class="comments">
-        <li
-          v-for="(comment, index) in results"
-          :key="comment.commentId"
-          class="comment"
-          itemprop="comment"
-          itemscope
-          itemtype="http://schema.org/Comment"
-        >
-          <adsbygoogle
-            v-if="showAd && (index + 1) % 3 === 0 && index !== 0"
-            ad-slot="4980294904"
-            ad-format="fluid"
-            ad-layout-key="-ht-19-1m-3j+mu"
-          />
-          <div class="comment-avatar">
-            <img v-lazy="comment.user.smallAvatar" class="avatar" />
-          </div>
-          <div class="comment-meta">
-            <span
-              class="comment-nickname"
-              itemprop="creator"
-              itemscope
-              itemtype="http://schema.org/Person"
-            >
-              <a :href="'/user/' + comment.user.id" itemprop="name">
-                {{ comment.user.nickname }}
-              </a>
-            </span>
-            <span class="comment-time">
-              <time
-                :datetime="
-                  comment.createTime | formatDate('yyyy-MM-ddTHH:mm:ss')
-                "
-                itemprop="datePublished"
-                >{{ comment.createTime | prettyDate }}</time
-              >
-            </span>
-            <span class="comment-reply">
-              <a @click="reply(comment)">回复</a>
-            </span>
-          </div>
-          <div class="comment-content content">
-            <blockquote v-if="comment.quote" class="comment-quote">
-              <div class="comment-quote-user">
-                <img
-                  v-lazy="comment.quote.user.smallAvatar"
-                  class="avatar size-20"
-                />
-                <a class="quote-nickname">{{ comment.quote.user.nickname }}</a>
-                <span class="quote-time">
-                  {{ comment.quote.createTime | prettyDate }}
-                </span>
-              </div>
-              <div
-                v-lazy-container="{ selector: 'img' }"
-                v-html="comment.quote.content"
-                itemprop="text"
-              />
-            </blockquote>
-            <p
-              v-lazy-container="{ selector: 'img' }"
-              v-html="comment.content"
-            />
-          </div>
-        </li>
-      </ul>
-    </load-more>
+  <div>
+    <comment-input
+      ref="input"
+      v-if="mode === 'markdown'"
+      :entity-id="entityId"
+      :entity-type="entityType"
+      @created="commentCreated"
+    />
+    <comment-text-input
+      ref="input"
+      v-else
+      :entity-id="entityId"
+      :entity-type="entityType"
+      @created="commentCreated"
+    />
+
+    <comment-list
+      ref="list"
+      :entity-id="entityId"
+      :entity-type="entityType"
+      :comments-page="commentsPage"
+      @reply="reply"
+    />
   </div>
 </template>
 
 <script>
-import utils from '~/common/utils'
-import LoadMore from '~/components/LoadMore'
-import MarkdownEditor from '~/components/MarkdownEditor'
+import CommentList from '~/components/CommentList'
+import CommentInput from '~/components/CommentInput'
+import CommentTextInput from '~/components/CommentTextInput'
 export default {
   name: 'Comment',
   components: {
-    LoadMore,
-    MarkdownEditor
+    CommentList,
+    CommentInput,
+    CommentTextInput
   },
   props: {
+    mode: {
+      type: String,
+      default: 'markdown'
+    },
     entityType: {
       type: String,
       default: '',
@@ -147,258 +57,18 @@ export default {
         return {}
       }
     },
-    commentCount: {
-      type: Number,
-      default: 0
-    },
     showAd: {
       type: Boolean,
       default: false
     }
   },
-  data() {
-    return {
-      content: '', // 内容
-      sending: false, // 发送中
-      quote: null // 引用的对象
-    }
-  },
-  computed: {
-    btnName() {
-      return this.sending ? '正在发表...' : '发表 (Ctrl/⌘ + Enter)'
-    },
-    user() {
-      return this.$store.state.user.current
-    },
-    isLogin() {
-      return this.$store.state.user.current != null
-    }
-  },
   methods: {
-    ctrlEnterCreate() {
-      this.create()
-    },
-    async create() {
-      if (!this.content) {
-        this.$toast.error('请输入评论内容')
-        return
-      }
-      if (this.sending) {
-        console.log('正在发送中，请不要重复提交...')
-        return
-      }
-      this.sending = true
-      try {
-        const data = await this.$axios.post('/api/comment/create', {
-          entityType: this.entityType,
-          entityId: this.entityId,
-          content: this.content,
-          quoteId: this.quote ? this.quote.commentId : ''
-        })
-        this.$refs.commentsLoadMore.unshiftResults(data)
-        this.content = ''
-        this.$refs.mdEditor.clear()
-        this.quote = null
-      } catch (e) {
-        console.error(e)
-        this.$toast.error('评论失败：' + (e.message || e))
-      } finally {
-        this.sending = false
-      }
+    commentCreated(data) {
+      this.$refs.list.append(data)
     },
     reply(quote) {
-      if (!this.isLogin) {
-        utils.toSignin()
-      }
-      this.quote = quote
-      this.$refs.commentTitle.scrollIntoView({
-        block: 'start',
-        behavior: 'smooth'
-      })
-    },
-    cancelReply() {
-      this.quote = null
-    },
-    autoHeight() {
-      const elem = this.$refs.commentEditor
-      elem.style.height = 'auto'
-      elem.scrollTop = 0 // 防抖动
-      elem.style.height = elem.scrollHeight + 'px'
-    },
-    toLogin() {
-      utils.toSignin()
+      this.$refs.input.reply(quote)
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.comment-component {
-  padding-top: 10px;
-
-  .comment-title {
-    font-size: 20px;
-    font-weight: 700;
-    border-bottom: 1px solid #f0f0f0;
-    margin-bottom: 8px;
-    padding-bottom: 4px;
-  }
-
-  .comment-form {
-    .comment-create {
-      /*border: 1px solid #f0f0f0;*/
-      border-radius: 4px;
-      margin-bottom: 10px;
-      overflow: hidden;
-      position: relative;
-      padding: 0;
-      box-sizing: border-box;
-
-      .comment-quote-info {
-        font-size: 12px;
-        color: #000;
-
-        i {
-          font-size: 12px !important;
-          color: blue;
-          cursor: pointer;
-        }
-
-        i:hover {
-          color: red;
-        }
-      }
-
-      .comment-input-wrapper {
-        margin-bottom: 10px;
-      }
-
-      .comment-button-wrapper {
-        button {
-          float: right;
-        }
-      }
-    }
-
-    .comment-not-login {
-      border: 1px solid #f0f0f0;
-      border-radius: 0px;
-      margin-bottom: 10px;
-      overflow: hidden;
-      position: relative;
-      padding: 10px;
-      box-sizing: border-box;
-
-      .comment-login-div {
-        color: #d5d5d5;
-        cursor: pointer;
-        border-radius: 3px;
-        padding: 0 10px;
-
-        a {
-          margin-left: 10px;
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-
-  .comments {
-    .comment {
-      padding: 8px 0;
-      overflow: hidden;
-
-      &:not(:last-child) {
-        border-bottom: 1px dashed #d1d1d1;
-      }
-
-      .comment-avatar {
-        float: left;
-        padding: 3px;
-        margin-right: 5px;
-
-        .avatar {
-          min-width: 36px;
-          min-height: 36px;
-          width: 36px;
-          height: 36px;
-        }
-      }
-
-      .comment-meta {
-        position: relative;
-        height: 36px;
-
-        .comment-nickname {
-          position: relative;
-          font-size: 14px;
-          font-weight: 800;
-          margin-right: 5px;
-          cursor: pointer;
-          color: #1abc9c;
-          text-decoration: none;
-          display: inline-block;
-        }
-
-        .comment-time {
-          font-size: 12px;
-          color: #999999;
-          line-height: 1;
-          display: inline-block;
-          position: relative;
-        }
-
-        .comment-reply {
-          float: right;
-          font-size: 12px;
-        }
-      }
-
-      .comment-content {
-        word-wrap: break-word;
-        word-break: break-all;
-        text-align: justify;
-        color: #4a4a4a;
-        font-size: 14px;
-        line-height: 1.6;
-        position: relative;
-        padding-left: 45px;
-        margin-top: -5px;
-      }
-
-      .comment-quote {
-        font-size: 12px;
-        padding: 10px 10px;
-        border-left: 2px solid #5978f3;
-
-        &::after {
-          content: '\201D';
-          font-family: Georgia, serif;
-          font-size: 60px;
-          font-weight: bold;
-          color: #aaa;
-          position: absolute;
-          right: 0px;
-          top: -18px;
-        }
-
-        .comment-quote-user {
-          display: flex;
-
-          .quote-nickname {
-            line-height: 20px;
-            font-weight: 700;
-            margin-left: 5px;
-          }
-
-          .quote-time {
-            line-height: 20px;
-            margin-left: 5px;
-            color: rgba(134, 142, 150, 0.8);
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/site/components/CommentInput.vue b/site/components/CommentInput.vue
new file mode 100644
index 000000000..97da8ce1d
--- /dev/null
+++ b/site/components/CommentInput.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="comment-form">
+    <div v-if="isLogin" class="comment-create">
+      <div ref="commentEditor" class="comment-input-wrapper">
+        <div v-if="quote" class="comment-quote-info">
+          回复：
+          <label v-text="quote.user.nickname" />
+          <i @click="cancelReply" class="iconfont icon-close" alt="取消回复" />
+        </div>
+        <markdown-editor
+          ref="mdEditor"
+          v-model="content"
+          @submit="create"
+          editor-id="createEditor"
+          height="200px"
+          placeholder="请发表你的观点..."
+        />
+      </div>
+      <div class="comment-button-wrapper">
+        <span>Ctrl or ⌘ + Enter</span>
+        <button
+          @click="create"
+          v-text="btnName"
+          class="button is-small is-success"
+        />
+      </div>
+    </div>
+    <div v-else class="comment-not-login">
+      <div class="comment-login-div">
+        请
+        <a @click="toLogin" style="font-weight: 700;">登录</a>后发表观点
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MarkdownEditor from '~/components/MarkdownEditor'
+import utils from '~/common/utils'
+export default {
+  components: {
+    MarkdownEditor
+  },
+  props: {
+    entityType: {
+      type: String,
+      default: '',
+      required: true
+    },
+    entityId: {
+      type: Number,
+      default: 0,
+      required: true
+    }
+  },
+  data() {
+    return {
+      content: '', // 内容
+      sending: false, // 发送中
+      quote: null // 引用的对象
+    }
+  },
+  computed: {
+    btnName() {
+      return this.sending ? '正在发表...' : '发表'
+    },
+    user() {
+      return this.$store.state.user.current
+    },
+    isLogin() {
+      return this.$store.state.user.current != null
+    }
+  },
+  methods: {
+    async create() {
+      if (!this.content) {
+        this.$toast.error('请输入评论内容')
+        return
+      }
+      if (this.sending) {
+        console.log('正在发送中，请不要重复提交...')
+        return
+      }
+      this.sending = true
+      try {
+        const data = await this.$axios.post('/api/comment/create', {
+          entityType: this.entityType,
+          entityId: this.entityId,
+          content: this.content,
+          quoteId: this.quote ? this.quote.commentId : ''
+        })
+        this.$emit('created', data)
+        this.content = ''
+        this.$refs.mdEditor.clear()
+        this.quote = null
+      } catch (e) {
+        console.error(e)
+        this.$toast.error('评论失败：' + (e.message || e))
+      } finally {
+        this.sending = false
+      }
+    },
+    reply(quote) {
+      this.quote = quote
+      this.$refs.commentEditor.scrollIntoView({
+        block: 'start',
+        behavior: 'smooth'
+      })
+    },
+    cancelReply() {
+      this.quote = null
+    },
+    toLogin() {
+      utils.toSignin()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/site/components/CommentList.vue b/site/components/CommentList.vue
new file mode 100644
index 000000000..7eef3b6e3
--- /dev/null
+++ b/site/components/CommentList.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="comments">
+    <load-more
+      ref="commentsLoadMore"
+      v-if="commentsPage"
+      v-slot="{ results }"
+      :init-data="commentsPage"
+      :params="{ entityType: entityType, entityId: entityId }"
+      url="/api/comment/list"
+    >
+      <ul>
+        <li
+          v-for="(comment, index) in results"
+          :key="comment.commentId"
+          class="comment"
+          itemprop="comment"
+          itemscope
+          itemtype="http://schema.org/Comment"
+        >
+          <adsbygoogle
+            v-if="showAd && (index + 1) % 3 === 0 && index !== 0"
+            ad-slot="4980294904"
+            ad-format="fluid"
+            ad-layout-key="-ht-19-1m-3j+mu"
+          />
+          <div class="comment-avatar">
+            <img v-lazy="comment.user.smallAvatar" class="avatar" />
+          </div>
+          <div class="comment-meta">
+            <span
+              class="comment-nickname"
+              itemprop="creator"
+              itemscope
+              itemtype="http://schema.org/Person"
+            >
+              <a :href="'/user/' + comment.user.id" itemprop="name">
+                {{ comment.user.nickname }}
+              </a>
+            </span>
+            <span class="comment-time">
+              <time
+                :datetime="
+                  comment.createTime | formatDate('yyyy-MM-ddTHH:mm:ss')
+                "
+                itemprop="datePublished"
+                >{{ comment.createTime | prettyDate }}</time
+              >
+            </span>
+            <span class="comment-reply">
+              <a @click="reply(comment)">回复</a>
+            </span>
+          </div>
+          <div class="comment-content content">
+            <blockquote v-if="comment.quote" class="comment-quote">
+              <div class="comment-quote-user">
+                <img
+                  v-lazy="comment.quote.user.smallAvatar"
+                  class="avatar size-20"
+                />
+                <a class="quote-nickname">{{ comment.quote.user.nickname }}</a>
+                <span class="quote-time">
+                  {{ comment.quote.createTime | prettyDate }}
+                </span>
+              </div>
+              <div
+                v-lazy-container="{ selector: 'img' }"
+                v-html="comment.quote.content"
+                itemprop="text"
+              />
+            </blockquote>
+            <p
+              v-lazy-container="{ selector: 'img' }"
+              v-html="comment.content"
+            />
+          </div>
+        </li>
+      </ul>
+    </load-more>
+  </div>
+</template>
+
+<script>
+import LoadMore from '~/components/LoadMore'
+import utils from '~/common/utils'
+
+export default {
+  components: {
+    LoadMore
+  },
+  props: {
+    entityType: {
+      type: String,
+      default: '',
+      required: true
+    },
+    entityId: {
+      type: Number,
+      default: 0,
+      required: true
+    },
+    commentsPage: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    showAd: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user.current
+    },
+    isLogin() {
+      return this.$store.state.user.current != null
+    }
+  },
+  methods: {
+    append(data) {
+      if (!data) return
+
+      this.$refs.commentsLoadMore.unshiftResults(data)
+    },
+    reply(quote) {
+      if (!this.isLogin) {
+        utils.toSignin()
+      }
+      this.$emit('reply', quote)
+    },
+    cancelReply() {
+      this.quote = null
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/site/components/CommentTextInput.vue b/site/components/CommentTextInput.vue
new file mode 100644
index 000000000..980713e11
--- /dev/null
+++ b/site/components/CommentTextInput.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="comment-form">
+    <div v-if="isLogin" class="comment-create">
+      <div ref="commentEditor" class="comment-input-wrapper">
+        <div v-if="quote" class="comment-quote-info">
+          回复：
+          <label v-text="quote.user.nickname" />
+          <i @click="cancelReply" class="iconfont icon-close" alt="取消回复" />
+        </div>
+        <textarea
+          v-model="content"
+          @keydown.ctrl.enter="create"
+          @keydown.meta.enter="create"
+          placeholder="请发表你的观点..."
+          class="text-input"
+        />
+      </div>
+      <div class="comment-button-wrapper">
+        <span>Ctrl or ⌘ + Enter</span>
+        <button
+          @click="create"
+          v-text="btnName"
+          class="button is-small is-success"
+        />
+      </div>
+    </div>
+    <div v-else class="comment-not-login">
+      <div class="comment-login-div">
+        请
+        <a @click="toLogin" style="font-weight: 700;">登录</a>后发表观点
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import utils from '~/common/utils'
+export default {
+  components: {},
+  props: {
+    entityType: {
+      type: String,
+      default: '',
+      required: true
+    },
+    entityId: {
+      type: Number,
+      default: 0,
+      required: true
+    }
+  },
+  data() {
+    return {
+      content: '', // 内容
+      sending: false, // 发送中
+      quote: null // 引用的对象
+    }
+  },
+  computed: {
+    btnName() {
+      return this.sending ? '正在发表...' : '发表'
+    },
+    user() {
+      return this.$store.state.user.current
+    },
+    isLogin() {
+      return this.$store.state.user.current != null
+    }
+  },
+  methods: {
+    async create() {
+      if (!this.content) {
+        this.$toast.error('请输入评论内容')
+        return
+      }
+      if (this.sending) {
+        console.log('正在发送中，请不要重复提交...')
+        return
+      }
+      this.sending = true
+      try {
+        const data = await this.$axios.post('/api/comment/create', {
+          contentType: 'text',
+          entityType: this.entityType,
+          entityId: this.entityId,
+          content: this.content,
+          quoteId: this.quote ? this.quote.commentId : ''
+        })
+        this.$emit('created', data)
+        this.content = ''
+        this.quote = null
+      } catch (e) {
+        console.error(e)
+        this.$toast.error('评论失败：' + (e.message || e))
+      } finally {
+        this.sending = false
+      }
+    },
+    reply(quote) {
+      this.quote = quote
+      this.$refs.commentEditor.scrollIntoView({
+        block: 'start',
+        behavior: 'smooth'
+      })
+    },
+    cancelReply() {
+      this.quote = null
+    },
+    toLogin() {
+      utils.toSignin()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/site/pages/tweet/_id.vue b/site/pages/tweet/_id.vue
index cad294c7c..36e53c698 100644
--- a/site/pages/tweet/_id.vue
+++ b/site/pages/tweet/_id.vue
@@ -76,9 +76,22 @@
         </div>
 
         <!-- 评论 -->
+        <!--
+      <comment-input
+          :entity-id="tweet.tweetId"
+          @created="commentCreated"
+          entity-type="tweet"
+        />
+        <comment-list
+          :entity-id="tweet.tweetId"
+          :comments-page="commentsPage"
+          entity-type="tweet"
+        />
+      -->
         <comment
           :entity-id="tweet.tweetId"
           :comments-page="commentsPage"
+          mode="text"
           entity-type="tweet"
         />
       </div>

From b5685743bf228ecdb6645d2dbd1ccc725c33f7c9 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Wed, 22 Apr 2020 14:11:28 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/assets/styles/comment.scss |  4 +++-
 site/components/TweetsList.vue  | 15 ++++++---------
 site/pages/tweet/_id.vue        | 18 ++----------------
 3 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/site/assets/styles/comment.scss b/site/assets/styles/comment.scss
index 5b2a4dd3a..aa8575d1a 100644
--- a/site/assets/styles/comment.scss
+++ b/site/assets/styles/comment.scss
@@ -12,8 +12,10 @@
     box-sizing: border-box;
 
     .comment-quote-info {
-      font-size: 12px;
+      font-size: 13px;
       color: #000;
+      margin-bottom: 3px;
+      font-weight: 600;
 
       i {
         font-size: 12px !important;
diff --git a/site/components/TweetsList.vue b/site/components/TweetsList.vue
index 505a209a7..89a263a43 100644
--- a/site/components/TweetsList.vue
+++ b/site/components/TweetsList.vue
@@ -52,25 +52,22 @@
         </ul>
         <div class="pin-action-row">
           <div class="action-box">
-            <div class="like-action action">
-              <div @click="like(tweet)" class="action-title-box">
+            <div @click="like(tweet)" class="like-action action">
+              <div class="action-title-box">
                 <i class="iconfont icon-like" />
                 <span class="action-title">{{
                   tweet.likeCount > 0 ? tweet.likeCount : '赞'
                 }}</span>
               </div>
             </div>
-            <div class="comment-action action">
-              <a
-                :href="'/tweet/' + tweet.tweetId + '#comments'"
-                class="action-title-box"
-              >
+            <a :href="'/tweet/' + tweet.tweetId" class="comment-action action">
+              <div class="action-title-box">
                 <i class="iconfont icon-comment" />
                 <span class="action-title">{{
                   tweet.commentCount > 0 ? tweet.commentCount : '评论'
                 }}</span>
-              </a>
-            </div>
+              </div>
+            </a>
           </div>
         </div>
       </div>
diff --git a/site/pages/tweet/_id.vue b/site/pages/tweet/_id.vue
index 36e53c698..0a66e6eb7 100644
--- a/site/pages/tweet/_id.vue
+++ b/site/pages/tweet/_id.vue
@@ -55,8 +55,8 @@
           </ul>
           <div class="pin-action-row">
             <div class="action-box">
-              <div class="like-action action">
-                <div @click="like(tweet)" class="action-title-box">
+              <div @click="like(tweet)" class="like-action action">
+                <div class="action-title-box">
                   <i class="iconfont icon-like" />
                   <span class="action-title">{{
                     tweet.likeCount > 0 ? tweet.likeCount : '赞'
@@ -74,20 +74,6 @@
             </div>
           </div>
         </div>
-
-        <!-- 评论 -->
-        <!--
-      <comment-input
-          :entity-id="tweet.tweetId"
-          @created="commentCreated"
-          entity-type="tweet"
-        />
-        <comment-list
-          :entity-id="tweet.tweetId"
-          :comments-page="commentsPage"
-          entity-type="tweet"
-        />
-      -->
         <comment
           :entity-id="tweet.tweetId"
           :comments-page="commentsPage"