@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/UploadAlbum.vue

@@ -1,162 +1,233 @@
 <template>
     <div class="c-upload-album">
-        <Upload @insert="updateFileList" text="批量上传图片" />
-        <div class="c-upload-album-list">
-            <draggable v-model="imgList" v-if="imgList && imgList.length">
-                <transition-group>
-                    <div class="u-album-item" v-for="(item,i) in imgList" :key="item.name + item.url">
-                        <img class="u-pic" :src="item.url | showThumbnail" />
+        <el-button type="primary" @click="triggerFileSelect" :loading="uploading">
+            <el-icon><UploadFilled /></el-icon>
+            <span>批量上传图片</span>
+        </el-button>
+        <input ref="fileInput" class="u-hidden-input" type="file" accept="image/*" multiple @change="onFileInputChange" />
+
+        <div
+            class="c-upload-album-list"
+            :class="{ 'is-dragover': isDragover, 'is-uploading': uploading, 'is-empty': !imgList.length }"
+            @click="triggerFileSelect"
+            @dragenter.prevent="onDragEnter"
+            @dragover.prevent="onDragOver"
+            @dragleave.prevent="onDragLeave"
+            @drop.prevent="onDrop"
+        >
+            <draggable v-if="imgList.length" v-model="imgList" item-key="id" class="u-draggable-list">
+                <template #item="{ element, index }">
+                    <div class="u-album-item" @click.stop>
+                        <img class="u-pic" :src="showThumbnail(element.url)" />
                         <i class="u-mask"></i>
-                        <i class="u-op u-preview el-icon-zoom-in" @click="previewHandle(item)"></i>
-                        <i class="u-op u-delete el-icon-delete" @click="deleteHandle(i)"></i>
+                        <span class="u-op u-preview" @click.stop="previewHandle(element)">
+                            <el-icon><ZoomIn /></el-icon>
+                        </span>
+                        <span class="u-op u-delete" @click.stop="deleteHandle(index)">
+                            <el-icon><Delete /></el-icon>
+                        </span>
                     </div>
-                </transition-group>
+                </template>
             </draggable>
-            <div class="u-null" v-else><i class="el-icon-warning-outline"></i> 当前没有任何图片</div>
+            <div v-if="imgList.length" class="u-add-card" @click.stop="triggerFileSelect">
+                <el-icon><Plus /></el-icon>
+            </div>
+            <div v-else class="u-drop-hint is-empty">
+                <el-icon class="u-drop-icon"><UploadFilled /></el-icon>
+                <span>将文件拖到此处，或 <span class="u-drop-link">点击上传</span></span>
+            </div>
         </div>
-        <el-dialog class="c-upload-album-preview" :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt />
+        <el-dialog v-model="dialogVisible" class="c-upload-album-preview">
+            <img width="100%" :src="dialogImageUrl" alt="" />
         </el-dialog>
     </div>
 </template>
 
 <script>
-import Upload from "./Upload.vue";
+import axios from "axios";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
+import { UploadFilled } from "@element-plus/icons-vue";
 import { getThumbnail } from "@jx3box/jx3box-common/js/utils.js";
 import draggable from "vuedraggable";
