@tmagic/editor 1.5.0 → 1.5.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.0",
-    "@tmagic/form": "1.5.0",
-    "@tmagic/stage": "1.5.0",
-    "@tmagic/utils": "1.5.0",
-    "@tmagic/table": "1.5.0"
+    "@tmagic/design": "1.5.1",
+    "@tmagic/stage": "1.5.1",
+    "@tmagic/form": "1.5.1",
+    "@tmagic/table": "1.5.1",
+    "@tmagic/utils": "1.5.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -70,20 +70,20 @@
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.78.0",
+    "sass": "^1.83.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.4.10"
+    "vite": "^6.0.3"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.0"
+    "@tmagic/core": "1.5.1"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -96,9 +96,9 @@
         <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)"
+          @mounted="propsPanelMountedHandler"
+          @form-error="propsPanelFormErrorHandler"
+          @submit-error="propsPanelSubmitErrorHandler"
         >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
@@ -134,7 +134,8 @@ import type { MApp } from '@tmagic/core';
 
 import Framework from './layouts/Framework.vue';
 import TMagicNavMenu from './layouts/NavMenu.vue';
-import PropsPanel from './layouts/PropsPanel.vue';
+import FormPanel from './layouts/props-panel/FormPanel.vue';
+import PropsPanel from './layouts/props-panel/PropsPanel.vue';
 import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
 import codeBlockService from './services/codeBlock';
@@ -177,7 +178,7 @@ defineOptions({
 });
 
 const emit = defineEmits<{
-  'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
+  'props-panel-mounted': [instance: InstanceType<typeof FormPanel>];
   'update:modelValue': [value: MApp | null];
   'props-form-error': [e: any];
   'props-submit-error': [e: any];
@@ -231,5 +232,17 @@ provide('stageOptions', stageOptions);
 
 provide<EventBus>('eventBus', new EventEmitter());
 
+const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
+  emit('props-panel-mounted', e);
+};
+
+const propsPanelSubmitErrorHandler = (e: any) => {
+  emit('props-submit-error', e);
+};
+
+const propsPanelFormErrorHandler = (e: any) => {
+  emit('props-form-error', e);
+};
+
 defineExpose(services);
 </script>

package/src/components/CodeBlockEditor.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Ref, ref } from 'vue';
+import { computed, inject, Ref, ref, useTemplateRef } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
@@ -104,7 +104,7 @@ const { height: codeBlockEditorHeight } = useEditorContentHeight();
 const difVisible = ref(false);
 const { rect: windowRect } = useWindowRect();
 
-const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
+const magicVsEditor = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
 
 const diffChange = () => {
   if (!magicVsEditor.value || !formBox.value?.form) {
@@ -224,7 +224,7 @@ const errorHandler = (error: any) => {
   tMagicMessage.error(error.message);
 };
 
-const formBox = ref<InstanceType<typeof MFormBox>>();
+const formBox = useTemplateRef<InstanceType<typeof MFormBox>>('formBox');
 
 const changedValue = ref<CodeBlockContent>();
 const changeHandler = (values: CodeBlockContent) => {

package/src/components/CodeParams.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 
 import { type ContainerChangeEventData, type FormConfig, type FormValue, MForm } from '@tmagic/form';
 
@@ -32,7 +32,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const form = ref<InstanceType<typeof MForm>>();
+const form = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormConfig = []) => [
   {

package/src/components/ContentMenu.vue

@@ -6,6 +6,7 @@
       ref="menu"
       :style="menuStyle"
       @mouseenter="mouseenterHandler()"
+      @contextmenu.prevent
     >
       <slot name="title"></slot>
       <div>
@@ -36,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
 
 import { useZIndex } from '@tmagic/design';
 
@@ -68,9 +69,9 @@ const emit = defineEmits<{
   mouseenter: [];
 }>();
 
-const menu = ref<HTMLDivElement>();
-const buttons = ref<InstanceType<typeof ToolButton>[]>();
-const subMenu = ref<any>();
+const menu = useTemplateRef<HTMLDivElement>('menu');
+const buttons = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
+const subMenu = useTemplateRef<any>('subMenu');
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
@@ -82,8 +83,8 @@ const menuPosition = ref({
 });
 
 const menuStyle = computed(() => ({
-  top: `${menuPosition.value.top}px`,
-  left: `${menuPosition.value.left}px`,
+  top: `${menuPosition.value.top + 2}px`,
+  left: `${menuPosition.value.left + 2}px`,
   zIndex: curZIndex.value,
 }));
 
@@ -98,10 +99,12 @@ const hide = () => {
   emit('hide');
 };
 
-const clickHandler = () => {
+const clickHandler = (event: MouseEvent) => {
   if (!props.autoHide) return;
 
-  hide();
+  if (event.button === 0) {
+    hide();
+  }
 };
 
 const outsideClickHideHandler = (e: MouseEvent) => {
@@ -132,18 +135,15 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
 };
 
 const show = (e?: { clientY: number; clientX: number }) => {
-  // 加setTimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
-  setTimeout(() => {
-    visible.value = true;
+  visible.value = true;
 
-    nextTick(() => {
-      e && setPosition(e);
+  nextTick(() => {
+    e && setPosition(e);
 
-      curZIndex.value = zIndex.nextZIndex();
+    curZIndex.value = zIndex.nextZIndex();
 
-      emit('show');
-    });
-  }, 300);
+    emit('show');
+  });
 };
 
 const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
@@ -166,7 +166,7 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
         y = rect.top;
       }
       subMenu.value?.show({
-        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
         clientY: y,
       });
     }

package/src/components/FloatingBox.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
@@ -47,8 +47,8 @@ const props = withDefaults(
   },
 );
 
-const target = ref<HTMLDivElement>();
-const titleEl = ref<HTMLDivElement>();
+const target = useTemplateRef<HTMLDivElement>('target');
+const titleEl = useTemplateRef<HTMLDivElement>('titleEl');
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);

package/src/components/Resizer.vue

@@ -1,11 +1,11 @@
 <template>
-  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-dragging': isDragging }">
     <slot></slot>
   </span>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import type { OnDrag } from 'gesto';
 
 import { useGetSo } from '@editor/hooks/use-getso';
@@ -18,6 +18,6 @@ const emit = defineEmits<{
   change: [e: OnDrag];
 }>();
 
-const target = ref<HTMLSpanElement>();
-const { isDraging } = useGetSo(target, emit);
+const target = useTemplateRef<HTMLSpanElement>('target');
+const { isDragging } = useGetSo(target, emit);
 </script>

package/src/components/ScrollBar.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 import Gesto from 'gesto';
 
 defineOptions({
@@ -21,8 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['scroll']);
 
-const bar = ref<HTMLDivElement>();
-const thumb = ref<HTMLDivElement>();
+const bar = useTemplateRef<HTMLDivElement>('bar');
+const thumb = useTemplateRef<HTMLDivElement>('thumb');
 
 const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
 const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);

package/src/components/ScrollViewer.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
 import { isNumber } from '@tmagic/utils';
 
@@ -63,8 +63,8 @@ const props = withDefaults(
   },
 );
 
-const container = ref<HTMLDivElement>();
-const el = ref<HTMLDivElement>();
+const container = useTemplateRef<HTMLDivElement>('container');
+const el = useTemplateRef<HTMLDivElement>('el');
 const style = computed(
   () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};

package/src/components/SplitView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -51,7 +51,7 @@ const props = withDefaults(
   },
 );
 
-const el = ref<HTMLElement>();
+const el = useTemplateRef<HTMLElement>('el');
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');

package/src/components/ToolButton.vue

@@ -131,7 +131,8 @@ const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) =
 
 const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
   if (props.eventType !== 'mouseup') return;
-  if (item.type === 'button') {
+
+  if (item.type === 'button' && event.button === 0) {
     buttonHandler(item, event);
   }
 };

package/src/editorProps.ts

