@shwfed/nuxt 0.11.49 → 0.11.51

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

@@ -7,7 +7,6 @@ import { computed, nextTick, ref, toRaw, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   CalendarFieldC,
-  ContainerFieldC,
   EmptyFieldC,
   FieldGroupC,
   FieldGroupStyleC,
@@ -47,8 +46,6 @@ 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 }
 });
@@ -81,7 +78,6 @@ 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") }
 ]);
@@ -90,83 +86,28 @@ 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 = findDraftField(draftFields.value, selectedItemId.value);
+  const rootField = draftFields.value.find((item) => item.draftId === selectedItemId.value);
   if (rootField) {
     return rootField;
   }
   for (const group of draftGroups.value) {
-    const field = findDraftField(group.fields, selectedItemId.value);
+    const field = group.fields.find((item) => item.draftId === selectedItemId.value);
     if (field) {
       return field;
     }
   }
   return void 0;
 });
-const selectedFieldOwner = computed(() => findFieldOwnerByDraftId(selectedItemId.value));
+const selectedFieldGroup = computed(() => {
+  for (const group of draftGroups.value) {
+    if (group.fields.some((item) => item.draftId === selectedItemId.value)) {
+      return group;
+    }
+  }
+  return void 0;
+});
 const usesContentsOrientation = computed(() => draftOrientation.value === "contents");
 const selectedFieldValidationRules = computed(() => {
   const field = selectedField.value?.field;
@@ -188,13 +129,9 @@ function createDefaultLocaleValue() {
   return [{ locale: "zh", message: "" }];
 }
 function createDraftField(field) {
-  if (field.type === "container") {
-    return createContainerDraftField(field);
-  }
   return {
     draftId: createDraftId(),
-    field: cloneValue(field),
-    children: []
+    field: JSON.parse(JSON.stringify(toRaw(field)))
   };
 }
 function cloneFields(fields) {
@@ -203,11 +140,11 @@ function cloneFields(fields) {
 function createDraftGroup(group) {
   return {
     draftId: createDraftId(),
-    group: cloneValue({
+    group: JSON.parse(JSON.stringify(toRaw({
       id: group.id,
       style: group.style,
       fields: []
-    }),
+    }))),
     fields: cloneFields(group.fields)
   };
 }
@@ -227,7 +164,7 @@ function getFieldTypeLabel(type) {
   return t(`field-type-${type}`);
 }
 function isPassiveField(field) {
-  return field.type === "empty";
+  return field.type === "slot" || field.type === "empty";
 }
 function isMarkdownField(field) {
   return field.type === "markdown";
@@ -239,42 +176,33 @@ function isMarkdownContentField(field) {
   return isMarkdownField(field) || isMarkdownBodyField(field);
 }
 function hasFieldLabel(field) {
-  return field.type !== "empty" && !isMarkdownBodyField(field);
+  return !isPassiveField(field) && !isMarkdownBodyField(field);
 }
 function supportsFieldCellStyles(field) {
-  return field.type !== "empty" && !isMarkdownBodyField(field);
+  return !isPassiveField(field) && !isMarkdownBodyField(field);
 }
 function isPathlessField(field) {
-  return field.type === "slot" || field.type === "empty" || isMarkdownContentField(field) || field.type === "container";
+  return isPassiveField(field) || isMarkdownContentField(field);
 }
 function isInteractiveField(field) {
   return !isPathlessField(field);
 }
-function getSlotFieldLabel(field) {
-  return getFieldChineseTitle(field) ?? getFieldTypeLabel("slot");
+function getSlotFieldLabel(_) {
+  return 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;
   }
@@ -285,9 +213,6 @@ function getFieldListLabel(field) {
   if (field.type === "slot") {
     return getSlotFieldLabel(field);
   }
-  if (field.type === "container") {
-    return getContainerFieldLabel(field);
-  }
   if (field.type === "empty") {
     return getEmptyFieldLabel(field);
   }
@@ -298,49 +223,32 @@ function getGroupListLabel(index) {
     index: index + 1
   });
 }
-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 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
+})));
 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: flattenFieldItems(group.fields, 0, group.draftId)
+    fields
   };
 }));
