perf: 优化图片选择器

resources/assets/js/components/DropdownMenu.vue

@@ -2,15 +2,15 @@
     <EDropdown
         ref="dropdown"
         trigger="click"
-        class="task-operation-dropdown"
+        class="general-operation-dropdown"
         placement="bottom"
         size="small"
         :style="styles"
         @command="onCommand"
         @visible-change="visibleChange">
-        <div ref="icon" class="task-operation-icon"></div>
+        <div ref="icon" class="general-operation-icon"></div>
-        <EDropdownMenu ref="dropdownMenu" slot="dropdown" class="task-operation-more-dropdown">
+        <EDropdownMenu ref="dropdownMenu" slot="dropdown" class="general-operation-more-dropdown menu-dropdown">
-            <li class="task-operation-more-warp small">
+            <li class="general-operation-more-warp small">
                 <ul>
                     <EDropdownItem
                         v-for="(item, key) in list"
@@ -73,8 +73,8 @@ export default {
                 this.scrollHide = typeof data.scrollHide === "boolean" ? data.scrollHide : false;
                 //
                 this.$refs.icon.focus();
-                this.updatePopper();
                 this.show();
+                this.updatePopper();
                 this.setupEventListeners(data.event)
             } else {
                 this.hide()
@@ -103,7 +103,9 @@ export default {
         },
 
         updatePopper() {
-            this.$nextTick(this.$refs.dropdownMenu.updatePopper)
+            setTimeout(() => {
+                this.$refs.dropdownMenu.updatePopper();
+            }, 0);
         },
 
         setupEventListeners(event) {

resources/assets/js/components/ImgUpload.vue

@@ -2,7 +2,7 @@
     <div class="common-img-update">
         <div v-if="type !== 'callback'" class="imgcomp-upload-list" v-for="item in uploadList">
             <template v-if="item.status === 'finished'">
-                <div class="imgcomp-upload-img" v-bind:style="{ 'background-image': 'url(' + backgroundImage(item.thumb) + ')' }"></div>
+                <div @click="handleTouch($event, item)" class="imgcomp-upload-img" v-bind:style="{ 'background-image': 'url(' + backgroundImage(item.thumb) + ')' }"></div>
                 <div class="imgcomp-upload-list-cover">
                     <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                     <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
@@ -13,7 +13,7 @@
             </template>
         </div>
         <div class="add-box" v-bind:class="{ 'callback-add-box': type === 'callback' }">
-            <div class="add-box-icon">
+            <div @click="handleTouch($event, null)" class="add-box-icon">
                 <Icon type="md-add" size="32"></Icon>
             </div>
             <div class="add-box-upload">
@@ -77,21 +77,17 @@
 </template>
 
 <script>
+import {languageList} from "../language";
+
 export default {
     name: 'ImgUpload',
     props: {
-            value: {
+        value: {},
-            },
+        num: {},
-            num: {
+        width: {},
-            },
+        height: {},
-            width: {
+        whcut: {},
-            },
+        type: {},
-            height: {
-            },
-            whcut: {
-            },
-            type: {
-            },
         http: {
             type: Boolean,
             default: false
@@ -213,6 +209,57 @@
             });
             return list;
         },
+        handleTouch(event, item) {
+            if (!this.windowTouch) {
+                return;
+            }
+            const list = [];
+            if (item === null) {
+                const subfix = this.type === 'callback' ? '图片' : '';
+                list.push(...[
+                    {
+                        label: '浏览' + subfix,
+                        value: 'browse'
+                    },
+                    {
+                        label: '上传' + subfix,
+                        value: 'upload'
+                    }
+                ])
+            } else {
+                list.push(...[
+                    {
+                        label: '查看',
+                        value: 'view'
+                    },
+                    {
+                        label: '删除',
+                        value: 'trash'
+                    }
+                ])
+            }
+            this.$store.state.menuOperation = {
+                event,
+                list,
+                scrollHide: true,
+                onUpdate: async (act) => {
+                    switch (act) {
+                        case 'browse':
+                            this.browsePicture();
+                            break;
+                        case 'upload':
+                            this.$refs.upload?.handleClick()
+                            break;
+                        case 'view':
+                            this.handleView(item);
+                            break;
+                        case 'trash':
+                            this.handleRemove(item);
+                            break;
+                    }
+                }
+            }
+        },
         handleView(item) {
             //查看
             this.$store.dispatch("previewImage", item.url)

resources/assets/js/pages/manage/components/TaskOperation.vue

@@ -6,13 +6,13 @@
             :disabled="disabled"
             :size="size"
             :style="styles"
-            class="task-operation-dropdown"
+            class="general-operation-dropdown"
             placement="bottom"
             @command="dropTask"
             @visible-change="visibleChange">
-            <div ref="icon" class="task-operation-icon"></div>
+            <div ref="icon" class="general-operation-icon"></div>
-            <EDropdownMenu ref="dropdownMenu" slot="dropdown" class="task-operation-more-dropdown">
+            <EDropdownMenu ref="dropdownMenu" slot="dropdown" class="general-operation-more-dropdown">
-                <li class="task-operation-more-warp" :class="size">
+                <li class="general-operation-more-warp" :class="size">
                     <ul>
                         <EDropdownItem v-if="!flow" class="load-flow" disabled>
                             <div class="load-flow-warp">

resources/assets/sass/components/img-update.scss

@@ -45,6 +45,9 @@
         left: 0;
         right: 0;
         background: rgba(0, 0, 0, .6);
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
     }
 
     .imgcomp-upload-list-cover i {
@@ -74,7 +77,7 @@
 }
 
 .imgcomp-upload-list:hover .imgcomp-upload-list-cover {
-    display: block;
+    display: flex;
 }
 
 .img-upload-foot {
@@ -111,10 +114,11 @@
     vertical-align: top;
 
     .add-box-icon {
-        i {
+        display: flex;
-            vertical-align: middle;
+        align-items: center;
-            padding-bottom: 2px;
+        justify-content: center;
-        }
+        width: 100%;
+        height: 100%;
     }
 
     .add-box-upload {
@@ -132,8 +136,12 @@
             height: 22px;
             line-height: 22px;
             cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
 
-            .ivu-upload-drag, .ivu-upload-drag:hover {
+            .ivu-upload-drag,
+            .ivu-upload-drag:hover {
                 background: transparent;
                 border: 0;
                 border-radius: 0;
@@ -260,3 +268,17 @@
     background-color: rgba(255, 255, 255, 0.9);
     z-index: 1;
 }
+
+// 移动端不显示
+body.window-touch {
+    .imgcomp-upload-list:hover .imgcomp-upload-list-cover {
+        display: none;
+    }
+    .add-box:hover {
+        border-color: #dddee1;
+
+        .add-box-upload {
+            display: none;
+        }
+    }
+}

resources/assets/sass/pages/components/_.scss

@@ -4,6 +4,7 @@
 @import "dialog-select";
 @import "dialog-wrapper";
 @import "file-content";
+@import "general-operation";
 @import "meeting-manager";
 @import "project-archived";
 @import "project-dialog";
@@ -20,7 +21,6 @@
 @import "task-deleted";
 @import "task-detail";
 @import "task-menu";
-@import "task-operation";
 @import "task-priority";
 @import "task-move";
 @import "team-management";

resources/assets/sass/pages/components/general-operation.scss

@@ -1,4 +1,4 @@
-.task-operation-dropdown {
+.general-operation-dropdown {
     position: absolute;
     top: 0;
     left: 0;
@@ -18,9 +18,9 @@
     }
 }
 
-.task-operation-more-dropdown {
+.general-operation-more-dropdown {
     > li {
-        &.task-operation-more-warp {
+        &.general-operation-more-warp {
             list-style: none;
 
             > ul {
@@ -89,16 +89,19 @@
                                 border-color: rgba($flow-status-start-color, 0.1);
                                 color: $flow-status-start-color;
                             }
+
                             &.progress {
                                 background-color: rgba($flow-status-progress-color, 0.1);
                                 border-color: rgba($flow-status-progress-color, 0.1);
                                 color: $flow-status-progress-color;
                             }
+
                             &.test {
                                 background-color: rgba($flow-status-test-color, 0.1);
                                 border-color: rgba($flow-status-test-color, 0.1);
                                 color: $flow-status-test-color;
                             }
+
                             &.end {
                                 background-color: rgba($flow-status-end-color, 0.1);
                                 border-color: rgba($flow-status-end-color, 0.1);