@tmagic/editor 1.4.3 → 1.4.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.3",
+  "version": "1.4.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.4.3",
-    "@tmagic/dep": "1.4.3",
-    "@tmagic/design": "1.4.3",
-    "@tmagic/form": "1.4.3",
-    "@tmagic/schema": "1.4.3",
-    "@tmagic/stage": "1.4.3",
-    "@tmagic/table": "1.4.3",
-    "@tmagic/utils": "1.4.3",
+    "@tmagic/core": "1.4.4",
+    "@tmagic/dep": "1.4.4",
+    "@tmagic/design": "1.4.4",
+    "@tmagic/form": "1.4.4",
+    "@tmagic/schema": "1.4.4",
+    "@tmagic/stage": "1.4.4",
+    "@tmagic/table": "1.4.4",
+    "@tmagic/utils": "1.4.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.3",
-    "@tmagic/form": "1.4.3",
+    "@tmagic/design": "1.4.4",
+    "@tmagic/form": "1.4.4",
     "monaco-editor": "^0.47.0",
     "vue": "^3.4.21"
   },

package/src/Editor.vue

@@ -81,6 +81,7 @@
       <slot name="props-panel">
         <PropsPanel
           :extend-state="extendFormState"
+          :disabled-show-src="disabledShowSrc"
           @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
           @form-error="(e: any) => $emit('props-form-error', e)"
           @submit-error="(e: any) => $emit('props-submit-error', e)"
@@ -109,6 +110,8 @@
 </template>
 
 <script lang="ts" setup>
+import { EventEmitter } from 'events';
+
 import { provide } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
@@ -133,7 +136,7 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
 
 defineSlots<
   FrameworkSlots &
@@ -202,5 +205,7 @@ provide('services', services);
 provide('codeOptions', props.codeOptions);
 provide('stageOptions', stageOptions);
 
+provide<EventBus>('eventBus', new EventEmitter());
+
 defineExpose(services);
 </script>

package/src/editorProps.ts

@@ -80,6 +80,8 @@ export interface EditorProps {
   disabledPageFragment?: boolean;
   /** 禁用双击在浮层中单独编辑选中组件 */
   disabledStageOverlay?: boolean;
+  /** 禁用属性配置面板右下角显示源码的按钮 */
+  disabledShowSrc?: boolean;
   /** 中间工作区域中画布渲染的内容 */
   render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
@@ -101,6 +103,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  disabledShowSrc: false,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),

package/src/fields/CodeSelectCol.vue

@@ -2,15 +2,23 @@
   <div class="m-fields-code-select-col">
     <div class="code-select-container">
       <!-- 代码块下拉框 -->
-      <m-form-container
+      <MContainer
         class="select"
         :config="selectConfig"
         :model="model"
         :size="size"
         @change="onParamsChangeHandler"
-      ></m-form-container>
+      ></MContainer>
+
       <!-- 查看/编辑按钮 -->
-      <Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
+      <TMagicButton
+        v-if="model[name] && hasCodeBlockSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
+        @click="editCode(model[name])"
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
     </div>
 
     <!-- 参数填写框 -->
@@ -23,14 +31,6 @@
       :params-config="paramsConfig"
       @change="onParamsChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +39,14 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
