imean-service-engine-htmx-plugin 2.11.0 → 2.11.1

package/dist/index.d.mts

@@ -277,6 +277,11 @@ interface ListParams<F = Record<string, any>> {
     page?: number;
     /** 每页数量 */
     pageSize?: number;
+    /**
+     * Cassandra 风格分页游标
+     * 用于请求下一页（由上一次响应返回）
+     */
+    pageState?: string;
     /** 排序字段 */
     sortBy?: string;
     /** 排序方向 */
@@ -290,14 +295,19 @@ interface ListParams<F = Record<string, any>> {
 interface ListResult<T> {
     /** 数据列表 */
     items: T[];
-    /** 总数量 */
-    total: number;
-    /** 当前页码 */
-    page: number;
+    /** 总数量（传统分页才有） */
+    total?: number;
+    /** 当前页码（传统分页才有） */
+    page?: number;
     /** 每页数量 */
     pageSize: number;
-    /** 总页数 */
-    totalPages: number;
+    /** 总页数（传统分页才有） */
+    totalPages?: number;
+    /**
+     * Cassandra 风格分页游标
+     * 用于请求下一页
+     */
+    pageState?: string | null;
 }
 /**
  * 用户信息接口
@@ -942,10 +952,12 @@ interface TableProps<T = any> {
     }>;
     /** 分页信息 */
     pagination?: {
-        page: number;
+        page?: number;
         pageSize: number;
-        total: number;
-        totalPages: number;
+        total?: number;
+        totalPages?: number;
+        nextPageState?: string | null;
+        itemCount?: number;
         baseUrl: string;
         currentParams?: Record<string, string | number | undefined>;
     };
@@ -975,14 +987,18 @@ declare function Table<T extends {
  * 分页组件
  */
 interface PaginationProps {
-    /** 当前页码 */
-    page: number;
+    /** 当前页码（传统分页） */
+    page?: number;
     /** 每页数量 */
     pageSize: number;
-    /** 总记录数 */
-    total: number;
-    /** 总页数 */
-    totalPages: number;
+    /** 总记录数（传统分页） */
+    total?: number;
+    /** 总页数（传统分页） */
+    totalPages?: number;
+    /** Cassandra 风格分页游标（用于下一页） */
+    nextPageState?: string | null;
+    /** 当前页数据数量（游标分页用于展示） */
+    itemCount?: number;
     /** 基础 URL */
     baseUrl: string;
     /** 当前查询参数（用于保留筛选条件等） */

package/dist/index.d.ts

@@ -277,6 +277,11 @@ interface ListParams<F = Record<string, any>> {
     page?: number;
     /** 每页数量 */
     pageSize?: number;
+    /**
+     * Cassandra 风格分页游标
+     * 用于请求下一页（由上一次响应返回）
+     */
+    pageState?: string;
     /** 排序字段 */
     sortBy?: string;
     /** 排序方向 */
@@ -290,14 +295,19 @@ interface ListParams<F = Record<string, any>> {
 interface ListResult<T> {
     /** 数据列表 */
     items: T[];
-    /** 总数量 */
-    total: number;
-    /** 当前页码 */
-    page: number;
+    /** 总数量（传统分页才有） */
+    total?: number;
+    /** 当前页码（传统分页才有） */
+    page?: number;
     /** 每页数量 */
     pageSize: number;
-    /** 总页数 */
-    totalPages: number;
+    /** 总页数（传统分页才有） */
+    totalPages?: number;
+    /**
+     * Cassandra 风格分页游标
+     * 用于请求下一页
+     */
+    pageState?: string | null;
 }
 /**
  * 用户信息接口
@@ -942,10 +952,12 @@ interface TableProps<T = any> {
     }>;
     /** 分页信息 */
     pagination?: {
-        page: number;
+        page?: number;
         pageSize: number;
-        total: number;
-        totalPages: number;
+        total?: number;
+        totalPages?: number;
+        nextPageState?: string | null;
+        itemCount?: number;
         baseUrl: string;
         currentParams?: Record<string, string | number | undefined>;
     };
@@ -975,14 +987,18 @@ declare function Table<T extends {
  * 分页组件
  */
 interface PaginationProps {
-    /** 当前页码 */
-    page: number;
+    /** 当前页码（传统分页） */
+    page?: number;
     /** 每页数量 */
     pageSize: number;
-    /** 总记录数 */
-    total: number;
-    /** 总页数 */
-    totalPages: number;
+    /** 总记录数（传统分页） */
+    total?: number;
+    /** 总页数（传统分页） */
+    totalPages?: number;
+    /** Cassandra 风格分页游标（用于下一页） */
+    nextPageState?: string | null;
+    /** 当前页数据数量（游标分页用于展示） */
+    itemCount?: number;
     /** 基础 URL */
     baseUrl: string;
     /** 当前查询参数（用于保留筛选条件等） */

package/dist/index.js

@@ -2409,15 +2409,18 @@ function Pagination(props) {
     pageSize,
     total,
     totalPages,
+    nextPageState,
+    itemCount,
     baseUrl,
     currentParams = {}
   } = props;
-  if (totalPages <= 1) {
+  const isCursorPagination = totalPages === void 0 && total === void 0;
+  if (!isCursorPagination && (totalPages ?? 0) <= 1) {
     return null;
   }
-  const start = (page - 1) * pageSize + 1;
-  const end = Math.min(page * pageSize, total);
-  const buildUrl = (targetPage) => {
+  const start = page && !isCursorPagination ? (page - 1) * pageSize + 1 : void 0;
+  const end = page && total && !isCursorPagination ? Math.min(page * pageSize, total) : void 0;
+  const buildPageUrl = (targetPage) => {
     const url = new URL(baseUrl, "http://localhost");
     for (const [key, value] of Object.entries(currentParams)) {
       if (value !== void 0 && value !== null && value !== "") {
@@ -2425,47 +2428,89 @@ function Pagination(props) {
       }
     }
     url.searchParams.set("page", String(targetPage));
+    url.searchParams.delete("pageState");
     return url.pathname + url.search;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "px-6 py-4 flex items-center justify-between border-t border-gray-200 bg-gray-50", "data-testid": "pagination", "aria-label": "\u5206\u9875\u5BFC\u822A", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700", "data-testid": "pagination-info", children: [
-      "\u663E\u793A ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-start", children: start }),
-      " \u5230",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-end", children: end }),
-      " \u6761\uFF0C\u5171",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-total", children: total }),
-      " \u6761"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", "data-testid": "pagination-controls", children: [
-      page > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "secondary",
-          size: "sm",
-          href: buildUrl(page - 1),
-          "hx-get": buildUrl(page - 1),
-          "data-testid": "pagination-prev",
-          "aria-label": "\u4E0A\u4E00\u9875",
-          children: "\u4E0A\u4E00\u9875"
-        }
-      ),
-      page < totalPages && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "secondary",
-          size: "sm",
-          href: buildUrl(page + 1),
-          "hx-get": buildUrl(page + 1),
-          "data-testid": "pagination-next",
-          "aria-label": "\u4E0B\u4E00\u9875",
-          children: "\u4E0B\u4E00\u9875"
-        }
-      )
-    ] })
-  ] });
+  const buildCursorUrl = (pageState) => {
+    const url = new URL(baseUrl, "http://localhost");
+    for (const [key, value] of Object.entries(currentParams)) {
+      if (value !== void 0 && value !== null && value !== "") {
+        url.searchParams.set(key, String(value));
+      }
+    }
+    url.searchParams.set("pageState", pageState);
+    url.searchParams.delete("page");
+    return url.pathname + url.search;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: "px-6 py-4 flex items-center justify-between border-t border-gray-200 bg-gray-50",
+      "data-testid": "pagination",
+      "aria-label": "\u5206\u9875\u5BFC\u822A",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-700", "data-testid": "pagination-info", children: isCursorPagination ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "\u672C\u9875",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-count", children: itemCount ?? 0 }),
+          " ",
+          "\u6761"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "\u663E\u793A",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-start", children: start }),
+          " ",
+          "\u5230",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-end", children: end }),
+          " ",
+          "\u6761\uFF0C\u5171",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-testid": "pagination-total", children: total }),
+          " ",
+          "\u6761"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", "data-testid": "pagination-controls", children: [
+          !isCursorPagination && page && totalPages && page > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              href: buildPageUrl(page - 1),
+              "hx-get": buildPageUrl(page - 1),
+              "data-testid": "pagination-prev",
+              "aria-label": "\u4E0A\u4E00\u9875",
+              children: "\u4E0A\u4E00\u9875"
+            }
+          ),
+          !isCursorPagination && page && totalPages && page < totalPages && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              href: buildPageUrl(page + 1),
+              "hx-get": buildPageUrl(page + 1),
+              "data-testid": "pagination-next",
+              "aria-label": "\u4E0B\u4E00\u9875",
+              children: "\u4E0B\u4E00\u9875"
+            }
+          ),
+          isCursorPagination && nextPageState ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              href: buildCursorUrl(nextPageState),
+              "hx-get": buildCursorUrl(nextPageState),
+              "data-testid": "pagination-next",
+              "aria-label": "\u4E0B\u4E00\u9875",
+              children: "\u4E0B\u4E00\u9875"
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
 }
 var STYLES = {
   header: {
@@ -2759,6 +2804,7 @@ function ListPage(props) {
     pageSize: params.pageSize,
     sortBy: params.sortBy,
     sortOrder: params.sortOrder,
+    pageState: params.pageState,
     ...params.filters
     // 包含所有筛选条件
   };
@@ -2803,14 +2849,16 @@ function ListPage(props) {
           method: action.method,
           target: action.target
         })) : void 0,
