fix(web): 修复控制台布局动态切换残留问题

web/src/components/ActionBar.vue

@@ -257,6 +257,18 @@ watch(locale, () => {
 })
 
 watch([() => props.layout, () => props.showComputerUse, floatingCollapsed, minimalDisplayControls], () => {
+  // Layout changes can move this bar while its portal based controls are open.
+  // Close every transient surface first so no old portal remains attached to
+  // the document after the new layout is painted.
+  overflowMenuOpen.value = false
+  pasteOpen.value = false
+  atxOpen.value = false
+  videoPopoverOpen.value = false
+  hidPopoverOpen.value = false
+  audioPopoverOpen.value = false
+  msdDialogOpen.value = false
+  mobileAtxOpen.value = false
+  mobilePasteOpen.value = false
   void observeLayout()
 })
 

web/src/views/ConsoleView.vue

@@ -3263,7 +3263,6 @@ onUnmounted(() => {
               />
             </div>
           </div>
-          <div v-if="consoleLayout === 'floating'" id="console-header-toolbar" class="console-header__toolbar" />
           <div class="console-header__account flex shrink-0 items-center gap-1 sm:gap-2">
             <ConsoleHeaderActions
               v-if="consoleLayout === 'floating'"
@@ -3355,36 +3354,39 @@ onUnmounted(() => {
         </div>
       </div>
     </header>
-    <Teleport :key="consoleLayout" defer :to="consoleLayout === 'floating' ? '#console-header-toolbar' : 'body'" :disabled="consoleLayout !== 'floating'">
+    <div
-    <ActionBar
+      class="console-actionbar-host"
-      :layout="consoleLayout"
+      :class="`console-actionbar-host--${consoleLayout}`"
-      :mouse-mode="mouseMode"
+    >
-      :video-mode="videoMode"
+      <ActionBar
-      :video-rotation="videoRotation"
+        :layout="consoleLayout"
-      :ttyd-running="ttydStatus?.running"
+        :mouse-mode="mouseMode"
-      :show-power="showPower"
+        :video-mode="videoMode"
-      :atx-enabled="systemStore.atx?.available === true"
+        :video-rotation="videoRotation"
-      :show-terminal="showTerminal"
+        :ttyd-running="ttydStatus?.running"
-      :show-computer-use="showComputerUse"
+        :show-power="showPower"
-      :show-paste-text="showPasteText"
+        :atx-enabled="systemStore.atx?.available === true"
-      :show-mic="microphoneTransferEnabled"
+        :show-terminal="showTerminal"
-      :scale-mode="videoScaleMode"
+        :show-computer-use="showComputerUse"
-      :source-size-available="sourceSizeAvailable"
+        :show-paste-text="showPasteText"
-      @toggle-fullscreen="toggleFullscreen"
+        :show-mic="microphoneTransferEnabled"
-      @update:scale-mode="setVideoScaleMode"
+        :scale-mode="videoScaleMode"
-      @toggle-stats="openStatsSheet"
+        :source-size-available="sourceSizeAvailable"
-      @toggle-virtual-keyboard="handleToggleVirtualKeyboard"
+        @toggle-fullscreen="toggleFullscreen"
-      @toggle-mouse-mode="handleToggleMouseMode"
+        @update:scale-mode="setVideoScaleMode"
-      @update:video-mode="handleVideoModeChange"
+        @toggle-stats="openStatsSheet"
-      @update:video-rotation="setVideoRotation"
+        @toggle-virtual-keyboard="handleToggleVirtualKeyboard"
-      @power-short="handlePowerShort"
+        @toggle-mouse-mode="handleToggleMouseMode"
-      @power-long="handlePowerLong"
+        @update:video-mode="handleVideoModeChange"
-      @reset="handleReset"
+        @update:video-rotation="setVideoRotation"
-      @wol="handleWol"
+        @power-short="handlePowerShort"
-      @open-terminal="openTerminal"
+        @power-long="handlePowerLong"
-      @open-computer-use="openComputerUse"
+        @reset="handleReset"
-    />
+        @wol="handleWol"
-    </Teleport>
+        @open-terminal="openTerminal"
+        @open-computer-use="openComputerUse"
+      />
+    </div>
     <div
       class="flex-1 overflow-hidden relative transition-[padding] duration-300"
       :class="consoleLayout === 'sidebar' && 'pl-14 sm:pl-16'"
@@ -3704,6 +3706,48 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+/* Keep the action bar in one DOM location while changing only its placement.
+   Moving a live Teleport target during a layout switch can leave stale portal
+   nodes behind when the target is conditionally rendered. */
+.console-actionbar-host {
+  position: relative;
+  z-index: 40;
+}
+
+.console-actionbar-host--floating {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.console-actionbar-host--floating :deep(.console-action-bar) {
+  pointer-events: auto;
+}
+
+.console-actionbar-host--sidebar :deep(.console-action-bar--sidebar) {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.console-actionbar-host--sidebar {
+  position: absolute;
+  inset: 3.5rem auto 1.75rem 0;
+  width: 4rem;
+}
+
+@media (max-width: 639px) {
+  .console-actionbar-host--sidebar {
+    inset: 2.5rem auto 1.75rem 0;
+    width: 3.5rem;
+  }
+}
+
 /* Expanded controls may overlap header actions, but stay outside the video stage. */
 .console-header--floating .console-header__row {
   position: relative;