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

perf: 优化日历

Browse Source
This commit is contained in:
kuaifan 2025-04-12 17:40:05 +08:00
parent fc339ae55f
commit d03dabdfdf
4 changed files with 85 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/assets/js/pages/manage/calendar.vue
View File

@ -3,21 +3,23 @@
<PageTitle :title="$L('日历')"/>
<div class="calendar-head">
<div class="calendar-titbox">
<div class="calendar-title">
<div class="common-nav-back portrait" @click="goForward({name: 'manage-application'}, true)"><i class="taskfont">&#xe676;</i></div>
<h1>{{ rangeText }}</h1>
<div class="calendar-nav">
<div class="calendar-title">
<div class="common-nav-back portrait" @click="goForward({name: 'manage-application'}, true)"><i class="taskfont">&#xe676;</i></div>
<h1>{{ rangeText }}</h1>
</div>
<ButtonGroup class="calendar-arrow" size="small">
<Button @click="onMove(-1)">
<Icon type="ios-arrow-back"></Icon>
</Button>
<Button @click="onMove(1)">
<Icon type="ios-arrow-forward"></Icon>
</Button>
</ButtonGroup>
<ButtonGroup class="calendar-arrow" size="small">
<Button @click="onToDay">{{ $L('今天') }}</Button>
</ButtonGroup>
</div>
<ButtonGroup class="calendar-arrow" size="small">
<Button @click="onMove(-1)">
<Icon type="ios-arrow-back"></Icon>
</Button>
<Button @click="onMove(1)">
<Icon type="ios-arrow-forward"></Icon>
</Button>
</ButtonGroup>
<ButtonGroup class="calendar-arrow" size="small">
<Button @click="onToDay">{{ $L('今天') }}</Button>
</ButtonGroup>
<ButtonGroup class="calendar-view">
<Button @click="setView('day')" :type="options.view == 'day' ? 'primary' : 'default'">{{ $L('日') }}</Button>
<Button @click="setView('week')" :type="options.view == 'week' ? 'primary' : 'default'">{{ $L('周') }}</Button>
@ -34,6 +36,7 @@
:theme="options.theme"
:template="options.template"
:events="events"
:is-read-only="windowTouch"
@selectDateTime="onSelectDateTime"
@beforeUpdateEvent="onBeforeUpdateEvent"
@clickDayName="onClickDayName"

22
resources/assets/js/pages/manage/components/Calendar/theme.js vendored
View File

@ -3,12 +3,12 @@ export const theme = {
border: '1px solid #ddd',
backgroundColor: 'white',
holiday: {color: '#f54f3d'},
saturday: {color: '#135de6'},
saturday: {color: '#84c56a'},
dayName: {color: '#333'},
today: {color: '#009688'},
today: {color: '#ffffff'},
gridSelection: {
backgroundColor: 'rgba(19, 93, 230, 0.1)',
border: '1px solid #135de6',
backgroundColor: 'rgba(132, 197, 106, 0.1)',
border: '1px solid #84c56a',
},
},
month: {
@ -30,7 +30,7 @@ export const theme = {
backgroundColor: 'inherit',
},
today: {
color: '#009688',
color: '#ffffff',
backgroundColor: 'inherit',
},
pastDay: {color: '#999'},
@ -51,13 +51,13 @@ export const theme = {
timeGridHourLine: {borderBottom: '1px solid #eee'},
timeGridHalfHourLine: {borderBottom: '1px dotted #f9f9f9'},
timeGrid: {borderRight: '1px solid #ddd'},
nowIndicatorLabel: {color: '#135de6'},
nowIndicatorPast: {border: '1px solid rgba(19, 93, 230, 0.3)'},
nowIndicatorBullet: {backgroundColor: '#135de6'},
nowIndicatorToday: {border: '1px solid #135de6'},
nowIndicatorFuture: {border: '1px solid #135de6'},
nowIndicatorLabel: {color: '#84c56a'},
nowIndicatorPast: {border: '1px solid rgba(132, 197, 106, 0.3)'},
nowIndicatorBullet: {backgroundColor: '#84c56a'},
nowIndicatorToday: {border: '1px solid #84c56a'},
nowIndicatorFuture: {border: '1px solid #84c56a'},
pastTime: {color: '#999'},
futureTime: {color: '#333'},
gridSelection: {color: '#135de6'},
gridSelection: {color: '#84c56a'},
},
};

4
resources/assets/js/pages/manage/components/TaskModal.vue
View File

@ -30,7 +30,9 @@ export default {
},
styles() {
return {
return this.windowPortrait ? {
width: '100%',
} : {
width: '90%',
maxWidth: this.taskData.dialog_id ? '1200px' : '700px'
}

77
resources/assets/sass/pages/page-calendar.scss vendored
View File

@ -12,23 +12,34 @@
display: flex;
align-items: center;
margin-bottom: 16px;
.calendar-title {
gap: 2px;
.calendar-nav {
flex-shrink: 0;
display: flex;
align-items: center;
margin-right: 36px;
> h1 {
color: $primary-title-color;
font-size: 28px;
font-weight: 600;
.calendar-title {
display: flex;
align-items: center;
margin-right: 24px;
> h1 {
color: $primary-title-color;
font-size: 28px;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
}
}
.calendar-arrow {
margin-right: 12px;
> button {
color: #888888;
font-size: 12px;
&:focus {
box-shadow: none;
.calendar-arrow {
flex-shrink: 0;
margin-left: 12px;
> button {
color: #888888;
font-size: 12px;
&:focus {
box-shadow: none;
}
}
}
}
@ -36,6 +47,7 @@
flex: 1;
display: flex;
justify-content: flex-end;
margin-left: 24px;
> button {
&:focus {
box-shadow: none;
@ -51,6 +63,26 @@
padding: 0 48px 6px;
overflow: hidden;
}
.toastui-calendar-grid-cell-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 0 5px;
overflow: hidden;
.toastui-calendar-grid-cell-more-events {
padding-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.toastui-calendar-grid-cell-date {
.toastui-calendar-weekday-grid-date {
&.toastui-calendar-weekday-grid-date-decorator {
background-color: $primary-color;
}
}
}
}
body.window-portrait {
@ -58,15 +90,14 @@ body.window-portrait {
.calendar-head {
margin: 24px 16px 16px;
.calendar-titbox {
.calendar-title {
flex: 1;
}
.calendar-arrow {
margin-left: 12px;
margin-right: 0;
}
.calendar-view {
display: none;
display: flex;
flex-direction: column;
align-items: stretch;
.calendar-nav {
width: 100%;
.calendar-title {
flex: 1;
}
}
}
}