feat: v0.3.0 版本 - SSH终端、SFTP、端口转发功能实现

核心功能:
- SSH终端: 密码/密钥认证、XTerm.js终端、多主题配色、IP高亮
- SFTP管理: 双栏文件管理、上传下载、传输队列
- 端口转发: 本地/远程转发、SOCKS5动态代理、规则管理

架构改进:
- 拆分大型组件 (SFTPView/TabBar/Sidebar)
- 添加统一日志和错误处理
- 修复React严格模式下的终端黑屏问题

UI更新:
- 新增端口转发视图
- 更新UI预览文档
- 左侧栏右键菜单支持SFTP快捷打开

src/components/sftp/ConnectionPanel.tsx

@@ -0,0 +1,92 @@
+/**
+ * ConnectionPanel - SFTP 连接状态面板
+ * 
+ * 显示连接状态或连接选择界面
+ */
+
+import { Monitor, AlertCircle, Loader2 } from 'lucide-react'
+import { ConnectionSelector } from './ConnectionSelector'
+import type { Session } from '../../../shared/types/session.types'
+
+interface ConnectionPanelProps {
+  isConnected: boolean
+  isConnecting: boolean
+  error: string | null
+  sessions: Session[]
+  showSelector: boolean
+  onConnect: (sessionId: string) => void
+  onShowSelector: () => void
+  onCloseSelector: () => void
+}
+
+export function ConnectionPanel({
+  isConnected,
+  isConnecting,
+  error,
+  sessions,
+  showSelector,
+  onConnect,
+  onShowSelector,
+  onCloseSelector,
+}: ConnectionPanelProps) {
+  // Connected State
+  if (isConnected) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 bg-green-500/10 border-b border-green-500/20">
+        <Monitor className="w-4 h-4 text-green-400" />
+        <span className="text-sm text-green-400">已连接</span>
+      </div>
+    )
+  }
+
+  // Connecting State
+  if (isConnecting) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 bg-accent-blue/10 border-b border-accent-blue/20">
+        <Loader2 className="w-4 h-4 text-accent-blue animate-spin" />
+        <span className="text-sm text-accent-blue">连接中...</span>
+      </div>
+    )
+  }
+
+  // Error State
+  if (error) {
+    return (
+      <div className="flex items-center justify-between px-4 py-2 bg-red-500/10 border-b border-red-500/20">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="w-4 h-4 text-red-400" />
+          <span className="text-sm text-red-400">{error}</span>
+        </div>
+        <button
+          onClick={onShowSelector}
+          className="px-3 py-1 bg-dark-700 hover:bg-dark-600 rounded text-sm transition-colors"
+        >
+          重新连接
+        </button>
+      </div>
+    )
+  }
+
+  // Disconnected State
+  return (
+    <>
+      <div className="flex items-center justify-between px-4 py-2 bg-dark-800 border-b border-dark-700">
+        <span className="text-sm text-gray-400">未连接</span>
+        <button
+          onClick={onShowSelector}
+          className="px-3 py-1.5 bg-accent-blue hover:bg-blue-600 rounded text-sm font-medium transition-colors"
+        >
+          选择服务器
+        </button>
+      </div>
+      
+      {showSelector && (
+        <ConnectionSelector
+          sessions={sessions}
+          onSelect={onConnect}
+          onClose={onCloseSelector}
+        />
+      )}
+    </>
+  )
+}