fix: 点回复显示「回复 @某人」，可取消回复

comments.php

@@ -27,7 +27,7 @@ if (post_password_required()) return;
                     </div>
                     <div class="comment-item__text"><?php echo esc_html($c->comment_content); ?></div>
                     <div class="comment-item__reply">
-                        <span class="reply-link" data-comment-id="<?php echo $c->comment_ID; ?>" tabindex="0">回复</span>
+                        <span class="reply-link" data-comment-id="<?php echo $c->comment_ID; ?>" data-comment-author="<?php echo esc_attr($c->comment_author); ?>" tabindex="0">回复</span>
                     </div>
                 </li>
             <?php endforeach; ?>
@@ -36,6 +36,10 @@ if (post_password_required()) return;
 
     <?php if (is_user_logged_in()) : ?>
         <div id="respond" class="comment-respond">
+            <div id="reply-hint" class="reply-hint" style="display:none">
+                <span id="reply-hint-text"></span>
+                <a href="javascript:void(0)" class="cancel-reply-link" onclick="cancelReply()">取消回复</a>
+            </div>
             <form id="commentform" class="comment-form" method="post" action="<?php echo site_url('/wp-comments-post.php'); ?>">
                 <textarea id="comment" name="comment" rows="3" placeholder="写点什么..." required></textarea>
                 <input type="hidden" name="comment_post_ID" value="<?php echo get_the_ID(); ?>">
@@ -48,6 +52,10 @@ if (post_password_required()) return;
         </div>
     <?php else : ?>
         <div id="respond" class="comment-respond">
+            <div id="reply-hint-guest" class="reply-hint" style="display:none">
+                <span id="reply-hint-text-guest"></span>
+                <a href="javascript:void(0)" class="cancel-reply-link" onclick="cancelReply()">取消回复</a>
+            </div>
             <form id="commentform-guest" class="comment-form" novalidate>
                 <textarea id="comment" name="comment" rows="3" placeholder="登录后写点什么..." required></textarea>
                 <input type="hidden" id="comment_parent" name="comment_parent" value="0">
@@ -83,12 +91,24 @@ if (post_password_required()) return;
     document.querySelectorAll('.reply-link').forEach(function(el) {
         el.addEventListener('click', function() {
             var cid = this.getAttribute('data-comment-id');
+            var author = this.getAttribute('data-comment-author');
             document.getElementById('comment_parent').value = cid;
+            var hint = document.getElementById('reply-hint');
+            var hintText = document.getElementById('reply-hint-text');
+            if (hint && hintText) {
+                hintText.textContent = '回复 @' + author;
+                hint.style.display = 'flex';
+            }
             var textarea = document.getElementById('comment');
             if (textarea) textarea.focus();
         });
         el.style.cursor = 'pointer';
     });
+    function cancelReply() {
+        document.getElementById('comment_parent').value = '0';
+        var hint = document.getElementById('reply-hint');
+        if (hint) hint.style.display = 'none';
+    }
     </script>
 
 </div>

style.css

@@ -1,6 +1,6 @@
 /*
 Theme Name: 空笺未寄
-Version: 0.16.7
+Version: 0.16.8
 Requires at least: 6.0
 Requires PHP: 7.4
 License: MIT
@@ -147,6 +147,9 @@ Text Domain: kj-weji
         
         .comment-form { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
         .comment-form textarea { width:100%; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--white); font-family:inherit; font-size:14px; color:var(--ink); resize:vertical; min-height:80px; }
+.reply-hint { display:none; align-items:center; gap:8px; padding:6px 0; font-size:13px; color:var(--cinnabar); margin-bottom:4px; }
+.reply-hint .cancel-reply-link { font-size:12px; color:var(--ink-lighter); text-decoration:none; }
+.reply-hint .cancel-reply-link:hover { color:var(--cinnabar); }
 .comment-respond h3, #reply-title { font-size:14px !important; font-weight:600; margin-bottom:12px; }
         .comment-form button { align-self:flex-end; background:var(--cinnabar); color:#fff; border:none; padding:8px 24px; border-radius:20px; cursor:pointer; font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-size:13px; transition:background 0.2s; }
         .comment-form button:hover { background:#a03a32; }