-import Icon from '@editor/components/Icon.vue';
-import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, CodeSelectColConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsCodeSelectCol',
@@ -54,13 +54,19 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasCodeBlockSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
+);
+
 /**
  * 根据代码块id获取代码块参数配置
  * @param codeId 代码块ID
@@ -127,5 +133,7 @@ const onParamsChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
+const editCode = (id: string) => {
+  eventBus?.emit('edit-code', id);
+};
 </script>

package/src/fields/DataSourceFieldSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; display: flex; align-items: center">
+  <div class="m-fields-data-source-field-select">
     <component
       style="width: 100%"
       :is="tagName"
@@ -14,13 +14,15 @@
       :prop="`${prop}${prop ? '.' : ''}${name}`"
       @change="onChangeHandler"
     ></component>
+
     <TMagicButton
-      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId"
-      style="margin-left: 5px"
+      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
       :size="size"
       @click="editHandler(selectedDataSourceId)"
-      ><MIcon :icon="Edit"></MIcon
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
     ></TMagicButton>
+
     <TMagicButton
       v-if="config.fieldConfig"
       style="margin-left: 5px"
@@ -29,43 +31,41 @@
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
       ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
-
-    <DataSourceConfigPanel
-      ref="editDialog"
-      :disabled="!editable"
-      :values="dataSourceValues"
-      :title="dialogTitle"
-      @submit="submitDataSourceHandler"
-    ></DataSourceConfigPanel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
-import { Coin, Edit } from '@element-plus/icons-vue';
+import { Coin, Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
-import { MCascader } from '@tmagic/form';
+import { filterFunction, MCascader } from '@tmagic/form';
 import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceFieldSelect',
 });
 
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const selectedDataSourceId = computed(() => {
   const value = props.model[props.name];
   if (!Array.isArray(value) || !value.length) {
@@ -181,7 +181,7 @@ const onChangeHandler = (value: any) => {
   emit('change', value);
 };
 
-const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
-  services?.dataSourceService,
-);
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', id);
+};
 </script>

package/src/fields/DataSourceMethodSelect.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="m-fields-data-source-method-select">
     <div class="data-source-method-select-container">
-      <m-form-container
+      <MContainer
         class="select"
         :config="cascaderConfig"
         :model="model"
+        :size="size"
         @change="onChangeHandler"
-      ></m-form-container>
-      <Icon
-        v-if="model[name] && isCustomMethod"
-        class="icon"
-        :icon="!notEditable ? Edit : View"
+      ></MContainer>
+
+      <TMagicButton
+        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
         @click="editCodeHandler"
-      ></Icon>
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
     </div>
 
     <CodeParams
@@ -24,14 +28,6 @@
       :params-config="paramsConfig"
       @change="onChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +35,14 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
-import type { CodeBlockContent, Id } from '@tmagic/schema';
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
-import Icon from '@editor/components/Icon.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceMethodSelect',
@@ -54,6 +50,8 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+
 const emit = defineEmits(['change']);
 
 const dataSourceService = services?.dataSourceService;
@@ -62,6 +60,10 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
   disabled: false,
 });
 
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
 const dataSources = computed(() => dataSourceService?.get('dataSources'));
@@ -139,21 +141,13 @@ const onChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
-
 const editCodeHandler = () => {
-  const [id, name] = props.model[props.name];
+  const [id] = props.model[props.name];
 
   const dataSource = dataSourceService?.getDataSourceById(id);
 
   if (!dataSource) return;
 
-  editCode(dataSource, name);
-
-  setParamsConfig([id, name]);
-};
-
-const submitCodeBlockHandler = (value: CodeBlockContent) => {
-  submitCode(value);
+  eventBus?.emit('edit-data-source', id);
 };
 </script>

package/src/fields/DataSourceSelect.vue

@@ -1,22 +1,36 @@
 <template>
-  <MSelect
-    :model="model"
-    :name="name"
-    :size="size"
-    :prop="prop"
-    :disabled="disabled"
-    :config="selectConfig"
-    :last-values="lastValues"
-    @change="changeHandler"
-  ></MSelect>
+  <div class="m-fields-data-source-select">
+    <MSelect
+      :model="model"
+      :name="name"
+      :size="size"
+      :prop="prop"
+      :disabled="disabled"
+      :config="selectConfig"
+      :last-values="lastValues"
+      @change="changeHandler"
+    ></MSelect>
+
+    <TMagicButton
+      v-if="model[name] && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
 
-import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
+import { TMagicButton } from '@tmagic/design';
+import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
 
-import type { DataSourceSelect, Services } from '../type';
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceSelect, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceSelect',
@@ -28,10 +42,18 @@ const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
   disabled: false,
 });
 
-const { dataSourceService } = inject<Services>('services') || {};
+const mForm = inject<FormState | undefined>('mForm');
+const { dataSourceService, uiService } = inject<Services>('services') || {};
+const eventBus = inject<EventBus>('eventBus');
 
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const selectConfig = computed<SelectConfig>(() => {
   const { type, dataSourceType, value, ...config } = props.config;
 
@@ -59,4 +81,18 @@ const selectConfig = computed<SelectConfig>(() => {
 const changeHandler = (value: any) => {
   emit('change', value);
 };
+
+const editHandler = () => {
+  const value = props.model[props.name];
+
+  if (!value) return;
+
+  const id = typeof value === 'string' ? value : value.dataSourceId;
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  eventBus?.emit('edit-data-source', id);
+};
 </script>

package/src/fields/EventSelect.vue

@@ -15,7 +15,7 @@
       <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
         >添加事件</TMagicButton
       >
-      <m-form-panel
+      <MPanel
         v-for="(cardItem, index) in model[name]"
         :key="index"
         :disabled="disabled"
@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <m-form-container
+          <MContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></m-form-container>
+          ></MContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -43,7 +43,7 @@
             @click="removeEvent(index)"
           ></TMagicButton>
         </template>
-      </m-form-panel>
+      </MPanel>
     </div>
   </div>
 </template>
@@ -55,7 +55,8 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer, MPanel } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
@@ -227,7 +228,8 @@ const tableConfig = computed(() => ({
 }));
 
 // 组件动作组表单配置
-const actionsConfig = computed(() => ({
+const actionsConfig = computed<PanelConfig>(() => ({
+  type: 'panel',
   items: [
     {
       type: 'group-list',

package/src/hooks/use-editor-content-height.ts

@@ -1,4 +1,4 @@
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 
 import type { Services } from '@editor/type';
 
@@ -9,10 +9,16 @@ export const useEditorContentHeight = () => {
   const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
 
   const height = ref(0);
-  watchEffect(() => {
-    if (height.value > 0 && height.value === editorContentHeight.value) return;
-    height.value = editorContentHeight.value;
-  });
+  watch(
+    editorContentHeight,
+    () => {
+      if (height.value > 0 && height.value === editorContentHeight.value) return;
+      height.value = editorContentHeight.value;
+    },
+    {
+      immediate: true,
+    },
+  );
 
   return {
     height,

package/src/layouts/PropsPanel.vue

@@ -3,7 +3,7 @@
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
-      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :class="propsPanelSize"
       :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
       :size="propsPanelSize"
       :init-values="values"
@@ -14,6 +14,7 @@
     ></MForm>
 
     <TMagicButton
+      v-if="!disabledShowSrc"
       class="m-editor-props-panel-src-icon"
       circle
       size="large"
@@ -57,6 +58,7 @@ defineOptions({
 });
 
 defineProps<{
+  disabledShowSrc?: boolean;
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 

package/src/layouts/sidebar/Sidebar.vue

@@ -8,7 +8,8 @@
         draggable="true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
-        @click="activeTabName = config.text || `${index}`"
+        :style="config.tabStyle || {}"
+        @click="activeTabName = config.text || config.$key || `${index}`"
         @dragstart="dragstartHandler"
         @dragend="dragendHandler(config.$key, $event)"
       >
@@ -20,7 +21,7 @@
       class="m-editor-sidebar-content"
       v-for="(config, index) in sideBarItems"
       :key="config.$key ?? index"
-      v-show="activeTabName === config.text"
+      v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
     >
       <component
         v-if="config && !floatBoxStates[config.$key]?.status"
@@ -151,6 +152,7 @@ import {
   type SidebarSlots,
   type SideComponent,
   type SideItem,
+  SideItemKey,
 } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
@@ -171,7 +173,11 @@ const props = withDefaults(
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
-    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
+    data: () => ({
+      type: 'tabs',
+      status: '组件',
+      items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE],
+    }),
   },
 );
 
@@ -184,8 +190,8 @@ const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {
   const map: Record<string, SideComponent> = {
-    'component-list': {
-      $key: 'component-list',
+    [SideItemKey.COMPONENT_LIST]: {
+      $key: SideItemKey.COMPONENT_LIST,
       type: 'component',
       icon: Goods,
       text: '组件',
@@ -204,7 +210,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       component: LayerPanel,
       slots: {},
     },
-    'code-block': {
+    [SideItemKey.CODE_BLOCK]: {
       $key: 'code-block',
       type: 'component',
       icon: EditPen,
@@ -212,8 +218,8 @@ const getItemConfig = (data: SideItem): SideComponent => {
       component: CodeBlockListPanel,
       slots: {},
     },
-    'data-source': {
-      $key: 'data-source',
+    [SideItemKey.DATA_SOURCE]: {
+      $key: SideItemKey.DATA_SOURCE,
       type: 'component',
       icon: Coin,
       text: '数据源',
@@ -227,6 +233,16 @@ const getItemConfig = (data: SideItem): SideComponent => {
 
 const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
 
+watch(
+  sideBarItems,
+  (items) => {
+    services?.uiService.set('sideBarItems', items);
+  },
+  {
+    immediate: true,
+  },
+);
+
 watch(
   () => props.data.status,
   (status) => {