@jx3box/jx3box-ui 0.0.1

package/src/comment/CommentContentSimple.vue

@@ -0,0 +1,240 @@
+<template>
+    <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
+                >
+                :
+            </span>
+            <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>
+        <div class="u-attachements" v-if="attachments.length">
+            <el-image
+                v-for="url in attachments"
+                :key="url"
+                :src="showAttachment(url)"
+                :preview-src-list="[showPreview(url)]"
+                lazy
+            ></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"
+                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"
+                v-if="canReply"
+                link
+                icon="ChatLineRound"
+                size="small"
+                @click="showReplyForReplyInput"
+                type="primary"
+                >回复</el-button
+            >
+            <el-button
+                class="u-admin"
+                v-if="canDelete"
+                link
+                icon="Delete"
+                size="small"
+                type="danger"
+                @click="deleteComment"
+                >删除</el-button
+            >
+            <el-button
+                class="u-admin"
+                link
+                size="small"
+                icon="Delete"
+                v-if="canHide"
+                @click="hideComment"
+                title="拉入黑洞后，仅评论者自己独自可见"
+            >
+                黑洞</el-button
+            >
+            <time class="u-date">
+                <i class="Clock"></i>
+                {{ dataFormat(date) }}
+            </time>
+        </div>
+    </div>
+</template>
+
+<script>
+import { resolveImagePath, authorLink } from "@jx3box/jx3box-common/js/utils";
+import { formatContent } from "../../utils/emotion";
+function fillZero(num) {
+    return num > 9 ? num : `0${num}`;
+}
+export default {
+    props: [
+    "commentId",
+        "content",
+        "attachments",
+        "date",
+        "hasReply",
+        "canDelete",
+        "canHide",
+        "canReply",
+        "isLike", // 是否已点赞
+        "likes", // 点赞数
+        "userHref",
+        "replyForUsername",
+        "replyForUserId",
+    ],
+    data: function () {
+        return {
+            showInput: false,
+            currentUserHadLike: this.isLike,
+            hasLikeCount: this.likes,
+
+            renderContent: "",
+        };
+    },
+    computed: {
+        _attachments: function () {
+            return this.attachments.map((val) => {
+                return resolveImagePath(val);
+            });
+        },
+    },
+    watch: {
+        content: {
+            handler: function (val) {
+                this.formatContent(val);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        profileLink: function (uid) {
+            return authorLink(uid);
+        },
+        showAttachment: function (val) {
+            return resolveImagePath(val) + "?x-oss-process=style/comment_thumb";
+        },
+        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: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    this.$emit("delete", this.commentId);
+                })
+                .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 (
+                d.getFullYear() +
+                "-" +
+                fillZero(d.getMonth() + 1) +
+                "-" +
+                fillZero(d.getDate()) +
+                " " +
+                fillZero(d.getHours()) +
+                ":" +
+                fillZero(d.getMinutes()) +
+                ":" +
+                fillZero(d.getSeconds())
+            );
+        },
+        showReplyForReplyInput() {
+            this.$emit("showReplyInput");
+        },
+        previewImg(i) {
+            this.$hevueImgPreview({
+                multiple: true,
+                nowImgIndex: i,
+                imgList: this._attachments,
+                controlBar: false,
+                clickMaskCLose: true,
+            });
+        },
+        showPreview: function (val) {
+            return resolveImagePath(val);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.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;
+}
+</style>

package/src/comment/CommentInputForm.vue

@@ -0,0 +1,182 @@
+<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>。
+        </div>
+        <el-form-item>
+            <el-input
+                :rows="3"
+                type="textarea"
+                maxlength="300"
+                show-word-limit
+                v-model="newComment.content"
+                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>
+                <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"
+                ref="uploader"
+                @onFinish="attachmentUploadFinish"
+                @onError="attachmentUploadError"
+                v-if="showUploader"
+            />
+            <div class="u-toolbar">
+                <el-button
+                    type="primary"
+                    @click="onSubmit"
+                    class="u-publish"
+                    :disabled="disableSubmitBtn"
+                    >发表评论</el-button
+                >
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<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,
+        QuickReply
+    },
+    props: {
+        // 用于判定该评论组件是否在底部
+        isBottom: {
+            type: Boolean,
+            default: false
+        }
+    },
+    mounted() {
+        if (this.isBottom) this.inputId = "textarea-bottom";
+    },
+    data: function() {
+        return {
+            showUploader: false,
+            disableSubmitBtn: false,
+            newComment: {
+                content: ""
+            },
+            inputId: "textarea-top",
+            is_secret: false,
+        };
+    },
+    methods: {
+        onSubmit() {
+            this.disableSubmitBtn = true;
+            if (this.$refs.uploader) {
+                this.$refs.uploader.upload();
+            } else {
+                this.attachmentUploadFinish([]);
+            }
+        },
+        onQuickReply(item) {
+            this.$emit("submit", {
+                content: item,
+                attachmentList: [],
+                is_template: 1,
+            });
+        },
+        // 文件上传完成后，进行数据提交
+        attachmentUploadFinish(data) {
+            this.$emit("submit", {
+                content: this.newComment.content,
+                attachmentList: data
+            });
+            this.newComment = {
+                content: ""
+            };
+            this.showUploader = false;
+
+            this.disableSubmitBtn = false;
+        },
+        attachmentUploadError() {
+            this.disableSubmitBtn = false;
+        },
+        // 处理表情
+        handleEmotionSelected(key) {
+            this.insertVariable(key);
+        },
+        /**
+         * add emotion to textarea
+         * @parma {string} emotionVal emotion key
+         */
+        async insertVariable(emotionVal) {
+            const myField = document.querySelector(`#${this.inputId}`);
+            const value = emotionVal.key
+            if (myField.selectionStart || myField.selectionStart === 0) {
+                let startPos = myField.selectionStart;
+                let endPos = myField.selectionEnd;
+
+                this.newComment.content =
+                    myField.value.substring(0, startPos) +
+                    value +
+                    myField.value.substring(endPos, myField.value.length);
+
+                await this.$nextTick();
+
+                myField.focus();
+                myField.setSelectionRange(
+                    endPos + value.length,
+                    endPos + value.length
+                );
+            } else {
+                this.newComment.content = value;
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less">
+.c-comment-secret {
+    margin-left: 15px;
+
+    .u-secret {
+        display: flex;
+        align-items: center;
+        .el-checkbox__inner{
+            display:block;
+        }
+    }
+}
+.c-comment-box {
+    .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;
+    }
+}
+</style>

package/src/comment/CommentWithReply.vue

@@ -0,0 +1,261 @@
+<template>
+    <div class="c-comment-cmt">
+        <div class="c-comment-cmt__box" :style="decorationStyles">
+            <CommentAvatar
+                :user-avatar="showAvatar(item.avatar)"
+                :user-href="profileLink(item.userId)"
+                :username="item.displayName"
+                :avatarFrame="item.user_avatar_frame"
+                :withFrame="true"
+                :avatarSize="48"
+            />
+            <div class="u-flex-1">
+                <div class="c-comment-cmt__author">
+                    <el-link class="u-name" type="primary" target="_blank" :href="userHref">{{
+                        username || "人字榜800线无名小侠"
+                    }}</el-link>
+                    <span class="u-mark u-top" v-if="item.is_top"
+                        ><el-icon><Download></Download></el-icon>置顶</span
+                    >
+                    <span class="u-mark u-star" v-if="item.is_star"
+                        ><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"
+                    :content="item.content"
+                    :comment-id="item.id"
+                    :attachments="stringToArray(item.attachments)"
+                    :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"
+                />
+            </div>
+        </div>
+        <ReplyList
+            :data="replyList"
+            :pager="pager"
+            :power="power"
+            @addNewReply="addNewReply"
+            @deleteReply="deleteReply"
+            @goto="gotoReplyListIndex"
+            @resetReply="resetReply"
+            @setLikeComment="setLikeReply"
+            @hide="hideComment"
+        />
+    </div>
+</template>
+
+<script>
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+import CommentContent from "./CommentContent.vue";
+import ReplyList from "./ReplyList.vue";
+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";
+const { __imgPath } = JX3BOX;
+const DECORATION_KEY = "decoration_comment_";
+export default {
+    props: ["item", "baseApi", "power", "user-href", "username"],
+    components: {
+        CommentContent,
+        ReplyList,
+        CommentAvatar,
+    },
+    emits: ["deleteComment", "setTopComment", "setStarComment", "addNewReply", "deleteReply", "goto", "resetReply"],
+    data: function () {
+        return {
+            replyList: [],
+            pager: {
+                index: 1,
+                pageSize: 10,
+                pageTotal: 1,
+                total: 0,
+            },
+            decoration: null,
+        };
+    },
+    computed: {
+        uid() {
+            return this.item.userId;
+        },
+        decorationStyles() {
+            return this.decoration
+                ? {
+                      backgroundImage: `url(${this.decoration})`,
+                      borderRadius: "8px",
+                  }
+                : null;
+        },
+    },
+    created() {
+        this.replyList = this.item.reply || [];
+        this.getDecoration();
+    },
+    methods: {
+        setDecoration(decoration) {
+            this.decoration = __imgPath + `decoration/images/${decoration.val}/comment.png`;
+        },
+        getDecoration() {
+            let decoration_local = sessionStorage.getItem(DECORATION_KEY + this.uid);
+            if (decoration_local) {
+                //解析本地缓存
+                let decoration_parse = JSON.parse(decoration_local);
+                if (decoration_parse) {
+                    this.setDecoration(decoration_parse);
+                    this.decoration = __imgPath + `decoration/images/${decoration_parse.val}/comment.png`;
+                    return;
+                }
+            }
+            getDecoration({ using: 1, user_id: this.uid, type: "comment" }).then((res) => {
+                let decorationList = res.data.data;
+                //筛选个人装扮
+                let decoration = decorationList.find((item) => item.type == "comment");
+                if (decoration) {
+                    this.decoration = __imgPath + `decoration/images/${decoration.val}/comment.png`;
+                    sessionStorage.setItem(DECORATION_KEY + this.uid, JSON.stringify(decoration));
+                    return;
+                }
+            });
+        },
+        profileLink: function (uid) {
+            return authorLink(uid);
+        },
+        showAvatar: function (val) {
+            return showAvatar(val, 144);
+        },
+        stringToArray: function (str) {
+            if (!str) {
+                return [];
+            }
+            return JSON.parse(str);
+        },
+        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(() => {
+                    this.$notify({
+                        title: "",
+                        message: "评论成功!",
+                        type: "success",
+                        duration: 3000,
+                        position: "bottom-right",
+                    });
+
+                    this.loadReplyList(this.pager.index);
+                })
+                .catch(() => {});
+        },
+        deleteReply(id) {
+            DELETE(`${this.baseApi}/comment/${id}`)
+                .then(() => {
+                    this.$notify({
+                        title: "",
+                        message: "删除成功!",
+                        type: "success",
+                        duration: 3000,
+                        position: "bottom-right",
+                    });
+                    this.loadReplyList(this.pager.index);
+                })
+                .catch(() => {});
+        },
+        gotoReplyListIndex(index) {
+            this.loadReplyList(index, 6);
+        },
+        loadReplyList(index, pageSize) {
+            GET(`${this.baseApi}/comment/${this.item.id}/reply/page/${index}?pageSize=${pageSize}`)
+                .then((resp) => {
+                    if (index == 1 && pageSize == 3) {
+                        // eslint-disable-next-line vue/no-mutating-props
+                        this.item.reply = resp.data || [];
+                    }
+                    this.replyList = resp.data || [];
+                    this.pager = resp.page;
+                })
+                .catch(() => {});
+        },
+        resetReply() {
+            this.loadReplyList(1, 3);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-comment-cmt {
+    .u-name {
+        margin-right: 6px;
+    }
+    .u-mark {
+        font-style: normal;
+        font-size: 12px;
+        padding: 1px 5px 2px 5px;
+        border-radius: 2px;
+        color: #fff;
+        margin-left: 5px;
+        cursor: default;
+    }
+    .u-top {
+        background-color: #6f42c1;
+        i {
+            transform: rotate(180deg);
+        }
+    }
+    .u-star {
+        background-color: #f39;
+        i {
+            margin-right: 2px;
+        }
+    }
+    .u-secret {
+        background-color: #ff99cc;
+    }
+}
+.c-comment-cmt__box {
+    display: flex;
+    padding-top: 5px;
+    background-size: cover;
+    .u-flex-1 {
+        flex: 1;
+    }
+}
+</style>