-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;
@@ -371,52 +279,6 @@ 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}`;
 }
@@ -585,27 +447,8 @@ 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,
@@ -679,14 +522,6 @@ function createField(type) {
         path: "",
         title
       };
-    case "container":
-      return {
-        id,
-        type,
-        hideLabel: void 0,
-        title,
-        fields: []
-      };
     case "empty":
       return {
         id,
@@ -734,120 +569,6 @@ 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;
 }
@@ -883,41 +604,84 @@ function reorderRootFields(oldIndex, newIndex) {
   draftFields.value = moveField(draftFields.value, oldIndex, newIndex);
 }
 function moveFieldBetweenGroups(sourceGroupDraftId, targetGroupDraftId, fieldDraftId, newIndex) {
-  const movedField = removeFieldFromOwner({
-    kind: "group",
-    draftId: sourceGroupDraftId
-  }, fieldDraftId);
+  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;
+  });
   if (!movedField) {
     return;
   }
-  insertFieldIntoOwner({
-    kind: "group",
-    draftId: targetGroupDraftId
-  }, movedField, newIndex);
+  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
+    };
+  });
 }
 function moveFieldToRoot(sourceGroupDraftId, fieldDraftId, newIndex) {
-  const movedField = removeFieldFromOwner({
-    kind: "group",
-    draftId: sourceGroupDraftId
-  }, fieldDraftId);
+  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
+    };
+  });
   if (!movedField) {
     return;
   }
-  insertFieldIntoOwner({
-    kind: "root"
-  }, movedField, newIndex);
+  const nextFields = draftFields.value.slice();
+  const insertIndex = Math.min(Math.max(newIndex, 0), nextFields.length);
+  nextFields.splice(insertIndex, 0, movedField);
+  draftFields.value = nextFields;
 }
 function moveRootFieldToGroup(targetGroupDraftId, fieldDraftId, newIndex) {
-  const movedField = removeFieldFromOwner({
-    kind: "root"
-  }, fieldDraftId);
+  const movedField = draftFields.value.find((field) => field.draftId === fieldDraftId);
   if (!movedField) {
     return;
   }
-  insertFieldIntoOwner({
-    kind: "group",
-    draftId: targetGroupDraftId
-  }, movedField, newIndex);
+  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
+    };
+  });
 }
 async function refreshSortable() {
   for (const sortable of sortables.value) {
@@ -1069,14 +833,14 @@ function updateDraftStyle(value) {
   draftStyle.value = normalizeOptionalString(String(value));
 }
 function updateDraftField(draftId, updater) {
-  draftFields.value = mapDraftFields(draftFields.value, (item) => item.draftId === draftId ? {
-    ...item,
+  draftFields.value = draftFields.value.map((item) => item.draftId === draftId ? {
+    draftId: item.draftId,
     field: updater(item.field)
   } : item);
   draftGroups.value = draftGroups.value.map((group) => ({
     ...group,
-    fields: mapDraftFields(group.fields, (item) => item.draftId === draftId ? {
-      ...item,
+    fields: group.fields.map((item) => item.draftId === draftId ? {
+      draftId: item.draftId,
       field: updater(item.field)
     } : item)
   }));
@@ -1097,39 +861,38 @@ function updateSelectedGroupStyle(value) {
 }
 function updateSelectedFieldGroup(value) {
   const selected = selectedField.value;
-  const sourceOwner = selectedFieldOwner.value;
-  const targetOwner = getFieldOwnerFromValue(value);
-  if (!selected || !sourceOwner || !targetOwner) {
+  const sourceGroup = selectedFieldGroup.value;
+  if (!selected) {
     return;
   }
-  if (getFieldOwnerValue(sourceOwner) === getFieldOwnerValue(targetOwner)) {
+  const targetGroupDraftId = String(value);
+  if (!targetGroupDraftId) {
     return;
   }
-  const movedField = removeFieldFromOwner(sourceOwner, selected.draftId);
-  if (!movedField) {
+  if (targetGroupDraftId === ROOT_FIELD_GROUP_VALUE) {
+    if (!sourceGroup) {
+      return;
+    }
+    moveFieldToRoot(sourceGroup.draftId, selected.draftId, draftFields.value.length);
     return;
   }
-  insertFieldIntoOwner(targetOwner, movedField, getOwnerItemCount(targetOwner));
-}
-function getInsertionOwner() {
-  if (selectedField.value?.field.type === "container") {
-    return {
-      kind: "container",
-      draftId: selectedField.value.draftId
-    };
+  if (sourceGroup && targetGroupDraftId === sourceGroup.draftId) {
+    return;
   }
+  if (!sourceGroup) {
+    moveRootFieldToGroup(targetGroupDraftId, selected.draftId, Number.MAX_SAFE_INTEGER);
+    return;
+  }
+  moveFieldBetweenGroups(sourceGroup.draftId, targetGroupDraftId, selected.draftId, Number.MAX_SAFE_INTEGER);
+}
+function getInsertionGroupDraftId() {
   if (selectedGroup.value) {
-    return {
-      kind: "group",
-      draftId: selectedGroup.value.draftId
-    };
+    return selectedGroup.value.draftId;
   }
-  if (selectedFieldOwner.value) {
-    return selectedFieldOwner.value;
+  if (selectedFieldGroup.value) {
+    return selectedFieldGroup.value.draftId;
   }
-  return {
-    kind: "root"
-  };
+  return void 0;
 }
 function addGroup() {
   const draftGroup = createDraftGroup(createGroup());
@@ -1139,10 +902,36 @@ function addGroup() {
 }
 function addField(type) {
   const draftField = createDraftField(createField(type));
-  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);
+  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];
+  }
   selectedItemId.value = draftField.draftId;
   clearFieldErrors(draftField.draftId);
 }
@@ -1157,7 +946,7 @@ function deleteGroup(itemId) {
   if (deletedGroup) {
     clearFieldErrors(deletedGroup.draftId);
     for (const field of deletedGroup.fields) {
-      clearNestedFieldErrors(field);
+      clearFieldErrors(field.draftId);
     }
   }
   if (selectedItemId.value !== itemId) {
@@ -1167,33 +956,30 @@ function deleteGroup(itemId) {
   selectedItemId.value = nextGroup?.draftId ?? "general";
 }
 function deleteField(itemId) {
-  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];
+  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
+    };
+  });
   clearFieldErrors(itemId);
   if (selectedItemId.value === itemId) {
-    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";
+    selectedItemId.value = nextSelectedItemId ?? "general";
   }
 }
 function handleAddItem(type) {
@@ -1206,9 +992,6 @@ function handleAddItem(type) {
 function isFieldLabelConfigurable(field) {
   return hasFieldLabel(field);
 }
-function hasDirectFieldStyle(field) {
-  return field.type !== "container";
-}
 function getFieldHideLabelValue(field) {
   if (!isFieldLabelConfigurable(field)) {
     return false;
@@ -1296,51 +1079,14 @@ function updateSelectedFieldPath(value) {
 }
 function updateSelectedFieldStyle(value) {
   const selected = selectedField.value;
-  if (!selected || !hasDirectFieldStyle(selected.field)) {
+  if (!selected) {
     return;
   }
   clearFieldError(selected.draftId, "style");
-  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,
-    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" ? {
+  updateDraftField(selected.draftId, (field) => ({
     ...field,
-    bodyStyle: normalizeOptionalString(String(value))
-  } : field);
+    style: normalizeOptionalString(String(value))
+  }));
 }
 function updateSelectedFieldLabelStyle(value) {
   const selected = selectedField.value;
@@ -1399,17 +1145,17 @@ function updateSelectedFieldInitialValue(value) {
 }
 function updateSelectedFieldRequired(value) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type !== "slot" && selected.field.type !== "container" && !isInteractiveField(selected.field)) {
+  if (!selected || !isInteractiveField(selected.field)) {
     return;
   }
   updateDraftField(selected.draftId, (field) => {
-    if (field.type === "slot" || field.type === "container" || isInteractiveField(field)) {
-      return {
-        ...field,
-        required: value ? true : void 0
-      };
+    if (!isInteractiveField(field)) {
+      return field;
     }
-    return field;
+    return {
+      ...field,
+      required: value ? true : void 0
+    };
   });
 }
 function updateSelectedStringDiscardEmpty(value) {
@@ -1881,10 +1627,6 @@ 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;
@@ -1920,32 +1662,9 @@ function normalizeGroup(group) {
   return {
     ...group,
     style: normalizeOptionalString(group.style ?? ""),
-    fields: group.fields
+    fields: group.fields.map((field) => normalizeField(field))
   };
 }
-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) {
@@ -1983,21 +1702,25 @@ 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) => normalizeDraftField(item));
+  const normalizedFields = draftFields.value.map((item) => ({
+    draftId: item.draftId,
+    field: normalizeField(item.field)
+  }));
   const normalizedGroups = draftGroups.value.map((group) => ({
     draftId: group.draftId,
     group: normalizeGroup({
       ...group.group,
-      fields: group.fields.map((item) => buildFieldFromDraft(normalizeDraftField(item)))
+      fields: group.fields.map((item) => item.field)
     }),
-    fields: group.fields.map((item) => normalizeDraftField(item))
+    fields: group.fields.map((item) => ({
+      draftId: item.draftId,
+      field: normalizeField(item.field)
+    }))
   }));
   const groupIdOwners = {};
   const idOwners = {};
@@ -2059,10 +1782,10 @@ function buildDraftConfig() {
     return void 0;
   }
   const nextBody = {
-    fields: validatedDraftState.normalizedFields.map((item) => buildFieldFromDraft(item)),
+    fields: validatedDraftState.normalizedFields.map((item) => item.field),
     groups: validatedDraftState.normalizedGroups.map((group) => ({
       ...group.group,
-      fields: group.fields.map((item) => buildFieldFromDraft(item))
+      fields: group.fields.map((item) => item.field)
     }))
   };
   if (draftOrientation.value !== "horizontal") {
@@ -2147,12 +1870,10 @@ 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` \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",
+    "- `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",
     "- `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 `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 `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",
     "- \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");
 }
