perf: 优化文件重命名，支持按esc取消编辑

resources/assets/js/components/QuickEdit.vue

@@ -1,8 +1,20 @@
 <template>
     <div class="quick-edit" :class="[alwaysIcon ? 'quick-always' : '']">
         <div v-if="isEdit" v-clickoutside="onClickOut" class="quick-input">
-            <TagInput v-if="isTag" ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
+            <TagInput
-            <Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
+                v-if="isTag"
+                ref="input"
+                v-model="content"
+                :disabled="isLoad"
+                @on-keyup="onKeyup"
+                @on-blur="onBlur"/>
+            <Input
+                v-else
+                ref="input"
+                v-model="content"
+                :disabled="isLoad"
+                @on-keyup="onKeyup"
+                @on-blur="onBlur"/>
             <div v-if="isLoad" class="quick-loading"><Loading/></div>
         </div>
         <template v-else>
@@ -54,9 +66,6 @@ export default {
     },
 
     watch: {
-        isEdit(val) {
-            this.$emit("on-edit-change", val);
-        },
         autoEdit(val) {
             if (val === true) {
                 setTimeout(this.onEdit, 0)
@@ -65,9 +74,14 @@ export default {
     },
 
     methods: {
+        onEditChange(val) {
+            this.isEdit = val;
+            this.$emit("on-edit-change", val);
+        },
+
         onEdit() {
             this.content = this.value;
-            this.isEdit = true;
+            this.onEditChange(true);
             this.$nextTick(() => {
                 this.$refs.input.focus({
                     cursor: 'all'
@@ -75,9 +89,18 @@ export default {
             })
         },
 
+        onKeyup(e) {
+            if (e.keyCode === 13) {
+                this.onEnter();
+            } else if (e.keyCode === 27) {
+                this.isEdit = false;
+                this.isLoad = false;
+            }
+        },
+
         onEnter() {
             if (this.content == this.value) {
-                this.isEdit = false;
+                this.onEditChange(false);
                 return;
             }
             if (this.isLoad) {
@@ -86,7 +109,7 @@ export default {
             this.isLoad = true;
             this.$emit("input", this.content);
             this.$emit("on-update", this.content, () => {
-                this.isEdit = false;
+                this.onEditChange(false);
                 this.isLoad = false;
             })
         },
@@ -99,7 +122,7 @@ export default {
         },
 
         onBlur() {
-            if (this.clickOutSide) {
+            if (this.clickOutSide || !this.isEdit) {
                 return;
             }
             this.onEnter();

resources/assets/js/components/TagInput.vue

@@ -11,7 +11,7 @@
             :placeholder="tis || placeholderText"
             @keydown.enter="downEnter($event)"
             @keydown.delete="delTag(false)"
-            @keyup="addTag($event, content)"
+            @keyup="onKeyup"
             @focus="onFocus"
             @blur="onBlur"
             :disabled="disabled"
@@ -158,19 +158,22 @@
                 this.addTag(false, this.content)
                 this.$emit("on-blur", e)
             },
+            onKeyup(e) {
+                this.addTag(e, this.content);
+                //
+                this.$emit("on-keyup", e)
+                if (e.keyCode === 13) {
+                    this.$nextTick(() => {
+                        this.$emit("on-enter", e)
+                    })
+                }
+            },
             addTag(e, content) {
-
                 if (e === false || e.keyCode === 13) {
                     if (content.trim() != '' && this.disSource.indexOf(content.trim()) === -1) {
                         this.disSource.push(content.trim());
                     }
                     this.content = '';
-                    //
-                    if (e.keyCode === 13) {
-                        this.$nextTick(() => {
-                            this.$emit("on-enter", e)
-                        })
-                    }
                     return;
                 }
                 if (this.max > 0 && this.disSource.length >= this.max) {

resources/assets/js/pages/manage/file.vue

@@ -87,9 +87,9 @@
                             <li
                                 v-for="item in fileList"
                                 :class="{
-                                shear: shearIds.includes(item.id),
+                                    shear: shearIds.includes(item.id),
-                                highlight: selectIds.includes(item.id),
+                                    highlight: selectIds.includes(item.id),
-                            }"
+                                }"
                                 @contextmenu.prevent.stop="handleRightClick($event, item)"
                                 @click="openFile(item)">
                                 <div class="file-check" :class="{'file-checked':selectIds.includes(item.id)}" @click.stop="dropFile(item, 'select')">
@@ -121,7 +121,7 @@
                                         size="small"
                                         :disabled="!!item._load"
                                         @on-blur="onBlur(item)"
-                                        @on-enter="onEnter(item)"/>
+                                        @on-keyup="onKeyup($event, item)"/>
                                     <div v-if="item._load" class="file-load"><Loading/></div>
                                 </div>
                                 <div v-else class="file-name" :title="item.name">{{formatName(item)}}</div>
@@ -959,7 +959,6 @@ export default {
                     break;
 
                 case 'rename':
-                    this.$set(item, 'newname', item.name);
                     this.setEdit(item.id, true)
                     this.autoBlur(item.id)
                     break;
@@ -1154,9 +1153,21 @@ export default {
         },
 
         onBlur(item) {
+            if (this.files.find(({id, _edit}) => id == item.id && !_edit)) {
+                return;
+            }
             this.onEnter(item);
         },
 
+        onKeyup(e, item) {
+            if (e.keyCode === 13) {
+                this.onEnter(item);
+            } else if (e.keyCode === 27) {
+                this.setLoad(item.id, false)
+                this.setEdit(item.id, false)
+            }
+        },
+
         onEnter(item) {
             let isCreate = !/^\d+$/.test(item.id);
             if (!item.newname) {
@@ -1204,6 +1215,9 @@ export default {
             let item = this.$store.state.files.find(({id}) => id == fileId)
             if (item) {
                 this.$set(item, '_edit', is);
+                if (is) {
+                    this.$set(item, 'newname', item.name);
+                }
             }
         },