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

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { logger, PluginPriority } from 'imean-service-engine';
+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 { jsx, jsxs, Fragment } from 'hono/jsx/jsx-runtime';
 import { getCookie } from 'hono/cookie';
 import { html } from 'hono/html';
 
@@ -14,6 +14,170 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+function Button(props) {
+  const {
+    children,
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    className = "",
+    ...rest
+  } = props;
+  const baseClasses = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantClasses = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500",
+    danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+    ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500"
+  };
+  const sizeClasses = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2 text-sm",
+    lg: "px-6 py-3 text-base"
+  };
+  const classes = [
+    baseClasses,
+    variantClasses[variant],
+    sizeClasses[size],
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const href = rest.href ?? "#";
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: classes,
+      disabled,
+      href,
+      ...rest,
+      children
+    }
+  );
+}
+var init_button = __esm({
+  "src/components/button.tsx"() {
+  }
+});
+
+// src/utils/action-button-renderer.tsx
+var action_button_renderer_exports = {};
+__export(action_button_renderer_exports, {
+  renderActionButton: () => renderActionButton,
+  renderActionButtons: () => renderActionButtons
+});
+function renderActionButton(action, index) {
+  const {
+    label,
+    href,
+    hxGet,
+    hxPost,
+    hxPut,
+    hxDelete,
+    variant = "primary",
+    confirm,
+    close,
+    submit,
+    formId,
+    onClick,
+    className = "",
+    target
+  } = action;
+  if (submit && formId) {
+    const variantStyles = {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+      danger: "bg-red-600 text-white hover:bg-red-700",
+      ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
+    };
+    const buttonStyle = variantStyles[variant] || variantStyles.primary;
+    const testId2 = label === "\u521B\u5EFA" || label === "\u66F4\u65B0" ? "submit-button" : `action-${label}`;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        form: formId,
+        className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
+        "data-testid": testId2,
+        ...confirm && { "data-confirm": confirm },
+        children: label
+      },
+      index
+    );
+  }
+  const finalOnClick = close ? CLOSE_DIALOG_SCRIPT : onClick;
+  if (finalOnClick) {
+    const variantStyles = {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+      danger: "bg-red-600 text-white hover:bg-red-700",
+      ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
+    };
+    const buttonStyle = variantStyles[variant] || variantStyles.secondary;
+    let testId2 = `action-${label}`;
+    if (label === "\u53D6\u6D88") {
+      testId2 = "cancel-button";
+    } else if (label === "\u5173\u95ED") {
+      testId2 = "close-button";
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        _: finalOnClick,
+        className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
+        "data-testid": testId2,
+        ...confirm && { "data-confirm": confirm },
+        children: label
+      },
+      index
+    );
+  }
+  let testId = `action-${label}`;
+  if (label === "\u65B0\u5EFA" || label === "\u521B\u5EFA") {
+    testId = "create-button";
+  } else if (label === "\u53D6\u6D88") {
+    testId = "cancel-button";
+  } else if (label === "\u5173\u95ED") {
+    testId = "close-button";
+  }
+  const isNewWindow = target === "_blank";
+  const htmxAttrs = {};
+  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 (confirm) htmxAttrs["hx-confirm"] = confirm;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      href,
+      className,
+      "data-testid": testId,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0,
+      ...htmxAttrs,
+      children: label
+    },
+    index
+  );
+}
+function renderActionButtons(actions) {
+  return actions.map((action, index) => renderActionButton(action, index));
+}
+var CLOSE_DIALOG_SCRIPT;
+var init_action_button_renderer = __esm({
+  "src/utils/action-button-renderer.tsx"() {
+    init_button();
+    CLOSE_DIALOG_SCRIPT = `on click 
+  add .dialog-exit to .dialog-backdrop
+  add .dialog-content-exit to .dialog-content
+  wait 200ms
+  set #dialog-container's innerHTML to '' end`;
+  }
+});
 
 // src/utils/cdn-cache.ts
 var cdn_cache_exports = {};
@@ -60,7 +224,11 @@ async function saveToFileCache(name, content, mimeType) {
       promises.writeFile(contentPath, content, "utf-8"),
       promises.writeFile(
         metadataPath,
-        JSON.stringify({ mimeType, cachedAt: (/* @__PURE__ */ new Date()).toISOString() }, null, 2),
+        JSON.stringify(
+          { mimeType, cachedAt: (/* @__PURE__ */ new Date()).toISOString() },
+          null,
+          2
+        ),
         "utf-8"
       )
     ]);
@@ -73,14 +241,18 @@ async function fetchAndCacheResource(resource) {
   try {
     const fileCache = await readFromFileCache(resource.name);
     if (fileCache) {
-      logger.info(`[CDNCache] \u4ECE\u6587\u4EF6\u7F13\u5B58\u52A0\u8F7D\u8D44\u6E90: ${resource.name} (${fileCache.content.length} \u5B57\u8282)`);
+      logger.info(
+        `[CDNCache] \u4ECE\u6587\u4EF6\u7F13\u5B58\u52A0\u8F7D\u8D44\u6E90: ${resource.name} (${fileCache.content.length} \u5B57\u8282)`
+      );
       cache.set(resource.name, fileCache);
       return;
     }
     logger.info(`[CDNCache] \u6B63\u5728\u4E0B\u8F7D\u8D44\u6E90: ${resource.name} (${resource.url})`);
     const response = await fetch(resource.url);
     if (!response.ok) {
-      throw new Error(`Failed to fetch ${resource.url}: ${response.statusText}`);
+      throw new Error(
+        `Failed to fetch ${resource.url}: ${response.statusText}`
+      );
     }
     const content = await response.text();
     const cached = {
@@ -88,10 +260,14 @@ async function fetchAndCacheResource(resource) {
       mimeType: resource.mimeType
     };
     cache.set(resource.name, cached);
-    saveToFileCache(resource.name, content, resource.mimeType).catch((error) => {
-      logger.warn(`[CDNCache] \u4FDD\u5B58\u6587\u4EF6\u7F13\u5B58\u5931\u8D25: ${resource.name}`, error);
-    });
-    logger.info(`[CDNCache] \u8D44\u6E90\u5DF2\u4E0B\u8F7D\u5E76\u7F13\u5B58: ${resource.name} (${content.length} \u5B57\u8282)`);
+    saveToFileCache(resource.name, content, resource.mimeType).catch(
+      (error) => {
+        logger.warn(`[CDNCache] \u4FDD\u5B58\u6587\u4EF6\u7F13\u5B58\u5931\u8D25: ${resource.name}`, error);
+      }
+    );
+    logger.info(
+      `[CDNCache] \u8D44\u6E90\u5DF2\u4E0B\u8F7D\u5E76\u7F13\u5B58: ${resource.name} (${content.length} \u5B57\u8282)`
+    );
   } catch (error) {
     logger.error(`[CDNCache] \u4E0B\u8F7D\u8D44\u6E90\u5931\u8D25: ${resource.name}`, error);
   }
@@ -143,6 +319,16 @@ var init_cdn_cache = __esm({
         name: "alpinejs",
         url: "https://unpkg.com/alpinejs@latest/dist/cdn.min.js",
         mimeType: "application/javascript"
+      },
+      {
+        name: "idiomorph",
+        url: "https://unpkg.com/idiomorph@0.7.4/dist/idiomorph-ext.min.js",
+        mimeType: "application/javascript"
+      },
+      {
+        name: "sortablejs",
+        url: "https://unpkg.com/sortablejs@latest/Sortable.min.js",
+        mimeType: "application/javascript"
       }
     ];
     cache = /* @__PURE__ */ new Map();
@@ -281,11 +467,17 @@ var BaseFeature = class {
     return metadata.description;
   }
   /**
-   * 获取操作按钮（默认实现：返回空数组）
-   * 子类可以覆盖此方法以提供操作按钮
+   * 获取操作按钮（默认实现：返回 null）
+   * 子类可以覆盖此方法以提供操作按钮（返回 JSX）
    */
   async getActions(context) {
-    return [];
+    return null;
+  }
+  /**
+   * 处理请求
+   */
+  async handle(context) {
+    return await this.render?.(context) ?? null;
   }
 };
 function getFieldValue(field, initialData) {
@@ -340,222 +532,497 @@ function renderFormField(field, initialData, formFieldRenderers) {
     } 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",
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        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}`,
+        className: "space-y-2",
+        "data-testid": `field-${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" })
+          /* @__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}-${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, 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: ${fieldNames}`
+      field.name
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-testid": "form-container", "x-data": `{ activeTab: 0 }`, children: [
-    /* @__PURE__ */ jsxs(
+  if (field.type === "checkbox") {
+    const isChecked = value === "true" || value === "1" || value === "on" || String(value).toLowerCase() === "true";
+    return /* @__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",
+        className: "space-y-2",
+        "data-testid": `field-${field.name}`,
         children: [
           /* @__PURE__ */ jsxs(
-            "svg",
+            "label",
             {
-              className: "animate-spin h-4 w-4",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
+              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(
-                  "circle",
+                  "input",
                   {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
+                    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__ */ 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__ */ 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: "*" })
+                ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "\u63D0\u4EA4\u4E2D..." })
+          field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 ml-8", children: field.description })
         ]
-      }
-    ),
-    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;
+      },
+      field.name
+    );
   }
