react-extjs 0.0.1

package/src/components/dnd/DropZone.tsx

@@ -0,0 +1,166 @@
+import React, { useRef, useState } from 'react';
+import { DropTarget } from './DropTarget';
+import { resolveThemeImageUrl } from '../../util/theme';
+
+/**
+ * DropZone —— 保真复刻 Ext.dd.DropZone（含 DDTarget 行为）。
+ *
+ * DropZone 是一个「放置区」容器：拖拽源悬停时按指针位置计算插入索引（等价
+ * DropZone 的 getPosition / notifyOver 返回的落点），松手时把数据与算出的
+ * 插入索引交付给调用方（等价 onNodeDrop）。
+ *
+ * 落点反馈对齐原生 Ext.dd，由两部分组成：
+ *  1) 全局 StatusProxy 的状态图标（x-dd-drop-ok-add 加号 / x-dd-drop-nodrop 红叉，
+ *     随原生 dd.css 主题化）—— 由 DndManager 驱动，DropZone 在此声明 dropStatus。
+ *  2) 本组件渲染的「插入指示符」：一条实时跟随指针、落在待插入缝隙的落点指示线，
+ *     视觉直接复用 Ext 自带的「insert between」原生图案 drop-between.gif（原生资产，
+ *     不新增 CSS、不内联颜色、不硬编码主题色——与「零新增 CSS / 零硬编码色」铁律一致）。
+ *     原生 Ext.dd.DropZone 基类不画线，线由 TreeDropZone / GridDropZone 等子类用背景图
+ *     各自实现；本保真版沿用同一思路——用原生 gif 作插入指示，而非手写色块。
+ *
+ * 与 DragZone 配合即可实现可重排列表 / 跨列表移动（插入指示符 + 状态图标 + 松手时计算的
+ * 插入索引共同表达落点）。
+ */
+export interface DropZoneProps {
+  ddGroup?: string;
+  groups?: string[];
+  className?: string;
+  style?: React.CSSProperties;
+  /** 当前子项 id 顺序（用于插入位置语义；实际位置以 DOM 中 [data-dd-item] 为准） */
+  itemIds?: string[];
+  /** 悬停时插入索引变化回调（离开为 null），供调用方自行决定是否需要额外反馈 */
+  onInsertIndexChange?: (index: number | null) => void;
+  /** 有效放置：交付拖拽数据 + 计算出的插入索引 */
+  onDropItem?: (data: any, index: number) => void;
+  overClass?: string;
+  validate?: (data: any, e: PointerEvent) => boolean;
+  children?: React.ReactNode;
+}
+
+/** 原生「insert between」落点指示图案（等价 Ext.dd.TreeDropZone 用的 drop-between.gif）。
+ *  按当前主题解析资源目录（blue/gray→default、access→access、brand→brand），使切主题时
+ *  落点图标跟随主题、不写死 default 蓝图（对齐原生 per-theme 资源机制）。 */
+
+interface MarkerPos {
+  top: number;
+  left: number;
+  width: number;
+}
+
+/** 根据指针 Y 与 [data-dd-item] 中点比较，计算插入索引 */
+function computeInsertIndex(container: HTMLElement, clientY: number): number {
+  const items = Array.from(
+    container.querySelectorAll<HTMLElement>('[data-dd-item]'),
+  );
+  for (let i = 0; i < items.length; i++) {
+    const r = items[i].getBoundingClientRect();
+    if (clientY < r.top + r.height / 2) return i;
+  }
+  return items.length;
+}
+
+/** 在容器内相对坐标中，计算插入缝隙的指示符位置（顶/左/宽，单位 px） */
+function computeMarker(container: HTMLElement, clientY: number): MarkerPos {
+  const rect = container.getBoundingClientRect();
+  const cs = getComputedStyle(container);
+  const bl = parseFloat(cs.borderLeftWidth) || 0;
+  const br = parseFloat(cs.borderRightWidth) || 0;
+  const bt = parseFloat(cs.borderTopWidth) || 0;
+  const pl = parseFloat(cs.paddingLeft) || 0;
+  const pr = parseFloat(cs.paddingRight) || 0;
+  const pt = parseFloat(cs.paddingTop) || 0;
+
+  const items = Array.from(
+    container.querySelectorAll<HTMLElement>('[data-dd-item]'),
+  );
+  let idx = items.length;
+  for (let i = 0; i < items.length; i++) {
+    const r = items[i].getBoundingClientRect();
+    if (clientY < r.top + r.height / 2) {
+      idx = i;
+      break;
+    }
+  }
+
+  const topOf = (el: HTMLElement) => el.getBoundingClientRect().top - rect.top - bt - pt;
+  const bottomOf = (el: HTMLElement) =>
+    el.getBoundingClientRect().bottom - rect.top - bt - pt;
+
+  let top: number;
+  if (items.length === 0) top = bt + pt;
+  else if (idx <= 0) top = topOf(items[0]);
+  else if (idx >= items.length) top = bottomOf(items[items.length - 1]);
+  else top = (bottomOf(items[idx - 1]) + topOf(items[idx])) / 2;
+
+  return {
+    top,
+    left: bl + pl,
+    width: rect.width - bl - br - pl - pr,
+  };
+}
+
+export const DropZone: React.FC<DropZoneProps> = (props) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const groups = props.groups ?? (props.ddGroup ? [props.ddGroup] : ['default']);
+  const [marker, setMarker] = useState<MarkerPos | null>(null);
+
+  const handleOver = (data: any, e: PointerEvent) => {
+    const el = ref.current;
+    if (!el) return;
+    const idx = computeInsertIndex(el, e.clientY);
+    props.onInsertIndexChange?.(idx);
+    // 仅在允许放置时显示插入指示符（与 StatusProxy 状态图标保持一致）
+    const allowed = props.validate ? props.validate(data, e) : true;
+    setMarker(allowed ? computeMarker(el, e.clientY) : null);
+  };
+  const handleOut = () => {
+    props.onInsertIndexChange?.(null);
+    setMarker(null);
+  };
+
+  // 容器节点即放置区域（等价 Ext.dd.DropZone「整个 zone 元素都是放置目标」）：
+  // 直接复用 DropTarget 作为根节点，避免多套一层无类名内层 div 使容器 padding 落在放置区之外。
+  // dropStatus 让原生 StatusProxy 在允许放置时显示「加号」状态图标（x-dd-drop-ok-add），
+  // 作为可见落点反馈；视觉由原生 dd.css 提供，随主题切换，本组件零自定义 CSS。
+  // 插入指示符（落点线）复用原生 drop-between.gif，同样零新增 CSS、零硬编码色。
+  return (
+    <DropTarget
+      groups={groups}
+      innerRef={ref}
+      className={props.className}
+      style={{ position: 'relative', ...props.style }}
+      overClass={props.overClass}
+      validate={props.validate}
+      dropStatus="x-dd-drop-ok-add"
+      onDragOver={handleOver}
+      onDragOut={handleOut}
+      onDrop={(data, e) => {
+        const idx = ref.current
+          ? computeInsertIndex(ref.current, e.clientY)
+          : props.itemIds?.length ?? 0;
+        setMarker(null);
+        props.onDropItem?.(data, idx);
+        return true;
+      }}
+    >
+      {props.children}
+      {marker && (
+        <div
+          className="x-dd-insert-marker"
+          style={{
+            position: 'absolute',
+            top: marker.top,
+            left: marker.left,
+            width: marker.width,
+            height: 16,
+            backgroundImage: `url("${resolveThemeImageUrl('tree/drop-between.gif')}")`,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'left center',
+            pointerEvents: 'none',
+            zIndex: 5,
+          }}
+        />
+      )}
+    </DropTarget>
+  );
+};

