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

package/dist/index.js

@@ -878,6 +878,22 @@ function convertBoolean(value) {
   }
   return value;
 }
+function convertDate(value) {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed !== "") {
+      const dateValue = new Date(trimmed);
+      if (!isNaN(dateValue.getTime())) {
+        return dateValue;
+      }
+    }
+    return value;
+  }
+  if (value instanceof Date) {
+    return value;
+  }
+  return value;
+}
 function processArrayElement(item, elementType) {
   if (typeof item === "object" && item !== null && !Array.isArray(item)) {
     const { typeName } = resolveZodType(elementType);
@@ -997,6 +1013,9 @@ function preprocessFormData(data, zodSchema) {
       case "boolean":
         processed[fieldName] = convertBoolean(value);
         break;
+      case "date":
+        processed[fieldName] = convertDate(value);
+        break;
       case "array":
         processed[fieldName] = processArrayType(value, actualSchema);
         break;
@@ -1019,6 +1038,8 @@ function convertValueByType(value, schema) {
       return convertNumber(value);
     case "boolean":
       return convertBoolean(value);
+    case "date":
+      return convertDate(value);
     default:
       return value;
   }
@@ -1244,6 +1265,11 @@ var BaseModelFeature = class extends BaseFeature {
 };
 var BaseFormFeature = class extends BaseModelFeature {
   groups;
+  options;
+  constructor(options) {
+    super(options);
+    this.options = options;
+  }
   /**
    * 设置标题和描述到 context
    */
@@ -1316,13 +1342,13 @@ var BaseFormFeature = class extends BaseModelFeature {
    * 处理请求
    */
   async handler(context) {
-    context.actions = this.getDefaultActions(context);
+    context.actions = [
+      ...this.options.actions ?? [],
+      ...this.getDefaultActions(context)
+    ];
     if (context.ctx.req.method === "GET") {
       const initialData = await this.getInitialData(context);
-      await this.setTitleAndDescription(
-        context,
-        initialData
-      );
+      await this.setTitleAndDescription(context, initialData);
       return this.renderForm(context, initialData);
     }
     const formData = preprocessFormData(context.body, this.schema);
@@ -1424,22 +1450,21 @@ var BaseFormFeature = class extends BaseModelFeature {
 
 // src/features/default-create-feature.tsx
 var DefaultCreateFeature = class extends BaseFormFeature {
-  constructor(options) {
+  createItem;
+  constructor(createOptions) {
     super({
-      ...options,
+      ...createOptions,
       name: "create",
       type: "create",
       routes: [
         { method: "get", path: "/new" },
         { method: "post", path: "" }
       ],
-      permission: options.permission || "create"
+      permission: createOptions.permission || "create"
     });
-    this.options = options;
-    this.createItem = options.createItem;
-    this.groups = options.groups;
+    this.createItem = createOptions.createItem;
+    this.groups = createOptions.groups;
   }
-  createItem;
   getFormAction() {
     return "create";
   }
@@ -1964,24 +1989,23 @@ var DefaultDetailFeature = class extends BaseModelFeature {
 
 // src/features/default-edit-feature.tsx
 var DefaultEditFeature = class extends BaseFormFeature {
-  constructor(options) {
+  getItem;
+  updateItem;
+  constructor(editOptions) {
     super({
-      ...options,
+      ...editOptions,
       name: "edit",
       type: "edit",
       routes: [
         { method: "get", path: "/edit/:id" },
         { method: "put", path: "/:id" }
       ],
-      permission: options.permission || "edit"
+      permission: editOptions.permission || "edit"
     });
-    this.options = options;
-    this.getItem = options.getItem;
-    this.updateItem = options.updateItem;
-    this.groups = options.groups;
+    this.getItem = editOptions.getItem;
+    this.updateItem = editOptions.updateItem;
+    this.groups = editOptions.groups;
   }
-  getItem;
-  updateItem;
   getFormAction() {
     return "edit";
   }
@@ -2023,154 +2047,315 @@ var DefaultEditFeature = class extends BaseFormFeature {
     return void 0;
   }
 };
-function FilterForm(props) {
-  const {
-    fields,
-    listPath,
-    currentFilters = {}
-  } = props;
-  function getFieldValue(field) {
-    const value = currentFilters[field.name];
-    if (value === null || value === void 0 || value === "") {
-      return "";
+function SubmitButton() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "submit",
+      className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm",
+      children: "\u7B5B\u9009"
     }
-    return String(value);
-  }
-  function getCheckboxValue(field) {
-    const value = currentFilters[field.name];
-    if (value === "true" || value === true) {
-      return true;
+  );
+}
+function ResetButton({ listPath }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: listPath,
+      "hx-get": listPath,
+      className: "px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm",
+      children: "\u91CD\u7F6E"
     }
-    return false;
-  }
+  );
+}
+function AddConditionButton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "x-show": "getAvailableFields().length > 0",
+      className: "px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium text-sm flex items-center gap-2",
+      "x-on:click": "showFieldSelector=!showFieldSelector",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 4v16m8-8H4"
+              }
+            )
+          }
+        ),
+        "\u6DFB\u52A0\u7B5B\u9009\u6761\u4EF6"
+      ]
+    }
+  );
+}
+function FieldInput() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("template", { "x-if": "getField(condition.fieldName)?.type === 'checkbox'", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        className: "w-full h-full px-3 py-2 border-0 rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm appearance-none",
+        "x-bind:name": "condition.fieldName",
+        "x-model": "condition.value",
+        autocomplete: "off",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "true", children: "\u662F" }),
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "false", children: "\u5426" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("template", { "x-if": "getField(condition.fieldName)?.type === 'select' && getField(condition.fieldName)?.options", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        className: "w-full h-full px-3 py-2 border-0 rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm appearance-none",
+        "x-bind:name": "condition.fieldName",
+        "x-model": "condition.value",
+        autocomplete: "off",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "template",
+          {
+            "x-for": "option in getField(condition.fieldName)?.options",
+            "x-bind:key": "option.value",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "option",
+              {
+                "x-bind:value": "String(option.value)",
+                "x-text": "option.label"
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("template", { "x-if": "getField(condition.fieldName)?.type === 'date'", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "date",
+        className: "w-full h-full px-3 py-2 border-0 rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm",
+        "x-bind:name": "condition.fieldName",
+        "x-model": "condition.value",
+        autocomplete: "off"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("template", { "x-if": "getField(condition.fieldName)?.type === 'number'", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        className: "w-full h-full px-3 py-2 border-0 rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm",
+        "x-bind:name": "condition.fieldName",
+        "x-bind:placeholder": "getField(condition.fieldName)?.placeholder || '\u8BF7\u8F93\u5165' + getField(condition.fieldName)?.label",
+        "x-bind:step": "getField(condition.fieldName)?.step",
+        "x-model": "condition.value",
+        autocomplete: "off"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("template", { "x-if": "getField(condition.fieldName)?.type === 'email'", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "email",
+        className: "w-full h-full px-3 py-2 border-0 rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm",
+        "x-bind:name": "condition.fieldName",
+        "x-bind:placeholder": "getField(condition.fieldName)?.placeholder || '\u8BF7\u8F93\u5165' + getField(condition.fieldName)?.label",
+        "x-model": "condition.value",
+        autocomplete: "off"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("template", { "x-if": "!['checkbox', 'select', 'date', 'number', 'email'].includes(getField(condition.fieldName)?.type || '')", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        className: "w-full h-full px-3 py-2 border-0 rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm",
+        "x-bind:name": "condition.fieldName",
+        "x-bind:placeholder": "getField(condition.fieldName)?.placeholder || '\u8BF7\u8F93\u5165' + getField(condition.fieldName)?.label",
+        "x-model": "condition.value",
+        autocomplete: "off"
+      }
+    ) })
+  ] });
+}
+function FieldSelectorDropdown({ fields }) {
+  const transitionProps = {
+    "x-show": "showFieldSelector",
+    "x-transition:enter": "transition ease-out duration-200",
+    "x-transition:enter-start": "opacity-0 scale-95",
+    "x-transition:enter-end": "opacity-100 scale-100",
+    "x-transition:leave": "transition ease-in duration-150",
+    "x-transition:leave-start": "opacity-100 scale-100",
+    "x-transition:leave-end": "opacity-0 scale-95"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute top-full left-0 mt-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg z-10",
+      ...transitionProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-semibold text-gray-600 mb-2", children: "\u9009\u62E9\u7B5B\u9009\u5B57\u6BB5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-64 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "template",
+          {
+            "x-for": "field in getAvailableFields()",
+            "x-bind:key": "field.name",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition-colors",
+                "x-on:click": "onFieldSelected(field.name)",
+                "x-text": "field.label"
+              }
+            )
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function FilterConditionItem({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-stretch h-10 bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        className: "px-3 flex items-center text-xs font-semibold text-gray-600 whitespace-nowrap",
+        "x-text": "getFieldLabel(condition.fieldName)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full border-l border-r border-gray-300", children }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "px-3 flex items-center justify-center text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors",
+        "x-on:click": "removeCondition(condition.id)",
+        title: "\u5220\u9664\u6B64\u7B5B\u9009\u6761\u4EF6",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function DynamicFilters(props) {
+  const { fields, listPath, currentFilters = {} } = props;
   if (fields.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200 rounded-lg shadow-sm p-4 mb-6", "data-testid": "filter-form-container", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const systemParams = /* @__PURE__ */ new Set(["page", "pageSize", "sortBy", "sortOrder"]);
+  const initialConditions = [];
+  for (const field of fields) {
+    if (currentFilters.hasOwnProperty(field.name) && !systemParams.has(field.name)) {
+      const value = currentFilters[field.name];
+      initialConditions.push({
+        id: `condition-${Date.now()}-${Math.random()}`,
+        fieldName: field.name,
+        value: value === null || value === void 0 ? "" : String(value)
+      });
+    }
+  }
+  const availableFields = fields.map((field) => ({
+    name: field.name,
+    label: field.label,
+    type: field.type,
+    options: field.options,
+    step: field.step,
+    placeholder: field.placeholder
+  }));
+  const escapedListPath = listPath.replace(/'/g, "\\'");
+  const alpineData = `{
+      conditions: ${JSON.stringify(initialConditions)},
+      availableFields: ${JSON.stringify(availableFields)},
+      showFieldSelector: false,
+      listPath: '${escapedListPath}',
+      
+      
+      // \u83B7\u53D6\u5B57\u6BB5\u5B9A\u4E49
+      getField(fieldName) {
+        return this.availableFields.find(f => f.name === fieldName);
+      },
+      
+      // \u83B7\u53D6\u5B57\u6BB5\u6807\u7B7E
+      getFieldLabel(fieldName) {
+        const field = this.getField(fieldName);
+        return field ? field.label : fieldName;
+      },
+      
+      // \u68C0\u67E5\u5B57\u6BB5\u662F\u5426\u5DF2\u88AB\u4F7F\u7528
+      isFieldUsed(fieldName) {
+        return this.conditions.some(c => c.fieldName === fieldName);
+      },
+      
+      // \u83B7\u53D6\u6240\u6709\u53EF\u7528\u5B57\u6BB5\uFF08\u672A\u4F7F\u7528\u7684\u5B57\u6BB5\uFF09
+      getAvailableFields() {
+        return this.availableFields.filter(f => !this.isFieldUsed(f.name));
+      },
+      
+      // \u5220\u9664\u6761\u4EF6
+      removeCondition(id) {
+        this.conditions = this.conditions.filter(c => c.id !== id);
+      },
+      
+      // \u5B57\u6BB5\u9009\u62E9\u56DE\u8C03\uFF08\u4ECE\u6D6E\u5C42\u9009\u62E9\u5B57\u6BB5\u65F6\u8C03\u7528\uFF09
+      onFieldSelected(fieldName) {
+        // \u68C0\u67E5\u5B57\u6BB5\u662F\u5426\u53EF\u7528
+        if (!this.isFieldUsed(fieldName)) {
+          const newCondition = {
+            id: 'condition-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9),
+            fieldName: fieldName,
+            value: ''
+          };
+          setTimeout(() => {
+            this.conditions.push(newCondition);
+          }, 200);
+        }
+        this.showFieldSelector = false;
+      }
+    }`;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200 rounded-lg shadow-sm p-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
     "form",
     {
       method: "get",
       action: listPath,
       "hx-get": listPath,
-      className: "space-y-4",
-      "data-testid": "filter-form",
-      children: [
-        fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", "data-testid": `filter-field-${field.name}`, children: field.type === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pt-7", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: `filter-${field.name}`,
-              name: field.name,
-              type: "checkbox",
-              value: "true",
-              checked: getCheckboxValue(field),
-              className: "w-4 h-4 text-blue-600 bg-white border-gray-300 rounded focus:ring-blue-500 focus:ring-2",
-              "data-testid": `filter-checkbox-${field.name}`
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
-            {
-              htmlFor: `filter-${field.name}`,
-              className: "text-sm font-semibold text-gray-700 cursor-pointer",
-              "data-testid": `filter-label-${field.name}`,
-              children: field.label
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
-            {
-              htmlFor: `filter-${field.name}`,
-              className: "block text-sm font-semibold text-gray-700",
-              "data-testid": `filter-label-${field.name}`,
-              children: field.label
-            }
-          ),
-          field.type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "select",
-            {
-              id: `filter-${field.name}`,
-              name: field.name,
-              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
-              "data-testid": `filter-select-${field.name}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", selected: getFieldValue(field) === "", children: "\u5168\u90E8" }),
-                field.options?.map((option) => {
-                  const optionValue = String(option.value);
-                  const isSelected = getFieldValue(field) === optionValue;
-                  return /* @__PURE__ */ jsxRuntime.jsx("option", { value: optionValue, selected: isSelected, children: option.label }, optionValue);
-                })
-              ]
-            }
-          ) : field.type === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: `filter-${field.name}`,
-              name: field.name,
-              type: "date",
-              value: getFieldValue(field),
-              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
-              "data-testid": `filter-input-${field.name}`
-            }
-          ) : field.type === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: `filter-${field.name}`,
-              name: field.name,
-              type: "number",
-              value: getFieldValue(field),
-              placeholder: field.placeholder || `\u8BF7\u8F93\u5165${field.label}`,
-              step: field.step,
-              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
-              "data-testid": `filter-input-${field.name}`
-            }
-          ) : field.type === "email" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: `filter-${field.name}`,
-              name: field.name,
-              type: "email",
-              value: getFieldValue(field),
-              placeholder: field.placeholder || `\u8BF7\u8F93\u5165${field.label}`,
-              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
-              "data-testid": `filter-input-${field.name}`
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: `filter-${field.name}`,
-              name: field.name,
-              type: "text",
-              value: getFieldValue(field),
-              placeholder: field.placeholder || `\u8BF7\u8F93\u5165${field.label}`,
-              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
-              "data-testid": `filter-input-${field.name}`
-            }
-          )
-        ] }) }, field.name)) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "submit",
-              className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium",
-              "data-testid": "filter-submit-button",
-              children: "\u7B5B\u9009"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: listPath,
-              "hx-get": listPath,
-              className: "px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors font-medium",
-              "data-testid": "filter-reset-button",
-              children: "\u91CD\u7F6E"
-            }
-          )
+      className: "space-y-4 mb-0",
+      "x-data": alpineData,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("template", { "x-for": "condition in conditions", "x-bind:key": "condition.id", children: /* @__PURE__ */ jsxRuntime.jsx(FilterConditionItem, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldInput, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AddConditionButton, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(FieldSelectorDropdown, { fields })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ResetButton, { listPath })
         ] })
-      ]
+      ] })
     }
   ) });
 }
@@ -2224,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 !== "") {
@@ -2240,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: {
@@ -2574,6 +2804,7 @@ function ListPage(props) {
     pageSize: params.pageSize,
     sortBy: params.sortBy,
     sortOrder: params.sortOrder,
+    pageState: params.pageState,
     ...params.filters
     // 包含所有筛选条件
   };
@@ -2596,7 +2827,7 @@ function ListPage(props) {
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
     filterFields && filterFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      FilterForm,
+      DynamicFilters,
       {
         fields: filterFields,
         listPath,
@@ -2618,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"
       }
@@ -2634,21 +2867,49 @@ function ListPage(props) {
 }
 
 // src/utils/params.ts
-function parseListParams(ctx) {
+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) && value !== "") {
+    if (!systemParams.has(key)) {
       filters[key] = value;
     }
   }
+  let processedFilters = void 0;
+  if (filterSchema && Object.keys(filters).length > 0) {
+    const emptyStringFields = /* @__PURE__ */ new Set();
+    for (const [key, value] of Object.entries(filters)) {
+      if (value === "") {
+        emptyStringFields.add(key);
+      }
+    }
+    const preprocessed = preprocessFormData(filters, filterSchema);
+    const cleanedFilters = {};
+    for (const [key, value] of Object.entries(preprocessed)) {
+      if (emptyStringFields.has(key)) {
+        cleanedFilters[key] = "";
+      } else if (value !== void 0 && value !== null) {
+        cleanedFilters[key] = value;
+      }
+    }
+    processedFilters = Object.keys(cleanedFilters).length > 0 ? cleanedFilters : void 0;
+  } else if (Object.keys(filters).length > 0) {
+    processedFilters = filters;
+  }
   return {
     page: parseInt(url.searchParams.get("page") || "1", 10),
     pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10),
     sortBy: url.searchParams.get("sortBy") || void 0,
     sortOrder: url.searchParams.get("sortOrder") || void 0,
-    filters: Object.keys(filters).length > 0 ? filters : void 0
+    pageState: url.searchParams.get("pageState") || void 0,
+    filters: processedFilters
   };
 }
 var DefaultListFeature = class extends BaseModelFeature {
@@ -2677,7 +2938,7 @@ var DefaultListFeature = class extends BaseModelFeature {
     const prefix = context.prefix || "";
     const basePath = `${prefix}/${model.modelName}`;
     const hasCreate = model.features.get("create") !== void 0;
-    const actions = [];
+    const actions = [...this.options.actions ?? []];
     if (hasCreate) {
       const createMode = this.openMode?.create || "dialog";
       const createUrl = createMode === "dialog" ? `${basePath}/new?dialog=true` : `${basePath}/new`;
@@ -2699,8 +2960,10 @@ var DefaultListFeature = class extends BaseModelFeature {
     return actions;
   }
   async handler(context) {
-    const params = parseListParams(context.ctx);
-    const result = await this.getList(params);
+    const params = this.filterSchema ? parseListParams(context.ctx, this.filterSchema) : parseListParams(context.ctx);
+    const result = await this.getList(
+      params
+    );
     context.actions = this.getDefaultActions(context);
     const title = this.options?.title;
     if (typeof title === "function") {
@@ -5431,9 +5694,9 @@ exports.DefaultEditFeature = DefaultEditFeature;
 exports.DefaultListFeature = DefaultListFeature;
 exports.DetailFieldRenderer = DetailFieldRenderer;
 exports.Dialog = Dialog;
+exports.DynamicFilters = DynamicFilters;
 exports.EmptyState = EmptyState;
 exports.ErrorAlert = ErrorAlert;
-exports.FilterForm = FilterForm;
 exports.FragmentFeature = FragmentFeature;
 exports.Header = Header;
 exports.HtmxAdminPlugin = HtmxAdminPlugin;