perf: 页面高度足够时只滚动项目部分

resources/assets/js/pages/manage.vue

@@ -54,7 +54,7 @@
                     <DropdownItem divided name="signout" style="color:#f40">{{$L('退出登录')}}</DropdownItem>
                 </DropdownMenu>
             </Dropdown>
-            <ul class="overlay-y" @scroll="listScroll()">
+            <ul :class="overlayClass" @scroll="handleClickTopOperateOutside">
                 <li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
                     <i class="taskfont">&#xe6fb;</i>
                     <div class="menu-title">{{$L('仪表盘')}}</div>
@@ -73,20 +73,14 @@
                     <i class="taskfont">&#xe6f3;</i>
                     <div class="menu-title">{{$L('文件')}}</div>
                 </li>
-                <li class="menu-project" ref="projectWrapper">
+                <li ref="projectWrapper" class="menu-project">
-                    <ul>
+                    <ul :class="overlayClass" @scroll="handleClickTopOperateOutside">
                         <li
                             v-for="(item, key) in projectLists"
                             :key="key"
-                            :class="classNameRoute('project/' + item.id, openMenu[item.id])"
+                            :class="classNameProject(item)"
                             @click="toggleRoute('project/' + item.id)"
-                            @contextmenu.prevent.stop="handleRightClick($event, item)"
+                            @contextmenu.prevent.stop="handleRightClick($event, item)">
-                            >
-                            <div
-                                :class="{
-                                 top: item.top_at,
-                                 operate: item.id == topOperateItem.id && topOperateVisible
-                             }">
                             <div class="project-h1">
                                 <em @click.stop="toggleOpenMenu(item.id)"></em>
                                 <div class="title">{{item.name}}</div>
@@ -104,7 +98,6 @@
                                     <Progress :percent="item.task_percent" :stroke-width="6" />
                                 </p>
                             </div>
-                            </div>
                         </li>
                     </ul>
                     <Loading v-if="loadIng > 0"/>
@@ -125,7 +118,7 @@
                 </li>
             </ul>
             <div
-                v-if="projectTotal > 50"
+                v-if="projectTotal > 20"
                 class="manage-project-search"
                 :class="{loading:projectKeyLoading > 0}">
                 <Input prefix="ios-search" v-model="projectKeyValue" :placeholder="$L('共' + projectTotal + '个项目，搜索...')" clearable />
@@ -309,6 +302,7 @@ export default {
 
             reportTabs: "my",
             reportUnreadNumber: 0,
+
             topOperateStyles: {},
             topOperateVisible: false,
             topOperateItem: {},
@@ -452,6 +446,13 @@ export default {
             return {
                 maxHeight: (innerHeight - (innerHeight > 900 ? 200 : 70) - 20) + 'px'
             }
+        },
+
+        overlayClass() {
+            return {
+                'overlay-y': true,
+                'overlay-none': this.topOperateVisible === true,
+            }
         }
     },
 
@@ -610,10 +611,20 @@ export default {
             this.visibleMenu = visible
         },
 
-        classNameRoute(path, openMenu) {
+        classNameRoute(path) {
+            return {
+                "active": this.curPath == '/manage/' + path,
+            };
+        },
+
+        classNameProject(item) {
+            let path = 'project/' + item.id;
+            let openMenu = this.openMenu[item.id];
             return {
                 "active": this.curPath == '/manage/' + path,
                 "open-menu": openMenu === true,
+                "top": item.top_at,
+                "operate": item.id == this.topOperateItem.id && this.topOperateVisible
             };
         },
 
@@ -810,9 +821,10 @@ export default {
             }
             document.addEventListener(visibilityChangeEvent, visibilityChangeListener);
         },
+
         handleRightClick(event, item) {
             this.handleClickTopOperateOutside();
-            this.topOperateItem = $A.isJson(item) ? item : {};
+            this.topOperateItem = item;
             this.$nextTick(() => {
                 const projectWrap = this.$refs.projectWrapper;
                 const projectBounding = projectWrap.getBoundingClientRect();
@@ -823,6 +835,7 @@ export default {
                 this.topOperateVisible = true;
             })
         },
+
         handleClickTopOperateOutside() {
             this.topOperateVisible = false;
         },
@@ -835,15 +848,10 @@ export default {
                 },
             }).then(() => {
                 this.$store.dispatch("getProjects").catch(() => {});
-                this.$Modal.remove();
             }).catch(({msg}) => {
                 $A.modalError(msg, 301);
-                this.$Modal.remove();
             });
         },
-        listScroll() {
-            this.topOperateVisible = false;
-        }
     }
 }
 </script>

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

@@ -100,11 +100,14 @@
             flex: 1;
             width: 100%;
             margin-top: 16px;
-            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden !important;
             > li {
+                flex-shrink: 0;
                 display: flex;
                 align-items: center;
-                height: 38px;
+                height: 30px;
                 color: #6b6e72;
                 cursor: pointer;
                 position: relative;
@@ -128,27 +131,35 @@
                     margin-left: 12px;
                     transform: scale(0.9);
                 }
+                &:first-child {
+                    margin-top: 12px;
+                }
+                &.active {
+                    background-color: #ffffff;
+                }
                 &.menu-project {
+                    flex: 1;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                    height: auto;
+                    padding: 10px 0 0;
-                    padding: 14px 0 0;
                     cursor: default;
                     > ul {
                         width: 100%;
+                        overflow: auto;
                         > li {
                             display: flex;
                             flex-direction: column;
-                            margin: 4px auto;
                             list-style: none;
                             cursor: pointer;
+                            margin: 3px auto;
+                            border: 2px solid transparent;
                             .project-h1 {
                                 position: relative;
                                 display: flex;
                                 align-items: center;
                                 justify-content: space-between;
-                                padding: 0 8px 0 30px;
+                                padding: 0 8px 0 28px;
                                 border-radius: 4px;
                                 > em {
                                     position: absolute;
@@ -187,7 +198,7 @@
                             .project-h2 {
                                 display: none;
                                 margin: 16px 4px;
-                                padding: 0 8px 0 26px;
+                                padding: 0 8px 0 24px;
                                 cursor: default;
                                 > p {
                                     display: flex;
@@ -226,11 +237,11 @@
                                     display: block;
                                 }
                             }
-                            .top {
+                            &.top {
                                 background-color: #EEEFF1;
                             }
-                            .operate {
+                            &.operate {
-                                border:1px solid $primary-color;
+                                border-color: $primary-color;
                             }
                         }
                     }
@@ -247,15 +258,12 @@
                         display: flex;
                     }
                 }
-                &.active {
-                    background-color: #ffffff;
-                }
             }
         }
         .manage-project-search {
             width: 80%;
             padding: 0 3px;
-            margin: 12px 0 -2px;
+            margin: 8px 0 -2px;
             border-radius: 12px;
             background-color: #ffffff;
             overflow: hidden;
@@ -338,6 +346,28 @@
     }
 }
 
+@media (max-height: 640px) {
+    .page-manage {
+        .manage-box-menu {
+            > ul {
+                overflow: auto !important;
+                &.overlay-y {
+                    overflow-y: overlay !important;
+                }
+                > li {
+                    &.menu-project {
+                        > ul {
+                            overflow: visible !important;
+                        }
+                    }
+                }
+            }
+            .manage-project-search {
+                margin-top: 12px;
+            }
+        }
+    }
+}
 
 @media (max-width: 768px) {
     .page-manage {