@@ -13,6 +13,7 @@ import { getIdFromEl } from '@tmagic/utils';
 
 import type {
   ComponentGroup,
+  CustomContentMenuFunction,
   DatasourceTypeOption,
   MenuBarData,
   MenuButton,
@@ -93,7 +94,7 @@ export interface EditorProps {
   /** 用于设置画布上的dom是否可以被拖入其中 */
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
   /** 用于自定义组件树与画布的右键菜单 */
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  customContentMenu?: CustomContentMenuFunction;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 页面顺序拖拽配置参数 */
   pageBarSortOptions?: PageBarSortOptions;
@@ -123,4 +124,5 @@ export const defaultEditorProps = {
   canSelect: (el: HTMLElement) => Boolean(getIdFromEl()(el)),
   isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
   codeOptions: () => ({}),
+  customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
 };

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
@@ -83,7 +83,7 @@ const emit = defineEmits<{
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const autocomplete = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
 const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);

package/src/fields/DataSourceMethods.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
@@ -51,7 +51,7 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const codeConfig = ref<CodeBlockContent>();
-const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
 let editIndex = -1;
 

package/src/fields/DataSourceMocks.vue

@@ -15,7 +15,6 @@
     >
       <template #body>
         <MFormBox
-          ref="addDialog"
           label-width="120px"
           :config="formConfig"
           :values="formValues"

package/src/fields/EventSelect.vue

@@ -2,7 +2,6 @@
   <div class="m-fields-event-select">
     <m-form-table
       v-if="isOldVersion"
-      ref="eventForm"
       name="events"
       :size="size"
       :disabled="disabled"

package/src/fields/KeyValue.vue

@@ -9,7 +9,7 @@
           :size="size"
           @change="keyChangeHandler"
         ></TMagicInput>
-        <span class="m-fileds-key-value-delimiter">:</span>
+        <span class="m-fields-key-value-delimiter">:</span>
         <TMagicInput
           placeholder="value"
           v-model="records[index][1]"
@@ -19,7 +19,7 @@
         ></TMagicInput>
 
         <TMagicButton
-          class="m-fileds-key-value-delete"
+          class="m-fields-key-value-delete"
           type="danger"
           :size="size"
           :disabled="disabled"

package/src/hooks/use-code-block-edit.ts

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
@@ -10,7 +10,7 @@ import type { CodeBlockService } from '@editor/services/codeBlock';
 export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
   const codeConfig = ref<CodeBlockContent>();
   const codeId = ref<string>();
-  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+  const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
   // 新增代码块
   const createCodeBlock = async () => {

package/src/hooks/use-getso.ts

@@ -1,9 +1,9 @@
-import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue';
 import Gesto, { type OnDrag } from 'gesto';
 
-export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+export const useGetSo = (target: ShallowRef<HTMLElement | null>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
   let getso: Gesto;
-  const isDraging = ref(false);
+  const isDragging = ref(false);
 
   onMounted(() => {
     if (!target.value) return;
@@ -17,19 +17,19 @@ export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'chan
         emit('change', e);
       })
       .on('dragStart', () => {
-        isDraging.value = true;
+        isDragging.value = true;
       })
       .on('dragEnd', () => {
-        isDraging.value = false;
+        isDragging.value = false;
       });
   });
 
   onBeforeUnmount(() => {
     getso?.unset();
-    isDraging.value = false;
+    isDragging.value = false;
   });
 
   return {
-    isDraging,
+    isDragging,
   };
 };

package/src/index.ts

@@ -91,7 +91,8 @@ export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as PropsPanel } from './layouts/props-panel/PropsPanel.vue';
+export { default as PropsFormPanel } from './layouts/props-panel/FormPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';

package/src/layouts/CodeEditor.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -93,7 +93,7 @@ let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
-const codeEditor = ref<HTMLDivElement>();
+const codeEditor = useTemplateRef<HTMLDivElement>('codeEditor');
 
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {

package/src/layouts/Framework.vue

@@ -20,7 +20,7 @@
       v-model:left="columnWidth.left"
       v-model:right="columnWidth.right"
       :min-left="65"
-      :min-right="20"
+      :min-right="420"
       :min-center="100"
       :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
@@ -50,9 +50,7 @@
       </template>
 
       <template v-if="page" #right>
-        <TMagicScrollbar>
-          <slot name="props-panel"></slot>
-        </TMagicScrollbar>
+        <slot name="props-panel"></slot>
       </template>
     </SplitView>
 
@@ -62,10 +60,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
 import type { MPage, MPageFragment } from '@tmagic/core';
-import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
@@ -93,8 +90,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const content = ref<HTMLDivElement>();
-const splitView = ref<InstanceType<typeof SplitView>>();
+const content = useTemplateRef<HTMLDivElement>('content');
+const splitView = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));

package/src/layouts/NavMenu.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, inject, 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';
@@ -190,7 +190,7 @@ const resizeObserver = new ResizeObserver(() => {
     });
   }
 });
-const navMenu = ref<HTMLDivElement>();
+const navMenu = useTemplateRef<HTMLDivElement>('navMenu');
 onMounted(() => {
   navMenu.value && resizeObserver.observe(navMenu.value);
 });

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

@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, 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';
@@ -144,8 +144,8 @@ const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
 
-const pageBarScrollContainer = ref<InstanceType<typeof PageBarScrollContainer>>();
-const pageBarItems = ref<HTMLDivElement[]>();
+const pageBarScrollContainer = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
+const pageBarItems = useTemplateRef<HTMLDivElement[]>('pageBarItems');
 watch(page, (page) => {
   if (
     !page ||

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

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
@@ -46,7 +46,7 @@ const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
 
-const itemsContainer = ref<HTMLElement>();
+const itemsContainer = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
@@ -75,7 +75,7 @@ const resizeObserver = new ResizeObserver(() => {
   setCanScroll();
 });
 
-const pageBar = ref<HTMLDivElement>();
+const pageBar = useTemplateRef<HTMLDivElement>('pageBar');
 onMounted(() => {
   pageBar.value && resizeObserver.observe(pageBar.value);
 });