feat(calendar): implement day time layout for schedule visualization

2026-04-29 14:02:31 +08:00
parent 27f6520457
commit 2872f93d67
3 changed files with 200 additions and 36 deletions
@@ -0,0 +1,59 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+
+import { buildDayTimeLayout } from "./calendar-time-layout.ts"
+
+test("scales schedule bars by the visible span of that day", () => {
+  const layout = buildDayTimeLayout(
+    [
+      { id: 1, startAt: "2026-04-29 07:00:00", endAt: "2026-04-29 17:00:00" },
+      { id: 2, startAt: "2026-04-29 09:00:00", endAt: "2026-04-29 12:00:00" },
+      { id: 3, startAt: "2026-04-29 13:00:00", endAt: "2026-04-29 17:00:00" },
+    ],
+    new Date(2026, 3, 29)
+  )
+
+  assert.equal(layout.rangeLabel, "07:00 - 17:00")
+  assert.deepEqual(layout.items.get(1), {
+    leftPercent: 0,
+    widthPercent: 100,
+    startLabel: "07:00",
+    endLabel: "17:00",
+  })
+  assert.deepEqual(layout.items.get(2), {
+    leftPercent: 20,
+    widthPercent: 30,
+    startLabel: "09:00",
+    endLabel: "12:00",
+  })
+  assert.deepEqual(layout.items.get(3), {
+    leftPercent: 60,
+    widthPercent: 40,
+    startLabel: "13:00",
+    endLabel: "17:00",
+  })
+})
+
+test("clips cross-day schedules to the current day before scaling", () => {
+  const layout = buildDayTimeLayout(
+    [
+      { id: 1, startAt: "2026-04-28 22:00:00", endAt: "2026-04-29 08:00:00" },
+      { id: 2, startAt: "2026-04-29 07:00:00", endAt: "2026-04-29 17:00:00" },
+    ],
+    new Date(2026, 3, 29)
+  )
+
+  assert.equal(layout.rangeLabel, "00:00 - 17:00")
+  assert.deepEqual(layout.items.get(1), {
+    leftPercent: 0,
+    widthPercent: 47.06,
+    startLabel: "00:00",
+    endLabel: "08:00",
+  })
+  assert.deepEqual(layout.items.get(2), {
+    leftPercent: 41.18,
+    widthPercent: 58.82,
+    startLabel: "07:00",
+    endLabel: "17:00",
+  })
+})
@@ -0,0 +1,87 @@
+const dayMs = 24 * 60 * 60 * 1000
+
+export type TimeLayoutSchedule = {
+  id: number
+  startAt: string
+  endAt: string
+}
+
+export type TimeLayoutItem = {
+  leftPercent: number
+  widthPercent: number
+  startLabel: string
+  endLabel: string
+}
+
+export type DayTimeLayout = {
+  rangeLabel: string
+  items: Map<number, TimeLayoutItem>
+}
+
+function parseLocalDateTime(value: string) {
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/)
+  if (!match) {
+    return new Date(value)
+  }
+  return new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3]),
+    Number(match[4]),
+    Number(match[5]),
+    Number(match[6] ?? 0)
+  )
+}
+
+function startOfDay(date: Date) {
+  const ret = new Date(date)
+  ret.setHours(0, 0, 0, 0)
+  return ret
+}
+
+function formatTime(date: Date) {
+  const hour = String(date.getHours()).padStart(2, "0")
+  const minute = String(date.getMinutes()).padStart(2, "0")
+  return `${hour}:${minute}`
+}
+
+function roundPercent(value: number) {
+  return Math.round(value * 100) / 100
+}
+
+export function buildDayTimeLayout(schedules: TimeLayoutSchedule[], day: Date): DayTimeLayout {
+  const dayStart = startOfDay(day)
+  const dayEnd = new Date(dayStart.getTime() + dayMs)
+  const visibleItems = schedules
+    .map((item) => {
+      const scheduleStart = parseLocalDateTime(item.startAt)
+      const scheduleEnd = parseLocalDateTime(item.endAt)
+      const visibleStart = new Date(Math.max(scheduleStart.getTime(), dayStart.getTime()))
+      const visibleEnd = new Date(Math.min(scheduleEnd.getTime(), dayEnd.getTime()))
+      return { item, visibleStart, visibleEnd }
+    })
+    .filter(({ visibleStart, visibleEnd }) => visibleEnd > visibleStart)
+
+  if (visibleItems.length === 0) {
+    return { rangeLabel: "", items: new Map() }
+  }
+
+  const rangeStart = new Date(Math.min(...visibleItems.map(({ visibleStart }) => visibleStart.getTime())))
+  const rangeEnd = new Date(Math.max(...visibleItems.map(({ visibleEnd }) => visibleEnd.getTime())))
+  const rangeMs = Math.max(rangeEnd.getTime() - rangeStart.getTime(), 1)
+  const items = new Map<number, TimeLayoutItem>()
+
+  visibleItems.forEach(({ item, visibleStart, visibleEnd }) => {
+    items.set(item.id, {
+      leftPercent: roundPercent(((visibleStart.getTime() - rangeStart.getTime()) / rangeMs) * 100),
+      widthPercent: roundPercent(((visibleEnd.getTime() - visibleStart.getTime()) / rangeMs) * 100),
+      startLabel: formatTime(visibleStart),
+      endLabel: formatTime(visibleEnd),
+    })
+  })
+
+  return {
+    rangeLabel: `${formatTime(rangeStart)} - ${formatTime(rangeEnd)}`,
+    items,
+  }
+}
@@ -10,6 +10,7 @@ import type {
  UpdateAdminAgentTeamSchedulePayload,
 } from "@/lib/api/admin"
 import { cn, formatDateTime } from "@/lib/utils"
