feat: add port forwarding and optimize connection status checks

frontend/src/components/PortForwardModal.tsx

@@ -0,0 +1,293 @@
+import { useEffect, useState } from 'react'
+import {
+  AlertCircle,
+  Network,
+  Play,
+  RefreshCw,
+  StopCircle,
+  Trash2,
+} from 'lucide-react'
+import Modal from './Modal'
+import {
+  createPortForward,
+  listPortForwards,
+  stopPortForward,
+  type PortForwardTunnel,
+} from '../services/portForwards'
+import type { Connection } from '../types'
+
+interface PortForwardModalProps {
+  open: boolean
+  connections: Connection[]
+  initialConnectionId?: number | null
+  onClose: () => void
+}
+
+export default function PortForwardModal({
+  open,
+  connections,
+  initialConnectionId,
+  onClose,
+}: PortForwardModalProps) {
+  const [tunnels, setTunnels] = useState<PortForwardTunnel[]>([])
+  const [loading, setLoading] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  
+  // Form state
+  const [connectionId, setConnectionId] = useState<number>(0)
+  const [localPort, setLocalPort] = useState<number>(8080)
+  const [remoteHost, setRemoteHost] = useState<string>('127.0.0.1')
+  const [remotePort, setRemotePort] = useState<number>(80)
+
+  // Load tunnels
+  const fetchTunnels = async (showLoading = true) => {
+    if (showLoading) setLoading(true)
+    setError(null)
+    try {
+      const data = await listPortForwards()
+      setTunnels(data)
+    } catch (err: any) {
+      setError(err.message ?? '获取端口转发列表失败')
+    } finally {
+      if (showLoading) setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      fetchTunnels(true)
+      // Pre-select connection if provided
+      if (initialConnectionId) {
+        setConnectionId(initialConnectionId)
+      } else if (connections.length > 0) {
+        setConnectionId(connections[0].id)
+      }
+    }
+  }, [open, initialConnectionId, connections])
+
+  const handleStartTunnel = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!connectionId) {
+      setError('请选择 SSH 连接')
+      return
+    }
+    setError(null)
+    setSubmitting(true)
+    try {
+      await createPortForward({
+        connectionId,
+        localPort,
+        remoteHost: remoteHost.trim(),
+        remotePort,
+      })
+      // Reset form options (keep connection, maybe increment local port)
+      setLocalPort((prev) => prev + 1)
+      await fetchTunnels(false)
+    } catch (err: any) {
+      setError(err.message ?? '启动端口转发失败')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleStopTunnel = async (id: string) => {
+    setError(null)
+    try {
+      await stopPortForward(id)
+      await fetchTunnels(false)
+    } catch (err: any) {
+      setError(err.message ?? '停止端口转发失败')
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <Modal
+      title="端口转发管理"
+      onClose={onClose}
+      open={open}
+      maxWidth="max-w-5xl"
+    >
+      <div className="flex flex-col gap-6 md:flex-row">
+        {/* Left Column: Form to create a new tunnel */}
+        <div className="flex-1 rounded-2xl border border-border-main bg-surface-muted/30 p-5 md:max-w-xs lg:max-w-sm">
+          <h4 className="mb-4 flex items-center gap-2 text-sm font-semibold text-content-main">
+            <Play size={16} className="text-emerald-500" />
+            新建端口转发通道
+          </h4>
+          
+          <form onSubmit={handleStartTunnel} className="space-y-4">
+            <div className="flex flex-col gap-1.5">
+              <label className="text-xs font-medium text-content-muted">
+                SSH 连接通道
+              </label>
+              <select
+                value={connectionId}
+                onChange={(e) => setConnectionId(Number(e.target.value))}
+                className="w-full rounded-xl border border-border-main bg-surface-control px-3.5 py-2 text-sm text-content-main focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+              >
+                {connections.length === 0 ? (
+                  <option value={0}>暂无可用连接</option>
+                ) : (
+                  connections.map((c) => (
+                    <option key={c.id} value={c.id}>
+                      {c.name} ({c.host})
+                    </option>
+                  ))
+                )}
+              </select>
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <label className="text-xs font-medium text-content-muted">
+                本地侦听端口 (Local Port)
+              </label>
+              <input
+                type="number"
+                min={1}
+                max={65535}
+                value={localPort}
+                onChange={(e) => setLocalPort(Number(e.target.value))}
+                className="w-full rounded-xl border border-border-main bg-surface-control px-3.5 py-2 text-sm text-content-main focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                required
+              />
+            </div>
+
+            <div className="grid grid-cols-3 gap-2">
+              <div className="col-span-2 flex flex-col gap-1.5">
+                <label className="text-xs font-medium text-content-muted">
+                  目标主机 (Remote Host)
+                </label>
+                <input
+                  type="text"
+                  value={remoteHost}
+                  onChange={(e) => setRemoteHost(e.target.value)}
+                  className="w-full rounded-xl border border-border-main bg-surface-control px-3.5 py-2 text-sm text-content-main focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                  required
+                />
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-medium text-content-muted">
+                  目标端口
+                </label>
+                <input
+                  type="number"
+                  min={1}
+                  max={65535}
+                  value={remotePort}
+                  onChange={(e) => setRemotePort(Number(e.target.value))}
+                  className="w-full rounded-xl border border-border-main bg-surface-control px-3.5 py-2 text-sm text-content-main focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                  required
+                />
+              </div>
+            </div>
+
+            {error && (
+              <div className="flex gap-2 rounded-xl bg-red-500/10 p-3 text-xs text-red-300 border border-red-500/20">
+                <AlertCircle size={16} className="shrink-0 text-red-400" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={submitting || connections.length === 0}
+              className="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {submitting ? '正在启动...' : '启动转发'}
+            </button>
+          </form>
+        </div>
+
+        {/* Right Column: List of running tunnels */}
+        <div className="flex-1 flex flex-col">
+          <div className="mb-4 flex items-center justify-between">
+            <h4 className="flex items-center gap-2 text-sm font-semibold text-content-main">
+              <Network size={16} className="text-blue-500 animate-pulse" />
+              活动转发列表
+            </h4>
+            <button
+              onClick={() => fetchTunnels(true)}
+              disabled={loading}
+              className="rounded-xl border border-border-main bg-surface-muted p-2 text-content-muted transition hover:text-content-main hover:bg-surface-panel"
+              title="刷新列表"
+            >
+              <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-auto max-h-[400px] rounded-2xl border border-border-main bg-surface-panel/40 p-4">
+            {loading && tunnels.length === 0 ? (
+              <div className="flex h-48 items-center justify-center text-xs text-content-dim">
+                加载中...
+              </div>
+            ) : tunnels.length === 0 ? (
+              <div className="flex h-48 flex-col items-center justify-center text-content-dim">
+                <Network size={36} className="mb-2 text-content-dim/30" />
+                <span className="text-xs">暂无活动的端口转发通道</span>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {tunnels.map((tunnel) => (
+                  <div
+                    key={tunnel.id}
+                    className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 rounded-xl border border-border-subtle bg-surface-card p-3.5 transition hover:border-border-main"
+                  >
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2 text-xs font-semibold text-content-main">
+                        <span className="max-w-[120px] truncate text-blue-400">
+                          {tunnel.connectionName}
+                        </span>
+                        <span className="text-content-dim font-normal">|</span>
+                        <span className="text-emerald-500 font-mono">
+                          :{tunnel.localPort}
+                        </span>
+                        <span className="text-content-dim font-normal">→</span>
+                        <span className="text-content-muted font-mono">
+                          {tunnel.remoteHost}:{tunnel.remotePort}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 text-[10px] text-content-dim">
+                        <span>
+                          启动时间: {new Date(tunnel.createdAt).toLocaleTimeString()}
+                        </span>
+                        <span className="h-1 w-1 rounded-full bg-content-dim" />
+                        <span className="flex items-center gap-1">
+                          <span
+                            className={`h-1.5 w-1.5 rounded-full ${
+                              tunnel.status === 'running'
+                                ? 'bg-emerald-500 animate-pulse'
+                                : tunnel.status === 'error'
+                                ? 'bg-red-500'
+                                : 'bg-content-muted'
+                            }`}
+                          />
+                          {tunnel.status === 'running'
+                            ? '运行中'
+                            : tunnel.status === 'error'
+                            ? '异常'
+                            : '已停止'}
+                        </span>
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={() => handleStopTunnel(tunnel.id)}
+                      className="self-end sm:self-center flex items-center gap-1 rounded-lg border border-red-500/20 bg-red-500/5 px-2 py-1 text-[11px] font-medium text-red-300 transition hover:bg-red-500/10 hover:text-red-200"
+                    >
+                      <StopCircle size={12} />
+                      停止
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}