@jx3box/jx3box-ui 2.0.26 → 2.0.28

package/assets/css/bread/breadcrumb.less

@@ -5,7 +5,8 @@
     .z(499);
     .w(100%);
     .h(@bread-height);
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
     padding: 10px;
     box-sizing: border-box;
     .lh(28px);

package/assets/css/common/right-msg.less

@@ -2,7 +2,7 @@
 .c-sidebar-right-msg {
     @aiconh: 22px;
 
-    border: 1px solid @primary;
+    border: 1px solid @v4primary;
     margin: 15px 15px 5px 15px;
     padding: 10px 10px 10px 30px;
     .r(6px);
@@ -15,7 +15,7 @@
         .size(16px);
         svg {
             .size(16px);
-            fill: @primary;
+            fill: @v4primary;
         }
         .pa;
         .lt(10px, 50%);

package/package.json

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

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/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/filters/tagBy.vue

@@ -123,7 +123,7 @@ export default {
         gap: 2px;
         .pointer;
         &.on {
-            color: @primary;
+            color: @v4primary;
         }
         &:hover {
             color: @pink;