react-extjs 0.0.1

package/src/components/BorderLayout.tsx

@@ -0,0 +1,512 @@
+import React, { useState, useRef } from 'react';
+import { Panel } from './Panel';
+
+export type RegionName = 'north' | 'south' | 'east' | 'west' | 'center';
+
+export interface RegionConfig {
+  region: RegionName;
+  /** east/west 区域宽度 */
+  width?: number;
+  /** north/south 区域高度 */
+  height?: number;
+  /** 区域面板标题（有标题则渲染头部，header 高 26px） */
+  title?: string;
+  /** body 内容（优先于 html） */
+  children?: React.ReactNode;
+  /** 纯文本/HTML 字符串内容 */
+  html?: string;
+  /** 顶部工具条内容（同 Ext.Panel.tbar，对齐 region 面板的 tbar；如 west region 在标题下挂工具栏） */
+  tbar?: React.ReactNode;
+  /** 追加到 body 的 inline style（会被布局计算的 width/height 合并） */
+  bodyStyle?: React.CSSProperties;
+  /** 是否显示边框（默认 true） */
+  border?: boolean;
+  // ===== 对齐 Ext.layout.BorderLayout.Region 的可折叠能力 =====
+  /** 是否允许折叠（默认 false；true 时 header 渲染折叠工具，或 collapseMode:'mini' 时渲染迷你工具） */
+  collapsible?: boolean;
+  /** 初始折叠态（默认 false） */
+  collapsed?: boolean;
+  /** 折叠为迷你条（默认 false；true 时折叠为极细条并在分隔条上渲染迷你工具） */
+  collapseMode?: 'normal' | 'mini';
+  /** 折叠时隐藏 header 中的折叠工具（默认 false，会渲染 x-tool） */
+  hideCollapseTool?: boolean;
+  /** 点击标题栏任意位置即可折叠（对齐 Ext titleCollapse，默认 false 仅工具可折叠） */
+  titleCollapse?: boolean;
+  /** 折叠动画（对齐 Ext animCollapse，默认 true） */
+  animCollapse?: boolean;
+  // ===== 分隔条（拖拽改变尺寸） =====
+  /** 是否渲染可拖拽分隔条（默认 false；center 区域忽略此配置） */
+  split?: boolean;
+  /** 拖拽最小值（px，对齐 Ext minSize，默认 50） */
+  minSize?: number;
+  /** 拖拽最大值（px，对齐 Ext maxSize，默认 10000） */
+  maxSize?: number;
+  // ===== 浮动（仅 west/east 折叠后生效） =====
+  /** 折叠后点击折叠条是否浮动显示（对齐 Ext floatable，默认 true） */
+  floatable?: boolean;
+  // ===== 间距 =====
+  /** 展开态外边距（对齐 Ext margins，字符串 "t r b l" 或 {top,right,bottom,left}，默认 0） */
+  margins?: string | { top?: number; right?: number; bottom?: number; left?: number };
+  /** 折叠态外边距（对齐 Ext cmargins，折叠时生效） */
+  cmargins?: string | { top?: number; right?: number; bottom?: number; left?: number };
+}
+
+export interface BorderLayoutProps {
+  /** 容器宽（外层 .x-panel 宽度，含 1px 边框，内布局区 = width-2） */
+  width: number;
+  /** 容器高（内布局区 = height-2） */
+  height: number;
+  regions: RegionConfig[];
+  /** 挂在 .x-border-layout-ct 上的 testId（供保真截图/行为测试定位） */
+  testId?: string;
+  /** 追加到根 .x-panel 的 class */
+  className?: string;
+  /** 透传到根 .x-panel 的内联 style（与 width 合并，调用方覆盖项优先生效） */
+  style?: React.CSSProperties;
+}
+
+// 保真常量（与主题/Ext 默认值一致）：
+const BODY_H_PAD = 2; // 左右边框各 1
+const SPLIT = 3; // 分隔条厚度（原版 ExtJS 为 5px；本仓库区域边框修复为单侧 1px 后，5px 显得过粗，改为 3px 与边框视觉协调）
+const COLLAPSED = 20; // 折叠条厚度（.x-layout-collapsed 默认 20/22）
+const COLLAPSED_MINI = 5; // 迷你折叠条厚度
+const DEFAULT_MIN = 50;
+const DEFAULT_MAX = 10000;
+
+function parseMargins(m?: string | { top?: number; right?: number; bottom?: number; left?: number }): {
+  top: number; right: number; bottom: number; left: number;
+} {
+  const z = { top: 0, right: 0, bottom: 0, left: 0 };
+  if (!m) return z;
+  if (typeof m === 'string') {
+    const p = m.trim().split(/\s+/).map(Number);
+    if (p.length === 1) return { top: p[0], right: p[0], bottom: p[0], left: p[0] };
+    if (p.length === 2) return { top: p[0], right: p[1], bottom: p[0], left: p[1] };
+    if (p.length === 3) return { top: p[0], right: p[1], bottom: p[2], left: p[1] };
+    return { top: p[0], right: p[1], bottom: p[2], left: p[3] };
+  }
+  return { top: m.top ?? 0, right: m.right ?? 0, bottom: m.bottom ?? 0, left: m.left ?? 0 };
+}
+
+function findRegion(regions: RegionConfig[], r: RegionName): RegionConfig | undefined {
+  return regions.find((x) => x.region === r);
+}
+
+interface Box { left: number; top: number; w: number; h: number; }
+
+/**
+ * 保真映射（来源 src/widgets/layout/BorderLayout.js + Region/SplitRegion）：
+ * - 外层 .x-panel > .x-panel-bwrap > .x-panel-body.x-panel-body-noheader.x-border-layout-ct
+ * - 每个区域渲染为 .x-panel.x-border-panel，绝对定位，内联 left/top/width/height
+ * - 区域 body 高度由布局算法显式设定（boxH-27），panel 自身不内联 height，自然撑高
+ * - 分隔条：.x-layout-split.x-layout-split-{pos}(.x-layout-split-h|v)，5px，可拖拽改尺寸
+ * - 折叠：.x-layout-collapsed.x-layout-collapsed-{pos} 折叠条（含 expand 工具 / mini 工具）
+ *   展开态 header 渲染 x-tool-collapse-{pos} 折叠工具
+ * - 浮动：west/east 折叠后点击折叠条浮动显示面板（x-panel-floating，覆盖 center）
+ * 定位数学（对齐 Ext onLayout）：
+ *   ctW=width-2, ctH=height-2
+ *   north : left0 top0 w=ctW h=nH(-split)
+ *   south : left0 top=ctH-sH(+split) h=sH(-split)
+ *   west  : left0 top=nH w=wW(-split) h=midH
+ *   east  : left=ctW-eW(+split) top=nH w=eW(-split) h=midH
+ *   center: left=wW top=nH w=ctW-wW-eW h=midH
+ *   折叠方向区域的占位缩减为 COLLAPSED，邻居延后/提前。
+ */
+export const BorderLayout: React.FC<BorderLayoutProps> = ({ width, height, regions, testId, className, style }) => {
+  const ctW = width - 2;
+  const ctH = height - 2;
+
+  const N = findRegion(regions, 'north');
+  const S = findRegion(regions, 'south');
+  const W = findRegion(regions, 'west');
+  const E = findRegion(regions, 'east');
+  const C = findRegion(regions, 'center');
+
+  // 折叠态：受控由 region.collapsed 驱动，非受控用内部状态
+  const [collapsedMap, setCollapsedMap] = useState<Record<string, boolean>>(() => {
+    const m: Record<string, boolean> = {};
+    regions.forEach((r) => { if (r.region !== 'center') m[r.region] = !!r.collapsed; });
+    return m;
+  });
+  // 分隔条拖拽尺寸：记录 north/south 的 height 与 west/east 的 width
+  const [sizeMap, setSizeMap] = useState<Record<string, number>>(() => {
+    const s: Record<string, number> = {};
+    regions.forEach((r) => {
+      if (r.region === 'north' || r.region === 'south') s[r.region] = r.height ?? 0;
+      else if (r.region === 'west' || r.region === 'east') s[r.region] = r.width ?? 0;
+    });
+    return s;
+  });
+  const [floating, setFloating] = useState<RegionName | null>(null);
+  const ctRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<{
+    region: RegionName; start: number; origin: number; min: number; max: number; axis: 'w' | 'h';
+  } | null>(null);
+
+  const isCollapsed = (r: RegionName) => r !== 'center' && !!collapsedMap[r];
+
+  const toggleCollapse = (r: RegionName) => {
+    if (r === 'center') return;
+    setCollapsedMap((m) => ({ ...m, [r]: !m[r] }));
+  };
+
+  // ---- 分隔条拖拽 ----
+  const onSplitMouseDown = (e: React.MouseEvent, region: RegionName) => {
+    e.preventDefault();
+    const cfg = findRegion(regions, region)!;
+    const axis = region === 'north' || region === 'south' ? 'h' : 'w';
+    const origin = sizeMap[region] ?? 0;
+    dragRef.current = {
+      region,
+      start: axis === 'h' ? e.clientY : e.clientX,
+      origin,
+      min: cfg.minSize ?? DEFAULT_MIN,
+      max: cfg.maxSize ?? DEFAULT_MAX,
+      axis,
+    };
+    const move = (ev: MouseEvent) => {
+      const d = dragRef.current;
+      if (!d) return;
+      const cur = d.axis === 'h' ? ev.clientY : ev.clientX;
+      let delta = cur - d.start;
+      // east/south 拖拽方向与 north/west 相反
+      if (d.region === 'east' || d.region === 'south') delta = -delta;
+      let next = Math.round(d.origin + delta);
+      next = Math.max(d.min, Math.min(d.max, next));
+      setSizeMap((s) => ({ ...s, [d.region]: next }));
+    };
+    const up = () => {
+      dragRef.current = null;
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+    };
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
+  };
+
+  // ---- 计算各区域盒 ----
+  // forceExpand=true 时忽略折叠态，算出"完全展开"布局（供 floatable 浮动面板定位用）
+  const compute = (forceExpand = false): {
+    N?: { box: Box; split?: Box };
+    S?: { box: Box; split?: Box };
+    W?: { box: Box; split?: Box };
+    E?: { box: Box; split?: Box };
+    C: Box;
+  } => {
+    const isCol = (r: RegionName) => r !== 'center' && !forceExpand && !!collapsedMap[r];
+    let topEdge = 0;
+    let bottomEdge = ctH;
+    let leftEdge = 0;
+    let rightEdge = ctW;
+    const res: any = { C: { left: 0, top: 0, w: ctW, h: ctH } };
+
+    // 分隔条紧贴区域边缘（panel 占 dim-s，split 占 s，二者无缝衔接，无遗留 5px 间隙）；
+    // edge 为区域在对应轴上占用的完整尺寸（panel + split = dim），供相邻区域延后/提前。
+    const regionBox = (r: RegionConfig, split: boolean): { box: Box; split?: Box; edge: number } => {
+      const m = parseMargins(r.collapsed && r.cmargins ? r.cmargins : r.margins);
+      const dim = (r.region === 'north' || r.region === 'south'
+        ? sizeMap[r.region] ?? r.height ?? 0
+        : sizeMap[r.region] ?? r.width ?? 0);
+      const s = split && r.region !== 'center' ? SPLIT : 0;
+      switch (r.region) {
+        case 'north': {
+          const box = { left: m.left, top: topEdge + m.top, w: ctW - m.left - m.right, h: dim - s };
+          // 分隔条同样套用左右 margins，避免贴着外框左右（原版上下留间距、左右亦留）
+          const sp = s ? { left: m.left, top: topEdge + m.top + dim - s, w: ctW - m.left - m.right, h: s } : undefined;
+          // edge 取区域（含 margin+split）占用的真实下边界，供下一区域顺延；此前漏加 m.top 会让
+          // 下方 center 上移、压到分隔条与 north 上，导致边框错位/被盖（同 west/east 的 m.left 问题）
+          return { box, split: sp, edge: topEdge + m.top + dim };
+        }
+        case 'south': {
+          // 邻居为上方 center：分隔条贴区域顶端（top=bottomEdge-dim），面板底部对齐（top=bottomEdge-dim+s）。
+          const box = { left: m.left, top: bottomEdge - dim + s + m.top, w: ctW - m.left - m.right, h: dim - s };
+          const sp = s ? { left: m.left, top: bottomEdge - dim + m.top, w: ctW - m.left - m.right, h: s } : undefined;
+          // 取区域占用的真实上边界（含 bottom margin），供上方区域顶到正确位置
+          return { box, split: sp, edge: bottomEdge - m.bottom - dim };
+        }
+        case 'west': {
+          const box = { left: leftEdge + m.left, top: topEdge + m.top, w: dim - s, h: bottomEdge - topEdge - m.top - m.bottom };
+          // 分隔条同样套用上下 margins，不顶天立地贴外框上下（原版中间分隔条上下各留 5px 间距）
+          const sp = s ? { left: leftEdge + m.left + dim - s, top: topEdge + m.top, w: s, h: bottomEdge - topEdge - m.top - m.bottom } : undefined;
+          // edge 取区域（含 left margin+split）占用的真实右边界：此前漏加 m.left，使右侧 center 左移 5px
+          // 压在分隔条与 west 上，其中心左边框叠进 west 并被 zIndex:10 的分隔条盖住 → 看似“无左边框”。
+          return { box, split: sp, edge: leftEdge + m.left + dim };
+        }
+        case 'east': {
+          // 邻居为左侧 center：分隔条贴区域左端（left=rightEdge-dim），面板右对齐（left=rightEdge-dim+s）。
+          const box = { left: rightEdge - dim + s + m.left, top: topEdge + m.top, w: dim - s, h: bottomEdge - topEdge - m.top - m.bottom };
+          const sp = s ? { left: rightEdge - dim + m.left, top: topEdge + m.top, w: s, h: bottomEdge - topEdge - m.top - m.bottom } : undefined;
+          // 取区域占用的真实左边界（含 right margin），供左侧 center 右到正确位置
+          return { box, split: sp, edge: rightEdge - m.right - dim };
+        }
+        default:
+          return { box: { left: 0, top: 0, w: ctW, h: ctH }, edge: 0 };
+      }
+    };
+
+    if (N) {
+      if (isCol('north')) {
+        const h = N.collapseMode === 'mini' ? COLLAPSED_MINI : COLLAPSED;
+        res.N = { box: { left: 0, top: 0, w: ctW, h }, edge: h };
+        topEdge = h;
+      } else {
+        res.N = regionBox(N, !!N.split);
+        topEdge = res.N.edge;
+      }
+    }
+    if (S) {
+      if (isCol('south')) {
+        const h = S.collapseMode === 'mini' ? COLLAPSED_MINI : COLLAPSED;
+        res.S = { box: { left: 0, top: ctH - h, w: ctW, h }, edge: ctH - h };
+        bottomEdge = ctH - h;
+      } else {
+        res.S = regionBox(S, !!S.split);
+        bottomEdge = res.S.edge;
+      }
+    }
+    const midH = bottomEdge - topEdge;
+    if (W) {
+      if (isCol('west')) {
+        const w = W.collapseMode === 'mini' ? COLLAPSED_MINI : COLLAPSED;
+        res.W = { box: { left: 0, top: topEdge, w, h: midH }, edge: w };
+        leftEdge = w;
+      } else {
+        res.W = regionBox(W, !!W.split);
+        leftEdge = res.W.edge;
+      }
+    }
+    if (E) {
+      if (isCol('east')) {
+        const w = E.collapseMode === 'mini' ? COLLAPSED_MINI : COLLAPSED;
+        res.E = { box: { left: ctW - w, top: topEdge, w, h: midH }, edge: ctW - w };
+        rightEdge = ctW - w;
+      } else {
+        res.E = regionBox(E, !!E.split);
+        rightEdge = res.E.edge;
+      }
+    }
+    // center region 同样应尊重其 margins（对齐 ExtJS：center 的 '5 5 5 0' 使其向内缩进，
+    // 否则会顶满外框、与原版 region 视觉尺寸不符）。原版 onLayout 对 center 的 left/top/width/height
+    // 同样是 edge 减去 margins 后得出。
+    const cM = C ? parseMargins(C.margins) : { top: 0, right: 0, bottom: 0, left: 0 };
+    res.C = {
+      left: leftEdge + cM.left,
+      top: topEdge + cM.top,
+      w: rightEdge - leftEdge - cM.left - cM.right,
+      h: midH - cM.top - cM.bottom,
+    };
+    return res;
+  };
+
+  const layout = compute();
+  // 完全展开布局：供 floatable 浮动面板定位（浮动时面板应回到原始展开尺寸）
+  const layoutExpanded = compute(true);
+
+  const renderRegionPanel = (cfg: RegionConfig, box: Box, opts: { floating?: boolean } = {}) => {
+    const hasHeader = !!cfg.title;
+    const bodyW = box.w - BODY_H_PAD;
+    const collapsed = isCollapsed(cfg.region);
+    const tools = cfg.collapsible && !collapsed
+      ? [{ id: `collapse-${cfg.region}`, handler: () => toggleCollapse(cfg.region), tooltip: `Collapse ${cfg.region}` }]
+      : undefined;
+    // 严格对齐原生 ExtJS 的 border 布局：每个 region 渲染为「完整 1px 边框的 .x-panel」
+    // （.x-panel-header 四向 + .x-panel-body 左/右/下，顶边由相邻 header 提供以免双线），边框
+    // 颜色完全交给 @import 进来的 xtheme-*.css（blue #99bbe8 / gray #d0d0d0），默认主题不写死
+    // 任何颜色、切换主题时整圈边框自动跟随。这正是原生观感——相邻 region 直接相接时各自 1px
+    // 边框相接成 2px（原生无 split 的默认五区演示即是如此，非 bug）；被 splitter 或 margins
+    // 隔开的 region（如 Organizer 的 west/center）则互不相邻、各自完整框、无重叠。
+    // .x-border-panel 类仅作布局定位钩子（真实 Ext 中只负责 position:absolute，本身无边框），
+    // 不再承载任何颜色规则。box-sizing:border-box 使 1px 边框不撑破布局算出的 box.w/box.h。
+    // 浮动面板是独立浮层，同样保留完整面板边框。是否带框尊重 cfg.border（默认 true）；
+    // border:false 的区域不挂 x-border-panel 类、保持无框，不影响其它布局的 borderless 配置。
+    const bordered = cfg.border !== false;
+    const regionBorder: React.CSSProperties = {
+      boxSizing: 'border-box',
+      borderRadius: 0,
+      boxShadow: 'none',
+    };
+    return (
+      <Panel
+        key={cfg.region}
+        cls={[bordered ? 'x-border-panel' : '', opts.floating ? 'x-panel-floating' : ''].filter(Boolean).join(' ')}
+        width={box.w}
+        // 区域面板固定为 box.h（对齐 ExtJS region 被布局锁定为 box.h）；bodyFlex 使内部
+        // flex 排列，header 因长标题换行变高时 body 自动收缩，绝不突破 box.h 覆盖邻居。
+        height={box.h}
+        bodyFlex
+        header={hasHeader ? true : false}
+        title={cfg.title}
+        border={bordered}
+        collapsible={cfg.collapsible}
+        hideCollapseTool={cfg.hideCollapseTool}
+        titleCollapse={cfg.titleCollapse}
+        tools={tools}
+        tbar={cfg.tbar}
+        onHeaderClick={cfg.titleCollapse ? () => toggleCollapse(cfg.region) : undefined}
+        style={{
+          position: 'absolute',
+          left: box.left,
+          top: box.top,
+          zIndex: opts.floating ? 100 : undefined,
+          ...regionBorder,
+        }}
+        // 保真注意：body 宽度公式（box.w-2）按 content-box 设计，对齐 golden（Ext 默认
+        // content-box）。文档站有全局 border-box 重置，须显式声明 content-box，否则 body
+        // 会比贴边的 header 缩进 2px，导致相邻 region body 间隙、左右边框错位（accordion 同理）。
+        // 高度不再内联：交由 bodyFlex 的 flex:1 填满剩余，header 变高时 body 收缩。
+        bodyStyle={{ boxSizing: 'content-box', width: bodyW, ...(cfg.bodyStyle ? { ...cfg.bodyStyle, height: undefined } : {}) }}
+      >
+        {cfg.children ?? cfg.html}
+      </Panel>
+    );
+  };
+
+  const renderSplit = (box: Box, region: RegionName) => (
+    <div
+      key={`split-${region}`}
+      className={`x-layout-split x-layout-split-${region} ${region === 'north' || region === 'south' ? 'x-layout-split-h' : 'x-layout-split-v'}`}
+      style={{
+        left: box.left,
+        top: box.top,
+        width: box.w,
+        height: box.h,
+        zIndex: 10,
+        cursor: region === 'north' || region === 'south' ? 'row-resize' : 'col-resize',
+        // 原版 .x-layout-split 背景透明（仅 s.gif 1×1 透明占位），在区域边框修复后
+        // 5px 透明间隙与相邻面板的 1px 边框组合成"看起来很宽的拖拽条"。
+        // 此处用 3px 厚度 + 极淡底色使分隔条呈现为微妙的拖拽手柄（零改 CSS，纯内联覆盖）。
+        backgroundColor: '#f0f4fa',
+      }}
+      onMouseDown={(e) => onSplitMouseDown(e, region)}
+    />
+  );
+
+  const renderCollapsedBar = (cfg: RegionConfig, box: Box) => {
+    const pos = cfg.region;
+    const mini = cfg.collapseMode === 'mini';
+    if (mini) {
+      return (
+        <div
+          key={`collapsed-${pos}`}
+          className={`x-layout-collapsed x-layout-collapsed-${pos} x-layout-cmini-${pos}`}
+          style={{ left: box.left, top: box.top, width: box.w, height: box.h, visibility: 'visible', zIndex: 20 }}
+        >
+          <div className={`x-layout-mini x-layout-mini-${pos}`} onClick={() => toggleCollapse(pos)}>&#160;</div>
+        </div>
+      );
+    }
+    // 对齐 ExtJS 3.2.1 (resources/css/structure/layout.css:80)：
+    //   .x-tool-expand-north, .x-tool-expand-south { float:right; margin:3px; }
+    //   .x-tool-expand-east,  .x-tool-expand-west  { float:none; margin:3px auto; }
+    // 即 South/North 折叠条为水平条、工具靠右；West/East 为竖直条、工具水平居中。
+    // 注意：文档站加载了上述 ExtJS CSS，会使 .x-tool-expand-south 带 float:right，
+    // 与 flex 定位互相干扰（West 无 float 故正常、South 异常）。因此不依赖 flex/float，
+    // 改用绝对定位把 icon 钉死在正确位置（也对齐 ExtJS 原生做法）：
+    //   水平条(South/North) → 靠右(right:3) + 垂直居中(top:50%, translateY(-50%))
+    //   竖直条(West/East)   → 水平居中(left:50%, translateX(-50%)) + 顶部(top:3)
+    const horizontal = pos === 'north' || pos === 'south';
+    const toolStyle: React.CSSProperties = horizontal
+      ? { position: 'absolute', right: 3, top: '50%', transform: 'translateY(-50%)', margin: 0 }
+      : { position: 'absolute', left: '50%', top: 3, transform: 'translateX(-50%)', margin: 0 };
+    return (
+      <div
+        key={`collapsed-${pos}`}
+        className={`x-layout-collapsed x-layout-collapsed-${pos}`}
+        style={{
+          left: box.left,
+          top: box.top,
+          width: box.w,
+          height: box.h,
+          visibility: 'visible',
+          zIndex: 20,
+        }}
+        onClick={() => {
+          if (cfg.floatable !== false && (pos === 'west' || pos === 'east')) setFloating(pos);
+          else toggleCollapse(pos);
+        }}
+      >
+        {cfg.collapsible !== false && !cfg.hideCollapseTool && (
+          <div
+            className={`x-tool x-tool-expand-${pos}`}
+            style={toolStyle}
+            onClick={(e) => { e.stopPropagation(); toggleCollapse(pos); }}
+          >&#160;</div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={['x-panel', className].filter(Boolean).join(' ')} style={{ width, ...style }}>
+      <div className="x-panel-bwrap">
+        <div
+          ref={ctRef}
+          className="x-panel-body x-panel-body-noheader x-border-layout-ct"
+          data-testid={testId}
+          // 对齐真实 Ext 3.2.1：.x-border-layout-ct 同时是面板 body（class 即 x-panel-body
+          // x-panel-body-noheader），其整圈边框由 ext-theme.css 的 .x-panel-body + .x-panel-body-noheader
+          // 提供（1px，颜色由 xtheme-*.css 的 border-color 主题化：blue #99bbe8 / gray #d0d0d0）。
+          // 因此**不在此写死任何颜色**——切换主题时外框随 xtheme 自动跟随，与真实 Ext 完全一致。
+          // 根 .x-panel 为 border:0（真实 Ext 实测亦为 0），故无“根 + ct”叠加成 2px 问题。
+          // 几何：content-box，width=ctW/height=ctH，外框总尺寸 = ctW + 2（实测真实 Ext ct：
+          // content 518 + border 2 = 520，与 root 一致）。
+          style={{ width: ctW, height: ctH, position: 'relative', boxSizing: 'content-box', padding: 0 }}
+        >
+          {/* 折叠条（展开面板渲染在下方，避免 z-index 覆盖） */}
+          {N && isCollapsed('north') && renderCollapsedBar(N, layout.N!.box)}
+          {S && isCollapsed('south') && renderCollapsedBar(S, layout.S!.box)}
+          {W && isCollapsed('west') && renderCollapsedBar(W, layout.W!.box)}
+          {E && isCollapsed('east') && renderCollapsedBar(E, layout.E!.box)}
+
+          {/* 浮动面板（覆盖 center）：west/east 折叠后点击折叠条浮起，回到原始展开尺寸 */}
+          {floating && isCollapsed(floating) && (() => {
+            const cfg = floating === 'west' ? W! : E!;
+            const exp = floating === 'west' ? layoutExpanded.W : layoutExpanded.E;
+            if (!cfg || !exp) return null;
+            const box = exp.box;
+            return (
+              <>
+                <div
+                  key="floating-overlay"
+                  data-testid="floating-overlay"
+                  onClick={() => setFloating(null)}
+                  style={{ position: 'absolute', inset: 0, zIndex: 99 }}
+                />
+                {renderRegionPanel(cfg, box, { floating: true })}
+              </>
+            );
+          })()}
+
+          {/* 展开面板 + 分隔条 */}
+          {N && !isCollapsed('north') && (
+            <>
+              {renderRegionPanel(N, layout.N!.box, {})}
+              {layout.N!.split && renderSplit(layout.N!.split!, 'north')}
+            </>
+          )}
+          {S && !isCollapsed('south') && (
+            <>
+              {renderRegionPanel(S, layout.S!.box, {})}
+              {layout.S!.split && renderSplit(layout.S!.split!, 'south')}
+            </>
+          )}
+          {W && !isCollapsed('west') && (
+            <>
+              {renderRegionPanel(W, layout.W!.box, {})}
+              {layout.W!.split && renderSplit(layout.W!.split!, 'west')}
+            </>
+          )}
+          {E && !isCollapsed('east') && (
+            <>
+              {renderRegionPanel(E, layout.E!.box, {})}
+              {layout.E!.split && renderSplit(layout.E!.split!, 'east')}
+            </>
+          )}
+          {C && renderRegionPanel(C, layout.C)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BorderLayout;