react-extjs 0.0.1

package/src/components/DateMenu.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { createPortal } from 'react-dom';
+import { DatePicker } from './DatePicker';
+
+export interface DateMenuProps {
+  /** 是否展开。受控，由触发器（如按钮）管理。 */
+  open?: boolean;
+  /** 触发元素（用于定位浮层到其下方，对齐 Ext 菜单定位）。 */
+  anchorRef?: React.RefObject<HTMLElement>;
+  /** 已选日期（决定 DatePicker 的 x-date-selected 高亮）。 */
+  value?: Date | null;
+  /** 一周起始日，0=周日（与 Ext startDay 一致）。 */
+  startDay?: number;
+  /** 是否显示底部“今天”按钮，默认 true。 */
+  showToday?: boolean;
+  /** 最小可选日期（早于则 x-date-disabled）。 */
+  minDate?: Date | null;
+  /** 最大可选日期。 */
+  maxDate?: Date | null;
+  /** 禁用的星期索引数组，如 [0,6]。 */
+  disabledDays?: number[];
+  /** 选中回调，参数为选中的 Date（对齐 Ext select / handler 事件）。 */
+  onSelect?: (date: Date) => void;
+  /** 选中后是否关闭，默认 true（对齐 Ext hideOnClick）。 */
+  hideOnClick?: boolean;
+  /** 关闭回调（外部点击 / Esc / 选中后）。 */
+  onClose?: () => void;
+}
+
+export interface DateMenuHandle {
+  /** 打开浮层 */
+  open: () => void;
+  /** 关闭浮层 */
+  close: () => void;
+  /** 是否展开 */
+  isOpen: () => boolean;
+}
+
+/**
+ * DateMenu —— 保真复刻 Ext.menu.DateMenu（src/widgets/menu/DateMenu.js，Ext 3.2.1）。
+ *
+ * 保真契约（DOM/class 严格对齐源码）：
+ *  - 根：x-menu x-menu-floating x-layer x-date-menu x-menu-plain x-menu-nosep
+ *        （plain:true → x-menu-plain；showSeparator:false → x-menu-nosep；cls:'x-date-menu'）
+ *  - a.x-menu-focus（隐藏聚焦元素）+ ul.x-menu-list（padding 2px）
+ *  - li.x-menu-list-item（padding 上下 1px）→ 直接子 div.x-date-picker.x-menu-date-item
+ *    （组件型 item 直接 render 进 li，无 a.x-menu-item 包裹，与 ColorMenu 同构）
+ *  - 内部复用 DatePicker（含表头/日历网格/月份选择浮层/今天按钮），选中后
+ *    hideOnClick→onClose，并触发 onSelect(date)（对齐 Ext relayEvents(picker,'select')）。
+ *  - 浮层用 Portal 渲染到 body（对齐 Ext 菜单浮动到 body），fixed 定位到触发器下方，
+ *    整数坐标（对齐 Ext.Layer）。
+ *
+ * 全部样式来自 ext-all.css，零新增 CSS 契约破坏。
+ */
+export const DateMenu = forwardRef<DateMenuHandle, DateMenuProps>(function DateMenu(
+  {
+    open,
+    anchorRef,
+    value,
+    startDay,
+    showToday,
+    minDate,
+    maxDate,
+    disabledDays,
+    onSelect,
+    hideOnClick = true,
+    onClose,
+  },
+  ref,
+) {
+  const [dynOpen, setDynOpen] = useState<boolean>(open ?? false);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
+  const openRef = useRef(dynOpen);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => setDynOpen(true),
+      close: () => setDynOpen(false),
+      isOpen: () => openRef.current,
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    openRef.current = dynOpen;
+  }, [dynOpen]);
+
+  useEffect(() => {
+    if (open !== undefined) setDynOpen(open);
+  }, [open]);
+
+  useEffect(() => {
+    if (!dynOpen) {
+      setCoords(null);
+      return;
+    }
+    const el = anchorRef?.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      setCoords({ top: Math.round(r.bottom), left: Math.round(r.left) });
+    }
+    // 对齐 Ext 菜单：点击浮层外部或缩放窗口时关闭；延迟挂载避免捕获打开当次点击。
+    const onDocDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement;
+      if (
+        !t.closest('.x-date-menu') &&
+        !t.closest('.x-date-picker') &&
+        !(anchorRef?.current && anchorRef.current.contains(t))
+      ) {
+        onClose?.();
+        setDynOpen(false);
+      }
+    };
+    const close = () => {
+      onClose?.();
+      setDynOpen(false);
+    };
+    const t = window.setTimeout(() => {
+      document.addEventListener('mousedown', onDocDown);
+      window.addEventListener('resize', close);
+    }, 0);
+    return () => {
+      window.clearTimeout(t);
+      document.removeEventListener('mousedown', onDocDown);
+      window.removeEventListener('resize', close);
+    };
+  }, [dynOpen, anchorRef, onClose]);
+
+  if (!dynOpen || !coords) return null;
+
+  return createPortal(
+    <div
+      className="x-menu x-menu-floating x-layer x-date-menu x-menu-plain x-menu-nosep"
+      style={{ position: 'fixed', visibility: 'visible', zIndex: 15000, top: coords.top, left: coords.left }}
+    >
+      <a href="#" className="x-menu-focus" tabIndex={-1} onClick={(e) => e.preventDefault()} />
+      <ul className="x-menu-list">
+        <li className="x-menu-list-item">
+          <DatePicker
+            className="x-menu-date-item"
+            value={value}
+            startDay={startDay}
+            showToday={showToday}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabledDays={disabledDays}
+            onSelect={(d) => {
+              onSelect?.(d);
+              if (hideOnClick) {
+                setDynOpen(false);
+                onClose?.();
+              }
+            }}
+          />
+        </li>
+      </ul>
+    </div>,
+    document.body,
+  );
+});
+
+(DateMenu as React.FC).displayName = 'DateMenu';

