@tmagic/editor 1.4.1 → 1.4.3

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('moveable'), require('@tmagic/table'), require('@tmagic/utils'), require('@tmagic/dep'), require('gesto'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', 'moveable', '@tmagic/table', '@tmagic/utils', '@tmagic/dep', 'gesto', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.VanillaMoveable, global.table, global.utils, global.dep, global.Gesto, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, VanillaMoveable, table, utils, dep, Gesto, StageCore, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/form'), require('@tmagic/schema'), require('moveable'), require('@tmagic/table'), require('@tmagic/utils'), require('@tmagic/dep'), require('gesto'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/form', '@tmagic/schema', 'moveable', '@tmagic/table', '@tmagic/utils', '@tmagic/dep', 'gesto', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.form, global.schema, global.VanillaMoveable, global.table, global.utils, global.dep, global.Gesto, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, form, schema, VanillaMoveable, table, utils, dep, Gesto, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -488,17 +488,20 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-fields-code-select", _ctx.config.className])
         }, [
           vue.createVNode(vue.unref(design.TMagicCard), null, {
             default: vue.withCtx(() => [
-              vue.createVNode(_component_m_form_container, {
+              vue.createVNode(vue.unref(form.MContainer), {
                 config: codeConfig.value,
+                size: _ctx.size,
+                prop: _ctx.prop,
+                disabled: _ctx.disabled,
+                lastValues: _ctx.lastValues,
                 model: _ctx.model[_ctx.name],
                 onChange: changeHandler
-              }, null, 8, ["config", "model"])
+              }, null, 8, ["config", "size", "prop", "disabled", "lastValues", "model"])
             ]),
             _: 1
           })
@@ -3170,7 +3173,10 @@
         throw new Error(`获取不到id为${config.id}的节点`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
-      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue) => {
+      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
+        if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+          return "";
+        }
         if (lodashEs.isObject(srcValue) && Array.isArray(objValue)) {
           return srcValue;
         }
@@ -4598,8 +4604,115 @@
     }
   });
 
-  const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const useDataSourceEdit = (dataSourceService) => {
+    const dialogTitle = vue.ref("");
+    const editDialog = vue.ref();
+    const dataSourceValues = vue.ref({});
+    const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
+    const editHandler = (id) => {
+      if (!editDialog.value)
+        return;
+      dataSourceValues.value = {
+        ...dataSourceService?.getDataSourceById(id)
+      };
+      dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
+      editDialog.value.show();
+    };
+    const submitDataSourceHandler = (value) => {
+      if (value.id) {
+        dataSourceService?.update(value);
+      } else {
+        dataSourceService?.add(value);
+      }
+      editDialog.value?.hide();
+    };
+    return {
+      dialogTitle,
+      editDialog,
+      dataSourceValues,
+      editable,
+      editHandler,
+      submitDataSourceHandler
+    };
+  };
+
   const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorDataSourceConfigPanel"
+    },
+    __name: "DataSourceConfigPanel",
+    props: /* @__PURE__ */ vue.mergeModels({
+      title: {},
+      values: {},
+      disabled: { type: Boolean }
+    }, {
+      "visible": { type: Boolean, ...{ default: false } },
+      "visibleModifiers": {},
+      "width": { default: 670 },
+      "widthModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:visible", "update:width"]),
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const boxVisible = vue.useModel(__props, "visible");
+      const width = vue.useModel(__props, "width");
+      const emit = __emit;
+      const services = vue.inject("services");
+      const initValues = vue.ref({});
+      const dataSourceConfig = vue.ref([]);
+      const { height: editorHeight } = useEditorContentHeight();
+      const parentFloating = vue.inject("parentFloating", vue.ref(null));
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      vue.watchEffect(() => {
+        initValues.value = props.values;
+        dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
+      });
+      const submitHandler = (values) => {
+        emit("submit", values);
+      };
+      const errorHandler = (error) => {
+        design.tMagicMessage.error(error.message);
+      };
+      __expose({
+        show() {
+          calcBoxPosition();
+          boxVisible.value = true;
+        },
+        hide() {
+          boxVisible.value = false;
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$P, {
+          visible: boxVisible.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
+          width: width.value,
+          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
+          height: vue.unref(editorHeight),
+          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(editorHeight) ? editorHeight.value = $event : null),
+          title: _ctx.title,
+          position: vue.unref(boxPosition)
+        }, {
+          body: vue.withCtx(() => [
+            vue.createVNode(vue.unref(form.MFormBox), {
+              "label-width": "80px",
+              title: _ctx.title,
+              config: dataSourceConfig.value,
+              values: initValues.value,
+              disabled: _ctx.disabled,
+              style: { "height": "100%" },
+              onSubmit: submitHandler,
+              onError: errorHandler
+            }, null, 8, ["title", "config", "values", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["visible", "width", "height", "title", "position"]);
+      };
+    }
+  });
+
+  const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
     },
@@ -4620,6 +4733,13 @@
       const services = vue.inject("services");
       const emit = __emit;
       const props = __props;
+      const selectedDataSourceId = vue.computed(() => {
+        const value = props.model[props.name];
+        if (!Array.isArray(value) || !value.length) {
+          return "";
+        }
+        return value[0].replace(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
+      });
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
       const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
         const child = [];
@@ -4638,7 +4758,7 @@
             child.push(item);
             return;
           }
-          if (!dataSourceFieldType.includes(fieldType) && fieldType !== "object") {
+          if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
             return;
           }
           if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
@@ -4665,12 +4785,19 @@
         };
       });
       const showDataSourceFieldSelect = vue.ref(false);
-      vue.onMounted(() => {
-        const value = props.model[props.name];
-        if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
-          return showDataSourceFieldSelect.value = true;
+      vue.watch(
+        () => props.model[props.name],
+        (value) => {
+          if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
+            showDataSourceFieldSelect.value = true;
+          } else {
+            showDataSourceFieldSelect.value = false;
+          }
+        },
+        {
+          immediate: true
         }
-      });
+      );
       const mForm = vue.inject("mForm");
       const type = vue.computed(() => {
         let type2 = props.config.fieldConfig?.type;
@@ -4697,6 +4824,9 @@
       const onChangeHandler = (value) => {
         emit("change", value);
       };
+      const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
+        services?.dataSourceService
+      );
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
@@ -4712,19 +4842,37 @@
             prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
             onChange: onChangeHandler
           }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
-          _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          (showDataSourceFieldSelect.value || !_ctx.config.fieldConfig) && selectedDataSourceId.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 0,
             style: { "margin-left": "5px" },
-            link: "",
+            size: _ctx.size,
+            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editHandler)(selectedDataSourceId.value))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Edit) }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : vue.createCommentVNode("", true),
+          _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 1,
+            style: { "margin-left": "5px" },
             type: showDataSourceFieldSelect.value ? "primary" : "default",
             size: _ctx.size,
-            onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+            onClick: _cache[1] || (_cache[1] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(_sfc_main$U, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
             ]),
             _: 1
-          }, 8, ["type", "size"])) : vue.createCommentVNode("", true)
+          }, 8, ["type", "size"])) : vue.createCommentVNode("", true),
+          vue.createVNode(_sfc_main$K, {
+            ref_key: "editDialog",
+            ref: editDialog,
+            disabled: !vue.unref(editable),
+            values: vue.unref(dataSourceValues),
+            title: vue.unref(dialogTitle),
+            onSubmit: vue.unref(submitDataSourceHandler)
+          }, null, 8, ["disabled", "values", "title", "onSubmit"])
         ]);
       };
     }
@@ -4733,7 +4881,7 @@
   const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$7 = { class: "el-input__inner t-input__inner" };
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
     },
@@ -4971,7 +5119,7 @@
 
   const _hoisted_1$m = { class: "m-editor-data-source-methods" };
   const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
     },
@@ -5077,7 +5225,7 @@
 
   const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
   const _hoisted_2$f = { class: "data-source-method-select-container" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
     },
@@ -5207,7 +5355,7 @@
 
   const _hoisted_1$k = { class: "m-editor-data-source-fields" };
   const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
     },
@@ -5460,7 +5608,7 @@
     }
   });
 
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
     },
@@ -5522,7 +5670,7 @@
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsEventSelect"
     },
@@ -5796,7 +5944,7 @@
   const _hoisted_4$6 = [
     _hoisted_2$c
   ];
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
@@ -5811,7 +5959,7 @@
   const _hoisted_1$h = { class: "m-fields-key-value" };
   const _hoisted_2$b = { key: 0 };
   const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
     },
@@ -5935,7 +6083,7 @@
             size: "default",
             disabled: _ctx.disabled,
             link: "",
-            icon: _sfc_main$D,
+            icon: _sfc_main$C,
             onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
           }, null, 8, ["disabled"])) : vue.createCommentVNode("", true)
         ]);
@@ -5945,7 +6093,7 @@
 
   const _hoisted_1$g = { class: "m-fields-page-fragment-select" };
   const _hoisted_2$a = { class: "page-fragment-select-container" };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
     },
@@ -6017,7 +6165,7 @@
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsUISelect"
     },
@@ -6205,7 +6353,7 @@
     };
   };
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -6227,7 +6375,7 @@
     }
   });
 
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSplitView"
     },
@@ -6343,6 +6491,9 @@
       __expose({
         updateWidth() {
           clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+          if (clientWidth <= 0) {
+            return;
+          }
           const columnWidth = getCenterWidth(props.left, props.right);
           emit("change", {
             left: columnWidth.left,
@@ -6365,7 +6516,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$y, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -6374,7 +6525,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$y, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -6392,7 +6543,7 @@
     class: "menu-item-text"
   };
   const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -6557,7 +6708,7 @@
     key: 1,
     style: { "width": "21px" }
   };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarAddButton"
     },
@@ -6597,7 +6748,7 @@
     }
   });
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
     },
@@ -6726,7 +6877,7 @@
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarSwitchTypeButton"
     },
@@ -6774,7 +6925,7 @@
   const _hoisted_2$8 = ["onClick"];
   const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$5 = ["title"];
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBar"
     },
@@ -6853,14 +7004,14 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
+          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
             key: 0,
             modelValue: active.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
           }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$v, { type: active.value }, {
+          vue.createVNode(_sfc_main$u, { type: active.value }, {
             prepend: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
+              vue.createVNode(_sfc_main$v, { type: active.value }, null, 8, ["type"])
             ]),
             default: vue.withCtx(() => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
@@ -6893,7 +7044,7 @@
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", null, [
                         vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                          vue.createVNode(_sfc_main$x, {
+                          vue.createVNode(_sfc_main$w, {
                             data: {
                               type: "button",
                               text: "复制",
@@ -6901,7 +7052,7 @@
                               handler: () => copy(item)
                             }
                           }, null, 8, ["data"]),
-                          vue.createVNode(_sfc_main$x, {
+                          vue.createVNode(_sfc_main$w, {
                             data: {
                               type: "button",
                               text: "删除",
@@ -6928,7 +7079,7 @@
   const _hoisted_2$7 = { class: "m-editor-empty-content" };
   const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -6983,7 +7134,7 @@
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
   const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -7002,10 +7153,11 @@
       const stageLoading = vue.computed(() => editorService?.get("stageLoading") || false);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
       const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+      const getRightColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
       const columnWidth = vue.ref({
         left: getLeftColumnWidthCacheData(),
         center: 0,
-        right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+        right: getRightColumnWidthCacheData()
       });
       vue.watch(pageLength, () => {
         splitView.value?.updateWidth();
@@ -7066,7 +7218,7 @@
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
+          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$x, {
             key: 1,
             "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
@@ -7090,10 +7242,10 @@
             ]),
             center: vue.withCtx(() => [
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+                vue.createVNode(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
               vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
-                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                   "page-bar-title": vue.withCtx(({ page: page2 }) => [
                     vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                   ]),
@@ -7128,7 +7280,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -7310,7 +7462,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -7323,7 +7475,7 @@
   });
 
   const _hoisted_1$a = { class: "m-editor-props-panel" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -7426,7 +7578,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -7484,7 +7636,7 @@
     key: 0,
     class: "m-editor-tree-node-children"
   };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTreeNode"
     },
@@ -7605,7 +7757,7 @@
     key: 1,
     class: "m-editor-tree-empty"
   };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
     },
@@ -7629,7 +7781,7 @@
           onDragover: handleDragOver
         }, [
           _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$m, {
               key: item.id,
               data: item,
               indent: _ctx.indent,
@@ -7726,7 +7878,7 @@
     };
   };
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -7808,7 +7960,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -7865,7 +8017,7 @@
   });
 
   const _hoisted_1$7 = { class: "search-wrapper" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -7887,7 +8039,7 @@
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
                 vue.createElementVNode("div", _hoisted_1$7, [
-                  vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                  vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -7903,7 +8055,7 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$l, {
+              vue.createVNode(_sfc_main$k, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
@@ -7934,81 +8086,6 @@
     }
   });
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorDataSourceConfigPanel"
-    },
-    __name: "DataSourceConfigPanel",
-    props: /* @__PURE__ */ vue.mergeModels({
-      title: {},
-      values: {},
-      disabled: { type: Boolean }
-    }, {
-      "visible": { type: Boolean, ...{ default: false } },
-      "visibleModifiers": {},
-      "width": { default: 670 },
-      "widthModifiers": {}
-    }),
-    emits: /* @__PURE__ */ vue.mergeModels(["submit"], ["update:visible", "update:width"]),
-    setup(__props, { expose: __expose, emit: __emit }) {
-      const props = __props;
-      const boxVisible = vue.useModel(__props, "visible");
-      const width = vue.useModel(__props, "width");
-      const emit = __emit;
-      const services = vue.inject("services");
-      const initValues = vue.ref({});
-      const dataSourceConfig = vue.ref([]);
-      const { height: editorHeight } = useEditorContentHeight();
-      const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-      vue.watchEffect(() => {
-        initValues.value = props.values;
-        dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
-      });
-      const submitHandler = (values) => {
-        emit("submit", values);
-      };
-      const errorHandler = (error) => {
-        design.tMagicMessage.error(error.message);
-      };
-      __expose({
-        show() {
-          calcBoxPosition();
-          boxVisible.value = true;
-        },
-        hide() {
-          boxVisible.value = false;
-        }
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$P, {
-          visible: boxVisible.value,
-          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
-          width: width.value,
-          "onUpdate:width": _cache[1] || (_cache[1] = ($event) => width.value = $event),
-          height: vue.unref(editorHeight),
-          "onUpdate:height": _cache[2] || (_cache[2] = ($event) => vue.isRef(editorHeight) ? editorHeight.value = $event : null),
-          title: _ctx.title,
-          position: vue.unref(boxPosition)
-        }, {
-          body: vue.withCtx(() => [
-            vue.createVNode(vue.unref(form.MFormBox), {
-              "label-width": "80px",
-              title: _ctx.title,
-              config: dataSourceConfig.value,
-              values: initValues.value,
-              disabled: _ctx.disabled,
-              style: { "height": "100%" },
-              onSubmit: submitHandler,
-              onError: errorHandler
-            }, null, 8, ["title", "config", "values", "disabled"])
-          ]),
-          _: 1
-        }, 8, ["visible", "width", "height", "title", "position"]);
-      };
-    }
-  });
-
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
@@ -8098,7 +8175,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -8160,10 +8237,7 @@
     __name: "DataSourceListPanel",
     setup(__props) {
       const { dataSourceService } = vue.inject("services") || {};
-      const editDialog = vue.ref();
-      const dataSourceValues = vue.ref({});
-      const dialogTitle = vue.ref("");
-      const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
+      const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
       const datasourceTypeList = vue.computed(
         () => [
           { text: "基础", type: "base" },
@@ -8186,26 +8260,9 @@
         dialogTitle.value = `新增${datasourceType?.text || ""}`;
         editDialog.value.show();
       };
-      const editHandler = (id) => {
-        if (!editDialog.value)
-          return;
-        dataSourceValues.value = {
-          ...dataSourceService?.getDataSourceById(id)
-        };
-        dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
-        editDialog.value.show();
-      };
       const removeHandler = (id) => {
         dataSourceService?.remove(id);
       };
-      const submitDataSourceHandler = (value) => {
-        if (value.id) {
-          dataSourceService?.update(value);
-        } else {
-          dataSourceService?.add(value);
-        }
-        editDialog.value?.hide();
-      };
       const dataSourceList = vue.ref();
       const filterTextChangeHandler = (val) => {
         dataSourceList.value?.filter(val);
@@ -8215,8 +8272,8 @@
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_1$6, [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-                editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
+                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
                   placement: "right"
                 }, {
@@ -8234,7 +8291,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_2$5, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                           data: {
                             type: "button",
                             text: item.text,
@@ -8254,20 +8311,20 @@
               vue.createVNode(_sfc_main$i, {
                 ref_key: "dataSourceList",
                 ref: dataSourceList,
-                onEdit: editHandler,
+                onEdit: vue.unref(editHandler),
                 onRemove: removeHandler
-              }, null, 512)
+              }, null, 8, ["onEdit"])
             ]),
             _: 3
           }),
-          vue.createVNode(_sfc_main$j, {
+          vue.createVNode(_sfc_main$K, {
             ref_key: "editDialog",
             ref: editDialog,
-            disabled: !editable.value,
-            values: dataSourceValues.value,
-            title: dialogTitle.value,
-            onSubmit: submitDataSourceHandler
-          }, null, 8, ["disabled", "values", "title"])
+            disabled: !vue.unref(editable),
+            values: vue.unref(dataSourceValues),
+            title: vue.unref(dialogTitle),
+            onSubmit: vue.unref(submitDataSourceHandler)
+          }, null, 8, ["disabled", "values", "title", "onSubmit"])
         ], 64);
       };
     }
@@ -8404,7 +8461,7 @@
               vue.renderSlot(_ctx.$slots, "title"),
               vue.createElementVNode("div", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                     "event-type": "mouseup",
                     ref_for: true,
                     ref_key: "buttons",
@@ -9180,8 +9237,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+            vue.createVNode(_sfc_main$n, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
@@ -9307,7 +9364,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -9417,7 +9474,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$k,
+            component: _sfc_main$j,
             slots: {}
           },
           "data-source": {
@@ -10051,7 +10108,7 @@
             position: menuPosition.value
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$m, {
+              vue.createVNode(_sfc_main$l, {
                 class: "m-editor-node-list-menu magic-editor-layer-tree",
                 data: nodeData.value,
                 "node-status-map": vue.unref(nodeStatusMap),
@@ -11633,13 +11690,13 @@
       vue.provide("stageOptions", stageOptions);
       __expose(services);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$q, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
           header: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$p, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -11714,7 +11771,7 @@
           ]),
           "props-panel": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
-              vue.createVNode(_sfc_main$p, {
+              vue.createVNode(_sfc_main$o, {
                 "extend-state": _ctx.extendFormState,
                 onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
                 onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
@@ -11762,21 +11819,21 @@
       setConfig(option);
       app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
       app.component("magic-code-editor", _sfc_main$T);
-      app.component("m-fields-ui-select", _sfc_main$A);
+      app.component("m-fields-ui-select", _sfc_main$z);
       app.component("m-fields-code-link", _sfc_main$R);
       app.component("m-fields-vs-code", _sfc_main$S);
       app.component("m-fields-code-select", _sfc_main$Q);
       app.component("m-fields-code-select-col", _sfc_main$M);
-      app.component("m-fields-event-select", _sfc_main$E);
+      app.component("m-fields-event-select", _sfc_main$D);
       app.component("m-fields-data-source-fields", _sfc_main$L);
-      app.component("m-fields-data-source-mocks", _sfc_main$G);
-      app.component("m-fields-key-value", _sfc_main$C);
-      app.component("m-fields-data-source-input", _sfc_main$J);
-      app.component("m-fields-data-source-select", _sfc_main$F);
-      app.component("m-fields-data-source-methods", _sfc_main$I);
-      app.component("m-fields-data-source-method-select", _sfc_main$H);
-      app.component("m-fields-data-source-field-select", _sfc_main$K);
-      app.component("m-fields-page-fragment-select", _sfc_main$B);
+      app.component("m-fields-data-source-mocks", _sfc_main$F);
+      app.component("m-fields-key-value", _sfc_main$B);
+      app.component("m-fields-data-source-input", _sfc_main$I);
+      app.component("m-fields-data-source-select", _sfc_main$E);
+      app.component("m-fields-data-source-methods", _sfc_main$H);
+      app.component("m-fields-data-source-method-select", _sfc_main$G);
+      app.component("m-fields-data-source-field-select", _sfc_main$J);
+      app.component("m-fields-page-fragment-select", _sfc_main$A);
     }
   };
 
@@ -11787,41 +11844,41 @@
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockEditor = _sfc_main$O;
-  exports.CodeBlockList = _sfc_main$l;
-  exports.CodeBlockListPanel = _sfc_main$k;
+  exports.CodeBlockList = _sfc_main$k;
+  exports.CodeBlockListPanel = _sfc_main$j;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeSelect = _sfc_main$Q;
   exports.CodeSelectCol = _sfc_main$M;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
   exports.ContentMenu = _sfc_main$g;
-  exports.DataSourceConfigPanel = _sfc_main$j;
-  exports.DataSourceFieldSelect = _sfc_main$K;
+  exports.DataSourceConfigPanel = _sfc_main$K;
+  exports.DataSourceFieldSelect = _sfc_main$J;
   exports.DataSourceFields = _sfc_main$L;
-  exports.DataSourceInput = _sfc_main$J;
-  exports.DataSourceMethodSelect = _sfc_main$H;
-  exports.DataSourceMethods = _sfc_main$I;
-  exports.DataSourceMocks = _sfc_main$G;
-  exports.DataSourceSelect = _sfc_main$F;
+  exports.DataSourceInput = _sfc_main$I;
+  exports.DataSourceMethodSelect = _sfc_main$G;
+  exports.DataSourceMethods = _sfc_main$H;
+  exports.DataSourceMocks = _sfc_main$F;
+  exports.DataSourceSelect = _sfc_main$E;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$E;
+  exports.EventSelect = _sfc_main$D;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
   exports.Icon = _sfc_main$U;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$C;
+  exports.KeyValue = _sfc_main$B;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$y;
-  exports.PageFragmentSelect = _sfc_main$B;
-  exports.PropsPanel = _sfc_main$p;
-  exports.Resizer = _sfc_main$z;
-  exports.SplitView = _sfc_main$y;
+  exports.LayoutContainer = _sfc_main$x;
+  exports.PageFragmentSelect = _sfc_main$A;
+  exports.PropsPanel = _sfc_main$o;
+  exports.Resizer = _sfc_main$y;
+  exports.SplitView = _sfc_main$x;
   exports.TMagicCodeEditor = _sfc_main$T;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$x;
+  exports.ToolButton = _sfc_main$w;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;