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

package/dist/index.mjs

@@ -340,203 +340,295 @@ function renderFormField(field, initialData, formFieldRenderers) {
     } else if (value) {
       parsedValue = value;
     }
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `field-${field.name}`, children: [
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          htmlFor: field.name,
-          className: "block text-sm font-semibold text-gray-700",
-          "data-testid": `label-${field.name}`,
-          children: [
-            field.label,
-            field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { children: customRenderer({
-        field,
-        value: parsedValue,
-        initialData,
-        fieldName: field.name
-      }) }),
-      field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
-    ] }, field.name);
-  }
-  const shouldUseTextarea = field.type === "textarea" || value && isJsonString(value) && field.type !== "select";
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `field-${field.name}`, children: [
-    /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: field.name,
-        className: "block text-sm font-semibold text-gray-700",
-        "data-testid": `label-${field.name}`,
-        children: [
-          field.label,
-          field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-        ]
-      }
-    ),
-    shouldUseTextarea ? /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        id: field.name,
-        name: field.name,
-        required: field.required,
-        placeholder: field.placeholder || (isJsonString(value) ? "JSON \u683C\u5F0F\u6570\u636E" : ""),
-        rows: isJsonString(value) ? 10 : 4,
-        className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-y font-mono text-sm",
-        "data-testid": `input-${field.name}`,
-        children: isJsonString(value) ? formatJsonString(value) : value
-      },
-      `${field.name}-${value}`
-    ) : field.type === "select" ? /* @__PURE__ */ jsxs(
-      "select",
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        id: field.name,
-        name: field.name,
-        required: field.required,
-        className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
-        "data-testid": `select-${field.name}`,
+        className: "space-y-2",
+        "data-testid": `field-${field.name}`,
         children: [
-          !field.required && /* @__PURE__ */ jsx("option", { value: "", selected: !value || value === "", children: "\u8BF7\u9009\u62E9" }),
-          field.options && field.options.length > 0 ? field.options.map((option) => {
-            const optionValue = String(option.value);
-            const isSelected = value === optionValue;
-            return /* @__PURE__ */ jsx(
-              "option",
-              {
-                value: optionValue,
-                selected: isSelected,
-                children: option.label
-              },
-              optionValue
-            );
-          }) : /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u6682\u65E0\u9009\u9879" })
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: field.name,
+              className: "block text-sm font-semibold text-gray-700",
+              "data-testid": `label-${field.name}`,
+              children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { children: customRenderer({
+            field,
+            value: parsedValue,
+            initialData,
+            fieldName: field.name
+          }) }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
         ]
       },
-      `${field.name}-${value || ""}`
-    ) : /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: field.type || "text",
-        id: field.name,
-        name: field.name,
-        required: field.required,
-        placeholder: field.placeholder,
-        step: field.type === "number" ? field.step ?? void 0 : void 0,
-        className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200",
-        value,
-        "data-testid": `input-${field.name}`
-      },
-      `${field.name}-${value}`
-    ),
-    field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
-  ] }, field.name);
-}
-function FormPage(props) {
-  const { fields, groups, submitUrl, method = "post", initialData, formId, isDialog = false, formFieldRenderers } = props;
-  const finalFormId = formId || `form-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  if (process.env.NODE_ENV === "development" && initialData) {
-    const fieldNames = fields ? fields.map((f) => f.name).join(", ") : groups ? groups.map((g) => g.fields.map((f) => f.name).join(", ")).join(" | ") : "";
-    console.log(
-      `[FormPage] initialData: ${JSON.stringify(initialData)}, fields: ${fieldNames}`
+      field.name
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-testid": "form-container", "x-data": `{ activeTab: 0 }`, children: [
-    /* @__PURE__ */ jsxs(
+  if (field.type === "checkbox") {
+    const isChecked = value === "true" || value === "1" || value === "on" || String(value).toLowerCase() === "true";
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        id: "form-loading-indicator",
-        className: "htmx-indicator fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 z-50",
+        className: "space-y-2",
+        "data-testid": `field-${field.name}`,
         children: [
           /* @__PURE__ */ jsxs(
-            "svg",
+            "label",
             {
-              className: "animate-spin h-4 w-4",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
+              htmlFor: field.name,
+              className: "flex items-center gap-3 cursor-pointer group py-2.5 px-3 rounded-lg hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200",
+              "data-testid": `label-${field.name}`,
               children: [
                 /* @__PURE__ */ jsx(
-                  "circle",
+                  "input",
                   {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
+                    type: "checkbox",
+                    id: field.name,
+                    name: field.name,
+                    value: "true",
+                    checked: isChecked,
+                    required: field.required,
+                    className: "w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer transition-all flex-shrink-0",
+                    "data-testid": `input-${field.name}`
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    className: "opacity-75",
-                    fill: "currentColor",
-                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  }
-                )
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-700 select-none flex-1", children: [
+                  field.label,
+                  field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+                ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "\u63D0\u4EA4\u4E2D..." })
+          field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 ml-8", children: field.description })
         ]
-      }
-    ),
-    groups && groups.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: `sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm ${isDialog ? "px-6" : "-mx-6 px-6 -mt-6"}`, children: /* @__PURE__ */ jsx("nav", { className: "flex -mb-px w-full", "aria-label": "Tabs", "data-testid": "form-tabs", children: groups.map((group, index) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "x-on:click": `activeTab = ${index}`,
-          "x-bind:class": `activeTab === ${index} ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'`,
-          className: "px-6 py-4 text-sm font-medium border-b-2 transition-colors duration-150 whitespace-nowrap flex-1 text-center",
-          "data-testid": `form-tab-${index}`,
-          children: group.label
-        },
-        index
-      )) }) }),
-      /* @__PURE__ */ jsx(
-        "form",
-        {
-          id: finalFormId,
-          method: method === "put" ? "post" : method,
-          action: submitUrl,
-          "hx-boost": "true",
-          ...method === "put" ? { "hx-put": submitUrl } : {},
-          "hx-indicator": "#form-loading-indicator",
-          "data-testid": "form",
-          className: isDialog ? "p-6" : "mt-6",
-          children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6", children: groups.map((group, index) => /* @__PURE__ */ jsx(
+      },
+      field.name
+    );
+  }
+  const shouldUseTextarea = field.type === "textarea" || value && isJsonString(value) && field.type !== "select";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "space-y-2",
+      "data-testid": `field-${field.name}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: field.name,
+            className: "block text-sm font-semibold text-gray-700",
+            "data-testid": `label-${field.name}`,
+            children: [
+              field.label,
+              field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+            ]
+          }
+        ),
+        shouldUseTextarea ? /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: field.name,
+            name: field.name,
+            required: field.required,
+            placeholder: field.placeholder || (isJsonString(value) ? "JSON \u683C\u5F0F\u6570\u636E" : ""),
+            rows: isJsonString(value) ? 10 : 4,
+            className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-y font-mono text-sm",
+            "data-testid": `input-${field.name}`,
+            children: isJsonString(value) ? formatJsonString(value) : value
+          },
+          `${field.name}-${value}`
+        ) : field.type === "select" ? /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: field.name,
+            name: field.name,
+            required: field.required,
+            className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white",
+            "data-testid": `select-${field.name}`,
+            children: [
+              !field.required && /* @__PURE__ */ jsx("option", { value: "", selected: !value || value === "", children: "\u8BF7\u9009\u62E9" }),
+              field.options && field.options.length > 0 ? field.options.map((option) => {
+                const optionValue = String(option.value);
+                const isSelected = value === optionValue;
+                return /* @__PURE__ */ jsx(
+                  "option",
+                  {
+                    value: optionValue,
+                    selected: isSelected,
+                    children: option.label
+                  },
+                  optionValue
+                );
+              }) : /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u6682\u65E0\u9009\u9879" })
+            ]
+          },
+          `${field.name}-${value || ""}`
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: field.type || "text",
+            id: field.name,
+            name: field.name,
+            required: field.required,
+            placeholder: field.placeholder,
+            step: field.type === "number" ? field.step ?? void 0 : void 0,
+            className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200",
+            value,
+            "data-testid": `input-${field.name}`
+          },
+          `${field.name}-${value}`
+        ),
+        field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
+      ]
+    },
+    field.name
+  );
+}
+function FormPage(props) {
+  const {
+    fields,
+    groups,
+    submitUrl,
+    method = "post",
+    initialData,
+    formId,
+    isDialog = false,
+    formFieldRenderers
+  } = props;
+  const finalFormId = formId || `form-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  if (process.env.NODE_ENV === "development" && initialData) {
+    const fieldNames = fields ? fields.map((f) => f.name).join(", ") : groups ? groups.map((g) => g.fields.map((f) => f.name).join(", ")).join(" | ") : "";
+    console.log(
+      `[FormPage] initialData: ${JSON.stringify(initialData)}, fields: ${fieldNames}`
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "w-full",
+      "data-testid": "form-container",
+      "x-data": `{ activeTab: 0 }`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: "form-loading-indicator",
+            className: "htmx-indicator fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 z-50",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "animate-spin h-4 w-4",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "\u63D0\u4EA4\u4E2D..." })
+            ]
+          }
+        ),
+        groups && groups.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
             "div",
             {
-              "x-show": `activeTab === ${index}`,
+              className: `sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm ${isDialog ? "px-6" : "-mx-6 px-6 -mt-6"}`,
+              children: /* @__PURE__ */ jsx(
+                "nav",
+                {
+                  className: "flex -mb-px w-full",
+                  "aria-label": "Tabs",
+                  "data-testid": "form-tabs",
+                  children: groups.map((group, index) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "x-on:click": `activeTab = ${index}`,
+                      "x-bind:class": `activeTab === ${index} ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'`,
+                      className: "px-6 py-4 text-sm font-medium border-b-2 transition-colors duration-150 whitespace-nowrap flex-1 text-center",
+                      "data-testid": `form-tab-${index}`,
+                      children: group.label
+                    },
+                    index
+                  ))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "form",
+            {
+              id: finalFormId,
+              method: method === "put" ? "post" : method,
+              action: submitUrl,
+              "hx-boost": "true",
+              ...method === "put" ? { "hx-put": submitUrl } : {},
+              "hx-indicator": "#form-loading-indicator",
+              "data-testid": "form",
+              className: isDialog ? "p-6" : "mt-6",
+              children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6", children: groups.map((group, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "x-show": `activeTab === ${index}`,
+                  className: "space-y-6",
+                  "data-testid": `form-tab-content-${index}`,
+                  children: group.fields.map(
+                    (field) => renderFormField(field, initialData, formFieldRenderers)
+                  )
+                },
+                index
+              )) }) })
+            }
+          )
+        ] }) : (
+          /* 平铺模式（向后兼容） */
+          /* @__PURE__ */ jsx(
+            "form",
+            {
+              id: finalFormId,
+              method: method === "put" ? "post" : method,
+              action: submitUrl,
+              "hx-boost": "true",
+              ...method === "put" ? { "hx-put": submitUrl } : {},
+              "hx-indicator": "#form-loading-indicator",
               className: "space-y-6",
-              "data-testid": `form-tab-content-${index}`,
-              children: group.fields.map((field) => renderFormField(field, initialData, formFieldRenderers))
-            },
-            index
-          )) }) })
-        }
-      )
-    ] }) : (
-      /* 平铺模式（向后兼容） */
-      /* @__PURE__ */ jsx(
-        "form",
-        {
-          id: finalFormId,
-          method: method === "put" ? "post" : method,
-          action: submitUrl,
-          "hx-boost": "true",
-          ...method === "put" ? { "hx-put": submitUrl } : {},
-          "hx-indicator": "#form-loading-indicator",
-          className: "space-y-6",
-          "data-testid": "form",
-          children: fields && fields.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6 space-y-6", children: fields.map((field) => renderFormField(field, initialData, formFieldRenderers)) }) })
-        }
-      )
-    )
-  ] });
+              "data-testid": "form",
+              children: fields && fields.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "p-6 space-y-6", children: fields.map(
+                (field) => renderFormField(field, initialData, formFieldRenderers)
+              ) }) })
+            }
+          )
+        )
+      ]
+    }
+  );
 }
 
 // src/utils/form-data-processor.ts
@@ -4445,5 +4537,283 @@ function StringArrayEditor(props) {
     </div>
   `;
 }
+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 = [];
+          }
+        } 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();
+      }
+      this.draggedIndex = null;
+      this.draggedOverIndex = null;
+    }
+  }`;
+  return 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>
+  `;
+}
 
-export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, StringArrayEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, StringArrayEditor, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };