openxiangda-cli 2.0.0-alpha.89 → 2.0.0-alpha.90

package/template/apps/web/src/components/resource/SurfaceFields.tsx

@@ -1,915 +0,0 @@
-import {
-  PictureOutlined,
-  ReloadOutlined,
-  UploadOutlined,
-} from '@ant-design/icons';
-import {
-  Alert,
-  Button,
-  Checkbox,
-  DatePicker,
-  Form,
-  Input,
-  InputNumber,
-  Radio,
-  Select,
-  Space,
-  Switch,
-  Tag,
-  Upload,
-} from 'antd';
-import type {
-  DataFieldSurface,
-  DataFileRef,
-  DepartmentReferenceValue,
-  LabeledValue,
-  ResourceReferenceValue,
-  StableAddressValue,
-  StableLocationValue,
-  StableSignatureValue,
-  UserReferenceValue,
-} from 'openxiangda-contracts/browser';
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import {
-  AuthoritativeSelector,
-  ResolvedValueText,
-} from '../../AuthoritativeSelector';
-import { AddressField, AddressValueDisplay } from '../platform-fields/AddressField';
-import { AttachmentFileList, formatManagedFileSize } from '../platform-fields/AttachmentFileList';
-import { CascadeField, CascadeValueDisplay } from '../platform-fields/CascadeField';
-import type { CascadeStoredValue } from '../platform-fields/cascade-value';
-import { DateTimeField, DateTimeFilter, DateTimeValueDisplay } from '../platform-fields/DateTimeField';
-import { JsonField, JsonValueDisplay } from '../platform-fields/JsonField';
-import { LocationField, LocationValueDisplay } from '../platform-fields/LocationField';
-import { PlatformDirectoryPicker } from '../platform-fields/PlatformDirectoryPicker';
-import { ResourceReferenceField } from '../platform-fields/ResourceReferenceField';
-import { RichTextField, RichTextValueDisplay } from '../platform-fields/RichTextField';
-import { SignatureField, SignatureValueDisplay } from '../platform-fields/SignatureField';
-
-export type SurfaceField = DataFieldSurface & { key: string };
-
-export function listSurfaceFields(fields: Record<string, DataFieldSurface>) {
-  return Object.entries(fields)
-    .filter(([, field]) => field.list)
-    .map(([key, field]) => ({ key, ...field }));
-}
-
-export interface SurfaceFieldEditContext {
-  field: SurfaceField;
-  disabled: boolean;
-  operation: 'create' | 'update';
-  resourceCode?: string;
-  recordId?: string;
-}
-
-export interface SurfaceFieldValueContext {
-  field: SurfaceField;
-  value: unknown;
-  resourceCode?: string;
-}
-
-export interface SurfaceFieldRenderers {
-  renderExtra?: (context: SurfaceFieldEditContext) => ReactNode;
-  renderScope?: (context: SurfaceFieldEditContext) => ReactNode;
-  renderSubtable?: (context: SurfaceFieldEditContext) => ReactNode;
-  renderFilter?: (context: SurfaceFilterContext) => ReactNode;
-  upload?: (
-    field: SurfaceField,
-    file: File,
-    recordId?: string
-  ) => Promise<DataFileRef>;
-  signer?: UserReferenceValue;
-  renderValue?: (context: SurfaceFieldValueContext) => ReactNode | undefined;
-}
-
-export interface SurfaceFilterContext {
-  field: SurfaceField;
-  resourceCode?: string;
-  value: unknown;
-  onChange: (value: unknown) => void;
-}
-
-function numberInputProps(field: SurfaceField) {
-  const scale = field.type === 'number.integer' ? 0 : field.scale;
-  return {
-    ...(scale === undefined ? {} : { precision: scale }),
-    step: scale === undefined ? 'any' : scale === 0 ? 1 : 10 ** -scale,
-    ...(field.widget === 'money' ? { prefix: '¥' } : {}),
-    ...(field.widget === 'percent' ? { suffix: '%' } : {}),
-  };
-}
-
-/** Render a standard filter control from the same field surface used by forms. */
-export function SurfaceFilterControl({
-  field,
-  resourceCode,
-  value,
-  onChange,
-  range = false,
-  renderers,
-}: SurfaceFilterContext & { range?: boolean; renderers?: Pick<SurfaceFieldRenderers, 'renderScope' | 'renderFilter'> }) {
-  const custom = renderers?.renderFilter?.({ field, value, onChange });
-  if (custom !== undefined) return custom;
-  const placeholder = `筛选${field.label}`;
-  switch (field.widget) {
-    case 'switch':
-      return (
-        <Select
-          allowClear
-          options={[{ label: '是', value: true }, { label: '否', value: false }]}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-        />
-      );
-    case 'select':
-    case 'multi-select':
-      return (
-        <Select
-          allowClear
-          mode={field.widget === 'multi-select' ? 'multiple' : undefined}
-          options={field.options}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-        />
-      );
-    case 'date':
-    case 'time':
-    case 'datetime':
-    case 'date-range':
-    case 'datetime-range':
-      return <DateTimeFilter field={field} onChange={onChange} value={value} />;
-    case 'number':
-    case 'money':
-    case 'percent':
-      if (range) {
-        const values = Array.isArray(value) ? value as [number | undefined, number | undefined] : [];
-        return (
-          <Space.Compact>
-            <InputNumber {...numberInputProps(field)} onChange={next => onChange([next === null ? undefined : Number(next), values[1]])} placeholder={`最低${field.label}`} value={values[0]} />
-            <InputNumber {...numberInputProps(field)} onChange={next => onChange([values[0], next === null ? undefined : Number(next)])} placeholder={`最高${field.label}`} value={values[1]} />
-          </Space.Compact>
-        );
-      }
-      return <InputNumber {...numberInputProps(field)} onChange={onChange} placeholder={placeholder} value={value as number | null | undefined} />;
-    case 'scope':
-      return renderers?.renderScope?.({ field, disabled: false, operation: 'update' }) || <Input allowClear value={value as string | undefined} onChange={event => onChange(event.target.value)} placeholder={placeholder} />;
-    case 'directory-user':
-    case 'directory-department':
-      return <PlatformDirectoryPicker kind={field.widget === 'directory-user' ? 'user' : 'department'} multiple={field.type.endsWith('.multiple')} onChange={onChange as (value: UserReferenceValue | DepartmentReferenceValue | Array<UserReferenceValue | DepartmentReferenceValue> | undefined) => void} placeholder={placeholder} value={value as UserReferenceValue | DepartmentReferenceValue | Array<UserReferenceValue | DepartmentReferenceValue> | undefined} />;
-    case 'resource':
-      return (
-        <AuthoritativeSelector
-          fieldCode={field.key}
-          multiple={field.type === 'resource-ref.multiple'}
-          onChange={onChange}
-          operation="update"
-          placeholder={placeholder}
-          resourceCode={resourceCode}
-          source="resource"
-          value={value as ResourceReferenceValue | ResourceReferenceValue[] | undefined}
-        />
-      );
-    case 'cascade':
-      return (
-        <CascadeField
-          field={field}
-          onChange={onChange}
-          value={value as CascadeStoredValue | undefined}
-        />
-      );
-    case 'address':
-      return (
-        <AddressField
-          detailEnabled={false}
-          onChange={onChange}
-          value={value as StableAddressValue | undefined}
-        />
-      );
-    case 'json':
-      return <JsonField onChange={onChange} value={value} />;
-    default:
-      return <Input allowClear value={value as string | undefined} onChange={event => onChange(event.target.value)} placeholder={placeholder} />;
-  }
-}
-
-function snapshotIds(value: LabeledValue | LabeledValue[] | undefined) {
-  return (Array.isArray(value) ? value : value ? [value] : []).map(
-    item => item.value
-  );
-}
-
-function StaticOptionField({
-  field,
-  value,
-  onChange,
-  disabled,
-}: {
-  field: SurfaceField;
-  value?: LabeledValue | LabeledValue[];
-  onChange?: (value: LabeledValue | LabeledValue[] | undefined) => void;
-  disabled?: boolean;
-}) {
-  const multiple = field.type === 'option.multiple';
-  const ids = snapshotIds(value);
-  const emit = (next: string | string[] | undefined) => {
-    const selected = (Array.isArray(next) ? next : next ? [next] : [])
-      .map(id => field.options?.find(option => option.value === id))
-      .filter((item): item is LabeledValue => Boolean(item))
-      .map(item => ({ ...item }));
-    onChange?.(multiple ? selected : selected[0]);
-  };
-  if (field.widget === 'radio') {
-    return (
-      <Radio.Group
-        disabled={disabled}
-        onChange={event => emit(event.target.value)}
-        options={field.options}
-        value={ids[0]}
-      />
-    );
-  }
-  if (field.widget === 'checkbox') {
-    return (
-      <Checkbox.Group
-        disabled={disabled}
-        onChange={next => emit(next.map(String))}
-        options={field.options}
-        value={ids}
-      />
-    );
-  }
-  return (
-    <Select
-      allowClear
-      disabled={disabled}
-      mode={multiple ? 'multiple' : undefined}
-      onChange={next => emit(next || undefined)}
-      options={field.options}
-      placeholder={`请选择${field.label}`}
-      value={multiple ? ids : ids[0]}
-    />
-  );
-}
-
-export function SurfaceFieldControl({
-  field,
-  disabled,
-  operation,
-  resourceCode,
-  recordId,
-  renderers,
-}: SurfaceFieldEditContext & { renderers?: SurfaceFieldRenderers }) {
-  const rules = [
-    ...(field.requiredHint
-      ? [{ required: true, message: `请填写或选择${field.label}` }]
-      : []),
-    ...(field.widget === 'email'
-      ? [{ type: 'email' as const, message: '邮箱格式不正确' }]
-      : []),
-    ...(field.widget === 'phone'
-      ? [{ pattern: /^1\d{10}$/, message: '请输入 11 位手机号' }]
-      : []),
-  ];
-  const common = {
-    disabled,
-    ...(field.maxLength === undefined ? {} : { maxLength: field.maxLength }),
-    placeholder: `请输入${field.label}`,
-  };
-  let control: ReactNode = <Input {...common} />;
-  switch (field.widget) {
-    case 'textarea':
-      control = <Input.TextArea {...common} rows={3} />;
-      break;
-    case 'number':
-    case 'money':
-    case 'percent':
-      control = <InputNumber {...common} {...numberInputProps(field)} style={{ width: '100%' }} />;
-      break;
-    case 'date':
-    case 'time':
-    case 'datetime':
-    case 'date-range':
-    case 'datetime-range':
-      control = <DateTimeField disabled={disabled} field={field} />;
-      break;
-    case 'switch':
-      control = <Switch checkedChildren="是" disabled={disabled} unCheckedChildren="否" />;
-      break;
-    case 'select':
-    case 'multi-select':
-    case 'radio':
-    case 'checkbox':
-      control = field.source ? (
-        <ResourceReferenceField
-          disabled={disabled}
-          field={field}
-          fieldCode={field.key}
-          operation={operation}
-          resourceCode={resourceCode}
-        />
-      ) : (
-        <StaticOptionField disabled={disabled} field={field} />
-      );
-      break;
-    case 'email':
-      control = <Input {...common} type="email" />;
-      break;
-    case 'phone':
-      control = <Input {...common} type="tel" />;
-      break;
-    case 'scope':
-      control = renderers?.renderScope?.({ field, disabled, operation, recordId }) || (
-        <Input {...common} />
-      );
-      break;
-    case 'directory-user':
-    case 'directory-department':
-      control = (
-        <PlatformDirectoryPicker
-          disabled={disabled}
-          kind={field.widget === 'directory-user' ? 'user' : 'department'}
-          multiple={field.type.endsWith('.multiple')}
-          placeholder={`搜索并选择${field.label}`}
-        />
-      );
-      break;
-    case 'resource':
-      control = (
-        <ResourceReferenceField
-          disabled={disabled}
-          field={field}
-          fieldCode={field.key}
-          operation={operation}
-          resourceCode={resourceCode}
-        />
-      );
-      break;
-    case 'cascade':
-      control = <CascadeField disabled={disabled} field={field} />;
-      break;
-    case 'attachment':
-    case 'image':
-      control = (
-        <ManagedFileField
-          accept={field.accept}
-          disabled={disabled}
-          field={field}
-          maxCount={field.maxCount}
-          maxSizeMb={field.maxSizeMb}
-          multiple={field.type === 'file'}
-          onUpload={renderers?.upload}
-          recordId={recordId}
-          resourceCode={resourceCode}
-        />
-      );
-      break;
-    case 'location':
-      control = <LocationField disabled={disabled} />;
-      break;
-    case 'signature':
-      control = (
-        <SignatureField
-          disabled={disabled}
-          onUpload={renderers?.upload
-            ? file => renderers.upload!(field, file, recordId)
-            : undefined}
-          resourceCode={resourceCode}
-          signer={renderers?.signer}
-        />
-      );
-      break;
-    case 'address':
-      control = <AddressField disabled={disabled} />;
-      break;
-    case 'rich-text':
-      control = (
-        <RichTextField
-          disabled={disabled}
-          onUpload={renderers?.upload
-            ? file => renderers.upload!(field, file, recordId)
-            : undefined}
-          resourceCode={resourceCode}
-        />
-      );
-      break;
-    case 'json':
-      control = <JsonField disabled={disabled} />;
-      break;
-    case 'subtable':
-      control = renderers?.renderSubtable?.({
-        field,
-        disabled,
-        operation,
-        resourceCode,
-        recordId,
-      }) || <Alert message="子表渲染器未配置" showIcon type="error" />;
-      break;
-    case 'readonly':
-      control = (
-        <Input
-          {...common}
-          placeholder={field.type === 'serial-number'
-            ? '保存后由系统自动生成'
-            : '由系统生成'}
-          readOnly
-        />
-      );
-      break;
-    case 'text':
-    default:
-      break;
-  }
-  const extra =
-    renderers?.renderExtra?.({ field, disabled, operation, recordId }) ||
-    (disabled ? '当前角色不可修改此字段' : undefined);
-  const wide = ['textarea', 'attachment', 'image', 'rich-text', 'address', 'location', 'signature', 'json', 'subtable'].includes(field.widget);
-  return (
-    <Form.Item
-      className={wide ? 'oxa-field-wide' : undefined}
-      extra={extra}
-      label={field.label}
-      name={field.key}
-      rules={rules}
-      valuePropName={field.widget === 'switch' ? 'checked' : 'value'}
-    >
-      {control}
-    </Form.Item>
-  );
-}
-
-/** Mobile keeps the same field values and validation but uses native controls. */
-export function MobileSurfaceFieldControl({
-  field,
-  disabled,
-  operation,
-  resourceCode,
-  recordId,
-  renderers,
-}: SurfaceFieldEditContext & { renderers?: SurfaceFieldRenderers }) {
-  const rules = field.requiredHint
-    ? [{ required: true, message: `请填写或选择${field.label}` }]
-    : [];
-  const inputProps = {
-    disabled,
-    className: 'oxa-mobile-input',
-    ...(field.maxLength === undefined ? {} : { maxLength: field.maxLength }),
-    placeholder: `请输入${field.label}`,
-  };
-  let control: ReactNode = <input {...inputProps} />;
-  switch (field.widget) {
-    case 'textarea':
-      control = <textarea {...inputProps} rows={4} />;
-      break;
-    case 'number':
-    case 'money':
-    case 'percent':
-      control = (
-        <div className="oxa-mobile-number-field">
-          {field.widget === 'money' && <span>¥</span>}
-          <input
-            {...inputProps}
-            step={numberInputProps(field).step}
-            type="number"
-          />
-          {field.widget === 'percent' && <span>%</span>}
-        </div>
-      );
-      break;
-    case 'date':
-    case 'time':
-    case 'datetime':
-    case 'date-range':
-    case 'datetime-range':
-      control = <DateTimeField disabled={disabled} field={field} mobile />;
-      break;
-    case 'switch':
-      control = <input disabled={disabled} type="checkbox" />;
-      break;
-    case 'select':
-    case 'multi-select':
-    case 'radio':
-    case 'checkbox':
-      control = field.source ? (
-        <ResourceReferenceField
-          disabled={disabled}
-          field={field}
-          fieldCode={field.key}
-          mobile
-          operation={operation}
-          resourceCode={resourceCode}
-        />
-      ) : (
-        <StaticOptionField disabled={disabled} field={field} />
-      );
-      break;
-    case 'email':
-      control = <input {...inputProps} type="email" />;
-      break;
-    case 'phone':
-      control = <input {...inputProps} type="tel" />;
-      break;
-    case 'scope':
-      control = renderers?.renderScope?.({ field, disabled, operation, recordId }) || (
-        <input {...inputProps} />
-      );
-      break;
-    case 'directory-user':
-    case 'directory-department':
-      control = (
-        <PlatformDirectoryPicker
-          disabled={disabled}
-          kind={field.widget === 'directory-user' ? 'user' : 'department'}
-          multiple={field.type.endsWith('.multiple')}
-          placeholder={`搜索并选择${field.label}`}
-        />
-      );
-      break;
-    case 'resource':
-      control = (
-        <ResourceReferenceField
-          disabled={disabled}
-          field={field}
-          fieldCode={field.key}
-          mobile
-          operation={operation}
-          resourceCode={resourceCode}
-        />
-      );
-      break;
-    case 'cascade':
-      control = <CascadeField disabled={disabled} field={field} />;
-      break;
-    case 'attachment':
-    case 'image':
-      control = (
-        <ManagedFileField
-          accept={field.accept}
-          disabled={disabled}
-          field={field}
-          maxCount={field.maxCount}
-          maxSizeMb={field.maxSizeMb}
-          multiple={field.type === 'file'}
-          mobile
-          onUpload={renderers?.upload}
-          recordId={recordId}
-          resourceCode={resourceCode}
-        />
-      );
-      break;
-    case 'location':
-      control = <LocationField disabled={disabled} mobile />;
-      break;
-    case 'signature':
-      control = (
-        <SignatureField
-          disabled={disabled}
-          mobile
-          onUpload={renderers?.upload
-            ? file => renderers.upload!(field, file, recordId)
-            : undefined}
-          resourceCode={resourceCode}
-          signer={renderers?.signer}
-        />
-      );
-      break;
-    case 'address':
-      control = <AddressField disabled={disabled} mobile />;
-      break;
-    case 'rich-text':
-      control = (
-        <RichTextField
-          disabled={disabled}
-          mobile
-          onUpload={renderers?.upload
-            ? file => renderers.upload!(field, file, recordId)
-            : undefined}
-          resourceCode={resourceCode}
-        />
-      );
-      break;
-    case 'json':
-      control = <JsonField disabled={disabled} mobile />;
-      break;
-    case 'subtable':
-      control = renderers?.renderSubtable?.({
-        field,
-        disabled,
-        operation,
-        resourceCode,
-        recordId,
-      }) || <Alert message="子表渲染器未配置" showIcon type="error" />;
-      break;
-    case 'readonly':
-      control = (
-        <input
-          {...inputProps}
-          placeholder={field.type === 'serial-number'
-            ? '保存后由系统自动生成'
-            : '由系统生成'}
-          readOnly
-        />
-      );
-      break;
-  }
-  return (
-    <Form.Item
-      className="oxa-mobile-field"
-      extra={renderers?.renderExtra?.({ field, disabled, operation, recordId })}
-      label={field.label}
-      name={field.key}
-      rules={rules}
-      valuePropName={field.widget === 'switch' ? 'checked' : 'value'}
-    >
-      {control}
-    </Form.Item>
-  );
-}
-
-export function SurfaceFieldValue({
-  field,
-  value,
-  resourceCode,
-  renderers,
-}: SurfaceFieldValueContext & { renderers?: SurfaceFieldRenderers }) {
-  if (value === undefined || value === null || value === '') return <>-</>;
-  const custom = renderers?.renderValue?.({ field, value });
-  if (custom !== undefined) return <>{custom}</>;
-  if (field.widget === 'directory-user' || field.widget === 'directory-department') {
-    return (
-      <ResolvedValueText
-        source={field.widget === 'directory-user' ? 'user' : 'department'}
-        value={value as never}
-      />
-    );
-  }
-  if (field.type.startsWith('resource-ref.')) {
-    return (
-      <ResolvedValueText
-        source="resource"
-        value={value as ResourceReferenceValue | ResourceReferenceValue[]}
-      />
-    );
-  }
-  if (field.type === 'file' || field.type === 'image') {
-    const values = (Array.isArray(value) ? value : [value]).filter(isFileRef);
-    return values.length ? <AttachmentFileList files={values} resourceCode={resourceCode} /> : <>-</>;
-  }
-  if (field.type === 'location') {
-    return <LocationValueDisplay value={value as StableLocationValue} />;
-  }
-  if (field.type === 'address') {
-    return <AddressValueDisplay value={value as StableAddressValue} />;
-  }
-  if (field.type === 'text.rich') {
-    return <RichTextValueDisplay value={String(value)} />;
-  }
-  if (field.type === 'json') {
-    return <JsonValueDisplay value={value} />;
-  }
-  if (field.type === 'signature') {
-    return (
-      <SignatureValueDisplay
-        resourceCode={resourceCode}
-        value={value as StableSignatureValue}
-      />
-    );
-  }
-  if (field.type === 'cascade.single' || field.type === 'cascade.multiple') {
-    return (
-      <CascadeValueDisplay
-        multiple={field.type === 'cascade.multiple'}
-        value={value as CascadeStoredValue}
-      />
-    );
-  }
-  if (field.type === 'boolean') {
-    return <Tag color={value ? 'green' : 'default'}>{value ? '是' : '否'}</Tag>;
-  }
-  if (Array.isArray(value)) {
-    return <>{value.map(item => optionLabel(field, item)).join('、') || '-'}</>;
-  }
-  if (['date', 'time', 'datetime', 'date-range', 'datetime-range'].includes(field.type)) {
-    return <DateTimeValueDisplay field={field} value={value} />;
-  }
-  return <>{optionLabel(field, value)}</>;
-}
-
-function optionLabel(field: SurfaceField, value: unknown) {
-  if (value && typeof value === 'object' && 'label' in value) {
-    return String((value as LabeledValue).label);
-  }
-  return field.options?.find(option => option.value === value)?.label || String(value);
-}
-
-function isFileRef(value: unknown): value is DataFileRef {
-  return Boolean(value && typeof value === 'object' && 'id' in value);
-}
-
-type MobilePendingUpload = {
-  id: string;
-  file: File;
-  status: 'uploading' | 'error';
-  error?: string;
-};
-
-let mobileUploadSequence = 0;
-
-function createMobileUploadId() {
-  mobileUploadSequence += 1;
-  return `mobile-upload-${Date.now()}-${mobileUploadSequence}`;
-}
-
-function ManagedFileField({
-  field,
-  value,
-  onChange,
-  recordId,
-  disabled,
-  multiple,
-  maxCount = 1,
-  maxSizeMb = 50,
-  accept,
-  onUpload,
-  resourceCode,
-  mobile = false,
-}: {
-  field: SurfaceField;
-  value?: DataFileRef | DataFileRef[];
-  onChange?: (value: DataFileRef | DataFileRef[] | undefined) => void;
-  recordId?: string;
-  disabled?: boolean;
-  multiple?: boolean;
-  maxCount?: number;
-  maxSizeMb?: number;
-  accept?: string | string[];
-  onUpload?: SurfaceFieldRenderers['upload'];
-  resourceCode?: string;
-  mobile?: boolean;
-}) {
-  const [uploading, setUploading] = useState(false);
-  const [uploadError, setUploadError] = useState('');
-  const [mobilePending, setMobilePending] = useState<MobilePendingUpload[]>([]);
-  const mobileInputRef = useRef<HTMLInputElement | null>(null);
-  const mobileActiveUploads = useRef(0);
-  const refs = useMemo(() => (Array.isArray(value) ? value : value ? [value] : []), [value]);
-  const refsRef = useRef(refs);
-  useEffect(() => {
-    refsRef.current = refs;
-  }, [refs]);
-  const assertSize = (file: File) => {
-    if (file.size > maxSizeMb * 1024 * 1024) {
-      throw new Error(`单个文件不能超过 ${maxSizeMb}MB`);
-    }
-  };
-  if (!onUpload) {
-    return <Alert type="info" showIcon title="该文件字段尚未配置上传能力" />;
-  }
-  if (mobile) {
-    const acceptValue = Array.isArray(accept) ? accept.join(',') : accept;
-    const uploadOne = async (item: MobilePendingUpload) => {
-      setMobilePending(current => current.map(entry => entry.id === item.id ? { ...entry, status: 'uploading', error: undefined } : entry));
-      mobileActiveUploads.current += 1;
-      setUploading(true);
-      try {
-        assertSize(item.file);
-        const uploaded = await onUpload(field, item.file, recordId);
-        const next = multiple ? [...refsRef.current, uploaded].slice(0, maxCount) : uploaded;
-        refsRef.current = Array.isArray(next) ? next : next ? [next] : [];
-        onChange?.(next);
-        setMobilePending(current => current.filter(entry => entry.id !== item.id));
-      } catch (error) {
-        setMobilePending(current => current.map(entry => entry.id === item.id ? { ...entry, status: 'error', error: error instanceof Error ? error.message : String(error) } : entry));
-      } finally {
-        mobileActiveUploads.current = Math.max(0, mobileActiveUploads.current - 1);
-        setUploading(mobileActiveUploads.current > 0);
-      }
-    };
-    const selectFiles = (files: File[]) => {
-      const pendingCount = mobilePending.length;
-      const available = Math.max(0, maxCount - refsRef.current.length - pendingCount);
-      const selected = multiple ? files.slice(0, available) : files.slice(0, 1);
-      if (!selected.length) return;
-      const items = selected.map(file => ({ id: createMobileUploadId(), file, status: 'uploading' as const }));
-      setMobilePending(current => multiple ? [...current, ...items] : items);
-      items.forEach(item => void uploadOne(item));
-    };
-    return (
-      <div className="oxa-file-field oxa-mobile-file-field">
-        <input
-          ref={mobileInputRef}
-          accept={acceptValue}
-          disabled={disabled || uploading || mobilePending.some(item => item.status === 'uploading') || refs.length + mobilePending.length >= maxCount}
-          multiple={multiple}
-          onChange={event => {
-            selectFiles(Array.from(event.target.files || []));
-            event.currentTarget.value = '';
-          }}
-          style={{ display: 'none' }}
-          type="file"
-        />
-        {(!maxCount || refs.length + mobilePending.length < maxCount) && (
-          <Button
-            className="oxa-mobile-file-button"
-            disabled={disabled || uploading || mobilePending.some(item => item.status === 'uploading')}
-            icon={<UploadOutlined />}
-            onClick={() => mobileInputRef.current?.click()}
-          >
-            上传文件
-          </Button>
-        )}
-        {mobilePending.length > 0 && (
-          <div className="oxa-mobile-pending-files">
-            {mobilePending.map(item => (
-              <div className="oxa-mobile-pending-file" key={item.id}>
-                <span className="oxa-mobile-pending-file-copy">
-                  <strong className="oxa-mobile-pending-file-name" title={item.file.name}>{item.file.name}</strong>
-                  <small>{formatManagedFileSize(item.file.size)} · {item.status === 'error' ? '上传失败' : '上传中…'}</small>
-                </span>
-                {item.status === 'error' ? (
-                  <>
-                    <span className="oxa-mobile-pending-error">{item.error || '上传失败'}</span>
-                    <Button onClick={() => void uploadOne(item)} size="small" type="link">重试</Button>
-                    <Button onClick={() => setMobilePending(current => current.filter(entry => entry.id !== item.id))} size="small" type="link">移除</Button>
-                  </>
-                ) : (
-                  <span className="oxa-mobile-pending-status">上传中…</span>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-        {refs.length ? (
-          <AttachmentFileList files={refs} resourceCode={resourceCode} onRemove={file => {
-            const next = refs.filter(item => item.id !== file.id);
-            refsRef.current = next;
-            onChange?.(multiple ? next : undefined);
-          }} removable={!disabled} />
-        ) : (
-          <div className="oxa-file-empty">尚未上传文件</div>
-        )}
-      </div>
-    );
-  }
-  const uploadProps = {
-    accept: Array.isArray(accept) ? accept.join(',') : accept,
-    disabled,
-    maxCount,
-    multiple,
-    customRequest: async (options: {
-      file: string | Blob;
-      onError?: (error: Error) => void;
-      onProgress?: (event: { percent: number }) => void;
-      onSuccess?: (body: unknown) => void;
-    }) => {
-      setUploading(true);
-      setUploadError('');
-      try {
-        assertSize(options.file as File);
-        options.onProgress?.({ percent: 15 });
-        const uploaded = await onUpload(field, options.file as File, recordId);
-        options.onProgress?.({ percent: 100 });
-        const next = multiple ? [...refsRef.current, uploaded] : uploaded;
-        refsRef.current = Array.isArray(next) ? next : [next];
-        onChange?.(next);
-        options.onSuccess?.(uploaded);
-      } catch (error) {
-        const failure = error instanceof Error ? error : new Error(String(error));
-        setUploadError(failure.message);
-        options.onError?.(failure);
-      } finally {
-        setUploading(false);
-      }
-    },
-    showUploadList: false,
-  };
-  return (
-    <div className="oxa-file-field">
-      <Upload {...uploadProps} pastable>
-        <Button disabled={disabled || uploading || refs.length >= maxCount} icon={field.accept?.toString().startsWith('image/') ? <PictureOutlined /> : <UploadOutlined />} loading={uploading}>
-          {field.accept?.toString().startsWith('image/') ? '上传图片' : '上传文件'}
-        </Button>
-      </Upload>
-      <Upload.Dragger {...uploadProps} className="oxa-file-dropzone" openFileDialogOnClick={false} pastable>
-        <span>可将文件拖到这里，或在此区域按 <kbd>⌘ V</kbd> 粘贴</span>
-        <small>{multiple ? `最多 ${maxCount} 个文件，单个不超过 ${maxSizeMb}MB` : `仅保留一个文件，单个不超过 ${maxSizeMb}MB`}</small>
-      </Upload.Dragger>
-      {uploadError && (
-        <div className="oxa-file-error">
-          <span>{uploadError}</span>
-          <Button icon={<ReloadOutlined />} onClick={() => setUploadError('')} size="small" type="text">关闭</Button>
-        </div>
-      )}
-      {refs.length ? (
-        <AttachmentFileList files={refs} resourceCode={resourceCode} onRemove={file => {
-          const next = refs.filter(item => item.id !== file.id);
-          refsRef.current = next;
-          onChange?.(multiple ? next : undefined);
-        }} removable={!disabled} />
-      ) : (
-        <div className="oxa-file-empty">尚未上传文件</div>
-      )}
-    </div>
-  );
-}