rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 查询结果固定布局 - 编辑器/sidebar不被结果挤走 + 结果区可折叠

Browse Source
This commit is contained in:
logan committed 2026-05-30 02:16:34 +08:00
1 parent 471221fc47
commit 0afc9947fb
1 file changed
+169 -144
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/QueriesPage.tsx
+169 -144
View File
@@ -126,6 +126,7 @@ export default function QueriesPage() {
const [templateSearch, setTemplateSearch] = useState(''); const [templateSearch, setTemplateSearch] = useState('');
const [templateCategory, setTemplateCategory] = useState('all'); const [templateCategory, setTemplateCategory] = useState('all');
const [showSidebar, setShowSidebar] = useState(true); const [showSidebar, setShowSidebar] = useState(true);
const [showResult, setShowResult] = useState(true);
const [showHistory, setShowHistory] = useState(false); const [showHistory, setShowHistory] = useState(false);
const [sortState, setSortState] = useState<SortState>({ column: null, direction: null }); const [sortState, setSortState] = useState<SortState>({ column: null, direction: null });
const [rowHeight] = useState(36); const [rowHeight] = useState(36);
@@ -328,134 +329,140 @@ export default function QueriesPage() {
return ( return (
<div className="flex h-[calc(100vh-3rem)] gap-0"> <div className="flex h-[calc(100vh-3rem)] gap-0">
{/* ====== 主区域 ====== */} {/* ====== 主区域 ====== */}
<div className="flex-1 flex flex-col min-w-0 overflow-y-auto p-5 space-y-4"> <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
{/* -- 顶栏: 实例+库选择 -- */} {/* -- 顶栏: 实例+库选择 -- */}
<div className="flex items-center gap-3 flex-wrap"> <div className="shrink-0 px-5 pt-4 pb-2">
<div className="flex items-center gap-2 flex-1 min-w-0"> <div className="flex items-center gap-3 flex-wrap">
{selectedInstance && dbTypeIcon[dbType] && ( <div className="flex items-center gap-2 flex-1 min-w-0">
<img src={dbTypeIcon[dbType]} alt="" className="w-5 h-5 object-contain" /> {selectedInstance && dbTypeIcon[dbType] && (
)} <img src={dbTypeIcon[dbType]} alt="" className="w-5 h-5 object-contain" />
<select value={instanceId} onChange={e => setInstanceId(e.target.value)} )}
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none min-w-[200px]"> <select value={instanceId} onChange={e => setInstanceId(e.target.value)}
<option value="">选择实例</option> className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none min-w-[200px]">
{instances.map(inst => ( <option value="">选择实例</option>
<option key={inst.id} value={inst.id}> {instances.map(inst => (
{inst.name} ({dbTypeLabel[inst.db_type] || inst.db_type}) <option key={inst.id} value={inst.id}>
</option> {inst.name} ({dbTypeLabel[inst.db_type] || inst.db_type})
))} </option>
</select> ))}
{dbType === 'redis' ? (
<select value={database || '0'} onChange={e => setDatabase(e.target.value)}
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none w-24">
{Array.from({ length: 16 }, (_, i) => <option key={i} value={String(i)}>DB{i}</option>)}
</select> </select>
) : (
<select value={database} onChange={e => setDatabase(e.target.value)}
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none min-w-[160px]">
<option value="">{loadingDbs ? '加载中...' : '选择数据库'}</option>
{databases.map(db => <option key={db} value={db}>{db}</option>)}
</select>
)}
</div>
{/* 右侧工具按钮组 */} {dbType === 'redis' ? (
<div className="flex items-center gap-2"> <select value={database || '0'} onChange={e => setDatabase(e.target.value)}
{instanceId && ( className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none w-24">
<button onClick={() => setShowSidebar(!showSidebar)} {Array.from({ length: 16 }, (_, i) => <option key={i} value={String(i)}>DB{i}</option>)}
className={`dg-btn dg-btn-ghost dg-btn-sm ${showSidebar ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : ''}`}> </select>
<Database className="w-3.5 h-3.5" /> ) : (
{showSidebar ? '隐藏' : '导航'} <select value={database} onChange={e => setDatabase(e.target.value)}
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none min-w-[160px]">
<option value="">{loadingDbs ? '加载中...' : '选择数据库'}</option>
{databases.map(db => <option key={db} value={db}>{db}</option>)}
</select>
)}
</div>
{/* 右侧工具按钮组 */}
<div className="flex items-center gap-2">
{instanceId && (
<button onClick={() => setShowSidebar(!showSidebar)}
className={`dg-btn dg-btn-ghost dg-btn-sm ${showSidebar ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : ''}`}>
<Database className="w-3.5 h-3.5" />
{showSidebar ? '隐藏' : '导航'}
</button>
)}
<button onClick={() => setShowTemplates(!showTemplates)}
className="dg-btn dg-btn-ghost dg-btn-sm">
<Sparkles className="w-3.5 h-3.5 text-blue-400" />
模板 ({templates.length})
<ChevronDown className={`w-3 h-3 transition-transform ${showTemplates ? 'rotate-180' : ''}`} />
</button> </button>
)} <button onClick={() => setShowHistory(!showHistory)}
<button onClick={() => setShowTemplates(!showTemplates)} className={`dg-btn dg-btn-ghost dg-btn-sm ${showHistory ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : ''}`}>
className="dg-btn dg-btn-ghost dg-btn-sm"> {showHistory ? <PanelRightClose className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
<Sparkles className="w-3.5 h-3.5 text-blue-400" /> 历史 {history.length > 0 && <span className="text-[10px] px-1 py-0.5 rounded-full bg-[var(--dg-bg-primary)]">{history.length}</span>}
模板 ({templates.length}) </button>
<ChevronDown className={`w-3 h-3 transition-transform ${showTemplates ? 'rotate-180' : ''}`} /> <button onClick={handleExecute} disabled={executing || !instanceId}
</button> className="dg-btn dg-btn-primary">
<button onClick={() => setShowHistory(!showHistory)} {executing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
className={`dg-btn dg-btn-ghost dg-btn-sm ${showHistory ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : ''}`}> {executing ? '执行中...' : '执行'}
{showHistory ? <PanelRightClose className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />} </button>
历史 {history.length > 0 && <span className="text-[10px] px-1 py-0.5 rounded-full bg-[var(--dg-bg-primary)]">{history.length}</span>} </div>
</button>
<button onClick={handleExecute} disabled={executing || !instanceId}
className="dg-btn dg-btn-primary">
{executing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
{executing ? '执行中...' : '执行'}
</button>
</div> </div>
</div> </div>
{/* -- 模板选择器 -- */} {/* -- 模板选择器 -- */}
{showTemplates && ( {showTemplates && (
<div className="dg-card p-3"> <div className="shrink-0 px-5 pb-2">
<div className="flex items-center gap-2 mb-3 flex-wrap"> <div className="dg-card p-3">
{templateCategories.map(cat => ( <div className="flex items-center gap-2 mb-3 flex-wrap">
<button key={cat} onClick={() => setTemplateCategory(cat)} {templateCategories.map(cat => (
className={`dg-btn dg-btn-ghost dg-btn-sm ${templateCategory === cat ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : ''}`}> <button key={cat} onClick={() => setTemplateCategory(cat)}
{catLabel[cat] || cat} className={`dg-btn dg-btn-ghost dg-btn-sm ${templateCategory === cat ? 'bg-blue-500/15 text-blue-400 border-blue-500/30' : ''}`}>
</button> {catLabel[cat] || cat}
))}
<div className="flex-1" />
<div className="relative">
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 dg-text-muted" />
<input value={templateSearch} onChange={e => setTemplateSearch(e.target.value)}
className="pl-7 pr-3 py-1 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-md text-xs focus:border-blue-400 focus:outline-none w-40"
placeholder="搜索模板..." />
</div>
</div>
{filteredTemplates.length === 0 ? (
<div className="text-center py-4 text-xs dg-text-muted">无匹配模板</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
{filteredTemplates.map(tpl => (
<button key={tpl.id} onClick={() => handleApplyTemplate(tpl)}
className="dg-card text-left p-2.5 hover:bg-[var(--dg-bg-hover)] group"
title={tpl.description}>
<div className="flex items-center gap-2 mb-0.5">
<span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 font-medium">{tpl.category}</span>
<span className="text-sm font-medium group-hover:text-blue-400 transition-colors truncate">{tpl.name}</span>
</div>
<p className="text-xs dg-text-muted line-clamp-1">{tpl.description}</p>
</button> </button>
))} ))}
<div className="flex-1" />
<div className="relative">
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 dg-text-muted" />
<input value={templateSearch} onChange={e => setTemplateSearch(e.target.value)}
className="pl-7 pr-3 py-1 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-md text-xs focus:border-blue-400 focus:outline-none w-40"
placeholder="搜索模板..." />
</div>
</div> </div>
)} {filteredTemplates.length === 0 ? (
<div className="text-center py-4 text-xs dg-text-muted">无匹配模板</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
{filteredTemplates.map(tpl => (
<button key={tpl.id} onClick={() => handleApplyTemplate(tpl)}
className="dg-card text-left p-2.5 hover:bg-[var(--dg-bg-hover)] group"
title={tpl.description}>
<div className="flex items-center gap-2 mb-0.5">
<span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 font-medium">{tpl.category}</span>
<span className="text-sm font-medium group-hover:text-blue-400 transition-colors truncate">{tpl.name}</span>
</div>
<p className="text-xs dg-text-muted line-clamp-1">{tpl.description}</p>
</button>
))}
</div>
)}
</div>
</div> </div>
)} )}
{/* -- 编辑器 + 侧边栏 -- */} {/* -- 编辑器 + 侧边栏 (上半区，不随结果滚动) -- */}
<div className="flex gap-3 flex-1 min-h-0"> <div className="shrink-0 px-5 pb-2">
{/* Schema 侧边栏 */} <div className="flex gap-3">
{showSidebar && instanceId && ( {/* Schema 侧边栏 */}
<div className="w-[280px] shrink-0"> {showSidebar && instanceId && (
<SchemaSidebar instanceId={instanceId} database={database} dbType={dbType} <div className="w-[280px] shrink-0">
clusterMode={selectedInstance?.cluster_mode} <SchemaSidebar instanceId={instanceId} database={database} dbType={dbType}
onInsert={(text) => { clusterMode={selectedInstance?.cluster_mode}
const sep = dbType === 'redis' ? (sql.trim() ? '\n' : '') : (sql.trim() ? ' ' : ''); onInsert={(text) => {
setSql(prev => prev + sep + text + (dbType === 'redis' ? '' : ' ')); const sep = dbType === 'redis' ? (sql.trim() ? '\n' : '') : (sql.trim() ? ' ' : '');
}} setSql(prev => prev + sep + text + (dbType === 'redis' ? '' : ' '));
onDatabaseChange={setDatabase} }}
singleDb={!!database} /> onDatabaseChange={setDatabase}
</div> singleDb={!!database} />
)} </div>
)}
{/* SQL 编辑器 */} {/* SQL 编辑器 */}
<div className="flex-1 min-w-0 flex flex-col"> <div className="flex-1 min-w-0 flex flex-col">
<div className="dg-card overflow-hidden flex-1 flex flex-col"> <div className="dg-card overflow-hidden flex flex-col">
<SqlEditor value={sql} onChange={setSql} placeholder={placeholderMap[dbType]} <SqlEditor value={sql} onChange={setSql} placeholder={placeholderMap[dbType]}
language={editorLang} height="240px" onExecute={handleExecute} language={editorLang} height="200px" onExecute={handleExecute}
schema={(dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql') ? editorSchema : undefined} /> schema={(dbType === 'mysql' || dbType === 'postgres' || dbType === 'postgresql') ? editorSchema : undefined} />
<div className="flex items-center justify-between px-3 py-1.5 bg-[var(--dg-bg-tertiary)] border-t border-[var(--dg-border)] text-[11px] dg-text-muted"> <div className="flex items-center justify-between px-3 py-1.5 bg-[var(--dg-bg-tertiary)] border-t border-[var(--dg-border)] text-[11px] dg-text-muted">
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
{dbTypeIcon[dbType] && <img src={dbTypeIcon[dbType]} alt="" className="w-3 h-3 object-contain" />} {dbTypeIcon[dbType] && <img src={dbTypeIcon[dbType]} alt="" className="w-3 h-3 object-contain" />}
{dbTypeLabel[dbType]} 模式 · {sql.length} 字符 {dbTypeLabel[dbType]} 模式 · {sql.length} 字符
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="px-1.5 py-0.5 rounded bg-[var(--dg-bg-primary)] border border-[var(--dg-border)]">Ctrl+Enter 执行</span> <span className="px-1.5 py-0.5 rounded bg-[var(--dg-bg-primary)] border border-[var(--dg-border)]">Ctrl+Enter 执行</span>
<span className="px-1.5 py-0.5 rounded bg-[var(--dg-bg-primary)] border border-[var(--dg-border)]">Ctrl+Shift+F 格式化</span> <span className="px-1.5 py-0.5 rounded bg-[var(--dg-bg-primary)] border border-[var(--dg-border)]">Ctrl+Shift+F 格式化</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -464,41 +471,55 @@ export default function QueriesPage() {
{/* -- 错误提示 -- */} {/* -- 错误提示 -- */}
{error && ( {error && (
<div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400"> <div className="shrink-0 px-5 pb-2">
<AlertTriangle className="w-4 h-4 shrink-0" />{error} <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400">
<AlertTriangle className="w-4 h-4 shrink-0" />{error}
</div>
</div> </div>
)} )}
{/* -- 查询结果 -- */} {/* -- 查询结果 (下半区，独立滚动) -- */}
{result && ( {result && (
<div className="dg-card overflow-hidden"> <div className="flex-1 min-h-0 px-5 pb-4 overflow-hidden flex flex-col">
<div className="border-b border-[var(--dg-border)] py-2.5 px-4"> <div className="dg-card overflow-hidden flex-1 flex flex-col">
<div className="flex items-center justify-between flex-wrap gap-2"> {/* 结果标题栏 + 折叠按钮 */}
<span className="text-sm font-semibold flex items-center gap-2"> <div
<CheckCircle className="w-4 h-4 text-green-400" /> className="shrink-0 border-b border-[var(--dg-border)] py-2 px-4 cursor-pointer hover:bg-[var(--dg-bg-hover)] transition-colors"
查询结果 onClick={() => setShowResult(!showResult)}
</span> >
<div className="flex items-center gap-3 text-xs dg-text-secondary"> <div className="flex items-center justify-between flex-wrap gap-2">
<span className="flex items-center gap-1"><Clock className="w-3 h-3" />{result.execution_time_ms || result.cost_ms || 0}ms</span> <span className="text-sm font-semibold flex items-center gap-2">
{result.raw_text !== undefined ? ( <CheckCircle className="w-4 h-4 text-green-400" />
<span>{result.raw_value ? 'JSON' : 'String'}</span> 查询结果
) : ( {showResult
<> ? <ChevronDown className="w-3.5 h-3.5 text-[var(--dg-text-muted)]" />
<span>{result.total || result.rows?.length || 0} 总行</span> : <ChevronRight className="w-3.5 h-3.5 text-[var(--dg-text-muted)]" />
<span>{result.rows?.length || 0} 行/页</span> }
<span>{result.columns?.length || 0} 列</span> </span>
</> <div className="flex items-center gap-3 text-xs dg-text-secondary">
)} <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{result.execution_time_ms || result.cost_ms || 0}ms</span>
{result.rows?.length > 0 && ( {result.raw_text !== undefined ? (
<button onClick={handleExportResult} <span>{result.raw_value ? 'JSON' : 'String'}</span>
className="dg-btn dg-btn-ghost dg-btn-sm"> ) : (
<Download className="w-3 h-3" />导出 CSV <>
</button> <span>{result.total || result.rows?.length || 0} 总行</span>
)} <span>{result.rows?.length || 0} 行/页</span>
<span>{result.columns?.length || 0} 列</span>
</>
)}
{result.rows?.length > 0 && (
<button onClick={(e) => { e.stopPropagation(); handleExportResult(); }}
className="dg-btn dg-btn-ghost dg-btn-sm">
<Download className="w-3 h-3" />导出 CSV
</button>
)}
</div>
</div> </div>
</div> </div>
</div>
<div className="p-0"> {/* 结果内容（可折叠） */}
{showResult && (
<div className="flex-1 min-h-0 overflow-auto p-0">
{result.raw_text !== undefined ? ( {result.raw_text !== undefined ? (
/* Raw value display (Redis GET/HGET/TTL etc.) */ /* Raw value display (Redis GET/HGET/TTL etc.) */
<div className="p-4"> <div className="p-4">
@@ -517,7 +538,7 @@ export default function QueriesPage() {
</div> </div>
</div> </div>
) : result.columns && result.columns.length > 0 ? ( ) : result.columns && result.columns.length > 0 ? (
<div ref={resultContainerRef} onScroll={handleResultScroll} className="overflow-auto max-h-[500px]"> <div ref={resultContainerRef} onScroll={handleResultScroll} className="overflow-auto">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="sticky top-0 z-10"> <thead className="sticky top-0 z-10">
<tr className="dg-table-header"> <tr className="dg-table-header">
@@ -601,14 +622,18 @@ export default function QueriesPage() {
{result.affected_rows > 0 && <span className="text-xs">影响行数: {result.affected_rows}</span>} {result.affected_rows > 0 && <span className="text-xs">影响行数: {result.affected_rows}</span>}
</div> </div>
)} )}
</div>
)}
</div> </div>
</div> </div>
)} )}
{/* -- 安全提示 -- */} {/* -- 安全提示 -- */}
<div className="flex items-center gap-2 px-3 py-2 bg-yellow-500/5 border border-yellow-500/15 rounded-lg text-xs text-[var(--dg-text-muted)]"> <div className="shrink-0 px-5 pb-3">
<AlertTriangle className="w-3.5 h-3.5 text-yellow-400 shrink-0" /> <div className="flex items-center gap-2 px-3 py-2 bg-yellow-500/5 border border-yellow-500/15 rounded-lg text-xs text-[var(--dg-text-muted)]">
查询结果中的敏感字段将自动脱敏。MySQL/PG 仅支持 SELECT 查询，Redis/MongoDB 支持只读命令。 <AlertTriangle className="w-3.5 h-3.5 text-yellow-400 shrink-0" />
查询结果中的敏感字段将自动脱敏。MySQL/PG 仅支持 SELECT 查询，Redis/MongoDB 支持只读命令。
</div>
</div> </div>
</div> </div>