@tmagic/editor 1.5.7 → 1.5.8

package/src/layouts/NavMenu.vue

@@ -7,13 +7,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
+import { computed, markRaw, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem } from '@editor/type';
 
 defineOptions({
   name: 'MEditorNavMenu',
@@ -30,15 +31,14 @@ const props = withDefaults(
   },
 );
 
-const services = inject<Services>('services');
-const uiService = services?.uiService;
+const { uiService, editorService, historyService } = useServices();
 
-const columnWidth = computed(() => services?.uiService.get('columnWidth'));
+const columnWidth = computed(() => uiService.get('columnWidth'));
 const keys = Object.values(ColumnLayout);
 
-const showGuides = computed((): boolean => uiService?.get('showGuides') ?? true);
-const showRule = computed((): boolean => uiService?.get('showRule') ?? true);
-const zoom = computed((): number => uiService?.get('zoom') ?? 1);
+const showGuides = computed((): boolean => uiService.get('showGuides'));
+const showRule = computed((): boolean => uiService.get('showRule'));
+const zoom = computed((): number => uiService.get('zoom'));
 
 const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
 const ctrl = isMac ? 'Command' : 'Ctrl';
@@ -70,10 +70,10 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         className: 'delete',
         icon: markRaw(Delete),
         tooltip: `刪除(Delete)`,
-        disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
+        disabled: () => editorService.get('node')?.type === NodeType.PAGE,
         handler: () => {
-          const node = services?.editorService.get('node');
-          node && services?.editorService.remove(node);
+          const node = editorService.get('node');
+          node && editorService.remove(node);
         },
       });
       break;
@@ -83,8 +83,8 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         className: 'undo',
         icon: markRaw(Back),
         tooltip: `后退(${ctrl}+z)`,
-        disabled: () => !services?.historyService.state.canUndo,
-        handler: () => services?.editorService.undo(),
+        disabled: () => !historyService.state.canUndo,
+        handler: () => editorService.undo(),
       });
       break;
     case 'redo':
@@ -93,8 +93,8 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         className: 'redo',
         icon: markRaw(Right),
         tooltip: `前进(${ctrl}+Shift+z)`,
-        disabled: () => !services?.historyService.state.canRedo,
-        handler: () => services?.editorService.redo(),
+        disabled: () => !historyService.state.canRedo,
+        handler: () => editorService.redo(),
       });
       break;
     case 'zoom-in':
@@ -184,7 +184,7 @@ const navMenuEl = useTemplateRef<HTMLDivElement>('navMenu');
 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,

package/src/layouts/page-bar/AddButton.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, toRaw } from 'vue';
+import { computed, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
@@ -41,21 +41,18 @@ import { TMagicPopover } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
 defineOptions({
   name: 'MEditorPageBarAddButton',
 });
 
-const services = inject<Services>('services');
-const uiService = services?.uiService;
-const editorService = services?.editorService;
+const { editorService, uiService } = useServices();
 
-const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+const showAddPageButton = computed(() => uiService.get('showAddPageButton'));
 
 const addPage = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
-  if (!editorService) return;
   const root = toRaw(editorService.get('root'));
   if (!root) throw new Error('root 不能为空');
   const pageConfig = {

package/src/layouts/page-bar/PageBar.vue

@@ -68,14 +68,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, useTemplateRef, watch } from 'vue';
+import { computed, ref, useTemplateRef, watch } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { PageBarSortOptions, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { PageBarSortOptions } from '@editor/type';
 
 import AddButton from './AddButton.vue';
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
@@ -97,11 +98,10 @@ const props = withDefaults(
   },
 );
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
+const { editorService } = useServices();
 
-const root = computed(() => editorService?.get('root'));
-const page = computed(() => editorService?.get('page'));
+const root = computed(() => editorService.get('root'));
+const page = computed(() => editorService.get('page'));
 
 const query = ref<{
   pageType: NodeType[];
@@ -129,19 +129,19 @@ const list = computed(() => {
 });
 
 const switchPage = (id: Id) => {
-  editorService?.select(id);
+  editorService.select(id);
 };
 
 const copy = (node: MPage | MPageFragment) => {
-  node && editorService?.copy(node);
-  editorService?.paste({
+  node && editorService.copy(node);
+  editorService.paste({
     left: 0,
     top: 0,
   });
 };
 
 const remove = (node: MPage | MPageFragment) => {
-  editorService?.remove(node);
+  editorService.remove(node);
 };
 
 const pageBarScrollContainerRef = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -24,14 +24,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
 import type { Id } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
-import type { PageBarSortOptions, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { PageBarSortOptions } from '@editor/type';
 
 defineOptions({
   name: 'MEditorPageBarScrollContainer',
@@ -42,15 +43,13 @@ const props = defineProps<{
   length: number;
 }>();
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
-const uiService = services?.uiService;
+const { editorService, uiService } = useServices();
 
 const itemsContainerEl = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
-const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
-const showPageListButton = computed(() => uiService?.get('showPageListButton'));
+const showAddPageButton = computed(() => uiService.get('showAddPageButton'));
+const showPageListButton = computed(() => uiService.get('showPageListButton'));
 
 const itemsContainerWidth = ref(0);
 
@@ -145,7 +144,7 @@ watch(
               beforeDragList = sortable.toArray();
             },
             onUpdate: async (event: SortableEvent) => {
-              await editorService?.sort(
+              await editorService.sort(
                 beforeDragList[event.oldIndex as number],
                 beforeDragList[event.newIndex as number],
               );

package/src/layouts/page-bar/PageList.vue

@@ -35,14 +35,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { Files } from '@element-plus/icons-vue';
 
 import { Id, MPage, MPageFragment } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 defineOptions({
   name: 'MEditorPageList',
 });
@@ -51,13 +51,11 @@ defineProps<{
   list: (MPage | MPageFragment)[];
 }>();
 
-const services = inject<Services>('services');
-const uiService = services?.uiService;
-const editorService = services?.editorService;
+const { editorService, uiService } = useServices();
 
-const showPageListButton = computed(() => uiService?.get('showPageListButton'));
-const page = computed(() => editorService?.get('page'));
+const showPageListButton = computed(() => uiService.get('showPageListButton'));
+const page = computed(() => editorService.get('page'));
 const switchPage = async (id: Id) => {
-  await editorService?.select(id);
+  await editorService.select(id);
 };
 </script>

package/src/layouts/props-panel/FormPanel.vue

@@ -51,7 +51,7 @@ import { MForm } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 import CodeEditor from '../CodeEditor.vue';
 
@@ -80,13 +80,15 @@ const emit = defineEmits<{
   mounted: [internalInstance: any];
 }>();
 
-const services = inject<Services>('services');
+const services = useServices();
+const { editorService, uiService } = services;
+
 const codeOptions = inject('codeOptions', {});
 
 const showSrc = ref(false);
-const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const propsPanelSize = computed(() => uiService.get('propsPanelSize') || 'small');
 const { height: editorContentHeight } = useEditorContentHeight();
-const stage = computed(() => services?.editorService.get('stage'));
+const stage = computed(() => editorService.get('stage'));
 
 const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 

package/src/layouts/props-panel/PropsPanel.vue

@@ -34,7 +34,9 @@
         <div class="m-editor-props-style-panel-title">
           <span>样式</span>
           <div>
-            <TMagicButton link size="small" @click="closeStylePanelHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
+            <TMagicButton link size="small" @click="toggleStylePanel(false)"
+              ><MIcon :icon="Close"></MIcon
+            ></TMagicButton>
           </div>
         </div>
       </template>
@@ -44,7 +46,7 @@
       v-if="showStylePanelToggleButton && !showStylePanel"
       class="m-editor-props-panel-style-icon"
       circle
-      @click="showStylePanelHandler"
+      @click="toggleStylePanel(true)"
     >
       <MIcon :icon="Sugar"></MIcon>
     </TMagicButton>
@@ -52,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
@@ -63,9 +65,11 @@ import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import Resizer from '@editor/components/Resizer.vue';
-import type { PropsPanelSlots, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import { Protocol } from '@editor/services/storage';
+import type { PropsPanelSlots } from '@editor/type';
 import { styleTabConfig } from '@editor/utils';
-import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
+import { PROPS_PANEL_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 import FormPanel from './FormPanel.vue';
 import { useStylePanel } from './use-style-panel';
@@ -87,13 +91,13 @@ const emit = defineEmits<{
   mounted: [internalInstance: InstanceType<typeof FormPanel>];
 }>();
 
-const services = inject<Services>('services');
+const { editorService, uiService, propsService, storageService } = useServices();
 
 const values = ref<FormValue>({});
 // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
 const curFormConfig = ref<any>([]);
-const node = computed(() => services?.editorService.get('node'));
-const nodes = computed(() => services?.editorService.get('nodes') || []);
+const node = computed(() => editorService.get('node'));
+const nodes = computed(() => editorService.get('nodes'));
 
 const styleFormConfig = [
   {
@@ -109,15 +113,15 @@ const init = async () => {
   }
 
   const type = node.value.type || (node.value.items ? 'container' : 'text');
-  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+  curFormConfig.value = await propsService.getPropsConfig(type);
   values.value = node.value;
 };
 
 watchEffect(init);
-services?.propsService.on('props-configs-change', init);
+propsService.on('props-configs-change', init);
 
 onBeforeUnmount(() => {
-  services?.propsService.off('props-configs-change', init);
+  propsService.off('props-configs-change', init);
 });
 
 const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
@@ -145,7 +149,7 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
       });
     }
 
-    services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+    editorService.update(newValue, { changeRecords: eventData?.changeRecords });
   } catch (e: any) {
     emit('submit-error', e);
   }
@@ -162,8 +166,16 @@ const mountedHandler = () => {
 };
 
 const propsPanelEl = useTemplateRef('propsPanel');
+const propsPanelWidth = ref(
+  storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300,
+);
+
+onMounted(() => {
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`);
+});
+
 const widthChange = ({ deltaX }: OnDrag) => {
-  if (!propsPanelEl.value || !services) {
+  if (!propsPanelEl.value) {
     return;
   }
 
@@ -172,47 +184,25 @@ const widthChange = ({ deltaX }: OnDrag) => {
   );
 
   let value = width - deltaX;
-  if (value > services.uiService.get('columnWidth').right) {
-    value = services.uiService.get('columnWidth').right - 40;
+  if (value > uiService.get('columnWidth').right) {
+    value = uiService.get('columnWidth').right - 40;
   }
-  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${value}px`);
+  propsPanelWidth.value = value;
 };
 
-const { showStylePanel, showStylePanelToggleButton, showStylePanelHandler, closeStylePanelHandler } =
-  useStylePanel(services);
-
-watch(showStylePanel, (showStylePanel) => {
-  if (!propsPanelEl.value || !services) {
-    return;
-  }
-
-  const columnWidth = {
-    ...services.uiService.get('columnWidth'),
-  };
-
-  const width = globalThis.parseFloat(
-    getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
-  );
-
-  if (showStylePanel) {
-    columnWidth.right += width;
-    columnWidth.center -= width;
-  } else {
-    columnWidth.right -= width;
-    columnWidth.center += width;
-  }
-
-  if (columnWidth.center < 0) {
-    columnWidth.right = columnWidth.right + columnWidth.center - 400;
-    columnWidth.center = 400;
-
-    propsPanelEl.value.style.setProperty('--props-style-panel-width', `${columnWidth.right / 2}px`);
-  }
-
-  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnWidth.right}`);
-  services.uiService.set('columnWidth', columnWidth);
+watch(propsPanelWidth, (value) => {
+  propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${value}px`);
+  storageService.setItem(PROPS_PANEL_WIDTH_STORAGE_KEY, value, { protocol: Protocol.NUMBER });
 });
 
+const { showStylePanel, showStylePanelToggleButton, toggleStylePanel } = useStylePanel(
+  {
+    storageService,
+    uiService,
+  },
+  propsPanelWidth,
+);
+
 const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
 defineExpose({
   getFormState() {

package/src/layouts/props-panel/use-style-panel.ts

@@ -1,40 +1,56 @@
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
+import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
-export const useStylePanel = (services?: Services) => {
+export const useStylePanel = (
+  { uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>,
+  propsPanelWidth: Ref<number>,
+) => {
   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);
+    uiService.set('showStylePanel', showStylePanelStorageValue);
   }
 
-  const showStylePanel = computed(
-    () => showStylePanelToggleButton.value && (services?.uiService.get('showStylePanel') ?? true),
-  );
+  const showStylePanel = computed(() => showStylePanelToggleButton.value && (uiService.get('showStylePanel') ?? true));
 
-  const showStylePanelToggleButton = computed(
-    () => !(services && services.uiService.get('frameworkRect').width < 1280),
-  );
+  const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);
 
-  const showStylePanelHandler = () => {
-    services?.uiService.set('showStylePanel', true);
-    services?.storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
-  };
+  const toggleStylePanel = (showStylePanel: boolean) => {
+    uiService.set('showStylePanel', showStylePanel);
+    storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });
+
+    const columnWidth = {
+      ...uiService.get('columnWidth'),
+    };
+
+    if (showStylePanel) {
+      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;
+    }
 
-  const closeStylePanelHandler = () => {
-    services?.uiService.set('showStylePanel', false);
-    services?.storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
+    storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });
+    uiService.set('columnWidth', columnWidth);
   };
 
   return {
     showStylePanel,
     showStylePanelToggleButton,
-    showStylePanelHandler,
-    closeStylePanelHandler,
+    toggleStylePanel,
   };
 };

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -43,12 +43,12 @@ import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
+import { useServices } from '@editor/hooks/use-services';
 import {
   type ComponentGroup,
   type ComponentItem,
   ComponentListPanelSlots,
   DragType,
-  type Services,
   type StageOptions,
 } from '@editor/type';
 
@@ -64,12 +64,12 @@ const filterTextChangeHandler = (v: string) => {
   searchText.value = v;
 };
 
-const services = inject<Services>('services');
+const { editorService, componentListService } = useServices();
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stage = computed(() => services?.editorService.get('stage'));
+const stage = computed(() => editorService.get('stage'));
 const list = computed<ComponentGroup[]>(() =>
-  (services?.componentListService.getList() || []).map((group: ComponentGroup) => ({
+  componentListService.getList().map((group: ComponentGroup) => ({
     ...group,
     items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
   })),
@@ -85,7 +85,7 @@ let clientX: number;
 let clientY: number;
 
 const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
-  services?.editorService.add({
+  editorService.add({
     name: text,
     type,
     ...data,

package/src/layouts/sidebar/Sidebar.vue

@@ -117,6 +117,10 @@
         </template>
       </component>
     </div>
+    <div class="m-editor-sidebar-tips" v-if="tipsBarVisible && collecting && taskLength > 0">
+      <span>依赖收集中(剩余任务：{{ taskLength }})</span>
+      <MIcon :icon="Close" class="close-icon" @click.stop="tipsBarVisible = false"></MIcon>
+    </div>
   </div>
 
   <Teleport to="body">
@@ -149,19 +153,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, watch } from 'vue';
-import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import { useFloatBox } from '@editor/hooks/use-float-box';
+import { useServices } from '@editor/hooks/use-services';
 import {
   ColumnLayout,
   CustomContentMenuFunction,
   type MenuButton,
   type MenuComponent,
-  type Services,
   type SideBarData,
   type SidebarSlots,
   type SideComponent,
@@ -197,11 +201,13 @@ const props = withDefaults(
   },
 );
 
-const services = inject<Services>('services');
+const { depService, uiService } = useServices();
 
-const collecting = computed(() => services?.depService.get('collecting'));
+const collecting = computed(() => depService.get('collecting'));
+const taskLength = computed(() => depService.get('taskLength'));
+const tipsBarVisible = ref(true);
 
-const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+const columnLeftWidth = computed(() => uiService.get('columnWidth')[ColumnLayout.LEFT]);
 const { height: editorContentHeight } = useEditorContentHeight();
 const columnLeftHeight = ref(0);
 
@@ -282,7 +288,7 @@ const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig
 watch(
   sideBarItems,
   (items) => {
-    services?.uiService.set('sideBarItems', items);
+    uiService.set('sideBarItems', items);
   },
   {
     immediate: true,
@@ -310,10 +316,10 @@ watch(
     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;
   },
 );