imean-service-engine-htmx-plugin 2.3.1 → 2.5.0

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var imeanServiceEngine = require('imean-service-engine');
+var jsxRuntime = require('hono/jsx/jsx-runtime');
 var fs = require('fs');
+var imeanServiceEngine = require('imean-service-engine');
 var path = require('path');
-var jsxRuntime = require('hono/jsx/jsx-runtime');
 var cookie = require('hono/cookie');
 var html = require('hono/html');
 
@@ -16,6 +16,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {};
@@ -62,7 +226,11 @@ async function saveToFileCache(name, content, mimeType) {
       fs.promises.writeFile(contentPath, content, "utf-8"),
       fs.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"
       )
     ]);
@@ -75,14 +243,18 @@ async function fetchAndCacheResource(resource) {
   try {
     const fileCache = await readFromFileCache(resource.name);
     if (fileCache) {
-      imeanServiceEngine.logger.info(`[CDNCache] \u4ECE\u6587\u4EF6\u7F13\u5B58\u52A0\u8F7D\u8D44\u6E90: ${resource.name} (${fileCache.content.length} \u5B57\u8282)`);
+      imeanServiceEngine.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;
     }
     imeanServiceEngine.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 = {
@@ -90,10 +262,14 @@ async function fetchAndCacheResource(resource) {
       mimeType: resource.mimeType
     };
     cache.set(resource.name, cached);
-    saveToFileCache(resource.name, content, resource.mimeType).catch((error) => {
-      imeanServiceEngine.logger.warn(`[CDNCache] \u4FDD\u5B58\u6587\u4EF6\u7F13\u5B58\u5931\u8D25: ${resource.name}`, error);
-    });
-    imeanServiceEngine.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) => {
+        imeanServiceEngine.logger.warn(`[CDNCache] \u4FDD\u5B58\u6587\u4EF6\u7F13\u5B58\u5931\u8D25: ${resource.name}`, error);
+      }
+    );
+    imeanServiceEngine.logger.info(
+      `[CDNCache] \u8D44\u6E90\u5DF2\u4E0B\u8F7D\u5E76\u7F13\u5B58: ${resource.name} (${content.length} \u5B57\u8282)`
+    );
   } catch (error) {
     imeanServiceEngine.logger.error(`[CDNCache] \u4E0B\u8F7D\u8D44\u6E90\u5931\u8D25: ${resource.name}`, error);
   }
@@ -145,6 +321,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();
@@ -283,11 +469,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) {
@@ -439,7 +631,7 @@ function renderFormField(field, initialData, formFieldRenderers) {
             name: field.name,
             required: field.required,
             placeholder: field.placeholder || (isJsonString(value) ? "JSON \u683C\u5F0F\u6570\u636E" : ""),
-            rows: isJsonString(value) ? 10 : 4,
+            rows: isJsonString(value) ? Math.max(10, value.split("\n").length) : Math.max(5, Math.ceil(value.length / 100)),
             className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-y font-mono text-sm",
             "data-testid": `input-${field.name}`,
             children: isJsonString(value) ? formatJsonString(value) : value
@@ -590,10 +782,10 @@ function FormPage(props) {
               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",
+              "hx-sync": "this:abort",
               className: isDialog ? "p-6" : "mt-6",
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: groups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -618,6 +810,7 @@ function FormPage(props) {
               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",
@@ -633,13 +826,195 @@ function FormPage(props) {
   );
 }
 
+// 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._def;
+  const def = zodSchema._zod?.def || zodSchema._def;
   const shape = typeof def.shape === "function" ? def.shape() : def.shape;
   if (!shape || typeof shape !== "object") {
     return processed;
@@ -657,16 +1032,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 !== "") {
@@ -679,7 +1056,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") {
@@ -691,8 +1068,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 {
@@ -706,8 +1139,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("}")) {
@@ -718,7 +1154,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();
@@ -733,6 +1169,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) {
@@ -1023,22 +1489,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) {
-        imeanServiceEngine.logger.warn(
-          `[BaseFormFeature] Method mismatch: expected ${expectedMethod}, got ${actualMethod} (request method: ${ctx.req.method}, X-HTTP-Method-Override: ${methodOverride || "none"})`
-        );
-      }
       const originalData = { ...context.body };
-      imeanServiceEngine.logger.info(
-        `[BaseFormFeature] Original body data: ${JSON.stringify(originalData)}`
-      );
-      let data = this.preprocessFormData(context.body);
-      imeanServiceEngine.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");
       }
@@ -1050,9 +1503,6 @@ var BaseFormFeature = class extends BaseFeature {
         const errorMessage = firstError.message;
         const errorText = fieldName ? `${fieldName}: ${errorMessage}` : errorMessage;
         context.sendError("\u9A8C\u8BC1\u5931\u8D25", errorText);
-        imeanServiceEngine.logger.info(
-          `[BaseFormFeature] Validation failed, returning form with originalData: ${JSON.stringify(originalData)}`
-        );
         return this.render(context, originalData);
       }
       const item = await this.handleSubmit(
@@ -1072,9 +1522,6 @@ var BaseFormFeature = class extends BaseFeature {
         `${context.model.getMetadata().title}\u5DF2\u6210\u529F${actionText}`
       );
       if (context.isDialog) {
-        imeanServiceEngine.logger.info(
-          `[BaseFormFeature] Dialog mode: setting refresh to close dialog and refresh list`
-        );
         context.setRefresh(true);
         if (context.redirectUrl) {
           context.redirectUrl = void 0;
@@ -1082,9 +1529,6 @@ var BaseFormFeature = class extends BaseFeature {
         return null;
       } else {
         const redirectUrl = this.getSuccessRedirectUrl(context, item);
-        imeanServiceEngine.logger.info(
-          `[BaseFormFeature] Page mode: Setting redirect URL: ${redirectUrl} (isHtmxRequest: ${context.isHtmxRequest})`
-        );
         context.redirect(redirectUrl);
         return null;
       }
@@ -1106,9 +1550,6 @@ var BaseFormFeature = class extends BaseFeature {
     } else {
       formData = initialData;
     }
-    imeanServiceEngine.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");
@@ -1175,7 +1616,7 @@ var BaseFormFeature = class extends BaseFeature {
     );
   }
   /**
-   * 获取操作按钮
+   * 获取操作按钮（返回 JSX）
    */
   async getActions(context) {
     const actions = [];
@@ -1203,7 +1644,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);
   }
 };
 
@@ -1252,7 +1694,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) {
@@ -1395,7 +1837,13 @@ function renderDefaultValue(value) {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: value.toLocaleString() });
@@ -1421,8 +1869,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "min-w-0 uppercase sm:normal-case", children: field.label }) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: content }) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "min-w-0 uppercase sm:normal-case", children: field.label })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: content })
+          }
+        )
       ]
     },
     field.key
@@ -1456,7 +1916,6 @@ function DetailPage(props) {
 }
 var DefaultDetailFeature = class extends BaseFeature {
   getItem;
-  deleteItem;
   titleGetter;
   descriptionGetter;
   detailFieldNames;
@@ -1473,7 +1932,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;
@@ -1515,32 +1973,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__ */ jsxRuntime.jsx(DetailPage, { item, groups: groupFields });
     }
     const detailFields = this.detailFieldNames ? filterFieldsByNames(this.fields || [], this.detailFieldNames) : this.fields || [];
@@ -1571,7 +2037,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 || "";
@@ -1608,7 +2074,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);
   }
 };
 
@@ -1814,77 +2281,16 @@ function FilterForm(props) {
     }
   ) });
 }
-function Button(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__ */ jsxRuntime.jsx(
-    "a",
-    {
-      className: classes,
-      disabled,
-      href,
-      ...htmxAttrs,
-      ...otherRest,
-      children
-    }
-  );
-}
+
+// src/components/table.tsx
+init_button();
 function EmptyState(props) {
   const { message = "\u6682\u65E0\u6570\u636E", children } = props;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12", children: children || /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: message }) });
 }
