feat(calendar): refactor to support month view and improve scheduling logic

web/app/dashboard/agent-team-schedules/_components/calendar.tsx

@@ -10,13 +10,15 @@ import type {
 } from "@/lib/api/admin"
 import { cn, formatDateTime } from "@/lib/utils"
 
-const dayNames = ["一", "二", "三", "四", "五", "六", "日"]
+const weekDayNames = ["一", "二", "三", "四", "五", "六", "日"]
 const dayMs = 24 * 60 * 60 * 1000
 const minuteMs = 60 * 1000
 const minDurationMs = 15 * minuteMs
 
 type ScheduleCalendarProps = {
-  weekStart: Date
+  monthStart: Date
+  calendarStart: Date
+  calendarEnd: Date
   teams: AdminAgentTeam[]
   schedules: AdminAgentTeamSchedule[]
   loading: boolean
@@ -84,10 +86,6 @@ function formatDateTimeValue(date: Date) {
   return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`
 }
 
-function formatDayTitle(date: Date) {
-  return `${date.getMonth() + 1}/${date.getDate()}`
-}
-
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
 }
@@ -101,25 +99,19 @@ function roundToQuarterHour(date: Date) {
   return ret
 }
 
-function getPointerDateInCell(event: PointerEvent | React.PointerEvent, cell: Element) {
+function getPointerDateInCell(event: PointerEvent, cell: Element) {
   const rect = cell.getBoundingClientRect()
   const day = startOfDay(parseLocalDateTime(`${cell.getAttribute("data-date")} 00:00:00`))
   const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1)
   return roundToQuarterHour(new Date(day.getTime() + ratio * dayMs))
 }
 
-function getDropCell(event: PointerEvent | React.PointerEvent) {
+function getDropCell(event: PointerEvent) {
   const element = document.elementFromPoint(event.clientX, event.clientY)
   return element?.closest("[data-schedule-cell]")
 }
 
-function getCellTeamAndDate(cell: Element) {
+function buildMovePayload(item: AdminAgentTeamSchedule, date: string): UpdateAdminAgentTeamSchedulePayload {
-  const teamID = Number(cell.getAttribute("data-team-id"))
-  const date = cell.getAttribute("data-date") ?? ""
-  return { teamID, date }
-}
-
-function buildMovePayload(item: AdminAgentTeamSchedule, teamId: number, date: string): UpdateAdminAgentTeamSchedulePayload {
   const originalStart = parseLocalDateTime(item.startAt)
   const originalEnd = parseLocalDateTime(item.endAt)
   const duration = originalEnd.getTime() - originalStart.getTime()
@@ -130,7 +122,7 @@ function buildMovePayload(item: AdminAgentTeamSchedule, teamId: number, date: st
 
   return {
     id: item.id,
-    teamId,
+    teamId: item.teamId,
     startAt: formatDateTimeValue(nextStart),
     endAt: formatDateTimeValue(nextEnd),
     sourceType: item.sourceType,
@@ -166,23 +158,26 @@ function buildResizePayload(
   }
 }
 
-function sliceScheduleForDay(item: AdminAgentTeamSchedule, day: Date) {
+function intersectsDay(item: AdminAgentTeamSchedule, day: Date) {
   const dayStart = startOfDay(day)
   const dayEnd = addDays(dayStart, 1)
   const scheduleStart = parseLocalDateTime(item.startAt)
   const scheduleEnd = parseLocalDateTime(item.endAt)
-  const visibleStart = new Date(Math.max(scheduleStart.getTime(), dayStart.getTime()))
+  return scheduleStart < dayEnd && scheduleEnd > dayStart
-  const visibleEnd = new Date(Math.min(scheduleEnd.getTime(), dayEnd.getTime()))
+}
-  if (!visibleEnd.getTime() || visibleEnd <= visibleStart) {
+
-    return null
+function buildCalendarDays(calendarStart: Date, calendarEnd: Date) {
+  const days: Date[] = []
+  for (let current = startOfDay(calendarStart); current < calendarEnd; current = addDays(current, 1)) {
+    days.push(current)
   }
-  const left = ((visibleStart.getTime() - dayStart.getTime()) / dayMs) * 100
+  return days
-  const width = ((visibleEnd.getTime() - visibleStart.getTime()) / dayMs) * 100
-  return { left, width, visibleStart, visibleEnd }
 }
 
 export function ScheduleCalendar({
-  weekStart,
+  monthStart,
+  calendarStart,
+  calendarEnd,
   teams,
   schedules,
   loading,
@@ -192,15 +187,16 @@ export function ScheduleCalendar({
   onMove,
   onResize,
 }: ScheduleCalendarProps) {
-  const days = Array.from({ length: 7 }, (_, index) => startOfDay(addDays(weekStart, index)))
+  const days = buildCalendarDays(calendarStart, calendarEnd)
+  const defaultTeamID = teams[0]?.id ?? 0
 
-  function handleBlankCellClick(teamId: number, day: Date) {
+  function handleBlankCellClick(day: Date) {
     const startAt = new Date(day)
     startAt.setHours(9, 0, 0, 0)
     const endAt = new Date(day)
     endAt.setHours(18, 0, 0, 0)
     onCreate({
-      teamId,
+      teamId: defaultTeamID || undefined,
       startAt: formatDateTimeValue(startAt),
       endAt: formatDateTimeValue(endAt),
       sourceType: "manual",
@@ -241,11 +237,11 @@ export function ScheduleCalendar({
         return
       }
       if (state.type === "move") {
-        const next = getCellTeamAndDate(cell)
+        const date = cell.getAttribute("data-date")
-        if (!next.teamID || !next.date) {
+        if (!date) {
           return
         }
-        await onMove(buildMovePayload(item, next.teamID, next.date))
+        await onMove(buildMovePayload(item, date))
         return
       }
       const payload = buildResizePayload(item, state.edge, getPointerDateInCell(upEvent, cell))
@@ -267,107 +263,97 @@ export function ScheduleCalendar({
   }
 
   return (
-    <div className="overflow-x-auto rounded-lg border bg-background">
+    <div className="overflow-hidden rounded-lg border bg-background">
-      <div className="min-w-[980px]">
+      <div className="grid grid-cols-7 border-b bg-muted/40">
-        <div className="grid grid-cols-[168px_repeat(7,minmax(112px,1fr))] border-b bg-muted/40">
+        {weekDayNames.map((name) => (
-          <div className="flex h-14 items-center px-4 text-sm font-medium text-muted-foreground">客服组</div>
+          <div key={name} className="flex h-10 items-center justify-center border-l first:border-l-0 text-sm font-medium">
-          {days.map((day, index) => (
+            周{name}
-            <div key={day.toISOString()} className="flex h-14 flex-col justify-center border-l px-3">
+          </div>
-              <div className="text-sm font-medium">周{dayNames[index]}</div>
+        ))}
-              <div className="text-xs text-muted-foreground">{formatDayTitle(day)}</div>
+      </div>
-            </div>
+      <div className={cn("grid grid-cols-7", loading && "opacity-60")}>
-          ))}
+        {days.map((day, dayIndex) => {
-        </div>
+          const date = formatDate(day)
-
+          const inMonth = day.getMonth() === monthStart.getMonth()
-        <div className={cn("relative", loading && "opacity-60")}>
+          const daySchedules = schedules.filter((item) => intersectsDay(item, day))
-          {teams.map((team) => (
+          return (
-            <div key={team.id} className="grid min-h-28 grid-cols-[168px_repeat(7,minmax(112px,1fr))] border-b last:border-b-0">
+            <div
-              <div className="flex min-h-28 items-center px-4">
+              key={date}
-                <div className="min-w-0">
+              data-schedule-cell
-                  <div className="truncate text-sm font-medium">{team.name}</div>
+              data-date={date}
-                  <div className="text-xs text-muted-foreground">组ID：{team.id}</div>
+              role="button"
-                </div>
+              tabIndex={0}
+              className={cn(
+                "min-h-36 border-l border-t bg-background p-2 text-left outline-none transition-colors first:border-l-0 hover:bg-muted/20 focus-visible:ring-2 focus-visible:ring-ring",
+                dayIndex % 7 === 0 && "border-l-0",
+                !inMonth && "bg-muted/20 text-muted-foreground"
+              )}
+              onClick={(event) => {
+                if ((event.target as HTMLElement).closest("[data-schedule-block]")) {
+                  return
+                }
+                handleBlankCellClick(day)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault()
+                  handleBlankCellClick(day)
+                }
+              }}
+            >
+              <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>
-              {days.map((day) => {
+              <div className="space-y-1">
-                const date = formatDate(day)
+                {daySchedules.slice(0, 5).map((item) => {
-                const daySchedules = schedules.filter((item) => item.teamId === team.id && sliceScheduleForDay(item, day))
+                  const teamName = item.teamName || teams.find((team) => team.id === item.teamId)?.name || `客服组#${item.teamId}`
-                return (
+                  const busy = savingId === item.id
-                  <button
+                  return (
-                    key={`${team.id}-${date}`}
+                    <div
-                    type="button"
+                      key={`${item.id}-${date}`}
-                    data-schedule-cell
+                      data-schedule-block
-                    data-team-id={team.id}
+                      role="button"
-                    data-date={date}
+                      tabIndex={0}
-                    className="relative min-h-28 border-l bg-background p-2 text-left transition-colors hover:bg-muted/20"
+                      className={cn(
-                    onClick={(event) => {
+                        "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 active:cursor-grabbing",
-                      if (event.target === event.currentTarget) {
+                        busy && "pointer-events-none opacity-60"
-                        handleBlankCellClick(team.id, day)
+                      )}
-                      }
+                      onPointerDown={(event) => handlePointerDown(event, item, "move")}
-                    }}
+                      onKeyDown={(event) => {
-                  >
+                        if (event.key === "Enter" || event.key === " ") {
-                    {daySchedules.length === 0 ? (
+                          event.preventDefault()
-                      <div className="flex h-full min-h-20 items-center justify-center text-xs text-muted-foreground/70">
+                          onEdit(item)
-                        <CalendarPlusIcon className="mr-1 size-3.5" />
+                        }
-                        新增
+                      }}
+                    >
+                      <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>
-                    ) : null}
+                      <div
-                    {daySchedules.map((item, index) => {
+                        className="absolute right-0 top-0 flex h-full w-3 cursor-ew-resize items-center justify-center bg-primary/15"
-                      const slice = sliceScheduleForDay(item, day)
+                        onPointerDown={(event) => handlePointerDown(event, item, "resize", "end")}
-                      if (!slice) {
+                      >
-                        return null
+                        <GripVerticalIcon className="size-3" />
-                      }
+                      </div>
-                      const busy = savingId === item.id
+                      <div className="truncate text-xs font-medium">{teamName}</div>
-                      return (
+                      <div className="truncate text-xs">
-                        <div
+                        {formatDateTime(item.startAt).slice(11, 16)} - {formatDateTime(item.endAt).slice(11, 16)}
-                          key={`${item.id}-${date}`}
+                      </div>
-                          role="button"
+                      {item.remark ? <div className="truncate text-[11px] text-primary/80">{item.remark}</div> : null}
-                          tabIndex={0}
+                    </div>
-                          className={cn(
+                  )
-                            "absolute top-2 z-10 h-20 cursor-grab overflow-hidden rounded-md border border-primary/20 bg-primary/10 px-2 py-1.5 text-primary shadow-sm outline-none transition active:cursor-grabbing",
+                })}
-                            busy && "pointer-events-none opacity-60"
+                {daySchedules.length > 5 ? (
-                          )}
+                  <div className="text-xs text-muted-foreground">还有 {daySchedules.length - 5} 条</div>
-                          style={{
+                ) : null}
-                            left: `calc(${slice.left}% + 8px)`,
+              </div>
-                            width: `calc(${slice.width}% - 16px)`,
-                            top: `${8 + index * 28}px`,
-                            minWidth: "42px",
-                          }}
-                          onPointerDown={(event) => handlePointerDown(event, item, "move")}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault()
-                              onEdit(item)
-                            }
-                          }}
-                        >
-                          <div
-                            className="absolute left-0 top-0 flex h-full w-2 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-2 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 pl-2 pr-2 text-xs font-medium">{item.sourceType}</div>
-                          <div className="truncate pl-2 pr-2 text-xs">
-                            {formatDateTime(item.startAt).slice(11, 16)} - {formatDateTime(item.endAt).slice(11, 16)}
-                          </div>
-                          {item.remark ? (
-                            <div className="truncate pl-2 pr-2 text-[11px] text-primary/80">{item.remark}</div>
-                          ) : null}
-                        </div>
-                      )
-                    })}
-                  </button>
-                )
-              })}
             </div>
