From e5ddf5616a9e2f38731e1a375685f82be2a03283 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 17 Feb 2022 18:48:18 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/QuickEdit.vue |  24 +-
 resources/assets/js/components/TagInput.vue  |   6 +-
 resources/assets/js/pages/manage/file.vue    | 351 +++++++++----------
 3 files changed, 199 insertions(+), 182 deletions(-)

diff --git a/resources/assets/js/components/QuickEdit.vue b/resources/assets/js/components/QuickEdit.vue
index a8d6caee..30f6ad90 100644
--- a/resources/assets/js/components/QuickEdit.vue
+++ b/resources/assets/js/components/QuickEdit.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="quick-edit" :class="[alwaysIcon ? 'quick-always' : '']">
-        <div v-if="isEdit" v-clickoutside="onEnter" class="quick-input">
-            <TagInput v-if="isTag" ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter"/>
-            <Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter"/>
+        <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"/>
+            <Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
             <div v-if="isLoad" class="quick-loading"><Loading/></div>
         </div>
         <template v-else>
@@ -33,6 +33,10 @@ export default {
             type: Boolean,
             default: false
         },
+        clickOutSide: {
+            type: Boolean,
+            default: true
+        },
     },
 
     data() {
@@ -86,6 +90,20 @@ export default {
                 this.isLoad = false;
             })
         },
+
+        onClickOut() {
+            if (!this.clickOutSide) {
+                return;
+            }
+            this.onEnter();
+        },
+
+        onBlur() {
+            if (this.clickOutSide) {
+                return;
+            }
+            this.onEnter();
+        },
     }
 }
 </script>
diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue
index 1ba785a3..a9fa0b6f 100755
--- a/resources/assets/js/components/TagInput.vue
+++ b/resources/assets/js/components/TagInput.vue
@@ -149,12 +149,14 @@
             downEnter(e) {
                 e.preventDefault();
             },
