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

package/dist/index.mjs

@@ -3,6 +3,7 @@ import { promises } from 'fs';
 import { join } from 'path';
 import { jsx, jsxs, Fragment } from 'hono/jsx/jsx-runtime';
 import { getCookie } from 'hono/cookie';
+import { html } from 'hono/html';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1757,18 +1758,21 @@ function Button(props) {
     disabled ? "opacity-50 cursor-not-allowed" : "",
     className
   ].filter(Boolean).join(" ");
+  const isNewWindow = rest.target === "_blank";
   const htmxAttrs = {};
-  if (hxGet) htmxAttrs["hx-get"] = hxGet;
-  if (hxPost) htmxAttrs["hx-post"] = hxPost;
-  if (hxPut) htmxAttrs["hx-put"] = hxPut;
-  if (hxDelete) htmxAttrs["hx-delete"] = hxDelete;
-  if (hxTarget) htmxAttrs["hx-target"] = hxTarget;
-  if (hxSwap) htmxAttrs["hx-swap"] = hxSwap;
-  if (hxPushUrl !== void 0)
-    htmxAttrs["hx-push-url"] = hxPushUrl === true ? "true" : hxPushUrl;
-  if (hxIndicator) htmxAttrs["hx-indicator"] = hxIndicator;
-  if (hxConfirm) htmxAttrs["hx-confirm"] = hxConfirm;
-  if (hxHeaders) htmxAttrs["hx-headers"] = hxHeaders;
+  if (!isNewWindow) {
+    if (hxGet) htmxAttrs["hx-get"] = hxGet;
+    if (hxPost) htmxAttrs["hx-post"] = hxPost;
+    if (hxPut) htmxAttrs["hx-put"] = hxPut;
+    if (hxDelete) htmxAttrs["hx-delete"] = hxDelete;
+    if (hxTarget) htmxAttrs["hx-target"] = hxTarget;
+    if (hxSwap) htmxAttrs["hx-swap"] = hxSwap;
+    if (hxPushUrl !== void 0)
+      htmxAttrs["hx-push-url"] = hxPushUrl === true ? "true" : hxPushUrl;
+    if (hxIndicator) htmxAttrs["hx-indicator"] = hxIndicator;
+    if (hxConfirm) htmxAttrs["hx-confirm"] = hxConfirm;
+    if (hxHeaders) htmxAttrs["hx-headers"] = hxHeaders;
+  }
   const href = rest.href ?? hxGet ?? "#";
   const { className: _, ...otherRest } = rest;
   return /* @__PURE__ */ jsx(
@@ -1966,20 +1970,24 @@ function ActionLink(props) {
   const { action, item } = props;
   const hrefValue = action.href(item);
   const isDelete = action.method === "delete";
+  const isNewWindow = action.target === "_blank";
   const className = `${STYLES.actionLink.base} ${isDelete ? STYLES.actionLink.delete : STYLES.actionLink.default}`;
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      href: hrefValue,
-      className,
-      "hx-get": !isDelete ? hrefValue : void 0,
-      "hx-delete": isDelete ? hrefValue : void 0,
-      "hx-confirm": isDelete ? "\u786E\u5B9A\u5220\u9664\u5417\uFF1F" : void 0,
-      "data-testid": `table-action-${action.label}`,
-      "aria-label": `${action.label}\uFF1A${item.id || item}`,
-      children: action.label
-    }
-  );
+  const linkProps = {
+    href: hrefValue,
+    className,
+    "data-testid": `table-action-${action.label}`,
+    "aria-label": `${action.label}\uFF1A${item.id || item}`
+  };
+  if (isNewWindow) {
+    linkProps.target = "_blank";
+    linkProps.rel = "noopener noreferrer";
+  } else if (isDelete) {
+    linkProps["hx-delete"] = hrefValue;
+    linkProps["hx-confirm"] = "\u786E\u5B9A\u5220\u9664\u5417\uFF1F";
+  } else {
+    linkProps["hx-get"] = hrefValue;
+  }
+  return /* @__PURE__ */ jsx("a", { ...linkProps, children: action.label });
 }
 function ActionCell(props) {
   const { actions, item, actionStyle } = props;
@@ -2000,15 +2008,18 @@ function ActionCell(props) {
       ) : /* @__PURE__ */ jsx("div", { className: STYLES.actionButton, "data-testid": "table-actions", children: actions.map((action, idx) => {
         const hrefValue = action.href(item);
         const isDelete = action.method === "delete";
+        const isNewWindow = action.target === "_blank";
         return /* @__PURE__ */ jsx(
           Button,
           {
             variant: isDelete ? "danger" : "secondary",
             size: "sm",
             href: hrefValue,
-            "hx-get": !isDelete ? hrefValue : void 0,
+            "hx-get": !isDelete && !isNewWindow ? hrefValue : void 0,
             "hx-delete": isDelete ? hrefValue : void 0,
             "hx-confirm": isDelete ? "\u786E\u5B9A\u5220\u9664\u5417\uFF1F" : void 0,
+            target: isNewWindow ? "_blank" : void 0,
+            rel: isNewWindow ? "noopener noreferrer" : void 0,
             className: action.class,
             "data-testid": `table-action-${action.label}`,
             "aria-label": `${action.label}\uFF1A${item.id || item}`,
@@ -2105,19 +2116,24 @@ function ListPage(props) {
     editPath,
     deletePath,
     listPath,
-    filterFields
+    filterFields,
+    openMode
   } = props;
   const actions = [];
   if (detailPath) {
+    const mode = openMode?.detail || "dialog";
     actions.push({
       label: "\u67E5\u770B",
-      href: detailPath
+      href: detailPath,
+      target: mode === "newWindow" ? "_blank" : void 0
     });
   }
   if (editPath) {
+    const mode = openMode?.edit || "dialog";
     actions.push({
       label: "\u7F16\u8F91",
-      href: editPath
+      href: editPath,
+      target: mode === "newWindow" ? "_blank" : void 0
     });
   }
   if (deletePath) {
@@ -2162,7 +2178,8 @@ function ListPage(props) {
         actions: actions.length > 0 ? actions.map((action) => ({
           label: action.label,
           href: (item) => action.href(item),
-          method: action.method
+          method: action.method,
+          target: action.target
         })) : void 0,
         pagination: {
           page: result.page,
@@ -2203,6 +2220,7 @@ var DefaultListFeature = class extends BaseFeature {
   listFieldNames;
   filterSchema;
   columnRenderers;
+  openMode;
   constructor(options) {
     super({
       name: "list",
@@ -2218,6 +2236,7 @@ var DefaultListFeature = class extends BaseFeature {
     this.listFieldNames = options.listFieldNames;
     this.filterSchema = options.filterSchema;
     this.columnRenderers = options.columnRenderers;
+    this.openMode = options.openMode;
   }
   getRoutes() {
     return [{ method: "get", path: "/list" }];
@@ -2238,9 +2257,12 @@ var DefaultListFeature = class extends BaseFeature {
     const prefix = context.prefix || "";
     const basePath = `${prefix}/${model.modelName}`;
     const listPath = `${basePath}/list`;
-    const createPath = model.features.get("create") ? `${basePath}/new?dialog=true` : void 0;
-    const detailPath = model.features.get("detail") ? (item) => `${basePath}/detail/${item.id}?dialog=true` : void 0;
-    const editPath = model.features.get("edit") ? (item) => `${basePath}/edit/${item.id}?dialog=true` : void 0;
+    const createMode = this.openMode?.create || "dialog";
+    const detailMode = this.openMode?.detail || "dialog";
+    const editMode = this.openMode?.edit || "dialog";
+    const createPath = model.features.get("create") ? createMode === "dialog" ? `${basePath}/new?dialog=true` : `${basePath}/new` : void 0;
+    const detailPath = model.features.get("detail") ? (item) => detailMode === "dialog" ? `${basePath}/detail/${item.id}?dialog=true` : `${basePath}/detail/${item.id}` : void 0;
+    const editPath = model.features.get("edit") ? (item) => editMode === "dialog" ? `${basePath}/edit/${item.id}?dialog=true` : `${basePath}/edit/${item.id}` : void 0;
     const deletePath = this.deleteItem && model.features.get("delete") ? (item) => `${basePath}/${item.id}` : void 0;
     return /* @__PURE__ */ jsx(
       ListPage,
@@ -2253,7 +2275,8 @@ var DefaultListFeature = class extends BaseFeature {
         editPath,
         deletePath,
         listPath,
-        filterFields
+        filterFields,
+        openMode: this.openMode
       }
     );
   }
@@ -2264,11 +2287,22 @@ var DefaultListFeature = class extends BaseFeature {
     const hasCreate = model.features.get("create") !== void 0;
     const actions = [];
     if (hasCreate) {
-      actions.push({
-        label: "\u65B0\u5EFA",
-        hxGet: `${basePath}/new?dialog=true`,
-        variant: "primary"
-      });
+      const createMode = this.openMode?.create || "dialog";
+      const createUrl = createMode === "dialog" ? `${basePath}/new?dialog=true` : `${basePath}/new`;
+      if (createMode === "newWindow") {
+        actions.push({
+          label: "\u65B0\u5EFA",
+          href: createUrl,
+          variant: "primary",
+          target: "_blank"
+        });
+      } else {
+        actions.push({
+          label: "\u65B0\u5EFA",
+          hxGet: createUrl,
+          variant: "primary"
+        });
+      }
     }
     return actions;
   }
@@ -3124,7 +3158,8 @@ function renderActionButton2(action, index) {
     submit,
     formId,
     onClick,
-    className = ""
+    className = "",
+    target
   } = action;
   if (submit && formId) {
     const variantStyles = {
@@ -3176,18 +3211,21 @@ function renderActionButton2(action, index) {
   } else if (label === "\u53D6\u6D88") {
     testId = "cancel-button";
   }
+  const isNewWindow = target === "_blank";
   return /* @__PURE__ */ jsx(
     Button,
     {
       variant,
       href,
-      hxGet,
-      hxPost,
-      hxPut,
-      hxDelete,
-      hxConfirm: confirm,
+      hxGet: !isNewWindow ? hxGet : void 0,
+      hxPost: !isNewWindow ? hxPost : void 0,
+      hxPut: !isNewWindow ? hxPut : void 0,
+      hxDelete: !isNewWindow ? hxDelete : void 0,
+      hxConfirm: !isNewWindow ? confirm : void 0,
       className,
       "data-testid": testId,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0,
       children: label
     },
     index
@@ -3979,80 +4017,433 @@ var HtmxAdminPlugin = class {
     registerHomeRedirect(this.pages, routeOptions);
   }
 };
-function createFormFieldXData(options) {
-  const {
-    fieldName,
-    dataKey,
-    defaultValue = [],
-    customData = {},
-    customMethods = {}
-  } = options;
-  const dataEntries = [];
-  dataEntries.push(`${dataKey}: ${JSON.stringify(defaultValue)}`);
-  for (const [key, value] of Object.entries(customData)) {
-    dataEntries.push(`${key}: ${JSON.stringify(value)}`);
-  }
-  const methodEntries = [];
-  methodEntries.push(`init() {
-    const dataAttr = this.$el.getAttribute('data-initial-value');
-    if (dataAttr) {
-      try {
-        this.${dataKey} = JSON.parse(dataAttr);
-      } catch (e) {
-        console.error('Failed to parse initial value:', e);
-        this.${dataKey} = ${JSON.stringify(defaultValue)};
+function ObjectEditor(props) {
+  const { value, fieldName, objectSchema } = props;
+  if (!objectSchema) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4 border border-yellow-300 rounded-lg bg-yellow-50 text-yellow-800 text-sm", children: "\u8BF7\u63D0\u4F9B objectSchema \u53C2\u6570\u4EE5\u4F7F\u7528\u5BF9\u8C61\u7F16\u8F91\u5668" });
+  }
+  const fields = parseSchemaToFields(objectSchema);
+  const initialObject = value && typeof value === "object" && !Array.isArray(value) ? { ...value } : {};
+  fields.forEach((field) => {
+    if (!(field.name in initialObject)) {
+      if (field.type === "number") {
+        initialObject[field.name] = field.required ? 0 : void 0;
+      } else if (field.type === "checkbox") {
+        initialObject[field.name] = field.required ? false : void 0;
+      } else {
+        initialObject[field.name] = field.required ? "" : void 0;
+      }
+    }
+  });
+  const fieldNames = fields.map((f) => f.name);
+  const fieldNamesJson = JSON.stringify(fieldNames);
+  const initialValueJson = JSON.stringify(initialObject);
+  const xDataContent = `{
+    obj: {},
+    init() {
+      const dataAttr = this.$el.getAttribute('data-initial-value');
+      if (dataAttr) {
+        try {
+          this.obj = JSON.parse(dataAttr);
+        } catch (e) {
+          console.error('Failed to parse initial value:', e);
+          this.obj = {};
+        }
+      }
+      const fieldNames = ${fieldNamesJson};
+      fieldNames.forEach(fieldName => {
+        if (!(fieldName in this.obj)) {
+          this.obj[fieldName] = undefined;
+        }
+      });
+      this.updateHiddenField();
+    },
+    updateHiddenField() {
+      const hiddenInput = this.$el.querySelector('input[name="${fieldName}"][type="hidden"]');
+      if (hiddenInput) {
+        hiddenInput.value = JSON.stringify(this.obj);
       }
+    },
+    updateField(fieldName, value, fieldType, required) {
+      let convertedValue = value;
+      if (fieldType === 'number') {
+        convertedValue = value === '' ? (required ? 0 : undefined) : Number(value);
+        if (isNaN(convertedValue)) convertedValue = required ? 0 : undefined;
+      } else if (fieldType === 'checkbox') {
+        convertedValue = value === 'true' || value === true || value === '1' || value === 1;
+      } else {
+        convertedValue = value || (required ? '' : undefined);
+      }
+      if (convertedValue === undefined && !required) {
+        delete this.obj[fieldName];
+      } else {
+        this.obj[fieldName] = convertedValue;
+      }
+      this.updateHiddenField();
     }
-    this.updateHiddenField();
-  }`);
-  methodEntries.push(`updateHiddenField() {
-    const hiddenInput = this.$el.querySelector('input[name="${fieldName}"][type="hidden"]');
-    if (hiddenInput) {
-      hiddenInput.value = JSON.stringify(this.${dataKey});
+  }`;
+  const generateField = (field) => {
+    const fieldId = `${fieldName}-${field.name}`;
+    const fieldNameVar = `obj.${field.name}`;
+    const requiredValue = field.required ? "true" : "false";
+    const fieldNameForJs = JSON.stringify(field.name);
+    let inputElement;
+    if (field.type === "text") {
+      inputElement = html`
+        <input
+          type="text"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "textarea") {
+      inputElement = html`
+        <textarea
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          rows="4"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        ></textarea>
+      `;
+    } else if (field.type === "number") {
+      const step = field.step || (field.step === void 0 ? "1" : "any");
+      inputElement = html`
+        <input
+          type="number"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} != null ? ${fieldNameVar} : ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'number', ${requiredValue})"
+          step="${step}"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "date") {
+      inputElement = html`
+        <input
+          type="date"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'date', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "email") {
+      inputElement = html`
+        <input
+          type="email"
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:input="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          data-testid="${fieldName}-input-${field.name}"
+          ${field.required ? "required" : ""}
+        />
+      `;
+    } else if (field.type === "select" && field.options) {
+      inputElement = html`
+        <select
+          id="${fieldId}"
+          x-bind:value="${fieldNameVar} || ''"
+          x-on:change="updateField(${fieldNameForJs}, $event.target.value, 'text', ${requiredValue})"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
+          data-testid="${fieldName}-select-${field.name}"
+          ${field.required ? "required" : ""}
+        >
+          ${!field.required ? html`<option value="">请选择</option>` : ""}
+          ${field.options.map(
+        (option) => html`
+              <option value="${String(option.value)}">${option.label}</option>
+            `
+      )}
+        </select>
+      `;
+    } else if (field.type === "checkbox") {
+      inputElement = html`
+        <div class="flex items-center">
+          <input
+            type="checkbox"
+            id="${fieldId}"
+            x-bind:checked="${fieldNameVar} === true || ${fieldNameVar} === 'true' || ${fieldNameVar} === 1 || ${fieldNameVar} === '1'"
+            x-on:change="updateField(${fieldNameForJs}, $event.target.checked, 'checkbox', ${requiredValue})"
+            class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+            data-testid="${fieldName}-checkbox-${field.name}"
+          />
+          <label for="${fieldId}" class="ml-2 text-sm text-gray-700">
+            ${field.label}
+          </label>
+        </div>
+      `;
     }
-  }`);
-  for (const [methodName, methodBody] of Object.entries(customMethods)) {
-    methodEntries.push(`${methodName}${methodBody}`);
-  }
-  const dataStr = dataEntries.join(",\n    ");
-  const methodsStr = methodEntries.join(",\n  ");
-  return `{
-    ${dataStr},
-  ${methodsStr}
-}`;
+    return html`
+      <div class="space-y-2" data-testid="${fieldName}-field-${field.name}">
+        ${field.type !== "checkbox" ? html`
+              <label
+                for="${fieldId}"
+                class="block text-sm font-semibold text-gray-700"
+                data-testid="${fieldName}-label-${field.name}"
+              >
+                ${field.label}
+                ${field.required ? html`<span class="text-red-500 ml-1">*</span>` : ""}
+              </label>
+            ` : ""}
+        ${inputElement}
+      </div>
+    `;
+  };
+  return html`
+    <div
+      x-data="${xDataContent}"
+      data-initial-value="${initialValueJson}"
+      x-init="init()"
+      class="space-y-4"
+    >
+      <input
+        type="hidden"
+        name="${fieldName}"
+        value=""
+        data-testid="hidden-${fieldName}"
+      />
+      <div class="space-y-4">
+        ${fields.map((field) => generateField(field))}
+      </div>
+    </div>
+  `;
 }
-function FormFieldWrapper(props) {
+function StringArrayEditor(props) {
   const {
+    value,
     fieldName,
-    initialValue,
-    xData,
-    autoSync = false,
-    children,
-    className = "space-y-4"
+    placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
+    allowEmpty = false
   } = props;
-  const initialValueJson = JSON.stringify(initialValue);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "x-data": xData,
-      "data-initial-value": initialValueJson,
-      "x-init": "init()",
-      ...autoSync ? { "x-effect": "updateHiddenField()" } : {},
-      className,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "hidden",
-            name: fieldName,
-            value: "",
-            "data-testid": `hidden-${fieldName}`
+  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 = [];
           }
-        ),
-        children
-      ]
+        } catch (e) {
+          console.error('Failed to parse initial value:', e);
+          this.items = [];
+        }
+      }
+      this.updateHiddenField();
+    },
+    updateHiddenField() {
+      const hiddenInput = this.$el.querySelector('input[name="${fieldName}"][type="hidden"]');
+      if (hiddenInput) {
+        hiddenInput.value = JSON.stringify(this.items);
+      }
+    },
+    addItem() {
+      this.items.push('');
+      this.updateHiddenField();
+      this.$nextTick(() => {
+        const keyInputs = this.$el.querySelectorAll('input[data-testid*="-input-"]');
+        if (keyInputs.length > 0) {
+          const lastInput = keyInputs[keyInputs.length - 1];
+          if (lastInput && lastInput.focus) {
+            lastInput.focus();
+          }
+        }
+      });
+    },
+    removeItem(index) {
+      this.items.splice(index, 1);
+      this.updateHiddenField();
+    },
+    updateItem(index, value) {
+      this.items[index] = value;
+      this.updateHiddenField();
+    },
+    handleDragStart(index, event) {
+      this.draggedIndex = index;
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', index.toString());
+      const target = event.currentTarget || event.target.closest('[draggable="true"]');
+      if (target) {
+        target.style.opacity = '0.5';
+      }
+    },
+    handleDragEnd(event) {
+      const target = event.currentTarget || event.target.closest('[draggable="true"]');
+      if (target) {
+        target.style.opacity = '';
+      }
+      this.draggedIndex = null;
+      this.draggedOverIndex = null;
+    },
+    handleDragOver(index, event) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+      this.draggedOverIndex = index;
+    },
+    handleDragLeave() {
+      this.draggedOverIndex = null;
+    },
+    handleDrop(index, event) {
+      event.preventDefault();
+      if (this.draggedIndex !== null && this.draggedIndex !== index) {
+        const draggedItem = this.items[this.draggedIndex];
+        this.items.splice(this.draggedIndex, 1);
+        this.items.splice(index, 0, draggedItem);
+        this.updateHiddenField();
+      }
+      this.draggedIndex = null;
+      this.draggedOverIndex = null;
     }
-  );
+  }`;
+  return html`
+    <div
+      x-data="${xDataContent}"
+      data-initial-value="${initialValueJson}"
+      x-init="init()"
+      class="space-y-3"
+    >
+      <input
+        type="hidden"
+        name="${fieldName}"
+        value=""
+        data-testid="hidden-${fieldName}"
+      />
+      <div class="space-y-3">
+        <!-- 头部：显示数量和添加按钮 -->
+        <div class="flex items-center justify-between">
+          <span class="text-sm text-gray-600">
+            共 <span x-text="items.length">0</span> 项
+          </span>
+          <button
+            type="button"
+            x-on:click="addItem()"
+            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
+            data-testid="${fieldName}-add-button"
+          >
+            <svg
+              class="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 4v16m8-8H4"
+              />
+            </svg>
+            添加项
+          </button>
+        </div>
+
+        <!-- 列表项 -->
+        <div class="space-y-2" x-show="items.length > 0">
+          <template x-for="(item, index) in items" x-bind:key="index">
+            <div
+              class="flex items-center gap-2 group"
+              x-bind:class="{
+                'opacity-50': draggedIndex === index,
+                'border-blue-300 bg-blue-50': draggedOverIndex === index && draggedIndex !== null && draggedIndex !== index
+              }"
+              draggable="true"
+              x-on:dragstart="handleDragStart(index, $event)"
+              x-on:dragend="handleDragEnd($event)"
+              x-on:dragover="handleDragOver(index, $event)"
+              x-on:dragleave="handleDragLeave()"
+              x-on:drop="handleDrop(index, $event)"
+              x-bind:data-testid="fieldName + '-item-' + index"
+            >
+              <!-- 拖拽手柄 -->
+              <div
+                class="flex-shrink-0 cursor-move text-gray-400 hover:text-gray-600 transition-colors p-1"
+                x-bind:data-testid="fieldName + '-drag-handle-' + index"
+                title="拖拽排序"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 8h16M4 16h16"
+                  />
+                </svg>
+              </div>
+
+              <!-- 输入框 -->
+              <input
+                type="text"
+                x-bind:value="items[index] || ''"
+                x-on:input="updateItem(index, $event.target.value)"
+                x-bind:placeholder="placeholder + ' ' + (index + 1)"
+                class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                x-bind:data-testid="fieldName + '-input-' + index"
+                x-bind:required="!allowEmpty"
+              />
+
+              <!-- 删除按钮 -->
+              <button
+                type="button"
+                x-on:click="removeItem(index)"
+                class="flex-shrink-0 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                x-bind:data-testid="fieldName + '-remove-button-' + index"
+                title="删除此项"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  />
+                </svg>
+              </button>
+            </div>
+          </template>
+        </div>
+
+        <!-- 空状态提示 -->
+        <div
+          x-show="items.length === 0"
+          class="text-center py-8 text-gray-400 text-sm border border-dashed border-gray-300 rounded-lg"
+        >
+          暂无项，点击"添加项"按钮添加
+        </div>
+      </div>
+    </div>
+  `;
 }
 
-export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, FormFieldWrapper, HtmxAdminPlugin, LoadingBar, PageModel, checkUserPermission, createFormFieldXData, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, StringArrayEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };