fix(file): 文件页触屏点击残留 hover、移动端不再悬停显示刷新按钮、窄屏搜索框与标题间距过近，列表模式表格高度改为跟随容器

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

@@ -122,7 +122,7 @@
                 @drop.prevent="filePasteDrag($event, 'drag')"
                 @dragover.prevent="fileDragOver(true, $event)"
                 @dragleave.prevent="fileDragOver(false, $event)">
-                <div v-if="tableMode === 'table'" class="file-table" @contextmenu.prevent="handleContextmenu">
+                <div v-if="tableMode === 'table'" class="file-table" v-resize-observer="onTableResize" @contextmenu.prevent="handleContextmenu">
                     <Table
                         :columns="columns"
                         :data="fileList"
@@ -513,6 +513,7 @@ import {sortBy} from "lodash";
 import {isImageFile} from "../../utils/file";
 import DrawerOverlay from "../../components/DrawerOverlay";
 import longpress from "../../directives/longpress";
+import resizeObserver from "../../directives/resize-observer";
 import UserSelect from "../../components/UserSelect.vue";
 import UserAvatarTip from "../../components/UserAvatar/tip.vue";
 import Forwarder from "./components/Forwarder/index.vue";
@@ -526,9 +527,11 @@ const FileObject = {sort: null, mode: null, board: null};
 
 export default {
     components: {WebDavManager, CollaborationFileList, Forwarder, UserAvatarTip, UserSelect, FilePreview, DrawerOverlay, FileContent},
-    directives: {longpress},
+    directives: {longpress, resizeObserver},
     data() {
         return {
+            tableBoxHeight: 0,
+
             webDavShow: false,
             packList: [],
             packShow: false,
@@ -1013,7 +1016,8 @@ export default {
         },
 
         tableHeight() {
-            return this.windowHeight - 150
+            // 跟随容器高度（移动端需扣除安全区域等），未测量到时按窗口估算
+            return this.tableBoxHeight || this.windowHeight - 150
         },
 
         showDownloadZipButton() {
@@ -1121,6 +1125,13 @@ export default {
     },
 
     methods: {
+        onTableResize({height}) {
+            // keep-alive 隐藏时高度为 0，忽略
+            if (height > 0) {
+                this.tableBoxHeight = Math.floor(height)
+            }
+        },
+
         fileBlockIconClasses(item) {
             const classes = ['no-dark-before', 'file-icon'];
             if (item && item.type) {

resources/assets/sass/pages/page-file.scss

@@ -33,9 +33,11 @@
                         font-size: 18px;
                     }
                 }
-                &:hover {
-                    .file-refresh {
-                        display: block;
+                @media (hover: hover) {
+                    &:hover {
+                        .file-refresh {
+                            display: block;
+                        }
                     }
                 }
             }
@@ -334,6 +336,7 @@
             }
             .file-table {
                 flex: 1;
+                height: 0;
                 cursor: default;
                 margin: 16px 32px 32px;
                 .ivu-table {
@@ -554,14 +557,23 @@
                         &.highlight {
                             background-color: #f4f5f7;
                         }
-                        &.operate,
-                        &:hover {
+                        &.operate {
                             background-color: #f4f5f7;
                             .file-menu,
                             .file-check {
                                 opacity: 1;
                             }
                         }
+                        // 触屏不响应 hover：点击入口后 hover 会停留在点击位置，页面切换后误命中该处的 item
+                        @media (hover: hover) {
+                            &:hover {
+                                background-color: #f4f5f7;
+                                .file-menu,
+                                .file-check {
+                                    opacity: 1;
+                                }
+                            }
+                        }
                     }
                 }
                 .file-drag-select {
@@ -803,6 +815,21 @@ body.window-portrait {
         .file-wrapper {
             .file-head {
                 margin: 24px 16px 16px;
+                gap: 22px 16px;
+                .file-actions {
+                    gap: 8px 12px;
+                    .file-search {
+                        flex: 1;
+                        min-width: 0;
+                        max-width: 240px;
+                        .ivu-input-wrapper {
+                            width: 100%;
+                            .ivu-input {
+                                width: 100%;
+                            }
+                        }
+                    }
+                }
             }
             .file-tabs {
                 margin: 0 16px 6px;