imean-service-engine-htmx-plugin 2.1.0 → 2.2.0

package/dist/index.mjs

@@ -293,144 +293,350 @@ function getFieldValue(field, initialData) {
     if (value === null || value === void 0) {
       return "";
     }
+    if (typeof value === "object") {
+      if (value instanceof Date) {
+        return value.toISOString();
+      }
+      try {
+        return JSON.stringify(value);
+      } catch (e) {
+        return "";
+      }
+    }
     return String(value);
   }
   return "";
 }
+function isJsonString(value) {
+  if (!value || typeof value !== "string") {
+    return false;
+  }
+  const trimmed = value.trim();
+  return trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]");
+}
+function formatJsonString(value) {
+  if (!value || typeof value !== "string") {
+    return value;
+  }
+  try {
+    const parsed = JSON.parse(value);
+    return JSON.stringify(parsed, null, 2);
+  } catch (e) {
+    return value;
+  }
+}
+function renderFormField(field, initialData, formFieldRenderers) {
+  const value = getFieldValue(field, initialData);
+  const customRenderer = formFieldRenderers?.[field.name];
+  if (customRenderer) {
+    let parsedValue = null;
+    if (value && isJsonString(value)) {
+      try {
+        parsedValue = JSON.parse(value);
+      } catch (e) {
+        parsedValue = null;
+      }
+    } else if (value) {
+      parsedValue = value;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `field-${field.name}`, children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: field.name,
+          className: "block text-sm font-semibold text-gray-700",
+          "data-testid": `label-${field.name}`,
+          children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { children: customRenderer({
+        field,
+        value: parsedValue,
+        initialData,
+        fieldName: field.name
+      }) }),
+      field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
+    ] }, field.name);
+  }
+  const shouldUseTextarea = field.type === "textarea" || value && isJsonString(value) && field.type !== "select";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `field-${field.name}`, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: field.name,
+        className: "block text-sm font-semibold text-gray-700",
+        "data-testid": `label-${field.name}`,
+        children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    shouldUseTextarea ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: field.name,
+        name: field.name,
+        required: field.required,
+        placeholder: field.placeholder || (isJsonString(value) ? "JSON \u683C\u5F0F\u6570\u636E" : ""),
+        rows: isJsonString(value) ? 10 : 4,
+        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 resize-y font-mono text-sm",
+        "data-testid": `input-${field.name}`,
+        children: isJsonString(value) ? formatJsonString(value) : value
+      },
+      `${field.name}-${value}`
+    ) : field.type === "select" ? /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: field.name,
+        name: field.name,
+        required: field.required,
+        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": `select-${field.name}`,
+        children: [
+          !field.required && /* @__PURE__ */ jsx("option", { value: "", selected: !value || value === "", children: "\u8BF7\u9009\u62E9" }),
+          field.options && field.options.length > 0 ? field.options.map((option) => {
+            const optionValue = String(option.value);
+            const isSelected = value === optionValue;
+            return /* @__PURE__ */ jsx(
+              "option",
+              {
+                value: optionValue,
+                selected: isSelected,
+                children: option.label
+              },
+              optionValue
+            );
+          }) : /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u6682\u65E0\u9009\u9879" })
+        ]
+      },
+      `${field.name}-${value || ""}`
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: field.type || "text",
+        id: field.name,
+        name: field.name,
+        required: field.required,
+        placeholder: field.placeholder,
+        step: field.type === "number" ? field.step ?? void 0 : void 0,
+        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",
+        value,
+        "data-testid": `input-${field.name}`
+      },
+      `${field.name}-${value}`
+    ),
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
+  ] }, field.name);
+}
 function FormPage(props) {
-  const { fields, submitUrl, method = "post", initialData, formId } = props;
+  const { fields, groups, submitUrl, method = "post", initialData, formId, isDialog = false, formFieldRenderers } = props;
   const finalFormId = formId || `form-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   if (process.env.NODE_ENV === "development" && initialData) {
+    const fieldNames = fields ? fields.map((f) => f.name).join(", ") : groups ? groups.map((g) => g.fields.map((f) => f.name).join(", ")).join(" | ") : "";
     console.log(
-      `[FormPage] initialData: ${JSON.stringify(initialData)}, fields: ${fields.map((f) => f.name).join(", ")}`
+      `[FormPage] initialData: ${JSON.stringify(initialData)}, fields: ${fieldNames}`
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: "w-full", "data-testid": "form-container", children: /* @__PURE__ */ jsxs(
-    "form",
-    {
-      id: finalFormId,
-      method: method === "put" ? "post" : method,
-      action: submitUrl,
-      "hx-boost": "true",
-      "hx-method": method === "put" ? "put" : void 0,
-      "hx-indicator": "#form-loading-indicator",
-      className: "space-y-6",
-      "data-testid": "form",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            id: "form-loading-indicator",
-            className: "htmx-indicator fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 z-50",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  className: "animate-spin h-4 w-4",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "circle",
-                      {
-                        className: "opacity-25",
-                        cx: "12",
-                        cy: "12",
-                        r: "10",
-                        stroke: "currentColor",
-                        strokeWidth: "4"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        className: "opacity-75",
-                        fill: "currentColor",
-                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "\u63D0\u4EA4\u4E2D..." })
-            ]
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-testid": "form-container", "x-data": `{ activeTab: 0 }`, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: "form-loading-indicator",
+        className: "htmx-indicator fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 z-50",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "\u63D0\u4EA4\u4E2D..." })
+        ]
+      }
+    ),
+    groups && groups.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: `sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm ${isDialog ? "px-6" : "-mx-6 px-6 -mt-6"}`, children: /* @__PURE__ */ jsx("nav", { className: "flex -mb-px w-full", "aria-label": "Tabs", "data-testid": "form-tabs", children: groups.map((group, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "x-on:click": `activeTab = ${index}`,
+          "x-bind:class": `activeTab === ${index} ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'`,
+          className: "px-6 py-4 text-sm font-medium border-b-2 transition-colors duration-150 whitespace-nowrap flex-1 text-center",
+          "data-testid": `form-tab-${index}`,
+          children: group.label
+        },
+        index
+      )) }) }),
+      /* @__PURE__ */ jsx(
+        "form",
+        {
+          id: finalFormId,
+          method: method === "put" ? "post" : method,
+          action: submitUrl,
+          "hx-boost": "true",
+          ...method === "put" ? { "hx-put": submitUrl } : {},
+          "hx-indicator": "#form-loading-indicator",
+          "data-testid": "form",
+          className: isDialog ? "p-6" : "mt-6",
+          children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6", children: groups.map((group, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "x-show": `activeTab === ${index}`,
+              className: "space-y-6",
+              "data-testid": `form-tab-content-${index}`,
+              children: group.fields.map((field) => renderFormField(field, initialData, formFieldRenderers))
+            },
+            index
+          )) }) })
+        }
+      )
+    ] }) : (
+      /* 平铺模式（向后兼容） */
+      /* @__PURE__ */ jsx(
+        "form",
+        {
+          id: finalFormId,
+          method: method === "put" ? "post" : method,
+          action: submitUrl,
+          "hx-boost": "true",
+          ...method === "put" ? { "hx-put": submitUrl } : {},
+          "hx-indicator": "#form-loading-indicator",
+          className: "space-y-6",
+          "data-testid": "form",
+          children: fields && fields.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6 space-y-6", children: fields.map((field) => renderFormField(field, initialData, formFieldRenderers)) }) })
+        }
+      )
+    )
+  ] });
+}
+
+// src/utils/form-data-processor.ts
+function preprocessFormData(data, zodSchema) {
+  if (!zodSchema) {
+    return data;
+  }
+  const processed = { ...data };
+  const def = zodSchema._def;
+  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+  if (!shape || typeof shape !== "object") {
+    return processed;
+  }
+  for (const [fieldName, fieldSchema] of Object.entries(shape)) {
+    const value = processed[fieldName];
+    if (value === void 0) {
+      continue;
+    }
+    if (value === null) {
+      processed[fieldName] = void 0;
+      continue;
+    }
+    if (value === "") {
+      processed[fieldName] = void 0;
+      continue;
+    }
+    const fieldDef = fieldSchema._def;
+    let typeName = fieldDef?.type || fieldDef?.typeName;
+    if (typeName === "optional" || typeName === "ZodOptional") {
+      const innerType = fieldDef.innerType;
+      if (innerType) {
+        const innerDef = innerType._def;
+        typeName = innerDef?.type || innerDef?.typeName;
+      }
+    }
+    if (typeName === "number" || typeName === "ZodNumber") {
+      if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (trimmed !== "") {
+          const numValue = Number(trimmed);
+          if (!isNaN(numValue)) {
+            processed[fieldName] = numValue;
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6 space-y-6", children: fields.map((field) => {
-          const value = getFieldValue(field, initialData);
-          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `field-${field.name}`, children: [
-            /* @__PURE__ */ jsxs(
-              "label",
-              {
-                htmlFor: field.name,
-                className: "block text-sm font-semibold text-gray-700",
-                "data-testid": `label-${field.name}`,
-                children: [
-                  field.label,
-                  field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-                ]
-              }
-            ),
-            field.type === "textarea" ? /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                id: field.name,
-                name: field.name,
-                required: field.required,
-                placeholder: field.placeholder,
-                rows: 4,
-                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 resize-y",
-                value,
-                "data-testid": `input-${field.name}`
-              },
-              `${field.name}-${value}`
-            ) : field.type === "select" ? /* @__PURE__ */ jsxs(
-              "select",
-              {
-                id: field.name,
-                name: field.name,
-                required: field.required,
-                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": `select-${field.name}`,
-                children: [
-                  !field.required && /* @__PURE__ */ jsx("option", { value: "", selected: !value || value === "", children: "\u8BF7\u9009\u62E9" }),
-                  field.options && field.options.length > 0 ? field.options.map((option) => {
-                    const optionValue = String(option.value);
-                    const isSelected = value === optionValue;
-                    return /* @__PURE__ */ jsx(
-                      "option",
-                      {
-                        value: optionValue,
-                        selected: isSelected,
-                        children: option.label
-                      },
-                      optionValue
-                    );
-                  }) : /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u6682\u65E0\u9009\u9879" })
-                ]
-              },
-              `${field.name}-${value || ""}`
-            ) : /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: field.type || "text",
-                id: field.name,
-                name: field.name,
-                required: field.required,
-                placeholder: field.placeholder,
-                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",
-                value,
-                "data-testid": `input-${field.name}`
-              },
-              `${field.name}-${value}`
-            ),
-            field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
-          ] }, field.name);
-        }) }) })
-      ]
+        }
+      } else if (typeof value === "number") {
+        processed[fieldName] = value;
+      }
     }
