0 && (
-
+
{sorted.map((r, idx) => (
handlePick(r)} />
))}
)}
+
+ }
+ destroyOnClose
+ >
+
+ {
+ onPickQuery?.(sql)
+ onClose()
+ }}
+ />
+
)
}
diff --git a/frontend/src/components/explain/SqlAnalysisWorkbench.tsx b/frontend/src/components/explain/SqlAnalysisWorkbench.tsx
new file mode 100644
index 0000000..c59ce43
--- /dev/null
+++ b/frontend/src/components/explain/SqlAnalysisWorkbench.tsx
@@ -0,0 +1,255 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Alert, Button, Input, Segmented, Typography, message } from 'antd'
+import { HistoryOutlined, SearchOutlined } from '@ant-design/icons'
+import { useStore } from '../../store'
+import type { ConnectionConfig, TabData } from '../../types'
+import { ExplainReportView } from './ExplainWorkbench'
+import { SlowQueryPanelContent } from './SlowQueryPanel'
+
+const { Title, Text } = Typography
+
+type SqlAnalysisViewKey = 'diagnose' | 'slow-query'
+
+const resolveRequestedView = (tab: TabData): SqlAnalysisViewKey =>
+ tab.sqlAnalysisView === 'slow-query' ? 'slow-query' : 'diagnose'
+
+const normalizeConnectionConfig = (connection: any): ConnectionConfig => ({
+ ...connection.config,
+ port: Number(connection.config.port),
+ password: connection.config.password || '',
+ database: connection.config.database || '',
+ useSSH: connection.config.useSSH || false,
+ ssh: connection.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
+})
+
+export default function SqlAnalysisWorkbench({ tab }: { tab: TabData }) {
+ const connections = useStore((state) => state.connections)
+ const connection = useMemo(
+ () => connections.find((item) => item.id === tab.connectionId) || null,
+ [connections, tab.connectionId],
+ )
+ const connectionConfig = useMemo(
+ () => (connection ? normalizeConnectionConfig(connection) : null),
+ [connection],
+ )
+ const dbName = String(tab.dbName || '').trim()
+ const [activeView, setActiveView] = useState
(() => resolveRequestedView(tab))
+ const [sqlDraft, setSqlDraft] = useState(() => String(tab.query || ''))
+ const [diagnoseRunKey, setDiagnoseRunKey] = useState(0)
+
+ useEffect(() => {
+ const nextView = resolveRequestedView(tab)
+ const nextSql = String(tab.query || '')
+ setActiveView(nextView)
+ if (nextSql) {
+ setSqlDraft(nextSql)
+ }
+ if (nextView === 'diagnose' && nextSql.trim()) {
+ setDiagnoseRunKey((previous) => previous + 1)
+ }
+ }, [tab.query, tab.sqlAnalysisRequestKey, tab.sqlAnalysisView])
+
+ const triggerDiagnose = useCallback(() => {
+ if (!sqlDraft.trim()) {
+ message.warning('请输入要诊断的 SQL')
+ return
+ }
+ setActiveView('diagnose')
+ setDiagnoseRunKey((previous) => previous + 1)
+ }, [sqlDraft])
+
+ const handlePickSlowQuery = useCallback((sql: string) => {
+ const nextSql = String(sql || '')
+ if (!nextSql.trim()) {
+ return
+ }
+ setSqlDraft(nextSql)
+ setActiveView('diagnose')
+ setDiagnoseRunKey((previous) => previous + 1)
+ }, [])
+
+ const slowQueryLoadKey = useMemo(
+ () =>
+ activeView === 'slow-query' && connectionConfig
+ ? `${tab.sqlAnalysisRequestKey || 'slow-query'}:${tab.connectionId}:${dbName}`
+ : null,
+ [activeView, connectionConfig, dbName, tab.connectionId, tab.sqlAnalysisRequestKey],
+ )
+
+ if (!connectionConfig) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+
+
+
+ SQL 分析工作台
+
+
+ {connection?.name || tab.connectionId}
+ {dbName ? ` / ${dbName}` : ''}
+
+
+
setActiveView(value as SqlAnalysisViewKey)}
+ className="gn-sql-analysis-view-switcher"
+ options={[
+ {
+ value: 'slow-query',
+ label: (
+
+
+ 慢 SQL
+
+ ),
+ },
+ {
+ value: 'diagnose',
+ label: (
+
+
+ SQL 诊断
+
+ ),
+ },
+ ]}
+ />
+
+
+
+ {activeView === 'slow-query' ? (
+
+
+
+ ) : (
+
+
+
setSqlDraft(event.target.value)}
+ placeholder="输入要诊断的 SQL，或从慢 SQL 列表点击条目带入"
+ autoSize={{ minRows: 5, maxRows: 10 }}
+ />
+
+ 支持从慢 SQL 列表点击条目直接带入
+ } onClick={triggerDiagnose}>
+ 运行诊断
+
+
+
+
+ 0 ? diagnoseRunKey : null}
+ />
+
+
+ )}
+
+