react-extjs 0.0.1

package/src/components/CardLayout.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+
+export interface CardItem {
+  /** 卡片标题（渲染为卡片自身 .x-panel-header）。可空表示纯内容卡片。 */
+  title?: string;
+  /** 直接 HTML 内容（对齐 Ext Panel.html 直渲）。 */
+  html?: string;
+  children?: React.ReactNode;
+  /** 卡片面板是否带边框。默认 true（对齐 Ext 默认 Panel.border:true，会与根面板形成双层边框）；设 false 可消除内层框，呈现官方 card 示例 defaults:{border:false} 的铺满单层观感。 */
+  border?: boolean;
+}
+
+export interface CardLayoutProps {
+  /** 根 Panel 总宽（等同 Ext width）。默认 300。 */
+  width?: number | string;
+  /** 根 Panel 总高。默认 200。 */
+  height?: number | string;
+  /** 卡片集合，同一时刻仅 activeIndex 指向的卡片可见。 */
+  items: CardItem[];
+  /** 受控激活索引。 */
+  activeIndex?: number;
+  /** 非受控默认激活索引。默认 0。 */
+  defaultActiveIndex?: number;
+  /** 根 body 内边距（对齐 Ext bodyStyle padding）。默认 8。 */
+  bodyPadding?: number | string;
+  /** 根面板是否带边框。默认 true（对齐 Ext 默认 Panel.border:true，会与卡片框形成双层边框）；设 false 可消除外层框，呈现官方 card 示例"卡片自身为唯一边框"的铺满单层观感。 */
+  border?: boolean;
+  testId?: string;
+  className?: string;
+}
+
+// 实测 golden 常量（content-box 模型，与 Ext 一致）：
+// - 根 .x-panel：border 0，offset = width/height
+// - 根 body（x-panel-body-noheader）：border 1px 每边 + padding 8 每边
+//   → body 内容高 = height - 2 - 2*pad；active 卡片 height:100% 即撑满此内容区
+// - 卡片采用 flex 列布局：header 取自然高度，body flex:1 精确填满剩余空间，
+//   不再依赖硬编码 header 高度，避免 header 实际高度 ≠ 常量时内容溢出、根 body
+//   overflow:hidden 裁掉卡片下边框（即"下边框不见了"的原判因）。
+const BODY_BORDER = 1;
+const DEFAULT_PAD = 8;
+
+/**
+ * 保真映射（来源 Ext.layout.CardLayout + Ext.Panel）：
+ * - 根 Panel 无 header，body 为 .x-panel-body.x-panel-body-noheader（bodyStyle padding 落在此）。
+ * - 每张卡片是 body 直接子节点 .x-panel（带自身 header/body，无 noborder，故 header 26px）。
+ * - activeItem 可见（display:block），其余加 .x-hide-display（display:none!important）。
+ * - CardLayout.setItemSize 把 active 卡片设为 body 内容尺寸，故 active 卡片 width/height:100% 撑满。
+ * 渲染注意：纯 CSS 下父固定高度不会自动撑开 bwrap/body，故显式 content-box 高度对齐 golden。
+ */
+export const CardLayout: React.FC<CardLayoutProps> = ({
+  width = 300,
+  height = 200,
+  items,
+  activeIndex,
+  defaultActiveIndex = 0,
+  bodyPadding = DEFAULT_PAD,
+  border = true,
+  testId,
+  className,
+}) => {
+  const [internal, setInternal] = useState(defaultActiveIndex);
+  const active = activeIndex ?? internal;
+  const setActive = (i: number) => {
+    if (activeIndex === undefined) setInternal(i);
+  };
+
+  const padNum = typeof bodyPadding === 'number' ? bodyPadding : DEFAULT_PAD;
+  const rootH = typeof height === 'number' ? height : 200;
+  const bodyContentH = rootH - (border ? BODY_BORDER * 2 : 0) - padNum * 2;
+  const rootNoBorder = border === false;
+
+  return (
+    <div
+      className={['x-panel', rootNoBorder ? 'x-panel-noborder' : '', className].filter(Boolean).join(' ')}
+      data-testid={testId}
+      style={{ width, height }}
+    >
+      <div className="x-panel-bwrap" style={{ height: '100%' }}>
+        <div
+          className={['x-panel-body', 'x-panel-body-noheader', rootNoBorder ? 'x-panel-body-noborder' : ''].filter(Boolean).join(' ')}
+          style={{ padding: bodyPadding, height: bodyContentH }}
+        >
+          {items.map((it, i) => {
+            const isActive = i === active;
+            const noBorder = it.border === false;
+            return (
+              <div
+                key={i}
+                className={['x-panel', isActive ? '' : 'x-hide-display', noBorder ? 'x-panel-noborder' : ''].filter(Boolean).join(' ')}
+                style={{ width: '100%', height: '100%' }}
+              >
+                <div className="x-panel-bwrap" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                  {it.title !== undefined && (
+                    <div
+                      className={['x-panel-header', noBorder ? 'x-panel-header-noborder' : ''].filter(Boolean).join(' ')}
+                      unselectable="on"
+                      onClick={() => setActive(i)}
+                    >
+                      <span className="x-panel-header-text">{it.title}</span>
+                    </div>
+                  )}
+                  <div
+                    className={['x-panel-body', it.title === undefined ? 'x-panel-body-noheader' : '', noBorder ? 'x-panel-body-noborder' : ''].filter(Boolean).join(' ')}
+                    style={{ boxSizing: 'border-box', flex: 1, minHeight: 0, overflow: 'auto' }}
+                  >
+                    {it.html !== undefined ? (
+                      <span dangerouslySetInnerHTML={{ __html: it.html }} />
+                    ) : (
+                      it.children
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardLayout;

package/src/components/CenterLayout.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+export interface CenterItem {
+  /** 面板标题（渲染 x-panel-header）。省略则无 header、整高即 body。 */
+  title?: string;
+  /** 主体内容（纯文本/HTML 字符串）；也可通过 children 渲染任意 React 节点。 */
+  html?: string;
+  children?: React.ReactNode;
+  /** 透传到 .x-panel-body 的 inline style */
+  bodyStyle?: React.CSSProperties;
+  /**
+   * 子面板固定宽（px 或百分比字符串，如 300 / '75%'）。
+   * 指定后子面板宽度锁定为该值，并借 `.ux-layout-center-item{margin:0 auto}` 在其容器内水平居中；
+   * 省略则子面板铺满容器宽（此时 margin 自动失效，无居中效果）——对齐 Ext item.width 逻辑。
+   */
+  width?: number | string;
+  /**
+   * 允许子面板按内容自定高（不强制铺满容器高）。对齐 Ext `autoHeight:true`。
+   * 默认 false：子面板高度 = 容器内容区高（FitLayout 行为）。
+   */
+  autoHeight?: boolean;
+}
+
+export interface CenterLayoutProps {
+  /** 容器总宽（px），对齐 Ext.Container width，也是 fit 子面板目标宽。 */
+  width: number;
+  /** 容器总高（px），对齐 Ext.Container height，也是 fit 子面板目标高。 */
+  height: number;
+  /** 唯一子面板配置（CenterLayout 仅容纳一个子项，继承自 FitLayout）。 */
+  item: CenterItem;
+  /** 数据测试 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.ux.layout.CenterLayout（Ext 3.2.1，UX 扩展，继承 FitLayout）。
+ *
+ * DOM 对齐 CenterLayout.setItemSize 实测真值：
+ *  - 容器根加 `ux-layout-center` 类（其 CSS 令 `.ux-layout-center .x-panel-body{text-align:center}`）；
+ *  - 唯一的子面板加 `ux-layout-center-item` 类（其 CSS `.ux-layout-center-item{margin:0 auto;text-align:left}`
+ *    令带固定宽的块级子面板在容器内水平居中）；
+ *  - setItemSize：若 item.width 有值，则 size.width = item.width，再 item.setSize(size)，
+ *    故子面板宽 = item.width（居中），高 = 容器内容区高（Fit 行为），autoHeight:true 时高交还内容自适应。
+ *
+ * 说明：CenterLayout 仅做**水平**居中（Ext 原版即如此，高度方向按 Fit 铺满/自适），并非垂直居中。
+ * 专属两条 UX CSS 已并入 src/styles/ext-theme.css（源自 examples/ux/css/CenterLayout.css）。
+ */
+export function CenterLayout({
+  width,
+  height,
+  item,
+  testId,
+  style,
+  className = '',
+}: CenterLayoutProps) {
+  const rootStyle: React.CSSProperties = { width, height, ...style };
+  const headerH = item.title ? HEADER_H : 0;
+  const bodyH = height - headerH;
+  const itemW = item.width != null ? item.width : width;
+  const itemH = item.autoHeight ? undefined : bodyH;
+
+  return (
+    <div
+      data-testid={testId}
+      className={['center-layout-root', 'ux-layout-center', className].filter(Boolean).join(' ')}
+      style={rootStyle}
+    >
+      <div
+        className={['x-panel', 'ux-layout-center-item'].join(' ')}
+        style={{ width: itemW, height: itemH }}
+      >
+        {item.title && (
+          <div className="x-panel-header x-unselectable" unselectable="on">
+            <span className="x-panel-header-text">{item.title}</span>
+          </div>
+        )}
+        <div className="x-panel-bwrap">
+          <div
+            className={['x-panel-body', !item.title && 'x-panel-body-noheader'].filter(Boolean).join(' ')}
+            style={{ height: item.autoHeight ? undefined : bodyH, ...item.bodyStyle }}
+          >
+            {item.html != null ? item.html : item.children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CenterLayout;

package/src/components/CheckboxGroup.tsx

@@ -0,0 +1,200 @@
+import { forwardRef, useImperativeHandle, useState, useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
+
+/**
+ * Ext.form.CheckboxGroup 保真复刻（来源 src/widgets/form/CheckboxGroup.js）
+ *
+ * 布局契约（与 RadioGroup 完全同构，保证两类选择组视觉一致）：
+ * - 外层 x-form-item 提供与所有表单字段一致的标签列与左偏移（fieldLabel/labelWidth/labelAlign）
+ * - 内容区 div.x-form-element（padding-left = labelWidth + labelPad）
+ * - 内层 div.x-form-check-group 用 flex 排布（gap:8，垂直居中）：
+ *     > columns='auto' 或 1 → 横向单行（flex nowrap）
+ *     > columns>1 → 横向多列网格（flex wrap，每列 width = calc(100/cols% - 8px)）
+ * - 每项直接渲染为 span.x-form-check-wrap（input.x-form-checkbox + label.x-form-cb-label），
+ *   不再套 x-form-item.x-hide-label 空标签列（旧实现导致每项缩进 105px、间距与 Radio 不一致）
+ *
+ * 行为契约（对齐 Ext CheckboxGroup）：
+ * - value/defaultValue 为已勾选的 inputValue 数组（初始态）
+ * - 组内的 checkbox 互不排斥（各自独立勾选，区别于 RadioGroup）
+ */
+export interface CheckboxGroupItem {
+  boxLabel?: ReactNode;
+  inputValue?: string;
+  name?: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export interface CheckboxGroupProps {
+  /** 列数：数字（如 2）或 'auto'（每项一列）。默认 'auto'（对齐 Ext 横向单行）。 */
+  columns?: number | 'auto';
+  /** 子项配置数组。 */
+  items: CheckboxGroupItem[];
+  /** 已勾选的 inputValue 数组（初始态，受控可选）。 */
+  value?: string[];
+  /** 默认勾选的 inputValue 数组。 */
+  defaultValue?: string[];
+  /** 标签（对齐 Ext fieldLabel）；提供后作为「自带 label 的整字段」直接放入 FormPanel，无需再包 FormField。 */
+  fieldLabel?: ReactNode;
+  /** 标签对齐方式，默认 'left'（对齐 RadioGroup / FormLayout）。 */
+  labelAlign?: 'left' | 'top' | 'right';
+  /** 标签宽度，默认 100（对齐 RadioGroup / FormLayout）。 */
+  labelWidth?: number;
+  /** 标签与内容区间距，默认 5。 */
+  labelPad?: number;
+  /** 标签后缀，默认 ':'。 */
+  labelSeparator?: string;
+  /** 隐藏标签（仍保留标签列宽，对齐 Ext hideLabel）。 */
+  hideLabel?: boolean;
+  /** 组内内容区宽度（对齐 Ext field width）；不传则按内容自适应，与其它表单字段对齐时显式传入。 */
+  width?: number;
+  className?: string;
+  testId?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * 运行时句柄（对齐 Ext.form.CheckboxGroup 动态增删改选项）：
+ * - addItem(item, index?)：在末尾（或指定位置）插入一个 checkbox 项
+ * - removeItem(index)：删除指定位置的项
+ * - updateItem(index, partial)：就地更新某项的 boxLabel/checked/disabled 等
+ * - getItems()：读当前项数组
+ */
+export interface CheckboxGroupHandle {
+  addItem: (item: CheckboxGroupItem, index?: number) => void;
+  removeItem: (index: number) => void;
+  updateItem: (index: number, partial: Partial<CheckboxGroupItem>) => void;
+  getItems: () => CheckboxGroupItem[];
+}
+
+export const CheckboxGroup = forwardRef<CheckboxGroupHandle, CheckboxGroupProps>(
+  ({
+  columns = 'auto',
+  items,
+  value,
+  defaultValue,
+  fieldLabel,
+  labelAlign = 'left',
+  labelWidth = 100,
+  labelPad = 5,
+  labelSeparator = ':',
+  hideLabel,
+  width = 300,
+  className,
+  testId,
+  style,
+}: CheckboxGroupProps, ref) => {
+  // 单源数组法：items 为唯一真相，句柄直接基于 prev 纯函数改写
+  const [dynItems, setDynItems] = useState<CheckboxGroupItem[]>(() => items);
+  const itemsRef = useRef(dynItems);
+  itemsRef.current = dynItems;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      addItem: (item: CheckboxGroupItem, index?: number) =>
+        setDynItems((prev) => {
+          const next = [...prev];
+          if (index === undefined || index >= next.length) next.push(item);
+          else next.splice(index, 0, item);
+          return next;
+        }),
+      removeItem: (index: number) => setDynItems((prev) => prev.filter((_, i) => i !== index)),
+      updateItem: (index: number, partial: Partial<CheckboxGroupItem>) =>
+        setDynItems((prev) => prev.map((it, i) => (i === index ? { ...it, ...partial } : it))),
+      getItems: () => itemsRef.current,
+    }),
+    [],
+  );
+
+  useEffect(() => setDynItems(items), [items]);
+
+  // 布局对齐 RadioGroup：默认横向单行（columns='auto'/1），columns>1 时横向多列网格。
+  const cols = columns === 'auto' ? 1 : Number(columns) > 1 ? Number(columns) : 1;
+  const multi = cols > 1;
+
+  const initialChecked = (it: CheckboxGroupItem) => {
+    if (it.checked !== undefined) return it.checked;
+    if (value && it.inputValue !== undefined) return value.includes(it.inputValue);
+    if (defaultValue && it.inputValue !== undefined) return defaultValue.includes(it.inputValue);
+    return it.defaultChecked ?? false;
+  };
+
+  // 对齐 RadioGroup / FormLayout：自带 label 的整字段，直接放入 FormPanel。
+  // 外层 x-form-item 提供与所有表单字段一致的标签列与左偏移，width 作用于内容区。
+  const isTop = labelAlign === 'top';
+  const labelStyle: CSSProperties = isTop ? { width: 'auto' } : { width: `${labelWidth}px` };
+  const itemClass = ['x-form-item', `x-form-label-${labelAlign}`].filter(Boolean).join(' ');
+
+  // 内层容器：与 RadioGroup 完全同构的 flex 布局（gap 8 / 垂直居中）。
+  const groupStyle: CSSProperties = {
+    display: 'flex',
+    flexWrap: multi ? 'wrap' : 'nowrap',
+    gap: 8,
+    alignItems: 'center',
+    ...(width != null ? { width } : {}),
+    ...style,
+  };
+
+  const rows = dynItems.map((it, i) => <CheckboxRow key={i} item={it} checked={initialChecked(it)} />);
+
+  return (
+    <div className={[itemClass, className].filter(Boolean).join(' ')} tabIndex={-1}>
+      {!hideLabel && fieldLabel != null && (
+        <label style={labelStyle} className="x-form-item-label">
+          {fieldLabel}
+          {labelSeparator}
+        </label>
+      )}
+      <div
+        className="x-form-element"
+        style={isTop ? { paddingLeft: 0 } : { paddingLeft: `${labelWidth + labelPad}px` }}
+      >
+        <div className="x-form-check-group" data-testid={testId} style={groupStyle}>
+          {multi
+            ? rows.map((r, i) => (
+                <div key={i} style={{ width: `calc(${100 / cols}% - 8px)` }}>
+                  {r}
+                </div>
+              ))
+            : rows}
+        </div>
+      </div>
+      <div className="x-form-clear-left" />
+    </div>
+  );
+});
+
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+/** 单项：与 Radio 完全同构的 span.x-form-check-wrap（input + label），由外层 flex 容器统一排布。 */
+function CheckboxRow({ item, checked }: { item: CheckboxGroupItem; checked: boolean }) {
+  const [internal, setInternal] = useState(checked);
+  const isChecked = item.checked !== undefined ? item.checked : internal;
+  const id = item.name ? `${item.name}-${item.inputValue ?? ''}` : undefined;
+
+  return (
+    <span className={['x-form-check-wrap', item.disabled ? 'x-item-disabled' : ''].filter(Boolean).join(' ')}>
+      <input
+        id={id}
+        name={item.name}
+        type="checkbox"
+        className="x-form-field x-form-checkbox"
+        value={item.inputValue}
+        checked={isChecked}
+        disabled={item.disabled}
+        onChange={(e) => {
+          const v = e.target.checked;
+          if (item.checked === undefined) setInternal(v);
+          item.onChange?.(v);
+        }}
+      />
+      {item.boxLabel != null && (
+        <label htmlFor={id} className="x-form-cb-label">
+          {item.boxLabel}
+        </label>
+      )}
+    </span>
+  );
+}

package/src/components/ColorMenu.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { createPortal } from 'react-dom';
+import { ColorPalette, COLORS } from './ColorPalette';
+
+export interface ColorMenuProps {
+  /** 是否展开。受控，由触发器（如按钮）管理。 */
+  open?: boolean;
+  /** 触发元素（用于定位浮层到其下方，对齐 Ext 菜单定位）。 */
+  anchorRef?: React.RefObject<HTMLElement>;
+  /** 初始选中色（6 位 hex，可带 #）。 */
+  value?: string;
+  /** 自定义色板（覆盖默认 40 色），对齐 Ext.ColorPalette.colors。 */
+  colors?: string[];
+  /** 选中回调，参数为大写 6 位 hex（不带 #）。 */
+  onSelect?: (color: string) => void;
+  /** 关闭回调（外部点击 / Esc / 选中后）。 */
+  onClose?: () => void;
+}
+
+const norm = (c?: string): string | null => {
+  if (!c) return null;
+  const s = c.trim();
+  if (!/^#?[0-9a-fA-F]{6}$/.test(s)) return null;
+  return s.replace('#', '').toUpperCase();
+};
+
+export interface ColorMenuHandle {
+  /** 替换整个色板 */
+  setColors: (colors: string[]) => void;
+  /** 追加一个色（index 省略则末尾） */
+  addColor: (hex: string, index?: number) => void;
+  /** 删除指定色（大小写/# 无关） */
+  removeColor: (hex: string) => void;
+  /** 读取当前色板 */
+  getColors: () => string[];
+  /** 运行时选中某色（大写 6 位 hex） */
+  select: (color: string) => void;
+  /** 读取当前选中色 */
+  getSelected: () => string | null;
+  /** 打开浮层 */
+  open: () => void;
+  /** 关闭浮层 */
+  close: () => void;
+  /** 是否展开 */
+  isOpen: () => boolean;
+}
+
+/**
+ * ColorMenu —— 保真复刻 Ext.menu.ColorMenu（src/widgets/menu/ColorMenu.js）。
+ *
+ * 保真契约（DOM/class 严格对齐 golden 实测）：
+ *  - 根：x-menu x-menu-floating x-layer x-color-menu x-menu-plain x-menu-nosep
+ *        （plain:true → x-menu-plain；showSeparator:false → x-menu-nosep；cls:'x-color-menu'）
+ *  - a.x-menu-focus（隐藏聚焦元素）+ ul.x-menu-list（padding 2px）
+ *  - li.x-menu-list-item（padding 上下 1px）→ 直接子 div.x-color-palette（无 a.x-menu-item 包裹，
+ *    与 Ext Menu 的组件型 item 直接 render 进 li 一致）
+ *  - 调色板复用 ColorPalette（40 色，顺序与 Ext 一致），选中后 hideOnClick→onClose。
+ *  - 浮层用 Portal 渲染到 body（对齐 Ext 菜单浮动到 body），fixed 定位到触发器下方，
+ *    整数坐标（对齐 Ext.Layer）。
+ *
+ * 全部样式来自 ext-all.css，零新增 CSS 契约破坏。
+ */
+export const ColorMenu = forwardRef<ColorMenuHandle, ColorMenuProps>(function ColorMenu(
+  { open, anchorRef, value, colors, onSelect, onClose },
+  ref,
+) {
+  // 双轨：prop 初始化 + 句柄运行时改写 + effect 同步
+  const [dynOpen, setDynOpen] = useState<boolean>(open ?? false);
+  const [dynValue, setDynValue] = useState<string | undefined>(value);
+  const [dynColors, setDynColors] = useState<string[]>(colors ?? COLORS);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
+
+  const openRef = useRef(dynOpen);
+  const selRef = useRef<string | null>(norm(dynValue));
+  const colorsRef = useRef<string[]>(dynColors);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setColors: (c) => {
+        colorsRef.current = c;
+        setDynColors(c);
+      },
+      addColor: (hex, index) => {
+        const up = norm(hex) ?? hex.toUpperCase().replace('#', '');
+        const cur = colorsRef.current;
+        const next = [...cur];
+        if (index == null || index < 0 || index > next.length) next.push(up);
+        else next.splice(index, 0, up);
+        colorsRef.current = next;
+        setDynColors(next);
+      },
+      removeColor: (hex) => {
+        const target = norm(hex);
+        const cur = colorsRef.current ?? [];
+        const next = cur.filter((c) => norm(c) !== target);
+        colorsRef.current = next;
+        setDynColors(next);
+      },
+      getColors: () => colorsRef.current ?? [],
+      select: (color) => {
+        selRef.current = norm(color);
+        setDynValue(color);
+      },
+      getSelected: () => selRef.current,
+      open: () => setDynOpen(true),
+      close: () => setDynOpen(false),
+      isOpen: () => openRef.current,
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    openRef.current = dynOpen;
+  }, [dynOpen]);
+
+  useEffect(() => {
+    if (open !== undefined) setDynOpen(open);
+  }, [open]);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      selRef.current = norm(value);
+      setDynValue(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (colors !== undefined) {
+      colorsRef.current = colors;
+      setDynColors(colors);
+    }
+  }, [colors]);
+
+  useEffect(() => {
+    if (!dynOpen) {
+      setCoords(null);
+      return;
+    }
+    const el = anchorRef?.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      setCoords({ top: Math.round(r.bottom), left: Math.round(r.left) });
+    }
+    // 对齐 Ext 菜单：点击浮层外部或缩放窗口时关闭；延迟挂载避免捕获打开当次点击。
+    const onDocDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement;
+      if (!t.closest('.x-color-menu') && !(anchorRef?.current && anchorRef.current.contains(t))) {
+        onClose?.();
+        setDynOpen(false);
+      }
+    };
+    const close = () => {
+      onClose?.();
+      setDynOpen(false);
+    };
+    const t = window.setTimeout(() => {
+      document.addEventListener('mousedown', onDocDown);
+      window.addEventListener('resize', close);
+    }, 0);
+    return () => {
+      window.clearTimeout(t);
+      document.removeEventListener('mousedown', onDocDown);
+      window.removeEventListener('resize', close);
+    };
+  }, [dynOpen, anchorRef, onClose]);
+
+  if (!dynOpen || !coords) return null;
+
+  return createPortal(
+    <div
+      className="x-menu x-menu-floating x-layer x-color-menu x-menu-plain x-menu-nosep"
+      style={{ position: 'fixed', visibility: 'visible', zIndex: 15000, top: coords.top, left: coords.left }}
+    >
+      <a href="#" className="x-menu-focus" tabIndex={-1} onClick={(e) => e.preventDefault()} />
+      <ul className="x-menu-list">
+        <li className="x-menu-list-item">
+          <ColorPalette
+            value={dynValue}
+            colors={dynColors}
+            onSelect={(c) => {
+              selRef.current = norm(c);
+              onSelect?.(c);
+              setDynOpen(false);
+              onClose?.();
+            }}
+          />
+        </li>
+      </ul>
+    </div>,
+    document.body,
+  );
+});
+
+(ColorMenu as React.FC).displayName = 'ColorMenu';