fair-web/views/article.ejs

<% this.title = article.title + ' - 帖子'; %>
<% include header %>
<style type="text/css" xmlns:style="http://www.w3.org/1999/xhtml">
.small{
  font-size: 0.7em;
}
.reply{
    margin-left: 45px !important;
}
.article-comment{
    cursor: pointer;
    display: inline-block;
    margin: 0 .75em 0 0;
    color: rgba(0,0,0,.4);
}
.article-comment:hover{
    color: rgba(0,0,0,.8);
}
.border{
    padding-bottom: 10px !important;
    border-bottom: 1px solid #DEDEDF !important;
}
.border:last-child{
    border-bottom: none !important;
}
</style>

<div class="padding" id="comment-zone">
  <div class="ui breadcrumb">
    <div class="section">讨论</div>
    <i class="right angle icon divider"></i>
    <% if (problem) { %>
      <div class="section"><a href="<%= syzoj.utils.makeUrl(['discussion', 'problems']) %>">题目</a></div>
      <i class="right angle icon divider"></i>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'problem', problem.id]) %>" class="active section"><%= problem.title %></a>
    <% } else { %>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'global']) %>" class="section">全局板块</a>
    <% } %>
  </div>
  <span id="user-info" style="display: none"><%= user %></span>
  <h1><%= article.title %></h1>
 	<p style="margin-bottom: -5px; ">
	<img style="vertical-align: middle; margin-bottom: 2px; margin-right: 2px; " src="<%= syzoj.utils.gravatar(article.user.email, 34) %>" width="17" height="17">
	<b style="margin-right: 30px; "><a class="black-link" href="<%= syzoj.utils.makeUrl(['user', article.user_id]) %>"><%= article.user.username %></a><% if (article.user.nameplate) { %><%- article.user.nameplate %><% } %></b>
	<b style="margin-right: 30px; "><i class="calendar icon"></i> <%= syzoj.utils.formatDate(article.public_time) %></b>
    <% if(user) {%>
        <span class="article-comment" onclick="reply('comment')">回复</span>
    <%}%>
	<% if (article.public_time !== article.update_time) { %><b style="margin-right: 30px; "><i class="edit icon"></i> <%= syzoj.utils.formatDate(article.update_time) %></b><% } %>
        <% if (article.allowedEdit) { %>
        <a style="margin-top: -4px; " class="ui mini right floated labeled icon button" href="<%= syzoj.utils.makeUrl(['article', article.id, 'edit']) %>"><i class="ui edit icon"></i>编辑</a>
        <a style="margin-top: -4px; margin-right: 3px; " class="ui mini red right floated labeled icon button" onclick="$('#modal-delete').modal('show')"><i class="ui trash icon"></i>删除</a>
        <div class="ui basic modal right floated" id="modal-delete">
          <div class="ui icon header">
            <i class="trash icon"></i>
            <p style="margin-top: 15px; ">删除文章</p>
          </div>
          <div class="content" style="text-align: center; ">
            <p>确认删除这篇文章吗？</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              否
            </div>
            <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'delete']) %>">
              <i class="checkmark icon"></i>
              是
            </a>
          </div>
        </div>
        <% } %>
 	</p>
  <div class="ui existing segment">
	  <div id="content" class="font-content"><%- article.content %></div>
  </div>
  <% if (comments.length) { %>
  <div class="ui comments" style="max-width: none;">
    <h3 class="ui dividing header">共 <%= commentsCount %> 条回复</h3>
      <comment-box v-for="(item, index) in comments" :key="index" :data="item" :index="index" :user="user"></comment-box>
  </div>
  <% } %>
    <% if (article.allowedComment) { %>
    <% include monaco-editor %>
    <form id="comment-box" class="ui reply form" method="post" action="" style="visibility:hidden">
      <div id="comment" class="editor editor-with-border" style="height: 200px; width: 100%; margin-bottom: 1em; ">
        <%- this.showLoadingEditor(); %>
      </div>
      <input type="hidden" name="comment">
      <div style="text-align: center; ">
      <button id="submit_button" type="submit" class="ui disabled labeled submit icon button">
        <i class="icon edit"></i> <span id="reply-text">回复</span>
      </button>
      </div>
    </form>
    <div class="ui basic modal" id="modal-comment-delete">
        <div class="ui icon header">
            <i class="trash icon"></i>
            <p style="margin-top: 15px; ">删除评论</p>
        </div>
        <div class="content" style="text-align: center; ">
            <p>确认删除这条评论吗？评论下所有回复也会被删除</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button">
                <i class="remove icon"></i>
                否
            </div>
            <a class="ui green ok inverted button" href-post="" id="modal-comment-delete-href">
                <i class="checkmark icon"></i>
                是
            </a>
        </div>
    </div>

    <script>
      var editors = {
        comment: { defaultValue: '' }
      };

      window.onEditorLoaded(function () {
        for (var name in editors) {
          var editor = editors[name];
          var editorElement = document.getElementById(name);
          var input = document.getElementsByName(name)[0];
          editor.editor = window.createMarkdownEditor(editorElement, editor.defaultValue, input);
        }

        $('#submit_button').removeClass('disabled');
      });
    </script>
  <% } %>