+
+// src/components/pagination.tsx
+init_button();
 function Pagination(props) {
   const {
     page,
@@ -1927,8 +2333,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"
@@ -1939,8 +2345,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"
@@ -1998,10 +2404,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
             },
@@ -2398,7 +2804,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}`;
+      imeanServiceEngine.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          body,
+          oobs
+        ] });
+      }
+      return ctx.html(bodyContent, 200, headers);
+    }
+    if (result === null) {
+      return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
+        "HX-Reswap": "none"
+      });
+    }
+    if (result instanceof Response) {
+      return result;
+    }
+    return ctx.html(result, 200);
   }
 };
 
@@ -2698,131 +3385,35 @@ 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) {
+function Dialog(props) {
   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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    Button,
-    {
-      variant,
-      href,
-      hxGet,
-      hxPost,
-      hxPut,
-      hxDelete,
-      hxConfirm: confirm,
-      className,
-      "data-testid": testId,
-      children: label
-    },
-    index
-  );
-}
-function Dialog(props) {
-  const {
-    title,
-    children,
-    showClose = true,
-    className = "",
-    size = "lg",
-    closeOnBackdropClick = true,
-    actions = [],
-    fixedContentHeight = false
-  } = props;
-  const sizeClasses = {
-    sm: "max-w-md",
-    md: "max-w-lg",
-    lg: "max-w-2xl",
-    xl: "max-w-4xl",
-    full: "max-w-7xl"
-  };
-  const backdropClickHandler = closeOnBackdropClick ? `on click if event.target is me 
-         add .dialog-exit to me
-         add .dialog-content-exit to .dialog-content
-         wait 200ms
-         set #dialog-container's innerHTML to '' end` : "";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "fixed inset-0 bg-black bg-opacity-50 z-[100] flex items-center justify-center p-4 dialog-backdrop",
-      style: {
-        animation: "fadeIn 0.2s ease-out"
+    title,
+    children,
+    showClose = true,
+    className = "",
+    size = "lg",
+    closeOnBackdropClick = true,
+    actions = [],
+    fixedContentHeight = false
+  } = props;
+  const sizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+    full: "max-w-7xl"
+  };
+  const backdropClickHandler = closeOnBackdropClick ? `on click if event.target is me 
+         add .dialog-exit to me
+         add .dialog-content-exit to .dialog-content
+         wait 200ms
+         set #dialog-container's innerHTML to '' end` : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 bg-black bg-opacity-50 z-[100] flex items-center justify-center p-4 dialog-backdrop",
+      style: {
+        animation: "fadeIn 0.2s ease-out"
       },
       _: backdropClickHandler,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2869,13 +3460,16 @@ function Dialog(props) {
                 children
               }
             ),
-            actions.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -2953,6 +3547,178 @@ function PermissionDeniedPage(props) {
     }
   ) }) });
 }
+var getResourceUrl = (prefix, name) => {
+  return `${prefix}/_cdn/${name}`;
+};
+function globalScripts(prefix) {
+  return html.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.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.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) {
@@ -3080,316 +3846,1061 @@ 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__ */ jsxRuntime.jsxs("html", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("head", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("meta", { charSet: "UTF-8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
-      /* @__PURE__ */ jsxRuntime.jsx("title", { children: props.title }),
-      props.description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "description", content: props.description }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "script",
-        {
-          src: getResourceUrl("htmx"),
-          onerror: `this.onerror=null;this.src='${htmxUrl}'`
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;}
-          }
-          
-          @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); }
+          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);
+            });
           }
-          
-          /* Dialog \u9000\u51FA\u52A8\u753B */
-          .dialog-exit {
-            animation: fadeOut 0.2s ease-in forwards !important;
+        }
+      }
+    },
+    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;
           }
-          
-          .dialog-content-exit {
-            animation: scaleOut 0.2s ease-in forwards !important;
+        }
+      }
+    },
+    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';
           }
           
-          /* ErrorAlert \u9000\u51FA\u52A8\u753B */
-          .error-alert-exit {
-            animation: slideOutRight 0.3s ease-in forwards, fadeOut 0.3s ease-in forwards;
-          }
-        `
+          // \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';
           }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("body", { className: "bg-gray-50", "hx-indicator": "#loading-bar", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(LoadingBar, {}),
-      props.children,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          id: "error-container",
-          className: "fixed top-4 right-4 z-[200] w-full max-w-2xl px-4"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { id: "dialog-container" })
-    ] })
-  ] });
-}
-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 + "/")
+        });
+      };
+      
+      // \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__ */ jsxRuntime.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
+    }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative group", "data-testid": `nav-item-${index}`, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "mr-2.5 text-lg", "aria-hidden": "true", children: item.icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: item.label })
-        ]
-      }
-    ),
-    item.children && item.children.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { "data-testid": `nav-subitem-${index}-${childIndex}`, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "mr-2", "aria-hidden": "true", children: child.icon }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: child.label })
-          ]
-        }
-      ) }, childIndex);
-    }) })
-  ] }, index);
 }
-function renderActionButton2(action, index) {
+function StringArrayEditor(props) {
   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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    Button,
+    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__ */ jsxRuntime.jsxs(
+    "div",
     {
-      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
-    },
-    index
+      className: "space-y-3",
+      "x-data": initialDataJson,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: "2",
+                      d: "M12 4v16m8-8H4"
+                    }
+                  )
+                }
+              ),
+              "\u6DFB\u52A0\u9879"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SortableList, { className: "space-y-2", handle: "[data-drag-handle]", children: /* @__PURE__ */ jsxRuntime.jsx("template", { "x-for": "(item, index) in items", "x-bind:key": "index", children: /* @__PURE__ */ jsxRuntime.jsx(ArrayItem, { fieldName, rows }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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'
+          }
+        )
+      ]
+    }
   );
 }
-function AdminLayout(props) {
-  const {
-    title,
-    description,
-    options,
-    children,
-    currentPath,
-    userInfo,
-    breadcrumbs,
-    actions = []
-  } = props;
-  const navItems = options.navigation || [];
-  const logoutUrl = options.authProvider?.logoutUrl;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen", id: "main-content", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "w-64 bg-gradient-to-b from-gray-900 to-gray-800 text-white shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 h-full flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: options.logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: options.logo, alt: "Logo", className: "h-10 mb-2" }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-white whitespace-nowrap overflow-hidden text-ellipsis", children: options.title || "\u7BA1\u7406\u540E\u53F0" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 overflow-y-auto", "data-testid": "main-navigation", "aria-label": "\u4E3B\u5BFC\u822A", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", "data-testid": "nav-list", children: navItems.length > 0 ? navItems.map(
-        (item, index) => renderNavItem(item, currentPath, index)
-      ) : /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-4 py-2 text-gray-400 text-sm", "data-testid": "nav-empty", children: "\u6682\u65E0\u5BFC\u822A\u9879" }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+function ArrayItem({ fieldName, rows = 1 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-array-item": true,
+      className: "flex items-center gap-2 group",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M4 8h16M4 16h16"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        rows === 1 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "hidden",
+            "x-bind:name": "fieldName + '[' + index + ']'",
+            "x-bind:value": "item"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", "x-data": initialDataJson, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Header,
+        "input",
         {
-          title,
-          breadcrumbs,
-          userInfo,
-          logoutUrl
+          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`
         }
       ),
