位置修正

src/App.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useParticleStore } from './store/particleStore'
 import { installSystemSettingsCache } from './editor/systemSettings'
 import Stage from './views/Stage.vue'
@@ -101,19 +101,39 @@ function saveTimelineHeight() {
 const timelineH = ref(loadTimelineHeight())
 const timelineCollapsed = ref(false)
 const operationBarHeight = ref<number | null>(null)
+const renderedOperationBarHeight = ref(84)
 let lastExpandedTimelineHeight = timelineH.value
 let fullOperationBarHeight = 84
-const stageStyle = computed<Record<string, string> | undefined>(() =>
-  operationBarHeight.value == null
-    ? undefined
-    : { '--operation-bar-height': `${operationBarHeight.value}px` },
-)
+let operationBarResizeObserver: ResizeObserver | null = null
+const stageStyle = computed<Record<string, string>>(() => ({
+  '--operation-bar-rendered-height': `${renderedOperationBarHeight.value}px`,
+  ...(operationBarHeight.value == null ? {} : { '--operation-bar-height': `${operationBarHeight.value}px` }),
+}))
 const bottomPanelExpanded = computed(() =>
   !timelineCollapsed.value
   && (timelineH.value > 0 || operationBarHeight.value == null || operationBarHeight.value > 0),
 )
 let ignoreTimelineToggleClick = false
 
+onMounted(() => {
+  const operationBar = document.querySelector<HTMLElement>('.top-operation-stack')
+  if (!operationBar) return
+  const updateHeight = () => {
+    const height = operationBar.getBoundingClientRect().height
+    if (height <= 0) return
+    renderedOperationBarHeight.value = height
+    if (operationBarHeight.value == null && !timelineCollapsed.value) fullOperationBarHeight = height
+  }
+  operationBarResizeObserver = new ResizeObserver(updateHeight)
+  operationBarResizeObserver.observe(operationBar)
+  updateHeight()
+})
+
+onUnmounted(() => {
+  operationBarResizeObserver?.disconnect()
+  operationBarResizeObserver = null
+})
+
 function toggleTimeline() {
   if (ignoreTimelineToggleClick) return
   if (!bottomPanelExpanded.value) {
@@ -259,7 +279,7 @@ function onTimelineDrag(e: PointerEvent) {
   box-sizing: border-box;
 }
 .timeline-collapse-toggle {
-  position: absolute; left: 50%; bottom: calc(var(--operation-bar-height, 84px) - 1px); z-index: 21;
+  position: absolute; left: 50%; bottom: calc(var(--operation-bar-rendered-height, 84px) - 1px); z-index: 21;
   width: 96px; height: 20.4px; padding: 0; transform: translateX(-50%);
   border: 0; background: transparent; color: #8792a6; cursor: ns-resize;
   touch-action: none; user-select: none;