@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/comment/CommentContent.vue

@@ -17,59 +17,54 @@
         <div class="u-toolbar u-toolbar--primary">
             <div class="u-toolbar-left">
                 <el-button
-                    class="u-admin"
                     v-if="!currentUserHadLike"
                     link
                     size="small"
                     @click="doLike(true)"
                     ><img
-                        class="u-up"
+                        class="u-up" svg-inline
                         src="../../assets/img/comment/heart_1.svg"
                         alt=""
-                    />点赞<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
+                    />{{ $jx3boxT("jx3boxUi.commentContent.like", "点赞") }}<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
                 >
                 <el-button
-                    class="u-admin"
                     link
                     size="small"
                     v-if="currentUserHadLike"
                     @click="doLike(false)"
                     ><img
-                        class="u-up"
+                        class="u-up" svg-inline
                         src="../../assets/img/comment/heart_2.svg"
                         alt=""
-                    />已赞<span class="u-like-count">{{
+                    />{{ $jx3boxT("jx3boxUi.commentContent.liked", "已赞") }}<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
+                    >{{ $jx3boxT("jx3boxUi.commentContent.reply", "回复") }}</el-button
                 >
                 <el-button
-                    class="u-admin"
                     v-if="canDelete"
                     link
                     icon="Delete"
                     size="small"
                     @click="deleteComment()"
                     type="danger"
-                    >删除</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.delete", "删除") }}</el-button
                 >
                 <el-button
-                    class="u-admin"
                     link
                     size="small"
                     icon="Delete"
                     v-if="canHide"
                     @click="hideComment()"
-                    title="拉入黑洞后，仅评论者自己独自可见"
-                    >黑洞</el-button
+                    :title="$jx3boxT('jx3boxUi.commentContent.hideTip', '拉入黑洞后，仅评论者自己独自可见')"
+                    >{{ $jx3boxT("jx3boxUi.commentContent.hide", "黑洞") }}</el-button
                 >
                 <el-button
                     class="u-admin"
@@ -79,7 +74,7 @@
                     size="small"
                     @click="topComment(true)"
                     type="primary"
-                    >置顶</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.top", "置顶") }}</el-button
                 >
                 <el-button
                     class="u-admin"
@@ -89,7 +84,7 @@
                     size="small"
                     @click="topComment(false)"
                     type="primary"
-                    >取消置顶</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.cancelTop", "取消置顶") }}</el-button
                 >
                 <el-button
                     class="u-admin"
@@ -99,7 +94,7 @@
                     size="small"
                     @click="starComment(true)"
                     type="primary"
-                    >加精</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.star", "加精") }}</el-button
                 >
                 <el-button
                     class="u-admin"
@@ -109,7 +104,7 @@
                     size="small"
                     @click="starComment(false)"
                     type="primary"
-                    >取消加精</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.cancelStar", "取消加精") }}</el-button
                 >
                 <time class="u-date">
                     <i class="Clock"></i>
@@ -127,9 +122,9 @@
                     <img
                         class="u-icon-filter"
                         src="../../assets/img/editor/view.svg"
-                        alt="显示"
+                        :alt="$jx3boxT('jx3boxUi.commentContent.show', '显示')"
                     />
-                    显示</el-button
+                    {{ $jx3boxT("jx3boxUi.commentContent.show", "显示") }}</el-button
                 >
                 <el-button
                     class="u-admin u-filter"
@@ -140,8 +135,8 @@
                     ><img
                         class="u-icon-filter"
                         src="../../assets/img/comment/hide.svg"
-                        alt="隐藏"
-                    />隐藏</el-button
+                        :alt="$jx3boxT('jx3boxUi.commentContent.hidden', '隐藏')"
+                    />{{ $jx3boxT("jx3boxUi.commentContent.hidden", "隐藏") }}</el-button
                 >
             </div>
         </div>
@@ -155,7 +150,7 @@
                 <el-input
                     type="textarea"
                     v-model="newComment.content"
-                    placeholder="参与评论..."
+                    :placeholder="$jx3boxT('jx3boxUi.commentContent.placeholder', '参与评论...')"
                     :id="'id' + inputId"
                 ></el-input>
             </el-form-item>
@@ -182,10 +177,10 @@
                     type="primary"
                     @click="submit()"
                     :disabled="disableSubmitBtn"
-                    >提交</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.submit", "提交") }}</el-button
                 >
                 <el-button size="small" link @click="showForm = false" type="primary"
-                    >收起</el-button
+                    >{{ $jx3boxT("jx3boxUi.commentContent.collapse", "收起") }}</el-button
                 >
             </el-form-item>
         </el-form>
@@ -198,11 +193,13 @@ import * as utilModule from "@jx3box/jx3box-common/js/utils";
 const { resolveImagePath } = utilModule;
 import { formatContent } from "../../utils/emotion";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
+import i18nMixin from "../../i18n/mixin";
 
 function fillZero(num) {
     return num > 9 ? num : `0${num}`;
 }
 export default {
+    mixins: [i18nMixin],
     props: {
         content: {
             type: String,
@@ -324,22 +321,30 @@ export default {
             this.$emit("setWhiteComment", white);
         },
         deleteComment() {
-            this.$confirm("确定删除该评论吗？", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
+            this.$confirm(
+                this.$jx3boxT("jx3boxUi.commentContent.confirmDelete", "确定删除该评论吗？"),
+                this.$jx3boxT("jx3boxUi.common.tip", "提示"),
+                {
+                    confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                    cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                    type: "warning",
+                }
+            )
                 .then(() => {
                     this.$emit("deleteComment");
                 })
                 .catch(() => {});
         },
         hideComment() {
-            this.$confirm("确定隐藏该评论吗？", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
+            this.$confirm(
+                this.$jx3boxT("jx3boxUi.commentContent.confirmHide", "确定隐藏该评论吗？"),
+                this.$jx3boxT("jx3boxUi.common.tip", "提示"),
+                {
+                    confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                    cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                    type: "warning",
+                }
+            )
                 .then(() => {
                     this.$emit("hide", this.commentId);
                 })
@@ -426,10 +431,25 @@ export default {
 
 <style lang="less">
 .c-comment-cmt {
+
+    --el-color-primary:@primary;
+
     flex-grow: 1;
     position: relative;
     .u-toolbar {
         font-size: 12px;
+        margin-top:5px;
+        color:var(--el-color-primary);
+        .el-button.is-link {
+            color: var(--el-color-primary);
+            &:hover{
+                color:@pink;
+            }
+        }
+        // .el-button.is-link.u-admin{
+        //     color:orange;
+        // }
+
 
         .el-button + .el-button {
             margin-left: 20px;
@@ -462,7 +482,7 @@ export default {
         }
     }
     .u-cmt {
-        padding: 5px 0 10px 0;
+        padding: 10px 0;
         position: relative;
         .u-text {
             line-height: 1.715;
@@ -485,8 +505,8 @@ export default {
         width: 12px;
         height: 12px;
         position: relative;
-        top: 1px;
-        margin-right: 5px;
+        // top: 1px;
+        margin-right: 4px;
     }
     .u-like-count {
         margin-left: 3px;

package/src/comment/CommentContentSimple.vue

@@ -2,14 +2,12 @@
     <div class="u-reply">
         <div class="u-reply-content">
             <span class="u-reply-label" v-if="replyForUserId != 0">
-                回复
-                <el-link type="primary" target="_blank" :href="userHref"
-                    >@{{ replyForUsername }}</el-link
-                >
+                {{ $jx3boxT("jx3boxUi.commentContentSimple.reply", "回复") }}
+                <el-link type="primary" target="_blank" :href="userHref">@{{ replyForUsername }}</el-link>
                 :
             </span>
             <div class="u-reply-text" v-html="renderContent"></div>
-             <!--<div class="u-reply-text" v-html="content"></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>
         <div class="u-attachements" v-if="attachments.length">
@@ -22,33 +20,15 @@
             ></el-image>
         </div>
         <div class="u-toolbar">
-            <el-button
-                class="u-admin"
-                v-if="!currentUserHadLike"
-                link
-                size="small"
-                @click="doLike(true)"
-                ><img
-                    class="u-up"
-                    src="../../assets/img/comment/heart_1.svg"
-                    alt=""
-                />点赞<span class="u-like-count">{{
-                    likesFormat(hasLikeCount)
-                }}</span></el-button
+            <el-button class="u-admin" v-if="!currentUserHadLike" link size="small" @click="doLike(true)"
+                ><img class="u-up" svg-inline src="../../assets/img/comment/heart_1.svg" alt=""/>{{
+                    $jx3boxT("jx3boxUi.commentContentSimple.like", "点赞")
+                }}<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
             >
-            <el-button
-                class="u-admin"
-                link
-                size="small"
-                v-if="currentUserHadLike"
-                @click="doLike(false)"
-                ><img
-                    class="u-up"
-                    src="../../assets/img/comment/heart_2.svg"
-                    alt=""
-                />已赞<span class="u-like-count">{{
-                    likesFormat(hasLikeCount)
-                }}</span></el-button
+            <el-button class="u-admin" link size="small" v-if="currentUserHadLike" @click="doLike(false)"
+                ><img class="u-up" svg-inline src="../../assets/img/comment/heart_2.svg" alt="" />{{
+                    $jx3boxT("jx3boxUi.commentContentSimple.liked", "已赞")
+                }}<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
             >
             <el-button
                 class="u-admin"
@@ -58,7 +38,7 @@
                 size="small"
                 @click="showReplyForReplyInput"
                 type="primary"
-                >回复</el-button
+                >{{ $jx3boxT("jx3boxUi.commentContentSimple.reply", "回复") }}</el-button
             >
             <el-button
                 class="u-admin"
@@ -68,7 +48,7 @@
                 size="small"
                 type="danger"
                 @click="deleteComment"
-                >删除</el-button
+                >{{ $jx3boxT("jx3boxUi.commentContentSimple.delete", "删除") }}</el-button
             >
             <el-button
                 class="u-admin"
@@ -77,9 +57,9 @@
                 icon="Delete"
                 v-if="canHide"
                 @click="hideComment"
-                title="拉入黑洞后，仅评论者自己独自可见"
+                :title="$jx3boxT('jx3boxUi.commentContentSimple.hideTip', '拉入黑洞后，仅评论者自己独自可见')"
             >
-                黑洞</el-button
+                {{ $jx3boxT("jx3boxUi.commentContentSimple.hide", "黑洞") }}</el-button
             >
             <time class="u-date">
                 <i class="Clock"></i>
@@ -92,10 +72,12 @@
 <script>
 import { resolveImagePath, authorLink } from "@jx3box/jx3box-common/js/utils";
 import { formatContent } from "../../utils/emotion";
+import i18nMixin from "../../i18n/mixin";
 function fillZero(num) {
     return num > 9 ? num : `0${num}`;
 }
 export default {
+    mixins: [i18nMixin],
     props: {
         commentId: {
             type: [Number, String],
@@ -192,28 +174,34 @@ export default {
                 return;
             }
             this.currentUserHadLike = setLike;
-            this.hasLikeCount = setLike
-                ? this.hasLikeCount + 1
-                : this.hasLikeCount - 1;
+            this.hasLikeCount = setLike ? this.hasLikeCount + 1 : this.hasLikeCount - 1;
             this.$emit("setLikeComment", setLike);
         },
         deleteComment() {
-            this.$confirm("确定删除该评论吗？", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
+            this.$confirm(
+                this.$jx3boxT("jx3boxUi.commentContentSimple.confirmDelete", "确定删除该评论吗？"),
+                this.$jx3boxT("jx3boxUi.common.tip", "提示"),
+                {
+                    confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                    cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                    type: "warning",
+                }
+            )
                 .then(() => {
                     this.$emit("delete", this.commentId);
                 })
                 .catch(() => {});
         },
         hideComment() {
-            this.$confirm("确定隐藏该评论吗？", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
+            this.$confirm(
+                this.$jx3boxT("jx3boxUi.commentContentSimple.confirmHide", "确定隐藏该评论吗？"),
+                this.$jx3boxT("jx3boxUi.common.tip", "提示"),
+                {
+                    confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                    cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                    type: "warning",
+                }
+            )
                 .then(() => {
                     this.$emit("hide", this.commentId);
                 })
@@ -258,22 +246,32 @@ export default {
 </script>
 
 <style lang="less">
-.u-reply-content {
-    div,
-    p {
-        padding: 0;
-        margin: 0;
-        line-height: 1.75;
-        font-size: 14px;
-        img {
-            vertical-align: -3px;
+.c-comment-reply {
+    .u-reply-content {
+        div,
+        p {
+            padding: 0;
+            margin: 0;
+            line-height: 1.75;
+            font-size: 14px;
+            img {
+                vertical-align: -3px;
+            }
+        }
+    }
+    .u-reply-text {
+        white-space: pre-line;
+    }
+    .u-attachements {
+        margin-top: 10px;
+    }
+    .u-reply-label{
+        font-size: 13px;
+        margin-right: 5px;
+        .el-link {
+            font-size: 13px;
+            padding: 0;
         }
     }
-}
-.u-reply-text {
-    white-space: pre-line;
-}
-.u-attachements {
-    margin-top: 10px;
 }
 </style>

package/src/comment/CommentInputForm.vue

@@ -1,7 +1,11 @@
 <template>
     <el-form ref="form" :model="newComment" class="c-comment-box">
         <div class="u-mask">
-            参与评论，需先进行<a href="/dashboard/auth" target="_blank" class="u-link">账号认证</a>。
+            {{ $jx3boxT("jx3boxUi.commentInputForm.authMaskPrefix", "参与评论，需先进行")
+            }}<a href="/dashboard/auth" target="_blank" class="u-link">{{
+                $jx3boxT("jx3boxUi.commentInputForm.authLink", "账号认证")
+            }}</a
+            >{{ $jx3boxT("jx3boxUi.commentInputForm.authMaskSuffix", "。") }}
         </div>
         <el-form-item>
             <el-input
@@ -10,22 +14,29 @@
                 maxlength="300"
                 show-word-limit
                 v-model="newComment.content"
-                placeholder="参与讨论..."
+                :placeholder="$jx3boxT('jx3boxUi.commentInputForm.placeholder', '参与讨论...')"
                 :id="inputId"
             ></el-input>
             <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">
-                </Emotion>
+                <Emotion class="c-comment-emotion" @selected="handleEmotionSelected" 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>
+                    <el-checkbox class="u-secret" v-model="is_secret" border size="small"
+                        >{{ $jx3boxT("jx3boxUi.commentInputForm.secret", "悄悄话") }}
+                        <el-tooltip
+                            class="item"
+                            effect="dark"
+                            :content="
+                                $jx3boxT(
+                                    'jx3boxUi.commentInputForm.secretTip',
+                                    '勾选悄悄话后仅作者和你可见，并且不可再变更状态'
+                                )
+                            "
+                            placement="top"
+                        >
+                            <el-icon><InfoFilled></InfoFilled></el-icon> </el-tooltip
+                    ></el-checkbox>
                 </div>
             </div>
             <Uploader
@@ -36,13 +47,9 @@
                 v-if="showUploader"
             />
             <div class="u-toolbar">
-                <el-button
-                    type="primary"
-                    @click="onSubmit"
-                    class="u-publish"
-                    :disabled="disableSubmitBtn"
-                    >发表评论</el-button
-                >
+                <el-button type="primary" @click="onSubmit" class="u-publish" :disabled="disableSubmitBtn">{{
+                    $jx3boxT("jx3boxUi.commentInputForm.publish", "发表评论")
+                }}</el-button>
             </div>
         </el-form-item>
     </el-form>
@@ -52,29 +59,31 @@
 import Uploader from "./Upload.vue";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
 import QuickReply from "./QuickReply.vue";
+import i18nMixin from "../../i18n/mixin";
 
 export default {
+    mixins: [i18nMixin],
     components: {
         Uploader,
         Emotion,
-        QuickReply
+        QuickReply,
     },
     props: {
         // 用于判定该评论组件是否在底部
         isBottom: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     mounted() {
         if (this.isBottom) this.inputId = "textarea-bottom";
     },
-    data: function() {
+    data: function () {
         return {
             showUploader: false,
             disableSubmitBtn: false,
             newComment: {
-                content: ""
+                content: "",
             },
             inputId: "textarea-top",
             is_secret: false,
@@ -100,10 +109,10 @@ export default {
         attachmentUploadFinish(data) {
             this.$emit("submit", {
                 content: this.newComment.content,
-                attachmentList: data
+                attachmentList: data,
             });
             this.newComment = {
-                content: ""
+                content: "",
             };
             this.showUploader = false;
 
@@ -122,7 +131,7 @@ export default {
          */
         async insertVariable(emotionVal) {
             const myField = document.querySelector(`#${this.inputId}`);
-            const value = emotionVal.key
+            const value = emotionVal.key;
             if (myField.selectionStart || myField.selectionStart === 0) {
                 let startPos = myField.selectionStart;
                 let endPos = myField.selectionEnd;
@@ -135,15 +144,12 @@ export default {
                 await this.$nextTick();
 
                 myField.focus();
-                myField.setSelectionRange(
-                    endPos + value.length,
-                    endPos + value.length
-                );
+                myField.setSelectionRange(endPos + value.length, endPos + value.length);
             } else {
                 this.newComment.content = value;
             }
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -154,8 +160,13 @@ export default {
     .u-secret {
         display: flex;
         align-items: center;
-        .el-checkbox__inner{
-            display:block;
+        .el-checkbox__inner {
+            display: block;
+        }
+        .el-checkbox__label {
+            display: flex;
+            align-items: center;
+            gap: 3px;
         }
     }
 }

package/src/comment/CommentWithReply.vue

@@ -12,16 +12,16 @@
             <div class="u-flex-1">
                 <div class="c-comment-cmt__author">
                     <el-link class="u-name" type="primary" target="_blank" :href="userHref">{{
-                        username || "人字榜800线无名小侠"
+                        username || $jx3boxT("jx3boxUi.commentWithReply.defaultName", "人字榜800线无名小侠")
                     }}</el-link>
                     <span class="u-mark u-top" v-if="item.is_top"
-                        ><el-icon><Download></Download></el-icon>置顶</span
+                        ><el-icon><Download></Download></el-icon>{{ $jx3boxT("jx3boxUi.commentWithReply.top", "置顶") }}</span
                     >
                     <span class="u-mark u-star" v-if="item.is_star"
-                        ><el-icon><Star></Star></el-icon>精华</span
+                        ><el-icon><Star></Star></el-icon>{{ $jx3boxT("jx3boxUi.commentWithReply.star", "精华") }}</span
                     >
                     <span class="u-mark u-secret" v-if="item.is_secret"
-                        ><el-icon><Cherry></Cherry></el-icon>悄悄话</span
+                        ><el-icon><Cherry></Cherry></el-icon>{{ $jx3boxT("jx3boxUi.commentWithReply.secret", "悄悄话") }}</span
                     >
                 </div>
                 <CommentContent
@@ -71,9 +71,11 @@ import { POST, DELETE, GET } from "../../service/comment";
 import CommentAvatar from "../comment/Avatar.vue";
 import { getDecoration } from "../../service/cms";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
 const { __imgPath } = JX3BOX;
 const DECORATION_KEY = "decoration_comment_";
 export default {
+    mixins: [i18nMixin],
     props: {
         item: {
             type: Object,
@@ -195,7 +197,7 @@ export default {
                 .then(() => {
                     this.$notify({
                         title: "",
-                        message: "评论成功!",
+                        message: this.$jx3boxT("jx3boxUi.commentWithReply.commentSuccess", "评论成功!"),
                         type: "success",
                         duration: 3000,
                         position: "bottom-right",
@@ -210,7 +212,7 @@ export default {
                 .then(() => {
                     this.$notify({
                         title: "",
-                        message: "删除成功!",
+                        message: this.$jx3boxT("jx3boxUi.commentWithReply.deleteSuccess", "删除成功!"),
                         type: "success",
                         duration: 3000,
                         position: "bottom-right",
@@ -245,6 +247,7 @@ export default {
 .c-comment-cmt {
     .u-name {
         margin-right: 6px;
+        font-size: 13px;
     }
     .u-mark {
         font-style: normal;