feat: SchemaSidebar 三级树结构 — 库→表→字段 (类似 Navicat)
- MySQL: 先加载数据库列表，点击库展开表，点击表展开字段 - 当前选中的 database 自动展开并标记「当前」 - 搜索框支持搜库名和表名，跨库搜索 - 每个库的表列表独立缓存，切换库不重复请求 - Tab 名改为「库表」更直观 - Redis 部分保持不变
This commit is contained in:
logan committed
1 parent
6a8c4d95d5
commit
e6ab5bf496
1 file changed
+200
-82
@@ -23,6 +23,14 @@ interface RedisKeyItem {
|
||||
ttl: number;
|
||||
}
|
||||
|
||||
/** 每个数据库节点缓存的表列表 */
|
||||
interface DbNode {
|
||||
name: string;
|
||||
tables: TableMeta[];
|
||||
loading: boolean;
|
||||
loaded: boolean;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
@@ -43,13 +51,15 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
const isMySQL = dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql';
|
||||
const isRedis = dbType === 'redis';
|
||||
|
||||
// -- MySQL State --
|
||||
const [tables, setTables] = useState<TableMeta[]>([]);
|
||||
const [loadingTables, setLoadingTables] = useState(false);
|
||||
// -- MySQL: DB → Table → Column 三级 --
|
||||
const [databases, setDatabases] = useState<string[]>([]);
|
||||
const [loadingDbs, setLoadingDbs] = useState(false);
|
||||
const [expandedDb, setExpandedDb] = useState<string | null>(null);
|
||||
const [dbNodes, setDbNodes] = useState<Record<string, DbNode>>({});
|
||||
const [expandedTable, setExpandedTable] = useState<string | null>(null);
|
||||
const [tableColumns, setTableColumns] = useState<ColumnInfo[]>([]);
|
||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||
const [tableSearch, setTableSearch] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
// -- Redis State --
|
||||
const [redisDb, setRedisDb] = useState(0);
|
||||
@@ -64,36 +74,76 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
const [activeTab, setActiveTab] = useState<'tables' | 'redis'>('tables');
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
/* Fetch tables */
|
||||
/* Fetch databases (level 1) */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
if (!instanceId || !database || !isMySQL) { setTables([]); return; }
|
||||
setLoadingTables(true);
|
||||
instanceDetailApi.listTables(Number(instanceId), database)
|
||||
.then((data) => setTables(Array.isArray(data) ? data : []))
|
||||
.catch(() => setTables([]))
|
||||
.finally(() => setLoadingTables(false));
|
||||
}, [instanceId, database, isMySQL]);
|
||||
if (!instanceId || !isMySQL) { setDatabases([]); return; }
|
||||
setLoadingDbs(true);
|
||||
instanceDetailApi.listDatabases(Number(instanceId))
|
||||
.then((data) => {
|
||||
const list = Array.isArray(data) ? data : [];
|
||||
setDatabases(list);
|
||||
// 如果当前已选了 database，自动展开
|
||||
if (database && list.includes(database)) {
|
||||
setExpandedDb(database);
|
||||
}
|
||||
})
|
||||
.catch(() => setDatabases([]))
|
||||
.finally(() => setLoadingDbs(false));
|
||||
}, [instanceId, isMySQL]);
|
||||
|
||||
// 当 database prop 变化时自动展开
|
||||
useEffect(() => {
|
||||
if (database && databases.includes(database) && expandedDb !== database) {
|
||||
setExpandedDb(database);
|
||||
}
|
||||
}, [database, databases]);
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
/* Fetch columns on expand */
|
||||
/* Expand database → load tables (level 2) */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
const handleExpandTable = useCallback(async (tableName: string) => {
|
||||
if (expandedTable === tableName) { setExpandedTable(null); return; }
|
||||
setExpandedTable(tableName);
|
||||
const handleExpandDb = useCallback(async (dbName: string) => {
|
||||
if (expandedDb === dbName) {
|
||||
setExpandedDb(null);
|
||||
return;
|
||||
}
|
||||
setExpandedDb(dbName);
|
||||
setExpandedTable(null);
|
||||
|
||||
// 已加载过则跳过
|
||||
if (dbNodes[dbName]?.loaded) return;
|
||||
|
||||
setDbNodes(prev => ({ ...prev, [dbName]: { name: dbName, tables: [], loading: true, loaded: false } }));
|
||||
try {
|
||||
const data = await instanceDetailApi.listTables(Number(instanceId), dbName);
|
||||
const tables = Array.isArray(data) ? data : [];
|
||||
setDbNodes(prev => ({ ...prev, [dbName]: { name: dbName, tables, loading: false, loaded: true } }));
|
||||
} catch {
|
||||
setDbNodes(prev => ({ ...prev, [dbName]: { name: dbName, tables: [], loading: false, loaded: true } }));
|
||||
}
|
||||
}, [expandedDb, instanceId, dbNodes]);
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
/* Expand table → load columns (level 3) */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
const handleExpandTable = useCallback(async (dbName: string, tableName: string) => {
|
||||
const key = `${dbName}.${tableName}`;
|
||||
if (expandedTable === key) { setExpandedTable(null); return; }
|
||||
setExpandedTable(key);
|
||||
setTableColumns([]);
|
||||
setLoadingColumns(true);
|
||||
try {
|
||||
const detail = await instanceDetailApi.getTableDetail(Number(instanceId), database, tableName);
|
||||
const detail = await instanceDetailApi.getTableDetail(Number(instanceId), dbName, tableName);
|
||||
setTableColumns(detail?.columns || []);
|
||||
} catch { /* ignore */ }
|
||||
finally { setLoadingColumns(false); }
|
||||
}, [expandedTable, instanceId, database]);
|
||||
}, [expandedTable, instanceId]);
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
/* Fetch Redis keys */
|
||||
/* Fetch Redis keys */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
const fetchRedisKeys = useCallback(async () => {
|
||||
@@ -118,7 +168,7 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
}, [isRedis, instanceId, fetchRedisKeys]);
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
/* Fetch Redis key detail */
|
||||
/* Fetch Redis key detail */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
const handleSelectKey = useCallback(async (key: string) => {
|
||||
@@ -132,12 +182,29 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
}, [instanceId, redisDb]);
|
||||
|
||||
/* ---------------------------------------------------------------- */
|
||||
/* Filtered tables */
|
||||
/* Filtered databases (search matches db name or table name) */
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
const filteredTables = tables.filter(t =>
|
||||
!tableSearch || t.name.toLowerCase().includes(tableSearch.toLowerCase())
|
||||
);
|
||||
const filteredDatabases = databases.filter(dbName => {
|
||||
if (!search) return true;
|
||||
const kw = search.toLowerCase();
|
||||
// 库名匹配
|
||||
if (dbName.toLowerCase().includes(kw)) return true;
|
||||
// 该库下的表名匹配
|
||||
const node = dbNodes[dbName];
|
||||
if (node?.loaded) {
|
||||
return node.tables.some(t => t.name.toLowerCase().includes(kw));
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const getFilteredTables = (dbName: string) => {
|
||||
const node = dbNodes[dbName];
|
||||
if (!node?.loaded) return [];
|
||||
if (!search) return node.tables;
|
||||
const kw = search.toLowerCase();
|
||||
return node.tables.filter(t => t.name.toLowerCase().includes(kw));
|
||||
};
|
||||
|
||||
/* ================================================================== */
|
||||
/* RENDER */
|
||||
@@ -177,7 +244,7 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
: 'text-[var(--dg-text-muted)] border-transparent hover:text-[var(--dg-text-secondary)]'
|
||||
}`}
|
||||
>
|
||||
<Table2 className="w-3 h-3" /> 表
|
||||
<Database className="w-3 h-3" /> 库表
|
||||
</button>
|
||||
)}
|
||||
{isRedis && (
|
||||
@@ -204,79 +271,130 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--dg-text-muted)]" />
|
||||
<input
|
||||
value={tableSearch}
|
||||
onChange={(e) => setTableSearch(e.target.value)}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full pl-7 pr-2 py-1.5 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded text-[11px] focus:outline-none focus:border-blue-500"
|
||||
placeholder="搜索表..."
|
||||
placeholder="搜索库/表..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table List */}
|
||||
{/* DB → Table → Column tree */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{loadingTables ? (
|
||||
{loadingDbs ? (
|
||||
<div className="space-y-1 p-2">
|
||||
{Array.from({ length: 6 }, (_, i) => (
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<div key={i} className="flex items-center gap-2 px-2 py-1.5">
|
||||
<div className="w-3 h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse" />
|
||||
<div className="h-3.5 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
|
||||
<div className="h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : filteredTables.length === 0 ? (
|
||||
<div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">无表</div>
|
||||
) : filteredDatabases.length === 0 ? (
|
||||
<div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">无数据库</div>
|
||||
) : (
|
||||
<div className="divide-y divide-[var(--dg-border-light)]">
|
||||
{filteredTables.map(t => (
|
||||
<div key={t.name}>
|
||||
<button
|
||||
onClick={() => handleExpandTable(t.name)}
|
||||
className="flex items-center gap-1.5 w-full px-2 py-1.5 text-xs hover:bg-[var(--dg-bg-hover)] transition-colors group"
|
||||
>
|
||||
{expandedTable === t.name
|
||||
? <ChevronDown className="w-3 h-3 text-[var(--dg-text-muted)]" />
|
||||
: <ChevronRight className="w-3 h-3 text-[var(--dg-text-muted)]" />
|
||||
}
|
||||
<Table2 className="w-3 h-3 text-blue-400" />
|
||||
<span
|
||||
className="font-mono truncate flex-1 text-left hover:text-blue-400 transition-colors"
|
||||
onClick={(e) => { e.stopPropagation(); onInsert(t.name); }}
|
||||
title="点击插入"
|
||||
>
|
||||
{t.name}
|
||||
</span>
|
||||
{t.rows !== undefined && (
|
||||
<span className="text-[9px] text-[var(--dg-text-muted)]">{t.rows.toLocaleString()}</span>
|
||||
)}
|
||||
</button>
|
||||
<div>
|
||||
{filteredDatabases.map(dbName => {
|
||||
const isExpanded = expandedDb === dbName;
|
||||
const node = dbNodes[dbName];
|
||||
const tables = getFilteredTables(dbName);
|
||||
const isActive = dbName === database;
|
||||
|
||||
{/* Columns */}
|
||||
{expandedTable === t.name && (
|
||||
<div className="ml-5 border-l border-[var(--dg-border-light)]">
|
||||
{loadingColumns ? (
|
||||
<div className="flex items-center gap-1 p-2 text-[10px] text-[var(--dg-text-muted)]">
|
||||
<Loader2 className="w-2.5 h-2.5 animate-spin" /> ...
|
||||
</div>
|
||||
) : (
|
||||
tableColumns.map(col => (
|
||||
<button
|
||||
key={col.Field}
|
||||
onClick={() => onInsert(col.Field)}
|
||||
className="flex items-center gap-1.5 w-full px-2 py-1 text-[11px] hover:bg-[var(--dg-bg-hover)] transition-colors"
|
||||
title={`${col.Type} ${col.Null === 'NO' ? 'NOT NULL' : ''}`}
|
||||
>
|
||||
<Columns3 className="w-2.5 h-2.5 text-[var(--dg-text-muted)]" />
|
||||
<span className="font-mono text-[var(--dg-text-secondary)] hover:text-blue-400">{col.Field}</span>
|
||||
<span className="text-[9px] text-[var(--dg-text-muted)] ml-auto">{col.Type}</span>
|
||||
{col.Key === 'PRI' && <span className="text-[8px] px-1 bg-yellow-500/10 text-yellow-400 rounded">PK</span>}
|
||||
</button>
|
||||
))
|
||||
return (
|
||||
<div key={dbName}>
|
||||
{/* Level 1: Database */}
|
||||
<button
|
||||
onClick={() => handleExpandDb(dbName)}
|
||||
className={`flex items-center gap-1.5 w-full px-2 py-1.5 text-xs hover:bg-[var(--dg-bg-hover)] transition-colors ${
|
||||
isActive ? 'text-blue-400' : ''
|
||||
}`}
|
||||
>
|
||||
{isExpanded
|
||||
? <ChevronDown className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
: <ChevronRight className="w-3 h-3 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
}
|
||||
<Database className="w-3 h-3 text-amber-400 flex-shrink-0" />
|
||||
<span className="font-mono truncate flex-1 text-left">{dbName}</span>
|
||||
{isActive && (
|
||||
<span className="text-[8px] px-1 bg-blue-500/10 text-blue-400 rounded flex-shrink-0">当前</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</button>
|
||||
|
||||
{/* Level 2: Tables */}
|
||||
{isExpanded && (
|
||||
<div className="ml-3 border-l border-[var(--dg-border-light)]">
|
||||
{node?.loading ? (
|
||||
<div className="space-y-1 px-2 py-1">
|
||||
{Array.from({ length: 4 }, (_, i) => (
|
||||
<div key={i} className="flex items-center gap-2 px-1 py-1">
|
||||
<div className="w-2.5 h-2.5 bg-[var(--dg-bg-tertiary)] rounded animate-pulse" />
|
||||
<div className="h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : tables.length === 0 ? (
|
||||
<div className="px-3 py-1 text-[10px] text-[var(--dg-text-muted)]">无表</div>
|
||||
) : (
|
||||
tables.map(t => {
|
||||
const tableKey = `${dbName}.${t.name}`;
|
||||
const isTableExpanded = expandedTable === tableKey;
|
||||
|
||||
return (
|
||||
<div key={t.name}>
|
||||
<button
|
||||
onClick={() => handleExpandTable(dbName, t.name)}
|
||||
className="flex items-center gap-1.5 w-full px-2 py-1 text-[11px] hover:bg-[var(--dg-bg-hover)] transition-colors group"
|
||||
>
|
||||
{isTableExpanded
|
||||
? <ChevronDown className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
: <ChevronRight className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
}
|
||||
<Table2 className="w-2.5 h-2.5 text-blue-400 flex-shrink-0" />
|
||||
<span
|
||||
className="font-mono truncate flex-1 text-left hover:text-blue-400 transition-colors"
|
||||
onClick={(e) => { e.stopPropagation(); onInsert(t.name); }}
|
||||
title="点击插入表名"
|
||||
>
|
||||
{t.name}
|
||||
</span>
|
||||
{t.rows !== undefined && (
|
||||
<span className="text-[8px] text-[var(--dg-text-muted)] flex-shrink-0">{t.rows.toLocaleString()}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Level 3: Columns */}
|
||||
{isTableExpanded && (
|
||||
<div className="ml-4 border-l border-[var(--dg-border-light)]">
|
||||
{loadingColumns ? (
|
||||
<div className="flex items-center gap-1 p-1.5 text-[10px] text-[var(--dg-text-muted)]">
|
||||
<Loader2 className="w-2.5 h-2.5 animate-spin" /> ...
|
||||
</div>
|
||||
) : (
|
||||
tableColumns.map(col => (
|
||||
<button
|
||||
key={col.Field}
|
||||
onClick={() => onInsert(col.Field)}
|
||||
className="flex items-center gap-1.5 w-full px-2 py-0.5 text-[10px] hover:bg-[var(--dg-bg-hover)] transition-colors"
|
||||
title={`${col.Type} ${col.Null === 'NO' ? 'NOT NULL' : ''}`}
|
||||
>
|
||||
<Columns3 className="w-2 h-2 text-[var(--dg-text-muted)] flex-shrink-0" />
|
||||
<span className="font-mono text-[var(--dg-text-secondary)] hover:text-blue-400 truncate">{col.Field}</span>
|
||||
<span className="text-[8px] text-[var(--dg-text-muted)] ml-auto flex-shrink-0">{col.Type}</span>
|
||||
{col.Key === 'PRI' && <span className="text-[7px] px-0.5 bg-yellow-500/10 text-yellow-400 rounded flex-shrink-0">PK</span>}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user