-  for (const [fieldName, fieldSchema] of Object.entries(shape)) {
-    const value = processed[fieldName];
-    if (value === void 0) {
-      continue;
-    }
-    if (value === null) {
+  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,
+    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: ${fieldNames}`
+    );
+  }
+  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,
+              ...method === "put" ? { "hx-put": submitUrl } : {},
+              "hx-indicator": "#form-loading-indicator",
+              "data-testid": "form",
+              "hx-sync": "this:abort",
+              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",
+              "hx-trigger": "click from:#form-submit-button",
+              ...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/json-form-parser.ts
+function parseNestedFormData(formData) {
+  const result = {};
+  const arrayIndicesMap = /* @__PURE__ */ new Map();
+  const arrayIndicesSet = /* @__PURE__ */ new Map();
+  for (const [key] of Object.entries(formData)) {
+    const parts = parseKey(key);
+    collectArrayIndices(parts, arrayIndicesSet);
+  }
+  for (const [pathKey, indices] of arrayIndicesSet.entries()) {
+    const sortedIndices = Array.from(indices).sort((a, b) => a - b);
+    const indexMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < sortedIndices.length; i++) {
+      indexMap.set(sortedIndices[i], i);
+    }
+    arrayIndicesMap.set(pathKey, indexMap);
+  }
+  for (const [key, value] of Object.entries(formData)) {
+    const parts = parseKey(key);
+    buildNestedObject(result, parts, value, arrayIndicesMap);
+  }
+  compressArrays(result);
+  return result;
+}
+function collectArrayIndices(parts, arrayIndicesSet) {
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (typeof part === "number") {
+      const pathKey = getArrayPathKey(parts, i);
+      if (!arrayIndicesSet.has(pathKey)) {
+        arrayIndicesSet.set(pathKey, /* @__PURE__ */ new Set());
+      }
+      arrayIndicesSet.get(pathKey).add(part);
+    }
+  }
+}
+function parseKey(key) {
+  const result = [];
+  let current = "";
+  let inBrackets = false;
+  let bracketContent = "";
+  for (let i = 0; i < key.length; i++) {
+    const char = key[i];
+    if (char === "[" && !inBrackets) {
+      if (current) {
+        result.push(current);
+        current = "";
+      }
+      inBrackets = true;
+    } else if (char === "]" && inBrackets) {
+      inBrackets = false;
+      const index = parseInt(bracketContent, 10);
+      if (!isNaN(index)) {
+        result.push(index);
+      }
+      bracketContent = "";
+    } else if (char === "." && !inBrackets) {
+      if (current) {
+        result.push(current);
+        current = "";
+      }
+    } else if (inBrackets) {
+      bracketContent += char;
+    } else {
+      current += char;
+    }
+  }
+  if (current) {
+    result.push(current);
+  }
+  return result;
+}
+function getArrayPathKey(parts, endIndex) {
+  const pathParts = [];
+  for (let i = 0; i < endIndex; i++) {
+    const part = parts[i];
+    if (typeof part === "string") {
+      pathParts.push(part);
+    } else {
+      pathParts.push(`[${part}]`);
+    }
+  }
+  return pathParts.join(".");
+}
+function getCompressedIndex(pathKey, originalIndex, arrayIndicesMap) {
+  if (!arrayIndicesMap.has(pathKey)) {
+    arrayIndicesMap.set(pathKey, /* @__PURE__ */ new Map());
+  }
+  const indexMap = arrayIndicesMap.get(pathKey);
+  let compressedIndex = indexMap.get(originalIndex);
+  if (compressedIndex === void 0) {
+    compressedIndex = indexMap.size;
+    indexMap.set(originalIndex, compressedIndex);
+  }
+  return compressedIndex;
+}
+function buildNestedObject(obj, parts, value, arrayIndicesMap) {
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const nextPart = parts[i + 1];
+    if (typeof part === "number") {
+      if (!Array.isArray(current)) {
+        throw new Error(`Expected array at index ${i}, but got ${typeof current}`);
+      }
+      const pathKey = getArrayPathKey(parts, i);
+      const compressedIndex = getCompressedIndex(
+        pathKey,
+        part,
+        arrayIndicesMap
+      );
+      while (current.length <= compressedIndex) {
+        if (typeof nextPart === "number") {
+          current.push([]);
+        } else {
+          current.push({});
+        }
+      }
+      current = current[compressedIndex];
+    } else {
+      if (typeof nextPart === "number") {
+        if (!current.hasOwnProperty(part) || !Array.isArray(current[part])) {
+          current[part] = [];
+        }
+      } else {
+        if (!current.hasOwnProperty(part) || (typeof current[part] !== "object" || current[part] === null || Array.isArray(current[part]))) {
+          current[part] = {};
+        }
+      }
+      current = current[part];
+    }
+  }
+  const lastPart = parts[parts.length - 1];
+  if (typeof lastPart === "number") {
+    const pathKey = getArrayPathKey(parts, parts.length - 1);
+    const compressedIndex = getCompressedIndex(
+      pathKey,
+      lastPart,
+      arrayIndicesMap
+    );
+    if (!Array.isArray(current)) {
+      throw new Error(`Expected array for last part, but got ${typeof current}`);
+    }
+    while (current.length <= compressedIndex) {
+      current.push(void 0);
+    }
+    current[compressedIndex] = value;
+  } else {
+    if (Array.isArray(current)) {
+      throw new Error(`Cannot set property on array: ${lastPart}`);
+    }
+    if (typeof current !== "object" || current === null) {
+      current = {};
+    }
+    current[lastPart] = value;
+  }
+}
+function compressArrays(obj, arrayIndicesMap) {
+  if (Array.isArray(obj)) {
+    const newArray = [];
+    for (let i = 0; i < obj.length; i++) {
+      if (obj[i] !== void 0) {
+        newArray.push(obj[i]);
+        if (typeof obj[i] === "object" && obj[i] !== null) {
+          compressArrays(obj[i]);
+        }
+      }
+    }
+    obj.length = 0;
+    obj.push(...newArray);
+  } else if (typeof obj === "object" && obj !== null) {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        compressArrays(obj[key]);
+      }
+    }
+  }
+}
+
+// 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;
     }
@@ -563,16 +1030,18 @@ function preprocessFormData(data, zodSchema) {
       processed[fieldName] = void 0;
       continue;
     }
-    const fieldDef = fieldSchema._def;
-    let typeName = fieldDef?.type || fieldDef?.typeName;
-    if (typeName === "optional" || typeName === "ZodOptional") {
-      const innerType = fieldDef.innerType;
+    const fieldDef = fieldSchema._zod?.def || fieldSchema._def;
+    let typeName = fieldDef?.type;
+    let actualSchema = fieldSchema;
+    if (typeName === "optional") {
+      const innerType = fieldDef?.innerType;
       if (innerType) {
-        const innerDef = innerType._def;
-        typeName = innerDef?.type || innerDef?.typeName;
+        actualSchema = innerType;
+        const innerDef = innerType._zod?.def || innerType._def;
+        typeName = innerDef?.type;
       }
     }
-    if (typeName === "number" || typeName === "ZodNumber") {
+    if (typeName === "number" || typeName === "int") {
       if (typeof value === "string") {
         const trimmed = value.trim();
         if (trimmed !== "") {
@@ -585,7 +1054,7 @@ function preprocessFormData(data, zodSchema) {
         processed[fieldName] = value;
       }
     }
-    if (typeName === "boolean" || typeName === "ZodBoolean") {
+    if (typeName === "boolean") {
       if (typeof value === "string") {
         const trimmed = value.trim().toLowerCase();
         if (trimmed === "true" || trimmed === "1" || trimmed === "on") {
@@ -597,8 +1066,64 @@ function preprocessFormData(data, zodSchema) {
         processed[fieldName] = value;
       }
     }
-    if (typeName === "array" || typeName === "ZodArray") {
-      if (typeof value === "string") {
+    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 {
@@ -612,8 +1137,11 @@ function preprocessFormData(data, zodSchema) {
         }
       }
     }
-    if (typeName === "object" || typeName === "ZodObject") {
-      if (typeof value === "string" && value.trim() !== "") {
+    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("}")) {
@@ -624,7 +1152,7 @@ function preprocessFormData(data, zodSchema) {
         }
       }
     }
-    if (typeName === "any" || typeName === "ZodAny") {
+    if (typeName === "any" || typeName === "unknown") {
       if (typeof value === "string" && value.trim() !== "") {
         try {
           const trimmed = value.trim();
@@ -639,6 +1167,36 @@ function preprocessFormData(data, zodSchema) {
   }
   return processed;
 }
+function convertValueByType(value, schema) {
+  const def = schema._zod?.def || schema._def;
+  let typeName = def?.type;
+  if (typeName === "optional") {
+    const innerType = def?.innerType;
+    if (innerType) {
+      const innerDef = innerType._zod?.def || innerType._def;
+      typeName = innerDef?.type;
+    }
+  }
+  if (typeName === "number" || typeName === "int") {
+    const trimmed = value.trim();
+    if (trimmed !== "") {
+      const numValue = Number(trimmed);
+      if (!isNaN(numValue)) {
+        return numValue;
+      }
+    }
+    return value;
+  } else if (typeName === "boolean") {
+    const trimmed = value.trim().toLowerCase();
+    if (trimmed === "true" || trimmed === "1" || trimmed === "on") {
+      return true;
+    } else if (trimmed === "false" || trimmed === "0" || trimmed === "off" || trimmed === "") {
+      return false;
+    }
+    return value;
+  }
+  return value;
+}
 
 // src/utils/schema-utils.ts
 function parseSchemaToFields(schema) {
@@ -929,22 +1487,9 @@ var BaseFormFeature = class extends BaseFeature {
     if (ctx.req.method === "GET") {
       return this.render(context);
     } 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)}`
-      );
+      const nestedData = parseNestedFormData2(context.body);
+      let data = this.preprocessFormData(nestedData);
       if (!this.schema) {
         throw new Error("Schema is required for form validation");
       }
@@ -956,9 +1501,6 @@ var BaseFormFeature = class extends BaseFeature {
         const errorMessage = firstError.message;
         const errorText = fieldName ? `${fieldName}: ${errorMessage}` : errorMessage;
         context.sendError("\u9A8C\u8BC1\u5931\u8D25", errorText);
-        logger.info(
-          `[BaseFormFeature] Validation failed, returning form with originalData: ${JSON.stringify(originalData)}`
-        );
         return this.render(context, originalData);
       }
       const item = await this.handleSubmit(
@@ -978,9 +1520,6 @@ var BaseFormFeature = class extends BaseFeature {
         `${context.model.getMetadata().title}\u5DF2\u6210\u529F${actionText}`
       );
       if (context.isDialog) {
-        logger.info(
-          `[BaseFormFeature] Dialog mode: setting refresh to close dialog and refresh list`
-        );
         context.setRefresh(true);
         if (context.redirectUrl) {
           context.redirectUrl = void 0;
@@ -988,9 +1527,6 @@ var BaseFormFeature = class extends BaseFeature {
         return null;
       } else {
         const redirectUrl = this.getSuccessRedirectUrl(context, item);
-        logger.info(
-          `[BaseFormFeature] Page mode: Setting redirect URL: ${redirectUrl} (isHtmxRequest: ${context.isHtmxRequest})`
-        );
         context.redirect(redirectUrl);
         return null;
       }
@@ -1012,9 +1548,6 @@ var BaseFormFeature = class extends BaseFeature {
     } else {
       formData = initialData;
     }
-    logger.info(
-      `[BaseFormFeature] render: initialData=${JSON.stringify(initialData)}, formData=${JSON.stringify(formData)}`
-    );
     let submitUrl = this.getSubmitUrl(context);
     if (context.isDialog) {
       const url = new URL(submitUrl, "http://localhost");
@@ -1081,7 +1614,7 @@ var BaseFormFeature = class extends BaseFeature {
     );
   }
   /**
-   * 获取操作按钮
+   * 获取操作按钮（返回 JSX）
    */
   async getActions(context) {
     const actions = [];
@@ -1109,7 +1642,8 @@ var BaseFormFeature = class extends BaseFeature {
         });
       }
     }
-    return actions;
+    const { renderActionButtons: renderActionButtons2 } = await Promise.resolve().then(() => (init_action_button_renderer(), action_button_renderer_exports));
+    return renderActionButtons2(actions);
   }
 };
 
