fix(comment): 修复移动端评论回复功能

- 修改_replyUseName函数优先选择可见容器避免隐藏节点问题
- 添加_clearReplyUseName函数统一清理回复指示状态
- 实现cancelReply函数支持取消回复操作
- 更新reply函数增加安全的用户名转义处理
- 优化SCSS样式实现回复指示器的显示和截断效果
- 添加文档说明移动端多回复节点的处理规则

Author: csfwff

AGENTS.md

@@ -40,6 +40,7 @@
 
 ## 关键链路（持续维护）
 - 前端全局主题变量入口：`src/main/resources/scss/_variables.scss`；`$theme-primary` 会影响 `module`/首页卡片/聊天室等主区背景，深色会导致整站大面积染色；顶栏建议在 `base.scss`/`mobile-base.scss` 的 `.nav` 单独设色。
+- 移动端文章页（`skins/mobile/article.ftl`）存在多个 `#replyUseName`（含隐藏占位 `.fn-none`）；`m-article.js` 处理回复目标时需优先选中非 `.fn-none` 节点，避免“回复对象已记录但指示未显示”。
 - 首页右栏专栏列表（classic）需使用 `module-list long-column-module-list`（见 `skins/classic/index.ftl` 的“最新专栏/热门专栏/最近阅读”）；否则会命中 `.module-list .title` 默认 `margin-left: 30px` 产生左侧空白。
 - 勋章管理页：`/admin/medal`
   - 后端：`src/main/java/org/b3log/symphony/processor/MedalProcessor.java`（`showAdminMedal`、`register`）

src/main/resources/css/mobile-base.css

@@ -317,12 +317,14 @@ var Comment = {
       },
     })
 
-    $('#replyUseName').
+    Comment._getReplyUseName().
+      addClass('reply-use-name--active').
       html('<a href="javascript:void(0)" onclick="Comment._bgFade($(\'#' +
         id +
         '\'))" class="ft-a-title"><svg><use xlink:href="#edit"></use></svg> ' +
         Label.commonUpdateCommentPermissionLabel + '</a>').
-      data('commentId', id)
+      data('commentId', id).
+      removeData('commentOriginalCommentId')
   },
   /**
    * 背景渐变
@@ -379,6 +381,34 @@ var Comment = {
       }
     })
   },
+  /**
+   * 获取当前可用的“回复指示”容器
+   * 移动端模板中存在隐藏占位节点，优先选择可见容器
+   * @returns {jQuery}
+   */
+  _getReplyUseName: function () {
+    var $replyUseName = $('#replyUseName').not('.fn-none').first()
+    if ($replyUseName.length === 0) {
+      $replyUseName = $('#replyUseName').first()
+    }
+    return $replyUseName
+  },
+  /**
+   * 清理回复/编辑目标指示
+   */
+  _clearReplyUseName: function () {
+    Comment._getReplyUseName().
+      removeClass('reply-use-name--active').
+      html('').
+      removeData('commentOriginalCommentId').
+      removeData('commentId')
+  },
+  /**
+   * 取消回复（恢复普通评论）
+   */
+  cancelReply: function () {
+    Comment._clearReplyUseName()
+  },
   /**
    * 评论初始化
    * @returns {Boolean}
@@ -639,6 +669,7 @@ var Comment = {
    * @param {String} csrfToken CSRF 令牌
    */
   add: function (id, csrfToken) {
+    var $replyUseName = Comment._getReplyUseName()
 
     var requestJSONObject = {
       articleId: id,
@@ -648,14 +679,14 @@ var Comment = {
       userCommentViewMode: Label.userCommentViewMode,
     }
 
-    if ($('#replyUseName').data('commentOriginalCommentId')) {
-      requestJSONObject.commentOriginalCommentId = $('#replyUseName').
+    if ($replyUseName.data('commentOriginalCommentId')) {
+      requestJSONObject.commentOriginalCommentId = $replyUseName.
         data('commentOriginalCommentId')
     }
 
     var url = Label.servePath + '/comment',
       type = 'POST',
-      commentId = $('#replyUseName').data('commentId')
+      commentId = $replyUseName.data('commentId')
     if (commentId) {
       url = Label.servePath + '/comment/' + commentId
       type = 'PUT'
@@ -684,7 +715,7 @@ var Comment = {
           Comment.editor.setValue('')
 
           // clear reply comment
-          $('#replyUseName').text('').removeData()
+          Comment._clearReplyUseName()
 
           // clear local storage
           if (window.localStorage) {
@@ -724,7 +755,19 @@ var Comment = {
    * @param {String} userName 用户名称
    */
   reply: function (userName, id) {
-    $('#replyUseName').data('commentOriginalCommentId', id)
+    var safeUserName = String(userName).
+      replace(/&/g, '&amp;').
+      replace(/</g, '&lt;').
+      replace(/>/g, '&gt;'),
+      $replyUseName = Comment._getReplyUseName()
+
+    $replyUseName.
+      addClass('reply-use-name--active').
+      html('<a rel="nofollow" href="javascript:void(0)" class="ft-a-title reply-use-name__target fn-pointer" onclick="Comment.cancelReply()"><svg><use xlink:href="#reply-to"></use></svg> ' +
+        safeUserName +
+        '</a><span class="reply-use-name__cancel fn-pointer ft-fade" onclick="Comment.cancelReply()">×</span>').
+      data('commentOriginalCommentId', id).
+      removeData('commentId')
     Comment.editor.focus()
   },
 }

src/main/resources/js/m-article.js

@@ -1302,6 +1302,38 @@ label.cmt-anonymous {
   line-height: 18px;
   height: 18px;
   margin: 5px 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &.reply-use-name--active {
+    visibility: visible;
+  }
+
+  .reply-use-name__target {
+    display: inline-flex;
+    align-items: center;
+    max-width: calc(100% - 26px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    svg {
+      margin-right: 2px;
+    }
+  }
+
+  .reply-use-name__cancel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 6px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    line-height: 14px;
+  }
 }
 
 #articleToC {