-      (title || description || actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border-b border-gray-200 px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-0.5 leading-tight", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-xs leading-snug", children: description })
-        ] }),
-        actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-shrink-0", "data-testid": "page-actions", children: actions.map(
-          (action, index) => renderActionButton2(action, index)
-        ) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children }) })
-    ] })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "x-show": "error && editingIndex === null",
+          "x-text": "error",
+          className: "text-red-600 text-sm p-2",
+          id: `${fieldName}-error`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          SortableList,
+          {
+            className: "flex flex-wrap gap-2",
+            handle: "[data-drag-handle]",
+            children: /* @__PURE__ */ jsxRuntime.jsx("template", { "x-for": "(tag, index) in tags", "x-bind:key": "index", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "hidden",
+                  "x-bind:name": `fieldName + '[' + index + ']'`,
+                  "x-bind:value": "editingIndex === index ? editingValue : tag"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(TagItem, { fieldName }),
+              /* @__PURE__ */ jsxRuntime.jsx(TagItemEdit, { fieldName })
+            ] }) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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 NoLayout(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "main-content", children: props.children });
+function TagItem({ fieldName }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "w-3 h-3",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M4 8h16M4 16h16"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "x-text": "tag" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "w-3.5 h-3.5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
-
-// src/utils/permissions.ts
-function checkUserPermission(requiredPermission, userPermissions) {
-  if (!requiredPermission) {
-    return { allowed: true, reason: "\u65E0\u9700\u6743\u9650" };
-  }
-  if (!userPermissions || userPermissions.length === 0) {
-    return {
-      allowed: false,
-      reason: "\u7528\u6237\u65E0\u4EFB\u4F55\u6743\u9650",
-      matchedPermission: "none"
-    };
-  }
-  const denyResult = checkDenyPermissions(requiredPermission, userPermissions);
-  if (!denyResult.allowed) {
-    return denyResult;
-  }
-  const allowResult = checkAllowPermissions(
-    requiredPermission,
+function TagItemEdit({ fieldName }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "w-3 h-3",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M4 8h16M4 16h16"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 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.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.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.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.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.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.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.html`<option value="">请选择</option>` : ""}
+          ${field.options.map(
+        (option) => html.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.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.html`
+      <div class="space-y-2" data-testid="${fieldName}-field-${field.name}">
+        ${field.type !== "checkbox" ? html.html`
+              <label
+                for="${fieldId}"
+                class="block text-sm font-semibold text-gray-700"
+                data-testid="${fieldName}-label-${field.name}"
+              >
+                ${field.label}
+                ${field.required ? html.html`<span class="text-red-500 ml-1">*</span>` : ""}
+              </label>
+            ` : ""}
+        ${inputElement}
+      </div>
+    `;
+  };
+  return html.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);
+          }
+        }
+        
+        // 将函数暴露到全局作用域
+        if (typeof window !== 'undefined') {
+          window.updateObjectField = updateObjectField;
+        }
+      })();
+    </script>
+  `;
+}
+function BaseLayout(props) {
+  return html.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__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: "relative group",
+      "data-testid": `nav-item-${index}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "mr-2.5 text-lg", "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: item.label })
+            ]
+          }
+        ),
+        item.children && item.children.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  "data-testid": `nav-subitem-${index}-${childIndex}`,
+                  children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "mr-2", "aria-hidden": "true", children: child.icon }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: child.label })
+                      ]
+                    }
+                  )
+                },
+                childIndex
+              );
+            })
+          }
+        )
+      ]
+    },
+    index
+  );
+}
+function AdminLayout(props) {
+  const {
+    title,
+    description,
+    options,
+    children,
+    currentPath,
+    userInfo,
+    breadcrumbs,
+    actions
+  } = props;
+  const navItems = options.navigation || [];
+  const logoutUrl = options.authProvider?.logoutUrl;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen", id: "main-content", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "w-64 bg-gradient-to-b from-gray-900 to-gray-800 text-white shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 h-full flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: options.logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: options.logo, alt: "Logo", className: "h-10 mb-2" }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-white whitespace-nowrap overflow-hidden text-ellipsis", children: options.title || "\u7BA1\u7406\u540E\u53F0" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "nav",
+        {
+          className: "flex-1 overflow-y-auto",
+          "data-testid": "main-navigation",
+          "aria-label": "\u4E3B\u5BFC\u822A",
+          children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", "data-testid": "nav-list", children: navItems.length > 0 ? navItems.map(
+            (item, index) => renderNavItem(item, currentPath, index)
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              className: "px-4 py-2 text-gray-400 text-sm",
+              "data-testid": "nav-empty",
+              children: "\u6682\u65E0\u5BFC\u822A\u9879"
+            }
+          ) })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Header,
+        {
+          title,
+          breadcrumbs,
+          userInfo,
+          logoutUrl
+        }
+      ),
+      (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border-b border-gray-200 px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-0.5 leading-tight", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-xs leading-snug", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex gap-2 flex-shrink-0",
+            "data-testid": "page-actions",
+            children: actions
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children }) })
+    ] })
+  ] });
+}
+function NoLayout(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: "main-content", children: props.children });
+}
+
+// src/utils/permissions.ts
+function checkUserPermission(requiredPermission, userPermissions) {
+  if (!requiredPermission) {
+    return { allowed: true, reason: "\u65E0\u9700\u6743\u9650" };
+  }
+  if (!userPermissions || userPermissions.length === 0) {
+    return {
+      allowed: false,
+      reason: "\u7528\u6237\u65E0\u4EFB\u4F55\u6743\u9650",
+      matchedPermission: "none"
+    };
+  }
+  const denyResult = checkDenyPermissions(requiredPermission, userPermissions);
+  if (!denyResult.allowed) {
+    return denyResult;
+  }
+  const allowResult = checkAllowPermissions(
+    requiredPermission,
     userPermissions
   );
   return allowResult;
@@ -3455,1370 +4966,665 @@ function matchWithWildcard(required, pattern) {
     if (patternPart === "*") {
       continue;
     }
-    if (!patternPart && pattern.endsWith("*")) {
-      return true;
-    }
-    if (!requiredPart) {
-      return false;
-    }
-    if (requiredPart !== patternPart) {
-      return false;
-    }
-  }
-  return true;
-}
-async function checkPermission(user, permission, ctx, options) {
-  if (options.authProvider?.checkPermission) {
-    return await options.authProvider.checkPermission(user, permission, ctx);
-  }
-  const userPermissions = user?.permissions || [];
-  const result = checkUserPermission(permission, userPermissions);
-  return {
-    allowed: result.allowed,
-    message: result.reason,
-    operationId: permission
-  };
-}
-async function handlePermissionDenied(ctx, result, options) {
-  const isHtmxRequest = ctx.req.header("HX-Request") === "true";
-  const loginUrl = options.authProvider?.loginUrl || "/admin/login";
-  const user = await getUserInfo(ctx, options.authProvider);
-  if (!user && !isHtmxRequest) {
-    return ctx.redirect(loginUrl);
-  }
-  if (isHtmxRequest) {
-    const headers = {
-      "HX-Retarget": "#dialog-container",
-      "HX-Reswap": "innerHTML",
-      "X-Permission-Denied": "true"
-    };
-    return ctx.html(
-      /* @__PURE__ */ jsxRuntime.jsx(Dialog, { title: "\u6743\u9650\u4E0D\u8DB3", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-        PermissionDeniedContent,
-        {
-          operationId: result.operationId,
-          fromPath: ctx.req.path,
-          message: result.message,
-          userInfo: user,
-          pluginOptions: options,
-          isDialog: true
-        }
-      ) }),
-      200,
-      headers
-    );
-  }
-  const cdnProxyPrefix = `${options.prefix}/_cdn`;
-  return ctx.html(
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BaseLayout,
-      {
-        title: `\u6743\u9650\u4E0D\u8DB3 - ${options.title}`,
-        description: "\u60A8\u6CA1\u6709\u6743\u9650\u8BBF\u95EE\u6B64\u8D44\u6E90",
-        cdnProxyPrefix,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          PermissionDeniedPage,
-          {
-            operationId: result.operationId,
-            fromPath: ctx.req.path,
-            message: result.message,
-            userInfo: user,
-            pluginOptions: options
-          }
-        )
-      }
-    ),
-    403
-  );
-}
-function buildNotificationFragments(notifications) {
-  if (notifications.length === 0) {
-    return null;
-  }
-  return notifications.map((notification, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      id: "error-container",
-      "hx-swap-oob": "beforeend",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ErrorAlert,
-        {
-          type: notification.type,
-          title: notification.title,
-          message: notification.message
-        }
-      )
-    },
-    `notification-${index}`
-  ));
-}
-function isEmptyContent(result) {
-  if (result === null || result === void 0) return true;
-  if (typeof result === "string" && result.trim() === "") return true;
-  if (result && typeof result === "object" && "type" in result) {
-    if (result.type === "div") {
-      const props = result.props || {};
-      const children = props.children;
-      if (!children) return true;
-      if (Array.isArray(children) && children.length === 0) return true;
-      if (typeof children === "string" && children.trim() === "") return true;
-    }
-  }
-  return false;
-}
-async function isEmptyResponse(response) {
-  const clonedResponse = response.clone();
-  const text = await clonedResponse.text();
-  return !text || text.trim() === "" || text.trim() === "<div></div>" || text.trim().match(/^<div[^>]*>\s*<\/div>$/) !== null;
-}
-async function getDynamicMetadata(feature, context, defaultMetadata) {
-  if (feature?.getTitle) {
-    const title = await feature.getTitle(context);
-    const description = feature.getDescription ? await feature.getDescription(context) : defaultMetadata.description;
-    return { title, description };
-  }
-  return defaultMetadata;
-}
-async function getActions(feature, context) {
-  if (feature?.getActions) {
-    return await feature.getActions(context);
-  }
-  return [];
-}
-async function renderResult(ctx, context, result, renderOptions) {
-  const { options, metadata, currentPath, breadcrumbs, user, feature } = renderOptions;
-  const { notifications } = context;
-  const dynamicMetadata = await getDynamicMetadata(feature, context, metadata);
-  if (result instanceof Response) {
-    const status = result.status;
-    if (status === 302 || status === 301) {
-      const location = result.headers.get("Location");
-      if (location) {
-        if (context.isHtmxRequest) {
-          return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
-            "HX-Redirect": location
-          });
-        }
-        return result;
-      }
-    }
-    if (status >= 300 && status < 400) {
-      const location = result.headers.get("Location");
-      if (location) {
-        if (context.isHtmxRequest) {
-          return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
-            "HX-Redirect": location
-          });
-        }
-        return result;
-      }
+    if (!patternPart && pattern.endsWith("*")) {
+      return true;
     }
