@tmagic/editor 1.5.7 → 1.5.8

package/dist/tmagic-editor.js

@@ -411,6 +411,14 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useServices = () => {
+  const services = inject("services");
+  if (!services) {
+    throw new Error("services is required");
+  }
+  return services;
+};
+
 const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelect"
@@ -430,7 +438,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const services = inject("services");
+    const { dataSourceService, codeBlockService } = useServices();
     const props = __props;
     const codeConfig = computed(() => ({
       type: "group-list",
@@ -443,7 +451,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
             if (model.codeId.length < 2) {
               return index;
             }
-            const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+            const ds = dataSourceService.getDataSourceById(model.codeId[0]);
             return `${ds?.title} / ${model.codeId[1]}`;
           }
           return Array.isArray(model.codeId) ? model.codeId.join("/") : index;
@@ -480,7 +488,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
               span: 18,
               labelWidth: 0,
               display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-              notEditable: () => !services?.codeBlockService.getEditStatus()
+              notEditable: () => !codeBlockService.getEditStatus()
             },
             {
               type: "data-source-method-select",
@@ -488,7 +496,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
               span: 18,
               labelWidth: 0,
               display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-              notEditable: () => !services?.dataSourceService.get("editable")
+              notEditable: () => !dataSourceService.get("editable")
             }
           ]
         }
@@ -765,8 +773,6 @@ var Keys = /* @__PURE__ */ ((Keys2) => {
   Keys2["ESCAPE"] = "Space";
   return Keys2;
 })(Keys || {});
-const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
 var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
   CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
   CodeDeleteErrorType2["BIND"] = "bind";
@@ -800,7 +806,6 @@ var DragType = /* @__PURE__ */ ((DragType2) => {
   DragType2["LAYER_TREE"] = "layer-tree";
   return DragType2;
 })(DragType || {});
-const UI_SELECT_MODE_EVENT_NAME = "ui-select";
 
 const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 const COPY_CODE_STORAGE_KEY = "$MagicEditorCopyCode";
@@ -2885,6 +2890,10 @@ class IdleTask extends EventEmitter {
     this.hightLevelTaskList = [];
     this.taskList = [];
     this.taskHandle = null;
+    this.emit("update-task-length", {
+      length: this.taskList.length + this.hightLevelTaskList.length,
+      hightLevelLength: this.hightLevelTaskList.length
+    });
   }
   on(eventName, listener) {
     return super.on(eventName, listener);
@@ -2928,6 +2937,10 @@ class IdleTask extends EventEmitter {
       this.taskHandle = 0;
       this.emit("finish");
     }
+    this.emit("update-task-length", {
+      length: taskList.length + hightLevelTaskList.length,
+      hightLevelLength: hightLevelTaskList.length
+    });
   }
 }
 
@@ -3068,6 +3081,18 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
+const UI_SELECT_MODE_EVENT_NAME = "ui-select";
+const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
+const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+const PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
+const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+const MIN_LEFT_COLUMN_WIDTH = 200;
+const MIN_CENTER_COLUMN_WIDTH = 400;
+const MIN_RIGHT_COLUMN_WIDTH = 300;
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+
 const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
@@ -3148,13 +3173,13 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const mForm = inject("mForm");
-    const services = inject("services");
+    const { codeBlockService, uiService } = useServices();
     const eventBus = inject("eventBus");
     const emit = __emit;
     const props = __props;
     const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
     const hasCodeBlockSidePanel = computed(
-      () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
+      () => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
     );
     const getParamItemsConfig = (codeId) => {
       if (!codeDsl.value || !codeId) return [];
@@ -3166,7 +3191,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
         ...paramState
       }));
     };
-    const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+    const codeDsl = computed(() => codeBlockService.getCodeDsl());
     const paramsConfig = ref(getParamItemsConfig(props.model[props.name]));
     watch(
       () => props.model[props.name],
@@ -3284,12 +3309,12 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const { dataSourceService } = inject("services") || {};
+    const { dataSourceService } = useServices();
     const props = __props;
     const optionComponent = getDesignConfig("components")?.option;
     const options = computed(() => {
       const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
-      const ds = dataSourceService?.getDataSourceById(id);
+      const ds = dataSourceService.getDataSourceById(id);
       let fields = ds?.fields || [];
       let type = "";
       (fieldNames || []).forEach((fieldName) => {
@@ -3402,8 +3427,8 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
       }
       return "auto";
     });
-    const services = inject("services");
-    const frameworkWidth = computed(() => services?.uiService.get("frameworkRect").width || 0);
+    const { uiService } = useServices();
+    const frameworkWidth = computed(() => uiService.get("frameworkRect").width || 0);
     const style = computed(() => {
       let { left } = props.position;
       if (width.value) {
@@ -3566,10 +3591,6 @@ const useCodeBlockEdit = (codeBlockService) => {
   const codeId = ref();
   const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
   const createCodeBlock = async () => {
-    if (!codeBlockService) {
-      tMagicMessage.error("新增代码块失败");
-      return;
-    }
     codeConfig.value = {
       name: "",
       content: `({app, params, flowState}) => {
@@ -3582,7 +3603,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     codeBlockEditorRef.value?.show();
   };
   const editCode = async (id) => {
-    const codeBlock = await codeBlockService?.getCodeContentById(id);
+    const codeBlock = await codeBlockService.getCodeContentById(id);
     if (!codeBlock) {
       tMagicMessage.error("获取代码块内容失败");
       return;
@@ -3600,11 +3621,11 @@ const useCodeBlockEdit = (codeBlockService) => {
     codeBlockEditorRef.value?.show();
   };
   const deleteCode = async (key) => {
-    codeBlockService?.deleteCodeDslByIds([key]);
+    codeBlockService.deleteCodeDslByIds([key]);
   };
   const submitCodeBlockHandler = async (values) => {
     if (!codeId.value) return;
-    await codeBlockService?.setCodeDslById(codeId.value, values);
+    await codeBlockService.setCodeDslById(codeId.value, values);
     codeBlockEditorRef.value?.hide();
   };
   return {
@@ -3618,11 +3639,6 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
-const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-
 const state = shallowReactive({
   uiSelectMode: false,
   showSrc: false,
@@ -3637,9 +3653,9 @@ const state = shallowReactive({
     height: 817
   },
   columnWidth: {
-    left: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+    left: storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
     center: 0,
-    right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH
+    right: storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_RIGHT_COLUMN_WIDTH
   },
   showGuides: true,
   showRule: true,
@@ -3831,7 +3847,7 @@ const useStage = (stageOptions) => {
 };
 
 const useFloatBox = (slideKeys) => {
-  const services = inject("services");
+  const { uiService } = useServices();
   const floatBoxStates = ref(
     slideKeys.value.reduce(
       (total, cur) => ({
@@ -3865,10 +3881,10 @@ const useFloatBox = (slideKeys) => {
     if (!dragState.isDragging) return;
     const { startOffset } = dragState;
     if (Math.abs(startOffset.x - e.clientX) > effectiveDistance || Math.abs(startOffset.y - e.clientY) > effectiveDistance) {
-      const navMenuRect = services?.uiService?.get("navMenuRect");
+      const navMenuRect = uiService.get("navMenuRect");
       floatBoxStates.value[key] = {
         left: e.clientX,
-        top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+        top: navMenuRect.top + navMenuRect.height,
         status: true
       };
     }
@@ -3931,9 +3947,9 @@ const useWindowRect = () => {
 };
 
 const useEditorContentHeight = () => {
-  const services = inject("services");
-  const frameworkHeight = computed(() => services?.uiService.get("frameworkRect").height || 0);
-  const navMenuHeight = computed(() => services?.uiService.get("navMenuRect").height || 0);
+  const { uiService } = useServices();
+  const frameworkHeight = computed(() => uiService.get("frameworkRect").height);
+  const navMenuHeight = computed(() => uiService.get("navMenuRect").height);
   const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
   const height = ref(0);
   watch(
@@ -4019,16 +4035,16 @@ const useNextFloatBoxPosition = (uiService, parent) => {
     top: 0
   });
   const calcBoxPosition = () => {
-    const columnWidth = uiService?.get("columnWidth");
-    const navMenuRect = uiService?.get("navMenuRect");
-    let left = columnWidth?.left ?? 0;
+    const columnWidth = uiService.get("columnWidth");
+    const navMenuRect = uiService.get("navMenuRect");
+    let left = columnWidth.left ?? 0;
     if (parent?.value) {
-      const rect = parent?.value?.getBoundingClientRect();
-      left = (rect?.left ?? 0) + (rect?.width ?? 0);
+      const rect = parent.value.getBoundingClientRect();
+      left = rect.left + rect.width;
     }
     boxPosition.value = {
       left,
-      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0)
+      top: navMenuRect.top + navMenuRect.height
     };
   };
   return {
@@ -4100,7 +4116,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
+    const { uiService } = useServices();
     const fieldValues = ref({});
     const fieldTitle = ref("");
     const width = useModel(__props, "width");
@@ -4335,7 +4351,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const addFromJsonDialogVisible = useModel(__props, "visible1");
     const { height: editorHeight } = useEditorContentHeight();
     const parentFloating = inject("parentFloating", ref(null));
-    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$X, [
         createVNode(unref(MagicTable), {
@@ -4439,10 +4455,10 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
     const optionComponent = getDesignConfig("components")?.option;
-    const services = inject("services");
+    const { dataSourceService, uiService } = useServices();
     const mForm = inject("mForm");
     const eventBus = inject("eventBus");
-    const dataSources = computed(() => services?.dataSourceService.get("dataSources") || []);
+    const dataSources = computed(() => dataSourceService.get("dataSources") || []);
     const valueIsKey = computed(() => props.value === "key");
     const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
     const dataSourcesOptions = computed(
@@ -4495,7 +4511,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     const hasDataSourceSidePanel = computed(
-      () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+      () => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE)
     );
     const editHandler = (id) => {
       eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
@@ -4639,9 +4655,9 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
-    const services = inject("services");
+    const { dataSourceService } = useServices();
     const mForm = inject("mForm");
-    const dataSources = computed(() => services?.dataSourceService.get("dataSources") || []);
+    const dataSources = computed(() => dataSourceService.get("dataSources") || []);
     const type = computed(() => {
       let type2 = props.config.fieldConfig?.type;
       if (typeof type2 === "function") {
@@ -4779,13 +4795,13 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { dataSourceService } = inject("services") || {};
+    const { dataSourceService } = useServices();
     const autocompleteRef = useTemplateRef("autocomplete");
     const isFocused = ref(false);
     const state = ref("");
     const displayState = ref([]);
     const input = computed(() => autocompleteRef.value?.inputRef?.input);
-    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const dataSources = computed(() => dataSourceService.get("dataSources"));
     const setDisplayState = () => {
       displayState.value = getDisplayField(dataSources.value, state.value);
     };
@@ -5078,7 +5094,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     const boxVisible = useModel(__props, "visible");
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
+    const { codeBlockService, uiService } = useServices();
     const { height: codeBlockEditorHeight } = useEditorContentHeight();
     const difVisible = ref(false);
     const { rect: windowRect } = useWindowRect();
@@ -5165,7 +5181,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
             label: "描述",
             name: "extra"
           },
-          services?.codeBlockService.getParamsColConfig() || defaultParamColConfig
+          codeBlockService.getParamsColConfig() || defaultParamColConfig
         ]
       },
       {
@@ -5217,7 +5233,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
       changedValue.value = undefined;
     };
     const parentFloating = inject("parentFloating", ref(null));
-    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
     __expose({
       async show() {
         calcBoxPosition();
@@ -5540,20 +5556,19 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   },
   emits: ["change"],
   setup(__props, { emit: __emit }) {
+    const { dataSourceService, uiService } = useServices();
     const mForm = inject("mForm");
-    const services = inject("services");
     const eventBus = inject("eventBus");
     const emit = __emit;
-    const dataSourceService = services?.dataSourceService;
     const props = __props;
     const hasDataSourceSidePanel = computed(
-      () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+      () => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
     );
     const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-    const dataSources = computed(() => dataSourceService?.get("dataSources"));
+    const dataSources = computed(() => dataSourceService.get("dataSources"));
     const isCustomMethod = computed(() => {
       const [id, name] = props.model[props.name];
-      const dataSource = dataSourceService?.getDataSourceById(id);
+      const dataSource = dataSourceService.getDataSourceById(id);
       return Boolean(dataSource?.methods.find((method) => method.name === name));
     });
     const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
@@ -5575,7 +5590,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
       }
     };
     const methodsOptions = computed(
-      () => dataSources.value?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)?.map((ds) => ({
+      () => dataSources.value?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length)?.map((ds) => ({
         label: ds.title || ds.id,
         value: ds.id,
         children: [
@@ -5603,7 +5618,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     };
     const editCodeHandler = () => {
       const [id] = props.model[props.name];
-      const dataSource = dataSourceService?.getDataSourceById(id);
+      const dataSource = dataSourceService.getDataSourceById(id);
       if (!dataSource) return;
       eventBus?.emit("edit-data-source", id);
     };
@@ -5681,7 +5696,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
+    const { uiService } = useServices();
     const width = useModel(__props, "width");
     const drawerTitle = ref("");
     const formValues = ref({});
@@ -5858,7 +5873,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     const addDialogVisible = useModel(__props, "visible");
     const { height: editorHeight } = useEditorContentHeight();
     const parentFloating = inject("parentFloating", ref(null));
-    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Q, [
         createVNode(unref(MagicTable), {
@@ -5930,12 +5945,12 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const props = __props;
     const mForm = inject("mForm");
-    const { dataSourceService, uiService } = inject("services") || {};
+    const { dataSourceService, uiService } = useServices();
     const eventBus = inject("eventBus");
-    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const dataSources = computed(() => dataSourceService.get("dataSources"));
     const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
     const hasDataSourceSidePanel = computed(
-      () => (uiService?.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+      () => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE)
     );
     const selectConfig = computed(() => {
       const { type, dataSourceType, value, ...config } = props.config;
@@ -5961,7 +5976,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
       const value = props.model[props.name];
       if (!value) return;
       const id = typeof value === "string" ? value : value.dataSourceId;
-      const dataSource = dataSourceService?.getDataSourceById(id);
+      const dataSource = dataSourceService.getDataSourceById(id);
       if (!dataSource) return;
       eventBus?.emit("edit-data-source", id);
     };
@@ -6024,7 +6039,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const { dataSourceService } = inject("services") || {};
+    const { dataSourceService } = useServices();
     const mForm = inject("mForm");
     const parentFields = computed(() => filterFunction(mForm, props.config.parentFields, props) || []);
     const config = computed(() => ({
@@ -6043,7 +6058,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
               type: "cascader",
               options: () => {
                 const [dsId, ...keys] = parentFields.value;
-                const ds = dataSourceService?.getDataSourceById(dsId);
+                const ds = dataSourceService.getDataSourceById(dsId);
                 if (!ds) {
                   return [];
                 }
@@ -6081,7 +6096,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
                   name: "value",
                   type: (mForm2, { model }) => {
                     const [id, ...fieldNames] = [...parentFields.value, ...model.field];
-                    const ds = dataSourceService?.getDataSourceById(id);
+                    const ds = dataSourceService.getDataSourceById(id);
                     let fields = ds?.fields || [];
                     let type = "";
                     (fieldNames || []).forEach((fieldName) => {
@@ -6161,11 +6176,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const dataSourceService = services?.dataSourceService;
-    const eventsService = services?.eventsService;
-    const codeBlockService = services?.codeBlockService;
+    const { editorService, dataSourceService, eventsService, codeBlockService } = useServices();
     const eventNameConfig = computed(() => {
       const defaultEventNameConfig = {
         name: "name",
@@ -6181,11 +6192,10 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         valueSeparator: ".",
         options: (mForm, { formValue }) => {
           let events = [];
-          if (!eventsService || !dataSourceService) return events;
           if (props.config.src === "component") {
             events = eventsService.getEvent(formValue.type);
             if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
-              const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
+              const pageFragment = editorService.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
               if (pageFragment) {
                 events = [
                   {
@@ -6247,13 +6257,13 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           {
             text: "代码",
             label: "代码",
-            disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
+            disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
             value: ActionType.CODE
           },
           {
             text: "数据源",
             label: "数据源",
-            disabled: !dataSourceService?.get("dataSources")?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
+            disabled: !dataSourceService?.get("dataSources")?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length).length,
             value: ActionType.DATA_SOURCE
           }
         ]
@@ -6278,7 +6288,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         name: "method",
         text: "动作",
         type: (mForm, { model }) => {
-          const to = editorService?.getNodeById(model.to);
+          const to = editorService.getNodeById(model.to);
           if (to && to.type === "page-fragment-container" && to.pageFragmentId) {
             return "cascader";
           }
@@ -6287,17 +6297,17 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         checkStrictly: () => props.config.src !== "component",
         display: (mForm, { model }) => model.actionType === ActionType.COMP,
         options: (mForm, { model }) => {
-          const node = editorService?.getNodeById(model.to);
+          const node = editorService.getNodeById(model.to);
           if (!node?.type) return [];
           let methods = [];
-          methods = eventsService?.getMethod(node.type) || [];
+          methods = eventsService.getMethod(node.type);
           if (node.type === "page-fragment-container" && node.pageFragmentId) {
-            const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
+            const pageFragment = editorService.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
             if (pageFragment) {
               methods = [];
               pageFragment.items.forEach((node2) => {
                 traverseNode(node2, (node3) => {
-                  const nodeMethods = node3.type && eventsService?.getMethod(node3.type) || [];
+                  const nodeMethods = node3.type && eventsService.getMethod(node3.type) || [];
                   if (nodeMethods.length) {
                     methods.push({
                       label: `${node3.name}_${node3.id}`,
@@ -6323,7 +6333,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         type: "code-select-col",
         text: "代码块",
         name: "codeId",
-        notEditable: () => !codeBlockService?.getEditStatus(),
+        notEditable: () => !codeBlockService.getEditStatus(),
         display: (mForm, { model }) => model.actionType === ActionType.CODE
       };
       return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -6333,7 +6343,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         type: "data-source-method-select",
         text: "数据源方法",
         name: "dataSourceMethod",
-        notEditable: () => !services?.dataSourceService.get("editable"),
+        notEditable: () => !dataSourceService.get("editable"),
         display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE
       };
       return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
@@ -6346,7 +6356,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           name: "name",
           label: "事件名",
           type: eventNameConfig.value.type,
-          options: (mForm, { formValue }) => eventsService?.getEvent(formValue.type).map((option) => ({
+          options: (mForm, { formValue }) => eventsService.getEvent(formValue.type).map((option) => ({
             text: option.label,
             value: option.value
           }))
@@ -6361,9 +6371,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           label: "动作",
           type: compActionConfig.value.type,
           options: (mForm, { model }) => {
-            const node = editorService?.getNodeById(model.to);
+            const node = editorService.getNodeById(model.to);
             if (!node?.type) return [];
-            return eventsService?.getMethod(node.type).map((option) => ({
+            return eventsService.getMethod(node.type).map((option) => ({
               text: option.label,
               value: option.value
             }));
@@ -6677,11 +6687,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   },
   emits: ["change"],
   setup(__props, { emit: __emit }) {
-    const services = inject("services");
+    const { editorService } = useServices();
     const emit = __emit;
     const props = __props;
     const pageList = computed(
-      () => services?.editorService.get("root")?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT)
+      () => editorService.get("root")?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT)
     );
     const selectConfig = {
       type: "select",
@@ -6701,7 +6711,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     const editPageFragment = (id) => {
-      services?.editorService.select(id);
+      editorService.select(id);
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
@@ -7674,7 +7684,7 @@ const _hoisted_2$a = { class: "border-icon-container" };
 const _hoisted_3$3 = { class: "border-icon-container-row" };
 const _hoisted_4$3 = { class: "border-icon-container-row" };
 const _hoisted_5$1 = { class: "border-icon-container-row" };
-const _hoisted_6 = { class: "border-value-container" };
+const _hoisted_6$1 = { class: "border-value-container" };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "Border",
   props: {
@@ -7787,7 +7797,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             )
           ])
         ]),
-        createElementVNode("div", _hoisted_6, [
+        createElementVNode("div", _hoisted_6$1, [
           createVNode(unref(MContainer), {
             config: config.value,
             model: _ctx.model,
@@ -7966,13 +7976,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
+    const { editorService, uiService, stageOverlayService } = useServices();
     const mForm = inject("mForm");
     const val = computed(() => props.model[props.name]);
     const uiSelectMode = ref(false);
     const cancelHandler = () => {
-      if (!services?.uiService) return;
-      services.uiService.set("uiSelectMode", false);
+      uiService.set("uiSelectMode", false);
       uiSelectMode.value = false;
       globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
     };
@@ -7991,12 +8000,11 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
     };
     const toName = computed(() => {
-      const config = services?.editorService.getNodeById(val.value);
+      const config = editorService.getNodeById(val.value);
       return config?.name || "";
     });
     const startSelect = () => {
-      if (!services?.uiService) return;
-      services.uiService.set("uiSelectMode", true);
+      uiService.set("uiSelectMode", true);
       uiSelectMode.value = true;
       globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
     };
@@ -8008,22 +8016,19 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
     };
     const selectNode = async (id) => {
-      if (!services) return;
-      await services.editorService.select(id);
-      services.editorService.get("stage")?.select(id);
-      services.stageOverlayService.get("stage")?.select(id);
+      await editorService.select(id);
+      editorService.get("stage")?.select(id);
+      stageOverlayService.get("stage")?.select(id);
     };
     const highlight = throttle((id) => {
-      if (!services) return;
-      services.editorService.highlight(id);
-      services.editorService.get("stage")?.highlight(id);
-      services.stageOverlayService.get("stage")?.highlight(id);
+      editorService.highlight(id);
+      editorService.get("stage")?.highlight(id);
+      stageOverlayService.get("stage")?.highlight(id);
     }, 150);
     const unhighlight = () => {
-      if (!services) return;
-      services.editorService.set("highlightNode", null);
-      services.editorService.get("stage")?.clearHighlight();
-      services.stageOverlayService.get("stage")?.clearHighlight();
+      editorService.set("highlightNode", null);
+      editorService.get("stage")?.clearHighlight();
+      stageOverlayService.get("stage")?.clearHighlight();
     };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
@@ -8373,7 +8378,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const services = inject("services");
+    const services = useServices();
     const disabled = computed(() => {
       if (typeof props.data === "string") return false;
       if (props.data.type === "component") return false;
@@ -8392,7 +8397,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     });
     const buttonHandler = (item, event) => {
       if (disabled.value) return;
-      if (typeof item.handler === "function" && services) {
+      if (typeof item.handler === "function") {
         item.handler?.(services, event);
       }
     };
@@ -8584,12 +8589,9 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   },
   __name: "AddButton",
   setup(__props) {
-    const services = inject("services");
-    const uiService = services?.uiService;
-    const editorService = services?.editorService;
-    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
+    const { editorService, uiService } = useServices();
+    const showAddPageButton = computed(() => uiService.get("showAddPageButton"));
     const addPage = (type) => {
-      if (!editorService) return;
       const root = toRaw(editorService.get("root"));
       if (!root) throw new Error("root 不能为空");
       const pageConfig = {
@@ -8653,13 +8655,11 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const uiService = services?.uiService;
+    const { editorService, uiService } = useServices();
     const itemsContainerEl = useTemplateRef("itemsContainer");
     const canScroll = ref(false);
-    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
-    const showPageListButton = computed(() => uiService?.get("showPageListButton"));
+    const showAddPageButton = computed(() => uiService.get("showAddPageButton"));
+    const showPageListButton = computed(() => uiService.get("showPageListButton"));
     const itemsContainerWidth = ref(0);
     const pageBarEl = useTemplateRef("pageBar");
     const setCanScroll = () => {
@@ -8731,7 +8731,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   beforeDragList = sortable.toArray();
                 },
                 onUpdate: async (event) => {
-                  await editorService?.sort(
+                  await editorService.sort(
                     beforeDragList[event.oldIndex],
                     beforeDragList[event.newIndex]
                   );
@@ -8812,13 +8812,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     list: {}
   },
   setup(__props) {
-    const services = inject("services");
-    const uiService = services?.uiService;
-    const editorService = services?.editorService;
-    const showPageListButton = computed(() => uiService?.get("showPageListButton"));
-    const page = computed(() => editorService?.get("page"));
+    const { editorService, uiService } = useServices();
+    const showPageListButton = computed(() => uiService.get("showPageListButton"));
+    const page = computed(() => editorService.get("page"));
     const switchPage = async (id) => {
-      await editorService?.select(id);
+      await editorService.select(id);
     };
     return (_ctx, _cache) => {
       return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
@@ -8949,10 +8947,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const root = computed(() => editorService?.get("root"));
-    const page = computed(() => editorService?.get("page"));
+    const { editorService } = useServices();
+    const root = computed(() => editorService.get("root"));
+    const page = computed(() => editorService.get("page"));
     const query = ref({
       pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
       keyword: ""
@@ -8973,17 +8970,17 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       });
     });
     const switchPage = (id) => {
-      editorService?.select(id);
+      editorService.select(id);
     };
     const copy = (node) => {
-      node && editorService?.copy(node);
-      editorService?.paste({
+      node && editorService.copy(node);
+      editorService.paste({
         left: 0,
         top: 0
       });
     };
     const remove = (node) => {
-      editorService?.remove(node);
+      editorService.remove(node);
     };
     const pageBarScrollContainerRef = useTemplateRef("pageBarScrollContainer");
     const pageBarItemEls = useTemplateRef("pageBarItems");
@@ -9127,10 +9124,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     disabledPageFragment: { type: Boolean }
   },
   setup(__props) {
-    const services = inject("services");
+    const { editorService } = useServices();
     const clickHandler = (type) => {
-      const { editorService } = services || {};
-      if (!editorService) return;
       const root = toRaw(editorService.get("root"));
       if (!root) throw new Error("root 不能为空");
       editorService.add({
@@ -9196,41 +9191,35 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const codeOptions = inject("codeOptions", {});
-    const { editorService, uiService } = inject("services") || {};
+    const { editorService, uiService, storageService } = useServices();
     const contentEl = useTemplateRef("content");
     const splitViewRef = useTemplateRef("splitView");
-    const root = computed(() => editorService?.get("root"));
-    const page = computed(() => editorService?.get("page"));
-    const pageLength = computed(() => editorService?.get("pageLength") || 0);
-    const showSrc = computed(() => uiService?.get("showSrc"));
-    const columnWidth = computed(
-      () => uiService?.get("columnWidth") || {
-        left: 0,
-        center: 0,
-        right: 0
-      }
-    );
+    const root = computed(() => editorService.get("root"));
+    const page = computed(() => editorService.get("page"));
+    const pageLength = computed(() => editorService.get("pageLength") || 0);
+    const showSrc = computed(() => uiService.get("showSrc"));
+    const columnWidth = computed(() => uiService.get("columnWidth"));
     watch(pageLength, () => {
       splitViewRef.value?.updateWidth();
     });
     watch(
-      () => uiService?.get("hideSlideBar"),
+      () => uiService.get("hideSlideBar"),
       (hideSlideBar) => {
-        uiService?.set("columnWidth", {
+        uiService.set("columnWidth", {
           ...columnWidth.value,
-          left: hideSlideBar ? 0 : Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH
+          left: hideSlideBar ? 0 : storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH
         });
       }
     );
     const columnWidthChange = (columnW) => {
-      globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
-      globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
-      uiService?.set("columnWidth", columnW);
+      storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
+      storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnW.right, { protocol: Protocol.NUMBER });
+      uiService.set("columnWidth", columnW);
     };
-    const frameworkRect = computed(() => uiService?.get("frameworkRect"));
+    const frameworkRect = computed(() => uiService.get("frameworkRect"));
     const resizerObserver = new ResizeObserver((entries) => {
       const { contentRect } = entries[0];
-      uiService?.set("frameworkRect", {
+      uiService.set("frameworkRect", {
         width: contentRect.width,
         height: contentRect.height,
         left: contentRect.left,
@@ -9248,7 +9237,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const saveCode = (value) => {
       try {
         const parseDSL = getEditorConfig("parseDSL");
-        editorService?.set("root", parseDSL(value));
+        editorService.set("root", parseDSL(value));
       } catch (e) {
         console.error(e);
       }
@@ -9277,10 +9266,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             "right-class": "m-editor-framework-right",
             left: columnWidth.value.left,
             right: columnWidth.value.right,
-            "min-left": 200,
-            "min-right": 300,
-            "min-center": 400,
-            width: frameworkRect.value?.width || 0,
+            "min-left": unref(MIN_LEFT_COLUMN_WIDTH),
+            "min-right": unref(MIN_RIGHT_COLUMN_WIDTH),
+            "min-center": unref(MIN_CENTER_COLUMN_WIDTH),
+            width: frameworkRect.value.width,
             onChange: columnWidthChange
           }, createSlots({
             left: withCtx(() => [
@@ -9323,7 +9312,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               ]),
               key: "0"
             } : undefined
-          ]), 1032, ["left", "right", "width"])),
+          ]), 1032, ["left", "right", "min-left", "min-right", "min-center", "width"])),
           renderSlot(_ctx.$slots, "content-after"),
           renderSlot(_ctx.$slots, "footer")
         ],
@@ -9345,13 +9334,12 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const services = inject("services");
-    const uiService = services?.uiService;
-    const columnWidth = computed(() => services?.uiService.get("columnWidth"));
+    const { uiService, editorService, historyService } = useServices();
+    const columnWidth = computed(() => uiService.get("columnWidth"));
     const keys = Object.values(ColumnLayout);
-    const showGuides = computed(() => uiService?.get("showGuides") ?? true);
-    const showRule = computed(() => uiService?.get("showRule") ?? true);
-    const zoom = computed(() => uiService?.get("zoom") ?? 1);
+    const showGuides = computed(() => uiService.get("showGuides"));
+    const showRule = computed(() => uiService.get("showRule"));
+    const zoom = computed(() => uiService.get("zoom"));
     const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
     const ctrl = isMac ? "Command" : "Ctrl";
     const getConfig = (item) => {
@@ -9381,10 +9369,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             className: "delete",
             icon: markRaw(Delete),
             tooltip: `刪除(Delete)`,
-            disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
+            disabled: () => editorService.get("node")?.type === NodeType.PAGE,
             handler: () => {
-              const node = services?.editorService.get("node");
-              node && services?.editorService.remove(node);
+              const node = editorService.get("node");
+              node && editorService.remove(node);
             }
           });
           break;
@@ -9394,8 +9382,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             className: "undo",
             icon: markRaw(Back),
             tooltip: `后退(${ctrl}+z)`,
-            disabled: () => !services?.historyService.state.canUndo,
-            handler: () => services?.editorService.undo()
+            disabled: () => !historyService.state.canUndo,
+            handler: () => editorService.undo()
           });
           break;
         case "redo":
@@ -9404,8 +9392,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             className: "redo",
             icon: markRaw(Right),
             tooltip: `前进(${ctrl}+Shift+z)`,
-            disabled: () => !services?.historyService.state.canRedo,
-            handler: () => services?.editorService.redo()
+            disabled: () => !historyService.state.canRedo,
+            handler: () => editorService.redo()
           });
           break;
         case "zoom-in":
@@ -9488,7 +9476,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const resizeObserver = new ResizeObserver(() => {
       const rect = navMenuEl.value?.getBoundingClientRect();
       if (rect) {
-        uiService?.set("navMenuRect", {
+        uiService.set("navMenuRect", {
           left: rect.left,
           top: rect.top,
           width: rect.width,
@@ -9570,12 +9558,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
+    const services = useServices();
+    const { editorService, uiService } = services;
     const codeOptions = inject("codeOptions", {});
     const showSrc = ref(false);
-    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
+    const propsPanelSize = computed(() => uiService.get("propsPanelSize") || "small");
     const { height: editorContentHeight } = useEditorContentHeight();
-    const stage = computed(() => services?.editorService.get("stage"));
+    const stage = computed(() => editorService.get("stage"));
     const configFormRef = useTemplateRef("configForm");
     watchEffect(() => {
       if (configFormRef.value) {
@@ -9652,33 +9641,41 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useStylePanel = (services) => {
+const useStylePanel = ({ uiService, storageService }, propsPanelWidth) => {
   const showStylePanelStorageKey = "props-panel-show-style-panel";
-  const showStylePanelStorageValue = services?.storageService.getItem(showStylePanelStorageKey, {
+  const showStylePanelStorageValue = storageService.getItem(showStylePanelStorageKey, {
     protocol: Protocol.BOOLEAN
   });
   if (typeof showStylePanelStorageValue === "boolean") {
-    services?.uiService.set("showStylePanel", showStylePanelStorageValue);
-  }
-  const showStylePanel = computed(
-    () => showStylePanelToggleButton.value && (services?.uiService.get("showStylePanel") ?? true)
-  );
-  const showStylePanelToggleButton = computed(
-    () => !(services && services.uiService.get("frameworkRect").width < 1280)
-  );
-  const showStylePanelHandler = () => {
-    services?.uiService.set("showStylePanel", true);
-    services?.storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
-  };
-  const closeStylePanelHandler = () => {
-    services?.uiService.set("showStylePanel", false);
-    services?.storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
+    uiService.set("showStylePanel", showStylePanelStorageValue);
+  }
+  const showStylePanel = computed(() => showStylePanelToggleButton.value && (uiService.get("showStylePanel") ?? true));
+  const showStylePanelToggleButton = computed(() => uiService.get("frameworkRect").width >= 1280);
+  const toggleStylePanel = (showStylePanel2) => {
+    uiService.set("showStylePanel", showStylePanel2);
+    storageService.setItem(showStylePanelStorageKey, showStylePanel2, { protocol: Protocol.BOOLEAN });
+    const columnWidth = {
+      ...uiService.get("columnWidth")
+    };
+    if (showStylePanel2) {
+      columnWidth.right += propsPanelWidth.value;
+      columnWidth.center -= propsPanelWidth.value;
+    } else {
+      columnWidth.right -= propsPanelWidth.value;
+      columnWidth.center += propsPanelWidth.value;
+    }
+    if (columnWidth.center < 0) {
+      columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH;
+      columnWidth.center = MIN_CENTER_COLUMN_WIDTH;
+      propsPanelWidth.value = columnWidth.right / 2;
+    }
+    storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });
+    uiService.set("columnWidth", columnWidth);
   };
   return {
     showStylePanel,
     showStylePanelToggleButton,
-    showStylePanelHandler,
-    closeStylePanelHandler
+    toggleStylePanel
   };
 };
 
@@ -9699,11 +9696,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   emits: ["submit-error", "form-error", "mounted"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
-    const services = inject("services");
+    const { editorService, uiService, propsService, storageService } = useServices();
     const values = ref({});
     const curFormConfig = ref([]);
-    const node = computed(() => services?.editorService.get("node"));
-    const nodes = computed(() => services?.editorService.get("nodes") || []);
+    const node = computed(() => editorService.get("node"));
+    const nodes = computed(() => editorService.get("nodes"));
     const styleFormConfig = [
       {
         tabPosition: "right",
@@ -9716,13 +9713,13 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         return;
       }
       const type = node.value.type || (node.value.items ? "container" : "text");
-      curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
+      curFormConfig.value = await propsService.getPropsConfig(type);
       values.value = node.value;
     };
     watchEffect(init);
-    services?.propsService.on("props-configs-change", init);
+    propsService.on("props-configs-change", init);
     onBeforeUnmount(() => {
-      services?.propsService.off("props-configs-change", init);
+      propsService.off("props-configs-change", init);
     });
     const submit = async (v, eventData) => {
       try {
@@ -9745,7 +9742,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             }
           });
         }
-        services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+        editorService.update(newValue, { changeRecords: eventData?.changeRecords });
       } catch (e) {
         emit("submit-error", e);
       }
@@ -9759,45 +9756,36 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     };
     const propsPanelEl = useTemplateRef("propsPanel");
+    const propsPanelWidth = ref(
+      storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300
+    );
+    onMounted(() => {
+      propsPanelEl.value?.style.setProperty("--props-style-panel-width", `${propsPanelWidth.value}px`);
+    });
     const widthChange = ({ deltaX }) => {
-      if (!propsPanelEl.value || !services) {
+      if (!propsPanelEl.value) {
         return;
       }
       const width = globalThis.parseFloat(
         getComputedStyle(propsPanelEl.value).getPropertyValue("--props-style-panel-width")
       );
       let value = width - deltaX;
-      if (value > services.uiService.get("columnWidth").right) {
-        value = services.uiService.get("columnWidth").right - 40;
+      if (value > uiService.get("columnWidth").right) {
+        value = uiService.get("columnWidth").right - 40;
       }
-      propsPanelEl.value.style.setProperty("--props-style-panel-width", `${value}px`);
+      propsPanelWidth.value = value;
     };
-    const { showStylePanel, showStylePanelToggleButton, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
-    watch(showStylePanel, (showStylePanel2) => {
-      if (!propsPanelEl.value || !services) {
-        return;
-      }
-      const columnWidth = {
-        ...services.uiService.get("columnWidth")
-      };
-      const width = globalThis.parseFloat(
-        getComputedStyle(propsPanelEl.value).getPropertyValue("--props-style-panel-width")
-      );
-      if (showStylePanel2) {
-        columnWidth.right += width;
-        columnWidth.center -= width;
-      } else {
-        columnWidth.right -= width;
-        columnWidth.center += width;
-      }
-      if (columnWidth.center < 0) {
-        columnWidth.right = columnWidth.right + columnWidth.center - 400;
-        columnWidth.center = 400;
-        propsPanelEl.value.style.setProperty("--props-style-panel-width", `${columnWidth.right / 2}px`);
-      }
-      globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnWidth.right}`);
-      services.uiService.set("columnWidth", columnWidth);
+    watch(propsPanelWidth, (value) => {
+      propsPanelEl.value?.style.setProperty("--props-style-panel-width", `${value}px`);
+      storageService.setItem(PROPS_PANEL_WIDTH_STORAGE_KEY, value, { protocol: Protocol.NUMBER });
     });
+    const { showStylePanel, showStylePanelToggleButton, toggleStylePanel } = useStylePanel(
+      {
+        storageService,
+        uiService
+      },
+      propsPanelWidth
+    );
     const propertyFormPanelRef = useTemplateRef("propertyFormPanel");
     __expose({
       getFormState() {
@@ -9842,7 +9830,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           }, {
             "props-form-panel-header": withCtx(() => [
               createElementVNode("div", _hoisted_2$4, [
-                _cache[0] || (_cache[0] = createElementVNode(
+                _cache[2] || (_cache[2] = createElementVNode(
                   "span",
                   null,
                   "样式",
@@ -9853,14 +9841,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   createVNode(unref(TMagicButton), {
                     link: "",
                     size: "small",
-                    onClick: unref(closeStylePanelHandler)
+                    onClick: _cache[0] || (_cache[0] = ($event) => unref(toggleStylePanel)(false))
                   }, {
                     default: withCtx(() => [
                       createVNode(_sfc_main$1r, { icon: unref(Close) }, null, 8, ["icon"])
                     ]),
                     _: 1
                     /* STABLE */
-                  }, 8, ["onClick"])
+                  })
                 ])
               ])
             ]),
@@ -9871,14 +9859,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             key: 2,
             class: "m-editor-props-panel-style-icon",
             circle: "",
-            onClick: unref(showStylePanelHandler)
+            onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleStylePanel)(true))
           }, {
             default: withCtx(() => [
               createVNode(_sfc_main$1r, { icon: unref(Sugar) }, null, 8, ["icon"])
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["onClick"])) : createCommentVNode("v-if", true)
+          })) : createCommentVNode("v-if", true)
         ],
         512
         /* NEED_PATCH */
@@ -10160,7 +10148,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const handleDragEnd = (event) => {
       treeEmit?.("node-dragend", event, props.data);
     };
-    const nodeContentmenuHandler = (event) => {
+    const nodeContextmenuHandler = (event) => {
       treeEmit?.("node-contextmenu", event, props.data);
     };
     const mouseenterHandler = (event) => {
@@ -10192,7 +10180,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           {
             class: normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
             style: normalizeStyle(`padding-left: ${_ctx.indent}px`),
-            onContextmenu: nodeContentmenuHandler,
+            onContextmenu: nodeContextmenuHandler,
             onMouseenter: mouseenterHandler
           },
           [
@@ -10350,13 +10338,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
-    const { codeBlockService, depService, editorService } = services || {};
-    const collecting = computed(() => depService?.get("collecting"));
+    const { codeBlockService, depService, editorService } = useServices();
     const codeList = computed(
-      () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
-        const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
-        const pageList = editorService?.get("root")?.items.map((page) => ({
+      () => Object.entries(codeBlockService.getCodeDsl() || {}).map(([codeId, code]) => {
+        const target = depService.getTarget(codeId, DepTargetType.CODE_BLOCK);
+        const pageList = editorService.get("root")?.items.map((page) => ({
           name: page.devconfig?.tabName || page.name,
           type: "node",
           id: `${codeId}_${page.id}`,
@@ -10383,7 +10369,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           key: codeId,
           name: code.name,
           type: "code",
-          codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+          codeBlockContent: codeBlockService.getCodeContentById(codeId),
           // 只有一个页面不显示页面分类
           items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || []
         };
@@ -10398,10 +10384,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
     const { nodeStatusMap } = useNodeStatus$1(codeList);
     const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
-    const editable = computed(() => codeBlockService?.getEditStatus());
+    const editable = computed(() => codeBlockService.getEditStatus());
     const selectComp = (compId) => {
-      const stage = editorService?.get("stage");
-      editorService?.select(compId);
+      const stage = editorService.get("stage");
+      editorService.select(compId);
       stage?.select(compId);
     };
     const clickHandler = (event, data) => {
@@ -10415,7 +10401,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const deleteCode = async (id) => {
       const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
       const existBinds = Boolean(currentCode?.items?.length);
-      const undeleteableList = codeBlockService?.getUndeletableList() || [];
+      const undeleteableList = codeBlockService.getUndeletableList() || [];
       if (!existBinds && !undeleteableList.includes(id)) {
         await tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
           confirmButtonText: "确定",
@@ -10467,20 +10453,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           )
         ]),
         "tree-node-tool": withCtx(({ data }) => [
-          collecting.value && data.type === "code" ? (openBlock(), createBlock(unref(TMagicTag), {
-            key: 0,
-            type: "info",
-            size: "small",
-            style: { "margin-right": "5px" }
-          }, {
-            default: withCtx(() => _cache[0] || (_cache[0] = [
-              createTextVNode("依赖收集中")
-            ])),
-            _: 1
-            /* STABLE */
-          })) : createCommentVNode("v-if", true),
           data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 1,
+            key: 0,
             effect: "dark",
             content: editable.value ? "编辑" : "查看",
             placement: "bottom"
@@ -10498,7 +10472,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           data.type === "code" && editable.value ? (openBlock(), createBlock(
             unref(TMagicTooltip),
             {
-              key: 2,
+              key: 1,
               effect: "dark",
               content: "删除",
               placement: "bottom"
@@ -10538,7 +10512,7 @@ const useContentMenu$1 = (deleteCode) => {
       type: "button",
       text: "编辑",
       icon: Edit,
-      display: (services) => services?.codeBlockService?.getEditStatus() ?? true,
+      display: ({ codeBlockService }) => codeBlockService.getEditStatus(),
       handler: () => {
         if (!selectId) {
           return;
@@ -10610,8 +10584,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const eventBus = inject("eventBus");
-    const { codeBlockService } = inject("services") || {};
-    const editable = computed(() => codeBlockService?.getEditStatus());
+    const { codeBlockService } = useServices();
+    const editable = computed(() => codeBlockService.getEditStatus());
     const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
     const codeBlockListRef = useTemplateRef("codeBlockList");
     const filterTextChangeHandler = (val) => {
@@ -10706,20 +10680,20 @@ const useDataSourceEdit = (dataSourceService) => {
   const dialogTitle = ref("");
   const editDialog = ref();
   const dataSourceValues = ref({});
-  const editable = computed(() => dataSourceService?.get("editable") ?? true);
+  const editable = computed(() => dataSourceService.get("editable"));
   const editHandler = (id) => {
     if (!editDialog.value) return;
     dataSourceValues.value = {
-      ...dataSourceService?.getDataSourceById(id)
+      ...dataSourceService.getDataSourceById(id) || {}
     };
     dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
     editDialog.value.show();
   };
   const submitDataSourceHandler = (value, eventData) => {
     if (value.id) {
-      dataSourceService?.update(value, { changeRecords: eventData.changeRecords });
+      dataSourceService.update(value, { changeRecords: eventData.changeRecords });
     } else {
-      dataSourceService?.add(value);
+      dataSourceService.add(value);
     }
     editDialog.value?.hide();
   };
@@ -10754,15 +10728,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const boxVisible = useModel(__props, "visible");
     const width = useModel(__props, "width");
     const emit = __emit;
-    const services = inject("services");
+    const { uiService, dataSourceService } = useServices();
     const initValues = ref({});
     const dataSourceConfig = ref([]);
     const { height: editorHeight } = useEditorContentHeight();
     const parentFloating = inject("parentFloating", ref(null));
-    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+    const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
     watchEffect(() => {
       initValues.value = props.values;
-      dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
+      dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
     });
     const submitHandler = (values, data) => {
       emit("submit", values, data);
@@ -10821,13 +10795,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   emits: ["edit", "remove", "node-contextmenu"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
-    const { depService, editorService, dataSourceService } = inject("services") || {};
-    const collecting = computed(() => depService?.get("collecting"));
-    const editable = computed(() => dataSourceService?.get("editable") ?? true);
-    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
-    const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
-    const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
-    const dsCondDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
+    const { depService, editorService, dataSourceService } = useServices();
+    const editable = computed(() => dataSourceService.get("editable"));
+    const dataSources = computed(() => dataSourceService.get("dataSources"));
+    const dsDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE));
+    const dsMethodDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE_METHOD));
+    const dsCondDep = computed(() => depService.getTargets(DepTargetType.DATA_SOURCE_COND));
     const getKeyTreeConfig = (dep, type, parentKey) => dep.keys.map((key) => ({
       name: key,
       id: `${parentKey}_${key}`,
@@ -10858,7 +10831,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         const dsDeps = dsDep.value[ds.id]?.deps || {};
         const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
         const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
-        const items = editorService?.get("root")?.items.map((page) => ({
+        const items = editorService.get("root")?.items.map((page) => ({
           name: page.devconfig?.tabName || page.name,
           type: "node",
           id: `${ds.id}_${page.id}`,
@@ -10893,8 +10866,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       emit("remove", id);
     };
     const selectComp = (compId) => {
-      const stage = editorService?.get("stage");
-      editorService?.select(compId);
+      const stage = editorService.get("stage");
+      editorService.select(compId);
       stage?.select(compId);
     };
     const clickHandler = (event, data) => {
@@ -10933,20 +10906,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           )
         ]),
         "tree-node-tool": withCtx(({ data }) => [
-          collecting.value && data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTag), {
-            key: 0,
-            type: "info",
-            size: "small",
-            style: { "margin-right": "5px" }
-          }, {
-            default: withCtx(() => _cache[0] || (_cache[0] = [
-              createTextVNode("依赖收集中")
-            ])),
-            _: 1
-            /* STABLE */
-          })) : createCommentVNode("v-if", true),
           data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 1,
+            key: 0,
             effect: "dark",
             content: editable.value ? "编辑" : "查看",
             placement: "bottom"
@@ -10964,7 +10925,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           data.type === "ds" && editable.value ? (openBlock(), createBlock(
             unref(TMagicTooltip),
             {
-              key: 2,
+              key: 1,
               effect: "dark",
               content: "删除",
               placement: "bottom"
@@ -11001,7 +10962,7 @@ const useContentMenu = () => {
       type: "button",
       text: "编辑",
       icon: Edit,
-      display: (services) => services?.dataSourceService?.get("editable") ?? true,
+      display: ({ dataSourceService }) => dataSourceService.get("editable"),
       handler: () => {
         if (!selectId) {
           return;
@@ -11071,20 +11032,20 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const eventBus = inject("eventBus");
-    const { dataSourceService } = inject("services") || {};
+    const { dataSourceService } = useServices();
     const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
     const datasourceTypeList = computed(
       () => [
         { text: "基础", type: "base" },
         { text: "HTTP", type: "http" }
-      ].concat(dataSourceService?.get("datasourceTypeList") ?? [])
+      ].concat(dataSourceService.get("datasourceTypeList"))
     );
     const addHandler = (type) => {
       if (!editDialog.value) return;
       const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
       dataSourceValues.value = mergeWith(
         { type, title: datasourceType?.text },
-        dataSourceService?.getFormValue(type) || {},
+        dataSourceService.getFormValue(type),
         (objValue, srcValue) => {
           if (Array.isArray(srcValue)) {
             return srcValue;
@@ -11100,7 +11061,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         cancelButtonText: "取消",
         type: "warning"
       });
-      dataSourceService?.remove(id);
+      dataSourceService.remove(id);
     };
     const dataSourceList = ref();
     const filterTextChangeHandler = (val) => {
@@ -11253,67 +11214,66 @@ const useDeleteMenu = () => ({
   type: "button",
   text: "删除",
   icon: Delete,
-  display: (services) => {
-    const node = services?.editorService?.get("node");
+  display: ({ editorService }) => {
+    const node = editorService.get("node");
     return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
   },
-  handler: (services) => {
-    const nodes = services?.editorService?.get("nodes");
-    nodes && services?.editorService?.remove(nodes);
+  handler: ({ editorService }) => {
+    const nodes = editorService.get("nodes");
+    nodes && editorService.remove(nodes);
   }
 });
 const useCopyMenu = () => ({
   type: "button",
   text: "复制",
   icon: markRaw(CopyDocument),
-  handler: (services) => {
-    const nodes = services?.editorService?.get("nodes");
-    nodes && services?.editorService?.copy(nodes);
+  handler: ({ editorService }) => {
+    const nodes = editorService?.get("nodes");
+    nodes && editorService?.copy(nodes);
   }
 });
 const usePasteMenu = (menu) => ({
   type: "button",
   text: "粘贴",
   icon: markRaw(DocumentCopy),
-  display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
-  handler: (services) => {
-    const nodes = services?.editorService?.get("nodes");
+  display: ({ storageService }) => !!storageService.getItem(COPY_STORAGE_KEY),
+  handler: ({ editorService, uiService }) => {
+    const nodes = editorService?.get("nodes");
     if (!nodes || nodes.length === 0) return;
     if (menu?.value?.$el) {
-      const stage = services?.editorService?.get("stage");
+      const stage = editorService.get("stage");
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-      const initialTop = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
-      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+      const initialLeft = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / uiService.get("zoom");
+      const initialTop = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / uiService.get("zoom");
+      editorService.paste({ left: initialLeft, top: initialTop });
     } else {
-      services?.editorService?.paste();
+      editorService.paste();
     }
   }
 });
-const moveTo = (id, services) => {
-  if (!services?.editorService) return;
-  const nodes = services.editorService.get("nodes") || [];
-  const parent = services.editorService.getNodeById(id);
+const moveTo = (id, { editorService }) => {
+  const nodes = editorService.get("nodes") || [];
+  const parent = editorService.getNodeById(id);
   if (!parent) return;
-  services?.editorService.add(nodes, parent);
-  services?.editorService.remove(nodes);
+  editorService.add(nodes, parent);
+  editorService.remove(nodes);
 };
-const useMoveToMenu = (services) => {
-  const root = computed(() => services?.editorService?.get("root"));
+const useMoveToMenu = ({ editorService }) => {
+  const root = computed(() => editorService.get("root"));
   return {
     type: "button",
     text: "移动至",
-    display: (services2) => {
-      const node = services2?.editorService?.get("node");
-      const pageLength = services2?.editorService?.get("pageLength") || 0;
+    display: ({ editorService: editorService2 }) => {
+      const node = editorService2.get("node");
+      const pageLength = editorService2.get("pageLength");
       return !isPage(node) && pageLength > 1;
     },
-    items: (root.value?.items || []).filter((page) => page.id !== services?.editorService?.get("page")?.id).map((page) => ({
+    items: (root.value?.items || []).filter((page) => page.id !== editorService.get("page")?.id).map((page) => ({
       text: `${page.name}(${page.id})`,
       type: "button",
-      handler: (services2) => {
-        moveTo(page.id, services2);
+      handler: (services) => {
+        moveTo(page.id, services);
       }
     }))
   };
@@ -11332,17 +11292,18 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const services = inject("services");
+    const services = useServices();
+    const { editorService, componentListService } = services;
     const menuRef = useTemplateRef("menu");
-    const node = computed(() => services?.editorService.get("node"));
-    const nodes = computed(() => services?.editorService.get("nodes"));
-    const componentList = computed(() => services?.componentListService.getList() || []);
+    const node = computed(() => editorService.get("node"));
+    const nodes = computed(() => editorService.get("nodes"));
+    const componentList = computed(() => componentListService.getList());
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
       type: "button",
       icon: component.icon,
       handler: () => {
-        services?.editorService.add({
+        editorService.add({
           name: component.text,
           type: component.type,
           ...component.data || {}
@@ -11357,7 +11318,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             type: "button",
             icon: Files,
             handler: () => {
-              services?.editorService.add({
+              editorService.add({
                 type: "tab-pane"
               });
             }
@@ -11431,10 +11392,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const services = inject("services");
-    const editorService = services?.editorService;
+    const { editorService } = useServices();
     const setNodeVisible = (visible) => {
-      if (!editorService) return;
       editorService.update({
         id: props.data.id,
         visible
@@ -11465,8 +11424,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
-  const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get("disabledMultiSelect"));
+const useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown, nodeStatusMap, menuRef) => {
+  const isMultiSelect = computed(() => isCtrlKeyDown.value && !editorService.get("disabledMultiSelect"));
   const select = async (data) => {
     if (!data.id) {
       throw new Error("没有id");
@@ -11474,16 +11433,16 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
     if (isMultiSelect.value) {
       multiSelect(data);
     } else {
-      await services?.editorService.select(data);
-      services?.editorService.get("stage")?.select(data.id);
-      services?.stageOverlayService.get("stage")?.select(data.id);
+      await editorService.select(data);
+      editorService.get("stage")?.select(data.id);
+      stageOverlayService.get("stage")?.select(data.id);
     }
   };
   const multiSelect = async (data) => {
     if (isPage(data) || isPageFragment(data)) {
       return;
     }
-    const nodes = services?.editorService.get("nodes") || [];
+    const nodes = editorService.get("nodes") || [];
     const newNodes = [];
     let isCancel = false;
     nodes.forEach((node) => {
@@ -11499,9 +11458,9 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
     if (!isCancel || newNodes.length === 0) {
       newNodes.push(data.id);
     }
-    await services?.editorService.multiSelect(newNodes);
-    services?.editorService.get("stage")?.multiSelect(newNodes);
-    services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
+    await editorService.multiSelect(newNodes);
+    editorService.get("stage")?.multiSelect(newNodes);
+    stageOverlayService.get("stage")?.multiSelect(newNodes);
   };
   const throttleTime = 300;
   const highlightHandler = throttle(
@@ -11511,13 +11470,13 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
     throttleTime
   );
   const highlight = (data) => {
-    services?.editorService?.highlight(data);
-    services?.editorService?.get("stage")?.highlight(data.id);
-    services?.stageOverlayService?.get("stage")?.highlight(data.id);
+    editorService.highlight(data);
+    editorService.get("stage")?.highlight(data.id);
+    stageOverlayService.get("stage")?.highlight(data.id);
   };
   const nodeClickHandler = (event, data) => {
     if (!nodeStatusMap?.value) return;
-    if (services?.uiService.get("uiSelectMode")) {
+    if (uiService.get("uiSelectMode")) {
       document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
       return;
     }
@@ -11535,7 +11494,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
     nodeClickHandler,
     nodeContentMenuHandler(event, data) {
       event.preventDefault();
-      const nodes = services?.editorService.get("nodes") || [];
+      const nodes = editorService.get("nodes") || [];
       if (nodes.length < 2 || !nodes.includes(data)) {
         nodeClickHandler(event, data);
       }
@@ -11566,7 +11525,7 @@ const removeStatusClass = (el) => {
     });
   });
 };
-const useDrag = (services) => {
+const useDrag = ({ editorService }) => {
   const handleDragStart = (event) => {
     if (!event.dataTransfer || !event.target || !event.currentTarget) return;
     const targetEl = getNodeEl(event.target);
@@ -11640,11 +11599,11 @@ const useDrag = (services) => {
     const targetEl = getNodeEl(event.target);
     if (!targetEl || targetEl !== event.currentTarget) return;
     removeStatusClass(dragState.container);
-    if (node && dragState.dragOverNodeId && dragState.dropType && services) {
+    if (node && dragState.dragOverNodeId && dragState.dropType) {
       if (dragState.dragOverNodeId === node.id) {
         return;
       }
-      const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
+      const targetInfo = editorService.getNodeInfo(dragState.dragOverNodeId, false);
       const targetNode = targetInfo.node;
       let targetParent = targetInfo.parent;
       if (!targetParent || !targetNode) return;
@@ -11658,11 +11617,11 @@ const useDrag = (services) => {
       if (dragState.dropType === "after") {
         targetIndex += 1;
       }
-      const selectedNodes = services.editorService.get("nodes");
+      const selectedNodes = editorService.get("nodes");
       if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) {
-        services.editorService.dragTo(selectedNodes, targetParent, targetIndex);
+        editorService.dragTo(selectedNodes, targetParent, targetIndex);
       } else {
-        services.editorService.dragTo([node], targetParent, targetIndex);
+        editorService.dragTo([node], targetParent, targetIndex);
       }
     }
     dragState.dragOverNodeId = "";
@@ -11801,19 +11760,18 @@ const keybindingConfig = [
   }
 ];
 
-const useKeybinding = (services, container) => {
-  const keybindingService = services?.keybindingService;
+const useKeybinding = ({ keybindingService }, container) => {
   const isCtrlKeyDown = ref(false);
   const windowBlurHandler = () => {
     isCtrlKeyDown.value = false;
   };
-  keybindingService?.registerCommand("layer-panel-global-keyup", () => {
+  keybindingService.registerCommand("layer-panel-global-keyup", () => {
     isCtrlKeyDown.value = false;
   });
-  keybindingService?.registerCommand("layer-panel-global-keydown", () => {
+  keybindingService.registerCommand("layer-panel-global-keydown", () => {
     isCtrlKeyDown.value = true;
   });
-  keybindingService?.register([
+  keybindingService.register([
     {
       command: "layer-panel-global-keydown",
       keybinding: "ctrl",
@@ -11828,10 +11786,10 @@ const useKeybinding = (services, container) => {
   watchEffect(() => {
     if (container.value) {
       globalThis.addEventListener("blur", windowBlurHandler);
-      keybindingService?.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
+      keybindingService.registerEl(KeyBindingContainerKey.LAYER_PANEL, container.value.$el);
     } else {
       globalThis.removeEventListener("blur", windowBlurHandler);
-      keybindingService?.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
+      keybindingService.unregisterEl(KeyBindingContainerKey.LAYER_PANEL);
     }
   });
   return {
@@ -11862,9 +11820,9 @@ const createPageNodeStatus = (page, initialLayerNodeStatus) => {
   );
   return map;
 };
-const useNodeStatus = (services) => {
-  const page = computed(() => services?.editorService.get("page"));
-  const nodes = computed(() => services?.editorService.get("nodes") || []);
+const useNodeStatus = ({ editorService }) => {
+  const page = computed(() => editorService.get("page"));
+  const nodes = computed(() => editorService.get("nodes"));
   const nodeStatusMaps = ref(/* @__PURE__ */ new Map());
   const nodeStatusMap = computed(
     () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
@@ -11900,7 +11858,7 @@ const useNodeStatus = (services) => {
       immediate: true
     }
   );
-  services?.editorService.on("add", (newNodes) => {
+  const addHandler = (newNodes) => {
     newNodes.forEach((node) => {
       if (isPage(node) || isPageFragment(node)) return;
       traverseNode(node, (node2) => {
@@ -11912,13 +11870,19 @@ const useNodeStatus = (services) => {
         });
       });
     });
-  });
-  services?.editorService.on("remove", (nodes2) => {
+  };
+  editorService.on("add", addHandler);
+  const removeHandler = (nodes2) => {
     nodes2.forEach((node) => {
       traverseNode(node, (node2) => {
         nodeStatusMap.value?.delete(node2.id);
       });
     });
+  };
+  editorService.on("remove", removeHandler);
+  onBeforeUnmount(() => {
+    editorService.off("remove", removeHandler);
+    editorService.off("add", addHandler);
   });
   return {
     nodeStatusMaps,
@@ -11938,10 +11902,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     customContentMenu: { type: Function }
   },
   setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
+    const services = useServices();
+    const { editorService } = services;
     const treeRef = useTemplateRef("tree");
-    const page = computed(() => editorService?.get("page"));
+    const page = computed(() => editorService.get("page"));
     const nodeData = computed(() => !page.value ? [] : [page.value]);
     const { nodeStatusMap } = useNodeStatus(services);
     const { isCtrlKeyDown } = useKeybinding(services, treeRef);
@@ -12035,11 +11999,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const filterTextChangeHandler = (v) => {
       searchText.value = v;
     };
-    const services = inject("services");
+    const { editorService, componentListService } = useServices();
     const stageOptions = inject("stageOptions");
-    const stage = computed(() => services?.editorService.get("stage"));
+    const stage = computed(() => editorService.get("stage"));
     const list = computed(
-      () => (services?.componentListService.getList() || []).map((group) => ({
+      () => componentListService.getList().map((group) => ({
         ...group,
         items: group.items.filter((item) => item.text.includes(searchText.value))
       }))
@@ -12051,7 +12015,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     let clientX;
     let clientY;
     const appendComponent = ({ text, type, data = {} }) => {
-      services?.editorService.add({
+      editorService.add({
         name: text,
         type,
         ...data
@@ -12198,7 +12162,11 @@ const _hoisted_4 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const _hoisted_5 = { class: "m-editor-slide-list-box" };
+const _hoisted_5 = {
+  key: 0,
+  class: "m-editor-sidebar-tips"
+};
+const _hoisted_6 = { class: "m-editor-slide-list-box" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
@@ -12217,9 +12185,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const services = inject("services");
-    const collecting = computed(() => services?.depService.get("collecting"));
-    const columnLeftWidth = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
+    const { depService, uiService } = useServices();
+    const collecting = computed(() => depService.get("collecting"));
+    const taskLength = computed(() => depService.get("taskLength"));
+    const tipsBarVisible = ref(true);
+    const columnLeftWidth = computed(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
     const { height: editorContentHeight } = useEditorContentHeight();
     const columnLeftHeight = ref(0);
     const unWatchEditorContentHeight = watch(
@@ -12294,7 +12264,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     watch(
       sideBarItems,
       (items) => {
-        services?.uiService.set("sideBarItems", items);
+        uiService.set("sideBarItems", items);
       },
       {
         immediate: true
@@ -12318,10 +12288,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
         if (!nextSlideBarItem) {
           activeTabName.value = "";
-          services?.uiService.set("hideSlideBar", true);
+          uiService.set("hideSlideBar", true);
           return;
         }
-        services?.uiService.set("hideSlideBar", false);
+        uiService.set("hideSlideBar", false);
         activeTabName.value = nextSlideBarItem?.text;
       }
     );
@@ -12528,7 +12498,21 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               }),
               128
               /* KEYED_FRAGMENT */
-            ))
+            )),
+            tipsBarVisible.value && collecting.value && taskLength.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createElementVNode(
+                "span",
+                null,
+                "依赖收集中(剩余任务：" + toDisplayString(taskLength.value) + ")",
+                1
+                /* TEXT */
+              ),
+              createVNode(_sfc_main$1r, {
+                icon: unref(Close),
+                class: "close-icon",
+                onClick: _cache[1] || (_cache[1] = withModifiers(($event) => tipsBarVisible.value = false, ["stop"]))
+              }, null, 8, ["icon"])
+            ])) : createCommentVNode("v-if", true)
           ])) : createCommentVNode("v-if", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             (openBlock(true), createElementBlock(
@@ -12544,7 +12528,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       visible: unref(floatBoxStates)[config.$key].status,
                       "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
                       height: columnLeftHeight.value,
-                      "onUpdate:height": _cache[1] || (_cache[1] = ($event) => columnLeftHeight.value = $event),
+                      "onUpdate:height": _cache[2] || (_cache[2] = ($event) => columnLeftHeight.value = $event),
                       width: columnLeftWidth.value,
                       title: config.text,
                       position: {
@@ -12553,7 +12537,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       }
                     }, {
                       body: withCtx(() => [
-                        createElementVNode("div", _hoisted_5, [
+                        createElementVNode("div", _hoisted_6, [
                           config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(
                             resolveDynamicComponent(config.component),
                             mergeProps({
@@ -12801,15 +12785,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "NodeListMenu",
   setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
+    const services = useServices();
+    const { editorService } = services;
     const visible = ref(false);
     const buttonVisible = ref(false);
     const buttonEl = useTemplateRef("button");
     const boxRef = useTemplateRef("box");
-    const stage = computed(() => editorService?.get("stage"));
-    const page = computed(() => editorService?.get("page"));
-    const nodes = computed(() => editorService?.get("nodes") || []);
+    const stage = computed(() => editorService.get("stage"));
+    const page = computed(() => editorService.get("page"));
+    const nodes = computed(() => editorService.get("nodes"));
     const nodeData = computed(() => !page.value ? [] : [page.value]);
     const { nodeStatusMap } = useNodeStatus(services);
     const filterNodeMethod = (value, data) => data.id === value;
@@ -12843,7 +12827,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
     );
     const clickHandler = async (event, data) => {
-      await editorService?.select(data.id);
+      await editorService.select(data.id);
       stage.value?.select(data.id);
     };
     const menuPosition = ref({
@@ -12917,13 +12901,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "StageOverlay",
   setup(__props) {
-    const services = inject("services");
+    const { stageOverlayService, editorService } = useServices();
     const stageOptions = inject("stageOptions");
     const stageOverlayEl = useTemplateRef("stageOverlay");
-    const stageOverlayVisible = computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
-    const wrapWidth = computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
-    const wrapHeight = computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
-    const stage = computed(() => services?.editorService.get("stage"));
+    const stageOverlayVisible = computed(() => stageOverlayService.get("stageOverlayVisible"));
+    const wrapWidth = computed(() => stageOverlayService.get("wrapWidth"));
+    const wrapHeight = computed(() => stageOverlayService.get("wrapHeight"));
+    const stage = computed(() => editorService.get("stage"));
     const style = computed(() => ({
       width: `${wrapWidth.value}px`,
       height: `${wrapHeight.value}px`
@@ -12932,31 +12916,30 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       if (stage2) {
         stage2.on("dblclick", async (event) => {
           const el = await stage2.actionManager?.getElementFromPoint(event) || null;
-          services?.stageOverlayService.openOverlay(el);
+          stageOverlayService.openOverlay(el);
         });
       } else {
-        services?.stageOverlayService.closeOverlay();
+        stageOverlayService.closeOverlay();
       }
     });
     watch(stageOverlayEl, (stageOverlay) => {
-      if (!services) return;
-      const subStage = services.stageOverlayService.createStage(stageOptions);
-      services?.stageOverlayService.set("stage", subStage);
+      const subStage = stageOverlayService.createStage(stageOptions);
+      stageOverlayService.set("stage", subStage);
       if (stageOverlay && subStage) {
         subStage.mount(stageOverlay);
         const { mask, renderer } = subStage;
         const { contentWindow } = renderer;
         mask?.showRule(false);
-        services?.stageOverlayService.updateOverlay();
+        stageOverlayService.updateOverlay();
         contentWindow?.magic.onRuntimeReady({});
       }
     });
     onBeforeUnmount(() => {
-      services?.stageOverlayService.get("stage")?.destroy();
-      services?.stageOverlayService.set("stage", null);
+      stageOverlayService.get("stage")?.destroy();
+      stageOverlayService.set("stage", null);
     });
     const closeOverlayHandler = () => {
-      services?.stageOverlayService.closeOverlay();
+      stageOverlayService.closeOverlay();
     };
     return (_ctx, _cache) => {
       return stageOverlayVisible.value ? (openBlock(), createElementBlock("div", {
@@ -13062,13 +13045,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const services = inject("services");
-    const editorService = services?.editorService;
+    const services = useServices();
+    const { editorService } = services;
     const menuRef = useTemplateRef("menu");
     const canCenter = ref(false);
-    const node = computed(() => editorService?.get("node"));
-    const nodes = computed(() => editorService?.get("nodes"));
-    const parent = computed(() => editorService?.get("parent"));
+    const node = computed(() => editorService.get("node"));
+    const nodes = computed(() => editorService.get("nodes"));
+    const parent = computed(() => editorService.get("parent"));
     const menuData = computed(
       () => props.customContentMenu(
         [
@@ -13079,7 +13062,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             display: () => canCenter.value,
             handler: () => {
               if (!nodes.value) return;
-              editorService?.alignCenter(nodes.value);
+              editorService.alignCenter(nodes.value);
             }
           },
           useCopyMenu(),
@@ -13098,7 +13081,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             icon: markRaw(Top),
             display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
             handler: () => {
-              editorService?.moveLayer(1);
+              editorService.moveLayer(1);
             }
           },
           {
@@ -13107,7 +13090,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             icon: markRaw(Bottom),
             display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
             handler: () => {
-              editorService?.moveLayer(-1);
+              editorService.moveLayer(-1);
             }
           },
           {
@@ -13116,7 +13099,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             icon: markRaw(Top),
             display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
             handler: () => {
-              editorService?.moveLayer(LayerOffset.TOP);
+              editorService.moveLayer(LayerOffset.TOP);
             }
           },
           {
@@ -13125,7 +13108,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             icon: markRaw(Bottom),
             display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
             handler: () => {
-              editorService?.moveLayer(LayerOffset.BOTTOM);
+              editorService.moveLayer(LayerOffset.BOTTOM);
             }
           },
           useMoveToMenu(services),
@@ -13143,7 +13126,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             type: "button",
             text: "清空参考线",
             handler: () => {
-              editorService?.get("stage")?.clearGuides();
+              editorService.get("stage")?.clearGuides();
             }
           },
           ...props.stageContentMenu
@@ -13154,7 +13137,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     watch(
       parent,
       async () => {
-        if (!parent.value || !editorService) return canCenter.value = false;
+        if (!parent.value) return canCenter.value = false;
         const layout = await editorService.getLayout(parent.value);
         const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
         const isTypeConform = nodes.value?.every(
@@ -13192,19 +13175,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const props = __props;
     let stage = null;
     let runtime = null;
-    const services = inject("services");
-    const stageLoading = computed(() => services?.editorService.get("stageLoading") || false);
+    const { editorService, uiService, keybindingService } = useServices();
+    const stageLoading = computed(() => editorService.get("stageLoading"));
     const stageWrapRef = useTemplateRef("stageWrap");
     const stageContainerEl = useTemplateRef("stageContainer");
     const menuRef = useTemplateRef("menu");
-    const nodes = computed(() => services?.editorService.get("nodes") || []);
+    const nodes = computed(() => editorService.get("nodes"));
     const isMultiSelect = computed(() => nodes.value.length > 1);
-    const stageRect = computed(() => services?.uiService.get("stageRect"));
-    const stageContainerRect = computed(() => services?.uiService.get("stageContainerRect"));
-    const root = computed(() => services?.editorService.get("root"));
-    const page = computed(() => services?.editorService.get("page"));
-    const zoom = computed(() => services?.uiService.get("zoom") || 1);
-    const node = computed(() => services?.editorService.get("node"));
+    const stageRect = computed(() => uiService.get("stageRect"));
+    const stageContainerRect = computed(() => uiService.get("stageContainerRect"));
+    const root = computed(() => editorService.get("root"));
+    const page = computed(() => editorService.get("page"));
+    const zoom = computed(() => uiService.get("zoom"));
+    const node = computed(() => editorService.get("node"));
     watchEffect(() => {
       if (stage || !page.value) return;
       if (!stageContainerEl.value) return;
@@ -13213,7 +13196,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       stage.on("select", () => {
         stageWrapRef.value?.container?.focus();
       });
-      services?.editorService.set("stage", markRaw(stage));
+      editorService.set("stage", markRaw(stage));
       stage.mount(stageContainerEl.value);
       if (!node.value?.id) {
         return;
@@ -13229,7 +13212,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     onBeforeUnmount(() => {
       stage?.destroy();
-      services?.editorService.set("stage", null);
+      editorService.set("stage", null);
     });
     watch(zoom, (zoom2) => {
       if (!stage || !zoom2) return;
@@ -13238,12 +13221,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     let timeoutId = null;
     watch(page, (page2) => {
       if (runtime && page2) {
-        services?.editorService.set("stageLoading", true);
+        editorService.set("stageLoading", true);
         if (timeoutId) {
           globalThis.clearTimeout(timeoutId);
         }
         timeoutId = globalThis.setTimeout(() => {
-          services?.editorService.set("stageLoading", false);
+          editorService.set("stageLoading", false);
           timeoutId = null;
         }, 3e3);
         runtime.updatePageId?.(page2.id);
@@ -13257,10 +13240,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
       }
     };
-    services?.editorService.on("root-change", rootChangeHandler);
+    editorService.on("root-change", rootChangeHandler);
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
-        services?.uiService.set("stageContainerRect", {
+        uiService.set("stageContainerRect", {
           width: contentRect.width,
           height: contentRect.height
         });
@@ -13269,15 +13252,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       if (stageWrapRef.value?.container) {
         resizeObserver.observe(stageWrapRef.value.container);
-        services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
+        keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
       }
     });
     onBeforeUnmount(() => {
       stage?.destroy();
       resizeObserver.disconnect();
-      services?.editorService.set("stage", null);
-      services?.keybindingService.unregisterEl("stage");
-      services?.editorService.off("root-change", rootChangeHandler);
+      editorService.set("stage", null);
+      keybindingService.unregisterEl("stage");
+      editorService.off("root-change", rootChangeHandler);
     });
     const parseDSL = getEditorConfig("parseDSL");
     const contextmenuHandler = (e) => {
@@ -13303,10 +13286,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       let parent = page.value;
       const parentId = getIdFromEl()(parentEl);
       if (parentId) {
-        parent = services?.editorService.getNodeById(parentId, false);
+        parent = editorService.getNodeById(parentId, false);
       }
       if (parent && stageContainerEl.value && stage) {
-        const layout = await services?.editorService.getLayout(parent);
+        const layout = await editorService.getLayout(parent);
         const containerRect = stageContainerEl.value.getBoundingClientRect();
         const { scrollTop, scrollLeft } = stage.mask;
         const { style = {} } = config.data;
@@ -13334,7 +13317,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           left: calcValueByFontsize(doc, left / zoom.value)
         };
         config.data.inputEvent = e;
-        services?.editorService.add(config.data, parent);
+        editorService.add(config.data, parent);
       }
     };
     return (_ctx, _cache) => {
@@ -13403,15 +13386,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   },
   __name: "Breadcrumb",
   setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const node = computed(() => editorService?.get("node"));
-    const nodes = computed(() => editorService?.get("nodes") || []);
-    const root = computed(() => editorService?.get("root"));
+    const { editorService } = useServices();
+    const node = computed(() => editorService.get("node"));
+    const nodes = computed(() => editorService.get("nodes"));
+    const root = computed(() => editorService.get("root"));
     const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
     const select = async (node2) => {
-      await editorService?.select(node2);
-      editorService?.get("stage")?.select(node2.id);
+      await editorService.select(node2);
+      editorService.get("stage")?.select(node2.id);
     };
     return (_ctx, _cache) => {
       return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
@@ -13467,8 +13449,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const stageOptions = inject("stageOptions");
-    const services = inject("services");
-    const page = computed(() => services?.editorService.get("page"));
+    const { editorService } = useServices();
+    const page = computed(() => editorService.get("page"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$2),
@@ -13913,12 +13895,22 @@ class DataSource extends BaseService {
 }
 const dataSourceService = new DataSource();
 
-const idleTask = new IdleTask();
 class Dep extends BaseService {
   state = shallowReactive({
-    collecting: false
+    collecting: false,
+    taskLength: 0
   });
+  idleTask = new IdleTask();
   watcher = new Watcher({ initialTargets: reactive({}) });
+  constructor() {
+    super();
+    this.idleTask.on(
+      "update-task-length",
+      throttle(({ length }) => {
+        this.set("taskLength", length);
+      }, 1e3)
+    );
+  }
   set(name, value) {
     this.state[name] = value;
   }
@@ -13973,11 +13965,11 @@ class Dep extends BaseService {
         resolve();
         return;
       }
-      idleTask.once("finish", () => {
+      this.idleTask.once("finish", () => {
         this.emit("collected", nodes, deep);
         this.set("collecting", false);
       });
-      idleTask.once("hight-level-finish", () => {
+      this.idleTask.once("hight-level-finish", () => {
         this.emit("ds-collected", nodes, deep);
         resolve();
       });
@@ -14008,7 +14000,7 @@ class Dep extends BaseService {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
   clearIdleTasks() {
-    idleTask.clearTasks();
+    this.idleTask.clearTasks();
   }
   on(eventName, listener) {
     return super.on(eventName, listener);
@@ -14017,8 +14009,8 @@ class Dep extends BaseService {
     return super.once(eventName, listener);
   }
   reset() {
-    idleTask.removeAllListeners();
-    idleTask.clearTasks();
+    this.idleTask.removeAllListeners();
+    this.idleTask.clearTasks();
     for (const type of Object.keys(this.watcher.getTargetsList())) {
       this.removeTargets(type);
     }
@@ -14028,12 +14020,13 @@ class Dep extends BaseService {
     this.removeAllListeners();
     this.reset();
     this.removeAllPlugins();
+    this.idleTask.removeAllListeners();
   }
   emit(eventName, ...args) {
     return super.emit(eventName, ...args);
   }
   enqueueTask(node, target, depExtendedData, deep) {
-    idleTask.enqueueTask(
+    this.idleTask.enqueueTask(
       ({ node: node2, deep: deep2, target: target2 }) => {
         this.collectNode(node2, target2, depExtendedData, deep2);
       },
@@ -15227,4 +15220,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$1e as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$1n as CodeSelect, _sfc_main$1l as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$1k as CondOpSelect, _sfc_main$o as ContentMenu, _sfc_main$i as DataSourceConfigPanel, _sfc_main$1g as DataSourceFieldSelect, _sfc_main$1i as DataSourceFields, _sfc_main$1f as DataSourceInput, _sfc_main$1c as DataSourceMethodSelect, _sfc_main$1d as DataSourceMethods, _sfc_main$1b as DataSourceMocks, _sfc_main$1a as DataSourceSelect, _sfc_main$19 as DisplayConds, DragType, _sfc_main$18 as EventSelect, Fixed2Other, _sfc_main$1j as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$1r as Icon, IdleTask, KeyBindingCommand, _sfc_main$16 as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$15 as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$D as StyleSetter, _sfc_main$1q as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$1e as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$1n as CodeSelect, _sfc_main$1l as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$1k as CondOpSelect, _sfc_main$o as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, _sfc_main$i as DataSourceConfigPanel, _sfc_main$1g as DataSourceFieldSelect, _sfc_main$1i as DataSourceFields, _sfc_main$1f as DataSourceInput, _sfc_main$1c as DataSourceMethodSelect, _sfc_main$1d as DataSourceMethods, _sfc_main$1b as DataSourceMocks, _sfc_main$1a as DataSourceSelect, _sfc_main$19 as DisplayConds, DragType, _sfc_main$18 as EventSelect, Fixed2Other, _sfc_main$1j as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$1r as Icon, IdleTask, KeyBindingCommand, _sfc_main$16 as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, _sfc_main$15 as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$D as StyleSetter, _sfc_main$1q as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useServices, useStage, useWindowRect, warn };