react-extjs 0.0.1

package/src/components/PropertyGrid.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
+import { EditorGrid, type EditorColumn } from './EditorGrid';
+
+// 对齐 Ext.grid.PropertyStore.isEditableValue：仅原始类型（string/number/boolean）与 Date 显示，
+// 对象/数组/function 被忽略（Ext 不渲染不可编辑值）。
+function isEditableValue(val: unknown): boolean {
+  if (val === null || val === undefined) return false;
+  if (val instanceof Date) return true;
+  return typeof val !== 'object';
+}
+
+// 对齐 Ext.grid.PropertyColumnModel.renderCell：Date → 'm/j/Y'（月/日均不补零）、
+// boolean → trueText/falseText('true'/'false')、其余 → 字符串（React 自动 htmlEncode）。
+function formatValue(val: unknown): string {
+  if (val instanceof Date) {
+    return `${val.getMonth() + 1}/${val.getDate()}/${val.getFullYear()}`;
+  }
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  if (val === null || val === undefined) return '';
+  return String(val);
+}
+
+export interface PropertyGridProps {
+  /** 属性键值对（仅原始类型与 Date 会显示，对象/数组被忽略，对齐 Ext.isEditableValue） */
+  source: Record<string, unknown>;
+  width?: number;
+  height?: number;
+  title?: string;
+  /** 数据测试 id，挂在根 div（供保真截图/行为测试定位） */
+  testId?: string;
+  /** 属性名显示映射（仅影响 Name 列文本，不影响排序/数据键，对齐 Ext.propertyNames） */
+  propertyNames?: Record<string, string>;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * 保真映射（来源 src/widgets/grid/PropertyGrid.js + PropertyColumnModel.js + PropertyStore.js）：
+ * - 继承 EditorGridPanel：根 GridPanel，内核即 Grid；两列 name/value，forceFit 平分宽，stripeRows=false（无斑马纹）。
+ * - 渲染时根元素加 x-props-grid 类（onRender: getGridEl().addClass('x-props-grid')），
+ *   ext-all.css 据此给 name 列加特殊背景图(grid3-special-col-bg.gif) 与右分隔线(border-right:1px)。
+ * - 列定义：name(id=name, header='Name', sortable, menuDisabled) + value(id=value, header='Value', resizable:false, menuDisabled)；
+ *   enableHdMenu:false → 表头无 x-grid3-hd-btn（经 Grid Column.menuDisabled 实现）。
+ * - 值渲染：原始类型/Date，Date→'m/j/Y'、boolean→'true'/'false'（见 formatValue）。
+ * - 交互：value 列可编辑(clicksToEdit:1)，name 列只读；复用 EditorGrid 的 x-grid-editor 覆盖层。
+ * 所有 DOM/class 来自同构 Grid/EditorGrid，x-props-grid 视觉差异完全由 ext-all.css 驱动，保证像素一致。
+ */
+export interface PropertyGridHandle {
+  /** 整体替换属性源（覆盖当前全部键值） */
+  setSource: (source: Record<string, unknown>) => void;
+  /** 读取当前属性源快照 */
+  getSource: () => Record<string, unknown>;
+  /** 新增或覆盖单个属性（不存在则添加，存在则更新） */
+  setProperty: (name: string, value: unknown) => void;
+  /** 删除单个属性（不存在则无副作用） */
+  removeProperty: (name: string) => void;
+  /** 新增单个属性（等价于 setProperty） */
+  addProperty: (name: string, value: unknown) => void;
+}
+
+export const PropertyGrid = forwardRef<PropertyGridHandle, PropertyGridProps>(function PropertyGrid(
+  {
+    source,
+    width = 300,
+    height,
+    title,
+    testId,
+    propertyNames,
+    className,
+    style,
+  },
+  ref,
+) {
+  // 双轨：内部 dynSource 由 prop 初始化、句柄可运行时改写；useEffect 同步 prop 变化
+  const [dynSource, setDynSource] = useState<Record<string, unknown>>(source ?? {});
+  const sourceRef = useRef<Record<string, unknown>>(dynSource);
+  sourceRef.current = dynSource;
+  useEffect(() => {
+    setDynSource(source ?? {});
+  }, [source]);
+
+  useImperativeHandle(ref, () => ({
+    setSource: (s) => setDynSource(s),
+    getSource: () => sourceRef.current,
+    setProperty: (name, value) => setDynSource((prev) => ({ ...prev, [name]: value })),
+    removeProperty: (name) =>
+      setDynSource((prev) => {
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      }),
+    addProperty: (name, value) => setDynSource((prev) => ({ ...prev, [name]: value })),
+  }));
+
+  // 过滤可编辑值，按原始 key 排序（对齐 Ext store.sort('name','ASC')，name 字段即原始 key）
+  const keys = Object.keys(dynSource)
+    .filter((k) => isEditableValue(dynSource[k]))
+    .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase()));
+  const data = keys.map((k) => ({
+    name: propertyNames?.[k] ?? k,
+    value: formatValue(dynSource[k]),
+  }));
+  const colW = Math.floor(width / 2);
+  const columns: EditorColumn[] = [
+    {
+      dataIndex: 'name',
+      header: 'Name',
+      width: colW,
+      sortable: true,
+      resizable: false,
+      menuDisabled: true,
+      editor: false,
+    },
+    {
+      dataIndex: 'value',
+      header: 'Value',
+      width: width - colW,
+      sortable: false,
+      resizable: false,
+      menuDisabled: true,
+      editor: true,
+    },
+  ];
+  return (
+    <div data-testid={testId} className={className} style={{ width, ...style }}>
+      <EditorGrid
+        columns={columns}
+        data={data}
+        title={title}
+        width={width}
+        height={height}
+        stripeRows={false}
+        clicksToEdit={1}
+        className="x-props-grid"
+      />
+    </div>
+  );
+});
+
+PropertyGrid.displayName = 'PropertyGrid';
+
+export default PropertyGrid;

