@shwfed/nuxt 0.9.2 → 0.10.0

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

@@ -1,12 +1,16 @@
 <script setup>
+import { useNuxtApp } from "#app";
+import z, {} from "zod";
 import { useSortable } from "@vueuse/integrations/useSortable";
 import { Icon } from "@iconify/vue";
 import { computed, nextTick, ref, toRaw, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   CalendarFieldC,
+  FieldsConfigC,
   NumberFieldC,
   SelectFieldC,
+  SlotFieldC,
   StringFieldC,
   FieldsStyleC
 } from "../fields/schema";
@@ -26,7 +30,6 @@ import {
   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";
@@ -39,9 +42,11 @@ const emit = defineEmits(["confirm"]);
 const open = defineModel("open", { type: Boolean, ...{
   default: false
 } });
+const { $toast } = useNuxtApp();
 const { t } = useI18n();
 const draftOrientation = ref("horizontal");
 const draftStyle = ref();
+const search = ref("");
 const selectedItemId = ref("general");
 const draftFields = ref([]);
 const sortableListRef = ref(null);
@@ -51,17 +56,28 @@ 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") }
+  { type: "calendar", label: t("field-type-calendar") },
+  { type: "slot", label: t("field-type-slot") }
 ]);
 const generalItem = computed(() => ({
   id: "general",
   label: t("general")
 }));
+const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase());
 const selectedField = computed(() => draftFields.value.find((field) => field.draftId === selectedItemId.value));
-const selectedFieldValidationRules = computed(() => selectedField.value?.field.validation ?? []);
+const selectedFieldValidationRules = computed(() => {
+  const field = selectedField.value?.field;
+  if (!field || field.type === "slot") {
+    return [];
+  }
+  return field.validation ?? [];
+});
 function createDraftId() {
   return crypto.randomUUID();
 }
+function createFieldId() {
+  return crypto.randomUUID();
+}
 function createDefaultLocaleValue() {
   return [{ locale: "zh", message: "" }];
 }
@@ -83,12 +99,20 @@ function normalizeOrientation(value) {
 function getFieldTypeLabel(type) {
   return t(`field-type-${type}`);
 }
+function getSlotFieldLabel(field) {
+  return t("slot-field", {
+    id: field.id.slice(0, 8)
+  });
+}
 function getUnnamedFieldLabel(field) {
   return t("unnamed-field", {
     type: getFieldTypeLabel(field.type)
   });
 }
 function getFieldChineseTitle(field) {
+  if (field.type === "slot") {
+    return void 0;
+  }
   const zhTitle = field.title.find((item) => item.locale === "zh");
   if (!zhTitle) {
     return void 0;
@@ -97,14 +121,28 @@ function getFieldChineseTitle(field) {
   return message.length > 0 ? message : void 0;
 }
 function getFieldListLabel(field) {
+  if (field.type === "slot") {
+    return getSlotFieldLabel(field);
+  }
   return getFieldChineseTitle(field) ?? getUnnamedFieldLabel(field);
 }
 const fieldItems = computed(() => draftFields.value.map((item) => ({
   itemId: item.draftId,
+  fieldId: item.field.id,
   label: getFieldListLabel(item.field),
-  path: item.field.path,
+  path: item.field.type === "slot" ? void 0 : item.field.path,
+  searchMeta: item.field.type === "slot" ? item.field.id : [item.field.path, item.field.id].filter(Boolean).join(" "),
   type: item.field.type
 })));
+const filteredFieldItems = computed(() => {
+  if (!normalizedSearch.value) {
+    return fieldItems.value;
+  }
+  return fieldItems.value.filter((item) => {
+    const haystack = [item.label, item.searchMeta].filter(Boolean).join(" ").toLocaleLowerCase();
+    return haystack.includes(normalizedSearch.value);
+  });
+});
 const selectedItemLabel = computed(() => selectedField.value ? getFieldListLabel(selectedField.value.field) : generalItem.value.label);
 const sortable = useSortable(sortableListRef, sortableItemIds);
 function getFieldErrorKey(draftId, fieldKey) {
@@ -214,25 +252,34 @@ function normalizeField(field) {
         disabled: normalizeOptionalString(field.disabled ?? ""),
         validation: normalizeValidationRules(field.validation)
       };
+    case "slot":
+      return {
+        ...field,
+        style: normalizeOptionalString(field.style ?? "")
+      };
   }
 }
 function createField(type) {
   const title = createDefaultLocaleValue();
+  const id = createFieldId();
   switch (type) {
     case "string":
       return {
+        id,
         type,
         path: "",
         title
       };
     case "number":
       return {
+        id,
         type,
         path: "",
         title
       };
     case "select":
       return {
+        id,
         type,
         path: "",
         title,
@@ -243,18 +290,28 @@ function createField(type) {
       };
     case "calendar":
       return {
+        id,
         type,
         path: "",
         title,
         mode: "date",
         value: "yyyy-MM-dd"
       };
+    case "slot":
+      return {
+        id,
+        type
+      };
   }
 }
 function resetDraftConfig() {
-  draftOrientation.value = props.config.orientation ?? "horizontal";
-  draftStyle.value = normalizeOptionalString(props.config.style ?? "");
-  draftFields.value = cloneFields(props.config.fields);
+  applyDraftConfig(props.config);
+}
+function applyDraftConfig(config) {
+  draftOrientation.value = config.orientation ?? "horizontal";
+  draftStyle.value = normalizeOptionalString(config.style ?? "");
+  search.value = "";
+  draftFields.value = cloneFields(config.fields);
   selectedItemId.value = "general";
   validationErrors.value = {};
 }
@@ -289,7 +346,7 @@ function configureSortable() {
 }
 async function refreshSortable() {
   sortable.stop();
-  if (!open.value || draftFields.value.length === 0) {
+  if (!open.value || draftFields.value.length === 0 || normalizedSearch.value) {
     return;
   }
   await nextTick();
@@ -324,6 +381,21 @@ watch(fieldItems, async (items) => {
     await refreshSortable();
   }
 }, { immediate: true });
+watch(filteredFieldItems, (items) => {
+  if (!normalizedSearch.value || selectedItemId.value === "general") {
+    return;
+  }
+  if (items.some((item) => item.itemId === selectedItemId.value)) {
+    return;
+  }
+  selectedItemId.value = items[0]?.itemId ?? "general";
+}, { immediate: true });
+watch(normalizedSearch, async () => {
+  if (!open.value) {
+    return;
+  }
+  await refreshSortable();
+});
 function discardChanges() {
   resetDraftConfig();
   open.value = false;
@@ -385,26 +457,25 @@ function updateSelectedFieldTitle(value) {
     title: value
   }));
 }
-function updateSelectedFieldPath(value) {
+async function copySelectedFieldId() {
   const selected = selectedField.value;
   if (!selected) {
     return;
   }
-  clearFieldError(selected.draftId, "path");
-  updateDraftField(selected.draftId, (field) => ({
-    ...field,
-    path: String(value).trim()
-  }));
+  await copyFieldId(selected.field.id);
 }
-function updateSelectedFieldIcon(value) {
+async function copyFieldId(fieldId) {
+  await writeClipboardText(fieldId, t("copy-field-id-failed"));
+}
+function updateSelectedFieldPath(value) {
   const selected = selectedField.value;
-  if (!selected) {
+  if (!selected || selected.field.type === "slot") {
     return;
   }
-  clearFieldError(selected.draftId, "icon");
+  clearFieldError(selected.draftId, "path");
   updateDraftField(selected.draftId, (field) => ({
     ...field,
-    icon: normalizeOptionalString(String(value ?? ""))
+    path: String(value).trim()
   }));
 }
 function updateSelectedFieldStyle(value) {
@@ -653,23 +724,28 @@ function updateSelectedCalendarDisableDate(value) {
 }
 function addValidationRule() {
   const selected = selectedField.value;
-  if (!selected) {
+  if (!selected || selected.field.type === "slot") {
     return;
   }
-  updateDraftField(selected.draftId, (field) => ({
-    ...field,
-    validation: [
-      ...field.validation ?? [],
-      {
-        expression: "",
-        message: ""
-      }
-    ]
-  }));
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type === "slot") {
+      return field;
+    }
+    return {
+      ...field,
+      validation: [
+        ...field.validation ?? [],
+        {
+          expression: "",
+          message: ""
+        }
+      ]
+    };
+  });
 }
 function updateValidationRule(index, updater) {
   const selected = selectedField.value;
-  if (!selected) {
+  if (!selected || selected.field.type === "slot") {
     return;
   }
   const validation = selected.field.validation ?? [];
@@ -678,10 +754,15 @@ function updateValidationRule(index, updater) {
     return;
   }
   const nextValidation = validation.map((rule, ruleIndex) => ruleIndex === index ? updater(rule) : rule);
-  updateDraftField(selected.draftId, (field) => ({
-    ...field,
-    validation: nextValidation
-  }));
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type === "slot") {
+      return field;
+    }
+    return {
+      ...field,
+      validation: nextValidation
+    };
+  });
 }
 function updateSelectedValidationExpression(index, value) {
   const selected = selectedField.value;
@@ -707,7 +788,7 @@ function updateSelectedValidationMessage(index, value) {
 }
 function moveValidationRule(index, offset) {
   const selected = selectedField.value;
-  if (!selected) {
+  if (!selected || selected.field.type === "slot") {
     return;
   }
   const validation = selected.field.validation ?? [];
@@ -723,15 +804,20 @@ function moveValidationRule(index, offset) {
   }
   nextValidation[index] = targetRule;
   nextValidation[nextIndex] = currentRule;
-  updateDraftField(selected.draftId, (field) => ({
-    ...field,
-    validation: nextValidation
-  }));
+  updateDraftField(selected.draftId, (field) => {
+    if (field.type === "slot") {
+      return field;
+    }
+    return {
+      ...field,
+      validation: nextValidation
+    };
+  });
   clearValidationRuleErrors(selected.draftId);
 }
 function deleteValidationRule(index) {
   const selected = selectedField.value;
-  if (!selected) {
+  if (!selected || selected.field.type === "slot") {
     return;
   }
   const validation = selected.field.validation ?? [];
@@ -741,7 +827,14 @@ function deleteValidationRule(index) {
   clearValidationRuleError(selected.draftId, index, "expression");
   clearValidationRuleError(selected.draftId, index, "message");
   updateDraftField(selected.draftId, (field) => {
-    const nextValidation = (field.validation ?? []).filter((_, ruleIndex) => ruleIndex !== index);
+    if (field.type === "slot") {
+      return field;
+    }
+    const validation2 = field.validation ?? [];
+    const nextValidation = [
+      ...validation2.slice(0, index),
+      ...validation2.slice(index + 1)
+    ];
     return {
       ...field,
       validation: nextValidation.length > 0 ? nextValidation : void 0
@@ -767,6 +860,10 @@ function getSchemaIssues(field) {
       const result = CalendarFieldC.safeParse(field);
       return result.success ? [] : result.error.issues;
     }
+    case "slot": {
+      const result = SlotFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
   }
 }
 function normalizeIssuePath(path) {
@@ -794,19 +891,30 @@ function validateDraftFields() {
     draftId: item.draftId,
     field: normalizeField(item.field)
   }));
+  const idOwners = {};
   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"));
+    const existingIdOwner = idOwners[item.field.id];
+    if (existingIdOwner !== void 0) {
+      setError(errors, getFieldErrorKey(item.draftId, "id"), t("field-id-duplicate"));
+      setError(errors, getFieldErrorKey(existingIdOwner, "id"), t("field-id-duplicate"));
       firstInvalidItemId = firstInvalidItemId ?? item.draftId;
     } else {
-      pathOwners[item.field.path] = item.draftId;
+      idOwners[item.field.id] = item.draftId;
+    }
+    if (item.field.type !== "slot") {
+      const existingPathOwner = 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 (existingPathOwner !== void 0) {
+        setError(errors, getFieldErrorKey(item.draftId, "path"), t("field-path-duplicate"));
+        setError(errors, getFieldErrorKey(existingPathOwner, "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"));
@@ -828,10 +936,10 @@ function validateDraftFields() {
   }
   return normalizedFields;
 }
-function confirmChanges() {
+function buildDraftConfig() {
   const normalizedFields = validateDraftFields();
   if (!normalizedFields) {
-    return;
+    return void 0;
   }
   const generalStyleResult = FieldsStyleC.safeParse(draftStyle.value);
   if (!generalStyleResult.success) {
@@ -840,9 +948,8 @@ function confirmChanges() {
       [getGeneralErrorKey("style")]: generalStyleResult.error.issues[0]?.message ?? t("general-style-invalid")
     };
     selectedItemId.value = "general";
-    return;
+    return void 0;
   }
-  draftFields.value = normalizedFields.map((item) => createDraftField(item.field));
   const nextConfig = {
     fields: normalizedFields.map((item) => item.field)
   };
@@ -852,7 +959,235 @@ function confirmChanges() {
   if (generalStyleResult.data) {
     nextConfig.style = generalStyleResult.data;
   }
-  emit("confirm", nextConfig);
+  return {
+    config: nextConfig,
+    normalizedFields
+  };
+}
+function showImportError(message) {
+  $toast.error(message);
+}
+function showCopyError(message) {
+  $toast.error(message);
+}
+function showImportErrorWithCopyAction(message, onClick) {
+  $toast.error(message, {
+    action: {
+      label: t("copy-paste-error"),
+      onClick
+    }
+  });
+}
+function getValidDraftConfig(errorMessage) {
+  const result = buildDraftConfig();
+  if (!result) {
+    showCopyError(errorMessage);
+    return void 0;
+  }
+  return result.config;
+}
+function buildFieldsConfigJsonSchema() {
+  return z.toJSONSchema(FieldsConfigC, {
+    io: "input",
+    unrepresentable: "any"
+  });
+}
+function buildAiPromptHeaderMarkdown() {
+  return [
+    "# \u5B57\u6BB5\u914D\u7F6E AI \u4E0A\u4E0B\u6587",
+    "\u4F60\u662F\u4E00\u4E2A\u5E2E\u52A9\u7528\u6237\u914D\u7F6E\u5B57\u6BB5\u7EC4\u4EF6\u7684 AI \u52A9\u624B\uFF0C\u8D1F\u8D23\u89E3\u91CA\u3001\u4FEE\u6539\u5E76\u751F\u6210\u53EF\u7C98\u8D34\u7684\u5B57\u6BB5\u914D\u7F6E\u3002",
+    "\u5982\u679C\u4F60\u4E0D\u786E\u5B9A\u67D0\u4E2A\u5B57\u6BB5\u3001\u8868\u8FBE\u5F0F\u53D8\u91CF\u3001\u8FD0\u884C\u65F6\u4E0A\u4E0B\u6587\u6216\u4E1A\u52A1\u542B\u4E49\uFF0C\u5FC5\u987B\u660E\u786E\u8BF4\u660E\u4E0D\u786E\u5B9A\u70B9\uFF0C\u4E0D\u8981\u731C\u6D4B\u3002",
+    "\u53EA\u6709\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u751F\u6210\u914D\u7F6E\u65F6\uFF0C\u624D\u8FD4\u56DE\u5B8C\u6574\u914D\u7F6E\u6216\u914D\u7F6E\u7247\u6BB5\uFF1B\u5982\u679C\u8FD4\u56DE\u914D\u7F6E\uFF0C\u5FC5\u987B\u653E\u5728 Markdown code block \u4E2D\u3002"
+  ].join("\n");
+}
+function buildDslGuideMarkdown() {
+  return [
+    "## DSL / CEL \u7F16\u5199\u8BF4\u660E",
+    "\u672C\u914D\u7F6E\u4E2D\u7684\u8868\u8FBE\u5F0F\u5B57\u6BB5\u5FC5\u987B\u586B\u5199 CEL \u5B57\u7B26\u4E32\uFF0C\u4E0D\u8981\u751F\u6210 JavaScript\u3001TypeScript\u3001\u7BAD\u5934\u51FD\u6570\u6216\u4F2A\u4EE3\u7801\u3002",
+    "",
+    "### 1. \u57FA\u7840\u8BED\u6CD5",
+    '- \u5B57\u9762\u91CF\uFF1A`"text"`\u3001`123`\u3001`true`\u3001`false`\u3001`null`\u3002',
+    '- \u5217\u8868 / \u5BF9\u8C61\uFF1A`[1, 2]`\u3001`{"display": "grid"}`\u3002',
+    "- \u8BBF\u95EE\uFF1A`.`\u3001`[]`\u3001`.?`\u3001`[?]`\uFF0C\u4F8B\u5982 `form.name`\u3001`ctx.?user.orValue(null)`\u3002",
+    "- \u6761\u4EF6\u4E0E\u903B\u8F91\uFF1A`&&`\u3001`||`\u3001`!`\u3001`condition ? a : b`\u3002",
+    '- \u65B9\u6CD5\u8C03\u7528\uFF1A`value.method(args)`\uFF0C\u4F8B\u5982 `now.format("yyyy-MM-dd")`\u3002',
+    "",
+    "### 2. \u5E38\u89C1\u5B57\u6BB5\u4E0E\u7528\u9014",
+    '- `style` \u76F8\u5173\u5B57\u6BB5\u9700\u8981\u8FD4\u56DE style map\uFF0C\u4F8B\u5982 `{"display": "grid"}`\u3002',
+    "- `hidden` / `disabled` / `disableDate` \u9700\u8981\u8FD4\u56DE `bool`\u3002",
+    "- `validation[].expression` \u9700\u8981\u8FD4\u56DE `bool`\uFF1B\u8FD4\u56DE `false` \u65F6\u5C55\u793A\u5BF9\u5E94\u6D88\u606F\u3002",
+    "- `select.options` \u901A\u5E38\u8FD4\u56DE\u5217\u8868\uFF1B`label` / `value` / `key` \u7528\u6765\u63CF\u8FF0\u5355\u4E2A\u9009\u9879\u5982\u4F55\u6620\u5C04\u3002",
+    "",
+    "### 3. \u5B57\u6BB5\u7C7B\u578B\u7EA6\u675F",
+    "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u5305\u542B\u7A33\u5B9A\u7684 UUID `id`\u3002",
+    "- \u53EA\u6709\u975E `slot` \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\uFF0C\u53EA\u901A\u8FC7 `field.id` \u5BF9\u5E94\u7684\u5177\u540D\u63D2\u69FD\u6E32\u67D3\u3002"
+  ].join("\n");
+}
+function buildMarkdownNotes() {
+  return [
+    "## \u6CE8\u610F\u4E8B\u9879",
+    "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u4FDD\u7559\u73B0\u6709 `id`\uFF0C\u4E0D\u8981\u751F\u6210\u65B0\u7684 `id` \u66FF\u6362\u5DF2\u6709\u5B57\u6BB5\u3002",
+    "- `slot` \u5B57\u6BB5\u53EA\u80FD\u4F7F\u7528 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
+    "- \u975E `slot` \u5B57\u6BB5\u7684 `path` \u5FC5\u987B\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"
+  ].join("\n");
+}
+function buildMarkdownCopyContent(config) {
+  return [
+    buildAiPromptHeaderMarkdown(),
+    "",
+    "## \u5F53\u524D\u914D\u7F6E",
+    "```json",
+    JSON.stringify(config, null, 2),
+    "```",
+    "",
+    buildDslGuideMarkdown(),
+    "",
+    buildMarkdownNotes(),
+    "",
+    "## FieldsConfig JSON Schema",
+    "```json",
+    JSON.stringify(buildFieldsConfigJsonSchema(), null, 2),
+    "```"
+  ].join("\n");
+}
+function formatIssuePath(path) {
+  if (path.length === 0) {
+    return "(root)";
+  }
+  return path.map((segment) => {
+    if (typeof segment === "number") {
+      return `${segment}`;
+    }
+    if (typeof segment === "string") {
+      return segment;
+    }
+    return String(segment);
+  }).join(".");
+}
+function formatIssueExtraFields(issue) {
+  const lines = [];
+  for (const [key, value] of Object.entries(issue)) {
+    if (key === "code" || key === "message" || key === "path") {
+      continue;
+    }
+    lines.push(`  - ${key}: ${JSON.stringify(value)}`);
+  }
+  return lines;
+}
+function buildPasteConfigErrorDetails(source, error) {
+  if (error instanceof SyntaxError) {
+    return [
+      "## \u7C98\u8D34\u5931\u8D25\u539F\u56E0",
+      "- \u7C7B\u578B\uFF1AJSON \u89E3\u6790\u5931\u8D25",
+      `- message: ${error.message}`,
+      "",
+      "## \u539F\u59CB\u7C98\u8D34\u5185\u5BB9",
+      "```text",
+      source,
+      "```"
+    ].join("\n");
+  }
+  const issueLines = error.issues.flatMap((issue, index) => [
+    `### Issue ${index + 1}`,
+    `- path: ${formatIssuePath(issue.path)}`,
+    `- code: ${issue.code}`,
+    `- message: ${issue.message}`,
+    ...formatIssueExtraFields(issue)
+  ]);
+  return [
+    "## \u7C98\u8D34\u5931\u8D25\u539F\u56E0",
+    "- \u7C7B\u578B\uFF1ASchema \u6821\u9A8C\u5931\u8D25",
+    "",
+    "## \u539F\u59CB\u7C98\u8D34\u5185\u5BB9",
+    "```json",
+    source,
+    "```",
+    "",
+    "## Schema \u62A5\u9519",
+    ...issueLines
+  ].join("\n");
+}
+function buildPasteConfigErrorMarkdown(source, error) {
+  return [
+    buildAiPromptHeaderMarkdown(),
+    "",
+    "## \u5F53\u524D\u4EFB\u52A1",
+    "\u7528\u6237\u628A\u4E00\u6BB5\u914D\u7F6E\u7C98\u8D34\u56DE\u5B57\u6BB5\u914D\u7F6E\u5668\u65F6\u5931\u8D25\u4E86\u3002\u8BF7\u57FA\u4E8E\u4E0B\u9762\u7684\u539F\u59CB\u5185\u5BB9\u548C\u62A5\u9519\u4FEE\u590D\u5F53\u524D\u914D\u7F6E\u3002",
+    "\u8BF7\u4F18\u5148\u4FEE\u590D\u6700\u5C0F\u5FC5\u8981\u8303\u56F4\uFF0C\u4E0D\u8981\u53D1\u660E schema \u4E2D\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5\uFF0C\u4E5F\u4E0D\u8981\u66FF\u73B0\u6709\u5B57\u6BB5\u751F\u6210\u65B0\u7684 ID\u3002",
+    "\u53EA\u6709\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u8F93\u51FA\u914D\u7F6E\u65F6\uFF0C\u624D\u8FD4\u56DE\u5B8C\u6574\u914D\u7F6E\uFF1B\u5982\u679C\u8FD4\u56DE\u914D\u7F6E\uFF0C\u5FC5\u987B\u653E\u5728 Markdown code block \u4E2D\u3002",
+    "",
+    buildPasteConfigErrorDetails(source, error),
+    "",
+    buildMarkdownNotes()
+  ].join("\n");
+}
+async function writeClipboardText(value, errorMessage) {
+  try {
+    await navigator.clipboard.writeText(value);
+  } catch {
+    showCopyError(errorMessage);
+  }
+}
+async function copyPasteConfigError(source, error) {
+  await writeClipboardText(buildPasteConfigErrorMarkdown(source, error), t("copy-paste-error-failed"));
+}
+async function pasteConfigFromClipboard() {
+  let source = "";
+  try {
+    source = await navigator.clipboard.readText();
+  } catch {
+    showImportError(t("paste-config-read-failed"));
+    return;
+  }
+  let parsedValue;
+  try {
+    parsedValue = JSON.parse(source);
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      showImportErrorWithCopyAction(
+        t("paste-config-invalid-json"),
+        async () => copyPasteConfigError(source, error)
+      );
+      return;
+    }
+    showImportError(t("paste-config-invalid-json"));
+    return;
+  }
+  const result = FieldsConfigC.safeParse(parsedValue);
+  if (!result.success) {
+    showImportErrorWithCopyAction(
+      t("paste-config-invalid-schema"),
+      async () => copyPasteConfigError(source, result.error)
+    );
+    return;
+  }
+  applyDraftConfig(result.data);
+  await nextTick();
+  await refreshSortable();
+}
+async function copyConfig() {
+  const config = getValidDraftConfig(t("copy-config-failed"));
+  if (!config) {
+    return;
+  }
+  await writeClipboardText(JSON.stringify(config, null, 2), t("copy-config-failed"));
+}
+async function copyMarkdown() {
+  const config = getValidDraftConfig(t("copy-markdown-failed"));
+  if (!config) {
+    return;
+  }
+  await writeClipboardText(buildMarkdownCopyContent(config), t("copy-markdown-failed"));
+}
+function confirmChanges() {
+  const result = buildDraftConfig();
+  if (!result) {
+    return;
+  }
+  draftFields.value = result.normalizedFields.map((item) => createDraftField(item.field));
+  emit("confirm", result.config);
   open.value = false;
 }
 </script>
@@ -867,9 +1202,22 @@ function confirmChanges() {
       :show-close-button="true"
     >
       <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
-        <DialogTitle class="text-xl font-semibold text-zinc-800">
-          {{ t("configure-fields") }}
-        </DialogTitle>
+        <div class="flex items-center gap-3">
+          <DialogTitle class="text-xl font-semibold text-zinc-800">
+            {{ t("configure-fields") }}
+          </DialogTitle>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            data-slot="fields-configurator-paste"
+            class="shrink-0"
+            @click="pasteConfigFromClipboard"
+          >
+            <Icon icon="fluent:clipboard-paste-20-regular" />
+            {{ t("paste-config") }}
+          </Button>
+        </div>
         <DialogDescription class="text-sm text-zinc-500">
           {{ t("configure-fields-description") }}
         </DialogDescription>
@@ -877,7 +1225,42 @@ function confirmChanges() {
 
       <div class="grid min-h-0 flex-1 grid-cols-[19rem_minmax(0,1fr)]">
         <section class="flex min-h-0 flex-col border-r border-zinc-200 px-4 py-4">
-          <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+          <Input
+            v-model="search"
+            data-slot="fields-configurator-search"
+            :placeholder="t('search-fields')"
+          />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button
+                type="button"
+                data-slot="fields-configurator-add"
+                class="mt-3 w-full justify-center"
+              >
+                <Icon icon="fluent:add-20-regular" />
+                {{ t("add-field") }}
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="start"
+              :style="{
+  width: 'var(--reka-dropdown-menu-trigger-width)'
+}"
+            >
+              <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 class="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden">
             <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1">
               <button
                 type="button"
@@ -899,16 +1282,17 @@ function confirmChanges() {
               </button>
 
               <div
-                v-if="fieldItems.length > 0"
+                v-if="filteredFieldItems.length > 0"
                 ref="sortableListRef"
                 data-slot="fields-configurator-list"
                 class="flex flex-col gap-1"
               >
                 <div
-                  v-for="item in fieldItems"
+                  v-for="item in filteredFieldItems"
                   :key="item.itemId"
                   data-slot="fields-configurator-field-item"
                   :data-item-id="item.itemId"
+                  :data-field-id="item.fieldId"
                   :data-field-path="item.path"
                   :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
                   :class="cn(
@@ -952,6 +1336,14 @@ function confirmChanges() {
                 </div>
               </div>
 
+              <p
+                v-else-if="normalizedSearch"
+                data-slot="fields-configurator-empty"
+                class="px-1 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("no-matches") }}
+              </p>
+
               <p
                 v-else
                 data-slot="fields-configurator-empty"
@@ -961,46 +1353,30 @@ 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">
-          <h3
-            data-slot="fields-configurator-detail-title"
-            class="text-lg font-semibold text-zinc-800"
-          >
-            {{ selectedItemLabel }}
-          </h3>
+          <div class="flex items-center gap-2">
+            <h3
+              data-slot="fields-configurator-detail-title"
+              class="text-lg font-semibold text-zinc-800"
+            >
+              {{ selectedItemLabel }}
+            </h3>
+            <Button
+              v-if="selectedField"
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-slot="fields-configurator-copy-id"
+              class="size-7 p-0 text-zinc-400 hover:text-zinc-700"
+              :aria-label="t('copy-field-id', { field: selectedItemLabel })"
+              :title="selectedField.field.id"
+              @click="copySelectedFieldId"
+            >
+              <Icon icon="fluent:copy-20-regular" />
+            </Button>
+          </div>
 
           <p
             v-if="selectedItemId === 'general'"
@@ -1069,24 +1445,20 @@ 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>
+            <p
+              v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'id')]"
+              data-slot="fields-configurator-field-id-error"
+              class="-mt-4 text-xs text-red-500"
+            >
+              {{ validationErrors[getFieldErrorKey(selectedField.draftId, "id")] }}
+            </p>
 
+            <section
+              v-if="selectedField.field.type !== 'slot'"
+              data-slot="fields-configurator-field-path-section"
+              class="flex flex-col gap-2"
+            >
               <label
-                data-slot="fields-configurator-field-path-section"
                 class="flex flex-col gap-2"
               >
                 <span class="text-xs font-medium text-zinc-500">
@@ -1111,6 +1483,7 @@ function confirmChanges() {
             </section>
 
             <section
+              v-if="selectedField.field.type !== 'slot'"
               data-slot="fields-configurator-field-label-section"
               class="flex flex-col gap-2"
             >
@@ -1134,28 +1507,36 @@ function confirmChanges() {
             </section>
 
             <section
-              data-slot="fields-configurator-field-general-options"
+              v-if="selectedField.field.type === 'slot'"
+              data-slot="fields-configurator-slot-options"
               class="grid gap-4 md:grid-cols-2"
             >
-              <label class="flex flex-col gap-2">
+              <label class="flex flex-col gap-2 md:col-span-2">
                 <span class="text-xs font-medium text-zinc-500">
-                  {{ t("field-icon") }}
+                  {{ t("field-style") }}
                 </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"
+                <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, 'icon')]"
+                  v-if="validationErrors[getFieldErrorKey(selectedField.draftId, 'style')]"
                   class="text-xs text-red-500"
                 >
-                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "icon")] }}
+                  {{ validationErrors[getFieldErrorKey(selectedField.draftId, "style")] }}
                 </p>
               </label>
+            </section>
 
+            <section
+              v-else
+              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-style") }}
@@ -1486,6 +1867,7 @@ function confirmChanges() {
             </section>
 
             <section
+              v-if="selectedField.field.type !== 'slot'"
               data-slot="fields-configurator-validation"
               class="flex flex-col gap-4"
             >
@@ -1617,25 +1999,50 @@ function confirmChanges() {
         </section>
       </div>
 
-      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
-        <Button
-          type="button"
-          data-slot="fields-configurator-cancel"
-          variant="default"
-          @click="discardChanges"
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4 sm:justify-between">
+        <div
+          data-slot="fields-configurator-copy-actions"
+          class="flex items-center gap-2"
         >
-          <Icon icon="fluent:dismiss-20-regular" />
-          {{ t("cancel") }}
-        </Button>
-        <Button
-          type="button"
-          data-slot="fields-configurator-confirm"
-          variant="primary"
-          @click="confirmChanges"
-        >
-          <Icon icon="fluent:checkmark-20-regular" />
-          {{ t("confirm") }}
-        </Button>
+          <Button
+            type="button"
+            data-slot="fields-configurator-copy-markdown"
+            variant="ghost"
+            @click="copyMarkdown"
+          >
+            <Icon icon="simple-icons:markdown" />
+            {{ t("copy-markdown") }}
+          </Button>
+          <Button
+            type="button"
+            data-slot="fields-configurator-copy-config"
+            variant="ghost"
+            @click="copyConfig"
+          >
+            <Icon icon="fluent:copy-20-regular" />
+            {{ t("copy-config") }}
+          </Button>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            type="button"
+            data-slot="fields-configurator-cancel"
+            variant="default"
+            @click="discardChanges"
+          >
+            <Icon icon="fluent:dismiss-20-regular" />
+            {{ t("cancel") }}
+          </Button>
+          <Button
+            type="button"
+            data-slot="fields-configurator-confirm"
+            variant="primary"
+            @click="confirmChanges"
+          >
+            <Icon icon="fluent:checkmark-20-regular" />
+            {{ t("confirm") }}
+          </Button>
+        </div>
       </DialogFooter>
     </DialogContent>
   </Dialog>
@@ -1645,7 +2052,7 @@ function confirmChanges() {
 {
   "zh": {
     "configure-fields": "配置字段",
-    "configure-fields-description": "在这里浏览通用项和字段配置项。",
+    "configure-fields-description": "在这里管理字段列表，并编辑当前选中的通用项或字段配置。",
     "field-list": "字段列表",
     "general": "通用",
     "general-description": "在这里配置字段集合级别的公共选项。",
@@ -1656,16 +2063,33 @@ function confirmChanges() {
     "fields-orientation-horizontal": "水平",
     "fields-orientation-vertical": "垂直",
     "fields-orientation-floating": "浮动标签",
+    "paste-config": "粘贴配置",
+    "paste-config-invalid-json": "粘贴失败，剪贴板不是有效的 JSON。",
+    "paste-config-invalid-schema": "粘贴失败，配置格式无效。",
+    "paste-config-read-failed": "读取剪贴板失败，请检查剪贴板权限。",
+    "copy-paste-error": "复制错误",
+    "copy-paste-error-failed": "复制错误详情失败，请检查剪贴板权限。",
+    "copy-markdown": "复制为 Markdown",
+    "copy-markdown-failed": "复制 Markdown 失败，请先修正当前配置中的错误。",
+    "copy-config": "仅复制配置",
+    "copy-config-failed": "复制配置失败，请先修正当前配置中的错误。",
+    "search-fields": "搜索字段名称……",
     "add-field": "新增字段",
     "field-type": "字段类型",
     "field-type-string": "文本",
     "field-type-number": "数字",
     "field-type-select": "选择",
     "field-type-calendar": "日期",
+    "field-type-slot": "插槽",
+    "field-id": "字段 ID",
+    "field-id-duplicate": "字段 ID 不能重复",
     "field-path": "字段路径",
     "field-path-placeholder": "例如 profile.name",
     "field-path-required": "字段路径不能为空",
     "field-path-duplicate": "字段路径不能重复",
+    "copy-field-id": "复制字段 ID：{field}",
+    "copy-field-id-short": "复制 ID",
+    "copy-field-id-failed": "复制字段 ID 失败，请检查剪贴板权限。",
     "field-label": "字段标题",
     "field-icon": "图标",
     "field-icon-placeholder": "例如 fluent:person-20-regular",
@@ -1712,8 +2136,10 @@ function confirmChanges() {
     "validation-expression-placeholder": "返回 false 时展示下面的消息",
     "validation-message": "失败消息",
     "validation-message-placeholder": "支持 Markdown 与双花括号表达式",
+    "no-matches": "没有匹配的字段。",
     "no-validation-rules": "暂未配置校验规则。",
     "unnamed-field": "未命名{type}字段",
+    "slot-field": "插槽 {id}",
     "no-fields": "还没有字段。",
     "drag-field": "拖拽调整字段顺序：{field}",
     "delete-field": "删除字段：{field}",
@@ -1722,7 +2148,7 @@ function confirmChanges() {
   },
   "ja": {
     "configure-fields": "フィールドを設定",
-    "configure-fields-description": "共通項目とフィールド設定をここで確認できます。",
+    "configure-fields-description": "ここではフィールド一覧を管理し、選択中の共通設定またはフィールド設定を編集できます。",
     "field-list": "フィールド一覧",
     "general": "共通",
     "general-description": "ここではフィールド群全体に適用される共通設定を編集できます。",
@@ -1733,16 +2159,33 @@ function confirmChanges() {
     "fields-orientation-horizontal": "横並び",
     "fields-orientation-vertical": "縦並び",
     "fields-orientation-floating": "フローティングラベル",
+    "paste-config": "設定を貼り付け",
+    "paste-config-invalid-json": "貼り付けに失敗しました。クリップボードの内容が有効な JSON ではありません。",
+    "paste-config-invalid-schema": "貼り付けに失敗しました。設定形式が無効です。",
+    "paste-config-read-failed": "クリップボードの読み取りに失敗しました。権限を確認してください。",
+    "copy-paste-error": "エラーをコピー",
+    "copy-paste-error-failed": "エラー詳細のコピーに失敗しました。クリップボード権限を確認してください。",
+    "copy-markdown": "Markdown としてコピー",
+    "copy-markdown-failed": "Markdown のコピーに失敗しました。現在の設定エラーを先に修正してください。",
+    "copy-config": "設定のみコピー",
+    "copy-config-failed": "設定のコピーに失敗しました。現在の設定エラーを先に修正してください。",
+    "search-fields": "フィールド名を検索…",
     "add-field": "フィールドを追加",
     "field-type": "フィールド種別",
     "field-type-string": "テキスト",
     "field-type-number": "数値",
     "field-type-select": "選択",
     "field-type-calendar": "日付",
+    "field-type-slot": "スロット",
+    "field-id": "フィールド ID",
+    "field-id-duplicate": "フィールド ID は重複できません",
     "field-path": "フィールドパス",
     "field-path-placeholder": "例: profile.name",
     "field-path-required": "フィールドパスは必須です",
     "field-path-duplicate": "フィールドパスは重複できません",
+    "copy-field-id": "{field} のフィールド ID をコピー",
+    "copy-field-id-short": "ID をコピー",
+    "copy-field-id-failed": "フィールド ID のコピーに失敗しました。クリップボード権限を確認してください。",
     "field-label": "フィールドラベル",
     "field-icon": "アイコン",
     "field-icon-placeholder": "例: fluent:person-20-regular",
@@ -1789,8 +2232,10 @@ function confirmChanges() {
     "validation-expression-placeholder": "false を返すと下のメッセージを表示します",
     "validation-message": "失敗メッセージ",
     "validation-message-placeholder": "Markdown と二重波括弧式を利用できます",
+    "no-matches": "一致するフィールドがありません。",
     "no-validation-rules": "検証ルールはまだありません。",
     "unnamed-field": "未命名の{type}フィールド",
+    "slot-field": "スロット {id}",
     "no-fields": "フィールドがありません。",
     "drag-field": "{field} の順序をドラッグで変更",
     "delete-field": "{field} を削除",
@@ -1799,7 +2244,7 @@ function confirmChanges() {
   },
   "en": {
     "configure-fields": "Configure Fields",
-    "configure-fields-description": "Browse the shared and field-level settings here.",
+    "configure-fields-description": "Manage the field list and edit the selected general or field settings here.",
     "field-list": "Field list",
     "general": "General",
     "general-description": "Edit the shared settings that apply to the whole field group here.",
@@ -1810,16 +2255,33 @@ function confirmChanges() {
     "fields-orientation-horizontal": "Horizontal",
     "fields-orientation-vertical": "Vertical",
     "fields-orientation-floating": "Floating label",
+    "paste-config": "Paste Config",
+    "paste-config-invalid-json": "Paste failed because the clipboard does not contain valid JSON.",
+    "paste-config-invalid-schema": "Paste failed because the config shape is invalid.",
+    "paste-config-read-failed": "Failed to read from the clipboard. Check clipboard permissions.",
+    "copy-paste-error": "Copy Error",
+    "copy-paste-error-failed": "Failed to copy the error details. Check clipboard permissions.",
+    "copy-markdown": "Copy as Markdown",
+    "copy-markdown-failed": "Failed to copy Markdown. Fix the current config errors first.",
+    "copy-config": "Copy Config Only",
+    "copy-config-failed": "Failed to copy the config. Fix the current config errors first.",
+    "search-fields": "Search 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-type-slot": "Slot",
+    "field-id": "Field ID",
+    "field-id-duplicate": "Field ID must be unique",
     "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",
+    "copy-field-id": "Copy field ID: {field}",
+    "copy-field-id-short": "Copy ID",
+    "copy-field-id-failed": "Failed to copy the field ID. Check clipboard permissions.",
     "field-label": "Field label",
     "field-icon": "Icon",
     "field-icon-placeholder": "For example fluent:person-20-regular",
@@ -1866,8 +2328,10 @@ function confirmChanges() {
     "validation-expression-placeholder": "Return false to show the message below",
     "validation-message": "Failure message",
     "validation-message-placeholder": "Supports Markdown and double-curly expressions",
+    "no-matches": "No matching fields.",
     "no-validation-rules": "No validation rules yet.",
     "unnamed-field": "Untitled {type} field",
+    "slot-field": "Slot {id}",
     "no-fields": "No fields yet.",
     "drag-field": "Drag to reorder field {field}",
     "delete-field": "Delete field {field}",