790 lines
30 KiB
TypeScript
790 lines
30 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from 'react'
|
|
import TitleBar from './components/TitleBar'
|
|
import Sidebar from './components/Sidebar'
|
|
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'
|
|
import { useConnections, useDatabaseOperations, useTableOperations, useTabOperations, useQueryOperations, useImportExport } from './lib/hooks'
|
|
import { Database, Loader2, CheckCircle, XCircle, AlertCircle } from 'lucide-react'
|
|
|
|
function App() {
|
|
const [activeConnection, setActiveConnection] = useState<string | null>(null)
|
|
const [selectedDatabase, setSelectedDatabase] = useState<string | null>(null)
|
|
const [showConnectionModal, setShowConnectionModal] = useState(false)
|
|
const [editingConnection, setEditingConnection] = useState<Connection | null>(null)
|
|
const [newConnectionType, setNewConnectionType] = useState<DatabaseType | undefined>()
|
|
const [showCreateDbModal, setShowCreateDbModal] = useState(false)
|
|
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
|
|
label: string
|
|
defaultValue: string
|
|
onConfirm: (value: string) => void
|
|
} | null>(null)
|
|
const [notification, setNotification] = useState<{
|
|
type: 'success' | 'error' | 'info'
|
|
message: string
|
|
} | null>(null)
|
|
|
|
// 显示通知
|
|
const showNotification = useCallback((type: 'success' | 'error' | 'info', message: string) => {
|
|
setNotification({ type, message })
|
|
setTimeout(() => setNotification(null), 3000)
|
|
}, [])
|
|
|
|
// 连接管理
|
|
const {
|
|
connections, setConnections,
|
|
connectedIds, setConnectedIds,
|
|
addConnection, deleteConnection, updateConnection
|
|
} = useConnections()
|
|
|
|
// 数据库操作
|
|
const {
|
|
databasesMap, setDatabasesMap,
|
|
loadingDbSet, setLoadingDbSet,
|
|
loadingConnectionsSet,
|
|
fetchDatabases
|
|
} = useDatabaseOperations(showNotification)
|
|
|
|
// 表操作
|
|
const {
|
|
tablesMap, setTablesMap,
|
|
columnsMap, setColumnsMap,
|
|
fetchTables, fetchColumns
|
|
} = useTableOperations(showNotification)
|
|
|
|
// Tab操作
|
|
const {
|
|
tabs, setTabs,
|
|
activeTab, setActiveTab,
|
|
loadingTables, setLoadingTables
|
|
} = useTabOperations()
|
|
|
|
// 查询操作
|
|
const { runQuery } = useQueryOperations(tabs, setTabs, showNotification)
|
|
|
|
// 导入导出
|
|
const { importConnections: doImportConnections, exportConnections: doExportConnections } = useImportExport(connections, setConnections, showNotification)
|
|
|
|
// 连接数据库
|
|
const handleConnect = useCallback(async (conn: Connection) => {
|
|
if (connectedIds.has(conn.id)) return
|
|
try {
|
|
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)
|
|
showNotification('success', `已连接到 ${conn.name}`)
|
|
} catch (err) {
|
|
showNotification('error', '连接失败：' + (err as Error).message)
|
|
}
|
|
}, [connectedIds, setConnectedIds, fetchDatabases, showNotification])
|
|
|
|
// 断开连接
|
|
const handleDisconnect = useCallback(async (id: string) => {
|
|
try {
|
|
await api.disconnect(id)
|
|
setConnectedIds(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(id)
|
|
return next
|
|
})
|
|
setDatabasesMap(prev => {
|
|
const next = new Map(prev)
|
|
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, activeTab, setConnectedIds, setDatabasesMap, setTabs, setActiveTab, showNotification])
|
|
|
|
// 选择数据库
|
|
const handleSelectDatabase = useCallback(async (db: string, connectionId: string) => {
|
|
setSelectedDatabase(db)
|
|
setActiveConnection(connectionId)
|
|
setLoadingDbSet(prev => new Set(prev).add(db))
|
|
try {
|
|
await fetchTables(connectionId, db)
|
|
const tables = tablesMap.get(db) || []
|
|
await Promise.all(tables.map(t => fetchColumns(connectionId, db, t.name)))
|
|
} finally {
|
|
setLoadingDbSet(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(db)
|
|
return next
|
|
})
|
|
}
|
|
}, [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 && 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 { data, total } = await api.getTableData(connectionId, database, tableName, 1, pageSize)
|
|
|
|
// 更新标签页数据
|
|
setTabs(prev => prev.map(t => t.id === newTabId ? {
|
|
...t,
|
|
columns: cols,
|
|
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)
|
|
next.delete(newTabId)
|
|
return next
|
|
})
|
|
}
|
|
}, [tabs, setTabs, setActiveTab, setLoadingTables, showNotification])
|
|
|
|
// 加载表页
|
|
const handleLoadTablePage = useCallback(async (tabId: string, page: number) => {
|
|
const tab = tabs.find(t => t.id === tabId)
|
|
if (!tab || !('tableName' in tab)) return
|
|
|
|
setLoadingTables(prev => new Set(prev).add(tabId))
|
|
try {
|
|
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 {
|
|
setLoadingTables(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(tabId)
|
|
return next
|
|
})
|
|
}
|
|
}, [tabs, setTabs, setLoadingTables, showNotification])
|
|
|
|
// 更新表单元格
|
|
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>; 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)
|
|
|
|
// 同时更新 data 数组以便 UI 立即显示更新
|
|
const newData = [...tab.data]
|
|
if (newData[rowIndex]) {
|
|
newData[rowIndex] = { ...newData[rowIndex], [colName]: value }
|
|
}
|
|
|
|
return { ...t, data: newData, pendingChanges: changes }
|
|
}))
|
|
}, [setTabs])
|
|
|
|
// 删除行
|
|
const handleDeleteTableRow = useCallback((tabId: string, rowIndex: number) => {
|
|
setTabs(prev => prev.map(t => {
|
|
if (t.id !== tabId || !('tableName' in t)) return t
|
|
const tab = t as TableTab & { deletedRows: Set<number> }
|
|
const deleted = new Set(tab.deletedRows)
|
|
deleted.add(rowIndex)
|
|
return { ...t, deletedRows: deleted }
|
|
}))
|
|
}, [setTabs])
|
|
|
|
// 批量删除行
|
|
const handleDeleteTableRows = useCallback((tabId: string, rowIndices: number[]) => {
|
|
setTabs(prev => prev.map(t => {
|
|
if (t.id !== tabId || !('tableName' in t)) return t
|
|
const tab = t as TableTab & { deletedRows: Set<number> }
|
|
const deleted = new Set(tab.deletedRows)
|
|
rowIndices.forEach(i => deleted.add(i))
|
|
return { ...t, deletedRows: deleted }
|
|
}))
|
|
}, [setTabs])
|
|
|
|
// 保存更改
|
|
const handleSaveTableChanges = useCallback(async (tabId: string) => {
|
|
const tab = tabs.find(t => t.id === tabId) as (TableTab & { pendingChanges: Map<string, any>; deletedRows: Set<number>; newRows: any[] }) | undefined
|
|
if (!tab || !('tableName' in tab)) return
|
|
|
|
const primaryKeyCol = tab.columns.find(c => c.key === 'PRI')?.name || tab.columns[0]?.name
|
|
if (!primaryKeyCol) {
|
|
showNotification('error', '无法确定主键')
|
|
return
|
|
}
|
|
|
|
setLoadingTables(prev => new Set(prev).add(tabId))
|
|
try {
|
|
// 处理更新
|
|
for (const [rowKey, changes] of tab.pendingChanges) {
|
|
const rowIndex = parseInt(rowKey)
|
|
const row = tab.data[rowIndex]
|
|
if (!row) continue
|
|
const pkValue = row[primaryKeyCol]
|
|
await api.updateTableRow(tab.connectionId, tab.database, tab.tableName, primaryKeyCol, pkValue, changes)
|
|
}
|
|
|
|
// 处理删除
|
|
for (const rowIndex of tab.deletedRows) {
|
|
const row = tab.data[rowIndex]
|
|
if (!row) continue
|
|
const pkValue = row[primaryKeyCol]
|
|
await api.deleteTableRow(tab.connectionId, tab.database, tab.tableName, primaryKeyCol, pkValue)
|
|
}
|
|
|
|
// 处理新增
|
|
for (const newRow of tab.newRows || []) {
|
|
const insertData: Record<string, any> = {}
|
|
tab.columns.forEach(col => {
|
|
if (newRow[col.name] !== undefined && newRow[col.name] !== null && newRow[col.name] !== '') {
|
|
insertData[col.name] = newRow[col.name]
|
|
}
|
|
})
|
|
if (Object.keys(insertData).length > 0) {
|
|
await api.insertTableRow(tab.connectionId, tab.database, tab.tableName, insertData)
|
|
}
|
|
}
|
|
|
|
showNotification('success', '保存成功')
|
|
await handleLoadTablePage(tabId, tab.page)
|
|
} catch (err) {
|
|
showNotification('error', '保存失败：' + (err as Error).message)
|
|
} finally {
|
|
setLoadingTables(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(tabId)
|
|
return next
|
|
})
|
|
}
|
|
}, [tabs, handleLoadTablePage, setLoadingTables, showNotification])
|
|
|
|
// 丢弃更改
|
|
const handleDiscardTableChanges = useCallback((tabId: string) => {
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, pendingChanges: new Map(), deletedRows: new Set(), newRows: [] } : t))
|
|
}, [setTabs])
|
|
|
|
// 刷新表
|
|
const handleRefreshTable = useCallback(async (tabId: string) => {
|
|
const tab = tabs.find(t => t.id === tabId)
|
|
if (!tab || !('tableName' in tab)) return
|
|
await handleLoadTablePage(tabId, (tab as TableTab).page)
|
|
}, [tabs, handleLoadTablePage])
|
|
|
|
// 添加新行
|
|
const handleAddTableRow = useCallback((tabId: string) => {
|
|
setTabs(prev => prev.map(t => {
|
|
if (t.id !== tabId || !('tableName' in t)) return t
|
|
const tab = t as TableTab & { newRows: any[] }
|
|
const newRow: Record<string, any> = {}
|
|
tab.columns.forEach(col => { newRow[col.name] = null })
|
|
return { ...t, newRows: [...(tab.newRows || []), newRow] }
|
|
}))
|
|
}, [setTabs])
|
|
|
|
// 更新新行
|
|
const handleUpdateNewRow = 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 & { newRows: any[] }
|
|
const newRows = [...(tab.newRows || [])]
|
|
if (newRows[rowIndex]) {
|
|
newRows[rowIndex] = { ...newRows[rowIndex], [colName]: value }
|
|
}
|
|
return { ...t, newRows }
|
|
}))
|
|
}, [setTabs])
|
|
|
|
// 删除新行
|
|
const handleDeleteNewRow = useCallback((tabId: string, rowIndex: number) => {
|
|
setTabs(prev => prev.map(t => {
|
|
if (t.id !== tabId || !('tableName' in t)) return t
|
|
const tab = t as TableTab & { newRows: any[] }
|
|
const newRows = [...(tab.newRows || [])]
|
|
newRows.splice(rowIndex, 1)
|
|
return { ...t, newRows }
|
|
}))
|
|
}, [setTabs])
|
|
|
|
// 新建查询
|
|
const handleNewQuery = useCallback(() => {
|
|
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, activeConnection])
|
|
|
|
// 执行查询
|
|
const handleRunQuery = useCallback(async (tabId: string, sql: string) => {
|
|
if (!activeConnection) {
|
|
showNotification('error', '请先连接数据库')
|
|
return
|
|
}
|
|
await runQuery(tabId, activeConnection, sql)
|
|
}, [activeConnection, runQuery, showNotification])
|
|
|
|
// 更新SQL
|
|
const handleUpdateSql = useCallback((tabId: string, sql: string) => {
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, sql } : t))
|
|
}, [setTabs])
|
|
|
|
// 更新Tab标题
|
|
const handleUpdateTabTitle = useCallback((tabId: string, title: string) => {
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, title } : t))
|
|
}, [setTabs])
|
|
|
|
// 关闭Tab
|
|
const handleCloseTab = useCallback((tabId: string) => {
|
|
setTabs(prev => {
|
|
const filtered = prev.filter(t => t.id !== tabId)
|
|
if (activeTab === tabId) {
|
|
setActiveTab(filtered.length > 0 ? filtered[filtered.length - 1].id : 'welcome')
|
|
}
|
|
return filtered
|
|
})
|
|
}, [activeTab, setTabs, setActiveTab])
|
|
|
|
// 切换Tab
|
|
const handleTabChange = useCallback((tabId: string) => {
|
|
setActiveTab(tabId)
|
|
}, [setActiveTab])
|
|
|
|
// 更改每页大小
|
|
const handleChangeTablePageSize = useCallback(async (tabId: string, pageSize: number) => {
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, pageSize } : t))
|
|
await handleLoadTablePage(tabId, 1)
|
|
}, [setTabs, handleLoadTablePage])
|
|
|
|
// 带类型新建连接
|
|
const handleNewConnectionWithType = useCallback((type: DatabaseType) => {
|
|
setNewConnectionType(type)
|
|
setEditingConnection(null)
|
|
setShowConnectionModal(true)
|
|
}, [])
|
|
|
|
// 保存连接
|
|
const handleSaveConnection = useCallback((conn: Omit<Connection, 'id'> & { id?: string }) => {
|
|
if (conn.id) {
|
|
updateConnection(conn as Connection)
|
|
} else {
|
|
addConnection(conn)
|
|
}
|
|
}, [addConnection, updateConnection])
|
|
|
|
// 删除连接
|
|
const handleDeleteConnection = useCallback(async (id: string) => {
|
|
if (connectedIds.has(id)) {
|
|
await handleDisconnect(id)
|
|
}
|
|
deleteConnection(id)
|
|
}, [connectedIds, handleDisconnect, deleteConnection])
|
|
|
|
// 批量删除连接
|
|
const handleDeleteConnections = useCallback(async (ids: string[]) => {
|
|
for (const id of ids) {
|
|
await handleDeleteConnection(id)
|
|
}
|
|
}, [handleDeleteConnection])
|
|
|
|
// 编辑连接
|
|
const handleEditConnection = useCallback((conn: Connection) => {
|
|
setEditingConnection(conn)
|
|
setNewConnectionType(undefined)
|
|
setShowConnectionModal(true)
|
|
}, [])
|
|
|
|
// 创建数据库
|
|
const handleCreateDatabase = useCallback((connectionId: string) => {
|
|
setCreateDbConnectionId(connectionId)
|
|
setShowCreateDbModal(true)
|
|
}, [])
|
|
|
|
// 删除数据库
|
|
const handleDropDatabase = useCallback(async (connectionId: string, database: string) => {
|
|
try {
|
|
await api.dropDatabase(connectionId, database)
|
|
showNotification('success', `数据库 ${database} 已删除`)
|
|
await fetchDatabases(connectionId)
|
|
} catch (err) {
|
|
showNotification('error', '删除失败：' + (err as Error).message)
|
|
}
|
|
}, [fetchDatabases, showNotification])
|
|
|
|
// 创建表 - 使用 TableDesigner
|
|
const handleCreateTable = useCallback((connectionId: string, database: string) => {
|
|
setTableDesignerContext({ connectionId, database, mode: 'create' })
|
|
setShowTableDesigner(true)
|
|
}, [])
|
|
|
|
// 删除表
|
|
const handleDropTable = useCallback(async (connectionId: string, database: string, table: string) => {
|
|
try {
|
|
await api.dropTable(connectionId, database, table)
|
|
showNotification('success', `表 ${table} 已删除`)
|
|
await fetchTables(connectionId, database)
|
|
} catch (err) {
|
|
showNotification('error', '删除失败：' + (err as Error).message)
|
|
}
|
|
}, [fetchTables, showNotification])
|
|
|
|
// 清空表
|
|
const handleTruncateTable = useCallback(async (connectionId: string, database: string, table: string) => {
|
|
try {
|
|
await api.truncateTable(connectionId, database, table)
|
|
showNotification('success', `表 ${table} 已清空`)
|
|
} catch (err) {
|
|
showNotification('error', '清空失败：' + (err as Error).message)
|
|
}
|
|
}, [showNotification])
|
|
|
|
// 重命名表
|
|
const handleRenameTable = useCallback((connectionId: string, database: string, table: string) => {
|
|
setInputDialog({
|
|
isOpen: true,
|
|
title: '重命名表',
|
|
label: '新表名',
|
|
defaultValue: table,
|
|
onConfirm: async (newName: string) => {
|
|
if (newName && newName !== table) {
|
|
try {
|
|
await api.renameTable(connectionId, database, table, newName)
|
|
showNotification('success', `表已重命名为 ${newName}`)
|
|
await fetchTables(connectionId, database)
|
|
} catch (err) {
|
|
showNotification('error', '重命名失败：' + (err as Error).message)
|
|
}
|
|
}
|
|
setInputDialog(null)
|
|
}
|
|
})
|
|
}, [fetchTables, showNotification])
|
|
|
|
// 复制表
|
|
const handleDuplicateTable = useCallback((connectionId: string, database: string, table: string) => {
|
|
setInputDialog({
|
|
isOpen: true,
|
|
title: '复制表',
|
|
label: '新表名',
|
|
defaultValue: `${table}_copy`,
|
|
onConfirm: async (newName: string) => {
|
|
if (newName) {
|
|
try {
|
|
await api.duplicateTable(connectionId, database, table, newName)
|
|
showNotification('success', `表已复制为 ${newName}`)
|
|
await fetchTables(connectionId, database)
|
|
} catch (err) {
|
|
showNotification('error', '复制失败：' + (err as Error).message)
|
|
}
|
|
}
|
|
setInputDialog(null)
|
|
}
|
|
})
|
|
}, [fetchTables, showNotification])
|
|
|
|
// 刷新表列表
|
|
const handleRefreshTables = useCallback(async (connectionId: string, database: string) => {
|
|
await fetchTables(connectionId, database)
|
|
showNotification('success', '已刷新')
|
|
}, [fetchTables, showNotification])
|
|
|
|
// 设计表 - 使用 TableDesigner
|
|
const handleDesignTable = useCallback((connectionId: string, database: string, table: string) => {
|
|
setTableDesignerContext({ connectionId, database, tableName: table, mode: 'edit' })
|
|
setShowTableDesigner(true)
|
|
}, [])
|
|
|
|
// 键盘快捷键
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.ctrlKey && e.key === 'q') {
|
|
e.preventDefault()
|
|
handleNewQuery()
|
|
}
|
|
}
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
}, [handleNewQuery])
|
|
|
|
return (
|
|
<div className="h-screen flex flex-col bg-white overflow-hidden font-sans">
|
|
<TitleBar />
|
|
<div className="flex-1 flex min-h-0">
|
|
<Sidebar
|
|
connections={connections}
|
|
activeConnection={activeConnection}
|
|
connectedIds={connectedIds}
|
|
databasesMap={databasesMap}
|
|
tablesMap={tablesMap}
|
|
selectedDatabase={selectedDatabase}
|
|
loadingDbSet={loadingDbSet}
|
|
loadingConnectionsSet={loadingConnectionsSet}
|
|
onNewConnection={() => { setEditingConnection(null); setNewConnectionType(undefined); setShowConnectionModal(true) }}
|
|
onSelectConnection={setActiveConnection}
|
|
onConnect={handleConnect}
|
|
onDisconnect={handleDisconnect}
|
|
onEditConnection={handleEditConnection}
|
|
onDeleteConnection={handleDeleteConnection}
|
|
onDeleteConnections={handleDeleteConnections}
|
|
onSelectDatabase={handleSelectDatabase}
|
|
onOpenTable={handleOpenTable}
|
|
onExportConnections={doExportConnections}
|
|
onImportConnections={doImportConnections}
|
|
onCreateDatabase={handleCreateDatabase}
|
|
onDropDatabase={handleDropDatabase}
|
|
onCreateTable={handleCreateTable}
|
|
onDropTable={handleDropTable}
|
|
onTruncateTable={handleTruncateTable}
|
|
onRenameTable={handleRenameTable}
|
|
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}
|
|
onTabChange={handleTabChange}
|
|
onCloseTab={handleCloseTab}
|
|
onNewQuery={handleNewQuery}
|
|
onRunQuery={handleRunQuery}
|
|
onUpdateSql={handleUpdateSql}
|
|
onUpdateTabTitle={handleUpdateTabTitle}
|
|
onLoadTablePage={handleLoadTablePage}
|
|
onChangeTablePageSize={handleChangeTablePageSize}
|
|
onNewConnectionWithType={handleNewConnectionWithType}
|
|
onUpdateTableCell={handleUpdateTableCell}
|
|
onDeleteTableRow={handleDeleteTableRow}
|
|
onDeleteTableRows={handleDeleteTableRows}
|
|
onSaveTableChanges={handleSaveTableChanges}
|
|
onDiscardTableChanges={handleDiscardTableChanges}
|
|
onRefreshTable={handleRefreshTable}
|
|
onAddTableRow={handleAddTableRow}
|
|
onUpdateNewRow={handleUpdateNewRow}
|
|
onDeleteNewRow={handleDeleteNewRow}
|
|
onSelectConnection={handleConnectionChange}
|
|
onSelectDatabase={handleSelectDatabase}
|
|
loadingTables={loadingTables}
|
|
/>
|
|
</div>
|
|
|
|
{/* 状态栏 */}
|
|
<div className="h-6 bg-light-surface flex items-center px-3 text-xs border-t border-border-default text-text-tertiary">
|
|
<span className={`w-2 h-2 rounded-full mr-2 ${connectedIds.size > 0 ? 'bg-success-500' : 'bg-text-disabled'}`} />
|
|
<span>{connectedIds.size > 0 ? `${connectedIds.size} 个连接` : '未连接'}</span>
|
|
<span className="ml-auto font-mono text-text-muted">EasySQL v{__APP_VERSION__}</span>
|
|
</div>
|
|
|
|
{/* 通知 */}
|
|
{notification && (
|
|
<div className={`fixed bottom-12 right-4 px-4 py-3 rounded-xl shadow-lg flex items-center gap-2 animate-slide-up z-50
|
|
${notification.type === 'success' ? 'bg-white text-success-600 border border-success-200' :
|
|
notification.type === 'error' ? 'bg-white text-danger-600 border border-danger-200' :
|
|
'bg-white text-primary-600 border border-primary-200'}`}>
|
|
{notification.type === 'success' && <CheckCircle size={16} />}
|
|
{notification.type === 'error' && <XCircle size={16} />}
|
|
{notification.type === 'info' && <AlertCircle size={16} />}
|
|
<span className="text-sm">{notification.message}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 模态框 */}
|
|
<ConnectionModal
|
|
isOpen={showConnectionModal}
|
|
editingConnection={editingConnection}
|
|
initialType={newConnectionType}
|
|
onClose={() => { setShowConnectionModal(false); setEditingConnection(null); setNewConnectionType(undefined) }}
|
|
onSave={handleSaveConnection}
|
|
/>
|
|
|
|
<CreateDatabaseModal
|
|
isOpen={showCreateDbModal}
|
|
connectionId={createDbConnectionId}
|
|
onClose={() => { setShowCreateDbModal(false); setCreateDbConnectionId(null) }}
|
|
onCreated={async () => {
|
|
if (createDbConnectionId) await fetchDatabases(createDbConnectionId)
|
|
}}
|
|
/>
|
|
|
|
<CreateTableModal
|
|
isOpen={showCreateTableModal}
|
|
connectionId={createTableContext?.connectionId || null}
|
|
database={createTableContext?.database || null}
|
|
onClose={() => { setShowCreateTableModal(false); setCreateTableContext(null) }}
|
|
onCreated={async () => {
|
|
if (createTableContext) await fetchTables(createTableContext.connectionId, createTableContext.database)
|
|
}}
|
|
/>
|
|
|
|
{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}
|
|
title={inputDialog.title}
|
|
label={inputDialog.label}
|
|
defaultValue={inputDialog.defaultValue}
|
|
onClose={() => setInputDialog(null)}
|
|
onConfirm={inputDialog.onConfirm}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|