@phelan/design 0.0.1

package/packages/components/src/calendar/src/calendar.vue

@@ -0,0 +1,962 @@
+<template>
+  <el-calendar
+    ref="calendarRef"
+    class="m-calendar"
+    v-model="innerValue"
+    v-bind="calendarAttrs"
+    :range="props.range"
+    @update:model-value="handleUpdateModelValue"
+  >
+    <!-- 甘特图模式：使用自定义的 date-cell slot -->
+    <template
+      v-if="isGanttMode"
+      #date-cell="{ data: { day, type } }"
+    >
+      <div class="gantt-calendar-cell">
+        <!-- 日期 start -->
+        <div
+          class="gantt-calendar-cell-day"
+          :class="dataClass(type)"
+          v-text="dayLabel(day)"
+        ></div>
+        <!-- 日期 end -->
+
+        <!-- 甘特图任务 start -->
+        <div class="gantt-calendar-cell-tasks">
+          <el-popover
+            v-for="task in ganttTasks(day)"
+            trigger="click"
+            :key="task.id"
+            placement="bottom-start"
+            :teleported="false"
+            @show="handlePopoverShow($event, task)"
+            @hide="handlePopoverHide($event, task)"
+            :hide-after="0"
+            :disabled="task.type == 'empty'"
+            :popper-style="{
+              padding: 0,
+              'border-radius': '6px',
+              overflow: 'hidden',
+              width: '220px',
+            }"
+          >
+            <!-- reference start -->
+            <template #reference>
+              <!-- 如果用户提供了 task-item 插槽，则使用自定义插槽 -->
+              <slot
+                v-if="slots['task-item']"
+                name="task-item"
+                :day="day"
+                :task="task"
+                :taskClass="taskClass(task)"
+                :taskLabel="taskLabel(task)"
+                :shouldShowTaskName="shouldShowTaskName(task)"
+                :taskStyle="{
+                  width: isExtraTask(task)
+                    ? '100%'
+                    : `calc(100% * ${(task as GanttTask).weekDuration ?? 1})`,
+                }"
+              ></slot>
+              <!-- 否则使用默认样式 -->
+              <template v-else>
+                <!-- +N 数据处理  -->
+                <div
+                  class="gantt-calendar-cell-task is-extra"
+                  @click.stop
+                  v-if="isExtraTask(task)"
+                >
+                  <div
+                    class="gantt-calendar-cell-task-name"
+                    v-text="taskLabel(task)"
+                  ></div>
+                </div>
+
+                <!-- 单日任务的处理 -->
+                <div
+                  class="gantt-calendar-cell-task is-single"
+                  @click.stop
+                  :class="{ 'task-ended': task.isEnded, 'task-clicked': task.isClicked }"
+                  :style="{
+                    backgroundColor: task?.bgColor ?? '',
+                    color: task?.brandColor ?? '',
+                  }"
+                  v-else-if="(task as GanttTask).taskNodeFlag === 'single'"
+                >
+                  <div
+                    class="gantt-calendar-cell-task-name"
+                    v-text="taskLabel(task)"
+                  ></div>
+                </div>
+
+                <!-- 跨天任务的head的处理 -->
+                <div
+                  class="gantt-calendar-cell-task is-head"
+                  @click.stop
+                  v-else-if="(task as GanttTask).taskNodeFlag === 'head'"
+                  :class="{
+                    'task-ended': task.isEnded,
+                    'task-clicked': task.isClicked,
+                    'is-week-head': task.weekSegmentIndex === 1,
+                  }"
+                  :style="{
+                    width: `calc(100% * ${(task as GanttTask).weekDuration ?? 1} + ${(task as GanttTask).weekDuration ?? 1}px - ${task.weekSegmentIndex === 1 ? 6 : 0}px)`,
+                    backgroundColor: task?.bgColor ?? '',
+                    color: task?.brandColor ?? '',
+                  }"
+                >
+                  <div
+                    v-if="shouldShowTaskName(task)"
+                    class="gantt-calendar-cell-task-name"
+                    v-text="taskLabel(task)"
+                  ></div>
+                </div>
+
+                <!-- 跨周任务任其他节点的处理 -->
+                <div
+                  class="gantt-calendar-cell-task"
+                  @click.stop
+                  v-else-if="
+                    (task as GanttTask).taskNodeFlag === 'middle' ||
+                    (task as GanttTask).taskNodeFlag === 'end'
+                  "
+                  :class="[...taskClass(task), task.isEnded ? 'task-ended' : '']"
+                >
+                  <div
+                    class="gantt-calendar-cell-task-name"
+                    v-text="task.taskNodeFlag"
+                  ></div>
+                </div>
+                <!-- 占位任务的处理 -->
+                <div
+                  class="gantt-calendar-cell-task is-empty"
+                  @click.stop
+                  v-else-if="task.type === 'empty'"
+                >
+                  <div
+                    class="gantt-calendar-cell-task-name"
+                    v-text="task.type"
+                  ></div>
+                </div>
+                <div
+                  class="gantt-calendar-cell-task"
+                  @click.stop
+                  v-else
+                  :class="{ 'task-ended': task.isEnded }"
+                >
+                  <div
+                    class="gantt-calendar-cell-task-name"
+                    v-text="task.name"
+                  ></div>
+                </div>
+              </template>
+            </template>
+            <!-- reference end -->
+
+            <!-- 浮层 start -->
+            <template #default>
+              <!-- 如果用户提供了 task-popover 插槽，则使用自定义插槽 -->
+              <slot
+                v-if="slots['task-popover']"
+                name="task-popover"
+                :day="day"
+                :task="task"
+                :isExtraTask="isExtraTask(task)"
+                :hoverTasks="hoverTasks(day, task)"
+              ></slot>
+              <!-- 否则使用默认样式 -->
+              <div
+                v-else
+                class="gantt-calendar-cell-task-popover"
+              >
+                <div
+                  class="gantt-calendar-cell-task-popover-header"
+                  :style="{ backgroundColor: task?.brandColor ?? '' }"
+                ></div>
+                <div
+                  class="gantt-calendar-cell-task-popover-title"
+                  v-text="dayjs(day).format('YYYY/MM/DD')"
+                ></div>
+                <div
+                  v-if="isExtraTask(task)"
+                  class="gantt-calendar-cell-task-popover-body"
+                >
+                  <div
+                    class="gantt-calendar-cell-task-popover-body-group"
+                    :style="{ color: item?.brandColor ?? '' }"
+                    v-for="item in hoverTasks(day, task)"
+                    :key="task.id"
+                  >
+                    <div
+                      class="gantt-calendar-cell-task-popover-body-group-title"
+                      v-text="dayjs(item.startTime).format('HH:mm')"
+                    ></div>
+                    <div
+                      class="gantt-calendar-cell-task-popover-body-group-content"
+                      v-text="item.name"
+                    ></div>
+                  </div>
+                </div>
+                <div
+                  v-else
+                  class="gantt-calendar-cell-task-popover-content"
+                  v-text="task.name"
+                ></div>
+              </div>
+            </template>
+            <!-- 浮层 end -->
+          </el-popover>
+        </div>
+        <!-- 甘特图任务 end -->
+      </div>
+    </template>
+
+    <!-- 默认模式：透传用户自定义的 date-cell slot -->
+    <template
+      v-else-if="slots['date-cell']"
+      #date-cell="props"
+    >
+      <slot
+        name="date-cell"
+        v-bind="props"
+      ></slot>
+    </template>
+
+    <!-- 透传所有其他 Element Plus Calendar 的插槽（如 header 等） -->
+    <template
+      v-for="name in calendarSlots"
+      :key="name"
+      #[name]="slotProps"
+    >
+      <slot
+        :name="name"
+        v-bind="slotProps || {}"
+      ></slot>
+    </template>
+  </el-calendar>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  nextTick,
+  ref,
+  useAttrs,
+  useSlots,
+  watch,
+} from 'vue';
+import type { MaybeDate, GanttTask, CalendarProps, TaskNodeFlag } from './calendar';
+import { dayjs } from 'element-plus';
+
+const props = withDefaults(defineProps<CalendarProps>(), {});
+
+// 定义所有可能的事件，透传 Element Plus Calendar 的所有事件
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: MaybeDate): void;
+  // 透传 Element Plus Calendar 的其他事件
+  [key: string]: (...args: any[]) => void;
+}>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+
+// 计算需要透传给 el-calendar 的插槽（排除组件内部使用的插槽）
+const calendarSlots = computed(() => {
+  const excludedSlots = ['date-cell', 'task-item', 'task-popover'];
+  const slotNames: string[] = [];
+  Object.keys(slots).forEach((name) => {
+    if (!excludedSlots.includes(name)) {
+      slotNames.push(name);
+    }
+  });
+  return slotNames;
+});
+
+// 过滤掉组件自己的 props，只保留需要透传给 el-calendar 的属性
+const calendarAttrs = computed(() => {
+  const excludedKeys = ['tasks', 'range'];
+  const filtered: Record<string, any> = {};
+
+  Object.keys(attrs).forEach((key) => {
+    // 排除组件自己的 props
+    if (!excludedKeys.includes(key)) {
+      filtered[key] = attrs[key];
+    }
+  });
+
+  return filtered;
+});
+
+// 处理 modelValue 更新事件
+const handleUpdateModelValue = (value: MaybeDate) => {
+  innerValue.value = value ?? dayjs().toDate();
+  emit('update:modelValue', value);
+};
+
+// 默认选中日期，初始取父层 modelValue 或当前时间
+const innerValue = ref<MaybeDate>(props.modelValue ?? dayjs().toDate());
+const calendarRef = ref<any>(null);
+
+const TASK_HEIGHT = 20;
+const TASK_GAP = 8;
+const maxDisplay = ref(3);
+const isGanttMode = computed(() => Array.isArray(props.tasks) && props.tasks.length > 0);
+
+let resizeObserver: ResizeObserver | null = null;
+
+const calcMaxDisplay = () => {
+  const root = calendarRef.value?.$el as HTMLElement | null;
+  if (!root) return;
+  const cell = root.querySelector('.gantt-calendar-cell') as HTMLElement | null;
+  if (!cell) return;
+  const dayEl = cell.querySelector('.gantt-calendar-cell-day') as HTMLElement | null;
+  const tasksEl = cell.querySelector('.gantt-calendar-cell-tasks') as HTMLElement | null;
+  const availableHeight = tasksEl?.clientHeight ?? cell.clientHeight - (dayEl?.clientHeight ?? 0);
+  if (!availableHeight || availableHeight <= 0) return;
+  const rowHeight = TASK_HEIGHT + TASK_GAP;
+  const display = Math.max(1, Math.floor((availableHeight + TASK_GAP) / rowHeight));
+  maxDisplay.value = display;
+};
+
+const handlePopoverShow = (_event: Event, task: GanttTask) => {
+  // 将所有与当前 task.id 相同的任务标记为已点击
+  Object.values(normalizedTasks.value).forEach((dayTasks) => {
+    dayTasks?.forEach((item) => {
+      if (item.id === task.id) {
+        item.isClicked = true;
+      }
+    });
+  });
+};
+
+const handlePopoverHide = (_event: Event, task: GanttTask) => {
+  // 将所有与当前 task.id 相同的任务还原为未点击
+  Object.values(normalizedTasks.value).forEach((dayTasks) => {
+    dayTasks?.forEach((item) => {
+      if (item.id === task.id) {
+        item.isClicked = false;
+      }
+    });
+  });
+};
+// 获取某日需要展示的任务列表（使用 ref，便于后续在任务对象上做响应式修改）
+const normalizedTasks = ref<Record<string, GanttTask[]>>({});
+
+// 监听父层传入的 v-model，同步到内部
+watch(
+  () => props.modelValue,
+  (v: MaybeDate | undefined) => {
+    if (v !== innerValue.value) innerValue.value = v ?? dayjs().toDate();
+  },
+);
+
+// 内部变动回推父层 v-model
+watch(innerValue, (v: MaybeDate) => emit('update:modelValue', v));
+
+onMounted(() => {
+  nextTick(() => {
+    calcMaxDisplay();
+    const root = calendarRef.value?.$el as HTMLElement | null;
+    const cell = root?.querySelector('.m-calendar') as HTMLElement | null;
+    if (cell && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => calcMaxDisplay());
+      resizeObserver.observe(cell);
+      // const tasksEl = cell.querySelector('.gantt-calendar-cell-tasks') as HTMLElement | null;
+      // if (tasksEl) resizeObserver.observe(tasksEl);
+    }
+    window.addEventListener('resize', calcMaxDisplay);
+  });
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  window.removeEventListener('resize', calcMaxDisplay);
+});
+
+// 将 yyyy-MM-dd 提取日数字展示
+const dayLabel = (day: string) => {
+  const d = dayjs(day);
+  return d.isValid() ? String(d.date()) : day;
+};
+
+// 补齐数组，确保laneIndex从0开始连续
+const fillArrayFromZero = (arr: GanttTask[]): GanttTask[] => {
+  if (arr.length === 0) return arr;
+
+  // 找到最小的laneIndex
+  const laneIndexes = arr.map(
+    (item: GanttTask) => (item as GanttTask & { laneIndex?: number }).laneIndex ?? 0,
+  );
+  const minIndex = Math.min(...laneIndexes);
+
+  // 如果最小laneIndex已经是0，直接返回原数组
+  if (minIndex === 0) {
+    return arr;
+  }
+
+  // 需要补齐的元素数量
+  const fillCount = minIndex;
+
+  // 创建补齐的占位元素（从0到minIndex-1）
+  // 使用null作为占位符，后续在渲染时过滤掉
+  const fillItems: any[] = [];
+  for (let i = 0; i < fillCount; i++) {
+    fillItems.push({
+      id: `empty${i}`,
+      name: 'empty',
+      startTime: '',
+      endTime: '',
+      type: 'empty',
+      taskNodeFlag: null,
+      disabled: true,
+      laneIndex: i,
+    });
+  }
+
+  // 合并补齐的元素和原数组
+  return [...fillItems, ...arr] as GanttTask[];
+};
+
+// 处理甘特图展示的任务
+const ganttTasks = (day: string): GanttTask[] => {
+  if (
+    day &&
+    Object.prototype.hasOwnProperty.call(normalizedTasks.value, day) &&
+    normalizedTasks.value[day]
+  ) {
+    const curDayTasks = normalizedTasks.value[day] || [];
+    const filledTasks = fillArrayFromZero(curDayTasks);
+    const taskNum = filledTasks.length;
+    if (taskNum > maxDisplay.value) {
+      const extraTask: GanttTask = {
+        id: `extra-${day}`,
+        name: 'extra',
+        startTime: '--',
+        endTime: '--',
+        isExtra: true,
+        type: 'extra',
+        extraCount: taskNum - maxDisplay.value + 1,
+      };
+      return [...filledTasks.slice(0, maxDisplay.value - 1), extraTask] as GanttTask[];
+    } else {
+      return filledTasks as GanttTask[];
+    }
+  } else {
+    return [];
+  }
+};
+
+// 处理鼠标悬浮展示的任务
+const hoverTasks = (day: string, task: GanttTask): GanttTask[] => {
+  if (isExtraTask(task)) {
+    if (
+      day &&
+      Object.prototype.hasOwnProperty.call(normalizedTasks.value, day) &&
+      normalizedTasks.value[day]
+    ) {
+      return normalizedTasks.value[day];
+    } else {
+      return [];
+    }
+  } else {
+    return [task];
+  }
+};
+
+// 类型守卫：识别额外占位任务
+const isExtraTask = (task: GanttTask): boolean => task.isExtra === true;
+
+// 任务展示文本，额外任务显示 +N
+const taskLabel = (task: GanttTask) => {
+  if (isExtraTask(task)) {
+    return `+${task.extraCount}`;
+  } else {
+    if (task.startTime) {
+      const d = dayjs(task.startTime);
+      if (d.isValid()) {
+        return `${d.format('HH:mm:ss')} ${task.name}`;
+      }
+    }
+    return task.name;
+  }
+};
+
+// 判断是否应该显示任务名称
+// head 和 single 显示，middle 和 end 不显示
+const shouldShowTaskName = (task: GanttTask) => {
+  if (isExtraTask(task)) return true; // 额外任务始终显示
+  const { taskNodeFlag } = task as GanttTask;
+  return taskNodeFlag === 'head' || taskNodeFlag === 'single';
+};
+
+// 日期 class
+const dataClass = (type: 'prev-month' | 'next-month' | 'current-month') => {
+  const classes = [];
+  if (type === 'prev-month') classes.push('is-prev-month');
+  if (type === 'next-month') classes.push('is-next-month');
+  if (type === 'current-month') classes.push('is-current-month');
+  return classes.join(' ');
+};
+
+// 任务 class，包含类型与区间位置
+const taskClass = (task: GanttTask) => {
+  const { taskNodeFlag } = task as GanttTask;
+  const posClass = [];
+  if (taskNodeFlag === 'head') {
+    posClass.push('is-head');
+  } else if (taskNodeFlag === 'middle') {
+    posClass.push('is-middle');
+  } else if (taskNodeFlag === 'end') {
+    posClass.push('is-end');
+  } else if (taskNodeFlag === 'single') {
+    posClass.push('is-single');
+  }
+  return posClass.filter(Boolean);
+};
+
+// 获取月份的周数据
+// @param month - 月份，可以是 Date、dayjs 对象或字符串（如 '2024-12' 或 '2024-12-01'）
+// @param startOfWeek - 每周开始的天数，0=周日，1=周一，2=周二...，默认1（周一）
+// @returns 返回对象，格式如 {week1: ['11-30', '12-01', '12-02', ...], week2: [...]}，每周数组长度为7
+const getMonthWeekData = (
+  month: string | Date | ReturnType<typeof dayjs>,
+  startOfWeek: number = 1,
+): Record<string, string[]> => {
+  const monthStart = dayjs(month).startOf('month');
+  const monthEnd = dayjs(month).endOf('month');
+
+  if (!monthStart.isValid()) {
+    return {};
+  }
+
+  const result: Record<string, string[]> = {};
+
+  // dayjs中0=周日, 1=周一, ..., 6=周六
+  const dayjsStartOfWeek = startOfWeek === 0 ? 0 : startOfWeek;
+
+  // 计算月份第一天的周起始日期（可能是上个月的日期）
+  const firstDayOfWeek = monthStart.day();
+  let daysToFirstWeekStart = 0;
+
+  if (firstDayOfWeek >= dayjsStartOfWeek) {
+    daysToFirstWeekStart = firstDayOfWeek - dayjsStartOfWeek;
+  } else {
+    daysToFirstWeekStart = 7 - (dayjsStartOfWeek - firstDayOfWeek);
+  }
+  const firstWeekStart = monthStart.clone().subtract(daysToFirstWeekStart, 'day');
+
+  // 计算月份最后一天的周结束日期（可能是下个月的日期）
+  const lastDayOfWeek = monthEnd.day();
+
+  // 计算周结束日（周起始日的前一天）
+  // 如果 startOfWeek = 1（周一），周结束日是 0（周日）
+  // 如果 startOfWeek = 0（周日），周结束日是 6（周六）
+  const weekEndDay = (dayjsStartOfWeek + 6) % 7;
+
+  let daysToLastWeekEnd = 0;
+  if (lastDayOfWeek <= weekEndDay) {
+    daysToLastWeekEnd = weekEndDay - lastDayOfWeek;
+  } else {
+    daysToLastWeekEnd = 7 - (lastDayOfWeek - weekEndDay);
+  }
+  const lastWeekEnd = monthEnd.clone().add(daysToLastWeekEnd, 'day');
+
+  // 按周遍历，确保每周都有7天
+  let weekStart = firstWeekStart.clone();
+  let weekIndex = 1;
+
+  while (weekStart.isBefore(lastWeekEnd, 'day') || weekStart.isSame(lastWeekEnd, 'day')) {
+    const weekKey = `week${weekIndex}`;
+    result[weekKey] = [];
+
+    // 每周添加7天
+    for (let i = 0; i < 7; i++) {
+      const currentDate = weekStart.clone().add(i, 'day');
+      result[weekKey].push(currentDate.format('MM-DD'));
+    }
+
+    // 移动到下一周
+    weekStart = weekStart.add(7, 'day');
+    weekIndex++;
+  }
+
+  return result;
+};
+
+// 将平铺任务数组转为按日期的map，便于直接使用
+const toDateMap = (tasks: GanttTask[]): Record<string, GanttTask[]> => {
+  // 使用当前选中的日期或当前日期来获取月份数据
+  const currentDate = innerValue.value ? dayjs(innerValue.value) : dayjs();
+  const monthWeekData = getMonthWeekData(currentDate.format('YYYY-MM'), props.firstDayOfWeek ?? 0);
+  // 按开始时间排序任务
+  const sortedTasksByStartTime = [...tasks].sort((a, b) => {
+    if (!a.startTime || !b.startTime) return 0;
+    const startA = dayjs(a.startTime);
+    const startB = dayjs(b.startTime);
+    if (!startA.isValid() || !startB.isValid()) return 0;
+    return startA.valueOf() - startB.valueOf();
+  });
+
+  // 将任务拆分到周维度，并标注交集
+  const weekTaskMap: Record<
+    string,
+    Array<
+      GanttTask & {
+        weekStart?: string; // 交集开始时间（包含时分秒）
+        weekEnd?: string; // 交集结束时间（包含时分秒）
+        weekDuration?: number; // 周期长度（天数）
+        weekDailyDates?: string[]; // 每天的日期数组
+      }
+    >
+  > = {};
+
+  // 获取当前月份信息，用于解析周日期
+  const currentMonth = dayjs(currentDate.format('YYYY-MM'));
+  const currentYear = currentMonth.year();
+
+  // 辅助函数：将 'MM-DD' 格式转换为完整的日期
+  // 注意：monthWeekData 只存 MM-DD，需要结合当前月份判断是上个月、当月还是下个月
+  const parseWeekDate = (dateStr: string): ReturnType<typeof dayjs> => {
+    const parts = dateStr.split('-');
+    if (parts.length !== 2) {
+      return dayjs().startOf('day');
+    }
+    const month = Number(parts[0]);
+    const day = Number(parts[1]);
+
+    if (isNaN(month) || isNaN(day)) {
+      return dayjs().startOf('day');
+    }
+
+    // 当前月索引（0-11）
+    const curMonthIndex = currentMonth.month(); // 0-11
+    const targetMonthIndex = month - 1; // 0-11
+    const diff = (targetMonthIndex - curMonthIndex + 12) % 12;
+
+    // diff 含义：
+    // 0  -> 当月
+    // 1  -> 下一个月
+    // 11 -> 上一个月
+    if (diff === 11) {
+      // 上一个月（可能跨年，例如：当前是 1 月，上一月是上一年的 12 月）
+      const prevMonth = currentMonth.subtract(1, 'month');
+      return dayjs(
+        `${prevMonth.year()}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      );
+    } else if (diff === 1) {
+      // 下一个月（可能跨年，例如：当前是 12 月，下一个月是下一年的 1 月）
+      const nextMonth = currentMonth.add(1, 'month');
+      return dayjs(
+        `${nextMonth.year()}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      );
+    } else {
+      // 当月
+      return dayjs(
+        `${currentYear}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      );
+    }
+  };
+
+  // 遍历每一周
+  Object.keys(monthWeekData).forEach((weekKey) => {
+    const weekDays = monthWeekData[weekKey];
+    if (!weekDays || weekDays.length === 0) return;
+
+    // 获取该周的第一天和最后一天
+    const firstDayStr = weekDays?.[0];
+    const lastDayStr = weekDays?.[weekDays.length - 1];
+
+    if (!firstDayStr || !lastDayStr) return;
+
+    const weekStart = parseWeekDate(firstDayStr).startOf('day');
+    const weekEnd = parseWeekDate(lastDayStr).endOf('day');
+
+    if (!weekStart.isValid() || !weekEnd.isValid()) return;
+
+    // 遍历所有任务，检查是否与该周有交集
+    sortedTasksByStartTime.forEach((task) => {
+      if (!task.startTime || !task.endTime) return;
+
+      const taskStart = dayjs(task.startTime).startOf('day');
+      const taskEnd = dayjs(task.endTime).endOf('day');
+
+      if (!taskStart.isValid() || !taskEnd.isValid()) return;
+
+      // 检查任务周期是否与该周有交集
+      // 有交集的条件：taskStart <= weekEnd && taskEnd >= weekStart
+      const isBeforeOrSame = taskStart.isBefore(weekEnd, 'day') || taskStart.isSame(weekEnd, 'day');
+      const isAfterOrSame = taskEnd.isAfter(weekStart, 'day') || taskEnd.isSame(weekStart, 'day');
+      if (isBeforeOrSame && isAfterOrSame) {
+        // 计算交集部分（日期级别）
+        const intersectionStartDate = taskStart.isAfter(weekStart) ? taskStart : weekStart;
+        const intersectionEndDate = taskEnd.isBefore(weekEnd) ? taskEnd : weekEnd;
+
+        // 获取任务的时分秒信息
+        const taskStartDateTime = dayjs(task.startTime);
+        const taskEndDateTime = dayjs(task.endTime);
+
+        // 构建交集的开始时间（使用任务的时分秒，如果交集开始日期是任务开始日期）
+        // 否则使用当天的 00:00:00
+        let intersectionStartDateTime: ReturnType<typeof dayjs>;
+        if (intersectionStartDate.isSame(taskStart, 'day')) {
+          // 交集开始日期就是任务开始日期，使用任务的时分秒
+          intersectionStartDateTime = taskStartDateTime;
+        } else {
+          // 交集开始日期是周的开始日期，使用当天的 00:00:00
+          intersectionStartDateTime = intersectionStartDate.startOf('day');
+        }
+
+        // 构建交集的结束时间（使用任务的时分秒，如果交集结束日期是任务结束日期）
+        // 否则使用当天的 23:59:59
+        let intersectionEndDateTime: ReturnType<typeof dayjs>;
+        if (intersectionEndDate.isSame(taskEnd, 'day')) {
+          // 交集结束日期就是任务结束日期，使用任务的时分秒
+          intersectionEndDateTime = taskEndDateTime;
+        } else {
+          // 交集结束日期是周的结束日期，使用当天的 23:59:59
+          intersectionEndDateTime = intersectionEndDate.endOf('day');
+        }
+
+        // 计算周期长度（包含首尾的天数）
+        const duration = intersectionEndDate.diff(intersectionStartDate, 'day') + 1;
+
+        // 生成每天的日期数组
+        const dailyDates: string[] = [];
+        let iterDate = intersectionStartDate.startOf('day');
+        while (
+          iterDate.isBefore(intersectionEndDate, 'day') ||
+          iterDate.isSame(intersectionEndDate, 'day')
+        ) {
+          dailyDates.push(iterDate.format('YYYY-MM-DD'));
+          iterDate = iterDate.add(1, 'day');
+        }
+
+        // 初始化该周的任务数组
+        if (!weekTaskMap[weekKey]) {
+          weekTaskMap[weekKey] = [];
+        }
+
+        // 添加任务，并标注交集信息
+        weekTaskMap[weekKey].push({
+          ...task,
+          weekStart: intersectionStartDateTime.format('YYYY-MM-DD HH:mm:ss'),
+          weekEnd: intersectionEndDateTime.format('YYYY-MM-DD HH:mm:ss'),
+          weekDuration: duration,
+          weekDailyDates: dailyDates,
+        });
+      }
+    });
+  });
+
+  // 对每周的数据进行排序：先按 weekStart 排序，如果相同则按 weekDuration 排序
+  Object.keys(weekTaskMap).forEach((weekKey) => {
+    const weekTasks = weekTaskMap[weekKey];
+    if (!weekTasks) return;
+    weekTasks.sort((a, b) => {
+      // 先按 weekStart 排序
+      const weekStartA = (a as GanttTask & { weekStart?: string }).weekStart;
+      const weekStartB = (b as GanttTask & { weekStart?: string }).weekStart;
+      if (weekStartA && weekStartB) {
+        const startA = dayjs(weekStartA);
+        const startB = dayjs(weekStartB);
+        if (startA.isValid() && startB.isValid()) {
+          const diff = startA.valueOf() - startB.valueOf();
+          if (diff !== 0) {
+            return diff;
+          }
+        }
+      }
+
+      // 如果 weekStart 相同或不存在，按 weekDuration 排序
+      const durationA = (a as GanttTask & { weekDuration?: number }).weekDuration ?? 0;
+      const durationB = (b as GanttTask & { weekDuration?: number }).weekDuration ?? 0;
+      return durationA - durationB;
+    });
+  });
+
+  // 为每周的任务分配车道索引
+  Object.keys(weekTaskMap).forEach((weekKey) => {
+    const weekTasks = weekTaskMap[weekKey];
+    if (!weekTasks) return;
+    const laneMap = new Map<string | number, number>();
+    // 维护每个车道的最后结束时间
+    const laneEndTimes: number[] = [];
+
+    // 遍历已排序的任务，分配车道
+    weekTasks.forEach((task) => {
+      const taskWithWeek = task as GanttTask & { weekStart?: string; weekEnd?: string };
+      if (!taskWithWeek.weekStart || !taskWithWeek.weekEnd) return;
+
+      const start = dayjs(taskWithWeek.weekStart);
+      const end = dayjs(taskWithWeek.weekEnd);
+      if (!start.isValid() || !end.isValid()) return;
+
+      const startTime = start.valueOf();
+      const endTime = end.valueOf();
+
+      // 找到第一个可用的车道（车道的结束时间 <= 任务开始时间）
+      let assignedLane = -1;
+      for (let i = 0; i < laneEndTimes.length; i++) {
+        const laneEndTime = laneEndTimes[i];
+        if (laneEndTime !== undefined && laneEndTime <= startTime) {
+          assignedLane = i;
+          break;
+        }
+      }
+
+      // 如果没有可用车道，创建新车道
+      if (assignedLane === -1) {
+        assignedLane = laneEndTimes.length;
+        laneEndTimes.push(endTime);
+      } else {
+        // 更新车道的结束时间
+        laneEndTimes[assignedLane] = endTime;
+      }
+
+      laneMap.set(task.id, assignedLane);
+    });
+
+    // 将车道索引添加到任务中
+    weekTasks.forEach((task) => {
+      const laneIndex = laneMap.get(task.id);
+      if (laneIndex !== undefined) {
+        task.laneIndex = laneIndex;
+      }
+    });
+  });
+
+  // 为跨周任务打上「第几周」的片段标记（weekSegmentIndex）
+  const weekKeysSorted = Object.keys(weekTaskMap).sort((a, b) => {
+    const numA = Number(a.replace('week', '')) || 0;
+    const numB = Number(b.replace('week', '')) || 0;
+    return numA - numB;
+  });
+  const segmentIndexMap = new Map<string | number, number>();
+  weekKeysSorted.forEach((weekKey) => {
+    const weekTasks = weekTaskMap[weekKey];
+    if (!weekTasks) return;
+    weekTasks.forEach((task) => {
+      const prev = segmentIndexMap.get(task.id) ?? 0;
+      const next = prev + 1;
+      segmentIndexMap.set(task.id, next);
+      (task as GanttTask & { weekSegmentIndex?: number }).weekSegmentIndex = next;
+    });
+  });
+
+  const dayTaskMap: Record<string, GanttTask[]> = {};
+
+  // 将 weekTaskMap 拆分成按天为维度的数据
+  Object.keys(weekTaskMap).forEach((weekKey) => {
+    const weekTasks = weekTaskMap[weekKey];
+    if (!weekTasks) return;
+
+    weekTasks.forEach((task) => {
+      // 如果没有 weekDailyDates，跳过
+      if (!task.weekDailyDates || task.weekDailyDates.length === 0) return;
+
+      const dailyDates = task.weekDailyDates;
+      const duration = task.weekDuration ?? 1;
+
+      // 遍历该任务的每一天
+      dailyDates.forEach((dateStr, index) => {
+        // 判断任务在该天的位置标识
+        let taskNodeFlag: TaskNodeFlag;
+        if (duration === 1) {
+          // 单天任务
+          taskNodeFlag = 'single';
+        } else if (index === 0) {
+          // 第一天：开始
+          taskNodeFlag = 'head';
+        } else if (index === dailyDates.length - 1) {
+          // 最后一天：结束
+          taskNodeFlag = 'end';
+        } else {
+          // 中间天
+          taskNodeFlag = 'middle';
+        }
+
+        // 将日期格式转换为 YYYY-MM-DD
+        // weekDailyDates 中已经是 YYYY-MM-DD 格式，直接使用
+        const fullDateStr = dateStr;
+
+        // 初始化该日期的任务数组
+        if (!dayTaskMap[fullDateStr]) {
+          dayTaskMap[fullDateStr] = [];
+        }
+
+        // 判断任务是否已结束（比较任务结束日期和当前日期）
+        const taskEndDate = dayjs(task.endTime).startOf('day');
+        const today = dayjs().startOf('day');
+        const isEnded = taskEndDate.isValid() && today.isValid() && taskEndDate.isBefore(today);
+
+        // 添加任务到该日期，包含位置标识、车道索引、结束状态以及跨周标记
+        dayTaskMap[fullDateStr].push({
+          ...task,
+          taskNodeFlag,
+          laneIndex: task.laneIndex ?? 0,
+          isEnded,
+          weekSegmentIndex: (task as GanttTask & { weekSegmentIndex?: number }).weekSegmentIndex,
+        });
+      });
+    });
+  });
+
+  // 对每个日期的任务按车道索引排序，确保跨天对齐
+  Object.keys(dayTaskMap).forEach((day) => {
+    const dayTasks = dayTaskMap[day];
+    if (!dayTasks) return;
+    dayTasks.sort((a, b) => {
+      const laneA = a.laneIndex ?? 0;
+      const laneB = b.laneIndex ?? 0;
+      if (laneA !== laneB) {
+        return laneA - laneB;
+      }
+      // 同一车道内，按周期长短排序（周期长的优先）
+      const durationA = a.weekDuration ?? 0;
+      const durationB = b.weekDuration ?? 0;
+      if (durationB !== durationA) {
+        return durationB - durationA;
+      }
+      // 周期相同时按开始时间排序
+      const weekStartA = (a as GanttTask & { weekStart?: string }).weekStart;
+      const weekStartB = (b as GanttTask & { weekStart?: string }).weekStart;
+      if (weekStartA && weekStartB) {
+        const startA = dayjs(weekStartA);
+        const startB = dayjs(weekStartB);
+        if (startA.isValid() && startB.isValid()) {
+          return startA.valueOf() - startB.valueOf();
+        }
+      }
+      return 0;
+    });
+  });
+  return dayTaskMap;
+};
+
+watch(
+  () => props.tasks,
+  (tasks) => {
+    if (tasks && Array.isArray(tasks)) {
+      // 将传入的 tasks 转换为按日期分组的甘特任务映射
+      normalizedTasks.value = toDateMap(tasks as GanttTask[]);
+    } else {
+      normalizedTasks.value = {};
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  () => props.firstDayOfWeek,
+  (firstDayOfWeek) => {
+    if (firstDayOfWeek !== undefined) {
+      (dayjs as any).en.weekStart = firstDayOfWeek;
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>