Skip to content

Commit aef221e

Browse files
dalaolaladalaolala
committed
fix: Optimizee connecting tips
1 parent 8ca0d06 commit aef221e

4 files changed

Lines changed: 146 additions & 99 deletions

File tree

‎frontend/src/components/ConnectingOverlay.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<Transition name="apple-overlay">
3+
<div v-if="visible" class="connecting-overlay">
4+
<div class="apple-connecting-wrap">
5+
<!-- 细线弧形 Spinner -->
6+
<div class="apple-spinner">
7+
<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
8+
<circle class="apple-arc" cx="22" cy="22" r="18" fill="none" stroke-width="2" />
9+
</svg>
10+
</div>
11+
12+
<!-- 主文案 -->
13+
<p class="apple-connecting-title">{{ title }}</p>
14+
15+
<!-- 副文案（可选） -->
16+
<p v-if="subtitle" class="apple-connecting-sub">{{ subtitle }}</p>
17+
</div>
18+
</div>
19+
</Transition>
20+
</template>
21+
22+
<script setup>
23+
defineProps({
24+
/** 是否显示遮罩 */
25+
visible: {
26+
type: Boolean,
27+
default: false
28+
},
29+
/** 主标题，默认"正在连接服务器" */
30+
title: {
31+
type: String,
32+
default: '正在连接服务器'
33+
},
34+
/** 副文本，如 user@host:port，留空则不显示 */
35+
subtitle: {
36+
type: String,
37+
default: ''
38+
}
39+
})
40+
</script>
41+
42+
<style scoped>
43+
/* ── 遮罩层 ── */
44+
.connecting-overlay {
45+
position: absolute;
46+
inset: 0;
47+
background: rgba(0, 0, 0, 0.55);
48+
backdrop-filter: blur(20px) saturate(180%);
49+
-webkit-backdrop-filter: blur(20px) saturate(180%);
50+
display: flex;
51+
justify-content: center;
52+
align-items: center;
53+
z-index: 50;
54+
}
55+
56+
/* ── 内容区 ── */
57+
.apple-connecting-wrap {
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
gap: 18px;
62+
}
63+
64+
/* ── Spinner ── */
65+
.apple-spinner {
66+
width: 40px;
67+
height: 40px;
68+
animation: appleSpin 0.9s linear infinite;
69+
}
70+
71+
.apple-spinner svg {
72+
width: 100%;
73+
height: 100%;
74+
}
75+
76+
.apple-arc {
77+
stroke: rgba(255, 255, 255, 0.92);
78+
stroke-linecap: round;
79+
stroke-dasharray: 56 113; /* 约半圈可见 */
80+
stroke-dashoffset: 0;
81+
}
82+
83+
@keyframes appleSpin {
84+
to { transform: rotate(360deg); }
85+
}
86+
87+
/* ── 文字 ── */
88+
.apple-connecting-title {
89+
font-family: -apple-system, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
90+
font-size: 15px;
91+
font-weight: 500;
92+
color: rgba(255, 255, 255, 0.92);
93+
letter-spacing: 0.2px;
94+
margin: 0;
95+
}
96+
97+
.apple-connecting-sub {
98+
font-family: -apple-system, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
99+
font-size: 12px;
100+
font-weight: 400;
101+
color: rgba(255, 255, 255, 0.38);
102+
letter-spacing: 0.3px;
103+
margin: 0;
104+
}
105+
106+
/* ── Vue Transition ── */
107+
.apple-overlay-enter-active {
108+
animation: appleOverlayIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
109+
}
110+
.apple-overlay-leave-active {
111+
animation: appleOverlayIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) both reverse;
112+
}
113+
114+
@keyframes appleOverlayIn {
115+
from { opacity: 0; }
116+
to { opacity: 1; }
117+
}
118+
119+
/* 内容弹入 */
120+
.apple-overlay-enter-active .apple-connecting-wrap {
121+
animation: appleCardIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
122+
}
123+
124+
@keyframes appleCardIn {
125+
from { opacity: 0; transform: translateY(12px) scale(0.96); }
126+
to { opacity: 1; transform: translateY(0) scale(1); }
127+
}
128+
</style>

‎frontend/src/views/QuickConnectTerminal.vue‎

Lines changed: 7 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,10 @@
4646
/>
4747

4848
<!-- 连接提示 -->
49-
<div v-if="isConnecting" class="connection-status-overlay">
50-
<div class="connecting-card">
51-
<div class="spinner-container">
52-
<div class="pulse-ring"></div>
53-
<el-icon class="is-loading" size="32" color="#409eff"><Loading /></el-icon>
54-
</div>
55-
<h3 class="connecting-title">正在建立安全连接</h3>
56-
<p class="connecting-desc">正在向目标服务器发起 SSH 连接请求...</p>
57-
</div>
58-
</div>
49+
<ConnectingOverlay
50+
:visible="isConnecting"
51+
:subtitle="connectionDisplay"
52+
/>
5953

