7b7399912b
将终端工作区提升为主布局常驻层，离开终端路由时只隐藏不卸载组件。 新增活动终端显隐状态跟踪，页面恢复时自动重新适配尺寸和聚焦。 改动范围： - frontend/src/layouts/MainLayout.vue - frontend/src/views/TerminalWorkspaceView.vue - frontend/src/components/TerminalWidget.vue
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue'
|
|
import { useTerminalTabsStore } from '../stores/terminalTabs'
|
|
import { useConnectionsStore } from '../stores/connections'
|
|
import TerminalWidget from '../components/TerminalWidget.vue'
|
|
|
|
const props = defineProps<{
|
|
visible?: boolean
|
|
}>()
|
|
|
|
const tabsStore = useTerminalTabsStore()
|
|
const connectionsStore = useConnectionsStore()
|
|
|
|
const tabs = computed(() => tabsStore.tabs)
|
|
|
|
onMounted(() => {
|
|
// 确保连接列表已加载
|
|
if (connectionsStore.connections.length === 0) {
|
|
connectionsStore.fetchConnections()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full flex flex-col">
|
|
<!-- 终端内容区 -->
|
|
<div class="flex-1 min-h-0 p-4">
|
|
<div v-if="tabs.length === 0" class="flex items-center justify-center h-full text-slate-400">
|
|
<div class="text-center">
|
|
<p class="text-lg mb-2">暂无打开的终端</p>
|
|
<p class="text-sm text-slate-500">从左侧连接列表点击"终端"按钮打开</p>
|
|
</div>
|
|
</div>
|
|
<div v-else class="h-full">
|
|
<div
|
|
v-for="tab in tabs"
|
|
:key="tab.id"
|
|
v-show="tab.active"
|
|
class="h-full"
|
|
>
|
|
<TerminalWidget
|
|
:connection-id="tab.connectionId"
|
|
:active="tab.active && props.visible !== false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|