openxiangda-cli 2.0.0-alpha.84 → 2.0.0-alpha.86

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

@@ -6,10 +6,12 @@ import {
 import {
   Alert,
   Button,
+  Checkbox,
   DatePicker,
   Form,
   Input,
   InputNumber,
+  Radio,
   Select,
   Space,
   Switch,
@@ -19,15 +21,30 @@ import {
 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,
-  MobileAuthoritativeSelector,
   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 };
 
@@ -41,35 +58,51 @@ 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,
@@ -79,7 +112,7 @@ export function SurfaceFilterControl({
   if (custom !== undefined) return custom;
   const placeholder = `筛选${field.label}`;
   switch (field.widget) {
-    case 'boolean':
+    case 'switch':
       return (
         <Select
           allowClear
@@ -90,11 +123,11 @@ export function SurfaceFilterControl({
         />
       );
     case 'select':
-    case 'multi':
+    case 'multi-select':
       return (
         <Select
           allowClear
-          mode={field.widget === 'multi' ? 'multiple' : undefined}
+          mode={field.widget === 'multi-select' ? 'multiple' : undefined}
           options={field.options}
           placeholder={placeholder}
           value={value}
@@ -102,14 +135,11 @@ export function SurfaceFilterControl({
         />
       );
     case 'date':
+    case 'time':
     case 'datetime':
-      return range ? (
-        <DatePicker.RangePicker
-          placeholder={[`起始${field.label}`, `结束${field.label}`]}
-          showTime={field.widget === 'datetime'}
-          onChange={(_, values) => onChange(values[0] && values[1] ? [values[0], values[1]] : undefined)}
-        />
-      ) : <DatePicker showTime={field.widget === 'datetime'} onChange={onChange} placeholder={placeholder} />;
+    case 'date-range':
+    case 'datetime-range':
+      return <DateTimeFilter field={field} onChange={onChange} value={value} />;
     case 'number':
     case 'money':
     case 'percent':
@@ -117,28 +147,117 @@ export function SurfaceFilterControl({
         const values = Array.isArray(value) ? value as [number | undefined, number | undefined] : [];
         return (
           <Space.Compact>
-            <InputNumber min={0} onChange={next => onChange([next === null ? undefined : Number(next), values[1]])} placeholder={`最低${field.label}`} value={values[0]} />
-            <InputNumber min={0} onChange={next => onChange([values[0], next === null ? undefined : Number(next)])} placeholder={`最高${field.label}`} value={values[1]} />
+            <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 min={0} onChange={onChange} placeholder={placeholder} value={value as number | null | undefined} />;
+      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.multiple} onChange={onChange as (value: string | string[] | undefined) => void} placeholder={placeholder} value={value as string | string[] | undefined} />;
+      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 source="resource" resourceCode={field.reference?.kind === 'resource' ? field.reference.resourceCode : undefined} labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined} multiple={field.multiple} onChange={onChange as (value: string | string[] | undefined) => void} placeholder={placeholder} value={value as string | string[] | undefined} operation="update" />;
+      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 }) {
@@ -153,7 +272,11 @@ export function SurfaceFieldControl({
       ? [{ pattern: /^1\d{10}$/, message: '请输入 11 位手机号' }]
       : []),
   ];
-  const common = { disabled, placeholder: `请输入${field.label}` };
+  const common = {
+    disabled,
+    ...(field.maxLength === undefined ? {} : { maxLength: field.maxLength }),
+    placeholder: `请输入${field.label}`,
+  };
   let control: ReactNode = <Input {...common} />;
   switch (field.widget) {
     case 'textarea':
@@ -162,20 +285,33 @@ export function SurfaceFieldControl({
     case 'number':
     case 'money':
     case 'percent':
-      control = <InputNumber {...common} min={0} style={{ width: '100%' }} />;
+      control = <InputNumber {...common} {...numberInputProps(field)} style={{ width: '100%' }} />;
       break;
     case 'date':
+    case 'time':
     case 'datetime':
-      control = <DatePicker disabled={disabled} showTime={field.widget === 'datetime'} style={{ width: '100%' }} />;
+    case 'date-range':
+    case 'datetime-range':
+      control = <DateTimeField disabled={disabled} field={field} />;
       break;
-    case 'boolean':
+    case 'switch':
       control = <Switch checkedChildren="是" disabled={disabled} unCheckedChildren="否" />;
       break;
     case 'select':
-      control = <Select disabled={disabled} options={field.options} placeholder={`请选择${field.label}`} />;
-      break;
-    case 'multi':
-      control = <Select disabled={disabled} mode="multiple" options={field.options} placeholder={`请选择${field.label}`} />;
+    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" />;
@@ -194,42 +330,92 @@ export function SurfaceFieldControl({
         <PlatformDirectoryPicker
           disabled={disabled}
           kind={field.widget === 'directory-user' ? 'user' : 'department'}
-          multiple={field.multiple}
+          multiple={field.type.endsWith('.multiple')}
           placeholder={`搜索并选择${field.label}`}
         />
       );
       break;
     case 'resource':
       control = (
-        <AuthoritativeSelector
+        <ResourceReferenceField
           disabled={disabled}
-          labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined}
-          multiple={field.multiple}
+          field={field}
+          fieldCode={field.key}
           operation={operation}
-          placeholder={`搜索并选择${field.label}`}
-          resourceCode={field.reference?.kind === 'resource' ? field.reference.resourceCode : undefined}
-          source="resource"
+          resourceCode={resourceCode}
         />
       );
       break;
-    case 'file':
+    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}
-          multiple={field.multiple}
+          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 = <Input.TextArea {...common} rows={4} />;
+      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} readOnly />;
+      control = (
+        <Input
+          {...common}
+          placeholder={field.type === 'serial-number'
+            ? '保存后由系统自动生成'
+            : '由系统生成'}
+          readOnly
+        />
+      );
       break;
     case 'text':
     default:
@@ -238,7 +424,7 @@ export function SurfaceFieldControl({
   const extra =
     renderers?.renderExtra?.({ field, disabled, operation, recordId }) ||
     (disabled ? '当前角色不可修改此字段' : undefined);
-  const wide = field.widget === 'textarea' || field.widget === 'file' || field.widget === 'json';
+  const wide = ['textarea', 'attachment', 'image', 'rich-text', 'address', 'location', 'signature', 'json', 'subtable'].includes(field.widget);
   return (
     <Form.Item
       className={wide ? 'oxa-field-wide' : undefined}
@@ -246,7 +432,7 @@ export function SurfaceFieldControl({
       label={field.label}
       name={field.key}
       rules={rules}
-      valuePropName={field.widget === 'boolean' ? 'checked' : 'value'}
+      valuePropName={field.widget === 'switch' ? 'checked' : 'value'}
     >
       {control}
     </Form.Item>
@@ -258,47 +444,64 @@ 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', placeholder: `请输入${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':
-    case 'json':
       control = <textarea {...inputProps} rows={4} />;
       break;
     case 'number':
     case 'money':
     case 'percent':
-      control = <input {...inputProps} min={0} type="number" />;
+      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':
-      control = <input {...inputProps} type="date" />;
-      break;
+    case 'time':
     case 'datetime':
-      control = <input {...inputProps} type="datetime-local" />;
+    case 'date-range':
+    case 'datetime-range':
+      control = <DateTimeField disabled={disabled} field={field} mobile />;
       break;
-    case 'boolean':
+    case 'switch':
       control = <input disabled={disabled} type="checkbox" />;
       break;
     case 'select':
-    case 'multi':
-      control = (
-        <select
-          className="oxa-mobile-input"
+    case 'multi-select':
+    case 'radio':
+    case 'checkbox':
+      control = field.source ? (
+        <ResourceReferenceField
           disabled={disabled}
-          multiple={field.widget === 'multi'}
-        >
-          {field.options?.map(option => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
+          field={field}
+          fieldCode={field.key}
+          mobile
+          operation={operation}
+          resourceCode={resourceCode}
+        />
+      ) : (
+        <StaticOptionField disabled={disabled} field={field} />
       );
       break;
     case 'email':
@@ -318,40 +521,96 @@ export function MobileSurfaceFieldControl({
         <PlatformDirectoryPicker
           disabled={disabled}
           kind={field.widget === 'directory-user' ? 'user' : 'department'}
-          multiple={field.multiple}
+          multiple={field.type.endsWith('.multiple')}
           placeholder={`搜索并选择${field.label}`}
         />
       );
       break;
     case 'resource':
       control = (
-        <MobileAuthoritativeSelector
+        <ResourceReferenceField
           disabled={disabled}
-          labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined}
-          multiple={field.multiple}
+          field={field}
+          fieldCode={field.key}
+          mobile
           operation={operation}
-          placeholder={`搜索并选择${field.label}`}
-          resourceCode={field.reference?.kind === 'resource' ? field.reference.resourceCode : undefined}
-          source="resource"
+          resourceCode={resourceCode}
         />
       );
       break;
-    case 'file':
+    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}
-          multiple={field.multiple}
+          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} readOnly />;
+      control = (
+        <input
+          {...inputProps}
+          placeholder={field.type === 'serial-number'
+            ? '保存后由系统自动生成'
+            : '由系统生成'}
+          readOnly
+        />
+      );
       break;
   }
   return (
@@ -361,7 +620,7 @@ export function MobileSurfaceFieldControl({
       label={field.label}
       name={field.key}
       rules={rules}
-      valuePropName={field.widget === 'boolean' ? 'checked' : 'value'}
+      valuePropName={field.widget === 'switch' ? 'checked' : 'value'}
     >
       {control}
     </Form.Item>
@@ -371,6 +630,7 @@ export function MobileSurfaceFieldControl({
 export function SurfaceFieldValue({
   field,
   value,
+  resourceCode,
   renderers,
 }: SurfaceFieldValueContext & { renderers?: SurfaceFieldRenderers }) {
   if (value === undefined || value === null || value === '') return <>-</>;
@@ -380,31 +640,66 @@ export function SurfaceFieldValue({
     return (
       <ResolvedValueText
         source={field.widget === 'directory-user' ? 'user' : 'department'}
-        value={Array.isArray(value) ? value.map(String) : String(value)}
+        value={value as never}
       />
     );
   }
-  if (field.widget === 'resource' && field.reference?.kind === 'resource') {
-    return <ResolvedValueText labelField={field.reference.labelField} resourceCode={field.reference.resourceCode} source="resource" value={Array.isArray(value) ? value.map(String) : String(value)} />;
+  if (field.type.startsWith('resource-ref.')) {
+    return (
+      <ResolvedValueText
+        source="resource"
+        value={value as ResourceReferenceValue | ResourceReferenceValue[]}
+      />
+    );
   }
-  if (field.widget === 'file') {
+  if (field.type === 'file' || field.type === 'image') {
     const values = (Array.isArray(value) ? value : [value]).filter(isFileRef);
-    return values.length ? <AttachmentFileList files={values} /> : <>-</>;
+    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.widget === 'boolean') {
+  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 (field.widget === 'date' || field.widget === 'datetime') {
-    const parsed = new Date(String(value));
-    return <>{Number.isNaN(parsed.getTime()) ? String(value) : parsed.toLocaleString('zh-CN', { hour12: false })}</>;
+  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);
 }
 
@@ -434,8 +729,10 @@ function ManagedFileField({
   disabled,
   multiple,
   maxCount = 1,
+  maxSizeMb = 50,
   accept,
   onUpload,
+  resourceCode,
   mobile = false,
 }: {
   field: SurfaceField;
@@ -445,8 +742,10 @@ function ManagedFileField({
   disabled?: boolean;
   multiple?: boolean;
   maxCount?: number;
+  maxSizeMb?: number;
   accept?: string | string[];
   onUpload?: SurfaceFieldRenderers['upload'];
+  resourceCode?: string;
   mobile?: boolean;
 }) {
   const [uploading, setUploading] = useState(false);
@@ -459,6 +758,11 @@ function ManagedFileField({
   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="该文件字段尚未配置上传能力" />;
   }
@@ -469,6 +773,7 @@ function ManagedFileField({
       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] : [];
@@ -536,7 +841,7 @@ function ManagedFileField({
           </div>
         )}
         {refs.length ? (
-          <AttachmentFileList files={refs} onRemove={file => {
+          <AttachmentFileList files={refs} resourceCode={resourceCode} onRemove={file => {
             const next = refs.filter(item => item.id !== file.id);
             refsRef.current = next;
             onChange?.(multiple ? next : undefined);
@@ -561,6 +866,7 @@ function ManagedFileField({
       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 });
@@ -587,7 +893,7 @@ function ManagedFileField({
       </Upload>
       <Upload.Dragger {...uploadProps} className="oxa-file-dropzone" openFileDialogOnClick={false} pastable>
         <span>可将文件拖到这里，或在此区域按 <kbd>⌘ V</kbd> 粘贴</span>
-        <small>{multiple ? `最多 ${maxCount} 个文件，单个不超过 50MB` : '仅保留一个文件，新上传会替换当前文件'}</small>
+        <small>{multiple ? `最多 ${maxCount} 个文件，单个不超过 ${maxSizeMb}MB` : `仅保留一个文件，单个不超过 ${maxSizeMb}MB`}</small>
       </Upload.Dragger>
       {uploadError && (
         <div className="oxa-file-error">
@@ -596,7 +902,7 @@ function ManagedFileField({
         </div>
       )}
       {refs.length ? (
-        <AttachmentFileList files={refs} onRemove={file => {
+        <AttachmentFileList files={refs} resourceCode={resourceCode} onRemove={file => {
           const next = refs.filter(item => item.id !== file.id);
           refsRef.current = next;
           onChange?.(multiple ? next : undefined);