imean-service-engine-htmx-plugin 2.6.0 → 2.8.0

package/dist/index.mjs

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'hono/jsx/jsx-runtime';
 import { promises } from 'fs';
 import { logger, PluginPriority } from 'imean-service-engine';
 import { join } from 'path';
+import { z } from 'zod';
 import { getCookie } from 'hono/cookie';
 import { html } from 'hono/html';
 
@@ -421,6 +422,212 @@ var PageModel = class {
   }
 };
 
+// src/utils/schema-utils.ts
+function parseSchemaToFields(schema) {
+  const def = schema._def;
+  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+  if (!shape || typeof shape !== "object") {
+    return [];
+  }
+  const fields = [];
+  for (const [fieldName, fieldSchema] of Object.entries(shape)) {
+    if (["id", "createdAt", "updatedAt"].includes(fieldName)) {
+      continue;
+    }
+    const field = parseFieldSchema(fieldName, fieldSchema);
+    if (field) {
+      fields.push(field);
+    }
+  }
+  return fields;
+}
+function parseFieldSchema(fieldName, fieldSchema) {
+  if (!fieldSchema || !fieldSchema._def) {
+    return null;
+  }
+  const label = getFieldDescription(fieldSchema) || fieldName;
+  const { type, required, options, innerSchema, step } = analyzeFieldType(fieldSchema);
+  return {
+    name: fieldName,
+    label,
+    type,
+    required,
+    options,
+    step,
+    schema: innerSchema || fieldSchema
+  };
+}
+function getFieldDescription(schema) {
+  if (schema?.description) {
+    return schema.description;
+  }
+  const schemaDef = schema._def;
+  if (schemaDef?.description) {
+    return schemaDef.description;
+  }
+  if (schemaDef?.innerType) {
+    return getFieldDescription(schemaDef.innerType);
+  }
+  return void 0;
+}
+function analyzeFieldType(schema) {
+  const def = schema._def;
+  const typeName = def?.type || def?.typeName;
+  if (typeName === "optional" || typeName === "ZodOptional") {
+    const inner = analyzeFieldType(def.innerType);
+    return {
+      ...inner,
+      required: false,
+      innerSchema: def.innerType
+    };
+  }
+  if (typeName === "nullable" || typeName === "ZodNullable") {
+    const inner = analyzeFieldType(def.innerType);
+    return {
+      ...inner,
+      innerSchema: def.innerType
+    };
+  }
+  if (typeName === "enum" || typeName === "ZodEnum") {
+    const options = extractEnumValues(def);
+    return {
+      type: "select",
+      required: true,
+      options,
+      innerSchema: schema
+    };
+  }
+  if (typeName === "nativeEnum" || typeName === "ZodNativeEnum") {
+    const options = extractNativeEnumValues(def);
+    return {
+      type: "select",
+      required: true,
+      options,
+      innerSchema: schema
+    };
+  }
+  if (typeName === "string" || typeName === "ZodString") {
+    let fieldType = "text";
+    if (def?.checks) {
+      const hasEmailCheck = def.checks.some(
+        (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 {
+      type: fieldType,
+      required: true,
+      innerSchema: 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,
+      step
+    };
+  }
+  if (typeName === "date" || typeName === "ZodDate") {
+    return {
+      type: "date",
+      required: true,
+      innerSchema: schema
+    };
+  }
+  if (typeName === "boolean" || typeName === "ZodBoolean") {
+    return {
+      type: "checkbox",
+      required: true,
+      innerSchema: schema
+    };
+  }
+  return {
+    type: "text",
+    required: true,
+    innerSchema: schema
+  };
+}
+function extractEnumValues(def) {
+  let values;
+  if (def?.values && Array.isArray(def.values)) {
+    values = def.values;
+  } else if (def?.entries && typeof def.entries === "object") {
+    values = Object.keys(def.entries);
+  }
+  if (values && values.length > 0) {
+    return values.map((value) => ({
+      value,
+      label: String(value)
+    }));
+  }
+  return void 0;
+}
+function extractNativeEnumValues(def) {
+  const enumValues = def.values || def._def?.values || {};
+  if (enumValues && typeof enumValues === "object") {
+    return Object.entries(enumValues).filter(
+      ([_, value]) => typeof value === "string" || typeof value === "number"
+    ).map(([key, value]) => ({
+      value,
+      label: key
+    }));
+  }
+  return void 0;
+}
+function filterFieldsByNames(fields, fieldNames) {
+  if (fieldNames === void 0) {
+    return fields;
+  }
+  if (fieldNames.length === 0) {
+    return [];
+  }
+  return fields.filter((field) => fieldNames.includes(field.name));
+}
+function modelFieldsToFormFields(fields) {
+  return fields.map((field) => ({
+    name: field.name,
+    type: field.type,
+    label: field.label,
+    required: field.required,
+    options: field.options,
+    step: field.step
+  }));
+}
+function getFieldNamesFromFields(fields) {
+  return fields.map((field) => field.name);
+}
+function getFieldByName(fields, fieldName) {
+  return fields.find((field) => field.name === fieldName);
+}
+function getFieldLabelFromFields(fields, fieldName) {
+  const field = getFieldByName(fields, fieldName);
+  return field?.label || fieldName;
+}
+
 // src/features/base-feature.ts
 var BaseFeature = class {
   /** Feature 名称 */
@@ -434,15 +641,19 @@ var BaseFeature = class {
   /** 是否允许点击遮罩区域关闭弹窗（默认 true，设置为 false 时只能通过关闭按钮关闭） */
   closeOnBackdropClick;
   /** Schema（可选，由子类在构造函数中设置） */
-  schema;
+  schema = z.object({});
   /** 解析后的字段列表（可选，由子类在构造函数中设置） */
-  fields;
+  fields = [];
   constructor(options) {
     this.name = options.name;
     this.type = options.type;
     this.permission = options.permission;
     this.dialogSize = options.dialogSize;
     this.closeOnBackdropClick = options.closeOnBackdropClick;
+    this.schema = options.schema || z.object({});
+    if (this.schema) {
+      this.fields = parseSchemaToFields(this.schema);
+    }
   }
   /**
    * 获取动态标题（默认实现：返回 PageMetadata 的 title）
@@ -474,26 +685,6 @@ var BaseFeature = class {
     return await this.render?.(context) ?? null;
   }
 };
-function getFieldValue(field, initialData) {
-  if (initialData && Object.prototype.hasOwnProperty.call(initialData, field.name)) {
-    const value = initialData[field.name];
-    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;
@@ -513,7 +704,9 @@ function formatJsonString(value) {
   }
 }
 function renderFormField(field, initialData, formFieldRenderers) {
-  const value = getFieldValue(field, initialData);
+  const value = initialData?.[field.name];
+  field.label || field.name;
+  const fieldSchema = field.schema;
   const customRenderer = formFieldRenderers?.[field.name];
   if (customRenderer) {
     let parsedValue = null;
@@ -547,10 +740,10 @@ function renderFormField(field, initialData, formFieldRenderers) {
           /* @__PURE__ */ jsx("div", { children: customRenderer({
             field,
             value: parsedValue,
-            item: initialData,
-            name: field.name
-          }) }),
-          field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
+            item: initialData || {},
+            name: field.name,
+            label: field.label
+          }) })
         ]
       },
       field.name
