From aef221ed560498c72170b952e203258cbfd51b8c Mon Sep 17 00:00:00 2001
From: dalaolala <sapxcode@gmail.com>
Date: Fri, 6 Mar 2026 16:43:29 +0800
Subject: [PATCH] fix: Optimizee connecting tips

---
 frontend/src/components/ConnectingOverlay.vue | 128 ++++++++++++++++++
 frontend/src/views/QuickConnectTerminal.vue   |  84 +-----------
 frontend/src/views/Terminal.vue               |  14 +-
 frontend/src/views/TerminalNew.vue            |  19 +--
 4 files changed, 146 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/components/ConnectingOverlay.vue

diff --git a/frontend/src/components/ConnectingOverlay.vue b/frontend/src/components/ConnectingOverlay.vue
new file mode 100644
index 0000000..da77cba
--- /dev/null
+++ b/frontend/src/components/ConnectingOverlay.vue
@@ -0,0 +1,128 @@
+<template>
+  <Transition name="apple-overlay">
+    <div v-if="visible" class="connecting-overlay">
+      <div class="apple-connecting-wrap">
+        <!-- 细线弧形 Spinner -->
+        <div class="apple-spinner">
+          <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+            <circle class="apple-arc" cx="22" cy="22" r="18" fill="none" stroke-width="2" />
+          </svg>
+        </div>
+
+        <!-- 主文案 -->
+        <p class="apple-connecting-title">{{ title }}</p>
+
+        <!-- 副文案（可选） -->
+        <p v-if="subtitle" class="apple-connecting-sub">{{ subtitle }}</p>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+defineProps({
+  /** 是否显示遮罩 */
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  /** 主标题，默认"正在连接服务器" */
+  title: {
+    type: String,
+    default: '正在连接服务器'
+  },
+  /** 副文本，如 user@host:port，留空则不显示 */
+  subtitle: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style scoped>
+/* ── 遮罩层 ── */
+.connecting-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+}
+
+/* ── 内容区 ── */
+.apple-connecting-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+}
+
+/* ── Spinner ── */
+.apple-spinner {
+  width: 40px;
+  height: 40px;
+  animation: appleSpin 0.9s linear infinite;
+}
+
+.apple-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+.apple-arc {
+  stroke: rgba(255, 255, 255, 0.92);
+  stroke-linecap: round;
+  stroke-dasharray: 56 113; /* 约半圈可见 */
+  stroke-dashoffset: 0;
+}
+
+@keyframes appleSpin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── 文字 ── */
+.apple-connecting-title {
+  font-family: -apple-system, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.92);
+  letter-spacing: 0.2px;
+  margin: 0;
+}
+
+.apple-connecting-sub {
+  font-family: -apple-system, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.38);
+  letter-spacing: 0.3px;
+  margin: 0;
+}
+
+/* ── Vue Transition ── */
+.apple-overlay-enter-active {
+  animation: appleOverlayIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+.apple-overlay-leave-active {
+  animation: appleOverlayIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) both reverse;
+}
+
+@keyframes appleOverlayIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* 内容弹入 */
+.apple-overlay-enter-active .apple-connecting-wrap {
+  animation: appleCardIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes appleCardIn {
+  from { opacity: 0; transform: translateY(12px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+</style>
diff --git a/frontend/src/views/QuickConnectTerminal.vue b/frontend/src/views/QuickConnectTerminal.vue
index a26e525..91212fa 100644
--- a/frontend/src/views/QuickConnectTerminal.vue
+++ b/frontend/src/views/QuickConnectTerminal.vue
@@ -46,16 +46,10 @@
           />
           
           <!-- 连接提示 -->
-          <div v-if="isConnecting" class="connection-status-overlay">
-            <div class="connecting-card">
-              <div class="spinner-container">
-                <div class="pulse-ring"></div>
-                <el-icon class="is-loading" size="32" color="#409eff"><Loading /></el-icon>
-              </div>
-              <h3 class="connecting-title">正在建立安全连接</h3>
-              <p class="connecting-desc">正在向目标服务器发起 SSH 连接请求...</p>
-            </div>
-          </div>
+          <ConnectingOverlay
+            :visible="isConnecting"
+            :subtitle="connectionDisplay"
+          />
           
           <!-- 连接状态提示 -->
           <div v-if="connectionError" class="connection-error">
@@ -95,7 +89,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { ArrowLeft, Connection, Close, Delete, Monitor, Folder, Document, Edit, Select, Tickets, Loading } from '@element-plus/icons-vue'
+import { ArrowLeft, Connection, Close, Delete, Monitor, Folder, Document, Edit, Select, Tickets } from '@element-plus/icons-vue'
 import { useAuthStore } from '@/stores/auth'
 import { useQuickSftp } from '@/composables/useQuickSftp'
 import { ElMessage } from 'element-plus'
@@ -103,6 +97,7 @@ import QuickSftpFileManager from '@/components/QuickSftpFileManager.vue'
 import CommandLibrary from '@/components/CommandLibrary.vue'
 import TerminalStatusBar from '@/components/TerminalStatusBar.vue'
 import XtermTerminal from '@/components/XtermTerminal.vue'
+import ConnectingOverlay from '@/components/ConnectingOverlay.vue'
 import { io } from 'socket.io-client'
 
 const props = defineProps({
@@ -456,72 +451,7 @@ onUnmounted(() => {
   text-align: center;
 }
 
-/* 现代化连接状态遮罩层 */
-.connection-status-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(30, 30, 30, 0.75);
-  backdrop-filter: blur(8px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 50;
-  animation: fadeIn 0.3s ease;
-}
-
-.connecting-card {
-  background: linear-gradient(145deg, #2a2a2d, #222225);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
-  padding: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
-  transform: translateY(-20px);
-}
-
-.spinner-container {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.pulse-ring {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  border: 2px solid #409eff;
-  animation: pulse 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
-  opacity: 0;
-}
-
-@keyframes pulse {
-  0% { transform: scale(0.5); opacity: 0.8; }
-  100% { transform: scale(1.5); opacity: 0; }
-}
-
-.connecting-title {
-  color: #ffffff;
-  font-size: 18px;
-  font-weight: 500;
-  margin: 0 0 8px 0;
-  letter-spacing: 0.5px;
-}
-
-.connecting-desc {
-  color: #909399;
-  font-size: 13px;
-  margin: 0;
-}
+/* ConnectingOverlay 已提取为独立组件 ConnectingOverlay.vue */
 
 .prompt-content {
   color: #909399;
diff --git a/frontend/src/views/Terminal.vue b/frontend/src/views/Terminal.vue
index a45cc81..553d9b7 100644
--- a/frontend/src/views/Terminal.vue
+++ b/frontend/src/views/Terminal.vue
@@ -50,15 +50,10 @@
           />
           
           <!-- 连接提示 -->
-          <div v-if="terminalStore.isConnecting" class="connection-status">
-            <el-alert 
-              title="正在连接服务器..." 
-              type="info" 
-              show-icon 
-              :closable="false"
-              center
-            />
-          </div>
+          <ConnectingOverlay
+            :visible="terminalStore.isConnecting"
+            :subtitle="currentServer ? `${currentServer.host}:${currentServer.port}` : ''"
+          />
           
           <!-- 连接状态提示 -->
           <div v-if="terminalStore.connectionError" class="connection-error">
@@ -107,6 +102,7 @@ import SftpFileManager from '@/components/SftpFileManager.vue'
 import TerminalStatusBar from '@/components/TerminalStatusBar.vue'
 import CommandLibrary from '@/components/CommandLibrary.vue'
 import XtermTerminal from '@/components/XtermTerminal.vue'
+import ConnectingOverlay from '@/components/ConnectingOverlay.vue'
 import { ElMessage } from 'element-plus'
 
 const route = useRoute()
diff --git a/frontend/src/views/TerminalNew.vue b/frontend/src/views/TerminalNew.vue
index 813b114..0d63702 100644
--- a/frontend/src/views/TerminalNew.vue
+++ b/frontend/src/views/TerminalNew.vue
@@ -159,21 +159,13 @@
                   </div>
                 </div>
                 
-                <div 
-                  v-else-if="tab.connecting" 
-                  class="connection-status"
-                >
-                  <el-alert 
-                    title="正在连接服务器..." 
-                    type="info" 
-                    show-icon 
-                    :closable="false"
-                    center
-                  />
-                </div>
+                <ConnectingOverlay
+                  :visible="tab.connecting"
+                  :subtitle="tab.server ? `${tab.server.host}:${tab.server.port}` : ''"
+                />
                 
                 <div 
-                  v-else-if="tab.error" 
+                  v-if="tab.error" 
                   class="connection-error"
                 >
                   <el-alert 
@@ -228,6 +220,7 @@ import { useServersStore } from '@/stores/servers'
 import { useAuthStore } from '@/stores/auth'
 import QuickConnect from './QuickConnect.vue'
 import CommandLibrary from '@/components/CommandLibrary.vue'
+import ConnectingOverlay from '@/components/ConnectingOverlay.vue'
 import { io } from 'socket.io-client'
 
 const authStore = useAuthStore()