xkit-editor 2.0.0-alpha.0

package/src/x-editor.vue

@@ -0,0 +1,1300 @@
+<template>
+  <div class="x-editor">
+    <div class="x-editor__header">
+      <div class="x-editor__header-left">
+        <span class="x-editor__title">在线表单编辑器</span>
+      </div>
+      <div class="x-editor__header-center">
+        <div class="x-editor__modes">
+          <span class="x-editor__mode" :class="{ active: activeMode === 'design' }" @click="activeMode = 'design'">设计</span>
+          <span class="x-editor__mode" :class="{ active: activeMode === 'preview' }" @click="activeMode = 'preview'">预览</span>
+          <span class="x-editor__mode" :class="{ active: activeMode === 'json' }" @click="activeMode = 'json'">JSON</span>
+        </div>
+      </div>
+      <div class="x-editor__header-right">
+        <slot name="actions">
+          <button class="x-editor__btn" @click="handleReset">重置</button>
+          <button class="x-editor__btn primary" @click="handleSubmit">保存</button>
+        </slot>
+      </div>
+    </div>
+    <div class="x-editor__body" :class="`is-mode-${activeMode}`">
+      <!-- 左侧组件库：仅在设计模式下显示 -->
+      <div v-if="activeMode === 'design'" class="x-editor__panel x-editor__panel--left">
+        <div class="x-editor__panel-title">组件库</div>
+        <ElScrollbar class="x-editor__panel-scrollbar">
+          <div class="x-editor__component-palette" ref="componentGridRef">
+            <div v-for="group in componentPaletteGroups" :key="group.label" class="x-editor__component-section">
+              <div class="x-editor__component-section-title">{{ group.label }}</div>
+              <div class="x-editor__component-grid">
+                <div class="x-editor__component-item" v-for="item in group.items" :key="item.value" :data-type="item.value">
+                  <i :class="[item.icon, 'x-editor__component-icon']"></i>
+                  <span class="x-editor__component-label">{{ item.label }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ElScrollbar>
+      </div>
+
+      <!-- 中间主区域 -->
+      <div class="x-editor__panel x-editor__panel--center">
+        <ElScrollbar class="x-editor__panel-scrollbar x-editor__panel-scrollbar--center">
+          <div class="x-editor__center-content">
+            <div class="x-editor__canvas" ref="canvasRef">
+              <!-- 设计模式 -->
+              <template v-if="activeMode === 'design'">
+                <EditorItemWrapper
+                  class="editor-canvas-root"
+                  :node="rootNode"
+                  :node-id="ROOT_NODE_ID"
+                  tag="x-form"
+                  variant="container"
+                  :show-actions="false"
+                  :show-drag="false"
+                  :emit-custom-event="handleEditorEvent"
+                >
+                  <x-form v-bind="props.modelValue" :wrapper-component="EditorItemWrapper" @custom-event="handleEditorEvent" class="editor-canvas-form" />
+                </EditorItemWrapper>
+                <div v-if="!props.modelValue?.body?.length" class="x-editor__canvas-empty">从左侧拖拽组件到这里</div>
+              </template>
+
+              <!-- 预览模式 -->
+              <div v-else-if="activeMode === 'preview'" class="x-editor__preview-container">
+                <x-form v-bind="props.modelValue" />
+              </div>
+
+              <!-- JSON 模式 -->
+              <div v-else-if="activeMode === 'json'" class="x-editor__json-container">
+                <template v-if="props.editableJson">
+                  <div class="x-editor__json-toolbar">
+                    <button class="x-editor__btn primary" @click="handleJsonApply">应用 JSON</button>
+                    <button class="x-editor__btn" @click="formatJsonText">格式化</button>
+                    <button class="x-editor__btn" @click="resetJsonText">重置</button>
+                    <span v-if="jsonError" class="x-editor__json-error">{{ jsonError }}</span>
+                  </div>
+                  <JsonCodeEditor ref="jsonCodeEditorRef" v-model="jsonText" class="x-editor__json-editor" @update:modelValue="jsonError = ''" />
+                </template>
+                <JsonCodeEditor v-else :model-value="readonlyFormJsonText" readonly class="x-editor__json-editor" />
+              </div>
+            </div>
+          </div>
+        </ElScrollbar>
+      </div>
+
+      <!-- 右侧配置区：仅在设计模式下显示 -->
+      <div v-if="activeMode === 'design'" class="x-editor__panel x-editor__panel--right">
+        <div class="x-editor__panel-title x-editor__panel-title--config">
+          <button class="x-editor__mode-switch" :title="rightPanelModeSwitchTitle" type="button" @click="toggleRightPanelMode">
+            <i :class="rightPanelModeIcon"></i>
+          </button>
+          <div class="x-editor__panel-title-main">
+            <span>{{ rightPanelMode === 'ui' ? '属性配置' : 'JSON 配置' }}</span>
+            <button v-if="canReplaceSelected && currentConfigTargetLabel" class="x-editor__target-action" type="button" title="替换组件" @click="openReplaceDialog">
+              <i class="ri-arrow-left-right-line"></i>
+              {{ currentConfigTargetLabel }}
+            </button>
+            <small v-else-if="currentConfigTargetLabel">{{ currentConfigTargetLabel }}</small>
+          </div>
+        </div>
+        <div v-if="selectedItem && rightPanelMode === 'ui' && currentConfigTabs.length > 1" class="x-editor__config-tabs">
+          <button
+            v-for="tab in currentConfigTabs"
+            :key="tab.key"
+            class="x-editor__config-tab"
+            :class="{ active: activeConfigTabKey === tab.key }"
+            type="button"
+            @click="activeConfigTabKey = tab.key"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+        <ElScrollbar class="x-editor__panel-scrollbar">
+          <div class="x-editor__config-panel" v-if="selectedItem">
+            <x-form
+              v-if="rightPanelMode === 'ui'"
+              :key="selectedItem.__editorId"
+              v-model="selectedItem"
+              v-bind="currentConfigSchema"
+              value-reactive
+              label-position="left"
+              auto-submit
+              :show-button-group="false"
+              @update:modelValue="handleConfigChange"
+              class="x-editor__config-form"
+            />
+            <div v-else class="x-editor__config-json">
+              <JsonCodeEditor :model-value="readonlySelectedJsonText" readonly line-numbers="off" class="x-editor__config-json-editor" />
+            </div>
+          </div>
+          <div class="x-editor__config-empty" v-else>请选择画布中的组件</div>
+        </ElScrollbar>
+      </div>
+    </div>
+    <ElDialog v-model="replaceDialogVisible" title="替换组件" width="520px" append-to-body>
+      <div class="x-editor__replace-grid">
+        <button v-for="item in replacementTargets" :key="item.value" class="x-editor__replace-item" type="button" @click="handleReplaceComponent(item)">
+          <i :class="[item.icon, 'x-editor__replace-icon']"></i>
+          <span>{{ item.label }}</span>
+        </button>
+      </div>
+    </ElDialog>
+    <ConditionEditor
+      :model-value="selectedItem?.visible"
+      state-kind="visible"
+      :inline-visible="false"
+      :auto-open-key="visibleConditionOpenKey"
+      @update:modelValue="handleVisibleConditionChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, provide, nextTick, watch, computed } from 'vue'
+import { componentList, componentPaletteGroups } from './config'
+import { XForm, genId, type XFormProps, X_DESIGN_MODE_KEY } from 'xkit-ui'
+import { ElDialog, ElMessage, ElScrollbar } from 'element-plus'
+import Sortable from 'sortablejs'
+import EditorItemWrapper from './editor-item-wrapper.vue'
+import { rootComponentConfigMap } from './root-configs'
+import type { ComponentConfig, EditorConfigTab, EditorConfigTabKey } from './component-configs/types'
+import JsonCodeEditor from './components/json-code-editor.vue'
+import ConditionEditor from './components/condition-editor.vue'
+import InputTableDesign from './components/design-renderers/input-table-design.vue'
+import InputArrayDesign from './components/design-renderers/input-array-design.vue'
+import { createReplacementNode, isReplaceableComponentConfig } from './utils/component-replace'
+import {
+  EDITOR_ID_FIELD,
+  assignNewEditorIdsDeep,
+  cloneSchemaValue,
+  type EditorPath,
+  findByEditorId,
+  getEditorId,
+  getByEditorPath,
+  insertAtEditorPath,
+  insertAfterEditorId,
+  moveAcrossEditorPaths,
+  moveWithinEditorPath,
+  normalizeEditorIds,
+  preserveUneditedChildCollections,
+  removeByEditorId,
+  stripEditorMetaDeep,
+  stripRuntimeMetaDeep,
+  updateByEditorId
+} from './utils/editor-schema'
+
+defineOptions({
+  name: 'XEditor'
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: XFormProps
+    editableJson?: boolean
+  }>(),
+  {
+    editableJson: false
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+  (e: 'submit', value: any): void
+  (e: 'reset'): void
+}>()
+
+// 编辑模式：design / preview / json
+const activeMode = ref<'design' | 'preview' | 'json'>('design')
+const rightPanelMode = ref<'ui' | 'json'>('ui')
+const activeConfigTabKey = ref<EditorConfigTabKey>('basic')
+
+const componentGridRef = ref<HTMLElement>()
+const canvasRef = ref<HTMLElement>()
+const jsonCodeEditorRef = ref<InstanceType<typeof JsonCodeEditor>>()
+const jsonText = ref('')
+const jsonError = ref('')
+const replaceDialogVisible = ref(false)
+const visibleConditionOpenKey = ref(0)
+
+// 选中的组件
+const selectedId = ref<string | number>()
+const selectedItem = ref<any>()
+provide('selectedId', selectedId)
+provide(
+  X_DESIGN_MODE_KEY,
+  computed(() => activeMode.value === 'design')
+)
+provide(
+  'x-editor-context',
+  computed(() => ({
+    form: props.modelValue,
+    selectedItem: selectedItem.value
+  }))
+)
+provide('editorDesignRenderers', {
+  'x-input-table': InputTableDesign,
+  'x-input-array': InputArrayDesign
+})
+
+const ROOT_NODE_ID = '__root__'
+
+const rootType = computed(() => 'x-form')
+const rootNode = computed(() => ({
+  ...props.modelValue,
+  [EDITOR_ID_FIELD]: ROOT_NODE_ID,
+  type: rootType.value
+}))
+
+const createEditorId = () => genId('editor')
+
+// 获取当前选中组件对应的属性配置 Schema
+const configTabLabels: Record<EditorConfigTabKey, string> = {
+  basic: '基础',
+  layout: '布局',
+  data: '数据',
+  operation: '操作',
+  validation: '校验',
+  advanced: '高级'
+}
+
+const configTabOrder: EditorConfigTabKey[] = ['basic', 'layout', 'data', 'operation', 'validation', 'advanced']
+
+const normalizeConfigTabs = (tabs: EditorConfigTab[] | undefined, fallbackBody: any[] = []) => {
+  const sourceTabs: EditorConfigTab[] = tabs?.length
+    ? tabs
+    : [
+        {
+          key: 'basic',
+          body: fallbackBody
+        }
+      ]
+  return sourceTabs
+    .filter((tab) => tab.body?.length)
+    .map((tab) => ({
+      ...tab,
+      label: tab.label || configTabLabels[tab.key]
+    }))
+    .sort((left, right) => configTabOrder.indexOf(left.key) - configTabOrder.indexOf(right.key))
+}
+
+const currentConfig = computed(() => {
+  if (!selectedItem.value) return undefined
+  if (selectedId.value === ROOT_NODE_ID) {
+    return rootComponentConfigMap[rootType.value]
+  }
+  return componentList.find((c) => c.value === selectedItem.value.type) as ComponentConfig | undefined
+})
+
+const currentConfigTabs = computed(() => {
+  const config = currentConfig.value
+  const tabs = normalizeConfigTabs(config?.configTabs, config?.configSchema?.body || [])
+  if (!isSelectedInputTableColumn.value) return tabs
+  return tabs.map((tab) => (tab.key === 'layout' ? { ...tab, label: '列' } : tab))
+})
+
+const currentConfigSchema = computed(() => {
+  const tab = currentConfigTabs.value.find((item) => item.key === activeConfigTabKey.value) || currentConfigTabs.value[0]
+  let body = tab?.body || []
+  if (selectedItem.value?.type === 'x-input-array' && tab?.key === 'layout' && !selectedItem.value.useLayout) {
+    body = body.filter((item: any) => item.name !== 'layout')
+  }
+  if (!isSelectedInputTableColumn.value || tab?.key !== 'basic') {
+    return { body }
+  }
+  return {
+    body: body.filter((item: any) => item.name !== 'labelPosition')
+  }
+})
+
+const collectConfigFieldNames = (items: any[] = []) => {
+  const names = new Set<string>()
+  const visit = (itemList: any[] = []) => {
+    itemList.forEach((item) => {
+      if (item?.name) names.add(String(item.name))
+      if (Array.isArray(item?.body)) visit(item.body)
+      if (Array.isArray(item?.sync)) {
+        item.sync.forEach((syncItem: any) => {
+          if (syncItem?.name) names.add(String(syncItem.name))
+        })
+      }
+    })
+  }
+  visit(items)
+  return names
+}
+
+const currentConfigTargetLabel = computed(() => {
+  if (!selectedItem.value) return ''
+  if (selectedId.value === ROOT_NODE_ID) return '表单'
+  return currentConfig.value?.label || selectedItem.value.type || ''
+})
+
+const canReplaceSelected = computed(() => {
+  if (!selectedItem.value || selectedId.value === ROOT_NODE_ID) return false
+  const config = currentConfig.value as ComponentConfig | undefined
+  if (config?.editorKind === 'container') {
+    return Boolean(config.replace?.groups?.includes('collection'))
+  }
+  return isReplaceableComponentConfig(config)
+})
+
+const canReplaceWithTarget = (sourceConfig: ComponentConfig | undefined, targetConfig: ComponentConfig) => {
+  if (!sourceConfig || targetConfig.value === selectedItem.value?.type) return false
+  const sourceIsContainer = sourceConfig.editorKind === 'container'
+  const targetIsContainer = targetConfig.editorKind === 'container'
+  if (sourceIsContainer || targetIsContainer) {
+    return Boolean(sourceIsContainer && targetIsContainer && sourceConfig.replace?.groups?.includes('collection') && targetConfig.replace?.groups?.includes('collection'))
+  }
+  return isReplaceableComponentConfig(targetConfig)
+}
+
+const replacementTargets = computed(() => {
+  if (!canReplaceSelected.value) return []
+  return componentList.filter((component) => canReplaceWithTarget(currentConfig.value as ComponentConfig | undefined, component))
+})
+
+const toJsonText = (value: any) => JSON.stringify(value ?? {}, null, 2)
+
+const readonlyFormJsonText = computed(() => toJsonText(props.modelValue))
+
+const readonlySelectedJsonText = computed(() => toJsonText(selectedItem.value))
+
+const findParentByEditorId = (items: any[] = [], editorId: unknown, parent?: any): any | undefined => {
+  if (editorId === undefined || editorId === null) return undefined
+
+  for (const item of items) {
+    if (getEditorId(item) === editorId) return parent
+
+    for (const childKey of ['body', 'items']) {
+      if (!Array.isArray(item?.[childKey])) continue
+      const result = findParentByEditorId(item[childKey], editorId, item)
+      if (result) return result
+    }
+  }
+}
+
+const isSelectedInputTableColumn = computed(() => {
+  const parent = findParentByEditorId(props.modelValue?.body || [], selectedId.value)
+  return parent?.type === 'x-input-table'
+})
+
+const rightPanelModeIcon = computed(() => (rightPanelMode.value === 'ui' ? 'ri-code-s-slash-line' : 'ri-settings-3-line'))
+const rightPanelModeSwitchTitle = computed(() => (rightPanelMode.value === 'ui' ? '切换到 JSON' : '切换到可视化配置'))
+
+const toggleRightPanelMode = () => {
+  rightPanelMode.value = rightPanelMode.value === 'ui' ? 'json' : 'ui'
+}
+
+const openReplaceDialog = () => {
+  if (!canReplaceSelected.value) return
+  replaceDialogVisible.value = true
+}
+
+const handleReplaceComponent = (targetConfig: ComponentConfig) => {
+  if (!selectedItem.value || !currentConfig.value || !canReplaceSelected.value) return
+
+  const replacement = createReplacementNode({
+    source: selectedItem.value,
+    sourceConfig: currentConfig.value as ComponentConfig,
+    targetConfig
+  })
+  const updatedBody = updateByEditorId(props.modelValue?.body || [], selectedId.value, replacement)
+  if (!updatedBody.changed) return
+
+  selectedItem.value = replacement
+  activeConfigTabKey.value = 'basic'
+  replaceDialogVisible.value = false
+  updateBody(updatedBody.items)
+  ElMessage.success(`已替换为${targetConfig.label}`)
+}
+
+watch(selectedId, () => {
+  activeConfigTabKey.value = 'basic'
+})
+
+watch(
+  currentConfigTabs,
+  (tabs) => {
+    if (!tabs.length) {
+      activeConfigTabKey.value = 'basic'
+      return
+    }
+    if (!tabs.some((tab) => tab.key === activeConfigTabKey.value)) {
+      activeConfigTabKey.value = tabs[0].key
+    }
+  },
+  { immediate: true }
+)
+
+const stripEditorMeta = (value: any) => {
+  if (!value) return value
+  const { [EDITOR_ID_FIELD]: _editorId, type, ...rest } = value
+  return rest
+}
+
+// 处理属性配置变化
+const handleConfigChange = (newValues: any) => {
+  if (selectedId.value === ROOT_NODE_ID) {
+    emit('update:modelValue', {
+      ...props.modelValue,
+      ...stripEditorMeta(newValues)
+    })
+    return
+  }
+
+  const previousNode = findByEditorId(props.modelValue?.body || [], selectedId.value)
+  const editedKeys = collectConfigFieldNames(currentConfigSchema.value.body)
+  const nextNode = preserveUneditedChildCollections(previousNode, stripRuntimeMetaDeep(newValues), editedKeys)
+  const updatedBody = updateByEditorId(props.modelValue?.body || [], selectedId.value, nextNode)
+  if (updatedBody.changed) {
+    const nextId = getEditorId(newValues)
+    if (nextId !== selectedId.value) selectedId.value = nextId
+    updateBody(updatedBody.items)
+  }
+}
+
+const handleVisibleConditionChange = (value: any) => {
+  if (!selectedItem.value || selectedId.value === ROOT_NODE_ID) return
+  const nextItem = {
+    ...selectedItem.value,
+    visible: value
+  }
+  selectedItem.value = nextItem
+  handleConfigChange(nextItem)
+}
+
+// 处理编辑器内部事件 (选中/复制/删除)
+const handleEditorEvent = (event: any) => {
+  const { name, payload } = event
+  if (name === 'select') {
+    const nextId = getEditorId(payload)
+    if (selectedId.value === nextId) return
+    selectedId.value = nextId
+    // 必须深拷贝，断开引用
+    selectedItem.value = stripRuntimeMetaDeep(cloneSchemaValue(payload))
+  } else if (name === 'delete') {
+    const payloadId = getEditorId(payload)
+    const updatedBody = removeByEditorId(props.modelValue?.body || [], payloadId)
+    if (updatedBody.changed) {
+      if (selectedId.value === payloadId) {
+        selectedId.value = undefined
+        selectedItem.value = undefined
+      }
+      updateBody(updatedBody.items)
+    }
+  } else if (name === 'copy') {
+    const payloadId = getEditorId(payload)
+    if (payloadId !== undefined) {
+      const newField = assignNewEditorIdsDeep(payload, createEditorId)
+      // 复制时通常也要改一下 name，防止业务字段冲突
+      if (newField.name) newField.name = `${newField.name}_copy`
+
+      const updatedBody = insertAfterEditorId(props.modelValue?.body || [], payloadId, newField)
+      if (updatedBody.changed) updateBody(updatedBody.items)
+    }
+  } else if (name === 'edit-visible-condition') {
+    if (getEditorId(payload) !== selectedId.value) {
+      selectedId.value = getEditorId(payload)
+      selectedItem.value = stripRuntimeMetaDeep(cloneSchemaValue(payload))
+    }
+    rightPanelMode.value = 'ui'
+    visibleConditionOpenKey.value += 1
+    nextTick(() => {
+      activeConfigTabKey.value = 'advanced'
+    })
+  }
+}
+
+const updateBody = (newBody: any[]) => {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    body: newBody
+  })
+}
+
+const handleSubmit = () => {
+  emit('submit', stripEditorMetaDeep(props.modelValue))
+}
+
+const handleReset = () => {
+  emit('reset')
+}
+
+const resetJsonText = () => {
+  jsonText.value = JSON.stringify(props.modelValue ?? {}, null, 2)
+  jsonError.value = ''
+}
+
+const handleJsonApply = () => {
+  try {
+    const parsed = JSON.parse(jsonText.value)
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      jsonError.value = 'JSON 根节点必须是对象'
+      return
+    }
+    emit('update:modelValue', parsed)
+    jsonText.value = JSON.stringify(parsed, null, 2)
+    jsonError.value = ''
+  } catch (error) {
+    jsonError.value = error instanceof Error ? error.message : 'JSON 格式错误'
+  }
+}
+
+const formatJsonText = async () => {
+  try {
+    jsonText.value = JSON.stringify(JSON.parse(jsonText.value), null, 2)
+    jsonError.value = ''
+    await nextTick()
+    await jsonCodeEditorRef.value?.formatDocument()
+  } catch (error) {
+    jsonError.value = error instanceof Error ? error.message : 'JSON 格式错误'
+  }
+}
+
+const componentSortableInstances = ref<Sortable[]>([])
+const canvasSortableInstances = ref<Sortable[]>([])
+
+const parseEditorPath = (value: string | null): EditorPath => {
+  if (!value) return []
+  try {
+    const parsed = JSON.parse(value)
+    return Array.isArray(parsed) ? parsed : []
+  } catch {
+    return []
+  }
+}
+
+const createFieldFromComponentType = (type: string | null) => {
+  if (!type) return undefined
+  const component = getComponentConfig(type)
+  if (!component) return undefined
+
+  const newField = cloneSchemaValue(component.scaffold)
+  newField[EDITOR_ID_FIELD] = createEditorId()
+  return newField
+}
+
+const getComponentConfig = (type: unknown) => componentList.find((component) => component.value === type)
+
+const isLeafEditorNode = (node: any) => {
+  return getComponentConfig(node?.type)?.editorKind !== 'container'
+}
+
+const isInputTableItemsPath = (path: EditorPath) => {
+  if (path[path.length - 1] !== 'items') return false
+  const owner = getByEditorPath(props.modelValue?.body || [], path.slice(0, -1))
+  return owner?.type === 'x-input-table'
+}
+
+const canDropNodeAtPath = (node: any, path: EditorPath) => {
+  if (!isInputTableItemsPath(path)) return true
+  return isLeafEditorNode(node)
+}
+
+const showUnsupportedTableColumnDrop = () => {
+  ElMessage.warning('表格输入器暂不支持容器组件，请选择普通组件。')
+}
+
+const restoreDraggedDom = (evt: Sortable.SortableEvent) => {
+  const oldIndex = evt.oldIndex ?? 0
+  const reference = evt.from.children[oldIndex] ?? null
+  evt.from.insertBefore(evt.item, reference)
+}
+
+const destroySortables = () => {
+  componentSortableInstances.value.forEach((instance) => instance.destroy())
+  componentSortableInstances.value = []
+  canvasSortableInstances.value.forEach((instance) => instance.destroy())
+  canvasSortableInstances.value = []
+}
+
+const initSortable = () => {
+  componentSortableInstances.value.forEach((instance) => instance.destroy())
+  componentSortableInstances.value = []
+  if (componentGridRef.value) {
+    const componentGrids = Array.from(componentGridRef.value.querySelectorAll<HTMLElement>('.x-editor__component-grid'))
+    componentSortableInstances.value = componentGrids.map((grid) =>
+      Sortable.create(grid, {
+        group: {
+          name: 'components',
+          pull: 'clone',
+          put: false
+        },
+        sort: false,
+        draggable: '.x-editor__component-item'
+      })
+    )
+  }
+
+  canvasSortableInstances.value.forEach((instance) => instance.destroy())
+  canvasSortableInstances.value = []
+
+  const containers = Array.from(canvasRef.value?.querySelectorAll<HTMLElement>('[data-editor-drop-path]') || [])
+  canvasSortableInstances.value = containers.map((container) => {
+    return Sortable.create(container, {
+      group: 'components',
+      draggable: '[data-editor-item-path], .x-editor__component-item',
+      animation: 150,
+      ghostClass: 'x-editor__ghost',
+      handle: '.editor-item-drag',
+      onAdd: (evt) => {
+        const newField = createFieldFromComponentType(evt.item.getAttribute('data-type'))
+        if (newField) {
+          const toContainerPath = parseEditorPath(evt.to.getAttribute('data-editor-drop-path'))
+          if (!canDropNodeAtPath(newField, toContainerPath)) {
+            showUnsupportedTableColumnDrop()
+            if (evt.item.parentNode) {
+              evt.item.parentNode.removeChild(evt.item)
+            }
+            return
+          }
+          const updatedBody = insertAtEditorPath(props.modelValue?.body || [], toContainerPath, evt.newIndex ?? 0, newField)
+          if (updatedBody.changed) updateBody(updatedBody.items)
+
+          // 立即移除拖入的原始 DOM，由 Vue 接管渲染
+          if (evt.item.parentNode) {
+            evt.item.parentNode.removeChild(evt.item)
+          }
+        }
+      },
+      onEnd: (evt) => {
+        if (evt.item.classList.contains('x-editor__component-item')) return
+        const fromContainerPath = parseEditorPath(evt.from.getAttribute('data-editor-drop-path'))
+        const toContainerPath = parseEditorPath(evt.to.getAttribute('data-editor-drop-path'))
+        if (evt.from === evt.to && evt.oldIndex !== evt.newIndex) {
+          const updatedBody = moveWithinEditorPath(props.modelValue?.body || [], fromContainerPath, evt.oldIndex!, evt.newIndex!)
+          if (updatedBody.changed) updateBody(updatedBody.items)
+        } else if (evt.from !== evt.to) {
+          const movingItem = getByEditorPath(props.modelValue?.body || [], [...fromContainerPath, evt.oldIndex ?? 0])
+          if (!canDropNodeAtPath(movingItem, toContainerPath)) {
+            showUnsupportedTableColumnDrop()
+            restoreDraggedDom(evt)
+            return
+          }
+          const updatedBody = moveAcrossEditorPaths(props.modelValue?.body || [], fromContainerPath, evt.oldIndex ?? 0, toContainerPath, evt.newIndex ?? 0)
+          if (updatedBody.changed) updateBody(updatedBody.items)
+        }
+      }
+    })
+  })
+}
+
+onMounted(() => {
+  initSortable()
+})
+
+onBeforeUnmount(() => {
+  destroySortables()
+})
+
+watch(
+  () => props.modelValue.body,
+  (body) => {
+    const normalized = normalizeEditorIds(body || [], createEditorId)
+    if (normalized.changed) {
+      updateBody(normalized.items)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+// 监听 body 变化，重新初始化 Sortable (因为 XForm 重新渲染可能导致 DOM 变化)
+watch(
+  () => props.modelValue.body,
+  () => {
+    nextTick(() => {
+      initSortable()
+    })
+  },
+  { deep: true }
+)
+
+// 监听模式切换，回到设计模式时重新初始化 Sortable
+watch(activeMode, (mode) => {
+  if (mode === 'design') {
+    nextTick(() => {
+      initSortable()
+    })
+  } else if (mode === 'json') {
+    resetJsonText()
+  }
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (activeMode.value === 'json' && props.editableJson && !jsonError.value) {
+      resetJsonText()
+    }
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.x-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #f5f7fa;
+  border: 1px solid #dcdfe6;
+  color: #303133;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Header Styles */
+.x-editor__header {
+  height: 48px;
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: #fff;
+  border-bottom: 1px solid #dcdfe6;
+  z-index: 10;
+}
+
+.x-editor__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2f3d;
+}
+
+.x-editor__modes {
+  display: flex;
+  background: #f0f2f5;
+  padding: 2px;
+  border-radius: 4px;
+}
+
+.x-editor__mode {
+  padding: 4px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.2s;
+  color: #606266;
+}
+
+.x-editor__mode.active {
+  background: #fff;
+  color: #409eff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.x-editor__btn {
+  padding: 6px 16px;
+  font-size: 13px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: 8px;
+  transition: all 0.2s;
+}
+
+.x-editor__btn:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+
+.x-editor__btn.primary {
+  background: #409eff;
+  border-color: #409eff;
+  color: #fff;
+}
+
+.x-editor__btn.primary:hover {
+  background: #66b1ff;
+  border-color: #66b1ff;
+}
+
+/* Body Styles */
+.x-editor__body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 260px 1fr 300px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.x-editor__body.is-mode-preview,
+.x-editor__body.is-mode-json {
+  grid-template-columns: 1fr;
+}
+
+.x-editor__panel {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  min-width: 0;
+  min-height: 0;
+  /* 防止内容撑开 grid */
+  overflow: hidden;
+}
+
+.x-editor__panel--center {
+  background: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-editor__panel--left {
+  border-right: 1px solid #dcdfe6;
+}
+
+.x-editor__panel--right {
+  border-left: 1px solid #dcdfe6;
+}
+
+.x-editor__panel-title {
+  height: 40px;
+  flex: 0 0 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid #f0f2f5;
+  color: #1f2f3d;
+}
+
+.x-editor__panel-title--config {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.x-editor__panel-title-main {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.x-editor__panel-title-main span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.x-editor__panel-title-main small {
+  min-width: 0;
+  overflow: hidden;
+  color: #909399;
+  font-size: 12px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.x-editor__target-action {
+  min-width: 0;
+  max-width: 120px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  overflow: hidden;
+  color: #409eff;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: #ecf5ff;
+  border: 1px solid #c6e2ff;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.x-editor__target-action i {
+  flex: 0 0 auto;
+  font-size: 13px;
+}
+
+.x-editor__target-action:hover {
+  color: #fff;
+  background: #409eff;
+  border-color: #409eff;
+}
+
+.x-editor__mode-switch {
+  width: 26px;
+  height: 26px;
+  flex: 0 0 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.x-editor__mode-switch:hover {
+  color: #409eff;
+  background: #ecf5ff;
+  border-color: #c6e2ff;
+}
+
+.x-editor__mode-switch i {
+  font-size: 15px;
+}
+
+.x-editor__config-tabs {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 4px;
+  padding: 8px 10px;
+  background: #fff;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.x-editor__config-tab {
+  min-width: 0;
+  flex: 1;
+  padding: 5px 4px;
+  line-height: 18px;
+  font-size: 12px;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #606266;
+  background: #f5f7fa;
+  transition: all 0.2s;
+}
+
+.x-editor__config-tab:hover,
+.x-editor__config-tab.active {
+  color: #409eff;
+  background: #ecf5ff;
+  border-color: #c6e2ff;
+}
+
+.x-editor__panel-scrollbar {
+  flex: 1;
+  min-height: 0;
+}
+
+.x-editor__panel-scrollbar :deep(.el-scrollbar__view) {
+  min-height: 100%;
+}
+
+.x-editor__panel--right .x-editor__panel-scrollbar :deep(.el-scrollbar__view) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-editor__panel-scrollbar--center :deep(.el-scrollbar__view) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-editor__center-content {
+  flex: 1;
+  min-height: 100%;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-editor__body.is-mode-preview .x-editor__center-content,
+.x-editor__body.is-mode-json .x-editor__center-content {
+  padding: 0;
+}
+
+/* Component Palette (Left Panel) */
+.x-editor__component-palette {
+  padding: 12px;
+}
+
+.x-editor__component-section + .x-editor__component-section {
+  margin-top: 16px;
+}
+
+.x-editor__component-section-title {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  margin-bottom: 8px;
+  color: #909399;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.x-editor__component-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.x-editor__component-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 8px;
+  background: #f9fafb;
+  border: 1px solid #f0f2f5;
+  border-radius: 4px;
+  cursor: move;
+  transition: all 0.2s;
+}
+
+.x-editor__component-item:hover {
+  border-color: #409eff;
+  color: #409eff;
+  background: #ecf5ff;
+}
+
+.x-editor__component-icon {
+  font-size: 20px;
+  margin-bottom: 6px;
+}
+
+.x-editor__component-label {
+  font-size: 12px;
+}
+
+/* Canvas area */
+.x-editor__canvas {
+  position: relative;
+  flex: 1;
+  min-height: 100%;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-canvas-form {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-canvas-root {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-canvas-form :deep(.el-form) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-canvas-form :deep(.el-row) {
+  flex: 1;
+  align-content: flex-start;
+  padding: 10px;
+  // min-height: 500px;
+  /* 确保空的时候也是一个大的拖拽目标 */
+}
+
+.x-editor__canvas-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #909399;
+  font-size: 14px;
+  border: 2px dashed #dcdfe6;
+  padding: 40px;
+  border-radius: 4px;
+  pointer-events: none;
+  /* 关键：不遮挡拖拽事件 */
+  z-index: 0;
+}
+
+.x-editor__preview-container {
+  padding: 40px;
+  width: 100%;
+  max-width: 1000px;
+  /* 预览时居中显示，更美观 */
+  margin: 0 auto;
+}
+
+.x-editor__json-container {
+  padding: 24px;
+  width: 100%;
+  flex: 1;
+  min-height: 100%;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-editor__json-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.x-editor__json-error {
+  min-width: 0;
+  color: #f56c6c;
+  font-size: 13px;
+}
+
+.x-editor__json-editor {
+  width: 100%;
+  flex: 1;
+  height: auto;
+  min-height: 520px;
+}
+
+.x-editor__canvas-item {
+  padding: 12px;
+  border: 1px solid transparent;
+  background: #fff;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.x-editor__canvas-item:hover {
+  background: #f0f7ff;
+  border: 1px dashed #409eff;
+}
+
+.x-editor__field-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.x-editor__field-label {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.x-editor__field-type {
+  color: #909399;
+  font-size: 12px;
+}
+
+.x-editor__ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+/* Config area */
+.x-editor__config-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  min-height: 100%;
+}
+
+.x-editor__config-json {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  background: #fff;
+}
+
+.x-editor__config-json-editor {
+  flex: 1;
+  min-height: 0;
+}
+
+.x-editor__config-panel :deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+
+.x-editor__config-panel :deep(.config-group-title) {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+  padding: 8px;
+  border-radius: 4px;
+  border-left: 3px solid #409eff;
+  margin: 8px 0;
+  line-height: 1;
+  background: #eee;
+}
+
+.x-editor__config-panel :deep(.el-group) {
+  margin-bottom: 24px;
+  background: #fcfcfc;
+  border-radius: 4px;
+}
+
+.x-editor__config-empty {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 13px;
+}
+
+.x-editor__config-form {
+  :deep(.el-form-item__content) {
+    justify-content: flex-end;
+  }
+}
+
+.x-editor__replace-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.x-editor__replace-item {
+  min-width: 0;
+  min-height: 72px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 8px;
+  color: #303133;
+  background: #f9fafb;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.x-editor__replace-item:hover {
+  color: #409eff;
+  background: #ecf5ff;
+  border-color: #c6e2ff;
+}
+
+.x-editor__replace-icon {
+  font-size: 20px;
+}
+
+.x-editor__replace-item span {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>