diff --git a/electron/main.js b/electron/main.js
index be49502..a638a06 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -9,6 +9,7 @@ import initSqlJs from 'sql.js'
 import { MongoClient } from 'mongodb'
 import Redis from 'ioredis'
 import mssql from 'mssql'
+import Blowfish from 'blowfish-node'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -907,6 +908,217 @@ ipcMain.handle('file:read', async (event, filePath) => {
   }
 })
 
+// ============ Navicat 密码解密 ============
+// 支持 Navicat 11 和 Navicat 12+ 的密码解密
+ipcMain.handle('crypto:decryptNavicatPassword', async (event, encryptedPassword, version = 12) => {
+  try {
+    if (!encryptedPassword) return ''
+    
+    // 尝试所有解密方法
+    let result = ''
+    
+    // 首先尝试 Navicat 12+ (AES-128-CBC)
+    result = decryptNavicat12(encryptedPassword)
+    if (result && isPrintableString(result)) {
+      console.log('Navicat 12 AES 解密成功')
+      return result
+    }
+    
+    // 尝试 Navicat 11 (Blowfish/XOR)
+    result = decryptNavicat11(encryptedPassword)
+    if (result && isPrintableString(result)) {
+      console.log('Navicat 11 解密成功')
+      return result
+    }
+    
+    // 如果都失败，返回空字符串
+    console.warn('所有解密方法都失败，密码可能使用了不支持的加密方式')
+    return ''
+  } catch (e) {
+    console.error('Navicat 密码解密失败:', e.message)
+    return ''
+  }
+})
+
+// 检查字符串是否为可打印字符
+function isPrintableString(str) {
+  if (!str || str.length === 0) return false
+  // 检查是否包含合理的可打印字符
+  return /^[\x20-\x7E\u4e00-\u9fa5]+$/.test(str)
+}
+
+// Navicat 12+ AES-128-CBC 解密
+function decryptNavicat12(encryptedPassword) {
+  // Navicat 12 使用 AES-128-CBC
+  // 密钥: libcckeylibcckey (16 bytes)
+  // IV: 多种可能的格式
+  
+  try {
+    const encryptedBuffer = Buffer.from(encryptedPassword, 'hex')
+    
+    if (encryptedBuffer.length === 0) {
+      return ''
+    }
+    
+    // 尝试多种可能的密钥和 IV 组合
+    const attempts = [
+      // 组合 1: IV 作为 UTF-8 字符串
+      { key: 'libcckeylibcckey', iv: Buffer.from('d0288c8e24342312', 'utf8') },
+      // 组合 2: IV 重复两次的十六进制
+      { key: 'libcckeylibcckey', iv: Buffer.from('d0288c8e24342312d0288c8e24342312', 'hex') },
+      // 组合 3: 字节数组 IV
+      { key: 'libcckeylibcckey', iv: Buffer.from([0xD0, 0x28, 0x8C, 0x8E, 0x24, 0x34, 0x23, 0x12, 0xD0, 0x28, 0x8C, 0x8E, 0x24, 0x34, 0x23, 0x12]) },
+      // 组合 4: 全零 IV
+      { key: 'libcckeylibcckey', iv: Buffer.alloc(16, 0) },
+      // 组合 5: libcciv 作为 IV
+      { key: 'libcckeylibcckey', iv: Buffer.from('libcciv libcciv ', 'utf8') },
+      // 组合 6: 反向字节序
+      { key: 'libcckeylibcckey', iv: Buffer.from([0x12, 0x23, 0x34, 0x24, 0x8E, 0x8C, 0x28, 0xD0, 0x12, 0x23, 0x34, 0x24, 0x8E, 0x8C, 0x28, 0xD0]) },
+    ]
+    
+    for (const attempt of attempts) {
+      try {
+        const keyBuffer = Buffer.from(attempt.key, 'utf8')
+        const decipher = crypto.createDecipheriv('aes-128-cbc', keyBuffer, attempt.iv)
+        decipher.setAutoPadding(true)
+        
+        const decrypted = Buffer.concat([
+          decipher.update(encryptedBuffer),
+          decipher.final()
+        ])
+        
+        const result = decrypted.toString('utf8').replace(/\0+$/, '')
+        if (result && isPrintableString(result)) {
+          return result
+        }
+      } catch (e) {
+        // 继续尝试下一个组合
+      }
+      
+      // 尝试关闭自动填充
+      try {
+        const keyBuffer = Buffer.from(attempt.key, 'utf8')
+        const decipher = crypto.createDecipheriv('aes-128-cbc', keyBuffer, attempt.iv)
+        decipher.setAutoPadding(false)
+        
+        let decrypted = Buffer.concat([
+          decipher.update(encryptedBuffer),
+          decipher.final()
+        ])
+        
+        // 手动移除填充
+        const paddingLen = decrypted[decrypted.length - 1]
+        if (paddingLen > 0 && paddingLen <= 16) {
+          // 验证填充是否正确
+          let validPadding = true
+          for (let i = 0; i < paddingLen; i++) {
+            if (decrypted[decrypted.length - 1 - i] !== paddingLen) {
+              validPadding = false
+              break
+            }
+          }
+          if (validPadding) {
+            decrypted = decrypted.slice(0, -paddingLen)
+          }
+        }
+        
+        const result = decrypted.toString('utf8').replace(/\0+$/, '')
+        if (result && isPrintableString(result)) {
+          return result
+        }
+      } catch (e) {
+        // 继续尝试下一个组合
+      }
+    }
+    
+    return ''
+  } catch (e) {
+    return ''
+  }
+}
+
+// Navicat 11 解密 - 使用 Blowfish ECB
+function decryptNavicat11(encryptedPassword) {
+  try {
+    const encryptedBuffer = Buffer.from(encryptedPassword, 'hex')
+    
+    if (encryptedBuffer.length === 0) {
+      return ''
+    }
+    
+    // 方法 1: 使用 Blowfish ECB 模式
+    // Navicat 11 密钥是 SHA1("3DC5CA39") 的前 8 字节
+    const keyStr = '3DC5CA39'
+    const sha1Key = crypto.createHash('sha1').update(keyStr).digest()
+    const blowfishKey = sha1Key.slice(0, 8)
+    
+    try {
+      const bf = new Blowfish(blowfishKey, Blowfish.MODE.ECB, Blowfish.PADDING.NULL)
+      const decrypted = bf.decode(encryptedBuffer, Blowfish.TYPE.UINT8_ARRAY)
+      const result = Buffer.from(decrypted).toString('utf8').replace(/\0+$/, '')
+      if (result && isPrintableString(result)) {
+        console.log('Blowfish ECB 解密成功')
+        return result
+      }
+    } catch (e) {
+      // 继续尝试其他方法
+    }
+    
+    // 方法 2: 直接使用密钥字符串作为 Blowfish 密钥
+    try {
+      const bf = new Blowfish(keyStr, Blowfish.MODE.ECB, Blowfish.PADDING.NULL)
+      const decrypted = bf.decode(encryptedBuffer, Blowfish.TYPE.UINT8_ARRAY)
+      const result = Buffer.from(decrypted).toString('utf8').replace(/\0+$/, '')
+      if (result && isPrintableString(result)) {
+        console.log('Blowfish ECB (direct key) 解密成功')
+        return result
+      }
+    } catch (e) {
+      // 继续尝试其他方法
+    }
+    
+    // 方法 3: XOR 解密（作为后备）
+    const sha1Hash = crypto.createHash('sha1').update(keyStr).digest()
+    let result = Buffer.alloc(encryptedBuffer.length)
+    for (let i = 0; i < encryptedBuffer.length; i++) {
+      result[i] = encryptedBuffer[i] ^ sha1Hash[i % sha1Hash.length]
+    }
+    
+    let decrypted = result.toString('utf8').replace(/\0+$/, '')
+    if (decrypted && isPrintableString(decrypted)) {
+      return decrypted
+    }
+    
+    // 方法 4: Navicat 特定的 XOR 序列
+    result = navicatXorDecrypt(encryptedBuffer)
+    decrypted = result.toString('utf8').replace(/\0+$/, '')
+    if (decrypted && isPrintableString(decrypted)) {
+      return decrypted
+    }
+    
+    return ''
+  } catch (e) {
+    console.error('Navicat 11 解密错误:', e.message)
+    return ''
+  }
+}
+
+// Navicat 特定的 XOR 解密算法
+function navicatXorDecrypt(encryptedBuffer) {
+  // Navicat 使用特定的 XOR 序列
+  const xorKey = Buffer.from([
+    0x42, 0xCE, 0xB2, 0x71, 0xA5, 0xE4, 0x58, 0xB7,
+    0x4E, 0x13, 0xEA, 0x1C, 0x91, 0x67, 0xA3, 0x6D
+  ])
+  
+  const result = Buffer.alloc(encryptedBuffer.length)
+  for (let i = 0; i < encryptedBuffer.length; i++) {
+    result[i] = encryptedBuffer[i] ^ xorKey[i % xorKey.length]
+  }
+  
+  return result
+}
+
 // ============ 数据库连接辅助函数 ============
 async function createConnection(config) {
   const { type, host, port, username, password, database } = config
diff --git a/electron/preload.js b/electron/preload.js
index 0dff51b..24a4ff5 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -72,5 +72,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
   selectFile: (extensions) => ipcRenderer.invoke('file:select', extensions),
   saveDialog: (options) => ipcRenderer.invoke('file:saveDialog', options),
   writeFile: (filePath, content) => ipcRenderer.invoke('file:write', filePath, content),
-  readFile: (filePath) => ipcRenderer.invoke('file:read', filePath)
+  readFile: (filePath) => ipcRenderer.invoke('file:read', filePath),
+
+  // 密码解密
+  decryptNavicatPassword: (encryptedPassword, version) => 
+    ipcRenderer.invoke('crypto:decryptNavicatPassword', encryptedPassword, version)
 })
diff --git a/package-lock.json b/package-lock.json
index 69192a9..30674f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@monaco-editor/react": "^4.7.0",
+        "blowfish-node": "^1.1.4",
         "ioredis": "^5.8.2",
         "lucide-react": "^0.294.0",
         "monaco-editor": "^0.55.1",
@@ -3452,6 +3453,12 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/blowfish-node": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/blowfish-node/-/blowfish-node-1.1.4.tgz",
+      "integrity": "sha512-Iahpxc/cutT0M0tgwV5goklB+EzDuiYLgwJg050AmUG2jSIOpViWMLdnRgBxzZuNfswAgHSUiIdvmNdgL2v6DA==",
+      "license": "MIT"
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmmirror.com/bluebird/-/bluebird-3.7.2.tgz",
diff --git a/package.json b/package.json
index 9068091..3b6b1e3 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
+    "blowfish-node": "^1.1.4",
     "ioredis": "^5.8.2",
     "lucide-react": "^0.294.0",
     "monaco-editor": "^0.55.1",
diff --git a/src/App.tsx b/src/App.tsx
index 6d57b4d..2d6b1d1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import MainContent from './components/MainContent'
 import ConnectionModal from './components/ConnectionModal'
 import CreateDatabaseModal from './components/CreateDatabaseModal'
 import CreateTableModal from './components/CreateTableModal'
+import TableDesigner from './components/TableDesigner'
 import InputDialog from './components/InputDialog'
 import { Connection, QueryTab, DatabaseType, TableInfo, ColumnInfo, TableTab } from './types'
 import api from './lib/electron-api'
