@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

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

@@ -1,164 +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>
-    </>
-  );
-}
+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

@@ -1,91 +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 '请选择日期';
-  }
-}
+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 '请选择日期';
+  }
+}