github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-28 12:50:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化移动端

Browse Source
This commit is contained in:
kuaifan 2022-05-09 08:33:09 +08:00
parent d03a6f7b00
commit d2428e43b2
17 changed files with 306 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
resources/assets/js/components/Mobile/Tabbar.vue Normal file
View File

@ -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>

37
resources/assets/js/pages/manage.vue
View File

@ -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
};

36
resources/assets/js/pages/manage/components/ProjectAll.vue Normal file
View File

@ -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>

13
resources/assets/js/pages/manage/messenger.vue
View File

@ -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)
});

14
resources/assets/js/pages/manage/project.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="page-project">
<ProjectList/>
<ProjectDialog v-if="projectData.cacheParameter.chat"/>
<template v-if="projectId > 0">
<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);

29
resources/assets/js/pages/manage/setting/index.vue
View File

@ -5,8 +5,8 @@
<div class="setting-titbox">
<div class="setting-title">
<h1>{{$L('设置')}}</h1>
<div class="setting-more" @click="show768Menu=!show768Menu">
<Icon :type="show768Menu ? 'md-close' : 'md-more'" />
<div v-if="!show768Menu" class="setting-more" @click="show768Menu=!show768Menu">
<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) {
this.routeName = route.name;
routeName: {
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
};
},

6
resources/assets/js/routes.js vendored
View File

@ -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',

1
resources/assets/sass/components/_.scss vendored
View File

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

47
resources/assets/sass/components/mobile.scss vendored Normal file
View File

@ -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;
}
}

14
resources/assets/sass/pages/page-dashboard.scss vendored
View File

@ -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%;
}
}
}
}

8
resources/assets/sass/pages/page-login.scss vendored
View File

@ -18,8 +18,8 @@
overflow: auto;
.login-logo {
flex-shrink: 0;
width: 68px;
height: 68px;
width: 84px;
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;

12
resources/assets/sass/pages/page-manage.scss vendored
View File

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

13
resources/assets/sass/pages/page-messenger.scss vendored
View File

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

17
resources/assets/sass/pages/page-setting.scss vendored
View File

@ -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;
}
}
}
}
}

BIN
resources/assets/statics/public/css/fonts/taskfont.ttf
View File

Binary file not shown.

BIN
resources/assets/statics/public/css/fonts/taskfont.woff
View File

Binary file not shown.

BIN
resources/assets/statics/public/css/fonts/taskfont.woff2
View File

Binary file not shown.