</div>
<script type="text/x-template" id="test-comment">
    <div class="comment" :class="{ reply: data.firstComment, border:!data.parent_id }">
        <a class="avatar">
            <img :src="data.avatarUrl">
        </a>
        <div class="content">
            <a class="author" :href="userUrl(data.user.id)" >{{data.user.username}}</a>
            回复给
            <a class="author" :href="userUrl(data.toUser.id)" >{{data.toUser.username}}</a>
            <div v-if="data.user.nameplate">{{data.user.nameplate}}</div>
            <div class="metadata">
                <span class="date">{{data.date}}</span>
            </div>
            <div class="text font-content" style="min-height: 19.5px; ">{{data.content}}</div>
            <div class="actions">
                <template v-if="data.allowedEdit">
                    <a @click="deleteComment(data.id)">删除</a>
                </template>
                <template v-if="user">
                    <a @click="reply('reply', data.id)">回复</a>
                </template>
            </div>
        </div>
        <node v-for="(item, index) in data.children" :key="index" :data="item" :index="index" :user="user"></node>
    </div>
</script>

<script>
  var comments = <%- serializejs(comments) %>
  var user = <%- serializejs(user) %>
  var testComponent = Vue.component("comment-box", {
    template: "#test-comment",
    name: "Node",
    props: {
      data: {
        type: Object,
        default() {
          return {};
        }
      },
      index:{
        type:Number,
        default(){
          return 0
        }
      },
      user: {
        type:Object,
      }
    },
    computed:{
      userUrl() {
        return function(id){
          return `user/${id}`
        }
      }
    }
  })
  new Vue({
    el: '#comment-zone',
    data:{
      comments:comments,
      user
    }
  })
</script>
<% include footer %>
<script>
    function reply(type, replyId){
      const id = document.getElementById('user-info').innerHTML;
      if (id) {
        const editorDom = document.getElementById('comment-box');
        const editorBtn = document.getElementById('reply-text');
        const articleId = <%= article.id %>;
        let actionUrl = null;
        let btnText = null;
        if (type === 'comment') {
          actionUrl = `/article/${articleId}/comment`;
          btnText='回复帖子';
        } else if (type === 'reply' && replyId) {
          actionUrl = `/article/${articleId}/comment/${replyId}`;
          btnText='回复评论';
        }
        editorDom.setAttribute('action', actionUrl);
        editorBtn.innerText=btnText;
        editorDom.style.visibility='initial';
      }
      document.body.scrollTo({
        top: document.body.scrollHeight,
        behavior: "smooth"
      });
    }
    function deleteComment(id){
      const articleId = <%= article.id %>;
      $('#modal-comment-delete').modal('show')
      $('#modal-comment-delete-href').attr('href-post',`/article/${articleId}/comment/${id}/delete`)
    }
</script>