package/src/components/QuickTip.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef, useState, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { ToolTip } from './ToolTip';
+
+export interface QuickTipContent {
+  title?: string;
+  text?: string;
+  html?: string;
+  width?: number;
+}
+
+export interface QuickTipProps {
+  /**
+   * hover 目标元素 CSS 选择器；提供后默认隐藏，鼠标进入显示、移出隐藏。
+   * 目标元素可携带 data-qtip / data-qtitle / data-qwidth 覆盖实例文本（对齐 Ext 的
+   * ext:qtip / ext:qtitle / ext:qwidth 属性），不携带则使用实例级 title/text。
+   */
+  target?: string;
+  /** 实例级标题（对齐 Ext.QuickTips.register 的 title） */
+  title?: string;
+  /** 实例级正文文本（对齐 text） */
+  text?: string;
+  /** 实例级正文 HTML（对齐 html） */
+  html?: string;
+  /** tip 宽度（px）。未给时由内容撑开（对齐 Ext 默认 autoWidth） */
+  width?: number;
+  /** 显示延迟（ms）。Ext 默认 500；测试可设 0 加速 */
+  showDelay?: number;
+  /** 隐藏延迟（ms）。Ext 默认 200 */
+  hideDelay?: number;
+  /** 箭头方向 */
+  anchor?: 'top' | 'bottom' | 'left' | 'right';
+  /** 相对容器的 left（对齐 Ext showAt 的 x） */
+  x?: number;
+  /** 相对容器的 top（对齐 Ext showAt 的 y） */
+  y?: number;
+  /** 受控初始可见（保真固定显示用） */
+  visible?: boolean;
+  /** 保真裁剪 / 测试定位用根节点 testid（透传给内部 ToolTip） */
+  testId?: string;
+  /** 附加根 class（透传） */
+  className?: string;
+  /** 附加根 style（透传） */
+  style?: React.CSSProperties;
+}
+
+/** QuickTip 命令式句柄：运行时改写内容 / 显隐（对齐 Ext.QuickTips 的 register/update/show/hide）。 */
+export interface QuickTipHandle {
+  /** 显示 tip，可附带部分内容覆盖（title/text/html/width） */
+  show: (content?: Partial<QuickTipContent>) => void;
+  /** 隐藏 tip */
+  hide: () => void;
+  /** 当前是否可见 */
+  isVisible: () => boolean;
+  /** 读取当前内容配置 */
+  getContent: () => QuickTipContent;
+  /** 局部更新内容（合并 patch） */
+  setContent: (patch: Partial<QuickTipContent>) => void;
+  /** 仅改标题 */
+  setTitle: (title?: string) => void;
+  /** 仅改正文文本 */
+  setText: (text?: string) => void;
+}
+
+/**
+ * 保真映射（来源 src/widgets/tips/QuickTip.js + Ext.QuickTips 管理逻辑）：
+ * - QuickTip 是全局 hover 管理器：监听 target 内任意带 ext:qtip 的元素，移入时显示
+ *   一个共享的 Tip（baseCls 'x-tip'，9 宫格圆角 + 标题 + 正文），移出后隐藏。
+ * - 展示的 tip DOM 与 ToolTip 完全一致（QuickTip 内部即持有一个 Ext.Tip 实例），
+ *   故本组件直接复用 ToolTip 渲染，仅需实现 hover 触发与属性读取。
+ * - 文本优先级：目标元素 data-qtip/data-qtitle/data-qwidth > 实例级 props。
+ * React 仅重写触发逻辑，DOM 结构与 class 名与 Ext JS 3.2.1 完全一致。
+ */
+export const QuickTip = forwardRef<QuickTipHandle, QuickTipProps>(
+  ({ target, title, text, html, width, showDelay = 500, hideDelay = 200, anchor, x = 0, y = 0, visible, testId, className, style }, ref) => {
+    const [shown, setShown] = useState(visible ?? false);
+    const [content, setContent] = useState<QuickTipContent>({ title, text, html, width });
+    const shownRef = useRef(shown);
+    const contentRef = useRef(content);
+    shownRef.current = shown;
+    contentRef.current = content;
+    const showTimer = useRef<number | undefined>(undefined);
+    const hideTimer = useRef<number | undefined>(undefined);
+
+    const show = useCallback(
+      (c?: Partial<QuickTipContent>) => {
+        if (c) setContent((prev) => ({ ...prev, ...c }));
+        setShown(true);
+      },
+      [],
+    );
+    const hide = useCallback(() => setShown(false), []);
+    const setContentPatch = useCallback((patch: Partial<QuickTipContent>) => {
+      setContent((prev) => ({ ...prev, ...patch }));
+    }, []);
+    const setTitle = useCallback((t?: string) => setContentPatch({ title: t }), [setContentPatch]);
+    const setText = useCallback((t?: string) => setContentPatch({ text: t }), [setContentPatch]);
+    const getContent = useCallback(() => contentRef.current, []);
+    const isVisible = useCallback(() => shownRef.current, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({ show, hide, isVisible, getContent, setContent: setContentPatch, setTitle, setText }),
+      [show, hide, isVisible, getContent, setContentPatch, setTitle, setText],
+    );
+
+  useEffect(() => {
+    if (!target) return;
+    setShown(false);
+    const el = document.querySelector(target);
+    if (!el) return;
+
+    const clearTimers = () => {
+      window.clearTimeout(showTimer.current);
+      window.clearTimeout(hideTimer.current);
+    };
+
+    const onOver = (e: Event) => {
+      const t = (e.target as HTMLElement | null)?.closest('[data-qtip]') as HTMLElement | null;
+      if (!t) return;
+      const qtip = t.getAttribute('data-qtip');
+      const qtitle = t.getAttribute('data-qtitle');
+      const qwidth = t.getAttribute('data-qwidth');
+      setContent({
+        title: qtitle ?? title,
+        text: qtip ?? text,
+        html: undefined,
+        width: qwidth ? Number(qwidth) : width,
+      });
+      clearTimers();
+      showTimer.current = window.setTimeout(() => setShown(true), showDelay);
+    };
+
+    const onOut = (e: Event) => {
+      const related = (e as MouseEvent).relatedTarget as HTMLElement | null;
+      // 移动到仍带 data-qtip 的子元素时不隐藏（对齐 Ext 的 within-target 判断）
+      if (related && (related.closest('[data-qtip]') || related.closest(target))) return;
+      clearTimers();
+      hideTimer.current = window.setTimeout(() => setShown(false), hideDelay);
+    };
+
+    el.addEventListener('mouseover', onOver);
+    el.addEventListener('mouseout', onOut);
+    return () => {
+      el.removeEventListener('mouseover', onOver);
+      el.removeEventListener('mouseout', onOut);
+      clearTimers();
+    };
+    // 仅绑定一次（target/延迟变化极少，演示固定）
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
+
+  // 受控可见性同步：visible prop 变化时以 prop 为准
+  useEffect(() => {
+    setShown(visible ?? false);
+  }, [visible]);
+
+  return (
+    <ToolTip
+      visible={shown}
+      title={content.title}
+      html={content.html}
+      children={content.text}
+      width={content.width}
+      anchor={anchor}
+      x={x}
+      y={y}
+      testId={testId}
+      className={className}
+      style={style}
+    />
+  );
+});
+
+export default QuickTip;

package/src/components/Resizable.tsx

@@ -0,0 +1,241 @@
+import React, { useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react';
+import { createPortal } from 'react-dom';
+
+// Ext.Resizable.positions：缩写 → 完整方位（句柄 class 后缀用完整名）
+const SHORT_TO_FULL: Record<string, string> = {
+  n: 'north',
+  s: 'south',
+  e: 'east',
+  w: 'west',
+  ne: 'northeast',
+  nw: 'northwest',
+  se: 'southeast',
+  sw: 'southwest',
+};
+
+export interface ResizableProps {
+  /** 元素宽（px），对应 Ext 配置 width。 */
+  width?: number;
+  /** 元素高（px），对应 Ext 配置 height。 */
+  height?: number;
+  /** 句柄集合：'all' 或 'n s e w ne nw se sw'。缺省对齐 Ext 默认值 's,e,se'。 */
+  handles?: string;
+  /** 句柄常显（true）或仅 hover 显（false，默认）。 */
+  pinned?: boolean;
+  /** 拖拽时实时改尺寸（true）或使用 proxy 预览（false）。此处采用实时模式。 */
+  dynamic?: boolean;
+  /** 透明句柄（opacity:0），用于嵌入 Panel/Window 等容器的无痕缩放。 */
+  transparent?: boolean;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  cls?: string;
+  style?: CSSProperties;
+  id?: string;
+  testId?: string;
+  children?: React.ReactNode;
+  onResize?: (width: number, height: number) => void;
+}
+
+const clamp = (v: number, min: number, max: number) => Math.min(Math.max(min, v), max);
+
+/**
+ * 复刻 Ext.Resizable（Ext 3.2.1）。
+ *
+ * DOM 结构对齐 Ext 真值（src/widgets/Resizable.js）：
+ *  - 根 el：调用方传入的 element 本身，挂 'x-resizable-pinned'（pinned 时）；
+ *    position 非 absolute/fixed 时设 'relative'（此处统一 relative，对齐默认静态元素）。
+ *  - 8 个句柄作为 el 的子节点 append：模板
+ *    `<div class="x-resizable-handle x-resizable-handle-{pos}">`（pos 为 north/south/...）。
+ *  - proxy（x-resizable-proxy，id={el.id}-rzproxy）与 overlay（x-resizable-overlay，
+ *    html='&#160;'）均 createProxy 挂到 document.body；静态态 display:none，不参与 el 截图。
+ *
+ * 全部视觉来自 ext-all.css 的 37 条 .x-resizable* 规则，零新增 CSS 契约破坏。
+ * 拖拽缩放数学对齐 Ext.onMouseMove（含 min/max 钳制与 n/w 方位的 left/top 偏移）。
+ */
+export function Resizable(props: ResizableProps) {
+  const {
+    width,
+    height,
+    handles,
+    pinned = false,
+    transparent = false,
+    minWidth = 5,
+    minHeight = 5,
+    maxWidth = 10000,
+    maxHeight = 10000,
+    cls = '',
+    style,
+    id,
+    testId,
+    children,
+    onResize,
+  } = props;
+
+  const [box, setBox] = useState<{
+    w: number | undefined;
+    h: number | undefined;
+    left: number | undefined;
+    top: number | undefined;
+  }>({ w: width, h: height, left: undefined, top: undefined });
+
+  // 始终持有最新 box，供 mousedown 捕获拖拽起始偏移（避免闭包过期）。
+  const boxRef = useRef(box);
+  boxRef.current = box;
+
+  const [over, setOver] = useState(false);
+  const elRef = useRef<HTMLDivElement>(null);
+  const drag = useRef<{
+    pos: string;
+    startX: number;
+    startY: number;
+    startBox: { x: number; y: number; width: number; height: number };
+  } | null>(null);
+
+  // 解析句柄方位集合（对齐 Ext 默认 's,e,se' 与 'all' 展开）。
+  let hSpec = handles;
+  if (hSpec === undefined || hSpec === '') hSpec = 's,e,se';
+  if (hSpec === 'all') hSpec = 'n s e w ne nw se sw';
+  const positions = hSpec
+    .split(/[\s,;]+/)
+    .filter(Boolean)
+    .map((p) => SHORT_TO_FULL[p])
+    .filter(Boolean) as string[];
+
+  const constrain = (v: number, diff: number, m: number, mx: number) => {
+    if (v - diff < m) diff = v - m;
+    else if (v - diff > mx) diff = v - mx;
+    return diff;
+  };
+
+  const onHandleDown = (pos: string) => (e: ReactMouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const el = elRef.current;
+    if (!el) return;
+    const sb = el.getBoundingClientRect();
+    const startBox = { x: sb.x, y: sb.y, width: sb.width, height: sb.height };
+    const startLeft = boxRef.current.left ?? 0;
+    const startTop = boxRef.current.top ?? 0;
+    drag.current = { pos, startX: e.clientX, startY: e.clientY, startBox };
+
+    const move = (ev: MouseEvent) => {
+      const d = drag.current;
+      if (!d) return;
+      const { width: sw, height: sh } = d.startBox;
+      let w = sw;
+      let h = sh;
+      let offLeft = startLeft;
+      let offTop = startTop;
+      const diffX = -(d.startX - Math.max(0, ev.clientX));
+      const diffY = -(d.startY - Math.max(0, ev.clientY));
+
+      switch (d.pos) {
+        case 'east':
+          w = clamp(sw + diffX, minWidth, maxWidth);
+          break;
+        case 'south':
+          h = clamp(sh + diffY, minHeight, maxHeight);
+          break;
+        case 'southeast':
+          w = clamp(sw + diffX, minWidth, maxWidth);
+          h = clamp(sh + diffY, minHeight, maxHeight);
+          break;
+        case 'north': {
+          const dy = constrain(sh, diffY, minHeight, maxHeight);
+          offTop = startTop + dy;
+          h = sh - dy;
+          break;
+        }
+        case 'west': {
+          const dx = constrain(sw, diffX, minWidth, maxWidth);
+          offLeft = startLeft + dx;
+          w = sw - dx;
+          break;
+        }
+        case 'northeast': {
+          w = clamp(sw + diffX, minWidth, maxWidth);
+          const dy = constrain(sh, diffY, minHeight, maxHeight);
+          offTop = startTop + dy;
+          h = sh - dy;
+          break;
+        }
+        case 'northwest': {
+          const dx = constrain(sw, diffX, minWidth, maxWidth);
+          offLeft = startLeft + dx;
+          w = sw - dx;
+          const dy = constrain(sh, diffY, minHeight, maxHeight);
+          offTop = startTop + dy;
+          h = sh - dy;
+          break;
+        }
+        case 'southwest': {
+          const dx = constrain(sw, diffX, minWidth, maxWidth);
+          offLeft = startLeft + dx;
+          w = sw - dx;
+          h = clamp(sh + diffY, minHeight, maxHeight);
+          break;
+        }
+      }
+      setBox({ w, h, left: offLeft, top: offTop });
+      onResize?.(Math.round(w), Math.round(h));
+    };
+
+    const up = () => {
+      drag.current = null;
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  };
+
+  const rootClass = [cls, pinned ? 'x-resizable-pinned' : '', over ? 'x-resizable-over' : '']
+    .filter(Boolean)
+    .join(' ');
+
+  const rootStyle: CSSProperties = {
+    position: 'relative',
+    ...(box.w != null ? { width: box.w } : {}),
+    ...(box.h != null ? { height: box.h } : {}),
+    ...(box.left != null ? { left: box.left } : {}),
+    ...(box.top != null ? { top: box.top } : {}),
+    ...style,
+  };
+
+  return (
+    <>
+      <div ref={elRef} id={id} data-testid={testId} className={rootClass} style={rootStyle}>
+        {children}
+        {positions.map((pos) => (
+          <div
+            key={pos}
+            className={`x-resizable-handle x-resizable-handle-${pos}`}
+            style={transparent ? { opacity: 0 } : undefined}
+            onMouseDown={onHandleDown(pos)}
+            onMouseEnter={() => setOver(true)}
+            onMouseLeave={() => setOver(false)}
+          />
+        ))}
+      </div>
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <>
+            <div
+              id={id ? `${id}-rzproxy` : 'resizable-rzproxy'}
+              className="x-resizable-proxy"
+              style={{ display: 'none' }}
+            />
+            <div
+              className="x-resizable-overlay"
+              dangerouslySetInnerHTML={{ __html: '&#160;' }}
+              style={{ display: 'none' }}
+            />
+          </>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/components/RowLayout.tsx

@@ -0,0 +1,126 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { Panel } from './Panel';
+
+export interface RowItem {
+  /** 面板标题（渲染 x-panel-header）。省略则无 header、整高即 body。 */
+  title?: string;
+  /** 主体内容（纯文本/HTML 字符串）；也可通过 children 渲染任意 React 节点。 */
+  html?: string;
+  children?: React.ReactNode;
+  /** 透传到 .x-panel-body 的 inline style */
+  bodyStyle?: React.CSSProperties;
+  /**
+   * 固定高（px，>=1）。与 rowHeight 互斥；省略则 auto（按内容高自适应）。
+   * 对齐 Ext panel.height（始终按像素，且 >=1）。
+   */
+  height?: number;
+  /**
+   * 百分比高（小数 0~1，如 .25）。所有 rowHeight 之和须 = 1。
+   * 这些行瓜分「容器高 − 所有固定/auto 行高」后的剩余高度（对齐 Ext：百分比行填充分配给固定/auto 行后的空间）。
+   */
+  rowHeight?: number;
+  /**
+   * 行宽（px 或百分比字符串如 '50%' / 200）。省略则铺满容器宽（100%）。
+   * 对齐 Ext「standard panel widths are still supported」——百分比行也可指定宽度，仅影响水平尺寸、不影响垂直百分比分配。
+   */
+  width?: number | string;
+}
+
+export interface RowLayoutProps {
+  /** 容器总宽（px），对齐 Ext.Container width。 */
+  width: number;
+  /** 容器总高（px），对齐 Ext.Container height，也是行高分配的总预算。 */
+  height: number;
+  /** 行面板数组（自上而下垂直堆叠）。 */
+  items: RowItem[];
+  /** 数据测试 id，挂在根容器上。 */
+  testId?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+/**
+ * 复刻 Ext.ux.layout.RowLayout（Ext 3.2.1，UX 扩展，继承 ContainerLayout）。
+ *
+ * DOM 对齐 RowLayout.renderAll/onLayout 实测真值：
+ *  - 容器根无专属 ct 类；renderAll 创建 .x-column-inner（含一个 .x-clear 子节点，对齐源码 innerCt 结构）；
+ *  - 每行即一个 .x-panel（复用 Panel），垂直堆叠（block 流），行宽默认 100%（指定 width 时变窄、左对齐）。
+ *
+ * 高度算法逐行移植 onLayout（examples/ux/RowLayout.js）：
+ *  - 第一遍：遍历「非 rowHeight」行，从剩余高 ph 扣掉其高（固定行用 height；auto 行按内容实测高）；
+ *  - 第二遍：遍历「rowHeight」行，height = floor(rowHeight * ph)（ph=扣完固定/auto 后的剩余高）；
+ *    auto 行保持内容自适应高、不强制拉伸。
+ * 行默认无上下 margin（RowLayout 不暴露 margins），故 m=0，算法不涉及 margin 扣减。
+ *
+ * 说明：auto 行的内容高只能在渲染后实测，故用 useLayoutEffect + ref 做一次测量-重算（收敛后即停，无循环）。
+ * 全部视觉来自 ext-all.css 的 .x-panel（零新增 CSS）。
+ */
+export function RowLayout({
+  width,
+  height,
+  items,
+  testId,
+  style,
+  className = '',
+}: RowLayoutProps) {
+  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [computed, setComputed] = useState<(number | undefined)[]>(() => items.map(() => undefined));
+  const lastKey = useRef('');
+
+  useLayoutEffect(() => {
+    // 两遍算法（对齐 RowLayout.onLayout）
+    let ph = height;
+    // 第一遍：从剩余高里扣掉所有「非 rowHeight」行（固定行取 height；auto 行取实测内容高）
+    items.forEach((it, i) => {
+      if (it.rowHeight == null) {
+        const wrap = rowRefs.current[i];
+        const rowH = it.height != null ? it.height : wrap ? wrap.getBoundingClientRect().height : 0;
+        ph -= rowH;
+      }
+    });
+    ph = ph < 0 ? 0 : ph;
+    // 第二遍：rowHeight 行按剩余高比例分配
+    const hs = items.map((it) => {
+      if (it.rowHeight != null) {
+        return Math.floor(it.rowHeight * ph);
+      }
+      return it.height != null ? it.height : undefined;
+    });
+    const key = hs.map((h) => (h == null ? 'a' : Math.round(h))).join(',');
+    if (key !== lastKey.current) {
+      lastKey.current = key;
+      setComputed(hs);
+    }
+  }, [width, height, items]);
+
+  return (
+    <div
+      data-testid={testId}
+      className={['row-layout-root', className].filter(Boolean).join(' ')}
+      style={{ width, height, overflow: 'hidden', ...style }}
+    >
+      <div className="x-column-inner" style={{ width: '100%', height }}>
+        {items.map((it, i) => (
+          <div
+            key={i}
+            ref={(el) => {
+              rowRefs.current[i] = el;
+            }}
+          >
+            <Panel
+              title={it.title}
+              width={it.width != null ? it.width : '100%'}
+              height={computed[i] != null ? computed[i] : it.height}
+              bodyStyle={it.bodyStyle}
+            >
+              {it.html != null ? it.html : it.children}
+            </Panel>
+          </div>
+        ))}
+        <div className="x-clear" />
+      </div>
+    </div>
+  );
+}
+
+export default RowLayout;