-            onFocus() {
+            onFocus(e) {
                 this.isFocus = true;
+                this.$emit("on-focus", e)
             },
-            onBlur() {
+            onBlur(e) {
                 this.isFocus = false;
                 this.addTag(false, this.content)
+                this.$emit("on-blur", e)
             },
             addTag(e, content) {
 
diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
index 70e64761..5ddaada6 100644
--- a/resources/assets/js/pages/manage/file.vue
+++ b/resources/assets/js/pages/manage/file.vue
@@ -381,7 +381,180 @@ export default {
 
             tableHeight: 500,
             tableMode: $A.getStorageBoolean("fileTableMode"),
-            columns: [],
+            columns: [
+                {
+                    title: this.$L('文件名'),
+                    key: 'name',
+                    minWidth: 200,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        let array = [];
+                        let isCreate = !/^\d+$/.test(row.id);
+                        if (isCreate) {
+                            // 新建
+                            array.push(h('Input', {
+                                props: {
+                                    elementId: 'input_' + row.id,
+                                    value: row.newname,
+                                    autofocus: true,
+                                    disabled: !!row._load,
+                                },
+                                style: {
+                                    width: 'auto'
+                                },
+                                on: {
+                                    'on-change': (event) => {
+                                        row.newname = event.target.value;
+                                    },
+                                    'on-blur': () => {
+                                        const file = this.files.find(({id}) => id == row.id);
+                                        if (file) {
+                                            file.newname = row.newname;
+                                            this.onBlur(file)
+                                        }
+                                    },
+                                    'on-enter': () => {
+                                        const file = this.files.find(({id}) => id == row.id);
+                                        if (file) {
+                                            file.newname = row.newname;
+                                            this.onEnter(file)
+                                        }
+                                    }
+                                }
+                            }))
+                            return h('div', {
+                                class: 'file-nbox'
+                            }, [
+                                h('div', {
+                                    class: `no-dark-mode-before file-name file-icon ${row.type}`,
+                                }, array),
+                            ]);
+                        } else {
+                            // 编辑、查看
+                            array.push(h('QuickEdit', {
+                                props: {
+                                    value: row.name,
+                                    autoEdit: !!row._edit,
+                                    clickOutSide: false,
+                                },
+                                on: {
+                                    'on-edit-change': (b) => {
+                                        const file = this.files.find(({id}) => id == row.id);
+                                        if (file) {
+                                            setTimeout(() => {
+                                                this.setEdit(file.id, b)
+                                            }, 100);
+                                        }
+                                    },
+                                    'on-update': (val, cb) => {
+                                        const file = this.files.find(({id}) => id == row.id);
+                                        if (file) {
+                                            file.newname = val
+                                            this.onEnter(file);
+                                        }
+                                        cb();
+                                    }
+                                }
+                            }, [
+                                h('AutoTip', this.formatName(row))
+                            ]));
+                            //
+                            const iconArray = [];
+                            if (row.share) {
+                                if (row.userid != this.userId) {
+                                    iconArray.push(h('UserAvatar', {
+                                        props: {
+                                            userid: row.userid,
+                                            size: 20
+                                        },
+                                    }))
+                                    if (row.permission == 0) {
+                                        iconArray.push(h('span', {
+                                            class: 'permission',
+                                        }, this.$L('只读')))
+                                    }
+                                } else {
+                                    iconArray.push(h('i', {
+                                        class: 'taskfont',
+                                        domProps: {
+                                            innerHTML: '&#xe757;'
+                                        },
+                                    }))
+                                }
+                            } else if (this.isParentShare) {
+                                iconArray.push(h('UserAvatar', {
+                                    props: {
+                                        userid: row.created_id,
+                                        size: 20
+                                    },
+                                }, [
+                                    row.created_id != row.userid ? h('p', [h('strong', this.$L('成员创建于') + ": " + row.created_at)]) : h('p', this.$L('所有者创建') + ": " + row.created_at)
+                                ]))
+                            }
+                            return h('div', {
+                                class: 'file-nbox'
+                            }, [
+                                h('div', {
+                                    class: `no-dark-mode-before file-name file-icon ${row.type}`,
+                                }, array),
+                                iconArray
+                            ]);
+                        }
+                    }
+                },
+                {
+                    title: this.$L('大小'),
+                    key: 'size',
+                    width: 110,
+                    resizable: true,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        if (row.type == 'folder') {
+                            return h('div', '-')
+                        }
+                        return h('AutoTip', $A.bytesToSize(row.size));
+                    }
+                },
+                {
+                    title: this.$L('类型'),
+                    key: 'type',
+                    width: 110,
+                    resizable: true,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        let type = this.types.find(({value, name}) => value == row.type && name);
+                        if (type) {
+                            return h('AutoTip', type.name);
+                        } else {
+                            return h('div', (row.ext || row.type).replace(/^\S/, s => s.toUpperCase()))
+                        }
+                    }
+                },
+                {
+                    title: this.$L('所有者'),
+                    key: 'userid',
+                    width: 130,
+                    resizable: true,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        return h('UserAvatar', {
+                            props: {
+                                size: 18,
+                                userid: row.userid,
+                                showIcon: false,
+                                showName: true,
+                            }
+                        });
+                    }
+                },
+                {
+                    title: this.$L('最后修改'),
+                    key: 'updated_at',
+                    width: 168,
+                    resizable: true,
+                    sortable: true,
+                },
+            ],
 
             shareShow: false,
             shareInfo: {id: 0, userid: 0, permission: 1},
@@ -540,182 +713,6 @@ export default {
     },
 
     methods: {
-        initLanguage() {
-            this.columns = [
-                {
-                    title: this.$L('文件名'),
-                    key: 'name',
-                    minWidth: 200,
-                    sortable: true,
-                    render: (h, {row}) => {
-                        let array = [];
-                        let isCreate = !/^\d+$/.test(row.id);
-                        if (isCreate) {
-                            // 新建
-                            array.push(h('Input', {
-                                props: {
-                                    elementId: 'input_' + row.id,
-                                    value: row.newname,
-                                    autofocus: true,
-                                    disabled: !!row._load,
-                                },
-                                style: {
-                                    width: 'auto'
-                                },
-                                on: {
-                                    'on-change': (event) => {
-                                        row.newname = event.target.value;
-                                    },
-                                    'on-blur': () => {
-                                        const file = this.files.find(({id}) => id == row.id);
-                                        if (file) {
-                                            file.newname = row.newname;
-                                            this.onBlur(file)
-                                        }
-                                    },
-                                    'on-enter': () => {
-                                        const file = this.files.find(({id}) => id == row.id);
-                                        if (file) {
-                                            file.newname = row.newname;
-                                            this.onEnter(file)
-                                        }
-                                    }
-                                }
-                            }))
-                            return h('div', {
-                                class: 'file-nbox'
-                            }, [
-                                h('div', {
-                                    class: `no-dark-mode-before file-name file-icon ${row.type}`,
-                                }, array),
-                            ]);
-                        } else {
-                            // 编辑、查看
-                            array.push(h('QuickEdit', {
-                                props: {
-                                    value: row.name,
-                                    autoEdit: !!row._edit
-                                },
-                                on: {
-                                    'on-edit-change': (b) => {
-                                        const file = this.files.find(({id}) => id == row.id);
-                                        if (file) {
-                                            setTimeout(() => {
-                                                this.setEdit(file.id, b)
-                                            }, 100);
-                                        }
-                                    },
-                                    'on-update': (val, cb) => {
-                                        const file = this.files.find(({id}) => id == row.id);
-                                        if (file) {
-                                            file.newname = val
-                                            this.onEnter(file);
-                                        }
-                                        cb();
-                                    }
-                                }
-                            }, [
-                                h('AutoTip', this.formatName(row))
-                            ]));
-                            //
-                            const iconArray = [];
-                            if (row.share) {
-                                if (row.userid != this.userId) {
-                                    iconArray.push(h('UserAvatar', {
-                                        props: {
-                                            userid: row.userid,
-                                            size: 20
-                                        },
-                                    }))
-                                    if (row.permission == 0) {
-                                        iconArray.push(h('span', {
-                                            class: 'permission',
-                                        }, this.$L('只读')))
-                                    }
-                                } else {
-                                    iconArray.push(h('i', {
-                                        class: 'taskfont',
-                                        domProps: {
-                                            innerHTML: '&#xe757;'
-                                        },
-                                    }))
-                                }
-                            } else if (this.isParentShare) {
-                                iconArray.push(h('UserAvatar', {
-                                    props: {
-                                        userid: row.created_id,
-                                        size: 20
-                                    },
-                                }, [
-                                    row.created_id != row.userid ? h('p', [h('strong', this.$L('成员创建于') + ": " + row.created_at)]) : h('p', this.$L('所有者创建') + ": " + row.created_at)
-                                ]))
-                            }
-                            return h('div', {
-                                class: 'file-nbox'
-                            }, [
-                                h('div', {
-                                    class: `no-dark-mode-before file-name file-icon ${row.type}`,
-                                }, array),
-                                iconArray
-                            ]);
-                        }
-                    }
-                },
-                {
-                    title: this.$L('大小'),
-                    key: 'size',
-                    width: 110,
-                    resizable: true,
-                    sortable: true,
-                    render: (h, {row}) => {
-                        if (row.type == 'folder') {
-                            return h('div', '-')
-                        }
-                        return h('AutoTip', $A.bytesToSize(row.size));
-                    }
-                },
-                {
-                    title: this.$L('类型'),
-                    key: 'type',
-                    width: 110,
-                    resizable: true,
-                    sortable: true,
-                    render: (h, {row}) => {
-                        let type = this.types.find(({value, name}) => value == row.type && name);
-                        if (type) {
-                            return h('AutoTip', type.name);
-                        } else {
-                            return h('div', (row.ext || row.type).replace(/^\S/, s => s.toUpperCase()))
-                        }
-                    }
-                },
-                {
-                    title: this.$L('所有者'),
-                    key: 'userid',
-                    width: 130,
-                    resizable: true,
-                    sortable: true,
-                    render: (h, {row}) => {
-                        return h('UserAvatar', {
-                            props: {
-                                size: 18,
-                                userid: row.userid,
-                                showIcon: false,
-                                showName: true,
-                            }
-                        });
-                    }
-                },
-                {
-                    title: this.$L('最后修改'),
-                    key: 'updated_at',
-                    width: 168,
-                    resizable: true,
-                    sortable: true,
-                },
-            ]
-        },
-
         formatName(file) {
             let {name, ext} = file;
             if (ext != '') {