feat: add port forwarding and optimize connection status checks

frontend/public/ssh-manager.svg

@@ -1,38 +1,101 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
-  <!-- 背景层：深色圆角矩形与发光效果 -->
   <defs>
+    <!-- Background Gradient -->
     <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#0f172a" />
+      <stop offset="0%" stop-color="#0b1329" />
+      <stop offset="60%" stop-color="#040814" />
+      <stop offset="100%" stop-color="#02040a" />
+    </linearGradient>
+
+    <!-- Border Gradient -->
+    <linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1e293b" />
+      <stop offset="50%" stop-color="#0f172a" />
       <stop offset="100%" stop-color="#020617" />
     </linearGradient>
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="15" result="blur" />
-      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+
+    <!-- Terminal Border Gradient -->
+    <linearGradient id="termBorder" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22d3ee" />
+      <stop offset="50%" stop-color="#3b82f6" />
+      <stop offset="100%" stop-color="#6366f1" />
+    </linearGradient>
+
+    <!-- Key Gradient -->
+    <linearGradient id="keyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22d3ee" />
+      <stop offset="40%" stop-color="#0ea5e9" />
+      <stop offset="100%" stop-color="#2563eb" />
+    </linearGradient>
+
+    <!-- Subtle Glow for Terminal -->
+    <filter id="termGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="12" result="blur" />
+      <feComponentTransfer in="blur" result="boost">
+        <feFuncA type="linear" slope="0.3"/>
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode in="boost" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
     </filter>
-    <linearGradient id="primaryGlow" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.6" />
-      <stop offset="100%" stop-color="#10b981" stop-opacity="0.3" />
+
+    <!-- 3D Shadow for the Key -->
+    <filter id="keyShadow" x="-40%" y="-40%" width="180%" height="180%">
+      <feDropShadow dx="-6" dy="8" stdDeviation="6" flood-color="#020617" flood-opacity="0.8"/>
+      <feDropShadow dx="-2" dy="3" stdDeviation="3" flood-color="#06b6d4" flood-opacity="0.3"/>
+    </filter>
+
+    <!-- Glare Gradient -->
+    <linearGradient id="glareGrad" x1="0%" y1="0%" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.08" />
+      <stop offset="40%" stop-color="#ffffff" stop-opacity="0.03" />
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.0" />
     </linearGradient>
   </defs>
 
-  <!-- 外部圆角底框 -->
-  <rect x="32" y="32" width="448" height="448" rx="100" ry="100" fill="url(#bgGradient)" stroke="#1e293b" stroke-width="8" />
+  <!-- Outer Squircle App Icon Base -->
+  <rect x="24" y="24" width="464" height="464" rx="120" ry="120" fill="url(#bgGradient)" stroke="url(#borderGradient)" stroke-width="6" />
 
-  <!-- 内部光晕点缀 -->
-  <circle cx="256" cy="256" r="180" fill="url(#primaryGlow)" filter="url(#glow)" />
-  <rect x="64" y="64" width="384" height="384" rx="80" ry="80" fill="#0f172a" opacity="0.85" />
+  <!-- Inner Soft Ambient Light (Top-Left glow) -->
+  <path d="M 24 144 A 120 120 0 0 1 144 24 L 300 24 C 200 80 80 200 24 300 Z" fill="#22d3ee" fill-opacity="0.02" />
 
-  <!-- 终端符号： >_ -->
-  <g transform="translate(130, 160)" stroke-linecap="round" stroke-linejoin="round">
-    <!-- 箭头 > -->
-    <path d="M 20 20 L 120 90 L 20 160" fill="none" stroke="#3b82f6" stroke-width="40" />
+  <!-- Terminal Window Console Card -->
+  <g filter="url(#termGlow)">
+    <!-- Terminal Outer Frame -->
+    <rect x="110" y="130" width="260" height="230" rx="36" ry="36" fill="#030712" stroke="url(#termBorder)" stroke-width="4.5" />
+    
+    <!-- Glare reflection on terminal glass -->
+    <path d="M 112 166 Q 240 132 368 166 A 34 34 0 0 1 368 180 L 220 358 A 34 34 0 0 1 112 300 Z" fill="url(#glareGrad)" />
 
-    <!-- 下划线 _ -->
-    <line x1="140" y1="180" x2="240" y2="180" stroke="#10b981" stroke-width="36" />
+    <!-- Terminal Header Dots -->
+    <circle cx="150" cy="165" r="7" fill="#ef4444" fill-opacity="0.75" />
+    <circle cx="175" cy="165" r="7" fill="#f59e0b" fill-opacity="0.75" />
+    <circle cx="200" cy="165" r="7" fill="#10b981" fill-opacity="0.75" />
+    
+    <!-- Host text simulation -->
+    <text x="230" y="169" fill="#94a3b8" fill-opacity="0.4" font-family="monospace" font-size="11" letter-spacing="1">ssh-session</text>
+
+    <!-- Terminal Prompts >_ -->
+    <g transform="translate(150, 210)">
+      <!-- Arrow > -->
+      <path d="M 10 20 L 40 45 L 10 70" fill="none" stroke="#22d3ee" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
+      <!-- Cursor _ -->
+      <rect x="55" y="60" width="30" height="10" rx="2" fill="#34d399" />
+    </g>
   </g>
 
-  <!-- 顶部状态指示灯 (红黄绿) -->
-  <circle cx="110" cy="110" r="12" fill="#ef4444" />
-  <circle cx="150" cy="110" r="12" fill="#eab308" />
-  <circle cx="190" cy="110" r="12" fill="#10b981" />
+  <!-- Security Key Overlap -->
+  <g transform="translate(315, 235) rotate(-45)" filter="url(#keyShadow)">
+    <!-- Shaft of Key -->
+    <path d="M -20 -7 L -175 -7 C -180 -7 -180 7 -175 7 L -20 7 Z" fill="url(#keyGrad)" />
+    
+    <!-- Key Head (Terminal screen hole shape) -->
+    <circle cx="20" cy="0" r="45" fill="none" stroke="url(#keyGrad)" stroke-width="14" />
+    <circle cx="20" cy="0" r="14" fill="none" stroke="url(#keyGrad)" stroke-width="8" />
+
+    <!-- Key Teeth -->
+    <path d="M -115 5 L -115 32 A 4 4 0 0 0 -111 36 L -101 36 A 4 4 0 0 0 -97 32 L -97 5 Z" fill="url(#keyGrad)" />
+    <path d="M -150 5 L -150 32 A 4 4 0 0 0 -146 36 L -136 36 A 4 4 0 0 0 -132 32 L -132 5 Z" fill="url(#keyGrad)" />
+  </g>
 </svg>