feat: SchemaSidebar字段/索引tab切换+选库自动展开+singleDb过滤+表单击展开
- SchemaSidebar: 展开表后显示字段/索引两个tab，可切换查看 - 新增 tableIndexes state + IndexInfo import - 选库后自动调用 handleExpandDb 加载表（修复之前无表bug） - singleDb 模式下只显示当前选中库 - 表按钮交互改为: 单击展开/折叠, Alt+点击插入表名 - 菜单重组为工作台/管理/系统三段式 - TicketCreatePage 数据库必选(非Redis不自动选)
This commit is contained in:
logan committed
1 parent
a95a341370
commit
e81eed288c
4 files changed
+169
-95
No files matched your search
@@ -3,7 +3,7 @@ import {
|
||||
ChevronDown, ChevronRight, Database, Table2, Columns3,
|
||||
KeyRound, Search, Loader2, FolderOpen, Server,
|
||||
} from 'lucide-react';
|
||||
import { instanceDetailApi, type TableMeta, type ColumnInfo } from '@/api/instanceDetail';
|
||||
import { instanceDetailApi, type TableMeta, type ColumnInfo, type IndexInfo } from '@/api/instanceDetail';
|
||||
import { redisApi } from '@/api/redis';
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
@@ -15,6 +15,9 @@ interface Props {
|
||||
database: string;
|
||||
dbType: string;
|
||||
onInsert: (text: string) => void;
|
||||
onDatabaseChange?: (db: string) => void;
|
||||
/** 为 true 时只显示当前选中的库，不允许切换（数据变更场景防误操作） */
|
||||
singleDb?: boolean;
|
||||
}
|
||||
|
||||
interface RedisKeyItem {
|
||||
@@ -190,7 +193,7 @@ function formatTTL(ttl: number): string {
|
||||
/* COMPONENT */
|
||||
/* ================================================================== */
|
||||
|
||||
export default function SchemaSidebar({ instanceId, database, dbType, onInsert }: Props) {
|
||||
export default function SchemaSidebar({ instanceId, database, dbType, onInsert, onDatabaseChange, singleDb }: Props) {
|
||||
const isMySQL = dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql';
|
||||
const isRedis = dbType === 'redis';
|
||||
|
||||
@@ -201,7 +204,9 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
const [dbNodes, setDbNodes] = useState<Record<string, DbNode>>({});
|
||||
const [expandedTable, setExpandedTable] = useState<string | null>(null);
|
||||
const [tableColumns, setTableColumns] = useState<ColumnInfo[]>([]);
|
||||
const [tableIndexes, setTableIndexes] = useState<IndexInfo[]>([]);
|
||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||
const [detailTab, setDetailTab] = useState<'columns' | 'indexes'>('columns');
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
// -- Redis State --
|
||||
@@ -237,10 +242,10 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
.finally(() => setLoadingDbs(false));
|
||||
}, [instanceId, isMySQL]);
|
||||
|
||||
// 当 database prop 变化时自动展开
|
||||
// 当 database prop 变化时自动展开并加载表
|
||||
useEffect(() => {
|
||||
if (database && databases.includes(database) && expandedDb !== database) {
|
||||
setExpandedDb(database);
|
||||
handleExpandDb(database);
|
||||
}
|
||||
}, [database, databases]);
|
||||
|
||||
@@ -278,10 +283,13 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
if (expandedTable === key) { setExpandedTable(null); return; }
|
||||
setExpandedTable(key);
|
||||
setTableColumns([]);
|
||||
setTableIndexes([]);
|
||||
setDetailTab('columns');
|
||||
setLoadingColumns(true);
|
||||
try {
|
||||
const detail = await instanceDetailApi.getTableDetail(Number(instanceId), dbName, tableName);
|
||||
setTableColumns(detail?.columns || []);
|
||||
setTableIndexes(detail?.indexes || []);
|
||||
} catch { /* ignore */ }
|
||||
finally { setLoadingColumns(false); }
|
||||
}, [expandedTable, instanceId]);
|
||||
@@ -330,13 +338,10 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
/* ---------------------------------------------------------------- */
|
||||
|
||||
const filteredDatabases = databases.filter(dbName => {
|
||||
// 如果已选目标数据库，只显示该库
|
||||
if (database && dbName !== database) return false;
|
||||
if (singleDb && database && dbName !== database) return false;
|
||||
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));
|
||||
@@ -450,7 +455,10 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
<div key={dbName}>
|
||||
{/* Level 1: Database */}
|
||||
<button
|
||||
onClick={() => handleExpandDb(dbName)}
|
||||
onClick={() => {
|
||||
handleExpandDb(dbName);
|
||||
if (onDatabaseChange && dbName !== database) onDatabaseChange(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' : ''
|
||||
}`}
|
||||
@@ -488,19 +496,19 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
return (
|
||||
<div key={t.name}>
|
||||
<button
|
||||
onClick={() => handleExpandTable(dbName, t.name)}
|
||||
onClick={(e) => {
|
||||
if (e.altKey) { onInsert(`${dbName}.${t.name}`); }
|
||||
else { 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"
|
||||
title={`单击展开/折叠 · Alt+点击插入表名`}
|
||||
>
|
||||
{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(`${dbName}.${t.name}`); }}
|
||||
title="点击插入 库名.表名"
|
||||
>
|
||||
<span className="font-mono truncate flex-1 text-left hover:text-blue-400 transition-colors">
|
||||
{t.name}
|
||||
</span>
|
||||
{t.rows !== undefined && (
|
||||
@@ -508,7 +516,7 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Level 3: Columns */}
|
||||
{/* Level 3: Columns & Indexes */}
|
||||
{isTableExpanded && (
|
||||
<div className="ml-4 border-l border-[var(--dg-border-light)]">
|
||||
{loadingColumns ? (
|
||||
@@ -516,19 +524,77 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
<Loader2 className="w-2.5 h-2.5 animate-spin" /> ...
|
||||
</div>
|
||||
) : (
|
||||
tableColumns.map(col => (
|
||||
<button
|
||||
key={col.Field}
|
||||
onClick={() => onInsert(`${t.name}.${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>
|
||||
))
|
||||
<>
|
||||
{/* 字段/索引 Tab */}
|
||||
<div className="flex border-b border-[var(--dg-border-light)]">
|
||||
<button
|
||||
onClick={() => setDetailTab('columns')}
|
||||
className={`flex-1 px-2 py-1 text-[10px] font-medium border-b-2 transition-all ${
|
||||
detailTab === 'columns'
|
||||
? 'text-blue-400 border-blue-400'
|
||||
: 'text-[var(--dg-text-muted)] border-transparent hover:text-[var(--dg-text-secondary)]'
|
||||
}`}
|
||||
>
|
||||
<Columns3 className="w-2.5 h-2.5 inline mr-0.5" />
|
||||
字段 ({tableColumns.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDetailTab('indexes')}
|
||||
className={`flex-1 px-2 py-1 text-[10px] font-medium border-b-2 transition-all ${
|
||||
detailTab === 'indexes'
|
||||
? 'text-blue-400 border-blue-400'
|
||||
: 'text-[var(--dg-text-muted)] border-transparent hover:text-[var(--dg-text-secondary)]'
|
||||
}`}
|
||||
>
|
||||
<KeyRound className="w-2.5 h-2.5 inline mr-0.5" />
|
||||
索引 ({tableIndexes.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 字段列表 */}
|
||||
{detailTab === 'columns' && tableColumns.map(col => (
|
||||
<button
|
||||
key={col.Field}
|
||||
onClick={() => onInsert(`${t.name}.${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>
|
||||
))}
|
||||
|
||||
{/* 索引列表 */}
|
||||
{detailTab === 'indexes' && (
|
||||
tableIndexes.length === 0 ? (
|
||||
<div className="px-3 py-1.5 text-[10px] text-[var(--dg-text-muted)]">无索引</div>
|
||||
) : (
|
||||
Object.entries(
|
||||
tableIndexes.reduce((acc, idx) => {
|
||||
if (!acc[idx.Key_name]) acc[idx.Key_name] = [];
|
||||
acc[idx.Key_name].push(idx);
|
||||
return acc;
|
||||
}, {} as Record<string, IndexInfo[]>)
|
||||
).map(([keyName, cols]) => (
|
||||
<div key={keyName} className="px-2 py-1">
|
||||
<div className="flex items-center gap-1 text-[10px]">
|
||||
<KeyRound className="w-2 h-2 flex-shrink-0" style={{ color: cols[0].Non_unique ? 'var(--dg-text-muted)' : '#facc15' }} />
|
||||
<span className="font-mono text-[var(--dg-text-secondary)] truncate">{keyName}</span>
|
||||
{!cols[0].Non_unique && <span className="text-[7px] px-0.5 bg-yellow-500/10 text-yellow-400 rounded flex-shrink-0">UNI</span>}
|
||||
<span className="text-[8px] text-[var(--dg-text-muted)] ml-auto flex-shrink-0">{cols[0].Index_type}</span>
|
||||
</div>
|
||||
<div className="ml-4 flex flex-wrap gap-x-2">
|
||||
{cols.sort((a, b) => a.Seq_in_index - b.Seq_in_index).map(c => (
|
||||
<span key={c.Column_name} className="text-[9px] font-mono text-[var(--dg-text-muted)]">{c.Column_name}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user