wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mlogclub
2026-04-29 14:02:31 +08:00
parent 27f6520457
commit 2872f93d67
3 changed files with 200 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/agent-team-schedules/_components/calendar.tsx
+54 -36
View File
@@ -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>
)
})}