perf: 优化日历

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

@@ -3,21 +3,23 @@
         <PageTitle :title="$L('日历')"/>
         <div class="calendar-head">
             <div class="calendar-titbox">
-                <div class="calendar-title">
+                <div class="calendar-nav">
-                    <div class="common-nav-back portrait" @click="goForward({name: 'manage-application'}, true)"><i class="taskfont">&#xe676;</i></div>
+                    <div class="calendar-title">
-                    <h1>{{ rangeText }}</h1>
+                        <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"

resources/assets/js/pages/manage/components/Calendar/theme.js

@@ -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)',
+            backgroundColor: 'rgba(132, 197, 106, 0.1)',
-            border: '1px solid #135de6',
+            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'},
+        nowIndicatorLabel: {color: '#84c56a'},
-        nowIndicatorPast: {border: '1px solid rgba(19, 93, 230, 0.3)'},
+        nowIndicatorPast: {border: '1px solid rgba(132, 197, 106, 0.3)'},
-        nowIndicatorBullet: {backgroundColor: '#135de6'},
+        nowIndicatorBullet: {backgroundColor: '#84c56a'},
-        nowIndicatorToday: {border: '1px solid #135de6'},
+        nowIndicatorToday: {border: '1px solid #84c56a'},
-        nowIndicatorFuture: {border: '1px solid #135de6'},
+        nowIndicatorFuture: {border: '1px solid #84c56a'},
         pastTime: {color: '#999'},
         futureTime: {color: '#333'},
-        gridSelection: {color: '#135de6'},
+        gridSelection: {color: '#84c56a'},
     },
 };

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

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

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

@@ -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;
+                .calendar-title {
-                > h1 {
+                    display: flex;
-                    color: $primary-title-color;
+                    align-items: center;
-                    font-size: 28px;
+                    margin-right: 24px;
-                    font-weight: 600;
+                    > 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 {
-            .calendar-arrow {
+                    flex-shrink: 0;
-                margin-right: 12px;
+                    margin-left: 12px;
-                > button {
+                    > button {
-                    color: #888888;
+                        color: #888888;
-                    font-size: 12px;
+                        font-size: 12px;
-                    &:focus {
+                        &:focus {
-                        box-shadow: none;
+                            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 {
+                display: flex;
-                    flex: 1;
+                flex-direction: column;
-                }
+                align-items: stretch;
-                .calendar-arrow {
+                .calendar-nav {
-                    margin-left: 12px;
+                    width: 100%;
-                    margin-right: 0;
+                    .calendar-title {
-                }
+                        flex: 1;
-                .calendar-view {
+                    }
-                    display: none;
                 }
             }
         }