github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-10-29 22:10:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(dashboard): 移动端截止时间右对齐，空值留空并隐藏整组为空的栏

Browse Source
This commit is contained in:
kuaifan 2026-10-22 08:46:35 +00:00
parent 2153879e09
commit 571417f689
2 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/assets/js/pages/manage/dashboard.vue
View File

@ -189,7 +189,7 @@
<span class="empty-icon"><Icon type="md-checkmark"/></span>
<span>{{listEmptyText(group.type)}}</span>
</div>
<div class="table-body" :key="`list-${group.type}`">
<div class="table-body" :class="emptyColumnClass(groupList(group, listLimit(group)))" :key="`list-${group.type}`">
<div class="table-row table-thead">
<span></span>
<span><DashboardIcon name="task"/>{{$L('任务')}}</span>
@ -243,7 +243,7 @@
<span
class="t-end"
:class="deadlineClass(item.end_at)"
:title="item.end_at">{{deadlineText(item.end_at) || '—'}}</span>
:title="item.end_at">{{deadlineText(item.end_at) || (windowPortrait ? '' : '—')}}</span>
</div>
<div
v-if="group.list.length > listLimit(group) && !expandedGroups.includes(group.type)"
@ -261,7 +261,7 @@
v-for="group in columns"
:key="group.type"
class="dashboard-card quad-card"
:class="[`group-${group.type}`]">
:class="[`group-${group.type}`, emptyColumnClass(groupList(group, quadLimit))]">
<div class="quad-head">
<i class="group-dot"></i>
<span class="group-title">{{group.title}}</span>
@ -283,9 +283,9 @@
class="status-pill"
:class="item.flow_item_name ? item.flow_item_status : {end: !!item.complete_at}"
@click.stop="openMenu($event, item)">{{item.flow_item_name || (item.complete_at ? $L('已完成') : $L('未完成'))}}</em>
<span class="quad-priority" :title="item.p_name"><i v-if="item.p_name" class="priority-glyph" :style="{backgroundColor: item.p_color}"></i><span>{{item.p_name || '—'}}</span></span>
<span class="quad-sub">{{item.sub_num > 0 ? `${item.sub_complete}/${item.sub_num}` : '—'}}</span>
<span class="t-end" :class="deadlineClass(item.end_at)" :title="item.end_at">{{deadlineText(item.end_at) || '—'}}</span>
<span class="quad-priority" :title="item.p_name"><i v-if="item.p_name" class="priority-glyph" :style="{backgroundColor: item.p_color}"></i><span>{{item.p_name || (windowPortrait ? '' : '—')}}</span></span>
<span class="quad-sub">{{item.sub_num > 0 ? `${item.sub_complete}/${item.sub_num}` : (windowPortrait ? '' : '—')}}</span>
<span class="t-end" :class="deadlineClass(item.end_at)" :title="item.end_at">{{deadlineText(item.end_at) || (windowPortrait ? '' : '—')}}</span>
</div>
<div v-if="group.list.length === 0" class="quad-empty">
<span class="dashboard-empty-art">
@ -808,6 +808,21 @@ export default {
return group.type === 'completed' ? this.completedLimit : this.groupLimit;
},
/**
* 移动端：当前显示的任务某一栏全部为空时，整栏隐藏
* @param list
* @returns {object}
*/
emptyColumnClass(list) {
if (!this.windowPortrait) {
return {};
}
return {
'no-priority': !list.some(item => item.p_name),
'no-end': !list.some(item => item.end_at),
};
},
listEmptyText(type) {
switch (type) {
case 'overdue':

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

@ -2082,6 +2082,19 @@ body.window-portrait {
.cell-name .name-status {
display: inline-block;
}
.t-end {
text-align: right;
}
}
// 整组都没有截止时间时隐藏该栏
.table-body.no-end .table-row {
grid-template-columns: 28px minmax(0, 1fr);
.t-end {
display: none;
}
}
.table-all-empty {
@ -2126,6 +2139,13 @@ body.window-portrait {
display: none;
}
.quad-priority { width: 16px; > span { display: none; } }
.t-end { text-align: right; }
}
// 整个象限都没有优先级/截止时间时隐藏对应栏
&.no-priority .quad-row .quad-priority,
&.no-end .quad-row .t-end {
display: none;
}
}
}