@jx3box/jx3box-vue3-ui 0.6.8 → 0.7.0

package/assets/css/quick-reply.less

@@ -0,0 +1,56 @@
+.c-jx3box-reply {
+    .u-reference {
+        cursor: pointer;
+        position: relative;
+        top: 8px;
+        margin-left: 10px;
+    }
+}
+.c-jx3box-reply-pop {
+    padding: 0;
+    width: 280px;
+}
+
+.c-jx3box-reply-pop__content {
+    position: relative;
+
+    .u-title {
+        font-size: 14px;
+        padding: 10px;
+    }
+    .u-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        cursor: pointer;
+        font-size: 16px;
+    }
+
+    .m-reply-list {
+        padding: 0 10px 10px 10px;
+        max-height: 300px;
+        overflow-y: auto;
+    }
+    .m-reply-list__item {
+        cursor: pointer;
+        padding: 5px;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 5px;
+        .u-name {
+            font-size: 12px;
+            color: #999;
+        }
+        .u-content {
+            font-size: 14px;
+            margin-top: 5px;
+        }
+
+        &:hover {
+            color: #fff;
+            background-color: #409eff;
+            border-color: #409eff;
+            transition: all 0.3s;
+        }
+    }
+}

package/assets/data/reply_template.json

@@ -0,0 +1,6 @@
+[
+    "真不错，谢谢楼主#胜利#笨猪#胜利",
+    "辛苦了，感谢楼主的付出",
+    "谢谢楼主，很有用",
+    "剑三真好玩，魔盒真好用"
+]

package/assets/img/comment.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 6H4V36H13V41L23 36H44V6Z" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 19.5V22.5" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 19.5V22.5" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M34 19.5V22.5" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/assets/img/heart_1.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path fill="#0366d6" d="m256 436a54.62 54.62 0 0 1 -29.53-8.64c-25-16.07-73.08-49.05-113.75-89.32-49.91-49.46-75.22-96.04-75.22-138.48 0-29.49 8.72-56.51 25.22-78.13a115.2 115.2 0 0 1 137.89-35.75c21.18 9.14 40.07 24.55 55.39 45 15.32-20.5 34.21-35.91 55.39-45a115.2 115.2 0 0 1 137.89 35.75c16.5 21.62 25.22 48.64 25.22 78.13 0 42.44-25.31 89-75.22 138.44-40.67 40.27-88.73 73.25-113.75 89.32a54.62 54.62 0 0 1 -29.53 8.68zm-101.84-334.94a89.41 89.41 0 0 0 -23.42 3.1 90.93 90.93 0 0 0 -48.15 32.44c-13.14 17.22-20.09 39-20.09 63 0 35.52 22.81 76.12 67.81 120.68 39 38.66 85.47 70.5 109.67 86a29.72 29.72 0 0 0 32 0c24.2-15.54 70.63-47.38 109.67-86 45-44.56 67.81-85.16 67.81-120.68 0-24-6.95-45.74-20.09-63a90.93 90.93 0 0 0 -48.15-32.44c-34.17-9.28-82.18.42-114.48 55.48a12.49 12.49 0 0 1 -21.56 0c-25.38-43.34-60.54-58.58-91.02-58.58z"/></svg>

package/assets/img/heart_2.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m449.28 121.43a115.2 115.2 0 0 0 -137.89-35.75c-21.18 9.14-40.07 24.55-55.39 45-15.32-20.5-34.21-35.91-55.39-45a115.2 115.2 0 0 0 -137.89 35.75c-16.5 21.62-25.22 48.64-25.22 78.13 0 42.44 25.31 89 75.22 138.44 40.67 40.27 88.73 73.25 113.75 89.32a54.78 54.78 0 0 0 59.06 0c25-16.07 73.08-49.05 113.75-89.32 49.91-49.42 75.22-96 75.22-138.44 0-29.49-8.72-56.51-25.22-78.13z" fill="#f9595f"/></svg>

package/assets/img/hide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="#0366d6" d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"></path><path fill="#0366d6" d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"></path></svg>

package/assets/img/view.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="#0366d6" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160"></path></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-vue3-ui",
-    "version": "0.6.8",
+    "version": "0.7.0",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -26,8 +26,8 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
-        "@jx3box/jx3box-common": "^8.2.7",
-        "@jx3box/jx3box-data": "^3.5.6",
+        "@jx3box/jx3box-common": "^8.2.9",
+        "@jx3box/jx3box-data": "^3.5.8",
         "@jx3box/jx3box-emotion": "^1.2.6",
         "@jx3box/jx3box-macro": "^1.0.1",
         "@jx3box/jx3box-talent": "^1.2.7",