+const { __cms } = JX3BOX;
+const API = __cms + "api/cms/upload";
+
+const normalizeItem = (item, index = 0) => {
+    if (!item || !item.url) return null;
+    return {
+        ...item,
+        id: item.id || item.uid || `${item.url || "img"}-${item.name || "image"}-${index}`,
+    };
+};
+
+const isSameList = (a = [], b = []) => {
+    if (a.length !== b.length) return false;
+    return a.every((item, index) => {
+        const target = b[index] || {};
+        return item.id === target.id && item.url === target.url && item.name === target.name;
+    });
+};
 
 export default {
-    name: "album",
-    props: ["data"],
-    data: function () {
+    name: "UploadAlbum",
+    components: {
+        draggable,
+        ZoomIn,
+        Delete,
+        Plus,
+        UploadFilled,
+    },
+    props: {
+        modelValue: {
+            type: Array,
+            default: undefined,
+        },
+        data: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+    },
+    emits: ["update:modelValue", "update"],
+    data() {
         return {
-            imgList: this.data || [],
+            imgList: [],
             dialogImageUrl: "",
             dialogVisible: false,
+            isDragover: false,
+            uploading: false,
         };
     },
-    model: {
-        prop: "data", //向上同步数据
-        event: "update",
+    computed: {
+        sourceList() {
+            return this.modelValue !== undefined ? this.modelValue : this.data;
+        },
     },
     watch: {
-        data: {
+        sourceList: {
             immediate: true,
             deep: true,
-            handler: function (newval) {
-                this.imgList = newval || [];
+            handler(newval) {
+                const normalized = (newval || []).map((item, index) => normalizeItem(item, index)).filter(Boolean);
+                if (!isSameList(normalized, this.imgList)) {
+                    this.imgList = normalized;
+                }
             },
         },
         imgList: {
             deep: true,
-            handler: function (newval) {
+            handler(newval) {
                 this.$emit("update", newval);
+                this.$emit("update:modelValue", newval);
             },
         },
     },
-    computed: {},
     methods: {
-        updateFileList: function (data) {
-            let upload_list = data.list;
-            let img_list = [];
-            upload_list.forEach((item) => {
-                if (item.is_img) {
-                    img_list.push({
-                        name: item.name,
-                        url: item.url,
-                    });
+        triggerFileSelect() {
+            this.$refs.fileInput?.click();
+        },
+        onFileInputChange(e) {
+            const files = Array.from(e.target?.files || []);
+            if (e.target) e.target.value = "";
+            this.uploadFiles(files);
+        },
+        onDragEnter() {
+            this.isDragover = true;
+        },
+        onDragOver() {
+            this.isDragover = true;
+        },
+        onDragLeave(e) {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                this.isDragover = false;
+            }
+        },
+        onDrop(e) {
+            this.isDragover = false;
+            const files = Array.from(e.dataTransfer?.files || []);
+            this.uploadFiles(files);
+        },
+        isImageFile(file) {
+            if (!file) return false;
+            if (file.type && file.type.startsWith("image/")) return true;
+            const name = (file.name || "").toLowerCase();
+            return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/.test(name);
+        },
+        async uploadFiles(files = []) {
+            if (!files.length) return;
+
+            const imageFiles = files.filter((file) => this.isImageFile(file));
+            const skipped = files.length - imageFiles.length;
+            if (skipped > 0) {
+                this.$message.warning(`已跳过 ${skipped} 个非图片文件`);
+            }
+            if (!imageFiles.length) return;
+
+            this.uploading = true;
+            try {
+                const uploaded = await Promise.all(imageFiles.map((file, index) => this.uploadSingle(file, index)));
+                const valid = uploaded.filter(Boolean);
+                if (valid.length) {
+                    this.imgList = [...this.imgList, ...valid];
+                    this.$message.success(`上传成功 ${valid.length} 张图片`);
+                }
+            } finally {
+                this.uploading = false;
+            }
+        },
+        async uploadSingle(file, index) {
+            const fdata = new FormData();
+            fdata.append("file", file);
+            try {
+                const res = await axios.post(API, fdata, {
+                    headers: {
+                        "Content-Type": "multipart/form-data",
+                    },
+                    withCredentials: true,
+                    auth: {
+                        username: (localStorage && localStorage.getItem("token")) || "",
+                        password: "cms common request",
+                    },
+                });
+
+                const payload = res.data || {};
+                if (payload.code) {
+                    this.$message.error(payload.msg || "上传失败");
+                    return null;
                 }
-            });
-            this.imgList = img_list;
+
+                const url =
+                    payload.location ||
+                    payload.url ||
+                    (payload.data &&
+                        (Array.isArray(payload.data) ? payload.data[0] : payload.data.url || payload.data.location || payload.data));
+
+                if (!url) return null;
+                return {
+                    id: `${url}-${Date.now()}-${index}`,
+                    name: file.name,
+                    url,
+                };
+            } catch (err) {
+                const message = err?.response?.data?.message || err?.response?.data?.msg || "请求异常";
+                this.$message.error(message);
+                return null;
+            }
         },
-        previewHandle: function (item) {
+        showThumbnail(val) {
+            return getThumbnail(val, 146);
+        },
+        previewHandle(item) {
             this.dialogImageUrl = item.url;
             this.dialogVisible = true;
         },
-        deleteHandle: function (i) {
+        deleteHandle(i) {
             this.imgList.splice(i, 1);
         },
     },
-    filters: {
-        showThumbnail: function (val) {
-            return getThumbnail(val, 146);
-        },
-    },
-    mounted: function () {},
-    components: {
-        draggable,
-        Upload,
-    },
 };
 </script>
 
-<style lang="less">
-.c-upload-album-list {
-    border: 2px dashed #eee;
-    padding: 8px 0 0 8px;
-    margin-top: 20px;
-    .r(4px);
-
-    @h:148px;
-    min-height:@h;
-    .u-null{
-        .x;
-        .fz(12px,@h);
-        color:#999;
-    }
-
-    .u-album-item {
-        .pr;
-        .size(@h);
-        img {
-            .db;
-            .size(100%);
-        }
-        overflow: hidden;
-        background-color: #fff;
-        border: 1px solid #c0ccda;
-        border-radius: 6px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        margin: 0 8px 8px 0;
-        display: inline-block;
-        &:hover {
-            .u-mask,
-            .u-op {
-                .db;
-            }
-        }
-    }
-
-    .u-mask,
-    .u-op {
-        .pa;
-        .none;
-    }
-    .u-op {
-        .pointer;
-    }
-    .u-mask {
-        background-color: rgba(0, 0, 0, 0.5);
-        transition: opacity 0.3s;
-        .lt(0);
-        .size(100%);
-        .none;
-        cursor: move;
-    }
-    .u-delete,
-    .u-preview {
-        .fz(20px);
-        color: #fff;
-        .lt(50%);
-        .size(20px);
-        transform: translate(-50%, -50%);
-    }
-    .u-delete {
-        .ml(20px);
-    }
-    .u-preview {
-        .ml(-20px);
-    }
-}
-</style>
+<style lang="less" src="./assets/css/upload_album.less"></style>

package/{assets → src/assets}/css/article.less

@@ -1,4 +1,5 @@
 // tinymce文章样式
+@import 'var.less';
 
 @import "tinymce/_.less";
 @import "tinymce/a.less";

package/src/assets/css/markdown.less

@@ -0,0 +1,4 @@
+@import 'var.less';
+
+@import 'markdown/markdown-article.less';
+@import 'markdown/markdown-editor.less';

package/{assets → src/assets}/css/module/author.less

@@ -1,3 +1,4 @@
+@import '../var.less';
 .w-author {
     .w-author-wrapper {
         @max-width: 280px;
@@ -22,9 +23,9 @@
         .u-name {
             .lh(2.2);
             .bold;
-            color: @darkblue;
+            color: #222;
             &:hover {
-                color: #f39;
+                color: @primary;
             }
             .nobreak;
         }
@@ -158,7 +159,7 @@
             span {
                 .fz(13px);
             }
-            border-bottom: 1px solid @border;
+            border-bottom: 1px solid #e4e7ed;
         }
 
         .u-teams {

package/{assets → src/assets}/css/module/directory.less

@@ -19,7 +19,7 @@
         padding: 8px 0;
         &:hover {
             // font-weight: 600;
-            color: #0366d6;
+            color: @primary;
         }
         font-size: 12px;
     }
@@ -29,7 +29,10 @@
 
     h1,
     h2,
-    h3,h4,h5,h6 {
+    h3,
+    h4,
+    h5,
+    h6 {
         &::before {
             content: "\e78b";
 
@@ -48,52 +51,39 @@
         }
     }
 
-    // .hasChild {
-    //     font-size: 14px;
-    //     &::before {
-    //         content: "\e784";
-    //     }
-    // }
-
-    // h2,h3,h4,h5,h6{
-    //     margin-left: 20px;
-    // }
-    // .hasChild{
-    //     margin-left: 0;
-    // }
-
-    // h3 + h2,h4 + h3,h5 + h4,h6 + h5{
-    //     margin-left: 0;
-    // }
-
-    .lv2{
-        padding-left:20px;
+    .lv2 {
+        padding-left: 20px;
     }
 
-    .lv3{
-        padding-left:40px;
+    .lv3 {
+        padding-left: 40px;
     }
 
-    .lv0{
+    .lv0 {
         display: none;
     }
-
 }
 
 .c-article-directory-title {
     margin-bottom: 5px;
+    display:flex;
+    justify-content: space-between;
     .c-article-directory-title-label {
         font-weight: 300;
         font-size: 18px;
+        line-height: 18px;
+        display: inline-flex;
+        align-items: center;
+        gap:3px;
         .u-icon{
-            font-size: 20px;
+            font-size: 18px;
         }
     }
-    .c-article-directory-title-skip,.c-article-directory-title-folder{
+    .c-article-directory-title-skip,
+    .c-article-directory-title-folder {
         font-size: 14px;
-        float: right;
         padding: 0 5px;
-        line-height: 25px;
+        line-height: 18px;
         color: darken(#dcdfe6, 5%);
         cursor: pointer;
         &:hover {
@@ -107,7 +97,7 @@
 
 @keyframes focusFade {
     from {
-        background-color: #c3fcff;
+        background-color: #fffd94;
     }
     to {
         background-color: transparent;
@@ -118,6 +108,7 @@
     animation: focusFade 0.5s ease-in-out;
 }
 
+
 .w-directory-anchor{
     .fz(16px);
     .pointer;
@@ -126,4 +117,4 @@
         box-shadow:none !important;
         color:#c00 !important;
     }
-}
+}

package/{assets → src/assets}/css/module/talent.less

@@ -279,7 +279,7 @@
 
         .u-pic {
             &:before {
-                .full;
+                .size(100%);
                 .pa;
                 .lt(0);
                 background-color: rgba(0, 0, 0, 0.6);
@@ -414,7 +414,7 @@
     &.disabled:after {
         content: "";
         .db;
-        .full;
+        .size(100%);
         .pa;
         .lt(0);
         .z(10);

package/{assets → src/assets}/css/resource.less

@@ -1,5 +1,34 @@
+@import "var.less";
+
 .c-resource {
+    .w-dialog,
+    .el-dialog {
+        max-width: 100%;
+        min-width: 290px;
+        max-height: calc(100vh - 15vh - 50px);
+        overflow: auto;
+        margin-top: 10vh;
+        padding: 0;
+
+        .el-dialog__header {
+            padding: 20px 20px 0 20px;
+        }
+
+        .el-dialog__footer {
+            padding:  0 20px 20px 20px;
+        }
+
+        .el-dialog__body {
+            padding-top: 10px;
+            .scrollbar();
+        }
+    }
+
     margin-right: 5px;
+    .el-dialog__header {
+        padding-bottom: 0;
+    }
+
     .u-switch {
         .u-icon {
             .size(14px);
@@ -20,7 +49,9 @@
         .pr;
         .u-mode {
             .pa;
-            .rt(0);
+            .rt(1px, 0);
+            .flex;
+            align-items: center
         }
     }
 
@@ -31,7 +62,7 @@
 
         .u-item {
             .db;
-            border: 2px solid @border-hr;
+            border: 2px solid #e1e4e8;
             background: #fafbfc;
             margin-bottom: 10px;
             padding: 10px 10px 10px 70px;
@@ -199,24 +230,30 @@
         }
     }
 
-    .c-large-dialog .el-dialog {
+    .c-large-dialog.el-dialog {
         .w(60%);
         height: 70%;
+        margin-top: 10vh;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
         .el-dialog__body {
             height: calc(100% - 54px - 70px);
             overflow-y: auto;
             box-sizing: border-box;
             // padding: 10px 20px 30px 20px;
             padding: 0;
+            flex-grow: 1;
         }
     }
     @media screen and (max-width: @notebook) {
-        .c-large-dialog .el-dialog {
+        .c-large-dialog.el-dialog {
             .w(90%);
         }
     }
     @media screen and (max-width: @ipad-y) {
-        .c-large-dialog .el-dialog {
+        .c-large-dialog.el-dialog {
             margin: 0 !important;
             .size(100%);
             max-height: none;
@@ -224,11 +261,17 @@
         }
     }
 
+    .c-resource-content {
+        .flex;
+        flex-direction: column;
+        gap: 20px;
+        padding:  0 20px;
+    }
+
     .m-database-search {
         position: sticky;
         z-index: 100;
         top: 0;
-        padding: 10px 20px 10px 20px;
         background-color: #fff;
         .pr;
 
@@ -243,8 +286,6 @@
     }
 
     .m-database-tabs {
-        // .mt(10px);
-        padding: 10px 20px 20px 20px;
         user-select: none;
         .u-icon {
             .size(20px);
@@ -282,24 +323,19 @@
             background: #fff;
             color: #6843f4;
         }
-        &.el-tabs--card > .el-tabs__header .el-tabs__item {
-            transition: none;
+
+        .u-tab-label {
+            .flex;
+            align-items: center;
+        }
+        .u-tab-icon {
+            .mr(5px);
         }
         .el-tabs__item:hover {
             svg {
                 fill: @primary;
             }
         }
-        .el-tabs__item {
-            background-color: @bg-light;
-            border-bottom: 1px solid @border !important;
-
-            &.is-active {
-                border-bottom: none !important;
-                background-color: #fff;
-                .bold;
-            }
-        }
     }
 
     .m-database-tip {
@@ -314,9 +350,7 @@
     // 加载更多
     .m-archive-more {
         .none;
-        margin: 0 20px 10px 20px;
         box-sizing: border-box;
-        width: calc(100% - 40px);
     }
     .m-archive-more.show {
         .db;