-  ) });
+    if (typeName === "boolean" || typeName === "ZodBoolean") {
+      if (typeof value === "string") {
+        const trimmed = value.trim().toLowerCase();
+        if (trimmed === "true" || trimmed === "1" || trimmed === "on") {
+          processed[fieldName] = true;
+        } else if (trimmed === "false" || trimmed === "0" || trimmed === "off" || trimmed === "") {
+          processed[fieldName] = false;
+        }
+      } else if (typeof value === "boolean") {
+        processed[fieldName] = value;
+      }
+    }
+    if (typeName === "array" || typeName === "ZodArray") {
+      if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+          try {
+            const parsed = JSON.parse(trimmed);
+            processed[fieldName] = parsed;
+          } catch (e) {
+          }
+        } else {
+          const parts = trimmed.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
+          processed[fieldName] = parts;
+        }
+      }
+    }
+    if (typeName === "object" || typeName === "ZodObject") {
+      if (typeof value === "string" && value.trim() !== "") {
+        try {
+          const trimmed = value.trim();
+          if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+            const parsed = JSON.parse(trimmed);
+            processed[fieldName] = parsed;
+          }
+        } catch (e) {
+        }
+      }
+    }
+    if (typeName === "any" || typeName === "ZodAny") {
+      if (typeof value === "string" && value.trim() !== "") {
+        try {
+          const trimmed = value.trim();
+          if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+            const parsed = JSON.parse(trimmed);
+            processed[fieldName] = parsed;
+          }
+        } catch (e) {
+        }
+      }
+    }
+  }
+  return processed;
 }
 
 // src/utils/schema-utils.ts
@@ -457,13 +663,14 @@ function parseFieldSchema(fieldName, fieldSchema) {
     return null;
   }
   const label = getFieldDescription(fieldSchema) || fieldName;
-  const { type, required, options, innerSchema } = analyzeFieldType(fieldSchema);
+  const { type, required, options, innerSchema, step } = analyzeFieldType(fieldSchema);
   return {
     name: fieldName,
     label,
     type,
     required,
     options,
+    step,
     schema: innerSchema || fieldSchema
   };
 }
@@ -520,10 +727,20 @@ function analyzeFieldType(schema) {
     let fieldType = "text";
     if (def?.checks) {
       const hasEmailCheck = def.checks.some(
-        (check) => check.kind === "email"
+        (check) => check.format === "email" || check.constructor?.name === "ZodEmail" || check._zod?.def?.format === "email"
       );
       if (hasEmailCheck) {
         fieldType = "email";
+      } else {
+        const maxLengthCheck = def.checks.find(
+          (check) => check.constructor?.name === "$ZodCheckMaxLength" || check._zod?.def?.check === "max_length" || check._zod?.def?.maximum !== void 0
+        );
+        if (maxLengthCheck) {
+          const maxLength = maxLengthCheck._zod?.def?.maximum ?? maxLengthCheck.value ?? maxLengthCheck.maximum;
+          if (maxLength !== void 0 && maxLength > 50) {
+            fieldType = "textarea";
+          }
+        }
       }
     }
     return {
@@ -533,10 +750,22 @@ function analyzeFieldType(schema) {
     };
   }
   if (typeName === "number" || typeName === "ZodNumber") {
+    let step = void 0;
+    if (def?.checks) {
+      const hasIntCheck = def.checks.some(
+        (check) => check.isInt === true || check.format === "safeint" || check.def?.format === "safeint" || check.kind === "int" || check.constructor?.name === "ZodInt" || check._zod?.def?.check === "int" || check._zod?.def?.kind === "int"
+      );
+      if (!hasIntCheck) {
+        step = "any";
+      }
+    } else {
+      step = "any";
+    }
     return {
       type: "number",
       required: true,
-      innerSchema: schema
+      innerSchema: schema,
+      step
     };
   }
   if (typeName === "date" || typeName === "ZodDate") {
@@ -601,7 +830,8 @@ function modelFieldsToFormFields(fields) {
     type: field.type,
     label: field.label,
     required: field.required,
-    options: field.options
+    options: field.options,
+    step: field.step
   }));
 }
 function getFieldNamesFromFields(fields) {
@@ -619,6 +849,8 @@ var BaseFormFeature = class extends BaseFeature {
   descriptionGetter;
   /** 当前请求的表单 ID（用于在 render 和 getActions 之间共享） */
   currentFormId;
+  /** 自定义表单字段渲染器 */
+  formFieldRenderers;
   /**
    * 获取或生成表单 ID（确保在同一个请求中保持一致）
    */
@@ -685,59 +917,7 @@ var BaseFormFeature = class extends BaseFeature {
     if (!this.schema) {
       return data;
     }
-    const processed = { ...data };
-    for (const key of Object.keys(processed)) {
-      if (processed[key] === "") {
-        processed[key] = void 0;
-      }
-    }
-    const def = this.schema._def;
-    const shape = typeof def.shape === "function" ? def.shape() : def.shape;
-    if (!shape || typeof shape !== "object") {
-      return data;
-    }
-    for (const [fieldName, fieldSchema] of Object.entries(shape)) {
-      const value = processed[fieldName];
-      if (value === void 0 || value === null) {
-        continue;
-      }
-      const fieldDef = fieldSchema._def;
-      let typeName = fieldDef?.typeName;
-      let isOptional = false;
-      if (typeName === "ZodOptional") {
-        isOptional = true;
-        const innerType = fieldDef.innerType?._def;
-        typeName = innerType?.typeName;
-      }
-      if (isOptional && typeof value === "string" && value.trim() === "") {
-        if (fieldName === "authorId") {
-          logger.info(`[BaseFormFeature] authorId empty optional -> undefined`);
-        }
-        processed[fieldName] = void 0;
-        continue;
-      }
-      if (typeName === "ZodNumber") {
-        if (typeof value === "string") {
-          const numValue = Number(value);
-          if (fieldName === "authorId") {
-            logger.info(
-              `[BaseFormFeature] authorId raw value="${value}", numValue=${numValue}, isOptional=${isOptional}`
-            );
-          }
-          if (!isNaN(numValue)) {
-            processed[fieldName] = numValue;
-          }
-        }
-      }
-      if (typeName === "ZodArray") {
-        if (typeof value === "string") {
-          const parts = value.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
-          processed[fieldName] = parts;
-        }
-      }
-    }
-    logger.info(`[BaseFormFeature] processed form data: ${JSON.stringify(processed)}`);
-    return processed;
+    return preprocessFormData(data, this.schema);
   }
   /**
    * 处理请求
@@ -747,12 +927,23 @@ var BaseFormFeature = class extends BaseFeature {
     this.currentFormId = void 0;
     if (ctx.req.method === "GET") {
       return this.render(context);
-    } else if (ctx.req.method === "POST" || ctx.req.method === "PUT") {
+    } else if (ctx.req.method === "POST" || ctx.req.method === "PUT" || ctx.req.method === "PATCH") {
+      const methodOverride = ctx.req.header("X-HTTP-Method-Override");
+      const actualMethod = methodOverride || ctx.req.method;
+      const expectedMethod = this.getFormAction() === "edit" ? "PUT" : "POST";
+      if (actualMethod.toUpperCase() !== expectedMethod) {
+        logger.warn(
+          `[BaseFormFeature] Method mismatch: expected ${expectedMethod}, got ${actualMethod} (request method: ${ctx.req.method}, X-HTTP-Method-Override: ${methodOverride || "none"})`
+        );
+      }
       const originalData = { ...context.body };
       logger.info(
         `[BaseFormFeature] Original body data: ${JSON.stringify(originalData)}`
       );
       let data = this.preprocessFormData(context.body);
+      logger.info(
+        `[BaseFormFeature] Preprocessed data: ${JSON.stringify(data)}`
+      );
       if (!this.schema) {
         throw new Error("Schema is required for form validation");
       }
@@ -769,7 +960,10 @@ var BaseFormFeature = class extends BaseFeature {
         );
         return this.render(context, originalData);
       }
-      const item = await this.handleSubmit(context, parseResult.data);
+      const item = await this.handleSubmit(
+        context,
+        parseResult.data
+      );
       if (!item) {
         context.sendError(
           this.getFormAction() === "create" ? "\u521B\u5EFA\u5931\u8D25" : "\u66F4\u65B0\u5931\u8D25",
@@ -787,6 +981,9 @@ var BaseFormFeature = class extends BaseFeature {
           `[BaseFormFeature] Dialog mode: setting refresh to close dialog and refresh list`
         );
         context.setRefresh(true);
+        if (context.redirectUrl) {
+          context.redirectUrl = void 0;
+        }
         return null;
       } else {
         const redirectUrl = this.getSuccessRedirectUrl(context, item);
@@ -799,12 +996,11 @@ var BaseFormFeature = class extends BaseFeature {
     }
   }
   formFieldNames;
+  groups;
   /**
    * 渲染表单页面
    */
   async render(context, initialData) {
-    const filteredFields = this.formFieldNames ? filterFieldsByNames(this.fields || [], this.formFieldNames) : this.fields || [];
-    const fields = modelFieldsToFormFields(filteredFields);
     let formData;
     if (this.getFormAction() === "edit") {
       if (initialData) {
@@ -826,6 +1022,50 @@ var BaseFormFeature = class extends BaseFeature {
     }
     const method = this.getFormAction() === "create" ? "post" : "put";
     const formId = this.getFormId(context);
+    if (this.groups && this.groups.length > 0) {
+      if (!this.schema) {
+        throw new Error("Schema is required when using groups");
+      }
+      const schema = this.schema;
+      const groupSchemas = this.groups.map((group) => {
+        const pickObject = group.fields.reduce(
+          (acc, fieldName) => {
+            acc[fieldName] = true;
+            return acc;
+          },
+          {}
+        );
+        return {
+          label: group.label,
+          schema: schema.pick(pickObject),
+          fields: group.fields
+        };
+      });
+      const groupFields = groupSchemas.map(
+        ({ label, schema: schema2, fields: fieldNames }) => {
+          const groupFields2 = parseSchemaToFields(schema2);
+          const formFields = modelFieldsToFormFields(groupFields2);
+          return {
+            label,
+            fields: formFields
+          };
+        }
+      );
+      return /* @__PURE__ */ jsx(
+        FormPage,
+        {
+          groups: groupFields,
+          submitUrl,
+          method,
+          initialData: formData,
+          formId,
+          isDialog: context.isDialog,
+          formFieldRenderers: this.formFieldRenderers
+        }
+      );
+    }
+    const filteredFields = this.formFieldNames ? filterFieldsByNames(this.fields || [], this.formFieldNames) : this.fields || [];
+    const fields = modelFieldsToFormFields(filteredFields);
     return /* @__PURE__ */ jsx(
       FormPage,
       {
@@ -833,7 +1073,9 @@ var BaseFormFeature = class extends BaseFeature {
         submitUrl,
         method,
         initialData: formData,
-        formId
+        formId,
+        isDialog: context.isDialog,
+        formFieldRenderers: this.formFieldRenderers
       }
     );
   }
@@ -942,6 +1184,8 @@ var DefaultCreateFeature = class extends BaseFormFeature {
     this.fields = parseSchemaToFields(options.schema);
     this.createItem = options.createItem;
     this.formFieldNames = options.formFieldNames;
+    this.groups = options.groups;
+    this.formFieldRenderers = options.formFieldRenderers;
   }
   getFormAction() {
     return "create";
@@ -1001,12 +1245,119 @@ var DefaultDeleteFeature = class extends BaseFeature {
     }
   }
 };
+function Card(props) {
+  const {
+    children,
+    title,
+    className = "",
+    shadow = true,
+    bordered = false,
+    noPadding = false
+  } = props;
+  const baseClasses = "bg-white rounded-lg";
+  const shadowClass = shadow ? "shadow-sm hover:shadow-md transition-shadow" : "";
+  const borderClass = bordered ? "border border-gray-200" : "";
+  const paddingClass = noPadding ? "" : "p-6";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${baseClasses} ${shadowClass} ${borderClass} ${className}`,
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: noPadding ? "" : paddingClass, children })
+      ]
+    }
+  );
+}
+function renderDefaultValue(value) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u6682\u65E0\u6570\u636E" });
+    }
+    if (value.length > 0 && typeof value[0] === "object" && value[0] !== null) {
+      return /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "\u5305\u542B ",
+        value.length,
+        " \u9879\uFF08\u5BF9\u8C61\u6570\u7EC4\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\uFF09"
+      ] });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: value.map((item, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm",
+        children: String(item)
+      },
+      index
+    )) });
+  }
+  if (typeof value === "object") {
+    if (value instanceof Date) {
+      return /* @__PURE__ */ jsx("span", { children: value.toLocaleString() });
+    }
+    return /* @__PURE__ */ jsx("pre", { className: "bg-gray-50 border border-gray-200 rounded p-3 text-xs overflow-x-auto", children: JSON.stringify(value, null, 2) });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx("span", { className: `px-2 py-1 rounded text-sm font-medium ${value ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-600"}`, children: value ? "\u662F" : "\u5426" });
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx("span", { children: value.toLocaleString() });
+  }
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
+function renderField(field, value, item) {
+  let content;
+  if (field.render) {
+    const rendered = field.render(value, item);
+    if (rendered === null || rendered === void 0) {
+      content = /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
+    } else if (typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
+      content = /* @__PURE__ */ jsx("span", { children: String(rendered) });
+    } else {
+      content = rendered;
+    }
+  } else {
+    content = renderDefaultValue(value);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "\r\n        px-4 py-4 sm:px-6 sm:py-5\r\n        flex flex-col\r\n        hover:bg-gray-50/50 transition-colors duration-150\r\n        group\r\n        gap-1.5\r\n      ",
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "\r\n        text-xs sm:text-sm font-semibold text-gray-600 sm:text-gray-700\r\n        flex items-start\r\n        leading-tight sm:leading-5\r\n        tracking-wide\r\n      ", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 uppercase sm:normal-case", children: field.label }) }),
+        /* @__PURE__ */ jsx("dd", { className: "\r\n        text-sm sm:text-base text-gray-900\r\n        break-words\r\n        leading-relaxed\r\n        min-w-0\r\n      ", children: /* @__PURE__ */ jsx("div", { className: "min-w-0", children: content }) })
+      ]
+    },
+    field.key
+  );
+}
 function DetailPage(props) {
-  const { item, fields } = props;
-  return /* @__PURE__ */ jsx("div", { className: "bg-white border border-gray-300 rounded p-4", children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-4", children: fields.map((field) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("dt", { className: "font-semibold text-gray-700", children: field.label }),
-    /* @__PURE__ */ jsx("dd", { className: "mt-1 text-gray-900", children: String(item[field.key] ?? "-") })
-  ] }, field.key)) }) });
+  const { item, fields, groups } = props;
+  if (groups && groups.length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx(
+      Card,
+      {
+        title: group.label,
+        shadow: true,
+        bordered: true,
+        noPadding: true,
+        children: /* @__PURE__ */ jsx("dl", { className: "divide-y divide-gray-100", children: group.fields.map((field) => {
+          const value = group.values[field.key];
+          return renderField(field, value, item);
+        }) })
+      },
+      groupIndex
+    )) });
+  }
+  if (fields && fields.length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: "bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden", children: /* @__PURE__ */ jsx("dl", { className: "divide-y divide-gray-100", children: fields.map((field) => {
+      const value = item[field.key];
+      return renderField(field, value, item);
+    }) }) });
+  }
+  return null;
 }
 var DefaultDetailFeature = class extends BaseFeature {
   getItem;
@@ -1014,6 +1365,8 @@ var DefaultDetailFeature = class extends BaseFeature {
   titleGetter;
   descriptionGetter;
   detailFieldNames;
+  fieldRenderers;
+  groups;
   constructor(options) {
     super({
       name: "detail",
@@ -1029,6 +1382,8 @@ var DefaultDetailFeature = class extends BaseFeature {
     this.titleGetter = options.getTitle;
     this.descriptionGetter = options.getDescription;
     this.detailFieldNames = options.detailFieldNames;
+    this.fieldRenderers = options.fieldRenderers;
+    this.groups = options.groups;
   }
   async getTitle(context) {
     if (this.titleGetter) {
@@ -1059,6 +1414,40 @@ var DefaultDetailFeature = class extends BaseFeature {
     if (!item) {
       return context.ctx.json({ error: "Not found" }, 404);
     }
+    if (this.groups && this.groups.length > 0) {
+      if (!this.schema) {
+        throw new Error("Schema is required when using groups");
+      }
+      const schema = this.schema;
+      const groupSchemas = this.groups.map((group) => {
+        const pickObject = group.fields.reduce((acc, fieldName) => {
+          acc[fieldName] = true;
+          return acc;
+        }, {});
+        return {
+          label: group.label,
+          schema: schema.pick(pickObject),
+          fields: group.fields
+        };
+      });
+      const groupFields = groupSchemas.map(({ label, schema: schema2, fields: fieldNames }) => {
+        const groupFields2 = parseSchemaToFields(schema2);
+        const detailFields2 = groupFields2.map((field) => ({
+          key: field.name,
+          label: field.label,
+          render: this.fieldRenderers?.[field.name]
+        }));
+        return {
+          label,
+          fields: detailFields2,
+          values: fieldNames.reduce((acc, fieldName) => {
+            acc[fieldName] = item[fieldName];
+            return acc;
+          }, {})
+        };
+      });
+      return /* @__PURE__ */ jsx(DetailPage, { item, groups: groupFields });
+    }
     const detailFields = this.detailFieldNames ? filterFieldsByNames(this.fields || [], this.detailFieldNames) : this.fields || [];
     if (this.detailFieldNames) {
       const systemFields = ["id", "createdAt", "updatedAt"];
@@ -1077,7 +1466,9 @@ var DefaultDetailFeature = class extends BaseFeature {
     const detailFieldNames = getFieldNamesFromFields(detailFields);
     const fields = detailFieldNames.map((fieldName) => ({
       key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName) || fieldName
+      label: getFieldLabelFromFields(this.fields || [], fieldName) || fieldName,
+      render: this.fieldRenderers?.[fieldName]
+      // 如果有自定义渲染函数则使用
     }));
     return /* @__PURE__ */ jsx(DetailPage, { item, fields });
   }
@@ -1155,6 +1546,8 @@ var DefaultEditFeature = class extends BaseFormFeature {
     this.getItem = options.getItem;
     this.updateItem = options.updateItem;
     this.formFieldNames = options.formFieldNames;
+    this.groups = options.groups;
+    this.formFieldRenderers = options.formFieldRenderers;
   }
   getFormAction() {
     return "edit";
@@ -1390,30 +1783,6 @@ function Button(props) {
     }
   );
 }
-function Card(props) {
-  const {
-    children,
-    title,
-    className = "",
-    shadow = true,
-    bordered = false,
-    noPadding = false
-  } = props;
-  const baseClasses = "bg-white rounded-lg";
-  const shadowClass = shadow ? "shadow-sm hover:shadow-md transition-shadow" : "";
-  const borderClass = bordered ? "border border-gray-200" : "";
-  const paddingClass = noPadding ? "" : "p-6";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${baseClasses} ${shadowClass} ${borderClass} ${className}`,
-      children: [
-        title && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: noPadding ? "" : paddingClass, children })
-      ]
-    }
-  );
-}
 function EmptyState(props) {
   const { message = "\u6682\u65E0\u6570\u636E", children } = props;
   return /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: children || /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm", children: message }) });
@@ -1833,6 +2202,7 @@ var DefaultListFeature = class extends BaseFeature {
   deleteItem;
   listFieldNames;
   filterSchema;
+  columnRenderers;
   constructor(options) {
     super({
       name: "list",
@@ -1847,6 +2217,7 @@ var DefaultListFeature = class extends BaseFeature {
     this.deleteItem = options.deleteItem;
     this.listFieldNames = options.listFieldNames;
     this.filterSchema = options.filterSchema;
+    this.columnRenderers = options.columnRenderers;
   }
   getRoutes() {
     return [{ method: "get", path: "/list" }];
@@ -1859,7 +2230,9 @@ var DefaultListFeature = class extends BaseFeature {
     const filterFields = this.filterSchema ? modelFieldsToFormFields(parseSchemaToFields(this.filterSchema)) : [];
     const columns = listFieldNames.map((fieldName) => ({
       key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName)
+      label: getFieldLabelFromFields(this.fields || [], fieldName),
+      render: this.columnRenderers?.[fieldName]
+      // 如果有自定义渲染函数则使用
     }));
     const model = context.model;
     const prefix = context.prefix || "";
@@ -2301,7 +2674,8 @@ function Dialog(props) {
     className = "",
     size = "lg",
     closeOnBackdropClick = true,
-    actions = []
+    actions = [],
+    fixedContentHeight = false
   } = props;
   const sizeClasses = {
     sm: "max-w-md",
@@ -2360,7 +2734,13 @@ function Dialog(props) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50", children }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${fixedContentHeight ? "h-[70vh]" : "flex-1"} overflow-y-auto ${fixedContentHeight ? "p-0" : "p-6"} bg-gray-50`,
+                children
+              }
+            ),
             actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-t border-gray-200 bg-white flex justify-end gap-2", children: actions.map((action, index) => renderActionButton(action, index)) })
           ]
         }
@@ -2621,6 +3001,13 @@ function BaseLayout(props) {
         {
           dangerouslySetInnerHTML: {
             __html: `
+          /* \u5BB9\u5668\u67E5\u8BE2\u652F\u6301 - \u5982\u679C Tailwind CDN \u4E0D\u652F\u6301\uFF0C\u4F7F\u7528\u539F\u751F CSS \u5BB9\u5668\u67E5\u8BE2 */
+          @supports (container-type: inline-size) {
+            .\\@container {
+              container-type: inline-size;
+            }
+          }
+          
           @keyframes fadeIn {
             from { opacity: 0;}
             to { opacity: 1;}
@@ -3143,9 +3530,9 @@ async function renderResult(ctx, context, result, renderOptions) {
       headers
     );
   }
-  if (context.redirectUrl) {
+  if (context.redirectUrl && !context.refresh) {
     logger.info(
-      `[ResponseRenderer] Redirect URL found: ${context.redirectUrl} (isHtmxRequest: ${context.isHtmxRequest})`
+      `[ResponseRenderer] Redirect URL found: ${context.redirectUrl} (isHtmxRequest: ${context.isHtmxRequest}, isDialog: ${context.isDialog})`
     );
     if (context.isHtmxRequest) {
       return ctx.html(/* @__PURE__ */ jsx("div", {}), 200, {
@@ -3154,7 +3541,11 @@ async function renderResult(ctx, context, result, renderOptions) {
     } else {
       return ctx.redirect(context.redirectUrl);
     }
-  } else {
+  } else if (context.redirectUrl && context.refresh) {
+    logger.info(
+      `[ResponseRenderer] Both redirect URL and refresh are set, using refresh (isDialog: ${context.isDialog})`
+    );
+  } else if (!context.redirectUrl) {
     logger.info(
       `[ResponseRenderer] No redirect URL found (result: ${result === null ? "null" : typeof result}, isHtmxRequest: ${context.isHtmxRequest})`
     );
@@ -3205,6 +3596,8 @@ async function renderResult(ctx, context, result, renderOptions) {
     if (context.isDialog) {
       const dialogSize = renderOptions.feature?.dialogSize || "lg";
       const closeOnBackdropClick = renderOptions.feature?.closeOnBackdropClick ?? true;
+      const isFormFeature = renderOptions.feature?.type === "create" || renderOptions.feature?.type === "edit";
+      const fixedContentHeight = isFormFeature;
       return ctx.html(
         /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -3214,6 +3607,7 @@ async function renderResult(ctx, context, result, renderOptions) {
               size: dialogSize,
               closeOnBackdropClick,
               actions,
+              fixedContentHeight,
               children: result
             }
           ),
@@ -3474,6 +3868,28 @@ function registerPageRoutes(page, options) {
         });
       };
       options.hono[route.method](fullPath, handler);
+      if (route.method === "put" || route.method === "delete") {
+        const postHandler = async (ctx) => {
+          const methodOverride = ctx.req.header("X-HTTP-Method-Override");
+          const expectedMethod = route.method.toUpperCase();
+          if (methodOverride === expectedMethod) {
+            logger.info(
+              `[HtmxAdminPlugin] Method override detected: POST ${fullPath} -> ${expectedMethod} (feature: ${feature.name})`
+            );
+            return handleRequest(ctx, page, feature, {
+              options: options.options
+            });
+          }
+          logger.warn(
+            `[HtmxAdminPlugin] POST request to ${fullPath} without matching X-HTTP-Method-Override header (got: ${methodOverride || "none"}, expected: ${expectedMethod})`
+          );
+          return ctx.text("Method Not Allowed", 405);
+        };
+        logger.info(
+          `[HtmxAdminPlugin] Registering POST route for method override: POST ${fullPath} (actual method: ${route.method.toUpperCase()}, feature: ${feature.name})`
+        );
+        options.hono.post(fullPath, postHandler);
+      }
     }
   }
 }
@@ -3563,5 +3979,80 @@ var HtmxAdminPlugin = class {
     registerHomeRedirect(this.pages, routeOptions);
   }
 };
+function createFormFieldXData(options) {
+  const {
+    fieldName,
+    dataKey,
+    defaultValue = [],
+    customData = {},
+    customMethods = {}
+  } = options;
+  const dataEntries = [];
+  dataEntries.push(`${dataKey}: ${JSON.stringify(defaultValue)}`);
+  for (const [key, value] of Object.entries(customData)) {
+    dataEntries.push(`${key}: ${JSON.stringify(value)}`);
+  }
+  const methodEntries = [];
+  methodEntries.push(`init() {
+    const dataAttr = this.$el.getAttribute('data-initial-value');
+    if (dataAttr) {
+      try {
+        this.${dataKey} = JSON.parse(dataAttr);
+      } catch (e) {
+        console.error('Failed to parse initial value:', e);
+        this.${dataKey} = ${JSON.stringify(defaultValue)};
+      }
+    }
+    this.updateHiddenField();
+  }`);
+  methodEntries.push(`updateHiddenField() {
+    const hiddenInput = this.$el.querySelector('input[name="${fieldName}"][type="hidden"]');
+    if (hiddenInput) {
+      hiddenInput.value = JSON.stringify(this.${dataKey});
+    }
+  }`);
+  for (const [methodName, methodBody] of Object.entries(customMethods)) {
+    methodEntries.push(`${methodName}${methodBody}`);
+  }
+  const dataStr = dataEntries.join(",\n    ");
+  const methodsStr = methodEntries.join(",\n  ");
+  return `{
+    ${dataStr},
+  ${methodsStr}
+}`;
+}
+function FormFieldWrapper(props) {
+  const {
+    fieldName,
+    initialValue,
+    xData,
+    autoSync = false,
+    children,
+    className = "space-y-4"
+  } = props;
+  const initialValueJson = JSON.stringify(initialValue);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "x-data": xData,
+      "data-initial-value": initialValueJson,
+      "x-init": "init()",
+      ...autoSync ? { "x-effect": "updateHiddenField()" } : {},
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            name: fieldName,
+            value: "",
+            "data-testid": `hidden-${fieldName}`
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
 
-export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, LoadingBar, PageModel, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, FormFieldWrapper, HtmxAdminPlugin, LoadingBar, PageModel, checkUserPermission, createFormFieldXData, getUserInfo, modelNameToPath, parseListParams };