From 9cfc736ba97126a2f89381155f9497342d3fefb3 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 9 Mar 2023 04:01:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=96=87=E4=BB=B6=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=A4=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/pages/manage/file.vue  | 86 +++++++++++-----------
 resources/assets/sass/pages/page-file.scss | 20 +++--
 2 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
index 09ea28dfc..e9a1840a0 100644
--- a/resources/assets/js/pages/manage/file.vue
+++ b/resources/assets/js/pages/manage/file.vue
@@ -93,49 +93,51 @@
                     </div>
                     <div v-else class="file-list" @contextmenu.prevent="handleContextmenu">
                         <ul>
-                            <li
-                                v-for="item in fileList"
-                                :class="{
-                                    shear: shearIds.includes(item.id),
-                                    highlight: selectIds.includes(item.id),
-                                    operate: contextMenuVisible && item.id === contextMenuItem.id,
-                                }"
-                                :data-id="item.id"
-                                v-longpress="handleLongpress"
-                                @click="dropFile(item, 'openCheckMenu')">
-                                <div class="file-check" :class="{'file-checked':selectIds.includes(item.id)}" @click.stop="dropFile(item, 'select')">
-                                    <Checkbox :value="selectIds.includes(item.id)"/>
+                            <li v-for="item in fileList">
+                                <div
+                                    class="file-item"
+                                    :class="{
+                                        shear: shearIds.includes(item.id),
+                                        highlight: selectIds.includes(item.id),
+                                        operate: contextMenuVisible && item.id === contextMenuItem.id,
+                                    }"
+                                    :data-id="item.id"
+                                    v-longpress="handleLongpress"
+                                    @click="dropFile(item, 'openCheckMenu')">
+                                    <div class="file-check" :class="{'file-checked':selectIds.includes(item.id)}" @click.stop="dropFile(item, 'select')">
+                                        <Checkbox :value="selectIds.includes(item.id)"/>
+                                    </div>
+                                    <div class="file-menu" @click.stop="handleRightClick($event, item)">
+                                        <Icon type="ios-more" />
+                                    </div>
+                                    <div :class="`no-dark-before file-icon ${item.type}${item.share ? ' share' : ''}`">
+                                        <template v-if="item.share">
+                                            <UserAvatar v-if="item.userid != userId" :userid="item.userid" class="share-avatar" :size="20">
+                                                <p>{{$L('共享权限')}}: {{$L(item.permission == 1 ? '读/写' : '只读')}}</p>
+                                            </UserAvatar>
+                                            <div v-else class="share-icon no-dark-content">
+                                                <i class="taskfont">&#xe757;</i>
+                                            </div>
+                                        </template>
+                                        <template v-else-if="isParentShare">
+                                            <UserAvatar :userid="item.created_id" class="share-avatar" :size="20">
+                                                <p v-if="item.created_id != item.userid"><strong>{{$L('成员创建于')}}: {{item.created_at}}</strong></p>
+                                                <p v-else>{{$L('所有者创建于')}}: {{item.created_at}}</p>
+                                            </UserAvatar>
+                                        </template>
+                                    </div>
+                                    <div v-if="item._edit" class="file-input">
+                                        <Input
+                                            :ref="'input_' + item.id"
+                                            v-model="item.newname"
+                                            size="small"
+                                            :disabled="!!item._load"
+                                            @on-blur="onBlur(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">{{$A.getFileName(item)}}</div>
                                 </div>
-                                <div class="file-menu" @click.stop="handleRightClick($event, item)">
-                                    <Icon type="ios-more" />
-                                </div>
-                                <div :class="`no-dark-before file-icon ${item.type}${item.share ? ' share' : ''}`">
-                                    <template v-if="item.share">
-                                        <UserAvatar v-if="item.userid != userId" :userid="item.userid" class="share-avatar" :size="20">
-                                            <p>{{$L('共享权限')}}: {{$L(item.permission == 1 ? '读/写' : '只读')}}</p>
-                                        </UserAvatar>
-                                        <div v-else class="share-icon no-dark-content">
-                                            <i class="taskfont">&#xe757;</i>
-                                        </div>
-                                    </template>
-                                    <template v-else-if="isParentShare">
-                                        <UserAvatar :userid="item.created_id" class="share-avatar" :size="20">
-                                            <p v-if="item.created_id != item.userid"><strong>{{$L('成员创建于')}}: {{item.created_at}}</strong></p>
-                                            <p v-else>{{$L('所有者创建于')}}: {{item.created_at}}</p>
-                                        </UserAvatar>
-                                    </template>
-                                </div>
-                                <div v-if="item._edit" class="file-input">
-                                    <Input
-                                        :ref="'input_' + item.id"
-                                        v-model="item.newname"
-                                        size="small"
-                                        :disabled="!!item._load"
-                                        @on-blur="onBlur(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">{{$A.getFileName(item)}}</div>
                             </li>
                         </ul>
                     </div>
diff --git a/resources/assets/sass/pages/page-file.scss b/resources/assets/sass/pages/page-file.scss
index 230cb4145..2651b0409 100644
--- a/resources/assets/sass/pages/page-file.scss
+++ b/resources/assets/sass/pages/page-file.scss
@@ -347,11 +347,14 @@
                     display: grid;
                     justify-content: space-between;
                     grid-template-columns: repeat(auto-fill, 100px);
-                    grid-gap: 12px;
+                    row-gap: 2px;
+                    column-gap: 12px;
                     > li {
                         list-style: none;
                         width: 100px;
-                        height: 110px;
+                        height: 124px;
+                    }
+                    .file-item {
                         position: relative;
                         border-radius: 5px;
                         display: flex;
@@ -382,16 +385,18 @@
                         .file-name {
                             display: block;
                             width: 100%;
-                            height: 20px;
-                            line-height: 20px;
+                            line-height: 16px;
                             color: $primary-text-color;
                             font-size: 12px;
                             text-align: center;
-                            margin-bottom: 5px;
+                            margin: 11px 0 5px;
                             padding: 0 6px;
-                            overflow: hidden;
-                            white-space: nowrap;
+                            word-break: break-all;
                             text-overflow: ellipsis;
+                            overflow: hidden;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 2;
+                            -webkit-box-orient: vertical;
                         }
                         .file-check {
                             opacity: 0;
@@ -421,6 +426,7 @@
                             }
                         }
                         .file-icon {
+                            flex-shrink: 0;
                             display: inline-block;
                             width: 64px;
                             height: 64px;