feat(explain-ui): 新增慢 SQL 历史面板与 Ctrl+Shift+H 快捷键

- 面板组件:SlowQueryPanel 含 TopN 列表 + 耗时/扫描行数/时间三种排序 + 清空操作
- 入口接入:QueryEditor 加 Ctrl+Shift+H 快捷键,点击条目回填 SQL 到编辑器
- Wails 绑定:手动同步 GetSlowQueries 与 ClearSlowQueries 到 App.js/App.d.ts
- 颜色提示:耗时 >5s 红色、>1s 橙色,便于一眼识别重查询
This commit is contained in:
Syngnat
2026-06-19 13:23:02 +08:00
parent a74065bdbb
commit 577a417292
4 changed files with 257 additions and 1 deletions

View File

@@ -33,6 +33,8 @@ import { SIDEBAR_SQL_EDITOR_DRAG_MIME, decodeSidebarSqlEditorDragPayload, hasSid
import { resolveUniqueKeyGroupsFromIndexes } from './dataGridCopyInsert';
// SQL 诊断工作台lazy 加载避免 reactflow/dagre 进入主 bundle约 130KB gzipped 独立 chunk
const ExplainWorkbench = lazy(() => import('./explain/ExplainWorkbench'));
// 慢 SQL 历史面板lazy 加载
const SlowQueryPanel = lazy(() => import('./explain/SlowQueryPanel'));
import { SUPPORTED_LANGUAGES, t as translate } from '../i18n';
import {
DUCKDB_ROWID_LOCATOR_COLUMN,
@@ -2211,6 +2213,8 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
// SQL 诊断工作台Ctrl+Shift+D 触发Mac 为 Cmd+Shift+D
const [explainOpen, setExplainOpen] = useState(false);
// 慢 SQL 历史Ctrl+Shift+H 触发
const [slowQueryOpen, setSlowQueryOpen] = useState(false);
// Database Selection
const [currentConnectionId, setCurrentConnectionId] = useState<string>(tab.connectionId);
@@ -2274,9 +2278,14 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
useEffect(() => {
if (!isActive) return;
const handler = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'D' || e.key === 'd')) {
if (!(e.ctrlKey || e.metaKey) || !e.shiftKey) return;
const key = e.key.toLowerCase();
if (key === 'd') {
e.preventDefault();
setExplainOpen(true);
} else if (key === 'h') {
e.preventDefault();
setSlowQueryOpen(true);
}
};
window.addEventListener('keydown', handler);
@@ -6157,6 +6166,19 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
/>
)}
</Suspense>
{/* 慢 SQL 历史Ctrl+Shift+H 触发 */}
<Suspense fallback={null}>
{slowQueryOpen && explainConfig && (
<SlowQueryPanel
open={slowQueryOpen}
onClose={() => setSlowQueryOpen(false)}
config={explainConfig}
dbName={currentDb}
onPickQuery={(sql) => setQuery(sql)}
/>
)}
</Suspense>
</div>
);
};