@@ -2164,12 +1885,10 @@ 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` \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",
+    "- `slot` \u4E0E `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 `empty` \u4E0E `markdown-body` \u5916\uFF0C\u5176\u5B83\u5E26\u6807\u7B7E\u5B57\u6BB5\u90FD\u53EF\u4EE5\u8BBE\u7F6E `hideLabel`\u3002",
+    "- \u9664 `slot`\u3001`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"
@@ -2328,10 +2047,10 @@ function confirmChanges() {
   if (!result) {
     return;
   }
-  draftFields.value = result.normalizedFields.map((item) => createDraftField(buildFieldFromDraft(item)));
+  draftFields.value = result.normalizedFields.map((item) => createDraftField(item.field));
   draftGroups.value = result.normalizedGroups.map((group) => createDraftGroup({
     ...group.group,
-    fields: group.fields.map((item) => buildFieldFromDraft(item))
+    fields: group.fields.map((item) => item.field)
   }));
   emit("confirm", result.config);
   open.value = false;
@@ -2441,7 +2160,6 @@ 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'
@@ -2554,9 +2272,8 @@ 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 transition-colors',
+  'flex min-w-0 items-center gap-2 rounded-md border p-1 pl-4 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'
 )"
                     >
@@ -2822,15 +2539,18 @@ function confirmChanges() {
                 </span>
                 <NativeSelect
                   data-slot="fields-configurator-field-group-select"
-                  :model-value="selectedFieldOwner ? getFieldOwnerValue(selectedFieldOwner) : ROOT_FIELD_GROUP_VALUE"
+                  :model-value="selectedFieldGroup?.draftId ?? ROOT_FIELD_GROUP_VALUE"
                   @update:model-value="updateSelectedFieldGroup"
                 >
+                  <NativeSelectOption :value="ROOT_FIELD_GROUP_VALUE">
+                    {{ t("field-group-none") }}
+                  </NativeSelectOption>
                   <NativeSelectOption
-                    v-for="option in selectedFieldOwnerOptions"
-                    :key="option.value"
-                    :value="option.value"
+                    v-for="group in groupItems"
+                    :key="group.itemId"
+                    :value="group.itemId"
                   >
-                    {{ option.label }}
+                    {{ group.label }}
                   </NativeSelectOption>
                 </NativeSelect>
               </label>
@@ -2847,7 +2567,7 @@ function confirmChanges() {
 
               <Locale
                 data-slot="fields-configurator-field-title-locale"
-                :model-value="getFieldTitleValue(selectedField.field)"
+                :model-value="selectedField.field.title"
                 @update:model-value="updateSelectedFieldTitle"
               />
 
@@ -2937,7 +2657,7 @@ function confirmChanges() {
               class="grid gap-4 md:grid-cols-2"
             >
               <label
-                v-if="isInteractiveField(selectedField.field) || selectedField.field.type === 'slot' || selectedField.field.type === 'container'"
+                v-if="isInteractiveField(selectedField.field)"
                 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">
@@ -2967,7 +2687,7 @@ function confirmChanges() {
               </label>
 
               <label
-                v-if="hasDirectFieldStyle(selectedField.field) && (!usesContentsOrientation || isMarkdownBodyField(selectedField.field) || selectedField.field.type === 'slot')"
+                v-if="!usesContentsOrientation || isMarkdownBodyField(selectedField.field)"
                 class="flex flex-col gap-2"
               >
                 <span class="text-xs font-medium text-zinc-500">
@@ -2975,7 +2695,7 @@ function confirmChanges() {
                 </span>
                 <Textarea
                   data-slot="fields-configurator-field-style-input"
-                  :model-value="hasDirectFieldStyle(selectedField.field) ? selectedField.field.style ?? '' : ''"
+                  :model-value="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"
@@ -3102,99 +2822,6 @@ 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"
@@ -3794,7 +3421,6 @@ function confirmChanges() {
     "field-type-radio": "单选按钮组",
     "field-type-calendar": "日期",
     "field-type-upload": "上传",
-    "field-type-container": "容器",
     "field-type-empty": "空白",
     "field-type-slot": "插槽",
     "field-id": "字段 ID",
@@ -3812,8 +3438,6 @@ 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",
@@ -3831,10 +3455,6 @@ 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 时隐藏字段",
@@ -3939,7 +3559,6 @@ function confirmChanges() {
     "field-type-radio": "ラジオグループ",
     "field-type-calendar": "日付",
     "field-type-upload": "アップロード",
-    "field-type-container": "コンテナ",
     "field-type-empty": "空白",
     "field-type-slot": "スロット",
     "field-id": "フィールド ID",
@@ -3957,8 +3576,6 @@ 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",
@@ -3976,10 +3593,6 @@ 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 を返すと非表示になります",
@@ -4084,7 +3697,6 @@ 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",
@@ -4102,8 +3714,6 @@ 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",
@@ -4121,10 +3731,6 @@ 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",