@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/agent-helper/monthdays-select/index.tsx

@@ -0,0 +1,378 @@
+import { useState, useCallback, useMemo } from 'react';
+import type { repeatByMonthDetail } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/tabs';
+import { SquareChecker } from '../../square-checker';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { usePortalContainer } from '../../../hooks/use-portal-container';
+
+export interface MonthdaysOption {
+  value: repeatByMonthDetail;
+  label: string;
+}
+
+export const MonthdaysOptions: MonthdaysOption[] = [
+  { value: 1, label: '1' },
+  { value: 2, label: '2' },
+  { value: 3, label: '3' },
+  { value: 4, label: '4' },
+  { value: 5, label: '5' },
+  { value: 6, label: '6' },
+  { value: 7, label: '7' },
+  { value: 8, label: '8' },
+  { value: 9, label: '9' },
+  { value: 10, label: '10' },
+  { value: 11, label: '11' },
+  { value: 12, label: '12' },
+  { value: 13, label: '13' },
+  { value: 14, label: '14' },
+  { value: 15, label: '15' },
+  { value: 16, label: '16' },
+  { value: 17, label: '17' },
+  { value: 18, label: '18' },
+  { value: 19, label: '19' },
+  { value: 20, label: '20' },
+  { value: 21, label: '21' },
+  { value: 22, label: '22' },
+  { value: 23, label: '23' },
+  { value: 24, label: '24' },
+  { value: 25, label: '25' },
+  { value: 26, label: '26' },
+  { value: 27, label: '27' },
+  { value: 28, label: '28' },
+  { value: 29, label: '29' },
+  { value: 30, label: '30' },
+  { value: 31, label: '31' },
+];
+
+const LAST_DAY_OPTION: MonthdaysOption = { value: 'last', label: '最后一个自然日' };
+
+const DAYS_PER_ROW = 7;
+
+export interface MonthdaysSelectProps {
+  value?: repeatByMonthDetail[];
+  onChange?: (value: repeatByMonthDetail[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const MonthdaysSelect = ({
+  value = [],
+  onChange,
+  placeholder = '请选择日期',
+  disabled = false,
+  className,
+}: MonthdaysSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [draftValue, setDraftValue] = useState<repeatByMonthDetail[]>(value);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-weekdays-select-portal');
+
+  const displayValue = open ? draftValue : value;
+
+  const numericSelected = useMemo(
+    () => displayValue.filter((v) => v !== 'last') as number[],
+    [displayValue]
+  );
+  const hasLast = useMemo(
+    () => displayValue.includes('last'),
+    [displayValue]
+  );
+
+  const allDaysSelected = numericSelected.length === 31;
+
+  const handleToggleDay = useCallback(
+    (day: repeatByMonthDetail) => {
+      setDraftValue((prev) =>
+        prev.includes(day) ? prev.filter((v) => v !== day) : [...prev, day]
+      );
+    },
+    []
+  );
+
+  const handleSelectAllDays = useCallback(() => {
+    setDraftValue((prev) => {
+      const prevNumeric = prev.filter((v) => v !== 'last') as number[];
+      if (prevNumeric.length === 31) {
+        return prev.filter((v) => v === 'last');
+      }
+      const allDays = MonthdaysOptions.map((o) => o.value);
+      const lastPart = prev.includes('last') ? (['last'] as const) : [];
+      return [...allDays, ...lastPart];
+    });
+  }, []);
+
+  const handleSelectToday = useCallback(() => {
+    const today = new Date().getDate();
+    setDraftValue((prev) => {
+      if (prev.includes(today as repeatByMonthDetail)) return prev;
+      return [...prev, today as repeatByMonthDetail];
+    });
+  }, []);
+
+  const handleToggleLast = useCallback(() => {
+    setDraftValue((prev) =>
+      prev.includes('last') ? prev.filter((v) => v !== 'last') : [...prev, 'last']
+    );
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    onChange?.(draftValue);
+    setOpen(false);
+  }, [draftValue, onChange]);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      if (nextOpen) {
+        setDraftValue([...value]);
+      }
+      setOpen(nextOpen);
+    },
+    [disabled, value]
+  );
+
+  const handleClearAll = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+
+  const handleRemove = useCallback(
+    (day: repeatByMonthDetail, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(value.filter((v) => v !== day));
+    },
+    [value, onChange]
+  );
+
+  const hasSelection = value.length > 0;
+  const showClear = hasSelection && isHovering;
+
+  const displayLabel = useCallback((v: repeatByMonthDetail) => {
+    if (v === 'last') return '最后一天';
+    return `${v}日`;
+  }, []);
+
+  const dayRows = useMemo(() => {
+    const rows: MonthdaysOption[][] = [];
+    for (let i = 0; i < MonthdaysOptions.length; i += DAYS_PER_ROW) {
+      rows.push(MonthdaysOptions.slice(i, i + DAYS_PER_ROW));
+    }
+    return rows;
+  }, []);
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            ref={setTriggerRef}
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'py-[7px]',
+              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+          >
+            {hasSelection ? (
+              <>
+                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                  {value.map((day) => (
+                    <span
+                      key={day}
+                      className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                    >
+                      <span className="text-[14px] text-[#030303] leading-[normal]">
+                        {displayLabel(day)}
+                      </span>
+                      <span
+                        className="cursor-pointer flex items-center shrink-0"
+                        onClick={(e) => handleRemove(day, e)}
+                      >
+                        <CloseIcon />
+                      </span>
+                    </span>
+                  ))}
+                </div>
+                {showClear ? (
+                  <span
+                    className="cursor-pointer flex items-center shrink-0"
+                    onClick={handleClearAll}
+                  >
+                    <ClearAllIcon />
+                  </span>
+                ) : (
+                  <DropdownChevron open={open} />
+                )}
+              </>
+            ) : (
+              <>
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {placeholder}
+                </span>
+                <DropdownChevron open={open} />
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[8px] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] p-0"
+          style={{ width: '310px' }}
+        >
+          <Tabs defaultValue="specific">
+            <div className="px-[4px] pt-[4px] flex justify-center">
+              <TabsList>
+                <TabsTrigger value="specific">指定日期</TabsTrigger>
+                <TabsTrigger value="relative">相对日期</TabsTrigger>
+              </TabsList>
+            </div>
+
+            <TabsContent value="specific" className="mt-0">
+              <div className="px-[8px] pt-[8px] pb-[4px]">
+                <button
+                  type="button"
+                  onClick={handleSelectAllDays}
+                  className={cn(
+                    'flex items-center gap-[6px] w-full h-[34px] px-[10px] py-[7px] rounded-[4px] text-left mb-[4px]',
+                    'hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  <SquareChecker
+                    checked={allDaysSelected}
+                    intermediate={numericSelected.length > 0 && !allDaysSelected}
+                    onCheckedChange={handleSelectAllDays}
+                    className="shrink-0"
+                  />
+                  <span className="text-[14px] font-bold text-[#0265FF] leading-[normal]">
+                    全选
+                  </span>
+                </button>
+                <div className="flex flex-col gap-[2px]">
+                  {dayRows.map((row, rowIdx) => (
+                    <div key={rowIdx} className="flex gap-[4px]">
+                      {row.map((option) => {
+                        const isSelected = numericSelected.includes(option.value as number);
+                        return (
+                          <button
+                            key={option.value}
+                            type="button"
+                            onClick={() => handleToggleDay(option.value)}
+                            className={cn(
+                              'flex items-center justify-center w-[36px] h-[30px] rounded-[4px]',
+                              'text-[14px] leading-[normal]',
+                              'transition-all duration-200 ease-out',
+                              isSelected
+                                ? 'bg-[#0265FF] text-white'
+                                : 'text-[#030303] hover:bg-[#EFF0F6]'
+                            )}
+                          >
+                            {option.label}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="flex items-center justify-between px-[12px] py-[8px] border-t border-[#E0E0E0] mt-[4px]">
+                <button
+                  type="button"
+                  onClick={handleSelectToday}
+                  className={cn(
+                    'h-[28px] px-[12px] rounded-[4px] text-[14px]',
+                    'text-[#0265FF] hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  今天
+                </button>
+                <button
+                  type="button"
+                  onClick={handleConfirm}
+                  className={cn(
+                    'h-[28px] px-[16px] rounded-[4px] text-[14px]',
+                    'bg-[#0265FF] text-white hover:bg-[#0255DD]',
+                    transCls
+                  )}
+                >
+                  确认
+                </button>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="relative" className="mt-0">
+              <div className="px-[8px] pt-[8px] pb-[4px]">
+                <button
+                  type="button"
+                  onClick={handleToggleLast}
+                  className={cn(
+                    'flex items-center gap-[6px] w-full h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
+                    'hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  <SquareChecker
+                    checked={hasLast}
+                    onCheckedChange={handleToggleLast}
+                    className="shrink-0"
+                  />
+                  <span className="text-[14px] text-[#030303] leading-[normal]">
+                    {LAST_DAY_OPTION.label}
+                  </span>
+                </button>
+              </div>
+              <div className="flex items-center justify-center px-[12px] py-[8px] border-t border-[#E0E0E0] mt-[4px]">
+                <button
+                  type="button"
+                  onClick={handleConfirm}
+                  className={cn(
+                    'h-[28px] px-[16px] rounded-[4px] text-[14px]',
+                    'bg-[#0265FF] text-white hover:bg-[#0255DD]',
+                    transCls
+                  )}
+                >
+                  确认
+                </button>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};

package/src/components/agent-helper/offset-preference-select/index.tsx

@@ -0,0 +1,268 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { cn } from '../../../lib/utils';
+import { OffsetTypeSelect } from '../offset-type-select';
+import { OffsetUnitSelect } from '../offset-unit-select';
+import { DateInput } from '../date-picker/date-input';
+import type {
+  IOffsetPreference,
+  DateFieldType,
+  offsetType,
+  offsetUnit,
+} from '@baishuyun/types';
+
+export interface OffsetPreferenceSelectProps {
+  value?: IOffsetPreference;
+  onChange?: (value: IOffsetPreference) => void;
+  dateFieldType: DateFieldType;
+  disabled?: boolean;
+  className?: string;
+}
+
+const MINUTES_PER_DAY = 1440;
+
+const NUMBER_INPUT_CLASSES = cn(
+  'h-[34px] px-[10px] py-[7px] rounded-[4px] bg-white border border-[#e0e0e0]',
+  'text-[14px] text-[#030303] placeholder:text-[#999999]',
+  'focus:outline-none focus:border-[#0265FF]',
+  'disabled:bg-[#EFF0F6] disabled:cursor-not-allowed',
+  '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none'
+);
+
+function getDefaults(dateFieldType: DateFieldType): IOffsetPreference {
+  return dateFieldType === 'date'
+    ? { dateFieldType: 'date', offsetType: 'day', offsetValue: 0, offsetUnit: 'minute' }
+    : { dateFieldType: 'datetime', offsetType: 'time', offsetValue: 0, offsetUnit: 'minute' };
+}
+
+function validOffsetType(type: offsetType, dateFieldType: DateFieldType): offsetType {
+  if (dateFieldType === 'date' && type === 'time') return 'day';
+  if (dateFieldType === 'datetime' && type === 'day') return 'time';
+  return type;
+}
+
+function minutesToTimeDate(minutes: number): Date {
+  const clamped = Math.max(0, Math.floor(minutes)) % MINUTES_PER_DAY;
+  const d = new Date(2024, 0, 1);
+  d.setHours(Math.floor(clamped / 60), clamped % 60, 0, 0);
+  return d;
+}
+
+function timeDateToMinutes(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes();
+}
+
+export function OffsetPreferenceSelect({
+  value,
+  onChange,
+  dateFieldType,
+  disabled = false,
+  className,
+}: OffsetPreferenceSelectProps) {
+  const isControlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = useState<IOffsetPreference>(
+    () => value ?? getDefaults(dateFieldType)
+  );
+
+  const prevValue = useRef(value);
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+    prevValue.current = value;
+  }, [value]);
+
+  const current: IOffsetPreference = value ?? internalValue;
+
+  const setValue = useCallback(
+    (newValue: IOffsetPreference) => {
+      if (!isControlled) setInternalValue(newValue);
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+
+  const effectiveType = validOffsetType(current.offsetType, dateFieldType);
+
+  const showDaysInput = dateFieldType === 'date' && (effectiveType === 'before' || effectiveType === 'after');
+  const showNumberInput = dateFieldType === 'datetime' && (effectiveType === 'before' || effectiveType === 'after');
+  const showTimeInput = dateFieldType === 'date';
+  const showUnitSelect = dateFieldType === 'datetime' && (effectiveType === 'before' || effectiveType === 'after');
+
+  const timeInMinutes = dateFieldType === 'date'
+    ? (showDaysInput
+        ? current.offsetValue % MINUTES_PER_DAY
+        : current.offsetValue)
+    : 0;
+  const timeDate = minutesToTimeDate(timeInMinutes);
+
+  const daysCount = showDaysInput
+    ? Math.max(0, Math.floor(current.offsetValue / MINUTES_PER_DAY))
+    : 1;
+
+  const numberValue = showNumberInput ? current.offsetValue : 0;
+
+  const handleOffsetTypeChange = useCallback(
+    (newOffsetType: offsetType) => {
+      const valid = validOffsetType(newOffsetType, dateFieldType);
+
+      const timeInMin = current.offsetValue % MINUTES_PER_DAY;
+
+      if (dateFieldType === 'date') {
+        if (valid === 'day') {
+          setValue({
+            dateFieldType: 'date',
+            offsetType: 'day',
+            offsetValue: timeInMin,
+            offsetUnit: 'minute',
+          });
+        } else {
+          setValue({
+            dateFieldType: 'date',
+            offsetType: valid,
+            offsetValue: timeInMin,
+            offsetUnit: 'minute',
+          });
+        }
+      } else {
+        if (valid === 'time') {
+          setValue({
+            dateFieldType: 'datetime',
+            offsetType: 'time',
+            offsetValue: 0,
+            offsetUnit: 'minute',
+          });
+        } else {
+          setValue({
+            dateFieldType: 'datetime',
+            offsetType: valid,
+            offsetValue: current.offsetValue,
+            offsetUnit: current.offsetUnit,
+          });
+        }
+      }
+    },
+    [dateFieldType, current.offsetValue, current.offsetUnit, setValue]
+  );
+
+  const handleTimeChange = useCallback(
+    (date: Date | null) => {
+      if (!date) return;
+      const mins = timeDateToMinutes(date);
+
+      if (dateFieldType === 'date') {
+        if (effectiveType === 'day') {
+          setValue({
+            dateFieldType: 'date',
+            offsetType: 'day',
+            offsetValue: mins,
+            offsetUnit: 'minute',
+          });
+        } else {
+          const days = Math.max(0, Math.floor(current.offsetValue / MINUTES_PER_DAY));
+          setValue({
+            dateFieldType: 'date',
+            offsetType: effectiveType,
+            offsetValue: days * MINUTES_PER_DAY + mins,
+            offsetUnit: 'minute',
+          });
+        }
+      }
+    },
+    [dateFieldType, effectiveType, current.offsetValue, setValue]
+  );
+
+  const handleDaysChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = parseInt(e.target.value, 10);
+      const days = isNaN(raw) ? 0 : Math.max(0, raw);
+      const mins = current.offsetValue % MINUTES_PER_DAY;
+
+      setValue({
+        dateFieldType: 'date',
+        offsetType: effectiveType,
+        offsetValue: days * MINUTES_PER_DAY + mins,
+        offsetUnit: 'minute',
+      });
+    },
+    [effectiveType, current.offsetValue, setValue]
+  );
+
+  const handleNumberChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = parseInt(e.target.value, 10);
+      const val = isNaN(raw) ? 0 : Math.max(0, raw);
+
+      setValue({
+        dateFieldType: 'datetime',
+        offsetType: effectiveType,
+        offsetValue: val,
+        offsetUnit: current.offsetUnit,
+      });
+    },
+    [effectiveType, current.offsetUnit, setValue]
+  );
+
+  const handleUnitChange = useCallback(
+    (newUnit: offsetUnit) => {
+      setValue({
+        dateFieldType: 'datetime',
+        offsetType: effectiveType,
+        offsetValue: current.offsetValue,
+        offsetUnit: newUnit,
+      });
+    },
+    [effectiveType, current.offsetValue, setValue]
+  );
+
+  return (
+    <div className={cn('flex items-center gap-[10px]', className)}>
+      <OffsetTypeSelect
+        value={effectiveType}
+        onChange={handleOffsetTypeChange}
+        dateFieldType={dateFieldType}
+        disabled={disabled}
+      />
+      {showDaysInput && (
+        <input
+          type="number"
+          value={daysCount}
+          onChange={handleDaysChange}
+          disabled={disabled}
+          min={0}
+          step={1}
+          className={cn(NUMBER_INPUT_CLASSES, 'w-[60px]')}
+        />
+      )}
+      {showDaysInput && (
+        <span className="text-[14px] text-[#030303] shrink-0">天</span>
+      )}
+      {showNumberInput && (
+        <input
+          type="number"
+          value={numberValue}
+          onChange={handleNumberChange}
+          disabled={disabled}
+          min={0}
+          step={1}
+          className={cn(NUMBER_INPUT_CLASSES, 'w-[80px]')}
+        />
+      )}
+      {showUnitSelect && (
+        <OffsetUnitSelect
+          value={current.offsetUnit}
+          onChange={handleUnitChange}
+          disabled={disabled}
+        />
+      )}
+      {showTimeInput && (
+        <DateInput
+          value={timeDate}
+          onChange={handleTimeChange}
+          format="HH:mm"
+          disabled={disabled}
+        />
+      )}
+    </div>
+  );
+}