eoss 0.1.0-alpha.40 → 0.1.0-alpha.41

package/packages/form-editor/src/form-editor.vue

@@ -0,0 +1,981 @@
+<template>
+  <div class="es-form-editor">
+    <!-- 左侧：表单控件面板（拖出源） -->
+    <div class="es-form-editor__aside">
+      <div class="es-form-editor__search">
+        <es-input
+          v-model="keyword"
+          size="small"
+          placeholder="搜索控件"
+          clearable
+        ></es-input>
+      </div>
+      <es-scrollbar class="es-form-editor__palette-wrap">
+        <div ref="palette" class="es-form-editor__palette">
+          <div
+            v-for="item in components"
+            :key="item.name"
+            class="es-form-editor__palette-item"
+            :data-nodename="item.name"
+          >
+            {{ item.name.replace(/^Es/, '').trim() }}
+            -
+            {{ item.description }}
+          </div>
+        </div>
+      </es-scrollbar>
+    </div>
+
+    <!-- 中间：表单画布（真实 es-form 渲染，可拖拽排序） -->
+    <div class="es-form-editor__main">
+      <div class="es-form-editor__toolbar">
+        <es-button size="mini" @click="openJsonEdit()">JSON 编辑</es-button>
+        <es-button size="mini" @click="clearAll">清空</es-button>
+        <es-button size="mini" type="primary" @click="handleSave"
+          >保存</es-button
+        >
+      </div>
+      <es-scrollbar class="es-form-editor__canvas-wrap">
+        <div class="es-form-editor__canvas" @click.self="selectField(null)">
+          <es-form
+            ref="forms"
+            v-bind="localFormConfig"
+            :columns="formColumns"
+            :show-buttons="false"
+            class="es-form-editor__form"
+            :class="{ 'is-active': selectedId === null }"
+            @click.native.self="selectField(null)"
+          >
+            <es-form-item
+              class="es-form-editor__field"
+              v-for="(field, index) in forms"
+              :label="field.label"
+              :prop="field.name"
+              :key="field.id"
+              :class="{ 'is-active': selectedId === field.id }"
+              :span="spanOf(field)"
+              :data-id="field.id"
+              @click.native.stop="selectField(field)"
+            >
+              <component
+                :is="field.nodeName"
+                v-bind="fieldProps(field)"
+                :value="previewModels[field.name]"
+                @input="(val) => handlePreviewInput(field, val)"
+              ></component>
+              <template slot="handle">
+                <es-button
+                  type="text"
+                  size="mini"
+                  icon="es-icon-shanchu"
+                  class="es-form-editor__field-remove"
+                  @click.native.stop="removeField(index)"
+                ></es-button>
+                <div
+                  class="es-form-editor__resize-handle is-left es-icon-stretch"
+                  @pointerdown="handleResizeStart($event, field, 'left')"
+                  @dragstart="$event.preventDefault()"
+                ></div>
+                <div
+                  class="es-form-editor__resize-handle is-right es-icon-stretch"
+                  @pointerdown="handleResizeStart($event, field, 'right')"
+                  @dragstart="$event.preventDefault()"
+                ></div>
+              </template>
+            </es-form-item>
+            <div v-if="!forms.length" class="es-form-editor__empty">
+              从左侧拖动表单控件到这里
+            </div>
+          </es-form>
+        </div>
+      </es-scrollbar>
+    </div>
+
+    <!-- 右侧：属性面板（选中字段 → 字段属性；未选中 → 表单属性） -->
+    <div class="es-form-editor__attribute">
+      <template v-if="selectedField">
+        <div class="es-form-editor__panel-title">
+          字段属性
+          <span class="es-form-editor__panel-switch" @click="selectField(null)"
+            >表单属性</span
+          >
+        </div>
+        <props-panel
+          :model="fieldPanelModel"
+          :registry="flatRegistry"
+          :name-options="fieldNameOptions"
+          @change="handleFieldProps"
+          @edit="(meta) => openPropJson('field', meta)"
+        ></props-panel>
+      </template>
+      <template v-else>
+        <div class="es-form-editor__panel-title">表单属性</div>
+        <props-panel
+          :model="formModel"
+          :registry="formRegistry"
+          @change="handleFormProps"
+          @edit="(meta) => openPropJson('form', meta)"
+        ></props-panel>
+      </template>
+    </div>
+
+    <!-- JSON 源码编辑：monaco json + Ctrl+S 保存（编辑器自带状态栏，无 footer 按钮）；
+         铅笔按钮也走本弹窗，仅额外做缺键插入 + 光标定位 -->
+    <es-dialog
+      size="max"
+      title="JSON 编辑"
+      :visible.sync="showJsonEdit"
+      :before-close="handleJsonEditClose"
+    >
+      <es-code-editor
+        v-if="showJsonEdit"
+        ref="jsonEditorRef"
+        :value="jsonText"
+        language="json"
+        class="es-form-editor__json-editor"
+        @save="handleJsonSave"
+        @ready="handleEditorReady"
+      ></es-code-editor>
+    </es-dialog>
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs';
+import EsForm from 'eoss/packages/form';
+import EsFormItem from 'eoss/packages/form-item';
+import EsInput from 'eoss/packages/input';
+import EsButton from 'eoss/packages/button';
+import EsDialog from 'eoss/packages/dialog';
+import EsScrollbar from 'eoss/packages/scrollbar';
+import PropsPanel from './props-panel.vue';
+import EsCodeEditor from 'eoss/packages/code-editor';
+import { props, librarys } from './components.js';
+import { generateVueSource } from 'eoss/src/utils/source-generator.js';
+import { migrateDirectives } from 'eoss/src/utils/source-parser.js';
+import { uuid } from 'eoss/src/utils/util.js';
+
+// 字段元信息键：其余键均为控件 prop 取值（平铺契约，不再嵌套 props，适配 es-form contents）
+const FIELD_META = ['description', 'id', 'nodeName', 'label', 'name', 'span'];
+
+/**
+ * 表单编辑器：拖动 es-form 表单控件生成表单结构（仿 lowcode 三栏布局）。
+ * 产出 forms 为平铺字段契约节点 { description, id, nodeName, label, name, ...prop 取值 }，
+ * 可直接作为 es-form 的 :contents 消费（form-item-render 的 nodeName 兼容通道），
+ * 也可交给 lowcode 挂到 EsForm 节点的 children 下。
+ */
+export default {
+  name: 'EsFormEditor',
+
+  components: {
+    EsForm,
+    EsFormItem,
+    EsInput,
+    EsButton,
+    EsDialog,
+    EsScrollbar,
+    PropsPanel,
+    EsCodeEditor
+  },
+
+  props: {
+    // 表单控件：左侧控件面板
+    components: {
+      type: Array,
+      default: () => librarys
+    },
+    // 表字段名，当为Object时对应多表
+    fields: [Array, Object],
+    formProps: {
+      type: Array,
+      default: () => props
+    },
+    // es-form 表单级配置（columns/labelWidth 等，支持 .sync）
+    configs: {
+      type: Object,
+      default: () => ({})
+    },
+    // 表单内容
+    contents: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      keyword: '',
+      selectedId: null,
+      showJsonEdit: false,
+      // JSON 弹窗编辑器内容（打开时快照，避免画布变更覆盖用户编辑）
+      jsonText: '',
+      // 铅笔按钮打开时的光标目标：{ fieldId, path }，editor ready 后消费
+      pendingCursor: null,
+      // 表单级配置本地副本：父级未用 .sync 时画布/面板也能实时生效
+      localFormConfig: this.configs || {},
+      // 画布内控件实时预览取值（不入结构 JSON）
+      previewModels: {},
+      // 列宽拖拽会话：{ field, itemEl, direction, startX, startWidth, colWidth, columns, lastWidth, moved }，null 为未拖拽
+      resizeState: null,
+      // 内部字段列表：与 value 同引用（父级回传时避免克隆打断面板输入）
+      forms: this.contents || []
+    };
+  },
+
+  computed: {
+    // 注册表拍平后喂给自有 props-panel（含 EsForm 自身定义，供表单属性面板用）；
+    // components 既支持拍平定义数组（本地 components.js 形态），也兼容分组形态；
+    // 表单设计器内任何控件都默认是表单字段（es-form-item 包裹），不按包裹清单过滤
+    flatRegistry() {
+      const list = [];
+      (this.components || []).forEach((item) => {
+        if (item && Array.isArray(item.children)) {
+          item.children.forEach((comp) => list.push(comp));
+        } else if (item) {
+          list.push(item);
+        }
+      });
+      return list;
+    },
+
+    // 左侧控件面板：注册表分组拍平（分组标题 + 控件项），
+    // 支持关键字搜索；单层结构便于 Sortable 直接拖拽子项
+    paletteEntries() {
+      const kw = this.keyword.trim().toLowerCase();
+      const entries = [];
+      librarys.forEach((group) => {
+        const comps = (group.children || []).filter((comp) => {
+          if (!kw) return true;
+          return (
+            String(comp.name).toLowerCase().includes(kw) ||
+            String(comp.description || '')
+              .toLowerCase()
+              .includes(kw)
+          );
+        });
+        if (!comps.length) return;
+        entries.push({
+          type: 'group',
+          key: 'group-' + group.label,
+          text: group.label
+        });
+        comps.forEach((comp) => {
+          entries.push({
+            type: 'comp',
+            key: comp.name,
+            name: comp.name,
+            text: comp.description || comp.name
+          });
+        });
+      });
+      return entries;
+    },
+
+    // 表单属性面板定义：formProps（表单级 props 定义数组）包成 EsForm 定义条目，
+    // 供 props-panel 按 nodeName 查找（librarys 中已不含 EsForm 定义）
+    formRegistry() {
+      return [
+        {
+          name: 'EsForm',
+          props: Array.isArray(this.formProps) ? this.formProps : []
+        }
+      ];
+    },
+
+    selectedField() {
+      return this.forms.find((f) => f.id === this.selectedId) || null;
+    },
+
+    // fields 有传入值（表字段名，Array 或 Object 多表）时 name 改下拉的选项清单；
+    // 未传入或空给 null，面板保持文本输入
+    fieldNameOptions() {
+      const fields = this.fields;
+      if (!fields || typeof fields !== 'object') return null;
+      const list = [];
+      const push = (v) => {
+        const s = String(v);
+        if (s && !list.includes(s)) list.push(s);
+      };
+      const walk = (val) => {
+        if (Array.isArray(val)) {
+          val.forEach(walk);
+        } else if (val && typeof val === 'object') {
+          Object.keys(val).forEach(push);
+        } else {
+          push(val);
+        }
+      };
+      if (Array.isArray(fields)) {
+        fields.forEach(walk);
+      } else {
+        Object.keys(fields).forEach((k) => walk(fields[k]));
+      }
+      return list.length ? list.map((n) => ({ name: n, value: n })) : null;
+    },
+
+    // 表单属性面板的模型：复用注册表 EsForm 定义
+    formModel() {
+      return { nodeName: 'EsForm', props: this.localFormConfig };
+    },
+
+    // 有效列数：表单配置取值优先；缺键时回落注册表 EsForm columns 默认值
+    // （属性面板缺键展示的也是该默认值，两边口径一致），最后兜底 1
+    formColumns() {
+      const raw = this.localFormConfig.columns;
+      if (raw !== undefined && raw !== '') {
+        return Number(raw) || 1;
+      }
+      return Number(this.defaultForProp('EsForm', 'columns')) || 1;
+    },
+
+    // 字段面板模型：props 指向字段节点本身（取值平铺在节点上），复用 props-panel 读写通道
+    fieldPanelModel() {
+      return this.selectedField
+        ? { nodeName: this.selectedField.nodeName, props: this.selectedField }
+        : null;
+    },
+
+    // JSON 编辑弹窗的模型：{ configs, forms } 全量结构
+    jsonModel() {
+      return { configs: this.localFormConfig, forms: this.forms };
+    },
+
+    // 源码编辑的合成 EsForm 节点：props 承载表单级配置，children 为字段列表
+    // （生成器读 node.props 输出绑定，平铺取值在此映射回 props 供生成用）
+    formNode() {
+      return {
+        id: 'form-root',
+        nodeName: 'EsForm',
+        props: this.localFormConfig,
+        children: (this.forms || []).map((field) => ({
+          ...field,
+          props: this.fieldProps(field)
+        }))
+      };
+    },
+
+    // 源码编辑的合成页面记录（generateVueSource 根标签固定 div，EsForm 作唯一子节点）
+    sourcePage() {
+      return {
+        id: 'form-editor',
+        type: 'page',
+        name: '',
+        children: [this.formNode]
+      };
+    }
+  },
+
+  watch: {
+    // 父级替换表单内容时同步（同引用回传不处理，避免打断面板输入）
+    contents(val) {
+      if (val && val !== this.forms) {
+        this.forms = val;
+      }
+    },
+    // 父级外部更新表单配置时同步本地副本
+    configs(val) {
+      if (val && val !== this.localFormConfig) {
+        this.localFormConfig = val;
+      }
+    }
+  },
+
+  mounted() {
+    this.initSortable();
+  },
+
+  beforeDestroy() {
+    this.destroySortable();
+  },
+
+  methods: {
+    initSortable() {
+      const palette = this.$refs.palette;
+      // ref="forms" 挂在 es-form 组件上，Sortable 需要其根 DOM 元素
+      const forms = this.$refs.forms && this.$refs.forms.$el;
+
+      if (palette) {
+        this.paletteSortable = new Sortable(palette, {
+          group: { name: 'es-form-editor', pull: 'clone', put: false },
+          sort: false,
+          animation: 150,
+          draggable: '.es-form-editor__palette-item',
+          fallbackOnBody: true,
+          filter: '.es-form-editor__palette-group'
+        });
+      }
+
+      if (forms) {
+        this.fieldsSortable = new Sortable(forms, {
+          group: { name: 'es-form-editor', pull: false, put: true },
+          animation: 150,
+          draggable: '.es-form-editor__field',
+          ghostClass: 'is-ghost',
+          fallbackOnBody: true,
+          // 删除按钮/列宽手柄上不启动排序拖拽（否则原生 DnD 接管指针，pointermove 断流）
+          filter:
+            '.es-form-editor__resize-handle, .es-form-editor__field-remove',
+          onAdd: this.handleDropAdd,
+          onEnd: this.handleReorder
+        });
+      }
+    },
+
+    destroySortable() {
+      if (this.paletteSortable) {
+        this.paletteSortable.destroy();
+        this.paletteSortable = null;
+      }
+      if (this.fieldsSortable) {
+        this.fieldsSortable.destroy();
+        this.fieldsSortable = null;
+      }
+    },
+
+    /**
+     * 面板拖入：移除 Sortable 克隆的 DOM（列表由 Vue 渲染），
+     * 按落点索引生成字段契约节点插入 forms
+     */
+    handleDropAdd(evt) {
+      const nodeName = evt.item.getAttribute('data-nodename');
+      if (evt.item.parentNode) {
+        evt.item.parentNode.removeChild(evt.item);
+      }
+      if (!nodeName) return;
+
+      const pascal = this.pascal(nodeName);
+      const def = this.flatRegistry.find((c) => c.name === pascal);
+      const description = (def && def.description) || pascal;
+      const field = {
+        description,
+        id: `${uuid()}`,
+        nodeName: pascal,
+        label: description,
+        // fields 有传入时 name 由下拉选择，不自动生成默认字段键
+        name: this.fieldNameOptions
+          ? ''
+          : this.buildFieldName(this.forms, pascal)
+      };
+
+      // 空列表时 DOM 里还有占位提示，索引按 forms 长度收敛
+      const index = Math.min(evt.newIndex, this.forms.length);
+      this.forms.splice(index, 0, field);
+      this.selectField(field);
+      this.notifyChange();
+    },
+
+    /**
+     * 画布内排序：字段嵌套在 es-form 内层包裹中，
+     * 以 querySelectorAll 取 .es-form-editor__field 的 DOM data-id 顺序重建 forms
+     */
+    handleReorder() {
+      const form = this.$refs.forms;
+      const container = form && form.$el;
+      if (!container) return;
+
+      const domIds = Array.from(
+        container.querySelectorAll('.es-form-editor__field')
+      )
+        .map((el) => el.getAttribute('data-id'))
+        .filter(Boolean);
+      const curIds = this.forms.map((f) => f.id);
+      if (curIds.join(',') === domIds.join(',')) return;
+
+      const byId = {};
+      this.forms.forEach((f) => {
+        byId[f.id] = f;
+      });
+      this.forms = domIds.map((id) => byId[id]).filter(Boolean);
+      this.notifyChange();
+    },
+
+    selectField(field) {
+      this.selectedId = field ? field.id : null;
+    },
+
+    handlePreviewInput(field, val) {
+      this.$set(this.previewModels, field.name, val);
+    },
+
+    removeField(index) {
+      const removed = this.forms[index];
+      this.forms.splice(index, 1);
+      if (removed && removed.id === this.selectedId) {
+        this.selectedId = null;
+      }
+      this.notifyChange();
+    },
+
+    /** es-input / esInput → EsInput */
+    pascal(name) {
+      return String(name).replace(/(^|-)(\w)/g, (m, sep, c) => c.toUpperCase());
+    },
+
+    /**
+     * 字段键：组件名去 Es 前缀转驼峰作前缀（EsInput → input、EsDatePicker → datePicker），
+     * 从 1 递增查重（设计器本地生成，不依赖 lowcode 包裹契约的 form-controls）
+     */
+    buildFieldName(siblings, nodeName) {
+      const prefix = String(nodeName || 'field')
+        .replace(/^Es/, '')
+        .replace(/^(.)/, (m, c) => c.toLowerCase());
+      let idx = 1;
+      let name = prefix + idx;
+      while ((siblings || []).some((f) => f && f.name === name)) {
+        idx += 1;
+        name = prefix + idx;
+      }
+      return name;
+    },
+
+    /** 字段节点上的控件 prop 取值：除元信息键外的全部键（平铺契约） */
+    fieldProps(field) {
+      const rest = {};
+      Object.keys(field || {}).forEach((key) => {
+        if (FIELD_META.includes(key)) return;
+        rest[key] = field[key];
+      });
+      return rest;
+    },
+
+    /**
+     * 字段占列数（columns 列制，1..columns）：显式 span 优先并 clamp 到 columns，
+     * 缺省占 1 列；form-item itemStyle 按 (100/columns)*span 渲染宽度
+     */
+    spanOf(field) {
+      const columns = Math.max(Number(this.formColumns) || 1, 1);
+      const explicit = Number(field && field.span);
+      if (explicit) return Math.min(Math.max(explicit, 1), columns);
+      return 1;
+    },
+
+    /**
+     * 列宽拖拽起手势：记录字段根元素、起始指针/宽度、单列宽与方向。
+     * 左手柄向左拖、右手柄向右拖均增大占宽；拖动中直接改像素宽度（丝滑），
+     * 松手才按列取整 snap 成 span（1..columns）
+     */
+    handleResizeStart(event, field, direction) {
+      event.preventDefault();
+      event.stopPropagation();
+      const formEl = this.$refs.forms && this.$refs.forms.$el;
+      if (!formEl) return;
+      const columns = Math.max(Number(this.formColumns) || 1, 1);
+      const itemEl =
+        event.currentTarget && event.currentTarget.closest
+          ? event.currentTarget.closest('.es-form-editor__field')
+          : null;
+      const colWidth = formEl.clientWidth / columns;
+      this.resizeState = {
+        field,
+        itemEl,
+        direction: direction === 'left' ? 'left' : 'right',
+        startX: event.clientX,
+        startWidth: itemEl ? itemEl.getBoundingClientRect().width : colWidth,
+        colWidth,
+        columns,
+        lastWidth: 0,
+        moved: false
+      };
+      document.addEventListener('pointermove', this.handleResizeMove);
+      document.addEventListener('pointerup', this.handleResizeEnd);
+    },
+
+    handleResizeMove(event) {
+      const st = this.resizeState;
+      if (!st || !st.itemEl || !st.colWidth) return;
+      const offset = event.clientX - st.startX;
+      if (offset) st.moved = true;
+      const sign = st.direction === 'left' ? -1 : 1;
+      // 实时像素宽度，夹在 [单列, 整行] 之间；此阶段不写 span，保证拖动丝滑
+      const max = st.colWidth * st.columns;
+      const width = Math.min(
+        Math.max(st.startWidth + sign * offset, st.colWidth),
+        max
+      );
+      st.lastWidth = width;
+      st.itemEl.style.width = `${width}px`;
+    },
+
+    handleResizeEnd() {
+      document.removeEventListener('pointermove', this.handleResizeMove);
+      document.removeEventListener('pointerup', this.handleResizeEnd);
+      const st = this.resizeState;
+      this.resizeState = null;
+      if (!st) return;
+      if (st.moved && st.itemEl && st.colWidth) {
+        // 松手按列取整：span ∈ [1, columns]，绝不会超过列数
+        const width = st.lastWidth || st.startWidth;
+        const span = Math.min(
+          Math.max(Math.round(width / st.colWidth), 1),
+          st.columns
+        );
+        // 内联宽度收敛到目标列宽百分比，与 form-item span 渲染同源，避免闪动
+        st.itemEl.style.width = `${(100 / st.columns) * span}%`;
+        if (span > 1) {
+          if (span !== Number(st.field.span)) this.$set(st.field, 'span', span);
+        } else if (st.field.span !== undefined) {
+          // 占 1 列即默认，删键不落库
+          this.$delete(st.field, 'span');
+        }
+      }
+      // 拖拽结束后的 click 会冒泡到字段/画布触发选中切换，捕获阶段吞掉
+      if (st.moved) {
+        const swallow = (e) => {
+          e.stopPropagation();
+          document.removeEventListener('click', swallow, true);
+        };
+        document.addEventListener('click', swallow, true);
+      }
+      this.notifyChange();
+    },
+
+    clearAll() {
+      this.forms.splice(0, this.forms.length);
+      this.selectedId = null;
+      this.previewModels = {};
+      this.notifyChange();
+    },
+
+    // props 面板回写：prop 取值平铺写回字段节点（元信息键不动）；
+    // payload 已承继自定义键，未出现的键即本轮恢复默认值，删除
+    handleFieldProps(payload) {
+      const field = this.selectedField;
+      if (!field || !payload) return;
+      const values = payload.props || {};
+      Object.keys(field).forEach((key) => {
+        if (FIELD_META.includes(key) || values[key] !== undefined) return;
+        this.$delete(field, key);
+      });
+      Object.keys(values).forEach((key) => {
+        // label/name 等节点级字段也允许面板直改（画布 es-form-item 即时同步）
+        this.$set(field, key, values[key]);
+      });
+      this.notifyChange();
+    },
+
+    // 表单级 props 回写（columns/labelWidth 等）
+    handleFormProps(payload) {
+      if (!payload) return;
+      this.localFormConfig = payload.props || {};
+      this.$emit('update:configs', this.localFormConfig);
+      this.$emit('form-config-change', this.localFormConfig);
+    },
+
+    /** 工具栏保存：抛出字段结构 + 表单配置 + 生成的 Vue 源码 */
+    handleSave() {
+      this.$emit('save', {
+        forms: this.forms,
+        configs: this.localFormConfig,
+        source: generateVueSource(this.sourcePage)
+      });
+    },
+
+    /** 工具栏 JSON 编辑：全量结构快照开弹窗 */
+    openJsonEdit() {
+      this.jsonText = JSON.stringify(this.jsonModel, null, 2);
+      this.pendingCursor = null;
+      this.showJsonEdit = true;
+    },
+
+    /**
+     * 属性面板铅笔按钮：同样打开全量 JSON 弹窗，
+     * 缺键先按注册表默认值插入，editor ready 后光标定位（并选中取值）到对应键
+     */
+    openPropJson(scope, meta) {
+      const key = meta && meta.cursorField;
+      if (!key) return;
+      const model = JSON.parse(JSON.stringify(this.jsonModel));
+      let fieldId = null;
+      let path;
+      if (scope === 'field') {
+        const field = (model.forms || []).find((f) => f.id === this.selectedId);
+        if (!field) return;
+        fieldId = field.id;
+        if (field[key] === undefined) {
+          field[key] = this.defaultForProp(field.nodeName, key);
+        }
+        path = [key];
+      } else {
+        if (!model.configs || typeof model.configs !== 'object') {
+          model.configs = {};
+        }
+        if (model.configs[key] === undefined) {
+          model.configs[key] = this.defaultForProp('EsForm', key);
+        }
+        path = ['configs', key];
+      }
+      this.jsonText = JSON.stringify(model, null, 2);
+      this.pendingCursor = { fieldId, path };
+      this.showJsonEdit = true;
+    },
+
+    /** 注册表 prop 默认值（缺键插入兜底），无定义给空串 */
+    defaultForProp(nodeName, key) {
+      const pool =
+        nodeName === 'EsForm' ? this.formRegistry : this.flatRegistry;
+      const comp = pool.find((c) => c.name === nodeName);
+      const def = comp && (comp.props || []).find((p) => p.name === key);
+      return def && def.default !== undefined ? def.default : '';
+    },
+
+    /** editor ready：消费铅笔按钮留下的光标目标 */
+    handleEditorReady() {
+      if (!this.pendingCursor) return;
+      const cursor = this.pendingCursor;
+      this.pendingCursor = null;
+      this.positionCursor(cursor);
+    },
+
+    /** 在 monaco 中定位目标键取值区间：选中 + 居中 + 聚焦 */
+    positionCursor(cursor) {
+      const wrap = this.$refs.jsonEditorRef;
+      const editor = wrap && wrap.editor;
+      if (!editor || !editor.getModel) return;
+      const node = this.locateJsonNode(editor.getValue(), cursor);
+      if (!node) return;
+      const model = editor.getModel();
+      const start = model.getPositionAt(node.start);
+      const end = model.getPositionAt(node.end);
+      editor.setSelection({
+        startLineNumber: start.lineNumber,
+        startColumn: start.column,
+        endLineNumber: end.lineNumber,
+        endColumn: end.column
+      });
+      editor.revealLineInCenter(start.lineNumber);
+      editor.focus();
+    },
+
+    /**
+     * 按 { fieldId, path } 定位取值节点：根为 { configs, forms }，
+     * fieldId 存在时先定位 forms 中该 id 的字段对象，再沿 path 逐键下钻
+     */
+    locateJsonNode(text, cursor) {
+      let root;
+      try {
+        root = this.scanJsonValue(text, text.indexOf('{'));
+      } catch (e) {
+        return null;
+      }
+      if (!root || root.type !== 'object') return null;
+      let obj = root;
+      if (cursor.fieldId) {
+        const fieldsNode = root.keys && root.keys.forms;
+        if (!fieldsNode || !fieldsNode.items) return null;
+        obj =
+          fieldsNode.items.find(
+            (it) => it.keys && it.keys.id && it.keys.id.value === cursor.fieldId
+          ) || null;
+        if (!obj) return null;
+      }
+      let cur = obj;
+      for (let i = 0; i < cursor.path.length; i += 1) {
+        const next = cur.keys && cur.keys[cursor.path[i]];
+        if (!next) return null;
+        if (i === cursor.path.length - 1) return next;
+        cur = next;
+      }
+      return null;
+    },
+
+    /**
+     * 字符级 JSON 扫描器（字符串感知，串内花括号不干扰层级）：
+     * 对象节点带 keys（键名 → 值节点）、数组节点带 items；
+     * start/end 为取值字符区间（供光标定位）
+     */
+    scanJsonValue(text, idx) {
+      const skipWs = (i) => {
+        while (i < text.length && /\s/.test(text[i])) i += 1;
+        return i;
+      };
+      const parseString = (i) => {
+        // text[i] === '"'；仅用于键名/id 比对，转义按原样拼接
+        let j = i + 1;
+        let raw = '';
+        while (j < text.length) {
+          const ch = text[j];
+          if (ch === '\\') {
+            raw += text[j + 1];
+            j += 2;
+            continue;
+          }
+          if (ch === '"') break;
+          raw += ch;
+          j += 1;
+        }
+        return { value: raw, end: j + 1 };
+      };
+      const start = skipWs(idx);
+      const ch = text[start];
+      if (ch === '{') {
+        const keys = {};
+        let i = start + 1;
+        for (;;) {
+          i = skipWs(i);
+          if (text[i] === '}') {
+            return { type: 'object', keys, start, end: i + 1 };
+          }
+          const key = parseString(i);
+          i = skipWs(key.end) + 1; // 冒号
+          const val = this.scanJsonValue(text, i);
+          keys[key.value] = val;
+          i = skipWs(val.end);
+          if (text[i] === ',') {
+            i += 1;
+            continue;
+          }
+          return { type: 'object', keys, start, end: i + 1 };
+        }
+      }
+      if (ch === '[') {
+        const items = [];
+        let i = start + 1;
+        for (;;) {
+          i = skipWs(i);
+          if (text[i] === ']') {
+            return { type: 'array', items, start, end: i + 1 };
+          }
+          const val = this.scanJsonValue(text, i);
+          items.push(val);
+          i = skipWs(val.end);
+          if (text[i] === ',') {
+            i += 1;
+            continue;
+          }
+          return { type: 'array', items, start, end: i + 1 };
+        }
+      }
+      if (ch === '"') {
+        const str = parseString(start);
+        return { type: 'string', value: str.value, start, end: str.end };
+      }
+      let j = start;
+      while (j < text.length && ',]}'.indexOf(text[j]) === -1) j += 1;
+      const raw = text.slice(start, j).trim();
+      let value = raw;
+      if (raw === 'true') value = true;
+      else if (raw === 'false') value = false;
+      else if (raw === 'null') value = null;
+      else if (/^-?\d+(\.\d+)?$/.test(raw)) value = Number(raw);
+      return { type: 'literal', value, start, end: j };
+    },
+
+    /** Ctrl+S 保存：解析回写后弹窗保持打开并标记已保存（编辑器状态栏显示 ✓ 已保存） */
+    handleJsonSave(value, errors) {
+      const ref = this.$refs.jsonEditorRef;
+      if (errors && errors.length) {
+        if (ref) ref.setErrors(errors);
+        return;
+      }
+      let parsed;
+      try {
+        parsed = JSON.parse(value);
+      } catch (e) {
+        if (ref) {
+          ref.setErrors([{ message: 'JSON 格式错误', startLineNumber: 1 }]);
+        }
+        return;
+      }
+      const config =
+        parsed &&
+        parsed.configs &&
+        typeof parsed.configs === 'object' &&
+        !Array.isArray(parsed.configs)
+          ? parsed.configs
+          : this.localFormConfig;
+      const list = parsed && Array.isArray(parsed.forms) ? parsed.forms : [];
+      const forms = this.normalizeFields(list);
+
+      this.localFormConfig = config;
+      this.$emit('update:configs', config);
+      this.$emit('form-config-change', config);
+      this.forms.splice(0, this.forms.length, ...forms);
+      if (!this.forms.some((f) => f.id === this.selectedId)) {
+        this.selectedId = null;
+      }
+      this.notifyChange();
+      if (ref) ref.markSaved();
+    },
+
+    /** 关闭 JSON 弹窗前检查未保存修改（与 lowcode handleOpenClose 同策略） */
+    handleJsonEditClose(done) {
+      const close = () => {
+        this.showJsonEdit = false;
+        if (typeof done === 'function') done();
+      };
+      const ref = this.$refs.jsonEditorRef;
+      if (ref && ref.isDirty()) {
+        this.$confirm('JSON 已修改但尚未保存，确定关闭吗？', '提示', {
+          type: 'warning'
+        })
+          .then(close)
+          .catch(() => {});
+        return;
+      }
+      close();
+    },
+
+    /**
+     * 字段列表契约归一：migrateDirectives 补齐历史形态/孤儿字段键，
+     * attrs → props 归并，nodeName 归一 Pascal，缺 id/label/name 兜底
+     */
+    normalizeFields(list) {
+      const wrapper = { children: (list || []).filter(Boolean) };
+      migrateDirectives(wrapper);
+      this.mergeAttrsToNode(wrapper);
+      const forms = wrapper.children;
+      forms.forEach((field) => {
+        // 历史 props 嵌套形态迁移：prop 取值拍平到节点后移除 props（平铺契约）
+        if (
+          field.props &&
+          typeof field.props === 'object' &&
+          !Array.isArray(field.props)
+        ) {
+          Object.keys(field.props).forEach((key) => {
+            if (field[key] === undefined) field[key] = field.props[key];
+          });
+        }
+        delete field.props;
+        field.nodeName = this.pascal(field.nodeName || '');
+        if (!field.id) field.id = `${uuid()}`;
+        if (field.label === undefined) field.label = field.description || '';
+        if (field.name === undefined || field.name === '') {
+          field.name = this.fieldNameOptions
+            ? ''
+            : this.buildFieldName(
+              forms.filter((f) => f !== field),
+              field.nodeName
+            );
+        }
+      });
+      return forms;
+    },
+
+    /**
+     * 生成器把字符串 prop 输出为普通 HTML 属性，解析端会归入 attrs；
+     * 回写前递归归并 attrs → 节点平铺键（class/style/id/slot 等结构属性保留在 attrs），
+     * 保证字符串取值（placeholder/labelWidth 等）不丢、属性面板可回显
+     */
+    mergeAttrsToNode(node) {
+      if (!node || typeof node !== 'object') return;
+      const RESERVED = ['class', 'style', 'id', 'slot', 'key', 'ref'];
+      if (node.attrs && typeof node.attrs === 'object') {
+        Object.keys(node.attrs).forEach((key) => {
+          if (RESERVED.includes(key)) return;
+          if (node[key] === undefined) {
+            node[key] = node.attrs[key];
+          }
+          delete node.attrs[key];
+        });
+        if (!Object.keys(node.attrs).length) delete node.attrs;
+      }
+      (node.children || []).forEach((child) => this.mergeAttrsToNode(child));
+    },
+
+    notifyChange() {
+      this.$emit('update:contents', this.forms);
+      this.$emit('change', this.forms);
+    }
+  }
+};
+</script>