diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f5b9cc5f..e212312b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import { Layout, Button, ConfigProvider, theme, message, Spin, Slider, Progress,
import { PlusOutlined, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, GlobalOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined, LinkOutlined, BgColorsOutlined, AppstoreOutlined, RobotOutlined, FolderOpenOutlined, HddOutlined, SafetyCertificateOutlined, SwitcherOutlined, CodeOutlined, RightOutlined } from '@ant-design/icons';
import { BrowserOpenURL, Environment, EventsOn, Quit, WindowFullscreen, WindowGetPosition, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowIsMinimised, WindowIsNormal, WindowMaximise, WindowMinimise, WindowSetPosition, WindowSetSize, WindowUnfullscreen, WindowUnmaximise } from '../wailsjs/runtime';
import Sidebar from './components/Sidebar';
+import SlowQueryRailButton from './components/sidebar/SlowQueryRailButton';
import TabManager from './components/TabManager';
import ConnectionModal from './components/ConnectionModal';
import SnippetSettingsModal from './components/SnippetSettingsModal';
@@ -3692,6 +3693,18 @@ function App() {
onFocusCommandSearch={handleFocusSidebarSearch}
/>
+ {/* 慢 SQL 历史入口:浮动在 Sidebar 右下角,独立组件不依赖 Sidebar 内部 state */}
+
{!connectionWorkbenchState.ready && (
import('../explain/SlowQueryPanel'))
+
+// Sidebar 顶部的慢 SQL 历史入口。
+//
+// 设计要点:
+// - 完全独立组件,不依赖 Sidebar.tsx 内部 state(避免改 Sidebar Props)
+// - 自己从 store 读取 tabs/connections,解析当前激活 tab 的连接配置
+// - 通过 lazy import SlowQueryPanel(react-flow/dagre 不进入主 bundle)
+// - 没有激活的连接时按钮禁用,hover 给提示
+//
+// 挂载位置:由调用方决定(App.tsx 把它放在 Sidebar 容器内)
+
+interface SlowQueryRailButtonProps {
+ /** 自定义 className 用于外层定位 */
+ className?: string
+ /** 自定义 style(用于绝对定位到 Sidebar 角落) */
+ style?: React.CSSProperties
+}
+
+export default function SlowQueryRailButton({ className, style }: SlowQueryRailButtonProps) {
+ const [open, setOpen] = useState(false)
+ const tabs = useStore(s => s.tabs)
+ const activeTabId = useStore(s => s.activeTabId)
+ const connections = useStore(s => s.connections)
+
+ // 解析当前激活 tab 的 ConnectionConfig
+ const activeConfig = useMemo(() => {
+ if (!activeTabId) return null
+ const tab = tabs.find(t => t.id === activeTabId)
+ if (!tab?.connectionId) return null
+ const conn = connections.find(c => c.id === tab.connectionId)
+ if (!conn) return null
+ return {
+ ...conn.config,
+ port: Number(conn.config.port),
+ password: conn.config.password || '',
+ database: conn.config.database || '',
+ useSSH: conn.config.useSSH || false,
+ ssh: conn.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
+ } as ConnectionConfig
+ }, [tabs, activeTabId, connections])
+
+ const activeTab = tabs.find(t => t.id === activeTabId)
+ const dbName = activeTab?.dbName || ''
+
+ const buttonDisabled = !activeConfig
+ const tooltipText = buttonDisabled
+ ? '请先打开一个数据库连接的查询标签'
+ : '查看当前连接的慢 SQL 历史(Ctrl+Shift+L)'
+
+ return (
+ <>
+
+
+
+
+ {open && activeConfig && (
+
+ setOpen(false)}
+ config={activeConfig}
+ dbName={dbName}
+ />
+
+ )}
+ >
+ )
+}