@@ -21,6 +22,8 @@ function App() {
   const [createDbConnectionId, setCreateDbConnectionId] = useState<string | null>(null)
   const [showCreateTableModal, setShowCreateTableModal] = useState(false)
   const [createTableContext, setCreateTableContext] = useState<{ connectionId: string; database: string } | null>(null)
+  const [showTableDesigner, setShowTableDesigner] = useState(false)
+  const [tableDesignerContext, setTableDesignerContext] = useState<{ connectionId: string; database: string; tableName?: string; mode: 'create' | 'edit' } | null>(null)
   const [inputDialog, setInputDialog] = useState<{
     isOpen: boolean
     title: string
@@ -50,6 +53,7 @@ function App() {
   const {
     databasesMap, setDatabasesMap,
     loadingDbSet, setLoadingDbSet,
+    loadingConnectionsSet,
     fetchDatabases
   } = useDatabaseOperations(showNotification)
 
@@ -77,7 +81,11 @@ function App() {
   const handleConnect = useCallback(async (conn: Connection) => {
     if (connectedIds.has(conn.id)) return
     try {
-      await api.connect(conn)
+      const result = await api.connect(conn)
+      if (!result.success) {
+        showNotification('error', '连接失败：' + result.message)
+        return
+      }
       setConnectedIds(prev => new Set(prev).add(conn.id))
       setActiveConnection(conn.id)
       await fetchDatabases(conn.id)
@@ -101,12 +109,27 @@ function App() {
         next.delete(id)
         return next
       })
+      // 关闭该连接的所有标签页
+      setTabs(prev => {
+        const remainingTabs = prev.filter(tab => {
+          // TableTab 有 connectionId
+          if ('connectionId' in tab && tab.connectionId === id) {
+            return false
+          }
+          return true
+        })
+        // 如果当前活跃标签页被关闭，切换到第一个标签页或主页
+        if (activeTab && !remainingTabs.find(t => t.id === activeTab)) {
+          setActiveTab(remainingTabs.length > 0 ? remainingTabs[0].id : 'welcome')
+        }
+        return remainingTabs
+      })
       if (activeConnection === id) setActiveConnection(null)
       showNotification('info', '连接已断开')
     } catch (err) {
       showNotification('error', '断开失败：' + (err as Error).message)
     }
-  }, [activeConnection, setConnectedIds, setDatabasesMap, showNotification])
+  }, [activeConnection, activeTab, setConnectedIds, setDatabasesMap, setTabs, setActiveTab, showNotification])
 
   // 选择数据库
   const handleSelectDatabase = useCallback(async (db: string, connectionId: string) => {
@@ -126,40 +149,62 @@ function App() {
     }
   }, [fetchTables, fetchColumns, tablesMap, setLoadingDbSet])
 
+  // 切换连接（在查询界面使用，会清空数据库选择）
+  const handleConnectionChange = useCallback((connectionId: string) => {
+    // 如果切换到不同的连接，清空数据库选择
+    if (connectionId !== activeConnection) {
+      setSelectedDatabase(null)
+    }
+    setActiveConnection(connectionId)
+  }, [activeConnection])
+
   // 打开表
   const handleOpenTable = useCallback(async (connectionId: string, database: string, tableName: string) => {
-    const existingTab = tabs.find(t => 'tableName' in t && t.tableName === tableName && t.database === database)
+    const existingTab = tabs.find(t => 'tableName' in t && t.tableName === tableName && t.database === database && t.connectionId === connectionId)
     if (existingTab) {
       setActiveTab(existingTab.id)
       return
     }
 
     const newTabId = `table-${Date.now()}`
+    const pageSize = 100
+    
+    // 先创建标签页并显示（带 loading 状态）
+    const newTab: TableTab = {
+      id: newTabId,
+      tableName,
+      database,
+      connectionId,
+      columns: [],
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize,
+      pendingChanges: new Map(),
+      deletedRows: new Set(),
+      newRows: []
+    }
+    setTabs(prev => [...prev, newTab])
+    setActiveTab(newTabId)
     setLoadingTables(prev => new Set(prev).add(newTabId))
     
+    // 然后异步加载数据
     try {
       const cols = await api.getTableColumns(connectionId, database, tableName)
-      const pageSize = 100
-      const { rows, total } = await api.getTableData(connectionId, database, tableName, 1, pageSize)
+      const { data, total } = await api.getTableData(connectionId, database, tableName, 1, pageSize)
       
-      const newTab: TableTab = {
-        id: newTabId,
-        tableName,
-        database,
-        connectionId,
+      // 更新标签页数据
+      setTabs(prev => prev.map(t => t.id === newTabId ? {
+        ...t,
         columns: cols,
-        data: rows,
-        total,
-        page: 1,
-        pageSize,
-        pendingChanges: new Map(),
-        deletedRows: new Set(),
-        newRows: []
-      }
-      setTabs(prev => [...prev, newTab])
-      setActiveTab(newTabId)
+        data: data || [],
+        total
+      } : t))
     } catch (err) {
       showNotification('error', '打开表失败：' + (err as Error).message)
+      // 加载失败时移除标签页
+      setTabs(prev => prev.filter(t => t.id !== newTabId))
+      setActiveTab('welcome')
     } finally {
       setLoadingTables(prev => {
         const next = new Set(prev)
@@ -176,8 +221,8 @@ function App() {
 
     setLoadingTables(prev => new Set(prev).add(tabId))
     try {
-      const { rows, total } = await api.getTableData(tab.connectionId, tab.database, tab.tableName, page, tab.pageSize)
-      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, data: rows, total, page, pendingChanges: new Map(), deletedRows: new Set(), newRows: [] } : t))
+      const { data, total } = await api.getTableData(tab.connectionId, tab.database, tab.tableName, page, tab.pageSize)
+      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, data: data || [], total, page, pendingChanges: new Map(), deletedRows: new Set(), newRows: [] } : t))
     } catch (err) {
       showNotification('error', '加载数据失败')
     } finally {
@@ -193,13 +238,22 @@ function App() {
   const handleUpdateTableCell = useCallback((tabId: string, rowIndex: number, colName: string, value: any) => {
     setTabs(prev => prev.map(t => {
       if (t.id !== tabId || !('tableName' in t)) return t
-      const tab = t as TableTab & { pendingChanges: Map<string, any> }
+      const tab = t as TableTab & { pendingChanges: Map<string, any>; data: any[] }
+      
+      // 更新 pendingChanges
       const changes = new Map(tab.pendingChanges)
       const rowKey = String(rowIndex)
       const rowChanges = changes.get(rowKey) || {}
       rowChanges[colName] = value
       changes.set(rowKey, rowChanges)
-      return { ...t, pendingChanges: changes }
+      
+      // 同时更新 data 数组以便 UI 立即显示更新
+      const newData = [...tab.data]
+      if (newData[rowIndex]) {
+        newData[rowIndex] = { ...newData[rowIndex], [colName]: value }
+      }
+      
+      return { ...t, data: newData, pendingChanges: changes }
     }))
   }, [setTabs])
 
@@ -330,10 +384,16 @@ function App() {
 
   // 新建查询
   const handleNewQuery = useCallback(() => {
-    const newTab: QueryTab = { id: `query-${Date.now()}`, title: `查询 ${tabs.filter(t => !('tableName' in t)).length + 1}`, sql: '', results: null }
+    const newTab: QueryTab = { 
+      id: `query-${Date.now()}`, 
+      title: `查询 ${tabs.filter(t => !('tableName' in t)).length + 1}`, 
+      sql: '', 
+      connectionId: activeConnection || undefined,
+      results: null 
+    }
     setTabs(prev => [...prev, newTab])
     setActiveTab(newTab.id)
-  }, [tabs, setTabs, setActiveTab])
+  }, [tabs, setTabs, setActiveTab, activeConnection])
 
   // 执行查询
   const handleRunQuery = useCallback(async (tabId: string, sql: string) => {
@@ -431,10 +491,10 @@ function App() {
     }
   }, [fetchDatabases, showNotification])
 
-  // 创建表
+  // 创建表 - 使用 TableDesigner
   const handleCreateTable = useCallback((connectionId: string, database: string) => {
-    setCreateTableContext({ connectionId, database })
-    setShowCreateTableModal(true)
+    setTableDesignerContext({ connectionId, database, mode: 'create' })
+    setShowTableDesigner(true)
   }, [])
 
   // 删除表
@@ -508,10 +568,11 @@ function App() {
     showNotification('success', '已刷新')
   }, [fetchTables, showNotification])
 
-  // 设计表
-  const handleDesignTable = useCallback(async (connectionId: string, database: string, table: string) => {
-    showNotification('info', '表设计器开发中...')
-  }, [showNotification])
+  // 设计表 - 使用 TableDesigner
+  const handleDesignTable = useCallback((connectionId: string, database: string, table: string) => {
+    setTableDesignerContext({ connectionId, database, tableName: table, mode: 'edit' })
+    setShowTableDesigner(true)
+  }, [])
 
   // 键盘快捷键
   useEffect(() => {
@@ -537,6 +598,7 @@ function App() {
           tablesMap={tablesMap}
           selectedDatabase={selectedDatabase}
           loadingDbSet={loadingDbSet}
+          loadingConnectionsSet={loadingConnectionsSet}
           onNewConnection={() => { setEditingConnection(null); setNewConnectionType(undefined); setShowConnectionModal(true) }}
           onSelectConnection={setActiveConnection}
           onConnect={handleConnect}
@@ -557,10 +619,16 @@ function App() {
           onDuplicateTable={handleDuplicateTable}
           onRefreshTables={handleRefreshTables}
           onDesignTable={handleDesignTable}
+          onFetchDatabases={fetchDatabases}
         />
         <MainContent
           tabs={tabs}
           activeTab={activeTab}
+          activeConnection={activeConnection}
+          selectedDatabase={selectedDatabase}
+          connections={connections}
+          connectedIds={connectedIds}
+          databasesMap={databasesMap}
           databases={databasesMap.get(activeConnection || '') || []}
           tables={tablesMap.get(selectedDatabase || '') || []}
           columns={columnsMap}
@@ -582,6 +650,8 @@ function App() {
           onAddTableRow={handleAddTableRow}
           onUpdateNewRow={handleUpdateNewRow}
           onDeleteNewRow={handleDeleteNewRow}
+          onSelectConnection={handleConnectionChange}
+          onSelectDatabase={handleSelectDatabase}
           loadingTables={loadingTables}
         />
       </div>
@@ -634,6 +704,74 @@ function App() {
         }}
       />
 
+      {showTableDesigner && tableDesignerContext && (
+        <TableDesigner
+          isOpen={showTableDesigner}
+          mode={tableDesignerContext.mode}
+          database={tableDesignerContext.database}
+          tableName={tableDesignerContext.tableName}
+          connectionId={tableDesignerContext.connectionId}
+          dbType={connections.find(c => c.id === tableDesignerContext.connectionId)?.type || 'mysql'}
+          onClose={() => { setShowTableDesigner(false); setTableDesignerContext(null) }}
+          onSave={async (sql: string) => {
+            try {
+              await api.executeQuery(tableDesignerContext.connectionId, sql)
+              await fetchTables(tableDesignerContext.connectionId, tableDesignerContext.database)
+              showNotification('success', tableDesignerContext.mode === 'create' ? '表创建成功' : '表结构已更新')
+              return { success: true, message: '' }
+            } catch (err: any) {
+              return { success: false, message: err.message || '操作失败' }
+            }
+          }}
+          onGetTableInfo={tableDesignerContext.mode === 'edit' ? async () => {
+            const cols = await api.getTableColumns(tableDesignerContext.connectionId, tableDesignerContext.database, tableDesignerContext.tableName!)
+            return {
+              columns: cols.map((c, i) => ({
+                id: `col-${i}`,
+                name: c.name,
+                type: c.type.split('(')[0].toUpperCase(),
+                length: c.type.match(/\((\d+)/)?.[1] || '',
+                decimals: c.type.match(/,(\d+)\)/)?.[1] || '',
+                nullable: c.nullable,
+                primaryKey: c.key === 'PRI',
+                autoIncrement: c.extra?.includes('auto_increment') || false,
+                unsigned: c.type.includes('unsigned'),
+                zerofill: c.type.includes('zerofill'),
+                defaultValue: c.default || '',
+                comment: c.comment || '',
+                isVirtual: false,
+                virtualExpression: ''
+              })),
+              indexes: [],
+              foreignKeys: [],
+              options: { engine: 'InnoDB', charset: 'utf8mb4', collation: 'utf8mb4_general_ci', comment: '', autoIncrement: '', rowFormat: '' }
+            }
+          } : undefined}
+          onGetDatabases={async () => databasesMap.get(tableDesignerContext.connectionId) || []}
+          onGetTables={async (db) => {
+            // 如果缓存中有表列表，直接返回
+            const cached = tablesMap.get(db)
+            if (cached && cached.length > 0) {
+              return cached.map(t => t.name)
+            }
+            // 否则从 API 加载
+            try {
+              const tables = await api.getTables(tableDesignerContext.connectionId, db)
+              // 更新缓存
+              setTablesMap(prev => new Map(prev).set(db, tables))
+              return tables.map((t: any) => t.name || t)
+            } catch (err) {
+              console.error('Failed to load tables:', err)
+              return []
+            }
+          }}
+          onGetColumns={async (db, table) => {
+            const cols = await api.getTableColumns(tableDesignerContext.connectionId, db, table)
+            return cols.map(c => c.name)
+          }}
+        />
+      )}
+
       {inputDialog && (
         <InputDialog
           isOpen={inputDialog.isOpen}
diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index b4a528c..4868621 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -137,7 +137,7 @@ export default function ConnectionModal({ isOpen, editingConnection, initialType
   const isEditing = !!editingConnection
 
   return (
-    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 animate-fade-in backdrop-blur-sm" onClick={onClose}>
+    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 animate-fade-in backdrop-blur-sm">
       <div className="w-[520px] max-h-[90vh] bg-white flex flex-col overflow-hidden rounded-2xl shadow-modal animate-scale-in" onClick={e => e.stopPropagation()}>
         {/* 标题 */}
         <div className="h-14 flex items-center justify-between px-5 border-b border-border-default">
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
index 95ab725..946d0ad 100644
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@@ -1,5 +1,5 @@
-import { X, Play, Plus, Minus, Table2, ChevronLeft, ChevronRight, FolderOpen, Save, AlignLeft, Download, FileSpreadsheet, FileCode, Database, Loader2, Check, RefreshCw, Zap } from 'lucide-react'
-import { QueryTab, DB_INFO, DatabaseType, TableInfo, ColumnInfo, TableTab } from '../types'
+import { X, Play, Plus, Minus, Table2, ChevronLeft, ChevronRight, FolderOpen, Save, AlignLeft, Download, FileSpreadsheet, FileCode, Database, Loader2, Check, RefreshCw, Zap, Server, ChevronDown } from 'lucide-react'
+import { QueryTab, DB_INFO, DatabaseType, TableInfo, ColumnInfo, TableTab, Connection } from '../types'
 import { useState, useEffect, useCallback, memo, Suspense, lazy } from 'react'
 import { format } from 'sql-formatter'
 import api from '../lib/electron-api'
@@ -21,6 +21,11 @@ type Tab = QueryTab | TableTab
 interface Props {
   tabs: Tab[]
   activeTab: string
+  activeConnection: string | null
+  selectedDatabase: string | null
+  connections: Connection[]
+  connectedIds: Set<string>
+  databasesMap: Map<string, string[]>
   databases: string[]
   tables: TableInfo[]
   columns: Map<string, ColumnInfo[]>
@@ -42,12 +47,19 @@ interface Props {
   onAddTableRow?: (tabId: string) => void
   onUpdateNewRow?: (tabId: string, rowIndex: number, colName: string, value: any) => void
   onDeleteNewRow?: (tabId: string, rowIndex: number) => void
+  onSelectConnection?: (connectionId: string) => void
+  onSelectDatabase?: (database: string, connectionId: string) => void
   loadingTables?: Set<string>
 }
 
 const MainContent = memo(function MainContent({
   tabs,
   activeTab,
+  activeConnection,
+  selectedDatabase,
+  connections,
+  connectedIds,
+  databasesMap,
   databases,
   tables,
   columns,
@@ -69,6 +81,8 @@ const MainContent = memo(function MainContent({
   onAddTableRow,
   onUpdateNewRow,
   onDeleteNewRow,
+  onSelectConnection,
+  onSelectDatabase,
   loadingTables,
 }: Props) {
   useEffect(() => {
@@ -175,12 +189,19 @@ const MainContent = memo(function MainContent({
           ) : (
             <QueryEditor
               tab={currentTab}
+              connectionId={activeConnection}
+              selectedDatabase={selectedDatabase}
+              connections={connections}
+              connectedIds={connectedIds}
+              databasesMap={databasesMap}
               databases={databases}
               tables={tables}
               columns={columns}
               onRun={(sql) => onRunQuery(currentTab.id, sql)}
               onUpdateSql={(sql) => onUpdateSql(currentTab.id, sql)}
               onUpdateTitle={(title) => onUpdateTabTitle(currentTab.id, title)}
+              onSelectConnection={onSelectConnection}
+              onSelectDatabase={onSelectDatabase}
             />
           )
         ) : null}
@@ -315,7 +336,8 @@ const TableViewer = memo(function TableViewer({
   })
   
   const newRowCount = tab.newRows?.length || 0
-  const existingDataCount = tab.data.filter((_, i) => !tab.deletedRows?.has(i)).length
+  const tabData = tab.data || []
+  const existingDataCount = tabData.filter((_, i) => !tab.deletedRows?.has(i)).length
   
   if (newRowCount > 0) {
     for (let i = 0; i < newRowCount; i++) {
@@ -326,8 +348,8 @@ const TableViewer = memo(function TableViewer({
     }
   }
   
-  const visibleData = [...tab.data.filter((_, i) => !tab.deletedRows?.has(i)), ...(tab.newRows || [])]
-  const originalIndexMap = tab.data.map((_, i) => i).filter(i => !tab.deletedRows?.has(i))
+  const visibleData = [...tabData.filter((_, i) => !tab.deletedRows?.has(i)), ...(tab.newRows || [])]
+  const originalIndexMap = tabData.map((_, i) => i).filter(i => !tab.deletedRows?.has(i))
   const changesCount = (tab.pendingChanges?.size || 0) + (tab.deletedRows?.size || 0) + (tab.newRows?.length || 0)
   
   return (
@@ -358,17 +380,17 @@ const TableViewer = memo(function TableViewer({
           <button
             onClick={() => onLoadPage(tab.page - 1)}
             disabled={tab.page <= 1 || isLoading}
-            className="p-1 hover:bg-light-hover disabled:opacity-30 rounded transition-colors"
+            className="p-1 hover:bg-light-hover disabled:opacity-30 rounded transition-colors text-text-primary"
           >
             <ChevronLeft size={16} />
           </button>
-          <span className="text-xs min-w-[70px] text-center">
+          <span className="text-xs min-w-[70px] text-center text-text-primary">
             <span className="text-primary-600 font-medium">{tab.page}</span> / {totalPages}
           </span>
           <button
             onClick={() => onLoadPage(tab.page + 1)}
             disabled={tab.page >= totalPages || isLoading}
-            className="p-1 hover:bg-light-hover disabled:opacity-30 rounded transition-colors"
+            className="p-1 hover:bg-light-hover disabled:opacity-30 rounded transition-colors text-text-primary"
           >
             <ChevronRight size={16} />
           </button>
@@ -376,7 +398,7 @@ const TableViewer = memo(function TableViewer({
             value={tab.pageSize}
             onChange={(e) => onChangePageSize?.(parseInt(e.target.value))}
             disabled={isLoading}
-            className="h-7 px-2 text-xs bg-white border border-border-default rounded cursor-pointer"
+            className="h-7 px-2 text-xs bg-white border border-border-default rounded cursor-pointer text-text-primary"
           >
             <option value={100}>100</option>
             <option value={500}>500</option>
@@ -388,16 +410,31 @@ const TableViewer = memo(function TableViewer({
 
       {/* 表格 */}
       <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
-        {isLoading && (
-          <div className="loading-overlay">
-            <div className="flex flex-col items-center gap-3">
-              <Loader2 size={28} className="animate-spin text-primary-500" />
-              <span className="text-sm text-text-secondary">加载数据中...</span>
+        {isLoading && tab.columns.length === 0 ? (
+          // 初始加载时显示全屏 loading
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-light-bg">
+            <div className="flex flex-col items-center gap-4">
+              <div className="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center">
+                <Loader2 size={24} className="animate-spin text-primary-500" />
+              </div>
+              <div className="text-center">
+                <div className="text-sm font-medium text-text-primary mb-1">正在加载表数据</div>
+                <div className="text-xs text-text-muted">{tab.tableName}</div>
+              </div>
             </div>
           </div>
-        )}
-        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-          <VirtualDataTable 
+        ) : (
+          <>
+            {isLoading && (
+              <div className="loading-overlay">
+                <div className="flex flex-col items-center gap-3">
+                  <Loader2 size={28} className="animate-spin text-primary-500" />
+                  <span className="text-sm text-text-secondary">加载数据中...</span>
+                </div>
+              </div>
+            )}
+            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+              <VirtualDataTable 
             columns={tab.columns} 
             data={visibleData} 
             showColumnInfo={true}
@@ -442,7 +479,9 @@ const TableViewer = memo(function TableViewer({
               })
             }}
           />
-        </div>
+            </div>
+          </>
+        )}
       </div>
 
       {/* 底部操作栏 */}
@@ -483,19 +522,221 @@ const TableViewer = memo(function TableViewer({
 
 // 查询编辑器
 const QueryEditor = memo(function QueryEditor({ 
-  tab, databases, tables, columns, onRun, onUpdateSql, onUpdateTitle 
+  tab, connectionId, selectedDatabase, connections, connectedIds, databasesMap, databases, tables, columns, 
+  onRun, onUpdateSql, onUpdateTitle, onSelectConnection, onSelectDatabase
 }: { 
   tab: QueryTab
+  connectionId: string | null
+  selectedDatabase: string | null
+  connections: Connection[]
+  connectedIds: Set<string>
+  databasesMap: Map<string, string[]>
   databases: string[]
   tables: TableInfo[]
   columns: Map<string, ColumnInfo[]>
   onRun: (sql: string) => void
   onUpdateSql: (sql: string) => void
   onUpdateTitle?: (title: string) => void
+  onSelectConnection?: (connectionId: string) => void
+  onSelectDatabase?: (database: string, connectionId: string) => void
 }) {
+  const [showConnectionMenu, setShowConnectionMenu] = useState(false)
+  const [showDatabaseMenu, setShowDatabaseMenu] = useState(false)
+  
+  // 获取当前连接信息
+  const currentConnection = connections.find(c => c.id === connectionId)
+  const currentDatabases = connectionId ? (databasesMap.get(connectionId) || []) : []
   const [sql, setSql] = useState(tab.sql)
   const [filePath, setFilePath] = useState<string | null>(null)
   const [showExportMenu, setShowExportMenu] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  
+  // 本地数据状态（用于编辑）
+  const [localData, setLocalData] = useState<any[]>([])
+  const [originalData, setOriginalData] = useState<any[]>([])  // 保存原始数据用于对比
+  const [modifiedCells, setModifiedCells] = useState<Set<string>>(new Set())
+  const [deletedRows, setDeletedRows] = useState<Set<number>>(new Set())  // 待删除的行索引（原始数据的索引）
+  
+  // 当查询结果变化时，更新本地数据
+  useEffect(() => {
+    if (tab.results) {
+      const data = tab.results.rows.map(row => {
+        const obj: Record<string, any> = {}
+        tab.results?.columns.forEach((col, i) => { obj[col] = row[i] })
+        return obj
+      })
+      setLocalData(data)
+      setOriginalData(JSON.parse(JSON.stringify(data)))  // 深拷贝保存原始数据
+      setModifiedCells(new Set())
+      setDeletedRows(new Set())
+    } else {
+      setLocalData([])
+      setOriginalData([])
+      setModifiedCells(new Set())
+      setDeletedRows(new Set())
+    }
+  }, [tab.results])
+  
+  // 从SQL中解析表名（支持简单的 SELECT ... FROM table_name 格式）
+  const parseTableNameFromSql = useCallback((sqlStr: string): string | null => {
+    // 匹配 FROM table_name 或 FROM `table_name` 或 FROM database.table_name
+    const match = sqlStr.match(/\bFROM\s+[`"]?(\w+)[`"]?(?:\s*\.\s*[`"]?(\w+)[`"]?)?/i)
+    if (match) {
+      // 如果有 database.table 格式，返回表名
+      return match[2] || match[1]
+    }
+    return null
+  }, [])
+  
+  // 从SQL中解析数据库名
+  const parseDatabaseFromSql = useCallback((sqlStr: string): string | null => {
+    const match = sqlStr.match(/\bFROM\s+[`"]?(\w+)[`"]?\s*\.\s*[`"]?(\w+)[`"]?/i)
+    if (match) {
+      return match[1]  // 返回数据库名
+    }
+    return null
+  }, [])
+  
+  // 保存修改到数据库（包括更新和删除）
+  const handleSaveChanges = useCallback(async () => {
+    if (!connectionId || (modifiedCells.size === 0 && deletedRows.size === 0)) return
+    
+    const tableName = parseTableNameFromSql(sql)
+    if (!tableName) {
+      alert('无法从SQL中解析表名，只支持简单的 SELECT ... FROM table_name 格式')
+      return
+    }
+    
+    const database = parseDatabaseFromSql(sql) || selectedDatabase
+    if (!database) {
+      alert('无法确定数据库，请先选择数据库')
+      return
+    }
+    
+    // 找到主键列
+    const tableColumns = columns.get(`${database}.${tableName}`) || columns.get(tableName) || []
+    let primaryKeyCol = tableColumns.find(c => c.key === 'PRI')?.name
+    
+    // 如果找不到主键，尝试用第一列
+    if (!primaryKeyCol && tab.results?.columns.length) {
+      primaryKeyCol = tab.results.columns[0]
+    }
+    
+    if (!primaryKeyCol) {
+      alert('无法确定主键列，无法保存修改')
+      return
+    }
+    
+    setIsSaving(true)
+    
+    try {
+      let updateSuccessCount = 0
+      let updateErrorCount = 0
+      let deleteSuccessCount = 0
+      let deleteErrorCount = 0
+      
+      // 1. 执行删除操作
+      if (deletedRows.size > 0) {
+        for (const rowIndex of deletedRows) {
+          const originalRow = originalData[rowIndex]
+          if (!originalRow) continue
+          
+          const primaryKeyValue = originalRow[primaryKeyCol]
+          if (primaryKeyValue === null || primaryKeyValue === undefined) {
+            deleteErrorCount++
+            continue
+          }
+          
+          const result = await api.deleteRow(
+            connectionId,
+            database,
+            tableName,
+            { column: primaryKeyCol, value: primaryKeyValue }
+          )
+          
+          if (result.success) {
+            deleteSuccessCount++
+          } else {
+            deleteErrorCount++
+            console.error('删除失败:', result.error)
+          }
+        }
+      }
+      
+      // 2. 执行更新操作（需要调整索引，因为有些行可能已删除）
+      if (modifiedCells.size > 0) {
+        // 按行分组修改
+        const rowChanges = new Map<number, Record<string, any>>()
+        modifiedCells.forEach(cellKey => {
+          const idx = cellKey.indexOf('-')
+          const rowIndex = parseInt(cellKey.substring(0, idx))
+          const colName = cellKey.substring(idx + 1)
+          
+          if (!rowChanges.has(rowIndex)) {
+            rowChanges.set(rowIndex, {})
+          }
+          rowChanges.get(rowIndex)![colName] = localData[rowIndex]?.[colName]
+        })
+        
+        for (const [localRowIndex, updates] of rowChanges) {
+          // 找到对应的原始行索引
+          // localRowIndex 是当前 localData 中的索引，需要映射回原始数据的索引
+          let originalRowIndex = localRowIndex
+          const sortedDeletedIndices = [...deletedRows].sort((a, b) => a - b)
+          for (const delIdx of sortedDeletedIndices) {
+            if (delIdx <= originalRowIndex) {
+              originalRowIndex++
+            }
+          }
+          
+          const originalRow = originalData[originalRowIndex]
+          if (!originalRow) continue
+          
+          const primaryKeyValue = originalRow[primaryKeyCol]
+          if (primaryKeyValue === null || primaryKeyValue === undefined) {
+            updateErrorCount++
+            continue
+          }
+          
+          const result = await api.updateRow(
+            connectionId,
+            database,
+            tableName,
+            { column: primaryKeyCol, value: primaryKeyValue },
+            updates
+          )
+          
+          if (result.success) {
+            updateSuccessCount++
+          } else {
+            updateErrorCount++
+            console.error('更新失败:', result.error)
+          }
+        }
+      }
+      
+      // 汇总结果
+      const messages: string[] = []
+      if (deleteSuccessCount > 0) messages.push(`删除 ${deleteSuccessCount} 行`)
+      if (updateSuccessCount > 0) messages.push(`更新 ${updateSuccessCount} 行`)
+      if (deleteErrorCount > 0) messages.push(`删除失败 ${deleteErrorCount} 行`)
+      if (updateErrorCount > 0) messages.push(`更新失败 ${updateErrorCount} 行`)
+      
+      if (deleteSuccessCount > 0 || updateSuccessCount > 0) {
+        // 更新原始数据
+        setOriginalData(JSON.parse(JSON.stringify(localData)))
+        setModifiedCells(new Set())
+        setDeletedRows(new Set())
+        alert(`操作完成：${messages.join('，')}`)
+      } else if (deleteErrorCount > 0 || updateErrorCount > 0) {
+        alert(`操作失败：${messages.join('，')}`)
+      }
+    } catch (err: any) {
+      alert('保存失败: ' + err.message)
+    } finally {
+      setIsSaving(false)
+    }
+  }, [connectionId, selectedDatabase, sql, modifiedCells, deletedRows, localData, originalData, columns, tab.results, parseTableNameFromSql, parseDatabaseFromSql])
 
   const handleRun = useCallback(() => {
     onRun(sql)
@@ -539,35 +780,109 @@ const QueryEditor = memo(function QueryEditor({
   }, [columns])
 
   const handleExportCsv = useCallback(async () => {
-    if (!tab.results || tab.results.rows.length === 0) return
+    if (!tab.results || localData.length === 0) return
     const electronAPI = (window as any).electronAPI
     if (!electronAPI) return
     const path = await electronAPI.saveDialog({ filters: [{ name: 'CSV', extensions: ['csv'] }], defaultPath: `query_${Date.now()}.csv` })
     if (!path) return
     const header = tab.results.columns.join(',')
-    const rows = tab.results.rows.map(row => row.map((v: any) => v === null ? '' : typeof v === 'string' ? `"${v.replace(/"/g, '""')}"` : String(v)).join(',')).join('\n')
+    const rows = localData.map(row => 
+      tab.results!.columns.map(col => {
+        const v = row[col]
+        return v === null ? '' : typeof v === 'string' ? `"${v.replace(/"/g, '""')}"` : String(v)
+      }).join(',')
+    ).join('\n')
     await electronAPI.writeFile(path, `${header}\n${rows}`)
-  }, [tab.results])
+  }, [tab.results, localData])
 
   const handleExportSql = useCallback(async () => {
-    if (!tab.results || tab.results.rows.length === 0) return
+    if (!tab.results || localData.length === 0) return
     const electronAPI = (window as any).electronAPI
     if (!electronAPI) return
     const path = await electronAPI.saveDialog({ filters: [{ name: 'SQL', extensions: ['sql'] }], defaultPath: `query_${Date.now()}.sql` })
     if (!path) return
-    let sqlContent = `-- ${new Date().toLocaleString()}\n-- ${tab.results.rows.length} 条\n\n`
-    tab.results.rows.forEach(row => {
-      const values = row.map((val: any) => val === null ? 'NULL' : typeof val === 'number' ? val : `'${String(val).replace(/'/g, "''")}'`).join(', ')
+    let sqlContent = `-- ${new Date().toLocaleString()}\n-- ${localData.length} 条\n\n`
+    localData.forEach(row => {
+      const values = tab.results!.columns.map(col => {
+        const val = row[col]
+        return val === null ? 'NULL' : typeof val === 'number' ? val : `'${String(val).replace(/'/g, "''")}'`
+      }).join(', ')
       sqlContent += `INSERT INTO table_name (\`${tab.results!.columns.join('`, `')}\`) VALUES (${values});\n`
     })
     await electronAPI.writeFile(path, sqlContent)
-  }, [tab.results])
+  }, [tab.results, localData])
 
-  const resultData = tab.results?.rows.map(row => {
-    const obj: Record<string, any> = {}
-    tab.results?.columns.forEach((col, i) => { obj[col] = row[i] })
-    return obj
-  }) || []
+  // 处理单元格编辑
+  const handleCellChange = useCallback((rowIndex: number, colName: string, value: any) => {
+    setLocalData(prev => {
+      const newData = [...prev]
+      if (newData[rowIndex]) {
+        newData[rowIndex] = { ...newData[rowIndex], [colName]: value }
+      }
+      return newData
+    })
+    setModifiedCells(prev => new Set(prev).add(`${rowIndex}-${colName}`))
+  }, [])
+  
+  // 处理删除单行
+  const handleDeleteRow = useCallback((rowIndex: number) => {
+    // 标记为待删除（保留原始索引用于数据库删除）
+    setDeletedRows(prev => new Set(prev).add(rowIndex))
+    // 从本地数据中移除
+    setLocalData(prev => prev.filter((_, i) => i !== rowIndex))
+    // 清理相关的修改记录（需要调整索引）
+    setModifiedCells(prev => {
+      const newSet = new Set<string>()
+      prev.forEach(cellKey => {
+        const idx = cellKey.indexOf('-')
+        const cellRowIndex = parseInt(cellKey.substring(0, idx))
+        const colName = cellKey.substring(idx + 1)
+        if (cellRowIndex < rowIndex) {
+          newSet.add(cellKey)
+        } else if (cellRowIndex > rowIndex) {
+          newSet.add(`${cellRowIndex - 1}-${colName}`)
+        }
+        // cellRowIndex === rowIndex 的记录被删除
+      })
+      return newSet
+    })
+  }, [])
+  
+  // 处理批量删除
+  const handleDeleteRows = useCallback((rowIndices: number[]) => {
+    // 从大到小排序，确保删除时索引不会乱
+    const sortedIndices = [...rowIndices].sort((a, b) => b - a)
+    
+    // 标记所有待删除行
+    setDeletedRows(prev => {
+      const newSet = new Set(prev)
+      sortedIndices.forEach(idx => newSet.add(idx))
+      return newSet
+    })
+    
+    // 从本地数据中移除
+    setLocalData(prev => prev.filter((_, i) => !rowIndices.includes(i)))
+    
+    // 清理相关的修改记录
+    setModifiedCells(prev => {
+      const indexSet = new Set(rowIndices)
+      const newSet = new Set<string>()
+      prev.forEach(cellKey => {
+        const idx = cellKey.indexOf('-')
+        const cellRowIndex = parseInt(cellKey.substring(0, idx))
+        const colName = cellKey.substring(idx + 1)
+        if (!indexSet.has(cellRowIndex)) {
+          // 计算删除后的新索引
+          let newIndex = cellRowIndex
+          for (const delIdx of sortedIndices) {
+            if (delIdx < cellRowIndex) newIndex--
+          }
+          newSet.add(`${newIndex}-${colName}`)
+        }
+      })
+      return newSet
+    })
+  }, [])
 
   const resultColumns = tab.results?.columns.map(col => {
     const colInfo = findColumnInfo(col)
@@ -579,6 +894,83 @@ const QueryEditor = memo(function QueryEditor({
       {/* 工具栏 */}
       <div style={{ height: '200px', flexShrink: 0, display: 'flex', flexDirection: 'column', borderBottom: '1px solid #e2e8f0' }}>
         <div className="h-11 bg-light-surface flex items-center px-3 gap-2" style={{ flexShrink: 0 }}>
+          {/* 连接选择器 */}
+          <div className="relative">
+            <button 
+              onClick={() => setShowConnectionMenu(!showConnectionMenu)}
+              className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-2 text-sm text-text-primary rounded-lg transition-colors min-w-[140px]"
+            >
+              <Server size={14} className="text-primary-500" />
+              <span className="truncate max-w-[100px]">{currentConnection?.name || '选择连接'}</span>
+              <ChevronDown size={14} className="text-text-muted ml-auto" />
+            </button>
+            {showConnectionMenu && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setShowConnectionMenu(false)} />
+                <div className="absolute top-full left-0 mt-1 bg-white border border-border-default rounded-lg shadow-lg z-50 min-w-[180px] py-1 max-h-[300px] overflow-auto">
+                  {connections.filter(c => connectedIds.has(c.id)).length === 0 ? (
+                    <div className="px-3 py-2 text-sm text-text-muted">暂无已连接的数据库</div>
+                  ) : (
+                    connections.filter(c => connectedIds.has(c.id)).map(conn => (
+                      <button
+                        key={conn.id}
+                        onClick={() => {
+                          onSelectConnection?.(conn.id)
+                          setShowConnectionMenu(false)
+                        }}
+                        className={`w-full px-3 py-2 text-left text-sm hover:bg-light-hover flex items-center gap-2 ${conn.id === connectionId ? 'bg-primary-50 text-primary-600' : 'text-text-primary'}`}
+                      >
+                        <Server size={14} className={conn.id === connectionId ? 'text-primary-500' : 'text-text-muted'} />
+                        <span className="truncate">{conn.name}</span>
+                        {conn.id === connectionId && <Check size={14} className="ml-auto text-primary-500" />}
+                      </button>
+                    ))
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* 数据库选择器 */}
+          <div className="relative">
+            <button 
+              onClick={() => connectionId && setShowDatabaseMenu(!showDatabaseMenu)}
+              disabled={!connectionId}
+              className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-2 text-sm text-text-primary rounded-lg transition-colors min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Database size={14} className="text-teal-500" />
+              <span className="truncate max-w-[100px]">{selectedDatabase || '选择数据库'}</span>
+              <ChevronDown size={14} className="text-text-muted ml-auto" />
+            </button>
+            {showDatabaseMenu && connectionId && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setShowDatabaseMenu(false)} />
+                <div className="absolute top-full left-0 mt-1 bg-white border border-border-default rounded-lg shadow-lg z-50 min-w-[180px] py-1 max-h-[300px] overflow-auto">
+                  {currentDatabases.length === 0 ? (
+                    <div className="px-3 py-2 text-sm text-text-muted">暂无数据库</div>
+                  ) : (
+                    currentDatabases.map(db => (
+                      <button
+                        key={db}
+                        onClick={() => {
+                          onSelectDatabase?.(db, connectionId)
+                          setShowDatabaseMenu(false)
+                        }}
+                        className={`w-full px-3 py-2 text-left text-sm hover:bg-light-hover flex items-center gap-2 ${db === selectedDatabase ? 'bg-primary-50 text-primary-600' : 'text-text-primary'}`}
+                      >
+                        <Database size={14} className={db === selectedDatabase ? 'text-teal-500' : 'text-text-muted'} />
+                        <span className="truncate">{db}</span>
+                        {db === selectedDatabase && <Check size={14} className="ml-auto text-primary-500" />}
+                      </button>
+                    ))
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="w-px h-5 bg-border-default mx-1" />
+          
           <button onClick={handleRun}
             className="h-8 px-4 bg-success-500 hover:bg-success-600 text-white flex items-center gap-1.5 text-sm font-medium rounded-lg shadow-sm transition-all">
             <Play size={13} fill="currentColor" />
@@ -586,24 +978,24 @@ const QueryEditor = memo(function QueryEditor({
           </button>
           <div className="w-px h-5 bg-border-default mx-1" />
           <button onClick={handleOpenFile}
-            className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm rounded-lg transition-colors">
+            className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm text-text-primary rounded-lg transition-colors">
             <FolderOpen size={14} />
             打开
           </button>
           <button onClick={handleSaveFile}
-            className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm rounded-lg transition-colors">
+            className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm text-text-primary rounded-lg transition-colors">
             <Save size={14} />
             保存
           </button>
           <button onClick={handleFormat}
-            className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm rounded-lg transition-colors">
+            className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm text-text-primary rounded-lg transition-colors">
             <AlignLeft size={14} />
             格式化
           </button>
           <div className="w-px h-5 bg-border-default mx-1" />
           <div className="relative">
             <button onClick={() => setShowExportMenu(!showExportMenu)} disabled={!tab.results || tab.results.rows.length === 0}
-              className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm rounded-lg transition-colors disabled:opacity-40">
+              className="h-8 px-3 bg-white hover:bg-light-hover border border-border-default flex items-center gap-1.5 text-sm text-text-primary rounded-lg transition-colors disabled:opacity-40">
               <Download size={14} />
               导出
             </button>
@@ -612,11 +1004,11 @@ const QueryEditor = memo(function QueryEditor({
                 <div className="fixed inset-0" onClick={() => setShowExportMenu(false)} />
                 <div className="absolute top-full left-0 mt-1 bg-white border border-border-default rounded-lg shadow-lg z-50 min-w-[120px] py-1 menu">
                   <button onClick={() => { handleExportCsv(); setShowExportMenu(false) }}
-                    className="w-full px-3 py-2 text-left text-sm hover:bg-light-hover flex items-center gap-2">
+                    className="w-full px-3 py-2 text-left text-sm text-text-primary hover:bg-light-hover flex items-center gap-2">
                     <FileSpreadsheet size={14} className="text-success-500" /> CSV
                   </button>
                   <button onClick={() => { handleExportSql(); setShowExportMenu(false) }}
-                    className="w-full px-3 py-2 text-left text-sm hover:bg-light-hover flex items-center gap-2">
+                    className="w-full px-3 py-2 text-left text-sm text-text-primary hover:bg-light-hover flex items-center gap-2">
                     <FileCode size={14} className="text-warning-500" /> SQL
                   </button>
                 </div>
@@ -642,13 +1034,29 @@ const QueryEditor = memo(function QueryEditor({
           <span className="text-sm text-text-secondary flex items-center gap-2">
             <Database size={14} className="text-primary-500" />
             结果
-            {tab.results && <span className="text-text-muted text-xs ml-2">({tab.results.rows.length.toLocaleString()} 行)</span>}
+            {tab.results && (
+              <span className="text-text-muted text-xs ml-2">
+                ({localData.length.toLocaleString()} 行)
+                {modifiedCells.size > 0 && <span className="text-warning-500 ml-2">· {modifiedCells.size} 已修改</span>}
+                {deletedRows.size > 0 && <span className="text-danger-500 ml-2">· {deletedRows.size} 待删除</span>}
+              </span>
+            )}
           </span>
         </div>
         <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
-          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: tab.results ? 32 : 0 }}>
             {tab.results ? (
-              <VirtualDataTable columns={resultColumns} data={resultData} showColumnInfo={true} onRefresh={() => onRun(sql)} />
+              <VirtualDataTable 
+                columns={resultColumns} 
+                data={localData} 
+                showColumnInfo={true} 
+                editable={true}
+                onRefresh={() => onRun(sql)}
+                onCellChange={handleCellChange}
+                onDeleteRow={handleDeleteRow}
+                onDeleteRows={handleDeleteRows}
+                modifiedCells={modifiedCells}
+              />
             ) : (
               <div className="h-full flex items-center justify-center">
                 <div className="flex flex-col items-center gap-3">
@@ -660,6 +1068,50 @@ const QueryEditor = memo(function QueryEditor({
               </div>
             )}
           </div>
+          {/* 底部工具栏 */}
+          {tab.results && (
+            <div className="absolute bottom-0 left-0 right-0 h-8 bg-light-surface border-t border-border-default flex items-center px-3 gap-1">
+              <div className="flex items-center gap-1">
+                <button 
+                  onClick={handleSaveChanges}
+                  disabled={(modifiedCells.size === 0 && deletedRows.size === 0) || isSaving || !connectionId}
+                  className={`w-7 h-7 flex items-center justify-center rounded ${(modifiedCells.size > 0 || deletedRows.size > 0) && connectionId ? 'hover:bg-success-50 text-success-500' : 'text-text-disabled'}`}
+                  title={connectionId ? "保存修改到数据库" : "未连接数据库"}
+                >
+                  {isSaving ? <Loader2 size={15} className="animate-spin" /> : <Check size={15} />}
+                </button>
+                <button 
+                  onClick={() => {
+                    // 恢复原始数据
+                    setLocalData(JSON.parse(JSON.stringify(originalData)))
+                    setModifiedCells(new Set())
+                    setDeletedRows(new Set())
+                  }} 
+                  disabled={(modifiedCells.size === 0 && deletedRows.size === 0) || isSaving}
+                  className={`w-7 h-7 flex items-center justify-center rounded ${(modifiedCells.size > 0 || deletedRows.size > 0) ? 'hover:bg-danger-50 text-danger-500' : 'text-text-disabled'}`}
+                  title="放弃修改"
+                >
+                  <X size={15} />
+                </button>
+                <button 
+                  onClick={() => onRun(sql)}
+                  disabled={isSaving}
+                  className="w-7 h-7 flex items-center justify-center hover:bg-light-hover rounded text-text-tertiary disabled:opacity-40"
+                  title="刷新数据 (重新执行查询)"
+                >
+                  <RefreshCw size={13} />
+                </button>
+              </div>
+              <div className="flex-1 text-center text-xs text-text-muted">
+                {isSaving ? '保存中...' : (modifiedCells.size > 0 || deletedRows.size > 0) 
+                  ? `${modifiedCells.size > 0 ? `${modifiedCells.size} 项修改` : ''}${modifiedCells.size > 0 && deletedRows.size > 0 ? ' · ' : ''}${deletedRows.size > 0 ? `${deletedRows.size} 行删除` : ''}`
+                  : `共 ${localData.length} 行`}
+              </div>
+              <div className="text-xs text-text-disabled font-mono truncate max-w-[300px]" title={sql}>
+                {sql.length > 50 ? sql.substring(0, 50) + '...' : sql}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index ed622b2..ca28cc1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -69,16 +69,17 @@ const TableGroupList = memo(function TableGroupList({
             </span>
           </div>
           {isTablesExpanded && (
-            <div className="ml-5 pl-3 border-l border-border-light">
+            <div className="ml-4 pl-2 border-l border-border-light">
               {regularTables.map(table => (
                 <div
                   key={table.name}
-                  className="flex items-center gap-2 px-3 py-1.5 mx-1 text-xs text-text-secondary hover:bg-light-hover cursor-pointer transition-colors rounded-lg group"
+                  className="flex items-center gap-2 px-2 py-1.5 mr-1 text-text-secondary hover:bg-light-hover cursor-pointer transition-colors rounded-lg group"
                   onClick={() => onOpenTable(connectionId, db, table.name)}
                   onContextMenu={(e) => onContextMenu(e, table.name)}
+                  title={table.name}
                 >
-                  <Table2 size={12} className="text-warning-500 flex-shrink-0" />
-                  <span className="truncate font-mono text-[11px]">{table.name}</span>
+                  <Table2 size={14} className="text-warning-500 flex-shrink-0" />
+                  <span className="truncate font-mono text-[13px] flex-1 min-w-0">{table.name}</span>
                 </div>
               ))}
             </div>
@@ -105,16 +106,17 @@ const TableGroupList = memo(function TableGroupList({
             </span>
           </div>
           {isViewsExpanded && (
-            <div className="ml-5 pl-3 border-l border-border-light">
+            <div className="ml-4 pl-2 border-l border-border-light">
               {views.map(view => (
                 <div
                   key={view.name}
-                  className="flex items-center gap-2 px-3 py-1.5 mx-1 text-xs text-text-secondary hover:bg-light-hover cursor-pointer transition-colors rounded-lg group"
+                  className="flex items-center gap-2 px-2 py-1.5 mr-1 text-text-secondary hover:bg-light-hover cursor-pointer transition-colors rounded-lg group"
                   onClick={() => onOpenTable(connectionId, db, view.name)}
                   onContextMenu={(e) => onContextMenu(e, view.name)}
+                  title={view.name}
                 >
-                  <Eye size={12} className="text-info-500 flex-shrink-0" />
-                  <span className="truncate font-mono text-[11px]">{view.name}</span>
+                  <Eye size={14} className="text-info-500 flex-shrink-0" />
+                  <span className="truncate font-mono text-[13px] flex-1 min-w-0">{view.name}</span>
                 </div>
               ))}
             </div>
@@ -133,6 +135,7 @@ interface Props {
   tablesMap: Map<string, TableInfo[]>
   selectedDatabase: string | null
   loadingDbSet: Set<string>
+  loadingConnectionsSet?: Set<string>
   onNewConnection: () => void
   onSelectConnection: (id: string) => void
   onConnect: (conn: Connection) => void
@@ -155,6 +158,7 @@ interface Props {
   onDuplicateTable?: (connectionId: string, database: string, table: string) => void
   onRefreshTables?: (connectionId: string, database: string) => void
   onDesignTable?: (connectionId: string, database: string, table: string) => void
+  onFetchDatabases?: (connectionId: string) => void
 }
 
 function getMenuPosition(x: number, y: number, menuHeight: number = 200, menuWidth: number = 200) {
@@ -183,6 +187,7 @@ export default function Sidebar({
   tablesMap,
   selectedDatabase,
   loadingDbSet,
+  loadingConnectionsSet,
   onNewConnection,
   onSelectConnection,
   onConnect,
@@ -205,6 +210,7 @@ export default function Sidebar({
   onDuplicateTable,
   onRefreshTables,
   onDesignTable,
+  onFetchDatabases,
 }: Props) {
   const [menu, setMenu] = useState<{ x: number; y: number; conn: Connection } | null>(null)
   const [dbMenu, setDbMenu] = useState<{ x: number; y: number; db: string; connectionId: string } | null>(null)
@@ -216,6 +222,7 @@ export default function Sidebar({
   const searchInputRef = useRef<HTMLInputElement>(null)
   const sidebarRef = useRef<HTMLDivElement>(null)
   const [isFocused, setIsFocused] = useState(false)
+  const prevConnectedIdsRef = useRef<Set<string>>(new Set())
   
   useEffect(() => {
     if (selectedDatabase) {
@@ -223,6 +230,20 @@ export default function Sidebar({
     }
   }, [selectedDatabase])
   
+  // 当连接状态变化时，只展开新建立的连接（不影响其他已连接但被折叠的连接）
+  useEffect(() => {
+    const prevIds = prevConnectedIdsRef.current
+    // 找出新增的连接
+    connectedIds.forEach(id => {
+      if (!prevIds.has(id)) {
+        // 只展开新建立的连接
+        setExpandedDbs(prev => new Set(prev).add(id))
+      }
+    })
+    // 更新引用
+    prevConnectedIdsRef.current = new Set(connectedIds)
+  }, [connectedIds])
+  
   const handleSidebarKeyDown = useCallback((e: KeyboardEvent) => {
     if ((e.ctrlKey || e.metaKey) && e.key === 'f' && isFocused) {
       e.preventDefault()
@@ -280,7 +301,7 @@ export default function Sidebar({
     <>
       <div 
         ref={sidebarRef}
-        className="w-64 bg-light-surface flex flex-col h-full select-none border-r border-border-default"
+        className="w-80 bg-light-surface flex flex-col h-full select-none border-r border-border-default"
         tabIndex={0}
         onFocus={() => setIsFocused(true)}
         onBlur={(e) => {
@@ -449,18 +470,23 @@ export default function Sidebar({
                         } else {
                           onSelectConnection(conn.id)
                           if (isConnected) {
+                            const willExpand = !expandedDbs.has(conn.id)
                             setExpandedDbs(prev => {
                               const next = new Set(prev)
                               if (next.has(conn.id)) next.delete(conn.id)
                               else next.add(conn.id)
                               return next
                             })
+                            // 如果展开但数据库列表为空，尝试获取
+                            if (willExpand && connDatabases.length === 0 && onFetchDatabases) {
+                              onFetchDatabases(conn.id)
+                            }
                           }
                         }
                       }}
                       onDoubleClick={async () => {
                         if (!multiSelectMode && !isConnected) {
-                          onConnect(conn)
+                          await onConnect(conn)
                           setExpandedDbs(prev => new Set(prev).add(conn.id))
                         }
                       }}
@@ -488,9 +514,18 @@ export default function Sidebar({
                     </div>
                     
                     {/* 数据库列表 */}
-                    {showDatabases && (
+                    {isExpanded && isConnected && (
                       <div className="ml-5 mt-0.5 pl-3 border-l border-border-light animate-slide-down">
-                        {getFilteredDatabases(connDatabases).map(db => {
+                        {loadingConnectionsSet?.has(conn.id) ? (
+                          <div className="px-2.5 py-2 text-sm text-text-muted flex items-center gap-2">
+                            <span className="w-3 h-3 border-2 border-primary-400 border-t-transparent rounded-full animate-spin" />
+                            加载数据库...
+                          </div>
+                        ) : connDatabases.length === 0 ? (
+                          <div className="px-2.5 py-2 text-sm text-text-muted">
+                            无数据库或无权限
+                          </div>
+                        ) : getFilteredDatabases(connDatabases).map(db => {
                           const isDbSelected = selectedDatabase === db
                           const isDbExpanded = expandedDbs.has(db)
                           const dbTables = getFilteredTables(db)
@@ -590,7 +625,11 @@ export default function Sidebar({
             ) : (
               <button
                 className="w-full px-3 py-2 text-left text-sm hover:bg-light-hover flex items-center gap-3 text-text-secondary"
-                onClick={() => { onConnect(menu.conn); setMenu(null) }}
+                onClick={() => { 
+                  onConnect(menu.conn)
+                  setExpandedDbs(prev => new Set(prev).add(menu.conn.id))
+                  setMenu(null) 
+                }}
               >
                 <span className="w-3 h-3 rounded-full border-2 border-success-500" />
                 连接
diff --git a/src/components/SqlEditor.tsx b/src/components/SqlEditor.tsx
index a057338..600c2cd 100644
--- a/src/components/SqlEditor.tsx
+++ b/src/components/SqlEditor.tsx
@@ -716,7 +716,7 @@ export default function SqlEditor({ value, onChange, onRun, onSave, onOpen, onFo
       value={value}
       onChange={(v) => onChange(v || '')}
       onMount={handleEditorMount}
-      theme="vs-dark"
+      theme="vs"
       options={{
         minimap: { enabled: false },
         fontSize: 14,
diff --git a/src/components/TableDesigner.tsx b/src/components/TableDesigner.tsx
index c25f7fb..9d7cf08 100644
--- a/src/components/TableDesigner.tsx
+++ b/src/components/TableDesigner.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react'
 import { 
   X, Table2, Plus, Trash2, Key, ArrowUp, ArrowDown, Save, 
-  FileCode, Settings, Link2, List, Database, Play, Eye, GripVertical
+  FileCode, Settings, Link2, List, Database, Play, Eye, GripVertical,
+  Check, Search, ChevronDown
 } from 'lucide-react'
 
 // ============ 类型定义 ============
@@ -164,30 +165,44 @@ function SearchableSelect({ value, options, onChange, placeholder = '选择...',
   return (
     <div 
       ref={containerRef} 
-      className={`relative flex items-center justify-between cursor-pointer ${className}`}
+      className={`relative flex items-center justify-between cursor-pointer rounded-lg transition-all duration-200 ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-light-hover'}`}
       onClick={(e) => {
         e.stopPropagation()
         if (!disabled) setIsOpen(!isOpen)
       }}
     >
-      <span className={`text-xs ${selectedOption ? 'text-text-primary' : 'text-text-secondary'} ${disabled ? 'opacity-50' : ''}`}>
+      <span className={`text-sm font-medium ${selectedOption ? 'text-text-primary' : 'text-text-muted'}`}>
         {selectedOption?.label || placeholder}
       </span>
-      <span className="text-text-secondary text-[10px]">▼</span>
+      <ChevronDown size={14} className={`text-text-tertiary ml-2 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
       {isOpen && (
-        <div className="absolute z-50 top-full left-0 w-full min-w-[120px] mt-0.5 bg-metro-surface border border-metro-border shadow-lg max-h-48 overflow-hidden flex flex-col">
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            onClick={(e) => e.stopPropagation()}
-            placeholder="搜索..."
-            className="w-full h-7 px-2 bg-metro-hover border-b border-metro-border text-xs focus:outline-none"
-            autoFocus
-          />
-          <div className="overflow-auto flex-1">
+        <div className="absolute z-50 top-full left-0 w-full min-w-[160px] mt-1.5 bg-white border border-border-default 
+                        shadow-xl rounded-xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-top-2 duration-200"
+             style={{ maxHeight: '280px' }}>
+          {/* 搜索框 */}
+          <div className="p-2.5 border-b border-border-light bg-gradient-to-b from-light-surface to-white">
+            <div className="relative">
+              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                placeholder="搜索..."
+                className="w-full h-9 pl-9 pr-3 bg-white border border-border-default rounded-lg text-sm text-text-primary 
+                           focus:outline-none focus:border-primary-400 focus:ring-2 focus:ring-primary-100 transition-all"
+                autoFocus
+              />
+            </div>
+          </div>
+          
+          {/* 选项列表 */}
+          <div className="overflow-auto flex-1 py-1.5" style={{ maxHeight: '220px' }}>
             {filteredOptions.length === 0 ? (
-              <div className="px-2 py-1.5 text-xs text-text-secondary">无匹配项</div>
+              <div className="px-4 py-6 text-sm text-text-muted text-center">
+                <div className="text-2xl mb-2">🔍</div>
+                无匹配项
+              </div>
             ) : (
               filteredOptions.map(opt => (
                 <div
@@ -198,10 +213,15 @@ function SearchableSelect({ value, options, onChange, placeholder = '选择...',
                     setIsOpen(false)
                     setSearch('')
                   }}
-                  className={`px-2 py-1.5 text-xs cursor-pointer hover:bg-metro-hover
-                    ${opt.value === value ? 'bg-accent-blue/20 text-accent-blue' : ''}`}
+                  className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-2.5 mx-1.5 rounded-lg transition-all duration-150
+                    ${opt.value === value 
+                      ? 'bg-primary-50 text-primary-700 font-medium' 
+                      : 'text-text-primary hover:bg-light-hover'}`}
                 >
-                  {opt.label}
+                  {opt.value === value && (
+                    <Check size={14} className="text-primary-500" strokeWidth={2.5} />
+                  )}
+                  <span className={opt.value === value ? '' : 'ml-5'}>{opt.label}</span>
                 </div>
               ))
             )}
@@ -224,12 +244,20 @@ interface MultiSelectProps {
 function MultiSelect({ values, options, onChange, placeholder = '选择...', className = '' }: MultiSelectProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
+  const [tempValues, setTempValues] = useState<string[]>(values)
   const containerRef = useRef<HTMLDivElement>(null)
 
   const filteredOptions = options.filter(opt => 
     opt.label.toLowerCase().includes(search.toLowerCase())
   )
 
+  // 打开时同步当前值
+  useEffect(() => {
+    if (isOpen) {
+      setTempValues(values)
+    }
+  }, [isOpen, values])
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
@@ -242,13 +270,33 @@ function MultiSelect({ values, options, onChange, placeholder = '选择...', cla
   }, [])
 
   const toggleValue = (val: string) => {
-    if (values.includes(val)) {
-      onChange(values.filter(v => v !== val))
+    if (tempValues.includes(val)) {
+      setTempValues(tempValues.filter(v => v !== val))
     } else {
-      onChange([...values, val])
+      setTempValues([...tempValues, val])
     }
   }
 
+  const handleConfirm = () => {
+    onChange(tempValues)
+    setIsOpen(false)
+    setSearch('')
+  }
+
+  const handleCancel = () => {
+    setTempValues(values)
+    setIsOpen(false)
+    setSearch('')
+  }
+
+  const handleSelectAll = () => {
+    setTempValues(filteredOptions.map(opt => opt.value))
+  }
+
+  const handleClearAll = () => {
+    setTempValues([])
+  }
+
   return (
     <div ref={containerRef} className={`relative ${className}`}>
       <div
@@ -256,33 +304,70 @@ function MultiSelect({ values, options, onChange, placeholder = '选择...', cla
           e.stopPropagation()
           setIsOpen(!isOpen)
         }}
-        className="w-full min-h-[28px] px-2 py-1 bg-transparent border border-transparent hover:border-metro-border 
-                   text-xs flex items-center gap-1 flex-wrap cursor-pointer"
+        className="w-full min-h-[36px] px-3 py-1.5 bg-white/50 border border-border-light hover:border-primary-300 rounded-lg
+                   text-sm flex items-center gap-1.5 flex-wrap cursor-pointer transition-all duration-200
+                   hover:shadow-sm hover:bg-white"
       >
         {values.length === 0 ? (
-          <span className="text-text-secondary">{placeholder}</span>
+          <span className="text-text-muted">{placeholder}</span>
         ) : (
           values.map(v => (
-            <span key={v} className="bg-accent-blue/20 text-accent-blue px-1.5 py-0.5 rounded text-[10px]">
+            <span key={v} className="bg-gradient-to-r from-primary-100 to-primary-50 text-primary-700 px-2.5 py-1 rounded-md text-xs font-medium
+                                    border border-primary-200/50 shadow-sm">
               {v}
             </span>
           ))
         )}
+        <ChevronDown size={14} className={`ml-auto text-text-tertiary transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
       </div>
       {isOpen && (
-        <div className="absolute z-50 top-full left-0 w-full min-w-[150px] mt-0.5 bg-metro-surface border border-metro-border shadow-lg max-h-48 overflow-hidden flex flex-col">
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            onClick={(e) => e.stopPropagation()}
-            placeholder="搜索..."
-            className="w-full h-7 px-2 bg-metro-hover border-b border-metro-border text-xs focus:outline-none"
-            autoFocus
-          />
-          <div className="overflow-auto flex-1">
+        <div className="absolute z-50 top-full left-0 w-full min-w-[200px] mt-1.5 bg-white border border-border-default 
+                        shadow-xl rounded-xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-top-2 duration-200"
+             style={{ maxHeight: '320px' }}>
+          {/* 搜索框 */}
+          <div className="p-2.5 border-b border-border-light bg-gradient-to-b from-light-surface to-white">
+            <div className="relative">
+              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                placeholder="搜索字段..."
+                className="w-full h-9 pl-9 pr-3 bg-white border border-border-default rounded-lg text-sm text-text-primary 
+                           focus:outline-none focus:border-primary-400 focus:ring-2 focus:ring-primary-100 transition-all"
+                autoFocus
+              />
+            </div>
+          </div>
+          
+          {/* 快捷操作 */}
+          <div className="px-2.5 py-2 border-b border-border-light flex items-center gap-2 bg-light-surface/50">
+            <button
+              onClick={(e) => { e.stopPropagation(); handleSelectAll() }}
+              className="text-xs text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors"
+            >
+              全选
+            </button>
+            <span className="text-border-default">|</span>
+            <button
+              onClick={(e) => { e.stopPropagation(); handleClearAll() }}
+              className="text-xs text-text-tertiary hover:text-text-secondary font-medium px-2 py-1 rounded hover:bg-light-hover transition-colors"
+            >
+              清空
+            </button>
+            <span className="ml-auto text-xs text-text-muted">
+              已选 <span className="text-primary-600 font-medium">{tempValues.length}</span> 项
+            </span>
+          </div>
+
+          {/* 选项列表 */}
+          <div className="overflow-auto flex-1 py-1.5" style={{ maxHeight: '180px' }}>
             {filteredOptions.length === 0 ? (
-              <div className="px-2 py-1.5 text-xs text-text-secondary">无匹配项</div>
+              <div className="px-4 py-6 text-sm text-text-muted text-center">
+                <div className="text-2xl mb-2">🔍</div>
+                无匹配字段
+              </div>
             ) : (
               filteredOptions.map(opt => (
                 <div
@@ -291,20 +376,42 @@ function MultiSelect({ values, options, onChange, placeholder = '选择...', cla
                     e.stopPropagation()
                     toggleValue(opt.value)
                   }}
-                  className={`px-2 py-1.5 text-xs cursor-pointer hover:bg-metro-hover flex items-center gap-2
-                    ${values.includes(opt.value) ? 'bg-accent-blue/10' : ''}`}
+                  className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-3 mx-1.5 rounded-lg transition-all duration-150
+                    ${tempValues.includes(opt.value) 
+                      ? 'bg-primary-50 text-primary-700 hover:bg-primary-100' 
+                      : 'text-text-primary hover:bg-light-hover'}`}
                 >
-                  <input
-                    type="checkbox"
-                    checked={values.includes(opt.value)}
-                    onChange={() => {}}
-                    className="w-3 h-3 accent-accent-blue"
-                  />
-                  {opt.label}
+                  <div className={`w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all duration-150
+                    ${tempValues.includes(opt.value) 
+                      ? 'bg-primary-500 border-primary-500' 
+                      : 'border-border-default bg-white'}`}>
+                    {tempValues.includes(opt.value) && (
+                      <Check size={12} className="text-white" strokeWidth={3} />
+                    )}
+                  </div>
+                  <span className="font-medium">{opt.label}</span>
                 </div>
               ))
             )}
           </div>
+
+          {/* 底部操作按钮 */}
+          <div className="px-3 py-2.5 border-t border-border-light bg-gradient-to-t from-light-surface to-white flex items-center justify-end gap-2">
+            <button
+              onClick={(e) => { e.stopPropagation(); handleCancel() }}
+              className="px-4 py-1.5 text-sm text-text-secondary hover:text-text-primary font-medium rounded-lg 
+                         hover:bg-light-hover transition-all duration-150"
+            >
+              取消
+            </button>
+            <button
+              onClick={(e) => { e.stopPropagation(); handleConfirm() }}
+              className="px-4 py-1.5 text-sm text-white font-medium rounded-lg bg-gradient-to-r from-primary-500 to-primary-600
+                         hover:from-primary-600 hover:to-primary-700 shadow-sm hover:shadow-md transition-all duration-150"
+            >
+              确认
+            </button>
+          </div>
         </div>
       )}
     </div>
@@ -603,9 +710,15 @@ export default function TableDesigner({
     }
   }
 
-  const updateForeignKey = (id: string, field: keyof ForeignKeyDef, value: any) => {
-    setForeignKeys(foreignKeys.map(fk => {
+  const updateForeignKey = (id: string, field: keyof ForeignKeyDef | Record<string, any>, value?: any) => {
+    setForeignKeys(prev => prev.map(fk => {
       if (fk.id !== id) return fk
+      
+      // 支持批量更新多个字段
+      if (typeof field === 'object') {
+        return { ...fk, ...field }
+      }
+      
       const updated = { ...fk, [field]: value }
       
       // 当选择字段时，自动生成外键名（如果名称为空或以 fk_ 开头）
@@ -942,24 +1055,26 @@ export default function TableDesigner({
   ] as const
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
-      <div className="bg-metro-card border border-metro-border w-[1100px] h-[700px] flex flex-col shadow-metro-lg animate-fade-in">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white border border-border-default w-[1100px] h-[700px] flex flex-col shadow-modal rounded-xl animate-fade-in">
         {/* 标题栏 */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-metro-border bg-metro-surface flex-shrink-0">
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-border-default bg-white flex-shrink-0 rounded-t-xl">
           <div className="flex items-center gap-3">
-            <Table2 size={18} className="text-accent-teal" />
-            <span className="font-medium">
+            <div className="w-8 h-8 rounded-lg bg-teal-50 flex items-center justify-center">
+              <Table2 size={18} className="text-teal-500" />
+            </div>
+            <span className="font-semibold text-text-primary">
               {mode === 'create' ? '新建表' : '编辑表'} - {database}
             </span>
             {mode === 'edit' && initialTableName && (
-              <span className="text-text-secondary">({initialTableName})</span>
+              <span className="text-text-secondary font-normal">({initialTableName})</span>
             )}
           </div>
           <div className="flex items-center gap-2">
             <button
               onClick={handleSave}
               disabled={saving}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-accent-blue hover:bg-accent-blue-hover 
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-primary-500 hover:bg-primary-600 text-white rounded-lg
                          disabled:opacity-50 transition-colors"
             >
               <Save size={14} />
@@ -967,17 +1082,17 @@ export default function TableDesigner({
             </button>
             <button
               onClick={onClose}
-              className="p-1.5 hover:bg-metro-hover rounded-sm transition-colors"
+              className="p-2 hover:bg-light-hover rounded-lg transition-colors text-text-secondary hover:text-text-primary"
             >
-              <X size={16} />
+              <X size={18} />
             </button>
           </div>
         </div>
 
         {/* 表名 & 注释 & 标签页 */}
-        <div className="border-b border-metro-border bg-metro-surface/50 flex-shrink-0">
+        <div className="border-b border-border-default bg-white/50 flex-shrink-0">
           {/* 表名和注释 */}
-          <div className="flex items-center gap-6 px-4 py-2 border-b border-metro-border/50">
+          <div className="flex items-center gap-6 px-4 py-2 border-b border-border-default/50">
             <div className="flex items-center gap-2">
               <span className="text-sm text-text-secondary w-12">表名:</span>
               <input
@@ -986,8 +1101,8 @@ export default function TableDesigner({
                 onChange={(e) => setTableName(e.target.value)}
                 placeholder="输入表名"
                 disabled={mode === 'edit'}
-                className="w-48 h-8 px-3 bg-metro-surface border border-metro-border text-sm
-                           focus:border-accent-blue focus:outline-none transition-colors
+                className="w-48 h-8 px-3 bg-white border border-border-default text-sm rounded-lg text-text-primary
+                           focus:border-primary-500 focus:outline-none transition-colors
                            disabled:opacity-60 disabled:cursor-not-allowed"
               />
             </div>
@@ -998,26 +1113,26 @@ export default function TableDesigner({
                 value={options.comment}
                 onChange={(e) => setOptions({ ...options, comment: e.target.value })}
                 placeholder="表注释"
-                className="flex-1 max-w-md h-8 px-3 bg-metro-surface border border-metro-border text-sm
-                           focus:border-accent-blue focus:outline-none transition-colors"
+                className="flex-1 max-w-md h-8 px-3 bg-white border border-border-default text-sm rounded-lg text-text-primary
+                           focus:border-primary-500 focus:outline-none transition-colors"
               />
             </div>
           </div>
           {/* 标签页 */}
-          <div className="flex px-4">
+          <div className="flex px-5">
             {tabs.map(tab => (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
-                className={`flex items-center gap-1.5 px-4 py-2 text-sm border-b-2 transition-colors
+                className={`flex items-center gap-2 px-4 py-2.5 text-sm border-b-2 transition-colors font-medium
                   ${activeTab === tab.id 
-                    ? 'border-accent-blue text-accent-blue' 
+                    ? 'border-primary-500 text-primary-600' 
                     : 'border-transparent text-text-secondary hover:text-text-primary'}`}
               >
-                <tab.icon size={14} />
+                <tab.icon size={15} />
                 {tab.label}
                 {'count' in tab && tab.count !== undefined && (
-                  <span className="ml-1 text-xs bg-metro-hover px-1.5 rounded">{tab.count}</span>
+                  <span className={`ml-1 text-xs px-1.5 py-0.5 rounded-full ${activeTab === tab.id ? 'bg-primary-100 text-primary-600' : 'bg-light-muted text-text-secondary'}`}>{tab.count}</span>
                 )}
               </button>
             ))}
@@ -1026,13 +1141,13 @@ export default function TableDesigner({
 
         {/* 错误提示 */}
         {error && (
-          <div className="px-4 py-2 bg-accent-red/20 border-b border-accent-red/30 text-sm text-accent-red flex-shrink-0">
+          <div className="px-4 py-2 bg-danger-500/20 border-b border-danger-500/30 text-sm text-danger-500 flex-shrink-0">
             {error}
           </div>
         )}
 
         {/* 内容区 */}
-        <div className="flex-1 overflow-hidden">
+        <div className="flex-1 overflow-hidden bg-light-bg">
           {loading ? (
             <div className="flex items-center justify-center h-full text-text-secondary">
               加载中...
@@ -1167,10 +1282,10 @@ function ColumnsTab({
   return (
     <div className="h-full flex flex-col">
       {/* 工具栏 */}
-      <div className="flex items-center gap-2 px-4 py-2 border-b border-metro-border bg-metro-surface/30 flex-shrink-0">
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-white/30 flex-shrink-0">
         <button
           onClick={onAdd}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-accent-green hover:bg-accent-green/80 transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
         >
           <Plus size={14} />
           添加字段
@@ -1180,8 +1295,8 @@ function ColumnsTab({
       {/* 表格 */}
       <div className="flex-1 overflow-auto">
         <table className="w-full text-sm">
-          <thead className="bg-metro-surface sticky top-0">
-            <tr className="border-b border-metro-border">
+          <thead className="bg-white sticky top-0">
+            <tr className="border-b border-border-default text-text-primary">
               <th className="w-8 px-1 py-2"></th>
               <th className="w-36 px-3 py-2 text-left font-medium">名称</th>
               <th className="w-28 px-3 py-2 text-left font-medium">类型</th>
@@ -1201,10 +1316,10 @@ function ColumnsTab({
                 key={col.id}
                 onDragOver={(e) => handleDragOver(e, index)}
                 onClick={() => onSelect(col.id)}
-                className={`border-b border-metro-border/50 cursor-pointer transition-colors
-                  ${selectedId === col.id ? 'bg-accent-blue/20' : 'hover:bg-metro-hover/50'}
-                  ${col._isNew ? 'bg-accent-green/10' : ''}
-                  ${dragOverIndex === index ? 'border-t-2 border-t-accent-blue' : ''}`}
+                className={`border-b border-border-default/50 cursor-pointer transition-colors
+                  ${selectedId === col.id ? 'bg-primary-500/20' : 'hover:bg-light-hover/50'}
+                  ${col._isNew ? 'bg-success-50' : ''}
+                  ${dragOverIndex === index ? 'border-t-2 border-t-primary-500' : ''}`}
               >
                 <td 
                   draggable
@@ -1221,9 +1336,9 @@ function ColumnsTab({
                     onChange={(e) => onUpdate(col.id, 'name', e.target.value)}
                     onFocus={() => onSelect(col.id)}
                     placeholder="字段名"
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs
-                               selection:bg-accent-blue selection:text-white"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
+                               selection:bg-primary-500 selection:text-white"
                   />
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1231,8 +1346,8 @@ function ColumnsTab({
                     value={col.type}
                     onChange={(e) => onUpdate(col.id, 'type', e.target.value)}
                     onFocus={() => onSelect(col.id)}
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                   >
                     {dataTypes.map(group => (
                       <optgroup key={group.group} label={group.group}>
@@ -1251,9 +1366,9 @@ function ColumnsTab({
                     onFocus={() => onSelect(col.id)}
                     disabled={!needsLength(col.type)}
                     placeholder={needsLength(col.type) ? '' : '-'}
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs
-                               disabled:opacity-40 disabled:cursor-not-allowed selection:bg-accent-blue selection:text-white"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
+                               disabled:opacity-40 disabled:cursor-not-allowed selection:bg-primary-500 selection:text-white"
                   />
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1264,9 +1379,9 @@ function ColumnsTab({
                     onFocus={() => onSelect(col.id)}
                     disabled={!needsDecimals(col.type)}
                     placeholder={needsDecimals(col.type) ? '' : '-'}
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs
-                               disabled:opacity-40 disabled:cursor-not-allowed selection:bg-accent-blue selection:text-white"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
+                               disabled:opacity-40 disabled:cursor-not-allowed selection:bg-primary-500 selection:text-white"
                   />
                 </td>
                 <td className="px-3 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
@@ -1278,7 +1393,7 @@ function ColumnsTab({
                       onUpdate(col.id, 'nullable', !e.target.checked)
                     }}
                     disabled={col.primaryKey}
-                    className="w-4 h-4 accent-accent-blue disabled:opacity-50"
+                    className="w-4 h-4 accent-blue-500 disabled:opacity-50"
                   />
                 </td>
                 {isMysql && (
@@ -1291,7 +1406,7 @@ function ColumnsTab({
                         onUpdate(col.id, 'unsigned', e.target.checked)
                       }}
                       disabled={!supportsUnsigned(col.type)}
-                      className="w-4 h-4 accent-accent-blue disabled:opacity-50"
+                      className="w-4 h-4 accent-blue-500 disabled:opacity-50"
                     />
                   </td>
                 )}
@@ -1301,13 +1416,13 @@ function ColumnsTab({
                       onSelect(col.id)
                       onUpdate(col.id, 'primaryKey', !col.primaryKey)
                     }}
-                    className={`p-1 rounded-sm transition-colors ${col.primaryKey ? 'bg-accent-orange text-white' : 'hover:bg-metro-hover'}`}
+                    className={`p-1.5 rounded transition-colors ${col.primaryKey ? 'bg-warning-500 text-white' : 'text-text-muted hover:bg-light-hover hover:text-warning-500'}`}
                     title={col.primaryKey ? '主键' : '设为主键'}
                   >
-                    <Key size={12} />
+                    <Key size={14} />
                   </button>
                   {col.autoIncrement && (
-                    <span className="ml-1 text-xs text-accent-blue" title="自增">A</span>
+                    <span className="ml-1 text-xs text-primary-500" title="自增">A</span>
                   )}
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1317,9 +1432,9 @@ function ColumnsTab({
                     onChange={(e) => onUpdate(col.id, 'defaultValue', e.target.value)}
                     onFocus={() => onSelect(col.id)}
                     placeholder=""
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs
-                               selection:bg-accent-blue selection:text-white"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
+                               selection:bg-primary-500 selection:text-white"
                   />
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1329,9 +1444,9 @@ function ColumnsTab({
                     onChange={(e) => onUpdate(col.id, 'comment', e.target.value)}
                     onFocus={() => onSelect(col.id)}
                     placeholder=""
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs
-                               selection:bg-accent-blue selection:text-white"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
+                               selection:bg-primary-500 selection:text-white"
                   />
                 </td>
                 <td className="px-2 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
@@ -1341,7 +1456,7 @@ function ColumnsTab({
                       if (columns.length > 1) onRemove(col.id)
                     }}
                     disabled={columns.length <= 1}
-                    className="p-1 text-text-secondary hover:text-accent-red hover:bg-accent-red/10 rounded transition-colors
+                    className="p-1 text-text-secondary hover:text-danger-500 hover:bg-danger-500/10 rounded transition-colors
                                disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-text-secondary disabled:hover:bg-transparent"
                     title="删除字段"
                   >
@@ -1373,34 +1488,34 @@ function ColumnDetailPanel({ column, onUpdate, isMysql }: {
   isMysql: boolean
 }) {
   return (
-    <div className="border-t border-metro-border bg-metro-surface/50 px-4 py-3 flex-shrink-0">
+    <div className="border-t border-border-default bg-white px-5 py-3.5 flex-shrink-0">
       <div className="grid grid-cols-4 gap-4 text-sm">
-        <label className="flex items-center gap-2">
+        <label className="flex items-center gap-2 text-text-primary cursor-pointer">
           <input
             type="checkbox"
             checked={column.autoIncrement}
             onChange={(e) => onUpdate('autoIncrement', e.target.checked)}
-            className="w-4 h-4 accent-accent-blue"
+            className="w-4 h-4 accent-blue-500 rounded"
           />
           <span>自动递增</span>
         </label>
         {isMysql && (
           <>
-            <label className="flex items-center gap-2">
+            <label className="flex items-center gap-2 text-text-primary cursor-pointer">
               <input
                 type="checkbox"
                 checked={column.zerofill}
                 onChange={(e) => onUpdate('zerofill', e.target.checked)}
-                className="w-4 h-4 accent-accent-blue"
+                className="w-4 h-4 accent-blue-500 rounded"
               />
               <span>填充零</span>
             </label>
-            <label className="flex items-center gap-2">
+            <label className="flex items-center gap-2 text-text-primary cursor-pointer">
               <input
                 type="checkbox"
                 checked={column.isVirtual}
                 onChange={(e) => onUpdate('isVirtual', e.target.checked)}
-                className="w-4 h-4 accent-accent-blue"
+                className="w-4 h-4 accent-blue-500 rounded"
               />
               <span>虚拟</span>
             </label>
@@ -1439,10 +1554,10 @@ function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, o
   return (
     <div className="h-full flex flex-col">
       {/* 工具栏 */}
-      <div className="flex items-center gap-2 px-4 py-2 border-b border-metro-border bg-metro-surface/30 flex-shrink-0">
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-white/30 flex-shrink-0">
         <button
           onClick={onAdd}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-accent-green hover:bg-accent-green/80 transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
         >
           <Plus size={14} />
           添加索引
@@ -1452,8 +1567,8 @@ function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, o
       {/* 表格 */}
       <div className="flex-1 overflow-auto">
         <table className="w-full text-sm">
-          <thead className="bg-metro-surface sticky top-0">
-            <tr className="border-b border-metro-border">
+          <thead className="bg-white sticky top-0">
+            <tr className="border-b border-border-default text-text-primary">
               <th className="w-40 px-3 py-2 text-left font-medium">名称</th>
               <th className="w-64 px-3 py-2 text-left font-medium">字段</th>
               <th className="w-28 px-3 py-2 text-left font-medium">索引类型</th>
@@ -1467,9 +1582,9 @@ function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, o
               <tr
                 key={idx.id}
                 onClick={() => onSelect(idx.id)}
-                className={`border-b border-metro-border/50 cursor-pointer transition-colors
-                  ${selectedId === idx.id ? 'bg-accent-blue/20' : 'hover:bg-metro-hover/50'}
-                  ${idx._isNew ? 'bg-accent-green/10' : ''}`}
+                className={`border-b border-border-default/50 cursor-pointer transition-colors
+                  ${selectedId === idx.id ? 'bg-primary-500/20' : 'hover:bg-light-hover/50'}
+                  ${idx._isNew ? 'bg-success-50' : ''}`}
               >
                 <td className="px-3 py-1.5">
                   <input
@@ -1478,8 +1593,8 @@ function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, o
                     onChange={(e) => onUpdate(idx.id, 'name', e.target.value)}
                     onClick={(e) => e.stopPropagation()}
                     placeholder="索引名"
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                   />
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1515,8 +1630,8 @@ function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, o
                     onChange={(e) => onUpdate(idx.id, 'comment', e.target.value)}
                     onClick={(e) => e.stopPropagation()}
                     placeholder=""
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                   />
                 </td>
                 <td className="px-3 py-1.5 text-center">
@@ -1525,7 +1640,7 @@ function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, o
                       e.stopPropagation()
                       onRemove(idx.id)
                     }}
-                    className="p-1 text-text-secondary hover:text-accent-red hover:bg-accent-red/10 rounded transition-colors"
+                    className="p-1 text-text-secondary hover:text-danger-500 hover:bg-danger-500/10 rounded transition-colors"
                     title="删除索引"
                   >
                     <Trash2 size={14} />
@@ -1553,7 +1668,7 @@ interface ForeignKeysTabProps {
   onSelect: (id: string | null) => void
   onAdd: () => void
   onRemove: (id: string) => void
-  onUpdate: (id: string, field: keyof ForeignKeyDef, value: any) => void
+  onUpdate: (id: string, field: keyof ForeignKeyDef | Record<string, any>, value?: any) => void
   onGetDatabases?: () => Promise<string[]>
   onGetTables?: (database: string) => Promise<string[]>
   onGetColumns?: (database: string, table: string) => Promise<string[]>
@@ -1574,6 +1689,18 @@ function ForeignKeysTab({
     }
   }, [])
 
+  // 当外键列表变化时，为没有加载表列表的外键自动加载当前数据库的表
+  useEffect(() => {
+    foreignKeys.forEach(fk => {
+      if (!refTables[fk.id] && onGetTables) {
+        const schema = fk.refSchema || currentDatabase
+        onGetTables(schema).then(tables => {
+          setRefTables(prev => ({ ...prev, [fk.id]: tables }))
+        })
+      }
+    })
+  }, [foreignKeys.length, currentDatabase])
+
   const loadRefTables = async (fkId: string, schema: string) => {
     if (!onGetTables) return
     const tables = await onGetTables(schema)
@@ -1594,10 +1721,10 @@ function ForeignKeysTab({
   return (
     <div className="h-full flex flex-col">
       {/* 工具栏 */}
-      <div className="flex items-center gap-2 px-4 py-2 border-b border-metro-border bg-metro-surface/30 flex-shrink-0">
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-white/30 flex-shrink-0">
         <button
           onClick={onAdd}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-accent-green hover:bg-accent-green/80 transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
         >
           <Plus size={14} />
           添加外键
@@ -1607,11 +1734,11 @@ function ForeignKeysTab({
       {/* 表格 */}
       <div className="flex-1 overflow-auto">
         <table className="w-full text-sm">
-          <thead className="bg-metro-surface sticky top-0">
-            <tr className="border-b border-metro-border">
+          <thead className="bg-white sticky top-0">
+            <tr className="border-b border-border-default text-text-primary">
               <th className="w-36 px-3 py-2 text-left font-medium">名称</th>
               <th className="w-28 px-3 py-2 text-left font-medium">字段</th>
-              <th className="w-28 px-3 py-2 text-left font-medium">被引用的模式</th>
+              <th className="w-28 px-3 py-2 text-left font-medium">被引用的数据库</th>
               <th className="w-28 px-3 py-2 text-left font-medium">被引用的表</th>
               <th className="w-28 px-3 py-2 text-left font-medium">被引用的字段</th>
               <th className="w-24 px-3 py-2 text-left font-medium">删除时</th>
@@ -1624,9 +1751,9 @@ function ForeignKeysTab({
               <tr
                 key={fk.id}
                 onClick={() => onSelect(fk.id)}
-                className={`border-b border-metro-border/50 cursor-pointer transition-colors
-                  ${selectedId === fk.id ? 'bg-accent-blue/20' : 'hover:bg-metro-hover/50'}
-                  ${fk._isNew ? 'bg-accent-green/10' : ''}`}
+                className={`border-b border-border-default/50 cursor-pointer transition-colors
+                  ${selectedId === fk.id ? 'bg-primary-500/20' : 'hover:bg-light-hover/50'}
+                  ${fk._isNew ? 'bg-success-50' : ''}`}
               >
                 <td className="px-3 py-1.5">
                   <input
@@ -1635,8 +1762,8 @@ function ForeignKeysTab({
                     onChange={(e) => onUpdate(fk.id, 'name', e.target.value)}
                     onClick={(e) => e.stopPropagation()}
                     placeholder="外键名"
-                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-metro-border 
-                               focus:border-accent-blue focus:bg-metro-surface focus:outline-none text-xs"
+                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
+                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                   />
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1652,10 +1779,12 @@ function ForeignKeysTab({
                     value={fk.refSchema || currentDatabase}
                     options={dbOptions}
                     onChange={(val) => {
-                      onUpdate(fk.id, 'refSchema', val)
+                      // 批量更新：设置数据库并清空表和字段
+                      onUpdate(fk.id, { refSchema: val, refTable: '', refColumns: [] })
+                      // 自动加载该数据库下的表列表
                       loadRefTables(fk.id, val)
                     }}
-                    placeholder="选择模式"
+                    placeholder="选择数据库"
                   />
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
@@ -1666,32 +1795,18 @@ function ForeignKeysTab({
                       onUpdate(fk.id, 'refTable', val)
                       loadRefColumns(fk.id, fk.refSchema || currentDatabase, val)
                     }}
-                    placeholder="选择表"
+                    placeholder={refTables[fk.id] ? "选择表" : "请先选择数据库"}
+                    disabled={!refTables[fk.id]}
                   />
-                  {!refTables[fk.id] && (
-                    <button
-                      onClick={() => loadRefTables(fk.id, fk.refSchema || currentDatabase)}
-                      className="text-[10px] text-accent-blue hover:underline mt-0.5"
-                    >
-                      加载表列表
-                    </button>
-                  )}
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                   <SearchableSelect
                     value={fk.refColumns[0] || ''}
                     options={(refColumns[fk.id] || []).map(c => ({ label: c, value: c }))}
                     onChange={(val) => onUpdate(fk.id, 'refColumns', [val])}
-                    placeholder="选择字段"
+                    placeholder={refColumns[fk.id] ? "选择字段" : "请先选择表"}
+                    disabled={!fk.refTable || !refColumns[fk.id]}
                   />
-                  {fk.refTable && !refColumns[fk.id] && (
-                    <button
-                      onClick={() => loadRefColumns(fk.id, fk.refSchema || currentDatabase, fk.refTable)}
-                      className="text-[10px] text-accent-blue hover:underline mt-0.5"
-                    >
-                      加载字段
-                    </button>
-                  )}
                 </td>
                 <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                   <SearchableSelect
@@ -1713,7 +1828,7 @@ function ForeignKeysTab({
                       e.stopPropagation()
                       onRemove(fk.id)
                     }}
-                    className="p-1 text-text-secondary hover:text-accent-red hover:bg-accent-red/10 rounded transition-colors"
+                    className="p-1 text-text-secondary hover:text-danger-500 hover:bg-danger-500/10 rounded transition-colors"
                     title="删除外键"
                   >
                     <Trash2 size={14} />
@@ -1757,30 +1872,30 @@ function OptionsTab({ options, dbType, onChange }: OptionsTabProps) {
   }
 
   return (
-    <div className="p-4 space-y-4">
-      <div className="grid grid-cols-2 gap-4">
+    <div className="p-6 space-y-5">
+      <div className="grid grid-cols-2 gap-5">
         <div>
-          <label className="block text-sm text-text-secondary mb-1.5">数据库引擎</label>
+          <label className="block text-sm text-text-primary font-medium mb-2">数据库引擎</label>
           <SearchableSelect
             value={options.engine}
             options={engineOptions}
             onChange={(val) => onChange({ ...options, engine: val })}
             placeholder="选择引擎"
-            className="h-9 bg-metro-surface border border-metro-border px-2"
+            className="h-10 bg-white border border-border-default rounded-lg px-3"
           />
         </div>
         <div>
-          <label className="block text-sm text-text-secondary mb-1.5">行格式</label>
+          <label className="block text-sm text-text-primary font-medium mb-2">行格式</label>
           <SearchableSelect
             value={options.rowFormat}
             options={rowFormatOptions}
             onChange={(val) => onChange({ ...options, rowFormat: val })}
             placeholder="选择行格式"
-            className="h-9 bg-metro-surface border border-metro-border px-2"
+            className="h-10 bg-white border border-border-default rounded-lg px-3"
           />
         </div>
         <div>
-          <label className="block text-sm text-text-secondary mb-1.5">字符集</label>
+          <label className="block text-sm text-text-primary font-medium mb-2">字符集</label>
           <SearchableSelect
             value={options.charset}
             options={charsetOptions}
@@ -1793,28 +1908,28 @@ function OptionsTab({ options, dbType, onChange }: OptionsTabProps) {
               })
             }}
             placeholder="选择字符集"
-            className="h-9 bg-metro-surface border border-metro-border px-2"
+            className="h-10 bg-white border border-border-default rounded-lg px-3"
           />
         </div>
         <div>
-          <label className="block text-sm text-text-secondary mb-1.5">排序规则</label>
+          <label className="block text-sm text-text-primary font-medium mb-2">排序规则</label>
           <SearchableSelect
             value={options.collation}
             options={collationOptions}
             onChange={(val) => onChange({ ...options, collation: val })}
             placeholder="选择排序规则"
-            className="h-9 bg-metro-surface border border-metro-border px-2"
+            className="h-10 bg-white border border-border-default rounded-lg px-3"
           />
         </div>
         <div>
-          <label className="block text-sm text-text-secondary mb-1.5">自增值</label>
+          <label className="block text-sm text-text-primary font-medium mb-2">自增值</label>
           <input
             type="text"
             value={options.autoIncrement}
             onChange={(e) => onChange({ ...options, autoIncrement: e.target.value })}
             placeholder="默认"
-            className="w-full h-9 px-3 bg-metro-surface border border-metro-border text-sm
-                       focus:border-accent-blue focus:outline-none transition-colors"
+            className="w-full h-10 px-3 bg-white border border-border-default text-sm text-text-primary rounded-lg
+                       focus:border-primary-500 focus:outline-none transition-colors"
           />
         </div>
       </div>
@@ -1834,17 +1949,17 @@ function SqlPreviewTab({ sql }: { sql: string }) {
 
   return (
     <div className="h-full flex flex-col">
-      <div className="flex items-center justify-between px-4 py-2 border-b border-metro-border bg-metro-surface/30 flex-shrink-0">
-        <span className="text-sm text-text-secondary">将要执行的 SQL 语句</span>
+      <div className="flex items-center justify-between px-5 py-3 border-b border-border-default bg-white flex-shrink-0">
+        <span className="text-sm text-text-primary font-medium">将要执行的 SQL 语句</span>
         <button
           onClick={handleCopy}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-metro-surface hover:bg-metro-hover border border-metro-border transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-text-primary bg-white hover:bg-light-hover border border-border-default rounded-lg transition-colors"
         >
-          {copied ? '已复制' : '复制'}
+          {copied ? '✓ 已复制' : '复制'}
         </button>
       </div>
-      <div className="flex-1 overflow-auto p-4">
-        <pre className="text-sm font-mono text-accent-teal whitespace-pre-wrap break-all">
+      <div className="flex-1 overflow-auto p-5 bg-slate-50">
+        <pre className="text-sm font-mono text-primary-600 whitespace-pre-wrap break-all leading-relaxed">
           {sql}
         </pre>
       </div>
diff --git a/src/components/VirtualDataTable.tsx b/src/components/VirtualDataTable.tsx
index e0c569e..3b31d5a 100644
--- a/src/components/VirtualDataTable.tsx
+++ b/src/components/VirtualDataTable.tsx
@@ -1,5 +1,5 @@
 import { memo, useState, useRef, useEffect, useCallback, useMemo } from 'react'
-import { Key, Pin, PinOff, Trash2, Search, X, ChevronLeft, ChevronRight, RefreshCw, FileX, Type, Copy, ClipboardPaste } from 'lucide-react'
+import { Key, Pin, PinOff, Trash2, Search, X, ChevronLeft, ChevronRight, RefreshCw, FileX, Type, Copy, ClipboardPaste, Calendar, Clock, Check } from 'lucide-react'
 
 // 高性能虚拟滚动数据表格 - Navicat风格
 interface DataTableColumn {
@@ -27,43 +27,643 @@ interface VirtualDataTableProps {
   overscan?: number
 }
 
-// 格式化日期时间 - 缓存结果
-const dateTimeCache = new Map<string, string>()
+// 判断是否是日期/时间类型
+const isDateTimeType = (colType: string): boolean => {
+  const type = (colType || '').toLowerCase()
+  return type.includes('datetime') || type.includes('timestamp')
+}
+
+const isDateType = (colType: string): boolean => {
+  const type = (colType || '').toLowerCase()
+  return type.includes('date') && !isDateTimeType(type)
+}
+
+const isTimeType = (colType: string): boolean => {
+  const type = (colType || '').toLowerCase()
+  return type === 'time' || type.startsWith('time(')
+}
+
+// 获取编辑输入框类型
+type InputType = 'text' | 'date' | 'datetime-local' | 'time'
+const getInputType = (colType: string): InputType => {
+  if (isDateTimeType(colType)) return 'datetime-local'
+  if (isDateType(colType)) return 'date'
+  if (isTimeType(colType)) return 'time'
+  return 'text'
+}
+
+// 将数据库值转换为 input[type=datetime-local] 可用的格式（精确到秒）
+const toDateTimeLocalFormat = (value: any): string => {
+  if (value === null || value === undefined || value === '') return ''
+  const strValue = String(value)
+  // 匹配各种日期时间格式
+  const dtMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2}):?(\d{2})?/)
+  if (dtMatch) {
+    const [, year, month, day, hour, min, sec = '00'] = dtMatch
+    return `${year}-${month}-${day}T${hour}:${min}:${sec}`
+  }
+  return strValue
+}
+
+// 将数据库值转换为 input[type=date] 可用的格式
+const toDateFormat = (value: any): string => {
+  if (value === null || value === undefined || value === '') return ''
+  const strValue = String(value)
+  // 匹配日期格式
+  const dMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})/)
+  if (dMatch) {
+    const [, year, month, day] = dMatch
+    return `${year}-${month}-${day}`
+  }
+  return strValue
+}
+
+// 将数据库值转换为 input[type=time] 可用的格式（精确到秒）
+const toTimeFormat = (value: any): string => {
+  if (value === null || value === undefined || value === '') return ''
+  const strValue = String(value)
+  // 匹配时间格式
+  const tMatch = strValue.match(/(\d{2}):(\d{2}):?(\d{2})?/)
+  if (tMatch) {
+    const [, hour, min, sec = '00'] = tMatch
+    return `${hour}:${min}:${sec}`
+  }
+  return strValue
+}
+
+// 将 input 值转换为数据库格式
+const fromInputValue = (value: string, inputType: InputType): string | null => {
+  if (value === '' || value.trim() === '') return null
+  
+  let result = value.trim()
+  
+  if (inputType === 'datetime-local') {
+    // 支持多种格式：2025/12/31 23:59:30, 2025-12-31T23:59:30, 2025-12-31 23:59:30
+    // 转换为数据库格式：2025-12-31 23:59:30
+    result = result.replace('T', ' ').replace(/\//g, '-')
+    
+    // 如果没有秒，添加 :00
+    const parts = result.split(' ')
+    if (parts.length === 2) {
+      const timeParts = parts[1].split(':')
+      if (timeParts.length === 2) {
+        result = `${parts[0]} ${parts[1]}:00`
+      }
+    }
+    return result
+  }
+  
+  if (inputType === 'date') {
+    // 转换 / 为 -
+    return result.replace(/\//g, '-')
+  }
+  
+  return result
+}
+
+// 获取编辑值（根据字段类型转换格式）- 使用友好的显示格式
+const getEditValue = (value: any, colType: string): string => {
+  if (value === null || value === undefined) return ''
+  const inputType = getInputType(colType)
+  const strValue = String(value)
+  
+  if (inputType === 'datetime-local') {
+    // 匹配日期时间格式并转换为 YYYY/MM/DD HH:MM:SS
+    const match = strValue.match(/(\d{4})[-/](\d{2})[-/](\d{2})[T ](\d{2}):(\d{2}):?(\d{2})?/)
+    if (match) {
+      const [, y, m, d, h, mi, s = '00'] = match
+      return `${y}/${m}/${d} ${h}:${mi}:${s}`
+    }
+  }
+  if (inputType === 'date') {
+    const match = strValue.match(/(\d{4})[-/](\d{2})[-/](\d{2})/)
+    if (match) {
+      const [, y, m, d] = match
+      return `${y}/${m}/${d}`
+    }
+  }
+  if (inputType === 'time') {
+    const match = strValue.match(/(\d{2}):(\d{2}):?(\d{2})?/)
+    if (match) {
+      const [, h, mi, s = '00'] = match
+      return `${h}:${mi}:${s}`
+    }
+  }
+  return strValue
+}
+
+// 解析并标准化用户输入的日期时间格式（支持多种格式）
+const parseAndNormalizeDateInput = (input: string, inputType: InputType): string => {
+  if (!input || input.trim() === '') return ''
+  
+  const str = input.trim()
+  
+  // 支持的日期格式：
+  // - 2025/12/29, 2025-12-29, 2025.12.29
+  // - 12/29/2025, 29/12/2025 (根据数值大小判断)
+  // - 20251229
+  
+  // 支持的时间格式：
+  // - 14:30:00, 14:30, 143000, 1430
+  
+  // 支持的日期时间格式：
+  // - 2025/12/29 14:30:00
+  // - 2025-12-29T14:30:00
+  // - 2025.12.29 14:30
+  
+  if (inputType === 'time') {
+    // 匹配时间格式
+    const timeMatch = str.match(/^(\d{1,2}):(\d{1,2}):?(\d{1,2})?$/)
+    if (timeMatch) {
+      const [, h, m, s = '0'] = timeMatch
+      return `${h.padStart(2, '0')}:${m.padStart(2, '0')}:${s.padStart(2, '0')}`
+    }
+    // 匹配紧凑时间格式 HHMMSS 或 HHMM
+    const compactTime = str.match(/^(\d{2})(\d{2})(\d{2})?$/)
+    if (compactTime) {
+      const [, h, m, s = '00'] = compactTime
+      return `${h}:${m}:${s}`
+    }
+    return str
+  }
+  
+  // 提取日期和时间部分
+  let datePart = ''
+  let timePart = ''
+  
+  // 尝试分离日期和时间
+  const dtMatch = str.match(/^(.+?)[T\s](\d{1,2}:\d{1,2}(?::\d{1,2})?)$/)
+  if (dtMatch) {
+    datePart = dtMatch[1]
+    timePart = dtMatch[2]
+  } else {
+    datePart = str
+    timePart = ''
+  }
+  
+  // 解析日期部分
+  let year = '', month = '', day = ''
+  
+  // 格式: YYYY/MM/DD, YYYY-MM-DD, YYYY.MM.DD
+  const ymdMatch = datePart.match(/^(\d{4})[-/.年](\d{1,2})[-/.月](\d{1,2})日?$/)
+  if (ymdMatch) {
+    [, year, month, day] = ymdMatch
+  }
+  
+  // 格式: YYYYMMDD
+  const compactDate = datePart.match(/^(\d{4})(\d{2})(\d{2})$/)
+  if (compactDate) {
+    [, year, month, day] = compactDate
+  }
+  
+  // 格式: MM/DD/YYYY 或 DD/MM/YYYY（根据数值判断）
+  const mdyMatch = datePart.match(/^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})$/)
+  if (mdyMatch) {
+    const [, a, b, y] = mdyMatch
+    year = y
+    // 如果第一个数字 > 12，则是 DD/MM/YYYY
+    if (parseInt(a) > 12) {
+      day = a
+      month = b
+    } else {
+      month = a
+      day = b
+    }
+  }
+  
+  if (!year || !month || !day) {
+    return str // 无法解析，返回原值
+  }
+  
+  // 标准化日期
+  const normalizedDate = `${year}/${month.padStart(2, '0')}/${day.padStart(2, '0')}`
+  
+  if (inputType === 'date') {
+    return normalizedDate
+  }
+  
+  // datetime-local 需要处理时间部分
+  if (timePart) {
+    const tMatch = timePart.match(/^(\d{1,2}):(\d{1,2}):?(\d{1,2})?$/)
+    if (tMatch) {
+      const [, h, m, s = '0'] = tMatch
+      return `${normalizedDate} ${h.padStart(2, '0')}:${m.padStart(2, '0')}:${s.padStart(2, '0')}`
+    }
+  }
+  
+  // 如果没有时间部分，添加默认时间
+  return inputType === 'datetime-local' ? `${normalizedDate} 00:00:00` : normalizedDate
+}
+
+// 格式化日期时间显示
 const formatDateTime = (value: any, colType: string): string => {
   if (value === null || value === undefined) return ''
   
-  const cacheKey = `${value}-${colType}`
-  if (dateTimeCache.has(cacheKey)) return dateTimeCache.get(cacheKey)!
-  
   const strValue = String(value)
   const type = (colType || '').toLowerCase()
   
-  const isDateTimeType = type.includes('datetime') || type.includes('timestamp')
-  const isDateType = type.includes('date') && !isDateTimeType
+  const isDateTime = type.includes('datetime') || type.includes('timestamp')
+  const isDate = type.includes('date') && !isDateTime
+  const isTime = type === 'time' || type.startsWith('time(')
   
-  const dateTimeRegex = /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2}):(\d{2})/
-  const dateOnlyRegex = /^(\d{4})-(\d{2})-(\d{2})$/
+  // 匹配日期时间格式：2025-12-29 14:49:28 或 2025-12-29T14:49:28 或 2025/12/29 14:49:28
+  const dateTimeRegex = /^(\d{4})[-/](\d{2})[-/](\d{2})[T ](\d{2}):(\d{2}):?(\d{2})?/
+  // 匹配纯日期格式
+  const dateOnlyRegex = /^(\d{4})[-/](\d{2})[-/](\d{2})$/
+  // 匹配纯时间格式
+  const timeRegex = /^(\d{2}):(\d{2}):?(\d{2})?$/
   
-  let result = strValue
   const dtMatch = strValue.match(dateTimeRegex)
   const dMatch = strValue.match(dateOnlyRegex)
+  const tMatch = strValue.match(timeRegex)
   
-  if (isDateTimeType || dtMatch) {
-    if (dtMatch) {
-      const [, year, month, day, hour, min, sec] = dtMatch
-      result = `${year}/${month}/${day} ${hour}:${min}:${sec}`
+  if (isTime && tMatch) {
+    const [, hour, min, sec = '00'] = tMatch
+    return `${hour}:${min}:${sec}`
+  }
+  
+  if ((isDateTime || dtMatch) && dtMatch) {
+    const [, year, month, day, hour, min, sec = '00'] = dtMatch
+    return `${year}/${month}/${day} ${hour}:${min}:${sec}`
+  }
+  
+  if ((isDate || dMatch) && dMatch) {
+    const [, year, month, day] = dMatch
+    return `${year}/${month}/${day}`
+  }
+  
+  return strValue
+}
+
+// ============ 自定义日期时间选择器组件 ============
+interface DateTimePickerProps {
+  value: string
+  type: 'date' | 'datetime-local' | 'time'
+  onChange: (value: string) => void
+  onClose: () => void
+  position: { top: number; left: number }
+}
+
+const WEEKDAYS = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+function DateTimePicker({ value, type, onChange, onClose, position }: DateTimePickerProps) {
+  // 解析初始值
+  const parseValue = () => {
+    const now = new Date()
+    if (!value) {
+      return {
+        year: now.getFullYear(),
+        month: now.getMonth(),
+        day: now.getDate(),
+        hour: now.getHours(),
+        minute: now.getMinutes(),
+        second: now.getSeconds()
+      }
     }
-  } else if (isDateType || dMatch) {
-    if (dMatch) {
-      const [, year, month, day] = dMatch
-      result = `${year}/${month}/${day}`
+    
+    if (type === 'time') {
+      const match = value.match(/(\d{1,2}):(\d{1,2}):?(\d{1,2})?/)
+      if (match) {
+        return {
+          year: now.getFullYear(),
+          month: now.getMonth(),
+          day: now.getDate(),
+          hour: parseInt(match[1]),
+          minute: parseInt(match[2]),
+          second: parseInt(match[3] || '0')
+        }
+      }
+    } else {
+      // 支持多种格式：2025-12-29T14:49:28, 2025/12/29 14:49:28, 2025-12-29 14:49:28
+      const match = value.match(/(\d{4})[-/](\d{1,2})[-/](\d{1,2})(?:[T ](\d{1,2}):(\d{1,2}):?(\d{1,2})?)?/)
+      if (match) {
+        return {
+          year: parseInt(match[1]),
+          month: parseInt(match[2]) - 1,
+          day: parseInt(match[3]),
+          hour: parseInt(match[4] || '0'),
+          minute: parseInt(match[5] || '0'),
+          second: parseInt(match[6] || '0')
+        }
+      }
+    }
+    
+    return {
+      year: now.getFullYear(),
+      month: now.getMonth(),
+      day: now.getDate(),
+      hour: 0,
+      minute: 0,
+      second: 0
     }
   }
   
-  // 限制缓存大小
-  if (dateTimeCache.size > 10000) dateTimeCache.clear()
-  dateTimeCache.set(cacheKey, result)
-  return result
+  const initial = parseValue()
+  const [viewYear, setViewYear] = useState(initial.year)
+  const [viewMonth, setViewMonth] = useState(initial.month)
+  const [selectedDate, setSelectedDate] = useState({ year: initial.year, month: initial.month, day: initial.day })
+  const [selectedTime, setSelectedTime] = useState({ hour: initial.hour, minute: initial.minute, second: initial.second })
+  const containerRef = useRef<HTMLDivElement>(null)
+  
+  // 构建输出值 - 统一使用 YYYY/MM/DD HH:mm:ss 格式
+  const buildValue = (date: typeof selectedDate, time: typeof selectedTime) => {
+    const pad = (n: number) => n.toString().padStart(2, '0')
+    if (type === 'time') {
+      return `${pad(time.hour)}:${pad(time.minute)}:${pad(time.second)}`
+    } else if (type === 'date') {
+      return `${date.year}/${pad(date.month + 1)}/${pad(date.day)}`
+    } else {
+      return `${date.year}/${pad(date.month + 1)}/${pad(date.day)} ${pad(time.hour)}:${pad(time.minute)}:${pad(time.second)}`
+    }
+  }
+  
+  // 获取某月的天数
+  const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate()
+  
+  // 获取某月第一天是星期几（调整为周一开始）
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    const day = new Date(year, month, 1).getDay()
+    return day === 0 ? 6 : day - 1  // 周日变为6，其他减1
+  }
+  
+  // 生成日历数据
+  const generateCalendarDays = () => {
+    const daysInMonth = getDaysInMonth(viewYear, viewMonth)
+    const firstDay = getFirstDayOfMonth(viewYear, viewMonth)
+    const daysInPrevMonth = getDaysInMonth(viewYear, viewMonth - 1)
+    
+    const days: { day: number; isCurrentMonth: boolean; isToday: boolean }[] = []
+    
+    // 上月剩余天数
+    for (let i = firstDay - 1; i >= 0; i--) {
+      days.push({ day: daysInPrevMonth - i, isCurrentMonth: false, isToday: false })
+    }
+    
+    // 本月天数
+    const today = new Date()
+    for (let i = 1; i <= daysInMonth; i++) {
+      const isToday = viewYear === today.getFullYear() && viewMonth === today.getMonth() && i === today.getDate()
+      days.push({ day: i, isCurrentMonth: true, isToday })
+    }
+    
+    // 下月开始天数
+    const remaining = 42 - days.length
+    for (let i = 1; i <= remaining; i++) {
+      days.push({ day: i, isCurrentMonth: false, isToday: false })
+    }
+    
+    return days
+  }
+  
+  const handlePrevMonth = () => {
+    if (viewMonth === 0) {
+      setViewYear(viewYear - 1)
+      setViewMonth(11)
+    } else {
+      setViewMonth(viewMonth - 1)
+    }
+  }
+  
+  const handleNextMonth = () => {
+    if (viewMonth === 11) {
+      setViewYear(viewYear + 1)
+      setViewMonth(0)
+    } else {
+      setViewMonth(viewMonth + 1)
+    }
+  }
+  
+  const handleSelectDay = (day: number, isCurrentMonth: boolean) => {
+    if (isCurrentMonth) {
+      const newDate = { year: viewYear, month: viewMonth, day }
+      setSelectedDate(newDate)
+      onChange(buildValue(newDate, selectedTime))
+    }
+  }
+  
+  const handleTimeChange = (field: 'hour' | 'minute' | 'second', value: number) => {
+    const max = field === 'hour' ? 23 : 59
+    const clampedValue = Math.max(0, Math.min(max, value))
+    const newTime = { ...selectedTime, [field]: clampedValue }
+    setSelectedTime(newTime)
+    onChange(buildValue(selectedDate, newTime))
+  }
+  
+  const handleToday = () => {
+    const now = new Date()
+    const newDate = { year: now.getFullYear(), month: now.getMonth(), day: now.getDate() }
+    const newTime = type !== 'date' 
+      ? { hour: now.getHours(), minute: now.getMinutes(), second: now.getSeconds() }
+      : selectedTime
+    
+    setViewYear(now.getFullYear())
+    setViewMonth(now.getMonth())
+    setSelectedDate(newDate)
+    if (type !== 'date') {
+      setSelectedTime(newTime)
+    }
+    onChange(buildValue(newDate, newTime))
+  }
+  
+  const isSelected = (day: number, isCurrentMonth: boolean) => {
+    return isCurrentMonth && selectedDate.year === viewYear && selectedDate.month === viewMonth && selectedDate.day === day
+  }
+  
+  const calendarDays = generateCalendarDays()
+  
+  // 时间输入框组件
+  const TimeInput = ({ value, onChange: onValueChange, max, label }: { value: number; onChange: (v: number) => void; max: number; label: string }) => {
+    const [inputValue, setInputValue] = useState(value.toString().padStart(2, '0'))
+    
+    useEffect(() => {
+      setInputValue(value.toString().padStart(2, '0'))
+    }, [value])
+    
+    const handleWheel = (e: React.WheelEvent) => {
+      e.preventDefault()
+      const delta = e.deltaY > 0 ? -1 : 1
+      const newValue = value + delta
+      if (newValue >= 0 && newValue <= max) {
+        onValueChange(newValue)
+      } else if (newValue < 0) {
+        onValueChange(max)
+      } else {
+        onValueChange(0)
+      }
+    }
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value.replace(/\D/g, '').slice(0, 2)
+      setInputValue(val)
+    }
+    
+    const handleBlur = () => {
+      const num = parseInt(inputValue) || 0
+      const clamped = Math.max(0, Math.min(max, num))
+      setInputValue(clamped.toString().padStart(2, '0'))
+      onValueChange(clamped)
+    }
+    
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        onValueChange(value >= max ? 0 : value + 1)
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        onValueChange(value <= 0 ? max : value - 1)
+      } else if (e.key === 'Enter') {
+        handleBlur()
+      }
+    }
+    
+    return (
+      <div className="flex flex-col items-center">
+        <input
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          onWheel={handleWheel}
+          className="w-10 h-7 text-center text-sm font-medium bg-primary-500 text-white rounded 
+                     border-0 outline-none focus:ring-2 focus:ring-primary-300"
+        />
+        <span className="text-[10px] text-text-tertiary mt-0.5">{label}</span>
+      </div>
+    )
+  }
+
+  // 计算弹窗位置
+  const getPopupPosition = () => {
+    const popupWidth = type === 'time' ? 140 : (type === 'date' ? 220 : 220)
+    const popupHeight = type === 'time' ? 80 : 320
+    
+    let top = position.top
+    let left = position.left
+    
+    if (position.top + popupHeight > window.innerHeight - 20) {
+      top = position.top - popupHeight - 40
+    }
+    if (left + popupWidth > window.innerWidth - 20) {
+      left = window.innerWidth - popupWidth - 20
+    }
+    if (left < 20) left = 20
+    if (top < 20) top = 20
+    
+    return { top, left }
+  }
+  
+  const popupPos = getPopupPosition()
+  const pad = (n: number) => n.toString().padStart(2, '0')
+
+  return (
+    <div 
+      ref={containerRef}
+      className="fixed bg-white rounded-lg shadow-xl border border-primary-200 overflow-hidden"
+      style={{ 
+        top: popupPos.top,
+        left: popupPos.left,
+        zIndex: 99999,
+        animation: 'fadeIn 0.1s ease-out'
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* 时间选择部分（右侧或独立） */}
+      {type !== 'date' && type === 'time' && (
+        <div className="p-3 bg-primary-500">
+          <div className="flex items-center gap-1 justify-center">
+            <TimeInput value={selectedTime.hour} onChange={(v) => handleTimeChange('hour', v)} max={23} label="" />
+            <span className="text-white font-bold text-lg">:</span>
+            <TimeInput value={selectedTime.minute} onChange={(v) => handleTimeChange('minute', v)} max={59} label="" />
+            <span className="text-white font-bold text-lg">:</span>
+            <TimeInput value={selectedTime.second} onChange={(v) => handleTimeChange('second', v)} max={59} label="" />
+          </div>
+        </div>
+      )}
+      
+      {/* 日历部分 */}
+      {type !== 'time' && (
+        <div className="p-2" style={{ width: 220 }}>
+          {/* 月份导航 */}
+          <div className="flex items-center justify-between mb-2">
+            <button 
+              onClick={handlePrevMonth}
+              className="w-6 h-6 flex items-center justify-center rounded hover:bg-light-hover text-text-tertiary hover:text-text-primary"
+            >
+              <ChevronLeft size={14} />
+            </button>
+            <span className="text-xs font-semibold text-text-primary">
+              {viewYear}年{viewMonth + 1}月
+            </span>
+            <button 
+              onClick={handleNextMonth}
+              className="w-6 h-6 flex items-center justify-center rounded hover:bg-light-hover text-text-tertiary hover:text-text-primary"
+            >
+              <ChevronRight size={14} />
+            </button>
+          </div>
+          
+          {/* 星期表头 */}
+          <div className="grid grid-cols-7 gap-0 mb-1">
+            {WEEKDAYS.map(d => (
+              <div key={d} className="h-5 flex items-center justify-center text-[10px] font-medium text-primary-600">
+                {d}
+              </div>
+            ))}
+          </div>
+          
+          {/* 日期网格 */}
+          <div className="grid grid-cols-7 gap-0">
+            {calendarDays.map((d, i) => (
+              <div
+                key={i}
+                onClick={() => handleSelectDay(d.day, d.isCurrentMonth)}
+                className={`h-6 flex items-center justify-center text-xs cursor-pointer transition-all
+                  ${!d.isCurrentMonth ? 'text-text-muted' : 'text-text-primary'}
+                  ${d.isToday && !isSelected(d.day, d.isCurrentMonth) ? 'bg-gray-100 text-primary-600 font-medium' : ''}
+                  ${isSelected(d.day, d.isCurrentMonth) 
+                    ? 'bg-primary-500 text-white font-medium rounded' 
+                    : d.isCurrentMonth ? 'hover:bg-light-hover' : ''}`}
+              >
+                {d.day}
+              </div>
+            ))}
+          </div>
+          
+          {/* datetime 类型时显示时间选择器 */}
+          {type === 'datetime-local' && (
+            <div className="mt-2 pt-2 border-t border-border-light">
+              <div className="flex items-center justify-center gap-1 bg-primary-500 rounded p-1.5">
+                <TimeInput value={selectedTime.hour} onChange={(v) => handleTimeChange('hour', v)} max={23} label="" />
+                <span className="text-white font-bold">:</span>
+                <TimeInput value={selectedTime.minute} onChange={(v) => handleTimeChange('minute', v)} max={59} label="" />
+                <span className="text-white font-bold">:</span>
+                <TimeInput value={selectedTime.second} onChange={(v) => handleTimeChange('second', v)} max={59} label="" />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      
+      {/* 底部显示当前选择和快捷操作 */}
+      <div className="px-2 py-1.5 bg-light-surface border-t border-border-light flex items-center justify-between text-[10px]">
+        <span className="text-text-secondary font-mono">
+          {type === 'time' 
+            ? `${pad(selectedTime.hour)}:${pad(selectedTime.minute)}:${pad(selectedTime.second)}`
+            : `今天: ${new Date().getFullYear()}/${pad(new Date().getMonth() + 1)}/${pad(new Date().getDate())}`
+          }
+        </span>
+        <div className="flex gap-1">
+          <button
+            onClick={handleToday}
+            className="px-1.5 py-0.5 text-primary-600 hover:bg-primary-50 rounded"
+          >
+            {type === 'time' ? '现在' : '今天'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 // 计算文本显示宽度
@@ -104,6 +704,7 @@ const VirtualDataTable = memo(function VirtualDataTable({
   const [editingCell, setEditingCell] = useState<{ row: number; col: string } | null>(null)
   const [editValue, setEditValue] = useState<string>('')
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; row: number; col: string } | null>(null)
+  const [datePickerPos, setDatePickerPos] = useState<{ top: number; left: number } | null>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   
   const [searchQuery, setSearchQuery] = useState('')
@@ -141,14 +742,26 @@ const VirtualDataTable = memo(function VirtualDataTable({
     }), 
   [columns, pinnedColumns])
 
-  // 计算列宽 - 只在数据变化时计算
-  const columnWidths = useMemo(() => {
+  // 列宽状态
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
+  const [resizingCol, setResizingCol] = useState<string | null>(null)
+  const resizeStartX = useRef(0)
+  const resizeStartWidth = useRef(0)
+  
+  // 初始化列宽 - 只在列变化时计算
+  useEffect(() => {
     const widths: Record<string, number> = {}
     const MIN_WIDTH = 70
     const MAX_WIDTH = 350
     const PADDING = 24
     
     for (const col of sortedColumns) {
+      // 如果已经有用户设置的宽度，保持不变
+      if (columnWidths[col.name]) {
+        widths[col.name] = columnWidths[col.name]
+        continue
+      }
+      
       let headerWidth = estimateTextWidth(col.name) + PADDING + 20
       if (showColumnInfo && col.type) {
         headerWidth = Math.max(headerWidth, estimateTextWidth(col.type) + PADDING)
@@ -169,8 +782,46 @@ const VirtualDataTable = memo(function VirtualDataTable({
       widths[col.name] = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, Math.ceil(Math.max(headerWidth, maxDataWidth + PADDING))))
     }
     
-    return widths
-  }, [sortedColumns, data, showColumnInfo])
+    setColumnWidths(widths)
+  }, [sortedColumns.map(c => c.name).join(','), showColumnInfo])
+  
+  // 列宽拖动处理
+  const handleResizeStart = useCallback((colName: string, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setResizingCol(colName)
+    resizeStartX.current = e.clientX
+    resizeStartWidth.current = columnWidths[colName] || 100
+  }, [columnWidths])
+  
+  useEffect(() => {
+    if (!resizingCol) return
+    
+    // 添加全局拖动样式
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+    
+    const handleMouseMove = (e: MouseEvent) => {
+      const diff = e.clientX - resizeStartX.current
+      const newWidth = Math.max(50, Math.min(600, resizeStartWidth.current + diff))
+      setColumnWidths(prev => ({ ...prev, [resizingCol]: newWidth }))
+    }
+    
+    const handleMouseUp = () => {
+      setResizingCol(null)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+    
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [resizingCol])
 
   // 计算固定列偏移
   const pinnedLeftOffsets = useMemo(() => {
@@ -290,6 +941,10 @@ const VirtualDataTable = memo(function VirtualDataTable({
   const handleCellMouseDown = useCallback((actualRowIndex: number, colName: string, e: React.MouseEvent) => {
     if (e.button !== 0) return
     
+    // 确保容器获得焦点
+    setIsFocused(true)
+    containerRef.current?.focus()
+    
     const cellKey = `${actualRowIndex}-${colName}`
     
     if (e.shiftKey && activeCell) {
@@ -316,12 +971,24 @@ const VirtualDataTable = memo(function VirtualDataTable({
     }
   }, [isSelecting, selectionStart, getSelectedCellsFromRange])
 
+  // 用于跟踪是否刚结束拖动选择（防止拖动释放时清空选择，但单击应该清空）
+  const justFinishedDraggingRef = useRef(false)
+  
   // 框选结束
   useEffect(() => {
-    const handleMouseUp = () => setIsSelecting(false)
+    const handleMouseUp = () => {
+      // 只有真正进行了拖动选择（选择了多个单元格）才标记
+      if (isSelecting && selectedCells.size > 1) {
+        justFinishedDraggingRef.current = true
+        setTimeout(() => {
+          justFinishedDraggingRef.current = false
+        }, 50)
+      }
+      setIsSelecting(false)
+    }
     window.addEventListener('mouseup', handleMouseUp)
     return () => window.removeEventListener('mouseup', handleMouseUp)
-  }, [])
+  }, [isSelecting, selectedCells.size])
 
   // 搜索导航
   const jumpToMatch = useCallback((index: number) => {
@@ -447,7 +1114,42 @@ const VirtualDataTable = memo(function VirtualDataTable({
     }
     
     const text = lines.join('\n')
-    await navigator.clipboard.writeText(text)
+    
+    // 尝试使用 navigator.clipboard，如果失败则使用回退方案
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text)
+      } else {
+        // 回退方案：使用 textarea + execCommand
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        textarea.style.position = 'fixed'
+        textarea.style.left = '-9999px'
+        textarea.style.top = '-9999px'
+        document.body.appendChild(textarea)
+        textarea.focus()
+        textarea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textarea)
+      }
+    } catch (err) {
+      // 回退方案
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      textarea.style.top = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.focus()
+      textarea.select()
+      try {
+        document.execCommand('copy')
+      } catch (e) {
+        console.error('复制失败:', e)
+      }
+      document.body.removeChild(textarea)
+    }
+    
     return { rows: sortedRows.length, cols: sortedColIndices.length }
   }, [selectedCells, data, sortedColumns, getColIndex])
 
@@ -455,7 +1157,15 @@ const VirtualDataTable = memo(function VirtualDataTable({
   const pasteToSelectedCells = useCallback(async () => {
     if (!activeCell || !editable) return
     
-    const text = await navigator.clipboard.readText()
+    let text = ''
+    try {
+      if (navigator.clipboard && navigator.clipboard.readText) {
+        text = await navigator.clipboard.readText()
+      }
+    } catch (err) {
+      console.error('读取剪贴板失败:', err)
+      return
+    }
     if (!text) return
     
     // 解析粘贴的数据（制表符分隔列，换行符分隔行）
@@ -589,8 +1299,20 @@ const VirtualDataTable = memo(function VirtualDataTable({
       if (e.key === 'Enter' && isFocused && !editingCell && activeCell && editable) {
         e.preventDefault()
         const value = data[activeCell.row]?.[activeCell.col]
+        const col = sortedColumns.find(c => c.name === activeCell.col)
+        const inputType = getInputType(col?.type || '')
         setEditingCell({ row: activeCell.row, col: activeCell.col })
-        setEditValue(value === null ? '' : String(value))
+        setEditValue(getEditValue(value, col?.type || ''))
+        
+        // 日期类型自动打开选择器
+        if (inputType !== 'text') {
+          // 需要获取单元格位置来定位选择器
+          const cellEl = containerRef.current?.querySelector(`[data-row="${activeCell.row}"][data-col="${activeCell.col}"]`) as HTMLElement
+          if (cellEl) {
+            const rect = cellEl.getBoundingClientRect()
+            setDatePickerPos({ top: rect.bottom + 4, left: rect.left })
+          }
+        }
         setTimeout(() => inputRef.current?.focus(), 0)
       }
       // Delete 或 Backspace 清空单元格
@@ -600,9 +1322,22 @@ const VirtualDataTable = memo(function VirtualDataTable({
       }
       // 直接输入进入编辑模式（可打印字符）
       if (isFocused && !editingCell && activeCell && editable && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const col = sortedColumns.find(c => c.name === activeCell.col)
+        const inputType = getInputType(col?.type || '')
+        
         e.preventDefault()
         setEditingCell({ row: activeCell.row, col: activeCell.col })
         setEditValue(e.key) // 直接用输入的字符作为初始值
+        
+        // 日期类型自动打开选择器
+        if (inputType !== 'text') {
+          const cellEl = containerRef.current?.querySelector(`[data-row="${activeCell.row}"][data-col="${activeCell.col}"]`) as HTMLElement
+          if (cellEl) {
+            const rect = cellEl.getBoundingClientRect()
+            setDatePickerPos({ top: rect.bottom + 4, left: rect.left })
+          }
+        }
+        
         setTimeout(() => {
           const input = inputRef.current
           if (input) {
@@ -691,6 +1426,8 @@ const VirtualDataTable = memo(function VirtualDataTable({
         ref={containerRef} 
         className="navi-scroll-container"
         onClick={(e) => {
+          // 如果刚结束拖动选择，不清空选择
+          if (justFinishedDraggingRef.current) return
           if (e.target === e.currentTarget || (e.target as HTMLElement).classList.contains('navi-body')) {
             clearSelection()
           }
@@ -714,8 +1451,7 @@ const VirtualDataTable = memo(function VirtualDataTable({
             return (
               <div 
                 key={col.name}
-                onClick={() => togglePin(col.name)}
-                className={`navi-header-cell ${isPinned ? 'pinned' : ''}`}
+                className={`navi-header-cell ${isPinned ? 'pinned' : ''} ${resizingCol === col.name ? 'resizing' : ''}`}
                 style={{ 
                   width: colWidth,
                   minWidth: colWidth,
@@ -726,7 +1462,7 @@ const VirtualDataTable = memo(function VirtualDataTable({
                 }}
                 title={isPinned ? `取消固定 ${col.name}` : `固定 ${col.name}`}
               >
-                <div className="navi-header-content">
+                <div className="navi-header-content" onClick={() => togglePin(col.name)}>
                   <div className="navi-header-row">
                     <span className="navi-col-name">{col.name}</span>
                     {showColumnInfo && col.key === 'PRI' && <Key size={10} className="text-amber-500" />}
@@ -741,6 +1477,11 @@ const VirtualDataTable = memo(function VirtualDataTable({
                     <div className="navi-col-comment" title={col.comment}>{col.comment}</div>
                   )}
                 </div>
+                {/* 列宽拖动手柄 */}
+                <div 
+                  className="navi-resize-handle"
+                  onMouseDown={(e) => handleResizeStart(col.name, e)}
+                />
               </div>
             )
           })}
@@ -751,6 +1492,8 @@ const VirtualDataTable = memo(function VirtualDataTable({
           className="navi-body" 
           style={{ height: Math.max(totalHeight, containerHeight), minWidth: totalWidth }}
           onClick={(e) => {
+            // 如果刚结束拖动选择，不清空选择
+            if (justFinishedDraggingRef.current) return
             if (e.target === e.currentTarget) clearSelection()
           }}
         >
@@ -844,6 +1587,8 @@ const VirtualDataTable = memo(function VirtualDataTable({
                     return (
                       <div
                         key={col.name}
+                        data-row={actualRowIndex}
+                        data-col={col.name}
                         className="navi-cell"
                         style={{
                           background: bgColor,
@@ -860,10 +1605,19 @@ const VirtualDataTable = memo(function VirtualDataTable({
                         }}
                         onMouseDown={(e) => handleCellMouseDown(actualRowIndex, col.name, e)}
                         onMouseEnter={() => handleCellMouseEnter(actualRowIndex, col.name)}
-                        onDoubleClick={() => {
+                        onDoubleClick={(e) => {
                           if (editable) {
+                            const inputType = getInputType(col.type || '')
                             setEditingCell({ row: actualRowIndex, col: col.name })
-                            setEditValue(value === null ? '' : String(value))
+                            setEditValue(getEditValue(value, col.type || ''))
+                            
+                            // 日期类型自动打开选择器
+                            if (inputType !== 'text') {
+                              const rect = e.currentTarget.getBoundingClientRect()
+                              setDatePickerPos({ top: rect.bottom + 4, left: rect.left })
+                            } else {
+                              setDatePickerPos(null)
+                            }
                             setTimeout(() => inputRef.current?.focus(), 0)
                           }
                         }}
@@ -878,97 +1632,157 @@ const VirtualDataTable = memo(function VirtualDataTable({
                         }}
                         title={displayValue || ''}
                       >
-                        {isEditing ? (
-                          <input
-                            ref={inputRef}
-                            type="text"
-                            value={editValue}
-                            onChange={(e) => setEditValue(e.target.value)}
-                            onBlur={() => {
-                              if (editValue !== (value === null ? '' : String(value))) {
-                                onCellChange?.(actualRowIndex, col.name, editValue === '' ? null : editValue)
-                              }
-                              setEditingCell(null)
-                            }}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') {
-                                // 保存当前单元格
-                                if (editValue !== (value === null ? '' : String(value))) {
-                                  onCellChange?.(actualRowIndex, col.name, editValue === '' ? null : editValue)
-                                }
-                                setEditingCell(null)
-                                // 移动到下一行同列
-                                const newRow = Math.min(actualRowIndex + 1, data.length - 1)
-                                setActiveCell({ row: newRow, col: col.name })
-                                setSelectedCells(new Set([`${newRow}-${col.name}`]))
-                              } else if (e.key === 'Tab') {
-                                e.preventDefault()
-                                // 保存当前单元格
-                                if (editValue !== (value === null ? '' : String(value))) {
-                                  onCellChange?.(actualRowIndex, col.name, editValue === '' ? null : editValue)
-                                }
-                                // 计算下一个单元格位置
-                                const currentColIndex = getColIndex(col.name)
-                                let nextRow = actualRowIndex
-                                let nextColIndex = e.shiftKey ? currentColIndex - 1 : currentColIndex + 1
-                                
-                                if (!e.shiftKey) {
-                                  if (nextColIndex >= sortedColumns.length) {
-                                    nextColIndex = 0
-                                    nextRow = actualRowIndex + 1
-                                    if (nextRow >= data.length) {
-                                      nextRow = data.length - 1
-                                      nextColIndex = sortedColumns.length - 1
+                        {isEditing ? ((() => {
+                          const inputType = getInputType(col.type || '')
+                          const originalEditValue = getEditValue(value, col.type || '')
+                          
+                          const saveValue = () => {
+                            const convertedValue = fromInputValue(editValue, inputType)
+                            if (editValue !== originalEditValue) {
+                              onCellChange?.(actualRowIndex, col.name, convertedValue)
+                            }
+                          }
+                          
+                          // 对于日期/时间类型，显示编辑状态（与非编辑状态样式一致）
+                          if (inputType !== 'text') {
+                            return (
+                              <div className="navi-date-cell-edit">
+                                <Calendar size={12} className="navi-date-icon" />
+                                <input
+                                  ref={inputRef}
+                                  type="text"
+                                  value={editValue}
+                                  onChange={(e) => setEditValue(e.target.value)}
+                                  onBlur={() => {
+                                    if (!datePickerPos) {
+                                      const normalized = parseAndNormalizeDateInput(editValue, inputType)
+                                      if (normalized !== editValue) {
+                                        setEditValue(normalized)
+                                      }
+                                      saveValue()
+                                      setEditingCell(null)
                                     }
-                                  }
-                                } else {
-                                  if (nextColIndex < 0) {
-                                    nextColIndex = sortedColumns.length - 1
-                                    nextRow = actualRowIndex - 1
-                                    if (nextRow < 0) {
-                                      nextRow = 0
+                                  }}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                      const normalized = parseAndNormalizeDateInput(editValue, inputType)
+                                      setEditValue(normalized)
+                                      saveValue()
+                                      setEditingCell(null)
+                                      setDatePickerPos(null)
+                                      const newRow = Math.min(actualRowIndex + 1, data.length - 1)
+                                      setActiveCell({ row: newRow, col: col.name })
+                                      setSelectedCells(new Set([`${newRow}-${col.name}`]))
+                                    } else if (e.key === 'Escape') {
+                                      setEditingCell(null)
+                                      setDatePickerPos(null)
+                                    }
+                                  }}
+                                  onClick={(e) => e.stopPropagation()}
+                                  onMouseDown={(e) => e.stopPropagation()}
+                                  placeholder={inputType === 'date' ? 'YYYY/MM/DD' : inputType === 'time' ? 'HH:MM:SS' : 'YYYY/MM/DD HH:MM:SS'}
+                                  className="navi-date-input-field"
+                                  autoFocus
+                                />
+                              </div>
+                            )
+                          }
+                          
+                          return (
+                            <input
+                              ref={inputRef}
+                              type="text"
+                              value={editValue}
+                              onChange={(e) => setEditValue(e.target.value)}
+                              onBlur={() => {
+                                saveValue()
+                                setEditingCell(null)
+                              }}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                  // 保存当前单元格
+                                  saveValue()
+                                  setEditingCell(null)
+                                  // 移动到下一行同列
+                                  const newRow = Math.min(actualRowIndex + 1, data.length - 1)
+                                  setActiveCell({ row: newRow, col: col.name })
+                                  setSelectedCells(new Set([`${newRow}-${col.name}`]))
+                                } else if (e.key === 'Tab') {
+                                  e.preventDefault()
+                                  // 保存当前单元格
+                                  saveValue()
+                                  // 计算下一个单元格位置
+                                  const currentColIndex = getColIndex(col.name)
+                                  let nextRow = actualRowIndex
+                                  let nextColIndex = e.shiftKey ? currentColIndex - 1 : currentColIndex + 1
+                                  
+                                  if (!e.shiftKey) {
+                                    if (nextColIndex >= sortedColumns.length) {
                                       nextColIndex = 0
+                                      nextRow = actualRowIndex + 1
+                                      if (nextRow >= data.length) {
+                                        nextRow = data.length - 1
+                                        nextColIndex = sortedColumns.length - 1
+                                      }
+                                    }
+                                  } else {
+                                    if (nextColIndex < 0) {
+                                      nextColIndex = sortedColumns.length - 1
+                                      nextRow = actualRowIndex - 1
+                                      if (nextRow < 0) {
+                                        nextRow = 0
+                                        nextColIndex = 0
+                                      }
                                     }
                                   }
+                                  
+                                  const nextColName = sortedColumns[nextColIndex]?.name
+                                  if (nextColName) {
+                                    // 直接切换到下一个单元格的编辑状态
+                                    const nextCol = sortedColumns[nextColIndex]
+                                    const nextValue = data[nextRow]?.[nextColName]
+                                    setEditingCell({ row: nextRow, col: nextColName })
+                                    setEditValue(getEditValue(nextValue, nextCol?.type || ''))
+                                    setActiveCell({ row: nextRow, col: nextColName })
+                                    setSelectedCells(new Set([`${nextRow}-${nextColName}`]))
+                                    setTimeout(() => inputRef.current?.focus(), 0)
+                                  }
+                                } else if (e.key === 'Escape') {
+                                  setEditingCell(null)
+                                } else if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                                  e.preventDefault()
+                                  // 保存当前单元格
+                                  saveValue()
+                                  setEditingCell(null)
+                                  // 触发保存
+                                  onSave?.()
                                 }
-                                
-                                const nextColName = sortedColumns[nextColIndex]?.name
-                                if (nextColName) {
-                                  // 直接切换到下一个单元格的编辑状态
-                                  const nextValue = data[nextRow]?.[nextColName]
-                                  setEditingCell({ row: nextRow, col: nextColName })
-                                  setEditValue(nextValue === null ? '' : String(nextValue))
-                                  setActiveCell({ row: nextRow, col: nextColName })
-                                  setSelectedCells(new Set([`${nextRow}-${nextColName}`]))
-                                  setTimeout(() => inputRef.current?.focus(), 0)
-                                }
-                              } else if (e.key === 'Escape') {
-                                setEditingCell(null)
-                              } else if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-                                e.preventDefault()
-                                // 保存当前单元格
-                                if (editValue !== (value === null ? '' : String(value))) {
-                                  onCellChange?.(actualRowIndex, col.name, editValue === '' ? null : editValue)
-                                }
-                                setEditingCell(null)
-                                // 触发保存
-                                onSave?.()
-                              }
-                            }}
-                            onClick={(e) => e.stopPropagation()}
-                            onMouseDown={(e) => e.stopPropagation()}
-                            className="navi-cell-input"
-                            autoFocus
-                          />
-                        ) : value === null ? (
+                              }}
+                              onClick={(e) => e.stopPropagation()}
+                              onMouseDown={(e) => e.stopPropagation()}
+                              className="navi-cell-input"
+                              autoFocus
+                            />
+                          )
+                        })()) : value === null ? (
                           <span className="navi-null">NULL</span>
                         ) : value === '' ? (
                           <span className="navi-empty"></span>
                         ) : typeof value === 'object' ? (
                           <span className="navi-json">{displayValue}</span>
-                        ) : (
-                          <span className="navi-value">{displayValue}</span>
-                        )}
+                        ) : (() => {
+                          // 判断是否是日期类型字段
+                          const inputType = getInputType(col.type || '')
+                          if (inputType !== 'text') {
+                            return (
+                              <span className="navi-date-cell">
+                                <Calendar size={12} className="navi-date-icon" />
+                                <span className="navi-date-text">{displayValue}</span>
+                              </span>
+                            )
+                          }
+                          return <span className="navi-value">{displayValue}</span>
+                        })()}
                       </div>
                     )
                   })}
@@ -976,6 +1790,53 @@ const VirtualDataTable = memo(function VirtualDataTable({
               )
             })}
           </div>
+          
+          {/* 空白填充行 - 当数据不够填满容器时 */}
+          {(() => {
+            const dataHeight = data.length * rowHeight
+            const emptyRowsNeeded = Math.max(0, Math.ceil((containerHeight - dataHeight) / rowHeight))
+            if (emptyRowsNeeded <= 0) return null
+            
+            return Array.from({ length: emptyRowsNeeded }, (_, i) => (
+              <div 
+                key={`empty-${i}`}
+                className="navi-row empty-row"
+                style={{ height: rowHeight }}
+                onClick={() => {
+                  // 点击空白行清空选择
+                  if (!justFinishedDraggingRef.current) {
+                    clearSelection()
+                  }
+                }}
+              >
+                {editable && (
+                  <div 
+                    className="navi-row-number empty"
+                    style={{ width: rowNumberWidth, height: rowHeight }}
+                  />
+                )}
+                {sortedColumns.map((col) => {
+                  const isPinned = pinnedColumns.has(col.name)
+                  const colWidth = columnWidths[col.name] || 100
+                  return (
+                    <div
+                      key={col.name}
+                      className="navi-cell empty"
+                      style={{
+                        position: isPinned ? 'sticky' : 'relative',
+                        left: isPinned ? pinnedLeftOffsets[col.name] : 'auto',
+                        width: colWidth,
+                        minWidth: colWidth,
+                        maxWidth: colWidth,
+                        height: rowHeight,
+                        zIndex: isPinned ? 10 : 1,
+                      }}
+                    />
+                  )
+                })}
+              </div>
+            ))
+          })()}
         </div>
         
         {data.length === 0 && (
@@ -1104,6 +1965,42 @@ const VirtualDataTable = memo(function VirtualDataTable({
           </div>
         </>
       )}
+      
+      {/* 日期时间选择器 */}
+      {editingCell && datePickerPos && (() => {
+        const col = sortedColumns.find(c => c.name === editingCell.col)
+        const inputType = getInputType(col?.type || '')
+        if (inputType === 'text') return null
+        
+        return (
+          <>
+            <div 
+              className="fixed inset-0 z-[9998]" 
+              onClick={() => {
+                setEditingCell(null)
+                setDatePickerPos(null)
+              }} 
+            />
+            <DateTimePicker
+              value={editValue}
+              type={inputType}
+              position={datePickerPos}
+              onChange={(val) => {
+                // 直接更新编辑值和单元格
+                setEditValue(val)
+                const convertedValue = fromInputValue(val, inputType)
+                if (onCellChange && editingCell) {
+                  onCellChange(editingCell.row, editingCell.col, convertedValue)
+                }
+              }}
+              onClose={() => {
+                setEditingCell(null)
+                setDatePickerPos(null)
+              }}
+            />
+          </>
+        )
+      })()}
     </div>
   )
 })
diff --git a/src/index.css b/src/index.css
index ef3292b..85797fc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -367,12 +367,58 @@ button:focus:not(:focus-visible) {
   cursor: pointer;
   transition: background 0.1s;
   flex-shrink: 0;
+  position: relative;
 }
 
 .navi-header-cell:hover {
   background: #f1f5f9;
 }
 
+.navi-header-cell.resizing {
+  background: #dbeafe;
+}
+
+/* 列宽拖动手柄 */
+.navi-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 10;
+  transition: background 0.15s;
+}
+
+.navi-resize-handle:hover,
+.navi-header-cell.resizing .navi-resize-handle {
+  background: #3b82f6;
+}
+
+.navi-resize-handle::after {
+  content: '';
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 16px;
+  background: #cbd5e1;
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.navi-header-cell:hover .navi-resize-handle::after {
+  opacity: 1;
+}
+
+.navi-header-cell.resizing .navi-resize-handle::after {
+  opacity: 1;
+  background: white;
+}
+
 .navi-col-name {
   color: #0f172a;
   font-size: 12px;
@@ -413,6 +459,21 @@ button:focus:not(:focus-visible) {
   background: rgba(59, 130, 246, 0.08);
 }
 
+/* 空白填充行 */
+.navi-row.empty-row {
+  background: #fcfcfd;
+}
+
+.navi-row-number.empty {
+  background: #fafafa;
+  border-right: 1px solid #e2e8f0;
+}
+
+.navi-cell.empty {
+  background: transparent;
+  border-right: 1px solid #f1f5f9;
+}
+
 /* 行号 */
 .navi-row-number {
   position: sticky;
@@ -496,6 +557,71 @@ button:focus:not(:focus-visible) {
   font-size: 12px;
 }
 
+/* 日期单元格通用样式 */
+.navi-date-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+}
+
+.navi-date-icon {
+  flex-shrink: 0;
+  color: #60a5fa;
+}
+
+.navi-date-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #1e293b;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+}
+
+/* 日期编辑状态 - 与未编辑状态保持一致 */
+.navi-date-cell-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  inset: 0;
+  padding: 0 10px;
+  background: transparent;
+}
+
+.navi-date-input-field {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: #1e293b;
+  color: #1e293b;
+}
+
+.navi-date-input-field::placeholder {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+
+/* 日期时间选择器动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* 右键菜单 */
 .navi-context-menu {
   position: fixed;
@@ -648,7 +774,9 @@ button:focus:not(:focus-visible) {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .navi-header-row {
diff --git a/src/lib/electron-api.ts b/src/lib/electron-api.ts
index 28b1189..81b1dbd 100644
--- a/src/lib/electron-api.ts
+++ b/src/lib/electron-api.ts
@@ -54,6 +54,9 @@ declare global {
       saveDialog: (options: any) => Promise<string | null>
       writeFile: (filePath: string, content: string) => Promise<{ success: boolean; error?: string }>
       readFile: (filePath: string) => Promise<{ success: boolean; content?: string; error?: string }>
+      
+      // 密码解密
+      decryptNavicatPassword: (encryptedPassword: string, version?: number) => Promise<string>
     }
   }
 }
@@ -248,6 +251,24 @@ const api = {
       return { columns: [], rows: [], error: e.toString() }
     }
   },
+
+  // 执行查询（query 的别名，用于兼容）
+  executeQuery: async (id: string, sql: string): Promise<{ columns: string[]; rows: any[]; error?: string }> => {
+    const electronAPI = getElectronAPI()
+    if (!electronAPI) {
+      return { columns: [], rows: [], error: 'Electron API 不可用' }
+    }
+    try {
+      const result = await electronAPI.query(id, sql)
+      return {
+        columns: result.columns,
+        rows: result.rows,
+        error: result.error,
+      }
+    } catch (e: any) {
+      return { columns: [], rows: [], error: e.toString() }
+    }
+  },
   
   getDatabases: async (id: string): Promise<string[]> => {
     const electronAPI = getElectronAPI()
@@ -282,6 +303,18 @@ const api = {
     }
   },
   
+  // 别名，兼容旧代码
+  getTableColumns: async (id: string, database: string, table: string): Promise<ColumnInfo[]> => {
+    const electronAPI = getElectronAPI()
+    if (!electronAPI) return []
+    try {
+      return await electronAPI.getColumns(id, database, table)
+    } catch (e) {
+      console.error('getTableColumns error:', e)
+      return []
+    }
+  },
+  
   getTableData: async (id: string, database: string, table: string, page?: number, pageSize?: number): Promise<{ data: any[]; total: number; columns?: ColumnInfo[] }> => {
     const electronAPI = getElectronAPI()
     if (!electronAPI) return { data: [], total: 0 }
@@ -344,6 +377,44 @@ const api = {
     }
   },
 
+  // 更新行（简化参数格式，兼容旧代码）
+  updateTableRow: async (id: string, database: string, tableName: string, primaryKeyColumn: string, primaryKeyValue: any, updates: Record<string, any>): Promise<{ success?: boolean; error?: string }> => {
+    const electronAPI = getElectronAPI()
+    if (!electronAPI) return { success: false, error: 'Electron API 不可用' }
+    try {
+      const result = await electronAPI.updateRow(id, database, tableName, { column: primaryKeyColumn, value: primaryKeyValue }, updates)
+      return { success: result.success, error: result.success ? undefined : result.message }
+    } catch (e: any) {
+      return { success: false, error: e.toString() }
+    }
+  },
+
+  // 插入行（对象格式，兼容旧代码）
+  insertTableRow: async (id: string, database: string, tableName: string, data: Record<string, any>): Promise<{ success?: boolean; error?: string; insertId?: number }> => {
+    const columns = Object.keys(data)
+    const values = Object.values(data)
+    const electronAPI = getElectronAPI()
+    if (!electronAPI) return { success: false, error: 'Electron API 不可用' }
+    try {
+      const result = await electronAPI.insertRow(id, database, tableName, columns, values)
+      return { success: result.success, error: result.success ? undefined : result.message, insertId: result.insertId }
+    } catch (e: any) {
+      return { success: false, error: e.toString() }
+    }
+  },
+
+  // 删除行（简化参数格式，兼容旧代码）
+  deleteTableRow: async (id: string, database: string, tableName: string, primaryKeyColumn: string, primaryKeyValue: any): Promise<{ success?: boolean; error?: string }> => {
+    const electronAPI = getElectronAPI()
+    if (!electronAPI) return { success: false, error: 'Electron API 不可用' }
+    try {
+      const result = await electronAPI.deleteRow(id, database, tableName, { column: primaryKeyColumn, value: primaryKeyValue })
+      return { success: result.success, error: result.success ? undefined : result.message }
+    } catch (e: any) {
+      return { success: false, error: e.toString() }
+    }
+  },
+
   // 数据库管理
   createDatabase: async (id: string, dbName: string, charset = 'utf8mb4', collation = 'utf8mb4_general_ci'): Promise<{ success: boolean; message: string }> => {
     const electronAPI = getElectronAPI()
@@ -566,7 +637,8 @@ const api = {
       
       let connections: any[]
       if (isNcx) {
-        connections = parseNcx(result.content)
+        // NCX 解析现在是异步的，因为需要解密密码
+        connections = await parseNcxAsync(result.content, electronAPI)
       } else {
         connections = JSON.parse(result.content)
       }
@@ -694,36 +766,171 @@ const api = {
   },
 }
 
-// 简单的 NCX 解析和生成
-function parseNcx(content: string): any[] {
+// NCX 解析 - 支持多种 Navicat 导出格式（异步版本，支持密码解密）
+async function parseNcxAsync(content: string, electronAPI: Window['electronAPI']): Promise<any[]> {
   const connections: any[] = []
-  const regex = /<Connection[^>]*\/>/g
-  let match
   
-  while ((match = regex.exec(content)) !== null) {
+  // 尝试匹配两种格式:
+  // 1. 自闭合: <Connection ... />
+  // 2. 非自闭合: <Connection ...>...</Connection>
+  const selfClosingRegex = /<Connection\s+([^>]*?)\/>/gi
+  const openTagRegex = /<Connection\s+([^>]*?)>/gi
+  
+  // 解析属性的辅助函数
+  const parseAttrs = (attrString: string): Record<string, string> => {
     const attrs: Record<string, string> = {}
-    const attrRegex = /(\w+)="([^"]*)"/g
-    let attrMatch
+    const attrRegex = /(\w+)\s*=\s*"([^"]*)"/g
+    let match
+    while ((match = attrRegex.exec(attrString)) !== null) {
+      attrs[match[1]] = match[2]
+    }
+    return attrs
+  }
+  
+  // 从属性创建连接对象（异步，支持密码解密）
+  const createConnection = async (attrs: Record<string, string>) => {
+    // 支持多种属性名称格式
+    const name = attrs.ConnectionName || attrs.Name || attrs.connection_name || ''
+    if (!name) return null
     
-    while ((attrMatch = attrRegex.exec(match[0])) !== null) {
-      attrs[attrMatch[1]] = attrMatch[2]
+    // 类型映射
+    let type = (attrs.ConnType || attrs.Type || attrs.conn_type || 'mysql').toLowerCase()
+    if (type === 'postgresql') type = 'postgres'
+    if (type === 'sql server' || type === 'mssql') type = 'sqlserver'
+    
+    // 获取加密的密码
+    const encryptedPassword = attrs.Password || attrs.password || ''
+    let password = ''
+    
+    // 如果密码看起来是加密的（全是十六进制字符），则尝试解密
+    if (encryptedPassword && /^[0-9A-Fa-f]+$/.test(encryptedPassword) && encryptedPassword.length >= 16) {
+      try {
+        // 检测 Navicat 版本 - 通过查找 Version 属性或使用默认的 12+
+        const version = parseInt(attrs.Version || attrs.version || '12') || 12
+        password = await electronAPI.decryptNavicatPassword(encryptedPassword, version)
+        console.log(`密码解密成功: ${name} (版本: ${version})`)
+      } catch (e) {
+        console.warn(`密码解密失败: ${name}`, e)
+        // 解密失败时保留原始值（可能是明文密码）
+        password = encryptedPassword
+      }
+    } else {
+      // 如果密码不是十六进制格式，假设是明文
+      password = encryptedPassword
     }
     
-    if (attrs.ConnectionName) {
-      connections.push({
-        id: crypto.randomUUID(),
-        name: attrs.ConnectionName,
-        type: (attrs.ConnType || 'mysql').toLowerCase(),
-        host: attrs.Host || 'localhost',
-        port: parseInt(attrs.Port) || 3306,
-        username: attrs.UserName || '',
-        password: attrs.Password || '',
-        database: attrs.Database || '',
-      })
+    return {
+      id: crypto.randomUUID(),
+      name,
+      type,
+      host: attrs.Host || attrs.host || attrs.Server || 'localhost',
+      port: parseInt(attrs.Port || attrs.port || '3306') || 3306,
+      username: attrs.UserName || attrs.Username || attrs.User || attrs.user || '',
+      password,
+      database: attrs.Database || attrs.database || attrs.InitialDatabase || '',
     }
   }
   
-  return connections
+  // 收集所有属性字符串
+  const attrStrings: string[] = []
+  
+  // 匹配自闭合标签
+  let match
+  while ((match = selfClosingRegex.exec(content)) !== null) {
+    attrStrings.push(match[1])
+  }
+  
+  // 匹配非自闭合标签
+  while ((match = openTagRegex.exec(content)) !== null) {
+    attrStrings.push(match[1])
+  }
+  
+  // 并行处理所有连接
+  const connectionPromises = attrStrings.map(async (attrString) => {
+    const attrs = parseAttrs(attrString)
+    return await createConnection(attrs)
+  })
+  
+  const results = await Promise.all(connectionPromises)
+  
+  // 过滤掉 null 值
+  for (const conn of results) {
+    if (conn) connections.push(conn)
+  }
+  
+  // 去重（基于名称）
+  const uniqueConnections = connections.filter((conn, index, self) =>
+    index === self.findIndex(c => c.name === conn.name)
+  )
+  
+  return uniqueConnections
+}
+
+// NCX 解析 - 同步版本（不解密密码，保留兼容性）
+function parseNcx(content: string): any[] {
+  const connections: any[] = []
+  
+  // 尝试匹配两种格式:
+  // 1. 自闭合: <Connection ... />
+  // 2. 非自闭合: <Connection ...>...</Connection>
+  const selfClosingRegex = /<Connection\s+([^>]*?)\/>/gi
+  const openTagRegex = /<Connection\s+([^>]*?)>/gi
+  
+  // 解析属性的辅助函数
+  const parseAttrs = (attrString: string): Record<string, string> => {
+    const attrs: Record<string, string> = {}
+    const attrRegex = /(\w+)\s*=\s*"([^"]*)"/g
+    let match
+    while ((match = attrRegex.exec(attrString)) !== null) {
+      attrs[match[1]] = match[2]
+    }
+    return attrs
+  }
+  
+  // 从属性创建连接对象
+  const createConnection = (attrs: Record<string, string>) => {
+    // 支持多种属性名称格式
+    const name = attrs.ConnectionName || attrs.Name || attrs.connection_name || ''
+    if (!name) return null
+    
+    // 类型映射
+    let type = (attrs.ConnType || attrs.Type || attrs.conn_type || 'mysql').toLowerCase()
+    if (type === 'postgresql') type = 'postgres'
+    if (type === 'sql server' || type === 'mssql') type = 'sqlserver'
+    
+    return {
+      id: crypto.randomUUID(),
+      name,
+      type,
+      host: attrs.Host || attrs.host || attrs.Server || 'localhost',
+      port: parseInt(attrs.Port || attrs.port || '3306') || 3306,
+      username: attrs.UserName || attrs.Username || attrs.User || attrs.user || '',
+      password: attrs.Password || attrs.password || '',
+      database: attrs.Database || attrs.database || attrs.InitialDatabase || '',
+    }
+  }
+  
+  // 匹配自闭合标签
+  let match
+  while ((match = selfClosingRegex.exec(content)) !== null) {
+    const attrs = parseAttrs(match[1])
+    const conn = createConnection(attrs)
+    if (conn) connections.push(conn)
+  }
+  
+  // 匹配非自闭合标签
+  while ((match = openTagRegex.exec(content)) !== null) {
+    const attrs = parseAttrs(match[1])
+    const conn = createConnection(attrs)
+    if (conn) connections.push(conn)
+  }
+  
+  // 去重（基于名称）
+  const uniqueConnections = connections.filter((conn, index, self) =>
+    index === self.findIndex(c => c.name === conn.name)
+  )
+  
+  return uniqueConnections
 }
 
 function generateNcx(connections: any[]): string {
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
index 18907fa..f269477 100644
--- a/src/lib/hooks.ts
+++ b/src/lib/hooks.ts
@@ -228,9 +228,9 @@ export function useConnections() {
 
   // 加载保存的连接
   useEffect(() => {
-    const loadConnections = async () => {
+    const doLoadConnections = async () => {
       try {
-        const saved = await api.getConnections()
+        const saved = await api.loadConnections()
         if (saved && Array.isArray(saved)) {
           setConnections(saved)
         }
@@ -238,7 +238,7 @@ export function useConnections() {
         console.error('加载连接失败:', err)
       }
     }
-    loadConnections()
+    doLoadConnections()
   }, [])
 
   // 添加连接
@@ -284,13 +284,29 @@ export function useConnections() {
 export function useDatabaseOperations(showNotification: (type: 'success' | 'error' | 'info', msg: string) => void) {
   const [databasesMap, setDatabasesMap] = useState<Map<string, string[]>>(new Map())
   const [loadingDbSet, setLoadingDbSet] = useState<Set<string>>(new Set())
+  const [loadingConnectionsSet, setLoadingConnectionsSet] = useState<Set<string>>(new Set())
 
   const fetchDatabases = useCallback(async (connectionId: string) => {
+    // 标记开始加载
+    setLoadingConnectionsSet(prev => new Set(prev).add(connectionId))
     try {
       const dbs = await api.getDatabases(connectionId)
-      setDatabasesMap(prev => new Map(prev).set(connectionId, dbs))
+      console.log('获取到数据库列表:', connectionId, dbs)
+      setDatabasesMap(prev => new Map(prev).set(connectionId, dbs || []))
+      if (!dbs || dbs.length === 0) {
+        showNotification('info', '未发现数据库或无权限访问')
+      }
     } catch (err) {
-      showNotification('error', '获取数据库列表失败')
+      console.error('获取数据库列表失败:', err)
+      showNotification('error', '获取数据库列表失败: ' + (err as Error).message)
+      setDatabasesMap(prev => new Map(prev).set(connectionId, []))
+    } finally {
+      // 标记加载完成
+      setLoadingConnectionsSet(prev => {
+        const next = new Set(prev)
+        next.delete(connectionId)
+        return next
+      })
     }
   }, [showNotification])
 
@@ -299,6 +315,7 @@ export function useDatabaseOperations(showNotification: (type: 'success' | 'erro
     setDatabasesMap,
     loadingDbSet,
     setLoadingDbSet,
+    loadingConnectionsSet,
     fetchDatabases
   }
 }
@@ -384,13 +401,49 @@ export function useImportExport(
   const importConnections = useCallback(async () => {
     try {
       const result = await api.importConnections()
-      if (result && result.length > 0) {
+      if (result.cancelled) {
+        return // 用户取消了选择
+      }
+      if (!result.success) {
+        showNotification('error', result.error || '导入失败')
+        return
+      }
+      if (result.connections && result.connections.length > 0) {
         setConnections(prev => {
-          const updated = [...prev, ...result]
+          // 根据连接名称判断是否已存在，存在则覆盖
+          const existingMap = new Map(prev.map(c => [c.name, c]))
+          let updatedCount = 0
+          let newCount = 0
+          
+          for (const importedConn of result.connections!) {
+            const existing = existingMap.get(importedConn.name)
+            if (existing) {
+              // 保留原有 ID，覆盖其他信息
+              existingMap.set(importedConn.name, {
+                ...importedConn,
+                id: existing.id
+              })
+              updatedCount++
+            } else {
+              // 新增连接
+              existingMap.set(importedConn.name, importedConn)
+              newCount++
+            }
+          }
+          
+          const updated = Array.from(existingMap.values())
           api.saveConnections(updated)
+          
+          // 显示详细的导入信息
+          const messages: string[] = []
+          if (newCount > 0) messages.push(`新增 ${newCount} 个`)
+          if (updatedCount > 0) messages.push(`覆盖 ${updatedCount} 个`)
+          showNotification('success', `已从 ${result.source || '文件'} 导入连接：${messages.join('，')}`)
+          
           return updated
         })
-        showNotification('success', `已导入 ${result.length} 个连接`)
+      } else {
+        showNotification('info', '文件中没有找到连接信息')
       }
     } catch (err) {
       showNotification('error', '导入失败：' + (err as Error).message)
diff --git a/src/types.ts b/src/types.ts
index cb93f38..ab9d8db 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -21,6 +21,7 @@ export interface QueryTab {
   id: string
   title: string
   sql: string
+  connectionId?: string  // 所属连接ID
   results: {
     columns: string[]
     rows: any[]