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

- 在日历组件中新增作业筛选功能，支持按课程类型筛选 - 调整日历折叠状态的点击区域和布局 - 移除部分未使用的样式代码 - 添加作业选择弹窗及相关事件处理

feat(日历组件): 添加作业筛选功能并优化交互
- 在日历组件中新增作业筛选功能，支持按课程类型筛选 - 调整日历折叠状态的点击区域和布局 - 移除部分未使用的样式代码 - 添加作业选择弹窗及相关事件处理
hookehuyr
Commit e15656ca11bfcb77546a16d3ab069a923e8e9fdd e15656ca 1 parent 5183112a
Showing 2 changed files with 111 additions and 17 deletions
src/components/ui/CollapsibleCalendar.vue
src/views/checkin/IndexCheckInPage.vue
--- a/src/components/ui/CollapsibleCalendar.vue
View file @e15656c
+++ b/src/components/ui/CollapsibleCalendar.vue
View file @e15656c
 <!--
  * @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 {
+    // &:hover {
-        transform: translateY(-2px);
+    //     transform: translateY(-2px);
-        box-shadow: 0 8px 30px rgba(76, 175, 80, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
+    //     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);
+    //     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;
+                // overflow: hidden;
-                text-overflow: ellipsis;
+                // text-overflow: ellipsis;
-                white-space: nowrap;
+                // 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>
--- a/src/views/checkin/IndexCheckInPage.vue
View file @e15656c
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @e15656c
 <!--
   * @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 - 打卡类型