package/src/components/dnd/PanelProxy.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Draggable } from './DragSource';
+import type { DropTargetReg } from './DndContext';
+
+/**
+ * PanelProxy —— 保真复刻 Ext.dd.PanelProxy（面板拖拽代理）。
+ *
+ * Ext 中 PanelProxy 用于「拖动面板标题栏移动整块面板」：拖动时显示一个面板
+ * 形状的代理（ghost），松手后把面板移动到落点（等价 PanelProxy.moveProxy /
+ * DD 的 endDrag 重定位），拖到非法区域则 repair 回弹。
+ *
+ * 本组件复用 Draggable（DragSource）作为引擎，仅额外提供：面板形 ghost 渲染
+ * 与「有效放置后按落点重定位面板」的逻辑。面板位置为相对 offsetParent 的绝对
+ * 坐标，因此需置于一个 position:relative 的容器内（如 demo 中的工作区）。
+ *
+ * 说明：底层 DD / DDTarget 的「按 id 查找拖拽数据」能力由 DndManager 统一承担，
+ * 等价于 Ext.dd.Registry，故不再单独实现 Registry 组件（内联复用）。
+ */
+export interface PanelProxyProps {
+  title: string;
+  ddGroup?: string;
+  width?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  /** 初始位置（相对 offsetParent） */
+  initial?: { left: number; top: number };
+}
+
+export const PanelProxy: React.FC<PanelProxyProps> = (props) => {
+  const [pos, setPos] = useState(props.initial ?? { left: 8, top: 8 });
+  const width = props.width ?? 170;
+
+  return (
+    <Draggable
+      ddGroup={props.ddGroup ?? 'panel'}
+      getDragData={() => ({ panel: props.title, pos })}
+      renderGhost={() => (
+        <div className="x-panel" style={{ width, opacity: 0.9 }}>
+          <div className="x-panel-header">
+            <span className="x-panel-header-text">{props.title}</span>
+          </div>
+          <div className="x-panel-body">{props.children}</div>
+        </div>
+      )}
+      onValidDrop={(
+        target: DropTargetReg | null,
+        _data: any,
+        _e: PointerEvent,
+        ghostXY?: { x: number; y: number },
+      ) => {
+        // 有效放置：把面板移动到「拖动中看到 ghost 所在处」，做到所见即所放。
+        // ghostXY 是 StatusProxy 代理层视口左上角（光标 - 抓取偏移），等价 Ext
+        // 把 moveProxy 放到 proxy.getXY()；用裸光标会让面板偏移「抓取偏移」量、
+        // 落点错位（抓取点偏下/偏右）。这里减去工作区左上角得到相对坐标，并夹紧。
+        if (target?.el && ghostXY) {
+          const r = target.el.getBoundingClientRect();
+          const left = Math.min(
+            Math.max(0, ghostXY.x - r.left),
+            Math.max(0, r.width - width),
+          );
+          const top = Math.max(0, ghostXY.y - r.top);
+          setPos({ left, top });
+        }
+      }}
+      onInvalidDrop={() => {
+        /* repair：面板保持原位，StatusProxy 回弹到 repairXY */
+      }}
+    >
+      <div
+        className={'x-panel x-dd-panel' + (props.className ? ' ' + props.className : '')}
+        style={{ position: 'absolute', left: pos.left, top: pos.top, width, ...props.style }}
+      >
+        <div className="x-panel-header x-panel-header-draggable">
+          <span className="x-panel-header-text">{props.title}</span>
+        </div>
+        <div className="x-panel-body">{props.children}</div>
+      </div>
+    </Draggable>
+  );
+};

