perf: 优化移动端

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

@@ -0,0 +1,93 @@
+<template>
+    <div class="mobile-tabbar">
+        <ul>
+            <li v-for="item in navList" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
+                <i class="taskfont" v-html="item.icon"></i>
+                <div class="tabbar-title">{{$L(item.label)}}</div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MobileTabbar",
+    props: {
+
+    },
+
+    data() {
+        return {
+            navList: [
+                {icon: '&#xe736;', name: 'dashboard', label: '仪表盘'},
+                {icon: '&#xe732;', name: 'project', label: '项目'},
+                {icon: '&#xe71e;', name: 'dialog', label: '消息'},
+                {icon: '&#xe6b2;', name: 'contacts', label: '通讯录'},
+                {icon: '&#xe61a;', name: 'setting', label: '我的'},
+            ]
+        };
+    },
+
+    created() {
+
+    },
+
+    mounted() {
+
+    },
+
+    beforeDestroy() {
+
+    },
+
+    computed: {
+        routeName() {
+            return this.$route.name
+        },
+
+        activeName() {
+            if (this.routeName === 'manage-dashboard') {
+                return 'dashboard';
+            }
+            if (this.routeName === 'manage-project' && !/^\d+$/.test(this.$route.params.projectId)) {
+                return 'project';
+            }
+            if (this.routeName === 'manage-messenger') {
+                if (this.$route.params.dialogId === 'contacts') {
+                    return 'contacts'
+                } else {
+                    return 'dialog'
+                }
+            }
+            if ($A.leftExists(this.routeName, 'manage-setting')) {
+                return 'setting'
+            }
+            return ''
+        },
+    },
+
+    methods: {
+        toggleRoute(path) {
+            let location;
+            switch (path) {
+                case 'project':
+                    location = {name: 'manage-project', params: {projectId: 'all'}};
+                    break;
+
+                case 'dialog':
+                    location = {name: 'manage-messenger', params: {dialogId: 'dialog'}};
+                    break;
+
+                case 'contacts':
+                    location = {name: 'manage-messenger', params: {dialogId: 'contacts'}};
+                    break;
+
+                default:
+                    location = {name: 'manage-' + path};
+                    break;
+            }
+            this.goForward(location);
+        },
+    },
+};
+</script>

resources/assets/js/pages/manage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="userId > 0" class="page-manage">
+    <div v-show="userId > 0" class="page-manage" :class="{'show-tabbar': showMobileTabbar}">
         <div class="manage-box-menu" :class="{'show768-menu': show768Menu}">
             <Dropdown
                 class="page-manage-menu-dropdown"
@@ -352,6 +352,9 @@
                 <Badge :count="unreadTotal"/>
             </div>
         </DragBallComponent>
+
+        <!--移动端选项卡-->
+        <MobileTabbar v-if="showMobileTabbar"/>
     </div>
 </template>
 
@@ -363,14 +366,16 @@ import TeamManagement from "./manage/components/TeamManagement";
 import ProjectManagement from "./manage/components/ProjectManagement";
 import DrawerOverlay from "../components/DrawerOverlay";
 import DragBallComponent from "../components/DragBallComponent";
+import MobileTabbar from "../components/Mobile/Tabbar";
+import UserInput from "../components/UserInput";
 import TaskAdd from "./manage/components/TaskAdd";
 import Report from "./manage/components/Report";
 import notificationKoro from "notification-koro1";
 import {Store} from "le5le-store";
