temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
HIsheR
2026-10-26 11:53:49 +08:00
parent 39d105ad30
commit 314366aa8d
9 changed files with 103 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+8
View File
@@ -692,6 +692,14 @@
"acceptance": "verify 解析分组行并比对清单集合，漏写/多写均报错（formItem 作为别名放行）；负向删除 tree 即失败；npm run check 全绿",
"status": "done",
"notes": "自补：门禁改进；把手工维护的第二份清单纳入自动校验"
},
{
"id": "g42",
"title": "pagination 支持每页条数切换",
"motivation": "分页器只能固定 pageSize，列表页要改条数得业务另做下拉并自算总页数；且每次翻页都在重建跳页输入框",
"acceptance": "pagination({ pageSizes, onPageSizeChange }) 渲染条数切换器、切换后回第 1 页并按新条数重算总页数；跳页区只创建一次；npm run check 全绿",
"status": "open",
"notes": "自补：组件补充"
}
]
}
.ua/index.json
+16 -4
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T03:51:18.113Z",
"generatedAt": "2026-10-26T03:53:26.496Z",
"repoRoot": ".",
"packages": [
{
@@ -164,7 +164,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 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
@@ -1339,7 +1339,7 @@
{
"id": "pagination",
"title": "分页器 Pagination",
"demo": "sec-table",
"demo": "sec-pagination",
"props": [
{
"n": "page",
@@ -1364,6 +1364,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) })",
@@ -1372,7 +1383,8 @@
"页码 ≤7 全部展开；更多时只保留首尾与当前页 ±1，缺口折叠为省略号",
"首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current",
"与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步",
"键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发"
"键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发",
"pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据"
]
},
{
apps/demo/main.ts
+12
View File
@@ -182,6 +182,7 @@ const listPick = signal(''); // 列表点击选中的条目标题
const slideIndex = signal(0); // 轮播当前下标（外部受控演示）
const treePick = signal('core'); // 树形选中节点 key
const cityPick = signal(''); // 可搜索下拉的选中城市
const pagerPage = signal(1); // 独立分页器当前页
const pickedFiles = signal(''); // 文件选择结果（名称串）
// —— 禁用态演示：开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
@@ -685,6 +686,17 @@ const content = h(
result({ status: 'danger', title: '校验未通过', description: '发票金额与报销金额不一致，请核对后重新提交。' }),
),
),
section(
'sec-pagination',
'分页',
'pagination：受控页码信号，>7 页自动省略号折叠；jumpable 跳页输入、pageSizes 切每页条数（切换后回第 1 页）。',
h(
'div',
{ class: 'row' },
pagination({ page: pagerPage, pageSize: 10, total: 137, jumpable: true, pageSizes: [10, 20, 50], onChange: (p) => pagerPage(p) }),
h('span', { class: 'out' }, () => `第 ${pagerPage()} 页`),
),
),
section(
'sec-menu',
'下拉菜单',
llms-full.txt
+6 -3
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档（无图形版）
> 自动生成于 2026-10-26T03:51:18.113Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 自动生成于 2026-10-26T03:53:26.496Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
## 快速上手
@@ -766,6 +766,8 @@ divider({ label: '更多信息' }) / divider({ vertical: true })
- pageSize（必填）：number —— 每页条数
- total（必填）：number —— 总条数
- onChange（回调）：(page: number) => void —— 翻页回调
- pageSizes：number[] —— 每页条数候选（如 [10, 20, 50]）；传了才渲染条数切换器
- onPageSizeChange（回调）：(size: number) => void —— 切换每页条数回调，同时自动回到第 1 页
示例：
@@ -780,8 +782,9 @@ const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p)
3. 首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current
4. 与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步
5. 键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发
6. pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据
现场演示：apps/docs/demo.html#sec-table
现场演示：apps/docs/demo.html#sec-pagination
### modal — 弹窗 Modal
@@ -1195,7 +1198,7 @@ API 速览：
- 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 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签
llms.txt
+1 -1
View File
@@ -69,7 +69,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 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签
packages/skin/ui/src/pagination.ts
+37 -13
View File
@@ -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;
packages/skin/ui/src/types.ts
+2
View File
@@ -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; // 翻页回调
}
packages/skin/ui/ua.manifest.json
+15 -3
View File
@@ -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 拿新条数重算数据"
]
},
{
packages/skin/ui/ui.css
+6
View File
@@ -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;