feat(日程视图): 重构日程视图页面布局并添加日历功能

重构日程视图页面为左右布局，左侧添加日历导航和任务授权状态筛选功能。右侧显示日程内容区域，支持日/周/月视图切换。新增日历功能包括：
- 月份导航
- 日期选择
- 高亮显示当前日期
- 区分当月/非当月日期

apps/web-ele/src/views/schedule/view/index.vue

@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue';
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import dayjs from 'dayjs';
-import { ElRadioButton, ElRadioGroup } from 'element-plus';
+import { ElCheckbox, ElRadioButton, ElRadioGroup } from 'element-plus';
 
 import CreateTasK from './components/create/index.vue';
 import Day from './components/day/index.vue';
@@ -32,11 +32,22 @@ const searchParams = ref({
   date: getDefaultDate('day'),
 });
 
-// 监听timeType变化，更新默认日期
+// 当前显示的日期
+const currentDate = ref(dayjs());
+
+// 任务授权状态
+const taskStatuses = ref({
+  canAuthorize: true,
+  authorized: true,
+  beAuthorized: true,
+});
+
+// 监听timeType变化，更新默认日期和当前显示日期
 watch(
   () => searchParams.value.timeType,
   (newType) => {
     searchParams.value.date = getDefaultDate(newType);
+    currentDate.value = dayjs(searchParams.value.date);
   },
 );
 
@@ -49,6 +60,109 @@ const weekNumber = computed(() => {
   return dayjs(searchParams.value.date).week();
 });
 
