@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/components/agent-helper/date-picker/calendar-panel.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from 'react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { MONTH_NAMES, WEEK_NAMES, getFirstMondayOfMonth, checkDateValidate, checkBeforeMenuClick, checkAfterMenuClick } from './utils';
+
+interface CalendarPanelProps {
+  year: number;
+  month: number;
+  day: number;
+  format: string;
+  minDate: Date;
+  maxDate: Date;
+  week: number[];
+  onYearReduce: () => void;
+  onYearAdd: () => void;
+  onMonthReduce: () => void;
+  onMonthAdd: () => void;
+  onMonthMenu: () => void;
+  onYearMenu: () => void;
+  onChangeDay: (d: number, m: number, y: number, css: string) => void;
+}
+
+const tdBase = 'text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px]';
+const tdDisabled = 'text-[#999] relative pointer-events-none before:absolute before:left-0 before:right-0 before:top-1 before:h-[28px] before:bg-[#f3f3f3] before:opacity-60 before:content-[""]';
+
+export function CalendarPanel({
+  year,
+  month,
+  day,
+  format,
+  minDate,
+  maxDate,
+  week,
+  onYearReduce,
+  onYearAdd,
+  onMonthReduce,
+  onMonthAdd,
+  onMonthMenu,
+  onYearMenu,
+  onChangeDay,
+}: CalendarPanelProps) {
+  const hasDayPart = format.includes('dd');
+
+  const calendarData = useMemo(() => {
+    const firstMonday = getFirstMondayOfMonth(year, month);
+    const today = new Date();
+    const todayStr = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+
+    const rows: Array<Array<{ day: number; month: number; year: number; css: string; key: string }>> = [];
+    const cursor = new Date(firstMonday);
+
+    for (let r = 0; r < 6; r++) {
+      const row: (typeof rows)[0] = [];
+      for (let w = 0; w < 7; w++) {
+        const d = cursor.getDate();
+        const m = cursor.getMonth();
+        const y = cursor.getFullYear();
+
+        let css = checkDateValidate(new Date(y, m, d, 0, 0, 0, 0), minDate, maxDate, week, 'day') ? '' : 'disabled';
+
+        if (!css) {
+          if (month !== m) {
+            css = 'oday';
+          } else {
+            css = 'day';
+            if (w === 5 || w === 6) css += ' weekend';
+            if (`${y}-${m}-${d}` === todayStr) css += ' today';
+            if (day === d && month === m) css += ' selected';
+          }
+        }
+
+        row.push({ day: d, month: m, year: y, css, key: `d${y}-${m}-${d}` });
+        cursor.setDate(cursor.getDate() + 1);
+      }
+      rows.push(row);
+    }
+
+    while (rows.length > 4 && rows[rows.length - 1].every((cell) => cell.month !== month)) {
+      rows.pop();
+    }
+
+    return rows;
+  }, [year, month, day, minDate, maxDate, week]);
+
+  if (!hasDayPart) return null;
+
+  return (
+    <>
+      <thead>
+        <tr>
+          <td
+            className={cn(tdBase, 'btn prevm hover:text-[#0265ff]', !checkBeforeMenuClick(new Date(year, month, 1), minDate, 'year') && 'disabled ' + tdDisabled)}
+            colSpan={1}
+            onClick={onYearReduce}
+          >
+            <ChevronsLeft size={14} />
+          </td>
+          <td
+            className={cn(tdBase, 'btn prevm hover:text-[#0265ff]', !checkBeforeMenuClick(new Date(year, month, 1), minDate, 'month') && 'disabled ' + tdDisabled)}
+            colSpan={1}
+            onClick={onMonthReduce}
+          >
+            <ChevronLeft size={14} />
+          </td>
+          <td className={cn(tdBase, 'title font-bold p-0.5')} colSpan={3}>
+            <span className="title-month mr-1.5 hover:text-[#0265ff] cursor-pointer" onClick={onMonthMenu}>{MONTH_NAMES[month]}</span>
+            <span>, </span>
+            <span className="title-year hover:text-[#0265ff] cursor-pointer" onClick={onYearMenu}>{year}</span>
+          </td>
+          <td
+            className={cn(tdBase, 'btn nextm hover:text-[#0265ff]', !checkAfterMenuClick(new Date(year, month, 1), maxDate, 'month') && 'disabled ' + tdDisabled)}
+            colSpan={1}
+            onClick={onMonthAdd}
+          >
+            <ChevronRight size={14} />
+          </td>
+          <td
+            className={cn(tdBase, 'btn nextm hover:text-[#0265ff]', !checkAfterMenuClick(new Date(year, month, 1), maxDate, 'year') && 'disabled ' + tdDisabled)}
+            colSpan={1}
+            onClick={onYearAdd}
+          >
+            <ChevronsRight size={14} />
+          </td>
+        </tr>
+        <tr>
+          {WEEK_NAMES.map((name, i) => (
+            <td key={name} className={cn(tdBase, 'day name week font-bold hover:bg-transparent hover:p-0 hover:border-none', (i === 5 || i === 6) && 'text-[#e34d59]')}>{name}</td>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {calendarData.slice(0, 6).map((row, ri) => (
+          <tr key={ri}>
+            {row.map((cell) => {
+              const isDisabled = cell.css.includes('disabled');
+              const isOday = cell.css.includes('oday');
+              const isToday = cell.css.includes('today');
+              const isSelected = cell.css.includes('selected');
+              const isWeekend = cell.css.includes('weekend');
+
+              return (
+                <td
+                  key={cell.key}
+                  className={cn(
+                    tdBase,
+                    isDisabled && tdDisabled,
+                    isOday && 'text-[#e0e0e0] hover:bg-[rgba(2,101,255,0.08)]',
+                    !isDisabled && !isOday && 'hover:bg-[rgba(2,101,255,0.08)]',
+                    isToday && 'font-bold text-[#0265ff]',
+                    isWeekend && 'text-[#e34d59]',
+                    isSelected && 'font-bold p-[1px] text-white border border-[#0265ff] bg-[#0265ff] hover:border-[#0265ff] hover:bg-[#0265ff]'
+                  )}
+                  onClick={() => onChangeDay(cell.day, cell.month, cell.year, cell.css)}
+                >
+                  <div className="day-wrapper"><div className="day-item">{cell.day}</div></div>
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </>
+  );
+}

package/src/components/agent-helper/date-picker/date-input.tsx

@@ -0,0 +1,91 @@
+import { useState, useCallback } from 'react';
+import { cn } from '../../../lib/utils';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { CalendarIcon } from '../../icons/calendar-icon';
+import { DatePicker } from './date-picker';
+import { formatDateByFormat } from './utils';
+import type { DateInputProps } from './types';
+import { usePortalContainer } from '../../../hooks/use-portal-container';
+
+export type { DateInputProps } from './types';
+
+export function DateInput({
+  value,
+  onChange,
+  format = 'yyyy-MM-dd',
+  minDate,
+  maxDate,
+  week,
+  placeholder,
+  disabled,
+  className,
+}: DateInputProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleChange = useCallback(
+    (date: Date | null, closeFloat?: boolean) => {
+      onChange?.(date);
+      if (closeFloat) {
+        setOpen(false);
+      }
+    },
+    [onChange]
+  );
+
+  const displayText = value ? formatDateByFormat(value, format) : '';
+  const defaultPlaceholder = placeholder ?? getPlaceholderByFormat(format);
+
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-date-input-portal');
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild disabled={disabled}>
+        <div
+          className={cn(
+            'flex items-center h-[34px] rounded-[4px] bg-white border border-[#e0e0e0] pl-[2px] pr-[10px] py-[2px] cursor-pointer',
+            'hover:border-[#0265FF]',
+            open && 'border-[#0265FF]',
+            disabled && 'opacity-50 cursor-not-allowed',
+            className
+          )}
+          ref={setTriggerRef}
+        >
+          <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
+            <span
+              className={cn(
+                'flex-1 text-[14px] leading-[normal] truncate',
+                value ? 'text-[#030303]' : 'text-[#999999]'
+              )}
+            >
+              {displayText || defaultPlaceholder}
+            </span>
+          </div>
+          <CalendarIcon className="shrink-0 size-[16px] text-[#999999]" />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start" portalContainer={portalContainer}>
+        <DatePicker
+          value={value}
+          onChange={handleChange}
+          format={format}
+          minDate={minDate}
+          maxDate={maxDate}
+          week={week}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function getPlaceholderByFormat(format: string): string {
+  switch (format) {
+    case 'yyyy-MM-dd': return '请选择日期';
+    case 'yyyy-MM-dd HH:mm:ss': return '请选择日期时间';
+    case 'yyyy-MM-dd HH:mm': return '请选择日期时间';
+    case 'HH:mm:ss': return '请选择时间';
+    case 'HH:mm': return '请选择时间';
+    case 'yyyy-MM': return '请选择月份';
+    case 'yyyy': return '请选择年份';
+    default: return '请选择日期';
+  }
+}

package/src/components/agent-helper/date-picker/date-picker.tsx

@@ -0,0 +1,327 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { CalendarPanel } from './calendar-panel';
+import { MonthPanel } from './month-panel';
+import { YearPanel } from './year-panel';
+import { TimePanel } from './time-panel';
+import { FooterPanel } from './footer-panel';
+import {
+  MIN_YEAR,
+  MAX_YEAR,
+  MONTH_NAMES,
+  getDaysInMonth,
+  checkDateValidate,
+  getCloserDate,
+} from './utils';
+import type { DatePickerProps, TimeObj } from './types';
+
+export type { DateFormat, DatePickerProps } from './types';
+
+export function DatePicker({
+  value,
+  onChange,
+  format = 'yyyy-MM-dd',
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  week: weekProp,
+  className,
+}: DatePickerProps) {
+  const initialDate = value ? new Date(value) : new Date();
+
+  const [year, setYear] = useState(initialDate.getFullYear());
+  const [month, setMonth] = useState(initialDate.getMonth());
+  const [day, setDay] = useState(initialDate.getDate());
+  const [hours, setHours] = useState(initialDate.getHours());
+  const [minutes, setMinutes] = useState(initialDate.getMinutes());
+  const [seconds, setSeconds] = useState(initialDate.getSeconds());
+  const [showMonth, setShowMonth] = useState(false);
+  const [showYear, setShowYear] = useState(false);
+  const [showHms, setShowHms] = useState(format.includes('HH'));
+
+  const minDate = useMemo(
+    () => minDateProp ?? new Date(MIN_YEAR, 0, 1, 0, 0, 0, 0),
+    [minDateProp]
+  );
+  const maxDate = useMemo(
+    () => maxDateProp ?? new Date(MAX_YEAR, 11, 31, 23, 59, 59, 999),
+    [maxDateProp]
+  );
+  const week = useMemo(
+    () => (weekProp ? weekProp.map((i) => parseInt(String(i))) : []),
+    [weekProp]
+  );
+
+  const startTime = useMemo<TimeObj>(() => {
+    if (format === 'yyyy-MM-dd HH:mm:ss') {
+      return { h: minDate.getHours(), m: minDate.getMinutes(), s: minDate.getSeconds(), ms: minDate.getMilliseconds() };
+    }
+    return { h: 0, m: 0, s: 0, ms: 0 };
+  }, [format, minDate]);
+
+  const endTime = useMemo<TimeObj>(() => {
+    if (format === 'yyyy-MM-dd HH:mm:ss') {
+      return { h: maxDate.getHours(), m: maxDate.getMinutes(), s: maxDate.getSeconds(), ms: maxDate.getMilliseconds() };
+    }
+    return { h: 23, m: 59, s: 59, ms: 999 };
+  }, [format, maxDate]);
+
+  // Sync with external value
+  useEffect(() => {
+    if (value) {
+      setYear(value.getFullYear());
+      setMonth(value.getMonth());
+      setDay(value.getDate());
+      setHours(value.getHours());
+      setMinutes(value.getMinutes());
+      setSeconds(value.getSeconds());
+    }
+  }, [value]);
+
+  // Auto-select closer valid date on mount when value is null
+  useEffect(() => {
+    if (!value && checkDateValidate(new Date(), minDate, maxDate, week, 'day')) {
+      const closerDate = getCloserDate(new Date(), minDate, maxDate);
+      setYear(closerDate.getFullYear());
+      setMonth(closerDate.getMonth());
+      setDay(closerDate.getDate());
+    }
+  }, []);
+
+  const fireOnChange = useCallback(
+    (d: Date | null, closeFloat?: boolean) => onChange?.(d, closeFloat),
+    [onChange]
+  );
+
+  const checkValidate = useCallback(
+    (d: Date, mode: 'day' | 'month' | 'year' = 'day') =>
+      checkDateValidate(d, minDate, maxDate, week, mode),
+    [minDate, maxDate, week]
+  );
+
+  const onDateUpdate = useCallback(
+    (closeFloat?: boolean) => {
+      const d = new Date(year, month, day, hours, minutes, seconds);
+      fireOnChange(checkValidate(d) ? d : null, closeFloat);
+    },
+    [year, month, day, hours, minutes, seconds, checkValidate, fireOnChange]
+  );
+
+  const handleMonthReduce = useCallback(() => {
+    let newYear = year, newMonth = month, newDay = day;
+    if (month === 0) { newMonth = 11; newYear = year - 1; }
+    else { newMonth = month - 1; }
+    const dim = getDaysInMonth(newYear, newMonth);
+    if (newDay > dim) newDay = dim;
+    setYear(newYear); setMonth(newMonth); setDay(newDay);
+  }, [year, month, day]);
+
+  const handleMonthAdd = useCallback(() => {
+    let newYear = year, newMonth = month, newDay = day;
+    if (month === 11) { newMonth = 0; newYear = year + 1; }
+    else { newMonth = month + 1; }
+    const dim = getDaysInMonth(newYear, newMonth);
+    if (newDay > dim) newDay = dim;
+    setYear(newYear); setMonth(newMonth); setDay(newDay);
+  }, [year, month, day]);
+
+  const handleYearReduce = useCallback(() => { if (year > MIN_YEAR) setYear((y) => y - 1); }, [year]);
+  const handleYearAdd = useCallback(() => { if (year < MAX_YEAR) setYear((y) => y + 1); }, [year]);
+  const handleYearFReduce = useCallback(() => { if (year > MIN_YEAR) setYear((y) => y - 20); }, [year]);
+  const handleYearFAdd = useCallback(() => { if (year < MAX_YEAR) setYear((y) => y + 20); }, [year]);
+
+  const handleSelectYear = useCallback((selectedYear: number) => {
+    setYear(selectedYear);
+    setShowYear(false);
+    if (format === 'yyyy-MM') { setDay(1); setHours(0); setMinutes(0); setSeconds(0); setShowMonth(false); }
+    if (format === 'yyyy') {
+      const newDate = new Date(selectedYear, 0, 1, 0, 0, 0);
+      fireOnChange(checkValidate(newDate, 'year') ? newDate : null, true);
+    }
+    setShowHms(format.includes('HH'));
+  }, [format, checkValidate, fireOnChange]);
+
+  const handleMountOk = useCallback((m: number) => {
+    setMonth(m);
+    setShowMonth(false);
+    setShowYear(false);
+    if (format === 'yyyy-MM') {
+      setDay(1); setHours(0); setMinutes(0); setSeconds(0);
+      const newDate = new Date(year, m, 1, 0, 0, 0);
+      fireOnChange(checkValidate(newDate, 'month') ? newDate : null, true);
+    }
+    setShowHms(format.includes('HH'));
+  }, [format, year, checkValidate, fireOnChange]);
+
+  const handleChangeDay = useCallback((d: number, m: number, y: number, css: string) => {
+    if (css.includes('disabled')) return;
+    setYear(y); setMonth(m); setDay(d);
+    if (!['HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm', 'HH:mm'].includes(format)) {
+      const newDate = new Date(y, m, d, 0, 0, 0);
+      fireOnChange(checkValidate(newDate) ? newDate : null, true);
+    }
+  }, [format, checkValidate, fireOnChange]);
+
+  const handleToDay = useCallback(() => {
+    const today = new Date();
+    setYear(today.getFullYear()); setMonth(today.getMonth()); setDay(today.getDate());
+    setHours(today.getHours()); setMinutes(today.getMinutes()); setSeconds(today.getSeconds());
+    if (!['HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm', 'HH:mm'].includes(format)) {
+      const newDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+      fireOnChange(checkValidate(newDate) ? newDate : null, true);
+    }
+  }, [format, checkValidate, fireOnChange]);
+
+  const handleOkDay = useCallback(() => onDateUpdate(true), [onDateUpdate]);
+
+  const checkValiToday = useCallback(
+    (date?: Date) => checkDateValidate(date ?? new Date(), minDate, maxDate, week, 'day') ? '' : 'disabled',
+    [minDate, maxDate, week]
+  );
+
+  const handleHoursChange = useCallback((v: number) => setHours(v), []);
+  const handleMinutesChange = useCallback((v: number) => setMinutes(v), []);
+  const handleSecondsChange = useCallback((v: number) => setSeconds(v), []);
+
+  const hasDatePart = format.includes('yyyy');
+  const hasTimePart = format.includes('HH');
+  const hasDayPart = format.includes('dd');
+  const isMonthOnly = format === 'yyyy-MM';
+  const isYearOnly = format === 'yyyy';
+  const todayCls = checkValiToday();
+
+  const openMonthMenu = useCallback(() => { setShowMonth(true); setShowYear(false); setShowHms(false); }, []);
+  const openYearMenu = useCallback(() => { setShowYear(true); setShowHms(false); }, []);
+
+  const dataRangeMinHeight = hasDayPart ? 'min-h-[270px]' : (isMonthOnly ? 'min-h-[180px]' : 'min-h-[270px]');
+
+  return (
+    <div className={cn('relative inline-block text-sm text-[#333] bg-white rounded-[4px] leading-none border-none', format, className)}>
+      <div className="flex">
+        {hasDatePart && (
+          <div className={cn('data-range', dataRangeMinHeight)} style={{ minWidth: isYearOnly ? 220 : 270 }}>
+            {/* Calendar with day grid, OR month-only picker */}
+            {!isYearOnly && (
+              <div className="relative">
+                <table cellSpacing={0} cellPadding={0} className="dt p-[3px] rounded-[4px]" style={{ width: isMonthOnly ? '100%' : 270 }}>
+                  {/* Month-only: show month picker with year header */}
+                  {isMonthOnly && !showYear && (
+                    <>
+                      <thead>
+                        <tr>
+                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] btn prevy hover:text-[#0265ff] grid place-content-center" colSpan={1} onClick={handleYearReduce}>
+                            <ChevronLeft size={14} className="inline" />
+                          </td>
+                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] year title font-bold" colSpan={1}>
+                            <span className="title-year hover:text-[#0265ff] cursor-pointer" onClick={openYearMenu}>{year}</span>
+                          </td>
+                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] btn nexty hover:text-[#0265ff] grid place-content-center" colSpan={1} onClick={handleYearAdd}>
+                            <ChevronRight size={14} className="inline" />
+                          </td>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {[0, 1, 2].map((rowIdx) => (
+                          <tr key={rowIdx}>
+                            {[0, 1, 2].map((colIdx) => {
+                              const m = rowIdx * 3 + colIdx;
+                              const valid = checkValidate(new Date(year, m, 1), 'month');
+                              const isSelected = month === m;
+                              const isDisabled = !valid;
+                              return (
+                                <td
+                                  key={m}
+                                  className={cn(
+                                    'text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] month hover:bg-[rgba(2,101,255,0.08)]',
+                                    isSelected && 'font-bold p-[1px] text-white border border-[#0265ff] bg-[#0265ff] hover:border-[#0265ff] hover:bg-[#0265ff]',
+                                    isDisabled && 'text-[#999] relative pointer-events-none before:absolute before:left-0 before:right-0 before:top-[14px] before:h-[28px] before:bg-[#f3f3f3] before:opacity-60 before:content-[""]'
+                                  )}
+                                  onClick={() => { if (!isDisabled) handleMountOk(m); }}
+                                >
+                                  {MONTH_NAMES[m]}
+                                </td>
+                              );
+                            })}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </>
+                  )}
+
+                  {/* Day grid: full calendar */}
+                  {hasDayPart && (
+                    <CalendarPanel
+                      year={year} month={month} day={day}
+                      format={format} minDate={minDate} maxDate={maxDate} week={week}
+                      onYearReduce={handleYearReduce} onYearAdd={handleYearAdd}
+                      onMonthReduce={handleMonthReduce} onMonthAdd={handleMonthAdd}
+                      onMonthMenu={openMonthMenu} onYearMenu={openYearMenu}
+                      onChangeDay={handleChangeDay}
+                    />
+                  )}
+                </table>
+
+                {/* Month picker overlay (for day formats) */}
+                {hasDayPart && !isMonthOnly && showMonth && !showYear && (
+                  <div className="absolute inset-0 z-[1]">
+                    <MonthPanel
+                      year={year} month={month} showYear={showYear}
+                      position="absolute" minDate={minDate} maxDate={maxDate} week={week}
+                      onYearReduce={handleYearReduce} onYearAdd={handleYearAdd}
+                      onYearMenu={openYearMenu} onMountOk={handleMountOk}
+                    />
+                  </div>
+                )}
+
+                {/* Year picker overlay (for day/month formats) */}
+                {!isYearOnly && showYear && (
+                  <div className={cn(isMonthOnly ? 'relative' : 'absolute inset-0 z-[1]')}>
+                    <YearPanel
+                      year={year} position={isMonthOnly ? 'relative' : 'absolute'}
+                      showYearLabel={isMonthOnly}
+                      minDate={minDate} maxDate={maxDate} week={week}
+                      onYearFReduce={handleYearFReduce} onYearFAdd={handleYearFAdd}
+                      onSelectYear={handleSelectYear}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Year-only mode */}
+            {isYearOnly && (
+              <YearPanel
+                year={year} position="relative" showYearLabel
+                minDate={minDate} maxDate={maxDate} week={week}
+                onYearFReduce={handleYearFReduce} onYearFAdd={handleYearFAdd}
+                onSelectYear={handleSelectYear}
+              />
+            )}
+          </div>
+        )}
+
+        {/* Time picker */}
+        {showHms && hasTimePart && (
+          <TimePanel
+            hours={hours} minutes={minutes} seconds={seconds}
+            year={year} month={month} day={day}
+            format={format} minDate={minDate} maxDate={maxDate}
+            startTime={startTime} endTime={endTime}
+            onHoursChange={handleHoursChange}
+            onMinutesChange={handleMinutesChange}
+            onSecondsChange={handleSecondsChange}
+          />
+        )}
+      </div>
+
+      {/* Footer */}
+      <FooterPanel
+        hasTime={hasTimePart}
+        hasDay={hasDayPart}
+        todayCls={todayCls}
+        onToday={handleToDay}
+        onOk={handleOkDay}
+      />
+    </div>
+  );
+}

package/src/components/agent-helper/date-picker/footer-panel.tsx

@@ -0,0 +1,44 @@
+import { cn } from '../../../lib/utils';
+
+interface FooterPanelProps {
+  hasTime: boolean;
+  hasDay: boolean;
+  todayCls: string;
+  onToday: () => void;
+  onOk: () => void;
+}
+
+export function FooterPanel({
+  hasTime,
+  hasDay,
+  todayCls,
+  onToday,
+  onOk,
+}: FooterPanelProps) {
+  if (!hasTime && !hasDay) return null;
+
+  return (
+    <div className="footer h-[40px] leading-[40px] text-center border-t border-[#e0e0e0]">
+      <div className="hms px-[10px]">
+        <div
+          className={cn(
+            'btn cursor-pointer px-[5px] mx-[5px]',
+            hasTime ? 'current-time float-left text-[#0265ff] ml-0 pl-0 text-center' : 'today float-left text-[#0265ff] ml-0 pl-0 text-center',
+            todayCls === 'disabled' && 'text-[#999] pointer-events-none opacity-80'
+          )}
+          onClick={onToday}
+        >
+          {hasTime ? '当前时间' : '今天'}
+        </div>
+        {hasTime && (
+          <div
+            className="btn ok mr-0 text-white bg-[#0265ff] rounded-[4px] h-[24px] leading-[24px] mt-[8px] float-right cursor-pointer px-[5px] hover:opacity-80"
+            onClick={onOk}
+          >
+            确定
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/agent-helper/date-picker/index.ts

@@ -0,0 +1,3 @@
+export { DatePicker } from './date-picker';
+export { DateInput } from './date-input';
+export type { DateFormat, DatePickerProps, DateInputProps } from './types';