[] = nodes.map((node) => {
+ const pos = g.node(node.id)
+ return {
+ id: node.id,
+ type: 'explain',
+ position: { x: pos?.x ?? 0, y: pos?.y ?? 0 },
+ data: { node, isSelected: node.id === selectedNodeId },
+ targetPosition: Position.Top,
+ sourcePosition: Position.Bottom,
+ draggable: false,
+ }
+ })
+
+ const rfEdges: Edge[] = edges.map((edge, idx) => ({
+ id: `e-${edge.from}-${edge.to}-${idx}`,
+ source: edge.from,
+ target: edge.to,
+ label: edge.label,
+ type: 'smoothstep',
+ style: { stroke: 'var(--gn-explain-edge, #adb5bd)', strokeWidth: 1.5 },
+ }))
+
+ return { rfNodes, rfEdges }
+}
+
+import { memo } from 'react'
+
+const ExplainGraphNodeRenderer = memo(function ExplainGraphNodeRenderer({
+ data,
+}: {
+ data: ExplainGraphNodeData
+}) {
+ const { node, isSelected } = data
+ const color = opTypeColor(node.opType)
+ const hasFullScan = node.flags?.includes('FULL_SCAN')
+ const hasFilesort = node.flags?.includes('FILESORT')
+ const hasTempTable = node.flags?.includes('TEMP_TABLE')
+
+ return (
+
+
{node.opDetail || node.opType}
+ {node.table && (
+
+ 表：
+ {node.table}
+
+ )}
+ {node.index && (
+
+ 索引：
+ {node.index}
+
+ )}
+
+ {node.estRows !== undefined && node.estRows > 0 && (
+
+ 估算 {formatNumber(node.estRows)}
+
+ )}
+ {node.actualRows !== undefined && node.actualRows > 0 && (
+
+ 实际 {formatNumber(node.actualRows)}
+
+ )}
+ {node.cost !== undefined && node.cost > 0 && (
+
+ 成本 {node.cost.toFixed(1)}
+
+ )}
+
+ {(hasFullScan || hasFilesort || hasTempTable) && (
+
+ {hasFullScan && }
+ {hasFilesort && }
+ {hasTempTable && }
+
+ )}
+
+
+ {selectedNode && }
+
+
+ )
+}
+
+function ExplainStatsBar({
+ stats,
+ warnings,
+}: {
+ stats: ExplainStats
+ warnings?: string[]
+}) {
+ const statsList = [
+ { label: '总成本', value: stats.totalCost ? stats.totalCost.toFixed(1) : '-' },
+ { label: '总耗时', value: formatMs(stats.totalDurationMs) },
+ { label: '扫描行数', value: formatNumber(stats.rowsRead) },
+ { label: '缓冲命中', value: formatPercent(stats.bufferHitRate) },
+ { label: '最大单节点行数', value: formatNumber(stats.maxEstRows) },
+ ]
+ return (
+
+
执行统计
+
+ {statsList.map((s) => (
+
+ {s.label}
+ {s.value}
+
+ ))}
+
+ {stats.hasFullScan &&
}
+ {stats.hasFilesort &&
}
+ {stats.hasTempTable &&
}
+ {warnings && warnings.length > 0 && (
+
+ {warnings.map((w, i) => (
+
⚠ {w}
+ ))}
+
+ )}
+
+
+ {text}
+
+ )
+}
+
+function ExplainNodeDetail({ node }: { node: ExplainNode }) {
+ const rows: Array<[string, string]> = []
+ rows.push(['操作类型', node.opType])
+ if (node.opDetail) rows.push(['操作详情', node.opDetail])
+ if (node.table) rows.push(['表', node.table])
+ if (node.index) rows.push(['索引', node.index])
+ if (node.estRows) rows.push(['估算行数', formatNumber(node.estRows)])
+ if (node.actualRows) rows.push(['实际行数', formatNumber(node.actualRows)])
+ if (node.loops) rows.push(['循环次数', formatNumber(node.loops)])
+ if (node.cost) rows.push(['成本', node.cost.toFixed(2)])
+ if (node.durationMs) rows.push(['耗时', formatMs(node.durationMs)])
+ if (node.bufferHit !== undefined && node.bufferHit > 0)
+ rows.push(['缓冲命中', formatPercent(node.bufferHit)])
+ if (node.flags && node.flags.length > 0) rows.push(['标志', node.flags.join(', ')])
+
+ return (
+
+
节点详情
+
+ {rows.map(([label, value]) => (
+
+ {label}
+ {value}
+
+ ))}
+
+ {node.extra && Object.keys(node.extra).length > 0 && (
+
+
+ Extra 字段（{Object.keys(node.extra).length}）
+
+
+ {JSON.stringify(node.extra, null, 2)}
+
+
+ )}
+
+
+ 索引建议（{suggestions.length}）
+
+ {suggestions.length === 0 ? (
+
+ 未发现明显性能问题
+
+ ) : (
+
+ {suggestions.map((s, idx) => (
+
+ ))}
+
+ )}
+
onSelect?.(suggestion)}
+ style={{
+ borderLeft: `3px solid ${color}`,
+ padding: '6px 8px',
+ background: 'var(--gn-suggestion-bg, #ffffff)',
+ cursor: onSelect ? 'pointer' : 'default',
+ fontSize: 12,
+ }}
+ >
+
+
+ {suggestion.severity}
+
+ {suggestion.estRows !== undefined && suggestion.estRows > 0 && (
+
+ {formatNumber(suggestion.estRows)} 行
+
+ )}
+
+
{suggestion.reason}
+ {suggestion.suggestedIndex && (
+
+ {suggestion.suggestedIndex}
+
+ )}
+ {suggestion.affectedTable && (
+
+ 表：{suggestion.affectedTable}
+
+ )}
+
+ {loading && (
+
+
+
+ )}
+ {error && (
+
+ 诊断失败：
+ {error}
+
+ )}
+ {!loading && !error && report && (
+
+
+
+
+
+
+
+
+ {report.plan.rawPayload || '(无原文)'}
+
+ ),
+ },
+ ]}
+ />
+ )}
+
+
+ )
+}
diff --git a/frontend/src/utils/explainTypes.ts b/frontend/src/utils/explainTypes.ts
new file mode 100644
index 0000000..96510aa
--- /dev/null
+++ b/frontend/src/utils/explainTypes.ts
@@ -0,0 +1,172 @@
+// SQL 诊断工作台前端类型定义。
+//
+// 本文件镜像后端 internal/connection/explain.go 的数据结构。
+// 当 Wails 重新生成 models.ts 后，可逐步迁移到 import { connection } from '../wailsjs/go/models'，
+// 但在过渡期保持独立类型便于前端独立开发。
+
+// 节点操作类型（与后端 ExplainOp* 常量对齐）。
+export type ExplainOpType =
+ | 'SCAN' // 全表扫描
+ | 'INDEX_SCAN' // 索引扫描
+ | 'INDEX_ONLY' // 覆盖索引
+ | 'JOIN'
+ | 'AGGREGATE'
+ | 'SORT'
+ | 'LIMIT'
+ | 'FILTER'
+ | 'SUBQUERY'
+ | 'UNION'
+ | 'WINDOW'
+ | 'MATERIALIZE'
+ | 'INSERT'
+ | 'UPDATE'
+ | 'DELETE'
+ | 'OTHER'
+
+// 节点警告标志（用于 UI 高亮 + 规则匹配）。
+export type ExplainNodeFlag =
+ | 'FULL_SCAN'
+ | 'FILESORT'
+ | 'TEMP_TABLE'
+ | 'NO_INDEX'
+ | 'HIGH_COST'
+ | 'LOW_BUFFER_HIT'
+ | 'UNCERTAIN_ROWS'
+
+// EXPLAIN 原文格式。
+export type ExplainFormat = 'json' | 'table' | 'xml' | 'text'
+
+// 建议严重度。
+export type IndexSuggestionSeverity = 'critical' | 'warning' | 'info'
+
+export interface ExplainNode {
+ id: string
+ parentId?: string
+ opType: ExplainOpType | string
+ opDetail?: string
+ table?: string
+ index?: string
+ estRows?: number
+ actualRows?: number
+ loops?: number
+ cost?: number
+ durationMs?: number
+ bufferHit?: number
+ flags?: ExplainNodeFlag[] | string[]
+ extra?: Record
+}
+
+export interface ExplainEdge {
+ from: string
+ to: string
+ label?: string
+}
+
+export interface ExplainStats {
+ totalCost?: number
+ totalDurationMs?: number
+ rowsRead?: number
+ bufferHitRate?: number
+ hasFullScan: boolean
+ hasFilesort: boolean
+ hasTempTable: boolean
+ maxEstRows?: number
+}
+
+export interface ExplainResult {
+ dbType: string
+ sourceSql: string
+ nodes: ExplainNode[]
+ edges?: ExplainEdge[]
+ stats: ExplainStats
+ warnings?: string[]
+ rawFormat: ExplainFormat | string
+ rawPayload?: string
+}
+
+export interface IndexSuggestion {
+ severity: IndexSuggestionSeverity | string
+ rule: string
+ reason: string
+ suggestedIndex?: string
+ affectedNodeId?: string
+ affectedTable?: string
+ estRows?: number
+}
+
+export interface DiagnoseReport {
+ plan: ExplainResult
+ suggestions: IndexSuggestion[]
+}
+
+// severityRank 用于 UI 排序：critical 最前。
+export const severityRank: Record = {
+ critical: 0,
+ warning: 1,
+ info: 2,
+}
+
+// opTypeTheme 按 OpType 返回主题色 token（对应 v2-theme.css 的 CSS 变量）。
+// 颜色规则：SCAN 红橙（警告）、JOIN 蓝、AGGREGATE 紫、SORT 黄、其他灰。
+export function opTypeColor(opType: string): string {
+ switch (opType) {
+ case 'SCAN':
+ return 'var(--gn-explain-scan, #e8590c)'
+ case 'INDEX_SCAN':
+ return 'var(--gn-explain-index-scan, #1971c2)'
+ case 'INDEX_ONLY':
+ return 'var(--gn-explain-index-only, #2f9e44)'
+ case 'JOIN':
+ return 'var(--gn-explain-join, #1971c2)'
+ case 'AGGREGATE':
+ return 'var(--gn-explain-aggregate, #6741d9)'
+ case 'SORT':
+ return 'var(--gn-explain-sort, #f08c00)'
+ case 'LIMIT':
+ return 'var(--gn-explain-limit, #495057)'
+ case 'FILTER':
+ return 'var(--gn-explain-filter, #495057)'
+ case 'SUBQUERY':
+ return 'var(--gn-explain-subquery, #7048e8)'
+ case 'MATERIALIZE':
+ return 'var(--gn-explain-materialize, #e8590c)'
+ default:
+ return 'var(--gn-explain-other, #868e96)'
+ }
+}
+
+// severityColor 用于建议列表的左侧色条。
+export function severityColor(severity: string): string {
+ switch (severity) {
+ case 'critical':
+ return 'var(--gn-explain-critical, #fa5252)'
+ case 'warning':
+ return 'var(--gn-explain-warning, #f08c00)'
+ case 'info':
+ return 'var(--gn-explain-info, #1c7ed6)'
+ default:
+ return 'var(--gn-explain-other, #868e96)'
+ }
+}
+
+// formatNumber 容错格式化大数字（千分位）。
+export function formatNumber(n?: number): string {
+ if (n === undefined || n === null || isNaN(n)) return '-'
+ if (Math.abs(n) >= 10000) {
+ return new Intl.NumberFormat('en-US').format(n)
+ }
+ return String(n)
+}
+
+// formatPercent 把 0-1 的小数格式化为百分比字符串。
+export function formatPercent(ratio?: number): string {
+ if (ratio === undefined || ratio === null || isNaN(ratio)) return '-'
+ return `${(ratio * 100).toFixed(1)}%`
+}
+
+// formatMs 把毫秒格式化为人类可读（>1s 显示秒）。
+export function formatMs(ms?: number): string {
+ if (ms === undefined || ms === null || isNaN(ms)) return '-'
+ if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`
+ return `${ms.toFixed(1)}ms`
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index db1c836..b9bda7d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -28,5 +28,17 @@ export default defineConfig({
build: {
outDir: 'dist', // Standard Wails output directory
emptyOutDir: true,
+ rollupOptions: {
+ output: {
+ // 拆分大体积三方依赖到独立 chunk，避免主 bundle 过大
+ // reactflow + dagre 约 130KB gzipped，单独成 chunk 可按需加载
+ // recharts 用于诊断面板统计条，与执行计划图无强依赖，单独 chunk
+ manualChunks: {
+ reactflow: ['reactflow'],
+ dagre: ['dagre'],
+ charts: ['recharts'],
+ },
+ },
+ },
}
})