@jx3box/jx3box-ui 2.0.27 → 2.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.0.27",
+    "version": "2.0.29",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/bread/DesignTask.vue

@@ -9,10 +9,18 @@
     >
         <el-form :model="form" ref="form" :label-position="isPhone ? 'top' : 'left'" label-width="80px">
             <el-form-item :label="$jx3boxT('jx3boxUi.designTask.formTitle', '标题')">
-                <el-input v-model="form.title" :placeholder="$jx3boxT('jx3boxUi.designTask.titlePlaceholder', '请输入标题')"></el-input>
+                <el-input
+                    v-model="form.title"
+                    :placeholder="$jx3boxT('jx3boxUi.designTask.titlePlaceholder', '请输入标题')"
+                ></el-input>
             </el-form-item>
             <el-form-item :label="$jx3boxT('jx3boxUi.designTask.formType', '类型')">
-                <el-select v-model="form.type" :placeholder="$jx3boxT('jx3boxUi.designTask.typePlaceholder', '请选择类型')" style="width: 100%" filterable>
+                <el-select
+                    v-model="form.type"
+                    :placeholder="$jx3boxT('jx3boxUi.designTask.typePlaceholder', '请选择类型')"
+                    style="width: 100%"
+                    filterable
+                >
                     <el-option v-for="item in config" :key="item.id" :label="item.label" :value="item.name"></el-option>
                 </el-select>
             </el-form-item>
@@ -24,7 +32,10 @@
                 </el-radio-group>
             </el-form-item>
             <el-form-item :label="$jx3boxT('jx3boxUi.designTask.formRemark', '备注')">
-                <el-input v-model="form.remark" :placeholder="$jx3boxT('jx3boxUi.designTask.remarkPlaceholder', '请输入备注')"></el-input>
+                <el-input
+                    v-model="form.remark"
+                    :placeholder="$jx3boxT('jx3boxUi.designTask.remarkPlaceholder', '请输入备注')"
+                ></el-input>
             </el-form-item>
             <el-form-item :label="$jx3boxT('jx3boxUi.designTask.formStar', '星级')" class="m-star-line">
                 <el-rate v-model="form.star" :colors="colors"></el-rate>
@@ -34,18 +45,30 @@
         <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.designTask.recent", "近期推送") }}</el-divider>
         <template v-if="logs && logs.length">
             <el-table :data="logs" border size="small" max-height="300px">
-                <el-table-column :label="$jx3boxT('jx3boxUi.designTask.pushAt', '推送时间')" prop="push_at" align="center">
+                <el-table-column
+                    :label="$jx3boxT('jx3boxUi.designTask.pushAt', '推送时间')"
+                    prop="push_at"
+                    align="center"
+                >
                     <template #default="{ row }">
                         {{ formatTime(row.push_at) }}
                     </template>
                 </el-table-column>
-                <el-table-column :label="$jx3boxT('jx3boxUi.designTask.pusher', '推送人')" prop="pusher.display_name" align="center"></el-table-column>
+                <el-table-column
+                    :label="$jx3boxT('jx3boxUi.designTask.pusher', '推送人')"
+                    prop="pusher.display_name"
+                    align="center"
+                ></el-table-column>
                 <el-table-column :label="$jx3boxT('jx3boxUi.designTask.star', '星级')" prop="star" align="center">
                     <template #default="{ row }">
                         <el-rate v-model="row.star" disabled :colors="colors"></el-rate>
                     </template>
                 </el-table-column>
-                <el-table-column :label="$jx3boxT('jx3boxUi.designTask.remark', '备注')" prop="remark" align="center"></el-table-column>
+                <el-table-column
+                    :label="$jx3boxT('jx3boxUi.designTask.remark', '备注')"
+                    prop="remark"
+                    align="center"
+                ></el-table-column>
             </el-table>
         </template>
         <el-alert
