feat: 更新评论功能，添加账号认证提示及相关样式

Author: Kaviilee

package.json

@@ -28,9 +28,9 @@
         "root": true
     },
     "dependencies": {
-        "@jx3box/jx3box-comment-ui": "^2.0.7",
+        "@jx3box/jx3box-comment-ui": "^2.0.8",
         "@jx3box/jx3box-common": "^8.7.4",
-        "@jx3box/jx3box-common-ui": "^9.5.14",
+        "@jx3box/jx3box-common-ui": "^9.5.15",
         "@jx3box/jx3box-data": "^3.9.2",
         "@jx3box/jx3box-editor": "^2.2.41",
         "@jx3box/jx3box-emotion": "^1.2.14",

src/components/community/ReplyForReply.vue

@@ -1,5 +1,8 @@
 <template>
-    <el-form ref="form" class="c-comment-subbox m-comment-editor">
+    <el-form ref="form" class="c-comment-subbox m-comment-editor" :class="{'m-comment-mask': commentStrict}">
+        <div class="u-mask">
+            参与评论，需先进行<a href="/dashboard/auth" class="u-link">账号认证</a>。
+        </div>
         <div class="u-subbox-label">
             回复
             <el-link type="primary" target="_blank" :href="userHref">＠{{ username }}</el-link>
@@ -29,7 +32,7 @@
 // import Uploader from "./upload.vue";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion.vue";
 export default {
-    props: ["username", "userHref", "currentId"],
+    props: ["username", "userHref", "currentId", "commentStrict"],
     data: function () {
         return {
             content: "",
@@ -120,5 +123,29 @@ export default {
         margin: 0 10px 0 0;
         vertical-align: middle;
     }
+    .pr;
+
+    .u-mask {
+        .pa;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.8);
+        z-index: 10;
+        display: none;
+        text-align: center;
+        align-content: center;
+    }
+
+    .u-link {
+        color: @primary;
+    }
+}
+.m-comment-mask {
+    .pr;
+    .u-mask {
+        .db;
+    }
 }
 </style>

src/components/community/comment_editor.vue

@@ -1,5 +1,8 @@
 <template>
     <el-form ref="form" :model="newComment" class="c-comment-box m-comment-reply">
+        <div class="u-mask">
+            参与评论，需先进行<a href="/dashboard/auth" class="u-link">账号认证</a>。
+        </div>
         <el-form-item>
             <el-input
                 rows="6"
@@ -301,6 +304,25 @@ export default {
         }
         .size(180px,42px);
     }
+
+    .pr;
+
+    .u-mask {
+        .pa;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.8);
+        z-index: 10;
+        display: none;
+        text-align: center;
+        align-content: center;
+    }
+
+    .u-link {
+        color: @primary;
+    }
 }
 @media screen and (max-width: @phone) {
     .u-comment-editor.el-textarea {

src/components/community/comment_item.vue

@@ -57,6 +57,7 @@
                     :user-href="authorLink(userInfo.id)"
                     @hideForm="showReplyForReplyFrom = false"
                     @doReply="doReply"
+                    :commentStrict="commentStrict"
                 />
             </div>
         </div>
@@ -79,7 +80,7 @@ const DECORATION_KEY = "decoration_comment_";
 
 export default {
     name: "CommentItem",
-    props: ["post"],
+    props: ["post", "commentStrict"],
     inject: ["getTopicData", "getReplyData", "getCommentList"],
     components: {
         ReplyForReply,

src/components/community/reply_item.vue

@@ -180,6 +180,7 @@
                     :user-href="authorLink(userId)"
                     @hideForm="showReplyForReplyFrom = false"
                     @doReply="doReply"
+                    :commentStrict="commentStrict"
                 />
             </div>
 
@@ -196,7 +197,7 @@
             </div>
             <!-- 评论列表 -->
             <div v-if="!isMaster && commentList.length" class="m-comment-list">
-                <CommentItem v-for="item in commentList" :key="item.id" :post="item" />
+                <CommentItem v-for="item in commentList" :key="item.id" :post="item" :commonStrict="commentStrict" />
             </div>
 
             <!-- 分页 -->
@@ -238,7 +239,7 @@ import { getHistorySummary } from "@/service/pay";
 export default {
     name: "ReplyItem",
     inject: ["getTopicData", "getReplyList", "onReplyTopic"],
-    props: ["isMaster", "post", "isAuthor", "nullTip"],
+    props: ["isMaster", "post", "isAuthor", "nullTip", "commentStrict"],
     components: {
         DeleteButton,
         ForwardButton,

src/views/CommunitySingle.vue

@@ -76,6 +76,7 @@
                         :post="item"
                         :is-master="false"
                         :is-author="isAuthor"
+                        :comment-strict="comment_strict"
                     />
                 </div>
             </div>
@@ -109,7 +110,7 @@
                 </div>
                 <div class="u-editor">
                     <el-divider content-position="left">回帖</el-divider>
-                    <CommentEditor @submit="onReplyTopic" v-if="!isDisabledComment" />
+                    <CommentEditor @submit="onReplyTopic" v-if="!isDisabledComment" :class="{ 'c-comment-mask': comment_strict }" />
                     <el-alert :show-close="false" center v-else class="m-disabled-comment-tip"
                         >作者已关闭回帖功能</el-alert
                     >
@@ -135,7 +136,7 @@
         ></boxCoinRecords>
 
         <el-dialog :visible.sync="showComment" title="快捷回复" :width="isPhone ? '95%' : ''">
-            <CommentEditor @submit="onReplyTopic"></CommentEditor>
+            <CommentEditor @submit="onReplyTopic" :class="{ 'c-comment-mask': comment_strict }"></CommentEditor>
         </el-dialog>
 
         <go-to-top-or-bottom />
@@ -165,6 +166,7 @@ import renderJx3Element from "@jx3box/jx3box-editor/assets/js/jx3_element";
 import Author from "@jx3box/jx3box-editor/src/components/Author.vue";
 import { __visibleMap } from "@/utils/config";
 import { postReadHistory } from "@jx3box/jx3box-common/js/stat";
+import {getConfig} from "@jx3box/jx3box-common/js/api_misc";
 
 const appKey = "community";
 
@@ -215,6 +217,7 @@ export default {
             // 打赏相关 end
 
             showComment: false,
+            comment_strict: false,
 
             collection_data: "",
 
@@ -292,6 +295,12 @@ export default {
             });
         });
 
+        getConfig({
+            key: "comment_strict"
+        }).then((res) => {
+            this.comment_strict = res.data.data.val == 1;
+        });
+
         // 打赏
         bus.on("onThx", (data) => {
             this.postType = data.postType;
@@ -580,6 +589,13 @@ export default {
     .z(2000);
 }
 
+.c-comment-mask {
+    .pr;
+    .u-mask {
+        display: block;
+    }
+}
+
 @media screen and (max-width: @phone) {
     .m-single-thx {
         zoom: 0.8;