@yancyyu/openhermit 1.6.38 → 1.6.40

package/src/renderer/components/schedules/calendar/CalendarDayView.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { format, isToday } from 'date-fns';
+
+import { cn } from '@renderer/lib/utils';
+
+import { CalendarEventBlock } from './CalendarEventBlock';
+import type { CalendarOccurrence } from './types';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const HOUR_ROW_HEIGHT = 80; // taller than week view for more detail
+
+// =============================================================================
+// CalendarDayView
+// =============================================================================
+
+interface CalendarDayViewProps {
+  occurrences: CalendarOccurrence[];
+  date: Date;
+  onEventClick: (occurrence: CalendarOccurrence) => void;
+  onSlotClick?: (date: Date) => void;
+}
+
+export const CalendarDayView = React.memo(function CalendarDayView({
+  occurrences,
+  date,
+  onEventClick,
+  onSlotClick,
+}: CalendarDayViewProps): React.JSX.Element {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [nowMinute, setNowMinute] = useState(() => Date.now());
+
+  // Update current-time indicator every 60s
+  useEffect(() => {
+    const timer = setInterval(() => setNowMinute(Date.now()), 60_000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // Auto-scroll to current hour
+  useEffect(() => {
+    if (scrollRef.current) {
+      const currentHour = new Date().getHours();
+      const scrollTo = Math.max(0, (currentHour - 1) * HOUR_ROW_HEIGHT);
+      scrollRef.current.scrollTop = scrollTo;
+    }
+  }, []);
+
+  // Current time line
+  const nowDate = new Date(nowMinute);
+  const nowHour = nowDate.getHours();
+  const nowMin = nowDate.getMinutes();
+  const nowY = (nowHour * 60 + nowMin) / 60 * HOUR_ROW_HEIGHT;
+  const showNowLine = isToday(date);
+
+  const handleSlotClick = useCallback(
+    (hour: number) => {
+      if (!onSlotClick) return;
+      const d = new Date(date);
+      d.setHours(hour, 0, 0, 0);
+      onSlotClick(d);
+    },
+    [onSlotClick, date],
+  );
+
+  return (
+    <div className="flex flex-col">
+      {/* Day header */}
+      <div
+        className={cn(
+          'flex items-center justify-center gap-2 border-b border-[var(--color-border-subtle)] py-2.5',
+          showNowLine && 'bg-[var(--color-accent)]/5',
+        )}
+      >
+        <span
+          className={cn(
+            'text-xs',
+            showNowLine ? 'text-[var(--color-accent)]' : 'text-[var(--color-text-muted)]',
+          )}
+        >
+          {format(date, 'EEEE')}
+        </span>
+        <span
+          className={cn(
+            'inline-flex size-7 items-center justify-center rounded-full text-sm font-medium',
+            showNowLine
+              ? 'bg-[var(--color-accent)] text-white'
+              : 'text-[var(--color-text)]',
+          )}
+        >
+          {format(date, 'd')}
+        </span>
+      </div>
+
+      {/* Scrollable grid */}
+      <div ref={scrollRef} className="relative overflow-y-auto" style={{ maxHeight: 520 }}>
+        <div className="relative" style={{ height: 24 * HOUR_ROW_HEIGHT }}>
+          {/* Hour rows */}
+          {Array.from({ length: 24 }, (_, hour) => {
+            const y = hour * HOUR_ROW_HEIGHT;
+            return (
+              <React.Fragment key={hour}>
+                {/* Hour label */}
+                <div
+                  className="absolute right-auto flex items-start justify-end pr-3 pt-0 text-[10px] text-[var(--color-text-muted)]"
+                  style={{ left: 0, top: y, width: 56, height: HOUR_ROW_HEIGHT }}
+                >
+                  <span className="translate-y-[-6px]">
+                    {String(hour).padStart(2, '0')}:00
+                  </span>
+                </div>
+                {/* Grid line */}
+                <div
+                  className="absolute border-t border-[var(--color-border-subtle)]"
+                  style={{ left: 56, top: y, right: 0 }}
+                />
+              </React.Fragment>
+            );
+          })}
+
+          {/* Event column */}
+          <div className="absolute top-0 bottom-0" style={{ left: 56, right: 0 }}>
+            {/* Events */}
+            {occurrences.map((occ) => {
+              const topPx = (occ.hour * 60 + occ.minute) / 60 * HOUR_ROW_HEIGHT;
+              const heightPx = (occ.durationMinutes / 60) * HOUR_ROW_HEIGHT;
+              const widthPct = 100 / occ.totalColumns;
+              const leftPct = occ.column * widthPct;
+
+              return (
+                <CalendarEventBlock
+                  key={`${occ.scheduleId}-${occ.date.toISOString()}`}
+                  occurrence={occ}
+                  variant="day"
+                  className="absolute"
+                  style={{
+                    top: topPx,
+                    height: Math.max(heightPx, 28),
+                    width: `calc(${widthPct}% - 4px)`,
+                    left: `calc(${leftPct}% + 2px)`,
+                  }}
+                  onClick={() => onEventClick(occ)}
+                />
+              );
+            })}
+
+            {/* Clickable slots */}
+            {onSlotClick &&
+              Array.from({ length: 24 }, (_, hour) => (
+                <div
+                  key={`slot-${hour}`}
+                  className="absolute left-0 right-0 cursor-pointer transition-colors hover:bg-white/[0.02]"
+                  style={{ top: hour * HOUR_ROW_HEIGHT, height: HOUR_ROW_HEIGHT }}
+                  onClick={() => handleSlotClick(hour)}
+                />
+              ))}
+          </div>
+
+          {/* Current time line */}
+          {showNowLine && (
+            <div className="pointer-events-none absolute z-20" style={{ top: nowY, left: 56, right: 0 }}>
+              <div className="flex items-center">
+                <div className="size-2.5 shrink-0 rounded-full bg-red-500" />
+                <div className="h-px flex-1 bg-red-500" />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/renderer/components/schedules/calendar/CalendarEventBlock.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { cn } from '@renderer/lib/utils';
+
+import type { CalendarOccurrence } from './types';
+
+// =============================================================================
+// CalendarEventBlock — solid colored block like Feishu
+// =============================================================================
+
+interface CalendarEventBlockProps {
+  occurrence: CalendarOccurrence;
+  variant: 'week' | 'day' | 'month';
+  className?: string;
+  style?: React.CSSProperties;
+  onClick: () => void;
+}
+
+export const CalendarEventBlock = React.memo(function CalendarEventBlock({
+  occurrence,
+  variant,
+  className,
+  style,
+  onClick,
+}: CalendarEventBlockProps): React.JSX.Element {
+  const label = occurrence.label || '定时任务';
+  const timeStr = occurrence.date.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  if (variant === 'month') {
+    // Month: tiny pill with colored dot
+    return (
+      <button
+        type="button"
+        className={cn(
+          'flex w-full items-center gap-1 overflow-hidden rounded px-1 py-[1px] text-left transition-opacity hover:opacity-80',
+          className,
+        )}
+        style={{ backgroundColor: hexToRgba(occurrence.color, 0.12), ...style }}
+        onClick={onClick}
+      >
+        <span className="size-1.5 shrink-0 rounded-full" style={{ backgroundColor: occurrence.color }} />
+        <span className="truncate text-[10px] leading-tight" style={{ color: occurrence.color }}>
+          {label}
+        </span>
+      </button>
+    );
+  }
+
+  // Week / Day: solid colored block with white text (Feishu style)
+  return (
+    <button
+      type="button"
+      className={cn(
+        'group relative flex w-full flex-col overflow-hidden rounded-[3px] px-1.5 py-0.5 text-left transition-opacity hover:opacity-90 focus:outline-none',
+        occurrence.status === 'paused' && 'opacity-50',
+        className,
+      )}
+      style={{
+        backgroundColor: occurrence.color,
+        borderLeft: `3px solid ${occurrence.color}`,
+        filter: `saturate(0.85) brightness(1.05)`,
+        ...style,
+      }}
+      onClick={onClick}
+      title={`${label} · ${occurrence.teamDisplayName}\n${timeStr}`}
+    >
+      <span className="truncate text-[11px] font-medium leading-tight text-white/95">
+        {label}
+      </span>
+      {variant === 'day' && (
+        <span className="truncate text-[10px] leading-tight text-white/70">
+          {occurrence.teamDisplayName}
+        </span>
+      )}
+      {variant === 'week' && (
+        <span className="truncate text-[9px] leading-tight text-white/60">
+          {timeStr} · {occurrence.teamDisplayName}
+        </span>
+      )}
+    </button>
+  );
+});
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function hexToRgba(color: string, alpha: number): string {
+  if (color.startsWith('hsl')) {
+    return color.replace(/^hsla?\(/, 'hsla(').replace(/\)$/, `, ${alpha})`);
+  }
+  if (color.startsWith('rgb')) {
+    return color.replace(/^rgba?\(/, 'rgba(').replace(/\)$/, `, ${alpha})`);
+  }
+  const hex = color.replace('#', '');
+  let r: number, g: number, b: number;
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length >= 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  } else {
+    return `rgba(128, 128, 128, ${alpha})`;
+  }
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/src/renderer/components/schedules/calendar/CalendarHeader.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { addMonths, addWeeks, addDays, format } from 'date-fns';
+
+import { cn } from '@renderer/lib/utils';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+import type { CalendarViewMode } from './types';
+
+// =============================================================================
+// CalendarHeader
+// =============================================================================
+
+interface CalendarHeaderProps {
+  viewMode: CalendarViewMode;
+  onViewModeChange: (mode: CalendarViewMode) => void;
+  currentDate: Date;
+  onNavigate: (date: Date) => void;
+}
+
+const VIEW_MODE_LABELS: { value: CalendarViewMode; label: string }[] = [
+  { value: 'day', label: '日' },
+  { value: 'week', label: '周' },
+  { value: 'month', label: '月' },
+];
+
+export const CalendarHeader = React.memo(function CalendarHeader({
+  viewMode,
+  onViewModeChange,
+  currentDate,
+  onNavigate,
+}: CalendarHeaderProps): React.JSX.Element {
+  const handlePrev = () => {
+    switch (viewMode) {
+      case 'day':
+        onNavigate(addDays(currentDate, -1));
+        break;
+      case 'week':
+        onNavigate(addWeeks(currentDate, -1));
+        break;
+      case 'month':
+        onNavigate(addMonths(currentDate, -1));
+        break;
+    }
+  };
+
+  const handleNext = () => {
+    switch (viewMode) {
+      case 'day':
+        onNavigate(addDays(currentDate, 1));
+        break;
+      case 'week':
+        onNavigate(addWeeks(currentDate, 1));
+        break;
+      case 'month':
+        onNavigate(addMonths(currentDate, 1));
+        break;
+    }
+  };
+
+  const handleToday = () => {
+    onNavigate(new Date());
+  };
+
+  const rangeLabel = getRangeLabel(viewMode, currentDate);
+
+  return (
+    <div className="flex items-center justify-between border-b border-[var(--color-border-subtle)] px-4 py-3">
+      {/* Navigation */}
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="flex size-7 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-colors hover:bg-white/[0.06] hover:text-[var(--color-text)]"
+          onClick={handlePrev}
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <button
+          type="button"
+          className="flex size-7 items-center justify-center rounded-md text-[var(--color-text-muted)] transition-colors hover:bg-white/[0.06] hover:text-[var(--color-text)]"
+          onClick={handleNext}
+        >
+          <ChevronRight className="size-4" />
+        </button>
+        <button
+          type="button"
+          className="rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-2.5 py-1 text-xs text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text)]"
+          onClick={handleToday}
+        >
+          今天
+        </button>
+      </div>
+
+      {/* Date range label */}
+      <h2 className="text-sm font-medium text-[var(--color-text)]">{rangeLabel}</h2>
+
+      {/* View mode toggle */}
+      <div className="inline-flex rounded-lg border border-white/10 bg-black/20 p-0.5">
+        {VIEW_MODE_LABELS.map(({ value, label }) => (
+          <button
+            key={value}
+            type="button"
+            className={cn(
+              'rounded-md px-2.5 py-1 text-xs transition-colors',
+              viewMode === value
+                ? 'bg-white/10 text-[var(--color-text)]'
+                : 'text-[var(--color-text-muted)] hover:text-[var(--color-text)]',
+            )}
+            onClick={() => onViewModeChange(value)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function getRangeLabel(mode: CalendarViewMode, date: Date): string {
+  switch (mode) {
+    case 'day':
+      return format(date, 'yyyy年M月d日 EEEE', { locale: undefined });
+    case 'week': {
+      // Show week range: "6月8日 - 6月14日"
+      const weekStart = startOfWeekCustom(date);
+      const weekEnd = new Date(weekStart);
+      weekEnd.setDate(weekEnd.getDate() + 6);
+      const startStr = format(weekStart, 'M月d日');
+      const endStr = format(weekEnd, 'M月d日');
+      return `${startStr} – ${endStr}`;
+    }
+    case 'month':
+      return format(date, 'yyyy年M月');
+  }
+}
+
+function startOfWeekCustom(date: Date): Date {
+  const d = new Date(date);
+  const day = d.getDay();
+  // Monday = 0 offset, Sunday = 6 offset
+  const diff = day === 0 ? 6 : day - 1;
+  d.setDate(d.getDate() - diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}

package/src/renderer/components/schedules/calendar/CalendarMonthView.tsx

@@ -0,0 +1,142 @@
+import React, { useMemo } from 'react';
+import {
+  addDays,
+  addMonths,
+  endOfMonth,
+  format,
+  getDate,
+  isSameDay,
+  isSameMonth,
+  isToday,
+  startOfMonth,
+  startOfWeek,
+} from 'date-fns';
+
+import { cn } from '@renderer/lib/utils';
+
+import { CalendarEventBlock } from './CalendarEventBlock';
+import type { CalendarOccurrence } from './types';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const WEEK_STARTS_ON = 1; // Monday
+const DAY_NAMES = ['一', '二', '三', '四', '五', '六', '日'];
+const MAX_VISIBLE_EVENTS = 3;
+
+// =============================================================================
+// CalendarMonthView
+// =============================================================================
+
+interface CalendarMonthViewProps {
+  occurrences: CalendarOccurrence[];
+  currentDate: Date;
+  onEventClick: (occurrence: CalendarOccurrence) => void;
+  onDayClick?: (date: Date) => void;
+}
+
+export const CalendarMonthView = React.memo(function CalendarMonthView({
+  occurrences,
+  currentDate,
+  onEventClick,
+  onDayClick,
+}: CalendarMonthViewProps): React.JSX.Element {
+  // Build 6×7 grid of days
+  const gridDays = useMemo(() => {
+    const monthStart = startOfMonth(currentDate);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn: WEEK_STARTS_ON });
+    const monthEnd = endOfMonth(currentDate);
+
+    // How many weeks to show (5 or 6)
+    const totalDays = Math.ceil((monthEnd.getDate() + (gridStart.getDay() === 0 ? 6 : gridStart.getDay() - 1)) / 7) * 7;
+    const rows = Math.max(5, Math.ceil(totalDays / 7));
+    const count = rows * 7;
+
+    return Array.from({ length: count }, (_, i) => addDays(gridStart, i));
+  }, [currentDate]);
+
+  // Group occurrences by day
+  const occurrencesByDay = useMemo(() => {
+    const map = new Map<string, CalendarOccurrence[]>();
+    for (const occ of occurrences) {
+      const key = format(occ.date, 'yyyy-MM-dd');
+      const list = map.get(key);
+      if (list) list.push(occ);
+      else map.set(key, [occ]);
+    }
+    return map;
+  }, [occurrences]);
+
+  return (
+    <div className="flex flex-col">
+      {/* Day-of-week headers */}
+      <div className="grid grid-cols-7 border-b border-[var(--color-border-subtle)]">
+        {DAY_NAMES.map((name) => (
+          <div
+            key={name}
+            className="flex items-center justify-center py-2 text-xs text-[var(--color-text-muted)]"
+          >
+            {name}
+          </div>
+        ))}
+      </div>
+
+      {/* Day grid */}
+      <div className="grid grid-cols-7 auto-rows-fr">
+        {gridDays.map((day) => {
+          const key = format(day, 'yyyy-MM-dd');
+          const inMonth = isSameMonth(day, currentDate);
+          const today = isToday(day);
+          const dayOccurrences = occurrencesByDay.get(key) ?? [];
+          const visible = dayOccurrences.slice(0, MAX_VISIBLE_EVENTS);
+          const hiddenCount = dayOccurrences.length - MAX_VISIBLE_EVENTS;
+
+          return (
+            <div
+              key={key}
+              className={cn(
+                'group relative flex min-h-[80px] flex-col border-b border-r border-[var(--color-border-subtle)] p-1.5 transition-colors',
+                !inMonth && 'bg-black/20',
+                today && 'bg-[var(--color-accent)]/5',
+                onDayClick && 'cursor-pointer hover:bg-white/[0.02]',
+              )}
+              onClick={() => onDayClick?.(day)}
+            >
+              {/* Date number */}
+              <span
+                className={cn(
+                  'mb-1 inline-flex size-6 items-center justify-center rounded-full text-xs font-medium',
+                  today
+                    ? 'bg-[var(--color-accent)] text-white'
+                    : inMonth
+                      ? 'text-[var(--color-text-secondary)]'
+                      : 'text-[var(--color-text-muted)]',
+                )}
+              >
+                {getDate(day)}
+              </span>
+
+              {/* Event pills */}
+              <div className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-hidden">
+                {visible.map((occ) => (
+                  <CalendarEventBlock
+                    key={`${occ.scheduleId}-${occ.date.toISOString()}`}
+                    occurrence={occ}
+                    variant="month"
+                    onClick={() => onEventClick(occ)}
+                  />
+                ))}
+                {hiddenCount > 0 && (
+                  <span className="px-1 text-[10px] text-[var(--color-text-muted)]">
+                    +{hiddenCount} 更多
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});