-    if (notifications.length > 0) {
-      const empty = await isEmptyResponse(result);
-      if (empty) {
-        const notificationFragments = buildNotificationFragments(notifications);
-        const titleFragment = /* @__PURE__ */ jsxRuntime.jsx("title", { children: dynamicMetadata.title });
-        return ctx.html(
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            notificationFragments,
-            titleFragment
-          ] }),
-          200,
-          {
-            "HX-Reswap": "none"
-            // 关键：阻止 HTMX 替换任何内容
-          }
-        );
-      }
+    if (!requiredPart) {
+      return false;
+    }
+    if (requiredPart !== patternPart) {
+      return false;
     }
-    return result;
   }
-  if (context.refresh) {
-    imeanServiceEngine.logger.info(
-      `[ResponseRenderer] Refresh requested (isDialog: ${context.isDialog}, isHtmxRequest: ${context.isHtmxRequest})`
-    );
+  return true;
+}
+async function checkPermission(user, permission, ctx, options) {
+  if (options.authProvider?.checkPermission) {
+    return await options.authProvider.checkPermission(user, permission, ctx);
+  }
+  const userPermissions = user?.permissions || [];
+  const result = checkUserPermission(permission, userPermissions);
+  return {
+    allowed: result.allowed,
+    message: result.reason,
+    operationId: permission
+  };
+}
+async function handlePermissionDenied(ctx, result, options) {
+  const isHtmxRequest = ctx.req.header("HX-Request") === "true";
+  const loginUrl = options.authProvider?.loginUrl || "/admin/login";
+  const user = await getUserInfo(ctx, options.authProvider);
+  if (!user && !isHtmxRequest) {
+    return ctx.redirect(loginUrl);
+  }
+  if (isHtmxRequest) {
     const headers = {
-      "HX-Refresh": "true"
+      "HX-Retarget": "#dialog-container",
+      "HX-Reswap": "innerHTML",
+      "X-Permission-Denied": "true"
     };
-    const notificationFragments = buildNotificationFragments(notifications);
-    if (context.isDialog) {
-      return ctx.html(
-        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { id: "dialog-container", "hx-swap-oob": "innerHTML" }),
-          notificationFragments,
-          /* @__PURE__ */ jsxRuntime.jsx("title", { children: metadata.title })
-        ] }),
-        200,
-        headers
-      );
-    }
     return ctx.html(
-      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-        notificationFragments,
-        /* @__PURE__ */ jsxRuntime.jsx("title", { children: metadata.title })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog, { title: "\u6743\u9650\u4E0D\u8DB3", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        PermissionDeniedContent,
+        {
+          operationId: result.operationId,
+          fromPath: ctx.req.path,
+          message: result.message,
+          userInfo: user,
+          pluginOptions: options,
+          isDialog: true
+        }
+      ) }),
       200,
       headers
     );
   }
-  if (context.redirectUrl && !context.refresh) {
-    imeanServiceEngine.logger.info(
-      `[ResponseRenderer] Redirect URL found: ${context.redirectUrl} (isHtmxRequest: ${context.isHtmxRequest}, isDialog: ${context.isDialog})`
-    );
-    if (context.isHtmxRequest) {
-      return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
-        "HX-Redirect": context.redirectUrl
-      });
-    } else {
-      return ctx.redirect(context.redirectUrl);
-    }
-  } else if (context.redirectUrl && context.refresh) {
-    imeanServiceEngine.logger.info(
-      `[ResponseRenderer] Both redirect URL and refresh are set, using refresh (isDialog: ${context.isDialog})`
-    );
-  } else if (!context.redirectUrl) {
-    imeanServiceEngine.logger.info(
-      `[ResponseRenderer] No redirect URL found (result: ${result === null ? "null" : typeof result}, isHtmxRequest: ${context.isHtmxRequest})`
-    );
-  }
-  if (context.isHtmxRequest) {
-    const notificationFragments = buildNotificationFragments(notifications);
-    const titleFragment = /* @__PURE__ */ jsxRuntime.jsx("title", { children: metadata.title });
-    const empty = isEmptyContent(result);
-    if (empty && notifications.length > 0 && !context.redirectUrl) {
-      return ctx.html(
-        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          notificationFragments,
-          titleFragment
-        ] }),
-        200,
-        {
-          "HX-Reswap": "none"
-          // 关键：阻止 HTMX 替换任何内容，即使 body 上有 hx-target
-        }
-      );
-    }
-    const target = context.isDialog ? "#dialog-container" : "#main-content";
-    const swap = context.isDialog ? "innerHTML" : "outerHTML";
-    const headers = {
-      "HX-Retarget": target,
-      "HX-Reswap": swap
-    };
-    if (!context.isDialog) {
-      const hasError = notifications.some((n) => n.type === "error");
-      if (hasError) {
-        const referer = ctx.req.header("Referer");
-        if (referer) {
-          try {
-            const refererUrl = new URL(referer);
-            headers["HX-Push-Url"] = refererUrl.pathname + refererUrl.search;
-          } catch {
-            headers["HX-Push-Url"] = "false";
-          }
-        } else {
-          headers["HX-Push-Url"] = "false";
-        }
-      } else {
-        const url = new URL(ctx.req.url);
-        headers["HX-Push-Url"] = url.pathname + url.search;
-      }
-    }
-    const actions = await getActions(renderOptions.feature, context);
-    if (context.isDialog) {
-      const dialogSize = renderOptions.feature?.dialogSize || "lg";
-      const closeOnBackdropClick = renderOptions.feature?.closeOnBackdropClick ?? true;
-      const isFormFeature = renderOptions.feature?.type === "create" || renderOptions.feature?.type === "edit";
-      const fixedContentHeight = isFormFeature;
-      return ctx.html(
-        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Dialog,
-            {
-              title: dynamicMetadata.title,
-              size: dialogSize,
-              closeOnBackdropClick,
-              actions,
-              fixedContentHeight,
-              children: result
-            }
-          ),
-          notificationFragments,
-          titleFragment
-        ] }),
-        200,
-        headers
-      );
-    } else {
-      const useAdminLayout = metadata.useAdminLayout !== false;
-      if (useAdminLayout) {
-        return ctx.html(
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AdminLayout,
-              {
-                title: dynamicMetadata.title,
-                description: dynamicMetadata.description,
-                options,
-                useAdminLayout,
-                currentPath,
-                userInfo: user,
-                breadcrumbs,
-                actions,
-                children: result
-              }
-            ),
-            notificationFragments,
-            titleFragment
-          ] }),
-          200,
-          headers
-        );
-      } else {
-        return ctx.html(
-          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(NoLayout, { children: result }),
-            notificationFragments,
-            titleFragment
-          ] }),
-          200,
-          headers
-        );
-      }
-    }
-  } else {
-    const cdnProxyPrefix = `${options.prefix}/_cdn`;
-    const useAdminLayout = metadata.useAdminLayout !== false;
-    const actions = await getActions(renderOptions.feature, context);
-    if (useAdminLayout) {
-      return ctx.html(
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BaseLayout,
-          {
-            title: dynamicMetadata.title,
-            description: dynamicMetadata.description,
-            cdnProxyPrefix,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              AdminLayout,
-              {
-                title: dynamicMetadata.title,
-                description: dynamicMetadata.description,
-                options,
-                useAdminLayout,
-                currentPath,
-                userInfo: user,
-                breadcrumbs,
-                actions,
-                children: result
-              }
-            )
-          }
-        )
-      );
-    } else {
-      return ctx.html(
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BaseLayout,
+  return ctx.html(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BaseLayout,
+      {
+        prefix: options.prefix,
+        title: `\u6743\u9650\u4E0D\u8DB3 - ${options.title}`,
+        description: "\u60A8\u6CA1\u6709\u6743\u9650\u8BBF\u95EE\u6B64\u8D44\u6E90",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          PermissionDeniedPage,
           {
-            title: dynamicMetadata.title,
-            description: dynamicMetadata.description,
-            cdnProxyPrefix,
-            children: /* @__PURE__ */ jsxRuntime.jsx(NoLayout, { children: result })
+            operationId: result.operationId,
+            fromPath: ctx.req.path,
+            message: result.message,
+            userInfo: user,
+            pluginOptions: options
           }
         )
-      );
-    }
+      }
+    ),
+    403
+  );
+}
+function buildNotificationFragments(notifications) {
+  if (notifications.length === 0) {
+    return null;
   }
+  return notifications.map((notification, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: "error-container",
+      "hx-swap-oob": "beforeend",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ErrorAlert,
+        {
+          type: notification.type,
+          title: notification.title,
+          message: notification.message
+        }
+      )
+    },
+    `notification-${index}`
+  ));
 }
