react-extjs 0.0.1

package/src/components/TreeGrid.tsx

@@ -0,0 +1,418 @@
+import React, {
+  useState,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useEffect,
+} from 'react';
+import { Panel } from './Panel';
+
+// 与原版 Ext.BLANK_IMAGE_URL 等价（Ext 3.2.1 默认 1x1 透明 gif）
+const BLANK =
+  'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+
+export interface TreeGridColumn {
+  header: string;
+  dataIndex: string;
+  width: number;
+  align?: 'left' | 'center' | 'right';
+  /** 附加在列 td 上的 class（可选） */
+  cls?: string;
+}
+
+export interface TreeGridNode {
+  id: string;
+  /** 初始是否展开（有子节点时生效） */
+  expanded?: boolean;
+  /** 即使无子节点也显示为可展开（collapsed plus 图标） */
+  expandable?: boolean;
+  children?: TreeGridNode[];
+  [key: string]: unknown;
+}
+
+export interface TreeGridProps {
+  title?: string;
+  width?: number;
+  height?: number;
+  /** 默认 false（对齐 Ext.ux.tree.TreeGrid 默认 rootVisible:false） */
+  rootVisible?: boolean;
+  /** 默认 true → 渲染 x-tree-arrows（对齐 Ext useArrows:true） */
+  useArrows?: boolean;
+  columns: TreeGridColumn[];
+  /** 顶层节点数组 */
+  data?: TreeGridNode[];
+  className?: string;
+  /** 选中节点回调（点击节点时触发，参数为节点 id）；对齐 Ext TreeGrid 的 select 事件 */
+  onSelect?: (id: string) => void;
+}
+
+/** 命令式句柄：运行时增删改节点 / 展开折叠 / 选中 */
+export interface TreeGridHandle {
+  /** 整体替换数据源 */
+  setData: (data: TreeGridNode[]) => void;
+  /** 读取当前数据源（浅拷贝） */
+  getData: () => TreeGridNode[];
+  /** 在 parentId 下插入节点（null 表示顶层）；index 缺省追加到末尾 */
+  addNode: (parentId: string | null, node: TreeGridNode, index?: number) => void;
+  /** 删除指定 id 的节点（含其子树） */
+  removeNode: (id: string) => void;
+  /** 局部更新节点属性（含展开/折叠/icon 等） */
+  updateNode: (id: string, patch: Partial<TreeGridNode>) => void;
+  /** 展开某节点 */
+  expand: (id: string) => void;
+  /** 折叠某节点 */
+  collapse: (id: string) => void;
+  /** 切换展开/折叠 */
+  toggle: (id: string) => void;
+  /** 选中某节点 */
+  select: (id: string) => void;
+  /** 当前选中节点 id */
+  getSelected: () => string | null;
+}
+
+interface NormNode extends TreeGridNode {
+  _parent: NormNode | RootSentinel | null;
+  _isLast: boolean;
+  _children: NormNode[];
+}
+
+interface RootSentinel {
+  isRoot: true;
+  _isLast: boolean;
+  _parent: null;
+}
+
+// 规范化：建立 _parent 引用与是否末位兄弟，供缩进与 ec 图标计算。
+function normalize(
+  nodes: TreeGridNode[],
+  parent: NormNode | RootSentinel | null,
+  rootVisible: boolean,
+): NormNode[] {
+  return nodes.map((n, i) => {
+    const node: NormNode = {
+      ...n,
+      _parent: parent,
+      _isLast: i === nodes.length - 1,
+      _children: [],
+    };
+    node._children = normalize(n.children || [], node, rootVisible);
+    return node;
+  });
+}
+
+// 纯函数：在 parentId 下插入节点（null=顶层），index 缺省末尾追加
+function insertNode(
+  nodes: TreeGridNode[],
+  parentId: string | null,
+  node: TreeGridNode,
+  index?: number,
+): TreeGridNode[] {
+  if (parentId === null) {
+    const copy = [...nodes];
+    copy.splice(index ?? copy.length, 0, node);
+    return copy;
+  }
+  return nodes.map((n) => {
+    if (n.id === parentId) {
+      const children = [...(n.children || [])];
+      children.splice(index ?? children.length, 0, node);
+      return { ...n, children };
+    }
+    if (n.children) return { ...n, children: insertNode(n.children, parentId, node, index) };
+    return n;
+  });
+}
+
+// 纯函数：删除指定 id 节点及其子树
+function deleteNode(nodes: TreeGridNode[], id: string): TreeGridNode[] {
+  return nodes
+    .filter((n) => n.id !== id)
+    .map((n) => (n.children ? { ...n, children: deleteNode(n.children, id) } : n));
+}
+
+// 纯函数：局部更新节点属性（递归匹配 id）
+function patchNode(nodes: TreeGridNode[], id: string, patch: Partial<TreeGridNode>): TreeGridNode[] {
+  return nodes.map((n) => {
+    if (n.id === id) return { ...n, ...patch };
+    if (n.children) return { ...n, children: patchNode(n.children, id, patch) };
+    return n;
+  });
+}
+
+// 对齐 Ext TreeNodeUI.getChildIndent：从节点自身向上遍历各祖先层级，
+// 非末位兄弟 → x-tree-elbow-line，末位 → x-tree-icon；rootVisible:false 时跳过根。
+// 注意：TreeGridNodeUI 用「父节点」的 getChildIndent 作为本节点的缩进，故此处入参为 node._parent。
+function getChildIndent(parent: NormNode | RootSentinel | null, rootVisible: boolean): string[] {
+  const imgs: string[] = [];
+  let cur = parent;
+  while (cur) {
+    const isRoot = (cur as RootSentinel).isRoot === true;
+    if (!(isRoot && !rootVisible)) {
+      imgs.unshift((cur as NormNode)._isLast ? 'x-tree-icon' : 'x-tree-elbow-line');
+    }
+    cur = (cur as NormNode)._parent;
+  }
+  return imgs;
+}
+
+/**
+ * 保真映射（来源 Ext.ux.tree.TreeGrid + TreeGridNodeUI，Ext 3.2.1 examples/ux）：
+ * - 外层复用 Ext.Panel 结构（x-panel x-treegrid + x-panel-header + x-panel-body），body 内为
+ *   .x-tree-root-ct.x-treegrid-ct.x-tree-arrows > .x-grid3-header(.x-treegrid-header-inner >
+ *   .x-grid3-header-offset > table) + .x-treegrid-root-node > table.x-treegrid-root-table。
+ * - 每行 tbody.x-tree-node > tr.x-tree-node-el(.x-tree-node-expanded|collapsed|leaf) >
+ *   td.x-treegrid-col(缩进+ec图标+节点图标+anchor) + 其余列 td.x-treegrid-col>div.x-treegrid-text；
+ *   随后 tr.x-tree-node-ct > td[colspan] > table.x-treegrid-node-ct-table（展开时含子节点）。
+ * - DOM 结构与 class 名与 Ext 真值完全一致；仅省略对像素无影响的命名空间属性 ext:tree-node-id
+ *   （交互测试改用 data-id）。
+ */
+export const TreeGrid = forwardRef<TreeGridHandle, TreeGridProps>(function TreeGrid(
+  {
+    title,
+    width,
+    height,
+    rootVisible = false,
+    useArrows = true,
+    columns,
+    data = [],
+    className = '',
+    onSelect,
+  },
+  ref,
+) {
+  // 双轨：data prop 作为初始值，句柄可运行时增删改
+  const [dynData, setDynData] = useState<TreeGridNode[]>(() => data);
+  useEffect(() => {
+    setDynData(data);
+  }, [data]);
+
+  const root = React.useMemo<RootSentinel>(() => ({ isRoot: true, _isLast: false, _parent: null }), []);
+  const norm = React.useMemo(() => normalize(dynData, root, rootVisible), [dynData, root, rootVisible]);
+
+  const [expandedSet, setExpandedSet] = useState<Set<string>>(() => {
+    const s = new Set<string>();
+    const walk = (ns: NormNode[]) => {
+      ns.forEach((n) => {
+        if (n.expanded && (n.children?.length || n.expandable)) s.add(n.id);
+        walk(n._children);
+      });
+    };
+    walk(norm);
+    return s;
+  });
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // 命令式句柄（运行时增删改 / 展开折叠 / 选中）
+  const setData = useCallback((d: TreeGridNode[]) => setDynData(d), []);
+  const getData = useCallback(() => dynData.map((x) => ({ ...x })), [dynData]);
+  const addNode = useCallback((parentId: string | null, node: TreeGridNode, index?: number) => {
+    setDynData((prev) => insertNode(prev, parentId, node, index));
+    if (node.expanded) setExpandedSet((prev) => new Set(prev).add(node.id));
+  }, []);
+  const removeNode = useCallback((id: string) => {
+    setDynData((prev) => deleteNode(prev, id));
+    setExpandedSet((prev) => {
+      const s = new Set(prev);
+      s.delete(id);
+      return s;
+    });
+    setSelectedId((prev) => (prev === id ? null : prev));
+  }, []);
+  const updateNode = useCallback((id: string, patch: Partial<TreeGridNode>) => {
+    setDynData((prev) => patchNode(prev, id, patch));
+  }, []);
+  const expand = useCallback((id: string) => setExpandedSet((prev) => new Set(prev).add(id)), []);
+  const collapse = useCallback((id: string) => {
+    setExpandedSet((prev) => {
+      const s = new Set(prev);
+      s.delete(id);
+      return s;
+    });
+  }, []);
+  const toggleNode = useCallback((id: string) => {
+    setExpandedSet((prev) => {
+      const s = new Set(prev);
+      if (s.has(id)) s.delete(id);
+      else s.add(id);
+      return s;
+    });
+  }, []);
+  const select = useCallback((id: string) => setSelectedId(id), []);
+  const getSelected = useCallback(() => selectedId, [selectedId]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setData,
+      getData,
+      addNode,
+      removeNode,
+      updateNode,
+      expand,
+      collapse,
+      toggle: toggleNode,
+      select,
+      getSelected,
+    }),
+    [setData, getData, addNode, removeNode, updateNode, expand, collapse, toggleNode, select, getSelected],
+  );
+
+  const total = columns.reduce((s, c) => s + c.width, 0);
+  const colCount = columns.length;
+
+  const toggle = (id: string) => {
+    setExpandedSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const colgroup = (
+    <colgroup>
+      {columns.map((c) => (
+        <col key={c.dataIndex} style={{ width: c.width }} />
+      ))}
+    </colgroup>
+  );
+
+  const renderNode = (node: NormNode): React.ReactElement => {
+    const expanded = expandedSet.has(node.id);
+    const hasChild = node._children.length > 0;
+    const expandable = !!node.expandable;
+    const isLast = node._isLast;
+
+    // ec 图标 class（对齐 Ext TreeNodeUI.updateExpandIcon）
+    const ecBase = isLast ? 'x-tree-elbow-end' : 'x-tree-elbow';
+    let ecClass = 'x-tree-ec-icon ' + ecBase;
+    if (hasChild || expandable) ecClass += expanded ? '-minus' : '-plus';
+
+    // 行 class
+    let rowCls: string;
+    if (hasChild || expandable) rowCls = expanded ? 'x-tree-node-expanded' : 'x-tree-node-collapsed';
+    else rowCls = 'x-tree-node-leaf';
+
+    const indentImgs = getChildIndent(node._parent, rootVisible).map((cls, i) => (
+      <img key={i} src={BLANK} className={cls} alt="" />
+    ));
+
+    const firstValue = String(node[columns[0].dataIndex] ?? '');
+
+    return (
+      <tbody key={node.id} className="x-tree-node">
+        <tr
+          className={['x-tree-node-el', rowCls, selectedId === node.id ? 'x-tree-node-selected' : '']
+            .filter(Boolean)
+            .join(' ')}
+          data-id={node.id}
+          onClick={() => {
+            setSelectedId(node.id);
+            onSelect?.(node.id);
+          }}
+        >
+          <td className="x-treegrid-col">
+            <span className="x-tree-node-indent">{indentImgs}</span>
+            <img
+              src={BLANK}
+              className={ecClass}
+              alt=""
+              onClick={(e) => {
+                e.stopPropagation();
+                toggle(node.id);
+              }}
+            />
+            <img src={BLANK} className="x-tree-node-icon" unselectable="on" alt="" />
+            <a
+              className="x-tree-node-anchor"
+              href="#"
+              tabIndex={1}
+              onClick={(e) => e.preventDefault()}
+            >
+              <span unselectable="on">{firstValue}</span>
+            </a>
+          </td>
+          {columns.slice(1).map((c) => (
+            <td key={c.dataIndex} className={`x-treegrid-col ${c.cls || ''}`}>
+              <div
+                unselectable="on"
+                className="x-treegrid-text"
+                style={c.align ? { textAlign: c.align } : undefined}
+              >
+                {String(node[c.dataIndex] ?? '')}
+              </div>
+            </td>
+          ))}
+        </tr>
+        <tr className="x-tree-node-ct">
+          <td colSpan={colCount}>
+            <table
+              className="x-treegrid-node-ct-table"
+              cellPadding={0}
+              cellSpacing={0}
+              style={{ tableLayout: 'fixed', display: expanded ? undefined : 'none', width: total }}
+            >
+              {colgroup}
+              {expanded ? node._children.map(renderNode) : null}
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    );
+  };
+
+  const rootNodeHeight = height != null ? height - 50 : undefined; // 50 = 面板头 27 + grid 头 23
+
+  return (
+    <Panel title={title} width={width} cls={`x-treegrid ${className}`.trim()} height={height}>
+      <div
+        className={[
+          'x-tree-root-ct',
+          'x-treegrid-ct',
+          useArrows ? 'x-tree-arrows' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className="x-grid3-header">
+          <div className="x-treegrid-header-inner">
+            <div className="x-grid3-header-offset" style={{ width: total }}>
+              <table cellSpacing={0} cellPadding={0} border={0} style={{ width: total }}>
+                {colgroup}
+                <thead>
+                  <tr className="x-grid3-hd-row">
+                    {columns.map((c) => (
+                      <td
+                        key={c.dataIndex}
+                        className="x-grid3-hd x-grid3-cell x-treegrid-hd"
+                        style={{ textAlign: c.align || 'left' }}
+                      >
+                        <div className="x-grid3-hd-inner x-treegrid-hd-inner" unselectable="on">
+                          {c.header}
+                          <img className="x-grid3-sort-icon" src={BLANK} alt="" />
+                        </div>
+                      </td>
+                    ))}
+                  </tr>
+                </thead>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="x-treegrid-root-node" style={rootNodeHeight ? { height: rootNodeHeight } : undefined}>
+          <table
+            className="x-treegrid-root-table"
+            cellPadding={0}
+            cellSpacing={0}
+            style={{ width: total, tableLayout: 'fixed' }}
+          >
+            {colgroup}
+            {norm.map(renderNode)}
+          </table>
+        </div>
+      </div>
+    </Panel>
+  );
+});
+
+export default TreeGrid;

package/src/components/Viewport.tsx

@@ -0,0 +1,218 @@
+import React, { useRef, useState, useCallback, useEffect, useImperativeHandle, forwardRef } from 'react';
+import { Panel } from './Panel';
+
+export type ViewportRegionName = 'north' | 'south' | 'east' | 'west' | 'center';
+
+export interface ViewportRegionConfig {
+  region: ViewportRegionName;
+  /** east/west 区域宽度 */
+  width?: number;
+  /** north/south 区域高度 */
+  height?: number;
+  /** 区域面板标题（有标题则渲染头部，header 高 26px） */
+  title?: string;
+  /** body 内容（优先于 html） */
+  children?: React.ReactNode;
+  /** 纯文本/HTML 字符串内容（对齐 Ext region 的 html 配置） */
+  html?: string;
+  /** 追加到 body 的 inline style（会被布局计算的 width/height 合并） */
+  bodyStyle?: React.CSSProperties;
+  /** 是否显示边框（默认 true；false 时不挂 x-border-panel、保持无框） */
+  border?: boolean;
+}
+
+export interface ViewportProps {
+  /** 容器宽（外层 .x-viewport 宽度，无边框，内布局区 = width） */
+  width: number;
+  /** 容器高（内布局区 = height） */
+  height: number;
+  regions: ViewportRegionConfig[];
+  /** 挂在 .x-viewport 上的 testId（供保真截图/行为测试定位） */
+  testId?: string;
+  /** 追加到根 .x-viewport 的 class */
+  className?: string;
+}
+
+/** Viewport 命令式句柄：运行时增删/改 region、改容器尺寸。 */
+export interface ViewportHandle {
+  /** 整体替换 region 配置数组 */
+  setRegions: (regions: ViewportRegionConfig[]) => void;
+  /** 读取当前 region 配置数组 */
+  getRegions: () => ViewportRegionConfig[];
+  /** 追加一个 region（若同名已存在则覆盖） */
+  addRegion: (cfg: ViewportRegionConfig) => void;
+  /** 移除某 region */
+  removeRegion: (region: ViewportRegionName) => void;
+  /** 局部更新某 region（合并 patch） */
+  updateRegion: (region: ViewportRegionName, patch: Partial<ViewportRegionConfig>) => void;
+  /** 调整某 region 的宽（east/west）或高（north/south） */
+  resizeRegion: (region: ViewportRegionName, size: number) => void;
+  /** 调整容器整体宽高 */
+  setSize: (width: number, height: number) => void;
+  /** 读取某 region 当前配置（不存在返回 undefined） */
+  getRegion: (region: ViewportRegionName) => ViewportRegionConfig | undefined;
+}
+
+// 保真对齐 ExtJS 原生 border 布局（与仓库 BorderLayout 组件同源、与 golden 真值一致）：
+// 每个 region 渲染为「完整 1px 边框的 .x-panel.x-border-panel」，边框颜色完全交给 @import 进来的
+// xtheme-*.css（blue #99bbe8 / gray #d0d0d0），此处不写死任何颜色、切换主题时整圈边框自动跟随。
+// 相邻 region 直接相接时各自 1px 边框相接成 2px，这是原生默认五区演示的真实观感（非 bug）；
+// 外框即由最外层 region（north 顶 / south 底 / west 左 / east 右）的边框拼出，根 .x-viewport
+// 本身无边框（对齐 golden：Ext.Container 默认 border:false，仅 region 面板提供框）。
+// - 几何采用 box-sizing:border-box：1px 边框画在 box.w/box.h 内侧，不撑大所占矩形，
+//   相邻 region 仍精确相贴、互不溢出/重叠（对齐 Ext region 被布局固定为 box 尺寸的行为）。
+// - body 用 Panel 的 bodyFlex 模式（flex 纵向排列：header 固定、body flex:1 填满剩余），
+//   不再依赖硬编码 header 高度，避免 header 实际高度 ≠ 常量时内容溢出覆盖相邻区域。
+
+function findRegion(regions: ViewportRegionConfig[], r: ViewportRegionName): ViewportRegionConfig | undefined {
+  return regions.find((x) => x.region === r);
+}
+
+/**
+ * 保真映射（来源 src/widgets/layout/BorderLayout.js + Ext.Viewport）：
+ * - Ext.Viewport 是 Container(layout:'border')，el 为 div.x-viewport，
+ *   border 布局给其加 .x-border-layout-ct，区域直接作为 ct 的子节点绝对定位。
+ * - 区域渲染为 .x-panel.x-border-panel，带完整 1px 边框（border 默认 true），边框颜色由
+ *   xtheme-*.css 主题化（blue #99bbe8 / gray #d0d0d0），此处零硬编码颜色。相邻 region 相接处
+ *   各自 1px 边框拼成 2px，是原生 border 布局的既定观感；外框由最外层 region 边框拼出，根
+ *   .x-viewport 无边框（golden 的 Container border:false）。几何用 box-sizing:border-box，
+ *   边框画在 box 内侧，相邻 region 精确相贴、互不溢出。
+ * 定位数学（ct 无外层边框，ctW=width, ctH=height）：
+ *   north : left0 top0 w=ctW h=nH
+ *   south : left0 top=ctH-sH w=ctW h=sH
+ *   west  : left0 top=nH w=wW h=ctH-nH-sH
+ *   east  : left=ctW-eW top=nH w=eW h=ctH-nH-sH
+ *   center: left=wW top=nH w=ctW-wW-eW h=ctH-nH-sH
+ */
+export const Viewport = forwardRef<ViewportHandle, ViewportProps>(
+  ({ width, height, regions, testId, className }, ref) => {
+    // 双轨：prop 作初始值，句柄可运行时改写
+    const [dynRegions, setDynRegions] = useState<ViewportRegionConfig[]>(() => regions);
+    const [dynWidth, setDynWidth] = useState<number>(() => width);
+    const [dynHeight, setDynHeight] = useState<number>(() => height);
+
+    const regionsRef = useRef(dynRegions);
+    const widthRef = useRef(dynWidth);
+    const heightRef = useRef(dynHeight);
+    regionsRef.current = dynRegions;
+    widthRef.current = dynWidth;
+    heightRef.current = dynHeight;
+
+    useEffect(() => {
+      setDynRegions(regions);
+    }, [regions]);
+    useEffect(() => {
+      setDynWidth(width);
+      setDynHeight(height);
+    }, [width, height]);
+
+    const setRegions = useCallback((next: ViewportRegionConfig[]) => setDynRegions(next), []);
+    const getRegions = useCallback(() => regionsRef.current, []);
+    const addRegion = useCallback((cfg: ViewportRegionConfig) => {
+      setDynRegions((prev) => {
+        const others = prev.filter((r) => r.region !== cfg.region);
+        return [...others, cfg];
+      });
+    }, []);
+    const removeRegion = useCallback((region: ViewportRegionName) => {
+      setDynRegions((prev) => prev.filter((r) => r.region !== region));
+    }, []);
+    const updateRegion = useCallback(
+      (region: ViewportRegionName, patch: Partial<ViewportRegionConfig>) => {
+        setDynRegions((prev) => prev.map((r) => (r.region === region ? { ...r, ...patch } : r)));
+      },
+      [],
+    );
+    const resizeRegion = useCallback((region: ViewportRegionName, size: number) => {
+      setDynRegions((prev) =>
+        prev.map((r) => {
+          if (r.region !== region) return r;
+          if (region === 'east' || region === 'west') return { ...r, width: size };
+          return { ...r, height: size };
+        }),
+      );
+    }, []);
+    const setSize = useCallback((w: number, h: number) => {
+      setDynWidth(w);
+      setDynHeight(h);
+    }, []);
+    const getRegion = useCallback(
+      (region: ViewportRegionName) => findRegion(regionsRef.current, region),
+      [],
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        setRegions,
+        getRegions,
+        addRegion,
+        removeRegion,
+        updateRegion,
+        resizeRegion,
+        setSize,
+        getRegion,
+      }),
+      [setRegions, getRegions, addRegion, removeRegion, updateRegion, resizeRegion, setSize, getRegion],
+    );
+
+    const ctW = dynWidth;
+    const ctH = dynHeight;
+
+    const N = findRegion(dynRegions, 'north');
+    const S = findRegion(dynRegions, 'south');
+    const W = findRegion(dynRegions, 'west');
+    const E = findRegion(dynRegions, 'east');
+    const C = findRegion(dynRegions, 'center');
+
+  const nH = N?.height ?? 0;
+  const sH = S?.height ?? 0;
+  const wW = W?.width ?? 0;
+  const eW = E?.width ?? 0;
+  const midH = ctH - nH - sH;
+
+  const renderRegion = (cfg: ViewportRegionConfig | undefined, box: { w: number; h: number; left: number; top: number }) => {
+    if (!cfg) return null;
+    const hasHeader = !!cfg.title;
+    const content = cfg.children ?? (cfg.html !== undefined ? <span dangerouslySetInnerHTML={{ __html: cfg.html }} /> : null);
+    // 严格对齐原生 ExtJS border 布局（与仓库 BorderLayout 组件同源、与 golden 真值一致）：
+    // 每个 region 渲染为「完整 1px 边框的 .x-panel.x-border-panel」，边框颜色完全交给 @import 进来的
+    // xtheme-*.css（blue #99bbe8 / gray #d0d0d0），此处不写死任何颜色、切换主题时整圈边框自动跟随。
+    // 相邻 region 直接相接时各自 1px 边框相接成 2px，这是原生默认五区演示的真实观感（非 bug）；
+    // 外框即由最外层 region（north 顶 / south 底 / west 左 / east 右）的边框拼出，根 .x-viewport 无边框。
+    // box-sizing:border-box 使 1px 边框不撑破布局算出的 box.w/box.h。是否带框尊重 cfg.border（默认 true）。
+    const bordered = cfg.border !== false;
+    return (
+      <Panel
+        key={cfg.region}
+        cls={bordered ? 'x-border-panel' : ''}
+        width={box.w}
+        height={box.h}
+        header={hasHeader}
+        title={cfg.title}
+        border={bordered}
+        bodyFlex
+        style={{ position: 'absolute', left: box.left, top: box.top, boxSizing: 'border-box', borderRadius: 0, boxShadow: 'none' }}
+        bodyStyle={{ boxSizing: 'border-box', ...cfg.bodyStyle }}
+      >
+        {content}
+      </Panel>
+    );
+  };
+
+  return (
+    <div
+      className={['x-viewport', 'x-border-layout-ct', className].filter(Boolean).join(' ')}
+      data-testid={testId}
+      style={{ position: 'relative', width: ctW, height: ctH }}
+    >
+      {renderRegion(N, { w: ctW, h: nH, left: 0, top: 0 })}
+      {renderRegion(S, { w: ctW, h: sH, left: 0, top: ctH - sH })}
+      {renderRegion(W, { w: wW, h: midH, left: 0, top: nH })}
+      {renderRegion(E, { w: eW, h: midH, left: ctW - eW, top: nH })}
+      {renderRegion(C, { w: ctW - wW - eW, h: midH, left: wW, top: nH })}
+    </div>
+  );
+});
+
+export default Viewport;