-          ))}
+          )
-        </div>
+        })}
       </div>
     </div>
   )

web/app/dashboard/agent-team-schedules/page.tsx

@@ -18,13 +18,13 @@ import { toast } from "sonner"
 import { ListPagination } from "@/components/list-pagination"
 import { Button } from "@/components/ui/button"
 import { ButtonGroup } from "@/components/ui/button-group"
+import { OptionCombobox } from "@/components/option-combobox"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import {
   Table,
   TableBody,
@@ -66,6 +66,26 @@ function startOfWeek(date: Date) {
   return ret
 }
 
+function startOfMonth(date: Date) {
+  const ret = startOfDay(date)
+  ret.setDate(1)
+  return ret
+}
+
+function startOfMonthCalendar(date: Date) {
+  return startOfWeek(startOfMonth(date))
+}
+
+function endOfMonthCalendar(date: Date) {
+  const monthEnd = startOfMonth(date)
+  monthEnd.setMonth(monthEnd.getMonth() + 1)
+  const ret = startOfWeek(monthEnd)
+  if (ret.getTime() < monthEnd.getTime()) {
+    ret.setDate(ret.getDate() + 7)
+  }
+  return ret
+}
+
 function addDays(date: Date, days: number) {
   const ret = new Date(date)
   ret.setDate(ret.getDate() + days)
@@ -81,16 +101,21 @@ function formatDateTimeValue(date: Date) {
   return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`
 }
 
-function formatWeekRange(weekStart: Date) {
+function addMonths(date: Date, months: number) {
-  const weekEnd = addDays(weekStart, 6)
+  const ret = startOfMonth(date)
-  return `${weekStart.getFullYear()}-${String(weekStart.getMonth() + 1).padStart(2, "0")}-${String(weekStart.getDate()).padStart(2, "0")} 至 ${String(weekEnd.getMonth() + 1).padStart(2, "0")}-${String(weekEnd.getDate()).padStart(2, "0")}`
+  ret.setMonth(ret.getMonth() + months)
+  return ret
+}
+
+function formatMonthTitle(monthStart: Date) {
+  return `${monthStart.getFullYear()}年${String(monthStart.getMonth() + 1).padStart(2, "0")}月`
 }
 
 export default function DashboardAgentTeamSchedulesPage() {
   const [viewMode, setViewMode] = useState<ViewMode>("calendar")
   const [teamFilterInput, setTeamFilterInput] = useState("all")
   const [teamFilter, setTeamFilter] = useState("all")
-  const [weekStart, setWeekStart] = useState(() => startOfWeek(new Date()))
+  const [monthStart, setMonthStart] = useState(() => startOfMonth(new Date()))
   const [page, setPage] = useState(1)
   const [limit, setLimit] = useState(20)
   const [loading, setLoading] = useState(true)
@@ -134,8 +159,8 @@ export default function DashboardAgentTeamSchedulesPage() {
     setCalendarLoading(true)
     try {
       const data = await fetchAgentTeamScheduleCalendar({
-        startAt: formatDateTimeValue(weekStart),
+        startAt: formatDateTimeValue(startOfMonthCalendar(monthStart)),
-        endAt: formatDateTimeValue(addDays(weekStart, 7)),
+        endAt: formatDateTimeValue(endOfMonthCalendar(monthStart)),
         teamId: teamFilter === "all" ? undefined : teamFilter,
       })
       setCalendarItems(data)
@@ -144,7 +169,7 @@ export default function DashboardAgentTeamSchedulesPage() {
     } finally {
       setCalendarLoading(false)
     }
-  }, [teamFilter, weekStart])
+  }, [monthStart, teamFilter])
 
   const loadTeams = useCallback(async () => {
     try {
@@ -294,36 +319,36 @@ export default function DashboardAgentTeamSchedulesPage() {
             </ButtonGroup>
             {viewMode === "calendar" ? (
               <ButtonGroup>
-                <Button variant="outline" size="icon-sm" onClick={() => setWeekStart(addDays(weekStart, -7))} aria-label="上一周">
+                <Button variant="outline" size="icon-sm" onClick={() => setMonthStart(addMonths(monthStart, -1))} aria-label="上一月">
                   <ChevronLeftIcon />
                 </Button>
-                <Button variant="outline" size="sm" onClick={() => setWeekStart(startOfWeek(new Date()))}>
+                <Button variant="outline" size="sm" onClick={() => setMonthStart(startOfMonth(new Date()))}>
-                  本周
+                  本月
                 </Button>
-                <Button variant="outline" size="icon-sm" onClick={() => setWeekStart(addDays(weekStart, 7))} aria-label="下一周">
+                <Button variant="outline" size="icon-sm" onClick={() => setMonthStart(addMonths(monthStart, 1))} aria-label="下一月">
                   <ChevronRightIcon />
                 </Button>
               </ButtonGroup>
             ) : null}
             {viewMode === "calendar" ? (
-              <div className="text-sm text-muted-foreground">{formatWeekRange(weekStart)}</div>
+              <div className="text-sm text-muted-foreground">{formatMonthTitle(monthStart)}</div>
             ) : null}
           </div>
 
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center xl:justify-end">
-            <Select value={teamFilterInput} onValueChange={(value) => setTeamFilterInput(value ?? "all")}>
+            <div className="w-full sm:w-48">
-              <SelectTrigger className="w-full sm:w-48">
+              <OptionCombobox
-                <SelectValue placeholder="筛选客服组" />
+                value={teamFilterInput}
-              </SelectTrigger>
+                options={[
-              <SelectContent>
+                  { value: "all", label: "全部客服组" },
-                <SelectItem value="all">全部客服组</SelectItem>
+                  ...teams.map((team) => ({ value: String(team.id), label: team.name })),
-                {teams.map((team) => (
+                ]}
-                  <SelectItem key={team.id} value={String(team.id)}>
+                placeholder="筛选客服组"
-                    {team.name}
+                searchPlaceholder="搜索客服组"
-                  </SelectItem>
+                emptyText="未找到客服组"
-                ))}
+                onChange={(value) => setTeamFilterInput(value)}
-              </SelectContent>
+              />
-            </Select>
+            </div>
             <Button variant="outline" onClick={applyFilters} disabled={loading || calendarLoading}>
               <SearchIcon />
               查询
@@ -345,7 +370,9 @@ export default function DashboardAgentTeamSchedulesPage() {
 
         {viewMode === "calendar" ? (
           <ScheduleCalendar
-            weekStart={weekStart}
+            monthStart={monthStart}
+            calendarStart={startOfMonthCalendar(monthStart)}
+            calendarEnd={endOfMonthCalendar(monthStart)}
             teams={visibleTeams}
             schedules={calendarItems}
             loading={calendarLoading}