-function buildBreadcrumbs(currentPath, homePath, pageTitle) {
-  const breadcrumbs = [];
-  if (homePath) {
-    if (currentPath === homePath) {
-      breadcrumbs.push({ label: pageTitle, href: void 0 });
-    } else {
-      breadcrumbs.push({ label: "\u9996\u9875", href: homePath });
-      breadcrumbs.push({ label: pageTitle, href: void 0 });
+function isEmptyContent(result) {
+  if (result === null || result === void 0) return true;
+  if (typeof result === "string" && result.trim() === "") return true;
+  if (result && typeof result === "object" && "type" in result) {
+    if (result.type === "div") {
+      const props = result.props || {};
+      const children = props.children;
+      if (!children) return true;
+      if (Array.isArray(children) && children.length === 0) return true;
+      if (typeof children === "string" && children.trim() === "") return true;
     }
-  } else {
-    breadcrumbs.push({ label: pageTitle, href: void 0 });
   }
-  return breadcrumbs;
+  return false;
 }
-function getCurrentPath(ctx) {
-  const referer = ctx.req.header("Referer");
-  let currentPath = ctx.req.path;
-  if (referer) {
-    try {
-      const refererUrl = new URL(referer);
-      const method = ctx.req.method;
-      if (["POST", "PUT", "DELETE"].includes(method)) {
-        currentPath = refererUrl.pathname;
-      }
-    } catch (e) {
-    }
+async function isEmptyResponse(response) {
+  const clonedResponse = response.clone();
+  const text = await clonedResponse.text();
+  return !text || text.trim() === "" || text.trim() === "<div></div>" || text.trim().match(/^<div[^>]*>\s*<\/div>$/) !== null;
+}
+async function getDynamicMetadata(feature, context, defaultMetadata) {
+  if (feature?.getTitle) {
+    const title = await feature.getTitle(context);
+    const description = feature.getDescription ? await feature.getDescription(context) : defaultMetadata.description;
+    return { title, description };
   }
-  return currentPath;
+  return defaultMetadata;
 }
-async function handleRequest(ctx, page, feature, handlerOptions) {
-  try {
-    imeanServiceEngine.logger.info(
-      `[HtmxAdminPlugin] Handling request: ${ctx.req.method} ${ctx.req.path} (feature: ${feature.name}, page: ${page.modelName})`
-    );
-    const user = await getUserInfo(ctx, handlerOptions.options.authProvider);
-    if (feature.permission !== null && handlerOptions.options.authProvider) {
-      const permissionResult = await checkPermission(
-        user,
-        feature.permission,
-        ctx,
-        {
-          authProvider: handlerOptions.options.authProvider,
-          prefix: handlerOptions.options.prefix,
-          title: handlerOptions.options.title
+async function getActions(feature, context) {
+  if (feature?.getActions) {
+    return await feature.getActions(context);
+  }
+  return null;
+}
+async function renderResult(ctx, context, result, renderOptions) {
+  const { options, metadata, currentPath, breadcrumbs, user, feature } = renderOptions;
+  const { notifications } = context;
+  const dynamicMetadata = await getDynamicMetadata(feature, context, metadata);
+  if (result instanceof Response) {
+    const status = result.status;
+    if (status === 302 || status === 301) {
+      const location = result.headers.get("Location");
+      if (location) {
+        if (context.isHtmxRequest) {
+          return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
+            "HX-Redirect": location
+          });
         }
-      );
-      if (!permissionResult.allowed) {
-        return await handlePermissionDenied(ctx, permissionResult, {
-          authProvider: handlerOptions.options.authProvider,
-          prefix: handlerOptions.options.prefix,
-          title: handlerOptions.options.title
-        });
-      }
-    }
-    const context = await createFeatureContext(ctx, page, feature, user, {
-      prefix: handlerOptions.options.prefix
-    });
-    const metadata = page.getMetadata();
-    const currentPath = getCurrentPath(ctx);
-    const breadcrumbs = buildBreadcrumbs(
-      currentPath,
-      handlerOptions.options.homePath,
-      metadata.title
-    );
-    if (feature.handle) {
-      const result = await feature.handle(context);
-      if (result !== void 0) {
-        return await renderResult(ctx, context, result, {
-          options: handlerOptions.options,
-          metadata,
-          feature,
-          currentPath,
-          breadcrumbs,
-          user
-        });
+        return result;
       }
     }
-    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(
-        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { id: "error-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ErrorAlert,
-            {
-              type: "error",
-              title: "\u8BF7\u6C42\u5931\u8D25",
-              message: "Feature has no handler or render method"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("title", { children: "\u9519\u8BEF" })
-        ] }),
-        500,
-        {
-          "HX-Reswap": "none"
-          // 关键：不替换任何内容
-        }
-      );
-    }
-    return ctx.json({ error: "Feature has no handler or render method" }, 500);
-  } catch (error) {
-    imeanServiceEngine.logger.error(`[HtmxAdminPlugin] Error handling request:`, error);
-    const isHtmxRequest = ctx.req.header("HX-Request") === "true";
-    if (isHtmxRequest) {
-      const errorMessage = error instanceof Error ? error.message : "Internal server error";
-      return ctx.html(
-        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { id: "error-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorAlert, { type: "error", title: "\u8BF7\u6C42\u5931\u8D25", message: errorMessage }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("title", { children: "\u9519\u8BEF" })
-        ] }),
-        500,
-        {
-          "HX-Reswap": "none"
-          // 关键：不替换任何内容，只显示通知
+    if (status >= 300 && status < 400) {
+      const location = result.headers.get("Location");
+      if (location) {
+        if (context.isHtmxRequest) {
+          return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
+            "HX-Redirect": location
+          });
         }
-      );
-    }
-    return ctx.json(
-      {
-        error: error instanceof Error ? error.message : "Internal server error"
-      },
-      500
-    );
-  }
-}
-
-// src/internal/route-registrar.ts
-function registerCdnCacheRoutes(options) {
-  const { prefix } = options.options;
-  options.hono.get(`${prefix}/_cdn/:name`, async (ctx) => {
-    const name = ctx.req.param("name");
-    const { getCachedResource: getCachedResource2 } = await Promise.resolve().then(() => (init_cdn_cache(), cdn_cache_exports));
-    const cached = getCachedResource2(name);
-    if (cached) {
-      return ctx.body(cached.content, 200, {
-        "Content-Type": cached.mimeType,
-        "Cache-Control": "public, max-age=31536000, immutable"
-        // 缓存 1 年
-      });
+        return result;
+      }
     }
-    return ctx.text(`Resource "${name}" not cached`, 404);
-  });
-  imeanServiceEngine.logger.info(`[HtmxAdminPlugin] CDN \u7F13\u5B58\u4EE3\u7406\u8DEF\u7531\u5DF2\u6CE8\u518C: ${prefix}/_cdn/:name`);
-}
-function registerPageRoutes(page, options) {
-  const basePath = `${options.options.prefix}${modelNameToPath(page.modelName)}`;
-  const features = page.features.getAll();
-  for (const feature of features) {
-    const routes = feature.getRoutes();
-    for (const route of routes) {
-      const fullPath = `${basePath}${route.path}`;
-      imeanServiceEngine.logger.info(
-        `[HtmxAdminPlugin] Registering route: ${route.method.toUpperCase()} ${fullPath} (feature: ${feature.name}, permission: ${feature.permission || "none"})`
-      );
-      const handler = async (ctx) => {
-        return handleRequest(ctx, page, feature, {
-          options: options.options
-        });
-      };
-      options.hono[route.method](fullPath, handler);
-      if (route.method === "put" || route.method === "delete") {
-        const postHandler = async (ctx) => {
-          const methodOverride = ctx.req.header("X-HTTP-Method-Override");
-          const expectedMethod = route.method.toUpperCase();
-          if (methodOverride === expectedMethod) {
-            imeanServiceEngine.logger.info(
-              `[HtmxAdminPlugin] Method override detected: POST ${fullPath} -> ${expectedMethod} (feature: ${feature.name})`
-            );
-            return handleRequest(ctx, page, feature, {
-              options: options.options
-            });
+    if (notifications.length > 0) {
+      const empty = await isEmptyResponse(result);
+      if (empty) {
+        const notificationFragments = buildNotificationFragments(notifications);
+        const titleFragment = /* @__PURE__ */ jsxRuntime.jsx("title", { children: dynamicMetadata.title });
+        return ctx.html(
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            notificationFragments,
+            titleFragment
+          ] }),
+          200,
+          {
+            "HX-Reswap": "none"
+            // 关键：阻止 HTMX 替换任何内容
           }
-          imeanServiceEngine.logger.warn(
-            `[HtmxAdminPlugin] POST request to ${fullPath} without matching X-HTTP-Method-Override header (got: ${methodOverride || "none"}, expected: ${expectedMethod})`
-          );
-          return ctx.text("Method Not Allowed", 405);
-        };
-        imeanServiceEngine.logger.info(
-          `[HtmxAdminPlugin] Registering POST route for method override: POST ${fullPath} (actual method: ${route.method.toUpperCase()}, feature: ${feature.name})`
         );
-        options.hono.post(fullPath, postHandler);
       }
     }
+    return result;
   }
-}
-function registerHomeRedirect(pages, options) {
-  const { prefix, homePath } = options.options;
-  if (homePath) {
-    options.hono.get(prefix, async (ctx) => {
-      return ctx.redirect(homePath);
-    });
-  } else if (pages.size > 0) {
-    const firstPage = Array.from(pages.values())[0];
-    const firstPath = `${prefix}${modelNameToPath(firstPage.modelName)}`;
-    options.hono.get(prefix, async (ctx) => {
-      return ctx.redirect(firstPath);
-    });
-  }
-}
-
-// src/plugin.tsx
-init_cdn_cache();
-var HtmxAdminPlugin = class {
-  name = "htmx-admin-plugin";
-  priority = imeanServiceEngine.PluginPriority.ROUTE;
-  engine;
-  hono;
-  options;
-  serviceName = "";
-  pages = /* @__PURE__ */ new Map();
-  constructor(options) {
-    this.options = {
-      title: options?.title || "\u7BA1\u7406\u540E\u53F0",
-      logo: options?.logo || "",
-      prefix: options?.prefix || "/admin",
-      homePath: options?.homePath || "",
-      navigation: options?.navigation ?? [],
-      authProvider: options?.authProvider
+  if (context.refresh) {
+    imeanServiceEngine.logger.info(
+      `[ResponseRenderer] Refresh requested (isDialog: ${context.isDialog}, isHtmxRequest: ${context.isHtmxRequest})`
+    );
+    const headers = {
+      "HX-Refresh": "true"
     };
-  }
-  /**
-   * 注册页面（统一接口，支持有模型和无模型）
-   */
-  registerPage(page) {
-    if (this.pages.has(page.modelName)) {
-      throw new Error(
-        `Page with name "${page.modelName}" is already registered`
+    const notificationFragments = buildNotificationFragments(notifications);
+    if (context.isDialog) {
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { id: "dialog-container", "hx-swap-oob": "innerHTML" }),
+          notificationFragments,
+          /* @__PURE__ */ jsxRuntime.jsx("title", { children: metadata.title })
+        ] }),
+        200,
+        headers
       );
     }
-    this.pages.set(page.modelName, page);
-    imeanServiceEngine.logger.info(`[HtmxAdminPlugin] Registered page: ${page.modelName}`);
-    return this;
+    return ctx.html(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+        notificationFragments,
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: metadata.title })
+      ] }),
+      200,
+      headers
+    );
   }
