iter(g42): pagination 支持每页条数切换

2026-10-26 11:53:49 +08:00
parent 39d105ad30
commit 314366aa8d
9 changed files with 103 additions and 24 deletions
@@ -1,5 +1,6 @@
-import { h, renderList } from '@ui-arch/frame';
+import { h, renderList, signal } from '@ui-arch/frame';
 import type { PaginationProps } from './types.js';
+import { select } from './select.js';

 /*** 页码序列：≤7 页全展开；否则保留首尾与当前页 ±1 窗口，缺口折叠为省略号（null 占位） ***/
 function pageSequence(page: number, totalPages: number): (number | null)[] {
@@ -15,37 +16,60 @@ function pageSequence(page: number, totalPages: number): (number | null)[] {
  return seq;
 }

-/*** 独立分页器：受控组件，page 为双向绑定信号；页码过多折叠省略号，首末页禁用翻页，jumpable 时末尾可跳页，原生 button 保证键盘可达 ***/
+/*** 独立分页器：受控组件，page 为双向绑定信号；页码过多折叠省略号，首末页禁用翻页，jumpable 可跳页，pageSizes 可切每页条数 ***/
+
 export function pagination(props: PaginationProps): HTMLElement {
-  const totalPages = Math.max(1, Math.ceil(props.total / props.pageSize)); // 总页数
+  // —— 状态集中声明 ——
+  const size = signal(props.pageSize); // 每页条数：可从 switcher 改动，故用信号持有
+  const totalPages = () => Math.max(1, Math.ceil(props.total / size())); // 总页数随时可重算
+  const pages = h('div', { class: 'ua-pagination-pages' }); // 页码区，随页码重绘
+  const tail = h('div', { class: 'ua-pagination-tail' });   // 附加区（条数切换 + 跳页），只创建一次
  const go = (p: number) => {
-    const next = Math.min(totalPages, Math.max(1, p)); // 钳制到有效页码范围
+    const next = Math.min(totalPages(), Math.max(1, p)); // 钳制到有效页码范围
    props.page(next);
    props.onChange?.(next);
  };
-  // —— 跳页输入：jumpable 且多页时渲染在末尾，回车跳转 ——
-  const jump = props.jumpable && totalPages > 1 ? (h('input', { class: 'ua-page-jump', inputmode: 'numeric', 'aria-label': `跳转到指定页，共 ${totalPages} 页` }) as HTMLInputElement) : null;
-  if (jump) {
+
+  // —— 每页条数切换器：传了候选才渲染，切换即回第 1 页 ——
+  if ((props.pageSizes ?? []).length > 1) {
+    const sizeValue = signal(String(size()));
+    tail.append(
+      select({
+        options: props.pageSizes!.map((n) => ({ value: String(n), label: `${n} 条/页` })),
+        value: sizeValue,
+        onChange: (v) => {
+          size(Number(v));
+          props.onPageSizeChange?.(Number(v));
+          go(1); // 条数变了旧页码无意义，统一回首页
+        },
+      }),
+    );
+  }
+
+  // —— 跳页输入：jumpable 且多页时渲染，回车跳转 ——
+  if (props.jumpable) {
+    const jump = h('input', { class: 'ua-page-jump', inputmode: 'numeric', 'aria-label': '跳转到指定页' }) as HTMLInputElement;
    jump.addEventListener('change', () => {
      const n = parseInt(jump.value, 10);
      jump.value = ''; // 跳转后清空输入，避免残留旧页码
      if (!Number.isNaN(n)) go(n); // 非数字忽略，由 go 钳制范围
    });
+    tail.append(h('span', { class: 'ua-page-jump-wrap' }, jump, h('span', { class: 'ua-page-total' }, () => `/ ${totalPages()} 页`)));
  }

-  const nav = h('nav', { class: 'ua-pagination', 'aria-label': '分页' });
-  renderList(nav, () => {
-    const page = Math.min(totalPages, Math.max(1, props.page()));
+  const nav = h('nav', { class: 'ua-pagination', 'aria-label': '分页' }, pages, tail);
+  renderList(pages, () => {
+    const totalNow = totalPages();
+    const page = Math.min(totalNow, Math.max(1, props.page()));
    const items: HTMLElement[] = [h('button', { class: 'ua-page-btn', disabled: page <= 1, 'aria-label': '上一页', onClick: () => go(page - 1) }, '‹')];
-    for (const it of pageSequence(page, totalPages)) {
+    for (const it of pageSequence(page, totalNow)) {
      items.push(
        it == null
          ? h('span', { class: 'ua-page-gap', 'aria-hidden': 'true' }, '…')
          : h('button', { class: `ua-page-btn${it === page ? ' ua-active' : ''}`, disabled: it === page, 'aria-current': it === page ? 'page' : null, 'aria-label': `第 ${it} 页`, onClick: () => go(it) }, String(it)),
      );
    }
-    items.push(h('button', { class: 'ua-page-btn', disabled: page >= totalPages, 'aria-label': '下一页', onClick: () => go(page + 1) }, '›'));
-    if (jump) items.push(h('span', { class: 'ua-page-jump-wrap' }, jump, h('span', { class: 'ua-page-total' }, `/ ${totalPages} 页`))); // 跳页入口固定在末尾
+    items.push(h('button', { class: 'ua-page-btn', disabled: page >= totalNow, 'aria-label': '下一页', onClick: () => go(page + 1) }, '›'));
    return items;
  });
  return nav;
@@ -281,6 +281,8 @@ export interface PaginationProps {
  pageSize: number;     // 每页条数
  total: number;        // 总条数
  jumpable?: boolean;   // 开启后在末尾显示跳页输入框（总页数 > 1 才出现）
+  pageSizes?: number[]; // 每页条数候选（如 [10, 20, 50]）；传了才渲染条数切换器
+  onPageSizeChange?: (size: number) => void; // 切换每页条数回调（同时自动回到第 1 页）
  onChange?: (page: number) => void; // 翻页回调
 }

@@ -35,7 +35,7 @@
      "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转",
      "popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转",
      "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",
-      "pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，jumpable 时末尾可输入页码直接跳转，键盘可达",
+      "pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，jumpable 时末尾可输入页码直接跳转，键盘可达；pageSizes 可切每页条数",
      "spinner(props)：加载指示器，size 控制直径",
      "progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
      "tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
@@ -1210,7 +1210,7 @@
      {
        "id": "pagination",
        "title": "分页器 Pagination",
-        "demo": "sec-table",
+        "demo": "sec-pagination",
        "props": [
          {
            "n": "page",
@@ -1235,6 +1235,17 @@
            "t": "(page: number) => void",
            "k": 1,
            "d": "翻页回调"
+          },
+          {
+            "n": "pageSizes",
+            "t": "number[]",
+            "d": "每页条数候选（如 [10, 20, 50]）；传了才渲染条数切换器"
+          },
+          {
+            "n": "onPageSizeChange",
+            "t": "(size: number) => void",
+            "k": 1,
+            "d": "切换每页条数回调，同时自动回到第 1 页"
          }
        ],
        "example": "const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p) => console.log(p) })",
@@ -1243,7 +1254,8 @@
          "页码 ≤7 全部展开；更多时只保留首尾与当前页 ±1，缺口折叠为省略号",
          "首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current",
          "与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步",
-          "键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发"
+          "键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发",
+          "pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据"
        ]
      },
      {
@@ -1026,6 +1026,12 @@ button.ua-step-dot:hover {
  align-items: center;
  gap: var(--ua-space-1);
 }
+.ua-pagination-pages,
+.ua-pagination-tail {
+  display: inline-flex;   /* 页码区与附加区分组，附加项只创建一次 */
+  align-items: center;
+  gap: var(--ua-space-1);
+}
 .ua-page-jump-wrap {
  display: inline-flex;      /* 跳页输入 + 总页数说明 */
  align-items: center;