6054
<!-- 连接状态提示 -->
6155
<div v-if="connectionError" class="connection-error">
@@ -95,14 +89,15 @@
9589
<script setup>
9690
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
9791
import { useRouter } from 'vue-router'
98-
import { ArrowLeft, Connection, Close, Delete, Monitor, Folder, Document, Edit, Select, Tickets, Loading } from '@element-plus/icons-vue'
92+
import { ArrowLeft, Connection, Close, Delete, Monitor, Folder, Document, Edit, Select, Tickets } from '@element-plus/icons-vue'
9993
import { useAuthStore } from '@/stores/auth'
10094
import { useQuickSftp } from '@/composables/useQuickSftp'
10195
import { ElMessage } from 'element-plus'
10296
import QuickSftpFileManager from '@/components/QuickSftpFileManager.vue'
10397
import CommandLibrary from '@/components/CommandLibrary.vue'
10498
import TerminalStatusBar from '@/components/TerminalStatusBar.vue'
10599
import XtermTerminal from '@/components/XtermTerminal.vue'
100+
import ConnectingOverlay from '@/components/ConnectingOverlay.vue'
106101
import { io } from 'socket.io-client'
107102
108103
const props = defineProps({
@@ -456,72 +451,7 @@ onUnmounted(() => {
456451
text-align: center;
457452
}
458453
459-
/* 现代化连接状态遮罩层 */
460-
.connection-status-overlay {
461-
position: absolute;
462-
top: 0;
463-
left: 0;
464-
right: 0;
465-
bottom: 0;
466-
background-color: rgba(30, 30, 30, 0.75);
467-
backdrop-filter: blur(8px);
468-
display: flex;
469-
justify-content: center;
470-
align-items: center;
471-
z-index: 50;
472-
animation: fadeIn 0.3s ease;
473-
}
474-
475-
.connecting-card {
476-
background: linear-gradient(145deg, #2a2a2d, #222225);
477-
border: 1px solid rgba(255, 255, 255, 0.08);
478-
border-radius: 16px;
479-
padding: 40px;
480-
display: flex;
481-
flex-direction: column;
482-
align-items: center;
483-
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
484-
transform: translateY(-20px);
485-
}
486-
487-
.spinner-container {
488-
position: relative;
489-
width: 80px;
490-
height: 80px;
491-
display: flex;
492-
justify-content: center;
493-
align-items: center;
494-
margin-bottom: 24px;
495-
}
496-
497-
.pulse-ring {
498-
position: absolute;
499-
width: 100%;
500-
height: 100%;
501-
border-radius: 50%;
502-
border: 2px solid #409eff;
503-
animation: pulse 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
504-
opacity: 0;
505-
}
506-
507-
@keyframes pulse {
508-
0% { transform: scale(0.5); opacity: 0.8; }
509-
100% { transform: scale(1.5); opacity: 0; }
510-
}
511-
512-
.connecting-title {
513-
color: #ffffff;
514-
font-size: 18px;
515-
font-weight: 500;
516-
margin: 0 0 8px 0;
517-
letter-spacing: 0.5px;
518-
}
519-
520-
.connecting-desc {
521-
color: #909399;
522-
font-size: 13px;
523-
margin: 0;
524-
}
454+
/* ConnectingOverlay 已提取为独立组件 ConnectingOverlay.vue */
525455
526456
.prompt-content {
527457
color: #909399;

‎frontend/src/views/Terminal.vue‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,10 @@
5050
/>
5151

5252
<!-- 连接提示 -->
53-
<div v-if="terminalStore.isConnecting" class="connection-status">
54-
<el-alert
55-
title="正在连接服务器..."
56-
type="info"
57-
show-icon
58-
:closable="false"
59-
center
60-
/>
61-
</div>
53+
<ConnectingOverlay
54+
:visible="terminalStore.isConnecting"
55+
:subtitle="currentServer ? `${currentServer.host}:${currentServer.port}` : ''"
56+
/>
6257

6358
<!-- 连接状态提示 -->
6459
<div v-if="terminalStore.connectionError" class="connection-error">
@@ -107,6 +102,7 @@ import SftpFileManager from '@/components/SftpFileManager.vue'
107102
import TerminalStatusBar from '@/components/TerminalStatusBar.vue'
108103
import CommandLibrary from '@/components/CommandLibrary.vue'
109104
import XtermTerminal from '@/components/XtermTerminal.vue'
105+
import ConnectingOverlay from '@/components/ConnectingOverlay.vue'
110106
import { ElMessage } from 'element-plus'
111107
112108
const route = useRoute()

‎frontend/src/views/TerminalNew.vue‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -159,21 +159,13 @@
159159
</div>
160160
</div>
161161

162-
<div
163-
v-else-if="tab.connecting"
164-
class="connection-status"
165-
>
166-
<el-alert
167-
title="正在连接服务器..."
168-
type="info"
169-
show-icon
170-
:closable="false"
171-
center
172-
/>
173-
</div>
162+
<ConnectingOverlay
163+
:visible="tab.connecting"
164+
:subtitle="tab.server ? `${tab.server.host}:${tab.server.port}` : ''"
165+
/>
174166

175167
<div
176-
v-else-if="tab.error"
168+
v-if="tab.error"
177169
class="connection-error"
178170
>
179171
<el-alert
@@ -228,6 +220,7 @@ import { useServersStore } from '@/stores/servers'
228220
import { useAuthStore } from '@/stores/auth'
229221
import QuickConnect from './QuickConnect.vue'
230222
import CommandLibrary from '@/components/CommandLibrary.vue'
223+
import ConnectingOverlay from '@/components/ConnectingOverlay.vue'
231224
import { io } from 'socket.io-client'
232225
233226
const authStore = useAuthStore()

0 commit comments

Comments
 (0)