@@ -558,41 +751,38 @@ function renderFormField(field, initialData, formFieldRenderers) {
   }
   if (field.type === "checkbox") {
     const isChecked = value === "true" || value === "1" || value === "on" || String(value).toLowerCase() === "true";
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: "space-y-2",
         "data-testid": `field-${field.name}`,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              htmlFor: field.name,
-              className: "flex items-center gap-3 cursor-pointer group py-2.5 px-3 rounded-lg hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200",
-              "data-testid": `label-${field.name}`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    id: field.name,
-                    name: field.name,
-                    value: "true",
-                    checked: isChecked,
-                    required: field.required,
-                    className: "w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer transition-all flex-shrink-0",
-                    "data-testid": `input-${field.name}`
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-700 select-none flex-1", children: [
-                  field.label,
-                  field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-                ] })
-              ]
-            }
-          ),
-          field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 ml-8", children: field.description })
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: field.name,
+            className: "flex items-center gap-3 cursor-pointer group py-2.5 px-3 rounded-lg hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200",
+            "data-testid": `label-${field.name}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  id: field.name,
+                  name: field.name,
+                  value: "true",
+                  checked: isChecked,
+                  required: field.required,
+                  className: "w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer transition-all flex-shrink-0",
+                  "data-testid": `input-${field.name}`
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-700 select-none flex-1", children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ] })
+            ]
+          }
+        )
       },
       field.name
     );
@@ -622,7 +812,7 @@ function renderFormField(field, initialData, formFieldRenderers) {
             id: field.name,
             name: field.name,
             required: field.required,
-            placeholder: field.placeholder || (isJsonString(value) ? "JSON \u683C\u5F0F\u6570\u636E" : ""),
+            placeholder: fieldSchema.description || (isJsonString(value) ? "JSON \u683C\u5F0F\u6570\u636E" : ""),
             rows: isJsonString(value) ? Math.max(10, value.split("\n").length) : Math.max(5, Math.ceil(value.length / 100)),
             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}`,
@@ -662,7 +852,7 @@ function renderFormField(field, initialData, formFieldRenderers) {
             id: field.name,
             name: field.name,
             required: field.required,
-            placeholder: field.placeholder,
+            placeholder: fieldSchema.description || "",
             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,
@@ -670,7 +860,7 @@ function renderFormField(field, initialData, formFieldRenderers) {
           },
           `${field.name}-${value}`
         ),
-        field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
+        fieldSchema.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: fieldSchema.description })
       ]
     },
     field.name
