@shwfed/nuxt 0.11.47 → 0.11.49

package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.vue

@@ -7,6 +7,7 @@ import { computed, nextTick, ref, toRaw, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   CalendarFieldC,
+  ContainerFieldC,
   EmptyFieldC,
   FieldGroupC,
   FieldGroupStyleC,
@@ -46,6 +47,8 @@ import { NativeSelect, NativeSelectOption } from "../native-select";
 import { Switch } from "../switch";
 import { Textarea } from "../textarea";
 const ROOT_FIELD_GROUP_VALUE = "__root__";
+const GROUP_OWNER_PREFIX = "group:";
+const CONTAINER_OWNER_PREFIX = "container:";
 const props = defineProps({
   config: { type: null, required: true }
 });
@@ -78,6 +81,7 @@ const fieldTypeOptions = computed(() => [
   { type: "radio", label: t("field-type-radio") },
   { type: "calendar", label: t("field-type-calendar") },
   { type: "upload", label: t("field-type-upload") },
+  { type: "container", label: t("field-type-container") },
   { type: "empty", label: t("field-type-empty") },
   { type: "slot", label: t("field-type-slot") }
 ]);
@@ -86,28 +90,83 @@ const generalItem = computed(() => ({
   label: t("general")
 }));
 const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase());
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(toRaw(value)));
+}
+function createContainerDraftField(field) {
+  const { fields, ...rest } = cloneValue(field);
+  return {
+    draftId: createDraftId(),
+    field: {
+      ...rest,
+      fields: []
+    },
+    children: cloneFields(fields)
+  };
+}
+function findDraftField(fields, draftId) {
+  for (const field of fields) {
+    if (field.draftId === draftId) {
+      return field;
+    }
+    const child = findDraftField(field.children, draftId);
+    if (child) {
+      return child;
+    }
+  }
+  return void 0;
+}
+function findFieldOwnerInFields(fields, draftId, owner) {
+  for (const field of fields) {
+    if (field.draftId === draftId) {
+      return owner;
+    }
+    if (field.field.type !== "container") {
+      continue;
+    }
+    const childOwner = findFieldOwnerInFields(field.children, draftId, {
+      kind: "container",
+      draftId: field.draftId
+    });
+    if (childOwner) {
+      return childOwner;
+    }
+  }
+  return void 0;
+}
+function findFieldOwnerByDraftId(draftId) {
+  const rootOwner = findFieldOwnerInFields(draftFields.value, draftId, {
+    kind: "root"
+  });
+  if (rootOwner) {
+    return rootOwner;
+  }
+  for (const group of draftGroups.value) {
+    const groupOwner = findFieldOwnerInFields(group.fields, draftId, {
+      kind: "group",
+      draftId: group.draftId
+    });
+    if (groupOwner) {
+      return groupOwner;
+    }
+  }
+  return void 0;
+}
 const selectedGroup = computed(() => draftGroups.value.find((group) => group.draftId === selectedItemId.value));
 const selectedField = computed(() => {
-  const rootField = draftFields.value.find((item) => item.draftId === selectedItemId.value);
+  const rootField = findDraftField(draftFields.value, selectedItemId.value);
   if (rootField) {
     return rootField;
   }
   for (const group of draftGroups.value) {
-    const field = group.fields.find((item) => item.draftId === selectedItemId.value);
+    const field = findDraftField(group.fields, selectedItemId.value);
     if (field) {
       return field;
     }
   }
   return void 0;
 });
