imean-service-engine-htmx-plugin 2.1.1 → 2.3.0

package/dist/index.mjs

@@ -3,6 +3,7 @@ import { promises } from 'fs';
 import { join } from 'path';
 import { jsx, jsxs, Fragment } from 'hono/jsx/jsx-runtime';
 import { getCookie } from 'hono/cookie';
+import { html } from 'hono/html';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -293,144 +294,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 +664,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 +728,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 +751,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 +831,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 +850,8 @@ var BaseFormFeature = class extends BaseFeature {
   descriptionGetter;
   /** 当前请求的表单 ID（用于在 render 和 getActions 之间共享） */
   currentFormId;
+  /** 自定义表单字段渲染器 */
+  formFieldRenderers;
   /**
    * 获取或生成表单 ID（确保在同一个请求中保持一致）
    */
@@ -685,59 +918,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 +928,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 +961,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 +982,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 +997,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 +1023,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 +1074,9 @@ var BaseFormFeature = class extends BaseFeature {
         submitUrl,
         method,
         initialData: formData,
-        formId
+        formId,
+        isDialog: context.isDialog,
+        formFieldRenderers: this.formFieldRenderers
       }
     );
   }
@@ -942,6 +1185,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 +1246,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 +1366,8 @@ var DefaultDetailFeature = class extends BaseFeature {
   titleGetter;
   descriptionGetter;
   detailFieldNames;
+  fieldRenderers;
+  groups;
   constructor(options) {
     super({
       name: "detail",
@@ -1029,6 +1383,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 +1415,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 +1467,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 +1547,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";
@@ -1364,18 +1758,21 @@ function Button(props) {
     disabled ? "opacity-50 cursor-not-allowed" : "",
     className
   ].filter(Boolean).join(" ");
+  const isNewWindow = rest.target === "_blank";
   const htmxAttrs = {};
-  if (hxGet) htmxAttrs["hx-get"] = hxGet;
-  if (hxPost) htmxAttrs["hx-post"] = hxPost;
-  if (hxPut) htmxAttrs["hx-put"] = hxPut;
-  if (hxDelete) htmxAttrs["hx-delete"] = hxDelete;
-  if (hxTarget) htmxAttrs["hx-target"] = hxTarget;
-  if (hxSwap) htmxAttrs["hx-swap"] = hxSwap;
-  if (hxPushUrl !== void 0)
-    htmxAttrs["hx-push-url"] = hxPushUrl === true ? "true" : hxPushUrl;
-  if (hxIndicator) htmxAttrs["hx-indicator"] = hxIndicator;
-  if (hxConfirm) htmxAttrs["hx-confirm"] = hxConfirm;
-  if (hxHeaders) htmxAttrs["hx-headers"] = hxHeaders;
+  if (!isNewWindow) {
+    if (hxGet) htmxAttrs["hx-get"] = hxGet;
+    if (hxPost) htmxAttrs["hx-post"] = hxPost;
+    if (hxPut) htmxAttrs["hx-put"] = hxPut;
+    if (hxDelete) htmxAttrs["hx-delete"] = hxDelete;
+    if (hxTarget) htmxAttrs["hx-target"] = hxTarget;
+    if (hxSwap) htmxAttrs["hx-swap"] = hxSwap;
+    if (hxPushUrl !== void 0)
+      htmxAttrs["hx-push-url"] = hxPushUrl === true ? "true" : hxPushUrl;
+    if (hxIndicator) htmxAttrs["hx-indicator"] = hxIndicator;
+    if (hxConfirm) htmxAttrs["hx-confirm"] = hxConfirm;
+    if (hxHeaders) htmxAttrs["hx-headers"] = hxHeaders;
+  }
   const href = rest.href ?? hxGet ?? "#";
   const { className: _, ...otherRest } = rest;
   return /* @__PURE__ */ jsx(
@@ -1390,30 +1787,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 }) });
@@ -1597,20 +1970,24 @@ function ActionLink(props) {
   const { action, item } = props;
   const hrefValue = action.href(item);
   const isDelete = action.method === "delete";
+  const isNewWindow = action.target === "_blank";
   const className = `${STYLES.actionLink.base} ${isDelete ? STYLES.actionLink.delete : STYLES.actionLink.default}`;
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href: hrefValue,
-      className,
-      "hx-get": !isDelete ? hrefValue : void 0,
-      "hx-delete": isDelete ? hrefValue : void 0,
-      "hx-confirm": isDelete ? "\u786E\u5B9A\u5220\u9664\u5417\uFF1F" : void 0,
-      "data-testid": `table-action-${action.label}`,
-      "aria-label": `${action.label}\uFF1A${item.id || item}`,
-      children: action.label
-    }
-  );
+  const linkProps = {
+    href: hrefValue,
+    className,
+    "data-testid": `table-action-${action.label}`,
+    "aria-label": `${action.label}\uFF1A${item.id || item}`
+  };
+  if (isNewWindow) {
+    linkProps.target = "_blank";
+    linkProps.rel = "noopener noreferrer";
+  } else if (isDelete) {
+    linkProps["hx-delete"] = hrefValue;
+    linkProps["hx-confirm"] = "\u786E\u5B9A\u5220\u9664\u5417\uFF1F";
+  } else {
+    linkProps["hx-get"] = hrefValue;
+  }
+  return /* @__PURE__ */ jsx("a", { ...linkProps, children: action.label });
 }
 function ActionCell(props) {
   const { actions, item, actionStyle } = props;
@@ -1631,15 +2008,18 @@ function ActionCell(props) {
       ) : /* @__PURE__ */ jsx("div", { className: STYLES.actionButton, "data-testid": "table-actions", children: actions.map((action, idx) => {
         const hrefValue = action.href(item);
         const isDelete = action.method === "delete";
+        const isNewWindow = action.target === "_blank";
         return /* @__PURE__ */ jsx(
           Button,
           {
             variant: isDelete ? "danger" : "secondary",
             size: "sm",
             href: hrefValue,
-            "hx-get": !isDelete ? hrefValue : void 0,
+            "hx-get": !isDelete && !isNewWindow ? hrefValue : void 0,
             "hx-delete": isDelete ? hrefValue : void 0,
             "hx-confirm": isDelete ? "\u786E\u5B9A\u5220\u9664\u5417\uFF1F" : void 0,
+            target: isNewWindow ? "_blank" : void 0,
+            rel: isNewWindow ? "noopener noreferrer" : void 0,
             className: action.class,
             "data-testid": `table-action-${action.label}`,
             "aria-label": `${action.label}\uFF1A${item.id || item}`,
@@ -1736,19 +2116,24 @@ function ListPage(props) {
     editPath,
     deletePath,
     listPath,
-    filterFields
+    filterFields,
+    openMode
   } = props;
   const actions = [];
   if (detailPath) {
+    const mode = openMode?.detail || "dialog";
     actions.push({
       label: "\u67E5\u770B",
-      href: detailPath
+      href: detailPath,
+      target: mode === "newWindow" ? "_blank" : void 0
     });
   }
   if (editPath) {
+    const mode = openMode?.edit || "dialog";
     actions.push({
       label: "\u7F16\u8F91",
-      href: editPath
+      href: editPath,
+      target: mode === "newWindow" ? "_blank" : void 0
     });
   }
   if (deletePath) {
@@ -1793,7 +2178,8 @@ function ListPage(props) {
         actions: actions.length > 0 ? actions.map((action) => ({
           label: action.label,
           href: (item) => action.href(item),
-          method: action.method
+          method: action.method,
+          target: action.target
         })) : void 0,
         pagination: {
           page: result.page,
@@ -1834,6 +2220,7 @@ var DefaultListFeature = class extends BaseFeature {
   listFieldNames;
   filterSchema;
   columnRenderers;
+  openMode;
   constructor(options) {
     super({
       name: "list",
@@ -1849,6 +2236,7 @@ var DefaultListFeature = class extends BaseFeature {
     this.listFieldNames = options.listFieldNames;
     this.filterSchema = options.filterSchema;
     this.columnRenderers = options.columnRenderers;
+    this.openMode = options.openMode;
   }
   getRoutes() {
     return [{ method: "get", path: "/list" }];
@@ -1869,9 +2257,12 @@ var DefaultListFeature = class extends BaseFeature {
     const prefix = context.prefix || "";
     const basePath = `${prefix}/${model.modelName}`;
     const listPath = `${basePath}/list`;
-    const createPath = model.features.get("create") ? `${basePath}/new?dialog=true` : void 0;
-    const detailPath = model.features.get("detail") ? (item) => `${basePath}/detail/${item.id}?dialog=true` : void 0;
-    const editPath = model.features.get("edit") ? (item) => `${basePath}/edit/${item.id}?dialog=true` : void 0;
+    const createMode = this.openMode?.create || "dialog";
+    const detailMode = this.openMode?.detail || "dialog";
+    const editMode = this.openMode?.edit || "dialog";
+    const createPath = model.features.get("create") ? createMode === "dialog" ? `${basePath}/new?dialog=true` : `${basePath}/new` : void 0;
+    const detailPath = model.features.get("detail") ? (item) => detailMode === "dialog" ? `${basePath}/detail/${item.id}?dialog=true` : `${basePath}/detail/${item.id}` : void 0;
+    const editPath = model.features.get("edit") ? (item) => editMode === "dialog" ? `${basePath}/edit/${item.id}?dialog=true` : `${basePath}/edit/${item.id}` : void 0;
     const deletePath = this.deleteItem && model.features.get("delete") ? (item) => `${basePath}/${item.id}` : void 0;
     return /* @__PURE__ */ jsx(
       ListPage,
@@ -1884,7 +2275,8 @@ var DefaultListFeature = class extends BaseFeature {
         editPath,
         deletePath,
         listPath,
-        filterFields
+        filterFields,
+        openMode: this.openMode
       }
     );
   }
@@ -1895,11 +2287,22 @@ var DefaultListFeature = class extends BaseFeature {
     const hasCreate = model.features.get("create") !== void 0;
     const actions = [];
     if (hasCreate) {
-      actions.push({
-        label: "\u65B0\u5EFA",
-        hxGet: `${basePath}/new?dialog=true`,
-        variant: "primary"
-      });
+      const createMode = this.openMode?.create || "dialog";
+      const createUrl = createMode === "dialog" ? `${basePath}/new?dialog=true` : `${basePath}/new`;
+      if (createMode === "newWindow") {
+        actions.push({
+          label: "\u65B0\u5EFA",
+          href: createUrl,
+          variant: "primary",
+          target: "_blank"
+        });
+      } else {
+        actions.push({
+          label: "\u65B0\u5EFA",
+          hxGet: createUrl,
+          variant: "primary"
+        });
+      }
     }
     return actions;
   }
@@ -2305,7 +2708,8 @@ function Dialog(props) {
     className = "",
     size = "lg",
     closeOnBackdropClick = true,
-    actions = []
+    actions = [],
+    fixedContentHeight = false
   } = props;
   const sizeClasses = {
     sm: "max-w-md",
@@ -2364,7 +2768,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)) })
           ]
         }
@@ -2625,6 +3035,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;}
@@ -2741,7 +3158,8 @@ function renderActionButton2(action, index) {
     submit,
     formId,
     onClick,
-    className = ""
+    className = "",
+    target
   } = action;
   if (submit && formId) {
     const variantStyles = {
@@ -2793,18 +3211,21 @@ function renderActionButton2(action, index) {
   } else if (label === "\u53D6\u6D88") {
     testId = "cancel-button";
   }
+  const isNewWindow = target === "_blank";
   return /* @__PURE__ */ jsx(
     Button,
     {
       variant,
       href,
-      hxGet,
-      hxPost,
-      hxPut,
-      hxDelete,
-      hxConfirm: confirm,
+      hxGet: !isNewWindow ? hxGet : void 0,
+      hxPost: !isNewWindow ? hxPost : void 0,
+      hxPut: !isNewWindow ? hxPut : void 0,
+      hxDelete: !isNewWindow ? hxDelete : void 0,
+      hxConfirm: !isNewWindow ? confirm : void 0,
       className,
       "data-testid": testId,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0,
       children: label
     },
     index
@@ -3147,9 +3568,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, {
@@ -3158,7 +3579,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})`
     );
@@ -3209,6 +3634,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(
@@ -3218,6 +3645,7 @@ async function renderResult(ctx, context, result, renderOptions) {
               size: dialogSize,
               closeOnBackdropClick,
               actions,
+              fixedContentHeight,
               children: result
             }
           ),
@@ -3478,6 +3906,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);
+      }
     }
   }
 }
@@ -3567,5 +4017,433 @@ var HtmxAdminPlugin = class {
     registerHomeRedirect(this.pages, routeOptions);
   }
 };
+function ObjectEditor(props) {
+  const { value, fieldName, objectSchema } = props;
+  if (!objectSchema) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4 border border-yellow-300 rounded-lg bg-yellow-50 text-yellow-800 text-sm", children: "\u8BF7\u63D0\u4F9B objectSchema \u53C2\u6570\u4EE5\u4F7F\u7528\u5BF9\u8C61\u7F16\u8F91\u5668" });
+  }
+  const fields = parseSchemaToFields(objectSchema);
+  const initialObject = value && typeof value === "object" && !Array.isArray(value) ? { ...value } : {};
+  fields.forEach((field) => {
+    if (!(field.name in initialObject)) {
+      if (field.type === "number") {
+        initialObject[field.name] = field.required ? 0 : void 0;
+      } else if (field.type === "checkbox") {
+        initialObject[field.name] = field.required ? false : void 0;
+      } else {
+        initialObject[field.name] = field.required ? "" : void 0;
+      }
+    }
+  });
+  const fieldNames = fields.map((f) => f.name);
+  const fieldNamesJson = JSON.stringify(fieldNames);
+  const initialValueJson = JSON.stringify(initialObject);
+  const xDataContent = `{
+    obj: {},
+    init() {
+      const dataAttr = this.$el.getAttribute('data-initial-value');
+      if (dataAttr) {
+        try {
+          this.obj = JSON.parse(dataAttr);
+        } catch (e) {
+          console.error('Failed to parse initial value:', e);
+          this.obj = {};
+        }
+      }
+      const fieldNames = ${fieldNamesJson};
+      fieldNames.forEach(fieldName => {
+        if (!(fieldName in this.obj)) {
+          this.obj[fieldName] = undefined;
+        }
+      });
+      this.updateHiddenField();
+    },
+    updateHiddenField() {
+      const hiddenInput = this.$el.querySelector('input[name="${fieldName}"][type="hidden"]');
+      if (hiddenInput) {
+        hiddenInput.value = JSON.stringify(this.obj);
+      }
+    },
+    updateField(fieldName, value, fieldType, required) {
+      let convertedValue = value;
+      if (fieldType === 'number') {
+        convertedValue = value === '' ? (required ? 0 : undefined) : Number(value);
+        if (isNaN(convertedValue)) convertedValue = required ? 0 : undefined;
+      } else if (fieldType === 'checkbox') {
+        convertedValue = value === 'true' || value === true || value === '1' || value === 1;
+      } else {
+        convertedValue = value || (required ? '' : undefined);
+      }
+      if (convertedValue === undefined && !required) {
+        delete this.obj[fieldName];
+      } else {
+        this.obj[fieldName] = convertedValue;
+      }
+      this.updateHiddenField();
+    }
+  }`;
+  const generateField = (field) => {
+    const fieldId = `${fieldName}-${field.name}`;
+    const fieldNameVar = `obj.${field.name}`;
+    const requiredValue = field.required ? "true" : "false";
+    const fieldNameForJs = JSON.stringify(field.name);
+    let inputElement;
+    if (field.type === "text") {
+      inputElement = html`
+        <input
+          type="text"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "textarea") {
+      inputElement = html`
+        <textarea
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          rows="4"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        ></textarea>
+      `;
+    } else if (field.type === "number") {
+      const step = field.step || (field.step === void 0 ? "1" : "any");
+      inputElement = html`
+        <input
+          type="number"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} != null ? ${fieldNameVar} : ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'number', ${requiredValue})"
+          step="${step}"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "date") {
+      inputElement = html`
+        <input
+          type="date"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'date', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "email") {
+      inputElement = html`
+        <input
+          type="email"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "select" && field.options) {
+      inputElement = html`
+        <select
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:change="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
+          data-testid="${fieldName}-select-${field.name}"
+          ${field.required ? "required" : ""}
+        >
+          ${!field.required ? html`<option value="">请选择</option>` : ""}
+          ${field.options.map(
+        (option) => html`
+              <option value="${String(option.value)}">${option.label}</option>
+            `
+      )}
+        </select>
+      `;
+    } else if (field.type === "checkbox") {
+      inputElement = html`
+        <div class="flex items-center">
+          <input
+            type="checkbox"
+            id="${fieldId}"
+            x-bind:checked="${fieldNameVar} === true || ${fieldNameVar} === 'true' || ${fieldNameVar} === 1 || ${fieldNameVar} === '1'"
+            x-on:change="updateField(${fieldNameForJs}, $event.target.checked, 'checkbox', ${requiredValue})"
+            class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+            data-testid="${fieldName}-checkbox-${field.name}"
+          />
+          <label for="${fieldId}" class="ml-2 text-sm text-gray-700">
+            ${field.label}
+          </label>
+        </div>
+      `;
+    }
+    return html`
+      <div class="space-y-2" data-testid="${fieldName}-field-${field.name}">
+        ${field.type !== "checkbox" ? html`
+              <label
+                for="${fieldId}"
+                class="block text-sm font-semibold text-gray-700"
+                data-testid="${fieldName}-label-${field.name}"
+              >
+                ${field.label}
+                ${field.required ? html`<span class="text-red-500 ml-1">*</span>` : ""}
+              </label>
+            ` : ""}
+        ${inputElement}
+      </div>
+    `;
+  };
+  return html`
+    <div
+      x-data="${xDataContent}"
+      data-initial-value="${initialValueJson}"
+      x-init="init()"
+      class="space-y-4"
+    >
+      <input
+        type="hidden"
+        name="${fieldName}"
+        value=""
+        data-testid="hidden-${fieldName}"
+      />
+      <div class="space-y-4">
+        ${fields.map((field) => generateField(field))}
+      </div>
+    </div>
+  `;
+}
+function StringArrayEditor(props) {
+  const {
+    value,
+    fieldName,
+    placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
+    allowEmpty = false
+  } = props;
+  const initialItems = value || [];
+  const initialValueJson = JSON.stringify(initialItems);
+  const xDataContent = `{
+    items: ${initialValueJson},
+    draggedIndex: null,
+    draggedOverIndex: null,
+    fieldName: ${JSON.stringify(fieldName)},
+    placeholder: ${JSON.stringify(placeholder)},
+    allowEmpty: ${allowEmpty},
+    init() {
+      const dataAttr = this.$el.getAttribute('data-initial-value');
+      if (dataAttr) {
+        try {
+          const parsed = JSON.parse(dataAttr);
+          if (Array.isArray(parsed)) {
+            this.items = parsed;
+          } else {
+            this.items = [];
+          }
+        } catch (e) {
+          console.error('Failed to parse initial value:', e);
+          this.items = [];
+        }
+      }
+      this.updateHiddenField();
+    },
+    updateHiddenField() {
+      const hiddenInput = this.$el.querySelector('input[name="${fieldName}"][type="hidden"]');
+      if (hiddenInput) {
+        hiddenInput.value = JSON.stringify(this.items);
+      }
+    },
+    addItem() {
+      this.items.push('');
+      this.updateHiddenField();
+      this.$nextTick(() => {
+        const keyInputs = this.$el.querySelectorAll('input[data-testid*="-input-"]');
+        if (keyInputs.length > 0) {
+          const lastInput = keyInputs[keyInputs.length - 1];
+          if (lastInput && lastInput.focus) {
+            lastInput.focus();
+          }
+        }
+      });
+    },
+    removeItem(index) {
+      this.items.splice(index, 1);
+      this.updateHiddenField();
+    },
+    updateItem(index, value) {
+      this.items[index] = value;
+      this.updateHiddenField();
+    },
+    handleDragStart(index, event) {
+      this.draggedIndex = index;
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', index.toString());
+      const target = event.currentTarget || event.target.closest('[draggable="true"]');
+      if (target) {
+        target.style.opacity = '0.5';
+      }
+    },
+    handleDragEnd(event) {
+      const target = event.currentTarget || event.target.closest('[draggable="true"]');
+      if (target) {
+        target.style.opacity = '';
+      }
+      this.draggedIndex = null;
+      this.draggedOverIndex = null;
+    },
+    handleDragOver(index, event) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+      this.draggedOverIndex = index;
+    },
+    handleDragLeave() {
+      this.draggedOverIndex = null;
+    },
+    handleDrop(index, event) {
+      event.preventDefault();
+      if (this.draggedIndex !== null && this.draggedIndex !== index) {
+        const draggedItem = this.items[this.draggedIndex];
+        this.items.splice(this.draggedIndex, 1);
+        this.items.splice(index, 0, draggedItem);
+        this.updateHiddenField();
+      }
+      this.draggedIndex = null;
+      this.draggedOverIndex = null;
+    }
+  }`;
+  return html`
+    <div
+      x-data="${xDataContent}"
+      data-initial-value="${initialValueJson}"
+      x-init="init()"
+      class="space-y-3"
+    >
+      <input
+        type="hidden"
+        name="${fieldName}"
+        value=""
+        data-testid="hidden-${fieldName}"
+      />
+      <div class="space-y-3">
+        <!-- 头部：显示数量和添加按钮 -->
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-gray-600">
+            共 <span x-text="items.length">0</span> 项
+          </span>
+          <button
+            type="button"
+            x-on:click="addItem()"
+            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
+            data-testid="${fieldName}-add-button"
+          >
+            <svg
+              class="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 4v16m8-8H4"
+              />
+            </svg>
+            添加项
+          </button>
+        </div>
+
+        <!-- 列表项 -->
+        <div class="space-y-2" x-show="items.length > 0">
+          <template x-for="(item, index) in items" x-bind:key="index">
+            <div
+              class="flex items-center gap-2 group"
+              x-bind:class="{
+                'opacity-50': draggedIndex === index,
+                'border-blue-300 bg-blue-50': draggedOverIndex === index && draggedIndex !== null && draggedIndex !== index
+              }"
+              draggable="true"
+              x-on:dragstart="handleDragStart(index, $event)"
+              x-on:dragend="handleDragEnd($event)"
+              x-on:dragover="handleDragOver(index, $event)"
+              x-on:dragleave="handleDragLeave()"
+              x-on:drop="handleDrop(index, $event)"
+              x-bind:data-testid="fieldName + '-item-' + index"
+            >
+              <!-- 拖拽手柄 -->
+              <div
+                class="flex-shrink-0 cursor-move text-gray-400 hover:text-gray-600 transition-colors p-1"
+                x-bind:data-testid="fieldName + '-drag-handle-' + index"
+                title="拖拽排序"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 8h16M4 16h16"
+                  />
+                </svg>
+              </div>
+
+              <!-- 输入框 -->
+              <input
+                type="text"
+                x-bind:value="items[index] || ''"
+                x-on:input="updateItem(index, $event.target.value)"
+                x-bind:placeholder="placeholder + ' ' + (index + 1)"
+                class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                x-bind:data-testid="fieldName + '-input-' + index"
+                x-bind:required="!allowEmpty"
+              />
+
+              <!-- 删除按钮 -->
+              <button
+                type="button"
+                x-on:click="removeItem(index)"
+                class="flex-shrink-0 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                x-bind:data-testid="fieldName + '-remove-button-' + index"
+                title="删除此项"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  />
+                </svg>
+              </button>
+            </div>
+          </template>
+        </div>
+
+        <!-- 空状态提示 -->
+        <div
+          x-show="items.length === 0"
+          class="text-center py-8 text-gray-400 text-sm border border-dashed border-gray-300 rounded-lg"
+        >
+          暂无项，点击"添加项"按钮添加
+        </div>
+      </div>
+    </div>
+  `;
+}
 
-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, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, StringArrayEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };