@tmagic/editor 1.3.0-alpha.21 → 1.3.0-alpha.23

package/dist/tmagic-editor.js

@@ -3,7 +3,7 @@ import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Mem
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, difference, union, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
-import { TMagicButton, TMagicCard, tMagicMessage, TMagicIcon, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicCard, tMagicMessage, TMagicIcon, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
@@ -534,7 +534,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-function BaseFormConfig(datasourceTypeList = []) {
+function BaseFormConfig() {
   return [
     {
       name: "id",
@@ -543,12 +543,7 @@ function BaseFormConfig(datasourceTypeList = []) {
     {
       name: "type",
       text: "类型",
-      type: "select",
-      options: [
-        { text: "基础", value: "base" },
-        { text: "HTTP", value: "http" },
-        ...datasourceTypeList.map((item) => ({ text: item.text, value: item.type }))
-      ],
+      type: "hidden",
       defaultValue: "base"
     },
     {
@@ -617,8 +612,8 @@ const HttpFormConfig = [
   }
 ];
 
-const fillConfig$1 = (config, datasourceTypeList) => [
-  ...BaseFormConfig(datasourceTypeList),
+const fillConfig$1 = (config) => [
+  ...BaseFormConfig(),
   ...config,
   {
     type: "panel",
@@ -627,7 +622,7 @@ const fillConfig$1 = (config, datasourceTypeList) => [
       {
         name: "fields",
         type: "data-source-fields",
-        defaultValue: []
+        defaultValue: () => []
       }
     ]
   },
@@ -638,19 +633,19 @@ const fillConfig$1 = (config, datasourceTypeList) => [
       {
         name: "methods",
         type: "data-source-methods",
-        defaultValue: []
+        defaultValue: () => []
       }
     ]
   }
 ];
-const getFormConfig = (type, datasourceTypeList, configs) => {
+const getFormConfig = (type, configs) => {
   switch (type) {
     case "base":
-      return fillConfig$1([], datasourceTypeList);
+      return fillConfig$1([]);
     case "http":
-      return fillConfig$1(HttpFormConfig, datasourceTypeList);
+      return fillConfig$1(HttpFormConfig);
     default:
-      return fillConfig$1(configs[type] || [], datasourceTypeList);
+      return fillConfig$1(configs[type] || []);
   }
 };
 const getDisplayField = (dataSources, key) => {
@@ -830,7 +825,7 @@ class DataSource extends BaseService {
     return this.state[name];
   }
   getFormConfig(type = "base") {
-    return getFormConfig(type, this.get("datasourceTypeList"), this.get("configs"));
+    return getFormConfig(type, this.get("configs"));
   }
   setFormConfig(type, config) {
     this.get("configs")[type] = config;
@@ -2306,12 +2301,14 @@ let Editor$1 = class Editor extends BaseService {
     const doc = stage?.renderer.contentWindow?.document;
     if (doc) {
       const el = doc.getElementById(`${node.id}`);
-      const parentEl = el?.offsetParent;
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.right = "";
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = "";
     }
     return node;
   }
@@ -2423,21 +2420,43 @@ let Editor$1 = class Editor extends BaseService {
     if (!node || isPage(node))
       return;
     const { style, id, type } = node;
-    if (!style || style.position !== "absolute")
-      return;
-    if (top && !isNumber(style.top))
+    if (!style || !["absolute", "fixed"].includes(style.position))
       return;
-    if (left && !isNumber(style.left))
-      return;
-    this.update({
+    const update = (style2) => this.update({
       id,
       type,
-      style: {
-        ...style,
-        left: Number(style.left) + left,
-        top: Number(style.top) + top
-      }
+      style: style2
     });
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: ""
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: ""
+        });
+      }
+    }
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: ""
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: ""
+        });
+      }
+    }
   }
   resetState() {
     this.set("root", null);
@@ -2748,7 +2767,7 @@ const useCodeBlockEdit = (codeBlockService) => {
 };
 
 const _hoisted_1$p = { class: "m-fields-code-select-col" };
-const _hoisted_2$g = { class: "code-select-container" };
+const _hoisted_2$i = { class: "code-select-container" };
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
@@ -2816,7 +2835,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -2852,7 +2871,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$o = { class: "m-editor-data-source-fields" };
-const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
+const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
@@ -2872,9 +2891,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
+    const services = inject("services");
     const addDialog = ref();
     const fieldValues = ref({});
     const filedTitle = ref("");
+    const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
     const newHandler = () => {
       fieldValues.value = {};
       filedTitle.value = "新增属性";
@@ -3007,7 +3028,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -3030,8 +3051,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           values: fieldValues.value,
           parentValues: _ctx.model[_ctx.name],
           disabled: _ctx.disabled,
+          width: width.value,
           onSubmit: fieldChange
-        }, null, 8, ["title", "values", "parentValues", "disabled"])
+        }, null, 8, ["title", "values", "parentValues", "disabled", "width"])
       ]);
     };
   }
@@ -3085,8 +3107,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$e = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$5 = { class: "el-input__inner" };
+const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_3$6 = { class: "el-input__inner" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
@@ -3132,6 +3154,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const blurHandler = () => {
       isFocused.value = false;
       setDisplayState();
+      emit("change", state.value);
     };
     const changeHandler = (v) => {
       emit("change", v);
@@ -3248,6 +3271,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         newSelectionStart = dotIndex + suggestText.length + 1;
       }
       input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+      changeHandler(state.value);
     };
     return (_ctx, _cache) => {
       return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
@@ -3269,7 +3293,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         {
           style: { "width": "100%" },
           onBlur: blurHandler,
-          onChange: changeHandler,
           onInput: inputHandler,
           onSelect: selectHandler
         }
@@ -3280,7 +3303,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         default: withCtx(({ item }) => [
           createElementVNode("div", _hoisted_1$n, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$e, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$g, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -3292,7 +3315,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$5, [
+          createElementVNode("div", _hoisted_3$6, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -3394,7 +3417,7 @@ const useDataSourceMethod = () => {
 };
 
 const _hoisted_1$m = { class: "m-editor-data-source-methods" };
-const _hoisted_2$d = { class: "m-editor-data-source-methods-footer" };
+const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
@@ -3469,7 +3492,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$d, [
+        createElementVNode("div", _hoisted_2$f, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -3498,7 +3521,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$l = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$c = { class: "data-source-method-select-container" };
+const _hoisted_2$e = { class: "data-source-method-select-container" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
@@ -3578,7 +3601,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", _hoisted_1$l, [
-        createElementVNode("div", _hoisted_2$c, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: cascaderConfig,
@@ -3670,7 +3693,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$k = { class: "m-fields-event-select" };
-const _hoisted_2$b = {
+const _hoisted_2$d = {
   key: 1,
   class: "fullWidth"
 };
@@ -3874,7 +3897,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$b, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$d, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -3924,7 +3947,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$j = { class: "m-fields-key-value" };
-const _hoisted_2$a = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _hoisted_2$c = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
@@ -3984,7 +4007,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               size: _ctx.size,
               onChange: keyChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            _hoisted_2$a,
+            _hoisted_2$c,
             createVNode(unref(TMagicInput), {
               placeholder: "value",
               modelValue: records.value[index][1],
@@ -4363,8 +4386,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$h = { class: "m-editor-empty-panel" };
-const _hoisted_2$9 = { class: "m-editor-empty-content" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
+const _hoisted_2$b = { class: "m-editor-empty-content" };
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
@@ -4386,7 +4409,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$9, [
+        createElementVNode("div", _hoisted_2$b, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
@@ -4394,7 +4417,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             createElementVNode("div", null, [
               createVNode(_sfc_main$F, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$4
+            _hoisted_3$5
           ])
         ])
       ]);
@@ -4537,7 +4560,7 @@ const _hoisted_1$g = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+const _hoisted_2$a = { class: "el-dropdown-link menubar-menu-button" };
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
@@ -4681,7 +4704,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$8, [
+            createElementVNode("span", _hoisted_2$a, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -4982,7 +5005,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$e = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
@@ -4992,8 +5015,8 @@ const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("g", {
   }),
   /* @__PURE__ */ createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
 ], -1);
-const _hoisted_3$3 = [
-  _hoisted_2$7
+const _hoisted_3$4 = [
+  _hoisted_2$9
 ];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
@@ -5002,7 +5025,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_3$3);
+      return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_3$4);
     };
   }
 });
@@ -5013,9 +5036,9 @@ const _hoisted_1$d = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _hoisted_2$6 = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-const _hoisted_4$1 = [
-  _hoisted_2$6
+const _hoisted_2$8 = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+const _hoisted_4$2 = [
+  _hoisted_2$8
 ];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
@@ -5024,14 +5047,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_4$1);
+      return openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_4$2);
     };
   }
 });
 
 const _hoisted_1$c = ["id"];
-const _hoisted_2$5 = { class: "list-item" };
-const _hoisted_3$2 = {
+const _hoisted_2$7 = { class: "list-item" };
+const _hoisted_3$3 = {
   key: 2,
   class: "right-tool"
 };
@@ -5136,7 +5159,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             id: data.id,
             class: "list-container"
           }, [
-            createElementVNode("div", _hoisted_2$5, [
+            createElementVNode("div", _hoisted_2$7, [
               data.type === "code" ? (openBlock(), createBlock(_sfc_main$l, {
                 key: 0,
                 class: "codeIcon"
@@ -5148,7 +5171,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               createElementVNode("span", {
                 class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
               }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
-              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
@@ -5226,7 +5249,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   createTextVNode("新增")
                 ]),
                 _: 1
-              }, 8, ["onClick"])) : createCommentVNode("", true)
+              }, 8, ["onClick"])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "code-block-panel-search")
             ])
           ]),
           createVNode(_sfc_main$k, {
@@ -5331,8 +5355,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$a = ["id"];
-const _hoisted_2$4 = { class: "list-item" };
-const _hoisted_3$1 = {
+const _hoisted_2$6 = { class: "list-item" };
+const _hoisted_3$2 = {
   key: 2,
   class: "right-tool"
 };
@@ -5431,7 +5455,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             id: data.id,
             class: "list-container"
           }, [
-            createElementVNode("div", _hoisted_2$4, [
+            createElementVNode("div", _hoisted_2$6, [
               data.type === "code" ? (openBlock(), createBlock(_sfc_main$F, {
                 key: 0,
                 class: "codeIcon",
@@ -5445,7 +5469,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               createElementVNode("span", {
                 class: normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
               }, toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
@@ -5490,6 +5514,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$9 = { class: "search-wrapper" };
+const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
@@ -5499,11 +5524,22 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const { dataSourceService } = inject("services") || {};
     const editDialog = ref();
     const dataSourceValues = ref({});
+    const dialogTitle = ref("");
     const editable = computed(() => dataSourceService?.get("editable") ?? true);
-    const addHandler = () => {
+    const datasourceTypeList = computed(
+      () => [
+        { text: "基础", type: "base" },
+        { text: "HTTP", type: "http" }
+      ].concat(dataSourceService?.get("datasourceTypeList") ?? [])
+    );
+    const addHandler = (type) => {
       if (!editDialog.value)
         return;
-      dataSourceValues.value = {};
+      dataSourceValues.value = {
+        type
+      };
+      const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
+      dialogTitle.value = `新增${datasourceType?.text || ""}`;
       editDialog.value.show();
     };
     const editHandler = (id) => {
@@ -5512,6 +5548,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       dataSourceValues.value = {
         ...dataSourceService?.getDataSourceById(id)
       };
+      dialogTitle.value = `新增${dataSourceValues.value.title || ""}`;
       editDialog.value.show();
     };
     const removeHandler = (id) => {
@@ -5534,14 +5571,36 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$9, [
             createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
-            editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+            editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
               key: 0,
-              type: "primary",
-              size: "small",
-              onClick: addHandler
+              placement: "right"
             }, {
+              reference: withCtx(() => [
+                createVNode(unref(TMagicButton), {
+                  type: "primary",
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("新增")
+                  ]),
+                  _: 1
+                })
+              ]),
               default: withCtx(() => [
-                createTextVNode("新增")
+                createElementVNode("div", _hoisted_2$5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
+                    return openBlock(), createBlock(_sfc_main$q, {
+                      data: {
+                        type: "button",
+                        text: item.text,
+                        handler: () => {
+                          addHandler(item.type);
+                        }
+                      },
+                      key: index
+                    }, null, 8, ["data"]);
+                  }), 128))
+                ])
               ]),
               _: 1
             })) : createCommentVNode("", true)
@@ -5555,7 +5614,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ref: editDialog,
             disabled: !editable.value,
             values: dataSourceValues.value,
-            title: typeof dataSourceValues.value.id !== "undefined" ? `编辑${dataSourceValues.value.title}` : "新增",
+            title: dialogTitle.value,
             onSubmit: submitDataSourceHandler
           }, null, 8, ["disabled", "values", "title"])
         ]),
@@ -5566,7 +5625,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$8 = ["onClick", "onDragstart"];
-const _hoisted_2$3 = ["title"];
+const _hoisted_2$4 = ["title"];
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
@@ -5675,7 +5734,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                             }, null, 8, ["title", "icon"]),
                             createElementVNode("span", {
                               title: item.text
-                            }, toDisplayString(item.text), 9, _hoisted_2$3)
+                            }, toDisplayString(item.text), 9, _hoisted_2$4)
                           ])
                         ], 40, _hoisted_1$8);
                       }), 128))
@@ -6343,6 +6402,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$5 = {
+  key: 0,
+  class: "m-editor-sidebar"
+};
+const _hoisted_2$3 = { class: "m-editor-sidebar-header" };
+const _hoisted_3$1 = ["onClick"];
+const _hoisted_4$1 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
@@ -6357,8 +6422,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const tabPaneComponent = getConfig$1("components")?.tabPane;
-    const tabsComponent = getConfig$1("components")?.tabs;
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -6411,98 +6474,94 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       activeTabName
     });
     return (_ctx, _cache) => {
-      return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent)?.component || "el-tabs"), mergeProps({
-        key: 0,
-        modelValue: activeTabName.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-        class: "m-editor-sidebar tmagic-design-tabs"
-      }, unref(tabsComponent)?.props({ type: "card", tabPosition: "left" }) || {}), {
-        default: withCtx(() => [
+      return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createElementVNode("div", _hoisted_2$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
-            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps(unref(tabPaneComponent)?.props({ name: config.text, lazy: config.lazy }) || {}, {
-              key: config.$key || index
-            }), {
-              label: withCtx(() => [
-                (openBlock(), createElementBlock("div", {
-                  key: config.text
-                }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$F, {
-                    key: 0,
-                    icon: config.icon
-                  }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  config.text ? (openBlock(), createElementBlock("div", _hoisted_1$5, toDisplayString(config.text), 1)) : createCommentVNode("", true)
-                ]))
-              ]),
-              default: withCtx(() => [
-                config ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
-                  config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
-                    name: "component-list-panel-header",
-                    fn: withCtx(() => [
-                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ]),
-                    key: "0"
-                  } : void 0,
-                  config.$key === "component-list" || config.slots?.componentListItem ? {
-                    name: "component-list-item",
-                    fn: withCtx(({ component }) => [
-                      config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-                        key: 0,
-                        component
-                      }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
-                        key: 1,
-                        component
-                      }, null, 8, ["component"])) : createCommentVNode("", true)
-                    ]),
-                    key: "1"
-                  } : void 0,
-                  config.$key === "layer" || config.slots?.layerPanelHeader ? {
-                    name: "layer-panel-header",
-                    fn: withCtx(() => [
-                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ]),
-                    key: "2"
-                  } : void 0,
-                  config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
-                    name: "code-block-panel-header",
-                    fn: withCtx(() => [
-                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ]),
-                    key: "3"
-                  } : void 0,
-                  config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
-                    name: "code-block-panel-tool",
-                    fn: withCtx(({ id, data }) => [
-                      config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                        key: 0,
-                        id,
-                        data
-                      }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-                    ]),
-                    key: "4"
-                  } : void 0,
-                  config.$key === "layer" || config.slots?.layerNodeContent ? {
-                    name: "layer-node-content",
-                    fn: withCtx(({ data: nodeData, node }) => [
-                      config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-                        key: 0,
-                        data: nodeData,
-                        node
-                      }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
-                        key: 1,
-                        data: nodeData,
-                        node
-                      }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-                    ]),
-                    key: "5"
-                  } : void 0
-                ]), 1040)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, 1040);
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
+              key: config.$key ?? index,
+              onClick: ($event) => activeTabName.value = config.text || `${index}`
+            }, [
+              config.icon ? (openBlock(), createBlock(_sfc_main$F, {
+                key: 0,
+                icon: config.icon
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+            ], 10, _hoisted_3$1);
           }), 128))
         ]),
-        _: 3
-      }, 16, ["modelValue"])) : createCommentVNode("", true);
+        (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+          return withDirectives((openBlock(), createElementBlock("div", {
+            class: "m-editor-sidebar-content",
+            key: config.$key ?? index
+          }, [
+            config ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+              config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                name: "component-list-panel-header",
+                fn: withCtx(() => [
+                  config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                ]),
+                key: "0"
+              } : void 0,
+              config.$key === "component-list" || config.slots?.componentListItem ? {
+                name: "component-list-item",
+                fn: withCtx(({ component }) => [
+                  config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+                    key: 0,
+                    component
+                  }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+                    key: 1,
+                    component
+                  }, null, 8, ["component"])) : createCommentVNode("", true)
+                ]),
+                key: "1"
+              } : void 0,
+              config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                name: "layer-panel-header",
+                fn: withCtx(() => [
+                  config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                ]),
+                key: "2"
+              } : void 0,
+              config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                name: "code-block-panel-header",
+                fn: withCtx(() => [
+                  config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                ]),
+                key: "3"
+              } : void 0,
+              config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                name: "code-block-panel-tool",
+                fn: withCtx(({ id, data }) => [
+                  config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                    key: 0,
+                    id,
+                    data
+                  }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
+                ]),
+                key: "4"
+              } : void 0,
+              config.$key === "layer" || config.slots?.layerNodeContent ? {
+                name: "layer-node-content",
+                fn: withCtx(({ data: nodeData, node }) => [
+                  config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+                    key: 0,
+                    data: nodeData,
+                    node
+                  }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+                    key: 1,
+                    data: nodeData,
+                    node
+                  }, null, 8, ["data", "node"])) : createCommentVNode("", true)
+                ]),
+                key: "5"
+              } : void 0
+            ]), 1040)) : createCommentVNode("", true)
+          ])), [
+            [vShow, activeTabName.value === config.text]
+          ]);
+        }), 128))
+      ])) : createCommentVNode("", true);
     };
   }
 });