From cf3e171438d23faa86709f8fae3dce6d3922a5af Mon Sep 17 00:00:00 2001
From: dalaolala <sapxcode@gmail.com>
Date: Sat, 28 Feb 2026 11:16:13 +0800
Subject: [PATCH] feat: Implement quick SSH connect feature with connection
 history management and dedicated terminal views.

---
 frontend/src/router/index.js                |    8 +-
 frontend/src/views/QuickConnect.vue         |  689 ++++++++----
 frontend/src/views/QuickConnectTerminal.vue | 1049 +++++++++++++++++++
 frontend/src/views/Terminal.vue             |    8 +
 4 files changed, 1533 insertions(+), 221 deletions(-)
 create mode 100644 frontend/src/views/QuickConnectTerminal.vue

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 8e2c329..9d69fcf 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -38,6 +38,12 @@ const routes = [
     component: () => import('@/views/QuickConnect.vue'),
     meta: { requiresAuth: true }
   },
+  {
+    path: '/quick-connect-terminal',
+    name: 'QuickConnectTerminal',
+    component: () => import('@/views/QuickConnectTerminal.vue'),
+    meta: { requiresAuth: true }
+  },
   {
     path: '/terminal-new',
     name: 'TerminalNew',
@@ -66,7 +72,7 @@ const router = createRouter({
 // 路由守卫
 router.beforeEach((to, from, next) => {
   const authStore = useAuthStore()
-  
+
   // 检查是否需要认证
   if (to.meta.requiresAuth && !authStore.isAuthenticated) {
     next('/login')
diff --git a/frontend/src/views/QuickConnect.vue b/frontend/src/views/QuickConnect.vue
index 436e986..1fac7c7 100644
--- a/frontend/src/views/QuickConnect.vue
+++ b/frontend/src/views/QuickConnect.vue
@@ -4,7 +4,7 @@
       <!-- 顶部工具栏 -->
       <el-header class="quick-connect-header">
         <div class="header-left">
-          <el-button @click="$router.back()" size="small">
+          <el-button @click="$router.push('/dashboard')" size="small">
             <el-icon><ArrowLeft /></el-icon>
             返回
           </el-button>
@@ -12,133 +12,183 @@
         </div>
       </el-header>
       
-      <!-- 主内容区域 -->
-      <el-main class="quick-connect-main">
-        <div class="connect-form-container">
-          <el-card class="connect-card">
-            <template #header>
-              <div class="card-header">
-                <h3>SSH连接信息</h3>
-                <p>输入服务器信息进行一次性连接（不保存）</p>
-              </div>
-            </template>
-            
-            <el-form :model="form" :rules="rules" ref="connectForm" label-width="100px">
-              <el-form-item label="主机地址" prop="host">
-                <el-input v-model="form.host" placeholder="请输入IP地址或域名" />
-              </el-form-item>
-              
-              <el-form-item label="端口" prop="port">
-                <el-input-number v-model="form.port" :min="1" :max="65535" />
-              </el-form-item>
-              
-              <el-form-item label="用户名" prop="username">
-                <el-input v-model="form.username" placeholder="请输入SSH用户名" />
-              </el-form-item>
-              
-              <el-form-item label="认证方式" prop="authType">
-                <el-radio-group v-model="form.authType">
-                  <el-radio label="password">密码认证</el-radio>
-                  <el-radio label="key">私钥认证</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              
-              <el-form-item v-if="form.authType === 'password'" label="密码" prop="password">
-                <el-input 
-                  v-model="form.password" 
-                  type="password" 
-                  placeholder="请输入SSH密码" 
-                  show-password 
-                />
-              </el-form-item>
-              
-              <el-form-item v-if="form.authType === 'key'" label="私钥" prop="privateKey">
-                <el-input 
-                  v-model="form.privateKey" 
-                  type="textarea" 
-                  :rows="6" 
-                  placeholder="请输入SSH私钥内容" 
-                />
-              </el-form-item>
-              
-              <el-form-item>
-                <el-button 
-                  type="primary" 
-                  :loading="connecting" 
-                  @click="handleConnect"
-                  style="width: 100%"
-                >
-                  <el-icon><Connection /></el-icon>
-                  连接
-                </el-button>
-              </el-form-item>
-            </el-form>
-            
-            <!-- 连接状态提示 -->
-            <div v-if="connectionError" class="connection-error">
-              <el-alert 
-                :title="connectionError" 
-                type="error" 
-                show-icon 
+      <!-- 主内容区域：左侧历史树 + 右侧表单 -->
+      <el-container class="main-body">
+        <!-- 左侧：连接历史树 -->
+        <el-aside class="history-aside" width="300px">
+          <div class="aside-header">
+            <span class="aside-title">连接历史</span>
+            <el-button 
+              v-if="historyList.length > 0"
+              type="danger" 
+              size="small" 
+              text 
+              @click="clearAllHistory"
+            >
+              <el-icon><Delete /></el-icon>
+              清空
+            </el-button>
+          </div>
+
+          <div v-if="historyList.length > 0" class="history-tree">
+            <el-tree
+              :data="treeData"
+              :props="treeProps"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleTreeNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="tree-node" :class="{ 'is-leaf': data.isLeaf }">
+                  <el-icon v-if="!data.isLeaf" class="tree-folder-icon"><Folder /></el-icon>
+                  <el-icon v-else class="tree-server-icon"><Monitor /></el-icon>
+                  <span class="tree-node-label">{{ node.label }}</span>
+                  <div class="tree-node-actions" v-if="data.isLeaf">
+                    <el-tag v-if="data.record?.hasSavedCredential" size="small" type="success" class="tree-tag">
+                      <el-icon style="vertical-align: middle;"><Lock /></el-icon>
+                    </el-tag>
+                    <el-button 
+                      type="danger" 
+                      size="small" 
+                      text 
+                      circle
+                      class="tree-delete-btn"
+                      @click.stop="removeHistoryByRecord(data.record)"
+                    >
+                      <el-icon><Close /></el-icon>
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <!-- 空状态 -->
+          <div v-else class="history-empty">
+            <el-empty description="暂无连接历史" :image-size="64" />
+          </div>
+
+        </el-aside>
+
+        <!-- 右侧：连接表单 -->
+        <el-main class="form-main">
+          <div class="connect-form-container">
+            <el-card class="connect-card">
+              <template #header>
+                <div class="card-header">
+                  <h3>SSH连接信息</h3>
+                  <p>输入服务器信息进行快速连接</p>
+                </div>
+              </template>
+
+              <el-alert
+                title="快速连接数据保存在本地浏览器中，更换设备或清除浏览器数据后将会丢失。"
+                type="warning"
+                show-icon
                 :closable="false"
+                style="margin-bottom: 20px;"
               />
-            </div>
-            
-            <div v-if="connecting" class="connecting-status">
-              <el-alert 
-                title="正在连接..." 
-                type="info" 
-                show-icon 
-                :closable="false"
-              />
-            </div>
-          </el-card>
-          
-          <!-- 快速连接示例 -->
-          <el-card class="examples-card">
-            <template #header>
-              <div class="card-header">
-                <h3>连接示例</h3>
-              </div>
-            </template>
-            
-            <div class="examples">
-              <div class="example-item" @click="fillExample('ubuntu')">
-                <h4>Ubuntu服务器</h4>
-                <p>主机: 192.168.1.100</p>
-                <p>端口: 22</p>
-                <p>用户: ubuntu</p>
+              
+              <el-form :model="form" :rules="rules" ref="connectForm" label-width="100px">
+                <el-form-item label="服务器名称" prop="name">
+                  <el-input v-model="form.name" placeholder="请输入服务器名称（可选）" />
+                </el-form-item>
+                
+                <el-form-item label="主机地址" prop="host">
+                  <el-input v-model="form.host" placeholder="请输入IP地址或域名" />
+                </el-form-item>
+                
+                <el-form-item label="端口" prop="port">
+                  <el-input-number v-model="form.port" :min="1" :max="65535" />
+                </el-form-item>
+                
+                <el-form-item label="用户名" prop="username">
+                  <el-input v-model="form.username" placeholder="请输入SSH用户名" />
+                </el-form-item>
+                
+                <el-form-item label="认证方式" prop="authType">
+                  <el-radio-group v-model="form.authType">
+                    <el-radio label="password">密码认证</el-radio>
+                    <el-radio label="key">私钥认证</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                
+                <el-form-item v-if="form.authType === 'password'" label="密码" prop="password">
+                  <el-input 
+                    v-model="form.password" 
+                    type="password" 
+                    placeholder="请输入SSH密码" 
+                    show-password 
+                  />
+                </el-form-item>
+                
+                <el-form-item v-if="form.authType === 'key'" label="私钥" prop="privateKey">
+                  <el-input 
+                    v-model="form.privateKey" 
+                    type="textarea" 
+                    :rows="6" 
+                    placeholder="请输入SSH私钥内容" 
+                  />
+                </el-form-item>
+
+                <!-- 保存密码复选框 -->
+                <el-form-item label=" ">
+                  <el-checkbox v-model="savePassword">
+                    保存密码到本地（记住凭据）
+                  </el-checkbox>
+                </el-form-item>
+                
+                <el-form-item>
+                  <el-button 
+                    type="primary" 
+                    :loading="connecting" 
+                    @click="handleConnect"
+                    style="width: 100%"
+                  >
+                    <el-icon><Connection /></el-icon>
+                    连接
+                  </el-button>
+                </el-form-item>
+              </el-form>
+              
+              <!-- 连接状态提示 -->
+              <div v-if="connectionError" class="connection-error">
+                <el-alert 
+                  :title="connectionError" 
+                  type="error" 
+                  show-icon 
+                  :closable="false"
+                />
               </div>
               
-              <div class="example-item" @click="fillExample('centos')">
-                <h4>CentOS服务器</h4>
-                <p>主机: 192.168.1.101</p>
-                <p>端口: 22</p>
-                <p>用户: root</p>
+              <div v-if="connecting" class="connecting-status">
+                <el-alert 
+                  title="正在连接..." 
+                  type="info" 
+                  show-icon 
+                  :closable="false"
+                />
               </div>
-              
-              <div class="example-item" @click="fillExample('docker')">
-                <h4>Docker容器</h4>
-                <p>主机: localhost</p>
-                <p>端口: 2222</p>
-                <p>用户: root</p>
-              </div>
-            </div>
-          </el-card>
-        </div>
-      </el-main>
+            </el-card>
+          </div>
+        </el-main>
+      </el-container>
     </el-container>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { ArrowLeft, Connection } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ArrowLeft, Connection, Delete, Close, Monitor, Lock, Folder } from '@element-plus/icons-vue'
 import { useTerminalStore } from '@/stores/terminal'
 import { useAuthStore } from '@/stores/auth'
 
+const HISTORY_KEY = 'webssh_quick_connect_history'
+const MAX_HISTORY = 20
+
 const router = useRouter()
 const terminalStore = useTerminalStore()
 const authStore = useAuthStore()
@@ -146,8 +196,11 @@ const authStore = useAuthStore()
 const connectForm = ref()
 const connecting = ref(false)
 const connectionError = ref('')
+const savePassword = ref(false)
+const historyList = ref([])
 
 const form = reactive({
+  name: '',
   host: '',
   port: 22,
   username: '',
@@ -193,7 +246,147 @@ const rules = {
   ]
 }
 
-// 处理连接
+// ========== 树形数据 ==========
+
+const treeProps = {
+  children: 'children',
+  label: 'label'
+}
+
+// 将 historyList 转换为树形结构，按主机地址分组
+const treeData = computed(() => {
+  const groups = {}
+  
+  historyList.value.forEach((item, index) => {
+    const groupKey = item.host
+    if (!groups[groupKey]) {
+      groups[groupKey] = {
+        id: `group-${groupKey}`,
+        label: groupKey,
+        isLeaf: false,
+        children: []
+      }
+    }
+    
+    const displayName = item.name || `${item.username}@${item.host}:${item.port}`
+    groups[groupKey].children.push({
+      id: `item-${index}`,
+      label: displayName,
+      isLeaf: true,
+      record: item,
+      index: index
+    })
+  })
+  
+  return Object.values(groups)
+})
+
+const handleTreeNodeClick = (data) => {
+  if (data.isLeaf && data.record) {
+    fillFromHistory(data.record)
+  }
+}
+
+// ========== 历史记录管理 ==========
+
+const loadHistory = () => {
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY)
+    historyList.value = raw ? JSON.parse(raw) : []
+  } catch {
+    historyList.value = []
+  }
+}
+
+const persistHistory = () => {
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(historyList.value))
+}
+
+const saveToHistory = () => {
+  const record = {
+    name: form.name || '',
+    host: form.host,
+    port: form.port,
+    username: form.username,
+    authType: form.authType,
+    connectedAt: Date.now(),
+    hasSavedCredential: savePassword.value
+  }
+
+  if (savePassword.value) {
+    if (form.authType === 'password') {
+      record.password = form.password
+    } else {
+      record.privateKey = form.privateKey
+    }
+  }
+
+  const idx = historyList.value.findIndex(
+    h => h.host === record.host && h.port === record.port && h.username === record.username
+  )
+  if (idx !== -1) {
+    historyList.value.splice(idx, 1)
+  }
+
+  historyList.value.unshift(record)
+
+  if (historyList.value.length > MAX_HISTORY) {
+    historyList.value = historyList.value.slice(0, MAX_HISTORY)
+  }
+
+  persistHistory()
+}
+
+const fillFromHistory = (item) => {
+  form.name = item.name || ''
+  form.host = item.host
+  form.port = item.port
+  form.username = item.username
+  form.authType = item.authType
+
+  if (item.hasSavedCredential) {
+    savePassword.value = true
+    if (item.authType === 'password') {
+      form.password = item.password || ''
+      form.privateKey = ''
+    } else {
+      form.privateKey = item.privateKey || ''
+      form.password = ''
+    }
+  } else {
+    savePassword.value = false
+    form.password = ''
+    form.privateKey = ''
+  }
+
+  ElMessage.success('已填充连接信息，请检查后点击连接')
+}
+
+const removeHistoryByRecord = (record) => {
+  const idx = historyList.value.findIndex(
+    h => h.host === record.host && h.port === record.port && h.username === record.username
+  )
+  if (idx !== -1) {
+    historyList.value.splice(idx, 1)
+    persistHistory()
+    ElMessage.info('已删除')
+  }
+}
+
+const clearAllHistory = () => {
+  ElMessageBox.confirm('确定要清空所有连接历史吗？', '清空历史', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    historyList.value = []
+    persistHistory()
+    ElMessage.success('已清空所有历史记录')
+  }).catch(() => {})
+}
+
+// ========== 连接逻辑 ==========
+
 const handleConnect = async () => {
   if (!connectForm.value) return
   
@@ -206,15 +399,23 @@ const handleConnect = async () => {
       return
     }
 
-    // 初始化Socket连接
-    if (!terminalStore.socket) {
-      terminalStore.connectSocket(authStore.token)
-    }
-
     connecting.value = true
     connectionError.value = ''
+
+    if (!terminalStore.socket) {
+      try {
+        await terminalStore.connectSocket(authStore.token)
+      } catch (error) {
+        connecting.value = false
+        connectionError.value = 'Socket连接失败: ' + error.message
+        return
+      }
+    }
+
+    saveToHistory()
     
     const connectionInfo = {
+      name: form.name || '',
       host: form.host,
       port: form.port,
       username: form.username
@@ -226,32 +427,10 @@ const handleConnect = async () => {
       connectionInfo.privateKey = form.privateKey
     }
     
-    // 执行快速连接
     terminalStore.quickConnect(connectionInfo)
     
-    // 监听连接状态
-    const checkConnection = setInterval(() => {
-      if (terminalStore.isConnected) {
-        clearInterval(checkConnection)
-        connecting.value = false
-        ElMessage.success('连接成功')
-        // 跳转到终端页面
-        router.push('/terminal')
-      } else if (terminalStore.connectionError) {
-        clearInterval(checkConnection)
-        connecting.value = false
-        connectionError.value = terminalStore.connectionError
-      }
-    }, 500)
-    
-    // 超时检查
-    setTimeout(() => {
-      if (connecting.value) {
-        clearInterval(checkConnection)
-        connecting.value = false
-        connectionError.value = '连接超时，请检查网络和服务器状态'
-      }
-    }, 15000)
+    connecting.value = false
+    router.push('/quick-connect-terminal')
     
   } catch (error) {
     connecting.value = false
@@ -259,49 +438,21 @@ const handleConnect = async () => {
   }
 }
 
-// 填充示例数据
-const fillExample = (type) => {
-  const examples = {
-    ubuntu: {
-      host: '192.168.1.100',
-      port: 22,
-      username: 'ubuntu',
-      authType: 'password',
-      password: ''
-    },
-    centos: {
-      host: '192.168.1.101',
-      port: 22,
-      username: 'root',
-      authType: 'password',
-      password: ''
-    },
-    docker: {
-      host: 'localhost',
-      port: 2222,
-      username: 'root',
-      authType: 'password',
-      password: ''
-    }
-  }
-  
-  Object.assign(form, examples[type])
-  ElMessage.info(`已填充${type}示例配置，请填写密码后连接`)
-}
-
 onMounted(() => {
-  // 组件挂载时的初始化
+  loadHistory()
 })
 </script>
 
 <style scoped>
 .quick-connect-page {
   height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #f0f2f5;
 }
 
 .quick-connect-container {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .quick-connect-header {
@@ -310,6 +461,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   padding: 0 20px;
+  flex-shrink: 0;
 }
 
 .header-left {
@@ -324,31 +476,153 @@ onMounted(() => {
   color: #333;
 }
 
-.quick-connect-main {
-  padding: 40px;
+/* 主体布局 */
+.main-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 左侧历史树 */
+.history-aside {
+  background: white;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.aside-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+
+.aside-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.history-tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.history-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aside-tip {
+  flex-shrink: 0;
+  padding: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* 树节点样式 */
+.tree-node {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 2px 0;
+  font-size: 13px;
+}
+
+.tree-folder-icon {
+  color: #e6a23c;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.tree-server-icon {
+  color: #409eff;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #303133;
+}
+
+.tree-node.is-leaf .tree-node-label {
+  color: #606266;
+}
+
+.tree-node-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.tree-node:hover .tree-node-actions {
+  opacity: 1;
+}
+
+.tree-tag {
+  transform: scale(0.85);
+}
+
+.tree-delete-btn {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+/* Element Tree 深度覆盖 */
+:deep(.el-tree-node__content) {
+  height: 36px;
+  padding-right: 8px !important;
+}
+
+:deep(.el-tree-node__content:hover) {
+  background-color: #f5f7fa;
+}
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+  background-color: #ecf5ff;
+}
+
+/* 右侧表单 */
+.form-main {
+  padding: 30px 40px;
+  overflow-y: auto;
   display: flex;
   justify-content: center;
+  align-items: flex-start;
 }
 
 .connect-form-container {
   width: 100%;
-  max-width: 600px;
+  max-width: 580px;
 }
 
-.connect-card,
-.examples-card {
+.connect-card {
   margin-bottom: 20px;
 }
 
 .card-header h3 {
-  margin: 0 0 8px 0;
+  margin: 0 0 4px 0;
   color: #333;
 }
 
 .card-header p {
   margin: 0;
-  color: #666;
-  font-size: 14px;
+  color: #999;
+  font-size: 13px;
 }
 
 .connection-error,
@@ -356,46 +630,21 @@ onMounted(() => {
   margin-top: 20px;
 }
 
-.examples {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
-
-.example-item {
-  padding: 16px;
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.example-item:hover {
-  border-color: #409eff;
-  background-color: #f5f7fa;
-  transform: translateY(-2px);
-}
-
-.example-item h4 {
-  margin: 0 0 8px 0;
-  color: #333;
-  font-size: 14px;
-}
-
-.example-item p {
-  margin: 4px 0;
-  color: #666;
-  font-size: 12px;
-}
-
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .quick-connect-main {
-    padding: 20px;
+  .main-body {
+    flex-direction: column;
   }
   
-  .examples {
-    grid-template-columns: 1fr;
+  .history-aside {
+    width: 100% !important;
+    max-height: 200px;
+    border-right: none;
+    border-bottom: 1px solid #e4e7ed;
+  }
+  
+  .form-main {
+    padding: 20px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/QuickConnectTerminal.vue b/frontend/src/views/QuickConnectTerminal.vue
new file mode 100644
index 0000000..54d046e
--- /dev/null
+++ b/frontend/src/views/QuickConnectTerminal.vue
@@ -0,0 +1,1049 @@
+<template>
+  <div class="terminal-page">
+    <el-container class="terminal-container">
+      <!-- 顶部工具栏 -->
+      <el-header class="terminal-header" height="36px">
+        <div class="header-left">
+          <el-button @click="goBack" size="small" text style="color: #ccc;">
+            <el-icon><ArrowLeft /></el-icon>
+            返回
+          </el-button>
+          <span class="server-name">{{ serverTitle }}</span>
+          <span class="server-info">{{ connectionDisplay }}</span>
+        </div>
+      </el-header>
+      
+      <!-- 主内容区域 -->
+      <el-container class="main-content">
+        <!-- SFTP文件管理器侧边栏 -->
+        <el-aside 
+          v-if="showSftp && terminalStore.isConnected" 
+          class="sftp-sidebar"
+          :width="sftpPanelWidth + 'px'"
+        >
+          <div class="sftp-header">
+            <h3>文件管理器</h3>
+            <el-button size="small" @click="connectSftp" :loading="sftpStore.loading">
+              <el-icon><Connection /></el-icon>
+              连接SFTP
+            </el-button>
+          </div>
+          
+          <SftpFileManager v-if="sftpStore.isConnected" />
+          
+          <div v-else class="sftp-prompt">
+            <el-icon size="48" color="#909399"><Folder /></el-icon>
+            <p>点击"连接SFTP"按钮启用文件管理</p>
+          </div>
+        </el-aside>
+        
+        <!-- 终端内容区域 -->
+        <el-main class="terminal-main" :style="{ width: showSftp ? `calc(100% - ${sftpPanelWidth}px)` : '100%' }">
+          <div 
+            ref="terminalRef" 
+            class="terminal" 
+            @click="focusTerminal"
+            @contextmenu.prevent="showContextMenu"
+          ></div>
+          
+          <!-- 右键菜单 -->
+          <div 
+            v-if="contextMenu.visible" 
+            class="context-menu" 
+            :style="{ 
+              left: contextMenu.x + 'px', 
+              top: contextMenu.y + 'px' 
+            }"
+            @mouseleave="hideContextMenu"
+          >
+            <div 
+              class="menu-item" 
+              @click="copyFromContextMenu"
+              :class="{ disabled: !hasSelection }"
+            >
+              <el-icon><DocumentCopy /></el-icon>
+              <span>复制</span>
+            </div>
+            <div class="menu-divider"></div>
+            <div 
+              class="menu-item" 
+              @click="pasteFromContextMenu"
+              :class="{ disabled: !terminalStore.isConnected }"
+            >
+              <el-icon><DocumentAdd /></el-icon>
+              <span>粘贴</span>
+            </div>
+            <div class="menu-divider"></div>
+            <div class="menu-item" @click="selectAllFromContextMenu">
+              <el-icon><Select /></el-icon>
+              <span>全选</span>
+            </div>
+            <div class="menu-divider"></div>
+            <div class="menu-item" @click="clearTerminal">
+              <el-icon><Delete /></el-icon>
+              <span>清屏</span>
+            </div>
+          </div>
+          
+          <!-- 连接提示 -->
+          <div v-if="terminalStore.isConnecting" class="connection-status">
+            <el-alert 
+              title="正在连接服务器..." 
+              type="info" 
+              show-icon 
+              :closable="false"
+              center
+            />
+          </div>
+          
+          <!-- 连接状态提示 -->
+          <div v-if="terminalStore.connectionError" class="connection-error">
+            <el-alert 
+              :title="terminalStore.connectionError" 
+              type="error" 
+              show-icon 
+              :closable="false"
+            />
+          </div>
+          
+          <div v-else-if="!terminalStore.isConnected && !terminalStore.isConnecting" class="connection-prompt">
+            <div class="prompt-content">
+              <el-icon size="48" color="#909399"><Monitor /></el-icon>
+              <h3>准备连接</h3>
+              <p>正在初始化快速连接...</p>
+            </div>
+          </div>
+        </el-main>
+      </el-container>
+      
+      <!-- 状态栏 -->
+      <el-footer class="terminal-footer" v-if="terminalStore.isConnected">
+        <div class="status-bar">
+          <span class="status-item">
+            <el-icon><Connection /></el-icon>
+            已连接
+          </span>
+          <span class="status-item">
+            <el-icon><Monitor /></el-icon>
+            {{ connectionDisplay }}
+          </span>
+        </div>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import { WebLinksAddon } from 'xterm-addon-web-links'
+import { ArrowLeft, Connection, Close, Delete, Monitor, Folder, Document, Edit, DocumentCopy, DocumentAdd, Select } from '@element-plus/icons-vue'
+import { useTerminalStore } from '@/stores/terminal'
+import { useAuthStore } from '@/stores/auth'
+import { useSftpStore } from '@/stores/sftp'
+import { ElMessage } from 'element-plus'
+import SftpFileManager from '@/components/SftpFileManager.vue'
+
+const router = useRouter()
+const terminalStore = useTerminalStore()
+const authStore = useAuthStore()
+const sftpStore = useSftpStore()
+
+const terminalRef = ref()
+const showSftp = ref(false)
+const sftpPanelWidth = ref(350)
+
+// 右键菜单相关
+const contextMenu = ref({
+  visible: false,
+  x: 0,
+  y: 0
+})
+
+let term = null
+let fitAddon = null
+let initialScrollTop = 0
+let wheelHandler = null
+let viewportWheelHandler = null
+let isComposing = false
+
+// 连接显示信息（从 terminalStore.currentConnection 获取）
+const connectionDisplay = computed(() => {
+  const conn = terminalStore.currentConnection
+  if (conn) {
+    return `${conn.username || ''}@${conn.host || ''}:${conn.port || 22}`
+  }
+  return ''
+})
+
+const serverTitle = computed(() => {
+  const conn = terminalStore.currentConnection
+  return conn?.name || '快速连接'
+})
+
+// 返回快速连接页面
+const goBack = () => {
+  terminalStore.disconnect()
+  router.push('/quick-connect')
+}
+
+// 初始化终端
+const initTerminal = () => {
+  term = new Terminal({
+    cursorBlink: true,
+    fontSize: 14,
+    fontFamily: 'Courier New, monospace',
+    theme: {
+      background: '#1e1e1e',
+      foreground: '#ffffff',
+      cursor: '#ffffff',
+      cursorAccent: '#ffffff',
+      selection: 'rgba(58, 134, 255, 0.3)',
+      selectionForeground: undefined
+    },
+    disableStdin: false,
+    scrollback: 10000,
+    convertEol: true,
+    allowTransparency: false,
+    tabStopWidth: 8,
+    cursorStyle: 'block',
+    bellStyle: 'sound',
+    allowProposedApi: true,
+    windowsMode: true,
+    screenReaderMode: false,
+    scrollOnUserInput: true,
+    scrollOnOutput: false,
+    scrollSensitivity: 3,
+    smoothScrollDuration: 0,
+    fastScrollSensitivity: 5,
+    fastScrollModifier: 'alt',
+    macOptionIsMeta: false,
+    macOptionClickForcesSelection: false,
+    rightClickSelectsWord: false,
+    rendererType: 'canvas',
+  })
+
+  fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  
+  const webLinksAddon = new WebLinksAddon()
+  term.loadAddon(webLinksAddon)
+  
+    if (terminalRef.value) {
+      term.open(terminalRef.value)
+      fitAddon.fit()
+      
+      term.focus()
+      
+      // IME 修复（与 Terminal.vue 相同）
+      const setupHelperTextarea = () => {
+        const textarea = terminalRef.value?.querySelector('.xterm-helper-textarea')
+        if (textarea && !textarea._imeFixed) {
+          textarea._imeFixed = true
+
+          textarea.style.opacity = '0'
+          textarea.style.color = 'transparent'
+          textarea.style.position = 'absolute'
+          textarea.style.bottom = '4px'
+          textarea.style.left = '4px'
+          textarea.style.width = '1px'
+          textarea.style.height = '1px'
+          textarea.style.zIndex = '1'
+          textarea.style.caretColor = 'transparent'
+
+          textarea.addEventListener('compositionstart', (e) => {
+            isComposing = true
+            e.stopImmediatePropagation()
+          }, true)
+
+          textarea.addEventListener('compositionupdate', (e) => {
+            e.stopImmediatePropagation()
+          }, true)
+
+          textarea.addEventListener('compositionend', (e) => {
+            e.stopImmediatePropagation()
+            isComposing = false
+            const text = e.data
+            if (text && terminalStore.isConnected) {
+              terminalStore.sendInput(text)
+            }
+            Promise.resolve().then(() => { textarea.value = '' })
+          }, true)
+        }
+      }
+      
+      setupHelperTextarea()
+      
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList') {
+            setupHelperTextarea()
+          }
+        })
+      })
+      
+      observer.observe(terminalRef.value, { childList: true, subtree: true })
+      
+      // 处理终端输入
+      term.onData((data) => {
+        if (isComposing) {
+          return
+        }
+        if (terminalStore.isConnected) {
+          terminalStore.sendInput(data)
+        } else {
+          term.write('\r\n\x1b[31m未连接到服务器，请先连接\x1b[0m\r\n')
+        }
+      })
+      
+      // 优化鼠标滚轮事件处理
+      const enableWheelScroll = () => {
+        const viewport = terminalRef.value?.querySelector('.xterm-viewport')
+        if (viewport) {
+          if (viewportWheelHandler) {
+            viewport.removeEventListener('wheel', viewportWheelHandler)
+          }
+          
+          viewportWheelHandler = (event) => {
+            event.preventDefault()
+            const deltaY = event.deltaY
+            const deltaMode = event.deltaMode
+            
+            if (deltaMode === 0) {
+              const scrollAmount = Math.sign(deltaY) * Math.ceil(Math.abs(deltaY) / 8)
+              viewport.scrollTop += scrollAmount * 20
+            } else if (deltaMode === 1) {
+              viewport.scrollTop += deltaY * 20
+            } else {
+              viewport.scrollTop += deltaY * viewport.clientHeight
+            }
+          }
+          
+          viewport.addEventListener('wheel', viewportWheelHandler, { passive: false })
+          
+          viewport.style.overflowY = 'auto'
+          viewport.style.overflowX = 'hidden'
+        }
+      }
+      
+      enableWheelScroll()
+      
+      const wheelObserver = new MutationObserver(() => {
+        enableWheelScroll()
+      })
+      wheelObserver.observe(terminalRef.value, { childList: true, subtree: true })
+      
+      wheelHandler = (e) => {
+        const viewport = terminalRef.value?.querySelector('.xterm-viewport')
+        if (viewport) {
+          e.preventDefault()
+          viewport.scrollTop += e.deltaY
+        }
+      }
+      terminalRef.value.addEventListener('wheel', wheelHandler, { passive: false })
+    
+    // 处理终端按键事件
+    term.attachCustomKeyEventHandler((event) => {
+      if ((event.ctrlKey || event.metaKey) && 
+          !['c', 'v', 'a', 'z', 'x', 'y'].includes(event.key.toLowerCase())) {
+        event.preventDefault()
+      }
+      return true
+    })
+    
+    // 防止空格触发容器或页面滚动
+    term.attachCustomKeyEventHandler((event) => {
+      if (event.code === 'Space' || event.key === ' ') {
+        event.preventDefault()
+        if (terminalStore.isConnected) {
+          terminalStore.sendInput(' ')
+          term.scrollToBottom()
+        }
+        return false
+      }
+      return true
+    })
+    
+    // 添加粘贴支持
+    term.attachCustomKeyEventHandler((event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v') {
+        event.preventDefault()
+        navigator.clipboard.readText().then(text => {
+          if (terminalStore.isConnected) {
+            terminalStore.sendInput(text)
+          }
+        }).catch(err => {
+          console.warn('粘贴失败:', err)
+        })
+        return false
+      }
+      return true
+    })
+    
+    // 添加复制支持
+    term.attachCustomKeyEventHandler((event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+        const selection = term.getSelection()
+        if (selection) {
+          navigator.clipboard.writeText(selection).catch(err => {
+            console.warn('复制失败:', err)
+          })
+        }
+      }
+      return true
+    })
+  }
+}
+
+// 聚焦终端
+const focusTerminal = () => {
+  if (term) {
+    term.focus()
+  }
+}
+
+// 切换SFTP面板显示
+const toggleSftpPanel = () => {
+  showSftp.value = !showSftp.value
+  
+  setTimeout(() => {
+    handleResize()
+  }, 100)
+}
+
+// 连接SFTP
+const connectSftp = async () => {
+  const conn = terminalStore.currentConnection
+  if (!conn) {
+    console.error('没有可用的连接信息')
+    return
+  }
+  
+  const success = await sftpStore.connectSftp(conn)
+  if (success) {
+    console.log('SFTP连接成功')
+  }
+}
+
+// 右键菜单相关功能
+const showContextMenu = (event) => {
+  event.preventDefault()
+  
+  contextMenu.value = {
+    visible: true,
+    x: event.clientX,
+    y: event.clientY
+  }
+}
+
+const hideContextMenu = () => {
+  contextMenu.value.visible = false
+}
+
+// 全局点击关闭右键菜单
+const onDocumentClick = () => {
+  if (contextMenu.value.visible) {
+    hideContextMenu()
+  }
+}
+
+const hasSelection = () => {
+  return term && term.getSelection() && term.getSelection().length > 0
+}
+
+const copyFromContextMenu = async () => {
+  if (term && hasSelection()) {
+    const selection = term.getSelection()
+    try {
+      await navigator.clipboard.writeText(selection)
+      ElMessage.success(`已复制 ${selection.length} 个字符`)
+      hideContextMenu()
+    } catch (error) {
+      console.warn('复制失败:', error)
+      ElMessage.error('复制失败，请重试')
+    }
+  }
+}
+
+const pasteFromContextMenu = async () => {
+  if (term && terminalStore.isConnected) {
+    try {
+      const text = await navigator.clipboard.readText()
+      terminalStore.sendInput(text)
+      hideContextMenu()
+    } catch (error) {
+      console.warn('粘贴失败:', error)
+      ElMessage.error('粘贴失败，请重试')
+    }
+  }
+}
+
+const selectAllFromContextMenu = () => {
+  if (term) {
+    term.selectAll()
+    hideContextMenu()
+  }
+}
+
+const clearTerminal = () => {
+  resetConnectedState()
+}
+
+const copySelected = async () => {
+  if (term) {
+    const selection = term.getSelection()
+    if (selection) {
+      try {
+        await navigator.clipboard.writeText(selection)
+        
+        const copyButton = document.querySelector('.copy-button')
+        if (copyButton) {
+          copyButton.classList.add('copied')
+          setTimeout(() => {
+            copyButton.classList.remove('copied')
+          }, 1000)
+        }
+        
+        ElMessage.success(`已复制 ${selection.length} 个字符`)
+      } catch (error) {
+        console.warn('复制失败:', error)
+        ElMessage.error('复制失败，请重试')
+      }
+    } else {
+      ElMessage.warning('请先选中要复制的文本')
+    }
+  }
+}
+
+const pasteFromClipboard = async () => {
+  try {
+    const text = await navigator.clipboard.readText()
+    if (text) {
+      terminalStore.sendInput(text)
+    }
+  } catch (e) {}
+}
+
+const resetConnectedState = () => {
+  terminalStore.clearOutput()
+  if (term) {
+    term.reset()
+    term.focus()
+    term.write('\x1b[32mSSH连接已建立，可以开始输入命令\x1b[0m\r\n\r\n')
+    term.write('\x1b[?25h')
+    if (typeof term.scrollToTop === 'function') {
+      term.scrollToTop()
+    }
+    const viewport = terminalRef.value?.querySelector('.xterm-viewport')
+    if (viewport) {
+      viewport.scrollTop = initialScrollTop || 0
+    }
+  }
+}
+
+// 监听终端输出变化
+watch(() => terminalStore.terminalOutput, (newOutput, oldOutput) => {
+  if (term && terminalStore.isConnected && newOutput !== oldOutput) {
+    const newData = newOutput.slice(oldOutput.length)
+    if (newData) {
+      term.write(newData)
+      if (newData.includes('\x1b[H') && newData.includes('\x1b[2J')) {
+        resetConnectedState()
+      } else {
+        if (terminalStore.scrollOnUserInput) {
+          term.scrollToBottom()
+        }
+      }
+    }
+  }
+})
+
+// 监听服务器连接状态变化
+watch(() => terminalStore.isConnected, (isConnected, wasConnected) => {
+  if (term) {
+    if (isConnected && !wasConnected) {
+      term.clear()
+      term.focus()
+      
+      setTimeout(() => {
+        term.write('\x1b[32mSSH连接已建立，可以开始输入命令\x1b[0m\r\n\r\n')
+        
+        term.write('\x1b[?25h')
+        
+        if (typeof term.scrollToTop === 'function') {
+          term.scrollToTop()
+        }
+        
+        const viewport = terminalRef.value?.querySelector('.xterm-viewport')
+        if (viewport) {
+          initialScrollTop = 0
+          viewport.scrollTop = 0
+          
+          setTimeout(() => {
+            viewport.scrollTop = 0
+          }, 50)
+        }
+      }, 100)
+    } else if (!isConnected && wasConnected) {
+      term.write('\r\n\x1b[31mSSH连接已断开\x1b[0m\r\n')
+      
+      sftpStore.disconnectSftp()
+      showSftp.value = false
+    }
+    setTimeout(() => { handleResize() }, 150)
+  }
+})
+
+// 监听连接错误
+watch(() => terminalStore.connectionError, (error) => {
+  if (term && error) {
+    term.write(`\r\n\x1b[31m连接错误: ${error}\x1b[0m\r\n`)
+  }
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  if (fitAddon) {
+    fitAddon.fit()
+    
+    const dimensions = fitAddon.proposeDimensions()
+    if (dimensions) {
+      terminalStore.resizeTerminal({
+        rows: dimensions.rows,
+        cols: dimensions.cols,
+        height: dimensions.height,
+        width: dimensions.width
+      })
+    }
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  initTerminal()
+  
+  window.addEventListener('resize', handleResize)
+  document.addEventListener('click', onDocumentClick)
+  
+  // 快速连接模式：连接已由 QuickConnect.vue 发起
+  // 如果连接已建立且有缓冲输出，立即写入终端
+  await nextTick()
+  
+  if (terminalStore.isConnected && term) {
+    // 已连接：显示欢迎信息
+    term.clear()
+    term.write('\x1b[32mSSH连接已建立，可以开始输入命令\x1b[0m\r\n\r\n')
+    
+    // 写入已缓冲的输出数据
+    if (terminalStore.terminalOutput) {
+      term.write(terminalStore.terminalOutput)
+    }
+    
+    // 发送 resize 触发服务器重新绘制（关键：让远程 shell 发送完整的提示符）
+    setTimeout(() => {
+      handleResize()
+      term.focus()
+    }, 200)
+  } else if (terminalStore.isConnecting && term) {
+    term.write('\x1b[33m正在连接服务器...\x1b[0m\r\n')
+  }
+})
+
+onUnmounted(() => {
+  terminalStore.disconnectSocket()
+  sftpStore.disconnectSftp()
+  if (term) {
+    term.dispose()
+  }
+  if (terminalRef.value && wheelHandler) {
+    terminalRef.value.removeEventListener('wheel', wheelHandler)
+    wheelHandler = null
+  }
+  const viewportEl = terminalRef.value?.querySelector('.xterm-viewport')
+  if (viewportEl && viewportWheelHandler) {
+    viewportEl.removeEventListener('wheel', viewportWheelHandler)
+    viewportWheelHandler = null
+  }
+  window.removeEventListener('resize', handleResize)
+  document.removeEventListener('click', onDocumentClick)
+})
+</script>
+
+<style scoped>
+.terminal-page {
+  height: 100vh;
+  overflow: hidden;
+  background-color: #1e1e1e;
+}
+
+.terminal-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+}
+
+.terminal-header {
+  background-color: #2d2d30;
+  border-bottom: 1px solid #3e3e42;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  color: white;
+  height: 36px;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.server-name {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.server-info {
+  color: #909399;
+  font-size: 14px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.main-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.sftp-sidebar {
+  background-color: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sftp-header {
+  padding: 15px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: white;
+}
+
+.sftp-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.sftp-prompt {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #909399;
+  text-align: center;
+  padding: 20px;
+}
+
+.sftp-prompt p {
+  margin-top: 16px;
+  font-size: 14px;
+}
+
+.terminal-main {
+  padding: 0 !important;
+  position: relative;
+  transition: width 0.3s ease;
+  height: 100%;
+  min-height: 400px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.terminal {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  padding-bottom: 8px;
+  cursor: text;
+  overflow: hidden;
+  position: relative;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.terminal:hover {
+  outline: 1px solid #3e3e42;
+}
+
+.connection-error,
+.connection-prompt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.prompt-content {
+  color: #909399;
+}
+
+.prompt-content h3 {
+  margin: 16px 0 8px;
+  font-weight: normal;
+}
+
+/* 右键菜单样式 */
+.context-menu {
+  position: fixed;
+  background: #2d2d30;
+  border: 1px solid #3e3e42;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  min-width: 120px;
+  padding: 4px 0;
+  animation: fadeIn 0.15s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  color: #ffffff;
+  font-size: 13px;
+  transition: background-color 0.2s ease;
+  gap: 8px;
+}
+
+.menu-item:hover {
+  background-color: rgba(58, 134, 255, 0.2);
+}
+
+.menu-item.disabled {
+  color: #6c6c6c;
+  cursor: not-allowed;
+}
+
+.menu-item.disabled:hover {
+  background-color: transparent;
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: #3e3e42;
+  margin: 4px 0;
+}
+
+.menu-item .el-icon {
+  font-size: 14px;
+  width: 16px;
+}
+
+.terminal-footer {
+  flex-shrink: 0;
+  background-color: #2d2d30;
+  border-top: 1px solid #3e3e42;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  color: #909399;
+  font-size: 12px;
+}
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status-item .el-icon {
+  font-size: 14px;
+}
+
+/* XTerm.js 样式调整 */
+:deep(.xterm) {
+  padding: 10px;
+  position: relative;
+}
+
+:deep(.xterm-viewport) {
+  background-color: #1e1e1e !important;
+}
+
+:deep(.xterm-screen) {
+  background-color: #1e1e1e !important;
+}
+
+:deep(.xterm-helper-textarea) {
+  opacity: 0 !important;
+  color: transparent !important;
+  caret-color: transparent !important;
+  resize: none !important;
+  outline: none !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.copy-button {
+  transition: all 0.3s ease;
+}
+
+.copy-button.copied {
+  background-color: rgba(58, 134, 255, 0.3) !important;
+  border-color: rgba(58, 134, 255, 0.8) !important;
+  color: #ffffff !important;
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(58, 134, 255, 0.4);
+}
+
+.copy-button:hover {
+  background-color: rgba(58, 134, 255, 0.1);
+  border-color: rgba(58, 134, 255, 0.6);
+}
+
+:deep(.xterm .xterm-selection) {
+  background-color: rgba(58, 134, 255, 0.2) !important;
+  border-radius: 2px;
+  mix-blend-mode: screen;
+}
+
+:deep(.xterm) {
+  padding: 0 !important;
+  overflow: hidden !important;
+  position: relative !important;
+  height: 100% !important;
+  width: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+:deep(.xterm-screen) {
+  background-color: #1e1e1e !important;
+  width: 100% !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+:deep(.xterm-viewport) {
+  background-color: #1e1e1e !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  position: relative !important;
+  direction: ltr !important;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: auto !important;
+}
+
+:deep(.xterm-viewport::-webkit-scrollbar) {
+  width: 12px;
+}
+
+:deep(.xterm-viewport::-webkit-scrollbar-track) {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  margin: 2px;
+}
+
+:deep(.xterm-viewport::-webkit-scrollbar-thumb) {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  transition: background 0.2s ease;
+}
+
+:deep(.xterm-viewport::-webkit-scrollbar-thumb:hover) {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+:deep(.xterm-viewport::-webkit-scrollbar-thumb:active) {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+:deep(.xterm-screen) {
+  overflow: visible !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: #1e1e1e !important;
+}
+
+:deep(.xterm-scroll-area) {
+  overflow: visible !important;
+}
+
+:deep(.xterm-char-measure-element) {
+  position: absolute !important;
+  left: -9999px !important;
+  top: -9999px !important;
+  visibility: hidden !important;
+  width: auto !important;
+  height: auto !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.terminal {
+  position: relative;
+  overflow: hidden;
+  pointer-events: auto !important;
+  height: 100%;
+  width: 100%;
+  background-color: #1e1e1e !important;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.xterm-rows) {
+  color: #ffffff !important;
+  background-color: #1e1e1e !important;
+}
+
+:deep(.xterm-row) {
+  color: #ffffff !important;
+  background-color: #1e1e1e !important;
+}
+
+:deep(.xterm-selection-layer) {
+  background-color: rgba(54,99,181,0.35) !important;
+}
+</style>
diff --git a/frontend/src/views/Terminal.vue b/frontend/src/views/Terminal.vue
index d3e6ba9..fe34ab8 100644
--- a/frontend/src/views/Terminal.vue
+++ b/frontend/src/views/Terminal.vue
@@ -565,6 +565,12 @@ const hideContextMenu = () => {
   contextMenu.value.visible = false
 }
 
+const onDocumentClick = () => {
+  if (contextMenu.value.visible) {
+    hideContextMenu()
+  }
+}
+
 // 检查是否有选中的文本
 const hasSelection = () => {
   return term && term.getSelection() && term.getSelection().length > 0
@@ -762,6 +768,7 @@ onMounted(async () => {
   
   // 监听窗口大小变化
   window.addEventListener('resize', handleResize)
+  document.addEventListener('click', onDocumentClick)
   
   // 如果是服务器连接，自动连接
   if (route.params.serverId) {
@@ -786,6 +793,7 @@ onUnmounted(() => {
     viewportWheelHandler = null
   }
   window.removeEventListener('resize', handleResize)
+  document.removeEventListener('click', onDocumentClick)
 })
 </script>