mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-16 05:52:49 +00:00
perf: 优化仪表盘使用sticky方式
This commit is contained in:
kuaifan
parent
8e0a684a9a
commit
e969b5b7e4
@ -5,33 +5,38 @@
|
||||
<div class="dashboard-hello">{{$L('欢迎您，' + userInfo.nickname)}}</div>
|
||||
<div class="dashboard-desc">{{$L('以下是你当前的任务统计数据')}}</div>
|
||||
<ul class="dashboard-block">
|
||||
<li @click="dashboard='today'">
|
||||
<div class="block-title">{{$L('今日待完成')}}</div>
|
||||
<li @click="scrollTo('today')">
|
||||
<div class="block-title">{{getTitle('today')}}</div>
|
||||
<div class="block-data">
|
||||
<div class="block-num">{{dashboardTask.today.length}}</div>
|
||||
<i class="taskfont"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li @click="dashboard='overdue'">
|
||||
<div class="block-title">{{$L('超期未完成')}}</div>
|
||||
<li @click="scrollTo('overdue')">
|
||||
<div class="block-title">{{getTitle('overdue')}}</div>
|
||||
<div class="block-data">
|
||||
<div class="block-num">{{dashboardTask.overdue.length}}</div>
|
||||
<i class="taskfont"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li @click="dashboard='all'">
|
||||
<div class="block-title">{{$L('待完成任务')}}</div>
|
||||
<li @click="scrollTo('all')">
|
||||
<div class="block-title">{{getTitle('all')}}</div>
|
||||
<div class="block-data">
|
||||
<div class="block-num">{{dashboardTask.all.length}}</div>
|
||||
<i class="taskfont"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="list.length > 0">
|
||||
<div class="dashboard-title">{{title}}</div>
|
||||
<ul class="dashboard-list overlay-y">
|
||||
<div class="dashboard-list overlay-y">
|
||||
<div
|
||||
:ref="`type_${column.type}`"
|
||||
v-for="(column, index) in columns"
|
||||
v-if="column.list.length > 0"
|
||||
:key="index">
|
||||
<div class="dashboard-title">{{column.title}}</div>
|
||||
<ul class="dashboard-li">
|
||||
<li
|
||||
v-for="(item, index) in list"
|
||||
v-for="(item, index) in column.list"
|
||||
:key="index"
|
||||
:class="{complete: item.complete_at}"
|
||||
:style="item.color ? {backgroundColor: item.color} : {}"
|
||||
@ -70,7 +75,8 @@
|
||||
</ETooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -110,13 +116,34 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['userInfo', 'cacheProjects', 'taskId']),
|
||||
...mapState(['userInfo']),
|
||||
|
||||
...mapGetters(['dashboardTask', 'transforTasks']),
|
||||
|
||||
title() {
|
||||
const {dashboard} = this;
|
||||
switch (dashboard) {
|
||||
columns() {
|
||||
let list = [];
|
||||
['today', 'overdue', 'all'].some(type => {
|
||||
let data = this.transforTasks(this.dashboardTask[type]);
|
||||
list.push({
|
||||
type,
|
||||
title: this.getTitle(type),
|
||||
list: data.sort((a, b) => {
|
||||
return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59");
|
||||
})
|
||||
})
|
||||
})
|
||||
return list;
|
||||
},
|
||||
|
||||
total() {
|
||||
const {dashboardTask} = this;
|
||||
return dashboardTask.today.length + dashboardTask.overdue.length + dashboardTask.all.length;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getTitle(type) {
|
||||
switch (type) {
|
||||
case 'today':
|
||||
return this.$L('今日任务');
|
||||
case 'overdue':
|
||||
@ -128,27 +155,20 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
list() {
|
||||
const {dashboard} = this;
|
||||
let data = [];
|
||||
switch (dashboard) {
|
||||
case 'today':
|
||||
data = this.transforTasks(this.dashboardTask.today);
|
||||
break
|
||||
case 'overdue':
|
||||
data = this.transforTasks(this.dashboardTask.overdue);
|
||||
break
|
||||
case 'all':
|
||||
data = this.transforTasks(this.dashboardTask.all);
|
||||
break
|
||||
}
|
||||
return data.sort((a, b) => {
|
||||
return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59");
|
||||
scrollTo(type) {
|
||||
try {
|
||||
this.$refs[`type_${type}`][0].scrollIntoView({
|
||||
behavior: 'instant',
|
||||
inline: 'end',
|
||||
});
|
||||
},
|
||||
} catch (e) {
|
||||
scrollIntoView(this.$refs[`type_${type}`][0], {
|
||||
behavior: 'instant',
|
||||
inline: 'end',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
openTask(task) {
|
||||
this.$store.dispatch("openTask", task)
|
||||
},
|
||||
|
||||
83
resources/assets/sass/pages/page-dashboard.scss
vendored
83
resources/assets/sass/pages/page-dashboard.scss
vendored
@ -5,13 +5,22 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffffff;
|
||||
.dashboard-wrapper {
|
||||
width: 664px;
|
||||
max-width: 80%;
|
||||
width: 100%;
|
||||
max-height: 80%;
|
||||
margin-bottom: 2%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.dashboard-hello,
|
||||
.dashboard-desc ,
|
||||
.dashboard-block ,
|
||||
.dashboard-list .dashboard-title,
|
||||
.dashboard-list .dashboard-li {
|
||||
width: 660px;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.dashboard-hello {
|
||||
padding: 0 12px;
|
||||
color: #333333;
|
||||
@ -41,10 +50,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px #cccccc;
|
||||
}
|
||||
transition: transform 0.5s ease-out 0s, box-shadow 0.3s ease-out 0s;
|
||||
&:first-child {
|
||||
background-color: #6f9ef6;
|
||||
}
|
||||
@ -52,6 +58,16 @@
|
||||
background-color: #98de6e;
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 2px 10px 0 #fa8e8c;
|
||||
&:first-child {
|
||||
box-shadow: 0 2px 10px 0 #6f9ef6;
|
||||
}
|
||||
&:last-child {
|
||||
box-shadow: 0 2px 10px 0 #98de6e;
|
||||
}
|
||||
}
|
||||
.block-title {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 12px;
|
||||
@ -74,31 +90,46 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-list {
|
||||
width: 100%;
|
||||
margin-top: 48px;
|
||||
overflow: auto;
|
||||
.dashboard-title {
|
||||
margin-top: 60px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin: 0 auto;
|
||||
padding: 0 12px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.dashboard-list {
|
||||
margin-top: 4px;
|
||||
.dashboard-li {
|
||||
margin: 0 auto;
|
||||
padding: 0 12px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
> li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
background: #F9FAFB;
|
||||
margin-top: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s;
|
||||
transition: box-shadow 0.3s,transform 0.2s;
|
||||
border-bottom: 1px solid #f1f2f4;
|
||||
&:hover {
|
||||
box-shadow: 0 0 6px #dfdfdf;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
&:first-child {
|
||||
border-top-right-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 12px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
&.complete {
|
||||
.item-title {
|
||||
@ -187,6 +218,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -217,8 +249,14 @@
|
||||
.page-dashboard {
|
||||
.dashboard-wrapper {
|
||||
display: block;
|
||||
max-width: 86%;
|
||||
max-height: 86%;
|
||||
.dashboard-hello,
|
||||
.dashboard-desc ,
|
||||
.dashboard-block ,
|
||||
.dashboard-list .dashboard-title,
|
||||
.dashboard-list .dashboard-li {
|
||||
max-width: 86%;
|
||||
}
|
||||
.dashboard-block {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
@ -227,11 +265,11 @@
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
.dashboard-title {
|
||||
margin-top: 36px;
|
||||
}
|
||||
.dashboard-list {
|
||||
padding-bottom: 22px;
|
||||
overflow: visible !important;
|
||||
padding-bottom: 2px;
|
||||
> ul {
|
||||
margin-bottom: 36px;
|
||||
> li {
|
||||
.item-title {
|
||||
overflow: hidden;
|
||||
@ -243,3 +281,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user