-        pagination: {
+        pagination: result.totalPages !== void 0 || result.pageState !== void 0 ? {
           page: result.page,
           pageSize: result.pageSize,
           total: result.total,
           totalPages: result.totalPages,
+          nextPageState: result.pageState,
+          itemCount: result.items.length,
           baseUrl: listPath,
           currentParams
-        },
+        } : void 0,
         tableActions,
         actionStyle: "link"
       }
@@ -2821,7 +2869,13 @@ function ListPage(props) {
 // src/utils/params.ts
 function parseListParams(ctx, filterSchema) {
   const url = new URL(ctx.req.url);
-  const systemParams = /* @__PURE__ */ new Set(["page", "pageSize", "sortBy", "sortOrder"]);
+  const systemParams = /* @__PURE__ */ new Set([
+    "page",
+    "pageSize",
+    "sortBy",
+    "sortOrder",
+    "pageState"
+  ]);
   const filters = {};
   for (const [key, value] of url.searchParams.entries()) {
     if (!systemParams.has(key)) {
@@ -2854,6 +2908,7 @@ function parseListParams(ctx, filterSchema) {
     pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10),
     sortBy: url.searchParams.get("sortBy") || void 0,
     sortOrder: url.searchParams.get("sortOrder") || void 0,
+    pageState: url.searchParams.get("pageState") || void 0,
     filters: processedFilters
   };
 }

package/dist/index.mjs

@@ -2407,15 +2407,18 @@ function Pagination(props) {
     pageSize,
     total,
     totalPages,
+    nextPageState,
+    itemCount,
     baseUrl,
     currentParams = {}
   } = props;
-  if (totalPages <= 1) {
+  const isCursorPagination = totalPages === void 0 && total === void 0;
+  if (!isCursorPagination && (totalPages ?? 0) <= 1) {
     return null;
   }
-  const start = (page - 1) * pageSize + 1;
-  const end = Math.min(page * pageSize, total);
-  const buildUrl = (targetPage) => {
+  const start = page && !isCursorPagination ? (page - 1) * pageSize + 1 : void 0;
+  const end = page && total && !isCursorPagination ? Math.min(page * pageSize, total) : void 0;
+  const buildPageUrl = (targetPage) => {
     const url = new URL(baseUrl, "http://localhost");
     for (const [key, value] of Object.entries(currentParams)) {
       if (value !== void 0 && value !== null && value !== "") {
@@ -2423,47 +2426,89 @@ function Pagination(props) {
       }
     }
     url.searchParams.set("page", String(targetPage));
+    url.searchParams.delete("pageState");
     return url.pathname + url.search;
   };
-  return /* @__PURE__ */ jsxs("nav", { className: "px-6 py-4 flex items-center justify-between border-t border-gray-200 bg-gray-50", "data-testid": "pagination", "aria-label": "\u5206\u9875\u5BFC\u822A", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-700", "data-testid": "pagination-info", children: [
-      "\u663E\u793A ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-start", children: start }),
-      " \u5230",
-      " ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-end", children: end }),
-      " \u6761\uFF0C\u5171",
-      " ",
-      /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-total", children: total }),
-      " \u6761"
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", "data-testid": "pagination-controls", children: [
-      page > 1 && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          size: "sm",
-          href: buildUrl(page - 1),
-          "hx-get": buildUrl(page - 1),
-          "data-testid": "pagination-prev",
-          "aria-label": "\u4E0A\u4E00\u9875",
-          children: "\u4E0A\u4E00\u9875"
-        }
-      ),
-      page < totalPages && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          size: "sm",
-          href: buildUrl(page + 1),
-          "hx-get": buildUrl(page + 1),
-          "data-testid": "pagination-next",
-          "aria-label": "\u4E0B\u4E00\u9875",
-          children: "\u4E0B\u4E00\u9875"
-        }
-      )
-    ] })
-  ] });
+  const buildCursorUrl = (pageState) => {
+    const url = new URL(baseUrl, "http://localhost");
+    for (const [key, value] of Object.entries(currentParams)) {
+      if (value !== void 0 && value !== null && value !== "") {
+        url.searchParams.set(key, String(value));
+      }
+    }
+    url.searchParams.set("pageState", pageState);
+    url.searchParams.delete("page");
+    return url.pathname + url.search;
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: "px-6 py-4 flex items-center justify-between border-t border-gray-200 bg-gray-50",
+      "data-testid": "pagination",
+      "aria-label": "\u5206\u9875\u5BFC\u822A",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", "data-testid": "pagination-info", children: isCursorPagination ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "\u672C\u9875",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-count", children: itemCount ?? 0 }),
+          " ",
+          "\u6761"
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          "\u663E\u793A",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-start", children: start }),
+          " ",
+          "\u5230",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-end", children: end }),
+          " ",
+          "\u6761\uFF0C\u5171",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "pagination-total", children: total }),
+          " ",
+          "\u6761"
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", "data-testid": "pagination-controls", children: [
+          !isCursorPagination && page && totalPages && page > 1 && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              href: buildPageUrl(page - 1),
+              "hx-get": buildPageUrl(page - 1),
+              "data-testid": "pagination-prev",
+              "aria-label": "\u4E0A\u4E00\u9875",
+              children: "\u4E0A\u4E00\u9875"
+            }
+          ),
+          !isCursorPagination && page && totalPages && page < totalPages && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              href: buildPageUrl(page + 1),
+              "hx-get": buildPageUrl(page + 1),
+              "data-testid": "pagination-next",
+              "aria-label": "\u4E0B\u4E00\u9875",
+              children: "\u4E0B\u4E00\u9875"
+            }
+          ),
+          isCursorPagination && nextPageState ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              href: buildCursorUrl(nextPageState),
+              "hx-get": buildCursorUrl(nextPageState),
+              "data-testid": "pagination-next",
+              "aria-label": "\u4E0B\u4E00\u9875",
+              children: "\u4E0B\u4E00\u9875"
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
 }
 var STYLES = {
   header: {
@@ -2757,6 +2802,7 @@ function ListPage(props) {
     pageSize: params.pageSize,
     sortBy: params.sortBy,
     sortOrder: params.sortOrder,
+    pageState: params.pageState,
     ...params.filters
     // 包含所有筛选条件
   };
@@ -2801,14 +2847,16 @@ function ListPage(props) {
           method: action.method,
           target: action.target
         })) : void 0,
