diff --git a/AGENTS.md b/AGENTS.md
index e7af6bde..ea3e2df9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -103,6 +103,8 @@
 - 首页两列对齐约束：`getIndexRecentArticles` 的第一页会插入全部置顶且不截断；第二页起需按第一页“置顶占位数”补偿 `fetchSize` 与分页偏移，并基于已排除置顶 ID 的普通文章序列取数，保证两列等高、不重复、不丢中间文章。
 - 首页右侧排行补偿（无前端延迟）：由 `IndexProcessor#loadIndexData` 按两列最新文章的最大行数计算 `rankCompensateRows`，先换算“右栏总补偿行数”再分摊到 `checkinVisibleCount/onlineVisibleCount`，Freemarker 直接按该数量渲染，不再依赖 JS 运行时增删行。
 - 专栏封面链路：封面字段是 `long_article_column.columnCoverURL`；默认封面在 `LongArticleColumnQueryService` 填充；作者管理页为 `/column/manage`，编辑长篇页的弹窗脚本是 `long-article-cover-dialog.js`，新建长篇封面随 `/article` 请求的 `columnCoverURL` 写入；封面保存接口为 `POST /api/columns/{columnId}/cover`，处理器是 `LongArticleColumnProcessor`。
+- 长文阅读页以 `articleType=6` 区分，PC/移动模板均为 `skins/classic/*/article.ftl`，样式在 `index.scss`/`mobile-base.scss`，交互在 `long-article.js`/`m-long-article.js`；模板通过 `hidePageChrome` 不渲染顶部与底部视觉内容，但 footer 的公共脚本仍需加载；桌面宽度和两端字号统一保存在 `localStorage.longArticleSettings`，宽度仅在 PC 生效；PC 评论按钮控制居中的“正文 + 评论”阅读舞台，移动端使用右侧抽屉，现有评论列表、筛选、分页和编辑器均复用。
+- 长文段评链路：`LongArticleParagraphService` 根据服务端清洗后的正文生成段落锚点并给 HTML 添加 `data-long-paragraph-*`；段评字段存于 `comment`（`commentType=1`），新增接口位于 `CommentProcessor` 的 `/comment/paragraph*`；评论编辑事务调用段落迁移，无法匹配的段评标记为失效但保留快照。PC/移动均加载 `long-article-paragraph.js`，段评列表复用现有评论线程与编辑器能力。
 - 管理员文章页编辑长文专栏时，`admin/article.ftl` 会随文章表单提交 `columnCoverURL`，后端在 `ArticleMgmtService` 的文章事务内复用 `ColumnCoverMgmtService` 校验并更新或清空专栏封面。
 - 路由总入口：`Router#requestMapping` + 各 Processor `register()`；新增路由先决定使用 `loginCheck` / `apiCheck` / `permission` / `anonymousViewCheck` 哪条链路。
 - Latke 路由存在静态段被相邻动态段截获的风险（如 `/article/{id}/revisions/list` 可能进入 `/article/{id}/revisions/{revisionId}`）；新增相邻路由时需避免路径歧义，或在处理方法中显式识别保留字。
diff --git a/API.md b/API.md
index 9f480fdb..49fe7fb4 100644
--- a/API.md
+++ b/API.md
@@ -2318,6 +2318,107 @@ curl --location --request POST 'https://fishpi.cn/comment/thread/replies' \
 | commentContent           | 评论原文（Markdown格式）                                          | hello world                      |
 | commentOriginalCommentId | （选填）如果是回复某个评论，传递此参数并填写值为要回复的评论的oId | 1646216549324                    |
 
+### 长篇段评
+
+`POST /comment/paragraph`
+
+为长篇正文指定段落发表评论或回复。旧的 `POST /comment` 继续创建章评。
+
+请求：
+
+| Key | 说明 | 示例 |
+| --- | --- | --- |
+| apiKey | 通用密钥，可选 | oXTQTD4ljryXoIxa1lySgEl6aObrIhSS |
+| articleId | 长篇文章 Id | 1645002736006 |
+| paragraphId | 服务端生成的段落 Id | `64 位小写 SHA-256` |
+| commentContent | 评论原文（Markdown 格式） | 这一段写得很好 |
+| commentAnonymous | 是否匿名评论 | false |
+| commentVisible | 是否仅楼主可见 | false |
+| commentOriginalCommentId | 回复时填写段评 Id，可选 | 1646216549324 |
+
+请求示例：
+
+```bash
+curl -X POST "https://fishpi.cn/comment/paragraph" \
+  -H "Content-Type: application/json" \
+  -d '{"apiKey":"你的 apiKey","articleId":"1645002736006","paragraphId":"64 位小写 SHA-256","commentContent":"这一段写得很好","commentAnonymous":false,"commentVisible":false}'
+```
+
+响应：
+
+| Key | 说明 | 示例 |
+| --- | --- | --- |
+| code | `0` 表示成功 | 0 |
+| commentId | 新评论 Id | 1646216549324 |
+
+> 仅支持 `articleType=6`。段落类型、顺序和文本快照由服务端校验并保存，客户端不能伪造。新增根评论必须关联当前有效段落；回复必须属于同一文章和同一段评线程，原段落已修改的线程仍可继续回复。
+
+### 获取长篇段评摘要
+
+`POST /comment/paragraph/summary`
+
+获取长篇当前有效段落的评论数量，数量包含根评论和回复。
+
+请求：
+
+| Key | 说明 | 示例 |
+| --- | --- | --- |
+| apiKey | 访问受限文章时填写 | oXTQTD4ljryXoIxa1lySgEl6aObrIhSS |
+| articleId | 长篇文章 Id | 1645002736006 |
+
+请求示例：
+
+```bash
+curl -X POST "https://fishpi.cn/comment/paragraph/summary" \
+  -H "Content-Type: application/json" \
+  -d '{"articleId":"1645002736006"}'
+```
+
+响应：
+
+| Key | 说明 | 示例 |
+| --- | --- | --- |
+| code | `0` 表示成功 | 0 |
+| paragraphComments | 段落评论数量 | `[...]` |
+| - paragraphId | 段落 Id | `64 位小写 SHA-256` |
+| - commentCount | 段评总数 | 3 |
+
+### 获取长篇段评线程
+
+`POST /comment/paragraph/thread/parents`
+
+获取指定段落的评论线程根评论。
+
+请求：
+
+| Key | 说明 | 示例 |
+| --- | --- | --- |
+| apiKey | 访问受限文章时填写 | oXTQTD4ljryXoIxa1lySgEl6aObrIhSS |
+| articleId | 长篇文章 Id | 1645002736006 |
+| paragraphId | 段落 Id | `64 位小写 SHA-256` |
+| paginationCurrentPageNum | 页码，默认 1 | 1 |
+| sort | `hot` 表示热门排序 | hot |
+
+请求示例：
+
+```bash
+curl -X POST "https://fishpi.cn/comment/paragraph/thread/parents" \
+  -H "Content-Type: application/json" \
+  -d '{"articleId":"1645002736006","paragraphId":"64 位小写 SHA-256","paginationCurrentPageNum":1,"sort":"hot"}'
+```
+
+响应：
+
+| Key | 说明 | 示例 |
+| --- | --- | --- |
+| code | `0` 表示成功 | 0 |
+| commentThreadParents | 段评线程根评论，字段与线程接口一致 | `[...]` |
+| paragraphId | 当前段落 Id | `64 位小写 SHA-256` |
+| paragraphSnapshot | 当前段落摘要 | 这一段写得很好 |
+| pagination | 分页信息 | `{...}` |
+
+> 段评接口遵循文章匿名访问、讨论帖权限和评论可见性校验；响应不返回评论 IP、UA、联系方式、密钥或完整用户对象。文章编辑后无法匹配的段评会保留为“原段落已修改”，不会丢失。
+
 ### 更新评论
 
 `PUT /comment/{评论oId}`
diff --git a/sql/20260719_long_article_paragraph_comment.sql b/sql/20260719_long_article_paragraph_comment.sql
new file mode 100644
index 00000000..a51375be
--- /dev/null
+++ b/sql/20260719_long_article_paragraph_comment.sql
@@ -0,0 +1,9 @@
+ALTER TABLE `symphony_comment`
+  ADD COLUMN `commentType` INT NOT NULL DEFAULT 0,
+  ADD COLUMN `commentParagraphId` VARCHAR(64) NOT NULL DEFAULT '',
+  ADD COLUMN `commentParagraphKind` VARCHAR(16) NOT NULL DEFAULT '',
+  ADD COLUMN `commentParagraphIndex` INT NOT NULL DEFAULT -1,
+  ADD COLUMN `commentParagraphSnapshot` VARCHAR(1024) NOT NULL DEFAULT '',
+  ADD COLUMN `commentParagraphStatus` INT NOT NULL DEFAULT 0,
+  ADD INDEX `idx_cmt_article_type_paragraph_status_oid`
+    (`commentOnArticleId`, `commentType`, `commentParagraphId`, `commentParagraphStatus`, `commentCreateTime`, `oId`);
diff --git a/src/main/java/org/b3log/symphony/model/Comment.java b/src/main/java/org/b3log/symphony/model/Comment.java
index e2edbad6..06e5e210 100644
--- a/src/main/java/org/b3log/symphony/model/Comment.java
+++ b/src/main/java/org/b3log/symphony/model/Comment.java
@@ -132,6 +132,18 @@ public final class Comment {
      */
     public static final String COMMENT_VISIBLE = "commentVisible";
 
+    public static final String COMMENT_TYPE = "commentType";
+
+    public static final String COMMENT_PARAGRAPH_ID = "commentParagraphId";
+
+    public static final String COMMENT_PARAGRAPH_KIND = "commentParagraphKind";
+
+    public static final String COMMENT_PARAGRAPH_INDEX = "commentParagraphIndex";
+
+    public static final String COMMENT_PARAGRAPH_SNAPSHOT = "commentParagraphSnapshot";
+
+    public static final String COMMENT_PARAGRAPH_STATUS = "commentParagraphStatus";
+
     //// Transient ////
     /**
      * Key of comment revision count.
@@ -292,6 +304,14 @@ public final class Comment {
      */
     public static final int COMMENT_VISIBLE_C_AUTHOR = 1;
 
+    public static final int COMMENT_TYPE_C_ARTICLE = 0;
+
+    public static final int COMMENT_TYPE_C_PARAGRAPH = 1;
+
+    public static final int COMMENT_PARAGRAPH_STATUS_C_ACTIVE = 0;
+
+    public static final int COMMENT_PARAGRAPH_STATUS_C_ORPHANED = 1;
+
     //// Validation constants
     /**
      * Max comment content length.
diff --git a/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java b/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java
index 68a8b602..92b37359 100644
--- a/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java
+++ b/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java
@@ -162,6 +162,9 @@ public class ArticleProcessor {
     @Inject
     private LongArticleColumnQueryService longArticleColumnQueryService;
 
+    @Inject
+    private LongArticleParagraphService longArticleParagraphService;
+
     /**
      * Comment query service.
      */
@@ -534,6 +537,9 @@ public void showArticleApi(final RequestContext context) {
         articleQueryService.processArticleContent(article);
 
         if (Article.ARTICLE_TYPE_C_LONG == article.optInt(Article.ARTICLE_TYPE)) {
+            final JSONObject paragraphContent = longArticleParagraphService.annotateRenderedContent(
+                    articleId, article.optString(Article.ARTICLE_CONTENT));
+            article.put(Article.ARTICLE_CONTENT, paragraphContent.optString("html"));
             final JSONObject readStat = longArticleReadService.getStat(articleId);
             article.put("longArticleReadStat", readStat);
             dataModel.put("longArticleReadStat", readStat);
@@ -1418,6 +1424,9 @@ public void showArticle(final RequestContext context) {
         articleQueryService.processArticleContent(article);
 
         if (Article.ARTICLE_TYPE_C_LONG == article.optInt(Article.ARTICLE_TYPE)) {
+            final JSONObject paragraphContent = longArticleParagraphService.annotateRenderedContent(
+                    articleId, article.optString(Article.ARTICLE_CONTENT));
+            article.put(Article.ARTICLE_CONTENT, paragraphContent.optString("html"));
             final JSONObject readStat = longArticleReadService.getStat(articleId);
             article.put("longArticleReadStat", readStat);
             dataModel.put("longArticleReadStat", readStat);
@@ -1640,6 +1649,11 @@ public void showArticle(final RequestContext context) {
         // Load comments
         final List<JSONObject> articleComments = commentQueryService.getArticleThreadParentComments(commentThreadOptions);
         article.put(Article.ARTICLE_T_COMMENTS, (Object) articleComments);
+        if (Article.ARTICLE_TYPE_C_LONG == article.optInt(Article.ARTICLE_TYPE)) {
+            article.put("articleOrphanedParagraphComments", (Object)
+                    commentQueryService.getOrphanedParagraphThreadParentComments(
+                            articleId, currentUserId, articleAuthorId));
+        }
         article.put("commentors", (Object) commentQueryService.getArticleCommentors(articleId));
 
         // Fill comment thank
diff --git a/src/main/java/org/b3log/symphony/processor/CommentProcessor.java b/src/main/java/org/b3log/symphony/processor/CommentProcessor.java
index 22a8850f..7453f619 100644
--- a/src/main/java/org/b3log/symphony/processor/CommentProcessor.java
+++ b/src/main/java/org/b3log/symphony/processor/CommentProcessor.java
@@ -41,12 +41,14 @@
 import org.b3log.symphony.processor.middleware.PermissionMidware;
 import org.b3log.symphony.processor.middleware.validate.CommentAddValidationMidware;
 import org.b3log.symphony.processor.middleware.validate.CommentUpdateValidationMidware;
+import org.b3log.symphony.processor.middleware.validate.LongArticleParagraphCommentValidationMidware;
 import org.b3log.symphony.service.*;
 import org.b3log.symphony.util.*;
 import org.json.JSONObject;
 
 import java.util.Collections;
 import java.util.List;
+import java.util.Map;
 import java.util.Set;
 
 /**
@@ -156,6 +158,9 @@ public class CommentProcessor {
     @Inject
     private FollowMgmtService followMgmtService;
 
+    @Inject
+    private LongArticleParagraphService longArticleParagraphService;
+
     @Inject
     private PointtransferMgmtService pointtransferMgmtService;
 
@@ -170,6 +175,8 @@ public static void register() {
         final AnonymousViewCheckMidware anonymousViewCheckMidware = beanManager.getReference(AnonymousViewCheckMidware.class);
         final CommentUpdateValidationMidware commentUpdateValidationMidware = beanManager.getReference(CommentUpdateValidationMidware.class);
         final CommentAddValidationMidware commentAddValidationMidware = beanManager.getReference(CommentAddValidationMidware.class);
+        final LongArticleParagraphCommentValidationMidware paragraphValidation =
+                beanManager.getReference(LongArticleParagraphCommentValidationMidware.class);
 
         final CommentProcessor commentProcessor = beanManager.getReference(CommentProcessor.class);
         Dispatcher.post("/comment/accept", commentProcessor::acceptComment, loginCheck::handle, csrfMidware::check, permissionMidware::check);
@@ -182,6 +189,13 @@ public static void register() {
         Dispatcher.post("/comment/thread/parents", commentProcessor::getThreadParentComments, anonymousViewCheckMidware::handle);
         Dispatcher.post("/comment/thread/replies", commentProcessor::getThreadReplies, anonymousViewCheckMidware::handle);
         Dispatcher.post("/comment", commentProcessor::addComment, loginCheck::handle, permissionMidware::check, commentAddValidationMidware::handle);
+        Dispatcher.post("/comment/paragraph", commentProcessor::addParagraphComment,
+                loginCheck::handle, permissionMidware::check, commentAddValidationMidware::handle,
+                paragraphValidation::handle);
+        Dispatcher.post("/comment/paragraph/summary", commentProcessor::getParagraphSummary,
+                anonymousViewCheckMidware::handle);
+        Dispatcher.post("/comment/paragraph/thread/parents", commentProcessor::getParagraphThreadParents,
+                anonymousViewCheckMidware::handle);
         Dispatcher.post("/comment/thank", commentProcessor::thankComment, loginCheck::handle, permissionMidware::check);
     }
 
@@ -522,6 +536,69 @@ public void getThreadParentComments(final RequestContext context) {
                 renderJSONValue(Pagination.PAGINATION, buildThreadPagination(currentPage, pageCount, commentCnt));
     }
 
+    public void getParagraphSummary(final RequestContext context) {
+        context.renderJSON(StatusCodes.ERR);
+        final JSONObject request = context.requestJSON();
+        final String articleId = request.optString(Article.ARTICLE_T_ID, request.optString("articleId"));
+        final JSONObject currentUser = getCurrentUser(context, request);
+        final JSONObject article = getViewableArticle(articleId, currentUser);
+        if (null == article || Article.ARTICLE_TYPE_C_LONG != article.optInt(Article.ARTICLE_TYPE)) {
+            context.renderMsg("文章不存在或不可查看");
+            return;
+        }
+        articleQueryService.processArticleContent(article);
+
+        final Map<String, Integer> counts = commentQueryService.getParagraphCommentCounts(articleId);
+        final List<JSONObject> summaries = new java.util.ArrayList<>();
+        for (final LongArticleParagraphService.Paragraph paragraph :
+                longArticleParagraphService.extractRendered(articleId, article.optString(Article.ARTICLE_CONTENT))) {
+            final JSONObject item = new JSONObject();
+            item.put("paragraphId", paragraph.getId());
+            item.put("commentCount", counts.getOrDefault(paragraph.getId(), 0));
+            summaries.add(item);
+        }
+        context.renderJSON(StatusCodes.SUCC).renderJSONValue("paragraphComments", summaries);
+    }
+
+    public void getParagraphThreadParents(final RequestContext context) {
+        context.renderJSON(StatusCodes.ERR);
+        final JSONObject request = context.requestJSON();
+        final String articleId = request.optString(Article.ARTICLE_T_ID, request.optString("articleId"));
+        final String paragraphId = request.optString("paragraphId");
+        final JSONObject currentUser = getCurrentUser(context, request);
+        final JSONObject article = getViewableArticle(articleId, currentUser);
+        if (null == article || Article.ARTICLE_TYPE_C_LONG != article.optInt(Article.ARTICLE_TYPE)) {
+            context.renderMsg("段落不存在或不可查看");
+            return;
+        }
+        articleQueryService.processArticleContent(article);
+        final LongArticleParagraphService.Paragraph paragraph = longArticleParagraphService.findRenderedParagraph(
+                articleId, article.optString(Article.ARTICLE_CONTENT), paragraphId);
+        if (null == paragraph) {
+            context.renderMsg("段落不存在或不可查看");
+            return;
+        }
+        final int pageNum = request.optInt(Pagination.PAGINATION_CURRENT_PAGE_NUM, 1);
+        if (pageNum < 1) {
+            context.renderMsg("页码无效");
+            return;
+        }
+        final int sortMode = normalizeCommentViewMode(request);
+        final String currentUserId = getCurrentUserId(currentUser);
+        final int commentCnt = commentQueryService.countParagraphThreadParents(articleId, paragraphId);
+        final int pageCount = (int) Math.ceil((double) commentCnt / Symphonys.ARTICLE_COMMENTS_CNT);
+        final int currentPage = normalizeThreadPage(pageNum, pageCount, sortMode);
+        final List<JSONObject> comments = commentQueryService.getParagraphThreadParentComments(articleId,
+                paragraphId, currentPage, sortMode, normalizeCommentSort(request.optString("sort")),
+                currentUserId, article.optString(Article.ARTICLE_AUTHOR_ID));
+        fillThreadParentViewState(comments, article, currentUser, sortMode);
+        context.renderJSON(StatusCodes.SUCC).
+                renderJSONValue(COMMENT_THREAD_PARENTS, comments).
+                renderJSONValue("paragraphId", paragraphId).
+                renderJSONValue("paragraphSnapshot", paragraph.getSnapshot()).
+                renderJSONValue(Pagination.PAGINATION, buildThreadPagination(currentPage, pageCount, commentCnt));
+    }
+
     public void getThreadReplies(final RequestContext context) {
         context.renderJSON(StatusCodes.ERR);
         final JSONObject requestJSONObject = context.requestJSON();
@@ -818,6 +895,14 @@ private int normalizeCommentViewMode(final JSONObject requestJSONObject) {
      * @param context the specified context
      */
     public void addComment(final RequestContext context) {
+        addComment(context, false);
+    }
+
+    public void addParagraphComment(final RequestContext context) {
+        addComment(context, true);
+    }
+
+    private void addComment(final RequestContext context, final boolean paragraphComment) {
         context.renderJSON(StatusCodes.ERR);
 
         final Request request = context.getRequest();
@@ -846,6 +931,15 @@ public void addComment(final RequestContext context) {
             comment.put(Comment.COMMENT_UA, ua);
         }
         comment.put(Comment.COMMENT_ORIGINAL_COMMENT_ID, commentOriginalCommentId);
+        if (paragraphComment) {
+            comment.put(Comment.COMMENT_TYPE, Comment.COMMENT_TYPE_C_PARAGRAPH);
+            comment.put(Comment.COMMENT_PARAGRAPH_ID, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_ID));
+            comment.put(Comment.COMMENT_PARAGRAPH_KIND, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_KIND));
+            comment.put(Comment.COMMENT_PARAGRAPH_INDEX, requestJSONObject.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1));
+            comment.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
+            comment.put(Comment.COMMENT_PARAGRAPH_STATUS, requestJSONObject.optInt(
+                    Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE));
+        }
 
         try {
             JSONObject currentUser = Sessions.getUser();
@@ -889,7 +983,7 @@ public void addComment(final RequestContext context) {
             comment.put(Comment.COMMENT_VISIBLE, isOnlyAuthorVisible
                     ? Comment.COMMENT_VISIBLE_C_AUTHOR : Comment.COMMENT_VISIBLE_C_ALL);
 
-            commentMgmtService.addComment(comment);
+            final String commentId = commentMgmtService.addComment(comment);
 
             if ((!commentAuthorId.equals(articleAuthorId) &&
                     UserExt.USER_XXX_STATUS_C_ENABLED == currentUser.optInt(UserExt.USER_REPLY_WATCH_ARTICLE_STATUS))
@@ -898,6 +992,9 @@ public void addComment(final RequestContext context) {
             }
 
             context.renderJSONValue(Keys.CODE, StatusCodes.SUCC);
+            if (paragraphComment) {
+                context.renderJSONValue("commentId", commentId);
+            }
         } catch (final ServiceException e) {
             context.renderMsg(e.getMessage());
         }
diff --git a/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java b/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java
index 901557d9..cb4cf3fd 100644
--- a/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java
+++ b/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java
@@ -267,7 +267,9 @@ private static JSONObject buildCommentPayload(final JSONObject message) {
                 Comment.COMMENT_STATUS, Common.REWARED_COUNT, Common.REWARDED,
                 Comment.COMMENT_T_VOTE, Comment.COMMENT_REVISION_COUNT, Comment.COMMENT_T_NICE,
                 Comment.COMMENT_T_THANK_LABEL, Comment.COMMENT_T_IS_ARTICLE_AUTHOR,
-                Comment.COMMENT_T_IS_CURRENT_USER, "sysMetal", "reactionSummary", "currentUserReaction"
+                Comment.COMMENT_T_IS_CURRENT_USER, "sysMetal", "reactionSummary", "currentUserReaction",
+                Comment.COMMENT_TYPE, Comment.COMMENT_PARAGRAPH_ID, Comment.COMMENT_PARAGRAPH_KIND,
+                Comment.COMMENT_PARAGRAPH_INDEX, Comment.COMMENT_PARAGRAPH_SNAPSHOT, Comment.COMMENT_PARAGRAPH_STATUS
         };
         for (final String field : publicFields) {
             if (message.has(field)) {
diff --git a/src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java b/src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java
new file mode 100644
index 00000000..e1a2f50c
--- /dev/null
+++ b/src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java
@@ -0,0 +1,97 @@
+/*
+ * Rhythm - A modern community (forum/BBS/SNS/blog) platform written in Java.
+ * Modified version from Symphony, Thanks Symphony :)
+ * Copyright (C) 2012-present, b3log.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ */
+package org.b3log.symphony.processor.middleware.validate;
+
+import org.apache.commons.lang.StringUtils;
+import org.b3log.latke.Keys;
+import org.b3log.latke.ioc.Inject;
+import org.b3log.latke.ioc.Singleton;
+import org.b3log.latke.http.RequestContext;
+import org.b3log.symphony.model.Article;
+import org.b3log.symphony.model.Comment;
+import org.b3log.symphony.service.ArticleQueryService;
+import org.b3log.symphony.service.CommentQueryService;
+import org.b3log.symphony.service.LongArticleParagraphService;
+import org.json.JSONObject;
+
+/** Validates and enriches a long article paragraph comment request. */
+@Singleton
+public class LongArticleParagraphCommentValidationMidware {
+
+    @Inject
+    private LongArticleParagraphService paragraphService;
+
+    @Inject
+    private ArticleQueryService articleQueryService;
+
+    @Inject
+    private CommentQueryService commentQueryService;
+
+    public void handle(final RequestContext context) {
+        JSONObject request = (JSONObject) context.attr(Keys.REQUEST);
+        if (null == request) {
+            request = context.requestJSON();
+            context.getRequest().setAttribute(Keys.REQUEST, request);
+        }
+        final String articleId = request.optString(Article.ARTICLE_T_ID);
+        final JSONObject article = articleQueryService.getArticleById(articleId);
+        if (null == article || Article.ARTICLE_TYPE_C_LONG != article.optInt(Article.ARTICLE_TYPE)) {
+            reject(context, "段评仅支持长篇文章");
+            return;
+        }
+        articleQueryService.processArticleContent(article);
+
+        final String paragraphId = request.optString("paragraphId");
+        final String originalId = request.optString(Comment.COMMENT_ORIGINAL_COMMENT_ID);
+        try {
+            JSONObject source = null;
+            if (StringUtils.isNotBlank(originalId)) {
+                source = commentQueryService.getComment(originalId);
+                if (null == source || !articleId.equals(source.optString(Comment.COMMENT_ON_ARTICLE_ID))
+                        || Comment.COMMENT_TYPE_C_PARAGRAPH != source.optInt(Comment.COMMENT_TYPE)
+                        || Comment.COMMENT_STATUS_C_VALID != source.optInt(Comment.COMMENT_STATUS)
+                        || !paragraphId.equals(source.optString(Comment.COMMENT_PARAGRAPH_ID))) {
+                    reject(context, "段评回复目标无效");
+                    return;
+                }
+                request.put(Comment.COMMENT_PARAGRAPH_ID, source.optString(Comment.COMMENT_PARAGRAPH_ID));
+                request.put(Comment.COMMENT_PARAGRAPH_KIND, source.optString(Comment.COMMENT_PARAGRAPH_KIND));
+                request.put(Comment.COMMENT_PARAGRAPH_INDEX, source.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1));
+                request.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, source.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
+                request.put(Comment.COMMENT_PARAGRAPH_STATUS,
+                        source.optInt(Comment.COMMENT_PARAGRAPH_STATUS));
+            } else {
+                final LongArticleParagraphService.Paragraph paragraph = paragraphService.findRenderedParagraph(
+                        articleId, article.optString(Article.ARTICLE_CONTENT), paragraphId);
+                if (null == paragraph) {
+                    reject(context, "段落不存在或已更新");
+                    return;
+                }
+                request.put(Comment.COMMENT_PARAGRAPH_KIND, paragraph.getKind());
+                request.put(Comment.COMMENT_PARAGRAPH_ID, paragraph.getId());
+                request.put(Comment.COMMENT_PARAGRAPH_INDEX, paragraph.getIndex());
+                request.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, paragraph.getSnapshot());
+            }
+            request.put(Comment.COMMENT_TYPE, Comment.COMMENT_TYPE_C_PARAGRAPH);
+            if (!request.has(Comment.COMMENT_PARAGRAPH_STATUS)) {
+                request.put(Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE);
+            }
+            context.handle();
+        } catch (final Exception e) {
+            reject(context, "段落校验失败");
+        }
+    }
+
+    private void reject(final RequestContext context, final String message) {
+        context.renderJSON(new JSONObject().put(Keys.CODE, -1).put(Keys.MSG, message));
+        context.abort();
+    }
+}
diff --git a/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java b/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java
index a3201c04..523ad417 100644
--- a/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java
+++ b/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java
@@ -176,6 +176,9 @@ public class ArticleMgmtService {
     @Inject
     private LongArticleColumnMgmtService longArticleColumnMgmtService;
 
+    @Inject
+    private LongArticleParagraphService longArticleParagraphService;
+
     @Inject
     private ColumnCoverMgmtService columnCoverMgmtService;
 
@@ -918,6 +921,7 @@ public synchronized void updateArticle(final JSONObject requestJSONObject) throw
         articleToUpdate.put(Article.ARTICLE_QNA_OFFER_POINT, qnaOfferPoint);
 
         final int articleType = requestJSONObject.optInt(Article.ARTICLE_TYPE, Article.ARTICLE_TYPE_C_NORMAL);
+        final int oldArticleType = articleToUpdate.optInt(Article.ARTICLE_TYPE, Article.ARTICLE_TYPE_C_NORMAL);
 
         final Transaction transaction = articleRepository.beginTransaction();
 
@@ -984,6 +988,10 @@ public synchronized void updateArticle(final JSONObject requestJSONObject) throw
 
             final boolean titleChanged = !oldTitle.replaceAll("\\s+", "").equals(articleTitle.replaceAll("\\s+", ""));
             final boolean contentChanged = !oldContent.replaceAll("\\s+", "").equals(articleContent.replaceAll("\\s+", ""));
+            if (contentChanged && (Article.ARTICLE_TYPE_C_LONG == articleType
+                    || Article.ARTICLE_TYPE_C_LONG == oldArticleType)) {
+                longArticleParagraphService.migrateCommentsInCurrentTransaction(articleId, oldContent, articleContent);
+            }
             if (notIn5m && Article.ARTICLE_TYPE_C_THOUGHT != articleType
                     && (titleChanged || contentChanged)) {
                 final JSONObject revision = new JSONObject();
diff --git a/src/main/java/org/b3log/symphony/service/CommentMgmtService.java b/src/main/java/org/b3log/symphony/service/CommentMgmtService.java
index 312643f9..8b5b75f0 100644
--- a/src/main/java/org/b3log/symphony/service/CommentMgmtService.java
+++ b/src/main/java/org/b3log/symphony/service/CommentMgmtService.java
@@ -490,6 +490,20 @@ public synchronized String addComment(final JSONObject requestJSONObject) throws
                 originalCmt.put(Comment.COMMENT_REPLY_CNT, originalCmtReplyCnt + 1);
                 commentRepository.update(originalCmtId, originalCmt);
 
+                if (Comment.COMMENT_TYPE_C_PARAGRAPH == originalCmt.optInt(Comment.COMMENT_TYPE)) {
+                    requestJSONObject.put(Comment.COMMENT_TYPE, Comment.COMMENT_TYPE_C_PARAGRAPH);
+                    requestJSONObject.put(Comment.COMMENT_PARAGRAPH_ID,
+                            originalCmt.optString(Comment.COMMENT_PARAGRAPH_ID));
+                    requestJSONObject.put(Comment.COMMENT_PARAGRAPH_KIND,
+                            originalCmt.optString(Comment.COMMENT_PARAGRAPH_KIND));
+                    requestJSONObject.put(Comment.COMMENT_PARAGRAPH_INDEX,
+                            originalCmt.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1));
+                    requestJSONObject.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT,
+                            originalCmt.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
+                    requestJSONObject.put(Comment.COMMENT_PARAGRAPH_STATUS,
+                            originalCmt.optInt(Comment.COMMENT_PARAGRAPH_STATUS));
+                }
+
                 notificationMgmtService.makeRead(commentAuthorId, Arrays.asList(originalCmtId));
             }
 
@@ -543,6 +557,19 @@ public synchronized String addComment(final JSONObject requestJSONObject) throws
             comment.put(Comment.COMMENT_REPLY_CNT, 0);
             comment.put(Comment.COMMENT_AUDIO_URL, "");
             comment.put(Comment.COMMENT_QNA_OFFERED, Comment.COMMENT_QNA_OFFERED_C_NOT);
+            comment.put(Comment.COMMENT_TYPE, requestJSONObject.optInt(Comment.COMMENT_TYPE,
+                    Comment.COMMENT_TYPE_C_ARTICLE));
+            comment.put(Comment.COMMENT_PARAGRAPH_ID, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_ID));
+            comment.put(Comment.COMMENT_PARAGRAPH_KIND, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_KIND));
+            comment.put(Comment.COMMENT_PARAGRAPH_INDEX, requestJSONObject.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1));
+            comment.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
+            comment.put(Comment.COMMENT_PARAGRAPH_STATUS, requestJSONObject.optInt(Comment.COMMENT_PARAGRAPH_STATUS,
+                    Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE));
+            if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE)
+                    && StringUtils.isNotBlank(comment.optString(Comment.COMMENT_PARAGRAPH_ID))) {
+                comment.put(Comment.COMMENT_SHARP_URL, "/article/" + articleId + "?paragraph="
+                        + comment.optString(Comment.COMMENT_PARAGRAPH_ID) + "#" + ret);
+            }
 
             // Adds the comment
             final String commentId = commentRepository.add(comment);
diff --git a/src/main/java/org/b3log/symphony/service/CommentQueryService.java b/src/main/java/org/b3log/symphony/service/CommentQueryService.java
index bacc9874..df77c10a 100644
--- a/src/main/java/org/b3log/symphony/service/CommentQueryService.java
+++ b/src/main/java/org/b3log/symphony/service/CommentQueryService.java
@@ -197,10 +197,17 @@ public String getCommentURL(final String commentId, final int sortMode, final in
             }
             String title = Escapes.escapeHTML(article.optString(Article.ARTICLE_TITLE));
             title = Emotions.convert(title);
-            final int commentPage = getCommentThreadPage(articleId, commentId, sortMode, pageSize);
-
-            return "<a href=\"" + Latkes.getServePath() + "/article/" + articleId + "?p=" + commentPage
-                    + "&m=" + sortMode + "#" + commentId + "\" target=\"_blank\">" + title + "</a>";
+            final String paragraphId = comment.optString(Comment.COMMENT_PARAGRAPH_ID);
+            final String sharpURL;
+            if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE)
+                    && StringUtils.isNotBlank(paragraphId)) {
+                sharpURL = "/article/" + articleId + "?paragraph=" + paragraphId + "#" + commentId;
+            } else {
+                final int commentPage = getCommentThreadPage(articleId, commentId, sortMode, pageSize);
+                sharpURL = "/article/" + articleId + "?p=" + commentPage + "&m=" + sortMode + "#" + commentId;
+            }
+            return "<a href=\"" + Latkes.getServePath() + sharpURL
+                    + "\" target=\"_blank\">" + title + "</a>";
         } catch (final Exception e) {
             LOGGER.log(Level.ERROR, "Gets comment URL failed", e);
 
@@ -422,6 +429,7 @@ public List<JSONObject> getNiceComments(final int commentViewMode,
                     setPage(1, fetchSize).setPageCount(1).
                     setFilter(CompositeFilterOperator.and(
                             new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId),
+                            new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_ARTICLE),
                             new PropertyFilter(Comment.COMMENT_SCORE, FilterOperator.GREATER_THAN, 0D),
                             new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID)));
             try {
@@ -609,7 +617,7 @@ public List<JSONObject> getUserComments(final String userId, final int anonymous
                 final String commentId = comment.optString(Keys.OBJECT_ID);
                 final int cmtViewMode = UserExt.USER_COMMENT_VIEW_MODE_C_TRADITIONAL;
                 final int cmtPage = getCommentThreadPage(articleId, commentId, cmtViewMode, Symphonys.ARTICLE_COMMENTS_CNT);
-                comment.put(Comment.COMMENT_SHARP_URL, "/article/" + articleId + "?p=" + cmtPage + "&m=" + cmtViewMode + "#" + commentId);
+                comment.put(Comment.COMMENT_SHARP_URL, buildCommentSharpURL(comment, articleId, cmtPage, cmtViewMode));
 
                 if (Article.ARTICLE_TYPE_C_DISCUSSION == article.optInt(Article.ARTICLE_TYPE)
                         && Article.ARTICLE_ANONYMOUS_C_PUBLIC == article.optInt(Article.ARTICLE_ANONYMOUS)) {
@@ -712,6 +720,116 @@ public int countArticleComments(final String articleId, final String authorId) {
         }
     }
 
+    public int countChapterComments(final String articleId) {
+        final Query query = new Query().setFilter(buildChapterCommentFilter(articleId));
+        try {
+            return (int) commentRepository.count(query);
+        } catch (final RepositoryException e) {
+            LOGGER.log(Level.ERROR, "Counts chapter comments failed", e);
+            return 0;
+        }
+    }
+
+    public int countParagraphComments(final String articleId, final String paragraphId) {
+        final Query query = new Query().setFilter(buildParagraphCommentFilter(articleId, paragraphId));
+        try {
+            return (int) commentRepository.count(query);
+        } catch (final RepositoryException e) {
+            LOGGER.log(Level.ERROR, "Counts paragraph comments failed", e);
+            return 0;
+        }
+    }
+
+    public int countParagraphThreadParents(final String articleId, final String paragraphId) {
+        final Query query = new Query().setFilter(buildParagraphThreadParentCommentFilter(articleId, paragraphId));
+        try {
+            return (int) commentRepository.count(query);
+        } catch (final RepositoryException e) {
+            LOGGER.log(Level.ERROR, "Counts paragraph comment threads failed", e);
+            return 0;
+        }
+    }
+
+    public Map<String, Integer> getParagraphCommentCounts(final String articleId) {
+        final Map<String, Integer> ret = new LinkedHashMap<>();
+        final Filter filter = buildParagraphArticleFilter(articleId);
+        try {
+            final List<JSONObject> comments = commentRepository.getList(new Query().setPage(1, Integer.MAX_VALUE).
+                    setPageCount(1).setFilter(filter).select(Comment.COMMENT_PARAGRAPH_ID));
+            for (final JSONObject comment : comments) {
+                final String paragraphId = comment.optString(Comment.COMMENT_PARAGRAPH_ID);
+                if (StringUtils.isNotBlank(paragraphId)) {
+                    ret.put(paragraphId, ret.getOrDefault(paragraphId, 0) + 1);
+                }
+            }
+        } catch (final RepositoryException e) {
+            LOGGER.log(Level.ERROR, "Gets paragraph comment counts failed", e);
+        }
+        return ret;
+    }
+
+    public List<JSONObject> getParagraphThreadParentComments(final String articleId, final String paragraphId,
+                                                              final int currentPageNum, final int sortMode,
+                                                              final String commentSort, final String currentUserId,
+                                                              final String articleAuthorId) {
+        final Query query = new Query().setPageCount(1).
+                setPage(currentPageNum, Symphonys.ARTICLE_COMMENTS_CNT).
+                setFilter(buildParagraphThreadParentCommentFilter(articleId, paragraphId));
+        if (COMMENT_SORT_HOT.equals(commentSort)) {
+            query.addSort(Comment.COMMENT_SCORE, SortDirection.DESCENDING).
+                    addSort(Keys.OBJECT_ID, SortDirection.DESCENDING);
+        } else if (UserExt.USER_COMMENT_VIEW_MODE_C_REALTIME == sortMode) {
+            query.addSort(Keys.OBJECT_ID, SortDirection.DESCENDING);
+        } else {
+            query.addSort(Keys.OBJECT_ID, SortDirection.ASCENDING);
+        }
+        try {
+            final JSONObject result = commentRepository.get(query);
+            final List<JSONObject> comments = (List<JSONObject>) result.opt(Keys.RESULTS);
+            organizeComments(comments);
+            final ThreadQueryContext context = buildThreadQueryContext(
+                    currentUserId, "", articleId, articleAuthorId);
+            final List<JSONObject> ret = new ArrayList<>();
+            for (final JSONObject comment : comments) {
+                fillArticleCommentMetadata(comment, articleId, sortMode, Symphonys.ARTICLE_COMMENTS_CNT);
+                fillCommentThreadPreview(comment, currentUserId);
+                ret.add(buildThreadParentComment(comment, context));
+            }
+            return ret;
+        } catch (final RepositoryException e) {
+            LOGGER.log(Level.ERROR, "Gets paragraph comments failed", e);
+            return java.util.Collections.emptyList();
+        }
+    }
+
+    public List<JSONObject> getOrphanedParagraphThreadParentComments(final String articleId,
+                                                                      final String currentUserId,
+                                                                      final String articleAuthorId) {
+        final Query query = new Query().setPageCount(1).setPage(1, Integer.MAX_VALUE).
+                setFilter(buildOrphanedParagraphThreadParentCommentFilter(articleId)).
+                addSort(Keys.OBJECT_ID, SortDirection.ASCENDING);
+        try {
+            final List<JSONObject> comments = commentRepository.getList(query);
+            organizeComments(comments);
+            final ThreadQueryContext context = buildThreadQueryContext(
+                    currentUserId, "", articleId, articleAuthorId);
+            final List<JSONObject> ret = new ArrayList<>();
+            for (final JSONObject comment : comments) {
+                fillArticleCommentMetadata(comment, articleId,
+                        UserExt.USER_COMMENT_VIEW_MODE_C_TRADITIONAL, Symphonys.ARTICLE_COMMENTS_CNT);
+                fillCommentThreadPreview(comment, currentUserId);
+                final JSONObject target = buildThreadParentComment(comment, context);
+                target.put(Comment.COMMENT_T_NICE, false);
+                ret.add(target);
+            }
+            reactionQueryService.fillCommentReactions(ret, currentUserId);
+            return ret;
+        } catch (final RepositoryException e) {
+            LOGGER.log(Level.ERROR, "Gets orphaned paragraph comments failed", e);
+            return Collections.emptyList();
+        }
+    }
+
     public int countArticleThreadParentComments(final JSONObject options) {
         final String articleId = options.optString(Article.ARTICLE_T_ID, options.optString("articleId"));
         final Query query = new Query().setFilter(buildThreadParentCommentFilter(articleId, options.optString(Comment.COMMENT_AUTHOR_ID)));
@@ -880,7 +998,7 @@ private Query buildArticleCommentQuery(final String articleId, final int current
     }
 
     private Filter buildArticleCommentFilter(final String articleId, final String authorId) {
-        final Filter articleFilter = new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId);
+        final Filter articleFilter = buildChapterCommentFilter(articleId);
         if (StringUtils.isBlank(authorId)) {
             return articleFilter;
         }
@@ -889,6 +1007,52 @@ private Filter buildArticleCommentFilter(final String articleId, final String au
                 new PropertyFilter(Comment.COMMENT_AUTHOR_ID, FilterOperator.EQUAL, authorId));
     }
 
+    private Filter buildChapterCommentFilter(final String articleId) {
+        return CompositeFilterOperator.and(
+                new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId),
+                new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_ARTICLE),
+                new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID));
+    }
+
+    private Filter buildParagraphCommentFilter(final String articleId, final String paragraphId) {
+        return CompositeFilterOperator.and(buildParagraphArticleFilter(articleId),
+                new PropertyFilter(Comment.COMMENT_PARAGRAPH_ID, FilterOperator.EQUAL, paragraphId));
+    }
+
+    private Filter buildParagraphArticleFilter(final String articleId) {
+        return CompositeFilterOperator.and(
+                new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId),
+                new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_PARAGRAPH),
+                new PropertyFilter(Comment.COMMENT_PARAGRAPH_STATUS, FilterOperator.EQUAL,
+                        Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE),
+                new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID));
+    }
+
+    private Filter buildParagraphThreadParentCommentFilter(final String articleId, final String paragraphId) {
+        return CompositeFilterOperator.and(buildParagraphCommentFilter(articleId, paragraphId),
+                new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, ""));
+    }
+
+    private Filter buildOrphanedParagraphThreadParentCommentFilter(final String articleId) {
+        return CompositeFilterOperator.and(
+                new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId),
+                new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_PARAGRAPH),
+                new PropertyFilter(Comment.COMMENT_PARAGRAPH_STATUS, FilterOperator.EQUAL,
+                        Comment.COMMENT_PARAGRAPH_STATUS_C_ORPHANED),
+                new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID),
+                new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, ""));
+    }
+
+    private String buildCommentSharpURL(final JSONObject comment, final String articleId,
+                                        final int commentPage, final int sortMode) {
+        final String paragraphId = comment.optString(Comment.COMMENT_PARAGRAPH_ID);
+        if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE)
+                && StringUtils.isNotBlank(paragraphId)) {
+            return "/article/" + articleId + "?paragraph=" + paragraphId + "#" + comment.optString(Keys.OBJECT_ID);
+        }
+        return "/article/" + articleId + "?p=" + commentPage + "&m=" + sortMode + "#" + comment.optString(Keys.OBJECT_ID);
+    }
+
     private Query buildThreadParentCommentQuery(final JSONObject options) {
         final Query query = new Query().
                 setPageCount(1).
@@ -908,7 +1072,7 @@ private Query buildThreadParentCommentQuery(final JSONObject options) {
 
     private Filter buildThreadParentCommentFilter(final String articleId, final String authorId) {
         final Filter parentFilter = CompositeFilterOperator.and(
-                new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId),
+                buildChapterCommentFilter(articleId),
                 new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, ""));
         if (StringUtils.isBlank(authorId)) {
             return parentFilter;
@@ -920,7 +1084,11 @@ private Filter buildThreadParentCommentFilter(final String articleId, final Stri
     private Filter buildThreadPageBeforeFilter(final String articleId, final JSONObject rootComment,
                                                final int sortMode, final String commentSort,
                                                final String authorId) {
-        final Filter parentFilter = buildThreadParentCommentFilter(articleId, authorId);
+        final Filter parentFilter = Comment.COMMENT_TYPE_C_PARAGRAPH == rootComment.optInt(Comment.COMMENT_TYPE)
+                ? CompositeFilterOperator.and(buildParagraphCommentFilter(articleId,
+                rootComment.optString(Comment.COMMENT_PARAGRAPH_ID)),
+                new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, ""))
+                : buildThreadParentCommentFilter(articleId, authorId);
         if (COMMENT_SORT_HOT.equals(commentSort)) {
             return CompositeFilterOperator.and(parentFilter, buildHotThreadBeforeFilter(rootComment));
         }
@@ -1092,6 +1260,12 @@ private JSONObject buildThreadCommentBase(final JSONObject comment, final Thread
         ret.put(Comment.COMMENT_CREATE_TIME_STR, comment.optString(Comment.COMMENT_CREATE_TIME_STR));
         ret.put(Comment.COMMENT_CONTENT, comment.optString(Comment.COMMENT_CONTENT));
         ret.put(Comment.COMMENT_VISIBLE, comment.optInt(Comment.COMMENT_VISIBLE));
+        ret.put(Comment.COMMENT_TYPE, comment.optInt(Comment.COMMENT_TYPE));
+        ret.put(Comment.COMMENT_PARAGRAPH_ID, comment.optString(Comment.COMMENT_PARAGRAPH_ID));
+        ret.put(Comment.COMMENT_PARAGRAPH_KIND, comment.optString(Comment.COMMENT_PARAGRAPH_KIND));
+        ret.put(Comment.COMMENT_PARAGRAPH_INDEX, comment.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1));
+        ret.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
+        ret.put(Comment.COMMENT_PARAGRAPH_STATUS, comment.optInt(Comment.COMMENT_PARAGRAPH_STATUS));
         fillThreadCommentState(ret, comment, context);
         fillOriginalAuthor(ret, null);
         filterThreadCommentContent(ret, comment, context);
@@ -1160,7 +1334,7 @@ private void filterThreadCommentContent(final JSONObject target, final JSONObjec
      */
     public List<JSONObject> getArticleCommentors(final String articleId) {
         final Query query = new Query().
-                setFilter(new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId)).
+                setFilter(buildChapterCommentFilter(articleId)).
                 addSort(Keys.OBJECT_ID, SortDirection.DESCENDING).
                 select(Comment.COMMENT_AUTHOR_ID);
 
diff --git a/src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java b/src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java
new file mode 100644
index 00000000..9d06a209
--- /dev/null
+++ b/src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java
@@ -0,0 +1,489 @@
+/*
+ * Rhythm - A modern community (forum/BBS/SNS/blog) platform written in Java.
+ * Copyright (C) 2012-present, b3log.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ */
+package org.b3log.symphony.service;
+
+import org.apache.commons.lang.StringUtils;
+import org.b3log.latke.Latkes;
+import org.b3log.latke.Keys;
+import org.b3log.latke.ioc.Inject;
+import org.b3log.latke.repository.CompositeFilterOperator;
+import org.b3log.latke.repository.Filter;
+import org.b3log.latke.repository.FilterOperator;
+import org.b3log.latke.repository.PropertyFilter;
+import org.b3log.latke.repository.Query;
+import org.b3log.latke.repository.RepositoryException;
+import org.b3log.latke.service.annotation.Service;
+import org.b3log.symphony.model.Comment;
+import org.b3log.symphony.repository.CommentRepository;
+import org.b3log.symphony.util.Emotions;
+import org.b3log.symphony.util.Markdowns;
+import org.b3log.symphony.util.MediaPlayers;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.nodes.Element;
+import org.jsoup.nodes.Node;
+import org.jsoup.parser.Tag;
+import org.json.JSONObject;
+
+import java.nio.charset.StandardCharsets;
+import java.security.MessageDigest;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+import java.util.regex.Pattern;
+
+/**
+ * Parses, annotates and migrates long-article paragraph anchors.
+ */
+@Service
+public class LongArticleParagraphService {
+
+    private static final Pattern WHITESPACE = Pattern.compile("\\s+");
+
+    private static final Pattern INVISIBLE = Pattern.compile("[\\p{Cc}\\p{Cf}]");
+
+    private static final int SNAPSHOT_MAX_LENGTH = 1024;
+
+    private static final double FUZZY_MATCH_THRESHOLD = 0.82D;
+
+    private static final int FUZZY_MATCH_CANDIDATE_LIMIT = 32;
+
+    @Inject
+    private CommentRepository commentRepository;
+
+    @Inject
+    private ShortLinkQueryService shortLinkQueryService;
+
+    public static final class Paragraph {
+        private String id;
+        private final String kind;
+        private int index;
+        private final String normalizedText;
+        private final String snapshot;
+        private Element element;
+
+        private Paragraph(final String kind, final String normalizedText, final String snapshot,
+                          final Element element) {
+            this.kind = kind;
+            this.normalizedText = normalizedText;
+            this.snapshot = snapshot;
+            this.element = element;
+        }
+
+        public String getId() {
+            return id;
+        }
+
+        public String getKind() {
+            return kind;
+        }
+
+        public int getIndex() {
+            return index;
+        }
+
+        public String getSnapshot() {
+            return snapshot;
+        }
+
+        private JSONObject toJSON() {
+            final JSONObject ret = new JSONObject();
+            ret.put(Comment.COMMENT_PARAGRAPH_ID, id);
+            ret.put(Comment.COMMENT_PARAGRAPH_KIND, kind);
+            ret.put(Comment.COMMENT_PARAGRAPH_INDEX, index);
+            ret.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, snapshot);
+            return ret;
+        }
+    }
+
+    public JSONObject annotateRenderedContent(final String articleId, final String renderedHTML) {
+        final Document document = parse(renderedHTML);
+        final List<Paragraph> paragraphs = extract(articleId, document, true);
+        final List<JSONObject> paragraphJSON = new ArrayList<>();
+        for (final Paragraph paragraph : paragraphs) {
+            paragraphJSON.add(paragraph.toJSON());
+        }
+        final Document.OutputSettings outputSettings = new Document.OutputSettings();
+        outputSettings.prettyPrint(false);
+        document.outputSettings(outputSettings);
+        final JSONObject ret = new JSONObject();
+        ret.put("html", document.body().html());
+        ret.put("paragraphs", paragraphJSON);
+        return ret;
+    }
+
+    public Paragraph findParagraph(final String articleId, final String markdown, final String paragraphId) {
+        if (!isValidParagraphId(paragraphId)) {
+            return null;
+        }
+        for (final Paragraph paragraph : extractMarkdown(articleId, markdown)) {
+            if (paragraphId.equals(paragraph.id)) {
+                return paragraph;
+            }
+        }
+        return null;
+    }
+
+    public Paragraph findRenderedParagraph(final String articleId, final String renderedHTML,
+                                           final String paragraphId) {
+        if (!isValidParagraphId(paragraphId)) {
+            return null;
+        }
+        for (final Paragraph paragraph : extract(articleId, parse(renderedHTML), false)) {
+            if (paragraphId.equals(paragraph.id)) {
+                return paragraph;
+            }
+        }
+        return null;
+    }
+
+    public List<Paragraph> extractRendered(final String articleId, final String renderedHTML) {
+        return extract(articleId, parse(renderedHTML), false);
+    }
+
+    public boolean isValidParagraphId(final String paragraphId) {
+        return null != paragraphId && paragraphId.matches("[0-9a-f]{64}");
+    }
+
+    public List<Paragraph> extractMarkdown(final String articleId, final String markdown) {
+        String content = shortLinkQueryService.linkArticle(StringUtils.defaultString(markdown));
+        String html = Markdowns.toHTML(Emotions.convert(content));
+        html = Markdowns.clean(html, Latkes.getServePath() + "/article/" + articleId);
+        html = MediaPlayers.renderAudio(html);
+        html = MediaPlayers.renderVideo(html);
+        return extract(articleId, parse(html), false);
+    }
+
+    public void migrateCommentsInCurrentTransaction(final String articleId, final String oldMarkdown,
+                                                     final String newMarkdown) throws RepositoryException {
+        final List<JSONObject> comments = getParagraphComments(articleId);
+        if (comments.isEmpty()) {
+            return;
+        }
+
+        final List<Paragraph> oldParagraphs = extractMarkdown(articleId, oldMarkdown);
+        final List<Paragraph> newParagraphs = extractMarkdown(articleId, newMarkdown);
+        final Map<String, Paragraph> oldById = indexById(oldParagraphs);
+        final Map<String, Paragraph> newById = indexById(newParagraphs);
+        final Map<String, Paragraph> mapped = matchParagraphs(oldParagraphs, newParagraphs);
+        final Set<String> claimedNewIds = new HashSet<>();
+        for (final Paragraph paragraph : mapped.values()) {
+            claimedNewIds.add(paragraph.id);
+        }
+
+        final Map<String, List<JSONObject>> commentsByParagraph = new LinkedHashMap<>();
+        for (final JSONObject comment : comments) {
+            commentsByParagraph.computeIfAbsent(comment.optString(Comment.COMMENT_PARAGRAPH_ID), key -> new ArrayList<>()).add(comment);
+        }
+
+        for (final Map.Entry<String, List<JSONObject>> entry : commentsByParagraph.entrySet()) {
+            final String oldId = entry.getKey();
+            Paragraph target = newById.get(oldId);
+            if (null == target && oldById.containsKey(oldId)) {
+                target = mapped.get(oldId);
+            }
+            if (null == target) {
+                target = matchOrphan(entry.getValue().get(0), newParagraphs, claimedNewIds);
+            }
+            if (null != target) {
+                claimedNewIds.add(target.id);
+            }
+            updateCommentParagraphs(entry.getValue(), target);
+        }
+    }
+
+    private List<JSONObject> getParagraphComments(final String articleId) throws RepositoryException {
+        final Filter filter = CompositeFilterOperator.and(
+                new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId),
+                new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_PARAGRAPH));
+        return commentRepository.getList(new Query().setPage(1, Integer.MAX_VALUE).setPageCount(1).setFilter(filter));
+    }
+
+    private void updateCommentParagraphs(final List<JSONObject> comments, final Paragraph target)
+            throws RepositoryException {
+        for (final JSONObject comment : comments) {
+            if (null == target) {
+                comment.put(Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ORPHANED);
+            } else {
+                comment.put(Comment.COMMENT_PARAGRAPH_ID, target.id);
+                comment.put(Comment.COMMENT_PARAGRAPH_KIND, target.kind);
+                comment.put(Comment.COMMENT_PARAGRAPH_INDEX, target.index);
+                comment.put(Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE);
+            }
+            commentRepository.update(comment.optString(Keys.OBJECT_ID), comment);
+        }
+    }
+
+    private Map<String, Paragraph> matchParagraphs(final List<Paragraph> oldParagraphs,
+                                                   final List<Paragraph> newParagraphs) {
+        final Map<String, Paragraph> ret = new HashMap<>();
+        final Map<String, Paragraph> newById = indexById(newParagraphs);
+        final Set<String> used = new HashSet<>();
+        for (final Paragraph oldParagraph : oldParagraphs) {
+            final Paragraph exact = newById.get(oldParagraph.id);
+            if (null != exact) {
+                ret.put(oldParagraph.id, exact);
+                used.add(exact.id);
+            }
+        }
+        for (final Paragraph oldParagraph : oldParagraphs) {
+            if (ret.containsKey(oldParagraph.id) || oldParagraph.normalizedText.length() < 12) {
+                continue;
+            }
+            final Paragraph matched = bestMatch(oldParagraph.kind, oldParagraph.normalizedText,
+                    oldParagraph.index, newParagraphs, used);
+            if (null != matched) {
+                ret.put(oldParagraph.id, matched);
+                used.add(matched.id);
+            }
+        }
+        return ret;
+    }
+
+    private Paragraph matchOrphan(final JSONObject comment, final List<Paragraph> paragraphs,
+                                  final Set<String> used) {
+        final String snapshot = normalize(comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
+        if (snapshot.length() < 12) {
+            return null;
+        }
+        return bestMatch(comment.optString(Comment.COMMENT_PARAGRAPH_KIND), snapshot,
+                comment.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1), paragraphs, used);
+    }
+
+    private Paragraph bestMatch(final String kind, final String text, final int oldIndex,
+                                final List<Paragraph> candidates, final Set<String> used) {
+        final String comparableText = StringUtils.substring(text, 0, SNAPSHOT_MAX_LENGTH);
+        return candidates.stream().
+                filter(candidate -> kind.equals(candidate.kind) && !used.contains(candidate.id)).
+                sorted(Comparator.comparingInt(candidate -> oldIndex < 0
+                        ? candidate.index : Math.abs(oldIndex - candidate.index))).
+                limit(FUZZY_MATCH_CANDIDATE_LIMIT).
+                map(candidate -> new Match(candidate, similarity(comparableText,
+                        StringUtils.substring(candidate.normalizedText, 0, SNAPSHOT_MAX_LENGTH)),
+                        Math.abs(oldIndex - candidate.index))).
+                filter(match -> match.similarity >= FUZZY_MATCH_THRESHOLD).
+                sorted(Comparator.comparingDouble((Match match) -> match.similarity).reversed().
+                        thenComparingInt(match -> match.distance)).
+                map(match -> match.paragraph).
+                findFirst().orElse(null);
+    }
+
+    private static final class Match {
+        private final Paragraph paragraph;
+        private final double similarity;
+        private final int distance;
+
+        private Match(final Paragraph paragraph, final double similarity, final int distance) {
+            this.paragraph = paragraph;
+            this.similarity = similarity;
+            this.distance = distance;
+        }
+    }
+
+    private double similarity(final String left, final String right) {
+        final int maxLength = Math.max(left.length(), right.length());
+        if (0 == maxLength) {
+            return 1D;
+        }
+        final int[] previous = new int[right.length() + 1];
+        final int[] current = new int[right.length() + 1];
+        for (int j = 0; j <= right.length(); j++) {
+            previous[j] = j;
+        }
+        for (int i = 1; i <= left.length(); i++) {
+            current[0] = i;
+            for (int j = 1; j <= right.length(); j++) {
+                final int cost = left.charAt(i - 1) == right.charAt(j - 1) ? 0 : 1;
+                current[j] = Math.min(Math.min(current[j - 1] + 1, previous[j] + 1), previous[j - 1] + cost);
+            }
+            System.arraycopy(current, 0, previous, 0, current.length);
+        }
+        return 1D - ((double) previous[right.length()] / maxLength);
+    }
+
+    private Map<String, Paragraph> indexById(final List<Paragraph> paragraphs) {
+        final Map<String, Paragraph> ret = new HashMap<>();
+        for (final Paragraph paragraph : paragraphs) {
+            ret.put(paragraph.id, paragraph);
+        }
+        return ret;
+    }
+
+    private List<Paragraph> extract(final String articleId, final Document document, final boolean annotate) {
+        final List<Paragraph> paragraphs = new ArrayList<>();
+        extractChildren(document.body(), paragraphs, annotate);
+        final Map<String, Integer> duplicateCounts = new HashMap<>();
+        int index = 0;
+        for (final Paragraph paragraph : paragraphs) {
+            paragraph.index = index++;
+            final String duplicateKey = paragraph.kind + "\n" + paragraph.normalizedText;
+            final int duplicateIndex = duplicateCounts.getOrDefault(duplicateKey, 0);
+            duplicateCounts.put(duplicateKey, duplicateIndex + 1);
+            paragraph.id = sha256(articleId + "\n" + duplicateKey + "\n" + duplicateIndex);
+            if (annotate && null != paragraph.element) {
+                paragraph.element.attr("data-long-paragraph-id", paragraph.id);
+                paragraph.element.attr("data-long-paragraph-kind", paragraph.kind);
+                paragraph.element.attr("data-long-paragraph-index", String.valueOf(paragraph.index));
+            }
+        }
+        return paragraphs;
+    }
+
+    private void extractChildren(final Element parent, final List<Paragraph> paragraphs, final boolean annotate) {
+        for (final Element element : new ArrayList<>(parent.children())) {
+            final String tag = element.tagName();
+            if ("p".equals(tag)) {
+                extractParagraph(element, paragraphs, annotate);
+            } else if (tag.matches("h[1-6]")) {
+                addParagraph("heading", element, paragraphs);
+            } else if ("ul".equals(tag) || "ol".equals(tag)) {
+                for (final Element child : element.children()) {
+                    if ("li".equals(child.tagName())) {
+                        addParagraph("list-item", child, paragraphs);
+                    }
+                }
+            } else if ("blockquote".equals(tag)) {
+                addParagraph("blockquote", element, paragraphs);
+            } else if ("pre".equals(tag)) {
+                addParagraph("code", element, paragraphs);
+            } else if ("table".equals(tag)) {
+                addParagraph("table", element, paragraphs);
+            } else if ("figure".equals(tag) || isMediaTag(tag)) {
+                addParagraph("media", element, paragraphs);
+            } else if ("div".equals(tag) || "section".equals(tag) || "article".equals(tag)
+                    || "main".equals(tag) || "header".equals(tag) || "footer".equals(tag)) {
+                extractChildren(element, paragraphs, annotate);
+            }
+        }
+    }
+
+    private void extractParagraph(final Element paragraph, final List<Paragraph> paragraphs,
+                                  final boolean annotate) {
+        if (containsMedia(paragraph)) {
+            addParagraph("media", paragraph, paragraphs);
+            return;
+        }
+        boolean hasDirectBreak = false;
+        for (final Node child : paragraph.childNodes()) {
+            if (child instanceof Element && "br".equals(((Element) child).tagName())) {
+                hasDirectBreak = true;
+                break;
+            }
+        }
+        if (!hasDirectBreak) {
+            addParagraph("paragraph", paragraph, paragraphs);
+            return;
+        }
+
+        final List<Node> nodes = new ArrayList<>();
+        for (final Node node : paragraph.childNodes()) {
+            nodes.add(node.clone());
+        }
+        if (annotate) {
+            paragraph.empty();
+            Element line = paragraph.appendElement("span").addClass("long-article-paragraph-line");
+            for (final Node node : nodes) {
+                if (node instanceof Element && "br".equals(((Element) node).tagName())) {
+                    addParagraph("paragraph", line, paragraphs);
+                    line = paragraph.appendElement("span").addClass("long-article-paragraph-line");
+                } else {
+                    line.appendChild(node);
+                }
+            }
+            addParagraph("paragraph", line, paragraphs);
+            return;
+        }
+
+        final Element holder = new Element(Tag.valueOf("span"), "");
+        Element line = holder.appendElement("span");
+        for (final Node node : nodes) {
+            if (node instanceof Element && "br".equals(((Element) node).tagName())) {
+                addParagraph("paragraph", line, paragraphs);
+                line = holder.appendElement("span");
+            } else {
+                line.appendChild(node.clone());
+            }
+        }
+        addParagraph("paragraph", line, paragraphs);
+    }
+
+    private void addParagraph(final String kind, final Element element, final List<Paragraph> paragraphs) {
+        final String snapshot = snapshot(kind, element);
+        final String normalized = normalize(snapshot);
+        if (StringUtils.isBlank(normalized)) {
+            return;
+        }
+        paragraphs.add(new Paragraph(kind, normalized, StringUtils.substring(snapshot, 0, SNAPSHOT_MAX_LENGTH), element));
+    }
+
+    private String snapshot(final String kind, final Element element) {
+        String text = element.text();
+        if ("media".equals(kind) && StringUtils.isBlank(text)) {
+            final Element media = findMedia(element);
+            if (null != media) {
+                text = StringUtils.defaultIfBlank(media.attr("alt"),
+                        StringUtils.defaultIfBlank(media.attr("title"), media.attr("src")));
+            }
+            if (StringUtils.isBlank(text)) {
+                text = "媒体";
+            }
+        }
+        return normalize(text);
+    }
+
+    private static boolean isMediaTag(final String tag) {
+        return "img".equals(tag) || "video".equals(tag) || "audio".equals(tag)
+                || "iframe".equals(tag) || "picture".equals(tag);
+    }
+
+    private static boolean containsMedia(final Element element) {
+        return null != findMedia(element);
+    }
+
+    private static Element findMedia(final Element element) {
+        for (final Element media : element.select("img,video,audio,iframe,picture")) {
+            if (!"img".equals(media.tagName()) || !media.hasClass("emoji")) {
+                return media;
+            }
+        }
+        return null;
+    }
+
+    private static Document parse(final String html) {
+        final Document document = Jsoup.parseBodyFragment(StringUtils.defaultString(html));
+        final Document.OutputSettings outputSettings = new Document.OutputSettings();
+        outputSettings.prettyPrint(false);
+        document.outputSettings(outputSettings);
+        return document;
+    }
+
+    private static String normalize(final String value) {
+        final String withoutInvisible = INVISIBLE.matcher(StringUtils.defaultString(value)).replaceAll("");
+        return WHITESPACE.matcher(withoutInvisible).replaceAll(" ").trim();
+    }
+
+    private static String sha256(final String value) {
+        try {
+            final byte[] digest = MessageDigest.getInstance("SHA-256").digest(value.getBytes(StandardCharsets.UTF_8));
+            final StringBuilder ret = new StringBuilder(64);
+            for (final byte b : digest) {
+                ret.append(String.format("%02x", b & 0xff));
+            }
+            return ret.toString();
+        } catch (final Exception e) {
+            throw new IllegalStateException("Generates paragraph id failed", e);
+        }
+    }
+}
diff --git a/src/main/java/org/b3log/symphony/service/NotificationQueryService.java b/src/main/java/org/b3log/symphony/service/NotificationQueryService.java
index 881f9440..28150955 100644
--- a/src/main/java/org/b3log/symphony/service/NotificationQueryService.java
+++ b/src/main/java/org/b3log/symphony/service/NotificationQueryService.java
@@ -774,6 +774,9 @@ public JSONObject getCommentedNotifications(final String userId, final int curre
                 commentedNotification.put(Notification.NOTIFICATION_HAS_READ, notification.optBoolean(Notification.NOTIFICATION_HAS_READ));
                 commentedNotification.put(Comment.COMMENT_T_ARTICLE_PERFECT, articlePerfect);
                 commentedNotification.put(Comment.COMMENT_SHARP_URL, buildCommentSharpURL(comment, cmtViewMode));
+                commentedNotification.put(Comment.COMMENT_TYPE, comment.optInt(Comment.COMMENT_TYPE));
+                commentedNotification.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT,
+                        comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
 
                 rslts.add(commentedNotification);
             }
@@ -851,6 +854,9 @@ public JSONObject getReplyNotifications(final String userId, final int currentPa
                 replyNotification.put(Comment.COMMENT_CREATE_TIME, comment.opt(Comment.COMMENT_CREATE_TIME));
                 replyNotification.put(Notification.NOTIFICATION_HAS_READ, notification.optBoolean(Notification.NOTIFICATION_HAS_READ));
                 replyNotification.put(Comment.COMMENT_T_ARTICLE_PERFECT, articlePerfect);
+                replyNotification.put(Comment.COMMENT_TYPE, comment.optInt(Comment.COMMENT_TYPE));
+                replyNotification.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT,
+                        comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT));
                 replyNotification.put(Notification.NOTIFICATION_DATA_TYPE, Notification.DATA_TYPE_C_REPLY);
                 final String articleId = comment.optString(Comment.COMMENT_ON_ARTICLE_ID);
                 replyNotification.put(Article.ARTICLE_T_ID, articleId);
@@ -870,6 +876,11 @@ public JSONObject getReplyNotifications(final String userId, final int currentPa
     private String buildCommentSharpURL(final JSONObject comment, final int cmtViewMode) {
         final String articleId = comment.optString(Comment.COMMENT_ON_ARTICLE_ID);
         final String commentId = comment.optString(Keys.OBJECT_ID);
+        if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE)
+                && StringUtils.isNotBlank(comment.optString(Comment.COMMENT_PARAGRAPH_ID))) {
+            return "/article/" + articleId + "?paragraph="
+                    + comment.optString(Comment.COMMENT_PARAGRAPH_ID) + "#" + commentId;
+        }
         final int cmtPage = commentQueryService.getCommentThreadPage(
                 articleId, commentId, cmtViewMode, Symphonys.ARTICLE_COMMENTS_CNT);
         return "/article/" + articleId + "?p=" + cmtPage + "&m=" + cmtViewMode + "#" + commentId;
diff --git a/src/main/resources/js/article.js b/src/main/resources/js/article.js
index c29f0f15..b4ff00cc 100644
--- a/src/main/resources/js/article.js
+++ b/src/main/resources/js/article.js
@@ -188,6 +188,7 @@ var Comment = {
       + Comment.renderThreadVoteAction(data, true)
       + Comment.renderThreadVoteAction(data, false)
       + Comment.renderThreadReportAction(data)
+      + Comment.renderThreadRemoveAction(data)
       + Comment.renderThreadHistoryAction(data)
       + Comment.renderThreadEditAction(data)
       + Comment.renderThreadReplyAction(data)
@@ -243,6 +244,15 @@ var Comment = {
       Comment.escapeJSString(data.oId) +
       '\')"><svg class="icon-reply"><use xlink:href="#reply"></use></svg></span>'
   },
+  renderThreadRemoveAction: function (data) {
+    if (!data.commentIsCurrentUser || !Label.canRemoveComment) {
+      return ''
+    }
+    return '<span aria-label="' + Comment.escapeHTML(Label.removeCommentLabel) +
+      '" class="tooltipped tooltipped-n" onclick="Comment.remove(\'' +
+      Comment.escapeJSString(data.oId) +
+      '\')"><svg class="ft-red"><use xlink:href="#remove"></use></svg></span>'
+  },
   renderThreadEditAction: function (data) {
     if (!data.commentIsCurrentUser || !Label.canUpdateComment) {
       return ''
@@ -698,6 +708,8 @@ var Comment = {
     if (!confirm('删除评论需要100积分，' + Label.confirmRemoveLabel)) {
       return false
     }
+    var commentElement = document.getElementById(id)
+    var paragraphId = commentElement ? commentElement.getAttribute('data-comment-paragraph-id') : ''
     $.ajax({
       url: Label.servePath + '/comment/' + id + '/remove',
       type: 'POST',
@@ -705,6 +717,9 @@ var Comment = {
       success: function (result, textStatus) {
         if (result.code === 0) {
           $('#' + id).remove()
+          if (paragraphId && window.LongArticleParagraphComments) {
+            window.LongArticleParagraphComments.handleRemove(paragraphId)
+          }
         } else {
           Util.alert(result.msg)
         }
@@ -854,6 +869,22 @@ var Comment = {
     }
     return Comment.focusCommentById(targetId)
   },
+  /**
+   * 隐藏回复面板
+   * @returns {Boolean}
+   */
+  _hideReplyPanel: function () {
+    var $panel = $('.editor-panel')
+    if ($panel.length === 0 || !$panel.hasClass('editor-panel--open')) {
+      return false
+    }
+    $panel.removeClass('editor-panel--open')
+    $panel.find('.wrapper').slideUp(function () {
+      $panel.fadeOut(100)
+      $('.footer').removeAttr('style')
+    })
+    return false
+  },
   /**
    * 回复面板显示／隐藏
    * @param {function} cb 面板弹出后的回掉函数
@@ -872,12 +903,13 @@ var Comment = {
       return false
     }
 
-    if ($('.footer').attr('style')) {
-      $('.editor-panel .wrapper').slideUp(function () {
-        $(".editor-panel").fadeOut(100)
-        $('.footer').removeAttr('style')
-      })
-      return false
+    var $panel = $('.editor-panel')
+    if ($panel.hasClass('editor-panel--open')) {
+      return Comment._hideReplyPanel()
+    }
+
+    if (document.body.classList.contains('long-article-page') && window.LongArticle && !window.LongArticle.isCommentsOpen()) {
+      window.LongArticle.openComments()
     }
 
     $('.cmt-anonymous').show()
@@ -892,13 +924,13 @@ var Comment = {
       removeData()
 
     // 如果 hide 初始化， focus 无效
-    if ($('.editor-panel').css('bottom') !== '0px') {
-      $('.editor-panel .wrapper').hide()
-      $('.editor-panel').css('bottom', 0)
+    if ($panel.css('bottom') !== '0px') {
+      $panel.find('.wrapper').hide()
+      $panel.css('bottom', 0)
     }
 
-    $('.editor-panel').show()
-    $('.editor-panel .wrapper').slideDown(function () {
+    $panel.show().addClass('editor-panel--open')
+    $panel.find('.wrapper').slideDown(function () {
       Comment.editor.focus()
       cb ? cb() : ''
     })
@@ -1564,12 +1596,21 @@ var Comment = {
         data('commentOriginalCommentId')
     }
 
+    var paragraphComments = window.LongArticleParagraphComments
+    var paragraphId = paragraphComments && paragraphComments.getSubmissionParagraphId
+      ? paragraphComments.getSubmissionParagraphId(requestJSONObject.commentOriginalCommentId) : ''
+    if (paragraphId) {
+      requestJSONObject.paragraphId = paragraphId
+    }
+
     var url = Label.servePath + '/comment',
       type = 'POST',
       commentId = $('#replyUseName').data('commentId')
     if (commentId) {
       url = Label.servePath + '/comment/' + commentId
       type = 'PUT'
+    } else if (paragraphId) {
+      url = Label.servePath + '/comment/paragraph'
     }
 
     $.ajax({
@@ -1605,6 +1646,10 @@ var Comment = {
           // clear reply comment
           $('#replyUseName').text('').removeData()
 
+          if (paragraphId && paragraphComments) {
+            paragraphComments.handleSubmitSuccess()
+          }
+
           // 发送后不主动调整页面位置，避免评论框收起时跳动
           if (requestJSONObject.commentOriginalCommentId) {
             Comment.focusCommentById(requestJSONObject.commentOriginalCommentId, {
@@ -1633,6 +1678,9 @@ var Comment = {
    * @param {String} userName 用户名称
    */
   reply: function (userName, id) {
+    if (window.LongArticleParagraphComments) {
+      window.LongArticleParagraphComments.activateFromComment(document.getElementById(id))
+    }
     Comment._toggleReply(function () {
       var $target = Comment.getCommentElement(id)
       if ($target.length === 0) {
diff --git a/src/main/resources/js/article.min.js b/src/main/resources/js/article.min.js
index 52d7b2c9..ede86a5c 100644
--- a/src/main/resources/js/article.min.js
+++ b/src/main/resources/js/article.min.js
@@ -1 +1 @@
-function isLetterOrDigit(e){return/\p{L}|\p{N}/u.test(e)}function normalizeHeadingIdFromString(e,t){let n=e.replace(/^#+/,"");if(t){const e=new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");n=n.replace(e,"")}let i="";for(const e of n)isLetterOrDigit(e)?i+=e:i+="-";return i=i.replace(/-{3,}/g,"--"),i.startsWith("--")&&(i="-"+i.slice(2)),i.endsWith("--")&&(i=i.slice(0,-2)+"-"),i}var Comment={editor:void 0,reactionOptions:[{value:"thumbsup",emoji:"👍"},{value:"thumbsdown",emoji:"👎"},{value:"check",emoji:"✅"},{value:"cross",emoji:"❌"},{value:"star",emoji:"⭐"},{value:"heart",emoji:"❤️"},{value:"fire",emoji:"🔥"},{value:"party",emoji:"🎉"},{value:"laugh",emoji:"😂"},{value:"wow",emoji:"😮"},{value:"clap",emoji:"👏"},{value:"hundred",emoji:"💯"},{value:"rocket",emoji:"🚀"},{value:"salute",emoji:"🖖"},{value:"handshake",emoji:"🤝"},{value:"raisedhands",emoji:"🙌"},{value:"mindblown",emoji:"🤯"},{value:"thinking",emoji:"🤔"},{value:"eyes",emoji:"👀"},{value:"cry",emoji:"😢"},{value:"angry",emoji:"😡"},{value:"pray",emoji:"🙏"},{value:"brokenheart",emoji:"💔"},{value:"skull",emoji:"💀"},{value:"clown",emoji:"🤡"},{value:"poop",emoji:"💩"},{value:"heartonfire",emoji:"❤️‍🔥"},{value:"plus",emoji:"➕1️⃣"}],isWideReactionOption:function(e){return"plus"===e.value||"heartonfire"===e.value},escapeHTML:function(e){return $("<div>").text(e||"").html()},renderCommentAuthorName:function(e){var t=Comment.escapeHTML(e.commentAuthorName);return e.commentAuthorNickName?Comment.escapeHTML(e.commentAuthorNickName)+" ("+t+")":t},renderOriginalAuthorLabel:function(e){var t=e.commentOriginalAuthorNickName||e.commentOriginalAuthorName;return t?'<span class="comment-origin-inline">回复 @'+Comment.escapeHTML(t)+"</span>":""},escapeJSString:function(e){return String(e||"").replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/\r/g,"\\r").replace(/\n/g,"\\n")},getCommentHashId:function(e){var t=String(e||"").indexOf("#");return t<0?"":String(e).substring(t+1)},getCurrentPageNum:function(){var e=window.location.search.match(/[?&]p=(\d+)/);return e?parseInt(e[1]):1},getSearchValue:function(e,t){for(var n=String(e||"").replace(/^\?/,"").split("&"),i=0;i<n.length;i++){var o=n[i].split("=");if(o[0]===t)return o.length>1?o[1]:""}return""},normalizeCommentSearch:function(e){for(var t=["p","m","sort","author"],n=[],i=0;i<t.length;i++){var o=Comment.getSearchValue(e,t[i]);"p"===t[i]&&""===o&&(o="1"),"m"===t[i]&&""===o&&(o=String(Label.userCommentViewMode)),n.push(t[i]+"="+o)}return n.join("&")},isSameCommentPage:function(e){var t=document.createElement("a");return t.href=e,t.pathname===window.location.pathname&&Comment.normalizeCommentSearch(t.search)===Comment.normalizeCommentSearch(window.location.search)},getCommentElement:function(e){var t=document.getElementById(e);return t?$(t):$()},ensureThread:function(e,t){var n=e.find(".comment-thread").first();return 0!==n.length||(n=$('<div class="comment-thread" data-root-id="'+Comment.escapeHTML(t)+'"><div class="comment-thread__list"></div></div>'),e.find(".comment-action").before(n)),n},renderThreadAction:function(e){return'<div class="comment-thread__actions comment-action__bar"><div class="comment-action__left">'+Comment.renderReactionBar(e.oId,e.reactionSummary,e.currentUserReaction)+'</div><span class="action-btns">'+Comment.renderThreadThankAction(e)+Comment.renderThreadVoteAction(e,!0)+Comment.renderThreadVoteAction(e,!1)+Comment.renderThreadReportAction(e)+Comment.renderThreadHistoryAction(e)+Comment.renderThreadEditAction(e)+Comment.renderThreadReplyAction(e)+"</span></div>"},renderThreadThankAction:function(e){var t=Comment.escapeJSString(e.oId),n=Comment.escapeJSString(e.commentThankLabel),i=parseInt(e.commentAnonymous||0),o=parseInt(e.rewardedCnt||e.commentThankCnt||0),r=e.rewarded?" ft-red":"",a="";return e.rewarded||(a=Label.canThankComment?" onclick=\"Comment.thank('"+t+"', '"+Comment.escapeJSString(Label.csrfToken)+"', '"+n+"', "+i+', this)"':' onclick="Article.permissionTip(Label.noPermissionLabel)"'),'<span class="tooltipped tooltipped-n'+r+'" aria-label="'+Comment.escapeHTML(Label.thankLabel)+'"'+a+'><svg class="fn-text-top icon-heart"><use xlink:href="#heart"></use></svg> '+o+"</span>"},renderThreadVoteAction:function(e,t){var n=Comment.escapeJSString(e.oId),i=parseInt(e.commentVote)===(t?0:1),o=parseInt(t?e.commentGoodCnt||0:e.commentBadCnt||0),r=t?Label.upLabel:Label.downLabel,a=t?"thumbs-up":"thumbs-down",s=t?"voteUp":"voteDown",l=(t?Label.canGoodComment:Label.canBadComment)?"Article."+s+"('"+n+"', 'comment', this)":"Article.permissionTip(Label.noPermissionLabel)";return'<span class="tooltipped tooltipped-n'+(i?" ft-red":"")+'" aria-label="'+Comment.escapeHTML(r)+'" onclick="'+l+'"><svg class="icon-'+a+'"><use xlink:href="#'+a+'"></use></svg> '+o+"</span>"},renderThreadReportAction:function(e){var t=Comment.escapeJSString(e.oId);return'<span aria-label="'+Comment.escapeHTML(Label.reportLabel||"")+"\" class=\"tooltipped tooltipped-n\" onclick=\"$('#reportDialog').data('type', 1).data('id', '"+t+"').dialog('open')\"><svg><use xlink:href=\"#icon-report\"></use></svg></span>"},renderThreadReplyAction:function(e){return Label.isLoggedIn&&Label.canAddComment?'<span aria-label="'+Comment.escapeHTML(Label.replyLabel)+'" class="icon-reply-btn tooltipped tooltipped-n" onclick="Comment.reply(\''+Comment.escapeJSString(e.commentAuthorName)+"', '"+Comment.escapeJSString(e.oId)+'\')"><svg class="icon-reply"><use xlink:href="#reply"></use></svg></span>':""},renderThreadEditAction:function(e){return e.commentIsCurrentUser&&Label.canUpdateComment?'<span aria-label="'+Comment.escapeHTML(Label.editLabel)+'" class="comment-edit-action tooltipped tooltipped-n" onclick="Comment.edit(\''+Comment.escapeJSString(e.oId)+'\')"><svg><use xlink:href="#edit"></use></svg></span>':""},renderThreadHistoryAction:function(e){return!Label.canViewCommentHistory||parseInt(e.commentRevisionCount||0)<2?"":'<span aria-label="'+Comment.escapeHTML(Label.historyLabel)+'" class="comment-history-action tooltipped tooltipped-n" onclick="Article.revision(\''+Comment.escapeJSString(e.oId)+'\', \'comment\')"><svg class="icon-history"><use xlink:href="#history"></use></svg></span>'},updateCommentHistoryAction:function(e,t){var n=Comment.getCommentElement(e);if(n.hasClass("comment-thread__reply")){var i=n.find("> .comment-thread__body > .comment-thread__actions > .action-btns");if(i.children(".comment-history-action").remove(),!(t<2)){var o=Comment.renderThreadHistoryAction({oId:e,commentRevisionCount:t}),r=i.children(".comment-edit-action");1===r.length?r.before(o):i.append(o)}}else n.find(".icon-history").parent().toggle(t>=2)},updateEditedCommentContent:function(e,t){var n=Comment.getCommentElement(e);n.hasClass("comment-thread__reply")?n.find("> .comment-thread__body > .comment-thread__content").html(t):n.find("> .fn-flex > .fn-flex-1 > .vditor-reset").html(t)},getThreadReplyDepth:function(e){var t=parseInt(e.commentThreadDepth,10);if(!isNaN(t)&&t>=0)return t;var n=document.getElementById(e.commentOriginalCommentId);return n&&$(n).hasClass("comment-thread__reply")?(t=parseInt($(n).attr("data-thread-depth"),10),isNaN(t)?1:t+1):0},renderThreadReplyClass:function(e){return"comment-thread__reply"+(e>0?" comment-thread__reply--nested":"")},renderThreadReplyStyle:function(e){return' data-thread-depth="'+e+'" style="--comment-thread-indent:'+28*e+'px"'},renderThreadReply:function(e){var t=Comment.getThreadReplyDepth(e);return'<div id="'+Comment.escapeHTML(e.oId)+'" class="'+Comment.renderThreadReplyClass(t)+'"'+Comment.renderThreadReplyStyle(t)+'><a rel="nofollow" href="'+Label.servePath+"/member/"+Comment.escapeHTML(e.commentAuthorName)+'" class="comment-thread__avatar" aria-label="'+Comment.escapeHTML(e.commentAuthorName)+'" style="background-image:url(\''+Comment.escapeHTML(e.commentAuthorThumbnailURL)+'\')"></a><div class="comment-thread__body"><div class="comment-thread__meta"><a rel="nofollow" href="'+Label.servePath+"/member/"+Comment.escapeHTML(e.commentAuthorName)+'">'+Comment.renderCommentAuthorName(e)+"</a>"+Comment.renderOriginalAuthorLabel(e)+'<span class="ft-fade"> • '+Comment.escapeHTML(e.timeAgo)+'</span></div><div class="comment-thread__content vditor-reset">'+e.commentContent+"</div>"+Comment.renderThreadAction(e)+"</div></div>"},renderThreadReplies:function(e){for(var t="",n=0;n<e.length;n++)t+=Comment.renderThreadReply(e[n]);return t},renderThreadPageButton:function(e,t,n){return'<button type="button" onclick="Comment.showThreadReplies(\''+Comment.escapeJSString(e)+"', this, "+t+')">'+Comment.escapeHTML(n)+"</button>"},renderThreadPagination:function(e,t,n){if(e.find(".comment-thread__pager").remove(),n&&!(parseInt(n.paginationPageCount||0)<=1)){var i=parseInt(n.paginationCurrentPageNum||1),o=parseInt(n.paginationPageCount||1),r=['<div class="comment-thread__pager">'];i>1&&r.push(Comment.renderThreadPageButton(t,i-1,"上一页")),r.push('<span class="comment-thread__page-info">',i,"/",o,"</span>"),i<o&&r.push(Comment.renderThreadPageButton(t,i+1,"下一页")),r.push("</div>"),e.append(r.join(""))}},getCommentQueryExtra:function(){return Label.commentQueryExtra||""},normalizeReactionSummary:function(e){if(Array.isArray(e))return e;if("string"!=typeof e||""===e)return[];try{var t=JSON.parse(e);return Array.isArray(t)?t:[]}catch(e){return[]}},getReactionMap:function(e){e=Comment.normalizeReactionSummary(e);for(var t={},n=0;n<e.length;n++)t[e[n].value]=e[n];return t},escapeReactionHtml:function(e){return String(e||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},getReactionUserDetails:function(e){return e&&Array.isArray(e.userDetails)?e.userDetails:[]},renderReactionTip:function(e){var t=Comment.getReactionUserDetails(e);if(0===t.length)return"";for(var n=[],i=0;i<t.length;i++){var o=t[i]||{},r=o.userName||"",a=o.avatarURL||"";if(""!==r&&""!==a){var s=o.displayName||r;n.push('<a class="reaction-pill__tip-link" href="',Label.servePath,"/member/",encodeURIComponent(r),'" aria-label="',Comment.escapeReactionHtml(s),'" title="',Comment.escapeReactionHtml(s),'">'),n.push('<img class="reaction-pill__tip-avatar" src="',Comment.escapeReactionHtml(a),'" alt="',Comment.escapeReactionHtml(s),'">'),n.push("</a>")}}return 0===n.length?"":'<span class="reaction-pill__tip tip-text">'+n.join("")+"</span>"},renderReactionSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r<Comment.reactionOptions.length;r++){var a=Comment.reactionOptions[r],s=i[a.value]||{},l=s.count||0;if(!(l<1)){var c=n===a.value?" selected":"",m=Comment.renderReactionTip(s);""!==m&&o.push('<span class="reaction-pill-wrapper tip-wrapper">'),o.push('<button type="button" class="reaction-pill reaction-pill--summary',c,'" data-reaction-value="',a.value,'"'),o.push(" onclick=\"Comment.react('",e,"', '",a.value,"', this)\">"),o.push('<span class="reaction-pill__emoji">',a.emoji,"</span>"),o.push('<span class="reaction-pill__count">',l,"</span>"),o.push("</button>"),""!==m&&o.push(m,"</span>")}}return o.join("")},renderReactionPanel:function(e,t){for(var n=['<div class="reaction-popover">'],i=0;i<Comment.reactionOptions.length;i++){var o=Comment.reactionOptions[i],r=Comment.isWideReactionOption(o)?" reaction-option--wide":"",a=t===o.value?" selected":"";n.push('<button type="button" class="reaction-option',r,a,'" onclick="Comment.react(\'',e,"', '",o.value,"', this)\">"),n.push('<span class="reaction-option__emoji">',o.emoji,"</span>"),n.push("</button>")}return n.push("</div>"),n.join("")},renderReactionSummaryWidget:function(e,t,n){var i=Comment.renderReactionSummaryItems(e,t,n),o=['<div class="comment-reaction comment-reaction--summary" data-target-id="',e,'" data-current-user-reaction="',n||"",'">'];return o.push('<div class="reaction-widget__summary">'),o.push('<div class="reaction-widget__items">',i,"</div></div></div>"),o.join("")},renderReactionTriggerWidget:function(e,t,n){var i=n?" is-open":"",o=['<div class="comment-reaction comment-reaction--trigger',i,'" data-target-id="',e,'" data-current-user-reaction="',t||"",'">'];return o.push('<button type="button" class="reaction-trigger',i,'" aria-label="添加反应" onclick="Comment.toggleReactionPanel(this)">'),o.push('<span class="reaction-trigger__icon">🙂</span>'),o.push("</button>"),o.push(Comment.renderReactionPanel(e,t)),o.push("</div>"),o.join("")},renderReactionBar:function(e,t,n,i,o){if("summary"===o)return Comment.renderReactionSummaryWidget(e,t,n);if("trigger"===o)return Comment.renderReactionTriggerWidget(e,n,i);var r=i?" is-open":"",a=Comment.renderReactionSummaryItems(e,t,n),s=['<div class="comment-reaction comment-reaction--combined',r,'" data-target-id="',e,'" data-current-user-reaction="',n||"",'">'];return s.push('<div class="reaction-widget__summary">'),s.push('<div class="reaction-widget__items">',a,"</div>"),s.push('<button type="button" class="reaction-trigger',r,'" aria-label="添加反应" onclick="Comment.toggleReactionPanel(this)">'),s.push('<span class="reaction-trigger__icon">🙂</span>'),s.push("</button></div>"),s.push(Comment.renderReactionPanel(e,n)),s.push("</div>"),s.join("")},getReactionWidgets:function(e){return $('.comment-reaction[data-target-id="'+e+'"]')},getInteractiveReactionWidgets:function(e){return $('.comment-reaction--combined[data-target-id="'+e+'"], .comment-reaction--trigger[data-target-id="'+e+'"]')},mountReactionTrigger:function(e,t,n,i){if(0!==e.length){var o=Comment.renderReactionBar(t,[],n,i,"trigger"),r=e.find('.comment-reaction--trigger[data-target-id="'+t+'"]');r.length>0?r.replaceWith(o):e.prepend(o)}},collectReactionShells:function(e){var t=e?$(e):$(document);return t.hasClass("comment-reaction-shell")?t.add(t.find(".comment-reaction-shell")):t.find(".comment-reaction-shell")},initReactionWidgets:function(e){Comment.collectReactionShells(e).each(function(){var e=$(this),t=e.attr("data-target-id"),n=e.attr("data-summary"),i=e.attr("data-current-user-reaction")||"",o=e.closest(".comment-action__bar").find(".action-btns").first(),r=e.closest(".comment-action__left").length>0&&o.length>0,a=Comment.renderReactionBar(t,n,i,!1,r?"summary":"combined");e.replaceWith(a),r&&Comment.mountReactionTrigger(o,t,i,!1)})},closeReactionPanels:function(e){var t=e?$(e):$(document),n=".comment-reaction--combined, .comment-reaction--trigger";(t.is(n)?t.add(t.find(n)):t.find(n)).removeClass("is-open")},toggleReactionPanel:function(e){var t=$(e).closest(".comment-reaction"),n=t.attr("data-target-id"),i=!t.hasClass("is-open");Comment.closeReactionPanels(),i&&Comment.getInteractiveReactionWidgets(n).addClass("is-open")},bindReactionPanels:function(){$(document).off("click.commentReaction").on("click.commentReaction",function(e){0===$(e.target).closest(".comment-reaction").length&&Comment.closeReactionPanels()})},updateReactionBars:function(e,t,n,i){var o=Comment.getReactionWidgets(e),r="boolean"==typeof i?i:Comment.getInteractiveReactionWidgets(e).first().hasClass("is-open");o.each(function(){var i=$(this),o="combined";i.hasClass("comment-reaction--summary")?o="summary":i.hasClass("comment-reaction--trigger")&&(o="trigger"),i.replaceWith(Comment.renderReactionBar(e,t,n,r,o))})},updateReactionFromChannel:function(e){var t=e.targetId||e.commentId;if(t){var n=Comment.getReactionWidgets(t);if(0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";Comment.updateReactionBars(t,e.summary||[],i,!1)}}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".comment-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/comment/reaction",type:"POST",data:JSON.stringify({commentId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?Comment.updateReactionBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})},report:function(e){var t=$(e);t.attr("disabled","disabled").css("opacity","0.3"),$.ajax({url:Label.servePath+"/report",type:"POST",cache:!1,data:JSON.stringify({reportDataId:$("#reportDialog").data("id"),reportDataType:$("#reportDialog").data("type"),reportType:$("input[name=report]:checked").val(),reportMemo:$("#reportTextarea").val()}),complete:function(e){t.removeAttr("disabled").css("opacity","1"),0===e.responseJSON.code?(Util.alert(Label.reportSuccLabel),$("#reportTextarea").val(""),$("#reportDialog").dialog("close")):Util.alert(e.responseJSON.msg)}})},accept:function(e,t,n){confirm(e)&&$.ajax({url:Label.servePath+"/comment/accept",type:"POST",headers:{csrfToken:Label.csrfToken},cache:!1,data:JSON.stringify({commentId:t}),success:function(e){0===e.code?($(n).closest("li").addClass("cmt-perfect"),$(n).remove()):Util.alert(e.msg)}})},remove:function(e){if(!confirm("删除评论需要100积分，"+Label.confirmRemoveLabel))return!1;$.ajax({url:Label.servePath+"/comment/"+e+"/remove",type:"POST",cache:!1,success:function(t,n){0===t.code?$("#"+e).remove():Util.alert(t.msg)}})},exchangeCmtSort:function(e){e=0===e?1:0;var t=Comment.getCommentQueryExtra().replace("&sort=hot","");window.location.href=window.location.pathname+"?m="+e+t+"#comments"},_bgFade:function(e,t){return 0!==e.length&&(!1!==(t=t||{}).scroll&&$(window).scrollTop(e[0].offsetTop-48),"comments"!==e.attr("id")&&!1!==t.highlight&&($(".comment-focus-highlight").removeClass("comment-focus-highlight"),e.addClass("comment-focus-highlight"),setTimeout(function(){e.removeClass("comment-focus-highlight")},1800),!0))},edit:function(e){Comment._toggleReply(),$(".cmt-anonymous").hide(),$.ajax({url:Label.servePath+"/comment/"+e+"/content",type:"GET",cache:!1,success:function(e,t){0===e.code&&Comment.editor.setValue(e.commentContent)}}),$("#replyUseName").html('<a href="javascript:void(0)" onclick="Comment._bgFade($(\'#'+e+'\'))" class="ft-a-title"><svg><use xlink:href="#edit"></use></svg> '+Label.commonUpdateCommentPermissionLabel+"</a>").data("commentId",e)},goComment:function(e){var t=Comment.getCommentHashId(e);return(!t||!Comment.focusCommentById(t))&&(t&&Comment.isSameCommentPage(e)?(Comment.expandThreadForComment(t),!1):(window.location=e,!1))},focusCommentElement:function(e,t){return Comment._bgFade(e,t)},focusCommentById:function(e,t){var n=Comment.getCommentElement(e);return 1===n.length&&Comment.focusCommentElement(n,t)},focusLocationHash:function(){var e=Comment.getCommentHashId(window.location.hash);return!!e&&(!!Comment.focusCommentById(e)||Comment.expandThreadForComment(e))},expandThreadForComment:function(e){return $.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,anchorCommentId:e,userCommentViewMode:Label.userCommentViewMode,sort:Label.commentSort,author:Label.commentAuthorFilter?"1":""}),success:function(t){if(0!==t.code)return!1;Comment.renderThreadResponse(t.commentThreadRootId,t.commentThreadReplies||[],e,{pagination:t.pagination})}}),!0},renderThreadResponse:function(e,t,n,i){i=i||{};var o=Comment.getCommentElement(e);if(1!==o.length)return!1;var r=Comment.ensureThread(o,e);return r.find(".comment-thread__list").html(Comment.renderThreadReplies(t)),r.addClass("comment-thread--expanded"),r.find(".comment-thread__more").remove(),Comment.renderThreadPagination(r,e,i.pagination),Comment.initReactionWidgets(r),Util.listenUserCard(),Util.parseHljs(),Util.parseMarkdown(),!1===i.focus||!n||Comment.focusCommentById(n)},_toggleReply:function(e){return Label.isLoggedIn?0===$("#commentContent").length?(Util.alert(Label.notAllowCmtLabel),!1):"false"===$(this).data("hasPermission")?(Article.permissionTip(Label.noPermissionLabel),!1):$(".footer").attr("style")?($(".editor-panel .wrapper").slideUp(function(){$(".editor-panel").fadeOut(100),$(".footer").removeAttr("style")}),!1):($(".cmt-anonymous").show(),$(".footer").css("margin-bottom",$(".editor-panel > .wrapper").outerHeight()+"px"),$("#replyUseName").html('<a href="javascript:void(0)" onclick="Comment._bgFade($(\'.article-content\'))" class="ft-a-title"><svg><use xlink:href="#reply-to"></use></svg>'+$(".article-title").text().replace(/</g,"&lt;").replace(/>/g,"&gt;")+"</a>").removeData(),"0px"!==$(".editor-panel").css("bottom")&&($(".editor-panel .wrapper").hide(),$(".editor-panel").css("bottom",0)),$(".editor-panel").show(),void $(".editor-panel .wrapper").slideDown(function(){Comment.editor.focus(),e&&e()})):(Util.needLogin(),!1)},loadEmojis:function(){let e=Comment.getEmojis(),t="";for(let n=0;n<e.length;n++)t+=`<button onclick="Comment.editor.setValue(Comment.editor.getValue() + '![图片表情](${e[n]})')">\n    <div class="divX"><svg onclick='Comment.delEmoji("${e[n]}");event.cancelBubble =true;' style="width: 15px; height: 15px;"><use xlink:href="#delIcon"></use></svg></div>\n    <img style='max-height: 50px' class="vditor-emojis__icon" src="${e[n]}">\n</button>`;$("#emojis").html(t)},confirmed:!1,delEmoji:function(e){if(!0===Comment.confirmed||confirm("确定要删除该表情包吗？")){Comment.confirmed=!0;let t=Comment.getEmojis();for(let n=0;n<t.length;n++)t[n]===e&&t.splice(n,1);t.reverse(),$.ajax({url:Label.servePath+"/api/cloud/sync",method:"POST",data:JSON.stringify({gameId:"emojis",data:t}),headers:{csrfToken:Label.csrfToken},async:!1,success:function(e){0===e.code?(Util.notice("success",1500,"表情包删除成功。"),Comment.loadEmojis(),setTimeout(function(){$("#emojiBtn").click()},50)):Util.notice("warning",1500,"表情包删除失败："+e.msg)}})}},listenUploadEmojis:function(){$("#uploadEmoji").fileupload({acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,maxFileSize:5242880,multipart:!0,pasteZone:null,dropZone:null,url:Label.servePath+"/upload",paramName:"file[]",add:function(e,t){if(ext=t.files[0].type.split("/")[1],window.File&&window.FileReader&&window.FileList&&window.Blob){var n=new FileReader;n.readAsArrayBuffer(t.files[0]),n.onload=function(e){var n=new Uint8Array(e.target.result.slice(0,11));isImage(n)?e.target.result.byteLength>5242880?Util.alert("图片过大 (最大限制 5M)"):t.submit():Util.alert("只允许上传图片!")}}else t.submit()},formData:function(e){return e.serializeArray()},submit:function(e,t){},done:function(e,t){var n={result:{key:t.result.data.succMap[Object.keys(t.result.data.succMap)[0]]}};Comment.addEmoji(n.result.key)},fail:function(e,t){Util.alert("Upload error: "+t.errorThrown)}})},fromURL:function(){Util.alert('<div class="form fn__flex-column">\n<label>\n  <div class="ft__smaller ft__fade" style="float: left">请输入图片的URL</div>\n  <div class="fn-hr5 fn__5"></div>\n  <input type="text" id="fromURL">\n</label>\n<div class="fn-hr5"></div>\n<div class="fn__flex" style="margin-top: 15px; justify-content: flex-end;">\n  <button class="btn btn--confirm" onclick=\'Comment.addEmoji($("#fromURL").val());Util.closeAlert();\'>导入</button>\n</div>\n</div>',"从URL导入表情包"),$("#fromURL").focus(),$("#fromURL").unbind(),$("#fromURL").bind("keypress",function(e){"13"==e.keyCode&&(Comment.addEmoji($("#fromURL").val()),Util.closeAlert())})},addEmoji:function(){if(0!==arguments.length){var e=[];if(1===arguments.length&&Array.isArray(arguments[0]))e=arguments[0];else for(var t=0;t<arguments.length;t++)arguments[t]&&e.push(arguments[t]);(e=e.map(function(e){return String(e||"").trim()}).filter(Boolean)).length&&(EmojiGroups.openCollectDialog(e),$("details[open]").removeAttr("open"))}},getEmojis:function(){let e;$.ajax({url:Label.servePath+"/api/cloud/get",method:"POST",data:JSON.stringify({gameId:"emojis"}),headers:{csrfToken:Label.csrfToken},async:!1,success:function(t){e=0===t.code&&""!==t.data?Util.parseArray(t.data):[]}});try{e.reverse()}catch(e){return[]}return e},_initHotKey:function(){if(!Label.userKeyboardShortcutsStatus||"1"===Label.userKeyboardShortcutsStatus)return!1;$(document).bind("keyup","x",function(){return Util.prevKey="x",setTimeout(function(){Util.prevKey=void 0},1e3),!1}).bind("keyup","v",function(){return Util.prevKey="v",setTimeout(function(){Util.prevKey=void 0},1e3),!1}).bind("keydown","r",function(e){return Util.prevKey?"v"===Util.prevKey?$("#articleRewardContent .icon-points").click():1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-reply").parent().click():Comment._toggleReply(),!1}).bind("keyup","h",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-heart").parent().click(),!1}).bind("keyup","t",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-down").parent().click(),!1}).bind("keyup","c",function(){return 1===$("#comments .list > ul > li.focus .comment-info .icon-reply-to").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-info .icon-reply-to").parent().click(),!1}).bind("keyup","m",function(){return 1===$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").click(),!1}).bind("keyup","a",function(){return"x"===Util.prevKey&&1===$("#comments .list > ul > li.focus .icon-setting").parent().length&&(window.location=$("#comments .list > ul > li.focus .icon-setting").parent().attr("href")),!1}).bind("keyup","m",function(){return"v"===Util.prevKey&&Article.toggleToc(),!1}).bind("keyup","h",function(){return"v"===Util.prevKey&&$("#thankArticle").click(),!1}).bind("keyup","t",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-down").parent().click(),!1}).bind("keyup","i",function(){return"v"===Util.prevKey&&$(".article-header .icon-view").parent().click(),!1}).bind("keyup","c",function(){return"v"===Util.prevKey&&$(".article-header .icon-star").parent().click(),!1}).bind("keyup","l",function(){return"v"===Util.prevKey&&$(".article-header .icon-history").parent().click(),!1}).bind("keyup","e",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-edit").parent().length&&(window.location=$(".article-actions .icon-edit").parent().attr("href")),!1}).bind("keyup","s",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-chevron-up").length&&Article.stick(Label.articleOId),!1}).bind("keyup","a",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-setting").parent().length&&(window.location=$(".article-actions .icon-setting").parent().attr("href")),!1}).bind("keyup","p",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=prev]").length&&(window.location=$(".article-header a[rel=prev]").attr("href")),!1}).bind("keyup","n",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=next]").length&&(window.location=$(".article-header a[rel=next]").attr("href")),!1})},init:function(){if($("#sendComment").click(function(){Comment._toggleReply()}),Comment.focusLocationHash(),this._initHotKey(),$.pjax({selector:"#comments .pagination a",container:"#comments",show:"",cache:!1,storage:!0,titleSuffix:"",callback:function(){Comment.initReactionWidgets($("#comments")),Util.parseMarkdown(),Util.parseHljs(),Util.listenUserCard(),Comment.focusLocationHash()}}),NProgress.configure({showSpinner:!1}),$("#comments").bind("pjax.start",function(){NProgress.start()}),$("#comments").bind("pjax.end",function(){NProgress.done()}),ArticleReaction.bindPanels(),ArticleReaction.initWidgets(),Comment.bindReactionPanels(),Comment.initReactionWidgets($("#comments")),!Label.isLoggedIn||!document.getElementById("commentContent"))return!1;Comment.editor=Util.newVditor({id:"commentContent",cache:!0,preview:{mode:"editor"},resize:{enable:!0,position:"top"},height:200,placeholder:Label.commentEditorPlaceholderLabel,ctrlEnter:function(){Comment.add(Label.articleOId,Label.csrfToken,document.getElementById("articleCommentBtn"))},esc:function(){$(".editor-hide").click()}})},thank:function(e,t,n,i,o){if(!Label.isLoggedIn)return Util.needLogin(),!1;if(0===i&&!confirm(n))return!1;var r={commentId:e};$.ajax({url:Label.servePath+"/comment/thank",type:"POST",headers:{csrfToken:t},cache:!1,data:JSON.stringify(r),error:function(e,t,n){Util.alert(n)},success:function(e,t){if(0===e.code){$(o).removeAttr("onclick");var n=$('<svg class="ft-red"><use xlink:href="#heart"></use></svg>'),i=$(o).offset().top,r=$(o).offset().left;n.css({"z-index":9999,top:i,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(n),n.animate({left:r-150,top:i-60,opacity:0},1e3,function(){var e=parseInt($(o).text());$(o).html('<svg><use xlink:href="#heart"></use></svg> '+(e+1)).addClass("ft-red"),n.remove()})}else Util.alert(e.msg)}})},showReply:function(e,t,n){var i=$(t).closest("li").find("."+n);if("comment-get-comment"===n){if(0!==i.find("li").length)return i.html(""),!1}else if(0===$(t).find(".icon-chevron-down").length)return $(t).find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down").find("use").attr("xlink:href","#chevron-down"),i.html(""),!1;if("0.3"===$(t).css("opacity"))return!1;var o="/comment/replies";"comment-get-comment"===n&&(o="/comment/original"),$.ajax({url:Label.servePath+o,type:"POST",data:JSON.stringify({commentId:e,userCommentViewMode:Label.userCommentViewMode}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(e,n){if(0!==e.code)return Util.alert(e.msg),!1;var o=e.commentReplies,r="";o instanceof Array||(o=[o]),0===o.length&&(r='<li class="ft-red">'+Label.removedLabel+"</li>");for(var a=0;a<o.length;a++){var s=o[a];r+='<li><div class="fn-flex">',r+='<a rel="nofollow" href="/member/'+s.commentAuthorName+'">',r+='<div class="avatar tooltipped tooltipped-se" aria-label="'+s.commentAuthorName+'" style="background-image:url('+s.commentAuthorThumbnailURL+')"></div>',r+="</a>",r+='<div class="fn-flex-1"><div class="comment-info ft-smaller">',r+='<a class="ft-gray" rel="nofollow" href="/member/'+s.commentAuthorName+'">',r+=Comment.renderCommentAuthorName(s),r+="</a>",r+=Comment.renderOriginalAuthorLabel(s),r+='<span class="ft-fade"> • '+s.timeAgo,s.rewardedCnt>0&&(r+='<span aria-label="'+(s.rewarded?Label.thankedLabel:Label.thankLabel+" "+s.rewardedCnt)+'" class="tooltipped tooltipped-n '+(s.rewarded?"ft-red":"ft-fade")+'"> <svg class="fn-text-top"><use xlink:href="#heart"></use></svg> '+s.rewardedCnt+"</span> "),r+="</span>",r+='</div><div class="vditor-reset comment">'+s.commentContent+"</div>"+Comment.renderReactionBar(s.oId,s.reactionSummary,s.currentUserReaction)+"</div></div></li>"}i.html("<ul>"+r+"</ul>"),Util.parseHljs(),Util.parseMarkdown(),$(t).find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up").find("use").attr("xlink:href","#chevron-up")},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},showThreadReplies:function(e,t,n){if("0.3"===$(t).css("opacity"))return!1;$.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,paginationCurrentPageNum:n||1}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(t){if(0!==t.code)return Util.alert(t.msg),!1;Comment.renderThreadResponse(t.commentThreadRootId||e,t.commentThreadReplies||[],null,{focus:!1,pagination:t.pagination})},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},add:function(e,t,n){var i={articleId:e,commentAnonymous:$("#commentAnonymous").prop("checked"),commentVisible:$("#commentVisible").prop("checked"),commentContent:Comment.editor.getValue(),userCommentViewMode:Label.userCommentViewMode};$("#replyUseName").data("commentOriginalCommentId")&&(i.commentOriginalCommentId=$("#replyUseName").data("commentOriginalCommentId"));var o=Label.servePath+"/comment",r="POST",a=$("#replyUseName").data("commentId");a&&(o=Label.servePath+"/comment/"+a,r="PUT"),$.ajax({url:o,type:r,headers:{csrfToken:t},cache:!1,data:JSON.stringify(i),beforeSend:function(){$(n).attr("disabled","disabled").css("opacity","0.3")},success:function(e,t){$(n).removeAttr("disabled").css("opacity","1"),0===e.code?(a&&(Comment.updateEditedCommentContent(a,e.commentContent),Comment.updateCommentHistoryAction(a,parseInt(e.commentRevisionCount||0))),i.commentOriginalCommentId&&Util.setUnreadNotificationCount(),Comment.editor.setValue(""),$(".editor-hide").click(),$("#replyUseName").text("").removeData(),i.commentOriginalCommentId&&Comment.focusCommentById(i.commentOriginalCommentId,{scroll:!1})):$("#addCommentTip").addClass("error").html("<ul><li>"+e.msg+"</li></ul>")},error:function(e){$("#addCommentTip").addClass("error").html("<ul><li>"+e.statusText+"</li></ul>")},complete:function(){$(n).removeAttr("disabled").css("opacity","1"),setTimeout(Util.listenUserCard,1e3)}})},reply:function(e,t){Comment._toggleReply(function(){var e=Comment.getCommentElement(t);0!==e.length&&$(window).height()-(e[0].offsetTop-$(window).scrollTop()+e.outerHeight())<$(".editor-panel .wrapper").outerHeight()&&$(window).scrollTop(e[0].offsetTop-($(window).height()-$(".editor-panel .wrapper").outerHeight()-e.outerHeight()))});var n="",i=Comment.escapeHTML(e),o=Comment.getCommentElement(t),r=o.find(">.fn-flex>div>a").clone();0===r.length&&(r=o.find(">.fn-flex .avatar").clone()),0===r.length?n='<a rel="nofollow" href="#'+Comment.escapeHTML(t)+'" class="ft-a-title" onclick="Comment._bgFade($(\'#'+Comment.escapeJSString(t)+'\'))"><svg><use xlink:href="#reply-to"></use></svg> '+i+"</a>":r.is("a")?(r.addClass("ft-a-title").attr("href","#"+t).attr("onclick",'Comment._bgFade($("#'+t+'"))'),r.find("div").removeClass("avatar").addClass("avatar-small").after(" "+i).before('<svg><use xlink:href="#reply-to"></use></svg> '),n=r[0].outerHTML):(r.removeClass("avatar").addClass("avatar-small"),n='<a rel="nofollow" href="#'+t+'" class="ft-a-title" onclick="Comment._bgFade($(\'#'+t+'\'))"><svg><use xlink:href="#reply-to"></use></svg> '+r[0].outerHTML+" "+i+"</a>"),$("#replyUseName").html(n).data("commentOriginalCommentId",t)}},ArticleReaction={renderSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r<Comment.reactionOptions.length;r++){var a=Comment.reactionOptions[r],s=i[a.value]||{},l=s.count||0;if(!(l<1)){var c=n===a.value?" selected":"",m=Comment.renderReactionTip(s);""!==m&&o.push('<span class="reaction-pill-wrapper tip-wrapper">'),o.push('<button type="button" class="reaction-pill reaction-pill--summary',c,'" data-reaction-value="',a.value,'"'),o.push(" onclick=\"ArticleReaction.react('",e,"', '",a.value,"', this)\">"),o.push('<span class="reaction-pill__emoji">',a.emoji,"</span>"),o.push('<span class="reaction-pill__count">',l,"</span>"),o.push("</button>"),""!==m&&o.push(m,"</span>")}}return o.join("")},renderPanel:function(e,t){for(var n=['<div class="reaction-popover">'],i=0;i<Comment.reactionOptions.length;i++){var o=Comment.reactionOptions[i],r=Comment.isWideReactionOption(o)?" reaction-option--wide":"",a=t===o.value?" selected":"";n.push('<button type="button" class="reaction-option',r,a,'" onclick="ArticleReaction.react(\'',e,"', '",o.value,"', this)\">"),n.push('<span class="reaction-option__emoji">',o.emoji,"</span>"),n.push("</button>")}return n.push("</div>"),n.join("")},renderBar:function(e,t,n,i){var o=i?" is-open":"",r=['<div class="article-reaction',o,'" data-target-id="',e,'" data-current-user-reaction="',n||"",'">'];return r.push('<div class="reaction-widget__summary">'),r.push('<div class="reaction-widget__items">',ArticleReaction.renderSummaryItems(e,t,n),"</div>"),r.push('<button type="button" class="reaction-trigger',o,'" aria-label="添加反应" onclick="ArticleReaction.togglePanel(this)">'),r.push('<span class="reaction-trigger__icon">🙂</span>'),r.push("</button></div>"),r.push(ArticleReaction.renderPanel(e,n)),r.push("</div>"),r.join("")},collectShells:function(e){var t=e?$(e):$(document);return t.hasClass("article-reaction-shell")?t.add(t.find(".article-reaction-shell")):t.find(".article-reaction-shell")},ensureShell:function(){if(!($(".article-reaction-shell, .article-reaction").length>0)&&Label.articleOId){var e=$(".article-main .tag-desc").first().closest(".fn-flex");0===e.length&&(e=$(".article-main .article-actions.action-btns").first()),0!==e.length&&$('<div class="article-reaction-shell" data-target-id="'+Label.articleOId+'" data-current-user-reaction="" data-summary="[]"></div>').insertAfter(e)}},getWidgets:function(e){return $('.article-reaction[data-target-id="'+e+'"]')},initWidgets:function(e){e||ArticleReaction.ensureShell(),ArticleReaction.collectShells(e).each(function(){var e=$(this);e.replaceWith(ArticleReaction.renderBar(e.attr("data-target-id"),e.attr("data-summary"),e.attr("data-current-user-reaction")||"",!1))})},closePanels:function(){$(".article-reaction.is-open").removeClass("is-open")},togglePanel:function(e){var t=$(e).closest(".article-reaction"),n=!t.hasClass("is-open");ArticleReaction.closePanels(),n&&t.addClass("is-open")},bindPanels:function(){$(document).off("click.articleReaction").on("click.articleReaction",function(e){0===$(e.target).closest(".article-reaction").length&&ArticleReaction.closePanels()})},updateBars:function(e,t,n,i){var o=ArticleReaction.getWidgets(e),r="boolean"==typeof i?i:o.first().hasClass("is-open");o.each(function(){$(this).replaceWith(ArticleReaction.renderBar(e,t,n,r))})},updateReactionFromChannel:function(e){var t=e.targetId,n=ArticleReaction.getWidgets(t);if(t&&0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";ArticleReaction.updateBars(t,e.summary||[],i,!1)}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".article-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/article/reaction",type:"POST",data:JSON.stringify({articleId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?ArticleReaction.updateBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})}},Article={initAudio:function(){$(".content-audio").each(function(){var e=$(this);new APlayer({element:this,narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",preload:"none",mode:"circulation",music:{title:e.data("title"),author:'<a href="'+Label.servePath+'/about" target="_blank">音乐分享</a>',url:e.data("url"),pic:Label.staticServePath+"/images/music.png"}})});var e=$("#articleAudio");if(0===e.length)return!1;new APlayer({element:document.getElementById("articleAudio"),narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",mode:"order",preload:"none",music:{title:"语音预览",author:'<a href="'+Label.servePath+'/about" target="_blank">小薇</a>',url:e.data("url"),pic:Label.staticServePath+"/images/blank.png"}})},permissionTip:function(e){Label.isLoggedIn?Util.alert(e):Util.needLogin()},voteUp:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.next();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/up/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(i.text()),r=parseInt(o.text());0!==e.code?Util.alert(e.msg):0===e.type?i.html('<svg class="icon-thumbs-up"><use xlink:href="#thumbs-up"></use></svg> '+(n-1)).removeClass("ft-red"):(i.html('<svg class="icon-thumbs-up"><use xlink:href="#thumbs-up"></use></svg> '+(n+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html('<svg class="icon-thumbs-down"><use xlink:href="#thumbs-down"></use></svg> '+(r-1)).removeClass("ft-red"))}})},voteDown:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.prev();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/down/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(o.text()),r=parseInt(i.text());if(0===e.code)return 1===e.type?i.html('<svg class="icon-thumbs-down"><use xlink:href="#thumbs-down"></use></svg> '+(r-1)).removeClass("ft-red"):(i.html('<svg class="icon-thumbs-down"><use xlink:href="#thumbs-down"></use></svg> '+(r+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html('<svg class="icon-thumbs-up"><use xlink:href="#thumbs-up"></use></svg> '+(n-1)).removeClass("ft-red")),!1;Util.alert(e.msg)}})},previewImgAfterLoading:function(){$(".img-preview img").css("transform","translate3d("+Math.max(0,$(window).width()-$(".img-preview img").width())/2+"px, "+Math.max(0,$(window).height()-$(".img-preview img").height())/2+"px, 0)"),setTimeout(function(){$(".img-preview").width($(window).width())},300)},init:function(){this.initToc(),this.share(),Util.parseHljs(),Util.parseMarkdown();var e=null;$(".article").on("dblclick",".vditor-reset img",function(){clearTimeout(e),$(this).hasClass("emoji")||1===$(this).closest(".editor-panel").length||1===$(this).closest(".ad").length||window.open($(this).attr("src"))}).on("click",".vditor-reset img",function(t){if(clearTimeout(e),!$(this).hasClass("emoji")&&1!==$(this).closest(".editor-panel").length&&1!==$(this).closest(".ad").length){var n=$(this),i=this;e=setTimeout(function(){var e=i.offsetTop,t=i.offsetLeft;1===n.closest(".comments").length&&(e+=n.closest("li")[0].offsetTop,t=t+$(".comments")[0].offsetLeft+15);var o=(n.attr("src")||"").split("?imageView2")[0],r=$('<div class="img-preview"></div>').on("click",function(){$(this).remove()}),a=$("<img>").css("transform","translate3d("+Math.max(0,t)+"px, "+Math.max(0,e-$(window).scrollTop())+"px, 0)").attr("src",o).on("load",Article.previewImgAfterLoading);r.append(a),$("body").append(r),$(".img-preview").css({"background-color":"#fff",position:"fixed"})},100)}}),$("#reportDialog").dialog({width:$(window).width()>500?500:$(window).width()-50,height:450,modal:!0,hideFooter:!0}),this.initAudio(),$(window).scroll(function(){var e=$(window).scrollTop();$(".share").css("top",e+60+"px"),e<$(".article-title").offset().top?($(".article-header").css("top","-60px"),$(".nav").show()):($(".article-header").css("top","0"),$(".nav").hide())}),$(window).resize(function(){Article.syncTocLayout()});var t=location.search.split("r=")[1];t&&sessionStorage.setItem("r",t.split("&")[0]),$(function(){$.ajax({url:Label.servePath+"/api/article/reward/senders/"+Label.articleOId,method:"GET",async:!1,headers:{csrfToken:Label.csrfToken},success:function(e){if(0===e.code&&""!==e.data){let t=e.data;for(let e=0;e<t.length;e++){let n=t[e];$("#articleThanksCnt").after('<a target="_blank" href="'+Label.servePath+"/member/"+n.userName+'">\n    <div class="article__participant">\n        <div class="avatar-small" aria-label="'+n.userName+'" style="background-image: url(\''+n.userAvatarURL48+"');\"></div>\n    </div>\n</a>")}Util.listenUserCard()}}})})},revision:function(e,t){if(!Label.isLoggedIn)return Util.needLogin(),!1;t||(t="article"),Article._revisionDialogOpen("comment"===t?"评论历史":"文章历史"),"comment"===t?Article._legacyRevision(e,t):Article._articleRevision(e)},_revisionDialogInit:function(){$("#revisionDialog").length>0||($("body").append('<div class="revision-modal" id="revisionDialog" aria-hidden="true"><div class="revision-modal__overlay"></div><section class="revision-modal__panel" role="dialog" aria-modal="true" aria-labelledby="revisionDialogTitle"><header class="revision-modal__header"><div class="revision-modal__title" id="revisionDialogTitle"></div><button class="revision-modal__close" type="button" aria-label="关闭"><span aria-hidden="true">&times;</span></button></header><div class="revision-modal__body"></div></section></div>'),$("#revisionDialog .revision-modal__body").append($("#revision")),$("#revisionDialog .revision-modal__overlay, #revisionDialog .revision-modal__close").click(function(){Article._revisionDialogClose()}),$(document).off("keydown.revisionDialog").on("keydown.revisionDialog",function(e){"Escape"===e.key&&$("#revisionDialog").hasClass("is-open")&&Article._revisionDialogClose()}))},_revisionDialogOpen:function(e){Article._revisionDialogInit(),$("#revisionDialogTitle").text(e||"历史版本"),$("#revisionDialog").addClass("is-open").attr("aria-hidden","false"),$("body").addClass("revision-modal-open"),$("#revisionDialog .revision-modal__close").focus()},_revisionDialogClose:function(){$("#revisionDialog").removeClass("is-open").attr("aria-hidden","true"),$("body").removeClass("revision-modal-open")},_legacyRevision:function(e,t){$.ajax({url:Label.servePath+"/"+t+"/"+e+"/revisions",cache:!1,success:function(e,n){if(0===e.code){if(0===e.revisions.length||1===e.revisions.length)return $("#revision > .revisions").remove(),$("#revisions").html("<b>"+Label.noRevisionLabel+"</b>"),!1;$("#revisions").html("").prev().remove(),$("#revisions").data("revisions",e.revisions).before('<div class="revisions"><a href="javascript:void(0)" class="first"><svg><use xlink:href="#chevron-left"</svg></a><span>'+(e.revisions.length-1)+"~"+e.revisions.length+"/"+e.revisions.length+'</span><a href="javascript:void(0)" class="disabled last"><svg><use xlink:href="#chevron-right"</svg></a></div>'),e.revisions.length<=2&&$("#revision a").first().addClass("disabled");var i=JsDiff.createPatch("",e.revisions[e.revisions.length-2].revisionData.articleContent||e.revisions[e.revisions.length-2].revisionData.commentContent,e.revisions[e.revisions.length-1].revisionData.articleContent||e.revisions[e.revisions.length-1].revisionData.commentContent,e.revisions[e.revisions.length-2].revisionData.articleTitle||"",e.revisions[e.revisions.length-1].revisionData.articleTitle||"");return new Diff2HtmlUI({diff:i}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0}),Article._revisionsControls(t),!1}Util.alert(e.msg)}})},_revisionsControls:function(e){var t=$("#revisions").data("revisions");$("#revision a.first").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions").text().split("~")[0]);e<=2?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.last").removeClass("disabled"),$("#revision .revisions > span").html(e-1+"~"+e+"/"+t.length);var n=JsDiff.createPatch("",t[e-2].revisionData.articleContent||t[e-2].revisionData.commentContent,t[e-1].revisionData.articleContent||t[e-1].revisionData.commentContent,t[e-2].revisionData.articleTitle||"",t[e-1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}}),$("#revision a.last").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions span").text().split("~")[0]);e>t.length-3?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.first").removeClass("disabled"),$("#revision .revisions > span").html(e+1+"~"+(e+2)+"/"+t.length);var n=JsDiff.createPatch("",t[e].revisionData.articleContent||t[e].revisionData.commentContent,t[e+1].revisionData.articleContent||t[e+1].revisionData.commentContent,t[e].revisionData.articleTitle||"",t[e+1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}})},_articleRevision:function(e){$("#revision > .revisions").remove(),$("#revisions").removeData("revisions").removeData("revisionDetails").html("<b>加载中</b>"),$.ajax({url:Label.servePath+"/article/"+e+"/revisions/list",cache:!1,success:function(t){if(0===t.code){var n=t.revisions||[];n.length<2?$("#revisions").html("<b>"+Label.noRevisionLabel+"</b>"):($("#revisions").data("revisions",n).data("revisionDetails",{}).html(Article._revisionPickerHtml(n)),Article._revisionBindPicker(e),Article._revisionCompare(e))}else $("#revisions").html("<b>"+Article._revisionEscapeHTML(t.msg||"加载失败")+"</b>")},error:function(){$("#revisions").html("<b>加载失败</b>")}})},_revisionPickerHtml:function(e){for(var t=e.length-2,n=e.length-1,i="",o="",r=0;r<e.length;r++)i+=Article._revisionOptionHtml(e[r],r===t),o+=Article._revisionOptionHtml(e[r],r===n);return'<div class="revision-picker"><label>原版本<select class="revision-picker__base">'+i+'</select></label><label>新版本<select class="revision-picker__target">'+o+'</select></label><label class="revision-picker__toggle"><input class="revision-picker__diff-only" type="checkbox" checked>只看差异</label><button class="green revision-picker__compare">对比</button></div><div class="revision-diff"></div>'},_revisionOptionHtml:function(e,t){return'<option value="'+Article._revisionEscapeHTML(e.revisionId)+'"'+(t?" selected":"")+">"+Article._revisionEscapeHTML(Article._revisionVersionLabel(e))+"</option>"},_revisionVersionLabel:function(e){return e.current?"当前 "+e.revisionTimeStr:e.revisionTimeStr},_revisionBindPicker:function(e){$("#revision .revision-picker__compare").click(function(){Article._revisionCompare(e)}),$("#revision .revision-picker__diff-only").change(function(){Article._revisionCompare(e)})},_revisionCompare:function(e){var t=$("#revision .revision-picker__base").val(),n=$("#revision .revision-picker__target").val(),i=$("#revision .revision-picker__diff-only").is(":checked");$("#revisions .revision-diff").html("<b>加载中</b>"),$.when(Article._revisionFetch(e,t),Article._revisionFetch(e,n)).done(function(e,t){Article._revisionRenderCompare(e,t,i)}).fail(function(e){$("#revisions .revision-diff").html("<b>"+Article._revisionEscapeHTML(e||"加载失败")+"</b>")})},_revisionFetch:function(e,t){var n=$("#revisions").data("revisionDetails")||{},i=$.Deferred();return n[t]?(i.resolve(n[t]),i.promise()):($.ajax({url:Label.servePath+"/article/"+e+"/revisions/"+encodeURIComponent(t),cache:!1,success:function(e){0===e.code?(n[t]=e.revision,$("#revisions").data("revisionDetails",n),i.resolve(e.revision)):i.reject(e.msg)},error:function(){i.reject("加载失败")}}),i.promise())},_revisionRenderCompare:function(e,t,n){var i=e.revisionData||{},o=t.revisionData||{},r=Article._revisionRenderInlineDiff("标题",i.articleTitle||"",o.articleTitle||"",n);r+=Article._revisionRenderLineDiff("内容",i.articleContent||"",o.articleContent||"",n),$("#revisions .revision-diff").html(r||"<b>无差异</b>")},_revisionRenderInlineDiff:function(e,t,n,i){for(var o=JsDiff.diffWordsWithSpace?JsDiff.diffWordsWithSpace(t,n):JsDiff.diffWords(t,n),r=!1,a="",s=0;s<o.length;s++){var l=o[s].added?"add":o[s].removed?"remove":"same";r=r||"same"!==l,i&&"same"===l||(a+='<span class="revision-diff-word revision-diff-word--'+l+'">'+Article._revisionEscapeHTML(o[s].value)+"</span>")}return i&&!r?"":'<section class="revision-diff-section"><h3>'+e+'</h3><div class="revision-diff-title">'+a+"</div></section>"},_revisionRenderLineDiff:function(e,t,n,i){for(var o=JsDiff.diffLines(t,n),r=!1,a="",s=0;s<o.length;s++){var l=o[s].added?"add":o[s].removed?"remove":"same";r=r||"same"!==l,i&&"same"===l||(a+=Article._revisionLineHtml(o[s].value,l))}return i&&!r?"":'<section class="revision-diff-section"><h3>'+e+'</h3><div class="revision-diff-lines">'+a+"</div></section>"},_revisionLineHtml:function(e,t){for(var n=Article._revisionSplitLines(e),i="",o=0;o<n.length;o++)i+='<div class="revision-diff-line revision-diff-line--'+t+'"><span class="revision-diff-line__text">'+Article._revisionEscapeHTML(n[o])+"</span></div>";return i},_revisionSplitLines:function(e){var t=e.split("\n");return""===t[t.length-1]&&t.pop(),t},_revisionEscapeHTML:function(e){return String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")},share:function(){var e=$("#qrCode").data("shareurl");$("#qrCode").qrcode({width:90,height:90,text:e}),$("body").click(function(){$("#qrCode").slideUp()}),$(".share > span").click(function(){var t=$(this).data("type");if(!t)return!1;if("wechat"===t)return $("#qrCode").slideToggle(),!1;if("copy"===t)return!1;var n=encodeURIComponent(Label.articleTitle+" - "+Label.symphonyLabel),i=encodeURIComponent(e),o=$(".article-info .avatar-mid").css("background-image");pic=o.substring(5,o.length-2);var r={};r.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+n+"&url="+i+"&pic="+pic,r.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+i+"&pic="+pic,r.google="https://plus.google.com/share?url="+i,r.twitter="https://twitter.com/intent/tweet?status="+n+" "+i,window.open(r[t],"_blank","top=100,left=200,width=648,height=618")}),$("#qrCode").click(function(){$(this).hide()}),$("#shareClipboard").mouseover(function(){$(this).attr("aria-label",Label.copyLabel)}),Util.clipboard($("#shareClipboard"),$("#shareClipboard").next(),function(){$("#shareClipboard").attr("aria-label",Label.copiedLabel)})},reward:function(e){confirm(Label.rewardConfirmLabel)&&$.ajax({url:Label.servePath+"/article/reward?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0!==e.code)Util.alert(e.msg);else{$("#articleRewardContent .vditor-reset").html(e.articleRewardContent),Util.parseHljs(),Util.parseMarkdown();var n=$("#articleRewardContent > span"),i=parseInt(n.text());n.addClass("ft-red").removeClass("ft-blue").html(i+1+" "+Label.rewardLabel).removeAttr("onclick")}},error:function(e){Util.needLogin()}})},thankArticle:function(e,t){return Label.isLoggedIn?!(0===t&&!confirm(Label.thankArticleConfirmLabel))&&(Label.currentUserName===Label.articleAuthorName?(Util.alert(Label.thankSelfLabel),!1):void $.ajax({url:Label.servePath+"/article/thank?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0===e.code){var n=parseInt($("#thankArticle").text());$("#thankArticle").removeAttr("onclick").html('<svg><use xlink:href="#heart"></use></svg><span class="ft-13">'+(n+1)+"</span>").addClass("ft-red").removeClass("ft-blue");var i=$('<svg class="ft-red"><use xlink:href="#heart"></use></svg>'),o=$("#thankArticle").offset().top,r=$("#thankArticle").offset().left;return i.css({"z-index":9999,top:o-20,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(i),i.animate({top:o-180,opacity:0},1500,function(){i.remove()}),!1}Util.alert(e.msg)}})):(Util.needLogin(),!1)},stick:function(e){confirm(Label.stickConfirmLabel)&&$.ajax({url:Label.servePath+"/article/stick?articleId="+e,type:"POST",cache:!1,success:function(e,t){Util.alert(e.msg),window.location.href=Label.servePath+"/recent"}})},playThought:function(e){var t=String.fromCharCode(31),n=String.fromCharCode(30),i=String.fromCharCode(29),o=String.fromCharCode(10),r=String.fromCharCode(24),a=$("#thoughtProgress > span"),s=$("#thoughtProgress > svg"),l="#articleThought",c=function(e,n){var o=e.split(t);3===o.length&&o.splice(0,0,"");var a=o[0],s=o[2].split("-"),l=o[3].split("-");if(s[0]=parseInt(s[0]),s[1]=parseInt(s[1]),l[0]=parseInt(l[0]),l[1]=parseInt(l[1]),a===r){for(var c=[],m=s[1],d=0;l[1],m<n.length;m++,d++){if(s[1]===l[1]){n[m]=n[m].substring(0,s[0])+n[m].substr(l[0]);break}m===s[1]?n[m]=n[m].substr(0,s[0]):m===l[1]?(n[s[1]]+=n[m].substr(l[0]),n.splice(m,1)):c.push(m)}for(var u=0;u<c.length;u++)n.splice(c[u]-u,1)}else{var p=a.split(i)[0];""===a.split(i)[1]&&(n[s[1]]=n[s[1]].substring(0,s[0])+n[l[1]].substr(l[0]),n.splice(s[1]+1,l[1]-s[1])),void 0!==n[s[1]]?n[s[1]]=n[s[1]].substring(0,s[0])+p+n[s[1]].substr(s[0]):n[s[1]]=""}return n},m=e.split(n),d=Math.max(m[m.length-2].split(t)[1]/3e4,2);""===m[m.length-1]&&m.pop();for(var u=0,p=0;u<m.length;u++)setTimeout(function(){$(l).data("text")||$(l).data("text","");var e=c(m[p++],$(l).data("text").split(o)).join(o),t=e.replace(/\n/g,"<br>").replace(/ /g,"&nbsp;").replace(/	/g,"&nbsp;&nbsp;&nbsp;&nbsp;");$(l).data("text",e).html(t)},parseInt(m[u].split(t)[1])/d);for(var h=0,f=parseInt(m[u-1].split(t)[1])/d,v=setInterval(function(){h>=f?(a.width("100%"),s.css("left","100%"),clearInterval(v)):(h+=20,s.css("left",100*h/f+"%"),a.width(100*h/f+"%"))},20),g="",b="",C=0,y=0,w=0;y<m.length;y++){var L=c(m[w++],g.split(o)).join(o);b=L.replace(/\n/g,"<br>").replace(/ /g,"&nbsp;").replace(/	/g,"&nbsp;&nbsp;&nbsp;&nbsp;"),g=L,$(l).html(b),C=Math.max(C,$(l).height())}$("#thoughtProgressPreview").html('<div class="vditor-reset">'+b+"</div>"),$("#thoughtProgressPreview").dialog({modal:!0,hideFooter:!0}),s.click(function(){$("#thoughtProgressPreview").dialog("open")}),$(l).html(b).height(C).css("margin-bottom","15px").html("")},syncTocLayout:function(){var e=1===$("#articleToC").length;return $("body.article").toggleClass("article--has-toc",e),$(".article-body .wrapper, #articleCommentsPanel, .article-footer").css("margin-right",""),e&&$("#articleToC > .module-panel").height($(window).height()-48),e},initToc:function(){if(!this.syncTocLayout())return!1;var e=$("#articleToC"),t=$(".article-toc"),n=$(".article-content [id^=toc]"),i=!1;e.offset().top;toc=[],e.find("li").click(function(){var t=$(this);let n=$(this).find("a").text();n=normalizeHeadingIdFromString(n),document.getElementById(n).scrollIntoView({behavior:"smooth"}),setTimeout(function(){e.find("li").removeClass("current"),t.addClass("current")},50)}),$(window).scroll(function(o){if(parseInt($("#articleToC").css("right"))<0)return!1;$("#articleToC > .module-panel").height($(window).height()-49),toc=[],n.each(function(e){toc.push({id:this.id,offsetTop:this.offsetTop})});for(var r=$(window).scrollTop(),a=0,s=toc.length;a<s;a++)if(r<toc[a].offsetTop-53){e.find("li").removeClass("current");var l=a>0?a-1:0;e.find('a[data-id="'+toc[l].id+'"]').parent().addClass("current");break}r>=toc[toc.length-1].offsetTop-53&&(e.find("li").removeClass("current"),e.find("li:last").addClass("current"));var c=e.find("li.current")[0].offsetTop;i||(t.scrollTop()<c-t.height()+30&&t.scrollTop(c-t.height()+30),t.scrollTop()>c-30&&t.scrollTop(c)),setTimeout(function(){i=!1},600)}),$(window).scroll(),t.scrollTop(e.find("li.current")[0].offsetTop).scroll(function(){i=!0})},toggleToc:function(){var e=$("#articleToC");if(0===e.length)return!1;var t=$(".article-header .icon-unordered-list");t.hasClass("ft-red")?(e.animate({right:"-"+$("#articleToC").outerWidth()+"px"}),t.removeClass("ft-red"),$(".article-actions  .icon-unordered-list").removeClass("ft-red")):(e.animate({right:0}),t.addClass("ft-red"),$(".article-actions  .icon-unordered-list").addClass("ft-red"))},getNotificationCommentIds:function(e){var t=[],n=function(e){(e=String(e||"").replace(/^#/,"").trim())&&-1===t.indexOf(e)&&t.push(e)};return String(e||"").split(",").forEach(n),n(window.location.hash),t.join(",")},makeNotificationRead:function(e,t){var n={articleId:e,commentIds:Article.getNotificationCommentIds(t)};$.ajax({url:Label.servePath+"/notifications/make-read",type:"POST",cache:!1,data:JSON.stringify(n)})}},ArticleAdjacentNav={storageKey:"articleAdjacentSort",sortValues:["time","author","hot"],init:function(){var e=$("[data-article-nav-sort]");0!==e.length&&(this.applySort(e,this.getStoredSort()),this.bindSortChange(e))},getStoredSort:function(){var e=window.localStorage.getItem(this.storageKey);return this.isValidSort(e)?e:"time"},isValidSort:function(e){return-1!==this.sortValues.indexOf(e)},bindSortChange:function(e){var t=this;e.find(".article-nav-sort__input").on("change",function(){this.checked&&t.isValidSort(this.value)&&(window.localStorage.setItem(t.storageKey,this.value),t.applySort(e,this.value))})},applySort:function(e,t){e.find('.article-nav-sort__input[value="'+t+'"]').prop("checked",!0)}};Article.init(),$(document).ready(function(){ArticleAdjacentNav.init(),Comment.init(),EmojiGroups.init("Comment","New"),Comment.loadEmojiGroupsNew(),(()=>{let e=(new Date).getTime(),t=0;const n=function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),t=setTimeout(()=>{(new Date).getTime()-e<=700&&$("#emojiList").removeClass("showList")},null!==navigator.userAgent.match(/(phone|pad|pod|ios|Android|Mobile|BlackBerry|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian)/i)?0:600)};$("#emojiBtn").hover(function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),EmojiGroups.ensureCurrentFresh(Comment,"New"),setTimeout(()=>0!==$("#emojiBtn:hover").length&&$("#emojiList").addClass("showList"),300)},n),$("#emojiList").hover(function(){0!==t&&(clearTimeout(t),t=0),e=(new Date).getTime()},n)})(),ArticleChannel.init(Label.articleChannel),Label.isLoggedIn&&(Article.makeNotificationRead(Label.articleOId,Label.notificationCmtIds),setTimeout(function(){Util.setUnreadNotificationCount()},1e3))}),Article.initCollectButtons=function(){$(".comment-action .action-btns").each(function(){const e=$(this);if(e.data("collect-inited"))return;const t=e.closest("li").find(".vditor-reset.comment").first();if(!t.length)return;const n=t.find("img").filter(function(){return!$(this).hasClass("emoji")&&0===$(this).closest(".editor-panel, .ad").length}).map(function(){return $(this).attr("src")}).get().filter(Boolean),i=Array.from(new Set(n));if(!i.length)return;e.data("collect-inited",!0);const o=$('<span class="tooltipped tooltipped-n ft-a-title" aria-label="收藏表情" style="cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-right:8px;"></span>');o.append('<svg class="icon-heart"><use xlink:href="#emoji"></use></svg> 收藏表情'),o.on("click",function(e){e.stopPropagation(),EmojiGroups.openCollectDialog(i)}),e.prepend(o).prepend("&nbsp;")})},$(function(){Article.initCollectButtons()});
\ No newline at end of file
+function isLetterOrDigit(e){return/\p{L}|\p{N}/u.test(e)}function normalizeHeadingIdFromString(e,t){let n=e.replace(/^#+/,"");if(t){const e=new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");n=n.replace(e,"")}let i="";for(const e of n)isLetterOrDigit(e)?i+=e:i+="-";return i=i.replace(/-{3,}/g,"--"),i.startsWith("--")&&(i="-"+i.slice(2)),i.endsWith("--")&&(i=i.slice(0,-2)+"-"),i}var Comment={editor:void 0,reactionOptions:[{value:"thumbsup",emoji:"👍"},{value:"thumbsdown",emoji:"👎"},{value:"check",emoji:"✅"},{value:"cross",emoji:"❌"},{value:"star",emoji:"⭐"},{value:"heart",emoji:"❤️"},{value:"fire",emoji:"🔥"},{value:"party",emoji:"🎉"},{value:"laugh",emoji:"😂"},{value:"wow",emoji:"😮"},{value:"clap",emoji:"👏"},{value:"hundred",emoji:"💯"},{value:"rocket",emoji:"🚀"},{value:"salute",emoji:"🖖"},{value:"handshake",emoji:"🤝"},{value:"raisedhands",emoji:"🙌"},{value:"mindblown",emoji:"🤯"},{value:"thinking",emoji:"🤔"},{value:"eyes",emoji:"👀"},{value:"cry",emoji:"😢"},{value:"angry",emoji:"😡"},{value:"pray",emoji:"🙏"},{value:"brokenheart",emoji:"💔"},{value:"skull",emoji:"💀"},{value:"clown",emoji:"🤡"},{value:"poop",emoji:"💩"},{value:"heartonfire",emoji:"❤️‍🔥"},{value:"plus",emoji:"➕1️⃣"}],isWideReactionOption:function(e){return"plus"===e.value||"heartonfire"===e.value},escapeHTML:function(e){return $("<div>").text(e||"").html()},renderCommentAuthorName:function(e){var t=Comment.escapeHTML(e.commentAuthorName);return e.commentAuthorNickName?Comment.escapeHTML(e.commentAuthorNickName)+" ("+t+")":t},renderOriginalAuthorLabel:function(e){var t=e.commentOriginalAuthorNickName||e.commentOriginalAuthorName;return t?'<span class="comment-origin-inline">回复 @'+Comment.escapeHTML(t)+"</span>":""},escapeJSString:function(e){return String(e||"").replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/\r/g,"\\r").replace(/\n/g,"\\n")},getCommentHashId:function(e){var t=String(e||"").indexOf("#");return t<0?"":String(e).substring(t+1)},getCurrentPageNum:function(){var e=window.location.search.match(/[?&]p=(\d+)/);return e?parseInt(e[1]):1},getSearchValue:function(e,t){for(var n=String(e||"").replace(/^\?/,"").split("&"),i=0;i<n.length;i++){var o=n[i].split("=");if(o[0]===t)return o.length>1?o[1]:""}return""},normalizeCommentSearch:function(e){for(var t=["p","m","sort","author"],n=[],i=0;i<t.length;i++){var o=Comment.getSearchValue(e,t[i]);"p"===t[i]&&""===o&&(o="1"),"m"===t[i]&&""===o&&(o=String(Label.userCommentViewMode)),n.push(t[i]+"="+o)}return n.join("&")},isSameCommentPage:function(e){var t=document.createElement("a");return t.href=e,t.pathname===window.location.pathname&&Comment.normalizeCommentSearch(t.search)===Comment.normalizeCommentSearch(window.location.search)},getCommentElement:function(e){var t=document.getElementById(e);return t?$(t):$()},ensureThread:function(e,t){var n=e.find(".comment-thread").first();return 0!==n.length||(n=$('<div class="comment-thread" data-root-id="'+Comment.escapeHTML(t)+'"><div class="comment-thread__list"></div></div>'),e.find(".comment-action").before(n)),n},renderThreadAction:function(e){return'<div class="comment-thread__actions comment-action__bar"><div class="comment-action__left">'+Comment.renderReactionBar(e.oId,e.reactionSummary,e.currentUserReaction)+'</div><span class="action-btns">'+Comment.renderThreadThankAction(e)+Comment.renderThreadVoteAction(e,!0)+Comment.renderThreadVoteAction(e,!1)+Comment.renderThreadReportAction(e)+Comment.renderThreadHistoryAction(e)+Comment.renderThreadEditAction(e)+Comment.renderThreadReplyAction(e)+"</span></div>"},renderThreadThankAction:function(e){var t=Comment.escapeJSString(e.oId),n=Comment.escapeJSString(e.commentThankLabel),i=parseInt(e.commentAnonymous||0),o=parseInt(e.rewardedCnt||e.commentThankCnt||0),r=e.rewarded?" ft-red":"",a="";return e.rewarded||(a=Label.canThankComment?" onclick=\"Comment.thank('"+t+"', '"+Comment.escapeJSString(Label.csrfToken)+"', '"+n+"', "+i+', this)"':' onclick="Article.permissionTip(Label.noPermissionLabel)"'),'<span class="tooltipped tooltipped-n'+r+'" aria-label="'+Comment.escapeHTML(Label.thankLabel)+'"'+a+'><svg class="fn-text-top icon-heart"><use xlink:href="#heart"></use></svg> '+o+"</span>"},renderThreadVoteAction:function(e,t){var n=Comment.escapeJSString(e.oId),i=parseInt(e.commentVote)===(t?0:1),o=parseInt(t?e.commentGoodCnt||0:e.commentBadCnt||0),r=t?Label.upLabel:Label.downLabel,a=t?"thumbs-up":"thumbs-down",s=t?"voteUp":"voteDown",l=(t?Label.canGoodComment:Label.canBadComment)?"Article."+s+"('"+n+"', 'comment', this)":"Article.permissionTip(Label.noPermissionLabel)";return'<span class="tooltipped tooltipped-n'+(i?" ft-red":"")+'" aria-label="'+Comment.escapeHTML(r)+'" onclick="'+l+'"><svg class="icon-'+a+'"><use xlink:href="#'+a+'"></use></svg> '+o+"</span>"},renderThreadReportAction:function(e){var t=Comment.escapeJSString(e.oId);return'<span aria-label="'+Comment.escapeHTML(Label.reportLabel||"")+"\" class=\"tooltipped tooltipped-n\" onclick=\"$('#reportDialog').data('type', 1).data('id', '"+t+"').dialog('open')\"><svg><use xlink:href=\"#icon-report\"></use></svg></span>"},renderThreadReplyAction:function(e){return Label.isLoggedIn&&Label.canAddComment?'<span aria-label="'+Comment.escapeHTML(Label.replyLabel)+'" class="icon-reply-btn tooltipped tooltipped-n" onclick="Comment.reply(\''+Comment.escapeJSString(e.commentAuthorName)+"', '"+Comment.escapeJSString(e.oId)+'\')"><svg class="icon-reply"><use xlink:href="#reply"></use></svg></span>':""},renderThreadEditAction:function(e){return e.commentIsCurrentUser&&Label.canUpdateComment?'<span aria-label="'+Comment.escapeHTML(Label.editLabel)+'" class="comment-edit-action tooltipped tooltipped-n" onclick="Comment.edit(\''+Comment.escapeJSString(e.oId)+'\')"><svg><use xlink:href="#edit"></use></svg></span>':""},renderThreadHistoryAction:function(e){return!Label.canViewCommentHistory||parseInt(e.commentRevisionCount||0)<2?"":'<span aria-label="'+Comment.escapeHTML(Label.historyLabel)+'" class="comment-history-action tooltipped tooltipped-n" onclick="Article.revision(\''+Comment.escapeJSString(e.oId)+'\', \'comment\')"><svg class="icon-history"><use xlink:href="#history"></use></svg></span>'},updateCommentHistoryAction:function(e,t){var n=Comment.getCommentElement(e);if(n.hasClass("comment-thread__reply")){var i=n.find("> .comment-thread__body > .comment-thread__actions > .action-btns");if(i.children(".comment-history-action").remove(),!(t<2)){var o=Comment.renderThreadHistoryAction({oId:e,commentRevisionCount:t}),r=i.children(".comment-edit-action");1===r.length?r.before(o):i.append(o)}}else n.find(".icon-history").parent().toggle(t>=2)},updateEditedCommentContent:function(e,t){var n=Comment.getCommentElement(e);n.hasClass("comment-thread__reply")?n.find("> .comment-thread__body > .comment-thread__content").html(t):n.find("> .fn-flex > .fn-flex-1 > .vditor-reset").html(t)},getThreadReplyDepth:function(e){var t=parseInt(e.commentThreadDepth,10);if(!isNaN(t)&&t>=0)return t;var n=document.getElementById(e.commentOriginalCommentId);return n&&$(n).hasClass("comment-thread__reply")?(t=parseInt($(n).attr("data-thread-depth"),10),isNaN(t)?1:t+1):0},renderThreadReplyClass:function(e){return"comment-thread__reply"+(e>0?" comment-thread__reply--nested":"")},renderThreadReplyStyle:function(e){return' data-thread-depth="'+e+'" style="--comment-thread-indent:'+28*e+'px"'},renderThreadReply:function(e){var t=Comment.getThreadReplyDepth(e);return'<div id="'+Comment.escapeHTML(e.oId)+'" class="'+Comment.renderThreadReplyClass(t)+'"'+Comment.renderThreadReplyStyle(t)+'><a rel="nofollow" href="'+Label.servePath+"/member/"+Comment.escapeHTML(e.commentAuthorName)+'" class="comment-thread__avatar" aria-label="'+Comment.escapeHTML(e.commentAuthorName)+'" style="background-image:url(\''+Comment.escapeHTML(e.commentAuthorThumbnailURL)+'\')"></a><div class="comment-thread__body"><div class="comment-thread__meta"><a rel="nofollow" href="'+Label.servePath+"/member/"+Comment.escapeHTML(e.commentAuthorName)+'">'+Comment.renderCommentAuthorName(e)+"</a>"+Comment.renderOriginalAuthorLabel(e)+'<span class="ft-fade"> • '+Comment.escapeHTML(e.timeAgo)+'</span></div><div class="comment-thread__content vditor-reset">'+e.commentContent+"</div>"+Comment.renderThreadAction(e)+"</div></div>"},renderThreadReplies:function(e){for(var t="",n=0;n<e.length;n++)t+=Comment.renderThreadReply(e[n]);return t},renderThreadPageButton:function(e,t,n){return'<button type="button" onclick="Comment.showThreadReplies(\''+Comment.escapeJSString(e)+"', this, "+t+')">'+Comment.escapeHTML(n)+"</button>"},renderThreadPagination:function(e,t,n){if(e.find(".comment-thread__pager").remove(),n&&!(parseInt(n.paginationPageCount||0)<=1)){var i=parseInt(n.paginationCurrentPageNum||1),o=parseInt(n.paginationPageCount||1),r=['<div class="comment-thread__pager">'];i>1&&r.push(Comment.renderThreadPageButton(t,i-1,"上一页")),r.push('<span class="comment-thread__page-info">',i,"/",o,"</span>"),i<o&&r.push(Comment.renderThreadPageButton(t,i+1,"下一页")),r.push("</div>"),e.append(r.join(""))}},getCommentQueryExtra:function(){return Label.commentQueryExtra||""},normalizeReactionSummary:function(e){if(Array.isArray(e))return e;if("string"!=typeof e||""===e)return[];try{var t=JSON.parse(e);return Array.isArray(t)?t:[]}catch(e){return[]}},getReactionMap:function(e){e=Comment.normalizeReactionSummary(e);for(var t={},n=0;n<e.length;n++)t[e[n].value]=e[n];return t},escapeReactionHtml:function(e){return String(e||"").replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},getReactionUserDetails:function(e){return e&&Array.isArray(e.userDetails)?e.userDetails:[]},renderReactionTip:function(e){var t=Comment.getReactionUserDetails(e);if(0===t.length)return"";for(var n=[],i=0;i<t.length;i++){var o=t[i]||{},r=o.userName||"",a=o.avatarURL||"";if(""!==r&&""!==a){var s=o.displayName||r;n.push('<a class="reaction-pill__tip-link" href="',Label.servePath,"/member/",encodeURIComponent(r),'" aria-label="',Comment.escapeReactionHtml(s),'" title="',Comment.escapeReactionHtml(s),'">'),n.push('<img class="reaction-pill__tip-avatar" src="',Comment.escapeReactionHtml(a),'" alt="',Comment.escapeReactionHtml(s),'">'),n.push("</a>")}}return 0===n.length?"":'<span class="reaction-pill__tip tip-text">'+n.join("")+"</span>"},renderReactionSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r<Comment.reactionOptions.length;r++){var a=Comment.reactionOptions[r],s=i[a.value]||{},l=s.count||0;if(!(l<1)){var c=n===a.value?" selected":"",m=Comment.renderReactionTip(s);""!==m&&o.push('<span class="reaction-pill-wrapper tip-wrapper">'),o.push('<button type="button" class="reaction-pill reaction-pill--summary',c,'" data-reaction-value="',a.value,'"'),o.push(" onclick=\"Comment.react('",e,"', '",a.value,"', this)\">"),o.push('<span class="reaction-pill__emoji">',a.emoji,"</span>"),o.push('<span class="reaction-pill__count">',l,"</span>"),o.push("</button>"),""!==m&&o.push(m,"</span>")}}return o.join("")},renderReactionPanel:function(e,t){for(var n=['<div class="reaction-popover">'],i=0;i<Comment.reactionOptions.length;i++){var o=Comment.reactionOptions[i],r=Comment.isWideReactionOption(o)?" reaction-option--wide":"",a=t===o.value?" selected":"";n.push('<button type="button" class="reaction-option',r,a,'" onclick="Comment.react(\'',e,"', '",o.value,"', this)\">"),n.push('<span class="reaction-option__emoji">',o.emoji,"</span>"),n.push("</button>")}return n.push("</div>"),n.join("")},renderReactionSummaryWidget:function(e,t,n){var i=Comment.renderReactionSummaryItems(e,t,n),o=['<div class="comment-reaction comment-reaction--summary" data-target-id="',e,'" data-current-user-reaction="',n||"",'">'];return o.push('<div class="reaction-widget__summary">'),o.push('<div class="reaction-widget__items">',i,"</div></div></div>"),o.join("")},renderReactionTriggerWidget:function(e,t,n){var i=n?" is-open":"",o=['<div class="comment-reaction comment-reaction--trigger',i,'" data-target-id="',e,'" data-current-user-reaction="',t||"",'">'];return o.push('<button type="button" class="reaction-trigger',i,'" aria-label="添加反应" onclick="Comment.toggleReactionPanel(this)">'),o.push('<span class="reaction-trigger__icon">🙂</span>'),o.push("</button>"),o.push(Comment.renderReactionPanel(e,t)),o.push("</div>"),o.join("")},renderReactionBar:function(e,t,n,i,o){if("summary"===o)return Comment.renderReactionSummaryWidget(e,t,n);if("trigger"===o)return Comment.renderReactionTriggerWidget(e,n,i);var r=i?" is-open":"",a=Comment.renderReactionSummaryItems(e,t,n),s=['<div class="comment-reaction comment-reaction--combined',r,'" data-target-id="',e,'" data-current-user-reaction="',n||"",'">'];return s.push('<div class="reaction-widget__summary">'),s.push('<div class="reaction-widget__items">',a,"</div>"),s.push('<button type="button" class="reaction-trigger',r,'" aria-label="添加反应" onclick="Comment.toggleReactionPanel(this)">'),s.push('<span class="reaction-trigger__icon">🙂</span>'),s.push("</button></div>"),s.push(Comment.renderReactionPanel(e,n)),s.push("</div>"),s.join("")},getReactionWidgets:function(e){return $('.comment-reaction[data-target-id="'+e+'"]')},getInteractiveReactionWidgets:function(e){return $('.comment-reaction--combined[data-target-id="'+e+'"], .comment-reaction--trigger[data-target-id="'+e+'"]')},mountReactionTrigger:function(e,t,n,i){if(0!==e.length){var o=Comment.renderReactionBar(t,[],n,i,"trigger"),r=e.find('.comment-reaction--trigger[data-target-id="'+t+'"]');r.length>0?r.replaceWith(o):e.prepend(o)}},collectReactionShells:function(e){var t=e?$(e):$(document);return t.hasClass("comment-reaction-shell")?t.add(t.find(".comment-reaction-shell")):t.find(".comment-reaction-shell")},initReactionWidgets:function(e){Comment.collectReactionShells(e).each(function(){var e=$(this),t=e.attr("data-target-id"),n=e.attr("data-summary"),i=e.attr("data-current-user-reaction")||"",o=e.closest(".comment-action__bar").find(".action-btns").first(),r=e.closest(".comment-action__left").length>0&&o.length>0,a=Comment.renderReactionBar(t,n,i,!1,r?"summary":"combined");e.replaceWith(a),r&&Comment.mountReactionTrigger(o,t,i,!1)})},closeReactionPanels:function(e){var t=e?$(e):$(document),n=".comment-reaction--combined, .comment-reaction--trigger";(t.is(n)?t.add(t.find(n)):t.find(n)).removeClass("is-open")},toggleReactionPanel:function(e){var t=$(e).closest(".comment-reaction"),n=t.attr("data-target-id"),i=!t.hasClass("is-open");Comment.closeReactionPanels(),i&&Comment.getInteractiveReactionWidgets(n).addClass("is-open")},bindReactionPanels:function(){$(document).off("click.commentReaction").on("click.commentReaction",function(e){0===$(e.target).closest(".comment-reaction").length&&Comment.closeReactionPanels()})},updateReactionBars:function(e,t,n,i){var o=Comment.getReactionWidgets(e),r="boolean"==typeof i?i:Comment.getInteractiveReactionWidgets(e).first().hasClass("is-open");o.each(function(){var i=$(this),o="combined";i.hasClass("comment-reaction--summary")?o="summary":i.hasClass("comment-reaction--trigger")&&(o="trigger"),i.replaceWith(Comment.renderReactionBar(e,t,n,r,o))})},updateReactionFromChannel:function(e){var t=e.targetId||e.commentId;if(t){var n=Comment.getReactionWidgets(t);if(0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";Comment.updateReactionBars(t,e.summary||[],i,!1)}}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".comment-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/comment/reaction",type:"POST",data:JSON.stringify({commentId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?Comment.updateReactionBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})},report:function(e){var t=$(e);t.attr("disabled","disabled").css("opacity","0.3"),$.ajax({url:Label.servePath+"/report",type:"POST",cache:!1,data:JSON.stringify({reportDataId:$("#reportDialog").data("id"),reportDataType:$("#reportDialog").data("type"),reportType:$("input[name=report]:checked").val(),reportMemo:$("#reportTextarea").val()}),complete:function(e){t.removeAttr("disabled").css("opacity","1"),0===e.responseJSON.code?(Util.alert(Label.reportSuccLabel),$("#reportTextarea").val(""),$("#reportDialog").dialog("close")):Util.alert(e.responseJSON.msg)}})},accept:function(e,t,n){confirm(e)&&$.ajax({url:Label.servePath+"/comment/accept",type:"POST",headers:{csrfToken:Label.csrfToken},cache:!1,data:JSON.stringify({commentId:t}),success:function(e){0===e.code?($(n).closest("li").addClass("cmt-perfect"),$(n).remove()):Util.alert(e.msg)}})},remove:function(e){if(!confirm("删除评论需要100积分，"+Label.confirmRemoveLabel))return!1;$.ajax({url:Label.servePath+"/comment/"+e+"/remove",type:"POST",cache:!1,success:function(t,n){0===t.code?$("#"+e).remove():Util.alert(t.msg)}})},exchangeCmtSort:function(e){e=0===e?1:0;var t=Comment.getCommentQueryExtra().replace("&sort=hot","");window.location.href=window.location.pathname+"?m="+e+t+"#comments"},_bgFade:function(e,t){return 0!==e.length&&(!1!==(t=t||{}).scroll&&$(window).scrollTop(e[0].offsetTop-48),"comments"!==e.attr("id")&&!1!==t.highlight&&($(".comment-focus-highlight").removeClass("comment-focus-highlight"),e.addClass("comment-focus-highlight"),setTimeout(function(){e.removeClass("comment-focus-highlight")},1800),!0))},edit:function(e){Comment._toggleReply(),$(".cmt-anonymous").hide(),$.ajax({url:Label.servePath+"/comment/"+e+"/content",type:"GET",cache:!1,success:function(e,t){0===e.code&&Comment.editor.setValue(e.commentContent)}}),$("#replyUseName").html('<a href="javascript:void(0)" onclick="Comment._bgFade($(\'#'+e+'\'))" class="ft-a-title"><svg><use xlink:href="#edit"></use></svg> '+Label.commonUpdateCommentPermissionLabel+"</a>").data("commentId",e)},goComment:function(e){var t=Comment.getCommentHashId(e);return(!t||!Comment.focusCommentById(t))&&(t&&Comment.isSameCommentPage(e)?(Comment.expandThreadForComment(t),!1):(window.location=e,!1))},focusCommentElement:function(e,t){return Comment._bgFade(e,t)},focusCommentById:function(e,t){var n=Comment.getCommentElement(e);return 1===n.length&&Comment.focusCommentElement(n,t)},focusLocationHash:function(){var e=Comment.getCommentHashId(window.location.hash);return!!e&&(!!Comment.focusCommentById(e)||Comment.expandThreadForComment(e))},expandThreadForComment:function(e){return $.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,anchorCommentId:e,userCommentViewMode:Label.userCommentViewMode,sort:Label.commentSort,author:Label.commentAuthorFilter?"1":""}),success:function(t){if(0!==t.code)return!1;Comment.renderThreadResponse(t.commentThreadRootId,t.commentThreadReplies||[],e,{pagination:t.pagination})}}),!0},renderThreadResponse:function(e,t,n,i){i=i||{};var o=Comment.getCommentElement(e);if(1!==o.length)return!1;var r=Comment.ensureThread(o,e);return r.find(".comment-thread__list").html(Comment.renderThreadReplies(t)),r.addClass("comment-thread--expanded"),r.find(".comment-thread__more").remove(),Comment.renderThreadPagination(r,e,i.pagination),Comment.initReactionWidgets(r),Util.listenUserCard(),Util.parseHljs(),Util.parseMarkdown(),!1===i.focus||!n||Comment.focusCommentById(n)},_hideReplyPanel:function(){var e=$(".editor-panel");return!(0===e.length||!e.hasClass("editor-panel--open"))&&(e.removeClass("editor-panel--open"),e.find(".wrapper").slideUp(function(){e.fadeOut(100),$(".footer").removeAttr("style")}),!1)},_toggleReply:function(e){if(!Label.isLoggedIn)return Util.needLogin(),!1;if(0===$("#commentContent").length)return Util.alert(Label.notAllowCmtLabel),!1;if("false"===$(this).data("hasPermission"))return Article.permissionTip(Label.noPermissionLabel),!1;var t=$(".editor-panel");if(t.hasClass("editor-panel--open"))return Comment._hideReplyPanel();document.body.classList.contains("long-article-page")&&window.LongArticle&&!window.LongArticle.isCommentsOpen()&&window.LongArticle.openComments(),$(".cmt-anonymous").show(),$(".footer").css("margin-bottom",$(".editor-panel > .wrapper").outerHeight()+"px"),$("#replyUseName").html('<a href="javascript:void(0)" onclick="Comment._bgFade($(\'.article-content\'))" class="ft-a-title"><svg><use xlink:href="#reply-to"></use></svg>'+$(".article-title").text().replace(/</g,"&lt;").replace(/>/g,"&gt;")+"</a>").removeData(),"0px"!==t.css("bottom")&&(t.find(".wrapper").hide(),t.css("bottom",0)),t.show().addClass("editor-panel--open"),t.find(".wrapper").slideDown(function(){Comment.editor.focus(),e&&e()})},loadEmojis:function(){let e=Comment.getEmojis(),t="";for(let n=0;n<e.length;n++)t+=`<button onclick="Comment.editor.setValue(Comment.editor.getValue() + '![图片表情](${e[n]})')">\n    <div class="divX"><svg onclick='Comment.delEmoji("${e[n]}");event.cancelBubble =true;' style="width: 15px; height: 15px;"><use xlink:href="#delIcon"></use></svg></div>\n    <img style='max-height: 50px' class="vditor-emojis__icon" src="${e[n]}">\n</button>`;$("#emojis").html(t)},confirmed:!1,delEmoji:function(e){if(!0===Comment.confirmed||confirm("确定要删除该表情包吗？")){Comment.confirmed=!0;let t=Comment.getEmojis();for(let n=0;n<t.length;n++)t[n]===e&&t.splice(n,1);t.reverse(),$.ajax({url:Label.servePath+"/api/cloud/sync",method:"POST",data:JSON.stringify({gameId:"emojis",data:t}),headers:{csrfToken:Label.csrfToken},async:!1,success:function(e){0===e.code?(Util.notice("success",1500,"表情包删除成功。"),Comment.loadEmojis(),setTimeout(function(){$("#emojiBtn").click()},50)):Util.notice("warning",1500,"表情包删除失败："+e.msg)}})}},listenUploadEmojis:function(){$("#uploadEmoji").fileupload({acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,maxFileSize:5242880,multipart:!0,pasteZone:null,dropZone:null,url:Label.servePath+"/upload",paramName:"file[]",add:function(e,t){if(ext=t.files[0].type.split("/")[1],window.File&&window.FileReader&&window.FileList&&window.Blob){var n=new FileReader;n.readAsArrayBuffer(t.files[0]),n.onload=function(e){var n=new Uint8Array(e.target.result.slice(0,11));isImage(n)?e.target.result.byteLength>5242880?Util.alert("图片过大 (最大限制 5M)"):t.submit():Util.alert("只允许上传图片!")}}else t.submit()},formData:function(e){return e.serializeArray()},submit:function(e,t){},done:function(e,t){var n={result:{key:t.result.data.succMap[Object.keys(t.result.data.succMap)[0]]}};Comment.addEmoji(n.result.key)},fail:function(e,t){Util.alert("Upload error: "+t.errorThrown)}})},fromURL:function(){Util.alert('<div class="form fn__flex-column">\n<label>\n  <div class="ft__smaller ft__fade" style="float: left">请输入图片的URL</div>\n  <div class="fn-hr5 fn__5"></div>\n  <input type="text" id="fromURL">\n</label>\n<div class="fn-hr5"></div>\n<div class="fn__flex" style="margin-top: 15px; justify-content: flex-end;">\n  <button class="btn btn--confirm" onclick=\'Comment.addEmoji($("#fromURL").val());Util.closeAlert();\'>导入</button>\n</div>\n</div>',"从URL导入表情包"),$("#fromURL").focus(),$("#fromURL").unbind(),$("#fromURL").bind("keypress",function(e){"13"==e.keyCode&&(Comment.addEmoji($("#fromURL").val()),Util.closeAlert())})},addEmoji:function(){if(0!==arguments.length){var e=[];if(1===arguments.length&&Array.isArray(arguments[0]))e=arguments[0];else for(var t=0;t<arguments.length;t++)arguments[t]&&e.push(arguments[t]);(e=e.map(function(e){return String(e||"").trim()}).filter(Boolean)).length&&(EmojiGroups.openCollectDialog(e),$("details[open]").removeAttr("open"))}},getEmojis:function(){let e;$.ajax({url:Label.servePath+"/api/cloud/get",method:"POST",data:JSON.stringify({gameId:"emojis"}),headers:{csrfToken:Label.csrfToken},async:!1,success:function(t){e=0===t.code&&""!==t.data?Util.parseArray(t.data):[]}});try{e.reverse()}catch(e){return[]}return e},_initHotKey:function(){if(!Label.userKeyboardShortcutsStatus||"1"===Label.userKeyboardShortcutsStatus)return!1;$(document).bind("keyup","x",function(){return Util.prevKey="x",setTimeout(function(){Util.prevKey=void 0},1e3),!1}).bind("keyup","v",function(){return Util.prevKey="v",setTimeout(function(){Util.prevKey=void 0},1e3),!1}).bind("keydown","r",function(e){return Util.prevKey?"v"===Util.prevKey?$("#articleRewardContent .icon-points").click():1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-reply").parent().click():Comment._toggleReply(),!1}).bind("keyup","h",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-heart").parent().click(),!1}).bind("keyup","t",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-down").parent().click(),!1}).bind("keyup","c",function(){return 1===$("#comments .list > ul > li.focus .comment-info .icon-reply-to").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-info .icon-reply-to").parent().click(),!1}).bind("keyup","m",function(){return 1===$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").click(),!1}).bind("keyup","a",function(){return"x"===Util.prevKey&&1===$("#comments .list > ul > li.focus .icon-setting").parent().length&&(window.location=$("#comments .list > ul > li.focus .icon-setting").parent().attr("href")),!1}).bind("keyup","m",function(){return"v"===Util.prevKey&&Article.toggleToc(),!1}).bind("keyup","h",function(){return"v"===Util.prevKey&&$("#thankArticle").click(),!1}).bind("keyup","t",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-down").parent().click(),!1}).bind("keyup","i",function(){return"v"===Util.prevKey&&$(".article-header .icon-view").parent().click(),!1}).bind("keyup","c",function(){return"v"===Util.prevKey&&$(".article-header .icon-star").parent().click(),!1}).bind("keyup","l",function(){return"v"===Util.prevKey&&$(".article-header .icon-history").parent().click(),!1}).bind("keyup","e",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-edit").parent().length&&(window.location=$(".article-actions .icon-edit").parent().attr("href")),!1}).bind("keyup","s",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-chevron-up").length&&Article.stick(Label.articleOId),!1}).bind("keyup","a",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-setting").parent().length&&(window.location=$(".article-actions .icon-setting").parent().attr("href")),!1}).bind("keyup","p",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=prev]").length&&(window.location=$(".article-header a[rel=prev]").attr("href")),!1}).bind("keyup","n",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=next]").length&&(window.location=$(".article-header a[rel=next]").attr("href")),!1})},init:function(){if($("#sendComment").click(function(){Comment._toggleReply()}),Comment.focusLocationHash(),this._initHotKey(),$.pjax({selector:"#comments .pagination a",container:"#comments",show:"",cache:!1,storage:!0,titleSuffix:"",callback:function(){Comment.initReactionWidgets($("#comments")),Util.parseMarkdown(),Util.parseHljs(),Util.listenUserCard(),Comment.focusLocationHash()}}),NProgress.configure({showSpinner:!1}),$("#comments").bind("pjax.start",function(){NProgress.start()}),$("#comments").bind("pjax.end",function(){NProgress.done()}),ArticleReaction.bindPanels(),ArticleReaction.initWidgets(),Comment.bindReactionPanels(),Comment.initReactionWidgets($("#comments")),!Label.isLoggedIn||!document.getElementById("commentContent"))return!1;Comment.editor=Util.newVditor({id:"commentContent",cache:!0,preview:{mode:"editor"},resize:{enable:!0,position:"top"},height:200,placeholder:Label.commentEditorPlaceholderLabel,ctrlEnter:function(){Comment.add(Label.articleOId,Label.csrfToken,document.getElementById("articleCommentBtn"))},esc:function(){$(".editor-hide").click()}})},thank:function(e,t,n,i,o){if(!Label.isLoggedIn)return Util.needLogin(),!1;if(0===i&&!confirm(n))return!1;var r={commentId:e};$.ajax({url:Label.servePath+"/comment/thank",type:"POST",headers:{csrfToken:t},cache:!1,data:JSON.stringify(r),error:function(e,t,n){Util.alert(n)},success:function(e,t){if(0===e.code){$(o).removeAttr("onclick");var n=$('<svg class="ft-red"><use xlink:href="#heart"></use></svg>'),i=$(o).offset().top,r=$(o).offset().left;n.css({"z-index":9999,top:i,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(n),n.animate({left:r-150,top:i-60,opacity:0},1e3,function(){var e=parseInt($(o).text());$(o).html('<svg><use xlink:href="#heart"></use></svg> '+(e+1)).addClass("ft-red"),n.remove()})}else Util.alert(e.msg)}})},showReply:function(e,t,n){var i=$(t).closest("li").find("."+n);if("comment-get-comment"===n){if(0!==i.find("li").length)return i.html(""),!1}else if(0===$(t).find(".icon-chevron-down").length)return $(t).find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down").find("use").attr("xlink:href","#chevron-down"),i.html(""),!1;if("0.3"===$(t).css("opacity"))return!1;var o="/comment/replies";"comment-get-comment"===n&&(o="/comment/original"),$.ajax({url:Label.servePath+o,type:"POST",data:JSON.stringify({commentId:e,userCommentViewMode:Label.userCommentViewMode}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(e,n){if(0!==e.code)return Util.alert(e.msg),!1;var o=e.commentReplies,r="";o instanceof Array||(o=[o]),0===o.length&&(r='<li class="ft-red">'+Label.removedLabel+"</li>");for(var a=0;a<o.length;a++){var s=o[a];r+='<li><div class="fn-flex">',r+='<a rel="nofollow" href="/member/'+s.commentAuthorName+'">',r+='<div class="avatar tooltipped tooltipped-se" aria-label="'+s.commentAuthorName+'" style="background-image:url('+s.commentAuthorThumbnailURL+')"></div>',r+="</a>",r+='<div class="fn-flex-1"><div class="comment-info ft-smaller">',r+='<a class="ft-gray" rel="nofollow" href="/member/'+s.commentAuthorName+'">',r+=Comment.renderCommentAuthorName(s),r+="</a>",r+=Comment.renderOriginalAuthorLabel(s),r+='<span class="ft-fade"> • '+s.timeAgo,s.rewardedCnt>0&&(r+='<span aria-label="'+(s.rewarded?Label.thankedLabel:Label.thankLabel+" "+s.rewardedCnt)+'" class="tooltipped tooltipped-n '+(s.rewarded?"ft-red":"ft-fade")+'"> <svg class="fn-text-top"><use xlink:href="#heart"></use></svg> '+s.rewardedCnt+"</span> "),r+="</span>",r+='</div><div class="vditor-reset comment">'+s.commentContent+"</div>"+Comment.renderReactionBar(s.oId,s.reactionSummary,s.currentUserReaction)+"</div></div></li>"}i.html("<ul>"+r+"</ul>"),Util.parseHljs(),Util.parseMarkdown(),$(t).find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up").find("use").attr("xlink:href","#chevron-up")},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},showThreadReplies:function(e,t,n){if("0.3"===$(t).css("opacity"))return!1;$.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,paginationCurrentPageNum:n||1}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(t){if(0!==t.code)return Util.alert(t.msg),!1;Comment.renderThreadResponse(t.commentThreadRootId||e,t.commentThreadReplies||[],null,{focus:!1,pagination:t.pagination})},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},add:function(e,t,n){var i={articleId:e,commentAnonymous:$("#commentAnonymous").prop("checked"),commentVisible:$("#commentVisible").prop("checked"),commentContent:Comment.editor.getValue(),userCommentViewMode:Label.userCommentViewMode};$("#replyUseName").data("commentOriginalCommentId")&&(i.commentOriginalCommentId=$("#replyUseName").data("commentOriginalCommentId"));var o=Label.servePath+"/comment",r="POST",a=$("#replyUseName").data("commentId");a&&(o=Label.servePath+"/comment/"+a,r="PUT"),$.ajax({url:o,type:r,headers:{csrfToken:t},cache:!1,data:JSON.stringify(i),beforeSend:function(){$(n).attr("disabled","disabled").css("opacity","0.3")},success:function(e,t){$(n).removeAttr("disabled").css("opacity","1"),0===e.code?(a&&(Comment.updateEditedCommentContent(a,e.commentContent),Comment.updateCommentHistoryAction(a,parseInt(e.commentRevisionCount||0))),i.commentOriginalCommentId&&Util.setUnreadNotificationCount(),Comment.editor.setValue(""),$(".editor-hide").click(),$("#replyUseName").text("").removeData(),i.commentOriginalCommentId&&Comment.focusCommentById(i.commentOriginalCommentId,{scroll:!1})):$("#addCommentTip").addClass("error").html("<ul><li>"+e.msg+"</li></ul>")},error:function(e){$("#addCommentTip").addClass("error").html("<ul><li>"+e.statusText+"</li></ul>")},complete:function(){$(n).removeAttr("disabled").css("opacity","1"),setTimeout(Util.listenUserCard,1e3)}})},reply:function(e,t){Comment._toggleReply(function(){var e=Comment.getCommentElement(t);0!==e.length&&$(window).height()-(e[0].offsetTop-$(window).scrollTop()+e.outerHeight())<$(".editor-panel .wrapper").outerHeight()&&$(window).scrollTop(e[0].offsetTop-($(window).height()-$(".editor-panel .wrapper").outerHeight()-e.outerHeight()))});var n="",i=Comment.escapeHTML(e),o=Comment.getCommentElement(t),r=o.find(">.fn-flex>div>a").clone();0===r.length&&(r=o.find(">.fn-flex .avatar").clone()),0===r.length?n='<a rel="nofollow" href="#'+Comment.escapeHTML(t)+'" class="ft-a-title" onclick="Comment._bgFade($(\'#'+Comment.escapeJSString(t)+'\'))"><svg><use xlink:href="#reply-to"></use></svg> '+i+"</a>":r.is("a")?(r.addClass("ft-a-title").attr("href","#"+t).attr("onclick",'Comment._bgFade($("#'+t+'"))'),r.find("div").removeClass("avatar").addClass("avatar-small").after(" "+i).before('<svg><use xlink:href="#reply-to"></use></svg> '),n=r[0].outerHTML):(r.removeClass("avatar").addClass("avatar-small"),n='<a rel="nofollow" href="#'+t+'" class="ft-a-title" onclick="Comment._bgFade($(\'#'+t+'\'))"><svg><use xlink:href="#reply-to"></use></svg> '+r[0].outerHTML+" "+i+"</a>"),$("#replyUseName").html(n).data("commentOriginalCommentId",t)}},ArticleReaction={renderSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r<Comment.reactionOptions.length;r++){var a=Comment.reactionOptions[r],s=i[a.value]||{},l=s.count||0;if(!(l<1)){var c=n===a.value?" selected":"",m=Comment.renderReactionTip(s);""!==m&&o.push('<span class="reaction-pill-wrapper tip-wrapper">'),o.push('<button type="button" class="reaction-pill reaction-pill--summary',c,'" data-reaction-value="',a.value,'"'),o.push(" onclick=\"ArticleReaction.react('",e,"', '",a.value,"', this)\">"),o.push('<span class="reaction-pill__emoji">',a.emoji,"</span>"),o.push('<span class="reaction-pill__count">',l,"</span>"),o.push("</button>"),""!==m&&o.push(m,"</span>")}}return o.join("")},renderPanel:function(e,t){for(var n=['<div class="reaction-popover">'],i=0;i<Comment.reactionOptions.length;i++){var o=Comment.reactionOptions[i],r=Comment.isWideReactionOption(o)?" reaction-option--wide":"",a=t===o.value?" selected":"";n.push('<button type="button" class="reaction-option',r,a,'" onclick="ArticleReaction.react(\'',e,"', '",o.value,"', this)\">"),n.push('<span class="reaction-option__emoji">',o.emoji,"</span>"),n.push("</button>")}return n.push("</div>"),n.join("")},renderBar:function(e,t,n,i){var o=i?" is-open":"",r=['<div class="article-reaction',o,'" data-target-id="',e,'" data-current-user-reaction="',n||"",'">'];return r.push('<div class="reaction-widget__summary">'),r.push('<div class="reaction-widget__items">',ArticleReaction.renderSummaryItems(e,t,n),"</div>"),r.push('<button type="button" class="reaction-trigger',o,'" aria-label="添加反应" onclick="ArticleReaction.togglePanel(this)">'),r.push('<span class="reaction-trigger__icon">🙂</span>'),r.push("</button></div>"),r.push(ArticleReaction.renderPanel(e,n)),r.push("</div>"),r.join("")},collectShells:function(e){var t=e?$(e):$(document);return t.hasClass("article-reaction-shell")?t.add(t.find(".article-reaction-shell")):t.find(".article-reaction-shell")},ensureShell:function(){if(!($(".article-reaction-shell, .article-reaction").length>0)&&Label.articleOId){var e=$(".article-main .tag-desc").first().closest(".fn-flex");0===e.length&&(e=$(".article-main .article-actions.action-btns").first()),0!==e.length&&$('<div class="article-reaction-shell" data-target-id="'+Label.articleOId+'" data-current-user-reaction="" data-summary="[]"></div>').insertAfter(e)}},getWidgets:function(e){return $('.article-reaction[data-target-id="'+e+'"]')},initWidgets:function(e){e||ArticleReaction.ensureShell(),ArticleReaction.collectShells(e).each(function(){var e=$(this);e.replaceWith(ArticleReaction.renderBar(e.attr("data-target-id"),e.attr("data-summary"),e.attr("data-current-user-reaction")||"",!1))})},closePanels:function(){$(".article-reaction.is-open").removeClass("is-open")},togglePanel:function(e){var t=$(e).closest(".article-reaction"),n=!t.hasClass("is-open");ArticleReaction.closePanels(),n&&t.addClass("is-open")},bindPanels:function(){$(document).off("click.articleReaction").on("click.articleReaction",function(e){0===$(e.target).closest(".article-reaction").length&&ArticleReaction.closePanels()})},updateBars:function(e,t,n,i){var o=ArticleReaction.getWidgets(e),r="boolean"==typeof i?i:o.first().hasClass("is-open");o.each(function(){$(this).replaceWith(ArticleReaction.renderBar(e,t,n,r))})},updateReactionFromChannel:function(e){var t=e.targetId,n=ArticleReaction.getWidgets(t);if(t&&0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";ArticleReaction.updateBars(t,e.summary||[],i,!1)}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".article-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/article/reaction",type:"POST",data:JSON.stringify({articleId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?ArticleReaction.updateBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})}},Article={initAudio:function(){$(".content-audio").each(function(){var e=$(this);new APlayer({element:this,narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",preload:"none",mode:"circulation",music:{title:e.data("title"),author:'<a href="'+Label.servePath+'/about" target="_blank">音乐分享</a>',url:e.data("url"),pic:Label.staticServePath+"/images/music.png"}})});var e=$("#articleAudio");if(0===e.length)return!1;new APlayer({element:document.getElementById("articleAudio"),narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",mode:"order",preload:"none",music:{title:"语音预览",author:'<a href="'+Label.servePath+'/about" target="_blank">小薇</a>',url:e.data("url"),pic:Label.staticServePath+"/images/blank.png"}})},permissionTip:function(e){Label.isLoggedIn?Util.alert(e):Util.needLogin()},voteUp:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.next();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/up/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(i.text()),r=parseInt(o.text());0!==e.code?Util.alert(e.msg):0===e.type?i.html('<svg class="icon-thumbs-up"><use xlink:href="#thumbs-up"></use></svg> '+(n-1)).removeClass("ft-red"):(i.html('<svg class="icon-thumbs-up"><use xlink:href="#thumbs-up"></use></svg> '+(n+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html('<svg class="icon-thumbs-down"><use xlink:href="#thumbs-down"></use></svg> '+(r-1)).removeClass("ft-red"))}})},voteDown:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.prev();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/down/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(o.text()),r=parseInt(i.text());if(0===e.code)return 1===e.type?i.html('<svg class="icon-thumbs-down"><use xlink:href="#thumbs-down"></use></svg> '+(r-1)).removeClass("ft-red"):(i.html('<svg class="icon-thumbs-down"><use xlink:href="#thumbs-down"></use></svg> '+(r+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html('<svg class="icon-thumbs-up"><use xlink:href="#thumbs-up"></use></svg> '+(n-1)).removeClass("ft-red")),!1;Util.alert(e.msg)}})},previewImgAfterLoading:function(){$(".img-preview img").css("transform","translate3d("+Math.max(0,$(window).width()-$(".img-preview img").width())/2+"px, "+Math.max(0,$(window).height()-$(".img-preview img").height())/2+"px, 0)"),setTimeout(function(){$(".img-preview").width($(window).width())},300)},init:function(){this.initToc(),this.share(),Util.parseHljs(),Util.parseMarkdown();var e=null;$(".article").on("dblclick",".vditor-reset img",function(){clearTimeout(e),$(this).hasClass("emoji")||1===$(this).closest(".editor-panel").length||1===$(this).closest(".ad").length||window.open($(this).attr("src"))}).on("click",".vditor-reset img",function(t){if(clearTimeout(e),!$(this).hasClass("emoji")&&1!==$(this).closest(".editor-panel").length&&1!==$(this).closest(".ad").length){var n=$(this),i=this;e=setTimeout(function(){var e=i.offsetTop,t=i.offsetLeft;1===n.closest(".comments").length&&(e+=n.closest("li")[0].offsetTop,t=t+$(".comments")[0].offsetLeft+15);var o=(n.attr("src")||"").split("?imageView2")[0],r=$('<div class="img-preview"></div>').on("click",function(){$(this).remove()}),a=$("<img>").css("transform","translate3d("+Math.max(0,t)+"px, "+Math.max(0,e-$(window).scrollTop())+"px, 0)").attr("src",o).on("load",Article.previewImgAfterLoading);r.append(a),$("body").append(r),$(".img-preview").css({"background-color":"#fff",position:"fixed"})},100)}}),$("#reportDialog").dialog({width:$(window).width()>500?500:$(window).width()-50,height:450,modal:!0,hideFooter:!0}),this.initAudio(),$(window).scroll(function(){var e=$(window).scrollTop();$(".share").css("top",e+60+"px"),e<$(".article-title").offset().top?($(".article-header").css("top","-60px"),$(".nav").show()):($(".article-header").css("top","0"),$(".nav").hide())}),$(window).resize(function(){Article.syncTocLayout()});var t=location.search.split("r=")[1];t&&sessionStorage.setItem("r",t.split("&")[0]),$(function(){$.ajax({url:Label.servePath+"/api/article/reward/senders/"+Label.articleOId,method:"GET",async:!1,headers:{csrfToken:Label.csrfToken},success:function(e){if(0===e.code&&""!==e.data){let t=e.data;for(let e=0;e<t.length;e++){let n=t[e];$("#articleThanksCnt").after('<a target="_blank" href="'+Label.servePath+"/member/"+n.userName+'">\n    <div class="article__participant">\n        <div class="avatar-small" aria-label="'+n.userName+'" style="background-image: url(\''+n.userAvatarURL48+"');\"></div>\n    </div>\n</a>")}Util.listenUserCard()}}})})},revision:function(e,t){if(!Label.isLoggedIn)return Util.needLogin(),!1;t||(t="article"),Article._revisionDialogOpen("comment"===t?"评论历史":"文章历史"),"comment"===t?Article._legacyRevision(e,t):Article._articleRevision(e)},_revisionDialogInit:function(){$("#revisionDialog").length>0||($("body").append('<div class="revision-modal" id="revisionDialog" aria-hidden="true"><div class="revision-modal__overlay"></div><section class="revision-modal__panel" role="dialog" aria-modal="true" aria-labelledby="revisionDialogTitle"><header class="revision-modal__header"><div class="revision-modal__title" id="revisionDialogTitle"></div><button class="revision-modal__close" type="button" aria-label="关闭"><span aria-hidden="true">&times;</span></button></header><div class="revision-modal__body"></div></section></div>'),$("#revisionDialog .revision-modal__body").append($("#revision")),$("#revisionDialog .revision-modal__overlay, #revisionDialog .revision-modal__close").click(function(){Article._revisionDialogClose()}),$(document).off("keydown.revisionDialog").on("keydown.revisionDialog",function(e){"Escape"===e.key&&$("#revisionDialog").hasClass("is-open")&&Article._revisionDialogClose()}))},_revisionDialogOpen:function(e){Article._revisionDialogInit(),$("#revisionDialogTitle").text(e||"历史版本"),$("#revisionDialog").addClass("is-open").attr("aria-hidden","false"),$("body").addClass("revision-modal-open"),$("#revisionDialog .revision-modal__close").focus()},_revisionDialogClose:function(){$("#revisionDialog").removeClass("is-open").attr("aria-hidden","true"),$("body").removeClass("revision-modal-open")},_legacyRevision:function(e,t){$.ajax({url:Label.servePath+"/"+t+"/"+e+"/revisions",cache:!1,success:function(e,n){if(0===e.code){if(0===e.revisions.length||1===e.revisions.length)return $("#revision > .revisions").remove(),$("#revisions").html("<b>"+Label.noRevisionLabel+"</b>"),!1;$("#revisions").html("").prev().remove(),$("#revisions").data("revisions",e.revisions).before('<div class="revisions"><a href="javascript:void(0)" class="first"><svg><use xlink:href="#chevron-left"</svg></a><span>'+(e.revisions.length-1)+"~"+e.revisions.length+"/"+e.revisions.length+'</span><a href="javascript:void(0)" class="disabled last"><svg><use xlink:href="#chevron-right"</svg></a></div>'),e.revisions.length<=2&&$("#revision a").first().addClass("disabled");var i=JsDiff.createPatch("",e.revisions[e.revisions.length-2].revisionData.articleContent||e.revisions[e.revisions.length-2].revisionData.commentContent,e.revisions[e.revisions.length-1].revisionData.articleContent||e.revisions[e.revisions.length-1].revisionData.commentContent,e.revisions[e.revisions.length-2].revisionData.articleTitle||"",e.revisions[e.revisions.length-1].revisionData.articleTitle||"");return new Diff2HtmlUI({diff:i}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0}),Article._revisionsControls(t),!1}Util.alert(e.msg)}})},_revisionsControls:function(e){var t=$("#revisions").data("revisions");$("#revision a.first").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions").text().split("~")[0]);e<=2?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.last").removeClass("disabled"),$("#revision .revisions > span").html(e-1+"~"+e+"/"+t.length);var n=JsDiff.createPatch("",t[e-2].revisionData.articleContent||t[e-2].revisionData.commentContent,t[e-1].revisionData.articleContent||t[e-1].revisionData.commentContent,t[e-2].revisionData.articleTitle||"",t[e-1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}}),$("#revision a.last").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions span").text().split("~")[0]);e>t.length-3?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.first").removeClass("disabled"),$("#revision .revisions > span").html(e+1+"~"+(e+2)+"/"+t.length);var n=JsDiff.createPatch("",t[e].revisionData.articleContent||t[e].revisionData.commentContent,t[e+1].revisionData.articleContent||t[e+1].revisionData.commentContent,t[e].revisionData.articleTitle||"",t[e+1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}})},_articleRevision:function(e){$("#revision > .revisions").remove(),$("#revisions").removeData("revisions").removeData("revisionDetails").html("<b>加载中</b>"),$.ajax({url:Label.servePath+"/article/"+e+"/revisions/list",cache:!1,success:function(t){if(0===t.code){var n=t.revisions||[];n.length<2?$("#revisions").html("<b>"+Label.noRevisionLabel+"</b>"):($("#revisions").data("revisions",n).data("revisionDetails",{}).html(Article._revisionPickerHtml(n)),Article._revisionBindPicker(e),Article._revisionCompare(e))}else $("#revisions").html("<b>"+Article._revisionEscapeHTML(t.msg||"加载失败")+"</b>")},error:function(){$("#revisions").html("<b>加载失败</b>")}})},_revisionPickerHtml:function(e){for(var t=e.length-2,n=e.length-1,i="",o="",r=0;r<e.length;r++)i+=Article._revisionOptionHtml(e[r],r===t),o+=Article._revisionOptionHtml(e[r],r===n);return'<div class="revision-picker"><label>原版本<select class="revision-picker__base">'+i+'</select></label><label>新版本<select class="revision-picker__target">'+o+'</select></label><label class="revision-picker__toggle"><input class="revision-picker__diff-only" type="checkbox" checked>只看差异</label><button class="green revision-picker__compare">对比</button></div><div class="revision-diff"></div>'},_revisionOptionHtml:function(e,t){return'<option value="'+Article._revisionEscapeHTML(e.revisionId)+'"'+(t?" selected":"")+">"+Article._revisionEscapeHTML(Article._revisionVersionLabel(e))+"</option>"},_revisionVersionLabel:function(e){return e.current?"当前 "+e.revisionTimeStr:e.revisionTimeStr},_revisionBindPicker:function(e){$("#revision .revision-picker__compare").click(function(){Article._revisionCompare(e)}),$("#revision .revision-picker__diff-only").change(function(){Article._revisionCompare(e)})},_revisionCompare:function(e){var t=$("#revision .revision-picker__base").val(),n=$("#revision .revision-picker__target").val(),i=$("#revision .revision-picker__diff-only").is(":checked");$("#revisions .revision-diff").html("<b>加载中</b>"),$.when(Article._revisionFetch(e,t),Article._revisionFetch(e,n)).done(function(e,t){Article._revisionRenderCompare(e,t,i)}).fail(function(e){$("#revisions .revision-diff").html("<b>"+Article._revisionEscapeHTML(e||"加载失败")+"</b>")})},_revisionFetch:function(e,t){var n=$("#revisions").data("revisionDetails")||{},i=$.Deferred();return n[t]?(i.resolve(n[t]),i.promise()):($.ajax({url:Label.servePath+"/article/"+e+"/revisions/"+encodeURIComponent(t),cache:!1,success:function(e){0===e.code?(n[t]=e.revision,$("#revisions").data("revisionDetails",n),i.resolve(e.revision)):i.reject(e.msg)},error:function(){i.reject("加载失败")}}),i.promise())},_revisionRenderCompare:function(e,t,n){var i=e.revisionData||{},o=t.revisionData||{},r=Article._revisionRenderInlineDiff("标题",i.articleTitle||"",o.articleTitle||"",n);r+=Article._revisionRenderLineDiff("内容",i.articleContent||"",o.articleContent||"",n),$("#revisions .revision-diff").html(r||"<b>无差异</b>")},_revisionRenderInlineDiff:function(e,t,n,i){for(var o=JsDiff.diffWordsWithSpace?JsDiff.diffWordsWithSpace(t,n):JsDiff.diffWords(t,n),r=!1,a="",s=0;s<o.length;s++){var l=o[s].added?"add":o[s].removed?"remove":"same";r=r||"same"!==l,i&&"same"===l||(a+='<span class="revision-diff-word revision-diff-word--'+l+'">'+Article._revisionEscapeHTML(o[s].value)+"</span>")}return i&&!r?"":'<section class="revision-diff-section"><h3>'+e+'</h3><div class="revision-diff-title">'+a+"</div></section>"},_revisionRenderLineDiff:function(e,t,n,i){for(var o=JsDiff.diffLines(t,n),r=!1,a="",s=0;s<o.length;s++){var l=o[s].added?"add":o[s].removed?"remove":"same";r=r||"same"!==l,i&&"same"===l||(a+=Article._revisionLineHtml(o[s].value,l))}return i&&!r?"":'<section class="revision-diff-section"><h3>'+e+'</h3><div class="revision-diff-lines">'+a+"</div></section>"},_revisionLineHtml:function(e,t){for(var n=Article._revisionSplitLines(e),i="",o=0;o<n.length;o++)i+='<div class="revision-diff-line revision-diff-line--'+t+'"><span class="revision-diff-line__text">'+Article._revisionEscapeHTML(n[o])+"</span></div>";return i},_revisionSplitLines:function(e){var t=e.split("\n");return""===t[t.length-1]&&t.pop(),t},_revisionEscapeHTML:function(e){return String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")},share:function(){var e=$("#qrCode").data("shareurl");$("#qrCode").qrcode({width:90,height:90,text:e}),$("body").click(function(){$("#qrCode").slideUp()}),$(".share > span").click(function(){var t=$(this).data("type");if(!t)return!1;if("wechat"===t)return $("#qrCode").slideToggle(),!1;if("copy"===t)return!1;var n=encodeURIComponent(Label.articleTitle+" - "+Label.symphonyLabel),i=encodeURIComponent(e),o=$(".article-info .avatar-mid").css("background-image");pic=o.substring(5,o.length-2);var r={};r.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+n+"&url="+i+"&pic="+pic,r.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+i+"&pic="+pic,r.google="https://plus.google.com/share?url="+i,r.twitter="https://twitter.com/intent/tweet?status="+n+" "+i,window.open(r[t],"_blank","top=100,left=200,width=648,height=618")}),$("#qrCode").click(function(){$(this).hide()}),$("#shareClipboard").mouseover(function(){$(this).attr("aria-label",Label.copyLabel)}),Util.clipboard($("#shareClipboard"),$("#shareClipboard").next(),function(){$("#shareClipboard").attr("aria-label",Label.copiedLabel)})},reward:function(e){confirm(Label.rewardConfirmLabel)&&$.ajax({url:Label.servePath+"/article/reward?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0!==e.code)Util.alert(e.msg);else{$("#articleRewardContent .vditor-reset").html(e.articleRewardContent),Util.parseHljs(),Util.parseMarkdown();var n=$("#articleRewardContent > span"),i=parseInt(n.text());n.addClass("ft-red").removeClass("ft-blue").html(i+1+" "+Label.rewardLabel).removeAttr("onclick")}},error:function(e){Util.needLogin()}})},thankArticle:function(e,t){return Label.isLoggedIn?!(0===t&&!confirm(Label.thankArticleConfirmLabel))&&(Label.currentUserName===Label.articleAuthorName?(Util.alert(Label.thankSelfLabel),!1):void $.ajax({url:Label.servePath+"/article/thank?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0===e.code){var n=parseInt($("#thankArticle").text());$("#thankArticle").removeAttr("onclick").html('<svg><use xlink:href="#heart"></use></svg><span class="ft-13">'+(n+1)+"</span>").addClass("ft-red").removeClass("ft-blue");var i=$('<svg class="ft-red"><use xlink:href="#heart"></use></svg>'),o=$("#thankArticle").offset().top,r=$("#thankArticle").offset().left;return i.css({"z-index":9999,top:o-20,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(i),i.animate({top:o-180,opacity:0},1500,function(){i.remove()}),!1}Util.alert(e.msg)}})):(Util.needLogin(),!1)},stick:function(e){confirm(Label.stickConfirmLabel)&&$.ajax({url:Label.servePath+"/article/stick?articleId="+e,type:"POST",cache:!1,success:function(e,t){Util.alert(e.msg),window.location.href=Label.servePath+"/recent"}})},playThought:function(e){var t=String.fromCharCode(31),n=String.fromCharCode(30),i=String.fromCharCode(29),o=String.fromCharCode(10),r=String.fromCharCode(24),a=$("#thoughtProgress > span"),s=$("#thoughtProgress > svg"),l="#articleThought",c=function(e,n){var o=e.split(t);3===o.length&&o.splice(0,0,"");var a=o[0],s=o[2].split("-"),l=o[3].split("-");if(s[0]=parseInt(s[0]),s[1]=parseInt(s[1]),l[0]=parseInt(l[0]),l[1]=parseInt(l[1]),a===r){for(var c=[],m=s[1],d=0;l[1],m<n.length;m++,d++){if(s[1]===l[1]){n[m]=n[m].substring(0,s[0])+n[m].substr(l[0]);break}m===s[1]?n[m]=n[m].substr(0,s[0]):m===l[1]?(n[s[1]]+=n[m].substr(l[0]),n.splice(m,1)):c.push(m)}for(var u=0;u<c.length;u++)n.splice(c[u]-u,1)}else{var p=a.split(i)[0];""===a.split(i)[1]&&(n[s[1]]=n[s[1]].substring(0,s[0])+n[l[1]].substr(l[0]),n.splice(s[1]+1,l[1]-s[1])),void 0!==n[s[1]]?n[s[1]]=n[s[1]].substring(0,s[0])+p+n[s[1]].substr(s[0]):n[s[1]]=""}return n},m=e.split(n),d=Math.max(m[m.length-2].split(t)[1]/3e4,2);""===m[m.length-1]&&m.pop();for(var u=0,p=0;u<m.length;u++)setTimeout(function(){$(l).data("text")||$(l).data("text","");var e=c(m[p++],$(l).data("text").split(o)).join(o),t=e.replace(/\n/g,"<br>").replace(/ /g,"&nbsp;").replace(/	/g,"&nbsp;&nbsp;&nbsp;&nbsp;");$(l).data("text",e).html(t)},parseInt(m[u].split(t)[1])/d);for(var h=0,f=parseInt(m[u-1].split(t)[1])/d,v=setInterval(function(){h>=f?(a.width("100%"),s.css("left","100%"),clearInterval(v)):(h+=20,s.css("left",100*h/f+"%"),a.width(100*h/f+"%"))},20),g="",C="",b=0,y=0,w=0;y<m.length;y++){var L=c(m[w++],g.split(o)).join(o);C=L.replace(/\n/g,"<br>").replace(/ /g,"&nbsp;").replace(/	/g,"&nbsp;&nbsp;&nbsp;&nbsp;"),g=L,$(l).html(C),b=Math.max(b,$(l).height())}$("#thoughtProgressPreview").html('<div class="vditor-reset">'+C+"</div>"),$("#thoughtProgressPreview").dialog({modal:!0,hideFooter:!0}),s.click(function(){$("#thoughtProgressPreview").dialog("open")}),$(l).html(C).height(b).css("margin-bottom","15px").html("")},syncTocLayout:function(){var e=1===$("#articleToC").length;return $("body.article").toggleClass("article--has-toc",e),$(".article-body .wrapper, #articleCommentsPanel, .article-footer").css("margin-right",""),e&&$("#articleToC > .module-panel").height($(window).height()-48),e},initToc:function(){if(!this.syncTocLayout())return!1;var e=$("#articleToC"),t=$(".article-toc"),n=$(".article-content [id^=toc]"),i=!1;e.offset().top;toc=[],e.find("li").click(function(){var t=$(this);let n=$(this).find("a").text();n=normalizeHeadingIdFromString(n),document.getElementById(n).scrollIntoView({behavior:"smooth"}),setTimeout(function(){e.find("li").removeClass("current"),t.addClass("current")},50)}),$(window).scroll(function(o){if(parseInt($("#articleToC").css("right"))<0)return!1;$("#articleToC > .module-panel").height($(window).height()-49),toc=[],n.each(function(e){toc.push({id:this.id,offsetTop:this.offsetTop})});for(var r=$(window).scrollTop(),a=0,s=toc.length;a<s;a++)if(r<toc[a].offsetTop-53){e.find("li").removeClass("current");var l=a>0?a-1:0;e.find('a[data-id="'+toc[l].id+'"]').parent().addClass("current");break}r>=toc[toc.length-1].offsetTop-53&&(e.find("li").removeClass("current"),e.find("li:last").addClass("current"));var c=e.find("li.current")[0].offsetTop;i||(t.scrollTop()<c-t.height()+30&&t.scrollTop(c-t.height()+30),t.scrollTop()>c-30&&t.scrollTop(c)),setTimeout(function(){i=!1},600)}),$(window).scroll(),t.scrollTop(e.find("li.current")[0].offsetTop).scroll(function(){i=!0})},toggleToc:function(){var e=$("#articleToC");if(0===e.length)return!1;var t=$(".article-header .icon-unordered-list");t.hasClass("ft-red")?(e.animate({right:"-"+$("#articleToC").outerWidth()+"px"}),t.removeClass("ft-red"),$(".article-actions  .icon-unordered-list").removeClass("ft-red")):(e.animate({right:0}),t.addClass("ft-red"),$(".article-actions  .icon-unordered-list").addClass("ft-red"))},getNotificationCommentIds:function(e){var t=[],n=function(e){(e=String(e||"").replace(/^#/,"").trim())&&-1===t.indexOf(e)&&t.push(e)};return String(e||"").split(",").forEach(n),n(window.location.hash),t.join(",")},makeNotificationRead:function(e,t){var n={articleId:e,commentIds:Article.getNotificationCommentIds(t)};$.ajax({url:Label.servePath+"/notifications/make-read",type:"POST",cache:!1,data:JSON.stringify(n)})}},ArticleAdjacentNav={storageKey:"articleAdjacentSort",sortValues:["time","author","hot"],init:function(){var e=$("[data-article-nav-sort]");0!==e.length&&(this.applySort(e,this.getStoredSort()),this.bindSortChange(e))},getStoredSort:function(){var e=window.localStorage.getItem(this.storageKey);return this.isValidSort(e)?e:"time"},isValidSort:function(e){return-1!==this.sortValues.indexOf(e)},bindSortChange:function(e){var t=this;e.find(".article-nav-sort__input").on("change",function(){this.checked&&t.isValidSort(this.value)&&(window.localStorage.setItem(t.storageKey,this.value),t.applySort(e,this.value))})},applySort:function(e,t){e.find('.article-nav-sort__input[value="'+t+'"]').prop("checked",!0)}};Article.init(),$(document).ready(function(){ArticleAdjacentNav.init(),Comment.init(),EmojiGroups.init("Comment","New"),Comment.loadEmojiGroupsNew(),(()=>{let e=(new Date).getTime(),t=0;const n=function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),t=setTimeout(()=>{(new Date).getTime()-e<=700&&$("#emojiList").removeClass("showList")},null!==navigator.userAgent.match(/(phone|pad|pod|ios|Android|Mobile|BlackBerry|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian)/i)?0:600)};$("#emojiBtn").hover(function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),EmojiGroups.ensureCurrentFresh(Comment,"New"),setTimeout(()=>0!==$("#emojiBtn:hover").length&&$("#emojiList").addClass("showList"),300)},n),$("#emojiList").hover(function(){0!==t&&(clearTimeout(t),t=0),e=(new Date).getTime()},n)})(),ArticleChannel.init(Label.articleChannel),Label.isLoggedIn&&(Article.makeNotificationRead(Label.articleOId,Label.notificationCmtIds),setTimeout(function(){Util.setUnreadNotificationCount()},1e3))}),Article.initCollectButtons=function(){$(".comment-action .action-btns").each(function(){const e=$(this);if(e.data("collect-inited"))return;const t=e.closest("li").find(".vditor-reset.comment").first();if(!t.length)return;const n=t.find("img").filter(function(){return!$(this).hasClass("emoji")&&0===$(this).closest(".editor-panel, .ad").length}).map(function(){return $(this).attr("src")}).get().filter(Boolean),i=Array.from(new Set(n));if(!i.length)return;e.data("collect-inited",!0);const o=$('<span class="tooltipped tooltipped-n ft-a-title" aria-label="收藏表情" style="cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-right:8px;"></span>');o.append('<svg class="icon-heart"><use xlink:href="#emoji"></use></svg> 收藏表情'),o.on("click",function(e){e.stopPropagation(),EmojiGroups.openCollectDialog(i)}),e.prepend(o).prepend("&nbsp;")})},$(function(){Article.initCollectButtons()});
\ No newline at end of file
diff --git a/src/main/resources/js/channel.js b/src/main/resources/js/channel.js
index 1e893321..91f19b97 100644
--- a/src/main/resources/js/channel.js
+++ b/src/main/resources/js/channel.js
@@ -58,6 +58,11 @@ var ArticleChannel = {
 
             switch (data.type) {
                 case 'comment':
+                    if (parseInt(data.commentType || 0) === 1 &&
+                        window.LongArticleParagraphComments) {
+                        window.LongArticleParagraphComments.handleRealtime(data)
+                        break
+                    }
                     if (Label.commentAuthorFilter &&
                         !data.commentIsArticleAuthor) {
                         return
diff --git a/src/main/resources/js/long-article-paragraph.js b/src/main/resources/js/long-article-paragraph.js
new file mode 100644
index 00000000..62d9d2b4
--- /dev/null
+++ b/src/main/resources/js/long-article-paragraph.js
@@ -0,0 +1,579 @@
+/** Long article paragraph comment interactions shared by PC and mobile. */
+window.LongArticleParagraphComments = {
+  activeParagraphId: '',
+  activeSnapshot: '',
+  activeParagraphOrphaned: false,
+  currentPage: 1,
+  currentSort: '',
+  counts: {},
+  initialized: false,
+
+  init: function () {
+    if (this.initialized) {
+      return
+    }
+    this.controller = window.LongArticle || window.MLongArticle
+    this.commentsPanel = this.controller && this.controller.getCommentsPanel()
+    if (!this.commentsPanel) {
+      return
+    }
+    this.initialized = true
+    this.ensurePanel()
+    this.decorateParagraphs()
+    this.bindEvents()
+    this.loadSummary()
+    var paragraphId = this.getQueryValue('paragraph')
+    if (paragraphId) {
+      this.open(paragraphId)
+    }
+  },
+
+  ensurePanel: function () {
+    if (document.getElementById('longArticleParagraphComments')) {
+      this.paragraphPanel = document.getElementById('longArticleParagraphComments')
+      return
+    }
+    var section = document.createElement('section')
+    section.id = 'longArticleParagraphComments'
+    section.className = 'long-article-paragraph-comments'
+    section.setAttribute('aria-hidden', 'true')
+    section.innerHTML = '<header class="long-article-paragraph-comments__header">' +
+      '<div><strong>段评</strong><span data-paragraph-comment-count></span></div>' +
+      '<button type="button" data-paragraph-comments-close aria-label="关闭评论">&times;</button>' +
+      '<p data-paragraph-comment-snapshot></p>' +
+      '<div class="long-article-paragraph-comments__sort">' +
+      '<button type="button" data-paragraph-sort="" class="is-active">正序</button>' +
+      '<button type="button" data-paragraph-sort="hot">热门</button></div></header>' +
+      '<div class="long-article-paragraph-comments__reply commentToggleEditorBtn">写段评</div>' +
+      '<div class="list comments"><ul data-paragraph-comment-list></ul></div>' +
+      '<div class="long-article-paragraph-comments__empty" data-paragraph-comment-empty>暂无段评</div>' +
+      '<div class="long-article-paragraph-comments__pager" data-paragraph-comment-pager></div>'
+    this.commentsPanel.appendChild(section)
+    this.paragraphPanel = section
+  },
+
+  decorateParagraphs: function () {
+    var self = this
+    document.querySelectorAll('[data-long-paragraph-id]').forEach(function (paragraph) {
+      if (self.getDirectCommentButton(paragraph)) {
+        return
+      }
+      paragraph.classList.add('long-article-commentable-block')
+      var button = document.createElement('button')
+      button.type = 'button'
+      button.className = 'long-article-paragraph-comment-btn'
+      button.setAttribute('data-open-paragraph-comments', paragraph.getAttribute('data-long-paragraph-id'))
+      button.setAttribute('aria-label', '查看段评')
+      button.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg><span>0</span>'
+      var lines = paragraph.querySelectorAll('.long-article-paragraph-line')
+      var target = lines.length ? lines[lines.length - 1] : paragraph
+      self.wrapParagraphText(target)
+      target.appendChild(button)
+      self.updateParagraphButton(paragraph.getAttribute('data-long-paragraph-id'))
+    })
+  },
+
+  bindEvents: function () {
+    var self = this
+    var getActionCard = function (node) {
+      return node && node.closest
+        ? node.closest('.long-article-paragraph-comment-card')
+        : null
+    }
+    var setCardActionsVisible = function (card, visible) {
+      if (!card) {
+        return
+      }
+      var cardId = card.getAttribute('data-long-paragraph-comment-card-id')
+      if (!cardId) {
+        return
+      }
+      self.paragraphPanel.querySelectorAll('[data-long-paragraph-comment-actions-for="' + cardId + '"]').forEach(function (actions) {
+        actions.classList.toggle('is-actions-visible', visible)
+      })
+    }
+    var hideCommentActions = function () {
+      self.paragraphPanel.querySelectorAll('.long-article-paragraph-comment-hover-actions.is-actions-visible').forEach(function (item) {
+        item.classList.remove('is-actions-visible')
+      })
+      self.paragraphPanel.querySelectorAll('.long-article-paragraph-comment-more-menu.is-more-open').forEach(function (item) {
+        item.classList.remove('is-more-open')
+      })
+    }
+    document.addEventListener('click', function (event) {
+      var openButton = event.target.closest && event.target.closest('[data-open-paragraph-comments]')
+      if (openButton) {
+        event.preventDefault()
+        event.stopPropagation()
+        self.toggle(openButton.getAttribute('data-open-paragraph-comments'))
+        return
+      }
+      var moreButton = event.target.closest && event.target.closest('[data-long-paragraph-comment-more]')
+      if (moreButton) {
+        event.preventDefault()
+        event.stopPropagation()
+        var moreMenu = moreButton.closest('.long-article-paragraph-comment-more-menu')
+        if (moreMenu) {
+          var willOpen = !moreMenu.classList.contains('is-more-open')
+          self.paragraphPanel.querySelectorAll('.long-article-paragraph-comment-more-menu.is-more-open').forEach(function (item) {
+            item.classList.remove('is-more-open')
+          })
+          moreMenu.classList.toggle('is-more-open', willOpen)
+        }
+        return
+      }
+      if (!event.target.closest || !event.target.closest('.long-article-paragraph-comment-more-menu')) {
+        self.paragraphPanel.querySelectorAll('.long-article-paragraph-comment-more-menu.is-more-open').forEach(function (item) {
+          item.classList.remove('is-more-open')
+        })
+      }
+      var paragraph = event.target.closest && event.target.closest('.long-article-commentable-block')
+      if (paragraph && self.canOpenFromParagraphClick(event, paragraph)) {
+        self.toggle(paragraph.getAttribute('data-long-paragraph-id'))
+        return
+      }
+      if (event.target.closest && event.target.closest('[data-paragraph-comments-close]')) {
+        self.close()
+        return
+      }
+      var sortButton = event.target.closest && event.target.closest('[data-paragraph-sort]')
+      if (sortButton) {
+        self.currentSort = sortButton.getAttribute('data-paragraph-sort')
+        self.paragraphPanel.querySelectorAll('[data-paragraph-sort]').forEach(function (button) {
+          button.classList.toggle('is-active', button === sortButton)
+        })
+        self.load(1)
+        return
+      }
+      if (event.target.closest && event.target.closest('.long-article-paragraph-comments__reply')) {
+        Comment._toggleReply()
+      }
+    })
+    this.paragraphPanel.addEventListener('mouseover', function (event) {
+      var card = getActionCard(event.target)
+      if (!card || getActionCard(event.relatedTarget) === card) {
+        return
+      }
+      hideCommentActions()
+      setCardActionsVisible(card, true)
+    })
+    this.paragraphPanel.addEventListener('mouseout', function (event) {
+      var card = getActionCard(event.target)
+      if (!card || getActionCard(event.relatedTarget) === card) {
+        return
+      }
+      setCardActionsVisible(card, false)
+    })
+    this.paragraphPanel.addEventListener('mouseleave', function () {
+      hideCommentActions()
+    })
+  },
+
+  loadSummary: function () {
+    var self = this
+    $.ajax({
+      url: Label.servePath + '/comment/paragraph/summary',
+      type: 'POST',
+      cache: false,
+      data: JSON.stringify({articleId: Label.articleOId}),
+      success: function (result) {
+        if (result.code !== 0) {
+          return
+        }
+        self.counts = {}
+        ;(result.paragraphComments || []).forEach(function (item) {
+          self.counts[item.paragraphId] = parseInt(item.commentCount || 0)
+          self.updateParagraphButton(item.paragraphId)
+        })
+      },
+    })
+  },
+
+  updateParagraphButton: function (paragraphId) {
+    var button = document.querySelector('[data-open-paragraph-comments="' + paragraphId + '"]')
+    if (!button) {
+      return
+    }
+    var count = parseInt(this.counts[paragraphId] || 0)
+    button.classList.toggle('has-comments', count > 0)
+    var countElement = button.querySelector('span')
+    countElement.textContent = count > 0 ? count : ''
+    countElement.hidden = count <= 0
+    button.setAttribute('aria-label', count > 0 ? '查看段评 ' + count : '写段评')
+  },
+
+  canOpenFromParagraphClick: function (event, paragraph) {
+    if (window.matchMedia && !window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+      return false
+    }
+    if (event.defaultPrevented || (typeof event.button === 'number' && event.button !== 0)) {
+      return false
+    }
+    if (event.target.closest('a, button, input, textarea, select, video, audio, iframe, pre, code, table, [contenteditable="true"]')) {
+      return false
+    }
+    var selection = window.getSelection && window.getSelection()
+    return !selection || selection.isCollapsed || !paragraph.contains(selection.anchorNode)
+  },
+
+  toggle: function (paragraphId) {
+    if (this.activeParagraphId === paragraphId && this.paragraphPanel.classList.contains('is-active')) {
+      this.close()
+      return
+    }
+    this.open(paragraphId)
+  },
+
+  open: function (paragraphId) {
+    var paragraph = document.querySelector('[data-long-paragraph-id="' + paragraphId + '"]')
+    if (!paragraph) {
+      this.showChapterComments(true)
+      this.openOrphanedCommentFromHash()
+      return
+    }
+    this.showChapterComments(false)
+    this.activeParagraphId = paragraphId
+    this.activeParagraphOrphaned = false
+    this.activeSnapshot = this.getSnapshot(paragraph)
+    document.querySelectorAll('.long-article-commentable-block.is-commenting').forEach(function (element) {
+      element.classList.remove('is-commenting')
+    })
+    paragraph.classList.add('is-commenting')
+    this.paragraphPanel.querySelector('[data-paragraph-comment-snapshot]').textContent = this.activeSnapshot
+    this.controller.openComments()
+    this.updateURL(paragraphId)
+    this.load(1)
+  },
+
+  close: function () {
+    this.showChapterComments(true)
+    this.controller.closeComments()
+  },
+
+  showChapterComments: function (show, updateURL) {
+    if (show === undefined) {
+      show = true
+    }
+    this.activeParagraphId = show ? '' : this.activeParagraphId
+    this.activeParagraphOrphaned = show ? false : this.activeParagraphOrphaned
+    this.commentsPanel.classList.toggle('is-paragraph-view', !show)
+    this.paragraphPanel.classList.toggle('is-active', !show)
+    this.paragraphPanel.setAttribute('aria-hidden', show ? 'true' : 'false')
+    if (show) {
+      document.querySelectorAll('.long-article-commentable-block.is-commenting').forEach(function (element) {
+        element.classList.remove('is-commenting')
+      })
+      if (updateURL !== false) {
+        this.updateURL('')
+      }
+    }
+  },
+
+  load: function (page) {
+    var self = this
+    this.currentPage = page || 1
+    this.paragraphPanel.classList.add('is-loading')
+    $.ajax({
+      url: Label.servePath + '/comment/paragraph/thread/parents',
+      type: 'POST',
+      cache: false,
+      data: JSON.stringify({
+        articleId: Label.articleOId,
+        paragraphId: this.activeParagraphId,
+        paginationCurrentPageNum: this.currentPage,
+        userCommentViewMode: Label.userCommentViewMode,
+        sort: this.currentSort,
+      }),
+      success: function (result) {
+        if (result.code !== 0) {
+          self.renderError(result.msg || '加载失败')
+          return
+        }
+        if (result.paragraphSnapshot) {
+          self.activeSnapshot = result.paragraphSnapshot
+          self.paragraphPanel.querySelector('[data-paragraph-comment-snapshot]').textContent = self.activeSnapshot
+        }
+        self.render(result.commentThreadParents || [], result.pagination || {})
+      },
+      error: function () {
+        self.renderError('加载失败')
+      },
+      complete: function () {
+        self.paragraphPanel.classList.remove('is-loading')
+      },
+    })
+  },
+
+  render: function (comments, pagination) {
+    var list = this.paragraphPanel.querySelector('[data-paragraph-comment-list]')
+    list.innerHTML = ''
+    for (var i = 0; i < comments.length; i++) {
+      list.insertAdjacentHTML('beforeend', this.renderRoot(comments[i]))
+    }
+    this.paragraphPanel.querySelector('[data-paragraph-comment-empty]').style.display = comments.length ? 'none' : 'block'
+    this.paragraphPanel.querySelector('[data-paragraph-comment-count]').textContent = ' ' + parseInt(this.counts[this.activeParagraphId] || 0) + ' 条'
+    this.renderPager(pagination)
+    Comment.initReactionWidgets($(this.paragraphPanel))
+    this.decorateCommentActions()
+    Util.parseMarkdown()
+    Util.parseHljs()
+    Util.listenUserCard()
+    this.focusLocationComment()
+  },
+
+  renderRoot: function (data) {
+    var replies = data.commentThreadReplies || []
+    var thread = replies.length ? '<div class="comment-thread" data-root-id="' + Comment.escapeHTML(data.oId) + '"><div class="comment-thread__list">' + Comment.renderThreadReplies(replies) + '</div></div>' : ''
+    return '<li id="' + Comment.escapeHTML(data.oId) + '" data-author="' + Comment.escapeHTML(data.commentAuthorName) +
+      '" data-comment-type="1" data-comment-paragraph-id="' + Comment.escapeHTML(data.commentParagraphId || this.activeParagraphId) +
+      '" data-comment-paragraph-status="' + parseInt(data.commentParagraphStatus || 0) +
+      '" data-is-author="' + (data.commentIsArticleAuthor ? 'true' : 'false') + '" class="long-article-paragraph-comment-card ' + (replies.length ? 'cmt-selected' : '') + '">' +
+      '<div class="fn-flex"><a rel="nofollow" href="' + Label.servePath + '/member/' + Comment.escapeHTML(data.commentAuthorName) + '">' +
+      '<span class="avatar" style="background-image:url(\'' + Comment.escapeHTML(data.commentAuthorThumbnailURL) + '\')"></span></a>' +
+      '<div class="fn-flex-1"><div class="comment-info"><a rel="nofollow" href="' + Label.servePath + '/member/' + Comment.escapeHTML(data.commentAuthorName) + '">' +
+      Comment.renderCommentAuthorName(data) + '</a><span class="ft-fade"> · ' + Comment.escapeHTML(data.timeAgo) + '</span></div>' +
+      '<div class="vditor-reset comment">' + data.commentContent + '</div>' + thread +
+      '<div class="comment-action">' + Comment.renderThreadAction(data) + '</div></div></div></li>'
+  },
+
+  decorateCommentActions: function () {
+    this.paragraphPanel.querySelectorAll('.comment-thread__reply').forEach(function (reply) {
+      reply.classList.add('long-article-paragraph-comment-card')
+    })
+    this.paragraphPanel.querySelectorAll('.long-article-paragraph-comment-card').forEach(function (card, index) {
+      card.setAttribute('data-long-paragraph-comment-card-id', String(index))
+    })
+    this.paragraphPanel.querySelectorAll('.action-btns').forEach(function (actions) {
+      var card = actions.closest('.long-article-paragraph-comment-card')
+      if (!card) {
+        return
+      }
+      var hoverActions = []
+      var overflowActions = []
+      var actionNodes = []
+      for (var i = 0; i < actions.children.length; i++) {
+        actionNodes.push(actions.children[i])
+      }
+      for (var j = 0; j < actionNodes.length; j++) {
+        var action = actionNodes[j]
+        if (action.tagName !== 'SPAN') {
+          continue
+        }
+        var isLike = !!action.querySelector('.icon-thumbs-up')
+        var isDislike = !!action.querySelector('.icon-thumbs-down')
+        var isReply = action.classList.contains('icon-reply-btn')
+        action.classList.toggle('long-article-paragraph-comment-action--like', isLike)
+        if (isLike) {
+          continue
+        }
+        if (isDislike || isReply) {
+          hoverActions.push(action)
+        } else {
+          overflowActions.push(action)
+        }
+      }
+      if (hoverActions.length === 0 && overflowActions.length === 0) {
+        return
+      }
+      var hoverTray = document.createElement('span')
+      hoverTray.className = 'long-article-paragraph-comment-hover-actions'
+      hoverTray.setAttribute('data-long-paragraph-comment-actions-for', card.getAttribute('data-long-paragraph-comment-card-id'))
+      for (var k = 0; k < hoverActions.length; k++) {
+        hoverTray.appendChild(hoverActions[k])
+      }
+      if (overflowActions.length > 0) {
+        var moreMenu = document.createElement('span')
+        moreMenu.className = 'long-article-paragraph-comment-more-menu'
+        var moreButton = document.createElement('button')
+        moreButton.type = 'button'
+        moreButton.className = 'long-article-paragraph-comment-more'
+        moreButton.setAttribute('data-long-paragraph-comment-more', '')
+        moreButton.setAttribute('aria-label', '更多')
+        moreButton.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="12" cy="19" r="1.5"></circle></svg>'
+        var morePanel = document.createElement('span')
+        morePanel.className = 'long-article-paragraph-comment-more-panel'
+        for (var m = 0; m < overflowActions.length; m++) {
+          morePanel.appendChild(overflowActions[m])
+        }
+        moreMenu.appendChild(moreButton)
+        moreMenu.appendChild(morePanel)
+        hoverTray.appendChild(moreMenu)
+      }
+      actions.appendChild(hoverTray)
+    })
+  },
+
+  renderPager: function (pagination) {
+    var self = this
+    var pager = this.paragraphPanel.querySelector('[data-paragraph-comment-pager]')
+    var page = parseInt(pagination.paginationCurrentPageNum || 1)
+    var pages = parseInt(pagination.paginationPageCount || 1)
+    pager.innerHTML = ''
+    if (pages <= 1) {
+      return
+    }
+    if (page > 1) {
+      pager.appendChild(this.pagerButton('上一页', page - 1))
+    }
+    var info = document.createElement('span')
+    info.textContent = page + '/' + pages
+    pager.appendChild(info)
+    if (page < pages) {
+      pager.appendChild(this.pagerButton('下一页', page + 1))
+    }
+  },
+
+  pagerButton: function (label, page) {
+    var self = this
+    var button = document.createElement('button')
+    button.type = 'button'
+    button.textContent = label
+    button.addEventListener('click', function () { self.load(page) })
+    return button
+  },
+
+  renderError: function (message) {
+    this.paragraphPanel.querySelector('[data-paragraph-comment-list]').innerHTML = ''
+    var empty = this.paragraphPanel.querySelector('[data-paragraph-comment-empty]')
+    empty.textContent = message
+    empty.style.display = 'block'
+  },
+
+  getSnapshot: function (paragraph) {
+    var clone = paragraph.cloneNode(true)
+    var button = this.getDirectCommentButton(clone)
+    if (button) {
+      button.parentNode.removeChild(button)
+    }
+    return String(clone.textContent || '').replace(/\s+/g, ' ').trim().substring(0, 160)
+  },
+
+  getDirectCommentButton: function (paragraph) {
+    return paragraph.querySelector('.long-article-paragraph-comment-btn')
+  },
+
+  wrapParagraphText: function (paragraph) {
+    if (!paragraph || paragraph.getAttribute('data-long-paragraph-kind') === 'media') {
+      return
+    }
+    for (var i = 0; i < paragraph.children.length; i++) {
+      if (paragraph.children[i].classList.contains('long-article-paragraph-highlight')) {
+        return
+      }
+      var tagName = paragraph.children[i].tagName.toLowerCase()
+      if ('p|div|section|article|header|footer|main|ul|ol|li|blockquote|pre|table|figure'.indexOf('|' + tagName + '|') > -1) {
+        return
+      }
+    }
+    var highlight = document.createElement('span')
+    highlight.className = 'long-article-paragraph-highlight'
+    while (paragraph.firstChild) {
+      highlight.appendChild(paragraph.firstChild)
+    }
+    paragraph.appendChild(highlight)
+  },
+
+  getActiveParagraphId: function () {
+    return this.activeParagraphId
+  },
+
+  getSubmissionParagraphId: function (originalCommentId) {
+    if (this.activeParagraphOrphaned && !originalCommentId) {
+      return ''
+    }
+    return this.activeParagraphId
+  },
+
+  activateFromComment: function (element) {
+    var root = element && element.closest ? element.closest('[data-comment-paragraph-id]') : null
+    if (root && root.getAttribute('data-comment-paragraph-id')) {
+      this.activeParagraphId = root.getAttribute('data-comment-paragraph-id')
+      this.activeParagraphOrphaned = root.getAttribute('data-comment-paragraph-status') === '1'
+    }
+  },
+
+  handleSubmitSuccess: function () {
+    if (!this.activeParagraphId) {
+      return
+    }
+    if (this.activeParagraphOrphaned) {
+      window.setTimeout(function () { window.location.reload() }, 250)
+      return
+    }
+    var self = this
+    window.setTimeout(function () {
+      self.loadSummary()
+      self.load(self.currentPage)
+    }, 250)
+  },
+
+  handleRemove: function (paragraphId) {
+    if (!paragraphId) {
+      return
+    }
+    this.counts[paragraphId] = Math.max(0, parseInt(this.counts[paragraphId] || 0) - 1)
+    this.updateParagraphButton(paragraphId)
+    if (this.activeParagraphId === paragraphId) {
+      this.paragraphPanel.querySelector('[data-paragraph-comment-count]').textContent =
+        ' ' + this.counts[paragraphId] + ' 条'
+    }
+  },
+
+  handleRealtime: function (data) {
+    var paragraphId = data.commentParagraphId || ''
+    if (!paragraphId) {
+      return
+    }
+    this.counts[paragraphId] = parseInt(this.counts[paragraphId] || 0) + 1
+    this.updateParagraphButton(paragraphId)
+    if (this.activeParagraphId === paragraphId) {
+      var self = this
+      window.setTimeout(function () { self.load(self.currentPage) }, 100)
+    }
+  },
+
+  getQueryValue: function (key) {
+    var match = window.location.search.match(new RegExp('(?:^|[?&])' + key + '=([^&]*)'))
+    return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : ''
+  },
+
+  updateURL: function (paragraphId) {
+    var search = String(window.location.search || '').replace(/^\?/, '').split('&').filter(function (part) {
+      return part && part.split('=')[0] !== 'paragraph'
+    })
+    if (paragraphId) {
+      search.push('paragraph=' + encodeURIComponent(paragraphId))
+    }
+    window.history.replaceState({}, '', window.location.pathname + (search.length ? '?' + search.join('&') : '') + window.location.hash)
+  },
+
+  focusLocationComment: function () {
+    var self = this
+    window.setTimeout(function () {
+      var id = window.location.hash.replace(/^#/, '')
+      var target = id ? document.getElementById(id) : null
+      if (target && self.paragraphPanel.contains(target)) {
+        target.scrollIntoView({block: 'center'})
+        Comment._bgFade($(target), {scroll: false})
+      }
+    }, 0)
+  },
+
+  openOrphanedCommentFromHash: function () {
+    var id = window.location.hash.replace(/^#/, '')
+    var target = id ? document.getElementById(id) : null
+    if (!target) {
+      return
+    }
+    var details = target.closest ? target.closest('.long-article-orphaned-comments') : null
+    if (!details) {
+      return
+    }
+    details.open = true
+    this.controller.openComments()
+    window.setTimeout(function () {
+      target.scrollIntoView({block: 'center'})
+      Comment._bgFade($(target), {scroll: false})
+    }, 0)
+  },
+}
diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js
index fc306a70..241941a1 100644
--- a/src/main/resources/js/long-article.js
+++ b/src/main/resources/js/long-article.js
@@ -7,139 +7,372 @@
  * it under the terms of the GNU Affero General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 /**
  * Long article reading page functionality.
  */
 window.LongArticle = {
+    storageKey: 'longArticleSettings',
+    allowedWidths: ['auto', '600', '800', '1000', '1200'],
     settings: {
-        theme: 'light',
-        fontSize: 18,
-        width: 900
+        width: '800',
+        desktopFontSize: 18,
+        mobileFontSize: 16
     },
 
-    init: function() {
+    init: function () {
+        if (this.initialized) {
+            return;
+        }
+        this.initialized = true;
         this.loadSettings();
         this.bindEvents();
         this.applySettings();
+        this.formatParagraphIndentation();
+        this.updateTopButton();
+        if (this.shouldOpenCommentsFromLocation()) {
+            this.openComments();
+            this.focusLocationComment();
+        }
     },
 
-    loadSettings: function() {
-        var saved = localStorage.getItem('longArticleSettings');
-        if (saved) {
-            try {
-                this.settings = JSON.parse(saved);
-            } catch (e) {
-                console.error('Failed to parse settings', e);
+    loadSettings: function () {
+        var settings = {
+            width: '800',
+            desktopFontSize: 18,
+            mobileFontSize: 16
+        };
+        var saved;
+
+        try {
+            saved = JSON.parse(window.localStorage.getItem(this.storageKey) || '{}');
+        } catch (e) {
+            saved = {};
+        }
+
+        if (saved && typeof saved === 'object') {
+            settings.width = this.normalizeWidth(saved.width);
+            settings.desktopFontSize = this.normalizeFontSize(saved.desktopFontSize || saved.fontSize, 18, 32, 18);
+            settings.mobileFontSize = this.normalizeFontSize(saved.mobileFontSize, 16, 24, 16);
+        }
+
+        try {
+            var legacyFontSize = parseInt(window.localStorage.getItem('longArticleFontSize'), 10);
+            if (!saved.desktopFontSize && !saved.fontSize && !isNaN(legacyFontSize)) {
+                settings.desktopFontSize = this.normalizeFontSize(legacyFontSize, 18, 32, 18);
+                settings.mobileFontSize = this.normalizeFontSize(legacyFontSize, 16, 24, 16);
             }
+            var mobileSettings = JSON.parse(window.localStorage.getItem('mLongArticleSettings') || '{}');
+            if (!saved.mobileFontSize && mobileSettings && !isNaN(parseInt(mobileSettings.fontSize, 10))) {
+                settings.mobileFontSize = this.normalizeFontSize(parseInt(mobileSettings.fontSize, 10), 16, 24, 16);
+            }
+            window.localStorage.removeItem('longArticleFontSize');
+            window.localStorage.removeItem('mLongArticleSettings');
+        } catch (e) {
+            // Ignore unavailable or malformed legacy storage.
         }
-    },
 
-    saveSettings: function() {
-        localStorage.setItem('longArticleSettings', JSON.stringify(this.settings));
+        this.settings = settings;
+        this.saveSettings();
     },
 
-    applySettings: function() {
-        var body = document.body;
-        var container = document.querySelector('.long-article-container');
-        var content = document.querySelector('.long-article-content');
+    normalizeWidth: function (width) {
+        width = String(width || '800');
+        return this.allowedWidths.indexOf(width) >= 0 ? width : '800';
+    },
 
-        // Theme
-        if (this.settings.theme === 'night') {
-            body.classList.add('night');
-        } else {
-            body.classList.remove('night');
+    normalizeFontSize: function (size, min, max, fallback) {
+        size = parseInt(size, 10);
+        if (isNaN(size)) {
+            return fallback;
         }
+        return Math.max(min, Math.min(max, size));
+    },
 
-        // Font size
-        if (content) {
-            content.style.fontSize = this.settings.fontSize + 'px';
-        }
-        document.getElementById('fontSizeValue').textContent = this.settings.fontSize + 'px';
+    formatParagraphIndentation: function () {
+        document.querySelectorAll('.long-article-content > p').forEach(function (paragraph) {
+            var hasDirectBreak = Array.prototype.some.call(paragraph.childNodes, function (node) {
+                return node.nodeType === 1 && node.tagName === 'BR';
+            });
+            if (!hasDirectBreak || paragraph.querySelector('img, picture, video, iframe')) {
+                return;
+            }
+
+            var fragment = document.createDocumentFragment();
+            var line = document.createElement('span');
+            line.className = 'long-article-paragraph-line';
+            Array.prototype.slice.call(paragraph.childNodes).forEach(function (node) {
+                if (node.nodeType === 1 && node.tagName === 'BR') {
+                    fragment.appendChild(line);
+                    line = document.createElement('span');
+                    line.className = 'long-article-paragraph-line';
+                } else {
+                    line.appendChild(node);
+                }
+            });
+            fragment.appendChild(line);
+            paragraph.textContent = '';
+            paragraph.classList.add('long-article-paragraph-lines');
+            paragraph.appendChild(fragment);
+        });
+    },
 
-        // Width
-        if (container) {
-            container.style.width = this.settings.width + 'px';
+    saveSettings: function () {
+        try {
+            window.localStorage.setItem(this.storageKey, JSON.stringify(this.settings));
+        } catch (e) {
+            // Ignore unavailable storage.
         }
-        document.documentElement.style.setProperty('--la-content-width', this.settings.width + 'px');
     },
 
-    bindEvents: function() {
+    applySettings: function () {
+        var root = document.documentElement;
+        var width = this.settings.width;
+        var halfWidth = width === 'auto' ? 'min(40vw, 600px)' : (parseInt(width, 10) / 2) + 'px';
+
+        root.style.setProperty('--long-article-width', width === 'auto' ? 'min(80vw, 1200px)' : width + 'px');
+        root.style.setProperty('--long-article-half-width', halfWidth);
+        root.style.setProperty('--long-article-font-size', this.settings.desktopFontSize + 'px');
+        this.updateWidthButtons();
+        this.updateLayoutMetrics();
+    },
+
+    bindEvents: function () {
         var self = this;
+        var toolbar = document.querySelector('[data-long-article-toolbar]');
+        if (!toolbar) {
+            return;
+        }
 
-        // Close settings panel when clicking outside
-        document.addEventListener('click', function(e) {
-            var panel = document.getElementById('settingsPanel');
-            var toggle = document.querySelector('.sidebar-item[onclick*="openSettings"]');
-            if (panel && panel.classList.contains('active')) {
-                if (!panel.contains(e.target) && (!toggle || !toggle.contains(e.target))) {
-                    panel.classList.remove('active');
+        toolbar.addEventListener('click', function (event) {
+            var actionElement = self.findActionElement(event.target, toolbar);
+            if (!actionElement) {
+                return;
+            }
+            var action = actionElement.getAttribute('data-long-article-action');
+            if (action === 'top') {
+                self.scrollToTop();
+            } else if (action === 'comments') {
+                if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) {
+                    window.LongArticleParagraphComments.showChapterComments();
+                    self.openComments();
+                } else {
+                    self.toggleComments();
                 }
+            } else if (action === 'font-decrease') {
+                self.setFontSize(-2);
+            } else if (action === 'font-increase') {
+                self.setFontSize(2);
+            } else if (action === 'layout') {
+                self.toggleLayoutPanel();
+            } else if (actionElement.hasAttribute('data-long-article-width')) {
+                self.setWidth(actionElement.getAttribute('data-long-article-width'));
             }
         });
+
+        document.addEventListener('click', function (event) {
+            var panel = document.getElementById('longArticleLayoutPanel');
+            var layoutButton = toolbar.querySelector('[data-long-article-action="layout"]');
+            if (panel && panel.classList.contains('is-open') && !panel.contains(event.target) && !layoutButton.contains(event.target)) {
+                self.closeLayoutPanel();
+            }
+            if (event.target.closest && event.target.closest('[data-long-article-comments-close]')) {
+                self.closeComments();
+            }
+        });
+
+        document.addEventListener('keydown', function (event) {
+            if (event.key === 'Escape' && self.isCommentsOpen()) {
+                self.closeComments();
+            }
+        });
+
+        window.addEventListener('resize', function () {
+            self.updateLayoutMetrics();
+        });
+        window.addEventListener('scroll', function () {
+            self.updateTopButton();
+        }, {passive: true});
     },
 
-    openSettings: function() {
-        var panel = document.getElementById('settingsPanel');
-        if (panel) {
-            panel.classList.toggle('active');
+    findActionElement: function (target, boundary) {
+        while (target && target !== boundary) {
+            if (target.nodeType === 1 && (target.hasAttribute('data-long-article-action') || target.hasAttribute('data-long-article-width'))) {
+                return target;
+            }
+            target = target.parentNode;
         }
+        return target && target !== boundary && target.nodeType === 1 ? target : null;
     },
 
-    setTheme: function(theme) {
-        this.settings.theme = theme;
+    setFontSize: function (delta) {
+        this.settings.desktopFontSize = this.normalizeFontSize(this.settings.desktopFontSize + delta, 12, 32, 18);
         this.saveSettings();
         this.applySettings();
+    },
 
-        // Update active state
-        var lightBtn = document.querySelector('.theme-btn.light');
-        var nightBtn = document.querySelector('.theme-btn.night');
-        if (lightBtn) lightBtn.classList.toggle('active', theme === 'light');
-        if (nightBtn) nightBtn.classList.toggle('active', theme === 'night');
+    setWidth: function (width) {
+        this.settings.width = this.normalizeWidth(width);
+        this.saveSettings();
+        this.applySettings();
+        this.closeLayoutPanel();
     },
 
-    setFontSize: function(delta) {
-        var newSize = this.settings.fontSize + delta;
-        if (newSize >= 12 && newSize <= 32) {
-            this.settings.fontSize = newSize;
-            this.saveSettings();
-            this.applySettings();
+    updateWidthButtons: function () {
+        var width = this.settings.width;
+        document.querySelectorAll('[data-long-article-width]').forEach(function (button) {
+            button.classList.toggle('is-active', button.getAttribute('data-long-article-width') === width);
+        });
+        var fontSize = document.querySelector('[data-long-article-font-size]');
+        if (fontSize) {
+            fontSize.textContent = this.settings.desktopFontSize + 'px';
         }
     },
 
-    setWidth: function(width) {
-        this.settings.width = width;
-        this.saveSettings();
-        this.applySettings();
+    updateTopButton: function () {
+        var button = document.querySelector('[data-long-article-action="top"]');
+        if (button) {
+            button.classList.toggle('is-visible', (window.pageYOffset || document.documentElement.scrollTop || 0) > 320);
+        }
+    },
 
-        // Update active state
-        var widthBtns = document.querySelectorAll('.width-btn');
-        widthBtns.forEach(function(btn) {
-            var btnWidth = btn.getAttribute('onclick').match(/\d+/);
-            if (btnWidth && parseInt(btnWidth[0]) === width) {
-                btn.classList.add('active');
-            } else {
-                btn.classList.remove('active');
-            }
-        });
+    toggleLayoutPanel: function () {
+        var panel = document.getElementById('longArticleLayoutPanel');
+        var button = document.querySelector('[data-long-article-action="layout"]');
+        if (!panel || !button) {
+            return;
+        }
+        var open = !panel.classList.contains('is-open');
+        panel.classList.toggle('is-open', open);
+        panel.setAttribute('aria-hidden', open ? 'false' : 'true');
+        button.setAttribute('aria-expanded', open ? 'true' : 'false');
     },
 
-    toggleNight: function() {
-        this.setTheme(this.settings.theme === 'night' ? 'light' : 'night');
+    closeLayoutPanel: function () {
+        var panel = document.getElementById('longArticleLayoutPanel');
+        var button = document.querySelector('[data-long-article-action="layout"]');
+        if (panel) {
+            panel.classList.remove('is-open');
+            panel.setAttribute('aria-hidden', 'true');
+        }
+        if (button) {
+            button.setAttribute('aria-expanded', 'false');
+        }
     },
 
-    scrollToTop: function() {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
+    updateLayoutMetrics: function () {
+        var root = document.documentElement;
+        var viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0;
+        var selectedWidth = this.settings.width === 'auto' ? Math.min(viewportWidth * 0.8, 1200) : parseInt(this.settings.width, 10);
+        var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28));
+        var drawerWidth = viewportWidth <= 768
+            ? Math.max(280, viewportWidth - 20)
+            : 320;
+        var articleDrawerGap = 0;
+        var toolbarGap = 14;
+        var toolbarWidth = 64;
+        var safeMargin = 14;
+        var inline = viewportWidth >= 960;
+        var openArticleWidth = closedArticleWidth;
+
+        if (inline) {
+            var maxInlineStageWidth = viewportWidth - (toolbarWidth + toolbarGap + safeMargin) * 2;
+            var maxInlineArticleWidth = maxInlineStageWidth - drawerWidth - articleDrawerGap;
+            openArticleWidth = Math.min(closedArticleWidth, Math.max(480, maxInlineArticleWidth));
+            inline = openArticleWidth >= 480;
+        }
+
+        var stageWidth = inline ? openArticleWidth + articleDrawerGap + drawerWidth : closedArticleWidth;
+        var stageLeft = Math.max(safeMargin, (viewportWidth - stageWidth) / 2);
+        var drawerLeft = inline ? stageLeft + openArticleWidth + articleDrawerGap : viewportWidth - drawerWidth;
+        var closedToolbarLeft = Math.min(viewportWidth - toolbarWidth - safeMargin, (viewportWidth - closedArticleWidth) / 2 + closedArticleWidth + toolbarGap);
+        var openToolbarLeft = inline ? stageLeft + stageWidth + toolbarGap : closedToolbarLeft;
+
+        root.style.setProperty('--long-article-stage-width', stageWidth + 'px');
+        root.style.setProperty('--long-article-stage-left', stageLeft + 'px');
+        root.style.setProperty('--long-article-open-article-width', openArticleWidth + 'px');
+        document.body.style.setProperty('--long-article-drawer-width', drawerWidth + 'px');
+        root.style.setProperty('--long-article-drawer-left', drawerLeft + 'px');
+        root.style.setProperty('--long-article-toolbar-closed-left', closedToolbarLeft + 'px');
+        root.style.setProperty('--long-article-toolbar-open-left', openToolbarLeft + 'px');
+        document.body.classList.toggle('long-article-comments-inline', inline);
+    },
+
+    scrollToTop: function () {
+        window.scrollTo({top: 0, behavior: 'smooth'});
+    },
+
+    getCommentsPanel: function () {
+        return document.getElementById('articleCommentsPanel');
+    },
+
+    isCommentsOpen: function () {
+        return document.body.classList.contains('long-article-comments-open');
+    },
+
+    toggleComments: function () {
+        if (this.isCommentsOpen()) {
+            this.closeComments();
+        } else {
+            this.openComments();
+        }
+    },
+
+    openComments: function () {
+        var panel = this.getCommentsPanel();
+        var button = document.querySelector('[data-long-article-action="comments"]');
+        if (!panel) {
+            return;
+        }
+        this.closeLayoutPanel();
+        this.updateLayoutMetrics();
+        document.body.classList.add('long-article-comments-open');
+        panel.setAttribute('aria-hidden', 'false');
+        if (button) {
+            button.classList.add('is-active');
+            button.setAttribute('aria-expanded', 'true');
+        }
+    },
+
+    closeComments: function () {
+        var panel = this.getCommentsPanel();
+        var button = document.querySelector('[data-long-article-action="comments"]');
+        var editorPanel = document.querySelector('.editor-panel');
+        if (editorPanel && window.getComputedStyle(editorPanel).display !== 'none' && window.Comment && typeof window.Comment._hideReplyPanel === 'function') {
+            window.Comment._hideReplyPanel();
+        }
+        if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) {
+            window.LongArticleParagraphComments.showChapterComments(true, false);
+        }
+        document.body.classList.remove('long-article-comments-open');
+        if (panel) {
+            panel.setAttribute('aria-hidden', 'true');
+        }
+        if (button) {
+            button.classList.remove('is-active');
+            button.setAttribute('aria-expanded', 'false');
+        }
+    },
+
+    shouldOpenCommentsFromLocation: function () {
+        var panel = this.getCommentsPanel();
+        var hash = window.location.hash.replace(/^#/, '');
+        var target = hash ? document.getElementById(hash) : null;
+        if (panel && target && panel.contains(target)) {
+            return true;
+        }
+        return /(?:\?|&)(?:p|m|sort|author|paragraph)=/.test(window.location.search);
+    },
+
+    focusLocationComment: function () {
+        var self = this;
+        window.setTimeout(function () {
+            var hash = window.location.hash.replace(/^#/, '');
+            var target = hash ? document.getElementById(hash) : null;
+            var panel = self.getCommentsPanel();
+            if (panel && target && panel.contains(target)) {
+                target.scrollIntoView({block: 'center'});
+            }
+        }, 0);
     }
 };
diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js
index c3cd0a91..183e2d2d 100644
--- a/src/main/resources/js/long-article.min.js
+++ b/src/main/resources/js/long-article.min.js
@@ -1 +1 @@
-window.LongArticle={settings:{theme:"light",fontSize:18,width:900},init:function(){this.loadSettings(),this.bindEvents(),this.applySettings()},loadSettings:function(){var t=localStorage.getItem("longArticleSettings");if(t)try{this.settings=JSON.parse(t)}catch(t){console.error("Failed to parse settings",t)}},saveSettings:function(){localStorage.setItem("longArticleSettings",JSON.stringify(this.settings))},applySettings:function(){var t=document.body,e=document.querySelector(".long-article-container"),i=document.querySelector(".long-article-content");"night"===this.settings.theme?t.classList.add("night"):t.classList.remove("night"),i&&(i.style.fontSize=this.settings.fontSize+"px"),document.getElementById("fontSizeValue").textContent=this.settings.fontSize+"px",e&&(e.style.width=this.settings.width+"px"),document.documentElement.style.setProperty("--la-content-width",this.settings.width+"px")},bindEvents:function(){document.addEventListener("click",function(t){var e=document.getElementById("settingsPanel"),i=document.querySelector('.sidebar-item[onclick*="openSettings"]');e&&e.classList.contains("active")&&(e.contains(t.target)||i&&i.contains(t.target)||e.classList.remove("active"))})},openSettings:function(){var t=document.getElementById("settingsPanel");t&&t.classList.toggle("active")},setTheme:function(t){this.settings.theme=t,this.saveSettings(),this.applySettings();var e=document.querySelector(".theme-btn.light"),i=document.querySelector(".theme-btn.night");e&&e.classList.toggle("active","light"===t),i&&i.classList.toggle("active","night"===t)},setFontSize:function(t){var e=this.settings.fontSize+t;e>=12&&e<=32&&(this.settings.fontSize=e,this.saveSettings(),this.applySettings())},setWidth:function(t){this.settings.width=t,this.saveSettings(),this.applySettings(),document.querySelectorAll(".width-btn").forEach(function(e){var i=e.getAttribute("onclick").match(/\d+/);i&&parseInt(i[0])===t?e.classList.add("active"):e.classList.remove("active")})},toggleNight:function(){this.setTheme("night"===this.settings.theme?"light":"night")},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})}};
\ No newline at end of file
+window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=document.documentElement.clientWidth||window.innerWidth||0,n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(280,e-20):Math.min(320,Math.max(280,.2*e)),a=e>=960,s=o;if(a){var l=e-144-i-0;a=(s=Math.min(o,Math.max(480,l)))>=480}var r=a?s+0+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+0:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?c+r+14:m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}};
\ No newline at end of file
diff --git a/src/main/resources/js/m-article.js b/src/main/resources/js/m-article.js
index 9200a9e7..550e4610 100644
--- a/src/main/resources/js/m-article.js
+++ b/src/main/resources/js/m-article.js
@@ -154,6 +154,7 @@ var Comment = {
       + Comment.renderThreadReplyAction(data)
       + Comment.renderThreadHistoryAction(data)
       + Comment.renderThreadEditAction(data)
+      + Comment.renderThreadRemoveAction(data)
       + Comment.renderThreadThankAction(data)
       + Comment.renderThreadVoteAction(data, true)
       + Comment.renderThreadVoteAction(data, false)
@@ -210,6 +211,15 @@ var Comment = {
       Comment.escapeJSString(data.oId) +
       '\')"><svg class="icon-reply"><use xlink:href="#reply"></use></svg></span>'
   },
+  renderThreadRemoveAction: function (data) {
+    if (!data.commentIsCurrentUser || !Label.canRemoveComment) {
+      return ''
+    }
+    return '<span aria-label="' + Comment.escapeHTML(Label.removeCommentLabel) +
+      '" class="tooltipped tooltipped-n" onclick="Comment.remove(\'' +
+      Comment.escapeJSString(data.oId) +
+      '\')"><svg class="ft-red"><use xlink:href="#remove"></use></svg></span>'
+  },
   renderThreadEditAction: function (data) {
     if (!data.commentIsCurrentUser || !Label.canUpdateComment) {
       return ''
@@ -986,6 +996,8 @@ var Comment = {
     if (!confirm(Label.confirmRemoveLabel)) {
       return false
     }
+    var commentElement = document.getElementById(id)
+    var paragraphId = commentElement ? commentElement.getAttribute('data-comment-paragraph-id') : ''
     $.ajax({
       url: Label.servePath + '/comment/' + id + '/remove',
       type: 'POST',
@@ -993,6 +1005,9 @@ var Comment = {
       success: function (result, textStatus) {
         if (result.code === 0) {
           $('#' + id).remove()
+          if (paragraphId && window.LongArticleParagraphComments) {
+            window.LongArticleParagraphComments.handleRemove(paragraphId)
+          }
         } else {
           Util.alert(result.msg)
         }
@@ -1574,12 +1589,21 @@ var Comment = {
         data('commentOriginalCommentId')
     }
 
+    var paragraphComments = window.LongArticleParagraphComments
+    var paragraphId = paragraphComments && paragraphComments.getSubmissionParagraphId
+      ? paragraphComments.getSubmissionParagraphId(requestJSONObject.commentOriginalCommentId) : ''
+    if (paragraphId) {
+      requestJSONObject.paragraphId = paragraphId
+    }
+
     var url = Label.servePath + '/comment',
       type = 'POST',
       commentId = $replyUseName.data('commentId')
     if (commentId) {
       url = Label.servePath + '/comment/' + commentId
       type = 'PUT'
+    } else if (paragraphId) {
+      url = Label.servePath + '/comment/paragraph'
     }
 
     $.ajax({
@@ -1611,6 +1635,10 @@ var Comment = {
           // clear reply comment
           Comment._clearReplyUseName()
 
+          if (paragraphId && paragraphComments) {
+            paragraphComments.handleSubmitSuccess()
+          }
+
           // clear local storage
           if (window.localStorage) {
             var emptyContent = {
@@ -1648,6 +1676,9 @@ var Comment = {
    * @param {String} userName 用户名称
    */
   reply: function (userName, id) {
+    if (window.LongArticleParagraphComments) {
+      window.LongArticleParagraphComments.activateFromComment(document.getElementById(id))
+    }
     var safeUserName = Comment.escapeHTML(userName),
       $replyUseName = Comment._getReplyUseName()
 
diff --git a/src/main/resources/js/m-long-article.js b/src/main/resources/js/m-long-article.js
index 8df68581..a68333d6 100644
--- a/src/main/resources/js/m-long-article.js
+++ b/src/main/resources/js/m-long-article.js
@@ -7,106 +7,207 @@
  * it under the terms of the GNU Affero General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 /**
  * Mobile long article reading page functionality.
  */
 window.MLongArticle = {
+    storageKey: 'longArticleSettings',
     settings: {
-        theme: 'light',
-        fontSize: 16
+        width: '800',
+        desktopFontSize: 18,
+        mobileFontSize: 16
     },
 
-    init: function() {
+    init: function () {
+        if (this.initialized) {
+            return;
+        }
+        this.initialized = true;
         this.loadSettings();
         this.bindEvents();
         this.applySettings();
+        if (this.shouldOpenCommentsFromLocation()) {
+            this.openComments();
+            this.focusLocationComment();
+        }
     },
 
-    loadSettings: function() {
-        var saved = localStorage.getItem('mLongArticleSettings');
-        if (saved) {
-            try {
-                this.settings = JSON.parse(saved);
-            } catch (e) {
-                console.error('Failed to parse settings', e);
+    loadSettings: function () {
+        var settings = {
+            width: '800',
+            desktopFontSize: 18,
+            mobileFontSize: 16
+        };
+        var saved;
+
+        try {
+            saved = JSON.parse(window.localStorage.getItem(this.storageKey) || '{}');
+        } catch (e) {
+            saved = {};
+        }
+        if (saved && typeof saved === 'object') {
+            settings.width = ['auto', '600', '800', '1000', '1200'].indexOf(String(saved.width || '800')) >= 0 ? String(saved.width || '800') : '800';
+            settings.desktopFontSize = this.normalizeFontSize(saved.desktopFontSize || saved.fontSize, 18, 32, 18);
+            settings.mobileFontSize = this.normalizeFontSize(saved.mobileFontSize || saved.fontSize, 16, 24, 16);
+        }
+
+        try {
+            var legacyFontSize = parseInt(window.localStorage.getItem('longArticleFontSize'), 10);
+            var oldSettings = JSON.parse(window.localStorage.getItem('mLongArticleSettings') || '{}');
+            if (!saved.mobileFontSize && oldSettings && !isNaN(parseInt(oldSettings.fontSize, 10))) {
+                settings.mobileFontSize = this.normalizeFontSize(parseInt(oldSettings.fontSize, 10), 16, 24, 16);
+            } else if (!saved.mobileFontSize && !isNaN(legacyFontSize)) {
+                settings.mobileFontSize = this.normalizeFontSize(legacyFontSize, 16, 24, 16);
             }
+            window.localStorage.removeItem('longArticleFontSize');
+            window.localStorage.removeItem('mLongArticleSettings');
+        } catch (e) {
+            // Ignore unavailable or malformed legacy storage.
         }
-    },
 
-    saveSettings: function() {
-        localStorage.setItem('mLongArticleSettings', JSON.stringify(this.settings));
+        this.settings = settings;
+        this.saveSettings();
     },
 
-    applySettings: function() {
-        var body = document.body;
-        var content = document.querySelector('.m-long-article-content');
-
-        if (this.settings.theme === 'night') {
-            body.classList.add('night');
-        } else {
-            body.classList.remove('night');
+    normalizeFontSize: function (size, min, max, fallback) {
+        size = parseInt(size, 10);
+        if (isNaN(size)) {
+            return fallback;
         }
+        return Math.max(min, Math.min(max, size));
+    },
 
-        if (content) {
-            content.style.fontSize = this.settings.fontSize + 'px';
-        }
-        var fontSizeEl = document.getElementById('mFontSizeValue');
-        if (fontSizeEl) {
-            fontSizeEl.textContent = this.settings.fontSize + 'px';
+    saveSettings: function () {
+        try {
+            window.localStorage.setItem(this.storageKey, JSON.stringify(this.settings));
+        } catch (e) {
+            // Ignore unavailable storage.
         }
     },
 
-    bindEvents: function() {
-        var self = this;
+    applySettings: function () {
+        document.documentElement.style.setProperty('--long-article-font-size', this.settings.mobileFontSize + 'px');
+    },
 
-        document.addEventListener('click', function(e) {
-            var panel = document.getElementById('mSettingsPanel');
-            var toggle = document.querySelector('.m-action-btn[onclick*="openSettings"]');
-            if (panel && panel.classList.contains('active')) {
-                if (!panel.contains(e.target) && (!toggle || !toggle.contains(e.target))) {
-                    panel.classList.remove('active');
+    bindEvents: function () {
+        var self = this;
+        var toolbar = document.querySelector('[data-long-article-toolbar]');
+        if (!toolbar) {
+            return;
+        }
+        toolbar.addEventListener('click', function (event) {
+            var target = event.target;
+            while (target && target !== toolbar && !target.hasAttribute('data-long-article-action')) {
+                target = target.parentNode;
+            }
+            if (!target || target === toolbar) {
+                return;
+            }
+            var action = target.getAttribute('data-long-article-action');
+            if (action === 'toggle') {
+                var open = !toolbar.classList.contains('is-open');
+                toolbar.classList.toggle('is-open', open);
+                target.classList.toggle('active', open);
+                target.setAttribute('aria-expanded', open ? 'true' : 'false');
+            } else if (action === 'top') {
+                window.scrollTo({top: 0, behavior: 'smooth'});
+            } else if (action === 'comments') {
+                if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) {
+                    window.LongArticleParagraphComments.showChapterComments();
+                    self.openComments();
+                } else {
+                    self.toggleComments();
                 }
+            } else if (action === 'font-decrease') {
+                self.setFontSize(-2);
+            } else if (action === 'font-increase') {
+                self.setFontSize(2);
             }
         });
-    },
 
-    openSettings: function() {
-        var panel = document.getElementById('mSettingsPanel');
-        if (panel) {
-            panel.classList.toggle('active');
-        }
+        document.addEventListener('click', function (event) {
+            if (event.target.closest && event.target.closest('[data-long-article-comments-close]')) {
+                self.closeComments();
+            }
+        });
     },
 
-    setTheme: function(theme) {
-        this.settings.theme = theme;
+    setFontSize: function (delta) {
+        this.settings.mobileFontSize = this.normalizeFontSize(this.settings.mobileFontSize + delta, 12, 24, 16);
         this.saveSettings();
         this.applySettings();
+    },
+
+    getCommentsPanel: function () {
+        return document.getElementById('comments');
+    },
+
+    isCommentsOpen: function () {
+        return document.body.classList.contains('long-article-comments-open');
+    },
+
+    toggleComments: function () {
+        if (this.isCommentsOpen()) {
+            this.closeComments();
+        } else {
+            this.openComments();
+        }
+    },
 
-        var lightBtn = document.querySelector('.m-theme-btn.light');
-        var nightBtn = document.querySelector('.m-theme-btn.night');
-        if (lightBtn) lightBtn.classList.toggle('active', theme === 'light');
-        if (nightBtn) nightBtn.classList.toggle('active', theme === 'night');
+    openComments: function () {
+        var panel = this.getCommentsPanel();
+        var button = document.querySelector('[data-long-article-action="comments"]');
+        if (!panel) {
+            return;
+        }
+        document.body.classList.add('long-article-comments-open');
+        panel.setAttribute('aria-hidden', 'false');
+        if (button) {
+            button.classList.add('is-active');
+            button.setAttribute('aria-expanded', 'true');
+        }
     },
 
-    setFontSize: function(delta) {
-        var newSize = this.settings.fontSize + delta;
-        if (newSize >= 12 && newSize <= 24) {
-            this.settings.fontSize = newSize;
-            this.saveSettings();
-            this.applySettings();
+    closeComments: function () {
+        var panel = this.getCommentsPanel();
+        var button = document.querySelector('[data-long-article-action="comments"]');
+        var editorPanel = document.querySelector('.editor-panel');
+        if (editorPanel && editorPanel.classList.contains('editor-panel--open') && window.Comment && typeof window.Comment._hideReplyPanel === 'function') {
+            window.Comment._hideReplyPanel();
+        }
+        if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) {
+            window.LongArticleParagraphComments.showChapterComments(true, false);
+        }
+        document.body.classList.remove('long-article-comments-open');
+        if (panel) {
+            panel.setAttribute('aria-hidden', 'true');
+        }
+        if (button) {
+            button.classList.remove('is-active');
+            button.setAttribute('aria-expanded', 'false');
         }
     },
 
-    toggleNight: function() {
-        this.setTheme(this.settings.theme === 'night' ? 'light' : 'night');
+    shouldOpenCommentsFromLocation: function () {
+        var panel = this.getCommentsPanel();
+        var hash = window.location.hash.replace(/^#/, '');
+        var target = hash ? document.getElementById(hash) : null;
+        if (panel && target && panel.contains(target)) {
+            return true;
+        }
+        return /(?:\?|&)(?:p|m|sort|author|paragraph)=/.test(window.location.search);
+    },
+
+    focusLocationComment: function () {
+        var self = this;
+        window.setTimeout(function () {
+            var hash = window.location.hash.replace(/^#/, '');
+            var target = hash ? document.getElementById(hash) : null;
+            var panel = self.getCommentsPanel();
+            if (panel && target && panel.contains(target)) {
+                target.scrollIntoView({block: 'center'});
+            }
+        }, 0);
     }
 };
diff --git a/src/main/resources/js/m-long-article.min.js b/src/main/resources/js/m-long-article.min.js
index 9feb097f..6f13694b 100644
--- a/src/main/resources/js/m-long-article.min.js
+++ b/src/main/resources/js/m-long-article.min.js
@@ -1 +1 @@
-window.MLongArticle={settings:{theme:"light",fontSize:16},init:function(){this.loadSettings(),this.bindEvents(),this.applySettings()},loadSettings:function(){var t=localStorage.getItem("mLongArticleSettings");if(t)try{this.settings=JSON.parse(t)}catch(t){console.error("Failed to parse settings",t)}},saveSettings:function(){localStorage.setItem("mLongArticleSettings",JSON.stringify(this.settings))},applySettings:function(){var t=document.body,e=document.querySelector(".m-long-article-content");"night"===this.settings.theme?t.classList.add("night"):t.classList.remove("night"),e&&(e.style.fontSize=this.settings.fontSize+"px");var n=document.getElementById("mFontSizeValue");n&&(n.textContent=this.settings.fontSize+"px")},bindEvents:function(){document.addEventListener("click",function(t){var e=document.getElementById("mSettingsPanel"),n=document.querySelector('.m-action-btn[onclick*="openSettings"]');e&&e.classList.contains("active")&&(e.contains(t.target)||n&&n.contains(t.target)||e.classList.remove("active"))})},openSettings:function(){var t=document.getElementById("mSettingsPanel");t&&t.classList.toggle("active")},setTheme:function(t){this.settings.theme=t,this.saveSettings(),this.applySettings();var e=document.querySelector(".m-theme-btn.light"),n=document.querySelector(".m-theme-btn.night");e&&e.classList.toggle("active","light"===t),n&&n.classList.toggle("active","night"===t)},setFontSize:function(t){var e=this.settings.fontSize+t;e>=12&&e<=24&&(this.settings.fontSize=e,this.saveSettings(),this.applySettings())},toggleNight:function(){this.setTheme("night"===this.settings.theme?"light":"night")}};
\ No newline at end of file
+window.MLongArticle={storageKey:"longArticleSettings",settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=["auto","600","800","1000","1200"].indexOf(String(t.width||"800"))>=0?String(t.width||"800"):"800",e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize||t.fontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10),o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))?t.mobileFontSize||isNaN(n)||(e.mobileFontSize=this.normalizeFontSize(n,16,24,16)):e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){document.documentElement.style.setProperty("--long-article-font-size",this.settings.mobileFontSize+"px")},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){for(var o=n.target;o&&o!==e&&!o.hasAttribute("data-long-article-action");)o=o.parentNode;if(o&&o!==e){var i=o.getAttribute("data-long-article-action");if("toggle"===i){var s=!e.classList.contains("is-open");e.classList.toggle("is-open",s),o.classList.toggle("active",s),o.setAttribute("aria-expanded",s?"true":"false")}else"top"===i?window.scrollTo({top:0,behavior:"smooth"}):"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i&&t.setFontSize(2)}}),document.addEventListener("click",function(e){e.target.closest&&e.target.closest("[data-long-article-comments-close]")&&t.closeComments()}))},setFontSize:function(t){this.settings.mobileFontSize=this.normalizeFontSize(this.settings.mobileFontSize+t,12,24,16),this.saveSettings(),this.applySettings()},getCommentsPanel:function(){return document.getElementById("comments")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&n.classList.contains("editor-panel--open")&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}};
\ No newline at end of file
diff --git a/src/main/resources/repository.json b/src/main/resources/repository.json
index 55b02cb2..a1c00a08 100644
--- a/src/main/resources/repository.json
+++ b/src/main/resources/repository.json
@@ -1251,6 +1251,39 @@
           "name": "commentVisible",
           "type": "int",
           "description": "0：所有人可见，1：仅楼主和自己可见"
+        },
+        {
+          "name": "commentType",
+          "type": "int",
+          "description": "0：章评，1：段评"
+        },
+        {
+          "name": "commentParagraphId",
+          "type": "String",
+          "length": 64,
+          "description": "段评锚点 ID"
+        },
+        {
+          "name": "commentParagraphKind",
+          "type": "String",
+          "length": 16,
+          "description": "段评锚点类型"
+        },
+        {
+          "name": "commentParagraphIndex",
+          "type": "int",
+          "description": "段评锚点顺序"
+        },
+        {
+          "name": "commentParagraphSnapshot",
+          "type": "String",
+          "length": 1024,
+          "description": "段评原文快照"
+        },
+        {
+          "name": "commentParagraphStatus",
+          "type": "int",
+          "description": "0：关联有效，1：原段落已修改"
         }
       ]
     },
diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss
index 81adad5d..1a86706f 100644
--- a/src/main/resources/scss/index.scss
+++ b/src/main/resources/scss/index.scss
@@ -1144,6 +1144,33 @@ label.cmt-anonymous {
   }
 }
 
+.comment-paragraph-context {
+  display: -webkit-box;
+  margin: 0 0 8px;
+  overflow: hidden;
+  color: #718078;
+  font-size: 12px;
+  line-height: 1.55;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.long-article-orphaned-comments {
+  margin: 18px 0 0;
+  border-top: 1px solid rgba(65, 94, 71, 0.14);
+  padding-top: 12px;
+
+  summary {
+    color: #68776e;
+    cursor: pointer;
+    font-size: 13px;
+  }
+
+  > ul {
+    margin-top: 8px;
+  }
+}
+
 .nice .comments > ul > li:last-child {
   border-bottom-width: 0;
 }
@@ -5101,178 +5128,1062 @@ code .dec {
 
 /* start long-article */
 .long-article-content {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 40px 60px;
-  font-size: 18px;
-  line-height: 1.8;
-}
+  min-width: 0;
+  max-width: none;
+  margin: 36px 0 0;
+  padding: 0;
+  overflow: visible !important;
+  color: #25332a;
+  font-size: var(--long-article-font-size, 18px);
+  line-height: 1.9;
+  overflow-wrap: anywhere;
 
-.long-article-meta {
-  text-align: right;
-  color: #888;
-  font-size: 13px;
-  margin-bottom: 15px;
+  > p {
+    margin: 1.15em 0;
+    text-indent: 2em;
+  }
 
-  a {
-    color: #888;
-    text-decoration: none;
+  > p.long-article-paragraph-lines {
+    text-indent: 0;
+  }
 
-    &:hover {
-      color: #4285f4;
-    }
+  .long-article-paragraph-line {
+    display: block;
+    text-indent: 2em;
   }
 
-  .long-article-author {
-    margin-right: 15px;
+  > p:has(> img),
+  > p:has(> picture),
+  > p:has(> video),
+  > p:has(> iframe) {
+    text-indent: 0;
+  }
+
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    margin: 1.8em 0 0.75em;
+    color: #1f2e24;
+    line-height: 1.45;
+    text-indent: 0;
+  }
+
+  > ul,
+  > ol,
+  > blockquote,
+  > pre,
+  > table,
+  > figure {
+    margin-top: 1.35em;
+    margin-bottom: 1.35em;
+    text-indent: 0;
+  }
+
+  blockquote {
+    padding: 14px 18px;
+    border-left: 4px solid #9bb4a0;
+    background: #f0f5ef;
+    color: #526259;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1.6em auto;
+  }
+
+  table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  pre {
+    border-radius: 8px;
+  }
+
+  :not(pre) > code {
+    border-radius: 4px;
+    background: #edf2ec;
+    color: #35513d;
   }
 }
 
-.article-nav-scope {
-  margin: 24px 0 20px;
+.long-article-commentable-block {
+  position: relative;
+  cursor: pointer;
 }
 
-.article-nav-scope__input,
-.article-nav-sort__input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
+.long-article-paragraph-highlight {
+  display: inline;
+  padding: 0 2px;
+  border-radius: 2px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  transition: background-color 0.18s ease, text-decoration-color 0.18s ease;
 }
 
-.article-nav-scope__tabs {
-  display: inline-flex;
-  gap: 4px;
-  padding: 3px;
-  border: 1px solid #e4e9f2;
-  border-radius: 8px;
-  background: #f7f9fc;
+.long-article-commentable-block:hover > .long-article-paragraph-highlight,
+.long-article-commentable-block.is-commenting > .long-article-paragraph-highlight {
+  background: rgba(77, 111, 84, 0.14);
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-decoration-color: rgba(77, 111, 84, 0.42);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
 }
 
-.article-nav-scope__tab {
-  min-width: 72px;
-  height: 28px;
-  padding: 0 12px;
-  border-radius: 6px;
-  color: #667085;
+.long-article-paragraph-comment-btn {
+  position: relative;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  margin-left: 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: #6e8975;
   cursor: pointer;
-  font-size: 13px;
-  line-height: 28px;
-  text-align: center;
-}
+  opacity: 0;
+  transform: translateY(-1px);
+  vertical-align: 0.18em;
+  text-indent: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
 
-.article-nav-sort {
-  margin-top: 12px;
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  span {
+    position: static;
+    display: none;
+    min-width: 12px;
+    height: 18px;
+    padding: 0 4px;
+    border: 1px solid rgba(77, 111, 84, 0.32);
+    border-radius: 2px;
+    background: rgba(237, 245, 237, 0.78);
+    color: #617068;
+    font-size: 10px;
+    line-height: 16px;
+    text-align: center;
+  }
 }
 
-.article-nav-sort__tabs {
+.long-article-paragraph-comment-btn.has-comments {
   display: inline-flex;
-  gap: 4px;
-  padding: 3px;
-  border: 1px solid #e4e9f2;
-  border-radius: 8px;
-  background: #f7f9fc;
+  width: auto;
+  min-width: 18px;
+  height: 18px;
+  padding: 0;
+  opacity: 1;
+
+  svg {
+    display: none;
+  }
+
+  span:not([hidden]) {
+    display: inline-block;
+  }
 }
 
-.article-nav-sort__tab {
-  min-width: 56px;
-  height: 26px;
-  padding: 0 10px;
-  border-radius: 6px;
-  color: #667085;
-  cursor: pointer;
-  font-size: 12px;
-  line-height: 26px;
-  text-align: center;
+.long-article-commentable-block:hover .long-article-paragraph-comment-btn,
+.long-article-paragraph-comment-btn.has-comments,
+.long-article-commentable-block.is-commenting .long-article-paragraph-comment-btn {
+  opacity: 1;
+  transform: translateY(-1px);
 }
 
-.article-nav-sort__panel--author,
-.article-nav-sort__panel--hot {
+.long-article-paragraph-comment-btn:hover,
+.long-article-commentable-block.is-commenting .long-article-paragraph-comment-btn {
+  background: #3e7250;
+  color: #fff;
+
+  span {
+    border-color: #3e7250;
+    background: transparent;
+    color: #fff;
+  }
+}
+
+.long-article-paragraph-comments {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
   display: none;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 20px;
+  overflow: auto;
+  background: #dcebdd;
 }
 
-.article-nav-scope--switchable .article-nav-scope__panel--all {
+.long-article-paragraph-comments .reaction-widget__summary {
   display: none;
 }
 
-#articleNavScopeColumn:checked ~ .article-nav-scope__tabs .article-nav-scope__tab--column,
-#articleNavScopeAll:checked ~ .article-nav-scope__tabs .article-nav-scope__tab--all,
-#articleNavSortTime:checked ~ .article-nav-sort__tabs .article-nav-sort__tab--time,
-#articleNavSortAuthor:checked ~ .article-nav-sort__tabs .article-nav-sort__tab--author,
-#articleNavSortHot:checked ~ .article-nav-sort__tabs .article-nav-sort__tab--hot {
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
-  color: #1f2937;
-  font-weight: 600;
+.long-article-paragraph-comments .comment-thread {
+  --comment-thread-max-indent: 28px;
 }
 
-#articleNavScopeAll:checked ~ .article-nav-scope__panels .article-nav-scope__panel--column {
-  display: none;
+#longArticleParagraphComments .action-btns {
+  position: relative;
 }
 
-#articleNavScopeAll:checked ~ .article-nav-scope__panels .article-nav-scope__panel--all {
-  display: block;
+#longArticleParagraphComments .long-article-paragraph-comment-hover-actions {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 4px);
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-4px, -50%);
+  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
+  visibility: hidden;
+  white-space: nowrap;
 }
 
-#articleNavSortAuthor:checked ~ .article-nav-sort__panels .article-nav-sort__panel--time,
-#articleNavSortHot:checked ~ .article-nav-sort__panels .article-nav-sort__panel--time {
-  display: none;
+#longArticleParagraphComments .long-article-paragraph-comment-hover-actions.is-actions-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(0, -50%);
+  transition-delay: 0s;
+  visibility: visible;
 }
 
-#articleNavSortAuthor:checked ~ .article-nav-sort__panels .article-nav-sort__panel--author,
-#articleNavSortHot:checked ~ .article-nav-sort__panels .article-nav-sort__panel--hot {
-  display: block;
+#longArticleParagraphComments .long-article-paragraph-comment-hover-actions > span,
+#longArticleParagraphComments .long-article-paragraph-comment-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  color: #617068;
+  cursor: pointer;
 }
 
-.article-adjacent-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin: 14px 0 0;
-  padding: 16px 0;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+#longArticleParagraphComments .long-article-paragraph-comment-hover-actions > span:hover,
+#longArticleParagraphComments .long-article-paragraph-comment-more:hover {
+  background: rgba(95, 126, 104, 0.14);
+  color: #2f6a43;
+  transform: none;
 }
 
-.article-adjacent-nav__item {
-  flex: 1 1 300px;
-  min-width: 0;
+#longArticleParagraphComments .long-article-paragraph-comment-more-menu {
+  position: relative;
+  display: inline-flex;
 }
 
-.article-adjacent-nav__item--right {
-  text-align: right;
+#longArticleParagraphComments .long-article-paragraph-comment-more {
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
 }
 
-.article-adjacent-nav__link {
-  display: block;
-  min-height: 64px;
-  padding: 12px 14px;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
-  background: #fafafa;
-  color: #111;
-  text-decoration: none;
-  transition: background 0.2s ease, border-color 0.2s ease;
+#longArticleParagraphComments .long-article-paragraph-comment-more-panel {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 6px);
+  display: none;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid rgba(95, 126, 104, 0.18);
+  border-radius: 6px;
+  background: #f4f8f4;
+  box-shadow: none;
+  white-space: nowrap;
 }
 
-.article-adjacent-nav__link:hover {
-  border-color: #d0d7de;
-  background: #fff;
-  text-decoration: none;
+#longArticleParagraphComments .long-article-paragraph-comment-more-menu.is-more-open .long-article-paragraph-comment-more-panel {
+  display: inline-flex;
 }
 
-.article-adjacent-nav__link--disabled {
-  color: #999;
-  cursor: default;
+#longArticleParagraphComments .long-article-paragraph-comment-more-panel > span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  color: #617068;
 }
 
-.article-adjacent-nav__label {
-  margin-bottom: 6px;
-  color: #888;
-  font-size: 12px;
+#longArticleParagraphComments .long-article-paragraph-comment-more-panel > span:hover {
+  background: rgba(95, 126, 104, 0.14);
+  color: #2f6a43;
+  transform: none;
 }
 
-.article-adjacent-nav__title {
-  margin-bottom: 6px;
+.long-article-paragraph-comments.is-active {
+  display: block;
+}
+
+#articleCommentsPanel.is-paragraph-view {
+  > :not(#comments):not(.long-article-paragraph-comments) {
+    display: none;
+  }
+
+  > #comments {
+    > :not(.long-article-paragraph-comments) {
+      visibility: hidden;
+    }
+  }
+}
+
+.long-article-paragraph-comments__header {
+  position: sticky;
+  top: -20px;
+  z-index: 2;
+  margin: -20px -20px 14px;
+  padding: 20px 20px 14px;
+  border-bottom: 1px solid rgba(65, 94, 71, 0.14);
+  background: rgba(220, 235, 221, 0.97);
+  backdrop-filter: blur(8px);
+
+  strong {
+    color: #1f2e24;
+    font-size: 20px;
+  }
+
+  p {
+    margin: 10px 0;
+    color: #526259;
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  > button {
+    position: absolute;
+    top: 16px;
+    right: 18px;
+    border: 0;
+    background: transparent;
+    color: #77857c;
+    cursor: pointer;
+    font-size: 24px;
+  }
+}
+
+.long-article-paragraph-comments__sort,
+.long-article-paragraph-comments__pager {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.long-article-paragraph-comments__sort button,
+.long-article-paragraph-comments__reply {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(65, 94, 71, 0.14);
+  border-radius: 5px;
+  background: #edf5ed;
+  color: #6e8975;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.long-article-paragraph-comments .list > ul > li {
+  margin: 0;
+  padding: 16px 0;
+  border-bottom: 1px solid rgba(65, 94, 71, 0.12);
+  background: transparent;
+}
+
+.long-article-paragraph-comments__sort button.is-active {
+  background: #3e7250;
+  color: #fff;
+}
+
+.long-article-paragraph-comments__reply {
+  display: block;
+  margin-bottom: 12px;
+  padding: 10px 12px;
+}
+
+.long-article-paragraph-comments__empty {
+  padding: 30px 0;
+  color: #77857c;
+  text-align: center;
+}
+
+.long-article-paragraph-comments__pager {
+  margin-top: 16px;
+  color: #77857c;
+  font-size: 12px;
+
+  button {
+    border: 0;
+    background: transparent;
+    color: #526c5a;
+    cursor: pointer;
+  }
+}
+
+body.night .long-article-paragraph-comments {
+  background: #111;
+
+  .long-article-paragraph-comments__header {
+    background: rgba(17, 17, 17, 0.97);
+  }
+
+  .long-article-paragraph-comments__header strong {
+    color: #eef4ef;
+  }
+
+  .long-article-paragraph-comments__header p,
+  .long-article-paragraph-comments__header > button {
+    color: #858f88;
+  }
+
+  .long-article-paragraph-comments__sort button,
+  .long-article-paragraph-comments__reply {
+    border-color: rgba(255, 255, 255, 0.08);
+    background: #191919;
+    color: #989898;
+  }
+}
+
+.long-article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin-top: 14px;
+  color: #718078;
+  font-size: 14px;
+  line-height: 1.6;
+  text-align: left;
+
+  a {
+    color: #526c5a;
+    text-decoration: none;
+
+    &:hover {
+      color: #2f6a43;
+    }
+  }
+
+  .long-article-author {
+    color: #2f4937;
+    font-weight: 600;
+  }
+}
+
+.long-article-meta__separator {
+  color: #9ba79f;
+}
+
+.long-article-home-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 32px;
+  margin: 0 0 24px;
+  padding: 0 10px 0 8px;
+  border-radius: 5px;
+  color: #526c5a;
+  font-size: 13px;
+  text-decoration: none;
+  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
+
+  svg {
+    width: 17px;
+    height: 17px;
+  }
+
+  &:hover {
+    background: rgba(95, 126, 104, 0.12);
+    color: #2f4937;
+    text-decoration: none;
+    transform: translateX(-2px);
+  }
+}
+
+.article.long-article-page {
+  --long-article-drawer-width: min(320px, calc(100vw - 72px));
+  min-height: 100vh;
+  padding-top: 0;
+  overflow-x: hidden;
+  background: #c7dcc8;
+  color: #25332a;
+
+  > .nav,
+  > .footer,
+  .article-header {
+    display: none !important;
+  }
+
+  #share,
+  .share,
+  .article-nav-scope,
+  .article-tail {
+    display: none !important;
+  }
+
+  .long-article-reading-stage {
+    display: flex;
+    align-items: flex-start;
+    column-gap: 0;
+    box-sizing: border-box;
+    width: min(var(--long-article-width, 800px), calc(100vw - 28px));
+    max-width: calc(100vw - 28px);
+    margin: 0 auto;
+    transition: width 0.32s ease, column-gap 0.32s ease;
+  }
+
+  .article-container {
+    flex: 0 0 100%;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: #dcebdd;
+    box-shadow: none;
+    transition: width 0.32s ease, flex-basis 0.32s ease;
+  }
+
+  .article-body {
+    padding: 0;
+  }
+
+  .article-body > .wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    padding: 80px clamp(32px, 6vw, 64px) 64px;
+  }
+
+  h1.article-title {
+    margin: 0;
+    padding: 0;
+    color: #1d2b21;
+    font-size: 32px;
+    font-weight: 650;
+    line-height: 1.35;
+    text-align: left;
+
+    svg {
+      width: 30px;
+      height: 30px;
+      vertical-align: -4px;
+    }
+  }
+
+  .long-article-reading-stage > .main {
+    flex: 0 0 0;
+    box-sizing: border-box;
+    width: 0;
+    min-height: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border-top: 0;
+    background: transparent;
+    transition: width 0.32s ease, flex-basis 0.32s ease;
+  }
+
+  #articleCommentsPanel {
+    position: fixed;
+    top: 0;
+    right: auto;
+    bottom: 0;
+    left: var(--long-article-drawer-left, calc(100vw - var(--long-article-drawer-width)));
+    z-index: 115;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: var(--long-article-drawer-width);
+    min-width: 0;
+    height: 100vh;
+    height: 100dvh;
+    max-width: none;
+    margin: 0;
+    padding: 0 20px 86px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 0;
+    border-left: 1px solid rgba(61, 91, 68, 0.18);
+    border-radius: 0;
+    background: #dcebdd;
+    box-shadow: none;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(24px);
+    transition: left 0.32s ease, opacity 0.24s ease, transform 0.32s ease, visibility 0s linear 0.32s;
+    visibility: hidden;
+
+    > .module {
+      flex: 0 0 auto;
+      margin: 14px 0 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    > #comments {
+      margin-top: 0;
+    }
+
+    > .pagination {
+      flex: 0 0 auto;
+      margin: 18px auto 0;
+      float: none;
+    }
+  }
+
+  &.long-article-comments-open {
+    .long-article-settings {
+      right: auto;
+      left: var(--long-article-toolbar-open-left, calc(100vw - 78px));
+      z-index: 121;
+    }
+
+    .editor-panel {
+      right: auto;
+      left: var(--long-article-stage-left, 14px);
+      width: var(--long-article-stage-width, calc(100vw - 28px));
+      max-width: calc(100vw - 28px);
+    }
+
+    #articleCommentsPanel {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateX(0);
+      transition-delay: 0s;
+      visibility: visible;
+    }
+  }
+
+  &.long-article-comments-open.long-article-comments-inline {
+    .long-article-reading-stage {
+      column-gap: 0;
+      width: var(--long-article-stage-width, calc(var(--long-article-width, 800px) + var(--long-article-drawer-width)));
+      max-width: calc(100vw - 28px);
+    }
+
+    .long-article-settings {
+      left: calc(var(--long-article-drawer-left) + var(--long-article-drawer-width) + 14px);
+    }
+
+    .article-container {
+      flex-basis: var(--long-article-open-article-width, var(--long-article-width, 800px));
+      width: var(--long-article-open-article-width, var(--long-article-width, 800px));
+    }
+
+    .long-article-reading-stage > .main {
+      flex-basis: var(--long-article-drawer-width);
+      width: var(--long-article-drawer-width);
+      height: auto;
+    }
+  }
+
+  &.long-article-comments-open:not(.long-article-comments-inline) {
+    .long-article-settings {
+      display: none;
+    }
+  }
+
+  .long-article-settings {
+    right: auto;
+    left: var(--long-article-toolbar-closed-left, min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 78px)));
+    transition: left 0.32s ease;
+  }
+
+  #comments {
+    order: -1;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+
+    .comments-header {
+      position: sticky;
+      top: 0;
+      z-index: 4;
+      margin: 0 -20px 6px;
+      padding: 22px 20px 16px;
+      border-bottom: 1px solid rgba(65, 94, 71, 0.14);
+      background: rgba(220, 235, 221, 0.97);
+      backdrop-filter: blur(8px);
+    }
+
+    .comments-header__main > .fn-right {
+      display: none;
+    }
+
+    .article-cmt-cnt {
+      color: #1f2e24;
+      font-size: 22px;
+      font-weight: 650;
+    }
+
+    .long-article-comments-count {
+      margin-left: 4px;
+      color: #77857c;
+      font-size: 13px;
+      font-weight: 400;
+    }
+
+    .comment-filterbar {
+      margin-top: 12px;
+    }
+
+    .comment-segment {
+      border-color: rgba(65, 94, 71, 0.15);
+      background: #edf5ed;
+    }
+
+    .comments-header a.comment-segment__item {
+      color: #68776e;
+    }
+
+    .comments-header a.comment-segment__item:hover {
+      color: #2f4937;
+      background: rgba(255, 255, 255, 0.42);
+    }
+
+    .comments-header a.comment-segment__item--active,
+    .comments-header a.comment-segment__item--active:hover {
+      background: #5f7e68;
+      color: #fff;
+    }
+
+    .list {
+      background: transparent;
+    }
+
+    .list > ul {
+      margin: 0;
+      padding: 0 0 12px;
+    }
+
+    .list > ul > li,
+    .list > ul > li.cmt-perfect,
+    .list > ul > li.cmt-perfect:hover {
+      margin: 0;
+      padding: 18px 0;
+      border-bottom: 1px solid rgba(65, 94, 71, 0.12);
+      background: transparent;
+    }
+
+    .list > ul > li > .fn-flex {
+      align-items: flex-start;
+      gap: 2px;
+    }
+
+    .list > ul > li .avatar {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+    }
+
+    .comment-info {
+      min-height: 22px;
+      color: #6f7d74;
+      line-height: 1.55;
+    }
+
+    .comment-info a,
+    .comment-thread__meta a {
+      color: #405647;
+      font-weight: 600;
+    }
+
+    .comment {
+      margin: 7px 0 0;
+      color: #243128;
+      font-size: 15px;
+      line-height: 1.75;
+    }
+
+    .comment-action {
+      margin-top: 8px;
+    }
+
+    .comment-thread {
+      margin: 12px 0 4px;
+      padding: 12px;
+      border: 0;
+      border-radius: 8px;
+      background: #edf5ed;
+    }
+
+    .comment-thread__reply--nested::before,
+    .comment-thread__reply + .comment-thread__reply {
+      border-color: rgba(65, 94, 71, 0.12);
+    }
+
+    .comment-thread__content {
+      color: #34463a;
+    }
+
+    .comment__reply {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      z-index: 5;
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0;
+      padding: 14px 20px;
+      border-top: 1px solid rgba(65, 94, 71, 0.14);
+      background: rgba(220, 235, 221, 0.97);
+      box-shadow: 0 -8px 22px rgba(40, 66, 47, 0.08);
+      backdrop-filter: blur(8px);
+
+      .reply__text {
+        min-height: 38px;
+        box-sizing: border-box;
+        border-color: rgba(65, 94, 71, 0.14);
+        border-radius: 8px;
+        background: #edf5ed;
+        color: #65746a;
+        line-height: 36px;
+      }
+    }
+  }
+
+  .long-article-comments-close {
+    display: inline-flex;
+    flex: 0 0 34px;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    margin-left: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: rgba(95, 126, 104, 0.12);
+    box-shadow: none;
+    color: #617068;
+
+    &:hover {
+      background: rgba(95, 126, 104, 0.2);
+      box-shadow: none;
+      color: #2f4937;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .editor-panel {
+    right: auto;
+    left: var(--long-article-stage-left, 14px);
+    width: var(--long-article-stage-width, min(var(--long-article-width, 800px), calc(100vw - 28px)));
+    max-width: calc(100vw - 28px);
+    transition: left 0.32s ease, width 0.32s ease;
+
+    .editor-bg {
+      display: none;
+    }
+
+    .wrapper {
+      right: 0;
+      left: auto;
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      padding: 16px 20px 20px;
+      border-top: 1px solid rgba(65, 94, 71, 0.16);
+      background: #dcebdd;
+      box-shadow: 0 -12px 30px rgba(40, 66, 47, 0.16);
+    }
+  }
+
+  .article-footer {
+    box-sizing: border-box;
+    width: min(var(--long-article-width, 800px), calc(100vw - 28px));
+    max-width: none;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+.article-nav-scope {
+  margin: 24px 0 20px;
+}
+
+.article-nav-scope__input,
+.article-nav-sort__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.article-nav-scope__tabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid #e4e9f2;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.article-nav-scope__tab {
+  min-width: 72px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  color: #667085;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 28px;
+  text-align: center;
+}
+
+.article-nav-sort {
+  margin-top: 12px;
+}
+
+.article-nav-sort__tabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid #e4e9f2;
+  border-radius: 8px;
+  background: #f7f9fc;
+}
+
+.article-nav-sort__tab {
+  min-width: 56px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 6px;
+  color: #667085;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 26px;
+  text-align: center;
+}
+
+.article-nav-sort__panel--author,
+.article-nav-sort__panel--hot {
+  display: none;
+}
+
+.article-nav-scope--switchable .article-nav-scope__panel--all {
+  display: none;
+}
+
+#articleNavScopeColumn:checked ~ .article-nav-scope__tabs .article-nav-scope__tab--column,
+#articleNavScopeAll:checked ~ .article-nav-scope__tabs .article-nav-scope__tab--all,
+#articleNavSortTime:checked ~ .article-nav-sort__tabs .article-nav-sort__tab--time,
+#articleNavSortAuthor:checked ~ .article-nav-sort__tabs .article-nav-sort__tab--author,
+#articleNavSortHot:checked ~ .article-nav-sort__tabs .article-nav-sort__tab--hot {
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
+  color: #1f2937;
+  font-weight: 600;
+}
+
+#articleNavScopeAll:checked ~ .article-nav-scope__panels .article-nav-scope__panel--column {
+  display: none;
+}
+
+#articleNavScopeAll:checked ~ .article-nav-scope__panels .article-nav-scope__panel--all {
+  display: block;
+}
+
+#articleNavSortAuthor:checked ~ .article-nav-sort__panels .article-nav-sort__panel--time,
+#articleNavSortHot:checked ~ .article-nav-sort__panels .article-nav-sort__panel--time {
+  display: none;
+}
+
+#articleNavSortAuthor:checked ~ .article-nav-sort__panels .article-nav-sort__panel--author,
+#articleNavSortHot:checked ~ .article-nav-sort__panels .article-nav-sort__panel--hot {
+  display: block;
+}
+
+.article-adjacent-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin: 14px 0 0;
+  padding: 16px 0;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.article-adjacent-nav__item {
+  flex: 1 1 300px;
+  min-width: 0;
+}
+
+.article-adjacent-nav__item--right {
+  text-align: right;
+}
+
+.article-adjacent-nav__link {
+  display: block;
+  min-height: 64px;
+  padding: 12px 14px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background: #fafafa;
+  color: #111;
+  text-decoration: none;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.article-adjacent-nav__link:hover {
+  border-color: #d0d7de;
+  background: #fff;
+  text-decoration: none;
+}
+
+.article-adjacent-nav__link--disabled {
+  color: #999;
+  cursor: default;
+}
+
+.article-adjacent-nav__label {
+  margin-bottom: 6px;
+  color: #888;
+  font-size: 12px;
+}
+
+.article-adjacent-nav__title {
+  margin-bottom: 6px;
   font-weight: 700;
   line-height: 1.3;
   overflow-wrap: anywhere;
@@ -5384,77 +6295,305 @@ code .dec {
 
 .long-article-settings {
   position: fixed;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 100;
+  left: min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 78px));
+  top: min(60vh, calc(100vh - 300px));
+  transform: none;
+  z-index: 101;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .long-article-settings-btn {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  cursor: pointer;
+  width: 64px;
+  height: 64px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #666;
-  transition: all 0.2s;
-  font-size: 16px;
-  font-weight: bold;
+  gap: 3px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: #dcebdd;
+  box-shadow: 0 4px 14px rgba(48, 73, 55, 0.12);
+  color: #52685a;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
   position: relative;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
 
   &:hover {
-    background: #f0f0f0;
-    color: #333;
-    transform: scale(1.1);
+    border-color: rgba(55, 100, 68, 0.35);
+    background: #fff;
+    color: #2f6a43;
+    transform: translateX(2px);
+  }
+
+  &.is-active {
+    background: #3e7250;
+    color: #fff;
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.long-article-settings-btn--top {
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px) scale(0.94);
+  visibility: hidden;
+  transition: height 0.24s ease, opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0.24s;
+
+  &.is-visible {
+    height: 64px;
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+    visibility: visible;
+    transition-delay: 0s;
+  }
+}
+
+.long-article-settings__count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  min-width: 18px;
+  box-sizing: border-box;
+  padding: 1px 5px;
+  border-radius: 10px;
+  background: #c94e4e;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+}
+
+.long-article-layout {
+  position: relative;
+}
+
+.long-article-layout-panel {
+  position: absolute;
+  right: 80px;
+  bottom: 0;
+  display: none;
+  width: 360px;
+  box-sizing: border-box;
+  padding: 24px;
+  border: 1px solid rgba(72, 101, 79, 0.16);
+  border-radius: 10px;
+  background: #ebfaeb;
+  box-shadow: 0 12px 32px rgba(38, 61, 44, 0.18);
+
+  &.is-open {
+    display: block;
+  }
+}
+
+.long-article-layout-panel__title {
+  margin-bottom: 20px;
+  color: #52685a;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.long-article-layout-panel__row {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+  color: #52685a;
+  font-size: 13px;
+}
+
+.long-article-font-options {
+  display: grid;
+  grid-template-columns: 44px minmax(64px, 1fr) 44px;
+  align-items: center;
+  gap: 7px;
+
+  output {
+    color: #52685a;
+    font-size: 13px;
+    text-align: center;
+  }
+}
+
+.long-article-font-options button,
+.long-article-layout-panel__options button {
+  height: 34px;
+  padding: 0 8px;
+  border: 1px solid #d9e3da;
+  border-radius: 5px;
+  background: #f3f7f1;
+  color: #52685a;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:hover,
+  &.is-active {
+    border-color: #77977e;
+    background: #dfeadf;
+    color: #285a39;
+  }
+}
+
+.long-article-layout-panel__options {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 7px;
+
+  button {
+    &.is-active {
+      font-weight: 600;
+    }
   }
 }
 
 body.night {
+  &.long-article-page {
+    background: #0a0a0a;
+    color: #d9e3db;
+
+    .article-container {
+      background: #111111;
+      box-shadow: none;
+    }
+
+    h1.article-title {
+      color: #eef4ef;
+    }
+
+    .long-article-reading-stage > .main {
+      background: #0a0a0a;
+    }
+
+    .long-article-home-link {
+      color: #989898;
+
+      &:hover {
+        background: #191919;
+        color: #d9e3db;
+      }
+    }
+
+    #articleCommentsPanel {
+      background: #111111;
+      border-left-color: rgba(255, 255, 255, 0.1);
+      box-shadow: none;
+    }
+
+    #comments {
+      .comments-header,
+      .comment__reply {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: rgba(17, 17, 17, 0.97);
+      }
+
+      .article-cmt-cnt {
+        color: #eef4ef;
+      }
+
+      .long-article-comments-count,
+      .comment-info {
+        color: #858f88;
+      }
+
+      .comment-segment,
+      .comment-thread,
+      .comment__reply .reply__text {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: #191919;
+      }
+
+      .comments-header a.comment-segment__item,
+      .comment-info a,
+      .comment-thread__meta a {
+        color: #aab4ad;
+      }
+
+      .comments-header a.comment-segment__item--active,
+      .comments-header a.comment-segment__item--active:hover {
+        background: #465c4d;
+        color: #fff;
+      }
+
+      .list > ul > li,
+      .list > ul > li.cmt-perfect,
+      .list > ul > li.cmt-perfect:hover {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: transparent;
+      }
+
+      .comment,
+      .comment-thread__content {
+        color: #b9c2bc;
+      }
+    }
+
+    .long-article-comments-close {
+      background: #191919;
+      color: #989898;
+    }
+
+    .editor-panel .wrapper {
+      border-color: rgba(255, 255, 255, 0.08);
+      background: #191919;
+      box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.34);
+    }
+  }
+
   .long-article-content {
-    background-color: #1a1a1a;
-    color: #e0e0e0;
+    color: #989898;
 
     a {
-      color: #6bb3ff;
+      color: #8fc9a0;
     }
 
     blockquote {
-      border-color: #444;
-      color: #bbb;
+      border-color: #587663;
+      background: #223128;
+      color: #b8c7bc;
     }
 
-    code {
-      background-color: #2d2d2d;
-      color: #e0e0e0;
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      color: #989898;
     }
 
     pre {
-      background-color: #2d2d2d;
+      background-color: #111a15;
+    }
+
+    :not(pre) > code {
+      background: #27362c;
+      color: #b9d6c1;
     }
   }
 
   .long-article-meta {
-    color: #888;
-    border-color: #333;
+    color: #93a299;
 
     a {
-      color: #888;
+      color: #a9c7b1;
 
       &:hover {
-        color: #6bb3ff;
+        color: #c6e5ce;
       }
     }
   }
@@ -5523,26 +6662,69 @@ body.night {
   }
 
   .long-article-settings-btn {
-    background: #2d2d2d;
-    color: #999;
+    border: 0;
+    background: #191919;
+    color: #989898;
 
     &:hover {
-      background: #3d3d3d;
+      background: #191919;
+      color: #989898;
+    }
+  }
+
+  .long-article-layout-panel {
+    border: 0;
+    background: #1f1f1f;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
+  }
+
+  .long-article-layout-panel__title {
+    color: #989898;
+  }
+
+  .long-article-layout-panel__row,
+  .long-article-font-options output {
+    color: #989898;
+  }
+
+  .long-article-font-options button,
+  .long-article-layout-panel__options button {
+    border-color: #3a3a3a;
+    background: #191919;
+    color: #989898;
+
+    &:hover,
+    &.is-active {
+      border-color: #666;
+      background: #292929;
       color: #fff;
     }
   }
 }
 
 @media (max-width: 768px) {
-  .long-article-content {
-    padding: 20px 15px;
-    font-size: 16px;
+  .article.long-article-page {
+    .article-container {
+      margin-top: 0;
+      border-radius: 0;
+    }
+
+    .article-body > .wrapper {
+      padding: 36px 24px;
+    }
+
+    h1.article-title {
+      font-size: 26px;
+    }
+
+    #articleCommentsPanel {
+      padding: 0 18px 82px;
+      border-radius: 0;
+    }
   }
 
-  .long-article-meta {
-    font-size: 13px;
-    padding: 10px 15px;
-    margin-bottom: 15px;
+  .long-article-content {
+    margin-top: 28px;
   }
 
   .article-nav-scope__tabs {
@@ -5573,122 +6755,23 @@ body.night {
     text-align: left;
   }
 
-  // 长文章时，将文章操作按钮移到右下角
-  .long-article-page .article-actions {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    margin: 0 !important;
-    z-index: 98;
-
-    .fn-right {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      background: rgba(255, 255, 255, 0.95);
-      padding: 8px;
-      border-radius: 8px;
-      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
-
-      span, a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        margin: 0;
-      }
-    }
-  }
-
-  body.night.long-article-page .article-actions .fn-right {
-    background: rgba(45, 45, 45, 0.95);
-  }
-
   .long-article-settings {
-    position: fixed;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    flex-direction: column;
-    gap: 8px;
-    background: transparent;
-    padding: 0;
-    box-shadow: none;
-    border-radius: 0;
-    z-index: 99;
+    right: 8px;
+    left: auto;
   }
 
   .long-article-settings-btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    padding: 0;
-    flex-direction: row;
-    gap: 0;
-    background: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    transition: all 0.3s;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    span {
-      font-size: 14px;
-      font-weight: bold;
-    }
-
-    &.hide {
-      opacity: 0;
-      pointer-events: none;
-      transform: translateX(60px);
-    }
+    width: 54px;
+    height: 54px;
   }
 
-  .long-article-toggle-btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.95);
-    border: none;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #666;
-    font-size: 18px;
-    font-weight: bold;
-    transition: all 0.3s;
-
-    &.active {
-      background: #4285f4;
-      color: #fff;
-    }
+  .long-article-settings-btn--top.is-visible {
+    height: 54px;
   }
 
-  body.night {
-    .long-article-settings-btn {
-      background: rgba(45, 45, 45, 0.95);
-      color: #999;
-
-      &:hover {
-        background: rgba(61, 61, 61, 0.95);
-        color: #fff;
-      }
-    }
-
-    .long-article-toggle-btn {
-      background: rgba(45, 45, 45, 0.95);
-      color: #999;
-
-      &.active {
-        background: #4285f4;
-        color: #fff;
-      }
-    }
+  .long-article-layout-panel {
+    right: 64px;
+    width: min(340px, calc(100vw - 90px));
   }
 }
 
diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss
index 717a74d7..cd5d6012 100644
--- a/src/main/resources/scss/mobile-base.scss
+++ b/src/main/resources/scss/mobile-base.scss
@@ -2449,6 +2449,33 @@ label.cmt-anonymous {
   border-bottom-width: 0;
 }
 
+.comment-paragraph-context {
+  display: -webkit-box;
+  margin: 0 0 7px;
+  overflow: hidden;
+  color: #718078;
+  font-size: 12px;
+  line-height: 1.5;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.long-article-orphaned-comments {
+  margin: 14px 0 0;
+  border-top: 1px solid rgba(65, 94, 71, 0.14);
+  padding-top: 10px;
+
+  summary {
+    color: #68776e;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  > ul {
+    margin-top: 8px;
+  }
+}
+
 .comment-login {
   box-sizing: border-box;
   margin: 10px;
@@ -5399,61 +5426,723 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de
 
 /* start long-article */
 .long-article-content {
-  padding: 20px 15px;
-  font-size: 16px;
-  line-height: 1.8;
+  min-width: 0;
+  overflow: visible !important;
+
+  padding: 0;
+  color: #25332a;
+  font-size: var(--long-article-font-size, 16px);
+  line-height: 1.9;
+  overflow-wrap: anywhere;
+
+  > p {
+    margin: 1.1em 0;
+    text-indent: 2em;
+  }
+
+  > p:has(> img),
+  > p:has(> picture),
+  > p:has(> video),
+  > p:has(> iframe) {
+    text-indent: 0;
+  }
+
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    margin: 1.65em 0 0.7em;
+    color: #1f2e24;
+    line-height: 1.45;
+    text-indent: 0;
+  }
+
+  > ul,
+  > ol,
+  > blockquote,
+  > pre,
+  > table,
+  > figure {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    text-indent: 0;
+  }
+
+  blockquote {
+    padding: 12px 14px;
+    border-left: 4px solid #9bb4a0;
+    background: #f0f5ef;
+    color: #526259;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1.4em auto;
+  }
+
+  table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  pre {
+    border-radius: 7px;
+  }
+
+  :not(pre) > code {
+    border-radius: 4px;
+    background: #edf2ec;
+    color: #35513d;
+  }
+}
+
+.long-article-commentable-block {
+  position: relative;
+}
+
+.long-article-paragraph-highlight {
+  display: inline;
+  padding: 0 2px;
+  border-radius: 2px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  transition: background-color 0.18s ease, text-decoration-color 0.18s ease;
+}
+
+.long-article-commentable-block.is-commenting > .long-article-paragraph-highlight {
+  background: rgba(77, 111, 84, 0.14);
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-decoration-color: rgba(77, 111, 84, 0.42);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+}
+
+.long-article-paragraph-comment-btn {
+  position: relative;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  margin-left: 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: #6e8975;
+  opacity: 0.76;
+  transform: translateY(-1px);
+  vertical-align: 0.18em;
+  text-indent: 0;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  span {
+    position: static;
+    display: none;
+    min-width: 12px;
+    height: 18px;
+    padding: 0 4px;
+    border: 1px solid rgba(77, 111, 84, 0.32);
+    border-radius: 2px;
+    background: rgba(237, 245, 237, 0.78);
+    color: #617068;
+    font-size: 10px;
+    line-height: 16px;
+    text-align: center;
+  }
+}
+
+.long-article-paragraph-comment-btn.has-comments {
+  display: inline-flex;
+  width: auto;
+  min-width: 18px;
+  height: 18px;
+  padding: 0;
+  opacity: 1;
+
+  svg {
+    display: none;
+  }
+
+  span:not([hidden]) {
+    display: inline-block;
+  }
+}
+
+.long-article-commentable-block.is-commenting .long-article-paragraph-comment-btn {
+  background: #3e7250;
+  color: #fff;
+  opacity: 1;
+
+  span {
+    border-color: #3e7250;
+    background: transparent;
+    color: #fff;
+  }
+}
+
+.long-article-paragraph-comments {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: none;
+  box-sizing: border-box;
+  padding: 14px;
+  overflow: auto;
+  background: #dcebdd;
+}
+
+.long-article-paragraph-comments .reaction-widget__summary {
+  display: none;
+}
+
+.long-article-paragraph-comments .comment-thread {
+  --comment-thread-max-indent: 16px;
+}
+
+#longArticleParagraphComments .action-btns {
+  position: relative;
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-hover-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 4px;
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-hover-actions > span,
+#longArticleParagraphComments .long-article-paragraph-comment-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-more-menu {
+  position: relative;
+  display: inline-flex;
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-more {
+  color: var(--text-gray-color);
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-more-panel {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 6px);
+  z-index: 3;
+  display: none;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid rgba(95, 126, 104, 0.18);
+  border-radius: 6px;
+  background: #f4f8f4;
+  box-shadow: none;
+  white-space: nowrap;
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-more-menu.is-more-open .long-article-paragraph-comment-more-panel {
+  display: inline-flex;
+}
+
+#longArticleParagraphComments .long-article-paragraph-comment-more-panel > span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+}
+
+.long-article-paragraph-comments.is-active {
+  display: block;
+}
+
+#comments.is-paragraph-view {
+  > :not(.long-article-paragraph-comments) {
+    visibility: hidden;
+  }
+}
+
+.long-article-paragraph-comments__header {
+  position: sticky;
+  top: -14px;
+  z-index: 2;
+  margin: -14px -14px 12px;
+  padding: 16px 14px 12px;
+  border-bottom: 1px solid rgba(65, 94, 71, 0.14);
+  background: rgba(220, 235, 221, 0.97);
+}
+
+.long-article-paragraph-comments__header strong {
+  color: #1f2e24;
+  font-size: 18px;
+}
+
+.long-article-paragraph-comments__header p {
+  margin: 8px 0;
+  color: #526259;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.long-article-paragraph-comments__header > button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border: 0;
+  background: transparent;
+  color: #77857c;
+  font-size: 24px;
+}
+
+.long-article-paragraph-comments__sort,
+.long-article-paragraph-comments__pager {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+.long-article-paragraph-comments__sort button,
+.long-article-paragraph-comments__reply {
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(65, 94, 71, 0.14);
+  border-radius: 5px;
+  background: #edf5ed;
+  color: #6e8975;
+  font-size: 12px;
+}
+
+.long-article-paragraph-comments .list > ul > li {
+  margin: 0;
+  padding: 14px 0;
+  border-bottom: 1px solid rgba(65, 94, 71, 0.12);
+  background: transparent;
+}
+
+.long-article-paragraph-comments__sort button.is-active {
+  background: #3e7250;
+  color: #fff;
+}
+
+.long-article-paragraph-comments__reply {
+  display: block;
+  margin-bottom: 10px;
+  padding: 10px;
+  cursor: pointer;
+}
+
+body.night .long-article-paragraph-comments {
+  background: #111;
+
+  .long-article-paragraph-comments__header {
+    background: rgba(17, 17, 17, 0.97);
+  }
+
+  .long-article-paragraph-comments__header strong {
+    color: #eef4ef;
+  }
+
+  .long-article-paragraph-comments__header p,
+  .long-article-paragraph-comments__header > button {
+    color: #858f88;
+  }
+
+  .long-article-paragraph-comments__sort button,
+  .long-article-paragraph-comments__reply {
+    border-color: rgba(255, 255, 255, 0.08);
+    background: #191919;
+    color: #989898;
+  }
 }
 
 .long-article-meta {
-  text-align: right;
-  color: #888;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 10px 0 0;
+  padding: 0;
+  color: #718078;
   font-size: 13px;
-  padding: 10px 0;
-  margin-bottom: 10px;
+  line-height: 1.55;
+  text-align: left;
 
   a {
-    color: #888;
+    color: #526c5a;
     text-decoration: none;
 
     &:hover {
-      color: #4285f4;
+      color: #2f6a43;
     }
   }
 
   .long-article-author {
-    margin-right: 15px;
+    color: #2f4937;
+    font-weight: 600;
+  }
+}
+
+.long-article-meta__separator {
+  color: #9ba79f;
+}
+
+.long-article-home-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 32px;
+  margin: 0 0 20px;
+  padding: 0 9px 0 7px;
+  border-radius: 5px;
+  color: #526c5a;
+  font-size: 13px;
+  text-decoration: none;
+
+  svg {
+    width: 17px;
+    height: 17px;
   }
 }
 
 body.long-article-page {
+  --long-article-comments-width: min(430px, 100vw);
+  min-height: 100vh;
   width: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   box-sizing: border-box;
+  background: #c7dcc8;
+  color: #25332a;
 
-  .main,
-  .article-container,
-  .wrapper,
-  .article-body {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    padding: 0 14px !important;
-    overflow-x: hidden !important;
-    box-sizing: border-box !important;
+  > .nav,
+  > .footer,
+  .article-header {
+    display: none !important;
+  }
+
+  #share,
+  .share,
+  .article-nav-scope,
+  .article-tail {
+    display: none !important;
+  }
+
+  > .main {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0 14px 30px;
+    background: #c7dcc8;
+    box-shadow: none;
+  }
+
+  > .main > .article-actions {
+    display: none;
+  }
+
+  .article-main {
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: #dcebdd;
+    box-shadow: none;
+  }
+
+  .article-main > .wrapper {
+    width: auto;
+    max-width: none;
+    margin: 0;
+    padding: 34px 20px 30px;
+    overflow-x: hidden;
+    box-sizing: border-box;
   }
 
   .article-title {
-    padding-right: 0;
-    padding-left: 0;
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
+    color: #1d2b21;
+    font-size: 26px;
+    font-weight: 650;
+    line-height: 1.35;
+    text-align: left;
+
+    > a {
+      color: inherit;
+    }
   }
 
   .long-article-content {
+    width: 100%;
     max-width: 100%;
-    padding: 20px 0;
+    margin-top: 28px;
+    padding: 0;
+    box-sizing: border-box;
+    color: #25332a;
+    font-size: var(--long-article-font-size, 16px);
+    line-height: 1.9;
+
+    > p {
+      margin: 1.1em 0;
+    }
+  }
+
+  #comments {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 115;
     box-sizing: border-box;
+    width: var(--long-article-comments-width);
+    height: 100vh;
+    height: 100dvh;
+    margin: 0;
+    padding: 0 14px calc(78px + env(safe-area-inset-bottom));
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 0;
+    border-left: 1px solid rgba(61, 91, 68, 0.14);
+    border-radius: 0;
+    background: #dcebdd;
+    box-shadow: -12px 0 30px rgba(40, 66, 47, 0.16);
+    transform: translateX(100%);
+    transition: transform 0.28s ease, visibility 0s linear 0.28s;
+    visibility: hidden;
+
+    .list.comments {
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .comments-header {
+      position: sticky;
+      top: 0;
+      z-index: 4;
+      margin: 0 -14px 6px;
+      padding: 18px 14px 14px;
+      border-bottom: 1px solid rgba(65, 94, 71, 0.14);
+      background: rgba(220, 235, 221, 0.97);
+      backdrop-filter: blur(8px);
+    }
+
+    .comments-header__main > .fn-right {
+      display: none;
+    }
+
+    .article-cmt-cnt {
+      color: #1f2e24;
+      font-size: 20px;
+      font-weight: 650;
+    }
+
+    .long-article-comments-count {
+      margin-left: 4px;
+      color: #77857c;
+      font-size: 12px;
+      font-weight: 400;
+    }
+
+    .comment-filterbar {
+      margin-top: 10px;
+    }
+
+    .comment-segment {
+      border-color: rgba(65, 94, 71, 0.15);
+      background: #edf5ed;
+    }
+
+    .comments-header a.comment-segment__item {
+      color: #68776e;
+    }
+
+    .comments-header a.comment-segment__item--active,
+    .comments-header a.comment-segment__item--active:hover {
+      background: #5f7e68;
+      color: #fff;
+    }
+
+    .list.comments > ul {
+      margin: 0;
+      padding: 0 0 10px;
+    }
+
+    .list.comments > ul > li,
+    .list.comments > ul > li.cmt-perfect,
+    .list.comments > ul > li.cmt-perfect:hover {
+      margin: 0;
+      padding: 16px 0;
+      border-bottom: 1px solid rgba(65, 94, 71, 0.12);
+      background: transparent;
+    }
+
+    .list.comments > ul > li .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+
+    .comment-info {
+      color: #6f7d74;
+      line-height: 1.5;
+    }
+
+    .comment-info a,
+    .comment-thread__meta a {
+      color: #405647;
+      font-weight: 600;
+    }
+
+    .comment {
+      margin-top: 6px;
+      color: #243128;
+      font-size: 15px;
+      line-height: 1.7;
+    }
+
+    .comment-thread {
+      margin: 10px 0 4px;
+      padding: 10px;
+      border: 0;
+      border-radius: 8px;
+      background: #edf5ed;
+    }
+
+    .comment-thread__content {
+      color: #34463a;
+    }
+
+    .comment__reply {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      z-index: 5;
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0;
+      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
+      border-top: 1px solid rgba(65, 94, 71, 0.14);
+      background: rgba(220, 235, 221, 0.97);
+      box-shadow: 0 -8px 22px rgba(40, 66, 47, 0.08);
+      backdrop-filter: blur(8px);
+
+      .reply__text {
+        min-height: 38px;
+        border-color: rgba(65, 94, 71, 0.14);
+        border-radius: 8px;
+        background: #edf5ed;
+        color: #65746a;
+        line-height: 36px;
+      }
+    }
+  }
+
+  &.long-article-comments-open #comments {
+    transform: translateX(0);
+    transition-delay: 0s;
+    visibility: visible;
+  }
+
+  &.long-article-comments-open {
+    .long-article-settings {
+      z-index: 121;
+    }
+
+    .long-article-settings__actions {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+      visibility: visible;
+    }
+
+    .long-article-settings__actions > :not([data-long-article-action="comments"]),
+    .long-article-toggle-btn {
+      display: none;
+    }
+  }
+
+  .long-article-comments-close {
+    display: inline-flex;
+    flex: 0 0 32px;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin-left: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: rgba(95, 126, 104, 0.12);
+    box-shadow: none;
+    color: #617068;
+
+    svg {
+      width: 17px;
+      height: 17px;
+    }
+  }
+
+  .editor-panel {
+    right: 0;
+    left: auto;
+    width: var(--long-article-comments-width);
+    max-width: var(--long-article-comments-width);
+
+    .editor-bg {
+      display: none;
+    }
+
+    .wrapper {
+      right: 0;
+      left: auto;
+      width: 100%;
+      max-width: 100%;
+      border-radius: 10px 0 0;
+      border-top: 1px solid rgba(65, 94, 71, 0.16);
+      background: #dcebdd;
+      box-shadow: 0 -12px 30px rgba(40, 66, 47, 0.16);
+    }
+  }
+
+  .side {
+    display: none;
   }
 }
 
@@ -5700,31 +6389,57 @@ body.long-article-page {
 
 .long-article-settings {
   position: fixed;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
+  right: 12px;
+  bottom: calc(18px + env(safe-area-inset-bottom));
   display: flex;
   flex-direction: column;
   gap: 8px;
+  align-items: flex-end;
   z-index: 99;
 }
 
+.long-article-settings__actions {
+  display: flex;
+  max-height: calc(100vh - 92px);
+  max-height: calc(100dvh - 92px);
+  flex-direction: column;
+  gap: 7px;
+  overflow-y: auto;
+  opacity: 0;
+  pointer-events: none;
+  scrollbar-width: none;
+  transform: translateY(10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  visibility: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.long-article-settings.is-open .long-article-settings__actions {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+  visibility: visible;
+}
+
 .long-article-settings-btn {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 8px;
+  background: #dcebdd;
+  box-shadow: 0 4px 12px rgba(48, 73, 55, 0.15);
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #666;
+  color: #52685a;
   font-size: 14px;
-  font-weight: bold;
-  transition: all 0.3s;
+  font-weight: 600;
+  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
   gap: 1px;
   position: relative;
 
@@ -5736,8 +6451,8 @@ body.long-article-page {
   }
 
   span {
-    font-size: 14px;
-    font-weight: bold;
+    font-size: 13px;
+    font-weight: 600;
   }
 
   &.has-cnt {
@@ -5749,7 +6464,7 @@ body.long-article-page {
     .count {
       font-size: 10px;
       line-height: 1;
-      font-weight: bold;
+      font-weight: 600;
     }
   }
 
@@ -5757,68 +6472,161 @@ body.long-article-page {
     color: #f44336;
   }
 
-  &.hide {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateX(60px);
+  &.is-active {
+    background: #3e7250;
+    color: #fff;
   }
 }
 
 .long-article-toggle-btn {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.95);
-  border: none;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: #dcebdd;
+  border: 0;
+  box-shadow: 0 4px 12px rgba(48, 73, 55, 0.15);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #666;
+  color: #52685a;
   font-size: 18px;
-  font-weight: bold;
-  transition: all 0.3s;
+  font-weight: 600;
+  transition: background 0.2s ease, color 0.2s ease;
 
   &.active {
-    background: #4285f4;
+    background: #3e7250;
     color: #fff;
   }
 }
 
 body.night {
+  &.long-article-page {
+    background: #0a0a0a;
+    color: #d9e3db;
+
+    > .main {
+      background: #0a0a0a;
+    }
+
+    .article-main {
+      background: #111111;
+      box-shadow: none;
+    }
+
+    .article-title,
+    .article-title > a {
+      color: #eef4ef;
+    }
+
+    .long-article-home-link {
+      color: #989898;
+    }
+
+    #comments {
+      background: #111111;
+      border-left-color: rgba(255, 255, 255, 0.08);
+      box-shadow: -12px 0 30px rgba(0, 0, 0, 0.34);
+
+      .comments-header,
+      .comment__reply {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: rgba(17, 17, 17, 0.97);
+      }
+
+      .article-cmt-cnt {
+        color: #eef4ef;
+      }
+
+      .long-article-comments-count,
+      .comment-info {
+        color: #858f88;
+      }
+
+      .comment-segment,
+      .comment-thread,
+      .comment__reply .reply__text {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: #191919;
+      }
+
+      .comments-header a.comment-segment__item,
+      .comment-info a,
+      .comment-thread__meta a {
+        color: #aab4ad;
+      }
+
+      .comments-header a.comment-segment__item--active,
+      .comments-header a.comment-segment__item--active:hover {
+        background: #465c4d;
+        color: #fff;
+      }
+
+      .list.comments > ul > li,
+      .list.comments > ul > li.cmt-perfect,
+      .list.comments > ul > li.cmt-perfect:hover {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: transparent;
+      }
+
+      .comment,
+      .comment-thread__content {
+        color: #b9c2bc;
+      }
+    }
+
+    .long-article-comments-close {
+      background: #191919;
+      color: #989898;
+    }
+
+    .editor-panel .wrapper {
+      border-color: rgba(255, 255, 255, 0.08);
+      background: #191919;
+      box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.34);
+    }
+  }
+
   .long-article-content {
-    background-color: #1a1a1a;
-    color: #e0e0e0;
+    color: #989898;
 
     a {
-      color: #6bb3ff;
+      color: #8fc9a0;
     }
 
     blockquote {
-      border-color: #444;
-      color: #bbb;
+      border-color: #587663;
+      background: #223128;
+      color: #b8c7bc;
     }
 
-    code {
-      background-color: #2d2d2d;
-      color: #e0e0e0;
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      color: #989898;
     }
 
     pre {
-      background-color: #2d2d2d;
+      background-color: #111a15;
+    }
+
+    :not(pre) > code {
+      background: #27362c;
+      color: #b9d6c1;
     }
   }
 
   .long-article-meta {
-    color: #888;
-    border-color: #333;
+    color: #93a299;
 
     a {
-      color: #888;
+      color: #a9c7b1;
 
       &:hover {
-        color: #6bb3ff;
+        color: #c6e5ce;
       }
     }
   }
@@ -5877,17 +6685,18 @@ body.night {
 
   .long-article-settings-btn,
   .long-article-toggle-btn {
-    background: rgba(45, 45, 45, 0.95);
-    color: #999;
+    border: 0;
+    background: #191919;
+    color: #989898;
 
     &:hover {
-      background: rgba(61, 61, 61, 0.95);
-      color: #fff;
+      background: #191919;
+      color: #989898;
     }
   }
 
   .long-article-toggle-btn.active {
-    background: #4285f4;
+    background: #191919;
     color: #fff;
   }
 }
diff --git a/src/main/resources/skins/classic/mobile/article.ftl b/src/main/resources/skins/classic/mobile/article.ftl
index c8e2f80d..7c233ec1 100644
--- a/src/main/resources/skins/classic/mobile/article.ftl
+++ b/src/main/resources/skins/classic/mobile/article.ftl
@@ -34,9 +34,12 @@
         <link rel="stylesheet" href="${staticServePath}/js/lib/compress/article.min.css?${staticResourceVersion}">
     </head>
     <body itemscope itemtype="http://schema.org/Product"<#if 6 == article.articleType> class="long-article-page"</#if>>
+        <#assign hidePageChrome = (6 == article.articleType)>
         <img itemprop="image" class="fn-none"  src="${staticServePath}/images/faviconH.png" />
         <p itemprop="description" class="fn-none">"${article.articlePreviewContent}"</p>
+        <#if !hidePageChrome>
         <#include "header.ftl">
+        </#if>
         <div class="main">
             <div class="article-actions fn-clear" style="margin-bottom: 10px;">
                     <span class="fn-right">
@@ -100,6 +103,12 @@
             </div>
             <div class="article-main">
             <div class="wrapper">
+                <#if 6 == article.articleType>
+                    <a class="long-article-home-link" href="${servePath}/" aria-label="返回鱼排首页" title="返回鱼排首页">
+                        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20z"/></svg>
+                        <span>首页</span>
+                    </a>
+                </#if>
                 <#if showTopAd>
                     ${HeaderBannerLabel}
                 </#if>
@@ -109,6 +118,19 @@
                         ${article.articleTitleEmoj}
                     </a>
                 </h1>
+                <#if 6 == article.articleType>
+                <div class="long-article-meta">
+                    <a href="${servePath}/member/${article.articleAuthorName}" class="long-article-author">
+                        <#if article.articleAuthorNickName != "">${article.articleAuthorNickName}<#else>${article.articleAuthorName}</#if>
+                    </a>
+                    <span>${article.timeAgo}</span>
+                    <#if longArticleColumn??>
+                    <span class="long-article-meta__separator">·</span>
+                    <a href="${servePath}/column/${longArticleColumn.oId!longArticleColumn.columnId}">${longArticleColumn.columnTitle}</a>
+                    <span>第 ${article.longArticleChapterNo?c} 章</span>
+                    </#if>
+                </div>
+                </#if>
                 <div style="margin-bottom: 3px">
                     <#if 6 != article.articleType && article.sysMetal != "[]">
                         <#list article.sysMetal?eval as metal>
@@ -235,10 +257,6 @@
                 <#include "common/article-adjacent-nav.ftl">
 
                 <#if 6 == article.articleType>
-                <div class="long-article-meta">
-                    <a href="${servePath}/member/${article.articleAuthorName}" class="long-article-author">${article.articleAuthorName}</a>
-                    <span class="long-article-time">${article.timeAgo}</span>
-                </div>
                 <#if article.isMyArticle && article.longArticleReadStat??>
                 <div class="module" style="padding:12px;margin-top:8px;">
                     <div class="ft__smaller ft__fade">长文阅读激励</div>
@@ -367,12 +385,17 @@
                             </#if>
                             <div class="comments-header fn-clear">
                                 <div class="comments-header__main">
-                                    <span class="article-cmt-cnt">${commentDisplayCount!article.articleCommentCount} ${cmtLabel}</span>
+                                    <span class="article-cmt-cnt"><#if 6 == article.articleType>评论 <span class="long-article-comments-count">${commentDisplayCount!article.articleCommentCount} 条</span><#else>${commentDisplayCount!article.articleCommentCount} ${cmtLabel}</#if></span>
                                     <span class="fn-right<#if article.articleComments?size == 0> fn-none</#if>">
                                         <a class="tooltipped tooltipped-nw" href="#bottomComment" aria-label="${jumpToBottomCommentLabel}"><svg><use xlink:href="#chevron-down"></use></svg></a>
                                     </span>
+                                    <#if 6 == article.articleType>
+                                    <button type="button" class="long-article-comments-close" data-long-article-comments-close aria-label="关闭评论" title="关闭评论">
+                                        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M18.3 5.71 12 12l6.3 6.29-1.42 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.3l6.3 6.29 6.29-6.3z"/></svg>
+                                    </button>
+                                    </#if>
                                 </div>
-                                <#if article.articleCommentCount != 0>
+                                <#if (commentDisplayCount!article.articleCommentCount) != 0>
                                     <div class="comment-filterbar">
                                         <div class="comment-segment">
                                             <a class="comment-segment__item<#if !commentAuthorFilter> comment-segment__item--active</#if>"
@@ -400,6 +423,16 @@
                                 </#list>
                                 <div id="bottomComment"></div>
                             </ul>
+                            <#if 6 == article.articleType && (article.articleOrphanedParagraphComments![])?size gt 0>
+                            <details class="long-article-orphaned-comments">
+                                <summary>原段落已修改 <span>${article.articleOrphanedParagraphComments?size}</span></summary>
+                                <ul>
+                                    <#list article.articleOrphanedParagraphComments as comment>
+                                        <#include 'common/comment.ftl' />
+                                    </#list>
+                                </ul>
+                            </details>
+                            </#if>
                         </div>
                     <@pagination url=article.articlePermalink query="${commentPaginationQuery}" />
                 </div>
@@ -488,89 +521,82 @@
             </div>
         </div>
         <#if 6 == article.articleType>
-        <div class="long-article-settings">
-            <button class="long-article-toggle-btn" onclick="document.querySelectorAll('.long-article-settings-btn').forEach(function(btn){btn.classList.toggle('hide')});this.classList.toggle('active')">
-                ···
-            </button>
-            <button class="long-article-settings-btn hide" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="回到顶部">
+        <div class="long-article-settings" data-long-article-toolbar>
+            <div class="long-article-settings__actions">
+            <button type="button" class="long-article-settings-btn" data-long-article-action="top" title="回到顶部">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path fill="currentColor" d="M5 15h4v6h6v-6h4l-7-8zM4 3h16v2H4z"/>
                 </svg>
             </button>
-            <button class="long-article-settings-btn hide has-cnt" onclick="document.getElementById('comments').scrollIntoView({behavior:'smooth'})" title="评论">
+            <button type="button" class="long-article-settings-btn has-cnt" data-long-article-action="comments" title="评论" aria-expanded="false" aria-controls="comments">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
                 </svg>
-                <span class="count">${article.articleCommentCount}</span>
+                <span class="count">${commentDisplayCount!article.articleCommentCount}</span>
             </button>
-            <button class="long-article-settings-btn hide" onclick="(function(){var c=document.querySelector('.long-article-content');var s=parseInt(c.style.fontSize)||16;s=Math.max(12,s-2);c.style.fontSize=s+'px';localStorage.setItem('longArticleFontSize',s)})()" title="减小字号">
+            <button type="button" class="long-article-settings-btn" data-long-article-action="font-decrease" title="减小字号">
                 <span>A-</span>
             </button>
-            <button class="long-article-settings-btn hide" onclick="(function(){var c=document.querySelector('.long-article-content');var s=parseInt(c.style.fontSize)||16;s=Math.min(24,s+2);c.style.fontSize=s+'px';localStorage.setItem('longArticleFontSize',s)})()" title="增大字号">
+            <button type="button" class="long-article-settings-btn" data-long-article-action="font-increase" title="增大字号">
                 <span>A+</span>
             </button>
             <#if permissions["commonThankArticle"].permissionGrant>
-            <button class="long-article-settings-btn hide has-cnt<#if article.thanked> ft-red</#if>" onclick="<#if !article.thanked>Article.thankArticle('${article.oId}', ${article.articleAnonymous})</#if>" title="${thankLabel}">
+            <button type="button" class="long-article-settings-btn has-cnt<#if article.thanked> ft-red</#if>" onclick="<#if !article.thanked>Article.thankArticle('${article.oId}', ${article.articleAnonymous})</#if>" title="${thankLabel}">
                 <svg><use xlink:href="#heart"></use></svg>
                 <span class="count">${article.thankedCnt}</span>
             </button>
             </#if>
             <#if permissions["commonGoodArticle"].permissionGrant>
-            <button class="long-article-settings-btn hide has-cnt<#if isLoggedIn && 0 == article.articleVote> ft-red</#if>" onclick="Article.voteUp('${article.oId}', 'article', this)" title="${upLabel}">
+            <button type="button" class="long-article-settings-btn has-cnt<#if isLoggedIn && 0 == article.articleVote> ft-red</#if>" onclick="Article.voteUp('${article.oId}', 'article', this)" title="${upLabel}">
                 <svg><use xlink:href="#thumbs-up"></use></svg>
                 <span class="count">${article.articleGoodCnt}</span>
             </button>
             </#if>
             <#if permissions["commonBadArticle"].permissionGrant>
-            <button class="long-article-settings-btn hide has-cnt<#if isLoggedIn && 1 == article.articleVote> ft-red</#if>" onclick="Article.voteDown('${article.oId}', 'article', this)" title="${downLabel}">
+            <button type="button" class="long-article-settings-btn has-cnt<#if isLoggedIn && 1 == article.articleVote> ft-red</#if>" onclick="Article.voteDown('${article.oId}', 'article', this)" title="${downLabel}">
                 <svg><use xlink:href="#thumbs-down"></use></svg>
                 <span class="count">${article.articleBadCnt}</span>
             </button>
             </#if>
             <#if isLoggedIn && isFollowing>
-            <button class="long-article-settings-btn hide has-cnt ft-red" onclick="Util.unfollow(this, '${article.oId}', 'article')" title="${uncollectLabel}">
+            <button type="button" class="long-article-settings-btn has-cnt ft-red" onclick="Util.unfollow(this, '${article.oId}', 'article')" title="${uncollectLabel}">
                 <svg><use xlink:href="#star"></use></svg>
                 <span class="count">${article.articleCollectCnt}</span>
             </button>
             <#else>
-            <button class="long-article-settings-btn hide has-cnt" onclick="Util.follow(this, '${article.oId}', 'article')" title="${collectLabel}">
+            <button type="button" class="long-article-settings-btn has-cnt" onclick="Util.follow(this, '${article.oId}', 'article')" title="${collectLabel}">
                 <svg><use xlink:href="#star"></use></svg>
                 <span class="count">${article.articleCollectCnt}</span>
             </button>
             </#if>
             <#if permissions["commonViewArticleHistory"].permissionGrant && article.articleRevisionCount &gt; 1>
-            <button class="long-article-settings-btn hide" onclick="Article.revision('${article.oId}')" title="${historyLabel}">
+            <button type="button" class="long-article-settings-btn" onclick="Article.revision('${article.oId}')" title="${historyLabel}">
                 <svg class="icon-history"><use xlink:href="#history"></use></svg>
             </button>
             </#if>
-            <button class="long-article-settings-btn hide" onclick="$('#reportDialog').data('type', 0).data('id', '${article.oId}').dialog('open')" title="${reportLabel}">
+            <button type="button" class="long-article-settings-btn" onclick="$('#reportDialog').data('type', 0).data('id', '${article.oId}').dialog('open')" title="${reportLabel}">
                 <svg><use xlink:href="#icon-report"></use></svg>
             </button>
             <#if article.isMyArticle && 3 != article.articleType && permissions["commonUpdateArticle"].permissionGrant>
-            <button class="long-article-settings-btn hide" onclick="location.href='${servePath}/update?id=${article.oId}'" title="${editLabel}">
+            <button type="button" class="long-article-settings-btn" onclick="location.href='${servePath}/update?id=${article.oId}'" title="${editLabel}">
                 <svg><use xlink:href="#edit"></use></svg>
             </button>
             </#if>
             <#if article.isMyArticle && permissions["commonStickArticle"].permissionGrant>
-            <button class="long-article-settings-btn hide" onclick="Article.stick('${article.oId}')" title="${stickLabel}">
+            <button type="button" class="long-article-settings-btn" onclick="Article.stick('${article.oId}')" title="${stickLabel}">
                 <svg><use xlink:href="#chevron-up"></use></svg>
             </button>
             </#if>
             <#if permissions["articleUpdateArticleBasic"].permissionGrant>
-            <button class="long-article-settings-btn hide" onclick="location.href='${servePath}/admin/article/${article.oId}'" title="${adminLabel}">
+            <button type="button" class="long-article-settings-btn" onclick="location.href='${servePath}/admin/article/${article.oId}'" title="${adminLabel}">
                 <svg><use xlink:href="#setting"></use></svg>
             </button>
             </#if>
+            </div>
+            <button type="button" class="long-article-toggle-btn" data-long-article-action="toggle" aria-expanded="false" title="阅读工具">
+                ···
+            </button>
         </div>
-        <script>
-        (function(){
-            var fontSize = localStorage.getItem('longArticleFontSize');
-            if (fontSize) {
-                var content = document.querySelector('.long-article-content');
-                if (content) content.style.fontSize = fontSize + 'px';
-            }
-        })();
-        </script>
         </#if>
         <#include "footer.ftl">
         <#if isLoggedIn && discussionViewable && article.articleCommentable && permissions["commonAddComment"].permissionGrant>
@@ -616,6 +642,10 @@
         <script src="${staticServePath}/js/emoji-groups${miniPostfix}.js?${staticResourceVersion}"></script>
         <script src="${staticServePath}/js/m-article${miniPostfix}.js?${staticResourceVersion}"></script>
         <script src="${staticServePath}/js/channel${miniPostfix}.js?${staticResourceVersion}"></script>
+        <#if 6 == article.articleType>
+        <script src="${staticServePath}/js/m-long-article${miniPostfix}.js?${staticResourceVersion}"></script>
+        <script src="${staticServePath}/js/long-article-paragraph${miniPostfix}.js?${staticResourceVersion}"></script>
+        </#if>
         <script>
             Label.commentErrorLabel = "${commentErrorLabel}";
             Label.symphonyLabel = "${symphonyLabel}";
@@ -631,6 +661,7 @@
             Label.downLabel = "${downLabel}";
             Label.confirmRemoveLabel = "${confirmRemoveLabel}";
             Label.removedLabel = "${removedLabel}";
+            Label.removeCommentLabel = "${removeCommentLabel}";
             Label.uploadLabel = "${uploadLabel}";
             Label.userCommentViewMode = ${userCommentViewMode};
             Label.commentSort = '${commentSort}';
@@ -675,6 +706,7 @@
             Label.canBadComment = ${permissions["commonBadComment"].permissionGrant?c};
             Label.canAddComment = ${permissions["commonAddComment"].permissionGrant?c};
             Label.canUpdateComment = ${permissions["commonUpdateComment"].permissionGrant?c};
+            Label.canRemoveComment = ${permissions["commonRemoveComment"].permissionGrant?c};
             Label.canViewCommentHistory = ${permissions["commonViewCommentHistory"].permissionGrant?c};
             Label.articleChannel = "${wsScheme}://${serverHost}:${serverPort}${contextPath}/article-channel?articleId=${article.oId}&articleType=${article.articleType}";
             <#if isLoggedIn>
@@ -687,6 +719,7 @@
             </#if>
             <#if 6 == article.articleType>
                 MLongArticle.init();
+                LongArticleParagraphComments.init();
             </#if>
 
             $(".editor-bg").click(Comment._toggleReply)
diff --git a/src/main/resources/skins/classic/mobile/common/comment.ftl b/src/main/resources/skins/classic/mobile/common/comment.ftl
index f8f537b5..9cf8c01d 100644
--- a/src/main/resources/skins/classic/mobile/common/comment.ftl
+++ b/src/main/resources/skins/classic/mobile/common/comment.ftl
@@ -23,6 +23,9 @@
 <#assign isCurrentUserComment = (comment.commentIsCurrentUser!false) || (isLoggedIn && comment.commentAuthorId?? && comment.commentAuthorId == currentUser.oId)>
 <li id="${comment.oId}"
     data-author="${comment.commentAuthorName}"
+    data-comment-type="${comment.commentType!0}"
+    data-comment-paragraph-id="${comment.commentParagraphId!}"
+    data-comment-paragraph-status="${comment.commentParagraphStatus!0}"
     data-is-author="<#if isArticleAuthorComment>true<#else>false</#if>"
     class="<#if comment.commentStatus == 1>cmt-shield</#if><#if comment.commentNice || comment.commentQnAOffered == 1> cmt-perfect</#if><#if threadReplyCount != 0> cmt-selected</#if>">
     <div class="fn-flex">
@@ -74,6 +77,9 @@
                 </span>
             </div>
             <div class="vditor-reset comment">
+            <#if (comment.commentType!0) == 1 && (comment.commentParagraphStatus!0) == 1 && (comment.commentParagraphSnapshot!'') != "">
+            <div class="comment-paragraph-context">${comment.commentParagraphSnapshot?html}</div>
+            </#if>
             ${comment.commentContent}
             </div>
             <#if threadReplyCount gt 0>
diff --git a/src/main/resources/skins/classic/mobile/footer.ftl b/src/main/resources/skins/classic/mobile/footer.ftl
index c8170b7f..5aaee1db 100644
--- a/src/main/resources/skins/classic/mobile/footer.ftl
+++ b/src/main/resources/skins/classic/mobile/footer.ftl
@@ -18,6 +18,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 -->
+<#if !(hidePageChrome!false)>
 <div class="footer">
     <div class="wrapper ft-smaller">
         <br>
@@ -97,6 +98,7 @@
         <br>
     </div>
 </div>
+</#if>
 <script src="${staticServePath}/js/symbol-defs${miniPostfix}.js?${staticResourceVersion}"></script>
 <script src="${staticServePath}/js/lib/compress/libs.min.js?${staticResourceVersion}"></script>
 <script src="https://file.fishpi.cn/vditor/latest/dist/index.min.js"></script>
diff --git a/src/main/resources/skins/classic/mobile/home/comments.ftl b/src/main/resources/skins/classic/mobile/home/comments.ftl
index 7f716a01..83fd0c51 100644
--- a/src/main/resources/skins/classic/mobile/home/comments.ftl
+++ b/src/main/resources/skins/classic/mobile/home/comments.ftl
@@ -43,6 +43,9 @@
                 </div>
 
                 <div class="vditor-reset comment">
+                    <#if (comment.commentType!0) == 1 && (comment.commentParagraphSnapshot!'') != "">
+                    <div class="comment-paragraph-context">段评 · ${comment.commentParagraphSnapshot?html}</div>
+                    </#if>
                     ${comment.commentContent}
                 </div>
             </div>
diff --git a/src/main/resources/skins/classic/mobile/home/notifications/commented.ftl b/src/main/resources/skins/classic/mobile/home/notifications/commented.ftl
index c215d4a2..6d99b9a8 100644
--- a/src/main/resources/skins/classic/mobile/home/notifications/commented.ftl
+++ b/src/main/resources/skins/classic/mobile/home/notifications/commented.ftl
@@ -41,6 +41,9 @@
             </div>
 
             <div class="vditor-reset comment">
+                <#if (notification.commentType!0) == 1 && (notification.commentParagraphSnapshot!'') != "">
+                <div class="comment-paragraph-context">段评 · ${notification.commentParagraphSnapshot?html}</div>
+                </#if>
                 ${notification.commentContent}
             </div>
         </div>
diff --git a/src/main/resources/skins/classic/mobile/home/notifications/reply.ftl b/src/main/resources/skins/classic/mobile/home/notifications/reply.ftl
index 1807b9ec..1c78cd34 100644
--- a/src/main/resources/skins/classic/mobile/home/notifications/reply.ftl
+++ b/src/main/resources/skins/classic/mobile/home/notifications/reply.ftl
@@ -41,6 +41,9 @@
             </div>
 
             <div class="vditor-reset comment">
+                <#if (notification.commentType!0) == 1 && (notification.commentParagraphSnapshot!'') != "">
+                <div class="comment-paragraph-context">段评 · ${notification.commentParagraphSnapshot?html}</div>
+                </#if>
                 ${notification.commentContent}
             </div>
         </div>
diff --git a/src/main/resources/skins/classic/pc/article.ftl b/src/main/resources/skins/classic/pc/article.ftl
index 51cd7ff2..1ee7ef1c 100644
--- a/src/main/resources/skins/classic/pc/article.ftl
+++ b/src/main/resources/skins/classic/pc/article.ftl
@@ -80,19 +80,44 @@
     <meta name="twitter:creator" content="@B3logOS"/>
 </head>
 <body itemscope itemtype="http://schema.org/Product" class="article<#if 6 == article.articleType> long-article-page</#if>">
+<#assign hidePageChrome = (6 == article.articleType)>
 <img itemprop="image" class="fn-none" src="${article.articleAuthorThumbnailURL210}"/>
 <p itemprop="description" class="fn-none">"${article.articlePreviewContent}"</p>
+<#if !hidePageChrome>
 <#include "header.ftl">
+</#if>
+<#if 6 == article.articleType>
+<div class="long-article-reading-stage">
+</#if>
 <div class="article-container">
 <div class="article-body">
     <#if showTopAd && 6 != article.articleType>
         ${HeaderBannerLabel}
     </#if>
     <div class="wrapper">
+        <#if 6 == article.articleType>
+            <a class="long-article-home-link" href="${servePath}/" aria-label="返回鱼排首页" title="返回鱼排首页">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20z"/></svg>
+                <span>首页</span>
+            </a>
+        </#if>
         <h1 class="article-title" itemprop="name">
             <@icon article.articlePerfect article.articleType></@icon>
             ${article.articleTitleEmoj}
         </h1>
+        <#if 6 == article.articleType>
+            <div class="long-article-meta">
+                <a href="${servePath}/member/${article.articleAuthorName}" class="long-article-author">
+                    <#if article.articleAuthorNickName != "">${article.articleAuthorNickName}<#else>${article.articleAuthorName}</#if>
+                </a>
+                <span>${article.timeAgo}</span>
+                <#if longArticleColumn??>
+                    <span class="long-article-meta__separator">·</span>
+                    <a href="${servePath}/column/${longArticleColumn.oId!longArticleColumn.columnId}">${longArticleColumn.columnTitle}</a>
+                    <span>第 ${article.longArticleChapterNo?c} 章</span>
+                </#if>
+            </div>
+        </#if>
         <#if 0!= article.articleStatement>
         <div style="display: flex ;justify-content: center">
             <div class="article-statement">
@@ -143,10 +168,6 @@
 
         <div class="article-tail">
             <#if 6 == article.articleType>
-                <div class="long-article-meta">
-                    <a href="${servePath}/member/${article.articleAuthorName}" class="long-article-author">${article.articleAuthorName}</a>
-                    <span class="long-article-time">${article.timeAgo}</span>
-                </div>
                 <#if article.isMyArticle && article.longArticleReadStat??>
                     <div class="fn__flex-column" style="gap:8px;margin:12px 0;padding:12px;border:1px solid #f0f0f0;border-radius:8px;background:#fafafa;">
                         <div class="ft__smaller ft__fade">长文阅读激励</div>
@@ -486,14 +507,19 @@
         <div class="module comments" id="comments">
             <div class="comments-header module-header">
                 <div class="comments-header__main">
-                    <span class="article-cmt-cnt">${commentDisplayCount!article.articleCommentCount} ${cmtLabel}</span>
+                    <span class="article-cmt-cnt"><#if 6 == article.articleType>评论 <span class="long-article-comments-count">${commentDisplayCount!article.articleCommentCount} 条</span><#else>${commentDisplayCount!article.articleCommentCount} ${cmtLabel}</#if></span>
                     <span class="fn-right<#if article.articleComments?size == 0> fn-none</#if>">
                         <a class="tooltipped tooltipped-nw" href="javascript:Comment._bgFade($('#bottomComment'))"
                            aria-label="${jumpToBottomCommentLabel}"><svg><use
                                         xlink:href="#chevron-down"></use></svg></a>
                     </span>
+                    <#if 6 == article.articleType>
+                    <button type="button" class="long-article-comments-close" data-long-article-comments-close aria-label="关闭评论" title="关闭评论">
+                        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M18.3 5.71 12 12l6.3 6.29-1.42 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.3l6.3 6.29 6.29-6.3z"/></svg>
+                    </button>
+                    </#if>
                 </div>
-                <#if article.articleCommentCount != 0>
+                <#if (commentDisplayCount!article.articleCommentCount) != 0>
                     <div class="comment-filterbar">
                         <div class="comment-segment">
                             <a class="comment-segment__item<#if !commentAuthorFilter> comment-segment__item--active</#if>"
@@ -537,6 +563,16 @@
                         <#include 'common/comment.ftl' />
                     </#list>
                 </ul>
+                <#if 6 == article.articleType && (article.articleOrphanedParagraphComments![])?size gt 0>
+                <details class="long-article-orphaned-comments">
+                    <summary>原段落已修改 <span>${article.articleOrphanedParagraphComments?size}</span></summary>
+                    <ul>
+                        <#list article.articleOrphanedParagraphComments as comment>
+                            <#include 'common/comment.ftl' />
+                        </#list>
+                    </ul>
+                </details>
+                </#if>
                 <div id="bottomComment"></div>
             </div>
             <@pagination url="${servePath}${article.articlePermalink}" query="${commentPaginationQuery}" pjaxTitle="${article.articleTitle} - ${symphonyLabel}" />
@@ -544,6 +580,9 @@
         <#if pjax><!---- pjax {#comments} end ----></#if>
     </div>
 </div>
+<#if 6 == article.articleType>
+</div>
+</#if>
 <div class="wrapper article-footer">
     <#if 6 != article.articleType>
     <#if sideRelevantArticles?size != 0>
@@ -649,6 +688,7 @@
                         class="ft-13">${article.thankedCnt}</span></span>
 </div>
 </div>
+<#if !hidePageChrome>
 <div class="article-header">
     <h1 aria-label="返回上一页" class="tooltipped tooltipped-s" style="display: flex; align-items: center;">
         <a href="javascript:history.back()">
@@ -743,38 +783,55 @@
         </#if>
     </div>
 </div>
+</#if>
 
 <#if 6 == article.articleType>
-<div class="long-article-settings">
-    <button class="long-article-settings-btn" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="回到顶部">
+<div class="long-article-settings" data-long-article-toolbar>
+    <button type="button" class="long-article-settings-btn long-article-settings-btn--top" data-long-article-action="top" title="回到顶部">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
             <path fill="currentColor" d="M5 15h4v6h6v-6h4l-7-8zM4 3h16v2H4z"/>
         </svg>
+        <span>顶部</span>
     </button>
-    <button class="long-article-settings-btn" onclick="document.getElementById('comments').scrollIntoView({behavior:'smooth'})" title="评论 ${article.articleCommentCount}">
+    <button type="button" class="long-article-settings-btn long-article-settings-btn--count" data-long-article-action="comments" title="评论 ${commentDisplayCount!article.articleCommentCount}" aria-expanded="false" aria-controls="articleCommentsPanel">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
             <path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
         </svg>
-        <#if article.articleCommentCount gt 0>
-        <span style="position:absolute;top:-4px;right:-4px;background:#f44336;color:#fff;border-radius:10px;padding:2px 5px;font-size:10px;min-width:18px;text-align:center;">${article.articleCommentCount}</span>
+        <span>评论</span>
+        <#if (commentDisplayCount!article.articleCommentCount) gt 0>
+        <span class="long-article-settings__count">${commentDisplayCount!article.articleCommentCount}</span>
         </#if>
     </button>
-    <button class="long-article-settings-btn" onclick="(function(){var c=document.querySelector('.long-article-content');var s=parseInt(c.style.fontSize)||18;s=Math.max(12,s-2);c.style.fontSize=s+'px';localStorage.setItem('longArticleFontSize',s);})()" title="减小字号">
-        A-
-    </button>
-    <button class="long-article-settings-btn" onclick="(function(){var c=document.querySelector('.long-article-content');var s=parseInt(c.style.fontSize)||18;s=Math.min(28,s+2);c.style.fontSize=s+'px';localStorage.setItem('longArticleFontSize',s);})()" title="增大字号">
-        A+
-    </button>
+    <div class="long-article-layout">
+        <button type="button" class="long-article-settings-btn" data-long-article-action="layout" aria-expanded="false" aria-controls="longArticleLayoutPanel" title="阅读设置">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M14.82 1H9.18l-.647 3.237a8.5 8.5 0 0 0-1.52.88l-3.13-1.059l-2.819 4.884l2.481 2.18a8.6 8.6 0 0 0 0 1.756l-2.481 2.18l2.82 4.884l3.129-1.058c.472.342.98.638 1.52.879L9.18 23h5.64l.647-3.237a8.5 8.5 0 0 0 1.52-.88l3.13 1.059l2.82-4.884l-2.482-2.18a8.6 8.6 0 0 0 0-1.756l2.481-2.18l-2.82-4.884l-3.128 1.058a8.5 8.5 0 0 0-1.52-.879zM12 16a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/>
+            </svg>
+            <span>设置</span>
+        </button>
+        <div class="long-article-layout-panel" id="longArticleLayoutPanel" aria-hidden="true">
+            <div class="long-article-layout-panel__title">阅读设置</div>
+            <div class="long-article-layout-panel__row">
+                <span>字号</span>
+                <div class="long-article-font-options">
+                    <button type="button" data-long-article-action="font-decrease" title="减小字号">A-</button>
+                    <output data-long-article-font-size>18px</output>
+                    <button type="button" data-long-article-action="font-increase" title="增大字号">A+</button>
+                </div>
+            </div>
+            <div class="long-article-layout-panel__row long-article-layout-panel__row--width">
+                <span>版式</span>
+                <div class="long-article-layout-panel__options">
+                    <button type="button" data-long-article-width="auto">自动</button>
+                    <button type="button" data-long-article-width="600">600</button>
+                    <button type="button" data-long-article-width="800">800</button>
+                    <button type="button" data-long-article-width="1000">1000</button>
+                    <button type="button" data-long-article-width="1200">1200</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
-<script>
-(function(){
-    var fontSize = localStorage.getItem('longArticleFontSize');
-    if (fontSize) {
-        var content = document.querySelector('.long-article-content');
-        if (content) content.style.fontSize = fontSize + 'px';
-    }
-})();
-</script>
 </#if>
 
 <#include "footer.ftl">
@@ -854,6 +911,10 @@
 <script src="${staticServePath}/js/emoji-groups${miniPostfix}.js?${staticResourceVersion}"></script>
 <script src="${staticServePath}/js/channel${miniPostfix}.js?${staticResourceVersion}"></script>
 <script src="${staticServePath}/js/article${miniPostfix}.js?${staticResourceVersion}"></script>
+<#if 6 == article.articleType>
+<script src="${staticServePath}/js/long-article${miniPostfix}.js?${staticResourceVersion}"></script>
+<script src="${staticServePath}/js/long-article-paragraph${miniPostfix}.js?${staticResourceVersion}"></script>
+</#if>
 <script>
     Label.commentErrorLabel = "${commentErrorLabel}";
     Label.symphonyLabel = "${symphonyLabel}";
@@ -870,6 +931,7 @@
     Label.downLabel = "${downLabel}";
     Label.confirmRemoveLabel = "${confirmRemoveLabel}";
     Label.removedLabel = "${removedLabel}";
+    Label.removeCommentLabel = "${removeCommentLabel}";
     Label.uploadLabel = "${uploadLabel}";
     Label.userCommentViewMode = ${userCommentViewMode};
     Label.commentSort = '${commentSort}';
@@ -915,6 +977,7 @@
     Label.canBadComment = ${permissions["commonBadComment"].permissionGrant?c};
     Label.canAddComment = ${permissions["commonAddComment"].permissionGrant?c};
     Label.canUpdateComment = ${permissions["commonUpdateComment"].permissionGrant?c};
+    Label.canRemoveComment = ${permissions["commonRemoveComment"].permissionGrant?c};
     Label.canViewCommentHistory = ${permissions["commonViewCommentHistory"].permissionGrant?c};
     Label.articleChannel = "${wsScheme}://${serverHost}:${serverPort}${contextPath}/article-channel?articleId=${article.oId}&articleType=${article.articleType}";
     <#if isLoggedIn>
@@ -928,6 +991,7 @@
 
     <#if 6 == article.articleType>
     LongArticle.init();
+    LongArticleParagraphComments.init();
     </#if>
 
     setInterval(function () {
diff --git a/src/main/resources/skins/classic/pc/common/comment.ftl b/src/main/resources/skins/classic/pc/common/comment.ftl
index 4f5e65bd..58b15611 100644
--- a/src/main/resources/skins/classic/pc/common/comment.ftl
+++ b/src/main/resources/skins/classic/pc/common/comment.ftl
@@ -41,6 +41,9 @@
 <#assign isCurrentUserComment = (comment.commentIsCurrentUser!false) || (isLoggedIn && comment.commentAuthorId?? && comment.commentAuthorId == currentUser.oId)>
 <li id="${comment.oId}"
     data-author="${comment.commentAuthorName}"
+    data-comment-type="${comment.commentType!0}"
+    data-comment-paragraph-id="${comment.commentParagraphId!}"
+    data-comment-paragraph-status="${comment.commentParagraphStatus!0}"
     data-is-author="<#if isArticleAuthorComment>true<#else>false</#if>"
     class="<#if comment.commentStatus == 1>cmt-shield</#if><#if comment.commentNice || comment.commentQnAOffered == 1> cmt-perfect</#if><#if threadReplyCount != 0> cmt-selected</#if>">
     <div class="fn-flex">
@@ -108,6 +111,9 @@
                 </span>
             </div>
             <div class="vditor-reset comment">
+                <#if (comment.commentType!0) == 1 && (comment.commentParagraphStatus!0) == 1 && (comment.commentParagraphSnapshot!'') != "">
+                <div class="comment-paragraph-context">${comment.commentParagraphSnapshot?html}</div>
+                </#if>
                 ${comment.commentContent}
             </div>
             <#if threadReplyCount gt 0>
diff --git a/src/main/resources/skins/classic/pc/footer.ftl b/src/main/resources/skins/classic/pc/footer.ftl
index 0828cbe0..880b4589 100644
--- a/src/main/resources/skins/classic/pc/footer.ftl
+++ b/src/main/resources/skins/classic/pc/footer.ftl
@@ -18,6 +18,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 -->
+<#if !(hidePageChrome!false)>
 <div class="footer">
     <div class="wrapper">
         <div class="slogan">
@@ -111,6 +112,7 @@
         </div>
     </div>
 </div>
+</#if>
 
 <script src="${staticServePath}/js/symbol-defs${miniPostfix}.js?${staticResourceVersion}"></script>
 <script src="${staticServePath}/js/lib/compress/libs.min.js?${staticResourceVersion}"></script>
diff --git a/src/main/resources/skins/classic/pc/home/comments.ftl b/src/main/resources/skins/classic/pc/home/comments.ftl
index 6144e68e..a559301e 100644
--- a/src/main/resources/skins/classic/pc/home/comments.ftl
+++ b/src/main/resources/skins/classic/pc/home/comments.ftl
@@ -58,6 +58,9 @@
                 </div>
 
                 <div class="vditor-reset comment">
+                    <#if (comment.commentType!0) == 1 && (comment.commentParagraphSnapshot!'') != "">
+                    <div class="comment-paragraph-context">段评 · ${comment.commentParagraphSnapshot?html}</div>
+                    </#if>
                     ${comment.commentContent}
                 </div>
             </div>
diff --git a/src/main/resources/skins/classic/pc/home/notifications/commented.ftl b/src/main/resources/skins/classic/pc/home/notifications/commented.ftl
index dc16e4bb..3121d516 100644
--- a/src/main/resources/skins/classic/pc/home/notifications/commented.ftl
+++ b/src/main/resources/skins/classic/pc/home/notifications/commented.ftl
@@ -41,6 +41,9 @@
             </div>
 
             <div class="vditor-reset comment">
+                <#if (notification.commentType!0) == 1 && (notification.commentParagraphSnapshot!'') != "">
+                <div class="comment-paragraph-context">段评 · ${notification.commentParagraphSnapshot?html}</div>
+                </#if>
                 ${notification.commentContent}
             </div>
         </div>
diff --git a/src/main/resources/skins/classic/pc/home/notifications/reply.ftl b/src/main/resources/skins/classic/pc/home/notifications/reply.ftl
index aa9e3954..81c01d82 100644
--- a/src/main/resources/skins/classic/pc/home/notifications/reply.ftl
+++ b/src/main/resources/skins/classic/pc/home/notifications/reply.ftl
@@ -41,6 +41,9 @@
             </div>
 
             <div class="vditor-reset comment">
+                <#if (notification.commentType!0) == 1 && (notification.commentParagraphSnapshot!'') != "">
+                <div class="comment-paragraph-context">段评 · ${notification.commentParagraphSnapshot?html}</div>
+                </#if>
                 ${notification.commentContent}
             </div>
         </div>
diff --git a/src/main/resources/symphony.properties b/src/main/resources/symphony.properties
index 5bb8bf89..b1fb0e08 100644
--- a/src/main/resources/symphony.properties
+++ b/src/main/resources/symphony.properties
@@ -238,6 +238,7 @@ permission.rule.url./admin/remove-comment.POST=commentRemoveComment
 permission.rule.url./admin/comment/{commentId}.POST=commentUpdateCommentBasic
 permission.rule.url./article.POST=commonAddArticle
 permission.rule.url./comment.POST=commonAddComment
+permission.rule.url./comment/paragraph.POST=commonAddComment
 permission.rule.url./vote/down/article.POST=commonBadArticle
 permission.rule.url./vote/down/comment.POST=commonBadComment
 permission.rule.url./point/buy-invitecode.POST=commonExchangeIC