package/src/components/dnd/PanelResizer.tsx

@@ -0,0 +1,143 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+export interface PanelResizerProps {
+  /** 面板标题（显示在 header）。 */
+  title?: string;
+  /** 初始高度（px）。 */
+  initialHeight?: number;
+  /** 最小高度（px）。 */
+  minHeight?: number;
+  /** 最大高度（px）。 */
+  maxHeight?: number;
+  /** 面板主体内容。 */
+  children?: React.ReactNode;
+  /** 附加 className。 */
+  className?: string;
+  /** 拖拽开始时回调，参数为起始高度。 */
+  onResizeStart?: (height: number) => void;
+  /** 拖拽过程中回调，参数为当前高度。 */
+  onResize?: (height: number) => void;
+  /** 拖拽结束时回调，参数为最终高度。 */
+  onResizeEnd?: (height: number) => void;
+}
+
+const clamp = (v: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, v));
+
+/**
+ * 面板边缘缩放（等价 Ext.ux.PanelResizer）。
+ *
+ * 在面板底部放置一条 resize 句柄，复用 Ext.dd.DragTracker 的拖拽即改变
+ * 高度的语义：newHeight = startHeight + deltaY（句柄在底部、面板顶部锚定，
+ * 向下拖 = 变高、向上拖 = 变矮，方向与拖动一致）。支持 minHeight / maxHeight
+ * 约束与 onResizeStart / onResize / onResizeEnd 回调。
+ */
+export const PanelResizer: React.FC<PanelResizerProps> = (props) => {
+  const {
+    title = '面板',
+    initialHeight = 160,
+    minHeight = 60,
+    maxHeight = 320,
+    children,
+    className,
+    onResizeStart,
+    onResize,
+    onResizeEnd,
+  } = props;
+
+  const [height, setHeight] = useState(initialHeight);
+  const [active, setActive] = useState(false);
+  const startRef = useRef({ y: 0, h: initialHeight });
+  const handleRef = useRef<HTMLDivElement | null>(null);
+
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      startRef.current = { y: e.clientY, h: height };
+      setActive(true);
+      handleRef.current?.setPointerCapture(e.pointerId);
+      onResizeStart?.(height);
+    },
+    [height, onResizeStart],
+  );
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!active) return;
+      const deltaY = e.clientY - startRef.current.y;
+      const next = clamp(
+        startRef.current.h + deltaY,
+        minHeight,
+        maxHeight,
+      );
+      setHeight(next);
+      onResize?.(next);
+    },
+    [active, minHeight, maxHeight, onResize],
+  );
+
+  const endDrag = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!active) return;
+      setActive(false);
+      try {
+        handleRef.current?.releasePointerCapture(e.pointerId);
+      } catch {
+        /* 句柄可能已失焦 */
+      }
+      onResizeEnd?.(height);
+    },
+    [active, height, onResizeEnd],
+  );
+
+  const cls = ['x-panel', className].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={cls}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        height,
+        boxSizing: 'border-box',
+      }}
+    >
+      <div className="x-panel-header">
+        <span className="x-panel-header-text">{title}</span>
+      </div>
+      <div className="x-panel-body" style={{ flex: 1, overflow: 'auto' }}>
+        {children}
+      </div>
+      <div
+        className="x-panel-footer"
+        style={{
+          // 对齐原生 Ext.ux.PanelResizer：原生用在 frame:true 面板上，底边框由 .x-panel-bc 画，
+          // 且 framed 面板的 body 无边框（ext-all.css:3797）。我们的简化面板是 non-framed，
+          // body 自身已带 1px border-bottom（= 面板底边框，蓝色 #99bbe8），所以 footer 不能再画线，
+          // 否则会与 body 底边框叠成「两条线 + 悬浮 icon」。
+          // 这里让 footer 脱离文档流、只承载 grip：grip（原生 5px, panel-handle.gif center bottom）
+          // 落在面板最底部，其手柄正好压在 body 的那条底边框上 —— 一条线 + 压在在线的手柄。
+          // 零新增 CSS、零硬编码色（仅复用原生 panel-handle.gif，由 PanelResizer.css 提供）。
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: 5,
+        }}
+      >
+        <div
+          ref={handleRef}
+          className="x-panel-resize"
+          style={{ top: 0 }}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PanelResizer;

package/src/components/dnd/Portal.tsx

@@ -0,0 +1,254 @@
+import React, { Fragment, useRef, useState } from 'react';
+import { DropTarget } from './DropTarget';
+import { Draggable } from './DragSource';
+import { ColumnLayout } from '../ColumnLayout';
+
+/**
+ * Portal / PortalColumn / Portlet —— 保真复刻 Ext.ux.Portal / PortalColumn / Portlet。
+ *
+ * 等价关系：
+ *  - Portlet = Ext.ux.Portlet（Ext.Panel + draggable:true → Ext.Panel.DD）→ 本组件的
+ *    `Draggable`（等价 DragSource）包裹一块 .x-portlet 面板。
+ *  - Portal = Ext.ux.Portal，内含 `Portal.DropZone`（继承 Ext.dd.DropTarget）。本组件
+ *    把「整个门户画布」注册为一个 DropTarget，并在拖拽悬停时：
+ *      1) 按指针 X 在 [data-dd-column] 网格中选目标列（等价 DropZone 的 columnX 选择）；
+ *      2) 按指针 Y 与列内 [data-dd-item] 中点比较算插入位置（等价 getPosition）；
+ *      3) 在该位置渲染实时插入占位 .x-portal-placeholder（等价 dd.proxy.moveProxy 的
+ *         实时占位框）；松手时把 Portlet 从源列/位移动到目标列/位。
+ *  - PortalColumn = Ext.ux.PortalColumn，纯承载容器（自身无 dd 代码）。列布局已抽离为独立
+ *    ColumnLayout 组件（src/components/ColumnLayout.tsx），精确复刻原生
+ *    Ext.layout.ColumnLayout 的两遍 pass 算法（固定宽列先扣、columnWidth 直接乘剩余宽、
+ *    列 float:left），本组件只复用它，不再内联布局计算、不依赖任何独立 css 文件。
+ *
+ * 自动滚动（Ext.dd.ScrollManager）在本保真中暂未实现，因演示面板均在视口内即可完成
+ * 跨列拖拽；如需长列表可后续补充。
+ */
+
+export interface PortletData {
+  id: string;
+  title: string;
+  body?: React.ReactNode;
+}
+
+export interface PortalColumnData {
+  id: string;
+  items: PortletData[];
+  /** 列宽占比（等价 Ext.layout.ColumnLayout 的 columnWidth 分数）。不传则等宽（1/n）。 */
+  columnWidth?: number;
+}
+
+export interface PortalProps {
+  ddGroup?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** 初始列与 Portlet（仅用于首次初始化，后续状态由组件内部维护） */
+  columns: PortalColumnData[];
+  /** 放置后回调（等价 DropZone 的 notifyDrop 后的刷新） */
+  onChange?: (columns: PortalColumnData[]) => void;
+}
+
+export interface PortletProps {
+  data: PortletData;
+  groups: string[];
+  /** 无效放置（拖到门户外）回调，回弹动画由 StatusProxy 负责 */
+  onInvalidDrop?: (data: any, e: PointerEvent) => void;
+}
+
+export const Portlet: React.FC<PortletProps> = ({
+  data,
+  groups,
+  onInvalidDrop,
+}) => (
+  <Draggable
+    groups={groups}
+    getDragData={() => ({ portletId: data.id })}
+    onInvalidDrop={onInvalidDrop}
+  >
+    {/* 等价原生 Ext.ux.Portlet = Ext.Panel + draggable：外观完全走原生 .x-panel /
+        .x-panel-header / .x-panel-body（主题蓝标题由 xtheme 提供），不再自定义卡片样式。
+        .x-portlet 仅保留原生 Portal.css 的 margin-bottom:10px（已在 docs/index.html 链接）。 */}
+    <div className="x-panel x-portlet" data-dd-item data-id={data.id}>
+      <div className="x-panel-header x-panel-header-draggable">
+        <span className="x-panel-header-text">{data.title}</span>
+      </div>
+      <div className="x-panel-body">{data.body}</div>
+    </div>
+  </Draggable>
+);
+
+const Placeholder: React.FC<{ title: string }> = ({ title }) => (
+  // 等价原生 dd.proxy.moveProxy 的实时占位框；视觉由 ext-theme.css 的 .x-portal-placeholder /
+  // .x-portal-placeholder-text 提供（颜色随 xtheme 切换、零硬编码），不再内联硬编码灰阶。
+  <div className="x-portal-placeholder" style={{ marginBottom: 10 }}>
+    <div className="x-portal-placeholder-text">{title}</div>
+  </div>
+);
+
+/** 按指针 X 在 [data-dd-column] 中选列：横向命中优先，否则取最近列（等价 columnX 网格） */
+function pickColumn(root: HTMLElement, clientX: number): HTMLElement | null {
+  const cols = Array.from(
+    root.querySelectorAll<HTMLElement>('[data-dd-column]'),
+  );
+  if (cols.length === 0) return null;
+  let best: HTMLElement | null = null;
+  let bestDist = Infinity;
+  for (const c of cols) {
+    const r = c.getBoundingClientRect();
+    if (clientX >= r.left && clientX <= r.right) return c;
+    const center = r.left + r.width / 2;
+    const dist = Math.abs(clientX - center);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = c;
+    }
+  }
+  return best;
+}
+
+/** 按指针 Y 与列内 [data-dd-item] 中点比较，计算插入索引 */
+function computeInsertIndexInColumn(
+  colEl: HTMLElement,
+  clientY: number,
+): number {
+  const items = Array.from(
+    colEl.querySelectorAll<HTMLElement>('[data-dd-item]'),
+  );
+  for (let i = 0; i < items.length; i++) {
+    const r = items[i].getBoundingClientRect();
+    if (clientY < r.top + r.height / 2) return i;
+  }
+  return items.length;
+}
+
+/** 把 source 列/位移动到 target 列/位（同列前移时修正索引，对齐 Ext.dd.DropZone 行为） */
+function moveItem(
+  cols: PortalColumnData[],
+  source: { colId: string; index: number },
+  target: { colId: string; index: number },
+): PortalColumnData[] {
+  const result = cols.map((c) => ({ id: c.id, items: [...c.items] }));
+  const srcCol = result.find((c) => c.id === source.colId);
+  if (!srcCol) return cols;
+  const [moved] = srcCol.items.splice(source.index, 1);
+  if (!moved) return cols;
+  const tgtCol = result.find((c) => c.id === target.colId) ?? srcCol;
+  let tIdx = target.index;
+  if (source.colId === target.colId && source.index < target.index) {
+    tIdx = target.index - 1;
+  }
+  tgtCol.items.splice(tIdx, 0, moved);
+  return result;
+}
+
+interface DropPos {
+  colId: string;
+  index: number;
+  title: string;
+}
+
+export const Portal: React.FC<PortalProps> = (props) => {
+  const groups = props.ddGroup ? [props.ddGroup] : ['portal'];
+  const [columns, setColumns] = useState<PortalColumnData[]>(() =>
+    props.columns.map((c) => ({ id: c.id, items: [...c.items] })),
+  );
+  const [drop, setDrop] = useState<DropPos | null>(null);
+  const dropRef = useRef<DropPos | null>(null);
+  dropRef.current = drop;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const n = columns.length;
+
+  const findSource = (pid: string): { colId: string; index: number } | null => {
+    for (const col of columns) {
+      const idx = col.items.findIndex((i) => i.id === pid);
+      if (idx >= 0) return { colId: col.id, index: idx };
+    }
+    return null;
+  };
+
+  const handleOver = (data: any, e: PointerEvent) => {
+    const root = rootRef.current;
+    if (!root) return;
+    const colEl = pickColumn(root, e.clientX);
+    if (!colEl) {
+      setDrop(null);
+      return;
+    }
+    const colId = colEl.getAttribute('data-id') || '';
+    const index = computeInsertIndexInColumn(colEl, e.clientY);
+    const pid = data?.portletId as string | undefined;
+    let title = '';
+    if (pid) {
+      for (const col of columns) {
+        const it = col.items.find((i) => i.id === pid);
+        if (it) {
+          title = it.title;
+          break;
+        }
+      }
+    }
+    setDrop({ colId, index, title });
+  };
+
+  const handleOut = () => setDrop(null);
+
+  const handleDrop = (data: any, _e: PointerEvent): boolean => {
+    const pid = data?.portletId as string | undefined;
+    const src = pid ? findSource(pid) : null;
+    const d = dropRef.current;
+    setDrop(null);
+    if (!src || !d) return false;
+    const next = moveItem(columns, src, d);
+    setColumns(next);
+    props.onChange?.(next);
+    return true;
+  };
+
+  return (
+    <div
+      className={['x-portal', props.className].filter(Boolean).join(' ')}
+      ref={rootRef}
+      style={{ padding: 4, ...props.style }}
+    >
+      <DropTarget
+        groups={groups}
+        className="x-portal-canvas"
+        onDragOver={handleOver}
+        onDragOut={handleOut}
+        onDrop={handleDrop}
+        style={{ position: 'relative', minHeight: 240 }}
+      >
+        <ColumnLayout
+          items={columns.map((col, i) => {
+            const active = drop?.colId === col.id;
+            return {
+              // 等价原生 item.columnWidth（比例，和为 1）；未指定则等宽 1/n
+              columnWidth: col.columnWidth ?? 1 / n,
+              // 列视觉（背景/边框/圆角/内边距/minHeight）由 ext-theme.css 的 .x-portal-column 提供；
+              // 拖拽悬停高亮经 .x-portal-column-active 主题类（颜色随 xtheme 切换、零硬编码），
+              // 不再内联硬编码灰阶覆盖主题蓝（此前内联色会盖掉主题蓝且失去主题切换能力）。
+              cls: active ? 'x-portal-column x-portal-column-active' : 'x-portal-column',
+              dataId: col.id,
+              // 列间距由原生 margins 提供（第一遍/第二遍都会扣减，确保总宽不溢出）
+              margins: i < n - 1 ? '0 14 0 0' : '0',
+              node: (
+                <>
+                  {drop && drop.colId === col.id && drop.index === 0 && (
+                    <Placeholder title={drop.title} />
+                  )}
+                  {col.items.map((p, idx) => (
+                    <Fragment key={p.id}>
+                      <Portlet data={p} groups={groups} />
+                      {drop && drop.colId === col.id && drop.index === idx + 1 && (
+                        <Placeholder title={drop.title} />
+                      )}
+                    </Fragment>
+                  ))}
+                </>
+              ),
+            };
+          })}
+        />
+      </DropTarget>
+    </div>
+  );
+};