-  /**
-   * 批量注册页面
-   */
-  registerPages(...pages) {
-    for (const page of pages) {
-      this.registerPage(page);
+  if (context.redirectUrl && !context.refresh) {
+    imeanServiceEngine.logger.info(
+      `[ResponseRenderer] Redirect URL found: ${context.redirectUrl} (isHtmxRequest: ${context.isHtmxRequest}, isDialog: ${context.isDialog})`
+    );
+    if (context.isHtmxRequest) {
+      return ctx.html(/* @__PURE__ */ jsxRuntime.jsx("div", {}), 200, {
+        "HX-Redirect": context.redirectUrl
+      });
+    } else {
+      return ctx.redirect(context.redirectUrl);
     }
-    return this;
-  }
-  /**
-   * 引擎初始化钩子
-   */
-  onInit(engine) {
-    this.engine = engine;
-    this.hono = engine.getHono();
-    this.serviceName = engine.options.name;
+  } else if (context.redirectUrl && context.refresh) {
     imeanServiceEngine.logger.info(
-      `HtmxAdminPlugin initialized${this.serviceName ? ` (service: ${this.serviceName})` : ""}`
+      `[ResponseRenderer] Both redirect URL and refresh are set, using refresh (isDialog: ${context.isDialog})`
+    );
+  } else if (!context.redirectUrl) {
+    imeanServiceEngine.logger.info(
+      `[ResponseRenderer] No redirect URL found (result: ${result === null ? "null" : typeof result}, isHtmxRequest: ${context.isHtmxRequest})`
     );
-    initializeCdnCache().catch((error) => {
-      imeanServiceEngine.logger.error("[HtmxAdminPlugin] CDN \u7F13\u5B58\u521D\u59CB\u5316\u5931\u8D25", error);
-    });
   }
-  /**
-   * 引擎启动后注册路由
-   */
-  onAfterStart(engine) {
-    const routeOptions = {
-      options: this.options,
-      hono: this.hono
+  if (context.isHtmxRequest) {
+    const notificationFragments = buildNotificationFragments(notifications);
+    const titleFragment = /* @__PURE__ */ jsxRuntime.jsx("title", { children: metadata.title });
+    const empty = isEmptyContent(result);
+    if (empty && notifications.length > 0 && !context.redirectUrl) {
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          notificationFragments,
+          titleFragment
+        ] }),
+        200,
+        {
+          "HX-Reswap": "none"
+          // 关键：阻止 HTMX 替换任何内容，即使 body 上有 hx-target
+        }
+      );
+    }
+    const target = context.isDialog ? "#dialog-container" : "#main-content";
+    const swap = context.isDialog ? "innerHTML" : "outerHTML";
+    const headers = {
+      "HX-Retarget": target,
+      "HX-Reswap": swap
     };
-    registerCdnCacheRoutes(routeOptions);
-    for (const [modelName, page] of this.pages) {
-      registerPageRoutes(page, routeOptions);
+    if (!context.isDialog) {
+      const hasError = notifications.some((n) => n.type === "error");
+      if (hasError) {
+        const referer = ctx.req.header("Referer");
+        if (referer) {
+          try {
+            const refererUrl = new URL(referer);
+            headers["HX-Push-Url"] = refererUrl.pathname + refererUrl.search;
+          } catch {
+            headers["HX-Push-Url"] = "false";
+          }
+        } else {
+          headers["HX-Push-Url"] = "false";
+        }
+      } else {
+        const url = new URL(ctx.req.url);
+        headers["HX-Push-Url"] = url.pathname + url.search;
+      }
+    }
+    const actions = await getActions(renderOptions.feature, context);
+    if (context.isDialog) {
+      const dialogSize = renderOptions.feature?.dialogSize || "lg";
+      const closeOnBackdropClick = renderOptions.feature?.closeOnBackdropClick ?? true;
+      const isFormFeature = renderOptions.feature?.type === "create" || renderOptions.feature?.type === "edit";
+      const fixedContentHeight = isFormFeature;
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Dialog,
+            {
+              title: dynamicMetadata.title,
+              size: dialogSize,
+              closeOnBackdropClick,
+              actions,
+              fixedContentHeight,
+              children: result
+            }
+          ),
+          notificationFragments,
+          titleFragment
+        ] }),
+        200,
+        headers
+      );
+    } else {
+      const useAdminLayout = metadata.useAdminLayout !== false;
+      if (useAdminLayout) {
+        return ctx.html(
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AdminLayout,
+              {
+                title: dynamicMetadata.title,
+                description: dynamicMetadata.description,
+                options,
+                useAdminLayout,
+                currentPath,
+                userInfo: user,
+                componentRegistry: renderOptions.componentRegistry,
+                breadcrumbs,
+                actions,
+                children: result
+              }
+            ),
+            notificationFragments,
+            titleFragment
+          ] }),
+          200,
+          headers
+        );
+      } else {
+        return ctx.html(
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(NoLayout, { children: result }),
+            notificationFragments,
+            titleFragment
+          ] }),
+          200,
+          headers
+        );
+      }
+    }
+  } else {
+    `${options.prefix}/_cdn`;
+    const useAdminLayout = metadata.useAdminLayout !== false;
+    const actions = await getActions(renderOptions.feature, context);
+    if (useAdminLayout) {
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BaseLayout,
+          {
+            prefix: options.prefix,
+            title: dynamicMetadata.title,
+            description: dynamicMetadata.description,
+            componentRegistry: renderOptions.componentRegistry,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              AdminLayout,
+              {
+                title: dynamicMetadata.title,
+                description: dynamicMetadata.description,
+                options,
+                useAdminLayout,
+                currentPath,
+                userInfo: user,
+                breadcrumbs,
+                actions,
+                componentRegistry: renderOptions.componentRegistry,
+                children: result
+              }
+            )
+          }
+        )
+      );
+    } else {
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BaseLayout,
+          {
+            prefix: options.prefix,
+            title: dynamicMetadata.title,
+            description: dynamicMetadata.description,
+            componentRegistry: renderOptions.componentRegistry,
+            children: /* @__PURE__ */ jsxRuntime.jsx(NoLayout, { children: result })
+          }
+        )
+      );
     }