@@ -678,7 +868,6 @@ function renderFormField(field, initialData, formFieldRenderers) {
 }
 function FormPage(props) {
   const {
-    fields,
     groups,
     submitUrl,
     method = "post",
@@ -688,12 +877,6 @@ function FormPage(props) {
     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: ${fieldNames}`
-    );
-  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -741,7 +924,7 @@ function FormPage(props) {
             ]
           }
         ),
-        groups && groups.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        groups && groups.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -793,26 +976,25 @@ function FormPage(props) {
               )) }) })
             }
           )
-        ] }) : (
-          /* 平铺模式（向后兼容） */
+        ] }) : groups && groups.length === 1 ? (
+          /* 平铺模式 - 单个分组时不显示 Tab */
           /* @__PURE__ */ jsx(
             "form",
             {
               id: finalFormId,
               method: method === "put" ? "post" : method,
               action: submitUrl,
-              "hx-boost": "true",
-              "hx-trigger": "click from:#form-submit-button",
-              ...method === "put" ? { "hx-put": submitUrl } : {},
+              ...method === "put" ? { "hx-put": submitUrl } : { "hx-post": submitUrl },
               "hx-indicator": "#form-loading-indicator",
+              "hx-sync": "this:abort",
               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(
+              children: /* @__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: groups[0].fields.map(
                 (field) => renderFormField(field, initialData, formFieldRenderers)
               ) }) })
             }
           )
-        )
+        ) : null
       ]
     }
   );
@@ -998,180 +1180,52 @@ function compressArrays(obj, arrayIndicesMap) {
 }
 
 // src/utils/form-data-processor.ts
-function parseNestedFormData2(flatData) {
-  return parseNestedFormData(flatData);
-}
-function preprocessFormData(data, zodSchema) {
-  if (!zodSchema) {
-    return data;
-  }
-  const processed = { ...data };
-  const def = zodSchema._zod?.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._zod?.def || fieldSchema._def;
-    let typeName = fieldDef?.type;
-    let actualSchema = fieldSchema;
-    if (typeName === "optional") {
-      const innerType = fieldDef?.innerType;
-      if (innerType) {
-        actualSchema = innerType;
-        const innerDef = innerType._zod?.def || innerType._def;
-        typeName = innerDef?.type;
-      }
-    }
-    if (typeName === "number" || typeName === "int") {
-      if (typeof value === "string") {
-        const trimmed = value.trim();
-        if (trimmed !== "") {
-          const numValue = Number(trimmed);
-          if (!isNaN(numValue)) {
-            processed[fieldName] = numValue;
-          }
-        }
-      } else if (typeof value === "number") {
-        processed[fieldName] = value;
-      }
-    }
-    if (typeName === "boolean") {
-      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") {
-      if (Array.isArray(value)) {
-        const arraySchema = actualSchema;
-        const arrayDef = arraySchema._zod?.def || arraySchema._def;
-        let elementType = arrayDef?.element;
-        if (!elementType) {
-          processed[fieldName] = value;
-        } else {
-          const elementDef = elementType._zod?.def || elementType._def;
-          let elementTypeName = elementDef?.type;
-          if (elementTypeName === "optional") {
-            const innerElementType = elementDef?.innerType;
-            if (innerElementType) {
-              elementType = innerElementType;
-              const innerElementDef = innerElementType._zod?.def || innerElementType._def;
-              elementTypeName = innerElementDef?.type;
-            }
-          }
-          processed[fieldName] = value.map((item) => {
-            if (typeof item === "object" && item !== null && !Array.isArray(item)) {
-              if (elementTypeName === "object") {
-                const processedItem = preprocessFormData(
-                  item,
-                  elementType
-                );
-                return { ...item, ...processedItem };
-              }
-              return item;
-            }
-            if (typeof item === "string") {
-              return convertValueByType(item, elementType);
-            }
-            if (Array.isArray(item)) {
-              const elementDef2 = elementType._zod?.def || elementType._def;
-              const nestedInnerType = elementDef2?.element;
-              if (nestedInnerType) {
-                return item.map((subItem) => {
-                  if (typeof subItem === "string") {
-                    return convertValueByType(subItem, nestedInnerType);
-                  }
-                  if (typeof subItem === "object" && subItem !== null) {
-                    const subItemDef = nestedInnerType._zod?.def || nestedInnerType._def;
-                    if (subItemDef?.type === "object") {
-                      return preprocessFormData(
-                        subItem,
-                        nestedInnerType
-                      );
-                    }
-                  }
-                  return subItem;
-                });
-              }
-              return item;
-            }
-            return item;
-          });
-        }
-      } else 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") {
-      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-        const objectSchema = actualSchema;
-        processed[fieldName] = preprocessFormData(value, objectSchema);
-      } else 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 === "unknown") {
-      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;
+function getZodDef(schema) {
+  return schema._zod?.def || schema._def;
 }
-function convertValueByType(value, schema) {
-  const def = schema._zod?.def || schema._def;
+function resolveZodType(schema) {
+  let currentSchema = schema;
+  let isOptional = false;
+  let def = getZodDef(currentSchema);
   let typeName = def?.type;
   if (typeName === "optional") {
+    isOptional = true;
     const innerType = def?.innerType;
     if (innerType) {
-      const innerDef = innerType._zod?.def || innerType._def;
-      typeName = innerDef?.type;
+      currentSchema = innerType;
+      def = getZodDef(innerType);
+      typeName = def?.type;
     }
   }
-  if (typeName === "number" || typeName === "int") {
+  if (typeName === "default" || typeName === "ZodDefault") {
+    const innerType = def?.innerType;
+    if (innerType) {
+      currentSchema = innerType;
+      def = getZodDef(innerType);
+      typeName = def?.type;
+    }
+  }
+  while (typeName === "refinement" || typeName === "ZodEffects") {
+    const innerType = def?.schema || def?.innerType;
+    if (innerType) {
+      currentSchema = innerType;
+      def = getZodDef(innerType);
+      typeName = def?.type;
+    } else {
+      break;
+    }
+  }
+  return {
+    typeName: typeName || "any",
+    actualSchema: currentSchema,
+    isOptional
+  };
+}
+function parseNestedFormData2(flatData) {
+  return parseNestedFormData(flatData);
+}
+function convertNumber(value) {
+  if (typeof value === "string") {
     const trimmed = value.trim();
     if (trimmed !== "") {
       const numValue = Number(trimmed);
@@ -1180,222 +1234,172 @@ function convertValueByType(value, schema) {
       }
     }
     return value;
-  } else if (typeName === "boolean") {
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  return value;
+}
+function convertBoolean(value) {
+  if (typeof value === "string") {
     const trimmed = value.trim().toLowerCase();
     if (trimmed === "true" || trimmed === "1" || trimmed === "on") {
       return true;
-    } else if (trimmed === "false" || trimmed === "0" || trimmed === "off" || trimmed === "") {
+    }
+    if (trimmed === "false" || trimmed === "0" || trimmed === "off" || trimmed === "") {
       return false;
     }
     return value;
   }
+  if (typeof value === "boolean") {
+    return value;
+  }
   return value;
 }
-
-// src/utils/schema-utils.ts
-function parseSchemaToFields(schema) {
-  const def = schema._def;
-  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
-  if (!shape || typeof shape !== "object") {
-    return [];
-  }
-  const fields = [];
-  for (const [fieldName, fieldSchema] of Object.entries(shape)) {
-    if (["id", "createdAt", "updatedAt"].includes(fieldName)) {
-      continue;
-    }
-    const field = parseFieldSchema(fieldName, fieldSchema);
-    if (field) {
-      fields.push(field);
+function processArrayElement(item, elementType) {
+  if (typeof item === "object" && item !== null && !Array.isArray(item)) {
+    const { typeName } = resolveZodType(elementType);
+    if (typeName === "object") {
+      const processedItem = preprocessFormData(
+        item,
+        elementType
+      );
+      return { ...item, ...processedItem };
     }
+    return item;
   }
-  return fields;
-}
-function parseFieldSchema(fieldName, fieldSchema) {
-  if (!fieldSchema || !fieldSchema._def) {
-    return null;
-  }
-  const label = getFieldDescription(fieldSchema) || fieldName;
-  const { type, required, options, innerSchema, step } = analyzeFieldType(fieldSchema);
-  return {
-    name: fieldName,
-    label,
-    type,
-    required,
-    options,
-    step,
-    schema: innerSchema || fieldSchema
-  };
-}
-function getFieldDescription(schema) {
-  if (schema?.description) {
-    return schema.description;
-  }
-  const schemaDef = schema._def;
-  if (schemaDef?.description) {
-    return schemaDef.description;
-  }
-  if (schemaDef?.innerType) {
-    return getFieldDescription(schemaDef.innerType);
-  }
-  return void 0;
-}
-function analyzeFieldType(schema) {
-  const def = schema._def;
-  const typeName = def?.type || def?.typeName;
-  if (typeName === "optional" || typeName === "ZodOptional") {
-    const inner = analyzeFieldType(def.innerType);
-    return {
-      ...inner,
-      required: false,
-      innerSchema: def.innerType
-    };
-  }
-  if (typeName === "nullable" || typeName === "ZodNullable") {
-    const inner = analyzeFieldType(def.innerType);
-    return {
-      ...inner,
-      innerSchema: def.innerType
-    };
-  }
-  if (typeName === "enum" || typeName === "ZodEnum") {
-    const options = extractEnumValues(def);
-    return {
-      type: "select",
-      required: true,
-      options,
-      innerSchema: schema
-    };
-  }
-  if (typeName === "nativeEnum" || typeName === "ZodNativeEnum") {
-    const options = extractNativeEnumValues(def);
-    return {
-      type: "select",
-      required: true,
-      options,
-      innerSchema: schema
-    };
+  if (typeof item === "string") {
+    return convertValueByType(item, elementType);
   }
-  if (typeName === "string" || typeName === "ZodString") {
-    let fieldType = "text";
-    if (def?.checks) {
-      const hasEmailCheck = def.checks.some(
-        (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";
+  if (Array.isArray(item)) {
+    const elementDef = getZodDef(elementType);
+    const nestedInnerType = elementDef?.element;
+    if (nestedInnerType) {
+      return item.map((subItem) => {
+        if (typeof subItem === "string") {
+          return convertValueByType(subItem, nestedInnerType);
+        }
+        if (typeof subItem === "object" && subItem !== null) {
+          const subItemDef = getZodDef(nestedInnerType);
+          if (subItemDef?.type === "object") {
+            return preprocessFormData(
+              subItem,
+              nestedInnerType
+            );
           }
         }
-      }
-    }
-    return {
-      type: fieldType,
-      required: true,
-      innerSchema: 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 subItem;
+      });
     }
-    return {
-      type: "number",
-      required: true,
-      innerSchema: schema,
-      step
-    };
-  }
-  if (typeName === "date" || typeName === "ZodDate") {
-    return {
-      type: "date",
-      required: true,
-      innerSchema: schema
-    };
-  }
-  if (typeName === "boolean" || typeName === "ZodBoolean") {
-    return {
-      type: "checkbox",
-      required: true,
-      innerSchema: schema
-    };
-  }
-  return {
-    type: "text",
-    required: true,
-    innerSchema: schema
-  };
-}
-function extractEnumValues(def) {
-  let values;
-  if (def?.values && Array.isArray(def.values)) {
-    values = def.values;
-  } else if (def?.entries && typeof def.entries === "object") {
-    values = Object.keys(def.entries);
-  }
-  if (values && values.length > 0) {
-    return values.map((value) => ({
-      value,
-      label: String(value)
-    }));
-  }
-  return void 0;
-}
-function extractNativeEnumValues(def) {
-  const enumValues = def.values || def._def?.values || {};
-  if (enumValues && typeof enumValues === "object") {
-    return Object.entries(enumValues).filter(
-      ([_, value]) => typeof value === "string" || typeof value === "number"
-    ).map(([key, value]) => ({
-      value,
-      label: key
-    }));
+    return item;
   }
-  return void 0;
+  return item;
 }
-function filterFieldsByNames(fields, fieldNames) {
-  if (fieldNames === void 0) {
-    return fields;
+function processArrayType(value, actualSchema) {
+  if (Array.isArray(value)) {
+    const arrayDef = getZodDef(actualSchema);
+    let elementType = arrayDef?.element;
+    if (!elementType) {
+      return value;
+    }
+    const { actualSchema: resolvedElementType } = resolveZodType(elementType);
+    return value.map((item) => processArrayElement(item, resolvedElementType));
   }
-  if (fieldNames.length === 0) {
-    return [];
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+      try {
+        return JSON.parse(trimmed);
+      } catch {
+      }
+    } else {
+      return trimmed.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
+    }
   }
-  return fields.filter((field) => fieldNames.includes(field.name));
+  return value;
 }
-function modelFieldsToFormFields(fields) {
-  return fields.map((field) => ({
-    name: field.name,
-    type: field.type,
-    label: field.label,
-    required: field.required,
-    options: field.options,
-    step: field.step
-  }));
+function processObjectType(value, actualSchema) {
+  if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+    return preprocessFormData(value, actualSchema);
+  }
+  if (typeof value === "string" && value.trim() !== "") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+      try {
+        return JSON.parse(trimmed);
+      } catch {
+      }
+    }
+  }
+  return value;
 }
-function getFieldNamesFromFields(fields) {
-  return fields.map((field) => field.name);
+function processAnyType(value) {
+  if (typeof value === "string" && value.trim() !== "") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+      try {
+        return JSON.parse(trimmed);
+      } catch {
+      }
+    }
+  }
+  return value;
 }
-function getFieldByName(fields, fieldName) {
-  return fields.find((field) => field.name === fieldName);
+function preprocessFormData(data, zodSchema) {
+  if (!zodSchema) {
+    return data;
+  }
+  const processed = { ...data };
+  const def = getZodDef(zodSchema);
+  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 || value === "") {
+      processed[fieldName] = void 0;
+      continue;
+    }
+    const { typeName, actualSchema } = resolveZodType(
+      fieldSchema
+    );
+    switch (typeName) {
+      case "number":
+      case "int":
+        processed[fieldName] = convertNumber(value);
+        break;
+      case "boolean":
+        processed[fieldName] = convertBoolean(value);
+        break;
+      case "array":
+        processed[fieldName] = processArrayType(value, actualSchema);
+        break;
+      case "object":
+        processed[fieldName] = processObjectType(value, actualSchema);
+        break;
+      case "any":
+      case "unknown":
+        processed[fieldName] = processAnyType(value);
+        break;
+    }
+  }
+  return processed;
 }
-function getFieldLabelFromFields(fields, fieldName) {
-  const field = getFieldByName(fields, fieldName);
-  return field?.label || fieldName;
+function convertValueByType(value, schema) {
+  const { typeName } = resolveZodType(schema);
+  switch (typeName) {
+    case "number":
+    case "int":
+      return convertNumber(value);
+    case "boolean":
+      return convertBoolean(value);
+    default:
+      return value;
+  }
 }
 var BaseFormFeature = class extends BaseFeature {
   titleGetter;
@@ -1419,7 +1423,8 @@ var BaseFormFeature = class extends BaseFeature {
       type: options.type,
       permission: options.permission,
       dialogSize: options.dialogSize,
-      closeOnBackdropClick: options.closeOnBackdropClick
+      closeOnBackdropClick: options.closeOnBackdropClick,
+      schema: options.schema
     });
     this.titleGetter = options.getTitle;
     this.descriptionGetter = options.getDescription;
@@ -1432,7 +1437,7 @@ var BaseFormFeature = class extends BaseFeature {
       if (this.getFormAction() === "edit") {
         try {
           const initialData = await this.getInitialData(context);
-          if (initialData && initialData.id) {
+          if (initialData) {
             return await this.titleGetter(context, initialData);
           }
         } catch (error) {
@@ -1452,7 +1457,7 @@ var BaseFormFeature = class extends BaseFeature {
       if (this.getFormAction() === "edit") {
         try {
           const initialData = await this.getInitialData(context);
-          if (initialData && initialData.id) {
+          if (initialData) {
             return await this.descriptionGetter(context, initialData);
           }
         } catch (error) {
@@ -1476,17 +1481,13 @@ var BaseFormFeature = class extends BaseFeature {
    * 处理请求
    */
   async handle(context) {
-    const ctx = context.ctx;
-    this.currentFormId = void 0;
-    if (ctx.req.method === "GET") {
+    if (context.ctx.req.method === "GET") {
       return this.render(context);
-    } else if (ctx.req.method === "POST" || ctx.req.method === "PUT" || ctx.req.method === "PATCH") {
-      const originalData = { ...context.body };
-      const nestedData = parseNestedFormData2(context.body);
-      let data = this.preprocessFormData(nestedData);
-      if (!this.schema) {
-        throw new Error("Schema is required for form validation");
-      }
+    }
+    const formData = this.preprocessFormData(context.body);
+    const nestedData = parseNestedFormData2(formData);
+    let data = this.preprocessFormData(nestedData);
+    if (this.schema) {
       const parseResult = this.schema.safeParse(data);
       if (!parseResult.success) {
         const issues = parseResult.error.issues || [];
@@ -1495,35 +1496,33 @@ var BaseFormFeature = class extends BaseFeature {
         const errorMessage = firstError.message;
         const errorText = fieldName ? `${fieldName}: ${errorMessage}` : errorMessage;
         context.sendError("\u9A8C\u8BC1\u5931\u8D25", errorText);
-        return this.render(context, originalData);
-      }
-      const item = await this.handleSubmit(
-        context,
-        parseResult.data
-      );
-      if (!item) {
-        context.sendError(
-          this.getFormAction() === "create" ? "\u521B\u5EFA\u5931\u8D25" : "\u66F4\u65B0\u5931\u8D25",
-          "\u64CD\u4F5C\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
-        );
-        return this.render(context, originalData);
+        return null;
       }
-      const actionText = this.getFormAction() === "create" ? "\u521B\u5EFA" : "\u66F4\u65B0";
-      context.sendSuccess(
-        `${actionText}\u6210\u529F`,
-        `${context.model.getMetadata().title}\u5DF2\u6210\u529F${actionText}`
+      data = parseResult.data;
+    }
+    const item = await this.handleSubmit(context, data);
+    if (!item) {
+      context.sendError(
+        this.getFormAction() === "create" ? "\u521B\u5EFA\u5931\u8D25" : "\u66F4\u65B0\u5931\u8D25",
+        "\u64CD\u4F5C\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
       );
-      if (context.isDialog) {
-        context.setRefresh(true);
-        if (context.redirectUrl) {
-          context.redirectUrl = void 0;
-        }
-        return null;
-      } else {
-        const redirectUrl = this.getSuccessRedirectUrl(context, item);
-        context.redirect(redirectUrl);
-        return null;
+      return null;
+    }
+    const actionText = this.getFormAction() === "create" ? "\u521B\u5EFA" : "\u66F4\u65B0";
+    context.sendSuccess(
+      `${actionText}\u6210\u529F`,
+      `${context.model.getMetadata().title}\u5DF2\u6210\u529F${actionText}`
+    );
+    if (context.isDialog) {
+      context.setRefresh(true);
+      if (context.redirectUrl) {
+        context.redirectUrl = void 0;
       }
+      return null;
+    } else {
+      const redirectUrl = this.getSuccessRedirectUrl(context, item);
+      context.redirect(redirectUrl);
+      return null;
     }
   }
   formFieldNames;
@@ -1532,15 +1531,9 @@ var BaseFormFeature = class extends BaseFeature {
    * 渲染表单页面
    */
   async render(context, initialData) {
-    let formData;
-    if (this.getFormAction() === "edit") {
-      if (initialData) {
-        formData = initialData;
-      } else {
-        formData = await this.getInitialData(context);
-      }
-    } else {
-      formData = initialData;
+    let formData = initialData;
+    if (!initialData) {
+      formData = await this.getInitialData(context);
     }
     let submitUrl = this.getSubmitUrl(context);
     if (context.isDialog) {
@@ -1550,12 +1543,9 @@ var BaseFormFeature = class extends BaseFeature {
     }
     const method = this.getFormAction() === "create" ? "post" : "put";
     const formId = this.getFormId(context);
+    let formGroups = [];
     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) => {
+      formGroups = this.groups.map((group) => {
         const pickObject = group.fields.reduce(
           (acc, fieldName) => {
             acc[fieldName] = true;
@@ -1565,39 +1555,27 @@ var BaseFormFeature = class extends BaseFeature {
         );
         return {
           label: group.label,
-          schema: schema.pick(pickObject),
-          fields: group.fields
+          schema: this.schema.pick(pickObject),
+          fields: group.fields.map((name) => {
+            const field = this.fields.find((f) => f.name === name);
+            return field;
+          })
         };
       });
-      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,
+    } else {
+      const formFields = !this.formFieldNames ? this.fields : this.fields.filter((f) => this.formFieldNames?.includes(f.name));
+      formGroups = [
         {
-          groups: groupFields,
-          submitUrl,
-          method,
-          initialData: formData,
-          formId,
-          isDialog: context.isDialog,
-          formFieldRenderers: this.formFieldRenderers
+          label: "\u9ED8\u8BA4\u5206\u7EC4",
+          fields: formFields,
+          schema: this.schema
         }
-      );
+      ];
     }
-    const filteredFields = this.formFieldNames ? filterFieldsByNames(this.fields || [], this.formFieldNames) : this.fields || [];
-    const fields = modelFieldsToFormFields(filteredFields);
     return /* @__PURE__ */ jsx(
       FormPage,
       {
-        fields,
+        groups: formGroups,
         submitUrl,
         method,
         initialData: formData,
@@ -1798,90 +1776,259 @@ function Card(props) {
     }
   );
 }
-function renderDefaultValue(value) {
+function renderEmptyValue() {
+  return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
+}
+function renderBoolean(value) {
+  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"
+    }
+  );
+}
+function renderNumber(value) {
+  return /* @__PURE__ */ jsx("span", { children: value.toLocaleString() });
+}
+function renderDate(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (isNaN(date.getTime())) {
+    return renderEmptyValue();
+  }
+  return /* @__PURE__ */ jsx("span", { children: date.toLocaleString() });
+}
+function renderSimpleArray(value) {
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u6682\u65E0\u6570\u636E" });
+  }
+  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
+  )) });
+}
+function renderObjectArray(value) {
+  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"
+  ] });
+}
+function renderObject(value) {
+  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) });
+}
+function DetailFieldRenderer(props) {
+  const { value, field } = props;
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
+    return renderEmptyValue();
+  }
+  if (field) {
+    switch (field.type) {
+      case "checkbox":
+        if (typeof value === "boolean") {
+          return renderBoolean(value);
+        }
+        if (value === "true" || value === "1" || value === "on" || String(value).toLowerCase() === "true") {
+          return renderBoolean(true);
+        }
+        if (value === "false" || value === "0" || String(value).toLowerCase() === "false") {
+          return renderBoolean(false);
+        }
+        break;
+      case "number":
+        if (typeof value === "number") {
+          return renderNumber(value);
+        }
+        const numValue = Number(value);
+        if (!isNaN(numValue)) {
+          return renderNumber(numValue);
+        }
+        break;
+      case "date":
+        if (value instanceof Date) {
+          return renderDate(value);
+        }
+        if (typeof value === "string") {
+          return renderDate(value);
+        }
+        break;
+      case "email":
+      case "url":
+        if (typeof value === "string" && value.trim()) {
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: value,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-blue-600 hover:text-blue-800 hover:underline",
+              children: value
+            }
+          );
+        }
+        break;
+      case "select":
+        if (field.options && field.options.length > 0) {
+          const option = field.options.find(
+            (opt) => String(opt.value) === String(value)
+          );
+          if (option) {
+            return /* @__PURE__ */ jsx("span", { children: option.label });
+          }
+        }
+        break;
+    }
   }
   if (Array.isArray(value)) {
     if (value.length === 0) {
-      return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u6682\u65E0\u6570\u636E" });
+      return renderEmptyValue();
     }
     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 renderObjectArray(value);
+    }
+    return renderSimpleArray(value);
+  }
+  if (typeof value === "object") {
+    if (value instanceof Date) {
+      return renderDate(value);
+    }
+    return renderObject(value);
+  }
+  if (typeof value === "boolean") {
+    return renderBoolean(value);
+  }
+  if (typeof value === "number") {
+    return renderNumber(value);
+  }
+  return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
+function ColumnRenderer(value, field) {
+  if (value === null || value === void 0) {
+    return renderEmptyValue();
+  }
+  if (field) {
+    switch (field.type) {
+      case "checkbox":
+        if (typeof value === "boolean") {
+          return renderBoolean(value);
+        }
+        if (value === "true" || value === "1" || value === "on" || String(value).toLowerCase() === "true") {
+          return renderBoolean(true);
+        }
+        if (value === "false" || value === "0" || String(value).toLowerCase() === "false") {
+          return renderBoolean(false);
+        }
+        break;
+      case "number":
+        if (typeof value === "number") {
+          return renderNumber(value);
+        }
+        const numValue = Number(value);
+        if (!isNaN(numValue)) {
+          return renderNumber(numValue);
+        }
+        break;
+      case "date":
+        if (value instanceof Date) {
+          return renderDate(value);
+        }
+        if (typeof value === "string") {
+          return renderDate(value);
+        }
+        break;
+      case "email":
+      case "url":
+        if (typeof value === "string" && value.trim()) {
+          return /* @__PURE__ */ jsx("span", { className: "text-blue-600", children: value });
+        }
+        break;
+      case "select":
+        if (field.options && field.options.length > 0) {
+          const option = field.options.find(
+            (opt) => String(opt.value) === String(value)
+          );
+          if (option) {
+            return /* @__PURE__ */ jsx("span", { children: option.label });
+          }
+        }
+        break;
+      case "textarea":
+        if (typeof value === "string" && value.length > 50) {
+          return /* @__PURE__ */ jsxs("span", { title: value, className: "truncate max-w-xs block", children: [
+            value.substring(0, 50),
+            "..."
+          ] });
+        }
+        break;
+    }
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return renderEmptyValue();
+    }
+    if (value.length > 0 && typeof value[0] !== "object") {
+      const displayItems = value.slice(0, 3).map(String);
+      const remaining = value.length - 3;
+      return /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+        displayItems.join(", "),
+        remaining > 0 && ` +${remaining}`
       ] });
     }
-    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
-    )) });
+    return /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600", children: [
+      value.length,
+      " \u9879"
+    ] });
   }
   if (typeof value === "object") {
     if (value instanceof Date) {
-      return /* @__PURE__ */ jsx("span", { children: value.toLocaleString() });
+      return renderDate(value);
     }
-    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) });
+    return /* @__PURE__ */ jsx("span", { className: "text-gray-500 text-sm", children: "[\u5BF9\u8C61]" });
   }
   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"
-      }
-    );
+    return renderBoolean(value);
   }
   if (typeof value === "number") {
-    return /* @__PURE__ */ jsx("span", { children: value.toLocaleString() });
+    return renderNumber(value);
+  }
+  if (typeof value === "string" && value.length > 50) {
+    return /* @__PURE__ */ jsxs("span", { title: value, className: "truncate max-w-xs block", children: [
+      value.substring(0, 50),
+      "..."
+    ] });
   }
   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;
+function getFieldLabel(fieldName, fieldLabels) {
+  return fieldLabels?.[fieldName] || fieldName;
+}
+function getFieldRenderer(fieldName, fieldRenderers, fieldDefinitions) {
+  if (fieldRenderers) {
+    const customRenderer = fieldRenderers[fieldName];
+    if (customRenderer) {
+      return customRenderer;
     }
-  } 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
-  );
+  return ((props) => {
+    const field = fieldDefinitions?.[fieldName];
+    return DetailFieldRenderer({ ...props, field });
+  });
+}
+function renderFieldValue(rendered) {
+  if (rendered === null || rendered === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
+  }
+  if (typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
+    return /* @__PURE__ */ jsx("span", { children: String(rendered) });
+  }
+  return rendered;
 }
 function DetailPage(props) {
-  const { item, fields, groups } = props;
+  const { item, fields, groups, fieldLabels, fieldDefinitions, fieldRenderers } = props;
   if (groups && groups.length > 0) {
     return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx(
       Card,
@@ -1890,18 +2037,78 @@ function DetailPage(props) {
         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);
+        children: /* @__PURE__ */ jsx("dl", { className: "divide-y divide-gray-100", children: group.fields.map((fieldName) => {
+          const value = group.values[fieldName];
+          const label = getFieldLabel(fieldName, fieldLabels);
+          const Renderer = getFieldRenderer(fieldName, fieldRenderers, fieldDefinitions);
+          const rendered = Renderer({
+            value,
+            item,
+            name: fieldName,
+            label
+          });
+          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: 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: renderFieldValue(rendered) })
+                  }
+                )
+              ]
+            },
+            fieldName
+          );
         }) })
       },
       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 /* @__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((fieldName) => {
+      const value = item[fieldName];
+      const label = getFieldLabel(fieldName, fieldLabels);
+      const Renderer = getFieldRenderer(fieldName, fieldRenderers, fieldDefinitions);
+      const rendered = Renderer({
+        value,
+        item,
+        name: fieldName,
+        label
+      });
+      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: 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: renderFieldValue(rendered) })
+              }
+            )
+          ]
+        },
+        fieldName
+      );
     }) }) });
   }
   return null;
@@ -1978,28 +2185,35 @@ var DefaultDetailFeature = class extends BaseFeature {
           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;
-              },
-              {}
-            )
-          };
+      const fieldLabels2 = {};
+      const fieldDefinitions2 = {};
+      (this.fields || []).forEach((field) => {
+        fieldLabels2[field.name] = field.label;
+        fieldDefinitions2[field.name] = field;
+      });
+      const groupFields = groupSchemas.map(({ label, fields: fieldNames }) => {
+        return {
+          label,
+          fields: fieldNames,
+          values: fieldNames.reduce(
+            (acc, fieldName) => {
+              acc[fieldName] = item[fieldName];
+              return acc;
+            },
+            {}
+          )
+        };
+      });
+      return /* @__PURE__ */ jsx(
+        DetailPage,
+        {
+          item,
+          groups: groupFields,
+          fieldLabels: fieldLabels2,
+          fieldDefinitions: fieldDefinitions2,
+          fieldRenderers: this.fieldRenderers
         }
       );
-      return /* @__PURE__ */ jsx(DetailPage, { item, groups: groupFields });
     }
     const detailFields = this.detailFieldNames ? filterFieldsByNames(this.fields || [], this.detailFieldNames) : this.fields || [];
     if (this.detailFieldNames) {
@@ -2017,13 +2231,25 @@ var DefaultDetailFeature = class extends BaseFeature {
       }
     }
     const detailFieldNames = getFieldNamesFromFields(detailFields);
-    const fields = detailFieldNames.map((fieldName) => ({
-      key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName) || fieldName,
-      render: this.fieldRenderers?.[fieldName]
-      // 如果有自定义渲染函数则使用
-    }));
-    return /* @__PURE__ */ jsx(DetailPage, { item, fields });
+    const fieldLabels = {};
+    const fieldDefinitions = {};
+    detailFieldNames.forEach((fieldName) => {
+      fieldLabels[fieldName] = getFieldLabelFromFields(this.fields || [], fieldName) || fieldName;
+      const field = detailFields.find((f) => f.name === fieldName);
+      if (field) {
+        fieldDefinitions[fieldName] = field;
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      DetailPage,
+      {
+        item,
+        fields: detailFieldNames,
+        fieldLabels,
+        fieldDefinitions,
+        fieldRenderers: this.fieldRenderers
+      }
+    );
   }
   async getActions(context) {
     const id = context.params.id;
@@ -2082,6 +2308,7 @@ var DefaultEditFeature = class extends BaseFormFeature {
       permission: options.permission || `${options.permissionPrefix}.edit`,
       dialogSize: options.dialogSize,
       closeOnBackdropClick: options.closeOnBackdropClick,
+      schema: options.schema,
       getTitle: options.getTitle ? (context, item) => {
         if (item) {
           return options.getTitle(item, context);
@@ -2095,8 +2322,6 @@ var DefaultEditFeature = class extends BaseFormFeature {
         return void 0;
       } : void 0
     });
-    this.schema = options.schema;
-    this.fields = parseSchemaToFields(options.schema);
     this.getItem = options.getItem;
     this.updateItem = options.updateItem;
     this.formFieldNames = options.formFieldNames;
@@ -2169,7 +2394,7 @@ function FilterForm(props) {
     listPath,
     currentFilters = {}
   } = props;
-  function getFieldValue2(field) {
+  function getFieldValue(field) {
     const value = currentFilters[field.name];
     if (value === null || value === void 0 || value === "") {
       return "";
@@ -2206,10 +2431,10 @@ function FilterForm(props) {
               className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
               "data-testid": `filter-select-${field.name}`,
               children: [
-                /* @__PURE__ */ jsx("option", { value: "", selected: getFieldValue2(field) === "", children: "\u5168\u90E8" }),
+                /* @__PURE__ */ jsx("option", { value: "", selected: getFieldValue(field) === "", children: "\u5168\u90E8" }),
                 field.options?.map((option) => {
                   const optionValue = String(option.value);
-                  const isSelected = getFieldValue2(field) === optionValue;
+                  const isSelected = getFieldValue(field) === optionValue;
                   return /* @__PURE__ */ jsx("option", { value: optionValue, selected: isSelected, children: option.label }, optionValue);
                 })
               ]
@@ -2220,7 +2445,7 @@ function FilterForm(props) {
               id: `filter-${field.name}`,
               name: field.name,
               type: "date",
-              value: getFieldValue2(field),
+              value: getFieldValue(field),
               className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
               "data-testid": `filter-input-${field.name}`
             }
@@ -2230,7 +2455,7 @@ function FilterForm(props) {
               id: `filter-${field.name}`,
               name: field.name,
               type: "number",
-              value: getFieldValue2(field),
+              value: getFieldValue(field),
               placeholder: field.placeholder || `\u8BF7\u8F93\u5165${field.label}`,
               className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
               "data-testid": `filter-input-${field.name}`
@@ -2241,7 +2466,7 @@ function FilterForm(props) {
               id: `filter-${field.name}`,
               name: field.name,
               type: "text",
-              value: getFieldValue2(field),
+              value: getFieldValue(field),
               placeholder: field.placeholder || `\u8BF7\u8F93\u5165${field.label}`,
               className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
               "data-testid": `filter-input-${field.name}`
@@ -2739,12 +2964,26 @@ var DefaultListFeature = class extends BaseFeature {
     const listFields = this.listFieldNames ? filterFieldsByNames(this.fields || [], this.listFieldNames) : this.fields || [];
     const listFieldNames = getFieldNamesFromFields(listFields);
     const filterFields = this.filterSchema ? modelFieldsToFormFields(parseSchemaToFields(this.filterSchema)) : [];
-    const columns = listFieldNames.map((fieldName) => ({
-      key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName),
-      render: this.columnRenderers?.[fieldName]
-      // 如果有自定义渲染函数则使用
-    }));
+    const columns = listFieldNames.map((fieldName) => {
+      const field = this.fields?.find((f) => f.name === fieldName);
+      const label = getFieldLabelFromFields(this.fields || [], fieldName);
+      const customRenderer = this.columnRenderers?.[fieldName];
+      return {
+        key: fieldName,
+        label,
+        render: (value, item) => {
+          if (customRenderer) {
+            return customRenderer({
+              value,
+              item,
+              name: fieldName,
+              label
+            });
+          }
+          return ColumnRenderer(value, field);
+        }
+      };
+    });
     const model = context.model;
     const prefix = context.prefix || "";
     const basePath = `${prefix}/${model.modelName}`;
@@ -3807,11 +4046,11 @@ function SortableList(props) {
 function StringArrayEditor(props) {
   const {
     value,
-    name,
     placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
     allowEmpty = false,
     rows = 1
   } = props;
+  const name = props.name;
   const initialItems = value || [];
   const initialDataJson = JSON.stringify({
     items: initialItems.map((item) => item || ""),
@@ -3978,7 +4217,8 @@ function ArrayItem({
   ] });
 }
 function TagsEditor(props) {
-  const { value, name, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const { value, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const name = props.name;
   const initialTags = value || [];
   const initialDataJson = JSON.stringify({
     tags: initialTags.map((tag) => tag || ""),
@@ -4262,7 +4502,7 @@ function ObjectEditor(props) {
   const initialValueJson = JSON.stringify(initialObject);
   JSON.stringify(fields.map((f) => f.name));
   const generateField = (field) => {
-    const fieldId = `${name}-${field.name}`;
+    const fieldId = `${String(name)}-${field.name}`;
     const fieldValue = initialObject[field.name];
     const fieldValueStr = fieldValue === void 0 || fieldValue === null ? "" : typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue);
     const requiredAttr = field.required ? "required" : "";
@@ -5331,4 +5571,4 @@ var HtmxAdminPlugin = class {
   }
 };
 
-export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, SortableList, StringArrayEditor, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, BaseFormFeature, Breadcrumb, Button, Card, ColumnRenderer, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, DetailFieldRenderer, Dialog, EmptyState, ErrorAlert, FilterForm, Header, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, Pagination, PermissionDeniedContent, PermissionDeniedPage, SortableList, StringArrayEditor, Table, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };