Initial CMPP frontend prototype

2026-06-30 16:09:46 +08:00
commit 2f3c274a30
98 changed files with 25255 additions and 0 deletions
@@ -0,0 +1,143 @@
+import { useMemo, useState } from 'react';
+import { CalendarDays, ChevronLeft, ChevronRight, Clock3, X } from 'lucide-react';
+
+type DateTimeInputProps = {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+const weekDays = ['一', '二', '三', '四', '五', '六', '日'];
+
+function formatDate(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function parseDate(value?: string) {
+  if (!value) {
+    return undefined;
+  }
+
+  const [year, month, day] = value.split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
+
+function getMonthLabel(date: Date) {
+  return `${date.getFullYear()}年${date.getMonth() + 1}月`;
+}
+
+function getCalendarDays(viewDate: Date) {
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDate = new Date(year, month, 1);
+  const firstWeekday = (firstDate.getDay() + 6) % 7;
+  const startDate = new Date(year, month, 1 - firstWeekday);
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(startDate);
+    date.setDate(startDate.getDate() + index);
+    return {
+      date,
+      dateString: formatDate(date),
+      inCurrentMonth: date.getMonth() === month,
+    };
+  });
+}
+
+function splitDateTime(value: string) {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time };
+}
+
+export function DateTimeInput({ label, value, onChange, placeholder = '选择定时发送时间' }: DateTimeInputProps) {
+  const { date, time } = splitDateTime(value);
+  const [open, setOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(() => parseDate(date) ?? new Date());
+  const calendarDays = useMemo(() => getCalendarDays(viewDate), [viewDate]);
+
+  function moveMonth(offset: number) {
+    setViewDate((current) => new Date(current.getFullYear(), current.getMonth() + offset, 1));
+  }
+
+  function updateDate(nextDate: string) {
+    onChange(`${nextDate}T${time || '09:00'}`);
+  }
+
+  function updateTime(nextTime: string) {
+    onChange(`${date || formatDate(new Date())}T${nextTime}`);
+  }
+
+  return (
+    <div className="ui-field ui-date-range-field">
+      {label ? <span className="ui-field__label">{label}</span> : null}
+      <button
+        className={['ui-date-range-trigger', open ? 'ui-date-range-trigger--open' : '', value ? 'ui-date-range-trigger--filled' : ''].filter(Boolean).join(' ')}
+        onClick={() => setOpen((current) => !current)}
+        type="button"
+      >
+        <CalendarDays size={16} />
+        <span>{value ? `${date} ${time}` : placeholder}</span>
+        {value ? (
+          <span
+            aria-label="清空定时发送时间"
+            className="ui-date-range__clear"
+            onClick={(event) => {
+              event.stopPropagation();
+              onChange('');
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <X size={14} />
+          </span>
+        ) : null}
+      </button>
+      {open ? (
+        <div className="ui-date-range-popover ui-date-time-popover">
+          <div className="ui-calendar">
+            <div className="ui-calendar__header">
+              <button aria-label="上个月" onClick={() => moveMonth(-1)} type="button">
+                <ChevronLeft size={16} />
+              </button>
+              <strong>{getMonthLabel(viewDate)}</strong>
+              <button aria-label="下个月" onClick={() => moveMonth(1)} type="button">
+                <ChevronRight size={16} />
+              </button>
+            </div>
+            <div className="ui-calendar__weekdays">
+              {weekDays.map((day) => <span key={day}>{day}</span>)}
+            </div>
+            <div className="ui-calendar__grid">
+              {calendarDays.map((item) => (
+                <button
+                  className={[
+                    'ui-calendar__day',
+                    item.inCurrentMonth ? '' : 'ui-calendar__day--muted',
+                    item.dateString === date ? 'ui-calendar__day--selected' : '',
+                  ].filter(Boolean).join(' ')}
+                  key={item.dateString}
+                  onClick={() => updateDate(item.dateString)}
+                  type="button"
+                >
+                  {item.date.getDate()}
+                </button>
+              ))}
+            </div>
+          </div>
+          <label className="ui-time-picker">
+            <span><Clock3 size={15} /> 发送时间</span>
+            <input onChange={(event) => updateTime(event.target.value)} type="time" value={time || '09:00'} />
+          </label>
+          <div className="ui-date-range-actions">
+            <button onClick={() => onChange('')} type="button">清空</button>
+            <button disabled={!value} onClick={() => setOpen(false)} type="button">确定</button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}