@tmagic/editor 1.4.1 → 1.4.3

package/dist/tmagic-editor.js

@@ -5,8 +5,8 @@ import serialize from 'serialize-javascript';
 import { TMagicIcon, TMagicButton, TMagicCard, useZIndex, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
+import { MContainer, MFormBox, MForm, filterFunction, createValues, MCascader, MSelect } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
-import { MFormBox, MForm, filterFunction, createValues, MCascader, MSelect } from '@tmagic/form';
 import VanillaMoveable from 'moveable';
 import { MagicTable } from '@tmagic/table';
 import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
@@ -483,17 +483,20 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-fields-code-select", _ctx.config.className])
       }, [
         createVNode(unref(TMagicCard), null, {
           default: withCtx(() => [
-            createVNode(_component_m_form_container, {
+            createVNode(unref(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
         })
@@ -3165,7 +3168,10 @@ class Editor extends BaseService {
       throw new Error(`获取不到id为${config.id}的节点`);
     const node = cloneDeep(toRaw(info.node));
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
+      if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+        return "";
+      }
       if (isObject(srcValue) && Array.isArray(objValue)) {
         return srcValue;
       }
@@ -4593,8 +4599,115 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+const useDataSourceEdit = (dataSourceService) => {
+  const dialogTitle = ref("");
+  const editDialog = ref();
+  const dataSourceValues = ref({});
+  const editable = 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__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceConfigPanel"
+  },
+  __name: "DataSourceConfigPanel",
+  props: /* @__PURE__ */ mergeModels({
+    title: {},
+    values: {},
+    disabled: { type: Boolean }
+  }, {
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {},
+    "width": { default: 670 },
+    "widthModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:visible", "update:width"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const boxVisible = useModel(__props, "visible");
+    const width = useModel(__props, "width");
+    const emit = __emit;
+    const services = inject("services");
+    const initValues = ref({});
+    const dataSourceConfig = ref([]);
+    const { height: editorHeight } = useEditorContentHeight();
+    const parentFloating = inject("parentFloating", ref(null));
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+    watchEffect(() => {
+      initValues.value = props.values;
+      dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
+    });
+    const submitHandler = (values) => {
+      emit("submit", values);
+    };
+    const errorHandler = (error) => {
+      tMagicMessage.error(error.message);
+    };
+    __expose({
+      show() {
+        calcBoxPosition();
+        boxVisible.value = true;
+      },
+      hide() {
+        boxVisible.value = false;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), 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: unref(editorHeight),
+        "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
+        title: _ctx.title,
+        position: unref(boxPosition)
+      }, {
+        body: withCtx(() => [
+          createVNode(unref(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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
   },
@@ -4615,6 +4728,13 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const emit = __emit;
     const props = __props;
+    const selectedDataSourceId = computed(() => {
+      const value = props.model[props.name];
+      if (!Array.isArray(value) || !value.length) {
+        return "";
+      }
+      return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
+    });
     const dataSources = computed(() => services?.dataSourceService.get("dataSources"));
     const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
       const child = [];
@@ -4633,7 +4753,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           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 || "")) {
@@ -4660,12 +4780,19 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       };
     });
     const showDataSourceFieldSelect = ref(false);
-    onMounted(() => {
-      const value = props.model[props.name];
-      if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
-        return showDataSourceFieldSelect.value = true;
+    watch(
+      () => props.model[props.name],
+      (value) => {
+        if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
+          showDataSourceFieldSelect.value = true;
+        } else {
+          showDataSourceFieldSelect.value = false;
+        }
+      },
+      {
+        immediate: true
       }
-    });
+    );
     const mForm = inject("mForm");
     const type = computed(() => {
       let type2 = props.config.fieldConfig?.type;
@@ -4692,6 +4819,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     const onChangeHandler = (value) => {
       emit("change", value);
     };
+    const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
+      services?.dataSourceService
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
         (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
@@ -4707,19 +4837,37 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           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 ? (openBlock(), createBlock(unref(TMagicButton), {
+        (showDataSourceFieldSelect.value || !_ctx.config.fieldConfig) && selectedDataSourceId.value ? (openBlock(), createBlock(unref(TMagicButton), {
           key: 0,
           style: { "margin-left": "5px" },
-          link: "",
+          size: _ctx.size,
+          onClick: _cache[0] || (_cache[0] = ($event) => unref(editHandler)(selectedDataSourceId.value))
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$U, { icon: unref(Edit) }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["size"])) : createCommentVNode("", true),
+        _ctx.config.fieldConfig ? (openBlock(), createBlock(unref(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: withCtx(() => [
             createVNode(_sfc_main$U, { icon: unref(Coin) }, null, 8, ["icon"])
           ]),
           _: 1
-        }, 8, ["type", "size"])) : createCommentVNode("", true)
+        }, 8, ["type", "size"])) : createCommentVNode("", true),
+        createVNode(_sfc_main$K, {
+          ref_key: "editDialog",
+          ref: editDialog,
+          disabled: !unref(editable),
+          values: unref(dataSourceValues),
+          title: unref(dialogTitle),
+          onSubmit: unref(submitDataSourceHandler)
+        }, null, 8, ["disabled", "values", "title", "onSubmit"])
       ]);
     };
   }
@@ -4728,7 +4876,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 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__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceInput"
   },
@@ -4966,7 +5114,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
   },
@@ -5072,7 +5220,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
   },
@@ -5202,7 +5350,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
   },
@@ -5455,7 +5603,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
   },
@@ -5517,7 +5665,7 @@ const _hoisted_2$d = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsEventSelect"
   },
@@ -5791,7 +5939,7 @@ const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1"
 const _hoisted_4$6 = [
   _hoisted_2$c
 ];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
@@ -5806,7 +5954,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 const _hoisted_1$h = { class: "m-fields-key-value" };
 const _hoisted_2$b = { key: 0 };
 const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
   },
@@ -5930,7 +6078,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           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"])) : createCommentVNode("", true)
       ]);
@@ -5940,7 +6088,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$g = { class: "m-fields-page-fragment-select" };
 const _hoisted_2$a = { class: "page-fragment-select-container" };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
   },
@@ -6012,7 +6160,7 @@ const _hoisted_1$f = {
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsUISelect"
   },
@@ -6200,7 +6348,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -6222,7 +6370,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSplitView"
   },
@@ -6338,6 +6486,9 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     __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,
@@ -6360,7 +6511,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$z, { onChange: changeLeft })
+          createVNode(_sfc_main$y, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -6369,7 +6520,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$z, { onChange: changeRight }),
+          createVNode(_sfc_main$y, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -6387,7 +6538,7 @@ const _hoisted_1$e = {
   class: "menu-item-text"
 };
 const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -6552,7 +6703,7 @@ const _hoisted_1$d = {
   key: 1,
   style: { "width": "21px" }
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarAddButton"
   },
@@ -6592,7 +6743,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarScrollContainer"
   },
@@ -6721,7 +6872,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarSwitchTypeButton"
   },
@@ -6769,7 +6920,7 @@ const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
 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__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBar"
   },
@@ -6848,14 +6999,14 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
+        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$t, {
           key: 0,
           modelValue: active.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
         }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$v, { type: active.value }, {
+        createVNode(_sfc_main$u, { type: active.value }, {
           prepend: withCtx(() => [
-            createVNode(_sfc_main$w, { type: active.value }, null, 8, ["type"])
+            createVNode(_sfc_main$v, { type: active.value }, null, 8, ["type"])
           ]),
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
@@ -6888,7 +7039,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => [
                     createElementVNode("div", null, [
                       renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        createVNode(_sfc_main$x, {
+                        createVNode(_sfc_main$w, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -6896,7 +7047,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        createVNode(_sfc_main$x, {
+                        createVNode(_sfc_main$w, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -6923,7 +7074,7 @@ const _hoisted_1$b = { class: "m-editor-empty-panel" };
 const _hoisted_2$7 = { class: "m-editor-empty-content" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
 const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面片", -1);
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -6978,7 +7129,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 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__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -6997,10 +7148,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const stageLoading = computed(() => editorService?.get("stageLoading") || false);
     const showSrc = 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 = ref({
       left: getLeftColumnWidthCacheData(),
       center: 0,
-      right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+      right: getRightColumnWidthCacheData()
     });
     watch(pageLength, () => {
       splitView.value?.updateWidth();
@@ -7061,7 +7213,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : withDirectives((openBlock(), createBlock(_sfc_main$y, {
+        ]) : withDirectives((openBlock(), createBlock(_sfc_main$x, {
           key: 1,
           "element-loading-text": "Runtime 加载中...",
           ref_key: "splitView",
@@ -7085,10 +7237,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+              createVNode(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
             renderSlot(_ctx.$slots, "page-bar", {}, () => [
-              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
                 "page-bar-title": withCtx(({ page: page2 }) => [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
@@ -7123,7 +7275,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -7305,7 +7457,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$x, {
+              return openBlock(), createBlock(_sfc_main$w, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -7318,7 +7470,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$a = { class: "m-editor-props-panel" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -7421,7 +7573,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -7479,7 +7631,7 @@ const _hoisted_4$3 = {
   key: 0,
   class: "m-editor-tree-node-children"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTreeNode"
   },
@@ -7600,7 +7752,7 @@ const _hoisted_1$8 = {
   key: 1,
   class: "m-editor-tree-empty"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -7624,7 +7776,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         onDragover: handleDragOver
       }, [
         _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$n, {
+          return openBlock(), createBlock(_sfc_main$m, {
             key: item.id,
             data: item,
             indent: _ctx.indent,
@@ -7721,7 +7873,7 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -7803,7 +7955,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$l, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -7860,7 +8012,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$7 = { class: "search-wrapper" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -7882,7 +8034,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
               createElementVNode("div", _hoisted_1$7, [
-                createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -7898,7 +8050,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$l, {
+            createVNode(_sfc_main$k, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -7929,81 +8081,6 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorDataSourceConfigPanel"
-  },
-  __name: "DataSourceConfigPanel",
-  props: /* @__PURE__ */ mergeModels({
-    title: {},
-    values: {},
-    disabled: { type: Boolean }
-  }, {
-    "visible": { type: Boolean, ...{ default: false } },
-    "visibleModifiers": {},
-    "width": { default: 670 },
-    "widthModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["submit"], ["update:visible", "update:width"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const boxVisible = useModel(__props, "visible");
-    const width = useModel(__props, "width");
-    const emit = __emit;
-    const services = inject("services");
-    const initValues = ref({});
-    const dataSourceConfig = ref([]);
-    const { height: editorHeight } = useEditorContentHeight();
-    const parentFloating = inject("parentFloating", ref(null));
-    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-    watchEffect(() => {
-      initValues.value = props.values;
-      dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
-    });
-    const submitHandler = (values) => {
-      emit("submit", values);
-    };
-    const errorHandler = (error) => {
-      tMagicMessage.error(error.message);
-    };
-    __expose({
-      show() {
-        calcBoxPosition();
-        boxVisible.value = true;
-      },
-      hide() {
-        boxVisible.value = false;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), 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: unref(editorHeight),
-        "onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
-        title: _ctx.title,
-        position: unref(boxPosition)
-      }, {
-        body: withCtx(() => [
-          createVNode(unref(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__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
@@ -8093,7 +8170,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$l, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
         onNodeClick: clickHandler
@@ -8155,10 +8232,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "DataSourceListPanel",
   setup(__props) {
     const { dataSourceService } = inject("services") || {};
-    const editDialog = ref();
-    const dataSourceValues = ref({});
-    const dialogTitle = ref("");
-    const editable = computed(() => dataSourceService?.get("editable") ?? true);
+    const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
     const datasourceTypeList = computed(
       () => [
         { text: "基础", type: "base" },
@@ -8181,26 +8255,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       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 = ref();
     const filterTextChangeHandler = (val) => {
       dataSourceList.value?.filter(val);
@@ -8210,8 +8267,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$6, [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-              editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+              unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
               }, {
@@ -8229,7 +8286,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_2$5, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$x, {
+                      return openBlock(), createBlock(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -8249,20 +8306,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$i, {
               ref_key: "dataSourceList",
               ref: dataSourceList,
-              onEdit: editHandler,
+              onEdit: unref(editHandler),
               onRemove: removeHandler
-            }, null, 512)
+            }, null, 8, ["onEdit"])
           ]),
           _: 3
         }),
-        createVNode(_sfc_main$j, {
+        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: !unref(editable),
+          values: unref(dataSourceValues),
+          title: unref(dialogTitle),
+          onSubmit: unref(submitDataSourceHandler)
+        }, null, 8, ["disabled", "values", "title", "onSubmit"])
       ], 64);
     };
   }
@@ -8399,7 +8456,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$w, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -9175,8 +9232,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
+          createVNode(_sfc_main$n, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
@@ -9302,7 +9359,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -9412,7 +9469,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$k,
+          component: _sfc_main$j,
           slots: {}
         },
         "data-source": {
@@ -10046,7 +10103,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           position: menuPosition.value
         }, {
           body: withCtx(() => [
-            createVNode(_sfc_main$m, {
+            createVNode(_sfc_main$l, {
               class: "m-editor-node-list-menu magic-editor-layer-tree",
               data: nodeData.value,
               "node-status-map": unref(nodeStatusMap),
@@ -11628,13 +11685,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     provide("stageOptions", stageOptions);
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$r, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
+      return openBlock(), createBlock(_sfc_main$q, { "disabled-page-fragment": _ctx.disabledPageFragment }, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$p, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -11709,7 +11766,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$p, {
+            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)),
@@ -11757,22 +11814,22 @@ const index = {
     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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$O as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$O as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$K as DataSourceConfigPanel, _sfc_main$J as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$I as DataSourceInput, _sfc_main$G as DataSourceMethodSelect, _sfc_main$H as DataSourceMethods, _sfc_main$F as DataSourceMocks, _sfc_main$E as DataSourceSelect, DragType, _sfc_main$D as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$B as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$x as LayoutContainer, _sfc_main$A as PageFragmentSelect, _sfc_main$o as PropsPanel, _sfc_main$y as Resizer, _sfc_main$x as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$w as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };