aa457b54d4
When replaceSession changed the session ID from pending-XXX to a real UUID, Vue's :key="session.id" treated it as a new element, destroyed and recreated TerminalInstance, which called connectToHost again, got another UUID, replaced again — infinite loop. Added a stable `key` field to sessions that never changes after creation, used as the Vue :key instead of the mutable `id`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
89 lines
2.9 KiB
Vue
89 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useSessionStore } from '~/stores/session.store'
|
|
|
|
const sessions = useSessionStore()
|
|
|
|
// Sessions with pending-XXX IDs are mounting TerminalInstance which will get a real UUID.
|
|
// SFTP sidebar only connects once we have a real (non-pending) backend session ID.
|
|
function isRealSession(id: string) {
|
|
return !id.startsWith('pending-')
|
|
}
|
|
|
|
// Per-session refs to RdpCanvas instances (keyed by session.id)
|
|
// Used to forward toolbar actions (clipboard, disconnect) to the canvas
|
|
const rdpCanvasRefs = ref<Record<string, any>>({})
|
|
|
|
function setRdpRef(sessionId: string, el: any) {
|
|
if (el) {
|
|
rdpCanvasRefs.value[sessionId] = el
|
|
} else {
|
|
delete rdpCanvasRefs.value[sessionId]
|
|
}
|
|
}
|
|
|
|
function handleRdpDisconnect(sessionId: string) {
|
|
rdpCanvasRefs.value[sessionId]?.disconnect()
|
|
}
|
|
|
|
function handleRdpClipboard(sessionId: string, text: string) {
|
|
rdpCanvasRefs.value[sessionId]?.sendClipboard(text)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Session container — always in DOM when sessions exist, uses v-show for persistence -->
|
|
<div v-if="sessions.hasSessions" class="absolute inset-0 flex flex-col z-10 bg-gray-950">
|
|
<!-- Tab bar -->
|
|
<TerminalTabs />
|
|
|
|
<!-- Session panels — v-show keeps terminal alive when switching tabs -->
|
|
<div class="flex-1 overflow-hidden relative">
|
|
<div
|
|
v-for="session in sessions.sessions"
|
|
:key="session.key"
|
|
v-show="session.id === sessions.activeSessionId"
|
|
class="absolute inset-0 flex"
|
|
>
|
|
<!-- SSH session: SFTP sidebar + terminal -->
|
|
<template v-if="session.protocol === 'ssh'">
|
|
<!-- SFTP sidebar only renders once we have a real backend sessionId -->
|
|
<SftpSidebar
|
|
v-if="isRealSession(session.id)"
|
|
:session-id="session.id"
|
|
/>
|
|
<!-- Terminal — always renders, handles pending→real session ID transition internally -->
|
|
<div class="flex-1 overflow-hidden">
|
|
<TerminalInstance
|
|
:session-id="session.id"
|
|
:host-id="session.hostId"
|
|
:host-name="session.hostName"
|
|
:color="session.color"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- RDP session: Guacamole canvas + floating toolbar -->
|
|
<template v-else-if="session.protocol === 'rdp'">
|
|
<div class="flex-1 overflow-hidden relative">
|
|
<RdpCanvas
|
|
:ref="(el) => setRdpRef(session.id, el)"
|
|
:host-id="session.hostId"
|
|
:host-name="session.hostName"
|
|
:color="session.color"
|
|
/>
|
|
<RdpToolbar
|
|
:host-name="session.hostName"
|
|
@disconnect="handleRdpDisconnect(session.id)"
|
|
@send-clipboard="(text) => handleRdpClipboard(session.id, text)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transfer status bar -->
|
|
<TransferStatus :transfers="[]" />
|
|
</div>
|
|
</template>
|