Update package version to 2.0.12 and enhance SSH tunnel management in main.js by implementing a function to find available ports. Refactor App component to improve connection state management and caching for database tables and columns. Update Sidebar component to handle database state using connectionId and database name as keys, ensuring better separation of data across connections.

electron/main.js

@@ -24,24 +24,42 @@ const sshTunnels = new Map()
 const configPath = path.join(app.getPath('userData'), 'connections.json')
 // SQL.js 初始化
 let SQL = null
-// 用于分配本地端口
-let nextLocalPort = 33060
 
 // ============ SSH 隧道管理 ============
 
+/**
+ * 查找可用端口
+ */
+function findAvailablePort(startPort = 49152) {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer()
+    server.unref()
+    server.on('error', () => {
+      // 端口被占用，尝试下一个
+      if (startPort < 65535) {
+        resolve(findAvailablePort(startPort + 1))
+      } else {
+        reject(new Error('没有可用端口'))
+      }
+    })
+    server.listen(startPort, '127.0.0.1', () => {
+      server.close(() => resolve(startPort))
+    })
+  })
+}
+
 /**
  * 创建 SSH 隧道
  * @param {Object} config - 连接配置
  * @returns {Promise<{ssh, server, localPort, localHost}>}
  */
 async function createSSHTunnel(config) {
+  // 先找一个可用端口
+  const localPort = await findAvailablePort()
+  console.log(`[SSH] 使用本地端口: ${localPort}`)
+  
   return new Promise((resolve, reject) => {
     const ssh = new SSHClient()
-    const localPort = nextLocalPort++
-    
-    // 端口范围重置
-    if (nextLocalPort > 65000) nextLocalPort = 33060
-    
     let server = null
     let connected = false
     

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easysql",
-  "version": "2.0.3",
+  "version": "2.0.12",
   "description": "Modern Database Management Tool",
   "main": "electron/main.js",
   "type": "module",

src/App.tsx

@@ -109,6 +109,36 @@ function App() {
         next.delete(id)
         return next
       })
+      // 清理该连接的表缓存（key 格式：connectionId_database）
+      setTablesMap(prev => {
+        const next = new Map(prev)
+        for (const key of prev.keys()) {
+          if (key.startsWith(`${id}_`)) {
+            next.delete(key)
+          }
+        }
+        return next
+      })
+      // 清理该连接的列缓存（key 格式：connectionId_database_table）
+      setColumnsMap(prev => {
+        const next = new Map(prev)
+        for (const key of prev.keys()) {
+          if (key.startsWith(`${id}_`)) {
+            next.delete(key)
+          }
+        }
+        return next
+      })
+      // 清理该连接的加载状态
+      setLoadingDbSet(prev => {
+        const next = new Set(prev)
+        for (const key of prev) {
+          if (key.startsWith(`${id}_`)) {
+            next.delete(key)
+          }
+        }
+        return next
+      })
       // 关闭该连接的所有标签页
       setTabs(prev => {
         const remainingTabs = prev.filter(tab => {
@@ -124,26 +154,32 @@ function App() {
         }
         return remainingTabs
       })
-      if (activeConnection === id) setActiveConnection(null)
+      // 如果断开的是当前选中数据库的连接，清空选中状态
+      if (activeConnection === id) {
+        setActiveConnection(null)
+        setSelectedDatabase(null)
+      }
       showNotification('info', '连接已断开')
     } catch (err) {
       showNotification('error', '断开失败：' + (err as Error).message)
     }
-  }, [activeConnection, activeTab, setConnectedIds, setDatabasesMap, setTabs, setActiveTab, showNotification])
+  }, [activeConnection, activeTab, setConnectedIds, setDatabasesMap, setTablesMap, setColumnsMap, setLoadingDbSet, setTabs, setActiveTab, showNotification])
 
   // 选择数据库
   const handleSelectDatabase = useCallback(async (db: string, connectionId: string) => {
     setSelectedDatabase(db)
     setActiveConnection(connectionId)
-    setLoadingDbSet(prev => new Set(prev).add(db))
+    // 使用 connectionId_db 作为 key，避免不同连接同名数据库冲突
+    const dbKey = `${connectionId}_${db}`
+    setLoadingDbSet(prev => new Set(prev).add(dbKey))
     try {
       await fetchTables(connectionId, db)
-      const tables = tablesMap.get(db) || []
+      const tables = tablesMap.get(dbKey) || []
       await Promise.all(tables.map(t => fetchColumns(connectionId, db, t.name)))
     } finally {
       setLoadingDbSet(prev => {
         const next = new Set(prev)
-        next.delete(db)
+        next.delete(dbKey)
         return next
       })
     }
@@ -630,7 +666,7 @@ function App() {
           connectedIds={connectedIds}
           databasesMap={databasesMap}
           databases={databasesMap.get(activeConnection || '') || []}
-          tables={tablesMap.get(selectedDatabase || '') || []}
+          tables={tablesMap.get(activeConnection && selectedDatabase ? `${activeConnection}_${selectedDatabase}` : '') || []}
           columns={columnsMap}
           onTabChange={handleTabChange}
           onCloseTab={handleCloseTab}
@@ -749,8 +785,10 @@ function App() {
           } : undefined}
           onGetDatabases={async () => databasesMap.get(tableDesignerContext.connectionId) || []}
           onGetTables={async (db) => {
+            // 使用 connectionId_db 作为 key
+            const dbKey = `${tableDesignerContext.connectionId}_${db}`
             // 如果缓存中有表列表，直接返回
-            const cached = tablesMap.get(db)
+            const cached = tablesMap.get(dbKey)
             if (cached && cached.length > 0) {
               return cached.map(t => t.name)
             }
@@ -758,7 +796,7 @@ function App() {
             try {
               const tables = await api.getTables(tableDesignerContext.connectionId, db)
               // 更新缓存
-              setTablesMap(prev => new Map(prev).set(db, tables))
+              setTablesMap(prev => new Map(prev).set(dbKey, tables))
               return tables.map((t: any) => t.name || t)
             } catch (err) {
               console.error('Failed to load tables:', err)

src/components/Sidebar.tsx

@@ -23,8 +23,9 @@ const TableGroupList = memo(function TableGroupList({
   const regularTables = tables.filter(t => !t.isView)
   const views = tables.filter(t => t.isView)
   
-  const tablesKey = `${db}_tables`
+  // 使用 connectionId + db 组合作为 key，避免不同连接同名数据库状态冲突
-  const viewsKey = `${db}_views`
+  const tablesKey = `${connectionId}_${db}_tables`
+  const viewsKey = `${connectionId}_${db}_views`
   
   const isTablesExpanded = expandedDbs.has(tablesKey)
   const isViewsExpanded = expandedDbs.has(viewsKey)
@@ -225,10 +226,12 @@ export default function Sidebar({
   const prevConnectedIdsRef = useRef<Set<string>>(new Set())
   
   useEffect(() => {
-    if (selectedDatabase) {
+    // 自动展开选中的数据库，使用 connectionId_database 作为 key
-      setExpandedDbs(prev => new Set(prev).add(selectedDatabase))
+    if (selectedDatabase && activeConnection) {
+      const dbKey = `${activeConnection}_${selectedDatabase}`
+      setExpandedDbs(prev => new Set(prev).add(dbKey))
     }
-  }, [selectedDatabase])
+  }, [selectedDatabase, activeConnection])
   
   // 当连接状态变化时，只展开新建立的连接（不影响其他已连接但被折叠的连接）
   useEffect(() => {
@@ -240,6 +243,22 @@ export default function Sidebar({
         setExpandedDbs(prev => new Set(prev).add(id))
       }
     })
+    // 找出断开的连接，清理相关展开状态
+    prevIds.forEach(id => {
+      if (!connectedIds.has(id)) {
+        // 清理断开连接的展开状态（连接ID及其下所有数据库）
+        setExpandedDbs(prev => {
+          const next = new Set(prev)
+          for (const key of prev) {
+            // 匹配连接ID本身或者 connectionId_xxx 格式的 key
+            if (key === id || key.startsWith(`${id}_`)) {
+              next.delete(key)
+            }
+          }
+          return next
+        })
+      }
+    })
     // 更新引用
     prevConnectedIdsRef.current = new Set(connectedIds)
   }, [connectedIds])
@@ -263,34 +282,38 @@ export default function Sidebar({
     }
   }, [handleSidebarKeyDown])
   
-  const getFilteredTables = (db: string) => {
+  // 使用 connectionId_db 作为 key 获取表列表
-    const dbTables = tablesMap.get(db) || []
+  const getFilteredTables = (connectionId: string, db: string) => {
+    const dbKey = `${connectionId}_${db}`
+    const dbTables = tablesMap.get(dbKey) || []
     if (!searchQuery) return dbTables
     return dbTables.filter(t => t.name.toLowerCase().includes(searchQuery.toLowerCase()))
   }
   
-  const dbHasMatchingTables = (db: string) => {
+  const dbHasMatchingTables = (connectionId: string, db: string) => {
     if (!searchQuery) return false
-    const dbTables = tablesMap.get(db) || []
+    const dbKey = `${connectionId}_${db}`
+    const dbTables = tablesMap.get(dbKey) || []
     return dbTables.some(t => t.name.toLowerCase().includes(searchQuery.toLowerCase()))
   }
   
-  const getFilteredDatabases = (connDatabases: string[]) => {
+  const getFilteredDatabases = (connectionId: string, connDatabases: string[]) => {
     return connDatabases.filter(db => {
       if (!searchQuery) return true
       const query = searchQuery.toLowerCase()
       if (db.toLowerCase().includes(query)) return true
-      if (dbHasMatchingTables(db)) return true
+      if (dbHasMatchingTables(connectionId, db)) return true
       return false
     })
   }
   
   useEffect(() => {
     if (searchQuery) {
-      databasesMap.forEach((dbs) => {
+      databasesMap.forEach((dbs, connectionId) => {
         dbs.forEach(db => {
-          if (dbHasMatchingTables(db)) {
+          if (dbHasMatchingTables(connectionId, db)) {
-            setExpandedDbs(prev => new Set(prev).add(db))
+            const dbKey = `${connectionId}_${db}`
+            setExpandedDbs(prev => new Set(prev).add(dbKey))
           }
         })
       })
@@ -454,9 +477,10 @@ export default function Sidebar({
                 const showDatabases = isExpanded && isConnected && connDatabases.length > 0
 
                 return (
-                  <div key={conn.id}>
+                  <div key={conn.id} className="relative">
                     <div
                       className={`group flex items-center gap-2 px-2.5 py-2 cursor-pointer transition-all rounded-lg
+                        ${isExpanded && isConnected ? 'sticky top-0 z-20 !bg-[#f8fafc]' : ''}
                         ${isSelected ? 'bg-primary-50 ring-1 ring-primary-200' : ''}
                         ${isActive && !isSelected ? 'bg-light-hover' : 'hover:bg-light-hover'}`}
                       onClick={() => {
@@ -525,24 +549,33 @@ export default function Sidebar({
                           <div className="px-2.5 py-2 text-sm text-text-muted">
                             无数据库或无权限
                           </div>
-                        ) : getFilteredDatabases(connDatabases).map(db => {
+                        ) : getFilteredDatabases(conn.id, connDatabases).map(db => {
-                          const isDbSelected = selectedDatabase === db
+                          // 选中状态需要同时匹配连接和数据库名
-                          const isDbExpanded = expandedDbs.has(db)
+                          const isDbSelected = selectedDatabase === db && activeConnection === conn.id
-                          const dbTables = getFilteredTables(db)
+                          // 使用 connectionId + db 组合作为 key，避免不同连接同名数据库状态冲突
-                          const isLoading = loadingDbSet.has(db)
+                          const dbKey = `${conn.id}_${db}`
+                          const isDbExpanded = expandedDbs.has(dbKey)
+                          const dbTables = getFilteredTables(conn.id, db)
+                          const isLoading = loadingDbSet.has(dbKey)
                           
                           return (
-                            <div key={db}>
+                            <div key={db} className="relative">
                               <div
                                 className={`flex items-center gap-2 px-2.5 py-1.5 cursor-pointer text-sm transition-all rounded-lg mx-1
+                                  ${isDbExpanded ? 'sticky top-[40px] z-10 !bg-[#f8fafc] -mx-1 px-3.5' : ''}
                                   ${isDbSelected ? 'bg-primary-50 text-primary-700' : 'text-text-secondary hover:bg-light-hover'}`}
                                 onClick={() => {
-                                  const willExpand = !expandedDbs.has(db)
+                                  const willExpand = !expandedDbs.has(dbKey)
-                                  if (willExpand) onSelectDatabase(db, conn.id)
+                                  // 获取原始缓存数据（不经过搜索过滤）
+                                  const cachedTables = tablesMap.get(dbKey)
+                                  // 只在展开且缓存为空时才加载数据
+                                  if (willExpand && (!cachedTables || cachedTables.length === 0)) {
+                                    onSelectDatabase(db, conn.id)
+                                  }
                                   setExpandedDbs(prev => {
                                     const next = new Set(prev)
-                                    if (next.has(db)) next.delete(db)
+                                    if (next.has(dbKey)) next.delete(dbKey)
-                                    else next.add(db)
+                                    else next.add(dbKey)
                                     return next
                                   })
                                 }}

src/lib/hooks.ts

@@ -328,7 +328,9 @@ export function useTableOperations(showNotification: (type: 'success' | 'error'
   const fetchTables = useCallback(async (connectionId: string, database: string) => {
     try {
       const tables = await api.getTables(connectionId, database)
-      setTablesMap(prev => new Map(prev).set(database, tables))
+      // 使用 connectionId_database 作为 key，避免不同连接同名数据库冲突
+      const key = `${connectionId}_${database}`
+      setTablesMap(prev => new Map(prev).set(key, tables))
     } catch (err) {
       showNotification('error', '获取表列表失败')
     }