package/src/App.vue

@@ -67,7 +67,7 @@
                 :postId="57260"
                 :allowGift="true"
             />
-            <Comment category="post" id="19382"></Comment>
+            <Comment category="post" id="54842"></Comment>
             <RightSidebar :show-toggle="true">
                 <PostTopic type="bps" :id="48857"></PostTopic>
                 <div id="directory"></div>
@@ -109,7 +109,7 @@ export default {
     },
     data() {
         return {
-            post_id: "69014",
+            post_id: "54842",
             post: "",
             client: location.href.includes("origin") ? "origin" : "std",
             tag: "",

package/src/comment/CommentContent.vue

@@ -3,7 +3,7 @@
         <div
             class="u-text"
             v-if="content != ''"
-            v-html="formatContent(content)"
+            v-html="renderContent"
         ></div>
         <div class="u-attachements" v-if="attachments.length">
             <el-image
@@ -14,70 +14,136 @@
                 lazy
             ></el-image>
         </div>
-        <div class="u-toolbar">
-            <el-button
-                class="u-admin"
-                link
-                size="small"
-                icon="ChatRound"
-                @click="showForm = !showForm"
-                type="primary"
-                >回复</el-button
-            >
-            <el-button
-                class="u-admin"
-                v-if="canDelete"
-                link
-                icon="Delete"
-                size="small"
-                @click="deleteComment()"
-                type="danger"
-                >删除</el-button
-            >
-            <el-button
-                class="u-admin"
-                v-if="canSetTop"
-                link
-                icon="Top"
-                size="small"
-                @click="topComment(true)"
-                type="primary"
-                >置顶</el-button
-            >
-            <el-button
-                class="u-admin"
-                v-if="canCancelTop"
-                link
-                icon="Top"
-                size="small"
-                @click="topComment(false)"
-                type="primary"
-                >取消置顶</el-button
-            >
-            <el-button
-                class="u-admin"
-                v-if="canSetStar"
-                link
-                icon="Star"
-                size="small"
-                @click="starComment(true)"
-                type="primary"
-                >加精</el-button
-            >
-            <el-button
-                class="u-admin"
-                v-if="canCancelStar"
-                link
-                icon="StarFilled"
-                size="small"
-                @click="starComment(false)"
-                type="primary"
-                >取消加精</el-button
-            >
-            <time class="u-date">
-                <i class="Clock"></i>
-                {{ dataFormat(date) }}
-            </time>
+        <div class="u-toolbar u-toolbar--primary">
+            <div class="u-toolbar-left">
+                <el-button
+                    class="u-admin"
+                    v-if="!currentUserHadLike"
+                    type="text"
+                    size="small"
+                    @click="doLike(true)"
+                    ><img
+                        class="u-up"
+                        src="../../assets/img/heart_1.svg"
+                        alt=""
+                    />点赞<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
+                >
+                <el-button
+                    class="u-admin"
+                    type="text"
+                    size="small"
+                    v-if="currentUserHadLike"
+                    @click="doLike(false)"
+                    ><img
+                        class="u-up"
+                        src="../../assets/img/heart_2.svg"
+                        alt=""
+                    />已赞<span class="u-like-count">{{
+                        likesFormat(hasLikeCount)
+                    }}</span></el-button
+                >
+                <el-button
+                    class="u-admin"
+                    link
+                    size="small"
+                    icon="ChatRound"
+                    @click="showForm = !showForm"
+                    type="primary"
+                    >回复</el-button
+                >
+                <el-button
+                    class="u-admin"
+                    v-if="canDelete"
+                    link
+                    icon="Delete"
+                    size="small"
+                    @click="deleteComment()"
+                    type="danger"
+                    >删除</el-button
+                >
+                <el-button
+                    class="u-admin"
+                    type="text"
+                    size="small"
+                    icon="Delete"
+                    v-if="canHide"
+                    @click="hideComment()"
+                    title="拉入黑洞后，仅评论者自己独自可见"
+                    >黑洞</el-button
+                >
+                <el-button
+                    class="u-admin"
+                    v-if="canSetTop"
+                    link
+                    icon="Top"
+                    size="small"
+                    @click="topComment(true)"
+                    type="primary"
+                    >置顶</el-button
+                >
+                <el-button
+                    class="u-admin"
+                    v-if="canCancelTop"
+                    link
+                    icon="Top"
+                    size="small"
+                    @click="topComment(false)"
+                    type="primary"
+                    >取消置顶</el-button
+                >
+                <el-button
+                    class="u-admin"
+                    v-if="canSetStar"
+                    link
+                    icon="Star"
+                    size="small"
+                    @click="starComment(true)"
+                    type="primary"
+                    >加精</el-button
+                >
+                <el-button
+                    class="u-admin"
+                    v-if="canCancelStar"
+                    link
+                    icon="StarFilled"
+                    size="small"
+                    @click="starComment(false)"
+                    type="primary"
+                    >取消加精</el-button
+                >
+                <time class="u-date">
+                    <i class="Clock"></i>
+                    {{ dataFormat(date) }}
+                </time>
+            </div>
+            <div class="u-toolbar-right">
+                <el-button
+                    class="u-admin u-filter"
+                    v-if="canAddWhite"
+                    type="text"
+                    size="small"
+                    @click="setWhiteComment(true)"
+                >
+                    <img
+                        class="u-icon-filter"
+                        src="../../assets/img/view.svg"
+                        alt="显示"
+                    />
+                    显示</el-button
+                >
+                <el-button
+                    class="u-admin u-filter"
+                    v-if="canRemoveWhite"
+                    type="text"
+                    size="small"
+                    @click="setWhiteComment(false)"
+                    ><img
+                        class="u-icon-filter"
+                        src="../../assets/img/hide.svg"
+                        alt="隐藏"
+                    />隐藏</el-button
+                >
+            </div>
         </div>
         <el-form
             v-if="showForm"
@@ -137,16 +203,21 @@ function fillZero(num) {
 }
 export default {
     props: [
-        "content",
+    "content",
         "date",
         "hasReply",
         "canDelete",
         "canSetTop",
         "canCancelTop",
+        "canHide",
+        "isLike", // 是否已点赞
+        "likes", // 点赞数
         "canSetStar",
         "canCancelStar",
         "attachments",
         "commentId",
+        "canAddWhite", // 是否可以添加到过滤白名单， 因为对于一般用户，它看不到非白名单的评论，所以“可以添加到白名单”的权限不要在加一次用户层面的权限判定
+        "canRemoveWhite", // 是否可以从过滤白名单移除
     ],
     components: {
         Uploader,
@@ -162,6 +233,10 @@ export default {
             showUploader: false,
             inputId: "",
             previewList: [],
+            currentUserHadLike: this.isLike,
+            hasLikeCount: this.likes,
+
+            renderContent: "",
         };
     },
     mounted() {
@@ -174,13 +249,34 @@ export default {
             });
         },
     },
+    watch: {
+        content: {
+            handler: function (val) {
+                this.formatContent(val);
+            },
+            immediate: true,
+        },
+    },
     methods: {
+        doLike(setLike) {
+            if (setLike === this.currentUserHadLike) {
+                return;
+            }
+            this.currentUserHadLike = setLike;
+            this.hasLikeCount = setLike
+                ? this.hasLikeCount + 1
+                : this.hasLikeCount - 1;
+            this.$emit("setLikeComment", setLike);
+        },
         topComment(setTop) {
             this.$emit("setTopComment", setTop);
         },
         starComment(setStar) {
             this.$emit("setStarComment", setStar);
         },
+        setWhiteComment(white) {
+            this.$emit("setWhiteComment", white);
+        },
         deleteComment() {
             this.$confirm("确定删除该评论吗？", "提示", {
                 confirmButtonText: "确定",
@@ -192,6 +288,17 @@ export default {
                 })
                 .catch(() => {});
         },
+        hideComment() {
+            this.$confirm("确定隐藏该评论吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    this.$emit("hide", this.commentId);
+                })
+                .catch(() => {});
+        },
         dataFormat(str) {
             let d = new Date(str);
             return (
@@ -208,7 +315,9 @@ export default {
                 fillZero(d.getSeconds())
             );
         },
-
+        likesFormat(count) {
+            return count > 0 ? count : "";
+        },
         attachmentUploadFinish(data) {
             this.disableSubmitBtn = false;
             this.$emit("addNewReply", {
@@ -233,7 +342,9 @@ export default {
             }
         },
         hideForm() {},
-        formatContent,
+        async formatContent(str) {
+            this.renderContent = await formatContent(str);
+        },
         async handleEmotionSelected(emotionVal) {
             const myField = document.querySelector(`#id${this.inputId}`);
             const value = emotionVal.key;
@@ -273,9 +384,29 @@ export default {
     position: relative;
     .u-toolbar {
         font-size: 12px;
+
         .el-button + .el-button {
             margin-left: 20px;
         }
+
+        &.u-toolbar--primary {
+            display: flex;
+            justify-content: space-between;
+
+            .u-toolbar-right {
+                padding-right: 5px;
+            }
+        }
+
+        .u-filter span {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .u-icon-filter {
+            width: 16px;
+            height: 16px;
+        }
     }
     .u-date {
         color: #c0c4cc;
@@ -286,6 +417,7 @@ export default {
     }
     .u-cmt {
         padding: 5px 0 10px 0;
+        position: relative;
         .u-text {
             line-height: 1.715;
             img {
@@ -303,12 +435,33 @@ export default {
             }
         }
     }
+    .u-up {
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 1px;
+        margin-right: 5px;
+    }
+    .u-like-count {
+        margin-left: 3px;
+        // &:before {
+        //     content: "(";
+        // }
+        // &:after {
+        //     content: ")";
+        // }
+        color: #999;
+    }
 }
 @media screen and (max-width: 767px) {
     .c-comment-cmt {
         .u-toolbar {
             position: static;
             margin-top: 10px;
+
+            &.u-toolbar--primary {
+                display: block !important;
+            }
         }
     }
 }

package/src/comment/CommentContentSimple.vue

@@ -8,7 +8,7 @@
                 >
                 :
             </span>
-            <div class="u-reply-text" v-html="formatContent(content)"></div>
+            <div class="u-reply-text" v-html="renderContent"></div>
              <!--<div class="u-reply-text" v-html="content"></div>-->
             <!-- <p v-for="(p, index) in getPList(content)" :key="index" v-html="formatContent(p)"></p> -->
         </div>
@@ -22,13 +22,41 @@
             ></el-image>
         </div>
         <div class="u-toolbar">
+            <el-button
+                class="u-admin"
+                v-if="!currentUserHadLike"
+                type="text"
+                size="mini"
+                @click="doLike(true)"
+                ><img
+                    class="u-up"
+                    src="../../assets/img/heart_1.svg"
+                    alt=""
+                />点赞<span class="u-like-count">{{
+                    likesFormat(hasLikeCount)
+                }}</span></el-button
+            >
+            <el-button
+                class="u-admin"
+                type="text"
+                size="mini"
+                v-if="currentUserHadLike"
+                @click="doLike(false)"
+                ><img
+                    class="u-up"
+                    src="../../assets/img/heart_2.svg"
+                    alt=""
+                />已赞<span class="u-like-count">{{
+                    likesFormat(hasLikeCount)
+                }}</span></el-button
+            >
             <el-button
                 class="u-admin"
                 v-if="canReply"
                 link
                 icon="ChatLineRound"
                 size="small"
-                @click="showReplyForReplyInput()"
+                @click="showReplyForReplyInput"
                 type="primary"
                 >回复</el-button
             >
@@ -39,9 +67,20 @@
                 icon="Delete"
                 size="small"
                 type="danger"
-                @click="deleteComment()"
+                @click="deleteComment"
                 >删除</el-button
             >
+            <el-button
+                class="u-admin"
+                type="text"
+                size="mini"
+                icon="Delete"
+                v-if="canHide"
+                @click="hideComment"
+                title="拉入黑洞后，仅评论者自己独自可见"
+            >
+                黑洞</el-button
+            >
             <time class="u-date">
                 <i class="Clock"></i>
                 {{ dataFormat(date) }}
@@ -58,13 +97,16 @@ function fillZero(num) {
 }
 export default {
     props: [
-        "commentId",
+    "commentId",
         "content",
         "attachments",
         "date",
         "hasReply",
         "canDelete",
+        "canHide",
         "canReply",
+        "isLike", // 是否已点赞
+        "likes", // 点赞数
         "userHref",
         "replyForUsername",
         "replyForUserId",
@@ -72,6 +114,10 @@ export default {
     data: function () {
         return {
             showInput: false,
+            currentUserHadLike: this.isLike,
+            hasLikeCount: this.likes,
+
+            renderContent: "",
         };
     },
     computed: {
@@ -81,6 +127,14 @@ export default {
             });
         },
     },
+    watch: {
+        content: {
+            handler: function (val) {
+                this.formatContent(val);
+            },
+            immediate: true,
+        },
+    },
     methods: {
         profileLink: function (uid) {
             return authorLink(uid);
@@ -88,10 +142,22 @@ export default {
         showAttachment: function (val) {
             return resolveImagePath(val) + "?x-oss-process=style/comment_thumb";
         },
-        formatContent,
+        async formatContent(str) {
+            this.renderContent = await formatContent(str);
+        },
         getPList(content) {
             return content.split("\n");
         },
+        doLike(setLike) {
+            if (setLike === this.currentUserHadLike) {
+                return;
+            }
+            this.currentUserHadLike = setLike;
+            this.hasLikeCount = setLike
+                ? this.hasLikeCount + 1
+                : this.hasLikeCount - 1;
+            this.$emit("setLikeComment", setLike);
+        },
         deleteComment() {
             this.$confirm("确定删除该评论吗？", "提示", {
                 confirmButtonText: "确定",
@@ -103,6 +169,20 @@ export default {
                 })
                 .catch(() => {});
         },
+        hideComment() {
+            this.$confirm("确定隐藏该评论吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    this.$emit("hide", this.commentId);
+                })
+                .catch(() => {});
+        },
+        likesFormat(count) {
+            return count > 0 ? count : "";
+        },
         dataFormat(str) {
             let d = new Date(str);
             return (

package/src/comment/CommentInputForm.vue

@@ -18,6 +18,12 @@
                    type="pop"
                    :max="6">
                 </Emotion>
+                <quickReply @reply="onQuickReply"></quickReply>
+                <div class="c-comment-secret">
+                    <el-checkbox class="u-secret" v-model="is_secret" border size="small">悄悄话
+                        <el-tooltip class="item" effect="dark" content="勾选悄悄话后仅作者和你可见，并且不可再变更状态" placement="top">
+                            <el-icon><InfoFilled></InfoFilled></el-icon> </el-tooltip></el-checkbox>
+                </div>
             </div>
             <Uploader
                 class="u-uploader"
@@ -42,11 +48,13 @@
 <script>
 import Uploader from "./Upload.vue";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
+import QuickReply from "./QuickReply.vue";
 
 export default {
     components: {
         Uploader,
-        Emotion
+        Emotion,
+        QuickReply
     },
     props: {
         // 用于判定该评论组件是否在底部
@@ -65,7 +73,8 @@ export default {
             newComment: {
                 content: ""
             },
-            inputId: "textarea-top"
+            inputId: "textarea-top",
+            is_secret: false,
         };
     },
     methods: {
@@ -77,6 +86,13 @@ export default {
                 this.attachmentUploadFinish([]);
             }
         },
+        onQuickReply(item) {
+            this.$emit("submit", {
+                content: item,
+                attachmentList: [],
+                is_template: 1,
+            });
+        },
         // 文件上传完成后，进行数据提交
         attachmentUploadFinish(data) {
             this.$emit("submit", {
@@ -127,3 +143,17 @@ export default {
     }
 };
 </script>
+
+<style lang="less">
+.c-comment-secret {
+    margin-left: 15px;
+
+    .u-secret {
+        display: flex;
+        align-items: center;
+        .el-checkbox__inner{
+            display:block;
+        }
+    }
+}
+</style>

package/src/comment/CommentWithReply.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="c-comment-cmt">
-        <div>
+        <div class="c-comment-cmt__author">
             <el-link
                 class="u-name"
                 type="primary"
@@ -9,26 +9,37 @@
                 >{{ username || "人字榜800线无名小侠" }}</el-link
             >
             <span class="u-mark u-top" v-if="item.is_top"
-                ><i class="Download"></i>置顶</span
+                ><el-icon><Download></Download></el-icon>置顶</span
             >
             <span class="u-mark u-star" v-if="item.is_star"
-                ><i class="Star"></i>精华</span
+                ><el-icon><Star></Star></el-icon>精华</span
+            >
+            <span class="u-mark u-secret" v-if="item.is_secret"
+                ><el-icon><Cherry></Cherry></el-icon>悄悄话</span
             >
         </div>
         <CommentContent
-            :date="item.commentDate"
+        :date="item.commentDate"
             :content="item.content"
             :comment-id="item.id"
             :attachments="stringToArray(item.attachments)"
-            :can-delete="power.allow || power.uid == item.userId"
-            :can-set-top="power.is_author && !item.is_top"
-            :can-cancel-top="power.is_author && item.is_top"
-            :can-set-star="!item.is_star && power.group >= 64"
-            :can-cancel-star="item.is_star && power.group >= 64"
+            :can-delete="power.can_del || power.uid == item.userId"
+            :can-set-top="(power.is_author || power.is_editor) && !item.is_top"
+            :can-cancel-top="(power.is_author || power.is_editor) && item.is_top"
+            :can-set-star="!item.is_star && (power.is_author || power.is_editor)"
+            :can-cancel-star="item.is_star &&(power.is_author || power.is_editor)"
+            :can-add-white="!item.is_white && power.article_open_white == 1"
+            :can-remove-white="item.is_white && (power.is_author == 1 || power.is_editor == 1)"
+            :can-hide="(power.is_author == 1 || power.is_editor == 1)"
+            :is-like="item.is_likes == 1"
+            :likes="~~item.likes"
             @addNewReply="addNewReply"
             @deleteComment="deleteComment"
             @setTopComment="setTopComment"
             @setStarComment="setStarComment"
+            @setLikeComment="setLikeComment"
+            @setWhiteComment="setWhiteComment"
+            @hide="hideComment"
         />
         <ReplyList
             :data="replyList"
@@ -38,6 +49,8 @@
             @deleteReply="deleteReply"
             @goto="gotoReplyListIndex"
             @resetReply="resetReply"
+            @setLikeComment="setLikeReply"
+            @hide="hideComment"
         />
     </div>
 </template>
@@ -86,12 +99,24 @@ export default {
         deleteComment() {
             this.$emit("deleteComment", this.item.id);
         },
+        hideComment(){
+            this.$emit("hide", this.item.id);
+        },
         setTopComment(setTop) {
             this.$emit("setTopComment", this.item.id, setTop);
         },
         setStarComment(setStar) {
             this.$emit("setStarComment", this.item.id, setStar);
         },
+        setLikeComment(setLike) {
+            this.$emit("setLikeComment", this.item.id, setLike);
+        },
+        setLikeReply(id, setLike) {
+            this.$emit("setLikeComment", id, setLike);
+        },
+        setWhiteComment( white) {
+            this.$emit("setWhiteComment",  this.item.id, white);
+        },
         addNewReply(data) {
             POST(`${this.baseApi}/comment/${this.item.id}/reply`, null, data)
                 .then(() => {
@@ -147,6 +172,9 @@ export default {
 
 <style lang="less">
 .c-comment-cmt {
+    .u-name{
+        margin-right: 6px;
+    }
     .u-mark {
         font-style: normal;
         font-size: 12px;
@@ -168,5 +196,8 @@ export default {
             margin-right: 2px;
         }
     }
+    .u-secret{
+        background-color:#ff99cc;
+    }
 }
 </style>

package/src/comment/QuickReply.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="c-jx3box-reply">
+        <el-popover
+            :visible-arrow="true"
+            placement="top"
+            ref="quickReply"
+            trigger="click"
+            popper-class="c-jx3box-reply-pop"
+        >
+            <div class="c-jx3box-reply-pop__content">
+                <el-icon class="u-close" @click="closePop"><Close></Close></el-icon>
+                <div class="u-title">快捷回复</div>
+                <div class="m-reply-list">
+                    <div
+                        class="m-reply-list__item"
+                        v-for="(item, index) in replyTemplate"
+                        :key="index"
+                        @click="reply(item)"
+                    >
+                        {{ item }}
+                    </div>
+                </div>
+            </div>
+            <template #reference>
+                <img
+                    class="u-reference"
+                    width="24"
+                    height="24"
+                    src="../../assets/img/comment.svg"
+                    alt="comment"
+                />
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+import replyTemplate from "../../assets/data/reply_template.json";
+export default {
+    name: "QuickReply",
+    data() {
+        return {
+            replyTemplate,
+        };
+    },
+    emits: ["reply"],
+    methods: {
+        // 关闭弹窗
+        closePop() {
+            if (this.$refs.quickReply) {
+                this.$refs.quickReply.doClose();
+            }
+        },
+        reply(item) {
+            this.$emit("reply", item);
+            this.closePop();
+        },
+    }
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/quick-reply.less";
+</style>

package/src/comment/ReplyForReply.vue

@@ -18,12 +18,12 @@
         <el-form-item>
             <div class="c-comment-tools">
                 <el-icon class="u-upload-icon" @click="showUploader = !showUploader"><Picture /></el-icon>
-                <!--<Emotion-->
-                <!--    class="c-comment-emotion"-->
-                <!--    @selected="handleEmotionSelected"-->
-                <!--    type="pop"-->
-                <!--    :max="6"-->
-                <!--&gt;</Emotion>-->
+                <Emotion
+                   class="c-comment-emotion"
+                   @selected="handleEmotionSelected"
+                   type="pop"
+                   :max="6">
+                </Emotion>
             </div>
             <Uploader
                 v-if="showUploader"
@@ -49,7 +49,7 @@
 
 <script>
 import Uploader from "./Upload.vue";
-// import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
+import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
 export default {
     props: ["username", "userHref", "currentId"],
     data: function () {
@@ -62,7 +62,7 @@ export default {
     },
     components: {
         Uploader,
-        // Emotion,
+        Emotion,
     },
     mounted() {
         if (this.currentId) this.inputId = this.currentId;

package/src/comment/ReplyItem.vue

@@ -10,17 +10,22 @@
         />
         <!--评论主体内容-->
         <CommentContentSimple
-            :comment-id="reply.id"
+        :comment-id="reply.id"
             :date="reply.commentDate"
             :content="reply.content"
             :attachments="stringToArray(reply.attachments)"
-            :can-delete="power.allow || power.uid == reply.userId"
+            :can-delete="power.can_del || power.uid == reply.userId"
+            :can-hide="(power.is_author == 1 || power.is_editor == 1)"
             :can-reply="power.uid != reply.userId"
             :user-href="profileLink(reply.replyForUID)"
             :reply-for-username="reply.replyForUsername"
             :reply-for-user-id="reply.replyForUID"
+            :is-like="reply.is_likes == 1"
+            :likes="~~reply.likes"
             @delete="deleteReply"
             @showReplyInput="showReplyForReplyFrom = !showReplyForReplyFrom"
+            @setLikeComment="setLikeComment"
+            @hide="hideReply"
         />
         <!--隐藏起来的回复评论的评论表单-->
         <ReplyForReply
@@ -68,6 +73,12 @@ export default {
         deleteReply(id) {
             this.$emit("deleteReply", id);
         },
+        hideReply(id) {
+            this.$emit("hide", id);
+        },
+        setLikeComment(setLike) {
+            this.$emit("setLikeComment", this.reply.id, setLike);
+        },
         doReply(replyData) {
             (replyData.replyForUID = this.reply.userId),
                 (replyData.replyForCommentId = this.reply.id),

package/src/comment/ReplyList.vue

@@ -1,13 +1,15 @@
 <template>
     <div class="c-comment-replylist" v-if="data.length">
         <reply-item
-            class="c-comment-reply"
+        class="c-comment-reply"
             v-for="reply in data"
             :key="reply.id"
             :reply="reply"
             :power="power"
             @deleteReply="deleteReply"
             @addReply="addReply"
+            @setLikeComment="setLikeComment"
+            @hide="hideReply"
         />
         <!-- 分页 -->
         <el-row v-if="data.length >= 3 || showPager">
@@ -42,7 +44,7 @@ export default {
             showPager: false,
         };
     },
-    emits: ["goto", "resetReply", "deleteReply", "addNewReply"],
+    emits: ["goto", "resetReply", "deleteReply", "addNewReply", "setLikeComment", "hide"],
     methods: {
         showMore() {
             this.showPager = true;
@@ -58,6 +60,12 @@ export default {
         deleteReply(id) {
             this.$emit("deleteReply", id);
         },
+        hideReply(id) {
+            this.$emit("hide", id);
+        },
+        setLikeComment(id, isLike) {
+            this.$emit("setLikeComment", id, isLike);
+        },
         addReply(data) {
             this.$emit("addNewReply", data);
         },

package/src/single/Comment.vue

@@ -2,16 +2,36 @@
     <el-container class="c-comment" v-loading="loading">
         <el-main>
             <CommentInputForm @submit="userSubmitInputForm" />
-            <div class="c-comment-order">
-                <span class="u-label">排序模式：</span>
-                <el-radio-group
-                    v-model="isDesc"
-                    @change="changeOrder"
-                    size="small"
-                >
-                    <el-radio-button label="DESC">最后靠前</el-radio-button>
-                    <el-radio-button label="ASC">最早靠前</el-radio-button>
-                </el-radio-group>
+            <div class="c-comment-panel">
+                <div class="u-order">
+                    <span class="u-label">排序模式：</span>
+                    <el-radio-group
+                        v-model="isDesc"
+                        @change="changeOrder"
+                        size="small"
+                    >
+                        <el-radio-button label="DESC">最后靠前</el-radio-button>
+                        <el-radio-button label="ASC">最早靠前</el-radio-button>
+                    </el-radio-group>
+                </div>
+                <div class="u-op">
+                    <el-switch
+                        class="c-comment-panel-likes"
+                        v-model="orderByLikes"
+                        @change="changeOrderByLikes"
+                        active-text="获赞靠前"
+                    >
+                    </el-switch>
+                    <el-switch
+                        class="c-comment-panel-likes"
+                        v-model="openWhiteList"
+                        @change="changeWhiteList"
+                        v-if="commentPower.is_author || commentPower.is_editor"
+                        active-text="开启过滤"
+                        title="开启过滤后，仅设为显示的评论可被其他人所见"
+                    >
+                    </el-switch>
+                </div>
             </div>
             <template v-if="isNormal">
                 <div
@@ -37,6 +57,9 @@
                         @setStarComment="setStarComment"
                         :user-href="profileLink(item.userId)"
                         :username="item.displayName"
+                        @setWhiteComment="setWhiteComment"
+                        @setLikeComment="setLikeComment"
+                        @hide="hideComment"
                     />
                 </div>
 
@@ -106,6 +129,10 @@ export default {
             this.reloadCommentList(this.pager.index);
             setOrderMode(this.isDesc ? "DESC" : "ASC");
         },
+        changeOrderByLikes() {
+            this.reloadCommentList(this.pager.index);
+            // setOrderMode(this.orderByLikes ? false : true);
+        },
         setTopComment(id, setTop) {
             const action = setTop ? "set" : "cancel";
             PUT(`${this.baseAPI}/comment/${id}/top/${action}`)
@@ -114,6 +141,28 @@ export default {
                 })
                 .catch(() => {});
         },
+        changeWhiteList() {
+            PUT(
+                `${this.baseAPI}/meta/white-list/${
+                    this.openWhiteList ? "open" : "close"
+                }`
+            ).then(()=>{
+                return this.reloadPower()
+            })
+                .then(() => {
+                    this.commentPower.is_white = this.openWhiteList;
+                    this.reloadCommentList(this.pager.index);
+                })
+                .catch(() => {});
+        },
+        setLikeComment(id, isLike) {
+            var action = isLike ? "like" : "unlike";
+            PUT(`${this.baseAPI}/comment/${id}/${action}`)
+                .then(() => {
+                    //  this.reloadCommentList(this.pager.index);
+                })
+                .catch(() => {});
+        },
         setStarComment(id, setStar) {
             const action = setStar ? "set" : "cancel";
             PUT(`${this.baseAPI}/comment/${id}/star/${action}`)
@@ -122,6 +171,15 @@ export default {
                 })
                 .catch(() => {});
         },
+        setWhiteComment(id, setWhite) {
+            // 设置某个评论为精选
+            var action = setWhite ? "add" : "remove";
+            PUT(`${this.baseAPI}/comment/${id}/white-list/${action}`)
+                .then(() => {
+                    this.reloadCommentList(this.pager.index);
+                })
+                .catch(() => {});
+        },
         deleteComment(id) {
             DELETE(`${this.baseAPI}/comment/${id}`)
                 .then(() => {
@@ -136,6 +194,20 @@ export default {
                 })
                 .catch(() => {});
         },
+        hideComment(id) {
+            PUT(`${this.baseAPI}/comment/${id}/hide`)
+                .then(() => {
+                    this.$notify({
+                        title: "",
+                        message: "操作成功!",
+                        type: "success",
+                        duration: 3000,
+                        position: "bottom-right",
+                    });
+                    this.reloadCommentList(this.pager.index);
+                })
+                .catch(() => {});
+        },
         reloadCommentList(index) {
             this.loading = true;
             let orderQuery = {};
@@ -188,6 +260,14 @@ export default {
         showAvatar: function (val) {
             return showAvatar(val, 144);
         },
+        reloadPower(){
+            GET(`${this.baseAPI}/i-am-author`)
+                    .then((power) => {
+                        this.commentPower = power;
+                        this.openWhiteList = power.is_white;
+                    })
+                    .catch(() => {});
+        }
     },
     created() {
         this.baseAPI = `/api/next2/comment/${this.category}/article/${this.id}`;
@@ -323,14 +403,15 @@ export default {
         } */
     }
 }
-.c-comment-order {
+.c-comment-panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     background-color: #fafbfc;
     padding: 8px 10px;
     border-radius: 3px;
     border: 1px solid #eee;
     margin: 10px 0;
-    .flex;
-    align-items: center;
     .u-label {
         color: #666;
         margin-right: 10px;
@@ -343,4 +424,19 @@ export default {
     max-height: 168px;
     overflow: auto;
 }
+.c-comment-panel-likes {
+    margin-left: 10px;
+}
+.c-comment-alert {
+    color: #e6a23c;
+    margin-left: 10px;
+    font-size: 12px;
+}
+@media screen and (max-width: 720px) {
+    .c-comment-panel {
+        .u-op{
+            display: none;
+        }
+    }
+}
 </style>

package/utils/emotion.js

@@ -1,10 +1,21 @@
-import JX3_EMOTION from '@jx3box/jx3box-emotion'
-
-function formatContent(val) {
-    const ins = new JX3_EMOTION(val)
-    return ins.code
+import JX3_EMOTION from "@jx3box/jx3box-emotion";
+function escapeHtml(str) {
+    return str.replace(/[<>"']/g, function (match) {
+        switch (match) {
+            case "<":
+                return "&lt;";
+            case ">":
+                return "&gt;";
+            case '"':
+                return "&quot;";
+            case "'":
+                return "&#39;";
+        }
+    });
 }
-
-export {
-    formatContent
+async function formatContent(val) {
+    const ins = new JX3_EMOTION(escapeHtml(val));
+    return await ins._renderHTML();
 }
+
+export { formatContent };