优化移动端

resources/assets/js/components/Mobile/Back.vue

@@ -3,10 +3,12 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
     name: "MobileBack",
     props: {
-        disabled: {
+        showTabbar: {
             type: Boolean,
             default: false
         },
@@ -37,16 +39,17 @@ export default {
     },
 
     computed: {
+        ...mapState(['cacheDrawerOverlay']),
+
         style() {
             return {
                 top: this.y + 'px',
-                left: !this.disabled && this.x > 30 && this.show ? 0 : '-50px',
+                left: this.x > 30 && this.show ? 0 : '-50px',
             }
         },
     },
 
     methods: {
-        // 获取坐标
         getXY(event) {
             let touch = event.touches[0]
             this.x = touch.clientX
@@ -55,19 +58,40 @@ export default {
         touchstart(event) {
             this.getXY(event)
             // 判断是否是边缘滑动
-            this.show = !this.disabled && this.x < 30;
+            this.show = this.canBack() && this.x < 30;
         },
         touchmove(event) {
             this.getXY(event)
         },
         touchend() {
             // 判断停止时的位置偏移
-            if (this.x > 90 && this.show) {
+            if (this.x > 90) {
-                this.goBack();
+                this.onBack();
             }
             this.x = 0
             this.show = false
         },
+        canBack() {
+            if (!this.showTabbar) {
+                return true;
+            }
+            if (this.$Modal.visibles().length > 0) {
+                return true;
+            }
+            return this.cacheDrawerOverlay.length > 0;
+        },
+        onBack() {
+            if (this.$Modal.removeLast()) {
+                return;
+            }
+            if (this.cacheDrawerOverlay.length > 0) {
+                this.cacheDrawerOverlay[this.cacheDrawerOverlay.length - 1].close();
+                return;
+            }
+            if (this.show) {
+                this.goBack();
+            }
+        }
     },
 };
 </script>

resources/assets/js/pages/manage.vue

@@ -355,7 +355,7 @@
 
         <!--移动端选项卡-->
         <MobileTabbar v-if="showMobileTabbar"/>
-        <MobileBack :disabled="showMobileTabbar"/>
+        <MobileBack :showTabbar="showMobileTabbar"/>
     </div>
 </template>
 

resources/assets/js/pages/manage/components/ProjectPanel.vue

@@ -4,6 +4,9 @@
         <div class="project-head">
             <div class="project-titbox">
                 <div class="project-title">
+                    <div class="project-back" @click="goBack">
+                        <i class="taskfont">&#xe72d;</i>
+                    </div>
                     <h1>{{projectData.name}}</h1>
                     <label v-if="projectData.top_at" class="top-text">{{$L('置顶')}}</label>
                     <div v-if="loading" class="project-load"><Loading/></div>

resources/assets/sass/components/mobile.scss

@@ -4,9 +4,9 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background-color: #f3f6fe;
+    background-color: #f8f8f8;
     box-shadow: 0 0 2px rgba(28, 34, 43, 0.15);
-    z-index: 98;
+    z-index: 9998;
     > ul {
         display: flex;
         align-items: center;
@@ -47,7 +47,7 @@
     width: 500px;
     height: 500px;
     background-color: rgba(0, 0, 0, 0.1);
-    z-index: 99;
+    z-index: 9999;
     border-radius: 50%;
     transform: translate(-460px, -50%);
     transition: left 0.2s;

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -826,9 +826,10 @@
 @media (max-width: 768px) {
     .dialog-wrapper {
         .dialog-nav {
-            height: 60px;
+            height: 52px;
             padding: 0;
             justify-content: center;
+            background-color: #f8f8f8;
 
             &.completed {
                 &:after {
@@ -846,7 +847,7 @@
                 bottom: 0;
                 right: 0;
                 margin: 0;
-                width: 60px;
+                width: 52px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -859,7 +860,7 @@
                 }
             }
             .dialog-block {
-                margin: 0 60px;
+                margin: 0 52px;
                 justify-content: center;
                 .dialog-avatar {
                     display: none;
@@ -879,8 +880,16 @@
             padding: 0 14px;
         }
         .dialog-footer {
-            padding: 0 20px;
+            background-color: #f8f8f8;
-            margin-bottom: 16px;
+            padding: 8px 10px;
+            margin-bottom: 0;
+            .dialog-input {
+                .chat-input-wrapper {
+                    padding-left: 6px;
+                    padding-right: 8px;
+                    background-color: #ffffff;
+                }
+            }
         }
     }
 }

resources/assets/sass/pages/components/project-list.scss

@@ -1,13 +1,11 @@
 .project-list {
     flex: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 
     .list-search {
-        position: sticky;
-        top: 0;
-        z-index: 1;
         width: 100%;
         flex-shrink: 0;
         display: flex;
@@ -15,11 +13,11 @@
         justify-content: center;
         height: 54px;
         padding: 0 12px;
-        background-color: #ffffff;
+        background-color: #f8f8f8;
 
         .search-wrapper {
             flex: 1;
-            background-color: #F7F7F7;
+            background-color: #ffffff;
             padding: 0 8px;
             margin: 0 4px;
             border-radius: 12px;
@@ -39,12 +37,14 @@
 
     > ul {
         flex: 1;
+        height: 0;
+        overflow: auto;
+        background-color: #f8f8f8;
         > li {
-            margin: 16px;
             padding: 16px;
-            background: #F9FAFB;
+            margin: 16px;
-            box-shadow: 0 0 4px rgba(28, 34, 43, 0.1);
             border-radius: 12px;
+            background-color: #ffffff;
             list-style: none;
             .project-h1 {
                 font-size: 16px;

resources/assets/sass/pages/components/project-panel.scss

@@ -15,6 +15,9 @@
             .project-title {
                 display: flex;
                 align-items: center;
+                .project-back {
+                    display: none;
+                }
                 > h1 {
                     color: #333333;
                     font-size: 28px;
@@ -1024,14 +1027,25 @@
 @media (max-width: 768px) {
     .project-panel {
         .project-head {
-            margin: 24px 24px 0;
+            margin: 12px 16px 0;
             .project-titbox {
                 display: block;
+                margin-bottom: 16px;
                 .project-title {
                     float: left;
                     padding-bottom: 8px;
+                    .project-back {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-left: -16px;
+                        width: 52px;
+                        > i {
+                            font-size: 26px;
+                        }
+                    }
                     > h1 {
-                        font-size: 24px;
+                        font-size: 22px;
                     }
                 }
                 .project-icons {

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

@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #F3F6FE;
+    background-color: #f8f8f8;
     .login-body {
         display: flex;
         flex-direction: column;

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

@@ -410,6 +410,15 @@
     .page-messenger {
         .messenger-wrapper {
             .messenger-select {
+                .messenger-search {
+                    background-color: #f8f8f8;
+                    .search-wrapper {
+                        background-color: #ffffff;
+                    }
+                }
+                .messenger-nav {
+                    background-color: #f8f8f8;
+                }
                 .messenger-menu {
                     border-top: 0;
                     height: 60px;