fix: Optimizee connecting tips
This commit is contained in:
dalaolala committed
1 parent
8ca0d06147
commit
aef221ed56
4 files changed
+146
-99
No files matched your search
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in new issue
Block a user