react-extjs 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 hdl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-extjs",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "description": "Pixel-faithful React+TypeScript reimplementation of Ext JS 3.2.1 UI (charts excluded).",
+  "license": "MIT",
+  "main": "src/main.tsx",
+  "files": [
+    "src",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test:visual": "playwright test",
+    "docs": "vite --config docs/vite.docs.config.ts",
+    "docs:build": "vite build --config docs/vite.docs.config.ts"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "@playwright/test": "^1.46.0",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0"
+  }
+}

package/src/components/AbsoluteLayout.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+
+export interface AbsItem {
+  /** 面板标题（渲染 x-panel-header）。省略则无 header、整高即 body。 */
+  title?: string;
+  /** 主体内容（纯文本/HTML 字符串）；也可通过 children 渲染任意 React 节点。 */
+  html?: string;
+  children?: React.ReactNode;
+  /** 绝对定位 left（px），对齐 Ext 组件级 x 配置（onRender 阶段 setPosition(x,y)）。省略默认 0。 */
+  x?: number;
+  /** 绝对定位 top（px），对齐 Ext 组件级 y 配置。省略默认 0。 */
+  y?: number;
+  /** 锚点字符串（对齐 Ext.layout.AnchorLayout 的 anchor），如 '100%' / '100% 100%' / '-20 50%'。
+   *  与 x/y 叠加使用：先按容器尺寸算出宽高，再减去子项已定位的 x/y 偏移（adjustWidthAnchor/adjustHeightAnchor）。 */
+  anchor?: string;
+  /** 固定宽（px）。与 anchor 宽度段二选一；都给时 anchor 优先级。 */
+  width?: number;
+  /** 固定高（px）。与 anchor 高度段二选一；都给时 anchor 优先级。 */
+  height?: number;
+  /** 透传到 .x-panel-body 的 inline style */
+  bodyStyle?: React.CSSProperties;
+  /** 追加在子项 .x-panel 上的 class */
+  cls?: string;
+}
+
+export interface AbsoluteLayoutProps {
+  /** 容器总宽（px），对齐 Ext.Container width，也是 anchor 百分比基准。 */
+  width?: number;
+  /** 容器总高（px），对齐 Ext.Container height，也是 anchor 百分比基准。 */
+  height?: number;
+  items: AbsItem[];
+  /** 数据测试 id，挂在根容器上。 */
+  testId?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  /** 容器四边内边距（px 或 CSS 简写）。影响 anchor 调整（同 Ext target.getPadding）。默认 0。 */
+  padding?: number | string;
+  /** 子项附加类（替换默认 'x-abs-layout-item' 时传入，新值须自行包含该类名）。默认 'x-abs-layout-item'。 */
+  extraCls?: string;
+}
+
+// Ext 3.2.1 实测：x-panel 本身 border 为 0，header 高 26px，body 占剩余（含 1px 底边框，border-box）。
+const HEADER_H = 26;
+
+/**
+ * 解析单段锚点值（移植 Ext.layout.AnchorLayout.parseAnchor）：
+ *  - 'right'/'r'/'bottom'/'b'：侧锚点，返回 v - (cstart - start)；
+ *  - '%' 结尾：相对容器尺寸的百分比（向下取整）；
+ *  - 纯数字（如 '-20'）：相对容器尺寸的偏移（v + n，负数即留白）；
+ *  - 空 / 'none' / 非法：返回 false（不计算该轴）。
+ * 注：原版带 last 缓存用于避免重复测量，本复刻为纯函数直接计算，无副作用。
+ */
+function parseAnchor(
+  a: string | undefined,
+  start?: number,
+  cstart?: number,
+): ((v: number) => number) | false {
+  if (a && a !== 'none') {
+    if (/^(r|right|b|bottom)$/i.test(a)) {
+      const diff = (cstart ?? 0) - (start ?? 0);
+      return (v: number) => v - diff;
+    } else if (a.indexOf('%') !== -1) {
+      const ratio = parseFloat(a.replace('%', '')) * 0.01;
+      return (v: number) => Math.floor(v * ratio);
+    } else {
+      const n = parseInt(a, 10);
+      if (!isNaN(n)) return (v: number) => v + n;
+    }
+  }
+  return false;
+}
+
+/** 解析 padding 简写（"t r b l"），返回 top/left 用于 anchor 偏移调整。 */
+function parsePadding(p: number | string = 0): { top: number; left: number } {
+  if (typeof p === 'number') return { top: p, left: p };
+  const v = p.trim().split(/\s+/).map(Number);
+  const top = v[0] ?? 0;
+  const right = v[1] != null ? v[1] : top;
+  const left = v[3] != null ? v[3] : right;
+  return { top, left };
+}
+
+// 手写面板，精确对齐 Ext.Container(absolute) 实测 DOM：
+//   .x-panel（含 extraCls=x-abs-layout-item，position:absolute，left:x/top:y）
+//   > .x-panel-header + .x-panel-bwrap > .x-panel-body
+// ext-all.css:4852 定义 .x-abs-layout-item{position:absolute;left:0;top:0}，内联 left/top 覆盖默认 0。
+function AbsPanel({
+  title,
+  cls = '',
+  x = 0,
+  y = 0,
+  width,
+  height,
+  html,
+  children,
+  bodyStyle,
+}: {
+  title?: string;
+  cls?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  html?: string;
+  children?: React.ReactNode;
+  bodyStyle?: React.CSSProperties;
+}) {
+  const headerH = title ? HEADER_H : 0;
+  const bodyH = height != null ? height - headerH : undefined;
+  return (
+    <div
+      className={['x-panel', cls].filter(Boolean).join(' ')}
+      style={{ position: 'absolute', left: x, top: y, width, height }}
+    >
+      {title && (
+        <div className="x-panel-header x-unselectable" unselectable="on">
+          <span className="x-panel-header-text">{title}</span>
+        </div>
+      )}
+      <div className="x-panel-bwrap">
+        <div
+          className={['x-panel-body', title ? '' : 'x-panel-body-noheader'].filter(Boolean).join(' ')}
+          style={{ height: bodyH, ...bodyStyle }}
+        >
+          {html != null ? html : children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 复刻 Ext.layout.AbsoluteLayout（Ext 3.2.1，继承 AnchorLayout）。
+ *
+ * 行为逐行移植 AbsoluteLayout.js + AnchorLayout.js：
+ *  - onLayout：target.position() → 容器根 position:relative（ext-all.css 无专属 ct 类，
+ *    与 AnchorLayout 一致用自定义 hook 类 'abs-layout-root'）；
+ *  - extraCls 默认 'x-abs-layout-item'，追加到每个子项元素（ext-all.css:4852 将其设为
+ *    position:absolute，左/上默认 0，由内联 left/top 覆盖到 x/y）；
+ *  - 子项以绝对定位放置于 (x, y)，x/y 即 Ext 组件级 x/y 配置（onRender 阶段 setPosition）；
+ *  - 子项可叠加 anchor（继承 AnchorLayout）：先按容器尺寸算宽高，再经 adjustWidthAnchor/
+ *    adjustHeightAnchor 减去子项已定位的 x/y 偏移（comp.getPosition(true)）再加容器
+ *    paddingLeft/paddingTop，从而让 anchor 相对"容器剩余可用区"而非整容器计算。
+ *
+ * 定位数学（容器内容区 = width × height，padding 由 padding prop 控制）：
+ *  - 无 anchor：用 item.width/height（缺省则自适应内容）；
+ *  - 有 anchor：cw = aRight(W) - x + padL，ch = aBottom(H) - y + padT；
+ *  - 例 {x:60,y:0,anchor:'100%'} → cw = W-60（不覆盖左侧 60px 标签区）；
+ *  - 例 {x:0,y:60,anchor:'100% 100%'} → cw = W, ch = H-60。
+ * 全部视觉来自 ext-all.css 既有规则（零新增 CSS）。
+ */
+export function AbsoluteLayout({
+  width = 0,
+  height = 0,
+  items,
+  testId,
+  style,
+  className = '',
+  padding = 0,
+  extraCls = 'x-abs-layout-item',
+}: AbsoluteLayoutProps) {
+  const pad = parsePadding(padding);
+
+  const specs = items.map((it) => {
+    const cx = it.x ?? 0;
+    const cy = it.y ?? 0;
+    let cw = it.width;
+    let ch = it.height;
+    if (it.anchor) {
+      const vs = it.anchor.trim().split(/\s+/);
+      const aRight = parseAnchor(vs[0], it.width, width);
+      const aBottom = parseAnchor(vs[1], it.height, height);
+      // 对齐 AnchorLayout.onLayout L161-162 + AbsoluteLayout.adjustWidthAnchor/adjustHeightAnchor：
+      //   cw = a.right(W) - margins.lr - comp.getPosition(true)[0] + paddingLeft
+      if (aRight) cw = aRight(width) - cx + pad.left;
+      if (aBottom) ch = aBottom(height) - cy + pad.top;
+    }
+    return { it, cx, cy, cw, ch };
+  });
+
+  return (
+    <div
+      data-testid={testId}
+      className={['abs-layout-root', className].filter(Boolean).join(' ')}
+      style={{ position: 'relative', width, height, ...style }}
+    >
+      {specs.map((s, i) => (
+        <AbsPanel
+          key={i}
+          title={s.it.title}
+          cls={[extraCls, s.it.cls].filter(Boolean).join(' ')}
+          x={s.cx}
+          y={s.cy}
+          width={s.cw}
+          height={s.ch}
+          html={s.it.html}
+          bodyStyle={s.it.bodyStyle}
+        >
+          {s.it.children}
+        </AbsPanel>
+      ))}
+    </div>
+  );
+}
+
+export default AbsoluteLayout;

package/src/components/Accordion.tsx

@@ -0,0 +1,266 @@
+import React, { forwardRef, useImperativeHandle, useState, useEffect, useRef } from 'react';
+import { Panel } from './Panel';
+
+export interface AccordionItem {
+  title: string;
+  /** 直接 HTML 内容（对齐 Ext Panel.html 直渲） */
+  html?: string;
+  children?: React.ReactNode;
+  iconCls?: string;
+  /** 该子项展开时回调（对齐 Ext Panel 'expand' 事件） */
+  onExpand?: () => void;
+  /** 该子项折叠时回调（对齐 Ext Panel 'collapse' 事件） */
+  onCollapse?: () => void;
+}
+
+export interface AccordionProps {
+  /** 根面板标题（可选） */
+  title?: string;
+  width?: number | string;
+  /** 固定高度（fill 模式需要）；不传则 autoHeight */
+  height?: number;
+  items: AccordionItem[];
+  /** 初始激活项索引（非受控，默认 0 即首项展开；传 null 表示初始全部折叠） */
+  defaultActiveIndex?: number | null;
+  /** 受控激活项索引；提供后由外部控制（单开互斥模式） */
+  activeIndex?: number | null;
+  /** 展开项填充剩余空间（Ext fill，默认 true）；false 时按内容自适应高度 */
+  fill?: boolean;
+  /** 点击标题即展开/折叠（Ext titleCollapse，默认 true） */
+  titleCollapse?: boolean;
+  /** 隐藏折叠/展开箭头工具，仅标题点击（Ext hideCollapseTool，默认 false） */
+  hideCollapseTool?: boolean;
+  /** toggle 工具相对自定义 tools 的顺序（Ext collapseFirst，默认 true） */
+  collapseFirst?: boolean;
+  /** 展开/折叠高度过渡（Ext animate，默认 true；CSS 高度过渡，最终态与 golden 像素一致） */
+  animate?: boolean;
+  /** 展开项移到顶部（Ext activeOnTop，默认 false） */
+  activeOnTop?: boolean;
+  /** 容器宽度自适应内容（Ext autoWidth，默认 false） */
+  autoWidth?: boolean;
+  /** 激活项变更回调（index 为当前激活项，全部折叠时为 null） */
+  onActiveChange?: (index: number | null) => void;
+}
+
+/**
+ * 运行时句柄（对齐 Ext.Container 动态增删 + AccordionLayout 互斥/多开展开）：
+ * - addItem(item, index?)：在末尾（或指定位置）插入子面板
+ * - removeItem(index)：删除指定子面板（自动重排其余索引）
+ * - updateItem(index, partial)：就地更新子面板（标题/内容）
+ * - getItems()：读当前子面板数组
+ * - setActive(index)：编程式展开指定项（仅非受控时生效）
+ * - getActive()：读当前激活索引（全部折叠返回 -1）
+ */
+export interface AccordionHandle {
+  addItem: (item: AccordionItem, index?: number) => void;
+  removeItem: (index: number) => void;
+  updateItem: (index: number, partial: Partial<AccordionItem>) => void;
+  getItems: () => AccordionItem[];
+  setActive: (index: number) => void;
+  getActive: () => number;
+}
+
+// 以下高度常量对照当前主题 CSS 实测 DOM 回填（见 _acc_measure 调试脚本）。
+// 根面板为普通非 frame header（当前主题 .x-panel-header{padding:5px 8px;border:1px} → 高 27）；
+// 子面板 header 为 .x-accordion-hd（当前主题实测 高 26，border:false 仅保留 1px 下边框）。
+// fill 模式展开子 body 的 content 高度公式：
+//   expandedBodyContentH = height - ROOT_HEADER_H - 1 - CHILD_HEADER_H*N - 30
+//   其中 1 = 根 body 底部 1px 边框占用；-30 = 2*15(子 body padding) + 0(子 body noborder 无边框占用)。
+// 根面板 bodyPadding 已通过 bodyStyle padding:0 置 0（AccordionLayout 容器无内边距，section 贴边）。
+// fill 时展开项占满容器可用高度（单开互斥，至多 1 个展开）。
+const ROOT_HEADER_H = 27; // 当前主题下普通 .x-panel-header 实际高度
+const CHILD_HEADER_H = 26; // 当前主题下 .x-accordion-hd 实际高度
+
+/**
+ * 保真映射（来源 Ext.layout.AccordionLayout + Ext.Panel）：
+ * - 根 Panel 用普通 Panel（frame:false, border:true 默认），内部逐项渲染子 Panel。
+ * - 子 Panel：普通 x-panel（golden 实测 border 实际 0px，className 不含 noborder）；header 加 x-accordion-hd；collapsible → 渲染 x-tool-toggle。
+ * - 互斥展开（单开）：点击某 header（titleCollapse 默认 true）展开它并折叠其余；点击已展开项则全部折叠（对齐 Ext 允许全收起，Ext AccordionLayout.beforeExpand 展开时折叠上一个活动项）。
+ * - fill（默认 true）：展开子 body 高度 = 容器 body 高 - 所有子 header 高之和（setItemSize 逻辑）。
+ * - 折叠子：collapse 时 body 隐藏（display:none，等效 golden 的 height:0+overflow:hidden，offset 均为 0），仅 header 可见。
+ * - activeOnTop：展开项冒泡到顶部（DOM 顺序重排），对齐 Ext。
+ * - hideCollapseTool：子 Panel 不渲染 x-tool-toggle，仅标题点击生效。
+ */
+export const Accordion = forwardRef<AccordionHandle, AccordionProps>(
+  (
+    {
+      title,
+      width,
+      height,
+      items,
+      defaultActiveIndex = 0,
+      activeIndex: controlled,
+      fill = true,
+      titleCollapse = true,
+      hideCollapseTool = false,
+      collapseFirst = true,
+      animate = true,
+      activeOnTop = false,
+      autoWidth = false,
+      onActiveChange,
+    }: AccordionProps,
+    ref,
+  ) => {
+    // 单源数组法：items 为唯一真相，句柄直接基于 prev 纯函数改写
+    const [dynItems, setDynItems] = useState<AccordionItem[]>(() => items);
+    const itemsRef = useRef(dynItems);
+    itemsRef.current = dynItems;
+
+    // 展开项索引集合（单开互斥，至多 1 个；null 表示全部折叠）
+    const initActive = controlled !== undefined ? controlled : defaultActiveIndex;
+    const [expanded, setExpanded] = useState<number[]>(() =>
+      initActive == null ? [] : [initActive],
+    );
+    const expandedRef = useRef(expanded);
+    expandedRef.current = expanded;
+
+    // 展开/折叠变更时触发 per-item 事件与容器 onActiveChange（对齐 Ext Panel expand/collapse + 容器变更）
+    const onActiveChangeRef = useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const fireChanges = (prev: number[], next: number[]) => {
+      prev.forEach((i) => {
+        if (!next.includes(i)) itemsRef.current[i]?.onCollapse?.();
+      });
+      next.forEach((i) => {
+        if (!prev.includes(i)) itemsRef.current[i]?.onExpand?.();
+      });
+      const last = next.length ? next[next.length - 1] : null;
+      onActiveChangeRef.current?.(last);
+    };
+
+    // 受控激活索引同步（触发事件，但挂载首帧若与初始一致则不产生 diff）
+    useEffect(() => {
+      if (controlled !== undefined) {
+        const next = controlled == null ? [] : [controlled];
+        fireChanges(expandedRef.current, next);
+        setExpanded(next);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controlled]);
+
+    // 渲染顺序（activeOnTop 时展开项冒泡到顶）
+    const [order, setOrder] = useState<number[]>(() => dynItems.map((_, i) => i));
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        addItem: (item: AccordionItem, index?: number) => {
+          setDynItems((prev) => {
+            const next = [...prev];
+            if (index === undefined || index >= next.length) next.push(item);
+            else next.splice(index, 0, item);
+            return next;
+          });
+          setOrder((o) => {
+            const ni = index === undefined || index >= dynItems.length ? dynItems.length : index;
+            return [...o.slice(0, ni), ni, ...o.slice(ni).map((x) => (x >= ni ? x + 1 : x))];
+          });
+        },
+        removeItem: (index: number) => {
+          setDynItems((prev) => prev.filter((_, i) => i !== index));
+          setExpanded((exp) => exp.filter((x) => x !== index).map((x) => (x > index ? x - 1 : x)));
+          setOrder((o) => o.filter((x) => x !== index).map((x) => (x > index ? x - 1 : x)));
+        },
+        updateItem: (index: number, partial: Partial<AccordionItem>) =>
+          setDynItems((prev) => prev.map((it, i) => (i === index ? { ...it, ...partial } : it))),
+        getItems: () => itemsRef.current,
+        setActive: (index: number) => {
+          if (controlled !== undefined) return;
+          const prev = expandedRef.current;
+          const next = [index];
+          fireChanges(prev, next);
+          setExpanded(next);
+          if (activeOnTop) setOrder((o) => [index, ...o.filter((x) => x !== index)]);
+        },
+        getActive: () => {
+          const e = expandedRef.current;
+          return e.length ? e[e.length - 1] : -1;
+        },
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [activeOnTop, controlled],
+    );
+
+    useEffect(() => setDynItems(items), [items]);
+
+    const toggle = (i: number) => {
+      if (controlled !== undefined) return;
+      const prev = expandedRef.current;
+      // 单开互斥（对齐 Ext AccordionLayout.beforeExpand：展开项时折叠其余）：
+      // 点击已展开项 → 全部折叠（对齐 Ext 允许全收起）；否则独占展开
+      const next = prev.includes(i) ? [] : [i];
+      fireChanges(prev, next);
+      setExpanded(next);
+      if (activeOnTop) setOrder((o) => [i, ...o.filter((x) => x !== i)]);
+    };
+
+    const hasRootTitle = !!title;
+    const rootHeaderH = hasRootTitle ? ROOT_HEADER_H : 0;
+    const expandedCount = expandedRef.current.length;
+    // 展开子 body 的 content 高度（content-box）：对齐 golden setItemSize 计算。
+    // fill 时展开项占满容器可用高度（单开互斥，至多 1 个展开）。
+    const expandedBodyContentH =
+      height != null && fill
+        ? Math.floor(
+            // 子面板为 noborder（border:false）：child body border 占用 = 0，故 -30（2*childPadding15 + 0）
+            // 根面板 bodyPadding 已置 0（见下），不再额外扣减根 body padding。
+            (height - rootHeaderH - 1 - CHILD_HEADER_H * dynItems.length - 30) /
+              Math.max(expandedCount, 1),
+          )
+        : undefined;
+
+    return (
+      <Panel
+        title={title}
+        width={autoWidth ? undefined : width}
+        height={height}
+        bodyStyle={{ padding: 0 }}
+      >
+        {order.map((i) => {
+          const it = dynItems[i];
+          if (!it) return null;
+          const isExpanded = expanded.includes(i);
+          return (
+            <Panel
+              key={i}
+              title={it.title}
+              iconCls={it.iconCls}
+              border={false}
+              collapsible
+              collapsed={!isExpanded}
+              collapseControlled
+              titleCollapse={titleCollapse}
+              hideCollapseTool={hideCollapseTool}
+              collapseFirst={collapseFirst}
+              headerClassName="x-accordion-hd"
+              onHeaderClick={() => toggle(i)}
+              bodyStyle={{
+                padding: 15,
+                // 强制 content-box：对齐 ExtJS 3.2.1（golden content-box）。
+                // 否则宿主若有全局 border-box 重置，inline height 会被当成总高，
+                // 少渲染 2*padding(30)+border(1)=31px，导致根容器底部留白。
+                boxSizing: 'content-box',
+                ...(isExpanded
+                  ? expandedBodyContentH != null
+                    ? { height: expandedBodyContentH }
+                    : {}
+                  : { display: 'none' }),
+                ...(animate ? { transition: 'height 0.2s ease' } : {}),
+              }}
+            >
+              {it.html !== undefined ? (
+                <span dangerouslySetInnerHTML={{ __html: it.html }} />
+              ) : (
+                it.children
+              )}
+            </Panel>
+          );
+        })}
+      </Panel>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

package/src/components/AnchorLayout.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+
+export interface AnchorItem {
+  /** 面板标题（渲染 x-panel-header）。省略则无 header、整高即 body。 */
+  title?: string;
+  /** 主体内容（纯文本/HTML 字符串）；也可通过 children 渲染任意 React 节点。 */
+  html?: string;
+  children?: React.ReactNode;
+  /** 锚点字符串，如 '100% 40%'（宽满 100%、高 40%）/ '-20 50%'（右侧留 20、高半）/ '50%'（仅宽，高自适应）。 */
+  anchor: string;
+  /** 透传到 .x-panel-body 的 inline style */
+  bodyStyle?: React.CSSProperties;
+}
+
+export interface AnchorLayoutProps {
+  /** 容器总宽（px），对齐 Ext.Container width，也是 anchor 百分比基准。 */
+  width: number;
+  /** 容器总高（px），对齐 Ext.Container height，也是 anchor 百分比基准。 */
+  height: number;
+  items: AnchorItem[];
+  /** 数据测试 id，挂在根容器上。 */
+  testId?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+// Ext 3.2.1 实测：x-panel 本身 border 为 0，header 高 26px，body 占剩余（含 1px 底边框，border-box）。
+const HEADER_H = 26;
+
+/**
+ * 解析单段锚点值（Ext.layout.AnchorLayout.parseAnchor / adjustWidthAnchor / adjustHeightAnchor 移植）：
+ *  - '%' 结尾：相对容器尺寸的百分比（四舍五入）；
+ *  - '-N'：容器尺寸减去 N（右侧/底部留白）；
+ *  - 纯数字：绝对像素；
+ *  - 空：容器尺寸（铺满）。
+ */
+function parseAnchorVal(s: string, containerSize: number): number {
+  s = (s || '').trim();
+  if (!s) return containerSize;
+  if (s.endsWith('%')) return Math.round((parseFloat(s) / 100) * containerSize);
+  if (s.startsWith('-')) return containerSize + parseInt(s, 10);
+  const n = parseInt(s, 10);
+  if (!isNaN(n)) return n;
+  return containerSize;
+}
+
+// 手写面板，精确对齐 Ext.Container(anchor) 实测 DOM：.x-panel > .x-panel-header + .x-panel-bwrap > .x-panel-body
+function AnchorPanel({
+  title,
+  width,
+  height,
+  html,
+  children,
+  bodyStyle,
+}: {
+  title?: string;
+  width: number;
+  height: number;
+  html?: string;
+  children?: React.ReactNode;
+  bodyStyle?: React.CSSProperties;
+}) {
+  const headerH = title ? HEADER_H : 0;
+  const bodyH = height - headerH;
+  return (
+    <div className="x-panel" style={{ width, height }}>
+      {title && (
+        <div className="x-panel-header x-unselectable" unselectable="on">
+          <span className="x-panel-header-text">{title}</span>
+        </div>
+      )}
+      <div className="x-panel-bwrap">
+        <div className="x-panel-body" style={{ height: bodyH, ...bodyStyle }}>
+          {html != null ? html : children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 复刻 Ext.layout.AnchorLayout（Ext 3.2.1）。
+ *
+ * DOM 对齐 ContainerLayout(anchor) 实测真值（#anchorlayout）：
+ *  - 容器根无专属 ct 类（ext-all.css 无 .x-anchor-layout-ct / .x-anchor-item）；
+ *  - 子面板直接作为容器子节点，block 流自上而下堆叠，各自按 anchor 计算固定 width/height。
+ *
+ * 定位数学（容器内容区 = width × height，无 padding）：
+ *  - width 段：'100%'→W、'50%'→W/2、'-20'→W-20、'200'→200、''→W；
+ *  - height 段同理基于 H；
+ *  - 面板整体高 = anchor 算出的 h，header 占 26px，body = h-26。
+ * 全部视觉来自 ext-all.css 既有规则（零新增 CSS）。
+ */
+export function AnchorLayout({
+  width,
+  height,
+  items,
+  testId,
+  style,
+  className = '',
+}: AnchorLayoutProps) {
+  const rootStyle: React.CSSProperties = { width, height, ...style };
+
+  return (
+    <div
+      data-testid={testId}
+      className={['anchor-layout-root', className].filter(Boolean).join(' ')}
+      style={rootStyle}
+    >
+      {items.map((it, i) => {
+        const parts = (it.anchor || '').trim().split(/\s+/);
+        const w = parseAnchorVal(parts[0] ?? '', width);
+        const h = parseAnchorVal(parts[1] ?? '', height);
+        return (
+          <AnchorPanel
+            key={i}
+            title={it.title}
+            width={w}
+            height={h}
+            html={it.html}
+            bodyStyle={it.bodyStyle}
+          >
+            {it.children}
+          </AnchorPanel>
+        );
+      })}
+    </div>
+  );
+}
+
+export default AnchorLayout;