iter: b04 新增独立 pagination 分页器并与 dataTable 页码联动
This commit is contained in:
HIsheR
+2
-2
@@ -30,8 +30,8 @@
|
||||
"title": "新增独立 pagination 分页器组件并与 dataTable 演示联动",
|
||||
"motivation": "table-core 已有 pagination 插件，但皮肤包没有独立分页器；dataTable 演示也未展示分页联动",
|
||||
"acceptance": "新增 pagination.ts：受控 API {page, pageSize, total, onChange}，页码过多时折叠省略号，键盘可达，禁用态完整；demo 页 dataTable 一节增加分页联动演示；导出、manifest、文档、llms-full.txt 同步；npm run check 全绿",
|
||||
"status": "open",
|
||||
"notes": ""
|
||||
"status": "done",
|
||||
"notes": "pagination(props)：page 信号双向绑定（受控），≤7 页全展开、更多时首尾 + 当前页 ±1 折叠省略号（renderList 重建），原生 button 键盘可达，aria-current / aria-label 完整，首末页禁用 ‹ ›；dataTable 新增可选 page 信号桥接（双向同步 + 越界钳制，防无效派发）；demo sec-table 新增 pageSize 3 × 24 行的联动卡片"
|
||||
},
|
||||
{
|
||||
"id": "b05",
|
||||
|
||||
+51
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-23T07:52:40.603Z",
|
||||
"generatedAt": "2026-10-23T07:59:47.390Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -130,7 +130,7 @@
|
||||
{
|
||||
"name": "@ui-arch/ui",
|
||||
"type": "skin-dom",
|
||||
"description": "DOM 皮肤组件库：button / textField / textarea / checkbox / switch / select / radioGroup / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
|
||||
"description": "DOM 皮肤组件库：button / textField / textarea / checkbox / switch / select / radioGroup / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
|
||||
"tags": [
|
||||
"components",
|
||||
"dom",
|
||||
@@ -155,6 +155,7 @@
|
||||
"toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本",
|
||||
"tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起",
|
||||
"skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",
|
||||
"pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，键盘可达",
|
||||
"spinner(props)：加载指示器，size 控制直径",
|
||||
"progress(props)：进度条，轨道 + 渐变流动填充，value 信号驱动 0-100，满格切 success 色",
|
||||
"tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
|
||||
@@ -178,6 +179,7 @@
|
||||
"ToastProps",
|
||||
"TooltipProps",
|
||||
"SkeletonProps",
|
||||
"PaginationProps",
|
||||
"SpinnerProps",
|
||||
"ProgressProps",
|
||||
"TabsProps",
|
||||
@@ -196,7 +198,7 @@
|
||||
"语义色 variant 四档：default|info / success / warning / danger，一律来自令牌，禁止硬编码颜色"
|
||||
],
|
||||
"docs": {
|
||||
"intro": "19 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
|
||||
"intro": "20 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
|
||||
"steps": [
|
||||
"安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
|
||||
"引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",
|
||||
@@ -656,6 +658,45 @@
|
||||
"键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pagination",
|
||||
"title": "分页器 Pagination",
|
||||
"demo": "sec-table",
|
||||
"props": [
|
||||
{
|
||||
"n": "page",
|
||||
"t": "Signal<number>",
|
||||
"r": 1,
|
||||
"d": "当前页码信号，双向绑定：外部赋值自动翻页，点击页码写回信号"
|
||||
},
|
||||
{
|
||||
"n": "pageSize",
|
||||
"t": "number",
|
||||
"r": 1,
|
||||
"d": "每页条数"
|
||||
},
|
||||
{
|
||||
"n": "total",
|
||||
"t": "number",
|
||||
"r": 1,
|
||||
"d": "总条数"
|
||||
},
|
||||
{
|
||||
"n": "onChange",
|
||||
"t": "(page: number) => void",
|
||||
"k": 1,
|
||||
"d": "翻页回调"
|
||||
}
|
||||
],
|
||||
"example": "const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p) => console.log(p) })",
|
||||
"steps": [
|
||||
"创建页码信号 page = signal(1)，与 pageSize / total 一起传入",
|
||||
"页码 ≤7 全部展开；更多时只保留首尾与当前页 ±1，缺口折叠为省略号",
|
||||
"首末页自动禁用 ‹ › 翻页按钮，当前页禁点并标记 aria-current",
|
||||
"与 dataTable 联动：把同一个 page 信号传给 dataTable 的 page 参数，两处翻页自动同步",
|
||||
"键盘可达：全部是原生 button，Tab 聚焦后 Enter / Space 触发"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "modal",
|
||||
"title": "弹窗 Modal",
|
||||
@@ -788,6 +829,11 @@
|
||||
"n": "selectable",
|
||||
"t": "boolean",
|
||||
"d": "启用行选择列：全选三态（含半选）、行 checkbox、已选计数；缺省 false"
|
||||
},
|
||||
{
|
||||
"n": "page",
|
||||
"t": "Signal<number>",
|
||||
"d": "受控页码信号：与内核分页双向同步，传同一个信号给独立 pagination 组件即可联动"
|
||||
}
|
||||
],
|
||||
"example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })",
|
||||
@@ -797,7 +843,8 @@
|
||||
"selectable: true 开启行选择：表头全选框带 indeterminate 半选态，工具栏显示已选计数",
|
||||
"选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
|
||||
"工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",
|
||||
"表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供"
|
||||
"表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供",
|
||||
"需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{"time":"2026-10-23T15:47:00+08:00","id":"b01","result":"done","summary":"新增 tooltip 悬浮提示组件（包裹式 API / 150ms 延迟 / Esc 收起 / reduced-motion 兜底），同步 manifest + llms-full.txt + demo 区块，并修复 ua style 对 URL 中 // 的误判；npm run check 全绿"}
|
||||
{"time":"2026-10-23T15:50:03+08:00","id":"b02","result":"done","summary":"新增 toast 消息提示组件：四语义工厂 + showToast，右上角堆叠，默认 3s 自动消失，微动画 + reduced-motion 兜底；manifest/docs/llms 同步，check 全绿"}
|
||||
{"time":"2026-10-23T15:53:33+08:00","id":"b03","result":"done","summary":"新增 skeleton 骨架屏组件：text/rect/circle 三形状 + 扫光微动画 + reduced-motion 静态化；manifest/docs/llms/demo 同步，check 全绿"}
|
||||
{"time":"2026-10-23T16:00:11+08:00","id":"b04","result":"done","summary":"新增独立 pagination 分页器（page 信号双向绑定 + 省略号折叠 + 键盘可达），dataTable 新增 page 受控桥接实现联动；demo 联动卡片，check 全绿"}
|
||||
|
||||
Reference in New Issue
Block a user