!18 dev

Merge pull request !18 from 大猫猫/refactor-comments
mlogclub · Apr 22, 2020 · f2c248a · f2c248a
2 parents 153f6dd + b568574
commit f2c248a
Show file tree

Hide file tree

Showing 11 changed files with 627 additions and 397 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,191 @@
+.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: 13px;
+      color: #000;
+      margin-bottom: 3px;
+      font-weight: 600;
+
+      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
@@ -2,5 +2,6 @@
 @import "./article";
 @import "./topic";
 @import "./tweets";
+@import "./comment";
 @import "./link";
 @import "./ad";