@@ -1158,7 +1692,7 @@ var CustomFeature = class extends BaseFeature {
     if (this.handlerFn) {
       return await this.handlerFn(context);
     }
-    return void 0;
+    return await this.render(context);
   }
   async render(context) {
     if (this.renderFn) {
@@ -1301,7 +1835,13 @@ function renderDefaultValue(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) });
   }
   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 /* @__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() });
@@ -1327,8 +1867,20 @@ function renderField(field, value, item) {
     {
       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 }) })
+        /* @__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
@@ -1362,7 +1914,6 @@ function DetailPage(props) {
 }
 var DefaultDetailFeature = class extends BaseFeature {
   getItem;
-  deleteItem;
   titleGetter;
   descriptionGetter;
   detailFieldNames;
@@ -1379,7 +1930,6 @@ var DefaultDetailFeature = class extends BaseFeature {
     this.schema = options.schema;
     this.fields = parseSchemaToFields(options.schema);
     this.getItem = options.getItem;
-    this.deleteItem = options.deleteItem;
     this.titleGetter = options.getTitle;
     this.descriptionGetter = options.getDescription;
     this.detailFieldNames = options.detailFieldNames;
@@ -1421,32 +1971,40 @@ var DefaultDetailFeature = class extends BaseFeature {
       }
       const schema = this.schema;
       const groupSchemas = this.groups.map((group) => {
-        const pickObject = group.fields.reduce((acc, fieldName) => {
-          acc[fieldName] = true;
-          return acc;
-        }, {});
+        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;
-          }, {})
-        };
-      });
+      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 || [];
@@ -1477,7 +2035,7 @@ var DefaultDetailFeature = class extends BaseFeature {
     const id = context.params.id;
     const item = await this.getItem(id);
     if (!item) {
-      return [];
+      return null;
     }
     const model = context.model;
     const prefix = context.prefix || "";
@@ -1514,7 +2072,8 @@ var DefaultDetailFeature = class extends BaseFeature {
         });
       }
     }
-    return actions;
+    const { renderActionButtons: renderActionButtons2 } = await Promise.resolve().then(() => (init_action_button_renderer(), action_button_renderer_exports));
+    return renderActionButtons2(actions);
   }
 };
 
@@ -1720,85 +2279,24 @@ function FilterForm(props) {
     }
   ) });
 }
-function Button(props) {
+
+// src/components/table.tsx
+init_button();
+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 }) });
+}
+
+// src/components/pagination.tsx
+init_button();
+function Pagination(props) {
   const {
-    children,
-    variant = "primary",
-    size = "md",
-    disabled = false,
-    className = "",
-    hxGet,
-    hxPost,
-    hxPut,
-    hxDelete,
-    hxTarget,
-    hxSwap,
-    hxPushUrl,
-    hxIndicator,
-    hxConfirm,
-    hxHeaders,
-    ...rest
-  } = props;
-  const baseClasses = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
-  const variantClasses = {
-    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500",
-    danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
-    ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500"
-  };
-  const sizeClasses = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-sm",
-    lg: "px-6 py-3 text-base"
-  };
-  const classes = [
-    baseClasses,
-    variantClasses[variant],
-    sizeClasses[size],
-    disabled ? "opacity-50 cursor-not-allowed" : "",
-    className
-  ].filter(Boolean).join(" ");
-  const isNewWindow = rest.target === "_blank";
-  const htmxAttrs = {};
-  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(
-    "a",
-    {
-      className: classes,
-      disabled,
-      href,
-      ...htmxAttrs,
-      ...otherRest,
-      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 }) });
-}
-function Pagination(props) {
-  const {
-    page,
-    pageSize,
-    total,
-    totalPages,
-    baseUrl,
-    currentParams = {}
+    page,
+    pageSize,
+    total,
+    totalPages,
+    baseUrl,
+    currentParams = {}
   } = props;
   if (totalPages <= 1) {
     return null;
@@ -1833,8 +2331,8 @@ function Pagination(props) {
         {
           variant: "secondary",
           size: "sm",
-          hxGet: buildUrl(page - 1),
           href: buildUrl(page - 1),
+          "hx-get": buildUrl(page - 1),
           "data-testid": "pagination-prev",
           "aria-label": "\u4E0A\u4E00\u9875",
           children: "\u4E0A\u4E00\u9875"
@@ -1845,8 +2343,8 @@ function Pagination(props) {
         {
           variant: "secondary",
           size: "sm",
-          hxGet: buildUrl(page + 1),
           href: buildUrl(page + 1),
+          "hx-get": buildUrl(page + 1),
           "data-testid": "pagination-next",
           "aria-label": "\u4E0B\u4E00\u9875",
           children: "\u4E0B\u4E00\u9875"
@@ -1904,10 +2402,10 @@ function TableHeader(props) {
             {
               variant: action.variant || "secondary",
               href: action.href,
-              hxGet: action.hxGet,
-              hxPost: action.hxPost,
-              hxDelete: action.hxDelete,
-              hxConfirm: action.hxConfirm,
+              "hx-get": action.hxGet,
+              "hx-post": action.hxPost,
+              "hx-delete": action.hxDelete,
+              "hx-confirm": action.hxConfirm,
               "data-testid": testId,
               children: action.label
             },
@@ -2304,7 +2802,288 @@ var DefaultListFeature = class extends BaseFeature {
         });
       }
     }
-    return actions;
+    const { renderActionButtons: renderActionButtons2 } = await Promise.resolve().then(() => (init_action_button_renderer(), action_button_renderer_exports));
+    return renderActionButtons2(actions);
+  }
+};
+
+// src/component-system/store.ts
+var STATE_EXPIRATION_TIME = 864e5;
+var StateStore = class _StateStore {
+  static instance;
+  state;
+  constructor() {
+    this.state = /* @__PURE__ */ new Map();
+    setInterval(() => {
+      this.state.forEach((state) => {
+        if (state.lastUpdated < Date.now() - STATE_EXPIRATION_TIME) {
+          this.state.delete(state.instanceId);
+        }
+      });
+    }, 3e4);
+  }
+  static get() {
+    if (!_StateStore.instance) {
+      _StateStore.instance = new _StateStore();
+    }
+    return _StateStore.instance;
+  }
+  /** 获取实例状态 */
+  getState(instanceId) {
+    const state = this.state.get(instanceId);
+    if (state) {
+      return state;
+    }
+    const newState = {
+      instanceId,
+      data: {
+        props: {},
+        state: {}
+      },
+      lastUpdated: Date.now()
+    };
+    this.state.set(instanceId, newState);
+    return newState;
+  }
+  /** 设置实例状态 */
+  setState(instanceId, state) {
+    const instanceState = this.getState(instanceId);
+    instanceState.data = Object.assign(instanceState.data.state, state);
+    instanceState.lastUpdated = Date.now();
+  }
+};
+
+// src/component-system/utils.ts
+var globalIdCounter = 0;
+function generateUniqueId() {
+  return `htmx-cid-${globalIdCounter++}`;
+}
+var HTMX_COMPONENT_PREFIX = "/_htmx_components";
+
+// src/component-system/context.tsx
+var RenderContext = class {
+  constructor(prefix, instanceId, componentName) {
+    this.prefix = prefix;
+    this.instanceId = instanceId;
+    this.componentName = componentName;
+  }
+  // 生成唯一 ID（使用全局共享计数器，避免冲突）
+  $id() {
+    return generateUniqueId();
+  }
+  setState(state) {
+    StateStore.get().setState(this.instanceId, state);
+  }
+  get state() {
+    return StateStore.get().getState(this.instanceId).data.state;
+  }
+  get props() {
+    return StateStore.get().getState(this.instanceId).data.props;
+  }
+  // 生成方法 URL（使用当前 instanceId）
+  url(methodName, params) {
+    const baseUrl = `${this.prefix}/${HTMX_COMPONENT_PREFIX}/${this.componentName}/${this.instanceId}/${methodName}`;
+    if (params && Object.keys(params).length > 0) {
+      const queryString = new URLSearchParams(
+        Object.entries(params).reduce(
+          (acc, [key, value]) => {
+            acc[key] = String(value);
+            return acc;
+          },
+          {}
+        )
+      ).toString();
+      return `${baseUrl}?${queryString}`;
+    }
+    return baseUrl;
+  }
+  callMethod(methodName, params) {
+    const selectors = Object.entries(params).map(([name, expression]) => `${name}:${expression}`).join(",");
+    return {
+      "hx-post": this.url(methodName),
+      "hx-vals": `js:{_params_:{${selectors}}}`,
+      "hx-params": "_state_,_params_,_this_value_"
+    };
+  }
+};
+var ComponentContext = class extends RenderContext {
+  constructor(prefix, ctx, componentName) {
+    const routeParams = ctx.req.param();
+    const instanceId = String(routeParams.instanceId || "");
+    super(prefix, instanceId, componentName);
+    this.ctx = ctx;
+  }
+  // 获取所有参数（统一接口：聚合 query string 和 body）
+  async params() {
+    const params = {};
+    const routeParams = this.ctx.req.param();
+    Object.assign(params, routeParams);
+    const url = new URL(this.ctx.req.url);
+    for (const [key, value] of url.searchParams.entries()) {
+      params[key] = value;
+    }
+    const contentType = this.ctx.req.header("Content-Type") || "";
+    if (contentType.includes("application/json")) {
+      try {
+        const body = await this.ctx.req.json();
+        Object.assign(params, body);
+      } catch (e) {
+        console.warn("[ComponentContext] Failed to parse JSON body:", e);
+      }
+    } else if (this.ctx.req.method === "POST" || this.ctx.req.method === "PUT" || this.ctx.req.method === "PATCH" || this.ctx.req.method === "DELETE") {
+      try {
+        const formData = await this.ctx.req.formData();
+        for (const [key, value] of formData.entries()) {
+          params[key] = value instanceof File ? value : value.toString();
+        }
+      } catch (e) {
+        console.warn("[ComponentContext] Failed to parse form data:", e);
+      }
+    }
+    return params;
+  }
+  // 获取查询参数
+  query() {
+    const url = new URL(this.ctx.req.url);
+    return Object.fromEntries(url.searchParams.entries());
+  }
+  // 获取请求体
+  async body() {
+    const contentType = this.ctx.req.header("Content-Type") || "";
+    if (contentType.includes("application/json")) {
+      try {
+        return await this.ctx.req.json();
+      } catch (e) {
+        console.warn("[ComponentContext] Failed to parse JSON body:", e);
+        return {};
+      }
+    }
+    try {
+      const formData = await this.ctx.req.formData();
+      const body = {};
+      for (const [key, value] of formData.entries()) {
+        body[key] = value instanceof File ? value : value.toString();
+      }
+      return body;
+    } catch (e) {
+      console.warn("[ComponentContext] Failed to parse form data:", e);
+      return {};
+    }
+  }
+};
+
+// src/component-system/component.tsx
+var METHOD_METADATA_KEY = /* @__PURE__ */ Symbol("htmx:method");
+function Method(config) {
+  return function(target, propertyKey, _descriptor) {
+    if (!target[METHOD_METADATA_KEY]) {
+      target[METHOD_METADATA_KEY] = /* @__PURE__ */ new Map();
+    }
+    target[METHOD_METADATA_KEY].set(propertyKey, {
+      method: config?.method || "get",
+      path: config?.path
+    });
+  };
+}
+var HtmxComponent = class {
+  constructor(name) {
+    this.name = name;
+  }
+  prefix;
+  // 组件函数
+  Component = (props) => {
+    const instanceId = generateUniqueId();
+    const state = StateStore.get().getState(instanceId).data;
+    state.props = props;
+    state.state = {};
+    const renderCtx = new RenderContext(
+      this.prefix,
+      instanceId,
+      this.name
+    );
+    return this.render(renderCtx, props);
+  };
+  // 返回 JSX script 元素
+  // 获取所有标记为 @Method() 的方法
+  // 注意：handler 不再绑定 this，因为方法会接收 ComponentContext 作为第一个参数
+  static getMethods(component) {
+    const methods = /* @__PURE__ */ new Map();
+    const metadata = component[METHOD_METADATA_KEY];
+    if (!metadata) return methods;
+    for (const [methodName, config] of metadata.entries()) {
+      const handler = component[methodName];
+      methods.set(methodName, {
+        method: config.method,
+        path: config.path,
+        handler
+      });
+    }
+    return methods;
+  }
+};
+var HtmxComponentHandler = class {
+  constructor(hono, prefix, components) {
+    this.hono = hono;
+    this.prefix = prefix;
+    this.components = components;
+    for (const component of this.components) {
+      component.prefix = this.prefix;
+      this.registerHandler(component);
+    }
+  }
+  registerHandler(component) {
+    const methods = HtmxComponent.getMethods(component);
+    for (const [methodName, methodConfig] of methods) {
+      const routePath = `${this.prefix}/${HTMX_COMPONENT_PREFIX}/${component.name}/:instanceId/${methodName}`;
+      logger.info(
+        `[HtmxComponent] Registering handler ${methodConfig.method} ${routePath}`
+      );
+      this.hono[methodConfig.method](routePath, async (ctx) => {
+        return this.handleComponentMethod(
+          ctx,
+          component,
+          methodConfig.handler.bind(component)
+        );
+      });
+    }
+  }
+  async handleComponentMethod(ctx, component, handler) {
+    const componentContext = new ComponentContext(
+      this.prefix,
+      ctx,
+      component.name
+    );
+    const result = await handler(componentContext);
+    if (result instanceof Object && ("target" in result || "swap" in result || "body" in result || "oobs" in result)) {
+      const { target, swap, body, oobs, trigger } = result;
+      const headers = {};
+      let bodyContent = body;
+      if (target) headers["HX-Retarget"] = target;
+      if (swap) headers["HX-Reswap"] = swap;
+      if (trigger) headers["HX-Trigger"] = trigger;
+      if (oobs) {
+        oobs.forEach((oob) => {
+          oob.props["hx-swap-oob"] = "true";
+        });
+        if (!body) {
+          headers["HX-Reswap"] = "delete";
+        }
+        bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+          body,
+          oobs
+        ] });
+      }
+      return ctx.html(bodyContent, 200, headers);
+    }
+    if (result === null) {
+      return ctx.html(/* @__PURE__ */ jsx("div", {}), 200, {
+        "HX-Reswap": "none"
+      });
+    }
+    if (result instanceof Response) {
+      return result;
+    }
+    return ctx.html(result, 200);
   }
 };
 
@@ -2604,102 +3383,6 @@ async function createFeatureContext(ctx, page, feature, user, options) {
   };
   return featureContext;
 }
-var CLOSE_DIALOG_SCRIPT = `on click 
-  add .dialog-exit to .dialog-backdrop
-  add .dialog-content-exit to .dialog-content
-  wait 200ms
-  set #dialog-container's innerHTML to '' end`;
-function renderActionButton(action, index) {
-  const {
-    label,
-    href,
-    hxGet,
-    hxPost,
-    hxPut,
-    hxDelete,
-    variant = "primary",
-    confirm,
-    close,
-    submit,
-    formId,
-    onClick,
-    className = ""
-  } = action;
-  if (submit && formId) {
-    const variantStyles = {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700",
-      ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
-    };
-    const buttonStyle = variantStyles[variant] || variantStyles.primary;
-    const testId2 = label === "\u521B\u5EFA" || label === "\u66F4\u65B0" ? "submit-button" : `action-${label}`;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "submit",
-        form: formId,
-        className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
-        "data-testid": testId2,
-        ...confirm && { "data-confirm": confirm },
-        children: label
-      },
-      index
-    );
-  }
-  const finalOnClick = close ? CLOSE_DIALOG_SCRIPT : onClick;
-  if (finalOnClick) {
-    const variantStyles = {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700",
-      ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
-    };
-    const buttonStyle = variantStyles[variant] || variantStyles.secondary;
-    let testId2 = `action-${label}`;
-    if (label === "\u53D6\u6D88") {
-      testId2 = "cancel-button";
-    } else if (label === "\u5173\u95ED") {
-      testId2 = "close-button";
-    }
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        _: finalOnClick,
-        className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
-        "data-testid": testId2,
-        ...confirm && { "data-confirm": confirm },
-        children: label
-      },
-      index
-    );
-  }
-  let testId = `action-${label}`;
-  if (label === "\u65B0\u5EFA" || label === "\u521B\u5EFA") {
-    testId = "create-button";
-  } else if (label === "\u53D6\u6D88") {
-    testId = "cancel-button";
-  } else if (label === "\u5173\u95ED") {
-    testId = "close-button";
-  }
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant,
-      href,
-      hxGet,
-      hxPost,
-      hxPut,
-      hxDelete,
-      hxConfirm: confirm,
-      className,
-      "data-testid": testId,
-      children: label
-    },
-    index
-  );
-}
 function Dialog(props) {
   const {
     title,
@@ -2775,13 +3458,16 @@ function Dialog(props) {
                 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)) })
+            actions && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-t border-gray-200 bg-white flex justify-end gap-2", children: actions })
           ]
         }
       )
     }
   );
 }
+
+// src/components/permission-denied.tsx
+init_button();
 function PermissionDeniedContent(props) {
   const {
     operationId,
@@ -2859,6 +3545,178 @@ function PermissionDeniedPage(props) {
     }
   ) }) });
 }
+var getResourceUrl = (prefix, name) => {
+  return `${prefix}/_cdn/${name}`;
+};
+function globalScripts(prefix) {
+  return html`
+    <script src=${getResourceUrl(prefix, "htmx")}></script>
+    <script src=${getResourceUrl(prefix, "htmx-ext-form-json")}></script>
+    <script src=${getResourceUrl(prefix, "hyperscript")}></script>
+    <script src=${getResourceUrl(prefix, "tailwindcss")}></script>
+    <script src=${getResourceUrl(prefix, "alpinejs")} defer></script>
+    <script src=${getResourceUrl(prefix, "sortablejs")}></script>
+    <script src=${getResourceUrl(prefix, "idiomorph")}></script>
+    <script type="module" src=${getResourceUrl(prefix, "datastar")}></script>
+  `;
+}
+function globalStyles() {
+  return html`<style>
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+
+    @keyframes slideInRight {
+      from {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    @keyframes slideOutRight {
+      from {
+        opacity: 1;
+        transform: translateX(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+    }
+
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    @keyframes scaleOut {
+      from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.95) translateY(-10px);
+      }
+    }
+
+    /* Dialog 退出动画 */
+    .dialog-exit {
+      animation: fadeOut 0.2s ease-in forwards !important;
+    }
+
+    .dialog-content-exit {
+      animation: scaleOut 0.2s ease-in forwards !important;
+    }
+
+    .error-alert-exit {
+      animation:
+        slideOutRight 0.3s ease-in forwards,
+        fadeOut 0.3s ease-in forwards;
+    }
+
+    /* SortableList 拖拽样式 */
+    /* 使用伪元素创建覆盖层，不影响原始布局 */
+    .sortable-dragging {
+      position: relative !important;
+      opacity: 0.6 !important;
+      transform: scale(0.98) !important;
+      transition: all 0.2s ease-in-out !important;
+      outline: 2px solid rgb(96, 165, 250) !important; /* blue-400 */
+      outline-offset: 2px !important;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    .sortable-dragging::before {
+      content: '' !important;
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 with opacity */
+      border-radius: 0.375rem !important;
+      z-index: 1 !important;
+      pointer-events: none !important;
+    }
+
+    /* 拖拽悬停样式 */
+    .sortable-drag-over {
+      position: relative !important;
+      transition: all 0.2s ease-in-out !important;
+      outline: 2px solid rgb(59, 130, 246) !important; /* blue-500 */
+      outline-offset: 2px !important;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    }
+
+    .sortable-drag-over::before {
+      content: '' !important;
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      background-color: rgba(59, 130, 246, 0.15) !important; /* blue-500 with more opacity */
+      border-radius: 0.375rem !important;
+      z-index: 1 !important;
+      pointer-events: none !important;
+    }
+  </style>`;
+}
+function sortableScript() {
+  html`<script>
+    if (typeof htmx !== "undefined" && typeof Sortable !== "undefined") {
+      htmx.onLoad(function (content) {
+        var sortables = content.querySelectorAll(".sortable");
+        for (var i = 0; i < sortables.length; i++) {
+          var sortable = sortables[i];
+          // 检查是否已经初始化
+          if (sortable.sortableInstance) {
+            continue;
+          }
+          var sortableInstance = new Sortable(sortable, {
+            animation: 150,
+            ghostClass: "sortable-ghost",
+            filter: ".htmx-indicator",
+            onMove: function (evt) {
+              return evt.related.className.indexOf("htmx-indicator") === -1;
+            },
+          });
+          sortable.sortableInstance = sortableInstance;
+          sortable.addEventListener("htmx:afterSwap", function () {
+            if (sortable.sortableInstance) {
+              sortable.sortableInstance.option("disabled", false);
+            }
+          });
+        }
+      });
+    }
+  </script>`;
+}
 function Breadcrumb(props) {
   const { items } = props;
   if (items.length === 0) {
@@ -2986,247 +3844,972 @@ function LoadingBar() {
         ` })
   ] });
 }
-function BaseLayout(props) {
-  const { cdnProxyPrefix = "/admin/_cdn" } = props;
-  const getResourceUrl = (name, cdnUrl) => {
-    return `${cdnProxyPrefix}/${name}`;
-  };
-  const htmxUrl = "https://unpkg.com/htmx.org@latest";
-  const hyperscriptUrl = "https://unpkg.com/hyperscript.org@latest";
-  const tailwindUrl = "https://cdn.tailwindcss.com";
-  const alpinejsUrl = "https://unpkg.com/alpinejs@latest/dist/cdn.min.js";
-  return /* @__PURE__ */ jsxs("html", { children: [
-    /* @__PURE__ */ jsxs("head", { children: [
-      /* @__PURE__ */ jsx("meta", { charSet: "UTF-8" }),
-      /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
-      /* @__PURE__ */ jsx("title", { children: props.title }),
-      props.description && /* @__PURE__ */ jsx("meta", { name: "description", content: props.description }),
-      /* @__PURE__ */ jsx(
-        "script",
-        {
-          src: getResourceUrl("htmx"),
-          onerror: `this.onerror=null;this.src='${htmxUrl}'`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "script",
-        {
-          src: getResourceUrl("hyperscript"),
-          onerror: `this.onerror=null;this.src='${hyperscriptUrl}'`
+
+// src/components/index.ts
+init_button();
+function SortableList(props) {
+  const {
+    children,
+    className = "",
+    handle,
+    draggingClass = "sortable-dragging",
+    dragOverClass = "sortable-drag-over",
+    onSortableChange,
+    ...rest
+  } = props;
+  const xDataContent = `{
+    draggedIndex: null,
+    dragOverIndex: null,
+    handleSelector: ${JSON.stringify(handle || null)},
+    draggingClass: ${JSON.stringify(draggingClass)},
+    dragOverClass: ${JSON.stringify(dragOverClass)},
+    handleDragStart(event) {
+      // \u4E8B\u4EF6\u59D4\u6258\uFF1A\u5904\u7406\u6240\u6709\u5B50\u5143\u7D20\u7684\u62D6\u62FD\u5F00\u59CB\u4E8B\u4EF6
+      var target = event.target;
+      // \u5982\u679C\u70B9\u51FB\u7684\u662F\u62D6\u62FD\u624B\u67C4\uFF0C\u9700\u8981\u627E\u5230\u7236\u5143\u7D20
+      var item = target.closest('[data-sortable-index]');
+      // \u5982\u679C\u6CA1\u627E\u5230\uFF0C\u53EF\u80FD\u662F\u70B9\u51FB\u4E86\u624B\u67C4\uFF0C\u9700\u8981\u5411\u4E0A\u67E5\u627E
+      if (!item && target.hasAttribute('data-sortable-handle')) {
+        item = target.closest('[data-sortable-index]') || target.parentElement;
+      }
+      if (item && item.hasAttribute('data-sortable-index')) {
+        var index = parseInt(item.getAttribute('data-sortable-index'));
+        this.draggedIndex = index;
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/html', '');
+        // \u6DFB\u52A0\u62D6\u62FD\u6837\u5F0F\u7C7B\uFF08\u652F\u6301\u591A\u4E2A\u7C7B\u540D\uFF09
+        if (this.draggingClass) {
+          var classes = this.draggingClass.split(' ').filter(function(c) { return c.trim(); });
+          classes.forEach(function(cls) {
+            if (cls) {
+              item.classList.add(cls);
+              console.log('Added dragging class:', cls, 'to element:', item);
+            }
+          });
         }
-      ),
-      /* @__PURE__ */ jsx(
-        "script",
-        {
-          src: getResourceUrl("tailwindcss"),
-          onerror: `this.onerror=null;this.src='${tailwindUrl}'`
+      }
+    },
+    handleDragEnd(event) {
+      // \u4E8B\u4EF6\u59D4\u6258\uFF1A\u5904\u7406\u6240\u6709\u5B50\u5143\u7D20\u7684\u62D6\u62FD\u7ED3\u675F\u4E8B\u4EF6
+      var target = event.target;
+      var item = target.closest('[data-sortable-index]');
+      if (item) {
+        // \u79FB\u9664\u62D6\u62FD\u6837\u5F0F\u7C7B\uFF08\u652F\u6301\u591A\u4E2A\u7C7B\u540D\uFF09
+        if (this.draggingClass) {
+          var draggingClasses = this.draggingClass.split(' ').filter(function(c) { return c.trim(); });
+          draggingClasses.forEach(function(cls) {
+            item.classList.remove(cls);
+          });
         }
-      ),
-      /* @__PURE__ */ jsx(
-        "script",
-        {
-          src: getResourceUrl("alpinejs"),
-          defer: true,
-          onerror: `this.onerror=null;this.src='${alpinejsUrl}'`
+        this.draggedIndex = null;
+        this.dragOverIndex = null;
+        // \u6E05\u9664\u6240\u6709\u62D6\u62FD\u60AC\u505C\u6837\u5F0F
+        if (this.dragOverClass) {
+          var dragOverClasses = this.dragOverClass.split(' ').filter(function(c) { return c.trim(); });
+          Array.from($el.children).forEach(function(c) {
+            dragOverClasses.forEach(function(cls) {
+              c.classList.remove(cls);
+            });
+          });
         }
-      ),
-      /* @__PURE__ */ jsx(
-        "style",
-        {
-          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;
+      }
+    },
+    handleDragOver(event) {
+      // \u4E8B\u4EF6\u59D4\u6258\uFF1A\u5904\u7406\u6240\u6709\u5B50\u5143\u7D20\u7684\u62D6\u62FD\u60AC\u505C\u4E8B\u4EF6
+      var target = event.target;
+      var item = target.closest('[data-sortable-index]');
+      if (item && this.draggedIndex !== null) {
+        var index = parseInt(item.getAttribute('data-sortable-index'));
+        if (this.draggedIndex !== index) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = 'move';
+          // \u6E05\u9664\u4E4B\u524D\u60AC\u505C\u5143\u7D20\u7684\u6837\u5F0F
+          if (this.dragOverIndex !== null && this.dragOverIndex !== index && this.dragOverClass) {
+            var self = this;
+            var prevItem = Array.from($el.children).find(function(c) {
+              return c.getAttribute('data-sortable-index') === String(self.dragOverIndex);
+            });
+            if (prevItem) {
+              var dragOverClasses = this.dragOverClass.split(' ').filter(function(c) { return c.trim(); });
+              dragOverClasses.forEach(function(cls) {
+                prevItem.classList.remove(cls);
+              });
             }
           }
-          
-          @keyframes fadeIn {
-            from { opacity: 0;}
-            to { opacity: 1;}
+          this.dragOverIndex = index;
+          // \u6DFB\u52A0\u62D6\u62FD\u60AC\u505C\u6837\u5F0F\u7C7B\uFF08\u652F\u6301\u591A\u4E2A\u7C7B\u540D\uFF09
+          if (this.dragOverClass) {
+            var dragOverClasses = this.dragOverClass.split(' ').filter(function(c) { return c.trim(); });
+            dragOverClasses.forEach(function(cls) {
+              item.classList.add(cls);
+            });
           }
-          
-          @keyframes slideIn {
-            from { opacity: 0; transform: scale(0.95) translateY(-10px); }
-            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      }
+    },
+    handleDragLeave(event) {
+      // \u4E8B\u4EF6\u59D4\u6258\uFF1A\u5904\u7406\u6240\u6709\u5B50\u5143\u7D20\u7684\u62D6\u62FD\u79BB\u5F00\u4E8B\u4EF6
+      // \u53EA\u6709\u5F53\u79BB\u5F00\u7684\u5143\u7D20\u662F\u5F53\u524D\u60AC\u505C\u7684\u5143\u7D20\u65F6\u624D\u79FB\u9664\u6837\u5F0F
+      var target = event.target;
+      var item = target.closest('[data-sortable-index]');
+      if (item && this.dragOverIndex !== null) {
+        var index = parseInt(item.getAttribute('data-sortable-index'));
+        if (index === this.dragOverIndex) {
+          // \u68C0\u67E5\u662F\u5426\u771F\u7684\u79BB\u5F00\u4E86\u5143\u7D20\uFF08\u800C\u4E0D\u662F\u8FDB\u5165\u5B50\u5143\u7D20\uFF09
+          var relatedTarget = event.relatedTarget;
+          if (!item.contains(relatedTarget)) {
+            if (this.dragOverClass) {
+              var dragOverClasses = this.dragOverClass.split(' ').filter(function(c) { return c.trim(); });
+              dragOverClasses.forEach(function(cls) {
+                item.classList.remove(cls);
+              });
+            }
+            this.dragOverIndex = null;
           }
-          
-          @keyframes slideInRight {
-            from { opacity: 0; transform: translateX(100%); }
-            to { opacity: 1; transform: translateX(0); }
+        }
+      }
+    },
+    handleDrop(event) {
+      // \u4E8B\u4EF6\u59D4\u6258\uFF1A\u5904\u7406\u6240\u6709\u5B50\u5143\u7D20\u7684\u653E\u7F6E\u4E8B\u4EF6
+      var target = event.target;
+      var item = target.closest('[data-sortable-index]');
+      if (item && this.draggedIndex !== null) {
+        event.preventDefault();
+        var index = parseInt(item.getAttribute('data-sortable-index'));
+        if (this.draggedIndex !== index) {
+          // \u4E0D\u79FB\u52A8 DOM\uFF0C\u53EA\u53D1\u51FA\u4EA4\u6362\u4E8B\u4EF6\uFF0C\u8BA9\u7236\u7EA7\uFF08Alpine.js\uFF09\u5904\u7406\u6570\u7EC4\u4EA4\u6362
+          // \u89E6\u53D1\u81EA\u5B9A\u4E49\u4E8B\u4EF6\uFF0C\u901A\u77E5\u7236\u7EC4\u4EF6\u9700\u8981\u4EA4\u6362\u4F4D\u7F6E
+          var changeEvent = new CustomEvent('sortable:change', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              oldIndex: this.draggedIndex,
+              newIndex: index,
+            }
+          });
+          $el.dispatchEvent(changeEvent);
+        }
+        
+        if (this.dragOverClass) {
+          var dragOverClasses = this.dragOverClass.split(' ').filter(function(c) { return c.trim(); });
+          dragOverClasses.forEach(function(cls) {
+            item.classList.remove(cls);
+          });
+        }
+        this.draggedIndex = null;
+        this.dragOverIndex = null;
+      }
+    },
+    init() {
+      // \u4E3A\u6240\u6709\u76F4\u63A5\u5B50\u5143\u7D20\u6DFB\u52A0\u62D6\u62FD\u652F\u6301
+      var container = $el;
+      var self = this;
+      
+      var initSortable = function() {
+        // \u53EA\u5904\u7406\u5B9E\u9645\u6E32\u67D3\u7684\u5143\u7D20\uFF0C\u6392\u9664 template \u5143\u7D20
+        // Alpine.js \u7684 x-for \u4F1A\u5728 template \u7684\u4F4D\u7F6E\u63D2\u5165\u5B9E\u9645\u6E32\u67D3\u7684\u5143\u7D20
+        var children = Array.from(container.children).filter(function(c) {
+          return c.tagName !== 'TEMPLATE';
+        });
+        children.forEach(function(child, index) {
+          child.setAttribute('data-sortable-index', index);
+          // \u6DFB\u52A0\u8FC7\u6E21\u52A8\u753B\uFF0C\u8BA9\u62D6\u653E\u6548\u679C\u66F4\u5E73\u6ED1
+          if (!child.style.transition) {
+            child.style.transition = 'all 0.2s ease-in-out';
           }
           
-          @keyframes slideOutRight {
-            from { opacity: 1; transform: translateX(0); }
-            to { opacity: 0; transform: translateX(100%); }
+          // \u5982\u679C\u6307\u5B9A\u4E86\u62D6\u62FD\u624B\u67C4\uFF0C\u53EA\u6709\u624B\u67C4\u53EF\u62D6\u62FD
+          if (self.handleSelector) {
+            var handleElement = child.querySelector(self.handleSelector);
+            if (handleElement) {
+              child.setAttribute('draggable', 'false');
+              handleElement.setAttribute('draggable', 'true');
+              handleElement.setAttribute('data-sortable-handle', 'true');
+              handleElement.style.cursor = 'move';
+            }
+          } else {
+            // \u6574\u4E2A\u5143\u7D20\u53EF\u62D6\u62FD
+            child.setAttribute('draggable', 'true');
+            child.style.cursor = 'move';
           }
-          
-          @keyframes fadeOut {
-            from { opacity: 1; }
-            to { opacity: 0; }
+        });
+      };
+      
+      // \u521D\u59CB\u8BBE\u7F6E
+      initSortable();
+      
+      // \u4F7F\u7528 MutationObserver \u76D1\u542C\u5B50\u5143\u7D20\u53D8\u5316
+      var observer = new MutationObserver(function() {
+        initSortable();
+      });
+      
+      observer.observe(container, {
+        childList: true,
+        subtree: false,
+      });
+    }
+  }`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      ...{
+        "x-data": xDataContent
+      },
+      ...{
+        "x-init": "init()",
+        "x-on:dragstart": "handleDragStart($event)",
+        "x-on:dragend": "handleDragEnd($event)",
+        "x-on:dragover": "handleDragOver($event)",
+        "x-on:dragleave": "handleDragLeave($event)",
+        "x-on:drop": "handleDrop($event)"
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function StringArrayEditor(props) {
+  const {
+    value,
+    fieldName,
+    placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
+    allowEmpty = false,
+    rows = 1
+  } = props;
+  const initialItems = value || [];
+  const initialDataJson = JSON.stringify({
+    items: initialItems.map((item) => item || ""),
+    fieldName,
+    placeholder,
+    allowEmpty,
+    rows
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "space-y-3",
+      "x-data": initialDataJson,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            ...{
+              "x-on:click": `
+              items.push('');
+            `
+            },
+            className: "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`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: "2",
+                      d: "M12 4v16m8-8H4"
+                    }
+                  )
+                }
+              ),
+              "\u6DFB\u52A0\u9879"
+            ]
           }
-          
-          @keyframes scaleOut {
-            from { opacity: 1; transform: scale(1) translateY(0); } 
-            to { opacity: 0; transform: scale(0.95) translateY(-10px); }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "x-show": "items.length > 0",
+            "data-testid": `${fieldName}-list-container`,
+            ...{
+              "@sortable:change.stop": `
+            (function() {
+              const { oldIndex, newIndex } = $event.detail;
+              [items[oldIndex], items[newIndex]] = [items[newIndex], items[oldIndex]];
+            })();
+          `
+            },
+            children: /* @__PURE__ */ jsx(SortableList, { className: "space-y-2", handle: "[data-drag-handle]", children: /* @__PURE__ */ jsx("template", { "x-for": "(item, index) in items", "x-bind:key": "index", children: /* @__PURE__ */ jsx(ArrayItem, { fieldName, rows }) }) })
           }
-          
-          /* Dialog \u9000\u51FA\u52A8\u753B */
-          .dialog-exit {
-            animation: fadeOut 0.2s ease-in forwards !important;
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "empty-state text-center py-8 text-gray-400 text-sm border border-dashed border-gray-300 rounded-lg",
+            "x-show": "items.length === 0",
+            "data-testid": `${fieldName}-empty-state`,
+            children: '\u6682\u65E0\u9879\uFF0C\u70B9\u51FB"\u6DFB\u52A0\u9879"\u6309\u94AE\u6DFB\u52A0'
           }
-          
-          .dialog-content-exit {
-            animation: scaleOut 0.2s ease-in forwards !important;
+        )
+      ]
+    }
+  );
+}
+function ArrayItem({ fieldName, rows = 1 }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-array-item": true,
+      className: "flex items-center gap-2 group",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-shrink-0 cursor-move text-gray-400 hover:text-gray-600 transition-colors p-1",
+            "data-drag-handle": true,
+            "data-testid": `${fieldName}-drag-handle`,
+            title: "\u62D6\u62FD\u6392\u5E8F",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M4 8h16M4 16h16"
+                  }
+                )
+              }
+            )
           }
