react-extjs 0.0.1

package/src/components/Organizer.tsx

@@ -0,0 +1,403 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { BorderLayout } from './BorderLayout';
+import { Toolbar } from './Toolbar';
+import { TreePanel, type TreeNodeData, type TreePanelHandle } from './Tree';
+
+export interface OrganizerImage {
+  id: string;
+  name: string;
+  /** 缩略图底色（无真实图片时用色块近似，等价 ext thumb 背景 #dddddd） */
+  color?: string;
+  /** 缩略图地址（可选；提供则渲染 <img>，否则用内联 SVG 自包含缩略图等价原始 img） */
+  url?: string;
+}
+
+export interface OrganizerProps {
+  /** 初始相册（树节点），默认空数组（隐藏根、顶层即相册） */
+  albums?: TreeNodeData[];
+  /** 初始图片（右栏网格），默认空数组 */
+  images?: OrganizerImage[];
+  width?: number;
+  height?: number;
+  /** 新建相册按钮文案，默认 'New Album' */
+  newAlbumText?: string;
+  /** 新建相册默认名前缀，默认 'Album '（配合自增序号） */
+  albumNamePrefix?: string;
+  /** 相册树变化回调（增/删/改名/重排后，等价 Tree 的 change 事件） */
+  onAlbumsChange?: (albums: TreeNodeData[]) => void;
+  /** 图片被拖入相册时回调（单张），批量拖拽时为每张各回调一次 */
+  onImageDropped?: (image: OrganizerImage, albumId: string) => void;
+  /** 图片数据变化回调（增/删后） */
+  onImagesChange?: (images: OrganizerImage[]) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface OrganizerHandle {
+  /** 新增相册（自动命名并进入内联改名态），返回新节点 id */
+  addAlbum: (text?: string) => string;
+  /** 新增一张图片到网格 */
+  addImage: (image: OrganizerImage) => void;
+  /** 读取当前相册树（实时快照） */
+  getAlbums: () => TreeNodeData[];
+  /** 读取当前图片列表 */
+  getImages: () => OrganizerImage[];
+}
+
+const ORG_IMAGE_MIME = 'application/x-organizer-image';
+const ORG_IMAGE_LIST_MIME = 'application/x-organizer-image-list';
+
+/** 自包含 SVG 缩略图 data-uri（等价原始 DataView 的 <img> 资源） */
+const makeThumb = (color: string, label: string): string => {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='80' height='60'>` +
+    `<rect width='80' height='60' fill='${color}'/>` +
+    `<text x='40' y='35' font-size='11' fill='#333' text-anchor='middle' ` +
+    `font-family='sans-serif'>${label.replace(/[<&]/g, '')}</text></svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+
+const thumbUrl = (img: OrganizerImage): string =>
+  img.url ?? makeThumb(img.color ?? '#dddddd', img.name);
+
+/**
+ * Organizer —— 保真复刻 examples/organizer/organizer.js（图片组织管理器）。
+ *
+ * 原始示例用 Ext 标准组件拼出布局，本组件用完全一致的 Ext 原版 DOM 结构还原：
+ *  - 容器：x-panel（border 风格两栏）；左 Ext.tree.TreePanel（相册树，tbar 放 New Album
+ *    按钮、enableDD 树内重排、TreeEditor 内联改名）→ 右 Ext.DataView（图片缩略图网格，
+ *    DragSelector 橡皮筋框选、Ctrl/Cmd 多选、多选拖拽组合 ghost）。“My Albums / My Images”
+ *    均为带标题栏的 x-panel，New Album 落在 tbar（故为扁平工具栏按钮，与原版一致）。
+ *  - 左/右两栏之间为可拖拽的 x-splitbar（split:true 等价），用原版 SplitBar 组件实现。
+ *  - 图片网格 DOM 严格对齐原版：div.thumb-wrap > div.thumb > img.thumb-img + span；
+ *    选中态加 x-list-selected（复用 Ext.ListView 原生选中类，xtheme-blue/gray 均有主题化规则：
+ *    blue #dfe8f6 / gray #f0f0f0；零自定义 CSS，蓝/灰原生主题化，与 DataView 一致）；框选浮层用
+ *    原版 .x-view-selector。相关样式逐字取自 examples/organizer/organizer.css（见 ext-theme.css）。
+ *  - 跨组件拖拽：原始用 ImageDragZone + TreeDropZone 把图片拖入相册；本组件用 HTML5 拖放
+ *    （draggable + onDrop 读 data-node-id）实现等价行为：图片（单张或多选）拖到某相册节点即
+ *    在该相册下生成对应图片叶子节点。DOM/class 与原版一致，未新增自定义类。
+ */
+export const Organizer = forwardRef<OrganizerHandle, OrganizerProps>(function Organizer(
+  {
+    albums = [],
+    images = [],
+    width = 650,
+    height = 400,
+    newAlbumText = 'New Album',
+    albumNamePrefix = 'Album ',
+    onAlbumsChange,
+    onImageDropped,
+    onImagesChange,
+    className,
+    style,
+  },
+  ref,
+) {
+  const treeRef = useRef<TreePanelHandle>(null);
+  const imgScrollRef = useRef<HTMLDivElement>(null);
+  const [imgList, setImgList] = useState<OrganizerImage[]>(() => images);
+  const [selectedImgs, setSelectedImgs] = useState<Set<string>>(new Set());
+  const [selBox, setSelBox] = useState<{ x1: number; y1: number; x2: number; y2: number } | null>(null);
+  const albumCounter = useRef(0);
+  const dropHLRef = useRef<HTMLElement | null>(null);
+
+  // 镜像最新图片列表，供命令式句柄同步读取
+  const imgListRef = useRef<OrganizerImage[]>(imgList);
+  imgListRef.current = imgList;
+
+  const notifyAlbums = () => {
+    // appendChild/rename 经 setState 异步提交，下一帧读快照才是新值
+    requestAnimationFrame(() => onAlbumsChange?.(treeRef.current?.getNodes() ?? []));
+  };
+
+  const clearDropHL = () => {
+    if (dropHLRef.current) {
+      dropHLRef.current.style.outline = '';
+      dropHLRef.current.style.outlineOffset = '';
+      dropHLRef.current = null;
+    }
+  };
+
+  const handleNewAlbum = () => {
+    albumCounter.current += 1;
+    const id = `album-${Date.now()}-${albumCounter.current}`;
+    const text = `${albumNamePrefix}${albumCounter.current}`;
+    treeRef.current?.appendChild(null, { id, text, cls: 'album-node', expandable: true });
+    notifyAlbums();
+    // 等同原始示例：新建后自动进入内联改名
+    requestAnimationFrame(() => treeRef.current?.startEdit(id));
+    return id;
+  };
+
+  const handleRename = () => notifyAlbums();
+
+  const onTreeDragOver = (e: React.DragEvent) => {
+    const el = (e.target as HTMLElement).closest('[data-node-id]') as HTMLElement | null;
+    if (!el) return;
+    e.preventDefault(); // 允许放置
+    if (dropHLRef.current !== el) {
+      clearDropHL();
+      el.style.outline = '2px solid #316ac5';
+      el.style.outlineOffset = '-1px';
+      dropHLRef.current = el;
+    }
+  };
+
+  const onTreeDragLeave = () => clearDropHL();
+
+  const onTreeDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const el = (e.target as HTMLElement).closest('[data-node-id]') as HTMLElement | null;
+    clearDropHL();
+    if (!el) return;
+    const albumId = el.getAttribute('data-node-id')!;
+    let ids: string[] = [];
+    const listRaw = e.dataTransfer.getData(ORG_IMAGE_LIST_MIME);
+    if (listRaw) {
+      try {
+        ids = JSON.parse(listRaw);
+      } catch {
+        ids = [];
+      }
+    }
+    if (!Array.isArray(ids) || ids.length === 0) {
+      const single =
+        e.dataTransfer.getData(ORG_IMAGE_MIME) || e.dataTransfer.getData('text/plain');
+      if (single) ids = [single];
+    }
+    const imgs = ids
+      .map((id) => imgListRef.current.find((i) => i.id === id))
+      .filter((x): x is OrganizerImage => Boolean(x));
+    if (imgs.length === 0) return;
+    // 等价 ImageDragZone 批量拖拽 → TreeDropZone 批量 append（组合 ghost 一次 drop 多叶子）
+    imgs.forEach((img, idx) => {
+      treeRef.current?.appendChild(albumId, {
+        id: `img-${img.id}-${Date.now()}-${idx}`,
+        text: img.name,
+        icon: thumbUrl(img),
+        cls: 'image-node',
+      });
+      onImageDropped?.(img, albumId);
+    });
+    notifyAlbums();
+  };
+
+  // 橡皮筋框选（等价 DataView + DragSelector）
+  const onImgMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    if ((e.target as HTMLElement).closest('.thumb-wrap')) return; // 点中缩略图不框选
+    const cont = imgScrollRef.current;
+    if (!cont) return;
+    const rect = cont.getBoundingClientRect();
+    const startX = e.clientX - rect.left + cont.scrollLeft;
+    const startY = e.clientY - rect.top + cont.scrollTop;
+    const additive = e.ctrlKey || e.metaKey;
+    const baseSel = additive ? new Set(selectedImgs) : new Set<string>();
+    // 等价 DataView：在空白处按下即清空选择（Ctrl/Cmd 则保留以追加）
+    setSelectedImgs(baseSel);
+    setSelBox({ x1: startX, y1: startY, x2: startX, y2: startY });
+
+    const onMove = (ev: MouseEvent) => {
+      const r = cont.getBoundingClientRect();
+      const cx = ev.clientX - r.left + cont.scrollLeft;
+      const cy = ev.clientY - r.top + cont.scrollTop;
+      const box = {
+        left: Math.min(startX, cx),
+        top: Math.min(startY, cy),
+        right: Math.max(startX, cx),
+        bottom: Math.max(startY, cy),
+      };
+      setSelBox({ x1: startX, y1: startY, x2: cx, y2: cy });
+      const sel = new Set(baseSel);
+      cont.querySelectorAll<HTMLElement>('.thumb-wrap').forEach((w) => {
+        const wr = w.getBoundingClientRect();
+        const wl = wr.left - r.left + cont.scrollLeft;
+        const wt = wr.top - r.top + cont.scrollTop;
+        const wright = wl + wr.width;
+        const wb = wt + wr.height;
+        if (wl < box.right && wright > box.left && wt < box.bottom && wb > box.top) {
+          const id = w.getAttribute('data-img-id');
+          if (id) sel.add(id);
+        }
+      });
+      setSelectedImgs(sel);
+    };
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      setSelBox(null);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  // 组合 ghost（等价原始 ImageDragZone 多选时的 multi-proxy）：复用原生 .x-dd-drag-ghost
+  // 中性样式（白底 #fff / 灰边 #ddd/#bbb / 黑字 #000，见 ext-all.css），不写死任何主题色。
+  const buildDragImage = (count: number): HTMLElement => {
+    const el = document.createElement('div');
+    el.className = 'x-dd-drag-ghost';
+    el.style.cssText = 'position:absolute;top:-1000px;left:-1000px;font-size:11px;';
+    el.textContent = `${count} image${count > 1 ? 's' : ''}`;
+    document.body.appendChild(el);
+    return el;
+  };
+
+  const renderImage = (img: OrganizerImage) => {
+    const selected = selectedImgs.has(img.id);
+    return (
+      <div
+        key={img.id}
+        className={['thumb-wrap', selected ? 'x-list-selected' : ''].filter(Boolean).join(' ')}
+        data-img-id={img.id}
+        draggable
+        onDragStart={(e) => {
+          let dragged = selectedImgs;
+          if (!dragged.has(img.id)) {
+            dragged = new Set([img.id]);
+            setSelectedImgs(dragged);
+          }
+          const ids = Array.from(dragged);
+          e.dataTransfer.setData(ORG_IMAGE_LIST_MIME, JSON.stringify(ids));
+          e.dataTransfer.setData(ORG_IMAGE_MIME, img.id);
+          e.dataTransfer.setData('text/plain', img.id);
+          e.dataTransfer.effectAllowed = 'copy';
+          const ghost = buildDragImage(ids.length);
+          try {
+            e.dataTransfer.setDragImage(ghost, 0, 0);
+          } catch {
+            /* 某些环境不支持，忽略 */
+          }
+          setTimeout(() => ghost.remove(), 0);
+        }}
+        onClick={(e) => {
+          if (e.ctrlKey || e.metaKey) {
+            setSelectedImgs((prev) => {
+              const n = new Set(prev);
+              if (n.has(img.id)) n.delete(img.id);
+              else n.add(img.id);
+              return n;
+            });
+          } else {
+            setSelectedImgs(new Set([img.id]));
+          }
+        }}
+      >
+        <div className="thumb">
+          <img
+            className="thumb-img"
+            src={thumbUrl(img)}
+            alt={img.name}
+            draggable={false}
+          />
+        </div>
+        <span>{img.name}</span>
+      </div>
+    );
+  };
+
+  useImperativeHandle(ref, () => ({
+    addAlbum: (text?: string) => {
+      albumCounter.current += 1;
+      const id = `album-${Date.now()}-${albumCounter.current}`;
+      const t = text ?? `${albumNamePrefix}${albumCounter.current}`;
+      treeRef.current?.appendChild(null, { id, text: t, cls: 'album-node', expandable: true });
+      notifyAlbums();
+      return id;
+    },
+    addImage: (image: OrganizerImage) => {
+      setImgList((prev) => [...prev, image]);
+      onImagesChange?.(imgListRef.current);
+    },
+    getAlbums: () => treeRef.current?.getNodes() ?? [],
+    getImages: () => imgListRef.current,
+  }));
+
+  return (
+    <BorderLayout
+      width={width}
+      height={height}
+      className={['x-organizer', className].filter(Boolean).join(' ')}
+      style={style}
+      regions={[
+        {
+          // 左：相册树（等价原版 Ext.tree.TreePanel，region:'west'，tbar 挂 New Album，
+          // split:true 可拖拽，margins '5 0 5 5'，整组由 BorderLayout 零额外 CSS 还原外框/底/边距/分隔条）
+          region: 'west',
+          width: 200,
+          split: true,
+          minSize: 120,
+          maxSize: 400,
+          title: 'My Albums',
+          margins: '5 0 5 5',
+          tbar: (
+            <Toolbar
+              items={[{ text: newAlbumText, iconCls: 'album-btn', handler: handleNewAlbum }]}
+            />
+          ),
+          children: (
+            <div
+              style={{ minHeight: '100%', position: 'relative' }}
+              onDragOver={onTreeDragOver}
+              onDragLeave={onTreeDragLeave}
+              onDrop={onTreeDrop}
+            >
+              <TreePanel
+                ref={treeRef}
+                nodes={albums}
+                rootVisible={false}
+                editable
+                enableNodeReorder
+                onRename={handleRename}
+              />
+            </div>
+          ),
+        },
+        {
+          // 右：图片网格（等价原版 Ext.Panel，region:'center'，layout:'fit'，body 即 DataView；
+          // margins '5 5 5 0'，#images 渐变底 + 缩略图网格，框选/多选拖拽逻辑不变）
+          region: 'center',
+          title: 'My Images',
+          margins: '5 5 5 0',
+          children: (
+            <div
+              id="images"
+              ref={imgScrollRef}
+              data-org="img-scroll"
+              style={{
+                height: '100%',
+                overflow: 'auto',
+                padding: 0,
+                position: 'relative',
+              }}
+              onMouseDown={onImgMouseDown}
+            >
+              {imgList.length === 0 ? (
+                <div style={{ padding: '10px 8px', color: '#666', fontSize: 12 }}>No images</div>
+              ) : (
+                <div style={{ overflow: 'hidden', position: 'relative' }}>{imgList.map(renderImage)}</div>
+              )}
+              {selBox && (
+                <div
+                  className="x-view-selector"
+                  style={{
+                    position: 'absolute',
+                    zIndex: 5,
+                    pointerEvents: 'none',
+                    left: Math.min(selBox.x1, selBox.x2),
+                    top: Math.min(selBox.y1, selBox.y2),
+                    width: Math.abs(selBox.x2 - selBox.x1),
+                    height: Math.abs(selBox.y2 - selBox.y1),
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                  }}
+                />
+              )}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+});
+
+Organizer.displayName = 'Organizer';

package/src/components/PagingToolbar.tsx

@@ -0,0 +1,255 @@
+import React, { useState, useCallback, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { Toolbar, type ToolbarItem } from './Toolbar';
+import { Slider } from './Slider';
+import { ProgressBar } from './ProgressBar';
+
+/**
+ * PagingToolbar —— 保真复刻 Ext.PagingToolbar（src/widgets/PagingToolbar.js）。
+ *
+ * 保真契约（DOM/class 严格对齐 Ext 运行时渲染，已通过 dump golden 校验）：
+ *  - 本质是带固定 items 的 Ext.Toolbar（继承 Toolbar，根类 x-toolbar x-small-editor x-toolbar-layout-ct）
+ *  - item 序列（getPagingItems，200-250 行）：
+ *        first(x-tbar-page-first, disabled@page1)
+ *        prev (x-tbar-page-prev,  disabled@page1)
+ *        '-' 分隔符
+ *        beforePageText（默认 'Page'，TextItem → div.xtb-text）
+ *        <input> 页码框（cls x-tbar-page-number；golden 为 Ext.NumberField，
+ *                类 x-form-text x-form-field x-form-num-field x-tbar-page-number，无 inline 宽高，由 CSS 驱动）
+ *        afterPageText（默认 'of {0}'，本例 'of 5'，TextItem → div.xtb-text）
+ *        '-'
+ *        next(x-tbar-page-next)
+ *        last(x-tbar-page-last)
+ *        '-'
+ *        refresh(x-tbar-loading)
+ *  - displayInfo=true 时追加 '->'（fill）+ TextItem（displayMsg，落在右侧行）
+ *  - 导航按钮为图标按钮：iconCls 经 Ext 落在 <button>（带 x-btn-text），em 仅承载箭头类；
+ *    禁用态加 x-item-disabled（Ext.Button.disabledClass 默认），非原生 disabled。
+ *
+ * 注意：golden 用 MemoryProxy 全量加载（未真正分页），故 displayMsg 的 end 恒为 total。
+ *       此处按 golden 同样公式复刻：(page-1)*pageSize + total，使 page1 输出 "1 - 50 of 50"。
+ *
+ * 行为契约（最小可用集，非完整 store 联动）：
+ *  - 点击 first/prev/next/last/refresh 切换 activePage；first/prev 在 page1 禁用、next/last 在末页禁用。
+ */
+export interface PagingToolbarProps {
+  /** 每页条数，等价 Ext pageSize（默认 20） */
+  pageSize?: number;
+  /** 总记录数，等价 store.getTotalCount() */
+  total?: number;
+  /** 初始 1-based 页码（默认 1） */
+  activePage?: number;
+  /** 是否显示右侧 displayMsg（等价 displayInfo） */
+  displayInfo?: boolean;
+  /** displayMsg 模板，{0}=start {1}=end {2}=total */
+  displayMsg?: string;
+  /** 无数据时文本 */
+  emptyMsg?: string;
+  /** 页码框前文本，等价 beforePageText */
+  beforePageText?: string;
+  /** 页码框后文本模板，等价 afterPageText（'{0}'=总页数） */
+  afterPageText?: string;
+  width?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** 页码变化回调（等价 change 事件） */
+  onPageChange?: (page: number) => void;
+  /** 运行时总记录数变化回调（等价 load 后 store 变动） */
+  onTotalChange?: (total: number) => void;
+  /** 启用 SlidingPager 插件：用可拖动滑块替换页码输入框（等价 Ext.ux.SlidingPager）。
+   *  隐藏 beforePageText/页码框/afterPageText，插入 width:114、minValue:1、maxValue=总页数 的 Slider，
+   *  拖动 changecomplete 触发翻页，total/pages 变化时同步 maxValue 与当前值。 */
+  slidingPager?: boolean;
+  /** 启用 ProgressBarPager 插件（等价 Ext.ux.ProgressBarPager）：仅当 displayInfo 为真时生效，
+   *  用 ProgressBar 替换右侧 displayMsg 文本，填充比例 = page/pages，文案仍为 displayMsg；
+   *  点击进度条按横向位置跳转到对应页码。 */
+  progressBarPager?: boolean;
+  /** ProgressBar 宽度，等价 Ext.ux.ProgressBarPager.progBarWidth（默认 225）。 */
+  progBarWidth?: number;
+}
+
+/** 命令式句柄：运行时动态分页 / 重载数据 */
+export interface PagingToolbarHandle {
+  /** 跳转到指定 1-based 页码（自动夹取到 [1, pages]） */
+  setPage: (p: number) => void;
+  next: () => void;
+  prev: () => void;
+  first: () => void;
+  last: () => void;
+  /** 刷新当前页（等价 reload 同页） */
+  refresh: () => void;
+  /** 运行时重载数据：设置新 total，页数随之重算，当前页夹取到有效范围 */
+  setTotal: (total: number) => void;
+  /** 读取当前页码 */
+  getPage: () => number;
+  /** 读取当前总记录数 */
+  getTotal: () => number;
+  /** 读取当前总页数 */
+  getPages: () => number;
+}
+
+export const PagingToolbar = forwardRef<PagingToolbarHandle, PagingToolbarProps>(
+  (
+    {
+      pageSize = 20,
+      total = 0,
+      activePage = 1,
+      displayInfo = false,
+      displayMsg = 'Displaying {0} - {1} of {2}',
+      emptyMsg = 'No data to display',
+      beforePageText = 'Page',
+      afterPageText = 'of {0}',
+      width,
+      className,
+      style,
+      onPageChange,
+      onTotalChange,
+      slidingPager = false,
+      progressBarPager = false,
+      progBarWidth = 225,
+    },
+    ref,
+  ) => {
+    // 双轨：total 名义来源 = prop，运行时可被 setTotal 改写（dynTotal）
+    const [dynTotal, setDynTotal] = useState(total);
+    useEffect(() => {
+      setDynTotal(total);
+    }, [total]);
+
+    const pages = dynTotal <= 0 ? 0 : Math.ceil(dynTotal / pageSize);
+    const [page, setPageState] = useState(activePage);
+
+    const go = useCallback(
+      (p: number) => {
+        const max = Math.max(pages, 1);
+        const np = Math.max(1, Math.min(p, max));
+        setPageState(np);
+        onPageChange?.(np);
+      },
+      [pages, onPageChange],
+    );
+
+    const pageRef = useRef(page);
+    pageRef.current = page;
+    const totalRef = useRef(dynTotal);
+    totalRef.current = dynTotal;
+    const pagesRef = useRef(pages);
+    pagesRef.current = pages;
+
+    useImperativeHandle(
+      ref,
+      (): PagingToolbarHandle => ({
+        setPage: (p: number) => go(p),
+        next: () => go(pageRef.current + 1),
+        prev: () => go(pageRef.current - 1),
+        first: () => go(1),
+        last: () => go(pagesRef.current),
+        refresh: () => go(pageRef.current),
+        setTotal: (t: number) => {
+          setDynTotal(t);
+          onTotalChange?.(t);
+          // 页数变化后当前页可能越界，夹取到有效范围
+          const np = Math.max(1, Math.min(pageRef.current, Math.max(Math.ceil(t / pageSize), 1)));
+          setPageState(np);
+          onPageChange?.(np);
+        },
+        getPage: () => pageRef.current,
+        getTotal: () => totalRef.current,
+        getPages: () => pagesRef.current,
+      }),
+      [go, pageSize, onPageChange, onTotalChange],
+    );
+
+  const pageInput = (
+    <input
+      key="pn"
+      type="text"
+      className="x-form-text x-form-field x-form-num-field x-tbar-page-number"
+      value={String(page)}
+      onChange={(e) => {
+        const v = parseInt(e.target.value, 10);
+        if (!Number.isNaN(v)) go(v);
+      }}
+    />
+  );
+
+  // SlidingPager 插件：用 Slider 替换页码输入框（对齐 Ext.ux.SlidingPager.init）。
+  // 原始隐藏 inputItem 前后各 2 个 item（2 分隔符 + beforePageText + input + afterPageText），
+  // 并在 idx+1 插入 Slider；可见形态即 first/prev/slider/next/last/refresh。
+  const slidingItem = (
+    <Slider
+      key="sliding-pager"
+      width={114}
+      minValue={1}
+      maxValue={Math.max(pages, 1)}
+      value={page}
+      // 对齐 Ext.ux.SlidingPager.init → 给 Slider 挂 Ext.slider.Tip，getText: 'Page <b>{0}</b> of <b>{1}</b>'
+      getTipText={(v, max) => `Page <b>${v}</b> of <b>${max}</b>`}
+      onChangeComplete={(v) => go(v)}
+    />
+  );
+
+  const items: ToolbarItem[] = slidingPager
+    ? [
+        { xtype: 'button', iconCls: 'x-tbar-page-first', disabled: page <= 1, onClick: () => go(1) },
+        { xtype: 'button', iconCls: 'x-tbar-page-prev', disabled: page <= 1, onClick: () => go(page - 1) },
+        slidingItem,
+        { xtype: 'button', iconCls: 'x-tbar-page-next', disabled: page >= pages, onClick: () => go(page + 1) },
+        { xtype: 'button', iconCls: 'x-tbar-page-last', disabled: page >= pages, onClick: () => go(pages) },
+        '-',
+        { xtype: 'button', iconCls: 'x-tbar-loading', onClick: () => go(page) },
+      ]
+    : [
+        { xtype: 'button', iconCls: 'x-tbar-page-first', disabled: page <= 1, onClick: () => go(1) },
+        { xtype: 'button', iconCls: 'x-tbar-page-prev', disabled: page <= 1, onClick: () => go(page - 1) },
+        '-',
+        beforePageText,
+        pageInput,
+        afterPageText.replace('{0}', String(pages)),
+        '-',
+        { xtype: 'button', iconCls: 'x-tbar-page-next', disabled: page >= pages, onClick: () => go(page + 1) },
+        { xtype: 'button', iconCls: 'x-tbar-page-last', disabled: page >= pages, onClick: () => go(pages) },
+        '-',
+        { xtype: 'button', iconCls: 'x-tbar-loading', onClick: () => go(page) },
+      ];
+
+  if (displayInfo) {
+    const start = dynTotal === 0 ? 0 : (page - 1) * pageSize + 1;
+    // 复刻 golden 全量加载的 end 公式：(page-1)*pageSize + total
+    const end = dynTotal === 0 ? 0 : (page - 1) * pageSize + dynTotal;
+    const msg =
+      dynTotal === 0
+        ? emptyMsg
+        : displayMsg
+            .replace('{0}', String(start))
+            .replace('{1}', String(end))
+            .replace('{2}', String(dynTotal));
+    items.push('->');
+    // ProgressBarPager：用 ProgressBar 替换纯文本 displayMsg（value/page 由点击/翻页实时联动）。
+    // 非 progressBarPager 时保持原始 xtb-text 文本。
+    items.push(
+      progressBarPager ? (
+        <ProgressBar
+          key="progress-pager-rt"
+          width={progBarWidth}
+          value={pages > 0 ? page / pages : 0}
+          text={msg}
+          onClick={(e) => {
+            if (pages <= 0) return;
+            const box = (e.currentTarget as HTMLElement).getBoundingClientRect();
+            const position = e.clientX - box.x;
+            const newpage = Math.ceil(position / (box.width / pages));
+            go(newpage);
+          }}
+        />
+      ) : (
+        { xtype: 'tbtext', text: msg }
+      ),
+    );
+  }
+
+  return <Toolbar width={width} className={className} style={style} items={items} />;
+});
+
+(PagingToolbar as unknown as { displayName?: string }).displayName = 'PagingToolbar';
+
+export default PagingToolbar;