no message

This commit is contained in:
kuaifan 2025-04-14 18:23:04 +08:00
parent 3db687ad40
commit f5d6702472
5 changed files with 71 additions and 38 deletions

View File

@ -59,7 +59,7 @@
"stylus": "^0.59.0",
"stylus-loader": "^7.1.0",
"tinymce": "^5.10.3",
"tui-calendar-hi": "^2.1.3-5",
"tui-calendar-hi": "^2.1.3-6",
"view-design-hi": "^4.7.0-76",
"vite": "^2.9.15",
"vite-plugin-file-copy": "^1.0.0",

View File

@ -3,11 +3,11 @@
<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>
<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>
@ -107,6 +107,9 @@ export default {
this.options.week.dayNames = dayNames;
this.options.month.dayNames = dayNames;
this.options.view = this.$store.state.cacheCalendarView || this.options.view;
if (this.windowWidth < 600) {
this.options.template.monthGridHeaderExceed = (hiddenEvents) => `<span>+${hiddenEvents}</span>`
}
},
activated() {

View File

@ -1,11 +1,11 @@
export const theme = {
common: {
border: '1px solid #ddd',
border: '1px solid #f4f5f5',
backgroundColor: 'white',
holiday: {color: '#f54f3d'},
saturday: {color: '#84c56a'},
dayName: {color: '#333'},
today: {color: '#ffffff'},
dayName: {color: '#606266'},
today: {color: '#fff'},
gridSelection: {
backgroundColor: 'rgba(132, 197, 106, 0.1)',
border: '1px solid #84c56a',
@ -26,38 +26,38 @@ export const theme = {
dayName: {
borderTop: 'none',
borderBottom: 'none',
borderLeft: '1px solid #ddd',
borderLeft: '1px solid #f4f5f5',
backgroundColor: 'inherit',
},
today: {
color: '#ffffff',
color: '#303133',
backgroundColor: 'inherit',
},
pastDay: {color: '#999'},
panelResizer: {border: '1px solid #ddd'},
dayGrid: {borderRight: '1px solid #ddd'},
panelResizer: {border: '1px solid #f4f5f5'},
dayGrid: {borderRight: '1px solid #f4f5f5'},
dayGridLeft: {
width: '100px',
backgroundColor: '',
borderRight: '1px solid #ddd',
borderRight: '1px solid #f4f5f5',
},
weekend: {backgroundColor: 'inherit'},
timeGridLeft: {
width: '100px',
backgroundColor: '#fafafa',
borderRight: '1px solid #ddd',
borderRight: '1px solid #f4f5f5',
},
timeGridLeftAdditionalTimezone: {backgroundColor: '#fdfdfd'},
timeGridHourLine: {borderBottom: '1px solid #eee'},
timeGridHalfHourLine: {borderBottom: '1px dotted #f9f9f9'},
timeGrid: {borderRight: '1px solid #ddd'},
timeGrid: {borderRight: '1px solid #f4f5f5'},
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'},
futureTime: {color: '#606266'},
gridSelection: {color: '#84c56a'},
},
};

View File

@ -84,8 +84,12 @@ export default {
},
watch: {
dialogId(id) {
this.show = id > 0 && (this.windowPortrait || this.routeName !== 'manage-messenger')
dialogId() {
this.handleShow()
},
windowPortrait() {
this.handleShow()
},
show(v) {
@ -105,6 +109,9 @@ export default {
this.closIng--
})
},
handleShow() {
this.show = this.dialogId > 0 && (this.windowPortrait || this.routeName !== 'manage-messenger')
},
handleMoveTop(type) {
type === 'dialogModal' && this.$refs.modal?.handleMoveTop();
}

View File

@ -1,53 +1,63 @@
.page-calendar {
display: flex;
flex-direction: column;
.calendar-head {
flex-shrink: 0;
display: flex;
align-items: flex-start;
margin: 32px 20px 16px;
border-bottom: 1px solid #F4F4F5;
.calendar-titbox {
flex: 1;
display: flex;
align-items: center;
margin-bottom: 16px;
gap: 2px;
.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-nav {
flex-shrink: 0;
display: flex;
align-items: center;
.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 {
flex-shrink: 0;
margin-left: 12px;
> button {
color: #888888;
font-size: 12px;
&:focus {
box-shadow: none;
}
}
}
}
.calendar-view {
flex: 1;
display: flex;
justify-content: flex-end;
margin-left: 24px;
> button {
&:focus {
box-shadow: none;
@ -56,6 +66,7 @@
}
}
}
.calendar-box {
flex: 1;
display: flex;
@ -63,12 +74,14 @@
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;
@ -76,6 +89,7 @@
text-overflow: ellipsis;
}
}
.toastui-calendar-grid-cell-date {
.toastui-calendar-weekday-grid-date {
&.toastui-calendar-weekday-grid-date-decorator {
@ -83,24 +97,33 @@
}
}
}
.toastui-calendar-daygrid-cell {
+ .toastui-calendar-daygrid-cell {
border-left-color: #f4f5f5;
}
}
}
body.window-portrait {
.page-calendar {
.calendar-head {
margin: 24px 16px 16px;
.calendar-titbox {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
position: relative;
padding-bottom: 32px;
.calendar-nav {
width: 100%;
.calendar-title {
flex: 1;
}
position: absolute;
bottom: 0;
right: 0;
}
}
}
.calendar-box {
padding: 0;
}