@baishuyun/ai-design 1.0.3 → 1.0.4

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

@@ -0,0 +1,71 @@
+import type { IField } from '@baishuyun/types';
+import { FieldWrapper } from './index';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+
+// ── SeparatorDisplay ────────────────────────────────────────────────
+
+export function SeparatorDisplay({ field }: { field: IField }) {
+  return (
+    <div className="flex items-center gap-[8px] py-[8px]">
+      <div className="flex-1 h-px bg-[#E0E0E0]" />
+      {field.label && (
+        <span className="text-[12px] text-[#999999] shrink-0">{field.label}</span>
+      )}
+      <div className="flex-1 h-px bg-[#E0E0E0]" />
+    </div>
+  );
+}
+
+// ── SerialNumberDisplay ─────────────────────────────────────────────
+
+export function SerialNumberDisplay({ field, value, showLabel, showDescription }: {
+  field: IField;
+  value?: unknown;
+  showLabel?: boolean;
+  showDescription?: boolean;
+}) {
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <span className="text-[14px] text-[#999999] leading-[34px]">
+        {typeof value === 'string' ? value : '系统自动生成'}
+      </span>
+    </FieldWrapper>
+  );
+}
+
+// ── ButtonDisplay ───────────────────────────────────────────────────
+
+export function ButtonDisplay({ field }: { field: IField }) {
+  return (
+    <div className="pt-[20px]">
+      <button
+        type="button"
+        className={cn(
+          'inline-flex items-center justify-center h-[34px] px-[20px] rounded-[4px]',
+          'bg-[#0265FF] text-[14px] text-white',
+          'hover:bg-[#0255DF]',
+          transCls,
+        )}
+      >
+        {field.label}
+      </button>
+    </div>
+  );
+}
+
+// ── SubformPlaceholder ──────────────────────────────────────────────
+
+export function SubformPlaceholder({ field, showLabel, showDescription }: {
+  field: IField;
+  showLabel?: boolean;
+  showDescription?: boolean;
+}) {
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <div className="h-[34px] px-[10px] rounded-[4px] bg-[#F6F7FA] border border-dashed border-[#CCCCCC] text-[14px] text-[#999999] leading-[34px] text-center">
+        子表单字段（{field.widget?.widgetName ?? field.label}）
+      </div>
+    </FieldWrapper>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { cn } from '../../../lib/utils';
+
+// ── Shared SVG Icons for FieldValueInput ────────────────────────────
+
+export const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0 transition-transform duration-200')}
+    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 ClearIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
+    <path d="M3 3L11 11M11 3L3 11" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+export const UploadIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
+    <path d="M8 10.5V2M4 6L8 2L12 6" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2 11V12.5C2 13.3284 2.67157 14 3.5 14H12.5C13.3284 14 14 13.3284 14 12.5V11" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+export 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>
+);
+
+export const CheckIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
+    <path d="M2 7L5.5 10.5L12 3.5" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);

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

@@ -0,0 +1,144 @@
+import type { IField, IFieldValueService, relationalOperator } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+
+// ── Sub-component imports ───────────────────────────────────────────
+
+import { TextInput, NumberInput, TextareaInput, PasswordInput, DateTimeInput, UploadInput, RangeNumberInput, RangeDateTimeInput } from './inputs';
+import { ComboInput, CheckboxGroupInput, RadioGroupInput, AsyncPicker, CascadingAddressInput, TextMultiSelect } from './picker-inputs';
+import { SeparatorDisplay, ButtonDisplay, SubformPlaceholder } from './display';
+
+// ── Props ───────────────────────────────────────────────────────────
+
+export interface FieldValueInputProps {
+  field: IField;
+  value?: unknown;
+  onChange?: (value: unknown) => void;
+  service?: IFieldValueService;
+  operator?: relationalOperator;
+  disabled?: boolean;
+  showLabel?: boolean;
+  showDescription?: boolean;
+  className?: string;
+}
+
+// ── Shared styles ───────────────────────────────────────────────────
+
+const labelCls = 'text-[14px] font-bold text-[#030303] leading-[20px]';
+const descriptionCls = 'text-[12px] text-[#999999] leading-[18px]';
+const requiredCls = 'text-[#FF5631]';
+
+// ── Utility ─────────────────────────────────────────────────────────
+
+function isRequired(field: IField): boolean {
+  return field.widget?.allowBlank === false;
+}
+
+// ── Shared sub-components ───────────────────────────────────────────
+
+function FieldLabel({ field }: { field: IField }) {
+  return (
+    <label className={cn(labelCls, 'block mb-[4px]')}>
+      {isRequired(field) && <span className={requiredCls}>*</span>}
+      {field.label}
+    </label>
+  );
+}
+
+function FieldDescription({ field }: { field: IField }) {
+  if (!field.description) return null;
+  return <p className={cn(descriptionCls, 'mb-[6px]')}>{field.description}</p>;
+}
+
+export function FieldWrapper({
+  field,
+  showLabel = false,
+  showDescription = false,
+  className,
+  children,
+}: {
+  field: IField;
+  showLabel?: boolean;
+  showDescription?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn('flex flex-col', className)}>
+      {showLabel && <FieldLabel field={field} />}
+      {showDescription && <FieldDescription field={field} />}
+      {children}
+    </div>
+  );
+}
+
+// ── Main Component ──────────────────────────────────────────────────
+
+export const FieldValueInput = (props: FieldValueInputProps) => {
+  const { field, operator } = props;
+  const widgetType = field.widget?.type;
+
+  switch (widgetType) {
+    // ── text / sn: in/nin → multi-select, otherwise → text input ──
+    case 'text':
+    case 'sn':
+      if (operator && (operator === 'in' || operator === 'nin')) {
+        return <TextMultiSelect {...props} />;
+      }
+      return <TextInput {...props} />;
+
+    // ── number: range → min/max, otherwise → single number input ──
+    case 'number':
+      if (operator === 'range') {
+        return <RangeNumberInput {...props} />;
+      }
+      return <NumberInput {...props} />;
+
+    // ── datetime: range → min/max, otherwise → single datetime input ──
+    case 'datetime':
+      if (operator === 'range') {
+        return <RangeDateTimeInput {...props} />;
+      }
+      return <DateTimeInput {...props} />;
+
+    // ── user / dept / usergroup / deptgroup: multi-op → multi-select ──
+    case 'user':
+      return <AsyncPicker {...props} kind="user" multiple={operator === 'in' || operator === 'nin'} />;
+    case 'dept':
+      return <AsyncPicker {...props} kind="dept" multiple={operator === 'in' || operator === 'nin'} />;
+    case 'usergroup':
+      return <AsyncPicker {...props} kind="usergroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
+    case 'deptgroup':
+      return <AsyncPicker {...props} kind="deptgroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
+
+    // ── Combo / linkdata / linkquery ──
+    case 'combo':
+    case 'linkdata':
+    case 'linkquery':
+      return <ComboInput {...props} />;
+    case 'combocheck':
+    case 'checkboxgroup':
+      return <CheckboxGroupInput {...props} />;
+    case 'radiogroup':
+      return <RadioGroupInput {...props} />;
+    case 'textarea':
+      return <TextareaInput {...props} />;
+    case 'password':
+      return <PasswordInput {...props} />;
+    case 'upload':
+    case 'image':
+      return <UploadInput {...props} />;
+    case 'address':
+    case 'location':
+      return <CascadingAddressInput {...props} />;
+    case 'separator':
+      return <SeparatorDisplay field={field} />;
+    case 'button':
+      return <ButtonDisplay field={field} />;
+    case 'subform':
+      return <SubformPlaceholder field={field} showLabel={props.showLabel} showDescription={props.showDescription} />;
+    default:
+      return <TextInput {...props} />;
+  }
+};
+
+FieldValueInput.displayName = 'FieldValueInput';

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

@@ -0,0 +1,244 @@
+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';
+
+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 ? 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 }: 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;
+
+  return (
+    <div className="flex items-center gap-[8px]">
+      <DateInput
+        value={minDate}
+        onChange={(date) => onChange?.({ ...rangeValue, min: date ? 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 ? 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>
+  );
+}