@shwfed/nuxt 0.8.0 → 0.8.2

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

@@ -1,10 +1,15 @@
 <script setup>
 import { useSortable } from "@vueuse/integrations/useSortable";
 import { Icon } from "@iconify/vue";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, ref, toRaw, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import {
+  CalendarFieldC,
+  NumberFieldC,
+  SelectFieldC,
+  StringFieldC
+} from "../fields/schema";
 import { cn } from "../../../utils/cn";
-import { getLocalizedText } from "../../../utils/coders";
 import { Button } from "../button";
 import {
   Dialog,
@@ -14,7 +19,18 @@ import {
   DialogHeader,
   DialogTitle
 } from "../dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../dropdown-menu";
+import { IconPicker } from "../icon-picker";
+import { Input } from "../input";
 import Locale from "../locale/Locale.vue";
+import { NativeSelect, NativeSelectOption } from "../native-select";
+import { Switch } from "../switch";
+import { Textarea } from "../textarea";
 const props = defineProps({
   fields: { type: Array, required: true }
 });
@@ -22,41 +38,214 @@ const emit = defineEmits(["confirm"]);
 const open = defineModel("open", { type: Boolean, ...{
   default: false
 } });
-const { t, locale } = useI18n();
+const { t } = useI18n();
 const selectedItemId = ref("general");
 const draftFields = ref([]);
 const sortableListRef = ref(null);
 const sortableItemIds = ref([]);
+const validationErrors = ref({});
+const fieldTypeOptions = computed(() => [
+  { type: "string", label: t("field-type-string") },
+  { type: "number", label: t("field-type-number") },
+  { type: "select", label: t("field-type-select") },
+  { type: "calendar", label: t("field-type-calendar") }
+]);
 const generalItem = computed(() => ({
   id: "general",
   label: t("general")
 }));
-function getFieldLabel(field) {
-  return getLocalizedText(field.title, locale.value) ?? field.path;
+const selectedField = computed(() => draftFields.value.find((field) => field.draftId === selectedItemId.value));
+const selectedFieldValidationRules = computed(() => selectedField.value?.field.validation ?? []);
+function createDraftId() {
+  return crypto.randomUUID();
+}
+function createDefaultLocaleValue() {
+  return [{ locale: "zh", message: "" }];
+}
+function createDraftField(field) {
+  return {
+    draftId: createDraftId(),
+    field: JSON.parse(JSON.stringify(toRaw(field)))
+  };
 }
-const fieldItems = computed(() => draftFields.value.map((field) => ({
-  itemId: field.path,
-  label: getFieldLabel(field),
-  path: field.path
-})));
-const selectedField = computed(() => draftFields.value.find((field) => field.path === selectedItemId.value));
-const selectedItemLabel = computed(() => selectedField.value ? getFieldLabel(selectedField.value) : generalItem.value.label);
 function cloneFields(fields) {
-  return fields.slice();
+  return fields.map(createDraftField);
+}
+function getFieldTypeLabel(type) {
+  return t(`field-type-${type}`);
+}
+function getUnnamedFieldLabel(field) {
+  return t("unnamed-field", {
+    type: getFieldTypeLabel(field.type)
+  });
+}
+function getFieldChineseTitle(field) {
+  const zhTitle = field.title.find((item) => item.locale === "zh");
+  if (!zhTitle) {
+    return void 0;
+  }
+  const message = zhTitle.message.trim();
+  return message.length > 0 ? message : void 0;
+}
+function getFieldListLabel(field) {
+  return getFieldChineseTitle(field) ?? getUnnamedFieldLabel(field);
+}
+const fieldItems = computed(() => draftFields.value.map((item) => ({
+  itemId: item.draftId,
+  label: getFieldListLabel(item.field),
+  path: item.field.path,
+  type: item.field.type
+})));
+const selectedItemLabel = computed(() => selectedField.value ? getFieldListLabel(selectedField.value.field) : generalItem.value.label);
+const sortable = useSortable(sortableListRef, sortableItemIds);
+function getFieldErrorKey(draftId, fieldKey) {
+  return `${draftId}:${fieldKey}`;
+}
+function getValidationRuleErrorKey(draftId, index, control) {
+  return `${draftId}:validation:${index}:${control}`;
+}
+function clearError(key) {
+  Reflect.deleteProperty(validationErrors.value, key);
+}
+function clearFieldError(draftId, fieldKey) {
+  clearError(getFieldErrorKey(draftId, fieldKey));
+}
+function clearValidationRuleError(draftId, index, control) {
+  clearError(getValidationRuleErrorKey(draftId, index, control));
+}
+function clearFieldErrors(draftId) {
+  for (const key of Object.keys(validationErrors.value)) {
+    if (key.startsWith(`${draftId}:`)) {
+      Reflect.deleteProperty(validationErrors.value, key);
+    }
+  }
+}
+function clearValidationRuleErrors(draftId) {
+  for (const key of Object.keys(validationErrors.value)) {
+    if (key.startsWith(`${draftId}:validation:`)) {
+      Reflect.deleteProperty(validationErrors.value, key);
+    }
+  }
+}
+function setError(errors, key, message) {
+  if (errors[key] === void 0) {
+    errors[key] = message;
+  }
+}
+function normalizeOptionalString(value) {
+  const normalizedValue = value.trim();
+  if (normalizedValue.length === 0) {
+    return void 0;
+  }
+  return normalizedValue;
+}
+function normalizeValidationRules(validation) {
+  if (!validation || validation.length === 0) {
+    return void 0;
+  }
+  return validation.map((rule) => ({
+    expression: rule.expression.trim(),
+    message: rule.message
+  }));
+}
+function normalizeField(field) {
+  switch (field.type) {
+    case "string":
+      return {
+        ...field,
+        path: field.path.trim(),
+        icon: normalizeOptionalString(field.icon ?? ""),
+        style: normalizeOptionalString(field.style ?? ""),
+        maxLength: normalizeOptionalString(field.maxLength ?? ""),
+        hidden: normalizeOptionalString(field.hidden ?? ""),
+        disabled: normalizeOptionalString(field.disabled ?? ""),
+        discardEmptyString: field.discardEmptyString ? true : void 0,
+        validation: normalizeValidationRules(field.validation)
+      };
+    case "number":
+      return {
+        ...field,
+        path: field.path.trim(),
+        icon: normalizeOptionalString(field.icon ?? ""),
+        style: normalizeOptionalString(field.style ?? ""),
+        min: normalizeOptionalString(field.min ?? ""),
+        max: normalizeOptionalString(field.max ?? ""),
+        step: normalizeOptionalString(field.step ?? ""),
+        hidden: normalizeOptionalString(field.hidden ?? ""),
+        disabled: normalizeOptionalString(field.disabled ?? ""),
+        validation: normalizeValidationRules(field.validation)
+      };
+    case "select":
+      return {
+        ...field,
+        path: field.path.trim(),
+        icon: normalizeOptionalString(field.icon ?? ""),
+        style: normalizeOptionalString(field.style ?? ""),
+        options: field.options.trim(),
+        label: field.label.trim(),
+        value: field.value.trim(),
+        key: field.key.trim(),
+        hidden: normalizeOptionalString(field.hidden ?? ""),
+        disabled: normalizeOptionalString(field.disabled ?? ""),
+        validation: normalizeValidationRules(field.validation)
+      };
+    case "calendar":
+      return {
+        ...field,
+        path: field.path.trim(),
+        icon: normalizeOptionalString(field.icon ?? ""),
+        style: normalizeOptionalString(field.style ?? ""),
+        display: normalizeOptionalString(field.display ?? ""),
+        value: field.value.trim(),
+        disableDate: normalizeOptionalString(field.disableDate ?? ""),
+        hidden: normalizeOptionalString(field.hidden ?? ""),
+        disabled: normalizeOptionalString(field.disabled ?? ""),
+        validation: normalizeValidationRules(field.validation)
+      };
+  }
+}
+function createField(type) {
+  const title = createDefaultLocaleValue();
+  switch (type) {
+    case "string":
+      return {
+        type,
+        path: "",
+        title
+      };
+    case "number":
+      return {
+        type,
+        path: "",
+        title
+      };
+    case "select":
+      return {
+        type,
+        path: "",
+        title,
+        options: "[]",
+        label: '""',
+        value: "option",
+        key: '""'
+      };
+    case "calendar":
+      return {
+        type,
+        path: "",
+        title,
+        mode: "date",
+        value: "yyyy-MM-dd"
+      };
+  }
 }
 function resetDraftFields() {
   draftFields.value = cloneFields(props.fields);
   selectedItemId.value = "general";
+  validationErrors.value = {};
 }
-watch(() => props.fields, (fields) => {
-  if (!open.value) {
-    draftFields.value = cloneFields(fields);
-    selectedItemId.value = "general";
-  }
-}, { immediate: true });
-const sortable = useSortable(sortableListRef, sortableItemIds);
 function syncSortableItemIds() {
-  sortableItemIds.value = draftFields.value.map((field) => field.path);
+  sortableItemIds.value = draftFields.value.map((field) => field.draftId);
 }
 function moveField(fields, oldIndex, newIndex) {
   if (oldIndex < 0 || newIndex < 0 || oldIndex >= fields.length || newIndex >= fields.length) {
@@ -93,6 +282,13 @@ async function refreshSortable() {
   sortable.start();
   configureSortable();
 }
+watch(() => props.fields, (fields) => {
+  if (!open.value) {
+    draftFields.value = cloneFields(fields);
+    selectedItemId.value = "general";
+    validationErrors.value = {};
+  }
+}, { immediate: true });
 watch(draftFields, () => {
   syncSortableItemIds();
 }, { immediate: true });
@@ -103,6 +299,7 @@ watch(open, async (value) => {
     return;
   }
   sortable.stop();
+  validationErrors.value = {};
 }, { immediate: true });
 watch(fieldItems, async (items) => {
   if (selectedItemId.value === "general") {
@@ -132,27 +329,493 @@ function selectGeneral() {
 function selectItem(itemId) {
   selectedItemId.value = itemId;
 }
+function updateDraftField(draftId, updater) {
+  draftFields.value = draftFields.value.map((item) => item.draftId === draftId ? {
+    draftId: item.draftId,
+    field: updater(item.field)
+  } : item);
+}
+function addField(type) {
+  const draftField = createDraftField(createField(type));
+  draftFields.value = [...draftFields.value, draftField];
+  selectedItemId.value = draftField.draftId;
+  clearFieldErrors(draftField.draftId);
+}
 function deleteField(itemId) {
-  const deleteIndex = draftFields.value.findIndex((field) => field.path === itemId);
+  const deleteIndex = draftFields.value.findIndex((field) => field.draftId === itemId);
   if (deleteIndex < 0) {
     return;
   }
-  const nextFields = draftFields.value.filter((field) => field.path !== itemId);
+  const nextFields = draftFields.value.filter((field) => field.draftId !== itemId);
   draftFields.value = nextFields;
+  clearFieldErrors(itemId);
   if (selectedItemId.value !== itemId) {
     return;
   }
   const nextField = nextFields[deleteIndex] ?? nextFields[deleteIndex - 1];
-  selectedItemId.value = nextField?.path ?? "general";
+  selectedItemId.value = nextField?.draftId ?? "general";
 }
 function updateSelectedFieldTitle(value) {
-  if (!selectedField.value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearFieldError(selected.draftId, "title");
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    title: value
+  }));
+}
+function updateSelectedFieldPath(value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearFieldError(selected.draftId, "path");
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    path: String(value).trim()
+  }));
+}
+function updateSelectedFieldIcon(value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearFieldError(selected.draftId, "icon");
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    icon: normalizeOptionalString(String(value ?? ""))
+  }));
+}
+function updateSelectedFieldStyle(value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearFieldError(selected.draftId, "style");
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    style: normalizeOptionalString(String(value))
+  }));
+}
+function updateSelectedFieldHidden(value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearFieldError(selected.draftId, "hidden");
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    hidden: normalizeOptionalString(String(value))
+  }));
+}
+function updateSelectedFieldDisabled(value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearFieldError(selected.draftId, "disabled");
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    disabled: normalizeOptionalString(String(value))
+  }));
+}
+function updateSelectedStringDiscardEmpty(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "string") {
+    return;
+  }
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "string") {
+      return field;
+    }
+    return {
+      ...field,
+      discardEmptyString: value ? true : void 0
+    };
+  });
+}
+function updateSelectedStringMaxLength(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "string") {
+    return;
+  }
+  clearFieldError(selected.draftId, "maxLength");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "string") {
+      return field;
+    }
+    return {
+      ...field,
+      maxLength: normalizeOptionalString(String(value))
+    };
+  });
+}
+function updateSelectedNumberMin(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "number") {
+    return;
+  }
+  clearFieldError(selected.draftId, "min");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "number") {
+      return field;
+    }
+    return {
+      ...field,
+      min: normalizeOptionalString(String(value))
+    };
+  });
+}
+function updateSelectedNumberMax(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "number") {
+    return;
+  }
+  clearFieldError(selected.draftId, "max");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "number") {
+      return field;
+    }
+    return {
+      ...field,
+      max: normalizeOptionalString(String(value))
+    };
+  });
+}
+function updateSelectedNumberStep(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "number") {
+    return;
+  }
+  clearFieldError(selected.draftId, "step");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "number") {
+      return field;
+    }
+    return {
+      ...field,
+      step: normalizeOptionalString(String(value))
+    };
+  });
+}
+function updateSelectedSelectOptions(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "select") {
+    return;
+  }
+  clearFieldError(selected.draftId, "options");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "select") {
+      return field;
+    }
+    return {
+      ...field,
+      options: String(value).trim()
+    };
+  });
+}
+function updateSelectedSelectLabel(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "select") {
+    return;
+  }
+  clearFieldError(selected.draftId, "label");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "select") {
+      return field;
+    }
+    return {
+      ...field,
+      label: String(value).trim()
+    };
+  });
+}
+function updateSelectedSelectValue(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "select") {
+    return;
+  }
+  clearFieldError(selected.draftId, "value");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "select") {
+      return field;
+    }
+    return {
+      ...field,
+      value: String(value).trim()
+    };
+  });
+}
+function updateSelectedSelectKey(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "select") {
+    return;
+  }
+  clearFieldError(selected.draftId, "key");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "select") {
+      return field;
+    }
+    return {
+      ...field,
+      key: String(value).trim()
+    };
+  });
+}
+function updateSelectedCalendarMode(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "calendar") {
+    return;
+  }
+  const normalizedValue = String(value);
+  if (normalizedValue !== "year" && normalizedValue !== "month" && normalizedValue !== "date") {
+    return;
+  }
+  clearFieldError(selected.draftId, "mode");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "calendar") {
+      return field;
+    }
+    return {
+      ...field,
+      mode: normalizedValue
+    };
+  });
+}
+function updateSelectedCalendarDisplay(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "calendar") {
+    return;
+  }
+  clearFieldError(selected.draftId, "display");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "calendar") {
+      return field;
+    }
+    return {
+      ...field,
+      display: normalizeOptionalString(String(value))
+    };
+  });
+}
+function updateSelectedCalendarValue(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "calendar") {
+    return;
+  }
+  clearFieldError(selected.draftId, "value");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "calendar") {
+      return field;
+    }
+    return {
+      ...field,
+      value: String(value).trim()
+    };
+  });
+}
+function updateSelectedCalendarDisableDate(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "calendar") {
+    return;
+  }
+  clearFieldError(selected.draftId, "disableDate");
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type !== "calendar") {
+      return field;
+    }
+    return {
+      ...field,
+      disableDate: normalizeOptionalString(String(value))
+    };
+  });
+}
+function addValidationRule() {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    validation: [
+      ...field.validation ?? [],
+      {
+        expression: "",
+        message: ""
+      }
+    ]
+  }));
+}
+function updateValidationRule(index, updater) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  const validation = selected.field.validation ?? [];
+  const currentRule = validation[index];
+  if (!currentRule) {
+    return;
+  }
+  const nextValidation = validation.map((rule, ruleIndex) => ruleIndex === index ? updater(rule) : rule);
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    validation: nextValidation
+  }));
+}
+function updateSelectedValidationExpression(index, value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearValidationRuleError(selected.draftId, index, "expression");
+  updateValidationRule(index, (rule) => ({
+    ...rule,
+    expression: String(value).trim()
+  }));
+}
+function updateSelectedValidationMessage(index, value) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  clearValidationRuleError(selected.draftId, index, "message");
+  updateValidationRule(index, (rule) => ({
+    ...rule,
+    message: String(value)
+  }));
+}
+function moveValidationRule(index, offset) {
+  const selected = selectedField.value;
+  if (!selected) {
+    return;
+  }
+  const validation = selected.field.validation ?? [];
+  const nextIndex = index + offset;
+  if (!validation[index] || !validation[nextIndex]) {
+    return;
+  }
+  const nextValidation = validation.slice();
+  const currentRule = nextValidation[index];
+  const targetRule = nextValidation[nextIndex];
+  if (!currentRule || !targetRule) {
+    return;
+  }
+  nextValidation[index] = targetRule;
+  nextValidation[nextIndex] = currentRule;
+  updateDraftField(selected.draftId, (field) => ({
+    ...field,
+    validation: nextValidation
+  }));
+  clearValidationRuleErrors(selected.draftId);
+}
+function deleteValidationRule(index) {
+  const selected = selectedField.value;
+  if (!selected) {
     return;
   }
-  draftFields.value = draftFields.value.map((field) => field.path === selectedField.value?.path ? { ...field, title: value } : field);
+  const validation = selected.field.validation ?? [];
+  if (!validation[index]) {
+    return;
+  }
+  clearValidationRuleError(selected.draftId, index, "expression");
+  clearValidationRuleError(selected.draftId, index, "message");
+  updateDraftField(selected.draftId, (field) => {
+    const nextValidation = (field.validation ?? []).filter((_, ruleIndex) => ruleIndex !== index);
+    return {
+      ...field,
+      validation: nextValidation.length > 0 ? nextValidation : void 0
+    };
+  });
+  clearValidationRuleErrors(selected.draftId);
+}
+function getSchemaIssues(field) {
+  switch (field.type) {
+    case "string": {
+      const result = StringFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
+    case "number": {
+      const result = NumberFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
+    case "select": {
+      const result = SelectFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
+    case "calendar": {
+      const result = CalendarFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
+  }
+}
+function normalizeIssuePath(path) {
+  const normalizedPath = [];
+  for (const segment of path) {
+    if (typeof segment === "string" || typeof segment === "number") {
+      normalizedPath.push(segment);
+    }
+  }
+  return normalizedPath;
+}
+function getIssueErrorKey(draftId, path) {
+  const [head, second, third] = path;
+  if (head === "validation" && typeof second === "number" && (third === "expression" || third === "message")) {
+    return getValidationRuleErrorKey(draftId, second, third);
+  }
+  if (typeof head !== "string") {
+    return void 0;
+  }
+  return getFieldErrorKey(draftId, head);
+}
+function validateDraftFields() {
+  const errors = {};
+  const normalizedFields = draftFields.value.map((item) => ({
+    draftId: item.draftId,
+    field: normalizeField(item.field)
+  }));
+  const pathOwners = {};
+  let firstInvalidItemId;
+  for (const item of normalizedFields) {
+    const existingOwner = pathOwners[item.field.path];
+    if (item.field.path.length === 0) {
+      setError(errors, getFieldErrorKey(item.draftId, "path"), t("field-path-required"));
+      firstInvalidItemId = firstInvalidItemId ?? item.draftId;
+    } else if (existingOwner !== void 0) {
+      setError(errors, getFieldErrorKey(item.draftId, "path"), t("field-path-duplicate"));
+      setError(errors, getFieldErrorKey(existingOwner, "path"), t("field-path-duplicate"));
+      firstInvalidItemId = firstInvalidItemId ?? item.draftId;
+    } else {
+      pathOwners[item.field.path] = item.draftId;
+    }
+    if (item.field.type === "calendar" && item.field.value.length === 0) {
+      setError(errors, getFieldErrorKey(item.draftId, "value"), t("calendar-value-required"));
+      firstInvalidItemId = firstInvalidItemId ?? item.draftId;
+    }
+    for (const issue of getSchemaIssues(item.field)) {
+      const issueKey = getIssueErrorKey(item.draftId, normalizeIssuePath(issue.path));
+      if (!issueKey) {
+        continue;
+      }
+      setError(errors, issueKey, issue.message);
+      firstInvalidItemId = firstInvalidItemId ?? item.draftId;
+    }
+  }
+  validationErrors.value = errors;
+  if (firstInvalidItemId) {
+    selectedItemId.value = firstInvalidItemId;
+    return void 0;
+  }
+  return normalizedFields;
 }
 function confirmChanges() {
-  emit("confirm", draftFields.value.slice());
+  const normalizedFields = validateDraftFields();
+  if (!normalizedFields) {
+    return;
+  }
+  draftFields.value = normalizedFields.map((item) => createDraftField(item.field));
+  emit("confirm", normalizedFields.map((item) => item.field));
   open.value = false;
 }
 </script>
@@ -209,6 +872,7 @@ function confirmChanges() {
                   :key="item.itemId"
                   data-slot="fields-configurator-field-item"
                   :data-item-id="item.itemId"
+                  :data-field-path="item.path"
                   :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
                   :class="cn(
   'flex w-full items-center gap-2 rounded-md border p-1 transition-colors',
@@ -260,6 +924,37 @@ function confirmChanges() {
               </p>
             </div>
           </div>
+
+          <div
+            data-slot="fields-configurator-add-container"
+            class="mt-4"
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button
+                  type="button"
+                  data-slot="fields-configurator-add"
+                  size="sm"
+                  variant="default"
+                  class="w-full justify-center"
+                >
+                  <Icon icon="fluent:add-20-regular" />
+                  {{ t("add-field") }}
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  v-for="option in fieldTypeOptions"
+                  :key="option.type"
+                  :data-slot="`fields-configurator-add-item-${option.type}`"
+                  @select="addField(option.type)"
+                >
+                  {{ option.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </section>
 
         <section class="flex min-h-0 flex-col overflow-y-auto px-6 py-6">
@@ -269,18 +964,19 @@ function confirmChanges() {
           >
             {{ selectedItemLabel }}
           </h3>
+
           <p
             v-if="selectedItemId === 'general'"
             data-slot="fields-configurator-detail-description"
             class="mt-2 text-sm text-zinc-500"
           >
-            {{ t("general-placeholder") }}
+            {{ t("general-description") }}
           </p>
 
           <div
             v-if="selectedItemId === 'general'"
             data-slot="fields-configurator-general-placeholder"
-            class="mt-6 flex min-h-48 items-center justify-center rounded-lg border border-dashed border-zinc-200 bg-zinc-50/60 px-6 text-center text-sm text-zinc-400"
+            class="mt-6 rounded-lg border border-dashed border-zinc-200 bg-zinc-50/60 px-6 py-8 text-sm text-zinc-500"
           >
             {{ t("general-empty") }}
           </div>
@@ -290,6 +986,47 @@ function confirmChanges() {
             data-slot="fields-configurator-field-main"
             class="mt-6 flex flex-col gap-6"
           >
+            <section class="grid gap-4 md:grid-cols-2">
+              <label
+                data-slot="fields-configurator-field-type-section"
+                class="flex flex-col gap-2"
+              >
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-type") }}
+                </span>
+                <div
+                  data-slot="fields-configurator-field-type"
+                  class="flex h-9 items-center rounded-md border border-zinc-200 bg-zinc-50 px-3 text-sm text-zinc-600"
+                >
+                  {{ getFieldTypeLabel(selectedField.field.type) }}
+                </div>
+              </label>
+
+              <label
+                data-slot="fields-configurator-field-path-section"
+                class="flex flex-col gap-2"
+              >
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-path") }}
+                </span>
+                <Input
+                  data-slot="fields-configurator-field-path-input"
+                  :model-value="selectedField.field.path"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'path')] ? 'true' : void 0"
+                  :placeholder="t('field-path-placeholder')"
+                  class="font-mono text-sm"
+                  @update:model-value="updateSelectedFieldPath"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'path')]"
+                  data-slot="fields-configurator-field-path-error"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "path")] }}
+                </p>
+              </label>
+            </section>
+
             <section
               data-slot="fields-configurator-field-label-section"
               class="flex flex-col gap-2"
@@ -300,9 +1037,498 @@ function confirmChanges() {
 
               <Locale
                 data-slot="fields-configurator-field-title-locale"
-                :model-value="selectedField.title"
+                :model-value="selectedField.field.title"
                 @update:model-value="updateSelectedFieldTitle"
               />
+
+              <p
+                v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'title')]"
+                data-slot="fields-configurator-field-title-error"
+                class="text-xs text-red-500"
+              >
+                {{ validationErrors[getFieldErrorKey(selectedField.draftId, "title")] }}
+              </p>
+            </section>
+
+            <section
+              data-slot="fields-configurator-field-general-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("field-icon") }}
+                </span>
+                <IconPicker
+                  data-slot="fields-configurator-field-icon-picker"
+                  :model-value="selectedField.field.icon ?? ''"
+                  :invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'icon')] !== void 0"
+                  :placeholder="t('field-icon-placeholder')"
+                  @update:model-value="updateSelectedFieldIcon"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'icon')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "icon")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-style") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-style-input"
+                  :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"
+                  @update:model-value="updateSelectedFieldStyle"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'style')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "style")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-hidden") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-hidden-input"
+                  :model-value="selectedField.field.hidden ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'hidden')] ? 'true' : void 0"
+                  :placeholder="t('field-hidden-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedFieldHidden"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'hidden')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "hidden")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-disabled") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-disabled-input"
+                  :model-value="selectedField.field.disabled ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'disabled')] ? 'true' : void 0"
+                  :placeholder="t('field-disabled-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedFieldDisabled"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'disabled')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "disabled")] }}
+                </p>
+              </label>
+            </section>
+
+            <section
+              v-if="selectedField.field.type === 'string'"
+              data-slot="fields-configurator-string-options"
+              class="grid gap-4 md:grid-cols-2"
+            >
+              <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("field-discard-empty-string") }}</span>
+                  <span class="text-xs text-zinc-500">{{ t("field-discard-empty-string-description") }}</span>
+                </div>
+                <Switch
+                  data-slot="fields-configurator-field-discard-empty-switch"
+                  :model-value="selectedField.field.discardEmptyString ?? false"
+                  @update:model-value="updateSelectedStringDiscardEmpty"
+                />
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-max-length") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-max-length-input"
+                  :model-value="selectedField.field.maxLength ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'maxLength')] ? 'true' : void 0"
+                  :placeholder="t('field-max-length-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedStringMaxLength"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'maxLength')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "maxLength")] }}
+                </p>
+              </label>
+            </section>
+
+            <section
+              v-if="selectedField.field.type === 'number'"
+              data-slot="fields-configurator-number-options"
+              class="grid gap-4 md:grid-cols-3"
+            >
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-min") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-min-input"
+                  :model-value="selectedField.field.min ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'min')] ? 'true' : void 0"
+                  :placeholder="t('field-min-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedNumberMin"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'min')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "min")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-max") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-max-input"
+                  :model-value="selectedField.field.max ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'max')] ? 'true' : void 0"
+                  :placeholder="t('field-max-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedNumberMax"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'max')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "max")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-step") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-step-input"
+                  :model-value="selectedField.field.step ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'step')] ? 'true' : void 0"
+                  :placeholder="t('field-step-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedNumberStep"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'step')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "step")] }}
+                </p>
+              </label>
+            </section>
+
+            <section
+              v-if="selectedField.field.type === 'select'"
+              data-slot="fields-configurator-select-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("field-options") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-options-input"
+                  :model-value="selectedField.field.options"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'options')] ? 'true' : void 0"
+                  :placeholder="t('field-options-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedSelectOptions"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'options')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "options")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-option-label") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-option-label-input"
+                  :model-value="selectedField.field.label"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'label')] ? 'true' : void 0"
+                  :placeholder="t('field-option-label-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedSelectLabel"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'label')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "label")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-option-value") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-option-value-input"
+                  :model-value="selectedField.field.value"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'value')] ? 'true' : void 0"
+                  :placeholder="t('field-option-value-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedSelectValue"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'value')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "value")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-option-key") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-option-key-input"
+                  :model-value="selectedField.field.key"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'key')] ? 'true' : void 0"
+                  :placeholder="t('field-option-key-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedSelectKey"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'key')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "key")] }}
+                </p>
+              </label>
+            </section>
+
+            <section
+              v-if="selectedField.field.type === 'calendar'"
+              data-slot="fields-configurator-calendar-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("field-calendar-mode") }}
+                </span>
+                <NativeSelect
+                  data-slot="fields-configurator-field-calendar-mode-select"
+                  :model-value="selectedField.field.mode"
+                  @update:model-value="updateSelectedCalendarMode"
+                >
+                  <NativeSelectOption value="year">
+                    {{ t("field-calendar-mode-year") }}
+                  </NativeSelectOption>
+                  <NativeSelectOption value="month">
+                    {{ t("field-calendar-mode-month") }}
+                  </NativeSelectOption>
+                  <NativeSelectOption value="date">
+                    {{ t("field-calendar-mode-date") }}
+                  </NativeSelectOption>
+                </NativeSelect>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-calendar-display") }}
+                </span>
+                <Input
+                  data-slot="fields-configurator-field-calendar-display-input"
+                  :model-value="selectedField.field.display ?? ''"
+                  :placeholder="t('field-calendar-display-placeholder')"
+                  @update:model-value="updateSelectedCalendarDisplay"
+                />
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-calendar-value") }}
+                </span>
+                <Input
+                  data-slot="fields-configurator-field-calendar-value-input"
+                  :model-value="selectedField.field.value"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'value')] ? 'true' : void 0"
+                  :placeholder="t('field-calendar-value-placeholder')"
+                  @update:model-value="updateSelectedCalendarValue"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'value')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "value")] }}
+                </p>
+              </label>
+
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-disable-date") }}
+                </span>
+                <Textarea
+                  data-slot="fields-configurator-field-disable-date-input"
+                  :model-value="selectedField.field.disableDate ?? ''"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'disableDate')] ? 'true' : void 0"
+                  :placeholder="t('field-disable-date-placeholder')"
+                  class="min-h-20 font-mono text-sm"
+                  @update:model-value="updateSelectedCalendarDisableDate"
+                />
+                <p
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'disableDate')]"
+                  class="text-xs text-red-500"
+                >
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "disableDate")] }}
+                </p>
+              </label>
+            </section>
+
+            <section
+              data-slot="fields-configurator-validation"
+              class="flex flex-col gap-4"
+            >
+              <div class="flex items-center justify-between gap-3">
+                <div>
+                  <p class="text-xs font-medium text-zinc-500">
+                    {{ t("field-validation") }}
+                  </p>
+                  <p class="text-xs text-zinc-400">
+                    {{ t("field-validation-description") }}
+                  </p>
+                </div>
+
+                <Button
+                  type="button"
+                  data-slot="fields-configurator-validation-add"
+                  size="sm"
+                  variant="default"
+                  @click="addValidationRule"
+                >
+                  <Icon icon="fluent:add-20-regular" />
+                  {{ t("add-validation-rule") }}
+                </Button>
+              </div>
+
+              <div
+                v-if="selectedFieldValidationRules.length > 0"
+                class="flex flex-col gap-4"
+              >
+                <div
+                  v-for="(rule, index) in selectedFieldValidationRules"
+                  :key="`${selectedField.draftId}:${index}`"
+                  data-slot="fields-configurator-validation-rule"
+                  class="rounded-lg border border-zinc-200 p-4"
+                >
+                  <div class="mb-3 flex items-center justify-between gap-3">
+                    <p class="text-sm font-medium text-zinc-700">
+                      {{ t("validation-rule-title", { index: index + 1 }) }}
+                    </p>
+
+                    <div class="flex items-center gap-1">
+                      <Button
+                        type="button"
+                        size="xs"
+                        variant="ghost"
+                        data-slot="fields-configurator-validation-move-up"
+                        :disabled="index === 0"
+                        @click="moveValidationRule(index, -1)"
+                      >
+                        <Icon icon="fluent:arrow-up-20-regular" />
+                      </Button>
+
+                      <Button
+                        type="button"
+                        size="xs"
+                        variant="ghost"
+                        data-slot="fields-configurator-validation-move-down"
+                        :disabled="index === selectedFieldValidationRules.length - 1"
+                        @click="moveValidationRule(index, 1)"
+                      >
+                        <Icon icon="fluent:arrow-down-20-regular" />
+                      </Button>
+
+                      <Button
+                        type="button"
+                        size="xs"
+                        variant="ghost"
+                        data-slot="fields-configurator-validation-delete"
+                        @click="deleteValidationRule(index)"
+                      >
+                        <Icon icon="fluent:delete-20-regular" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div class="grid gap-4">
+                    <label class="flex flex-col gap-2">
+                      <span class="text-xs font-medium text-zinc-500">
+                        {{ t("validation-expression") }}
+                      </span>
+                      <Textarea
+                        data-slot="fields-configurator-validation-expression-input"
+                        :model-value="rule.expression"
+                        :aria-invalid="validationErrors[getValidationRuleErrorKey(selectedField.draftId, index, 'expression')] ? 'true' : void 0"
+                        :placeholder="t('validation-expression-placeholder')"
+                        class="min-h-20 font-mono text-sm"
+                        @update:model-value="updateSelectedValidationExpression(index, $event)"
+                      />
+                      <p
+                        v-if="validationErrors[getValidationRuleErrorKey(selectedField.draftId, index, 'expression')]"
+                        class="text-xs text-red-500"
+                      >
+                        {{ validationErrors[getValidationRuleErrorKey(selectedField.draftId, index, "expression")] }}
+                      </p>
+                    </label>
+
+                    <label class="flex flex-col gap-2">
+                      <span class="text-xs font-medium text-zinc-500">
+                        {{ t("validation-message") }}
+                      </span>
+                      <Textarea
+                        data-slot="fields-configurator-validation-message-input"
+                        :model-value="rule.message"
+                        :aria-invalid="validationErrors[getValidationRuleErrorKey(selectedField.draftId, index, 'message')] ? 'true' : void 0"
+                        :placeholder="t('validation-message-placeholder')"
+                        class="min-h-20 text-sm"
+                        @update:model-value="updateSelectedValidationMessage(index, $event)"
+                      />
+                      <p
+                        v-if="validationErrors[getValidationRuleErrorKey(selectedField.draftId, index, 'message')]"
+                        class="text-xs text-red-500"
+                      >
+                        {{ validationErrors[getValidationRuleErrorKey(selectedField.draftId, index, "message")] }}
+                      </p>
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <p
+                v-else
+                data-slot="fields-configurator-validation-empty"
+                class="rounded-lg border border-dashed border-zinc-200 px-4 py-6 text-sm text-zinc-400"
+              >
+                {{ t("no-validation-rules") }}
+              </p>
             </section>
           </div>
         </section>
@@ -337,10 +1563,68 @@ function confirmChanges() {
   "zh": {
     "configure-fields": "配置字段",
     "configure-fields-description": "在这里浏览通用项和字段配置项。",
+    "field-list": "字段列表",
     "general": "通用",
-    "general-placeholder": "这里会放置字段集合的通用配置。",
-    "general-empty": "通用配置区域预留中。",
-    "field-label": "Label",
+    "general-description": "当前没有可保存的字段集合通用配置。",
+    "general-empty": "字段集合的通用配置目前由宿主组件决定，这里只配置字段自身。",
+    "add-field": "新增字段",
+    "field-type": "字段类型",
+    "field-type-string": "文本",
+    "field-type-number": "数字",
+    "field-type-select": "选择",
+    "field-type-calendar": "日期",
+    "field-path": "字段路径",
+    "field-path-placeholder": "例如 profile.name",
+    "field-path-required": "字段路径不能为空",
+    "field-path-duplicate": "字段路径不能重复",
+    "field-label": "字段标题",
+    "field-icon": "图标",
+    "field-icon-placeholder": "例如 fluent:person-20-regular",
+    "field-style": "样式表达式",
+    "field-style-placeholder": "例如 width: 100%",
+    "field-hidden": "隐藏条件",
+    "field-hidden-placeholder": "返回 true 时隐藏字段",
+    "field-disabled": "禁用条件",
+    "field-disabled-placeholder": "返回 true 时禁用字段",
+    "field-discard-empty-string": "保留空字符串",
+    "field-discard-empty-string-description": "开启后，清空输入时仍保存空字符串。",
+    "field-max-length": "最大长度",
+    "field-max-length-placeholder": "例如 100",
+    "field-min": "最小值",
+    "field-min-placeholder": "例如 0.0",
+    "field-max": "最大值",
+    "field-max-placeholder": "例如 100.0",
+    "field-step": "步长",
+    "field-step-placeholder": "例如 0.5",
+    "field-options": "候选项表达式",
+    "field-options-placeholder": "例如 users",
+    "field-option-label": "选项标题表达式",
+    "field-option-label-placeholder": "例如 option.name",
+    "field-option-value": "选项值表达式",
+    "field-option-value-placeholder": "例如 option.id",
+    "field-option-key": "选项 key 表达式",
+    "field-option-key-placeholder": "例如 string(option.id)",
+    "field-calendar-mode": "日期精度",
+    "field-calendar-mode-year": "年",
+    "field-calendar-mode-month": "年月",
+    "field-calendar-mode-date": "年月日",
+    "field-calendar-display": "展示格式",
+    "field-calendar-display-placeholder": "例如 yyyy年MM月dd日",
+    "field-calendar-value": "存储格式",
+    "field-calendar-value-placeholder": "例如 yyyy-MM-dd",
+    "calendar-value-required": "日期存储格式不能为空",
+    "field-disable-date": "禁用日期条件",
+    "field-disable-date-placeholder": "返回 true 时禁用该日期",
+    "field-validation": "校验规则",
+    "field-validation-description": "字段失焦时按顺序执行，命中第一个失败规则后停止。",
+    "add-validation-rule": "新增规则",
+    "validation-rule-title": "规则 {index}",
+    "validation-expression": "校验表达式",
+    "validation-expression-placeholder": "返回 false 时展示下面的消息",
+    "validation-message": "失败消息",
+    "validation-message-placeholder": "支持 Markdown 与双花括号表达式",
+    "no-validation-rules": "暂未配置校验规则。",
+    "unnamed-field": "未命名{type}字段",
     "no-fields": "还没有字段。",
     "drag-field": "拖拽调整字段顺序：{field}",
     "delete-field": "删除字段：{field}",
@@ -350,10 +1634,68 @@ function confirmChanges() {
   "ja": {
     "configure-fields": "フィールドを設定",
     "configure-fields-description": "共通項目とフィールド設定をここで確認できます。",
+    "field-list": "フィールド一覧",
     "general": "共通",
-    "general-placeholder": "ここにはフィールド群の共通設定を配置します。",
-    "general-empty": "共通設定エリアはまだ準備中です。",
-    "field-label": "Label",
+    "general-description": "現在、保存できるフィールド群の共通設定はありません。",
+    "general-empty": "フィールド群の共通設定はホスト側で管理され、この画面では各フィールドのみ編集できます。",
+    "add-field": "フィールドを追加",
+    "field-type": "フィールド種別",
+    "field-type-string": "テキスト",
+    "field-type-number": "数値",
+    "field-type-select": "選択",
+    "field-type-calendar": "日付",
+    "field-path": "フィールドパス",
+    "field-path-placeholder": "例: profile.name",
+    "field-path-required": "フィールドパスは必須です",
+    "field-path-duplicate": "フィールドパスは重複できません",
+    "field-label": "フィールドラベル",
+    "field-icon": "アイコン",
+    "field-icon-placeholder": "例: fluent:person-20-regular",
+    "field-style": "スタイル式",
+    "field-style-placeholder": "例: width: 100%",
+    "field-hidden": "非表示条件",
+    "field-hidden-placeholder": "true を返すと非表示になります",
+    "field-disabled": "無効化条件",
+    "field-disabled-placeholder": "true を返すと無効になります",
+    "field-discard-empty-string": "空文字列を保持",
+    "field-discard-empty-string-description": "有効にすると、入力を空にしても空文字列を保存します。",
+    "field-max-length": "最大長",
+    "field-max-length-placeholder": "例: 100",
+    "field-min": "最小値",
+    "field-min-placeholder": "例: 0.0",
+    "field-max": "最大値",
+    "field-max-placeholder": "例: 100.0",
+    "field-step": "ステップ",
+    "field-step-placeholder": "例: 0.5",
+    "field-options": "候補式",
+    "field-options-placeholder": "例: users",
+    "field-option-label": "候補ラベル式",
+    "field-option-label-placeholder": "例: option.name",
+    "field-option-value": "候補値式",
+    "field-option-value-placeholder": "例: option.id",
+    "field-option-key": "候補 key 式",
+    "field-option-key-placeholder": "例: string(option.id)",
+    "field-calendar-mode": "日付粒度",
+    "field-calendar-mode-year": "年",
+    "field-calendar-mode-month": "年月",
+    "field-calendar-mode-date": "年月日",
+    "field-calendar-display": "表示形式",
+    "field-calendar-display-placeholder": "例: yyyy年MM月dd日",
+    "field-calendar-value": "保存形式",
+    "field-calendar-value-placeholder": "例: yyyy-MM-dd",
+    "calendar-value-required": "日付の保存形式は必須です",
+    "field-disable-date": "無効日条件",
+    "field-disable-date-placeholder": "true を返す日付を無効化します",
+    "field-validation": "検証ルール",
+    "field-validation-description": "フォーカスを外したときに順番に評価し、最初の失敗で停止します。",
+    "add-validation-rule": "ルールを追加",
+    "validation-rule-title": "ルール {index}",
+    "validation-expression": "検証式",
+    "validation-expression-placeholder": "false を返すと下のメッセージを表示します",
+    "validation-message": "失敗メッセージ",
+    "validation-message-placeholder": "Markdown と二重波括弧式を利用できます",
+    "no-validation-rules": "検証ルールはまだありません。",
+    "unnamed-field": "未命名の{type}フィールド",
     "no-fields": "フィールドがありません。",
     "drag-field": "{field} の順序をドラッグで変更",
     "delete-field": "{field} を削除",
@@ -363,10 +1705,68 @@ function confirmChanges() {
   "en": {
     "configure-fields": "Configure Fields",
     "configure-fields-description": "Browse the shared and field-level settings here.",
+    "field-list": "Field list",
     "general": "General",
-    "general-placeholder": "Shared settings for this field group will live here.",
-    "general-empty": "The shared settings area is reserved for now.",
-    "field-label": "Label",
+    "general-description": "There is no shared field-group configuration to save here.",
+    "general-empty": "Field-group level settings are owned by the host. This dialog only edits fields.",
+    "add-field": "Add field",
+    "field-type": "Field type",
+    "field-type-string": "Text",
+    "field-type-number": "Number",
+    "field-type-select": "Select",
+    "field-type-calendar": "Date",
+    "field-path": "Field path",
+    "field-path-placeholder": "For example profile.name",
+    "field-path-required": "Field path is required",
+    "field-path-duplicate": "Field path must be unique",
+    "field-label": "Field label",
+    "field-icon": "Icon",
+    "field-icon-placeholder": "For example fluent:person-20-regular",
+    "field-style": "Style expression",
+    "field-style-placeholder": "For example width: 100%",
+    "field-hidden": "Hidden expression",
+    "field-hidden-placeholder": "Return true to hide the field",
+    "field-disabled": "Disabled expression",
+    "field-disabled-placeholder": "Return true to disable the field",
+    "field-discard-empty-string": "Keep empty string",
+    "field-discard-empty-string-description": "When enabled, clearing the input still stores an empty string.",
+    "field-max-length": "Max length",
+    "field-max-length-placeholder": "For example 100",
+    "field-min": "Min",
+    "field-min-placeholder": "For example 0.0",
+    "field-max": "Max",
+    "field-max-placeholder": "For example 100.0",
+    "field-step": "Step",
+    "field-step-placeholder": "For example 0.5",
+    "field-options": "Options expression",
+    "field-options-placeholder": "For example users",
+    "field-option-label": "Option label expression",
+    "field-option-label-placeholder": "For example option.name",
+    "field-option-value": "Option value expression",
+    "field-option-value-placeholder": "For example option.id",
+    "field-option-key": "Option key expression",
+    "field-option-key-placeholder": "For example string(option.id)",
+    "field-calendar-mode": "Date precision",
+    "field-calendar-mode-year": "Year",
+    "field-calendar-mode-month": "Month",
+    "field-calendar-mode-date": "Date",
+    "field-calendar-display": "Display format",
+    "field-calendar-display-placeholder": "For example yyyy-MM-dd",
+    "field-calendar-value": "Storage format",
+    "field-calendar-value-placeholder": "For example yyyy-MM-dd",
+    "calendar-value-required": "Storage format is required",
+    "field-disable-date": "Disabled date expression",
+    "field-disable-date-placeholder": "Return true to disable the date",
+    "field-validation": "Validation rules",
+    "field-validation-description": "Rules run on blur in order and stop at the first failure.",
+    "add-validation-rule": "Add rule",
+    "validation-rule-title": "Rule {index}",
+    "validation-expression": "Validation expression",
+    "validation-expression-placeholder": "Return false to show the message below",
+    "validation-message": "Failure message",
+    "validation-message-placeholder": "Supports Markdown and double-curly expressions",
+    "no-validation-rules": "No validation rules yet.",
+    "unnamed-field": "Untitled {type} field",
     "no-fields": "No fields yet.",
     "drag-field": "Drag to reorder field {field}",
     "delete-field": "Delete field {field}",