From d03dabdfdf7b74de1c78296f3c68d7ade737fc27 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Sat, 12 Apr 2025 17:40:05 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=97=A5=E5=8E=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/pages/manage/calendar.vue | 31 ++++---- .../pages/manage/components/Calendar/theme.js | 22 +++--- .../js/pages/manage/components/TaskModal.vue | 4 +- .../assets/sass/pages/page-calendar.scss | 77 +++++++++++++------ 4 files changed, 85 insertions(+), 49 deletions(-) diff --git a/resources/assets/js/pages/manage/calendar.vue b/resources/assets/js/pages/manage/calendar.vue index 696627c62..41428adc9 100644 --- a/resources/assets/js/pages/manage/calendar.vue +++ b/resources/assets/js/pages/manage/calendar.vue @@ -3,21 +3,23 @@
-
-
-

{{ rangeText }}

+
+
+
+

{{ rangeText }}

+
+ + + + + + +
- - - - - - - @@ -34,6 +36,7 @@ :theme="options.theme" :template="options.template" :events="events" + :is-read-only="windowTouch" @selectDateTime="onSelectDateTime" @beforeUpdateEvent="onBeforeUpdateEvent" @clickDayName="onClickDayName" diff --git a/resources/assets/js/pages/manage/components/Calendar/theme.js b/resources/assets/js/pages/manage/components/Calendar/theme.js index 6187a994a..327b2bd36 100644 --- a/resources/assets/js/pages/manage/components/Calendar/theme.js +++ b/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)', - 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'}, }, }; diff --git a/resources/assets/js/pages/manage/components/TaskModal.vue b/resources/assets/js/pages/manage/components/TaskModal.vue index a585c5875..1d480eac3 100644 --- a/resources/assets/js/pages/manage/components/TaskModal.vue +++ b/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' } diff --git a/resources/assets/sass/pages/page-calendar.scss b/resources/assets/sass/pages/page-calendar.scss index c85c1e9bd..4d9d84d94 100644 --- a/resources/assets/sass/pages/page-calendar.scss +++ b/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; - > 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; + } } } }