From a754bd6b254ef443bb2118aad0dfb6237f4a4444 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 16:17:05 +0800 Subject: [PATCH] =?UTF-8?q?iter(g170):=20=E5=88=86=E9=A1=B5=E5=99=A8?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=9E=81=E7=AE=80=E6=A8=A1=E5=BC=8F=E4=B8=8E?= =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9A=90=E8=97=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 17 +++++++++++++++-- apps/demo/main.ts | 9 +++++++++ llms-full.txt | 5 ++++- packages/skin/ui/src/pagination.ts | 10 +++++++++- packages/skin/ui/src/types.ts | 2 ++ packages/skin/ui/ua.manifest.json | 15 ++++++++++++++- packages/skin/ui/ui.css | 7 +++++++ 7 files changed, 60 insertions(+), 5 deletions(-) diff --git a/.ua/index.json b/.ua/index.json index 6e46be6..5caebf5 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T08:15:48.744Z", + "generatedAt": "2026-10-26T08:16:48.747Z", "repoRoot": ".", "packages": [ { @@ -1660,6 +1660,18 @@ "r": 1, "d": "总条数" }, + { + "n": "simple", + "t": "boolean", + "df": "false", + "d": "极简模式：只留上一页 / 下一页与「当前 / 总页」文字，适合表格工具栏等窄位" + }, + { + "n": "hideOnSinglePage", + "t": "boolean", + "df": "false", + "d": "只有一页时整个分页器隐藏（不占布局位）" + }, { "n": "onChange", "t": "(page: number) => void", @@ -1691,7 +1703,8 @@ "首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current", "与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步", "键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发", - "pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据" + "pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据", + "空间紧的地方传 simple：页码区换成「3 / 5」文字 + 两个箭头（文字带 aria-live，翻页会被读屏播报）；数据少到只有一页时再传 hideOnSinglePage，整块自动消失而不是留个灰掉的 1" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 7f2beac..8019a8e 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -244,6 +244,7 @@ const treePick = signal('core'); // 树形选中节点 key const transferKeys = signal(['a11y']); // 穿梭框右侧集合（外部受控演示） const cityPick = signal(''); // 可搜索下拉的选中城市 const pagerPage = signal(1); // 独立分页器当前页 +const simplePage = signal(2); // 极简分页演示用页码 const pickedFiles = signal(''); // 文件选择结果（名称串） // —— 禁用态演示：开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled —— @@ -1178,6 +1179,14 @@ const content = h( pagination({ page: pagerPage, pageSize: 10, total: 137, jumpable: true, pageSizes: [10, 20, 50], onChange: (p) => pagerPage(p) }), h('span', { class: 'out' }, () => `第 ${pagerPage()} 页`), ), + h( + 'div', + { class: 'row' }, + pagination({ page: simplePage, pageSize: 2, total: 9, simple: true }), // 极简：只留前后翻页与 3 / 5 + h('span', { class: 'out' }, '极简模式：工具栏窄位只留箭头与进度'), + pagination({ page: simplePage, pageSize: 20, total: 9, hideOnSinglePage: true }), // 单页：整块不渲染 + h('span', { class: 'out' }, '单页隐藏：上面那块 9 条 / 每页 20 已自动消失'), + ), ), section( 'sec-menu', diff --git a/llms-full.txt b/llms-full.txt index 3f41ada..4becde3 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T08:15:48.744Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T08:16:48.747Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -850,6 +850,8 @@ space({ size: 'lg' }, button({ label: '保存' }), button({ label: '取消', var - page（必填）：Signal —— 当前页码信号，双向绑定：外部赋值自动翻页，点击页码写回信号 - pageSize（必填）：number —— 每页条数 - total（必填）：number —— 总条数 +- simple（默认 false）：boolean —— 极简模式：只留上一页 / 下一页与「当前 / 总页」文字，适合表格工具栏等窄位 +- hideOnSinglePage（默认 false）：boolean —— 只有一页时整个分页器隐藏（不占布局位） - onChange（回调）：(page: number) => void —— 翻页回调 - jumpable（默认 false）：boolean —— 末尾显示跳页输入框（总页数 > 1 才出现）；缺省 false - pageSizes：number[] —— 每页条数候选（如 [10, 20, 50]）；传了才渲染条数切换器 @@ -869,6 +871,7 @@ const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p) 4. 与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步 5. 键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发 6. pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据 +7. 空间紧的地方传 simple：页码区换成「3 / 5」文字 + 两个箭头（文字带 aria-live，翻页会被读屏播报）；数据少到只有一页时再传 hideOnSinglePage，整块自动消失而不是留个灰掉的 1 现场演示：apps/docs/demo.html#sec-pagination diff --git a/packages/skin/ui/src/pagination.ts b/packages/skin/ui/src/pagination.ts index c24db72..3f1d3d6 100644 --- a/packages/skin/ui/src/pagination.ts +++ b/packages/skin/ui/src/pagination.ts @@ -16,7 +16,7 @@ function pageSequence(page: number, totalPages: number): (number | null)[] { return seq; } -/*** 独立分页器：受控组件，page 为双向绑定信号；页码过多折叠省略号，首末页禁用翻页，jumpable 可跳页，pageSizes 可切每页条数 ***/ +/*** 独立分页器：受控组件，page 为双向绑定信号；页码过多折叠省略号，首末页禁用翻页，jumpable 可跳页，pageSizes 可切每页条数，simple 走极简、hideOnSinglePage 单页隐藏 ***/ export function pagination(props: PaginationProps): HTMLElement { // —— 状态集中声明 —— @@ -61,6 +61,14 @@ export function pagination(props: PaginationProps): HTMLElement { renderList(pages, () => { const totalNow = totalPages(); const page = Math.min(totalNow, Math.max(1, props.page())); + nav.hidden = Boolean(props.hideOnSinglePage) && totalNow <= 1; // 单页时整块隐藏，工具栏不必为它留位 + if (props.simple) { // 极简态：页码不给点，只留前后翻页与进度文字 + return [ + h('button', { class: 'ua-page-btn', disabled: page <= 1, 'aria-label': '上一页', onClick: () => go(page - 1) }, '‹'), + h('span', { class: 'ua-page-simple', 'aria-live': 'polite' }, `${page} / ${totalNow}`), + h('button', { class: 'ua-page-btn', disabled: page >= totalNow, 'aria-label': '下一页', onClick: () => go(page + 1) }, '›'), + ]; + } const items: HTMLElement[] = [h('button', { class: 'ua-page-btn', disabled: page <= 1, 'aria-label': '上一页', onClick: () => go(page - 1) }, '‹')]; for (const it of pageSequence(page, totalNow)) { items.push( diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index d405d2a..6913a19 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -314,6 +314,8 @@ export interface PaginationProps { total: number; // 总条数 jumpable?: boolean; // 开启后在末尾显示跳页输入框（总页数 > 1 才出现） pageSizes?: number[]; // 每页条数候选（如 [10, 20, 50]）；传了才渲染条数切换器 + simple?: boolean; // 极简模式：只留上一页 / 下一页与「当前 / 总页」文字，适合工具栏窄位；缺省 false + hideOnSinglePage?: boolean; // 只有一页时整个分页器隐藏；缺省 false onPageSizeChange?: (size: number) => void; // 切换每页条数回调（同时自动回到第 1 页） onChange?: (page: number) => void; // 翻页回调 } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 2d754e8..106c926 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1531,6 +1531,18 @@ "r": 1, "d": "总条数" }, + { + "n": "simple", + "t": "boolean", + "df": "false", + "d": "极简模式：只留上一页 / 下一页与「当前 / 总页」文字，适合表格工具栏等窄位" + }, + { + "n": "hideOnSinglePage", + "t": "boolean", + "df": "false", + "d": "只有一页时整个分页器隐藏（不占布局位）" + }, { "n": "onChange", "t": "(page: number) => void", @@ -1562,7 +1574,8 @@ "首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current", "与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步", "键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发", - "pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据" + "pageSizes 传候选数组即出现「N 条/页」切换器，切换后自动回第 1 页；onPageSizeChange 拿新条数重算数据", + "空间紧的地方传 simple：页码区换成「3 / 5」文字 + 两个箭头（文字带 aria-live，翻页会被读屏播报）；数据少到只有一页时再传 hideOnSinglePage，整块自动消失而不是留个灰掉的 1" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index d7d24b9..ebb1975 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -1289,6 +1289,13 @@ button.ua-step-dot:hover { color: var(--ua-color-text-muted); font-size: var(--ua-font-size-sm); } +.ua-page-simple { + padding: 0 var(--ua-space-2); + color: var(--ua-color-text-muted); + font-size: var(--ua-font-size-sm); + font-variant-numeric: tabular-nums; + white-space: nowrap; +} .ua-page-jump { width: 48px; padding: 4px 6px;