-    registerHomeRedirect(this.pages, routeOptions);
   }
-};
-function ObjectEditor(props) {
-  const { value, fieldName, objectSchema } = props;
-  if (!objectSchema) {
-    return /* @__PURE__ */ jsxRuntime.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" });
+}
+function buildBreadcrumbs(currentPath, homePath, pageTitle) {
+  const breadcrumbs = [];
+  if (homePath) {
+    if (currentPath === homePath) {
+      breadcrumbs.push({ label: pageTitle, href: void 0 });
+    } else {
+      breadcrumbs.push({ label: "\u9996\u9875", href: homePath });
+      breadcrumbs.push({ label: pageTitle, href: void 0 });
+    }
+  } else {
+    breadcrumbs.push({ label: pageTitle, href: void 0 });
   }
-  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;
+  return breadcrumbs;
+}
+function getCurrentPath(ctx) {
+  const referer = ctx.req.header("Referer");
+  let currentPath = ctx.req.path;
+  if (referer) {
+    try {
+      const refererUrl = new URL(referer);
+      const method = ctx.req.method;
+      if (["POST", "PUT", "DELETE"].includes(method)) {
+        currentPath = refererUrl.pathname;
       }
+    } catch (e) {
     }
-  });
-  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;
+  }
+  return currentPath;
+}
+async function handleRequest(ctx, page, feature, handlerOptions) {
+  try {
+    imeanServiceEngine.logger.info(
+      `[HtmxAdminPlugin] Handling request: ${ctx.req.method} ${ctx.req.path} (feature: ${feature.name}, page: ${page.modelName})`
+    );
+    const user = await getUserInfo(ctx, handlerOptions.options.authProvider);
+    if (feature.permission !== null && handlerOptions.options.authProvider) {
+      const permissionResult = await checkPermission(
+        user,
+        feature.permission,
+        ctx,
+        {
+          authProvider: handlerOptions.options.authProvider,
+          prefix: handlerOptions.options.prefix,
+          title: handlerOptions.options.title
         }
-      });
-      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;
+      );
+      if (!permissionResult.allowed) {
+        return await handlePermissionDenied(ctx, permissionResult, {
+          authProvider: handlerOptions.options.authProvider,
+          prefix: handlerOptions.options.prefix,
+          title: handlerOptions.options.title
+        });
       }
-      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.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.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.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.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.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.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.html`<option value="">请选择</option>` : ""}
-          ${field.options.map(
-        (option) => html.html`
-              <option value="${String(option.value)}">${option.label}</option>
-            `
-      )}
-        </select>
-      `;
-    } else if (field.type === "checkbox") {
-      inputElement = html.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>
-      `;
+    const context = await createFeatureContext(ctx, page, feature, user, {
+      prefix: handlerOptions.options.prefix
+    });
+    const metadata = page.getMetadata();
+    const currentPath = getCurrentPath(ctx);
+    const breadcrumbs = buildBreadcrumbs(
+      currentPath,
+      handlerOptions.options.homePath,
+      metadata.title
+    );
+    if (feature.handle) {
+      const result = await feature.handle(context);
+      if (result !== void 0) {
+        return await renderResult(ctx, context, result, {
+          options: handlerOptions.options,
+          metadata,
+          feature,
+          currentPath,
+          breadcrumbs,
+          user
+        });
+      }
     }
-    return html.html`
-      <div class="space-y-2" data-testid="${fieldName}-field-${field.name}">
-        ${field.type !== "checkbox" ? html.html`
-              <label
-                for="${fieldId}"
-                class="block text-sm font-semibold text-gray-700"
-                data-testid="${fieldName}-label-${field.name}"
-              >
-                ${field.label}
-                ${field.required ? html.html`<span class="text-red-500 ml-1">*</span>` : ""}
-              </label>
-            ` : ""}
-        ${inputElement}
-      </div>
-    `;
-  };
-  return html.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 = [];
+    const isHtmxRequest = ctx.req.header("HX-Request") === "true";
+    if (isHtmxRequest) {
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { id: "error-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ErrorAlert,
+            {
+              type: "error",
+              title: "\u8BF7\u6C42\u5931\u8D25",
+              message: "Feature has no handler or render method"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("title", { children: "\u9519\u8BEF" })
+        ] }),
+        500,
+        {
+          "HX-Reswap": "none"
+          // 关键：不替换任何内容
         }
-      }
-      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();
-          }
+      );
+    }
+    return ctx.json({ error: "Feature has no handler or render method" }, 500);
+  } catch (error) {
+    imeanServiceEngine.logger.error(`[HtmxAdminPlugin] Error handling request:`, error);
+    const isHtmxRequest = ctx.req.header("HX-Request") === "true";
+    if (isHtmxRequest) {
+      const errorMessage = error instanceof Error ? error.message : "Internal server error";
+      return ctx.html(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { id: "error-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorAlert, { type: "error", title: "\u8BF7\u6C42\u5931\u8D25", message: errorMessage }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("title", { children: "\u9519\u8BEF" })
+        ] }),
+        500,
+        {
+          "HX-Reswap": "none"
+          // 关键：不替换任何内容，只显示通知
         }
-      });
-    },
-    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.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>
+    return ctx.json(
+      {
+        error: error instanceof Error ? error.message : "Internal server error"
+      },
+      500
+    );
+  }
+}
 
-        <!-- 空状态提示 -->
-        <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>
-  `;
+// src/internal/route-registrar.ts
+function registerCdnCacheRoutes(options) {
+  const { prefix } = options.options;
+  options.hono.get(`${prefix}/_cdn/:name`, async (ctx) => {
+    const name = ctx.req.param("name");
+    const { getCachedResource: getCachedResource2 } = await Promise.resolve().then(() => (init_cdn_cache(), cdn_cache_exports));
+    const cached = getCachedResource2(name);
+    if (cached) {
+      return ctx.body(cached.content, 200, {
+        "Content-Type": cached.mimeType,
+        "Cache-Control": "public, max-age=31536000, immutable"
+        // 缓存 1 年
+      });
+    }
+    return ctx.text(`Resource "${name}" not cached`, 404);
+  });
+  imeanServiceEngine.logger.info(`[HtmxAdminPlugin] CDN \u7F13\u5B58\u4EE3\u7406\u8DEF\u7531\u5DF2\u6CE8\u518C: ${prefix}/_cdn/:name`);
 }
-function TagsEditor(props) {
-  const {
-    value,
-    fieldName,
-    placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0",
-    allowEmpty = false
-  } = props;
-  const initialItems = value || [];
-  const initialValueJson = JSON.stringify(initialItems);
-  const xDataContent = `{
-    items: ${initialValueJson},
-    draggedIndex: null,
-    draggedOverIndex: null,
-    newTag: '',
-    editingIndex: null,
-    editingValue: '',
-    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 = [];
+function registerPageRoutes(page, options) {
+  const basePath = `${options.options.prefix}${modelNameToPath(page.modelName)}`;
+  const features = page.features.getAll();
+  for (const feature of features) {
+    const routes = feature.getRoutes();
+    for (const route of routes) {
+      const fullPath = `${basePath}${route.path}`;
+      imeanServiceEngine.logger.info(
+        `[HtmxAdminPlugin] Registering route: ${route.method.toUpperCase()} ${fullPath} (feature: ${feature.name}, permission: ${feature.permission || "none"})`
+      );
+      const handler = async (ctx) => {
+        return handleRequest(ctx, page, feature, {
+          options: options.options,
+          plugin: options.plugin
+        });
+      };
+      options.hono[route.method](fullPath, handler);
+      if (route.method === "put" || route.method === "delete") {
+        const postHandler = async (ctx) => {
+          const methodOverride = ctx.req.header("X-HTTP-Method-Override");
+          const expectedMethod = route.method.toUpperCase();
+          if (methodOverride === expectedMethod) {
+            imeanServiceEngine.logger.info(
+              `[HtmxAdminPlugin] Method override detected: POST ${fullPath} -> ${expectedMethod} (feature: ${feature.name})`
+            );
+            return handleRequest(ctx, page, feature, {
+              options: options.options,
+              plugin: options.plugin
+            });
           }
-        } 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);
-      }
-    },
-    addTag() {
-      const trimmed = this.newTag.trim();
-      if (trimmed && !this.items.includes(trimmed)) {
-        this.items.push(trimmed);
-        this.newTag = '';
-        this.updateHiddenField();
-      }
-    },
-    handleKeyDown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        this.addTag();
-      }
-    },
-    removeTag(index) {
-      this.items.splice(index, 1);
-      this.updateHiddenField();
-    },
-    startEdit(index) {
-      this.editingIndex = index;
-      this.editingValue = this.items[index];
-      this.$nextTick(() => {
-        const input = this.$el.querySelector('input[data-testid="${fieldName}-tag-edit-input-' + index + '"]');
-        if (input && input.focus) {
-          input.focus();
-          input.select();
-        }
-      });
-    },
-    saveEdit(index) {
-      const trimmed = this.editingValue.trim();
-      if (trimmed) {
-        // \u68C0\u67E5\u662F\u5426\u4E0E\u5176\u4ED6\u6807\u7B7E\u91CD\u590D\uFF08\u6392\u9664\u5F53\u524D\u7F16\u8F91\u7684\u6807\u7B7E\uFF09
-        const isDuplicate = this.items.some((item, i) => i !== index && item === trimmed);
-        if (!isDuplicate) {
-          this.items[index] = trimmed;
-          this.updateHiddenField();
-        }
-      }
-      this.cancelEdit();
-    },
-    cancelEdit() {
-      this.editingIndex = null;
-      this.editingValue = '';
-    },
-    handleEditKeyDown(index, event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        this.saveEdit(index);
-      } else if (event.key === 'Escape') {
-        event.preventDefault();
-        this.cancelEdit();
-      }
-    },
-    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();
+          imeanServiceEngine.logger.warn(
+            `[HtmxAdminPlugin] POST request to ${fullPath} without matching X-HTTP-Method-Override header (got: ${methodOverride || "none"}, expected: ${expectedMethod})`
+          );
+          return ctx.text("Method Not Allowed", 405);
+        };
+        imeanServiceEngine.logger.info(
+          `[HtmxAdminPlugin] Registering POST route for method override: POST ${fullPath} (actual method: ${route.method.toUpperCase()}, feature: ${feature.name})`
+        );
+        options.hono.post(fullPath, postHandler);
       }