-const selectedFieldGroup = computed(() => {
-  for (const group of draftGroups.value) {
-    if (group.fields.some((item) => item.draftId === selectedItemId.value)) {
-      return group;
-    }
-  }
-  return void 0;
-});
+const selectedFieldOwner = computed(() => findFieldOwnerByDraftId(selectedItemId.value));
 const usesContentsOrientation = computed(() => draftOrientation.value === "contents");
 const selectedFieldValidationRules = computed(() => {
   const field = selectedField.value?.field;
@@ -129,9 +188,13 @@ function createDefaultLocaleValue() {
   return [{ locale: "zh", message: "" }];
 }
 function createDraftField(field) {
+  if (field.type === "container") {
+    return createContainerDraftField(field);
+  }
   return {
     draftId: createDraftId(),
-    field: JSON.parse(JSON.stringify(toRaw(field)))
+    field: cloneValue(field),
+    children: []
   };
 }
 function cloneFields(fields) {
@@ -140,11 +203,11 @@ function cloneFields(fields) {
 function createDraftGroup(group) {
   return {
     draftId: createDraftId(),
-    group: JSON.parse(JSON.stringify(toRaw({
+    group: cloneValue({
       id: group.id,
       style: group.style,
       fields: []
-    }))),
+    }),
     fields: cloneFields(group.fields)
   };
 }
@@ -164,7 +227,7 @@ function getFieldTypeLabel(type) {
   return t(`field-type-${type}`);
 }
 function isPassiveField(field) {
-  return field.type === "slot" || field.type === "empty";
+  return field.type === "empty";
 }
 function isMarkdownField(field) {
   return field.type === "markdown";
@@ -176,33 +239,42 @@ function isMarkdownContentField(field) {
   return isMarkdownField(field) || isMarkdownBodyField(field);
 }
 function hasFieldLabel(field) {
-  return !isPassiveField(field) && !isMarkdownBodyField(field);
+  return field.type !== "empty" && !isMarkdownBodyField(field);
 }
 function supportsFieldCellStyles(field) {
-  return !isPassiveField(field) && !isMarkdownBodyField(field);
+  return field.type !== "empty" && !isMarkdownBodyField(field);
 }
 function isPathlessField(field) {
-  return isPassiveField(field) || isMarkdownContentField(field);
+  return field.type === "slot" || field.type === "empty" || isMarkdownContentField(field) || field.type === "container";
 }
 function isInteractiveField(field) {
   return !isPathlessField(field);
 }
-function getSlotFieldLabel(_) {
-  return getFieldTypeLabel("slot");
+function getSlotFieldLabel(field) {
+  return getFieldChineseTitle(field) ?? getFieldTypeLabel("slot");
 }
 function getEmptyFieldLabel(_) {
   return getFieldTypeLabel("empty");
 }
+function getContainerFieldLabel(field) {
+  return getFieldChineseTitle(field) ?? getUnnamedFieldLabel(field);
+}
 function getUnnamedFieldLabel(field) {
   return t("unnamed-field", {
     type: getFieldTypeLabel(field.type)
   });
 }
+function getFieldTitleValue(field) {
+  if (!hasFieldLabel(field)) {
+    return createDefaultLocaleValue();
+  }
+  return field.title ?? createDefaultLocaleValue();
+}
 function getFieldChineseTitle(field) {
   if (!hasFieldLabel(field)) {
     return void 0;
   }
-  const zhTitle = field.title.find((item) => item.locale === "zh");
+  const zhTitle = field.title?.find((item) => item.locale === "zh");
   if (!zhTitle) {
     return void 0;
   }
@@ -213,6 +285,9 @@ function getFieldListLabel(field) {
   if (field.type === "slot") {
     return getSlotFieldLabel(field);
   }
+  if (field.type === "container") {
+    return getContainerFieldLabel(field);
+  }
   if (field.type === "empty") {
     return getEmptyFieldLabel(field);
   }
@@ -223,32 +298,49 @@ function getGroupListLabel(index) {
     index: index + 1
   });
 }
-const rootFieldItems = computed(() => draftFields.value.map((item) => ({
-  itemId: item.draftId,
-  fieldId: item.field.id,
-  label: getFieldListLabel(item.field),
-  path: isPathlessField(item.field) ? void 0 : item.field.path,
-  searchMeta: isPathlessField(item.field) ? item.field.id : [item.field.path, item.field.id].filter(Boolean).join(" "),
-  type: item.field.type
-})));
+function buildFieldSearchMeta(field) {
+  return isPathlessField(field) ? [field.id, getFieldChineseTitle(field)].filter(Boolean).join(" ") : [field.path, field.id, getFieldChineseTitle(field)].filter(Boolean).join(" ");
+}
+function flattenFieldItems(fields, depth, groupItemId) {
+  return fields.flatMap((item) => {
+    const currentItem = {
+      itemId: item.draftId,
+      groupItemId,
+      fieldId: item.field.id,
+      label: getFieldListLabel(item.field),
+      path: isPathlessField(item.field) ? void 0 : item.field.path,
+      searchMeta: buildFieldSearchMeta(item.field),
+      type: item.field.type,
+      depth
+    };
+    if (item.field.type !== "container") {
+      return [currentItem];
+    }
+    return [
+      currentItem,
+      ...flattenFieldItems(item.children, depth + 1, groupItemId)
+    ];
+  });
+}
+const rootFieldItems = computed(() => flattenFieldItems(draftFields.value, 0));
 const groupItems = computed(() => draftGroups.value.map((group, index) => {
-  const fields = group.fields.map((item) => ({
-    itemId: item.draftId,
-    groupItemId: group.draftId,
-    fieldId: item.field.id,
-    label: getFieldListLabel(item.field),
-    path: isPathlessField(item.field) ? void 0 : item.field.path,
-    searchMeta: isPathlessField(item.field) ? item.field.id : [item.field.path, item.field.id].filter(Boolean).join(" "),
-    type: item.field.type
-  }));
   return {
     itemId: group.draftId,
     groupId: group.group.id,
     label: getGroupListLabel(index),
     searchMeta: group.group.id,
-    fields
+    fields: flattenFieldItems(group.fields, 0, group.draftId)
   };
 }));
+function getFieldOwnerValue(owner) {
+  if (owner.kind === "root") {
+    return ROOT_FIELD_GROUP_VALUE;
+  }
+  if (owner.kind === "group") {
+    return `${GROUP_OWNER_PREFIX}${owner.draftId}`;
+  }
+  return `${CONTAINER_OWNER_PREFIX}${owner.draftId}`;
+}
 const filteredGroupItems = computed(() => {
   if (!normalizedSearch.value) {
     return groupItems.value;
@@ -279,6 +371,52 @@ const filteredRootFieldItems = computed(() => {
   });
 });
 const selectedItemLabel = computed(() => selectedField.value ? getFieldListLabel(selectedField.value.field) : selectedGroup.value ? getGroupListLabel(Math.max(draftGroups.value.findIndex((group) => group.draftId === selectedGroup.value?.draftId), 0)) : generalItem.value.label);
+function collectDraftFieldIds(fields) {
+  return fields.flatMap((field) => [field.draftId, ...collectDraftFieldIds(field.children)]);
+}
+function buildFieldOwnerOptions(fields, depth, options, excludedDraftIds) {
+  for (const field of fields) {
+    if (field.field.type !== "container") {
+      continue;
+    }
+    if (!excludedDraftIds.has(field.draftId)) {
+      options.push({
+        value: getFieldOwnerValue({
+          kind: "container",
+          draftId: field.draftId
+        }),
+        label: `${"  ".repeat(depth)}${getFieldListLabel(field.field)}`
+      });
+    }
+    buildFieldOwnerOptions(field.children, depth + 1, options, excludedDraftIds);
+  }
+}
+const selectedFieldOwnerOptions = computed(() => {
+  const options = [{
+    value: ROOT_FIELD_GROUP_VALUE,
+    label: t("field-group-none")
+  }];
+  const excludedDraftIds = new Set(
+    selectedField.value ? collectDraftFieldIds([selectedField.value]) : []
+  );
+  for (const group of groupItems.value) {
+    options.push({
+      value: `${GROUP_OWNER_PREFIX}${group.itemId}`,
+      label: group.label
+    });
+  }
+  buildFieldOwnerOptions(draftFields.value, 1, options, excludedDraftIds);
+  for (const group of draftGroups.value) {
+    buildFieldOwnerOptions(group.fields, 1, options, excludedDraftIds);
+  }
+  return options;
+});
+const selectedContainerChildItems = computed(() => {
+  if (selectedField.value?.field.type !== "container") {
+    return [];
+  }
+  return flattenFieldItems(selectedField.value.children, 1);
+});
 function getFieldErrorKey(draftId, fieldKey) {
   return `${draftId}:${fieldKey}`;
 }
@@ -447,8 +585,27 @@ function normalizeField(field) {
     case "slot":
       return {
         ...field,
+        title: field.title,
+        hideLabel: field.hideLabel ? true : void 0,
+        required: field.required ? true : void 0,
+        hidden: normalizeOptionalString(field.hidden ?? ""),
+        labelStyle: normalizeOptionalString(field.labelStyle ?? ""),
+        contentStyle: normalizeOptionalString(field.contentStyle ?? ""),
         style: normalizeOptionalString(field.style ?? "")
       };
+    case "container":
+      return {
+        ...field,
+        hideLabel: field.hideLabel ? true : void 0,
+        required: field.required ? true : void 0,
+        hidden: normalizeOptionalString(field.hidden ?? ""),
+        labelStyle: normalizeOptionalString(field.labelStyle ?? ""),
+        contentStyle: normalizeOptionalString(field.contentStyle ?? ""),
+        bodyOrientation: field.bodyOrientation ? normalizeOrientation(field.bodyOrientation) : void 0,
+        bodyBordered: field.bodyBordered ? true : void 0,
+        bodyStyle: normalizeOptionalString(field.bodyStyle ?? ""),
+        fields: []
+      };
     case "empty":
       return {
         ...field,
@@ -522,6 +679,14 @@ function createField(type) {
         path: "",
         title
       };
+    case "container":
+      return {
+        id,
+        type,
+        hideLabel: void 0,
+        title,
+        fields: []
+      };
     case "empty":
       return {
         id,
@@ -569,6 +734,120 @@ function moveField(fields, oldIndex, newIndex) {
   nextFields.splice(newIndex, 0, movedField);
   return nextFields;
 }
+function mapDraftFields(fields, updater) {
+  return fields.map((item) => {
+    const nextItem = updater(item);
+    if (nextItem.field.type !== "container") {
+      return nextItem;
+    }
+    return {
+      ...nextItem,
+      children: mapDraftFields(nextItem.children, updater)
+    };
+  });
+}
+function updateContainerFields(fields, containerDraftId, updater) {
+  return fields.map((item) => {
+    if (item.field.type !== "container") {
+      return item;
+    }
+    if (item.draftId === containerDraftId) {
+      return {
+        ...item,
+        children: updater(item.children)
+      };
+    }
+    return {
+      ...item,
+      children: updateContainerFields(item.children, containerDraftId, updater)
+    };
+  });
+}
+function findContainerChildren(fields, containerDraftId) {
+  for (const item of fields) {
+    if (item.field.type !== "container") {
+      continue;
+    }
+    if (item.draftId === containerDraftId) {
+      return item.children;
+    }
+    const children = findContainerChildren(item.children, containerDraftId);
+    if (children) {
+      return children;
+    }
+  }
+  return void 0;
+}
+function updateOwnerFields(owner, updater) {
+  if (owner.kind === "root") {
+    draftFields.value = updater(draftFields.value);
+    return;
+  }
+  if (owner.kind === "group") {
+    draftGroups.value = draftGroups.value.map((group) => group.draftId === owner.draftId ? {
+      ...group,
+      fields: updater(group.fields)
+    } : group);
+    return;
+  }
+  draftFields.value = updateContainerFields(draftFields.value, owner.draftId, updater);
+  draftGroups.value = draftGroups.value.map((group) => ({
+    ...group,
+    fields: updateContainerFields(group.fields, owner.draftId, updater)
+  }));
+}
+function getOwnerFields(owner) {
+  if (owner.kind === "root") {
+    return draftFields.value;
+  }
+  if (owner.kind === "group") {
+    return draftGroups.value.find((group) => group.draftId === owner.draftId)?.fields ?? [];
+  }
+  return findContainerChildren(draftFields.value, owner.draftId) ?? draftGroups.value.flatMap((group) => findContainerChildren(group.fields, owner.draftId) ?? []);
+}
+function removeFieldFromOwner(owner, fieldDraftId) {
+  let movedField;
+  updateOwnerFields(owner, (fields) => fields.filter((field) => {
+    if (field.draftId !== fieldDraftId) {
+      return true;
+    }
+    movedField = field;
+    return false;
+  }));
+  return movedField;
+}
+function insertFieldIntoOwner(owner, field, newIndex) {
+  updateOwnerFields(owner, (fields) => {
+    const nextFields = fields.slice();
+    const insertIndex = Math.min(Math.max(newIndex, 0), nextFields.length);
+    nextFields.splice(insertIndex, 0, field);
+    return nextFields;
+  });
+}
+function getOwnerItemCount(owner) {
+  return getOwnerFields(owner).length;
+}
+function getFieldOwnerFromValue(value) {
+  const ownerValue = String(value);
+  if (ownerValue === ROOT_FIELD_GROUP_VALUE) {
+    return {
+      kind: "root"
+    };
+  }
+  if (ownerValue.startsWith(GROUP_OWNER_PREFIX)) {
+    return {
+      kind: "group",
+      draftId: ownerValue.slice(GROUP_OWNER_PREFIX.length)
+    };
+  }
+  if (ownerValue.startsWith(CONTAINER_OWNER_PREFIX)) {
+    return {
+      kind: "container",
+      draftId: ownerValue.slice(CONTAINER_OWNER_PREFIX.length)
+    };
+  }
+  return void 0;
+}
 function setSortableGroupListRef(groupDraftId, element) {
   sortableGroupListRefs.value[groupDraftId] = element instanceof HTMLElement ? element : null;
 }
@@ -604,84 +883,41 @@ function reorderRootFields(oldIndex, newIndex) {
   draftFields.value = moveField(draftFields.value, oldIndex, newIndex);
 }
 function moveFieldBetweenGroups(sourceGroupDraftId, targetGroupDraftId, fieldDraftId, newIndex) {
-  let movedField;
-  draftGroups.value = draftGroups.value.map((group) => {
-    if (group.draftId === sourceGroupDraftId) {
-      const nextFields = group.fields.filter((field) => {
-        if (field.draftId !== fieldDraftId) {
-          return true;
-        }
-        movedField = field;
-        return false;
-      });
-      return {
-        ...group,
-        fields: nextFields
-      };
-    }
-    return group;
-  });
+  const movedField = removeFieldFromOwner({
+    kind: "group",
+    draftId: sourceGroupDraftId
+  }, fieldDraftId);
   if (!movedField) {
     return;
   }
-  const nextMovedField = movedField;
-  draftGroups.value = draftGroups.value.map((group) => {
-    if (group.draftId !== targetGroupDraftId) {
-      return group;
-    }
-    const nextFields = group.fields.slice();
-    const insertIndex = Math.min(Math.max(newIndex, 0), nextFields.length);
-    nextFields.splice(insertIndex, 0, nextMovedField);
-    return {
-      ...group,
-      fields: nextFields
-    };
-  });
+  insertFieldIntoOwner({
+    kind: "group",
+    draftId: targetGroupDraftId
+  }, movedField, newIndex);
 }
 function moveFieldToRoot(sourceGroupDraftId, fieldDraftId, newIndex) {
-  let movedField;
-  draftGroups.value = draftGroups.value.map((group) => {
-    if (group.draftId !== sourceGroupDraftId) {
-      return group;
-    }
-    const nextFields2 = group.fields.filter((field) => {
-      if (field.draftId !== fieldDraftId) {
-        return true;
-      }
-      movedField = field;
-      return false;
-    });
-    return {
-      ...group,
-      fields: nextFields2
-    };
-  });
+  const movedField = removeFieldFromOwner({
+    kind: "group",
+    draftId: sourceGroupDraftId
+  }, fieldDraftId);
   if (!movedField) {
     return;
   }
-  const nextFields = draftFields.value.slice();
-  const insertIndex = Math.min(Math.max(newIndex, 0), nextFields.length);
-  nextFields.splice(insertIndex, 0, movedField);
-  draftFields.value = nextFields;
+  insertFieldIntoOwner({
+    kind: "root"
+  }, movedField, newIndex);
 }
 function moveRootFieldToGroup(targetGroupDraftId, fieldDraftId, newIndex) {
-  const movedField = draftFields.value.find((field) => field.draftId === fieldDraftId);
+  const movedField = removeFieldFromOwner({
+    kind: "root"
+  }, fieldDraftId);
   if (!movedField) {
     return;
   }
-  draftFields.value = draftFields.value.filter((field) => field.draftId !== fieldDraftId);
-  draftGroups.value = draftGroups.value.map((group) => {
-    if (group.draftId !== targetGroupDraftId) {
-      return group;
-    }
-    const nextFields = group.fields.slice();
-    const insertIndex = Math.min(Math.max(newIndex, 0), nextFields.length);
-    nextFields.splice(insertIndex, 0, movedField);
-    return {
-      ...group,
-      fields: nextFields
-    };
-  });
+  insertFieldIntoOwner({
+    kind: "group",
+    draftId: targetGroupDraftId
+  }, movedField, newIndex);
 }
 async function refreshSortable() {
   for (const sortable of sortables.value) {
@@ -833,14 +1069,14 @@ function updateDraftStyle(value) {
   draftStyle.value = normalizeOptionalString(String(value));
 }
 function updateDraftField(draftId, updater) {
-  draftFields.value = draftFields.value.map((item) => item.draftId === draftId ? {
-    draftId: item.draftId,
+  draftFields.value = mapDraftFields(draftFields.value, (item) => item.draftId === draftId ? {
+    ...item,
     field: updater(item.field)
   } : item);
   draftGroups.value = draftGroups.value.map((group) => ({
     ...group,
-    fields: group.fields.map((item) => item.draftId === draftId ? {
-      draftId: item.draftId,
+    fields: mapDraftFields(group.fields, (item) => item.draftId === draftId ? {
+      ...item,
       field: updater(item.field)
     } : item)
   }));
@@ -861,38 +1097,39 @@ function updateSelectedGroupStyle(value) {
 }
 function updateSelectedFieldGroup(value) {
   const selected = selectedField.value;
-  const sourceGroup = selectedFieldGroup.value;
-  if (!selected) {
+  const sourceOwner = selectedFieldOwner.value;
+  const targetOwner = getFieldOwnerFromValue(value);
+  if (!selected || !sourceOwner || !targetOwner) {
     return;
   }
-  const targetGroupDraftId = String(value);
-  if (!targetGroupDraftId) {
+  if (getFieldOwnerValue(sourceOwner) === getFieldOwnerValue(targetOwner)) {
     return;
   }
-  if (targetGroupDraftId === ROOT_FIELD_GROUP_VALUE) {
-    if (!sourceGroup) {
-      return;
-    }
-    moveFieldToRoot(sourceGroup.draftId, selected.draftId, draftFields.value.length);
-    return;
-  }
-  if (sourceGroup && targetGroupDraftId === sourceGroup.draftId) {
-    return;
-  }
-  if (!sourceGroup) {
-    moveRootFieldToGroup(targetGroupDraftId, selected.draftId, Number.MAX_SAFE_INTEGER);
+  const movedField = removeFieldFromOwner(sourceOwner, selected.draftId);
+  if (!movedField) {
     return;
   }
-  moveFieldBetweenGroups(sourceGroup.draftId, targetGroupDraftId, selected.draftId, Number.MAX_SAFE_INTEGER);
+  insertFieldIntoOwner(targetOwner, movedField, getOwnerItemCount(targetOwner));
 }
-function getInsertionGroupDraftId() {
+function getInsertionOwner() {
+  if (selectedField.value?.field.type === "container") {
+    return {
+      kind: "container",
+      draftId: selectedField.value.draftId
+    };
+  }
   if (selectedGroup.value) {
-    return selectedGroup.value.draftId;
+    return {
+      kind: "group",
+      draftId: selectedGroup.value.draftId
+    };
   }
-  if (selectedFieldGroup.value) {
-    return selectedFieldGroup.value.draftId;
+  if (selectedFieldOwner.value) {
+    return selectedFieldOwner.value;
   }
-  return void 0;
+  return {
+    kind: "root"
+  };
 }
 function addGroup() {
   const draftGroup = createDraftGroup(createGroup());
@@ -902,36 +1139,10 @@ function addGroup() {
 }
 function addField(type) {
   const draftField = createDraftField(createField(type));
-  const targetGroupDraftId = getInsertionGroupDraftId();
-  if (targetGroupDraftId) {
-    draftGroups.value = draftGroups.value.map((group) => {
-      if (group.draftId !== targetGroupDraftId) {
-        return group;
-      }
-      if (selectedFieldGroup.value?.draftId === targetGroupDraftId && selectedField.value) {
-        const currentIndex = group.fields.findIndex((field) => field.draftId === selectedField.value?.draftId);
-        if (currentIndex >= 0) {
-          const nextFields = group.fields.slice();
-          nextFields.splice(currentIndex + 1, 0, draftField);
-          return {
-            ...group,
-            fields: nextFields
-          };
-        }
-      }
-      return {
-        ...group,
-        fields: [...group.fields, draftField]
-      };
-    });
-  } else if (selectedField.value && !selectedFieldGroup.value) {
-    const currentIndex = draftFields.value.findIndex((field) => field.draftId === selectedField.value?.draftId);
-    const nextFields = draftFields.value.slice();
-    nextFields.splice(currentIndex >= 0 ? currentIndex + 1 : nextFields.length, 0, draftField);
-    draftFields.value = nextFields;
-  } else {
-    draftFields.value = [...draftFields.value, draftField];
-  }
+  const targetOwner = getInsertionOwner();
+  const ownerFields = getOwnerFields(targetOwner);
+  const currentIndex = selectedField.value && selectedFieldOwner.value && getFieldOwnerValue(selectedFieldOwner.value) === getFieldOwnerValue(targetOwner) && selectedField.value.field.type !== "container" ? ownerFields.findIndex((field) => field.draftId === selectedField.value?.draftId) : -1;
+  insertFieldIntoOwner(targetOwner, draftField, currentIndex >= 0 ? currentIndex + 1 : ownerFields.length);
   selectedItemId.value = draftField.draftId;
   clearFieldErrors(draftField.draftId);
 }
@@ -946,7 +1157,7 @@ function deleteGroup(itemId) {
   if (deletedGroup) {
     clearFieldErrors(deletedGroup.draftId);
     for (const field of deletedGroup.fields) {
-      clearFieldErrors(field.draftId);
+      clearNestedFieldErrors(field);
     }
   }
   if (selectedItemId.value !== itemId) {
@@ -956,30 +1167,33 @@ function deleteGroup(itemId) {
   selectedItemId.value = nextGroup?.draftId ?? "general";
 }
 function deleteField(itemId) {
-  let nextSelectedItemId;
-  const rootDeleteIndex = draftFields.value.findIndex((field) => field.draftId === itemId);
-  if (rootDeleteIndex >= 0) {
-    const nextFields = draftFields.value.filter((field) => field.draftId !== itemId);
-    const nextField = nextFields[rootDeleteIndex] ?? nextFields[rootDeleteIndex - 1];
-    draftFields.value = nextFields;
-    nextSelectedItemId = nextField?.draftId ?? "general";
-  }
-  draftGroups.value = draftGroups.value.map((group) => {
-    const deleteIndex = group.fields.findIndex((field) => field.draftId === itemId);
-    if (deleteIndex < 0) {
-      return group;
-    }
-    const nextFields = group.fields.filter((field) => field.draftId !== itemId);
-    const nextField = nextFields[deleteIndex] ?? nextFields[deleteIndex - 1];
-    nextSelectedItemId = nextField?.draftId ?? group.draftId;
-    return {
-      ...group,
-      fields: nextFields
-    };
-  });
+  const owner = selectedItemId.value === itemId ? selectedFieldOwner.value : findFieldOwnerByDraftId(itemId);
+  if (!owner) {
+    return;
+  }
+  const currentFields = getOwnerFields(owner);
+  const deleteIndex = currentFields.findIndex((field) => field.draftId === itemId);
+  if (deleteIndex < 0) {
+    return;
+  }
+  removeFieldFromOwner(owner, itemId);
+  const nextFields = getOwnerFields(owner);
+  const nextField = nextFields[deleteIndex] ?? nextFields[deleteIndex - 1];
   clearFieldErrors(itemId);
   if (selectedItemId.value === itemId) {
-    selectedItemId.value = nextSelectedItemId ?? "general";
+    if (nextField) {
+      selectedItemId.value = nextField.draftId;
+      return;
+    }
+    if (owner.kind === "group") {
+      selectedItemId.value = owner.draftId;
+      return;
+    }
+    if (owner.kind === "container") {
+      selectedItemId.value = owner.draftId;
+      return;
+    }
+    selectedItemId.value = "general";
   }
 }
 function handleAddItem(type) {
@@ -992,6 +1206,9 @@ function handleAddItem(type) {
 function isFieldLabelConfigurable(field) {
   return hasFieldLabel(field);
 }
+function hasDirectFieldStyle(field) {
+  return field.type !== "container";
+}
 function getFieldHideLabelValue(field) {
   if (!isFieldLabelConfigurable(field)) {
     return false;
@@ -1079,14 +1296,51 @@ function updateSelectedFieldPath(value) {
 }
 function updateSelectedFieldStyle(value) {
   const selected = selectedField.value;
-  if (!selected) {
+  if (!selected || !hasDirectFieldStyle(selected.field)) {
     return;
   }
   clearFieldError(selected.draftId, "style");
-  updateDraftField(selected.draftId, (field) => ({
+  updateDraftField(selected.draftId, (field) => {
+    if (!hasDirectFieldStyle(field)) {
+      return field;
+    }
+    return {
+      ...field,
+      style: normalizeOptionalString(String(value))
+    };
+  });
+}
+function updateSelectedContainerBodyOrientation(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "container") {
+    return;
+  }
+  const normalizedValue = normalizeOrientation(value);
+  updateDraftField(selected.draftId, (field) => field.type === "container" ? {
     ...field,
-    style: normalizeOptionalString(String(value))
-  }));
+    bodyOrientation: normalizedValue === "horizontal" ? void 0 : normalizedValue
+  } : field);
+}
+function updateSelectedContainerBodyBordered(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "container") {
+    return;
+  }
+  updateDraftField(selected.draftId, (field) => field.type === "container" ? {
+    ...field,
+    bodyBordered: value ? true : void 0
+  } : field);
+}
+function updateSelectedContainerBodyStyle(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "container") {
+    return;
+  }
+  clearFieldError(selected.draftId, "bodyStyle");
+  updateDraftField(selected.draftId, (field) => field.type === "container" ? {
+    ...field,
+    bodyStyle: normalizeOptionalString(String(value))
+  } : field);
 }
 function updateSelectedFieldLabelStyle(value) {
   const selected = selectedField.value;
@@ -1145,17 +1399,17 @@ function updateSelectedFieldInitialValue(value) {
 }
 function updateSelectedFieldRequired(value) {
   const selected = selectedField.value;
-  if (!selected || !isInteractiveField(selected.field)) {
+  if (!selected || selected.field.type !== "slot" && selected.field.type !== "container" && !isInteractiveField(selected.field)) {
     return;
   }
   updateDraftField(selected.draftId, (field) => {
-    if (!isInteractiveField(field)) {
-      return field;
+    if (field.type === "slot" || field.type === "container" || isInteractiveField(field)) {
+      return {
+        ...field,
+        required: value ? true : void 0
+      };
     }
-    return {
-      ...field,
-      required: value ? true : void 0
-    };
+    return field;
   });
 }
 function updateSelectedStringDiscardEmpty(value) {
@@ -1627,6 +1881,10 @@ function getSchemaIssues(field) {
       const result = SlotFieldC.safeParse(field);
       return result.success ? [] : result.error.issues;
     }
+    case "container": {
+      const result = ContainerFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
     case "empty": {
       const result = EmptyFieldC.safeParse(field);
       return result.success ? [] : result.error.issues;
@@ -1662,9 +1920,32 @@ function normalizeGroup(group) {
   return {
     ...group,
     style: normalizeOptionalString(group.style ?? ""),
-    fields: group.fields.map((field) => normalizeField(field))
+    fields: group.fields
   };
 }
+function normalizeDraftField(item) {
+  const normalizedField = normalizeField(item.field);
+  return {
+    ...item,
+    field: normalizedField,
+    children: item.children.map((child) => normalizeDraftField(child))
+  };
+}
+function buildFieldFromDraft(item) {
+  if (item.field.type !== "container") {
+    return item.field;
+  }
+  return {
+    ...item.field,
+    fields: item.children.map((child) => buildFieldFromDraft(child))
+  };
+}
+function clearNestedFieldErrors(item) {
+  clearFieldErrors(item.draftId);
+  for (const child of item.children) {
+    clearNestedFieldErrors(child);
+  }
+}
 function validateDraftFields(fields, errors, idOwners, pathOwners) {
   let firstInvalidItemId;
   for (const item of fields) {
@@ -1702,25 +1983,21 @@ function validateDraftFields(fields, errors, idOwners, pathOwners) {
       setError(errors, issueKey, getSchemaIssueMessage(issue, issuePath));
       firstInvalidItemId = firstInvalidItemId ?? item.draftId;
     }
+    const childInvalidItemId = validateDraftFields(item.children, errors, idOwners, pathOwners);
+    firstInvalidItemId = firstInvalidItemId ?? childInvalidItemId;
   }
   return firstInvalidItemId;
 }
 function validateDraftState() {
   const errors = {};
-  const normalizedFields = draftFields.value.map((item) => ({
-    draftId: item.draftId,
-    field: normalizeField(item.field)
-  }));
+  const normalizedFields = draftFields.value.map((item) => normalizeDraftField(item));
   const normalizedGroups = draftGroups.value.map((group) => ({
     draftId: group.draftId,
     group: normalizeGroup({
       ...group.group,
-      fields: group.fields.map((item) => item.field)
+      fields: group.fields.map((item) => buildFieldFromDraft(normalizeDraftField(item)))
     }),
-    fields: group.fields.map((item) => ({
-      draftId: item.draftId,
-      field: normalizeField(item.field)
-    }))
+    fields: group.fields.map((item) => normalizeDraftField(item))
   }));
   const groupIdOwners = {};
   const idOwners = {};
@@ -1782,10 +2059,10 @@ function buildDraftConfig() {
     return void 0;
   }
   const nextBody = {
-    fields: validatedDraftState.normalizedFields.map((item) => item.field),
+    fields: validatedDraftState.normalizedFields.map((item) => buildFieldFromDraft(item)),
     groups: validatedDraftState.normalizedGroups.map((group) => ({
       ...group.group,
-      fields: group.fields.map((item) => item.field)
+      fields: group.fields.map((item) => buildFieldFromDraft(item))
     }))
   };
   if (draftOrientation.value !== "horizontal") {
@@ -1870,10 +2147,12 @@ function buildDslGuideMarkdown() {
     "- \u4EE3\u7801\u91CC\u5E94\u5148\u751F\u6210\u5E76\u4F7F\u7528 UUID\uFF0C\u518D\u628A\u540C\u4E00\u4E2A `id` \u7C98\u8D34\u56DE\u5B57\u6BB5\u914D\u7F6E\u3002",
     "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u5305\u542B\u552F\u4E00\u4E14\u5408\u6CD5\u7684 UUID `id`\u3002",
     "- \u53EA\u6709\u53EF\u7ED1\u5B9A\u503C\u7684\u5B57\u6BB5\u53EF\u4EE5\u914D\u7F6E `path`\uFF0C\u5E76\u53C2\u4E0E\u8868\u5355\u503C\u8BFB\u5199\u3002",
-    "- `slot` \u548C `empty` \u5B57\u6BB5\u90FD\u4E0D\u4F1A\u7ED1\u5B9A\u6A21\u578B\u503C\uFF0C\u53EA\u5141\u8BB8 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
+    "- `slot` \u5B57\u6BB5\u4E0D\u4F1A\u7ED1\u5B9A\u6A21\u578B\u503C\uFF1B\u53EF\u9009 `title`\u3001`hideLabel`\u3001`required`\u3001`hidden`\u3001`labelStyle`\u3001`contentStyle` \u4E0E `style`\u3002",
+    "- `container` \u5B57\u6BB5\u4E0D\u4F1A\u7ED1\u5B9A\u6A21\u578B\u503C\uFF1B\u4F7F\u7528 `fields` \u627F\u8F7D\u9012\u5F52\u5D4C\u5957\u5B57\u6BB5\uFF0C\u53EF\u9009 `bodyOrientation`\u3001`bodyBordered` \u4E0E `bodyStyle` \u63A7\u5236\u5185\u90E8\u5E03\u5C40\u3002",
+    "- `empty` \u5B57\u6BB5\u4E0D\u4F1A\u7ED1\u5B9A\u6A21\u578B\u503C\uFF0C\u53EA\u5141\u8BB8 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
     "- `markdown` \u5B57\u6BB5\u4F7F\u7528 `title` \u4E0E `locale` \u5C55\u793A\u5E26\u6807\u7B7E\u7684 Markdown \u5185\u5BB9\uFF0C\u4E0D\u7ED1\u5B9A `path`\u3002",
     "- `markdown-body` \u5B57\u6BB5\u4F7F\u7528 `locale` \u5C55\u793A\u65E0\u6807\u7B7E\u7684\u7EAF Markdown \u5185\u5BB9\uFF0C\u53EF\u9009 `inline` \u63A7\u5236\u5185\u8054\u6E32\u67D3\uFF0C\u4E0D\u7ED1\u5B9A `path`\u3002",
-    "- \u9664 `slot`\u3001`empty` \u4E0E `markdown-body` \u5916\uFF0C\u5176\u5B83\u5E26\u6807\u7B7E\u5B57\u6BB5\u90FD\u53EF\u4EE5\u8BBE\u7F6E `hideLabel` \u9690\u85CF\u6807\u7B7E\u3002",
+    "- \u9664 `empty` \u4E0E `markdown-body` \u5916\uFF0C\u5176\u5B83\u5E26\u6807\u7B7E\u5B57\u6BB5\u90FD\u53EF\u4EE5\u8BBE\u7F6E `hideLabel` \u9690\u85CF\u6807\u7B7E\u3002",
     "- \u666E\u901A\u5B57\u6BB5\u53EF\u989D\u5916\u4F7F\u7528 `labelStyle` \u4E0E `contentStyle`\uFF0C\u7528\u4E8E contents \u5E03\u5C40\u6A21\u5F0F\u4E0B\u5206\u522B\u63A7\u5236\u6807\u7B7E\u4E0E\u5185\u5BB9\u5355\u5143\u683C\u3002"
   ].join("\n");
 }
@@ -1885,10 +2164,12 @@ function buildMarkdownNotes() {
     "- \u6240\u6709\u5B57\u6BB5\u7EC4 `id` \u90FD\u5FC5\u987B\u552F\u4E00\u4E14\u7B26\u5408 UUID \u683C\u5F0F\u3002",
     "- \u6240\u6709\u5B57\u6BB5 `id` \u90FD\u5FC5\u987B\u552F\u4E00\u4E14\u7B26\u5408 UUID \u683C\u5F0F\u3002",
     "- \u5B57\u6BB5\u7EC4\u6CA1\u6709\u6807\u9898\uFF1B\u5982\u679C\u9700\u8981\u5206\u6BB5\u6807\u9898\u6216\u8BF4\u660E\uFF0C\u4F18\u5148\u63D2\u5165 `markdown-body` \u5B57\u6BB5\uFF1B\u9700\u8981\u6807\u7B7E\u884C\u65F6\u518D\u4F7F\u7528 `markdown` \u5B57\u6BB5\u3002",
-    "- `slot` \u4E0E `empty` \u5B57\u6BB5\u53EA\u80FD\u4F7F\u7528 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
+    "- `slot` \u5B57\u6BB5\u4E0D\u7ED1\u5B9A `path`\uFF0C\u53EF\u9009 `title`\u3001`hideLabel`\u3001`required`\u3001`hidden`\u3001`labelStyle`\u3001`contentStyle` \u4E0E `style`\u3002",
+    "- `container` \u5B57\u6BB5\u4E0D\u7ED1\u5B9A `path`\uFF0C\u901A\u8FC7 `fields` \u9012\u5F52\u5D4C\u5957\u5B50\u5B57\u6BB5\uFF0C\u4E0D\u652F\u6301\u5D4C\u5957 `groups`\u3002",
+    "- `empty` \u5B57\u6BB5\u53EA\u80FD\u4F7F\u7528 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
     "- `markdown` \u5B57\u6BB5\u4E0D\u4F7F\u7528 `path`\uFF0C\u5185\u5BB9\u6765\u81EA `title` \u4E0E `locale` \u672C\u5730\u5316 Markdown\u3002",
     "- `markdown-body` \u5B57\u6BB5\u4E0D\u4F7F\u7528 `path`\uFF0C\u5185\u5BB9\u6765\u81EA `locale` \u672C\u5730\u5316 Markdown\uFF0C\u53EF\u9009 `inline` \u63A7\u5236\u6E32\u67D3\u65B9\u5F0F\u3002",
-    "- \u9664 `slot`\u3001`empty` \u4E0E `markdown-body` \u5916\uFF0C\u5176\u5B83\u5E26\u6807\u7B7E\u5B57\u6BB5\u90FD\u53EF\u4EE5\u8BBE\u7F6E `hideLabel`\u3002",
+    "- \u9664 `empty` \u4E0E `markdown-body` \u5916\uFF0C\u5176\u5B83\u5E26\u6807\u7B7E\u5B57\u6BB5\u90FD\u53EF\u4EE5\u8BBE\u7F6E `hideLabel`\u3002",
     "- \u666E\u901A\u5B57\u6BB5\u5728 contents \u5E03\u5C40\u6A21\u5F0F\u4E0B\u53EF\u989D\u5916\u4F7F\u7528 `labelStyle` \u4E0E `contentStyle`\u3002",
     "- \u53EA\u6709\u5E26 `path` \u7684\u5B57\u6BB5\u624D\u8981\u6C42 `path` \u552F\u4E00\u4E14\u4E0D\u80FD\u4E3A\u7A7A\u3002",
     "- \u8868\u8FBE\u5F0F\u5B57\u6BB5\u5FC5\u987B\u4E25\u683C\u9075\u5B88 schema \u7EA6\u675F\uFF1B\u5982\u679C schema \u4E0D\u652F\u6301\uFF0C\u5C31\u76F4\u63A5\u8BF4\u660E\u9650\u5236\u3002"
@@ -2047,10 +2328,10 @@ function confirmChanges() {
   if (!result) {
     return;
   }
-  draftFields.value = result.normalizedFields.map((item) => createDraftField(item.field));
+  draftFields.value = result.normalizedFields.map((item) => createDraftField(buildFieldFromDraft(item)));
   draftGroups.value = result.normalizedGroups.map((group) => createDraftGroup({
     ...group.group,
-    fields: group.fields.map((item) => item.field)
+    fields: group.fields.map((item) => buildFieldFromDraft(item))
   }));
   emit("confirm", result.config);
   open.value = false;
@@ -2160,6 +2441,7 @@ function confirmChanges() {
                   :data-field-id="item.fieldId"
                   :data-field-path="item.path"
                   :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
+                  :style="{ paddingLeft: `${item.depth * 12 + 4}px` }"
                   :class="cn(
   'flex min-w-0 items-center gap-2 rounded-md border p-1 transition-colors',
   selectedItemId === item.itemId ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
@@ -2272,8 +2554,9 @@ function confirmChanges() {
                       :data-field-id="item.fieldId"
                       :data-field-path="item.path"
                       :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
+                      :style="{ paddingLeft: `${item.depth * 12 + 16}px` }"
                       :class="cn(
-  'flex min-w-0 items-center gap-2 rounded-md border p-1 pl-4 transition-colors',
+  'flex min-w-0 items-center gap-2 rounded-md border p-1 transition-colors',
   selectedItemId === item.itemId ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
 )"
                     >
@@ -2539,18 +2822,15 @@ function confirmChanges() {
                 </span>
                 <NativeSelect
                   data-slot="fields-configurator-field-group-select"
-                  :model-value="selectedFieldGroup?.draftId ?? ROOT_FIELD_GROUP_VALUE"
+                  :model-value="selectedFieldOwner ? getFieldOwnerValue(selectedFieldOwner) : ROOT_FIELD_GROUP_VALUE"
                   @update:model-value="updateSelectedFieldGroup"
                 >
-                  <NativeSelectOption :value="ROOT_FIELD_GROUP_VALUE">
-                    {{ t("field-group-none") }}
-                  </NativeSelectOption>
                   <NativeSelectOption
-                    v-for="group in groupItems"
-                    :key="group.itemId"
-                    :value="group.itemId"
+                    v-for="option in selectedFieldOwnerOptions"
+                    :key="option.value"
+                    :value="option.value"
                   >
-                    {{ group.label }}
+                    {{ option.label }}
                   </NativeSelectOption>
                 </NativeSelect>
               </label>
@@ -2567,7 +2847,7 @@ function confirmChanges() {
 
               <Locale
                 data-slot="fields-configurator-field-title-locale"
-                :model-value="selectedField.field.title"
+                :model-value="getFieldTitleValue(selectedField.field)"
                 @update:model-value="updateSelectedFieldTitle"
               />
 
@@ -2657,7 +2937,7 @@ function confirmChanges() {
               class="grid gap-4 md:grid-cols-2"
             >
               <label
-                v-if="isInteractiveField(selectedField.field)"
+                v-if="isInteractiveField(selectedField.field) || selectedField.field.type === 'slot' || selectedField.field.type === 'container'"
                 class="flex items-center justify-between gap-3 rounded-md border border-zinc-200 px-3 py-2 md:col-span-2"
               >
                 <div class="flex flex-col gap-1">
@@ -2687,7 +2967,7 @@ function confirmChanges() {
               </label>
 
               <label
-                v-if="!usesContentsOrientation || isMarkdownBodyField(selectedField.field)"
+                v-if="hasDirectFieldStyle(selectedField.field) && (!usesContentsOrientation || isMarkdownBodyField(selectedField.field) || selectedField.field.type === 'slot')"
                 class="flex flex-col gap-2"
               >
                 <span class="text-xs font-medium text-zinc-500">
@@ -2695,7 +2975,7 @@ function confirmChanges() {
                 </span>
                 <Textarea
                   data-slot="fields-configurator-field-style-input"
-                  :model-value="selectedField.field.style ?? ''"
+                  :model-value="hasDirectFieldStyle(selectedField.field) ? selectedField.field.style ?? '' : ''"
                   :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'style')] ? 'true' : void 0"
                   :placeholder="t('field-style-placeholder')"
                   class="min-h-20 font-mono text-sm"
@@ -2822,6 +3102,99 @@ function confirmChanges() {
               </label>
             </section>
 
+            <section
+              v-if="selectedField.field.type === 'container'"
+              data-slot="fields-configurator-container-options"
+              class="grid gap-4 md:grid-cols-2"
+            >
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("container-body-orientation") }}
+                </span>
+                <NativeSelect
+                  data-slot="fields-configurator-container-body-orientation-select"
+                  :model-value="selectedField.field.bodyOrientation ?? 'horizontal'"
+                  @update:model-value="updateSelectedContainerBodyOrientation"
+                >
+                  <NativeSelectOption value="horizontal">
+                    {{ t("fields-orientation-horizontal") }}
+                  </NativeSelectOption>
+                  <NativeSelectOption value="vertical">
+                    {{ t("fields-orientation-vertical") }}
+                  </NativeSelectOption>
+                  <NativeSelectOption value="floating">
+                    {{ t("fields-orientation-floating") }}
+                  </NativeSelectOption>
+                  <NativeSelectOption value="contents">
+                    {{ t("fields-orientation-contents") }}
+                  </NativeSelectOption>
+                </NativeSelect>
+              </label>
+
+              <label class="flex items-center justify-between gap-3 rounded-md border border-zinc-200 px-3 py-2">
+                <div class="flex flex-col gap-1">
+                  <span class="text-sm font-medium text-zinc-800">{{ t("container-body-bordered") }}</span>
+                  <span class="text-xs text-zinc-500">{{ t("container-body-bordered-description") }}</span>
+                </div>
+                <Switch
+                  data-slot="fields-configurator-container-body-bordered-switch"
+                  :model-value="selectedField.field.bodyBordered ?? false"
+                  @update:model-value="updateSelectedContainerBodyBordered"
+                />
+              </label>
+
+              <label class="flex flex-col gap-2 md:col-span-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("container-body-style") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-container-body-style-input"
+                  :model-value="selectedField.field.bodyStyle ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'bodyStyle')] ? 'true' : void 0"
+                  :placeholder="t('group-style-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedContainerBodyStyle"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'bodyStyle')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "bodyStyle")] }}
+                </p>
+              </label>
+
+              <div
+                data-slot="fields-configurator-container-children"
+                class="flex flex-col gap-2 md:col-span-2"
+              >
+                <p class="text-xs font-medium text-zinc-500">
+                  {{ t("field-children") }}
+                </p>
+                <div
+                  v-if="selectedContainerChildItems.length > 0"
+                  class="flex flex-col gap-1"
+                >
+                  <button
+                    v-for="item in selectedContainerChildItems"
+                    :key="item.itemId"
+                    type="button"
+                    data-slot="fields-configurator-container-child"
+                    class="rounded-md border border-zinc-200 px-3 py-2 text-left text-sm text-zinc-700 transition-colors hover:border-zinc-300 hover:bg-zinc-50"
+                    :style="{ paddingLeft: `${item.depth * 12 + 12}px` }"
+                    @click="selectItem(item.itemId)"
+                  >
+                    {{ item.label }}
+                  </button>
+                </div>
+                <p
+                  v-else
+                  class="text-xs text-zinc-500"
+                >
+                  {{ t("field-children-empty") }}
+                </p>
+              </div>
+            </section>
+
             <section
               v-if="selectedField.field.type === 'string' || selectedField.field.type === 'textarea'"
               data-slot="fields-configurator-string-options"
@@ -3421,6 +3794,7 @@ function confirmChanges() {
     "field-type-radio": "单选按钮组",
     "field-type-calendar": "日期",
     "field-type-upload": "上传",
+    "field-type-container": "容器",
     "field-type-empty": "空白",
     "field-type-slot": "插槽",
     "field-id": "字段 ID",
@@ -3438,6 +3812,8 @@ function confirmChanges() {
     "copy-field-id-failed": "复制字段 ID 失败，请检查剪贴板权限。",
     "field-group": "所属分组",
     "field-group-none": "不分组",
+    "field-children": "子字段",
+    "field-children-empty": "这个容器还没有子字段。",
     "field-label": "字段标题",
     "group-style": "分组样式表达式",
     "group-style-placeholder": "例如返回一个 style map，例如 display: grid",
@@ -3455,6 +3831,10 @@ function confirmChanges() {
     "field-style": "样式表达式",
     "field-label-style": "标签样式表达式",
     "field-content-style": "内容样式表达式",
+    "container-body-orientation": "容器内部布局",
+    "container-body-bordered": "容器内部表格式边框",
+    "container-body-bordered-description": "仅在 contents 布局下生效，用于容器内部字段网格。",
+    "container-body-style": "容器内部样式表达式",
     "field-style-placeholder": "例如 width: 100%",
     "field-hidden": "隐藏条件",
     "field-hidden-placeholder": "返回 true 时隐藏字段",
@@ -3559,6 +3939,7 @@ function confirmChanges() {
     "field-type-radio": "ラジオグループ",
     "field-type-calendar": "日付",
     "field-type-upload": "アップロード",
+    "field-type-container": "コンテナ",
     "field-type-empty": "空白",
     "field-type-slot": "スロット",
     "field-id": "フィールド ID",
@@ -3576,6 +3957,8 @@ function confirmChanges() {
     "copy-field-id-failed": "フィールド ID のコピーに失敗しました。クリップボード権限を確認してください。",
     "field-group": "所属グループ",
     "field-group-none": "グループなし",
+    "field-children": "子フィールド",
+    "field-children-empty": "このコンテナにはまだ子フィールドがありません。",
     "field-label": "フィールドラベル",
     "group-style": "グループスタイル式",
     "group-style-placeholder": "例: style map を返す式。例: display: grid",
@@ -3593,6 +3976,10 @@ function confirmChanges() {
     "field-style": "スタイル式",
     "field-label-style": "ラベルスタイル式",
     "field-content-style": "コンテンツスタイル式",
+    "container-body-orientation": "内部レイアウト",
+    "container-body-bordered": "内部テーブル枠線",
+    "container-body-bordered-description": "contents レイアウト時のみ有効で、内部フィールドグリッドに適用します。",
+    "container-body-style": "内部スタイル式",
     "field-style-placeholder": "例: width: 100%",
     "field-hidden": "非表示条件",
     "field-hidden-placeholder": "true を返すと非表示になります",
@@ -3697,6 +4084,7 @@ function confirmChanges() {
     "field-type-radio": "Radio Group",
     "field-type-calendar": "Date",
     "field-type-upload": "Upload",
+    "field-type-container": "Container",
     "field-type-empty": "Empty",
     "field-type-slot": "Slot",
     "field-id": "Field ID",
@@ -3714,6 +4102,8 @@ function confirmChanges() {
     "copy-field-id-failed": "Failed to copy the field ID. Check clipboard permissions.",
     "field-group": "Belong group",
     "field-group-none": "No group",
+    "field-children": "Child fields",
+    "field-children-empty": "This container does not have child fields yet.",
     "field-label": "Field label",
     "group-style": "Group style expression",
     "group-style-placeholder": "Return a style map, for example display: grid",
@@ -3731,6 +4121,10 @@ function confirmChanges() {
     "field-style": "Style expression",
     "field-label-style": "Label style expression",
     "field-content-style": "Content style expression",
+    "container-body-orientation": "Nested layout",
+    "container-body-bordered": "Nested table borders",
+    "container-body-bordered-description": "Only applies in contents layout for the nested field grid.",
+    "container-body-style": "Nested style expression",
     "field-style-placeholder": "For example width: 100%",
     "field-hidden": "Hidden expression",
     "field-hidden-placeholder": "Return true to hide the field",