@@ -184,11 +207,6 @@ export default {
     .el-form-item {
         margin-bottom: 12px;
     }
-    .m-star-line {
-        .el-form-item__content {
-            top: 10px;
-        }
-    }
     .u-time {
         color: #c0c4cc;
     }

package/src/bread/MoveToCommunityDialog.vue

@@ -213,11 +213,6 @@ export default {
     .el-form-item {
         margin-bottom: 12px;
     }
-    .m-star-line {
-        .el-form-item__content {
-            top: 10px;
-        }
-    }
     .u-time {
         color: #c0c4cc;
     }

package/src/comment/CommentContent.vue

@@ -1,10 +1,6 @@
 <template>
     <div class="u-cmt">
-        <div
-            class="u-text"
-            v-if="content != ''"
-            v-html="renderContent"
-        ></div>
+        <div class="u-text" v-if="content != ''" v-html="renderContent"></div>
         <div class="u-attachements" v-if="attachments.length">
             <el-image
                 v-for="url in attachments"
@@ -16,47 +12,22 @@
         </div>
         <div class="u-toolbar u-toolbar--primary">
             <div class="u-toolbar-left">
-                <el-button
-                    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.commentContent.like", "点赞") }}<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
+                <el-button 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.commentContent.like", "点赞")
+                    }}<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
                 >
-                <el-button
-                    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.commentContent.liked", "已赞") }}<span class="u-like-count">{{
-                        likesFormat(hasLikeCount)
-                    }}</span></el-button
-                >
-                <el-button
-                    link
-                    size="small"
-                    icon="ChatRound"
-                    @click="showForm = !showForm"
-                    type="primary"
-                    >{{ $jx3boxT("jx3boxUi.commentContent.reply", "回复") }}</el-button
-                >
-                <el-button
-                    v-if="canDelete"
-                    link
-                    icon="Delete"
-                    size="small"
-                    @click="deleteComment()"
-                    type="danger"
-                    >{{ $jx3boxT("jx3boxUi.commentContent.delete", "删除") }}</el-button
+                <el-button 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.commentContent.liked", "已赞")
+                    }}<span class="u-like-count">{{ likesFormat(hasLikeCount) }}</span></el-button
                 >
+                <el-button link size="small" icon="ChatRound" @click="showForm = !showForm" type="primary">{{
+                    $jx3boxT("jx3boxUi.commentContent.reply", "回复")
+                }}</el-button>
+                <el-button v-if="canDelete" link icon="Delete" size="small" @click="deleteComment()" type="danger">{{
+                    $jx3boxT("jx3boxUi.commentContent.delete", "删除")
+                }}</el-button>
                 <el-button
                     link
                     size="small"
@@ -112,13 +83,7 @@
                 </time>
             </div>
             <div class="u-toolbar-right">
-                <el-button
-                    class="u-admin u-filter"
-                    v-if="canAddWhite"
-                    link
-                    size="small"
-                    @click="setWhiteComment(true)"
-                >
+                <el-button class="u-admin u-filter" v-if="canAddWhite" link size="small" @click="setWhiteComment(true)">
                     <img
                         class="u-icon-filter"
                         src="../../assets/img/editor/view.svg"
@@ -140,12 +105,7 @@
                 >
             </div>
         </div>
-        <el-form
-            v-if="showForm"
-            ref="form"
-            :model="newComment"
-            class="c-comment-subbox"
-        >
+        <el-form v-if="showForm" ref="form" :model="newComment" class="c-comment-subbox">
             <el-form-item>
                 <el-input
                     type="textarea"
@@ -157,12 +117,7 @@
             <el-form-item class="c-comment-tool-box">
                 <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>
                 </div>
                 <Uploader
                     v-if="showUploader"
@@ -172,16 +127,12 @@
                 />
             </el-form-item>
             <el-form-item>
-                <el-button
-                    size="small"
-                    type="primary"
-                    @click="submit()"
-                    :disabled="disableSubmitBtn"
-                    >{{ $jx3boxT("jx3boxUi.commentContent.submit", "提交") }}</el-button
-                >
-                <el-button size="small" link @click="showForm = false" type="primary"
-                    >{{ $jx3boxT("jx3boxUi.commentContent.collapse", "收起") }}</el-button
-                >
+                <el-button size="small" type="primary" @click="submit()" :disabled="disableSubmitBtn">{{
+                    $jx3boxT("jx3boxUi.commentContent.submit", "提交")
+                }}</el-button>
+                <el-button size="small" link @click="showForm = false" type="primary">{{
+                    $jx3boxT("jx3boxUi.commentContent.collapse", "收起")
+                }}</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -306,9 +257,7 @@ 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);
         },
         topComment(setTop) {
@@ -411,10 +360,7 @@ 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;
             }