+// 计算当前选中日期所在周的开始和结束日期
+const currentWeekRange = computed(() => {
+  const date = dayjs(searchParams.value.date);
+  // 计算周开始（周一）
+  const startOfWeek = date.startOf('week');
+  // 调整为周一（dayjs默认周日为一周开始）
+  const monday =
+    startOfWeek.day() === 0 ? startOfWeek.subtract(1, 'day') : startOfWeek;
+  // 计算周日
+  const sunday = monday.add(6, 'day');
+  return {
+    start: monday,
+    end: sunday,
+  };
+});
+
+// 生成日历天数
+const calendarDays = computed(() => {
+  const days = [];
+  const year = currentDate.value.year();
+  const month = currentDate.value.month();
+
+  // 获取当月第一天
+  const firstDay = dayjs(new Date(year, month, 1));
+  // 获取当月第一天是星期几（0-6，0是周日）
+  const firstDayOfWeek = firstDay.day();
+  // 计算需要显示的上个月天数
+  const prevMonthDays = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
+
+  // 获取当月最后一天
+  const lastDay = dayjs(new Date(year, month + 1, 0));
+  const lastDate = lastDay.date();
+
+  // 添加上个月的日期
+  for (let i = prevMonthDays; i > 0; i--) {
+    const date = firstDay.subtract(i, 'day');
+    const isInCurrentWeek =
+      searchParams.value.timeType === 'week' &&
+      date.isAfter(currentWeekRange.value.start.subtract(1, 'day')) &&
+      date.isBefore(currentWeekRange.value.end.add(1, 'day'));
+    days.push({
+      date: date.format('YYYY-MM-DD'),
+      day: date.date(),
+      isToday: date.isSame(dayjs(), 'day'),
+      isOtherMonth: true,
+      isInCurrentWeek,
+    });
+  }
+
+  // 添加当月的日期
+  for (let i = 1; i <= lastDate; i++) {
+    const date = dayjs(new Date(year, month, i));
+    const isInCurrentWeek =
+      searchParams.value.timeType === 'week' &&
+      date.isAfter(currentWeekRange.value.start.subtract(1, 'day')) &&
+      date.isBefore(currentWeekRange.value.end.add(1, 'day'));
+    days.push({
+      date: date.format('YYYY-MM-DD'),
+      day: i,
+      isToday: date.isSame(dayjs(), 'day'),
+      isOtherMonth: false,
+      isInCurrentWeek,
+    });
+  }
+
+  // 计算需要显示的下个月天数
+  const totalDays = days.length;
+  const nextMonthDays = 42 - totalDays; // 6行7列=42个格子
+
+  // 添加下个月的日期
+  for (let i = 1; i <= nextMonthDays; i++) {
+    const date = lastDay.add(i, 'day');
+    const isInCurrentWeek =
+      searchParams.value.timeType === 'week' &&
+      date.isAfter(currentWeekRange.value.start.subtract(1, 'day')) &&
+      date.isBefore(currentWeekRange.value.end.add(1, 'day'));
+    days.push({
+      date: date.format('YYYY-MM-DD'),
+      day: date.date(),
+      isToday: date.isSame(dayjs(), 'day'),
+      isOtherMonth: true,
+      isInCurrentWeek,
+    });
+  }
+
+  return days;
+});
+
+// 切换到上个月
+const prevMonth = () => {
+  currentDate.value = currentDate.value.subtract(1, 'month');
+};
+
+// 切换到下个月
+const nextMonth = () => {
+  currentDate.value = currentDate.value.add(1, 'month');
+};
+
+// 选择日期
+const selectDate = (date: string) => {
+  searchParams.value.date = date;
+};
+
 const [CreateTaskDrawer, createTaskDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
   connectedComponent: CreateTasK,
@@ -61,78 +175,128 @@ const createTaskDrawerEvent = () => {
 </script>
 
 <template>
-  <Page title="日程视图">
-    <template #description>
-      <!--筛选区域-->
-      <div class="flex items-center justify-between space-x-4">
-        <div class="flex items-center space-x-4">
+  <Page title="" class="h-screen">
+    <div class="flex h-full flex-row space-x-4">
+      <!--左侧筛选区域-->
+      <div
+        class="relative h-full w-80 flex-shrink-0 overflow-y-auto rounded-lg bg-white p-4 pb-20 shadow"
+      >
+        <!--油站选择-->
+        <div class="mb-4">
           <ElSelect
             v-model="searchParams.station"
             placeholder="请选择油站"
-            class="w-48 min-w-48 max-w-48"
-            style="width: 12rem"
+            class="w-full"
           >
-            <ElOption label="第一站-龙-龙血站" value="1" />
+            <ElOption label="张三站-龙飞加油站" value="1" />
           </ElSelect>
+        </div>
 
-          <ElRadioGroup v-model="searchParams.timeType">
-            <ElRadioButton label="day">日</ElRadioButton>
-            <ElRadioButton label="week">周</ElRadioButton>
-            <ElRadioButton label="month">月</ElRadioButton>
-          </ElRadioGroup>
-          <ElDatePicker
-            v-model="searchParams.date"
-            :type="
-              searchParams.timeType === 'month'
-                ? 'month'
-                : searchParams.timeType === 'week'
-                  ? 'week'
-                  : 'date'
-            "
-            :placeholder="
-              searchParams.timeType === 'month'
-                ? '选择月份'
-                : searchParams.timeType === 'week'
-                  ? '选择周'
-                  : '选择日期'
-            "
-            :format="
-              searchParams.timeType === 'month'
-                ? 'YYYY-MM'
-                : searchParams.timeType === 'week'
-                  ? 'YYYY [年] ww [周]'
-                  : 'YYYY-MM-DD'
-            "
-            :value-format="
-              searchParams.timeType === 'month'
-                ? 'YYYY-MM'
-                : searchParams.timeType === 'week'
-                  ? 'YYYY-MM-DD'
-                  : 'YYYY-MM-DD'
-            "
-            class="w-48 min-w-48 max-w-48"
-            style="width: 12rem"
-          />
+        <!--日期导航和视图切换-->
+        <div class="mb-4">
+          <div class="flex items-center justify-between">
+            <!--时间筛选靠左-->
+            <div class="flex items-center space-x-2">
+              <ElButton type="text" @click="prevMonth">&lt;</ElButton>
+              <span class="font-medium">{{
+                currentDate.format('YYYY年 M月')
+              }}</span>
+              <ElButton type="text" @click="nextMonth">&gt;</ElButton>
+            </div>
+
+            <!--视图切换靠右-->
+            <ElRadioGroup v-model="searchParams.timeType" size="small">
+              <ElRadioButton label="day">日</ElRadioButton>
+              <ElRadioButton label="week">周</ElRadioButton>
+              <ElRadioButton label="month">月</ElRadioButton>
+            </ElRadioGroup>
+          </div>
+
+          <!--日历显示-->
+          <div class="calendar-container mt-1">
+            <!--星期标题-->
+            <div class="mb-1 flex justify-between text-xs text-gray-500">
+              <div class="w-7 text-center">一</div>
+              <div class="w-7 text-center">二</div>
+              <div class="w-7 text-center">三</div>
+              <div class="w-7 text-center">四</div>
+              <div class="w-7 text-center">五</div>
+              <div class="w-7 text-center">六</div>
+              <div class="w-7 text-center">日</div>
+            </div>
+
+            <!--日期网格-->
+            <div class="grid grid-cols-7 gap-1">
+              <div
+                v-for="day in calendarDays"
+                :key="day.date"
+                class="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-xs"
+                :class="{
+                  'bg-blue-100 text-blue-600': day.isToday,
+                  'bg-blue-50 text-blue-700':
+                    day.isInCurrentWeek && !day.isToday,
+                  'bg-gray-100 text-gray-400': day.isOtherMonth,
+                  'hover:bg-gray-100': !day.isOtherMonth,
+                }"
+                @click="selectDate(day.date)"
+              >
+                {{ day.day }}
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div class="flex items-center space-x-4">
-          <ElButton type="primary" @click="createTaskDrawerEvent">
-            油站新增任务
-          </ElButton>
-          <ElButton type="primary"> 访客新增任务 </ElButton>
-          <ElButton type="primary"> 任务转接 </ElButton>
+        <!--任务授权状态-->
+        <div class="mb-4">
+          <div class="mb-2 font-medium">任务授权状态：</div>
+          <div class="space-y-1">
+            <ElCheckbox v-model="taskStatuses.canAuthorize">
+              任务可授权
+            </ElCheckbox>
+            <ElCheckbox v-model="taskStatuses.authorized">
+              任务已授权
+            </ElCheckbox>
+            <ElCheckbox v-model="taskStatuses.beAuthorized">
+              任务被授权
+            </ElCheckbox>
+          </div>
         </div>
+
+        <!--新增任务按钮固定在底部-->
+        <div class="absolute bottom-0 left-0 w-full bg-white p-4">
+          <div class="space-y-2">
+            <ElButton
+              type="primary"
+              class="w-full"
+              @click="createTaskDrawerEvent"
+            >
+              + 油站新增任务
+            </ElButton>
+          </div>
+          <div class="mt-1 space-y-2">
+            <ElButton type="default" class="w-full"> + 访客新增任务 </ElButton>
+          </div>
+        </div>
+      </div>
+
+      <!--右侧内容区域-->
+      <div class="h-full flex-1 overflow-y-auto">
+        <ElCard class="h-full w-full">
+          <div class="h-full">
+            <Day v-if="searchParams.timeType === 'day'" />
+            <Week
+              v-if="searchParams.timeType === 'week'"
+              :year="year"
+              :week-number="weekNumber"
+            />
+            <Month
+              v-if="searchParams.timeType === 'month'"
+              :month="currentDate.month() + 1"
+            />
+          </div>
+        </ElCard>
       </div>
-    </template>
-    <ElCard class="mb-5 w-full">
-      <Day v-if="searchParams.timeType === 'day'" />
-      <Week
-        v-if="searchParams.timeType === 'week'"
-        :year="year"
-        :week-number="weekNumber"
-      />
-      <Month v-if="searchParams.timeType === 'month'" :year="year" />
-    </ElCard>
+    </div>
     <CreateTaskDrawer />
   </Page>
 </template>