-        pagination: {
+        pagination: result.totalPages !== void 0 || result.pageState !== void 0 ? {
           page: result.page,
           pageSize: result.pageSize,
           total: result.total,
           totalPages: result.totalPages,
+          nextPageState: result.pageState,
+          itemCount: result.items.length,
           baseUrl: listPath,
           currentParams
-        },
+        } : void 0,
         tableActions,
         actionStyle: "link"
       }
@@ -2819,7 +2867,13 @@ function ListPage(props) {
 // src/utils/params.ts
 function parseListParams(ctx, filterSchema) {
   const url = new URL(ctx.req.url);
-  const systemParams = /* @__PURE__ */ new Set(["page", "pageSize", "sortBy", "sortOrder"]);
+  const systemParams = /* @__PURE__ */ new Set([
+    "page",
+    "pageSize",
+    "sortBy",
+    "sortOrder",
+    "pageState"
+  ]);
   const filters = {};
   for (const [key, value] of url.searchParams.entries()) {
     if (!systemParams.has(key)) {
@@ -2852,6 +2906,7 @@ function parseListParams(ctx, filterSchema) {
     pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10),
     sortBy: url.searchParams.get("sortBy") || void 0,
     sortOrder: url.searchParams.get("sortOrder") || void 0,
+    pageState: url.searchParams.get("pageState") || void 0,
     filters: processedFilters
   };
 }

package/package.json

@@ -1,9 +1,22 @@
 {
   "name": "imean-service-engine-htmx-plugin",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "HtmxAdminPlugin for IMean Service Engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsx watch examples-v2/index.ts",
+    "test": "vitest --run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --run --coverage",
+    "test:unit": "vitest --run --project unit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "dev:component": "tsx src/component-system/test.ts",
+    "prepublishOnly": "npm run build && npm run test"
+  },
   "keywords": [
     "microservice",
     "hono",
@@ -38,17 +51,5 @@
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.15"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsx watch examples-v2/index.ts",
-    "test": "vitest --run",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --run --coverage",
-    "test:unit": "vitest --run --project unit",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:headed": "playwright test --headed",
-    "dev:component": "tsx src/component-system/test.ts"
   }
-}
+}