-      this.draggedIndex = null;
-      this.draggedOverIndex = null;
     }
-  }`;
-  return html.html`
-    <div
-      x-data="${xDataContent}"
-      data-initial-value="${initialValueJson}"
-      x-init="init()"
-      class="space-y-2"
-    >
-      <input
-        type="hidden"
-        name="${fieldName}"
-        x-bind:value="JSON.stringify(items)"
-        data-testid="hidden-${fieldName}"
-      />
-      
-      <!-- 输入框：用于添加新标签 -->
-      <div class="flex items-center gap-2">
-        <input
-          type="text"
-          x-model="newTag"
-          x-on:keydown="handleKeyDown($event)"
-          x-bind:placeholder="placeholder"
-          class="flex-1 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"
-        />
-        <button
-          type="button"
-          x-on:click="addTag()"
-          class="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-1"
-          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="flex flex-wrap gap-2"
-        x-show="items.length > 0"
-        data-testid="${fieldName}-tags-container"
-      >
-        <template x-for="(item, index) in items" x-bind:key="index">
-          <div
-            class="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 border border-blue-200 rounded-md text-sm group"
-            x-bind:class="{
-              'opacity-50': draggedIndex === index,
-              'ring-2 ring-blue-400': 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 + '-tag-' + index"
-          >
-            <!-- 拖拽手柄 -->
-            <div
-              class="flex-shrink-0 cursor-move text-blue-400 hover:text-blue-600 transition-colors"
-              x-bind:data-testid="fieldName + '-drag-handle-' + index"
-              title="拖拽排序"
-            >
-              <svg
-                class="w-3 h-3"
-                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>
-
-            <!-- 标签内容：显示模式 -->
-            <span
-              x-show="editingIndex !== index"
-              class="flex-1 text-blue-900 cursor-pointer"
-              x-on:click="startEdit(index)"
-              x-text="item"
-              x-bind:data-testid="fieldName + '-tag-text-' + index"
-            ></span>
-            <!-- 标签内容：编辑模式 -->
-            <input
-              x-show="editingIndex === index"
-              type="text"
-              x-model="editingValue"
-              x-on:keydown="handleEditKeyDown(index, $event)"
-              x-on:blur="saveEdit(index)"
-              class="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]"
-              x-bind:data-testid="fieldName + '-tag-edit-input-' + index"
-            />
-
-            <!-- 删除按钮 -->
-            <button
-              type="button"
-              x-on:click="removeTag(index)"
-              class="flex-shrink-0 text-blue-600 hover:text-red-600 hover:bg-red-50 rounded transition-colors p-0.5"
-              x-bind:data-testid="fieldName + '-tag-remove-' + index"
-              title="删除标签"
-            >
-              <svg
-                class="w-3.5 h-3.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-        </template>
-      </div>
-
-      <!-- 空状态提示 -->
-      <div
-        x-show="items.length === 0"
-        class="text-center py-4 text-gray-400 text-sm border border-dashed border-gray-300 rounded-md"
-        data-testid="${fieldName}-empty-state"
-      >
-        暂无标签，在上方输入框中输入标签后按回车或点击"添加"按钮
-      </div>
-    </div>
-  `;
+  }
+}
+function registerHomeRedirect(pages, options) {
+  const { prefix, homePath } = options.options;
+  if (homePath) {
+    options.hono.get(prefix, async (ctx) => {
+      return ctx.redirect(homePath);
+    });
+  } else if (pages.size > 0) {
+    const firstPage = Array.from(pages.values())[0];
+    const firstPath = `${prefix}${modelNameToPath(firstPage.modelName)}`;
+    options.hono.get(prefix, async (ctx) => {
+      return ctx.redirect(firstPath);
+    });
+  }
 }
 
+// src/plugin.tsx
+init_cdn_cache();
+var HtmxAdminPlugin = class {
+  name = "htmx-admin-plugin";
+  priority = imeanServiceEngine.PluginPriority.ROUTE;
+  engine;
+  hono;
+  options;
+  serviceName = "";
+  pages = /* @__PURE__ */ new Map();
+  componentHandler;
+  constructor(options) {
+    this.options = {
+      title: options?.title || "\u7BA1\u7406\u540E\u53F0",
+      logo: options?.logo || "",
+      prefix: options?.prefix || "/admin",
+      homePath: options?.homePath || "",
+      navigation: options?.navigation ?? [],
+      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)) {
+      throw new Error(
+        `Page with name "${page.modelName}" is already registered`
+      );
+    }
+    this.pages.set(page.modelName, page);
+    imeanServiceEngine.logger.info(`[HtmxAdminPlugin] Registered page: ${page.modelName}`);
+    return this;
+  }
+  /**
+   * 引擎初始化钩子
+   */
+  onInit(engine) {
+    this.engine = engine;
+    this.hono = engine.getHono();
+    this.serviceName = engine.options.name;
+    imeanServiceEngine.logger.info(
+      `HtmxAdminPlugin initialized${this.serviceName ? ` (service: ${this.serviceName})` : ""}`
+    );
+    this.componentHandler = new HtmxComponentHandler(
+      this.hono,
+      this.options.prefix,
+      this.options.components
+    );
+    initializeCdnCache().catch((error) => {
+      imeanServiceEngine.logger.error("[HtmxAdminPlugin] CDN \u7F13\u5B58\u521D\u59CB\u5316\u5931\u8D25", error);
+    });
+  }
+  /**
+   * 引擎启动后注册路由
+   */
+  onAfterStart(engine) {
+    const routeOptions = {
+      options: this.options,
+      hono: this.hono,
+      plugin: this
+    };
+    registerCdnCacheRoutes(routeOptions);
+    for (const [_modelName, page] of this.pages) {
+      registerPageRoutes(page, routeOptions);
+    }
+    registerHomeRedirect(this.pages, routeOptions);
+  }
+};
+
 exports.BaseFeature = BaseFeature;
+exports.ComponentContext = ComponentContext;
 exports.CustomFeature = CustomFeature;
 exports.DefaultCreateFeature = DefaultCreateFeature;
 exports.DefaultDeleteFeature = DefaultDeleteFeature;
@@ -4828,9 +5634,13 @@ exports.DefaultListFeature = DefaultListFeature;
 exports.Dialog = Dialog;
 exports.ErrorAlert = ErrorAlert;
 exports.HtmxAdminPlugin = HtmxAdminPlugin;
+exports.HtmxComponent = HtmxComponent;
 exports.LoadingBar = LoadingBar;
+exports.Method = Method;
 exports.ObjectEditor = ObjectEditor;
 exports.PageModel = PageModel;
+exports.RenderContext = RenderContext;
+exports.SortableList = SortableList;
 exports.StringArrayEditor = StringArrayEditor;
 exports.TagsEditor = TagsEditor;
 exports.checkUserPermission = checkUserPermission;