feat(calendar): add week view support and refactor calendar date range utilities

web/app/dashboard/agent-team-schedules/_components/calendar-date-range.test.mjs

@@ -0,0 +1,14 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+
+import { addDays, formatWeekTitle, startOfWeek } from "./calendar-date-range.ts"
+
+test("builds Monday-based week range and title", () => {
+  const start = startOfWeek(new Date(2026, 3, 29, 14, 0, 0))
+
+  assert.equal(start.getFullYear(), 2026)
+  assert.equal(start.getMonth(), 3)
+  assert.equal(start.getDate(), 27)
+  assert.equal(formatWeekTitle(start), "2026-04-27 - 2026-05-03")
+  assert.equal(addDays(start, 7).getDate(), 4)
+})

web/app/dashboard/agent-team-schedules/_components/calendar-date-range.ts

@@ -0,0 +1,68 @@
+export function startOfDay(date: Date) {
+  const ret = new Date(date)
+  ret.setHours(0, 0, 0, 0)
+  return ret
+}
+
+export function startOfWeek(date: Date) {
+  const ret = startOfDay(date)
+  const day = ret.getDay()
+  const offset = day === 0 ? -6 : 1 - day
+  ret.setDate(ret.getDate() + offset)
+  return ret
+}
+
+export function startOfMonth(date: Date) {
+  const ret = startOfDay(date)
+  ret.setDate(1)
+  return ret
+}
+
+export function startOfMonthCalendar(date: Date) {
+  return startOfWeek(startOfMonth(date))
+}
+
+export 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
+}
+
+export function addDays(date: Date, days: number) {
+  const ret = new Date(date)
+  ret.setDate(ret.getDate() + days)
+  return ret
+}
+
+export function addMonths(date: Date, months: number) {
+  const ret = startOfMonth(date)
+  ret.setMonth(ret.getMonth() + months)
+  return ret
+}
+
+export function formatDateTimeValue(date: Date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const day = String(date.getDate()).padStart(2, "0")
+  const hour = String(date.getHours()).padStart(2, "0")
+  const minute = String(date.getMinutes()).padStart(2, "0")
+  const second = String(date.getSeconds()).padStart(2, "0")
+  return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`
+}
+
+export function formatMonthTitle(monthStart: Date) {
+  return `${monthStart.getFullYear()}年${String(monthStart.getMonth() + 1).padStart(2, "0")}月`
+}
+
+function formatDate(date: Date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const day = String(date.getDate()).padStart(2, "0")
+  return `${date.getFullYear()}-${month}-${day}`
+}
+
+export function formatWeekTitle(weekStart: Date) {
+  return `${formatDate(weekStart)} - ${formatDate(addDays(weekStart, 6))}`
+}

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

@@ -18,6 +18,7 @@ const minuteMs = 60 * 1000
 const minDurationMs = 15 * minuteMs
 
 type ScheduleCalendarProps = {
+  variant?: "month" | "week"
   monthStart: Date
   calendarStart: Date
   calendarEnd: Date
@@ -218,6 +219,7 @@ function buildCalendarDays(calendarStart: Date, calendarEnd: Date) {
 }
 
 export function ScheduleCalendar({
+  variant = "month",
   monthStart,
   calendarStart,
   calendarEnd,
@@ -374,19 +376,9 @@ export function ScheduleCalendar({
     )
   }
 
-  return (
+  function renderDayCell(day: Date, dayIndex: number, options?: { inMonth?: boolean; className?: string; showFullDate?: boolean }) {
-    <div className="min-w-[960px] overflow-hidden rounded-lg border bg-background">
-      <div className="grid grid-cols-7 border-b bg-muted/40">
-        {weekDayNames.map((name) => (
-          <div key={name} className="flex h-10 items-center justify-center border-l first:border-l-0 text-sm font-medium">
-            周{name}
-          </div>
-        ))}
-      </div>
-      <div className={cn("grid grid-cols-7", loading && "opacity-60")}>
-        {days.map((day, dayIndex) => {
     const date = formatDate(day)
-          const inMonth = day.getMonth() === monthStart.getMonth()
+    const inMonth = options?.inMonth ?? day.getMonth() === monthStart.getMonth()
     const historical = isHistoricalDay(day)
     const daySchedules = schedules
       .filter((item) => intersectsDay(item, day))
@@ -400,12 +392,13 @@ export function ScheduleCalendar({
         role="button"
         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",
+          "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",
           historical && "cursor-not-allowed bg-muted/30 hover:bg-muted/30",
           interactionPreview?.date === date &&
-                  (interactionPreview.invalid ? "bg-destructive/5 ring-2 ring-destructive/30" : "bg-primary/5 ring-2 ring-primary/35")
+            (interactionPreview.invalid ? "bg-destructive/5 ring-2 ring-destructive/30" : "bg-primary/5 ring-2 ring-primary/35"),
+          options?.className
         )}
         onClick={(event) => {
           if ((event.target as HTMLElement).closest("[data-schedule-block]")) {
@@ -428,7 +421,9 @@ export function ScheduleCalendar({
       >
         <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>
+            <div className={cn("text-sm font-medium", !inMonth && "text-muted-foreground")}>
+              {options?.showFullDate ? date : day.getDate()}
+            </div>
             {dayTimeLayout.rangeLabel ? (
               <div className="mt-0.5 text-[10px] leading-none text-muted-foreground">{dayTimeLayout.rangeLabel}</div>
             ) : null}
@@ -520,6 +515,27 @@ export function ScheduleCalendar({
         </div>
       </div>
     )
+  }
+
+  if (variant === "week") {
+    return (
+      <div className="min-w-[760px] overflow-hidden rounded-lg border bg-background">
+        <div className={cn("divide-y", loading && "opacity-60")}>
+          {days.map((day, dayIndex) => {
+            const date = formatDate(day)
+            return (
+              <div key={date} className="grid grid-cols-[112px_minmax(0,1fr)]">
+                <div className="border-r bg-muted/40 px-3 py-3 text-sm font-medium">
+                  <div>周{weekDayNames[dayIndex] ?? ""}</div>
+                  <div className="mt-1 text-xs font-normal text-muted-foreground">{date.slice(5)}</div>
+                </div>
+                {renderDayCell(day, dayIndex, {
+                  inMonth: true,
+                  className: "min-h-24 border-l-0 border-t-0",
+                  showFullDate: false,
+                })}
+              </div>
+            )
           })}
         </div>
         {interactionPreview ? (
@@ -540,3 +556,34 @@ export function ScheduleCalendar({
       </div>
     )
   }
+
+  return (
+    <div className="min-w-[960px] overflow-hidden rounded-lg border bg-background">
+      <div className="grid grid-cols-7 border-b bg-muted/40">
+        {weekDayNames.map((name) => (
+          <div key={name} className="flex h-10 items-center justify-center border-l first:border-l-0 text-sm font-medium">
+            周{name}
+          </div>
+        ))}
+      </div>
+      <div className={cn("grid grid-cols-7", loading && "opacity-60")}>
+        {days.map((day, dayIndex) => renderDayCell(day, dayIndex, { className: "min-h-36" }))}
+      </div>
+      {interactionPreview ? (
+        <div
+          data-schedule-preview
+          className={cn(
+            "pointer-events-none fixed z-50 rounded-md border bg-popover px-3 py-2 text-xs font-medium text-popover-foreground shadow-md",
+            interactionPreview.invalid && "border-destructive/40 bg-destructive text-destructive-foreground"
+          )}
+          style={{
+            left: interactionPreview.x + 12,
+            top: interactionPreview.y + 12,
+          }}
+        >
+          {interactionPreview.label}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"
 import {
   CalendarClockIcon,
   CalendarDaysIcon,
+  CalendarRangeIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ListIcon,
@@ -48,58 +49,21 @@ import {
 } from "@/lib/api/admin"
 import { formatDateTime } from "@/lib/utils"
 import { ScheduleCalendar } from "./_components/calendar"
+import {
+  addDays,
+  addMonths,
+  formatDateTimeValue,
+  formatMonthTitle,
+  formatWeekTitle,
+  startOfDay,
+  startOfMonth,
+  startOfMonthCalendar,
+  startOfWeek,
+  endOfMonthCalendar,
+} from "./_components/calendar-date-range"
 import { EditDialog } from "./_components/edit"
 
-type ViewMode = "calendar" | "list"
+type ViewMode = "month" | "week" | "list"
-
-function startOfDay(date: Date) {
-  const ret = new Date(date)
-  ret.setHours(0, 0, 0, 0)
-  return ret
-}
-
-function startOfWeek(date: Date) {
-  const ret = startOfDay(date)
-  const day = ret.getDay()
-  const offset = day === 0 ? -6 : 1 - day
-  ret.setDate(ret.getDate() + offset)
-  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)
-  return ret
-}
-
-function formatDateTimeValue(date: Date) {
-  const month = String(date.getMonth() + 1).padStart(2, "0")
-  const day = String(date.getDate()).padStart(2, "0")
-  const hour = String(date.getHours()).padStart(2, "0")
-  const minute = String(date.getMinutes()).padStart(2, "0")
-  const second = String(date.getSeconds()).padStart(2, "0")
-  return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`
-}
 
 function parseLocalDateTime(value: string) {
   const ret = new Date(value.replace(" ", "T"))
@@ -111,21 +75,12 @@ function isHistoricalSchedule(item: AdminAgentTeamSchedule) {
   return !!startAt && startAt < startOfDay(new Date())
 }
 
-function addMonths(date: Date, months: number) {
-  const ret = startOfMonth(date)
-  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 [viewMode, setViewMode] = useState<ViewMode>("month")
   const [teamFilterInput, setTeamFilterInput] = useState("all")
   const [teamFilter, setTeamFilter] = useState("all")
   const [monthStart, setMonthStart] = useState(() => startOfMonth(new Date()))
+  const [weekStart, setWeekStart] = useState(() => startOfWeek(new Date()))
   const [page, setPage] = useState(1)
   const [limit, setLimit] = useState(20)
   const [loading, setLoading] = useState(true)
@@ -167,10 +122,12 @@ export default function DashboardAgentTeamSchedulesPage() {
 
   const loadCalendarData = useCallback(async () => {
     setCalendarLoading(true)
+    const rangeStart = viewMode === "week" ? weekStart : startOfMonthCalendar(monthStart)
+    const rangeEnd = viewMode === "week" ? addDays(weekStart, 7) : endOfMonthCalendar(monthStart)
     try {
       const data = await fetchAgentTeamScheduleCalendar({
-        startAt: formatDateTimeValue(startOfMonthCalendar(monthStart)),
+        startAt: formatDateTimeValue(rangeStart),
-        endAt: formatDateTimeValue(endOfMonthCalendar(monthStart)),
+        endAt: formatDateTimeValue(rangeEnd),
         teamId: teamFilter === "all" ? undefined : teamFilter,
       })
       setCalendarItems(data)
@@ -179,7 +136,7 @@ export default function DashboardAgentTeamSchedulesPage() {
     } finally {
       setCalendarLoading(false)
     }
-  }, [monthStart, teamFilter])
+  }, [monthStart, teamFilter, viewMode, weekStart])
 
   const loadTeams = useCallback(async () => {
     try {
@@ -320,12 +277,20 @@ export default function DashboardAgentTeamSchedulesPage() {
           <div className="flex flex-wrap items-center gap-2">
             <ButtonGroup>
               <Button
-                variant={viewMode === "calendar" ? "default" : "outline"}
+                variant={viewMode === "month" ? "default" : "outline"}
                 size="sm"
-                onClick={() => setViewMode("calendar")}
+                onClick={() => setViewMode("month")}
               >
                 <CalendarDaysIcon />
-                日历
+                月
+              </Button>
+              <Button
+                variant={viewMode === "week" ? "default" : "outline"}
+                size="sm"
+                onClick={() => setViewMode("week")}
+              >
+                <CalendarRangeIcon />
+                周
               </Button>
               <Button
                 variant={viewMode === "list" ? "default" : "outline"}
@@ -336,7 +301,7 @@ export default function DashboardAgentTeamSchedulesPage() {
                 列表
               </Button>
             </ButtonGroup>
-            {viewMode === "calendar" ? (
+            {viewMode === "month" ? (
               <ButtonGroup>
                 <Button variant="outline" size="icon-sm" onClick={() => setMonthStart(addMonths(monthStart, -1))} aria-label="上一月">
                   <ChevronLeftIcon />
@@ -349,9 +314,25 @@ export default function DashboardAgentTeamSchedulesPage() {
                 </Button>
               </ButtonGroup>
             ) : null}
-            {viewMode === "calendar" ? (
+            {viewMode === "week" ? (
+              <ButtonGroup>
+                <Button variant="outline" size="icon-sm" onClick={() => setWeekStart(addDays(weekStart, -7))} aria-label="上一周">
+                  <ChevronLeftIcon />
+                </Button>
+                <Button variant="outline" size="sm" onClick={() => setWeekStart(startOfWeek(new Date()))}>
+                  本周
+                </Button>
+                <Button variant="outline" size="icon-sm" onClick={() => setWeekStart(addDays(weekStart, 7))} aria-label="下一周">
+                  <ChevronRightIcon />
+                </Button>
+              </ButtonGroup>
+            ) : null}
+            {viewMode === "month" ? (
               <div className="text-sm text-muted-foreground">{formatMonthTitle(monthStart)}</div>
             ) : null}
+            {viewMode === "week" ? (
+              <div className="text-sm text-muted-foreground">{formatWeekTitle(weekStart)}</div>
+            ) : null}
           </div>
 
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center xl:justify-end">
@@ -387,12 +368,13 @@ export default function DashboardAgentTeamSchedulesPage() {
           </div>
         </div>
 
-        {viewMode === "calendar" ? (
+        {viewMode === "month" || viewMode === "week" ? (
           <div className="min-h-0 flex-1 overflow-auto">
             <ScheduleCalendar
+              variant={viewMode}
               monthStart={monthStart}
-              calendarStart={startOfMonthCalendar(monthStart)}
+              calendarStart={viewMode === "week" ? weekStart : startOfMonthCalendar(monthStart)}
-              calendarEnd={endOfMonthCalendar(monthStart)}
+              calendarEnd={viewMode === "week" ? addDays(weekStart, 7) : endOfMonthCalendar(monthStart)}
               teams={visibleTeams}
               schedules={calendarItems}
               loading={calendarLoading}