-import UserInput from "../components/UserInput";
 
 export default {
     components: {
+        MobileTabbar,
         UserInput,
         TaskAdd,
         TaskDetail,
@@ -384,7 +389,6 @@ export default {
         return {
             loadIng: 0,
 
-            routeName: this.$route.name,
             mateName: /macintosh|mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl',
 
             addShow: false,
@@ -496,6 +500,10 @@ export default {
 
         ...mapGetters(['taskData', 'dashboardTask']),
 
+        routeName() {
+            return this.$route.name
+        },
+
         msgUnreadMention() {
             let num = 0;
             let mention = 0;
@@ -601,13 +609,6 @@ export default {
             return data;
         },
 
-        taskStyle() {
-            const {windowHeight} = this;
-            return {
-                maxHeight: (windowHeight - (windowHeight > 900 ? 200 : 70) - 20) + 'px'
-            }
-        },
-
         overlayClass() {
             return {
                 'overlay-y': true,
@@ -621,11 +622,23 @@ export default {
                 return cacheTasks.find(task => task.id === id) || {}
             });
         },
+
+        showMobileTabbar() {
+            if (this.routeName === 'manage-dashboard') {
+                return true;
+            }
+            if (this.routeName === 'manage-project' && !/^\d+$/.test(this.$route.params.projectId)) {
+                return true;
+            }
+            if (this.routeName === 'manage-messenger' && !/^\d+$/.test(this.$route.params.dialogId)) {
+                return true;
+            }
+            return $A.leftExists(this.routeName, 'manage-setting');
+        },
     },
 
     watch: {
         '$route' (route) {
-            this.routeName = route.name;
             this.chackPass();
         },
 
@@ -792,7 +805,7 @@ export default {
 
         classNameProject(item) {
             return {
-                "active": this.routeName === 'manage-project' && this.$route.params.projectId === item.id,
+                "active": this.routeName === 'manage-project' && this.$route.params.projectId == item.id,
                 "open-menu": this.openMenu[item.id] === true,
                 "operate": item.id == this.topOperateItem.id && this.topOperateVisible
             };

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

@@ -0,0 +1,36 @@
+<template>
+    <div class="project-all">
+        <PageTitle :title="$L('项目')"/>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ProjectAll",
+    data() {
+        return {
+
+        }
+    },
+
+    mounted() {
+
+    },
+
+    destroyed() {
+
+    },
+
+    computed: {
+
+    },
+
+    watch: {
+
+    },
+
+    methods: {
+
+    }
+}
+</script>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="page-messenger">
-        <PageTitle :title="$L('消息')"/>
+        <PageTitle :title="$L(tabActive==='dialog' ? '消息' : '通讯录')"/>
         <div class="messenger-wrapper">
             <div class="messenger-select" :class="{'show768-menu':dialogId == 0}">
                 <div class="messenger-search">
@@ -120,7 +120,7 @@
                     <div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
                 </div>
                 <DialogWrapper v-if="dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive">
-                    <div slot="inputBefore" class="dialog-back" @click="openDialog(0)">
+                    <div slot="inputBefore" class="dialog-back" @click="goBack">
                         <Icon type="md-arrow-back" />
                     </div>
                 </DialogWrapper>
@@ -163,10 +163,13 @@ export default {
     },
 
     computed: {
-        ...mapState(['userId', 'cacheDialogs']),
+        ...mapState(['userId', 'cacheDialogs', 'windowMax768']),
 
         dialogId() {
             const {dialogId} = this.$route.params;
+            if (dialogId && !/^\d+$/.test(dialogId)) {
+                this.tabActive = dialogId
+            }
             return parseInt(/^\d+$/.test(dialogId) ? dialogId : 0);
         },
 
@@ -314,7 +317,9 @@ export default {
         },
 
         openContacts(user) {
-            this.tabActive = 'dialog';
+            if (!this.windowMax768) {
+                this.tabActive = 'dialog';
+            }
             this.$store.dispatch("openDialogUserid", user.userid).then(({data}) => {
                 this.openDialog(data.id)
             });

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

@@ -1,7 +1,10 @@
 <template>
     <div class="page-project">
-        <ProjectList/>
+        <template v-if="projectId > 0">
-        <ProjectDialog v-if="projectData.cacheParameter.chat"/>
+            <ProjectList/>
+            <ProjectDialog v-if="projectData.cacheParameter.chat"/>
+        </template>
+        <ProjectAll v-else-if="routeName === 'manage-project'"/>
     </div>
 </template>
 
@@ -9,8 +12,9 @@
 import {mapState, mapGetters} from "vuex";
 import ProjectList from "./components/ProjectList";
 import ProjectDialog from "./components/ProjectDialog";
+import ProjectAll from "./components/ProjectAll";
 export default {
-    components: {ProjectDialog, ProjectList},
+    components: {ProjectAll, ProjectDialog, ProjectList},
 
     deactivated() {
         this.$store.dispatch("forgetTaskCompleteTemp", true);
@@ -20,6 +24,10 @@ export default {
         ...mapState(['cacheProjects', 'wsOpenNum']),
         ...mapGetters(['projectData']),
 
+        routeName() {
+            return this.$route.name
+        },
+
         projectId() {
             const {projectId} = this.$route.params;
             return parseInt(/^\d+$/.test(projectId) ? projectId : 0);

resources/assets/js/pages/manage/setting/index.vue

@@ -5,8 +5,8 @@
             <div class="setting-titbox">
                 <div class="setting-title">
                     <h1>{{$L('设置')}}</h1>
-                    <div class="setting-more" @click="show768Menu=!show768Menu">
+                    <div v-if="!show768Menu" class="setting-more" @click="show768Menu=!show768Menu">
-                        <Icon :type="show768Menu ? 'md-close' : 'md-more'" />
+                        <Icon type="md-more" />
                     </div>
                 </div>
             </div>
@@ -46,17 +46,22 @@ import {Store} from "le5le-store";
 export default {
     data() {
         return {
-            routeName: this.$route.name,
             show768Menu: true,
 
             version: window.systemInfo.version
         }
     },
+
     mounted() {
 
     },
+
     computed: {
-        ...mapState(['userInfo', 'userIsAdmin', 'clientNewVersion']),
+        ...mapState(['userInfo', 'userIsAdmin', 'clientNewVersion', 'windowMax768']),
+
+        routeName() {
+            return this.$route.name
+        },
 
         menu() {
             let menu = [
@@ -83,11 +88,21 @@ export default {
             return name || '设置';
         }
     },
+
     watch: {
-        '$route' (route) {
+        routeName: {
-            this.routeName = route.name;
+            handler(name) {
+                if (name === 'manage-setting') {
+                    if (!this.windowMax768) {
+                        this.goForward({name: 'manage-setting-personal'}, true);
+                    }
+                    this.show768Menu = true;
+                }
+            },
+            immediate: true
         }
     },
+
     methods: {
         toggleRoute(path) {
             if (path == 'version') {
@@ -100,7 +115,7 @@ export default {
 
         classNameRoute(path, divided) {
             return {
-                "active": this.routeName === `manage-setting-${path}`,
+                "active": !this.windowMax768 && this.routeName === `manage-setting-${path}`,
                 "divided": !!divided
             };
         },

resources/assets/js/routes.js

@@ -28,14 +28,10 @@ export default [
                 component: () => import('./pages/manage/messenger.vue'),
             },
             {
+                name: 'manage-setting',
                 path: 'setting',
                 component: () => import('./pages/manage/setting/index.vue'),
                 children: [
-                    {
-                        name: 'manage-setting',
-                        path: '',
-                        redirect: 'personal',
-                    },
                     {
                         name: 'manage-setting-personal',
                         path: 'personal',

resources/assets/sass/components/_.scss

@@ -3,6 +3,7 @@
 @import "drawer-overlay";
 @import "img-update";
 @import "loading";
+@import "mobile";
 @import "scroller-y";
 @import "spinner";
 @import "t-editor";

resources/assets/sass/components/mobile.scss

@@ -0,0 +1,47 @@
+.mobile-tabbar {
+    display: none;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #f3f6fe;
+    box-shadow: 0 0 2px rgba(28, 34, 43, 0.15);
+    z-index: 99;
+    > ul {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        margin: 0;
+        height: 60px;
+        > li {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            color: $primary-text-color;
+            .taskfont {
+                font-size: 24px;
+                line-height: 34px;
+            }
+            .tabbar-title {
+                font-size: 12px;
+                line-height: 18px;
+            }
+            &.active {
+                color: $primary-color;
+            }
+        }
+    }
+}
+
+@media (max-width: 640px) {
+    .mobile-tabbar {
+        display: block;
+    }
+}

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

@@ -281,3 +281,17 @@
         }
     }
 }
+@media (max-width: 640px) {
+    .page-dashboard {
+        .dashboard-wrapper {
+            max-height: 96%;
+            .dashboard-hello,
+            .dashboard-desc ,
+            .dashboard-block ,
+            .dashboard-list .dashboard-title,
+            .dashboard-list .dashboard-ul {
+                max-width: 96%;
+            }
+        }
+    }
+}

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

@@ -18,8 +18,8 @@
         overflow: auto;
         .login-logo {
             flex-shrink: 0;
-            width: 68px;
+            width: 84px;
-            height: 68px;
+            height: 84px;
             background: url("../images/logo.svg") no-repeat center center;
             background-size: contain;
             &.can-click {
@@ -27,8 +27,9 @@
             }
         }
         .login-box {
-            margin-top: 32px;
+            margin-top: 36px;
             width: 400px;
+            max-width: 90%;
             border-radius: 12px;
             background-color: #ffffff;
             box-shadow: 0 0 10px #e6ecfa;
@@ -105,6 +106,7 @@
             display: flex;
             align-items: center;
             width: 388px;
+            max-width: 90%;
             .login-setting {
                 flex-shrink: 0;
                 display: flex;

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

@@ -416,3 +416,15 @@
         }
     }
 }
+@media (max-width: 640px) {
+    .page-manage {
+        &.show-tabbar {
+            .manage-box-main {
+                margin-bottom: 60px;
+            }
+        }
+        .manage-mini-menu {
+            display: none;
+        }
+    }
+}

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

@@ -439,3 +439,16 @@
         }
     }
 }
+
+@media (max-width: 640px) {
+    .page-messenger {
+        .messenger-wrapper {
+            .messenger-select {
+                .messenger-menu {
+                    height: 60px;
+                    border-top: 0;
+                }
+            }
+        }
+    }
+}

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

@@ -302,3 +302,20 @@
         }
     }
 }
+
+@media (max-width: 640px) {
+    .page-setting {
+        .setting-item {
+            .setting-footer {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                > button {
+                    flex: 1;
+                    height: 42px;
+                    line-height: 40px;
+                }
+            }
+        }
+    }
+}