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

package/src/components/agent-helper/field-value-input/inputs.tsx

@@ -1,247 +1,247 @@
-import { useState, useRef, useCallback } from 'react';
-import type { FieldValueInputProps } from './index';
-import { FieldWrapper } from './index';
-import { UploadIcon } from './icons';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-import { DateInput } from '../date-picker/date-input';
-import type { DateFormat } from '../date-picker/types';
-import { formatDateByFormat } from '../date-picker/utils';
-
-const inputBaseCls =
-  'h-[34px] px-[10px] py-[7px] rounded-[4px] bg-white border text-[14px] text-[#030303] placeholder:text-[#999999] focus:outline-none focus:border-[#0265FF] w-full disabled:bg-[#EFF0F6] disabled:cursor-not-allowed';
-
-// ── TextInput ───────────────────────────────────────────────────────
-
-export function TextInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
-  return (
-    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
-      <input
-        type="text"
-        value={typeof value === 'string' ? value : ''}
-        onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled}
-        placeholder={field.description ?? `请输入${field.label}`}
-        className={inputBaseCls}
-      />
-    </FieldWrapper>
-  );
-}
-
-// ── NumberInput ─────────────────────────────────────────────────────
-
-export function NumberInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
-  return (
-    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
-      <input
-        type="number"
-        value={typeof value === 'number' || typeof value === 'string' ? value : ''}
-        onChange={(e) => {
-          const v = e.target.value;
-          onChange?.(v === '' ? '' : Number(v));
-        }}
-        disabled={disabled}
-        placeholder={field.description ?? `请输入${field.label}`}
-        className={inputBaseCls}
-      />
-    </FieldWrapper>
-  );
-}
-
-// ── TextareaInput ───────────────────────────────────────────────────
-
-export function TextareaInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
-  return (
-    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
-      <textarea
-        value={typeof value === 'string' ? value : ''}
-        onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled}
-        placeholder={field.description ?? `请输入${field.label}`}
-        rows={3}
-        className={cn(inputBaseCls, 'h-auto min-h-[68px] resize-y')}
-      />
-    </FieldWrapper>
-  );
-}
-
-// ── PasswordInput ───────────────────────────────────────────────────
-
-export function PasswordInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
-  const [show, setShow] = useState(false);
-  return (
-    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
-      <div className="relative">
-        <input
-          type={show ? 'text' : 'password'}
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => onChange?.(e.target.value)}
-          disabled={disabled}
-          placeholder={field.description ?? `请输入${field.label}`}
-          className={cn(inputBaseCls, 'pr-[36px]')}
-        />
-        <button
-          type="button"
-          onClick={() => setShow(!show)}
-          className="absolute right-[8px] top-1/2 -translate-y-1/2 text-[#999999] text-[12px] hover:text-[#666666]"
-        >
-          {show ? '隐藏' : '显示'}
-        </button>
-      </div>
-    </FieldWrapper>
-  );
-}
-
-// ── DateTimeInput ───────────────────────────────────────────────────
-
-export function DateTimeInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
-  const format: DateFormat = ((field.widget as unknown as Record<string, unknown> | undefined))?.format as DateFormat || 'yyyy-MM-dd';
-  const dateValue = typeof value === 'string' && value ? new Date(value) : undefined;
-
-  return (
-    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
-      <DateInput
-        value={dateValue}
-        onChange={(date) => onChange?.(date ? formatDateByFormat(date,  field?.widget?.format ?? 'yyyy-MM-dd HH:mm:ss') /* date.toISOString() */ : '')}
-        format={format}
-        disabled={disabled}
-      />
-    </FieldWrapper>
-  );
-}
-
-// ── RangeNumberInput ─────────────────────────────────────────────────
-
-export function RangeNumberInput({ value, onChange, disabled }: FieldValueInputProps) {
-  const rangeValue = (value && typeof value === 'object' && !Array.isArray(value)
-    ? value
-    : { min: undefined, max: undefined }) as { min?: number; max?: number };
-
-  return (
-    <div className="flex items-center gap-[8px]">
-      <input
-        type="number"
-        value={rangeValue.min != null ? rangeValue.min : ''}
-        onChange={(e) => {
-          const v = e.target.value;
-          onChange?.({ ...rangeValue, min: v === '' ? undefined : Number(v) });
-        }}
-        disabled={disabled}
-        placeholder="最小值"
-        className={cn(inputBaseCls, 'flex-1')}
-      />
-      <span className="text-[#999] text-[14px] shrink-0">~</span>
-      <input
-        type="number"
-        value={rangeValue.max != null ? rangeValue.max : ''}
-        onChange={(e) => {
-          const v = e.target.value;
-          onChange?.({ ...rangeValue, max: v === '' ? undefined : Number(v) });
-        }}
-        disabled={disabled}
-        placeholder="最大值"
-        className={cn(inputBaseCls, 'flex-1')}
-      />
-    </div>
-  );
-}
-
-// ── RangeDateTimeInput ───────────────────────────────────────────────
-
-export function RangeDateTimeInput({ value, onChange, disabled, field }: FieldValueInputProps) {
-  const rangeValue = (value && typeof value === 'object' && !Array.isArray(value)
-    ? value
-    : { min: undefined, max: undefined }) as { min?: string; max?: string };
-
-  const minDate = rangeValue.min ? new Date(rangeValue.min) : undefined;
-  const maxDate = rangeValue.max ? new Date(rangeValue.max) : undefined;
-
-  const format = field?.widget?.format;
-
-  return (
-    <div className="flex items-center gap-[8px]">
-      <DateInput
-        value={minDate}
-        onChange={(date) => onChange?.({ ...rangeValue, min: date ? formatDateByFormat(date, format ?? 'yyyy-MM-dd HH:mm:ss') /* date.toISOString() */ : undefined })}
-        format="yyyy-MM-dd"
-        placeholder="开始日期"
-        disabled={disabled}
-        className="flex-1"
-      />
-      <span className="text-[#999] text-[14px] shrink-0">~</span>
-      <DateInput
-        value={maxDate}
-        onChange={(date) => onChange?.({ ...rangeValue, max: date ? formatDateByFormat(date, format ?? 'yyyy-MM-dd HH:mm:ss') /* date.toISOString() */ : undefined })}
-        format="yyyy-MM-dd"
-        placeholder="结束日期"
-        disabled={disabled}
-        className="flex-1"
-      />
-    </div>
-  );
-}
-
-// ── UploadInput ─────────────────────────────────────────────────────
-
-export function UploadInput({ field, value, onChange, disabled, service, showLabel, showDescription }: FieldValueInputProps) {
-  const [uploading, setUploading] = useState(false);
-  const fileRef = useRef<HTMLInputElement>(null);
-
-  const handleFileChange = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0];
-      if (!file) return;
-      if (service?.uploadFile) {
-        setUploading(true);
-        try {
-          const result = await service.uploadFile(file);
-          onChange?.({ url: result.url, name: result.name });
-        } finally {
-          setUploading(false);
-        }
-      } else {
-        onChange?.(file);
-      }
-    },
-    [onChange, service],
-  );
-
-  const currentFileName =
-    value && typeof value === 'object' && 'name' in (value as Record<string, unknown>)
-      ? (value as { name: string }).name
-      : value instanceof File
-        ? value.name
-        : null;
-
-  return (
-    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
-      <div className="flex items-center gap-[8px]">
-        <button
-          type="button"
-          disabled={disabled || uploading}
-          onClick={() => fileRef.current?.click()}
-          className={cn(
-            'inline-flex items-center gap-[6px] h-[34px] px-[14px] rounded-[4px] text-[14px]',
-            'bg-[#F0F6FF] text-[#0265FF] border border-[#0265FF]',
-            transCls,
-            'hover:bg-[#E0EEFF]',
-            (disabled || uploading) && 'opacity-50 cursor-not-allowed',
-          )}
-        >
-          <UploadIcon />
-          {uploading ? '上传中...' : '上传文件'}
-        </button>
-        {currentFileName && (
-          <span className="text-[14px] text-[#030303] truncate">{currentFileName}</span>
-        )}
-        <input
-          ref={fileRef}
-          type="file"
-          onChange={handleFileChange}
-          className="hidden"
-          accept={field.widget?.type === 'image' ? 'image/*' : undefined}
-        />
-      </div>
-    </FieldWrapper>
-  );
-}
+import { useState, useRef, useCallback } from 'react';
+import type { FieldValueInputProps } from './index';
+import { FieldWrapper } from './index';
+import { UploadIcon } from './icons';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { DateInput } from '../date-picker/date-input';
+import type { DateFormat } from '../date-picker/types';
+import { formatDateByFormat } from '../date-picker/utils';
+
+const inputBaseCls =
+  'h-[34px] px-[10px] py-[7px] rounded-[4px] bg-white border text-[14px] text-[#030303] placeholder:text-[#999999] focus:outline-none focus:border-[#0265FF] w-full disabled:bg-[#EFF0F6] disabled:cursor-not-allowed';
+
+// ── TextInput ───────────────────────────────────────────────────────
+
+export function TextInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <input
+        type="text"
+        value={typeof value === 'string' ? value : ''}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        placeholder={field.description ?? `请输入${field.label}`}
+        className={inputBaseCls}
+      />
+    </FieldWrapper>
+  );
+}
+
+// ── NumberInput ─────────────────────────────────────────────────────
+
+export function NumberInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <input
+        type="number"
+        value={typeof value === 'number' || typeof value === 'string' ? value : ''}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange?.(v === '' ? '' : Number(v));
+        }}
+        disabled={disabled}
+        placeholder={field.description ?? `请输入${field.label}`}
+        className={inputBaseCls}
+      />
+    </FieldWrapper>
+  );
+}
+
+// ── TextareaInput ───────────────────────────────────────────────────
+
+export function TextareaInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <textarea
+        value={typeof value === 'string' ? value : ''}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        placeholder={field.description ?? `请输入${field.label}`}
+        rows={3}
+        className={cn(inputBaseCls, 'h-auto min-h-[68px] resize-y')}
+      />
+    </FieldWrapper>
+  );
+}
+
+// ── PasswordInput ───────────────────────────────────────────────────
+
+export function PasswordInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  const [show, setShow] = useState(false);
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <div className="relative">
+        <input
+          type={show ? 'text' : 'password'}
+          value={typeof value === 'string' ? value : ''}
+          onChange={(e) => onChange?.(e.target.value)}
+          disabled={disabled}
+          placeholder={field.description ?? `请输入${field.label}`}
+          className={cn(inputBaseCls, 'pr-[36px]')}
+        />
+        <button
+          type="button"
+          onClick={() => setShow(!show)}
+          className="absolute right-[8px] top-1/2 -translate-y-1/2 text-[#999999] text-[12px] hover:text-[#666666]"
+        >
+          {show ? '隐藏' : '显示'}
+        </button>
+      </div>
+    </FieldWrapper>
+  );
+}
+
+// ── DateTimeInput ───────────────────────────────────────────────────
+
+export function DateTimeInput({ field, value, onChange, disabled, showLabel, showDescription }: FieldValueInputProps) {
+  const format: DateFormat = ((field.widget as unknown as Record<string, unknown> | undefined))?.format as DateFormat || 'yyyy-MM-dd';
+  const dateValue = typeof value === 'string' && value ? new Date(value) : undefined;
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <DateInput
+        value={dateValue}
+        onChange={(date) => onChange?.(date ? formatDateByFormat(date,  field?.widget?.format ?? 'yyyy-MM-dd HH:mm:ss') /* date.toISOString() */ : '')}
+        format={format}
+        disabled={disabled}
+      />
+    </FieldWrapper>
+  );
+}
+
+// ── RangeNumberInput ─────────────────────────────────────────────────
+
+export function RangeNumberInput({ value, onChange, disabled }: FieldValueInputProps) {
+  const rangeValue = (value && typeof value === 'object' && !Array.isArray(value)
+    ? value
+    : { min: undefined, max: undefined }) as { min?: number; max?: number };
+
+  return (
+    <div className="flex items-center gap-[8px]">
+      <input
+        type="number"
+        value={rangeValue.min != null ? rangeValue.min : ''}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange?.({ ...rangeValue, min: v === '' ? undefined : Number(v) });
+        }}
+        disabled={disabled}
+        placeholder="最小值"
+        className={cn(inputBaseCls, 'flex-1')}
+      />
+      <span className="text-[#999] text-[14px] shrink-0">~</span>
+      <input
+        type="number"
+        value={rangeValue.max != null ? rangeValue.max : ''}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange?.({ ...rangeValue, max: v === '' ? undefined : Number(v) });
+        }}
+        disabled={disabled}
+        placeholder="最大值"
+        className={cn(inputBaseCls, 'flex-1')}
+      />
+    </div>
+  );
+}
+
+// ── RangeDateTimeInput ───────────────────────────────────────────────
+
+export function RangeDateTimeInput({ value, onChange, disabled, field }: FieldValueInputProps) {
+  const rangeValue = (value && typeof value === 'object' && !Array.isArray(value)
+    ? value
+    : { min: undefined, max: undefined }) as { min?: string; max?: string };
+
+  const minDate = rangeValue.min ? new Date(rangeValue.min) : undefined;
+  const maxDate = rangeValue.max ? new Date(rangeValue.max) : undefined;
+
+  const format = field?.widget?.format;
+
+  return (
+    <div className="flex items-center gap-[8px]">
+      <DateInput
+        value={minDate}
+        onChange={(date) => onChange?.({ ...rangeValue, min: date ? formatDateByFormat(date, format ?? 'yyyy-MM-dd HH:mm:ss') /* date.toISOString() */ : undefined })}
+        format="yyyy-MM-dd"
+        placeholder="开始日期"
+        disabled={disabled}
+        className="flex-1"
+      />
+      <span className="text-[#999] text-[14px] shrink-0">~</span>
+      <DateInput
+        value={maxDate}
+        onChange={(date) => onChange?.({ ...rangeValue, max: date ? formatDateByFormat(date, format ?? 'yyyy-MM-dd HH:mm:ss') /* date.toISOString() */ : undefined })}
+        format="yyyy-MM-dd"
+        placeholder="结束日期"
+        disabled={disabled}
+        className="flex-1"
+      />
+    </div>
+  );
+}
+
+// ── UploadInput ─────────────────────────────────────────────────────
+
+export function UploadInput({ field, value, onChange, disabled, service, showLabel, showDescription }: FieldValueInputProps) {
+  const [uploading, setUploading] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (service?.uploadFile) {
+        setUploading(true);
+        try {
+          const result = await service.uploadFile(file);
+          onChange?.({ url: result.url, name: result.name });
+        } finally {
+          setUploading(false);
+        }
+      } else {
+        onChange?.(file);
+      }
+    },
+    [onChange, service],
+  );
+
+  const currentFileName =
+    value && typeof value === 'object' && 'name' in (value as Record<string, unknown>)
+      ? (value as { name: string }).name
+      : value instanceof File
+        ? value.name
+        : null;
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <div className="flex items-center gap-[8px]">
+        <button
+          type="button"
+          disabled={disabled || uploading}
+          onClick={() => fileRef.current?.click()}
+          className={cn(
+            'inline-flex items-center gap-[6px] h-[34px] px-[14px] rounded-[4px] text-[14px]',
+            'bg-[#F0F6FF] text-[#0265FF] border border-[#0265FF]',
+            transCls,
+            'hover:bg-[#E0EEFF]',
+            (disabled || uploading) && 'opacity-50 cursor-not-allowed',
+          )}
+        >
+          <UploadIcon />
+          {uploading ? '上传中...' : '上传文件'}
+        </button>
+        {currentFileName && (
+          <span className="text-[14px] text-[#030303] truncate">{currentFileName}</span>
+        )}
+        <input
+          ref={fileRef}
+          type="file"
+          onChange={handleFileChange}
+          className="hidden"
+          accept={field.widget?.type === 'image' ? 'image/*' : undefined}
+        />
+      </div>
+    </FieldWrapper>
+  );
+}