@@ -432,27 +378,25 @@ export default {
 <style lang="less">
 /* src/comment/CommentContent.vue */
 .c-comment-cmt {
-
     //--el-color-primary:@primary;
 
     flex-grow: 1;
     position: relative;
     .u-toolbar {
         font-size: 12px;
-        margin-top:5px;
-        color:@v4tip;
+        margin-top: 5px;
+        color: @v4tip;
         .el-button.is-link {
-            color:@v4tip;
+            color: @v4tip;
             font-weight: normal;
-            &:hover{
-                color:@pink;
+            &:hover {
+                color: @pink;
             }
         }
         // .el-button.is-link.u-admin{
         //     color:orange;
         // }
 
-
         .el-button + .el-button {
             margin-left: 20px;
         }
@@ -490,6 +434,7 @@ export default {
             line-height: 1.715;
             img {
                 vertical-align: -3px;
+                display: inline-block;
             }
             white-space: pre-line;
         }

package/src/comment/CommentInputForm.vue

@@ -16,6 +16,7 @@
                 v-model="newComment.content"
                 :placeholder="$jx3boxT('jx3boxUi.commentInputForm.placeholder', '参与讨论...')"
                 :id="inputId"
+                @paste="handlePaste"
             ></el-input>
             <div class="c-comment-tools">
                 <el-icon class="u-upload-icon" @click="showUploader = !showUploader"><Picture /></el-icon>
@@ -109,6 +110,7 @@ export default {
         attachmentUploadFinish(data) {
             this.$emit("submit", {
                 content: this.newComment.content,
+                is_secret: this.is_secret ? 1 : 0,
                 attachmentList: data,
             });
             this.newComment = {
@@ -149,6 +151,23 @@ export default {
                 this.newComment.content = value;
             }
         },
+        async handlePaste(event) {
+            const clipboardItems = event.clipboardData.items;
+            for (let i = 0; i < clipboardItems.length; i++) {
+                const item = clipboardItems[i];
+                if (item.type.indexOf("image") !== -1) {
+                    // 阻止默认粘贴图片的名字
+                    event.preventDefault();
+                    const blob = item.getAsFile();
+                    const file = new File([blob], new Date().getTime() + "-" + blob.name, { type: blob.type });
+                    if (!this.showUploader) this.showUploader = true;
+                    await this.$nextTick();
+                    if (this.$refs.uploader) {
+                        this.$refs.uploader.addFile(file);
+                    }
+                }
+            }
+        },
     },
 };
 </script>

package/src/comment/CommentWithReply.vue

@@ -260,6 +260,9 @@ export default {
         color: #fff;
         margin-left: 5px;
         cursor: default;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
     }
     .u-top {
         background-color: #6f42c1;

package/src/comment/Upload.vue

@@ -13,6 +13,7 @@
             with-credentials
             :on-exceed="onExceed"
             :on-change="onChange"
+            :on-remove="onRemove"
             :on-success="onSuccess"
             :on-error="onError"
         >
@@ -50,6 +51,7 @@ export default {
             dialogVisible: false,
             fileList: [],
             successList: [],
+            uploadedMap: {},
 
             acceptedExtensions: ["jpg", "jpeg", "png", "gif"],
             maxCount: 5,
@@ -74,27 +76,49 @@ export default {
             });
         },
         onChange(file, fileList) {
-            if (file.status == "ready") {
-                if (file.size > this.maxSize) {
-                    this.$notify({
-                        title: "",
-                        message: this.$jx3boxT(
-                            "jx3boxUi.commentUpload.maxSize",
-                            "单张图片大小不能超过 {size} MB！",
-                            {
-                                size: this.maxSize / 1024 / 1024,
-                            }
-                        ),
-                        type: "error",
-                        duration: 3000,
-                        position: "bottom-right",
-                    });
-                    fileList.pop();
-                } else {
-                    this.fileList = fileList;
-                }
+            this.fileList = fileList;
+            if (file.status !== "ready" || !file.raw) return;
+
+            const ext = (file.name.split(".").pop() || "").toLowerCase();
+            if (!this.acceptedExtensions.includes(ext)) {
+                this.$notify({
+                    title: "",
+                    message: this.$jx3boxT(
+                        "jx3boxUi.commentUpload.onlyTypes",
+                        "仅支持 {types} 格式图片！",
+                        { types: this.acceptedExtensions.join(" / ").toUpperCase() }
+                    ),
+                    type: "error",
+                    duration: 3000,
+                    position: "bottom-right",
+                });
+                this.removeFile(file.uid);
+                return;
+            }
+
+            if (file.size > this.maxSize) {
+                this.$notify({
+                    title: "",
+                    message: this.$jx3boxT(
+                        "jx3boxUi.commentUpload.maxSize",
+                        "单张图片大小不能超过 {size} MB！",
+                        {
+                            size: this.maxSize / 1024 / 1024,
+                        }
+                    ),
+                    type: "error",
+                    duration: 3000,
+                    position: "bottom-right",
+                });
+                this.removeFile(file.uid);
+                return;
             }
         },
+        onRemove(file, fileList) {
+            this.fileList = fileList;
+            if (file?.uid && this.uploadedMap[file.uid]) delete this.uploadedMap[file.uid];
+            this.successList = this.fileList.map((f) => this.uploadedMap[f.uid]).filter(Boolean);
+        },
         upload() {
             if (this.fileList.length > 0) {
                 this.$refs.upload.submit();
@@ -102,12 +126,19 @@ export default {
                 this.$emit("onFinish", []);
             }
         },
-        onSuccess(response) {
-            this.successList = this.successList.concat(response.data);
+        onSuccess(response, file, fileList) {
+            this.fileList = fileList;
+            const url = response?.data?.[0];
+            if (url && file?.uid) {
+                this.uploadedMap[file.uid] = url;
+                file.url = url;
+            }
+            this.successList = this.fileList.map((f) => this.uploadedMap[f.uid]).filter(Boolean);
             if (this.successList.length == this.fileList.length) {
                 this.$emit("onFinish", this.successList || []);
                 this.fileList = [];
                 this.successList = [];
+                this.uploadedMap = {};
             }
         },
         onError() {
@@ -121,6 +152,16 @@ export default {
             this.$emit("onError");
             this.fileList = [];
         },
+        addFile(file) {
+            if (this.$refs.upload && this.$refs.upload.handleStart) {
+                this.$refs.upload.handleStart(file);
+            }
+        },
+        removeFile(uid) {
+            this.fileList = this.fileList.filter((item) => item.uid !== uid);
+            if (uid && this.uploadedMap[uid]) delete this.uploadedMap[uid];
+            this.successList = this.fileList.map((f) => this.uploadedMap[f.uid]).filter(Boolean);
+        },
     },
 };
 </script>

package/src/single/PostHeader.vue

@@ -16,7 +16,9 @@
                 <template v-if="titleExtra">
                     <span class="u-client" :class="'i-client-' + client">{{ showClientLabel(client) }}</span>
                     <span class="u-client u-zlp" v-if="zlp">{{ zlp }}</span>
-                    <span class="u-client i-client-wujie" v-if="is_wujie">{{ $jx3boxT("jx3boxUi.postHeader.wujie", "无界") }}</span>
+                    <span class="u-client i-client-wujie" v-if="is_wujie">{{
+                        $jx3boxT("jx3boxUi.postHeader.wujie", "无界")
+                    }}</span>
                 </template>
             </span>
         </div>
@@ -29,7 +31,9 @@
                     <img svg-inline src="../../assets/img/single/author.svg" />
                 </i>
                 <a class="u-name" :href="author_link" v-if="!anonymous">{{ author_name }}</a>
-                <span class="u-name u-anonymous" v-else>{{ $jx3boxT("jx3boxUi.postHeader.mysterious", "神秘侠士") }}</span>
+                <span class="u-name u-anonymous" v-else>{{
+                    $jx3boxT("jx3boxUi.postHeader.mysterious", "神秘侠士")
+                }}</span>
             </div>
 
             <!-- 自定义字段 -->
@@ -45,7 +49,9 @@
             <div class="u-meta u-sub-block">
                 <em class="u-label">{{ $jx3boxT("jx3boxUi.postHeader.client", "适用客户端") }}</em>
                 <span class="u-value u-client" :class="client">{{ showClientLabel(client) }}</span>
-                <span class="u-value u-client wujie" v-if="is_wujie">{{ $jx3boxT("jx3boxUi.postHeader.wujie", "无界") }}</span>
+                <span class="u-value u-client wujie" v-if="is_wujie">{{
+                    $jx3boxT("jx3boxUi.postHeader.wujie", "无界")
+                }}</span>
             </div>
 
             <!-- 发布日期 -->
@@ -99,7 +105,6 @@ import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { showDate, showTime } from "@jx3box/jx3box-common/js/moment";
 import { editLink, authorLink } from "@jx3box/jx3box-common/js/utils.js";
 import User from "@jx3box/jx3box-common/js/user.js";
-import $ from "jquery";
 import i18nMixin from "../../i18n/mixin";
 const { __clients } = JX3BOX;
 
@@ -170,12 +175,13 @@ export default {
             return this.post?.client || "std";
         },
         is_wujie: function () {
-            return this.post?.is_wujie
+            return this.post?.is_wujie;
         },
     },
     watch: {
         post: {
             deep: true,
+            immediate: true,
             handler: function () {
                 this.countWords();
             },
@@ -187,20 +193,60 @@ export default {
         },
         countWords: function () {
             this.$nextTick(() => {
-                // 需要去除空格 \n \g
-                // eslint-disable-next-line no-useless-escape
-                const text = $(".c-article")
-                    .text()
-                    ?.replace(
-                        /[\s|\n|\r|\t|\g|\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，|\。|\？|\：|\；|\‘|\’|\”|\“|\、|\·|\！|\（|\）|\》|\《|\『|\』]/g,
-                        ""
-                    );
-
-                this.wordCount = text?.length || 0;
+                const target = document.querySelector(".c-article");
+                if (target) {
+                    this._doCount(target);
+                    this._observeTarget(target);
+                } else {
+                    this._observeBody();
+                }
+            });
+        },
+        _doCount: function (target) {
+            // 需要去除空格 \n \g
+            // eslint-disable-next-line no-useless-escape
+            const text = target.textContent?.replace(
+                /[\s|\n|\r|\t|\g|\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，|\。|\？|\：|\；|\‘|\’|\”|\“|\、|\·|\！|\（|\）|\》|\《|\『|\』]/g,
+                ""
+            );
+
+            this.wordCount = text?.length || 0;
+        },
+        _observeTarget: function (target) {
+            if (this.targetObserver) this.targetObserver.disconnect();
+            this.targetObserver = new MutationObserver(() => {
+                this._doCount(target);
+            });
+            this.targetObserver.observe(target, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+        },
+        _observeBody: function () {
+            if (this.bodyObserver) return;
+            this.bodyObserver = new MutationObserver((mutations, observer) => {
+                const target = document.querySelector(".c-article");
+                if (target) {
+                    this._doCount(target);
+                    this._observeTarget(target);
+                    observer.disconnect();
+                    this.bodyObserver = null;
+                }
+            });
+            this.bodyObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
             });
         },
     },
-    mounted: function () {},
+    mounted: function () {
+        this.countWords();
+    },
+    beforeUnmount: function () {
+        if (this.targetObserver) this.targetObserver.disconnect();
+        if (this.bodyObserver) this.bodyObserver.disconnect();
+    },
 };
 </script>
 
@@ -279,7 +325,7 @@ export default {
         // .y(-4px);
         margin-right: 5px;
         color: #111;
-        top:2px;
+        top: 2px;
         .pr;
     }
 }
@@ -300,8 +346,6 @@ export default {
 }
 
 .m-single-info {
-
-
     margin-top: 10px;
     .clearfix;
     .fz(12px, 20px);