Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e15656ca 1 parent 5183112a

feat(日历组件): 添加作业筛选功能并优化交互 

- 在日历组件中新增作业筛选功能，支持按课程类型筛选
- 调整日历折叠状态的点击区域和布局
- 移除部分未使用的样式代码
- 添加作业选择弹窗及相关事件处理
Inline Side-by-side
Showing 2 changed files with 111 additions and 17 deletions
<!--
* @Date: 2025-01-25 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-13 20:03:33
* @LastEditTime: 2025-12-11 09:31:06
* @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue
* @Description: 可折叠日历组件
-->
<template>
<div class="collapsible-calendar ">
<!-- 折叠状态显示 -->
<div v-if="!isExpanded" class="calendar-collapsed" @click="expandCalendar">
<div v-if="!isExpanded" class="calendar-collapsed">
<div class="calendar-header">
<div class="calendar-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
......@@ -16,9 +16,13 @@
<path d="M7 10H9V12H7V10ZM11 10H13V12H11V10ZM15 10H17V12H15V10Z" fill="#4caf50"/>
</svg>
</div>
<div class="calendar-title-wrapper">
<!-- <div class="calendar-date-display">
<div class="calendar-date-main">{{ formattedCurrentDate }}</div>
<div class="calendar-weekday">{{ formattedWeekday }}</div>
</div> -->
<div class="calendar-title-wrapper" @click="expandCalendar">
<div class="calendar-title">{{ title }}</div>
<div class="calendar-subtitle">点击选择日期</div>
<div class="calendar-subtitle">点击切换日期</div>
</div>
</div>
<div class="calendar-content">
......@@ -26,13 +30,24 @@
<div class="calendar-date-main">{{ formattedCurrentDate }}</div>
<div class="calendar-weekday">{{ formattedWeekday }}</div>
</div>
<div class="calendar-action">
<!-- <div class="calendar-action">
<div class="calendar-action-text">指定日期</div>
<div class="calendar-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 10L12 15L17 10H7Z" fill="#4caf50"/>
</svg>
</div>
</div> -->
<div class="calendar-actions-wrapper">
<!-- 作业筛选 -->
<div class="calendar-action course-filter" @click.stop="openCoursePicker">
<div class="calendar-action-text">{{ selectedCourseText }}</div>
<div class="calendar-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 10L12 15L17 10H7Z" fill="#4caf50"/>
</svg>
</div>
</div>
</div>
</div>
</div>
......@@ -61,6 +76,23 @@
</van-calendar>
</div>
</van-popup>
<!-- 作业选择弹窗 -->
<van-popup
v-model:show="showCoursePicker"
round
position="bottom"
:style="{ minHeight: '30%', maxHeight: '80%', width: '100%' }"
>
<van-picker
title="作业选择"
:columns="courseColumns"
@confirm="onConfirmCourse"
@cancel="showCoursePicker = false"
:default-index="0"
/>
</van-popup>
</div>
</template>
......@@ -85,13 +117,37 @@ const props = defineProps({
})
// Emits定义
const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change'])
const emit = defineEmits(['update:modelValue', 'select', 'click-subtitle', 'panel-change', 'select-course'])
// 响应式数据
const isExpanded = ref(false)
const calendarRef = ref(null)
const currentDate = ref(props.modelValue || new Date())
// 作业筛选相关
const showCoursePicker = ref(false)
const selectedCourseText = ref('全部作业')
const courseColumns = [
{ text: '全部作业', value: '' },
{ text: '语文语文语文语文语文语文', value: 'chinese' },
{ text: '数学', value: 'math' },
{ text: '英语', value: 'english' },
{ text: '物理', value: 'physics' },
{ text: '化学', value: 'chemistry' }
]
const openCoursePicker = () => {
showCoursePicker.value = true
}
const onConfirmCourse = (result) => {
// 兼容 Vant 3/4
const option = result.selectedOptions ? result.selectedOptions[0] : result
selectedCourseText.value = option.text
showCoursePicker.value = false
emit('select-course', option.value)
}
// 计算属性：格式化当前日期显示
const formattedCurrentDate = computed(() => {
return dayjs(currentDate.value).format('YYYY年MM月DD日')
......@@ -195,11 +251,11 @@ defineExpose({
border-radius: 16px 16px 0 0;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(76, 175, 80, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
border-color: rgba(76, 175, 80, 0.2);
}
// &:hover {
// transform: translateY(-2px);
// box-shadow: 0 8px 30px rgba(76, 175, 80, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
// border-color: rgba(76, 175, 80, 0.2);
// }
&:active {
transform: translateY(-1px);
......@@ -233,9 +289,9 @@ defineExpose({
color: #2c3e50;
margin-bottom: 2px;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
}
.calendar-subtitle {
......@@ -244,12 +300,30 @@ defineExpose({
font-weight: 400;
}
}
.calendar-date-display {
flex: 0.8;
.calendar-date-main {
font-size: 16px;
font-weight: 600;
color: #34495e;
margin-bottom: 4px;
line-height: 1.2;
}
.calendar-weekday {
font-size: 13px;
color: #4caf50;
font-weight: 500;
}
}
}
.calendar-content {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: end;
gap: 16px;
.calendar-date-display {
......@@ -270,6 +344,14 @@ defineExpose({
}
}
.calendar-actions-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.calendar-action {
display: flex;
align-items: center;
......@@ -321,6 +403,6 @@ defineExpose({
// 自定义日历样式
:deep(.van-popup) {
border-radius: 0 0 12px 12px;
// border-radius: 0 0 12px 12px;
}
</style>
......
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-10 14:08:51
* @LastEditTime: 2025-12-10 21:32:42
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -18,6 +18,7 @@
@select="onSelectDay"
@click-subtitle="onClickSubtitle"
@panel-change="onPanelChange"
@select-course="onSelectCourse"
/>
</div>
......@@ -532,6 +533,17 @@ const onPanelChange = ({ date }) => {
getTaskDetail(dayjs(date).format('YYYY-MM'));
}
const selectedCourseText = ref('')
/**
* 处理作业选择事件
* @param {string} course - 选中的作业
*/
const onSelectCourse = (course) => {
selectedCourseText.value = course.text;
console.warn('选中的作业:', course);
}
/**
* 根据打卡类型获取对应的图标名称
* @param {string} type - 打卡类型
......