package/src/components/DatePicker.tsx

@@ -0,0 +1,387 @@
+/**
+ * DatePicker —— 保真复刻 Ext.DatePicker（src/widgets/DatePicker.js onRender 304-327）。
+ *
+ * 保真契约（DOM/class 严格对齐源码）：
+ *  - 根：div.x-date-picker
+ *  - 表头 table > tr > td.x-date-left(上一月) / td.x-date-middle(月年，点击开月份选择) / td.x-date-right(下一月)
+ *  - 日历表 table.x-date-inner > thead(周几，取 dayNames 首字母) + tbody（固定 6 行 × 7 = 42 格）
+ *  - 每格 td，class 之一/组合：x-date-active / x-date-prevday / x-date-nextday / x-date-today / x-date-selected / x-date-disabled
+ *      内 a.x-date-date[ tabIndex=1 hidefocus=on] > em > span(日)
+ *  - 底部（showToday）：tr > td.x-date-bottom(今天按钮)
+ *  - 月份选择浮层：div.x-date-mp（结构见 createMonthPicker 434-453）
+ *
+ * 交互（行为契约）：
+ *  - 上一月/下一月箭头：切换显示月份
+ *  - 点击日格：触发 onSelect(date)（单选模式）
+ *  - 今天按钮：onSelect(今天)
+ *  - 中间月年：切换 x-date-mp 月份选择浮层（选月/年后回到日历）
+ *  - hover 高亮由 CSS .x-date-inner a:hover 提供（与 combo 不同，这里确有 :hover 规则）
+ *
+ * 范围选择（rangeSelect，对齐 Ext 派生 DateRangeField / RangeMenu 的选段行为，非源码内建）：
+ *  - rangeSelect=true 时，首次点击设起点，再次点击设终点并高亮 [起点,终点] 闭区间（含端点 x-date-selected、
+ *    区间内日期走内联浅蓝背景，复用既有视觉而非新增 CSS 类，零契约破坏）。
+ *  - 选满两段后再点击任一格 -> 重置为新起点。onRangeSelect 回传选中日期数组。
+ */
+import { useState, useMemo, type CSSProperties } from 'react';
+
+const DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+const SHORT_MONTH_NAMES = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+
+export interface DatePickerProps {
+  /** 已选日期（决定 x-date-selected 高亮，单选模式） */
+  value?: Date | null;
+  /** 一周起始日，0=周日（与 Ext startDay 一致） */
+  startDay?: number;
+  /** 是否显示底部“今天”按钮，默认 true */
+  showToday?: boolean;
+  todayText?: string;
+  /** 最小可选日期（早于则 x-date-disabled） */
+  minDate?: Date | null;
+  /** 最大可选日期 */
+  maxDate?: Date | null;
+  /** 禁用的星期索引数组，如 [0,6] */
+  disabledDays?: number[];
+  /** 点击某日回调（单选模式） */
+  onSelect?: (date: Date) => void;
+  /** 附加 class（如 DateMenu 中 Ext 会加 ctCls=x-menu-date-item） */
+  className?: string;
+
+  /** 范围选择模式（默认 false，开启后点击两日形成闭区间高亮） */
+  rangeSelect?: boolean;
+  /** 范围模式初始选中日期数组（端点） */
+  selectedDates?: Date[];
+  /** 范围模式选中变化回调（回传闭区间端点数组） */
+  onRangeSelect?: (dates: Date[]) => void;
+  /** 透传根节点内联样式（用于组合场景覆盖原版 .x-date-picker 的默认 margin 等） */
+  style?: CSSProperties;
+}
+
+interface Cell {
+  day: number;
+  cls: string;
+  date: Date;
+  title: string;
+  disabled: boolean;
+  /** 处于选定区间内（不含端点，端点用 x-date-selected 标记） */
+  inRange: boolean;
+}
+
+function startOfDay(d: Date) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+function buildCells(
+  view: Date,
+  startDay: number,
+  selectedTimes: number[],
+  rangeSet: Set<number> | null,
+  min: Date | null | undefined,
+  max: Date | null | undefined,
+  disabledDays?: number[],
+): Cell[] {
+  const year = view.getFullYear();
+  const month = view.getMonth();
+  const first = new Date(year, month, 1);
+  let startingPos = first.getDay() - startDay;
+  if (startingPos < 0) startingPos += 7;
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const total = daysInMonth + startingPos; // active + leading prevdays
+
+  const today = startOfDay(new Date());
+  const todayT = today.getTime();
+  const selSet = new Set(selectedTimes);
+  const minT = min ? startOfDay(min).getTime() : Number.NEGATIVE_INFINITY;
+  const maxT = max ? startOfDay(max).getTime() : Number.POSITIVE_INFINITY;
+
+  // 起始游标：上月倒数第 startingPos 天
+  let cursor = new Date(year, month - 1, new Date(year, month, 0).getDate() - startingPos);
+  const cells: Cell[] = [];
+  for (let i = 0; i < 42; i++) {
+    cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 1);
+    const t = startOfDay(cursor);
+    const tT = t.getTime();
+    let cls = i < startingPos ? 'x-date-prevday' : i < total ? 'x-date-active' : 'x-date-nextday';
+    let title = '';
+    let disabled = false;
+    let inRange = false;
+
+    if (selSet.has(tT)) cls += ' x-date-selected';
+    if (tT === todayT) {
+      cls += ' x-date-today';
+      title = 'Today';
+    }
+    if (rangeSet && rangeSet.has(tT)) inRange = true;
+    if (tT < minT) {
+      cls = ' x-date-disabled';
+      title = 'The date is before the minimum date';
+      disabled = true;
+    } else if (tT > maxT) {
+      cls = ' x-date-disabled';
+      title = 'The date is after the maximum date';
+      disabled = true;
+    } else if (disabledDays && disabledDays.indexOf(t.getDay()) !== -1) {
+      cls = ' x-date-disabled';
+      title = 'Disabled';
+      disabled = true;
+    }
+    cells.push({ day: t.getDate(), cls: cls.trim(), date: t, title, disabled, inRange });
+  }
+  return cells;
+}
+
+export function DatePicker({
+  value,
+  startDay = 0,
+  showToday = true,
+  todayText = 'Today',
+  minDate,
+  maxDate,
+  disabledDays,
+  onSelect,
+  className,
+  rangeSelect = false,
+  selectedDates,
+  onRangeSelect,
+  style,
+}: DatePickerProps) {
+  // Ext.DatePicker 默认选中今天（value 未提供时）
+  const effectiveValue = value ?? startOfDay(new Date());
+  const initialSel = selectedDates && selectedDates.length ? selectedDates : value ? [value] : [];
+  const [selDates, setSelDates] = useState<Date[]>(initialSel);
+
+  const rangeMode = rangeSelect;
+  const viewInit = selDates.length ? selDates[0] : effectiveValue;
+  const initial = new Date(viewInit.getFullYear(), viewInit.getMonth(), 1);
+  const [view, setView] = useState<Date>(initial);
+  const [mpYear, setMpYear] = useState<number>(view.getFullYear());
+  const [showMonthPicker, setShowMonthPicker] = useState(false);
+
+  const { selectedTimes, rangeSet } = useMemo(() => {
+    if (rangeMode) {
+      const times = selDates
+        .map((d) => startOfDay(d).getTime())
+        .sort((a, b) => a - b);
+      let rs: Set<number> | null = null;
+      if (times.length === 2) {
+        rs = new Set<number>();
+        const day = 86400000;
+        for (let t = times[0] + day; t < times[1]; t += day) rs.add(t);
+      }
+      return { selectedTimes: times, rangeSet: rs };
+    }
+    const sel = selDates.length
+      ? startOfDay(selDates[0]).getTime()
+      : effectiveValue
+      ? startOfDay(effectiveValue).getTime()
+      : null;
+    return { selectedTimes: sel == null ? [] : [sel], rangeSet: null };
+  }, [rangeMode, selDates, effectiveValue]);
+
+  const cells = useMemo(
+    () => buildCells(view, startDay, selectedTimes, rangeSet, minDate, maxDate, disabledDays),
+    [view, startDay, selectedTimes, rangeSet, minDate, maxDate, disabledDays],
+  );
+
+  const weekHeaders = useMemo(() => {
+    const arr: string[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = (startDay + i) % 7;
+      arr.push(DAY_NAMES[d].charAt(0));
+    }
+    return arr;
+  }, [startDay]);
+
+  const monthLabel = `${MONTH_NAMES[view.getMonth()]} ${view.getFullYear()}`;
+
+  const moveMonth = (delta: number) => {
+    setView((v) => new Date(v.getFullYear(), v.getMonth() + delta, 1));
+  };
+
+  // 10 年窗口（与 updateMPYear 逻辑对齐）：y, y+1, y-1, y+2, y-2, y+3, y-3, y+4, y-4, y+5
+  const years = useMemo(() => {
+    const list: number[] = [];
+    for (let i = 1; i <= 10; i++) {
+      list.push(i % 2 === 0 ? mpYear + Math.round(i * 0.5) : mpYear - Math.round(((i - 1) * 0.5)));
+    }
+    return list;
+  }, [mpYear]);
+
+  const pickMonth = (m: number) => {
+    setView((v) => new Date(v.getFullYear(), m, 1));
+    setShowMonthPicker(false);
+  };
+  const pickYear = (y: number) => {
+    setView((v) => new Date(y, v.getMonth(), 1));
+    setShowMonthPicker(false);
+  };
+
+  const handleDayClick = (c: Cell) => {
+    if (c.disabled) return;
+    if (rangeMode) {
+      setSelDates((prev) => {
+        let next: Date[];
+        if (prev.length >= 2) {
+          next = [c.date];
+        } else if (prev.length === 1) {
+          const a = startOfDay(prev[0]).getTime();
+          const b = startOfDay(c.date).getTime();
+          next = a <= b ? [prev[0], c.date] : [c.date, prev[0]];
+        } else {
+          next = [c.date];
+        }
+        onRangeSelect?.(next);
+        return next;
+      });
+    } else {
+      setSelDates([c.date]);
+      onSelect?.(c.date);
+    }
+  };
+
+  return (
+    <div className={['x-date-picker', className].filter(Boolean).join(' ')} style={style}>
+      <table cellSpacing={0}>
+        <tbody>
+          <tr>
+            <td className="x-date-left">
+              <a href="#" title="Previous Month" onClick={(e) => { e.preventDefault(); moveMonth(-1); }}>&#160;</a>
+            </td>
+            <td className="x-date-middle" align="center">
+              <table cellSpacing={0} className="x-btn x-btn-noicon" style={{ width: 'auto' }}>
+                <tbody className="x-btn-small x-btn-icon-small-left">
+                  <tr>
+                    <td className="x-btn-tl"><i>&#160;</i></td>
+                    <td className="x-btn-tc"></td>
+                    <td className="x-btn-tr"><i>&#160;</i></td>
+                  </tr>
+                  <tr>
+                    <td className="x-btn-ml"><i>&#160;</i></td>
+                    <td className="x-btn-mc">
+                      <em className="x-btn-arrow" unselectable="on">
+                        <button type="button" className="x-btn-text" onClick={() => setShowMonthPicker((s) => !s)}>
+                          {monthLabel}
+                        </button>
+                      </em>
+                    </td>
+                    <td className="x-btn-mr"><i>&#160;</i></td>
+                  </tr>
+                  <tr>
+                    <td className="x-btn-bl"><i>&#160;</i></td>
+                    <td className="x-btn-bc"></td>
+                    <td className="x-btn-br"><i>&#160;</i></td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+            <td className="x-date-right">
+              <a href="#" title="Next Month" onClick={(e) => { e.preventDefault(); moveMonth(1); }}>&#160;</a>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={3}>
+              <table className="x-date-inner" cellSpacing={0}>
+                <thead>
+                  <tr>
+                    {weekHeaders.map((w, i) => (
+                      <th key={i}><span>{w}</span></th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {Array.from({ length: 6 }).map((_, r) => (
+                    <tr key={r}>
+                      {cells.slice(r * 7, r * 7 + 7).map((c, ci) => (
+                        <td
+                          key={ci}
+                          className={[c.cls, c.inRange ? 'x-date-selected' : ''].filter(Boolean).join(' ')}
+                          title={c.title}
+                        >
+                          <a
+                            href="#"
+                            className="x-date-date"
+                            tabIndex={1}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              handleDayClick(c);
+                            }}
+                          >
+                            <em><span>{c.day}</span></em>
+                          </a>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </td>
+          </tr>
+          {showToday && (
+            <tr>
+              <td colSpan={3} className="x-date-bottom" align="center" style={{ paddingTop: 4, paddingBottom: 8 }}>
+                <button
+                  type="button"
+                  className="x-date-today"
+                  style={{ border: 0, background: 'none', cursor: 'pointer' }}
+                  onClick={() => (rangeMode ? handleDayClick({ date: startOfDay(new Date()), disabled: false } as Cell) : onSelect?.(startOfDay(new Date())))}
+                >
+                  {todayText}
+                </button>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+
+      <div className="x-date-mp" style={{ display: showMonthPicker ? 'block' : 'none' }}>
+        <table border={0} cellSpacing={0}>
+          <tbody>
+            {Array.from({ length: 6 }).map((_, r) => (
+              <tr key={r}>
+                <td className="x-date-mp-month">
+                  <a href="#" onClick={(e) => { e.preventDefault(); pickMonth(r); }}>{SHORT_MONTH_NAMES[r]}</a>
+                </td>
+                <td className="x-date-mp-month x-date-mp-sep">
+                  <a href="#" onClick={(e) => { e.preventDefault(); pickMonth(r + 6); }}>{SHORT_MONTH_NAMES[r + 6]}</a>
+                </td>
+                {r === 0 ? (
+                  <>
+                    <td className="x-date-mp-ybtn" align="center">
+                      <a className="x-date-mp-prev" onClick={(e) => { e.preventDefault(); setMpYear((y) => y - 1); }}></a>
+                    </td>
+                    <td className="x-date-mp-ybtn" align="center">
+                      <a className="x-date-mp-next" onClick={(e) => { e.preventDefault(); setMpYear((y) => y + 1); }}></a>
+                    </td>
+                  </>
+                ) : (
+                  <>
+                    <td className="x-date-mp-year">
+                      <a href="#" onClick={(e) => { e.preventDefault(); pickYear(years[(r - 1) * 2]); }}>{years[(r - 1) * 2]}</a>
+                    </td>
+                    <td className="x-date-mp-year">
+                      <a href="#" onClick={(e) => { e.preventDefault(); pickYear(years[(r - 1) * 2 + 1]); }}>{years[(r - 1) * 2 + 1]}</a>
+                    </td>
+                  </>
+                )}
+              </tr>
+            ))}
+            <tr className="x-date-mp-btns">
+              <td colSpan={4}>
+                <button type="button" className="x-date-mp-ok" onClick={() => setShowMonthPicker(false)}>OK</button>
+                <button type="button" className="x-date-mp-cancel" onClick={() => setShowMonthPicker(false)}>Cancel</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default DatePicker;

package/src/components/DisplayField.tsx

@@ -0,0 +1,73 @@
+import { type CSSProperties } from 'react';
+
+/**
+ * Ext.form.DisplayField 保真复刻（来源 src/widgets/form/DisplayField.js）
+ *
+ * 保真契约：
+ * - DisplayField.autoCreate（DisplayField.js）：tag 'div'，cls 'x-form-display-field'
+ * - Field.onRender：renderTo 时直接 createChild(autoCreate) → 裸 <div class="x-form-display-field">
+ * - 在 FormLayout 中由 FormField 包裹为 x-form-item > label + x-form-element > 本元素
+ * （复用 Form.tsx 的 FormField，已产出 x-form-item 结构，DOM 与 golden 的 IN_FORM 完全一致）
+ *
+ * 行为契约（对齐 Ext DisplayField）：
+ * - value / setValue：显示文本，支持 HTML（Ext 用 update(value) 直写 innerHTML）
+ * - html：若提供则优先于 value（Ext 的 html 配置）
+ * - 只读展示，无输入态、无校验
+ *
+ * React 仅产出与 Ext 同构的 DOM/class，复用 ext-all.css 得到像素级还原（零 CSS 契约破坏）。
+ */
+export interface DisplayFieldProps {
+  /** 字段名（落到 div 的 name 属性，对齐 Ext）。 */
+  name?: string;
+  /** 显示文本；支持纯文本或 HTML 字符串。 */
+  value?: string;
+  /** HTML 内容（优先级高于 value）。 */
+  html?: string;
+  /** 透传到根 div 的 id（用于 FormField 的 htmlFor 关联）。 */
+  id?: string;
+  /** 附加 class（追加到 x-form-display-field 之后）。 */
+  className?: string;
+  /** 透传测试 id。 */
+  testId?: string;
+  width?: number | string;
+  style?: CSSProperties;
+}
+
+export function DisplayField({
+  name,
+  value,
+  html,
+  id,
+  className,
+  testId,
+  width,
+  style,
+}: DisplayFieldProps) {
+  const cls = ['x-form-display-field', className].filter(Boolean).join(' ');
+  const divStyle = { ...(width !== undefined ? { width } : {}), ...style };
+  // Ext 用 update() 直写 innerHTML：html 配置优先级高于 value，且直接落到 div 上（无额外包裹），
+  // 以与 golden 的 <div class="x-form-display-field">{html}</div> 同构。
+  if (html !== undefined) {
+    return (
+      <div
+        id={id}
+        {...(name !== undefined ? { name } : {})}
+        className={cls}
+        data-testid={testId}
+        style={divStyle}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+  return (
+    <div
+      id={id}
+      {...(name !== undefined ? { name } : {})}
+      className={cls}
+      data-testid={testId}
+      style={divStyle}
+    >
+      {value ?? ''}
+    </div>
+  );
+}