+import { buildDayTimeLayout } from "./calendar-time-layout"

 const weekDayNames = ["一", "二", "三", "四", "五", "六", "日"]
 const dayMs = 24 * 60 * 60 * 1000
@@ -362,7 +363,10 @@ export function ScheduleCalendar({
        {days.map((day, dayIndex) => {
          const date = formatDate(day)
          const inMonth = day.getMonth() === monthStart.getMonth()
-          const daySchedules = schedules.filter((item) => intersectsDay(item, day))
+          const daySchedules = schedules
+            .filter((item) => intersectsDay(item, day))
+            .sort((a, b) => parseLocalDateTime(a.startAt).getTime() - parseLocalDateTime(b.startAt).getTime())
+          const dayTimeLayout = buildDayTimeLayout(daySchedules, day)
          return (
            <div
              key={date}
@@ -390,51 +394,65 @@ export function ScheduleCalendar({
                }
              }}
            >
-              <div className="mb-2 flex items-center justify-between gap-2">
-                <div className={cn("text-sm font-medium", !inMonth && "text-muted-foreground")}>{day.getDate()}</div>
-                <CalendarPlusIcon className="size-3.5 text-muted-foreground" />
+              <div className="mb-2 flex items-start justify-between gap-2">
+                <div>
+                  <div className={cn("text-sm font-medium", !inMonth && "text-muted-foreground")}>{day.getDate()}</div>
+                  {dayTimeLayout.rangeLabel ? (
+                    <div className="mt-0.5 text-[10px] leading-none text-muted-foreground">{dayTimeLayout.rangeLabel}</div>
+                  ) : null}
+                </div>
+                <CalendarPlusIcon className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
              </div>
              <div className="space-y-1">
                {daySchedules.slice(0, 5).map((item) => {
                  const teamName = item.teamName || teams.find((team) => team.id === item.teamId)?.name || `客服组#${item.teamId}`
                  const busy = savingId === item.id
                  const active = interactionPreview?.itemId === item.id
+                  const timeLayout = dayTimeLayout.items.get(item.id)
                  return (
-                    <div
-                      key={`${item.id}-${date}`}
-                      data-schedule-block
-                      role="button"
-                      tabIndex={0}
-                      className={cn(
-                        "relative cursor-grab rounded-md border border-primary/20 bg-primary/10 px-2 py-1.5 pl-4 pr-4 text-primary shadow-sm outline-none transition active:cursor-grabbing",
-                        active && "scale-[0.98] border-primary/50 bg-primary/15 opacity-80 ring-2 ring-primary/30",
-                        busy && "pointer-events-none opacity-60"
-                      )}
-                      onPointerDown={(event) => handlePointerDown(event, item, "move")}
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter" || event.key === " ") {
-                          event.preventDefault()
-                          onEdit(item)
-                        }
-                      }}
-                    >
+                    <div key={`${item.id}-${date}`} className="relative h-10 rounded-sm bg-muted/25">
                      <div
-                        className="absolute left-0 top-0 flex h-full w-3 cursor-ew-resize items-center justify-center bg-primary/15"
-                        onPointerDown={(event) => handlePointerDown(event, item, "resize", "start")}
+                        data-schedule-block
+                        data-time-left={timeLayout?.leftPercent ?? 0}
+                        data-time-width={timeLayout?.widthPercent ?? 100}
+                        role="button"
+                        tabIndex={0}
+                        className={cn(
+                          "absolute inset-y-0 cursor-grab overflow-hidden rounded-md border border-primary/20 bg-primary/10 px-2 py-1.5 pl-4 pr-4 text-primary shadow-sm outline-none transition active:cursor-grabbing",
+                          active && "scale-[0.98] border-primary/50 bg-primary/15 opacity-80 ring-2 ring-primary/30",
+                          busy && "pointer-events-none opacity-60"
+                        )}
+                        style={{
+                          left: `${timeLayout?.leftPercent ?? 0}%`,
+                          width: `${timeLayout?.widthPercent ?? 100}%`,
+                          minWidth: 34,
+                        }}
+                        onPointerDown={(event) => handlePointerDown(event, item, "move")}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault()
+                            onEdit(item)
+                          }
+                        }}
                      >
-                        <GripVerticalIcon className="size-3" />
+                        <div
+                          className="absolute left-0 top-0 flex h-full w-3 cursor-ew-resize items-center justify-center bg-primary/15"
+                          onPointerDown={(event) => handlePointerDown(event, item, "resize", "start")}
+                        >
+                          <GripVerticalIcon className="size-3" />
+                        </div>
+                        <div
+                          className="absolute right-0 top-0 flex h-full w-3 cursor-ew-resize items-center justify-center bg-primary/15"
+                          onPointerDown={(event) => handlePointerDown(event, item, "resize", "end")}
+                        >
+                          <GripVerticalIcon className="size-3" />
+                        </div>
+                        <div className="truncate text-xs font-medium">{teamName}</div>
+                        <div className="truncate text-xs">
+                          {timeLayout ? `${timeLayout.startLabel} - ${timeLayout.endLabel}` : `${formatTime(item.startAt)} - ${formatTime(item.endAt)}`}
+                        </div>
+                        {item.remark ? <div className="truncate text-[11px] text-primary/80">{item.remark}</div> : null}
                      </div>
-                      <div
-                        className="absolute right-0 top-0 flex h-full w-3 cursor-ew-resize items-center justify-center bg-primary/15"
-                        onPointerDown={(event) => handlePointerDown(event, item, "resize", "end")}
-                      >
-                        <GripVerticalIcon className="size-3" />
-                      </div>
-                      <div className="truncate text-xs font-medium">{teamName}</div>
-                      <div className="truncate text-xs">
-                        {formatTime(item.startAt)} - {formatTime(item.endAt)}
-                      </div>
-                      {item.remark ? <div className="truncate text-[11px] text-primary/80">{item.remark}</div> : null}
                    </div>
                  )
                })}