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

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

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

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

@@ -1,66 +1,66 @@
-import type { offsetType, DateFieldType } from '@baishuyun/types';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../ui/select';
-
-export interface OffsetTypeOption {
-  value: offsetType;
-  label: string;
-}
-
-export const OffsetTypeOptions: OffsetTypeOption[] = [
-  { value: 'before', label: '之前' },
-  { value: 'after', label: '之后' },
-  { value: 'day', label: '当天' },
-  { value: 'time', label: '当时' },
-];
-
-export function getOffsetTypeOptions(dateFieldType: DateFieldType): OffsetTypeOption[] {
-  if (dateFieldType === 'date') {
-    return OffsetTypeOptions.filter((opt) => opt.value !== 'time');
-  }
-  return OffsetTypeOptions.filter((opt) => opt.value !== 'day');
-}
-
-export interface OffsetTypeSelectProps {
-  value?: offsetType;
-  onChange?: (value: offsetType) => void;
-  dateFieldType: DateFieldType;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const OffsetTypeSelect = ({
-  value,
-  onChange,
-  dateFieldType,
-  placeholder = '请选择偏移类型',
-  disabled = false,
-  className,
-}: OffsetTypeSelectProps) => {
-  const options = getOffsetTypeOptions(dateFieldType);
-
-  return (
-    <Select
-      value={value}
-      onValueChange={(v) => onChange?.(v as offsetType)}
-      disabled={disabled}
-    >
-      <SelectTrigger className={className}>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-};
+import type { offsetType, DateFieldType } from '@baishuyun/types';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select';
+
+export interface OffsetTypeOption {
+  value: offsetType;
+  label: string;
+}
+
+export const OffsetTypeOptions: OffsetTypeOption[] = [
+  { value: 'before', label: '之前' },
+  { value: 'after', label: '之后' },
+  { value: 'day', label: '当天' },
+  { value: 'time', label: '当时' },
+];
+
+export function getOffsetTypeOptions(dateFieldType: DateFieldType): OffsetTypeOption[] {
+  if (dateFieldType === 'date') {
+    return OffsetTypeOptions.filter((opt) => opt.value !== 'time');
+  }
+  return OffsetTypeOptions.filter((opt) => opt.value !== 'day');
+}
+
+export interface OffsetTypeSelectProps {
+  value?: offsetType;
+  onChange?: (value: offsetType) => void;
+  dateFieldType: DateFieldType;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const OffsetTypeSelect = ({
+  value,
+  onChange,
+  dateFieldType,
+  placeholder = '请选择偏移类型',
+  disabled = false,
+  className,
+}: OffsetTypeSelectProps) => {
+  const options = getOffsetTypeOptions(dateFieldType);
+
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange?.(v as offsetType)}
+      disabled={disabled}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};