diff --git a/client/src/pages/TerminalPage.tsx b/client/src/pages/TerminalPage.tsx
index 1bdb680..dc70a56 100644
--- a/client/src/pages/TerminalPage.tsx
+++ b/client/src/pages/TerminalPage.tsx
@@ -310,11 +310,34 @@ const TerminalPage: React.FC = () => {
})
}
- // 调整终端大小
+ // 调整终端大小 - 增加延迟确保DOM完全更新
setTimeout(() => {
const activeSession = sessions.find(s => s.id === activeSessionId)
- if (activeSession) {
+ if (activeSession && terminalContainerRef.current) {
try {
+ // 强制重新计算容器大小
+ const container = terminalContainerRef.current
+
+ // 在全屏模式下,强制刷新容器布局
+ if (isFullscreen) {
+ container.style.width = '100vw'
+ container.style.height = 'calc(100vh - 60px)'
+ container.style.maxWidth = '100vw'
+ } else {
+ container.style.width = ''
+ container.style.height = ''
+ container.style.maxWidth = ''
+ }
+
+ // 强制浏览器重新计算布局
+ container.offsetHeight
+
+ const containerWidth = container.clientWidth || 800
+ const containerHeight = container.clientHeight || 600
+
+ console.log(`全屏切换后容器大小: ${containerWidth}x${containerHeight}, 全屏状态: ${isFullscreen}`)
+
+ // 调整终端大小以适应新的容器
activeSession.fitAddon.fit()
// 获取调整后的实际大小
@@ -329,7 +352,7 @@ const TerminalPage: React.FC = () => {
console.error('全屏状态变化时调整终端失败:', error)
}
}
- }, 200)
+ }, 500)
} catch (error) {
console.error('全屏切换失败:', error)
addNotification({
@@ -769,11 +792,34 @@ const TerminalPage: React.FC = () => {
message: '全屏模式已关闭'
})
}
- // 调整终端大小
+ // 调整终端大小 - 增加延迟确保DOM完全更新
setTimeout(() => {
const activeSession = sessions.find(s => s.id === activeSessionId)
- if (activeSession) {
+ if (activeSession && terminalContainerRef.current) {
try {
+ // 强制重新计算容器大小
+ const container = terminalContainerRef.current
+
+ // 在全屏模式下,强制刷新容器布局
+ if (isCurrentlyFullscreen) {
+ container.style.width = '100vw'
+ container.style.height = 'calc(100vh - 60px)'
+ container.style.maxWidth = '100vw'
+ } else {
+ container.style.width = ''
+ container.style.height = ''
+ container.style.maxWidth = ''
+ }
+
+ // 强制浏览器重新计算布局
+ container.offsetHeight
+
+ const containerWidth = container.clientWidth || 800
+ const containerHeight = container.clientHeight || 600
+
+ console.log(`全屏模式切换后容器大小: ${containerWidth}x${containerHeight}, 全屏状态: ${isCurrentlyFullscreen}`)
+
+ // 调整终端大小以适应新的容器
activeSession.fitAddon.fit()
// 获取调整后的实际大小
@@ -785,10 +831,10 @@ const TerminalPage: React.FC = () => {
socketClient.resizeTerminal(activeSession.id, cols, rows)
}
} catch (error) {
- console.error('全屏模式切换时调整终端失败:', error)
+ console.error('全屏模式切换时调整终端大小失败:', error)
}
}
- }, 200)
+ }, 500)
}
}
@@ -801,22 +847,287 @@ const TerminalPage: React.FC = () => {
}
}, [activeSessionId, sessions, isFullscreen, addNotification])
- // 判断侧边栏是否应该显示
- const shouldShowSidebar = !isFullscreen && (!sidebarCollapsed || sidebarHovered)
+ // 计算是否应该显示侧边栏内容
+ const shouldShowSidebar = !sidebarCollapsed || sidebarHovered
+ // 全屏模式下的渲染
+ if (isFullscreen) {
+ return (
+
+ {/* 左侧边栏 */}
+
setSidebarHovered(true)}
+ onMouseLeave={() => setSidebarHovered(false)}
+ >
+ {/* 侧边栏头部 */}
+
+ {shouldShowSidebar && (
+ <>
+
+
+
+ 终端管理
+
+
+
+
+ >
+ )}
+
+ {!shouldShowSidebar && (
+
+ )}
+
+
+ {/* 新建终端按钮 */}
+ {shouldShowSidebar && (
+
+
+
+ )}
+
+ {/* 终端会话列表 */}
+
+ {shouldShowSidebar ? (
+
+ {sessions.map((session) => (
+
switchTerminalSession(session.id)}
+ >
+
+
+
+
+ {editingSessionId === session.id ? (
+ setEditingName(e.target.value)}
+ onBlur={finishRenaming}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') finishRenaming()
+ if (e.key === 'Escape') cancelRenaming()
+ }}
+ className="bg-gray-700 text-white px-2 py-1 rounded text-sm flex-1 min-w-0"
+ autoFocus
+ onClick={(e) => e.stopPropagation()}
+ />
+ ) : (
+
+ {session.name}
+
+ )}
+
+
+
+ {editingSessionId === session.id ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {session.id}
+
+
+ ))}
+
+ {sessions.length === 0 && (
+
+ )}
+
+ ) : (
+ // 折叠状态下的简化显示
+
+ {sessions.map((session) => (
+
switchTerminalSession(session.id)}
+ title={session.name}
+ >
+
+
+ ))}
+
+ )}
+
+
+ {/* 侧边栏底部工具栏 */}
+ {shouldShowSidebar && activeSessionId && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {/* 右侧终端显示区域 */}
+
+ {sessions.length === 0 ? (
+
+
+
+
暂无终端会话
+
+
+
+ ) : (
+ <>
+ {/* 终端头部 */}
+
+
+
+
+
+ {sessions.find(s => s.active)?.name || '终端'}
+
+
+
+
+
+
+ {activeSessionId}
+
+
+
+
+
+ {/* 终端内容 */}
+
+ >
+ )}
+
+
+ )
+ }
+
+ // 普通模式下的渲染
return (
-
+
{/* 左侧终端标签页侧边栏 */}
- {!isFullscreen && (
-
setSidebarHovered(true)}
- onMouseLeave={() => setSidebarHovered(false)}
- >
+
setSidebarHovered(true)}
+ onMouseLeave={() => setSidebarHovered(false)}
+ >
{/* 侧边栏头部 */}
{shouldShowSidebar && (
@@ -1009,7 +1320,6 @@ const TerminalPage: React.FC = () => {
)}
- )}
{/* 右侧终端显示区域 */}
@@ -1043,15 +1353,6 @@ const TerminalPage: React.FC = () => {
- {isFullscreen && (
-
- )}
{activeSessionId}