@phelan/design 0.0.1 → 0.0.2

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

@@ -1,962 +0,0 @@
-<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>