-          
-          /* ErrorAlert \u9000\u51FA\u52A8\u753B */
-          .error-alert-exit {
-            animation: slideOutRight 0.3s ease-in forwards, fadeOut 0.3s ease-in forwards;
+        ),
+        rows === 1 ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            "x-model": "items[index]",
+            "x-bind:placeholder": "placeholder + ' ' + (index + 1)",
+            className: "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",
+            "data-testid": `${fieldName}-input`,
+            "x-bind:required": "!allowEmpty"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "x-model": "items[index]",
+            "x-bind:placeholder": "placeholder + ' ' + (index + 1)",
+            rows,
+            className: "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 resize-y",
+            "data-testid": `${fieldName}-input`,
+            "x-bind:required": "!allowEmpty"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            "x-bind:name": "fieldName + '[' + index + ']'",
+            "x-bind:value": "item"
           }
-        `
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...{
+              "x-on:click": `
+            items.splice(index, 1);
+          `
+            },
+            className: "flex-shrink-0 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors",
+            "data-testid": `${fieldName}-remove-button`,
+            title: "\u5220\u9664\u6B64\u9879",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "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"
+                  }
+                )
+              }
+            )
           }
+        )
+      ]
+    }
+  );
+}
+function TagsEditor(props) {
+  const { value, fieldName, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const initialTags = value || [];
+  const initialDataJson = JSON.stringify({
+    tags: initialTags.map((tag) => tag || ""),
+    fieldName,
+    newTag: "",
+    editingIndex: null,
+    editingValue: "",
+    error: ""
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "x-data": initialDataJson, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          "x-model": "newTag",
+          ...{
+            "x-on:keydown.enter.prevent": `
+              if (newTag.trim()) {
+                tags.push(newTag.trim());
+                newTag = '';
+                error = '';
+              } else {
+                error = '\u6807\u7B7E\u4E0D\u80FD\u4E3A\u7A7A';
+              }
+            `
+          },
+          placeholder,
+          autocomplete: "off",
+          className: "w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+          "data-testid": `${fieldName}-input`
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("body", { className: "bg-gray-50", "hx-indicator": "#loading-bar", children: [
-      /* @__PURE__ */ jsx(LoadingBar, {}),
-      props.children,
+      ),
       /* @__PURE__ */ jsx(
         "div",
         {
-          id: "error-container",
-          className: "fixed top-4 right-4 z-[200] w-full max-w-2xl px-4"
+          "x-show": "error && editingIndex === null",
+          "x-text": "error",
+          className: "text-red-600 text-sm p-2",
+          id: `${fieldName}-error`
         }
-      ),
-      /* @__PURE__ */ jsx("div", { id: "dialog-container" })
-    ] })
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "x-show": "tags.length > 0",
+        "data-testid": `${fieldName}-tags-container`,
+        ...{
+          "@sortable:change.stop": `
+            (function() {
+              const { oldIndex, newIndex } = $event.detail;
+              [tags[oldIndex], tags[newIndex]] = [tags[newIndex], tags[oldIndex]];
+            })();
+          `
+        },
+        children: /* @__PURE__ */ jsx(
+          SortableList,
+          {
+            className: "flex flex-wrap gap-2",
+            handle: "[data-drag-handle]",
+            children: /* @__PURE__ */ jsx("template", { "x-for": "(tag, index) in tags", "x-bind:key": "index", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "hidden",
+                  "x-bind:name": `fieldName + '[' + index + ']'`,
+                  "x-bind:value": "editingIndex === index ? editingValue : tag"
+                }
+              ),
+              /* @__PURE__ */ jsx(TagItem, { fieldName }),
+              /* @__PURE__ */ jsx(TagItemEdit, { fieldName })
+            ] }) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "empty-state text-center py-4 text-gray-400 text-sm border border-dashed border-gray-300 rounded-md",
+        "x-show": "tags.length === 0",
+        "data-testid": `${fieldName}-empty-state`,
+        children: "\u6682\u65E0\u6807\u7B7E\uFF0C\u5728\u4E0A\u65B9\u8F93\u5165\u6846\u4E2D\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0"
+      }
+    )
   ] });
 }
-function renderNavItem(item, currentPath, index) {
-  const isActive = currentPath === item.href || currentPath && currentPath.startsWith(item.href + "/");
-  const hasActiveChild = item.children?.some(
-    (child) => currentPath === child.href || currentPath && currentPath.startsWith(child.href + "/")
+function TagItem({ fieldName }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "inline-flex items-center gap-1 px-2 py-1 bg-blue-50 border border-blue-200 rounded-md text-sm group",
+      "x-show": "editingIndex !== index",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-shrink-0 cursor-move text-blue-400 hover:text-blue-600 transition-colors",
+            "data-drag-handle": true,
+            "data-testid": `${fieldName}-drag-handle`,
+            title: "\u62D6\u62FD\u6392\u5E8F",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3 h-3",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M4 8h16M4 16h16"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex-1 text-blue-900 cursor-pointer",
+            "data-testid": `${fieldName}-tag-text`,
+            ...{
+              "x-on:click.stop": `
+            editingIndex = index;
+            editingValue = tag;
+          `
+            },
+            children: /* @__PURE__ */ jsx("span", { "x-text": "tag" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...{ "x-on:click.stop": "tags.splice(index, 1)" },
+            className: "flex-shrink-0 text-blue-600 hover:text-red-600 hover:bg-red-50 rounded transition-colors p-0.5 delete-tag-button",
+            "data-testid": `${fieldName}-tag-remove`,
+            title: "\u5220\u9664\u6807\u7B7E",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ jsxs("li", { className: "relative group", "data-testid": `nav-item-${index}`, children: [
-    /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: item.href,
-        "hx-get": item.href,
-        className: `flex items-center px-4 py-2.5 rounded-lg transition-all duration-200 ${isActive || hasActiveChild ? "bg-blue-600 text-white shadow-md font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white"}`,
-        "data-testid": `nav-link-${item.label}`,
-        "aria-current": isActive ? "page" : void 0,
-        "aria-label": `\u5BFC\u822A\u5230 ${item.label}`,
-        children: [
-          item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2.5 text-lg", "aria-hidden": "true", children: item.icon }),
-          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: item.label })
-        ]
+}
+function TagItemEdit({ fieldName }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "inline-flex items-center gap-1 px-2 py-1 bg-blue-50 border border-blue-300 rounded-md text-sm",
+      "x-show": "editingIndex === index",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-shrink-0 cursor-move text-blue-400 hover:text-blue-600 transition-colors",
+            "data-drag-handle": true,
+            "data-testid": `${fieldName}-drag-handle`,
+            title: "\u62D6\u62FD\u6392\u5E8F",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3 h-3",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M4 8h16M4 16h16"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            "x-model": "editingValue",
+            ...{
+              "x-on:keydown.enter.prevent": `
+            if (editingValue.trim()) {
+              tags[index] = editingValue.trim();
+              editingIndex = null;
+              editingValue = '';
+              error = '';
+            } else {
+              error = '\u6807\u7B7E\u4E0D\u80FD\u4E3A\u7A7A';
+            }
+          `,
+              "x-on:blur": `
+            if (editingValue.trim()) {
+              tags[index] = editingValue.trim();
+              editingIndex = null;
+              editingValue = '';
+              error = '';
+            } else {
+              error = '\u6807\u7B7E\u4E0D\u80FD\u4E3A\u7A7A';
+            }
+          `
+            },
+            "x-bind:required": "editingIndex === index",
+            className: "flex-1 px-1 py-0.5 border border-blue-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-[60px]",
+            "data-testid": `${fieldName}-tag-edit-input`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...{
+              "x-on:click.stop": `
+            editingIndex = null;
+            editingValue = '';
+            error = '';
+          `
+            },
+            className: "px-1.5 py-0.5 text-xs bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition-colors",
+            "data-testid": `${fieldName}-tag-cancel`,
+            children: "\u53D6\u6D88"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "x-show": "error && editingIndex === index",
+            "x-text": "error",
+            className: "text-red-600 text-xs mt-1"
+          }
+        )
+      ]
+    }
+  );
+}
+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;
       }
-    ),
-    item.children && item.children.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ml-4 mt-1 space-y-1", "data-testid": `nav-submenu-${index}`, children: item.children.map((child, childIndex) => {
-      const isChildActive = currentPath === child.href || currentPath && currentPath.startsWith(child.href + "/");
-      return /* @__PURE__ */ jsx("li", { "data-testid": `nav-subitem-${index}-${childIndex}`, children: /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: child.href,
-          "hx-get": child.href,
-          className: `flex items-center px-4 py-2 rounded-lg text-sm transition-all duration-200 ${isChildActive ? "bg-blue-500 text-white font-medium" : "text-gray-400 hover:bg-gray-700 hover:text-white"}`,
-          "data-testid": `nav-sublink-${child.label}`,
-          "aria-current": isChildActive ? "page" : void 0,
-          "aria-label": `\u5BFC\u822A\u5230 ${child.label}`,
-          children: [
-            child.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", "aria-hidden": "true", children: child.icon }),
-            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: child.label })
-          ]
+    }
+  });
+  const initialValueJson = JSON.stringify(initialObject);
+  JSON.stringify(fields.map((f) => f.name));
+  const generateField = (field) => {
+    const fieldId = `${fieldName}-${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" : "";
+    let inputElement;
+    if (field.type === "text") {
+      inputElement = html`
+        <input
+          type="text"
+          id="${fieldId}"
+          name="${fieldName}.${field.name}"
+          value="${fieldValueStr}"
+          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}"
+          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          ${requiredAttr}
+        />
+      `;
+    } else if (field.type === "textarea") {
+      inputElement = html`
+        <textarea
+          id="${fieldId}"
+          name="${fieldName}.${field.name}"
+          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"
+          rows="4"
+          data-testid="${fieldName}-input-${field.name}"
+          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          ${requiredAttr}
+        >${fieldValueStr}</textarea>
+      `;
+    } else if (field.type === "number") {
+      const step = field.step || (field.step === void 0 ? "1" : "any");
+      inputElement = html`
+        <input
+          type="number"
+          id="${fieldId}"
+          name="${fieldName}.${field.name}"
+          value="${fieldValueStr}"
+          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}"
+          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'number', ${field.required})"
+          ${requiredAttr}
+        />
+      `;
+    } else if (field.type === "date") {
+      inputElement = html`
+        <input
+          type="date"
+          id="${fieldId}"
+          name="${fieldName}.${field.name}"
+          value="${fieldValueStr}"
+          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}"
+          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'date', ${field.required})"
+          ${requiredAttr}
+        />
+      `;
+    } else if (field.type === "email") {
+      inputElement = html`
+        <input
+          type="email"
+          id="${fieldId}"
+          name="${fieldName}.${field.name}"
+          value="${fieldValueStr}"
+          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}"
+          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          ${requiredAttr}
+        />
+      `;
+    } else if (field.type === "select" && field.options) {
+      inputElement = html`
+        <select
+          id="${fieldId}"
+          name="${fieldName}.${field.name}"
+          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}"
+          onchange="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          ${requiredAttr}
+        >
+          ${!field.required ? html`<option value="">请选择</option>` : ""}
+          ${field.options.map(
+        (option) => html`
+              <option
+                value="${String(option.value)}"
+                ${fieldValueStr === String(option.value) ? "selected" : ""}
+              >
+                ${option.label}
+              </option>
+            `
+      )}
+        </select>
+      `;
+    } else if (field.type === "checkbox") {
+      const checked = fieldValue === true || fieldValue === "true" || fieldValue === 1 || fieldValue === "1";
+      inputElement = html`
+        <div class="flex items-center">
+          <input
+            type="checkbox"
+            id="${fieldId}"
+            name="${fieldName}.${field.name}"
+            ${checked ? "checked" : ""}
+            class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+            data-testid="${fieldName}-checkbox-${field.name}"
+            onchange="updateObjectField('${fieldName}', '${field.name}', this.checked, 'checkbox', ${field.required}')"
+          />
+          <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
+      id="object-editor-${fieldName}"
+      class="space-y-4"
+      data-initial-value="${initialValueJson}"
+    >
+      <input
+        type="hidden"
+        name="${fieldName}"
+        value="${initialValueJson}"
+        data-testid="hidden-${fieldName}"
+      />
+      <div class="space-y-4">
+        ${fields.map((field) => generateField(field))}
+      </div>
+    </div>
+    <script>
+      (function() {
+        // 更新对象字段
+        function updateObjectField(fieldName, subFieldName, value, fieldType, required) {
+          const container = document.getElementById('object-editor-' + fieldName);
+          if (!container) return;
+          
+          const hiddenInput = container.querySelector('input[name="' + fieldName + '"][type="hidden"]');
+          if (!hiddenInput) return;
+          
+          try {
+            const obj = JSON.parse(hiddenInput.value || '{}');
+            
+            // 类型转换
+            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 obj[subFieldName];
+            } else {
+              obj[subFieldName] = convertedValue;
+            }
+            
+            // 更新隐藏字段
+            hiddenInput.value = JSON.stringify(obj);
+          } catch (e) {
+            console.error('Failed to update object field:', e);
+          }
         }
-      ) }, childIndex);
-    }) })
-  ] }, index);
+        
+        // 将函数暴露到全局作用域
+        if (typeof window !== 'undefined') {
+          window.updateObjectField = updateObjectField;
+        }
+      })();
+    </script>
+  `;
 }
-function renderActionButton2(action, index) {
-  const {
-    label,
-    href,
-    hxGet,
-    hxPost,
-    hxPut,
-    hxDelete,
-    variant = "primary",
-    confirm,
-    submit,
-    formId,
-    onClick,
-    className = "",
-    target
-  } = action;
-  if (submit && formId) {
-    const variantStyles = {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700",
-      ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
-    };
-    const buttonStyle = variantStyles[variant] || variantStyles.primary;
-    const testId2 = label === "\u521B\u5EFA" || label === "\u66F4\u65B0" ? "submit-button" : `action-${label}`;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "submit",
-        form: formId,
-        className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
-        "data-testid": testId2,
-        ...confirm && { "data-confirm": confirm },
-        children: label
-      },
-      index
-    );
-  }
-  if (onClick) {
-    const variantStyles = {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700",
-      ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
-    };
-    const buttonStyle = variantStyles[variant] || variantStyles.secondary;
-    const testId2 = label === "\u53D6\u6D88" ? "cancel-button" : `action-${label}`;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        _: onClick,
-        className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
-        "data-testid": testId2,
-        ...confirm && { "data-confirm": confirm },
-        children: label
-      },
-      index
-    );
-  }
-  let testId = `action-${label}`;
-  if (label === "\u65B0\u5EFA" || label === "\u521B\u5EFA") {
-    testId = "create-button";
-  } else if (label === "\u53D6\u6D88") {
-    testId = "cancel-button";
-  }
-  const isNewWindow = target === "_blank";
-  return /* @__PURE__ */ jsx(
-    Button,
+function BaseLayout(props) {
+  return html`
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>${props.title}</title>
+        <meta name="description" content="${props.description || ""}" />
+        ${globalScripts(props.prefix)} ${globalStyles()}
+      </head>
+      <body hx-ext="morph" className="bg-gray-50" hx-indicator="#loading-bar">
+        ${LoadingBar()} ${props.children}
+        <div
+          id="error-container"
+          className="fixed top-4 right-4 z-[200] w-full max-w-2xl px-4"
+        ></div>
+        <div id="dialog-container"></div>
+        ${sortableScript()}
+      </body>
+    </html>
+  `;
+}
+function renderNavItem(item, currentPath, index) {
+  const isActive = currentPath === item.href || currentPath && currentPath.startsWith(item.href + "/");
+  const hasActiveChild = item.children?.some(
+    (child) => currentPath === child.href || currentPath && currentPath.startsWith(child.href + "/")
+  );
+  return /* @__PURE__ */ jsxs(
+    "li",
     {
-      variant,
-      href,
-      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
+      className: "relative group",
+      "data-testid": `nav-item-${index}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: item.href,
+            "hx-get": item.href,
+            className: `flex items-center px-4 py-2.5 rounded-lg transition-all duration-200 ${isActive || hasActiveChild ? "bg-blue-600 text-white shadow-md font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white"}`,
+            "data-testid": `nav-link-${item.label}`,
+            "aria-current": isActive ? "page" : void 0,
+            "aria-label": `\u5BFC\u822A\u5230 ${item.label}`,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2.5 text-lg", "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: item.label })
+            ]
+          }
+        ),
+        item.children && item.children.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: "ml-4 mt-1 space-y-1",
+            "data-testid": `nav-submenu-${index}`,
+            children: item.children.map((child, childIndex) => {
+              const isChildActive = currentPath === child.href || currentPath && currentPath.startsWith(child.href + "/");
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  "data-testid": `nav-subitem-${index}-${childIndex}`,
+                  children: /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: child.href,
+                      "hx-get": child.href,
+                      className: `flex items-center px-4 py-2 rounded-lg text-sm transition-all duration-200 ${isChildActive ? "bg-blue-500 text-white font-medium" : "text-gray-400 hover:bg-gray-700 hover:text-white"}`,
+                      "data-testid": `nav-sublink-${child.label}`,
+                      "aria-current": isChildActive ? "page" : void 0,
+                      "aria-label": `\u5BFC\u822A\u5230 ${child.label}`,
+                      children: [
+                        child.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", "aria-hidden": "true", children: child.icon }),
+                        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: child.label })
+                      ]
+                    }
+                  )
+                },
+                childIndex
+              );
+            })
+          }
+        )
+      ]
     },
     index
   );
@@ -3240,16 +4823,31 @@ function AdminLayout(props) {
     currentPath,
     userInfo,
     breadcrumbs,
-    actions = []
+    actions
   } = props;
   const navItems = options.navigation || [];
   const logoutUrl = options.authProvider?.logoutUrl;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-screen", id: "main-content", children: [
     /* @__PURE__ */ jsx("aside", { className: "w-64 bg-gradient-to-b from-gray-900 to-gray-800 text-white shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "p-6 h-full flex flex-col", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-8", children: options.logo ? /* @__PURE__ */ jsx("img", { src: options.logo, alt: "Logo", className: "h-10 mb-2" }) : /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-white whitespace-nowrap overflow-hidden text-ellipsis", children: options.title || "\u7BA1\u7406\u540E\u53F0" }) }),
-      /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto", "data-testid": "main-navigation", "aria-label": "\u4E3B\u5BFC\u822A", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", "data-testid": "nav-list", children: navItems.length > 0 ? navItems.map(
-        (item, index) => renderNavItem(item, currentPath, index)
-      ) : /* @__PURE__ */ jsx("li", { className: "px-4 py-2 text-gray-400 text-sm", "data-testid": "nav-empty", children: "\u6682\u65E0\u5BFC\u822A\u9879" }) }) })
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          className: "flex-1 overflow-y-auto",
+          "data-testid": "main-navigation",
+          "aria-label": "\u4E3B\u5BFC\u822A",
+          children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", "data-testid": "nav-list", children: navItems.length > 0 ? navItems.map(
+            (item, index) => renderNavItem(item, currentPath, index)
+          ) : /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "px-4 py-2 text-gray-400 text-sm",
+              "data-testid": "nav-empty",
+              children: "\u6682\u65E0\u5BFC\u822A\u9879"
+            }
+          ) })
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsx(
@@ -3261,14 +4859,19 @@ function AdminLayout(props) {
           logoutUrl
         }
       ),
-      (title || description || actions.length > 0) && /* @__PURE__ */ jsx("div", { className: "bg-white border-b border-gray-200 px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-4", children: [
+      (title || description || actions) && /* @__PURE__ */ jsx("div", { className: "bg-white border-b border-gray-200 px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-0.5 leading-tight", children: title }),
           description && /* @__PURE__ */ jsx("p", { className: "text-gray-600 text-xs leading-snug", children: description })
         ] }),
-        actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-shrink-0", "data-testid": "page-actions", children: actions.map(
-          (action, index) => renderActionButton2(action, index)
-        ) })
+        actions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex gap-2 flex-shrink-0",
+            "data-testid": "page-actions",
+            children: actions
+          }
+        )
       ] }) }),
       /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "p-6", children }) })
     ] })
@@ -3414,14 +5017,13 @@ async function handlePermissionDenied(ctx, result, options) {
       headers
     );
   }
-  const cdnProxyPrefix = `${options.prefix}/_cdn`;
   return ctx.html(
     /* @__PURE__ */ jsx(
       BaseLayout,
       {
+        prefix: options.prefix,
         title: `\u6743\u9650\u4E0D\u8DB3 - ${options.title}`,
         description: "\u60A8\u6CA1\u6709\u6743\u9650\u8BBF\u95EE\u6B64\u8D44\u6E90",
-        cdnProxyPrefix,
         children: /* @__PURE__ */ jsx(
           PermissionDeniedPage,
           {
@@ -3489,7 +5091,7 @@ async function getActions(feature, context) {
   if (feature?.getActions) {
     return await feature.getActions(context);
   }
-  return [];
+  return null;
 }
 async function renderResult(ctx, context, result, renderOptions) {
   const { options, metadata, currentPath, breadcrumbs, user, feature } = renderOptions;
@@ -3669,6 +5271,7 @@ async function renderResult(ctx, context, result, renderOptions) {
                 useAdminLayout,
                 currentPath,
                 userInfo: user,
+                componentRegistry: renderOptions.componentRegistry,
                 breadcrumbs,
                 actions,
                 children: result
@@ -3693,7 +5296,7 @@ async function renderResult(ctx, context, result, renderOptions) {
       }
     }
   } else {
-    const cdnProxyPrefix = `${options.prefix}/_cdn`;
+    `${options.prefix}/_cdn`;
     const useAdminLayout = metadata.useAdminLayout !== false;
     const actions = await getActions(renderOptions.feature, context);
     if (useAdminLayout) {
@@ -3701,9 +5304,10 @@ async function renderResult(ctx, context, result, renderOptions) {
         /* @__PURE__ */ jsx(
           BaseLayout,
           {
+            prefix: options.prefix,
             title: dynamicMetadata.title,
             description: dynamicMetadata.description,
-            cdnProxyPrefix,
+            componentRegistry: renderOptions.componentRegistry,
             children: /* @__PURE__ */ jsx(
               AdminLayout,
               {
@@ -3715,6 +5319,7 @@ async function renderResult(ctx, context, result, renderOptions) {
                 userInfo: user,
                 breadcrumbs,
                 actions,
+                componentRegistry: renderOptions.componentRegistry,
                 children: result
               }
             )
@@ -3726,9 +5331,10 @@ async function renderResult(ctx, context, result, renderOptions) {
         /* @__PURE__ */ jsx(
           BaseLayout,
           {
+            prefix: options.prefix,
             title: dynamicMetadata.title,
             description: dynamicMetadata.description,
-            cdnProxyPrefix,
+            componentRegistry: renderOptions.componentRegistry,
             children: /* @__PURE__ */ jsx(NoLayout, { children: result })
           }
         )
@@ -3813,17 +5419,6 @@ async function handleRequest(ctx, page, feature, handlerOptions) {
         });
       }
     }
-    if (feature.render) {
-      const result = await feature.render(context);
-      return await renderResult(ctx, context, result, {
-        options: handlerOptions.options,
-        metadata,
-        feature,
-        currentPath,
-        breadcrumbs,
-        user
-      });
-    }
     const isHtmxRequest = ctx.req.header("HX-Request") === "true";
     if (isHtmxRequest) {
       return ctx.html(
@@ -3902,7 +5497,8 @@ function registerPageRoutes(page, options) {
       );
       const handler = async (ctx) => {
         return handleRequest(ctx, page, feature, {
-          options: options.options
+          options: options.options,
+          plugin: options.plugin
         });
       };
       options.hono[route.method](fullPath, handler);
@@ -3915,7 +5511,8 @@ function registerPageRoutes(page, options) {
               `[HtmxAdminPlugin] Method override detected: POST ${fullPath} -> ${expectedMethod} (feature: ${feature.name})`
             );
             return handleRequest(ctx, page, feature, {
-              options: options.options
+              options: options.options,
+              plugin: options.plugin
             });
           }
           logger.warn(
@@ -3956,6 +5553,7 @@ var HtmxAdminPlugin = class {
   options;
   serviceName = "";
   pages = /* @__PURE__ */ new Map();
+  componentHandler;
   constructor(options) {
     this.options = {
       title: options?.title || "\u7BA1\u7406\u540E\u53F0",
@@ -3963,11 +5561,19 @@ var HtmxAdminPlugin = class {
       prefix: options?.prefix || "/admin",
       homePath: options?.homePath || "",
       navigation: options?.navigation ?? [],
-      authProvider: options?.authProvider
+      authProvider: options?.authProvider,
+      pages: options?.pages ?? [],
+      components: options?.components ?? []
     };
+    this.initPages();
+  }
+  initPages() {
+    for (const page of this.options.pages) {
+      this.registerPage(page);
+    }
   }
   /**
-   * 注册页面（统一接口，支持有模型和无模型）
+   * 注册页面
    */
   registerPage(page) {
     if (this.pages.has(page.modelName)) {
@@ -3979,15 +5585,6 @@ var HtmxAdminPlugin = class {
     logger.info(`[HtmxAdminPlugin] Registered page: ${page.modelName}`);
     return this;
   }
-  /**
-   * 批量注册页面
-   */
-  registerPages(...pages) {
-    for (const page of pages) {
-      this.registerPage(page);
-    }
-    return this;
-  }
   /**
    * 引擎初始化钩子
    */
@@ -3998,6 +5595,11 @@ var HtmxAdminPlugin = class {
     logger.info(
       `HtmxAdminPlugin initialized${this.serviceName ? ` (service: ${this.serviceName})` : ""}`
     );
+    this.componentHandler = new HtmxComponentHandler(
+      this.hono,
+      this.options.prefix,
+      this.options.components
+    );
     initializeCdnCache().catch((error) => {
       logger.error("[HtmxAdminPlugin] CDN \u7F13\u5B58\u521D\u59CB\u5316\u5931\u8D25", error);
     });
@@ -4008,442 +5610,15 @@ var HtmxAdminPlugin = class {
   onAfterStart(engine) {
     const routeOptions = {
       options: this.options,
-      hono: this.hono
+      hono: this.hono,
+      plugin: this
     };
     registerCdnCacheRoutes(routeOptions);
-    for (const [modelName, page] of this.pages) {
+    for (const [_modelName, page] of this.pages) {
       registerPageRoutes(page, routeOptions);
     }
     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, ObjectEditor, PageModel, StringArrayEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, ComponentContext, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, HtmxComponent, LoadingBar, Method, ObjectEditor, PageModel, RenderContext, StringArrayEditor, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };