@tmagic/editor 1.5.7 → 1.5.8

package/dist/tmagic-editor.umd.cjs

@@ -5298,6 +5298,14 @@
     }
   });
 
+  const useServices = () => {
+    const services = vue.inject("services");
+    if (!services) {
+      throw new Error("services is required");
+    }
+    return services;
+  };
+
   const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelect"
@@ -5317,7 +5325,7 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const emit = __emit;
-      const services = vue.inject("services");
+      const { dataSourceService, codeBlockService } = useServices();
       const props = __props;
       const codeConfig = vue.computed(() => ({
         type: "group-list",
@@ -5330,7 +5338,7 @@
               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;
@@ -5367,7 +5375,7 @@
                 span: 18,
                 labelWidth: 0,
                 display: (mForm, { model }) => model.codeType !== core.HookCodeType.DATA_SOURCE_METHOD,
-                notEditable: () => !services?.codeBlockService.getEditStatus()
+                notEditable: () => !codeBlockService.getEditStatus()
               },
               {
                 type: "data-source-method-select",
@@ -5375,7 +5383,7 @@
                 span: 18,
                 labelWidth: 0,
                 display: (mForm, { model }) => model.codeType === core.HookCodeType.DATA_SOURCE_METHOD,
-                notEditable: () => !services?.dataSourceService.get("editable")
+                notEditable: () => !dataSourceService.get("editable")
               }
             ]
           }
@@ -5652,8 +5660,6 @@
     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";
@@ -5687,7 +5693,6 @@
     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";
@@ -7772,6 +7777,10 @@
       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);
@@ -7815,6 +7824,10 @@
         this.taskHandle = 0;
         this.emit("finish");
       }
+      this.emit("update-task-length", {
+        length: taskList.length + hightLevelTaskList.length,
+        hightLevelLength: hightLevelTaskList.length
+      });
     }
   }
 
@@ -7955,6 +7968,18 @@
     });
   };
 
+  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__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
@@ -8035,13 +8060,13 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const mForm = vue.inject("mForm");
-      const services = vue.inject("services");
+      const { codeBlockService, uiService } = useServices();
       const eventBus = vue.inject("eventBus");
       const emit = __emit;
       const props = __props;
       const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.config.notEditable, props));
       const hasCodeBlockSidePanel = vue.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 [];
@@ -8053,7 +8078,7 @@
           ...paramState
         }));
       };
-      const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDsl());
+      const codeDsl = vue.computed(() => codeBlockService.getCodeDsl());
       const paramsConfig = vue.ref(getParamItemsConfig(props.model[props.name]));
       vue.watch(
         () => props.model[props.name],
@@ -8171,12 +8196,12 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const emit = __emit;
-      const { dataSourceService } = vue.inject("services") || {};
+      const { dataSourceService } = useServices();
       const props = __props;
       const optionComponent = designPlugin.getDesignConfig("components")?.option;
       const options = vue.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) => {
@@ -8289,8 +8314,8 @@
         }
         return "auto";
       });
-      const services = vue.inject("services");
-      const frameworkWidth = vue.computed(() => services?.uiService.get("frameworkRect").width || 0);
+      const { uiService } = useServices();
+      const frameworkWidth = vue.computed(() => uiService.get("frameworkRect").width || 0);
       const style = vue.computed(() => {
         let { left } = props.position;
         if (width.value) {
@@ -8453,10 +8478,6 @@
     const codeId = vue.ref();
     const codeBlockEditorRef = vue.useTemplateRef("codeBlockEditor");
     const createCodeBlock = async () => {
-      if (!codeBlockService) {
-        designPlugin.tMagicMessage.error("新增代码块失败");
-        return;
-      }
       codeConfig.value = {
         name: "",
         content: `({app, params, flowState}) => {
@@ -8469,7 +8490,7 @@
       codeBlockEditorRef.value?.show();
     };
     const editCode = async (id) => {
-      const codeBlock = await codeBlockService?.getCodeContentById(id);
+      const codeBlock = await codeBlockService.getCodeContentById(id);
       if (!codeBlock) {
         designPlugin.tMagicMessage.error("获取代码块内容失败");
         return;
@@ -8487,11 +8508,11 @@
       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 {
@@ -8505,11 +8526,6 @@
     };
   };
 
-  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 = vue.shallowReactive({
     uiSelectMode: false,
     showSrc: false,
@@ -8524,9 +8540,9 @@
       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,
@@ -8718,7 +8734,7 @@
   };
 
   const useFloatBox = (slideKeys) => {
-    const services = vue.inject("services");
+    const { uiService } = useServices();
     const floatBoxStates = vue.ref(
       slideKeys.value.reduce(
         (total, cur) => ({
@@ -8752,10 +8768,10 @@
       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
         };
       }
@@ -8818,9 +8834,9 @@
   };
 
   const useEditorContentHeight = () => {
-    const services = vue.inject("services");
-    const frameworkHeight = vue.computed(() => services?.uiService.get("frameworkRect").height || 0);
-    const navMenuHeight = vue.computed(() => services?.uiService.get("navMenuRect").height || 0);
+    const { uiService } = useServices();
+    const frameworkHeight = vue.computed(() => uiService.get("frameworkRect").height);
+    const navMenuHeight = vue.computed(() => uiService.get("navMenuRect").height);
     const editorContentHeight = vue.computed(() => frameworkHeight.value - navMenuHeight.value);
     const height = vue.ref(0);
     vue.watch(
@@ -8906,16 +8922,16 @@
       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 {
@@ -8987,7 +9003,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
+      const { uiService } = useServices();
       const fieldValues = vue.ref({});
       const fieldTitle = vue.ref("");
       const width = vue.useModel(__props, "width");
@@ -9222,7 +9238,7 @@
       const addFromJsonDialogVisible = vue.useModel(__props, "visible1");
       const { height: editorHeight } = useEditorContentHeight();
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
@@ -9326,10 +9342,10 @@
       const emit = __emit;
       const modelValue = vue.useModel(__props, "modelValue");
       const optionComponent = designPlugin.getDesignConfig("components")?.option;
-      const services = vue.inject("services");
+      const { dataSourceService, uiService } = useServices();
       const mForm = vue.inject("mForm");
       const eventBus = vue.inject("eventBus");
-      const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources") || []);
+      const dataSources = vue.computed(() => dataSourceService.get("dataSources") || []);
       const valueIsKey = vue.computed(() => props.value === "key");
       const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.notEditable, props));
       const dataSourcesOptions = vue.computed(
@@ -9382,7 +9398,7 @@
         emit("change", v);
       };
       const hasDataSourceSidePanel = vue.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));
@@ -9526,9 +9542,9 @@
           immediate: true
         }
       );
-      const services = vue.inject("services");
+      const { dataSourceService } = useServices();
       const mForm = vue.inject("mForm");
-      const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources") || []);
+      const dataSources = vue.computed(() => dataSourceService.get("dataSources") || []);
       const type = vue.computed(() => {
         let type2 = props.config.fieldConfig?.type;
         if (typeof type2 === "function") {
@@ -9666,13 +9682,13 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const { dataSourceService } = vue.inject("services") || {};
+      const { dataSourceService } = useServices();
       const autocompleteRef = vue.useTemplateRef("autocomplete");
       const isFocused = vue.ref(false);
       const state = vue.ref("");
       const displayState = vue.ref([]);
       const input = vue.computed(() => autocompleteRef.value?.inputRef?.input);
-      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
+      const dataSources = vue.computed(() => dataSourceService.get("dataSources"));
       const setDisplayState = () => {
         displayState.value = getDisplayField(dataSources.value, state.value);
       };
@@ -9965,7 +9981,7 @@
       const boxVisible = vue.useModel(__props, "visible");
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
+      const { codeBlockService, uiService } = useServices();
       const { height: codeBlockEditorHeight } = useEditorContentHeight();
       const difVisible = vue.ref(false);
       const { rect: windowRect } = useWindowRect();
@@ -10052,7 +10068,7 @@
               label: "描述",
               name: "extra"
             },
-            services?.codeBlockService.getParamsColConfig() || defaultParamColConfig
+            codeBlockService.getParamsColConfig() || defaultParamColConfig
           ]
         },
         {
@@ -10104,7 +10120,7 @@
         changedValue.value = undefined;
       };
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
       __expose({
         async show() {
           calcBoxPosition();
@@ -10427,20 +10443,19 @@
     },
     emits: ["change"],
     setup(__props, { emit: __emit }) {
+      const { dataSourceService, uiService } = useServices();
       const mForm = vue.inject("mForm");
-      const services = vue.inject("services");
       const eventBus = vue.inject("eventBus");
       const emit = __emit;
-      const dataSourceService = services?.dataSourceService;
       const props = __props;
       const hasDataSourceSidePanel = vue.computed(
-        () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+        () => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
       );
       const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.config.notEditable, props));
-      const dataSources = vue.computed(() => dataSourceService?.get("dataSources"));
+      const dataSources = vue.computed(() => dataSourceService.get("dataSources"));
       const isCustomMethod = vue.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] = ["", ""]) => {
@@ -10462,7 +10477,7 @@
         }
       };
       const methodsOptions = vue.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: [
@@ -10490,7 +10505,7 @@
       };
       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);
       };
@@ -10568,7 +10583,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
+      const { uiService } = useServices();
       const width = vue.useModel(__props, "width");
       const drawerTitle = vue.ref("");
       const formValues = vue.ref({});
@@ -10745,7 +10760,7 @@
       const addDialogVisible = vue.useModel(__props, "visible");
       const { height: editorHeight } = useEditorContentHeight();
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
@@ -10817,12 +10832,12 @@
       const emit = __emit;
       const props = __props;
       const mForm = vue.inject("mForm");
-      const { dataSourceService, uiService } = vue.inject("services") || {};
+      const { dataSourceService, uiService } = useServices();
       const eventBus = vue.inject("eventBus");
-      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
+      const dataSources = vue.computed(() => dataSourceService.get("dataSources"));
       const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.config.notEditable, props));
       const hasDataSourceSidePanel = vue.computed(
-        () => (uiService?.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
+        () => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE)
       );
       const selectConfig = vue.computed(() => {
         const { type, dataSourceType, value, ...config } = props.config;
@@ -10848,7 +10863,7 @@
         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);
       };
@@ -10911,7 +10926,7 @@
     setup(__props, { emit: __emit }) {
       const emit = __emit;
       const props = __props;
-      const { dataSourceService } = vue.inject("services") || {};
+      const { dataSourceService } = useServices();
       const mForm = vue.inject("mForm");
       const parentFields = vue.computed(() => formPlugin.filterFunction(mForm, props.config.parentFields, props) || []);
       const config = vue.computed(() => ({
@@ -10930,7 +10945,7 @@
                 type: "cascader",
                 options: () => {
                   const [dsId, ...keys] = parentFields.value;
-                  const ds = dataSourceService?.getDataSourceById(dsId);
+                  const ds = dataSourceService.getDataSourceById(dsId);
                   if (!ds) {
                     return [];
                   }
@@ -10968,7 +10983,7 @@
                     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) => {
@@ -11048,11 +11063,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.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 = vue.computed(() => {
         const defaultEventNameConfig = {
           name: "name",
@@ -11068,11 +11079,10 @@
           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 = [
                     {
@@ -11134,13 +11144,13 @@
             {
               text: "代码",
               label: "代码",
-              disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
+              disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
               value: core.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: core.ActionType.DATA_SOURCE
             }
           ]
@@ -11165,7 +11175,7 @@
           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";
             }
@@ -11174,17 +11184,17 @@
           checkStrictly: () => props.config.src !== "component",
           display: (mForm, { model }) => model.actionType === core.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) => {
                   utils.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}`,
@@ -11210,7 +11220,7 @@
           type: "code-select-col",
           text: "代码块",
           name: "codeId",
-          notEditable: () => !codeBlockService?.getEditStatus(),
+          notEditable: () => !codeBlockService.getEditStatus(),
           display: (mForm, { model }) => model.actionType === core.ActionType.CODE
         };
         return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
@@ -11220,7 +11230,7 @@
           type: "data-source-method-select",
           text: "数据源方法",
           name: "dataSourceMethod",
-          notEditable: () => !services?.dataSourceService.get("editable"),
+          notEditable: () => !dataSourceService.get("editable"),
           display: (mForm, { model }) => model.actionType === core.ActionType.DATA_SOURCE
         };
         return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
@@ -11233,7 +11243,7 @@
             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
             }))
@@ -11248,9 +11258,9 @@
             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
               }));
@@ -11564,11 +11574,11 @@
     },
     emits: ["change"],
     setup(__props, { emit: __emit }) {
-      const services = vue.inject("services");
+      const { editorService } = useServices();
       const emit = __emit;
       const props = __props;
       const pageList = vue.computed(
-        () => services?.editorService.get("root")?.items.filter((item) => item.type === core.NodeType.PAGE_FRAGMENT)
+        () => editorService.get("root")?.items.filter((item) => item.type === core.NodeType.PAGE_FRAGMENT)
       );
       const selectConfig = {
         type: "select",
@@ -11588,7 +11598,7 @@
         emit("change", props.model[props.name]);
       };
       const editPageFragment = (id) => {
-        services?.editorService.select(id);
+        editorService.select(id);
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
@@ -12561,7 +12571,7 @@
   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__ */ vue.defineComponent({
     __name: "Border",
     props: {
@@ -12674,7 +12684,7 @@
               )
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_6, [
+          vue.createElementVNode("div", _hoisted_6$1, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               config: config.value,
               model: _ctx.model,
@@ -12853,13 +12863,12 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
+      const { editorService, uiService, stageOverlayService } = useServices();
       const mForm = vue.inject("mForm");
       const val = vue.computed(() => props.model[props.name]);
       const uiSelectMode = vue.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);
       };
@@ -12878,12 +12887,11 @@
         }
       };
       const toName = vue.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);
       };
@@ -12895,22 +12903,19 @@
         }
       };
       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 ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -13260,7 +13265,7 @@
     },
     setup(__props) {
       const props = __props;
-      const services = vue.inject("services");
+      const services = useServices();
       const disabled = vue.computed(() => {
         if (typeof props.data === "string") return false;
         if (props.data.type === "component") return false;
@@ -13279,7 +13284,7 @@
       });
       const buttonHandler = (item, event) => {
         if (disabled.value) return;
-        if (typeof item.handler === "function" && services) {
+        if (typeof item.handler === "function") {
           item.handler?.(services, event);
         }
       };
@@ -13471,12 +13476,9 @@
     },
     __name: "AddButton",
     setup(__props) {
-      const services = vue.inject("services");
-      const uiService = services?.uiService;
-      const editorService = services?.editorService;
-      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
+      const { editorService, uiService } = useServices();
+      const showAddPageButton = vue.computed(() => uiService.get("showAddPageButton"));
       const addPage = (type) => {
-        if (!editorService) return;
         const root = vue.toRaw(editorService.get("root"));
         if (!root) throw new Error("root 不能为空");
         const pageConfig = {
@@ -13540,13 +13542,11 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const uiService = services?.uiService;
+      const { editorService, uiService } = useServices();
       const itemsContainerEl = vue.useTemplateRef("itemsContainer");
       const canScroll = vue.ref(false);
-      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
-      const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
+      const showAddPageButton = vue.computed(() => uiService.get("showAddPageButton"));
+      const showPageListButton = vue.computed(() => uiService.get("showPageListButton"));
       const itemsContainerWidth = vue.ref(0);
       const pageBarEl = vue.useTemplateRef("pageBar");
       const setCanScroll = () => {
@@ -13618,7 +13618,7 @@
                     beforeDragList = sortable.toArray();
                   },
                   onUpdate: async (event) => {
-                    await editorService?.sort(
+                    await editorService.sort(
                       beforeDragList[event.oldIndex],
                       beforeDragList[event.newIndex]
                     );
@@ -13699,13 +13699,11 @@
       list: {}
     },
     setup(__props) {
-      const services = vue.inject("services");
-      const uiService = services?.uiService;
-      const editorService = services?.editorService;
-      const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
-      const page = vue.computed(() => editorService?.get("page"));
+      const { editorService, uiService } = useServices();
+      const showPageListButton = vue.computed(() => uiService.get("showPageListButton"));
+      const page = vue.computed(() => editorService.get("page"));
       const switchPage = async (id) => {
-        await editorService?.select(id);
+        await editorService.select(id);
       };
       return (_ctx, _cache) => {
         return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
@@ -13836,10 +13834,9 @@
     },
     setup(__props) {
       const props = __props;
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const root = vue.computed(() => editorService?.get("root"));
-      const page = vue.computed(() => editorService?.get("page"));
+      const { editorService } = useServices();
+      const root = vue.computed(() => editorService.get("root"));
+      const page = vue.computed(() => editorService.get("page"));
       const query = vue.ref({
         pageType: [core.NodeType.PAGE, core.NodeType.PAGE_FRAGMENT],
         keyword: ""
@@ -13860,17 +13857,17 @@
         });
       });
       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 = vue.useTemplateRef("pageBarScrollContainer");
       const pageBarItemEls = vue.useTemplateRef("pageBarItems");
@@ -14014,10 +14011,8 @@
       disabledPageFragment: { type: Boolean }
     },
     setup(__props) {
-      const services = vue.inject("services");
+      const { editorService } = useServices();
       const clickHandler = (type) => {
-        const { editorService } = services || {};
-        if (!editorService) return;
         const root = vue.toRaw(editorService.get("root"));
         if (!root) throw new Error("root 不能为空");
         editorService.add({
@@ -14083,41 +14078,35 @@
     },
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
-      const { editorService, uiService } = vue.inject("services") || {};
+      const { editorService, uiService, storageService } = useServices();
       const contentEl = vue.useTemplateRef("content");
       const splitViewRef = vue.useTemplateRef("splitView");
-      const root = vue.computed(() => editorService?.get("root"));
-      const page = vue.computed(() => editorService?.get("page"));
-      const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
-      const showSrc = vue.computed(() => uiService?.get("showSrc"));
-      const columnWidth = vue.computed(
-        () => uiService?.get("columnWidth") || {
-          left: 0,
-          center: 0,
-          right: 0
-        }
-      );
+      const root = vue.computed(() => editorService.get("root"));
+      const page = vue.computed(() => editorService.get("page"));
+      const pageLength = vue.computed(() => editorService.get("pageLength") || 0);
+      const showSrc = vue.computed(() => uiService.get("showSrc"));
+      const columnWidth = vue.computed(() => uiService.get("columnWidth"));
       vue.watch(pageLength, () => {
         splitViewRef.value?.updateWidth();
       });
       vue.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 = vue.computed(() => uiService?.get("frameworkRect"));
+      const frameworkRect = vue.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,
@@ -14135,7 +14124,7 @@
       const saveCode = (value) => {
         try {
           const parseDSL = getEditorConfig("parseDSL");
-          editorService?.set("root", parseDSL(value));
+          editorService.set("root", parseDSL(value));
         } catch (e) {
           console.error(e);
         }
@@ -14164,10 +14153,10 @@
               "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": vue.unref(MIN_LEFT_COLUMN_WIDTH),
+              "min-right": vue.unref(MIN_RIGHT_COLUMN_WIDTH),
+              "min-center": vue.unref(MIN_CENTER_COLUMN_WIDTH),
+              width: frameworkRect.value.width,
               onChange: columnWidthChange
             }, vue.createSlots({
               left: vue.withCtx(() => [
@@ -14210,7 +14199,7 @@
                 ]),
                 key: "0"
               } : undefined
-            ]), 1032, ["left", "right", "width"])),
+            ]), 1032, ["left", "right", "min-left", "min-right", "min-center", "width"])),
             vue.renderSlot(_ctx.$slots, "content-after"),
             vue.renderSlot(_ctx.$slots, "footer")
           ],
@@ -14232,13 +14221,12 @@
     },
     setup(__props) {
       const props = __props;
-      const services = vue.inject("services");
-      const uiService = services?.uiService;
-      const columnWidth = vue.computed(() => services?.uiService.get("columnWidth"));
+      const { uiService, editorService, historyService } = useServices();
+      const columnWidth = vue.computed(() => uiService.get("columnWidth"));
       const keys = Object.values(ColumnLayout);
-      const showGuides = vue.computed(() => uiService?.get("showGuides") ?? true);
-      const showRule = vue.computed(() => uiService?.get("showRule") ?? true);
-      const zoom = vue.computed(() => uiService?.get("zoom") ?? 1);
+      const showGuides = vue.computed(() => uiService.get("showGuides"));
+      const showRule = vue.computed(() => uiService.get("showRule"));
+      const zoom = vue.computed(() => uiService.get("zoom"));
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "Command" : "Ctrl";
       const getConfig = (item) => {
@@ -14268,10 +14256,10 @@
               className: "delete",
               icon: vue.markRaw(iconsVue.Delete),
               tooltip: `刪除(Delete)`,
-              disabled: () => services?.editorService.get("node")?.type === core.NodeType.PAGE,
+              disabled: () => editorService.get("node")?.type === core.NodeType.PAGE,
               handler: () => {
-                const node = services?.editorService.get("node");
-                node && services?.editorService.remove(node);
+                const node = editorService.get("node");
+                node && editorService.remove(node);
               }
             });
             break;
@@ -14281,8 +14269,8 @@
               className: "undo",
               icon: vue.markRaw(iconsVue.Back),
               tooltip: `后退(${ctrl}+z)`,
-              disabled: () => !services?.historyService.state.canUndo,
-              handler: () => services?.editorService.undo()
+              disabled: () => !historyService.state.canUndo,
+              handler: () => editorService.undo()
             });
             break;
           case "redo":
@@ -14291,8 +14279,8 @@
               className: "redo",
               icon: vue.markRaw(iconsVue.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":
@@ -14375,7 +14363,7 @@
       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,
@@ -14457,12 +14445,13 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
+      const services = useServices();
+      const { editorService, uiService } = services;
       const codeOptions = vue.inject("codeOptions", {});
       const showSrc = vue.ref(false);
-      const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
+      const propsPanelSize = vue.computed(() => uiService.get("propsPanelSize") || "small");
       const { height: editorContentHeight } = useEditorContentHeight();
-      const stage = vue.computed(() => services?.editorService.get("stage"));
+      const stage = vue.computed(() => editorService.get("stage"));
       const configFormRef = vue.useTemplateRef("configForm");
       vue.watchEffect(() => {
         if (configFormRef.value) {
@@ -14539,33 +14528,41 @@
     }
   });
 
-  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 = vue.computed(
-      () => showStylePanelToggleButton.value && (services?.uiService.get("showStylePanel") ?? true)
-    );
-    const showStylePanelToggleButton = vue.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 = vue.computed(() => showStylePanelToggleButton.value && (uiService.get("showStylePanel") ?? true));
+    const showStylePanelToggleButton = vue.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
     };
   };
 
@@ -14586,11 +14583,11 @@
     emits: ["submit-error", "form-error", "mounted"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
-      const services = vue.inject("services");
+      const { editorService, uiService, propsService, storageService } = useServices();
       const values = vue.ref({});
       const curFormConfig = vue.ref([]);
-      const node = vue.computed(() => services?.editorService.get("node"));
-      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
+      const node = vue.computed(() => editorService.get("node"));
+      const nodes = vue.computed(() => editorService.get("nodes"));
       const styleFormConfig = [
         {
           tabPosition: "right",
@@ -14603,13 +14600,13 @@
           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;
       };
       vue.watchEffect(init);
-      services?.propsService.on("props-configs-change", init);
+      propsService.on("props-configs-change", init);
       vue.onBeforeUnmount(() => {
-        services?.propsService.off("props-configs-change", init);
+        propsService.off("props-configs-change", init);
       });
       const submit = async (v, eventData) => {
         try {
@@ -14632,7 +14629,7 @@
               }
             });
           }
-          services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+          editorService.update(newValue, { changeRecords: eventData?.changeRecords });
         } catch (e) {
           emit("submit-error", e);
         }
@@ -14646,45 +14643,36 @@
         }
       };
       const propsPanelEl = vue.useTemplateRef("propsPanel");
+      const propsPanelWidth = vue.ref(
+        storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300
+      );
+      vue.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);
-      vue.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);
+      vue.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 = vue.useTemplateRef("propertyFormPanel");
       __expose({
         getFormState() {
@@ -14729,7 +14717,7 @@
             }, {
               "props-form-panel-header": vue.withCtx(() => [
                 vue.createElementVNode("div", _hoisted_2$4, [
-                  _cache[0] || (_cache[0] = vue.createElementVNode(
+                  _cache[2] || (_cache[2] = vue.createElementVNode(
                     "span",
                     null,
                     "样式",
@@ -14740,14 +14728,14 @@
                     vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                       link: "",
                       size: "small",
-                      onClick: vue.unref(closeStylePanelHandler)
+                      onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(toggleStylePanel)(false))
                     }, {
                       default: vue.withCtx(() => [
                         vue.createVNode(_sfc_main$1r, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
                       ]),
                       _: 1
                       /* STABLE */
-                    }, 8, ["onClick"])
+                    })
                   ])
                 ])
               ]),
@@ -14758,14 +14746,14 @@
               key: 2,
               class: "m-editor-props-panel-style-icon",
               circle: "",
-              onClick: vue.unref(showStylePanelHandler)
+              onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(toggleStylePanel)(true))
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_sfc_main$1r, { icon: vue.unref(iconsVue.Sugar) }, null, 8, ["icon"])
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+            })) : vue.createCommentVNode("v-if", true)
           ],
           512
           /* NEED_PATCH */
@@ -15047,7 +15035,7 @@
       const handleDragEnd = (event) => {
         treeEmit?.("node-dragend", event, props.data);
       };
-      const nodeContentmenuHandler = (event) => {
+      const nodeContextmenuHandler = (event) => {
         treeEmit?.("node-contextmenu", event, props.data);
       };
       const mouseenterHandler = (event) => {
@@ -15079,7 +15067,7 @@
             {
               class: vue.normalizeClass(["tree-node", { selected: selected.value, expanded: expanded.value }]),
               style: vue.normalizeStyle(`padding-left: ${_ctx.indent}px`),
-              onContextmenu: nodeContentmenuHandler,
+              onContextmenu: nodeContextmenuHandler,
               onMouseenter: mouseenterHandler
             },
             [
@@ -15237,13 +15225,11 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
-      const { codeBlockService, depService, editorService } = services || {};
-      const collecting = vue.computed(() => depService?.get("collecting"));
+      const { codeBlockService, depService, editorService } = useServices();
       const codeList = vue.computed(
-        () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
-          const target = depService?.getTarget(codeId, core.DepTargetType.CODE_BLOCK);
-          const pageList = editorService?.get("root")?.items.map((page) => ({
+        () => Object.entries(codeBlockService.getCodeDsl() || {}).map(([codeId, code]) => {
+          const target = depService.getTarget(codeId, core.DepTargetType.CODE_BLOCK);
+          const pageList = editorService.get("root")?.items.map((page) => ({
             name: page.devconfig?.tabName || page.name,
             type: "node",
             id: `${codeId}_${page.id}`,
@@ -15270,7 +15256,7 @@
             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 || []
           };
@@ -15285,10 +15271,10 @@
       };
       const { nodeStatusMap } = useNodeStatus$1(codeList);
       const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
-      const editable = vue.computed(() => codeBlockService?.getEditStatus());
+      const editable = vue.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) => {
@@ -15302,7 +15288,7 @@
       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 designPlugin.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
             confirmButtonText: "确定",
@@ -15354,20 +15340,8 @@
             )
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            collecting.value && data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
-              key: 0,
-              type: "info",
-              size: "small",
-              style: { "margin-right": "5px" }
-            }, {
-              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
-                vue.createTextVNode("依赖收集中")
-              ])),
-              _: 1
-              /* STABLE */
-            })) : vue.createCommentVNode("v-if", true),
             data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
-              key: 1,
+              key: 0,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
               placement: "bottom"
@@ -15385,7 +15359,7 @@
             data.type === "code" && editable.value ? (vue.openBlock(), vue.createBlock(
               vue.unref(designPlugin.TMagicTooltip),
               {
-                key: 2,
+                key: 1,
                 effect: "dark",
                 content: "删除",
                 placement: "bottom"
@@ -15425,7 +15399,7 @@
         type: "button",
         text: "编辑",
         icon: iconsVue.Edit,
-        display: (services) => services?.codeBlockService?.getEditStatus() ?? true,
+        display: ({ codeBlockService }) => codeBlockService.getEditStatus(),
         handler: () => {
           if (!selectId) {
             return;
@@ -15497,8 +15471,8 @@
     setup(__props) {
       const props = __props;
       const eventBus = vue.inject("eventBus");
-      const { codeBlockService } = vue.inject("services") || {};
-      const editable = vue.computed(() => codeBlockService?.getEditStatus());
+      const { codeBlockService } = useServices();
+      const editable = vue.computed(() => codeBlockService.getEditStatus());
       const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
       const codeBlockListRef = vue.useTemplateRef("codeBlockList");
       const filterTextChangeHandler = (val) => {
@@ -15593,20 +15567,20 @@
     const dialogTitle = vue.ref("");
     const editDialog = vue.ref();
     const dataSourceValues = vue.ref({});
-    const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
+    const editable = vue.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();
     };
@@ -15641,15 +15615,15 @@
       const boxVisible = vue.useModel(__props, "visible");
       const width = vue.useModel(__props, "width");
       const emit = __emit;
-      const services = vue.inject("services");
+      const { uiService, dataSourceService } = useServices();
       const initValues = vue.ref({});
       const dataSourceConfig = vue.ref([]);
       const { height: editorHeight } = useEditorContentHeight();
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
-      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+      const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
       vue.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);
@@ -15708,13 +15682,12 @@
     emits: ["edit", "remove", "node-contextmenu"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
-      const { depService, editorService, dataSourceService } = vue.inject("services") || {};
-      const collecting = vue.computed(() => depService?.get("collecting"));
-      const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
-      const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
-      const dsDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE) || {});
-      const dsMethodDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE_METHOD) || {});
-      const dsCondDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE_COND) || {});
+      const { depService, editorService, dataSourceService } = useServices();
+      const editable = vue.computed(() => dataSourceService.get("editable"));
+      const dataSources = vue.computed(() => dataSourceService.get("dataSources"));
+      const dsDep = vue.computed(() => depService.getTargets(core.DepTargetType.DATA_SOURCE));
+      const dsMethodDep = vue.computed(() => depService.getTargets(core.DepTargetType.DATA_SOURCE_METHOD));
+      const dsCondDep = vue.computed(() => depService.getTargets(core.DepTargetType.DATA_SOURCE_COND));
       const getKeyTreeConfig = (dep, type, parentKey) => dep.keys.map((key) => ({
         name: key,
         id: `${parentKey}_${key}`,
@@ -15745,7 +15718,7 @@
           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}`,
@@ -15780,8 +15753,8 @@
         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) => {
@@ -15820,20 +15793,8 @@
             )
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            collecting.value && data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
-              key: 0,
-              type: "info",
-              size: "small",
-              style: { "margin-right": "5px" }
-            }, {
-              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
-                vue.createTextVNode("依赖收集中")
-              ])),
-              _: 1
-              /* STABLE */
-            })) : vue.createCommentVNode("v-if", true),
             data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
-              key: 1,
+              key: 0,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
               placement: "bottom"
@@ -15851,7 +15812,7 @@
             data.type === "ds" && editable.value ? (vue.openBlock(), vue.createBlock(
               vue.unref(designPlugin.TMagicTooltip),
               {
-                key: 2,
+                key: 1,
                 effect: "dark",
                 content: "删除",
                 placement: "bottom"
@@ -15888,7 +15849,7 @@
         type: "button",
         text: "编辑",
         icon: iconsVue.Edit,
-        display: (services) => services?.dataSourceService?.get("editable") ?? true,
+        display: ({ dataSourceService }) => dataSourceService.get("editable"),
         handler: () => {
           if (!selectId) {
             return;
@@ -15958,20 +15919,20 @@
     setup(__props) {
       const props = __props;
       const eventBus = vue.inject("eventBus");
-      const { dataSourceService } = vue.inject("services") || {};
+      const { dataSourceService } = useServices();
       const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
       const datasourceTypeList = vue.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;
@@ -15987,7 +15948,7 @@
           cancelButtonText: "取消",
           type: "warning"
         });
-        dataSourceService?.remove(id);
+        dataSourceService.remove(id);
       };
       const dataSourceList = vue.ref();
       const filterTextChangeHandler = (val) => {
@@ -16140,67 +16101,66 @@
     type: "button",
     text: "删除",
     icon: iconsVue.Delete,
-    display: (services) => {
-      const node = services?.editorService?.get("node");
+    display: ({ editorService }) => {
+      const node = editorService.get("node");
       return node?.type !== core.NodeType.ROOT && !utils.isPage(node) && !utils.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: vue.markRaw(iconsVue.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: vue.markRaw(iconsVue.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 = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-        const initialTop = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
-        services?.editorService?.paste({ left: initialLeft, top: initialTop });
+        const initialLeft = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / uiService.get("zoom");
+        const initialTop = utils.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 = vue.computed(() => services?.editorService?.get("root"));
+  const useMoveToMenu = ({ editorService }) => {
+    const root = vue.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 !utils.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);
         }
       }))
     };
@@ -16219,17 +16179,18 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
+      const services = useServices();
+      const { editorService, componentListService } = services;
       const menuRef = vue.useTemplateRef("menu");
-      const node = vue.computed(() => services?.editorService.get("node"));
-      const nodes = vue.computed(() => services?.editorService.get("nodes"));
-      const componentList = vue.computed(() => services?.componentListService.getList() || []);
+      const node = vue.computed(() => editorService.get("node"));
+      const nodes = vue.computed(() => editorService.get("nodes"));
+      const componentList = vue.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 || {}
@@ -16244,7 +16205,7 @@
               type: "button",
               icon: iconsVue.Files,
               handler: () => {
-                services?.editorService.add({
+                editorService.add({
                   type: "tab-pane"
                 });
               }
@@ -16318,10 +16279,8 @@
     },
     setup(__props) {
       const props = __props;
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
+      const { editorService } = useServices();
       const setNodeVisible = (visible) => {
-        if (!editorService) return;
         editorService.update({
           id: props.data.id,
           visible
@@ -16352,8 +16311,8 @@
     }
   });
 
-  const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
-    const isMultiSelect = vue.computed(() => isCtrlKeyDown.value && !services?.editorService.get("disabledMultiSelect"));
+  const useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown, nodeStatusMap, menuRef) => {
+    const isMultiSelect = vue.computed(() => isCtrlKeyDown.value && !editorService.get("disabledMultiSelect"));
     const select = async (data) => {
       if (!data.id) {
         throw new Error("没有id");
@@ -16361,16 +16320,16 @@
       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 (utils.isPage(data) || utils.isPageFragment(data)) {
         return;
       }
-      const nodes = services?.editorService.get("nodes") || [];
+      const nodes = editorService.get("nodes") || [];
       const newNodes = [];
       let isCancel = false;
       nodes.forEach((node) => {
@@ -16386,9 +16345,9 @@
       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(
@@ -16398,13 +16357,13 @@
       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;
       }
@@ -16422,7 +16381,7 @@
       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);
         }
@@ -16453,7 +16412,7 @@
       });
     });
   };
-  const useDrag = (services) => {
+  const useDrag = ({ editorService }) => {
     const handleDragStart = (event) => {
       if (!event.dataTransfer || !event.target || !event.currentTarget) return;
       const targetEl = getNodeEl(event.target);
@@ -16527,11 +16486,11 @@
       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;
@@ -16545,11 +16504,11 @@
         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 = "";
@@ -16688,19 +16647,18 @@
     }
   ];
 
-  const useKeybinding = (services, container) => {
-    const keybindingService = services?.keybindingService;
+  const useKeybinding = ({ keybindingService }, container) => {
     const isCtrlKeyDown = vue.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",
@@ -16715,10 +16673,10 @@
     vue.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 {
@@ -16749,9 +16707,9 @@
     );
     return map;
   };
-  const useNodeStatus = (services) => {
-    const page = vue.computed(() => services?.editorService.get("page"));
-    const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
+  const useNodeStatus = ({ editorService }) => {
+    const page = vue.computed(() => editorService.get("page"));
+    const nodes = vue.computed(() => editorService.get("nodes"));
     const nodeStatusMaps = vue.ref(/* @__PURE__ */ new Map());
     const nodeStatusMap = vue.computed(
       () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
@@ -16787,7 +16745,7 @@
         immediate: true
       }
     );
-    services?.editorService.on("add", (newNodes) => {
+    const addHandler = (newNodes) => {
       newNodes.forEach((node) => {
         if (utils.isPage(node) || utils.isPageFragment(node)) return;
         utils.traverseNode(node, (node2) => {
@@ -16799,13 +16757,19 @@
           });
         });
       });
-    });
-    services?.editorService.on("remove", (nodes2) => {
+    };
+    editorService.on("add", addHandler);
+    const removeHandler = (nodes2) => {
       nodes2.forEach((node) => {
         utils.traverseNode(node, (node2) => {
           nodeStatusMap.value?.delete(node2.id);
         });
       });
+    };
+    editorService.on("remove", removeHandler);
+    vue.onBeforeUnmount(() => {
+      editorService.off("remove", removeHandler);
+      editorService.off("add", addHandler);
     });
     return {
       nodeStatusMaps,
@@ -16825,10 +16789,10 @@
       customContentMenu: { type: Function }
     },
     setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
+      const services = useServices();
+      const { editorService } = services;
       const treeRef = vue.useTemplateRef("tree");
-      const page = vue.computed(() => editorService?.get("page"));
+      const page = vue.computed(() => editorService.get("page"));
       const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
       const { nodeStatusMap } = useNodeStatus(services);
       const { isCtrlKeyDown } = useKeybinding(services, treeRef);
@@ -16922,11 +16886,11 @@
       const filterTextChangeHandler = (v) => {
         searchText.value = v;
       };
-      const services = vue.inject("services");
+      const { editorService, componentListService } = useServices();
       const stageOptions = vue.inject("stageOptions");
-      const stage = vue.computed(() => services?.editorService.get("stage"));
+      const stage = vue.computed(() => editorService.get("stage"));
       const list = vue.computed(
-        () => (services?.componentListService.getList() || []).map((group) => ({
+        () => componentListService.getList().map((group) => ({
           ...group,
           items: group.items.filter((item) => item.text.includes(searchText.value))
         }))
@@ -16938,7 +16902,7 @@
       let clientX;
       let clientY;
       const appendComponent = ({ text, type, data = {} }) => {
-        services?.editorService.add({
+        editorService.add({
           name: text,
           type,
           ...data
@@ -17085,7 +17049,11 @@
     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__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
@@ -17104,9 +17072,11 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const services = vue.inject("services");
-      const collecting = vue.computed(() => services?.depService.get("collecting"));
-      const columnLeftWidth = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
+      const { depService, uiService } = useServices();
+      const collecting = vue.computed(() => depService.get("collecting"));
+      const taskLength = vue.computed(() => depService.get("taskLength"));
+      const tipsBarVisible = vue.ref(true);
+      const columnLeftWidth = vue.computed(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
       const { height: editorContentHeight } = useEditorContentHeight();
       const columnLeftHeight = vue.ref(0);
       const unWatchEditorContentHeight = vue.watch(
@@ -17181,7 +17151,7 @@
       vue.watch(
         sideBarItems,
         (items) => {
-          services?.uiService.set("sideBarItems", items);
+          uiService.set("sideBarItems", items);
         },
         {
           immediate: true
@@ -17205,10 +17175,10 @@
           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;
         }
       );
@@ -17415,7 +17385,21 @@
                 }),
                 128
                 /* KEYED_FRAGMENT */
-              ))
+              )),
+              tipsBarVisible.value && collecting.value && taskLength.value > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                vue.createElementVNode(
+                  "span",
+                  null,
+                  "依赖收集中(剩余任务：" + vue.toDisplayString(taskLength.value) + ")",
+                  1
+                  /* TEXT */
+                ),
+                vue.createVNode(_sfc_main$1r, {
+                  icon: vue.unref(iconsVue.Close),
+                  class: "close-icon",
+                  onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => tipsBarVisible.value = false, ["stop"]))
+                }, null, 8, ["icon"])
+              ])) : vue.createCommentVNode("v-if", true)
             ])) : vue.createCommentVNode("v-if", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               (vue.openBlock(true), vue.createElementBlock(
@@ -17431,7 +17415,7 @@
                         visible: vue.unref(floatBoxStates)[config.$key].status,
                         "onUpdate:visible": ($event) => vue.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: {
@@ -17440,7 +17424,7 @@
                         }
                       }, {
                         body: vue.withCtx(() => [
-                          vue.createElementVNode("div", _hoisted_5, [
+                          vue.createElementVNode("div", _hoisted_6, [
                             config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(
                               vue.resolveDynamicComponent(config.component),
                               vue.mergeProps({
@@ -17688,15 +17672,15 @@
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
     setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
+      const services = useServices();
+      const { editorService } = services;
       const visible = vue.ref(false);
       const buttonVisible = vue.ref(false);
       const buttonEl = vue.useTemplateRef("button");
       const boxRef = vue.useTemplateRef("box");
-      const stage = vue.computed(() => editorService?.get("stage"));
-      const page = vue.computed(() => editorService?.get("page"));
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
+      const stage = vue.computed(() => editorService.get("stage"));
+      const page = vue.computed(() => editorService.get("page"));
+      const nodes = vue.computed(() => editorService.get("nodes"));
       const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
       const { nodeStatusMap } = useNodeStatus(services);
       const filterNodeMethod = (value, data) => data.id === value;
@@ -17730,7 +17714,7 @@
         }
       );
       const clickHandler = async (event, data) => {
-        await editorService?.select(data.id);
+        await editorService.select(data.id);
         stage.value?.select(data.id);
       };
       const menuPosition = vue.ref({
@@ -17804,13 +17788,13 @@
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "StageOverlay",
     setup(__props) {
-      const services = vue.inject("services");
+      const { stageOverlayService, editorService } = useServices();
       const stageOptions = vue.inject("stageOptions");
       const stageOverlayEl = vue.useTemplateRef("stageOverlay");
-      const stageOverlayVisible = vue.computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
-      const wrapWidth = vue.computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
-      const wrapHeight = vue.computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
-      const stage = vue.computed(() => services?.editorService.get("stage"));
+      const stageOverlayVisible = vue.computed(() => stageOverlayService.get("stageOverlayVisible"));
+      const wrapWidth = vue.computed(() => stageOverlayService.get("wrapWidth"));
+      const wrapHeight = vue.computed(() => stageOverlayService.get("wrapHeight"));
+      const stage = vue.computed(() => editorService.get("stage"));
       const style = vue.computed(() => ({
         width: `${wrapWidth.value}px`,
         height: `${wrapHeight.value}px`
@@ -17819,31 +17803,30 @@
         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();
         }
       });
       vue.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({});
         }
       });
       vue.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 ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -17949,13 +17932,13 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
+      const services = useServices();
+      const { editorService } = services;
       const menuRef = vue.useTemplateRef("menu");
       const canCenter = vue.ref(false);
-      const node = vue.computed(() => editorService?.get("node"));
-      const nodes = vue.computed(() => editorService?.get("nodes"));
-      const parent = vue.computed(() => editorService?.get("parent"));
+      const node = vue.computed(() => editorService.get("node"));
+      const nodes = vue.computed(() => editorService.get("nodes"));
+      const parent = vue.computed(() => editorService.get("parent"));
       const menuData = vue.computed(
         () => props.customContentMenu(
           [
@@ -17966,7 +17949,7 @@
               display: () => canCenter.value,
               handler: () => {
                 if (!nodes.value) return;
-                editorService?.alignCenter(nodes.value);
+                editorService.alignCenter(nodes.value);
               }
             },
             useCopyMenu(),
@@ -17985,7 +17968,7 @@
               icon: vue.markRaw(iconsVue.Top),
               display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
               handler: () => {
-                editorService?.moveLayer(1);
+                editorService.moveLayer(1);
               }
             },
             {
@@ -17994,7 +17977,7 @@
               icon: vue.markRaw(iconsVue.Bottom),
               display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
               handler: () => {
-                editorService?.moveLayer(-1);
+                editorService.moveLayer(-1);
               }
             },
             {
@@ -18003,7 +17986,7 @@
               icon: vue.markRaw(iconsVue.Top),
               display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
               handler: () => {
-                editorService?.moveLayer(LayerOffset.TOP);
+                editorService.moveLayer(LayerOffset.TOP);
               }
             },
             {
@@ -18012,7 +17995,7 @@
               icon: vue.markRaw(iconsVue.Bottom),
               display: () => !utils.isPage(node.value) && !utils.isPageFragment(node.value) && !props.isMultiSelect,
               handler: () => {
-                editorService?.moveLayer(LayerOffset.BOTTOM);
+                editorService.moveLayer(LayerOffset.BOTTOM);
               }
             },
             useMoveToMenu(services),
@@ -18030,7 +18013,7 @@
               type: "button",
               text: "清空参考线",
               handler: () => {
-                editorService?.get("stage")?.clearGuides();
+                editorService.get("stage")?.clearGuides();
               }
             },
             ...props.stageContentMenu
@@ -18041,7 +18024,7 @@
       vue.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(
@@ -18079,19 +18062,19 @@
       const props = __props;
       let stage = null;
       let runtime = null;
-      const services = vue.inject("services");
-      const stageLoading = vue.computed(() => services?.editorService.get("stageLoading") || false);
+      const { editorService, uiService, keybindingService } = useServices();
+      const stageLoading = vue.computed(() => editorService.get("stageLoading"));
       const stageWrapRef = vue.useTemplateRef("stageWrap");
       const stageContainerEl = vue.useTemplateRef("stageContainer");
       const menuRef = vue.useTemplateRef("menu");
-      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
+      const nodes = vue.computed(() => editorService.get("nodes"));
       const isMultiSelect = vue.computed(() => nodes.value.length > 1);
-      const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
-      const stageContainerRect = vue.computed(() => services?.uiService.get("stageContainerRect"));
-      const root = vue.computed(() => services?.editorService.get("root"));
-      const page = vue.computed(() => services?.editorService.get("page"));
-      const zoom = vue.computed(() => services?.uiService.get("zoom") || 1);
-      const node = vue.computed(() => services?.editorService.get("node"));
+      const stageRect = vue.computed(() => uiService.get("stageRect"));
+      const stageContainerRect = vue.computed(() => uiService.get("stageContainerRect"));
+      const root = vue.computed(() => editorService.get("root"));
+      const page = vue.computed(() => editorService.get("page"));
+      const zoom = vue.computed(() => uiService.get("zoom"));
+      const node = vue.computed(() => editorService.get("node"));
       vue.watchEffect(() => {
         if (stage || !page.value) return;
         if (!stageContainerEl.value) return;
@@ -18100,7 +18083,7 @@
         stage.on("select", () => {
           stageWrapRef.value?.container?.focus();
         });
-        services?.editorService.set("stage", vue.markRaw(stage));
+        editorService.set("stage", vue.markRaw(stage));
         stage.mount(stageContainerEl.value);
         if (!node.value?.id) {
           return;
@@ -18116,7 +18099,7 @@
       });
       vue.onBeforeUnmount(() => {
         stage?.destroy();
-        services?.editorService.set("stage", null);
+        editorService.set("stage", null);
       });
       vue.watch(zoom, (zoom2) => {
         if (!stage || !zoom2) return;
@@ -18125,12 +18108,12 @@
       let timeoutId = null;
       vue.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);
@@ -18144,10 +18127,10 @@
           runtime.updateRootConfig?.(cloneDeep(vue.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
           });
@@ -18156,15 +18139,15 @@
       vue.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);
         }
       });
       vue.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) => {
@@ -18190,10 +18173,10 @@
         let parent = page.value;
         const parentId = utils.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;
@@ -18221,7 +18204,7 @@
             left: utils.calcValueByFontsize(doc, left / zoom.value)
           };
           config.data.inputEvent = e;
-          services?.editorService.add(config.data, parent);
+          editorService.add(config.data, parent);
         }
       };
       return (_ctx, _cache) => {
@@ -18290,15 +18273,14 @@
     },
     __name: "Breadcrumb",
     setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const node = vue.computed(() => editorService?.get("node"));
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
-      const root = vue.computed(() => editorService?.get("root"));
+      const { editorService } = useServices();
+      const node = vue.computed(() => editorService.get("node"));
+      const nodes = vue.computed(() => editorService.get("nodes"));
+      const root = vue.computed(() => editorService.get("root"));
       const path = vue.computed(() => utils.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
@@ -18354,8 +18336,8 @@
     },
     setup(__props) {
       const stageOptions = vue.inject("stageOptions");
-      const services = vue.inject("services");
-      const page = vue.computed(() => services?.editorService.get("page"));
+      const { editorService } = useServices();
+      const page = vue.computed(() => editorService.get("page"));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createVNode(_sfc_main$2),
@@ -18800,12 +18782,22 @@
   }
   const dataSourceService = new DataSource();
 
-  const idleTask = new IdleTask();
   class Dep extends BaseService {
     state = vue.shallowReactive({
-      collecting: false
+      collecting: false,
+      taskLength: 0
     });
+    idleTask = new IdleTask();
     watcher = new core.Watcher({ initialTargets: vue.reactive({}) });
+    constructor() {
+      super();
+      this.idleTask.on(
+        "update-task-length",
+        throttle(({ length }) => {
+          this.set("taskLength", length);
+        }, 1e3)
+      );
+    }
     set(name, value) {
       this.state[name] = value;
     }
@@ -18860,11 +18852,11 @@
           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();
         });
@@ -18895,7 +18887,7 @@
       return this.watcher.hasSpecifiedTypeTarget(type);
     }
     clearIdleTasks() {
-      idleTask.clearTasks();
+      this.idleTask.clearTasks();
     }
     on(eventName, listener) {
       return super.on(eventName, listener);
@@ -18904,8 +18896,8 @@
       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);
       }
@@ -18915,12 +18907,13 @@
       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);
         },
@@ -20136,6 +20129,8 @@
   exports.ComponentListPanel = _sfc_main$b;
   exports.CondOpSelect = _sfc_main$1k;
   exports.ContentMenu = _sfc_main$o;
+  exports.DEFAULT_LEFT_COLUMN_WIDTH = DEFAULT_LEFT_COLUMN_WIDTH;
+  exports.DEFAULT_RIGHT_COLUMN_WIDTH = DEFAULT_RIGHT_COLUMN_WIDTH;
   exports.DataSourceConfigPanel = _sfc_main$i;
   exports.DataSourceFieldSelect = _sfc_main$1g;
   exports.DataSourceFields = _sfc_main$1i;
@@ -20155,13 +20150,19 @@
   exports.KeyBindingCommand = KeyBindingCommand;
   exports.KeyValue = _sfc_main$16;
   exports.Keys = Keys;
+  exports.LEFT_COLUMN_WIDTH_STORAGE_KEY = LEFT_COLUMN_WIDTH_STORAGE_KEY;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$A;
+  exports.MIN_CENTER_COLUMN_WIDTH = MIN_CENTER_COLUMN_WIDTH;
+  exports.MIN_LEFT_COLUMN_WIDTH = MIN_LEFT_COLUMN_WIDTH;
+  exports.MIN_RIGHT_COLUMN_WIDTH = MIN_RIGHT_COLUMN_WIDTH;
+  exports.PROPS_PANEL_WIDTH_STORAGE_KEY = PROPS_PANEL_WIDTH_STORAGE_KEY;
   exports.PageFragmentSelect = _sfc_main$15;
   exports.PropsFormPanel = _sfc_main$q;
   exports.PropsPanel = _sfc_main$p;
+  exports.RIGHT_COLUMN_WIDTH_STORAGE_KEY = RIGHT_COLUMN_WIDTH_STORAGE_KEY;
   exports.Resizer = _sfc_main$B;
   exports.ScrollViewer = ScrollViewer;
   exports.SideItemKey = SideItemKey;
@@ -20234,6 +20235,7 @@
   exports.useGetSo = useGetSo;
   exports.useNextFloatBoxPosition = useNextFloatBoxPosition;
   exports.useNodeStatus = useNodeStatus$1;
+  exports.useServices = useServices;
   exports.useStage = useStage;
   exports.useWindowRect = useWindowRect;
   exports.warn = warn;