添加设置评论回复对象的功能

README.md

@@ -20,7 +20,7 @@
 * 由 [@794TD](https://github.com/794TD) 提供：https://wl.shadiaoforever.xyz/
 * 由 [@gaohan085](https://github.com/gaohan085) 提供：https://gaohan086.xyz/wechat/
 
-本工具是开源的，如果有人愿意自己部署镜像站并分享给大家使用，那就太棒了！你可以通过 Issue 提交镜像站地址，**二次部署时请不要删除原作者相关信息**。
+本工具是开源的，但是由于这个工具是我初学前端时写的，源代码非常混乱，所以即使开源了也没有多少学习的价值（暂时也没有重写的打算）。不过，你仍然可以下载源代码到自己的服务器上来部署一个镜像站，然后通过 Issue 提交镜像站地址～**二次部署时请不要删除原作者相关信息**，别忘了从这里获取最新的更新。
 
 目前使用的获取公众号文章的封面图和标题的 API 是我自己部署在 Cloudflare Worker 上的，由于跨域的原因，只有当域名被记录在一个白名单时才可以从页面上调用这个接口。在提交镜像站地址后，我会把相关域名添加到白名单中，或者你也可以自行部署 `get_article_info.php` 并修改网页上的相关前端代码来调用。
 
@@ -58,12 +58,14 @@
 
 ### 更新记录
 
-姿势水平太低，当时的代码写得太乱了，或许应该重写一下，或者……🕊️了！
-
 <details>
 
 <summary>点击展开</summary>
 
+#### 2021.9.11
+
+还是在那位打赏者的建议下，现在可以在评论开头加上“回复○○：”的字样了。
+
 #### 2021.9.3
 
 在一位打赏者的建议下，增加了将点赞的第一个头像固定为自己的选项。发完集赞朋友圈之后立即给自己点一个赞的人应该不少吧？(っ'ω')っ

index.src.html

@@ -202,7 +202,7 @@
         <div class="mdui-row">
             <div class="mdui-col-xs-12">
                 <label class="mdui-checkbox">
-                    <input id="configShowComment" type="checkbox" name="configShowComment" onclick="document.getElementById('configCommentPreview').classList.toggle('mdui-hidden');" />
+                    <input id="configShowComment" type="checkbox" name="configShowComment" onclick="document.getElementById('configCommentPreview').classList[this.checked ? 'remove' : 'add']('mdui-hidden');" />
                     <i class="mdui-checkbox-icon"></i>
                     显示评论区
                 </label>
@@ -393,11 +393,17 @@
                         <label class="mdui-textfield-label">&nbsp;</label>
                         <input id="configCommentTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
                     </div>
+                    <div class="mdui-col-xs-12">
+                        <div class="mdui-textfield">
+                            <label class="mdui-textfield-label">回复给……（可选）</label>
+                            <textarea id="configCommentReply" class="mdui-textfield-input"></textarea>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="mdui-dialog-actions">
                 <button class="mdui-btn mdui-ripple" mdui-dialog-close>CANCEL</button>
-                <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="if (typeof (document.getElementById('configCommentAvatar').files[0]) == 'undefined') { mdui.alert('还没有设定头像啦⊂彡☆))∀`)'); } else { var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]), document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate); }">OK</button>
+                <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="if (typeof (document.getElementById('configCommentAvatar').files[0]) == 'undefined') { mdui.alert('还没有设定头像啦⊂彡☆))∀`)'); } else { var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]), document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate, document.getElementById('configCommentReply').value); }">OK</button>
             </div>
         </div>
 

main.js

@@ -171,16 +171,17 @@ function copyGitLink() {
 var commentList = [];
 
 //添加评论
-function addComment(avatar, name, content, date) {
+function addComment(avatar, name, content, date, reply) {
     commentList.push({
-        'avatar': avatar,
+        avatar,
-        'name': name,
+        name,
-        'content': content,
+        content,
-        'date': date
+        date,
+        reply,
     });
 
     var tr = document.createElement('tr');
-    tr.innerHTML = '<th>' + commentList.length + '</th><th>' + name + '</th><th>' + content + '</th><th>' + date.toLocaleString() + '</th>';
+    tr.innerHTML = '<th>' + commentList.length + '</th><th>' + name + (reply ? ('（回复' + reply + '）') : '') + '</th><th>' + content + '</th><th>' + date.toLocaleString() + '</th>';
     document.getElementById('configCommentList').append(tr);
 }
 
@@ -435,13 +436,14 @@ document.getElementById('generate').addEventListener('click', function () {
     if (document.getElementById('configShowComment').checked && commentList.length) {
         document.getElementById('comment').style.display = 'block';
         for (var i = 0; i < commentList.length; i++) {
+            var comment = commentList[i];
             document.getElementById('commentList').innerHTML += ''
                 + '<div class="commentItem">'
-                +     '<div class="commentAvatar squareImage" style="background-image: url(' + commentList[i].avatar + ');"></div>'
+                +     '<div class="commentAvatar squareImage" style="background-image: url(' + comment.avatar + ');"></div>'
                 +     '<div class="content">'
-                +         '<span class="commentName">' + commentList[i].name + '</span>'
+                +         '<span class="commentName">' + comment.name + '</span>'
-                +         '<span class="commentTime">' + getTimeString(configScreenshotDate, commentList[i].date) + '</span>'
+                +         '<span class="commentTime">' + getTimeString(configScreenshotDate, comment.date) + '</span>'
-                +         '<div class="commentText">' + emoticonReplace(commentList[i].content) + '</div>'
+                +         '<div class="commentText">' + (comment.reply ? ('回复<span style="color:#576b95">' + comment.reply + '</span>: ') : '') + emoticonReplace(comment.content) + '</div>'
                 +     '</div>'
                 + '</div>';
         }