mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-06-25 07:53:44 +08:00
c8c8497a2f
- 新增 SQL 分析工作台，统一承载慢 SQL 和 SQL 诊断视图 - 将 SQL 执行日志收进结果区首个日志标签并在失败时展示错误摘要 - 调整侧边栏入口、标签展示、多语言文案与定向前端测试覆盖
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import { useMemo } from 'react'
|
||
import { Tooltip } from 'antd'
|
||
import { HistoryOutlined } from '@ant-design/icons'
|
||
import { useStore } from '../../store'
|
||
import { buildSqlAnalysisWorkbenchTab } from '../../utils/sqlAnalysisTab'
|
||
|
||
// Sidebar 底部的慢 SQL 工作台入口。
|
||
//
|
||
// 设计要点：
|
||
// - 完全独立组件，不依赖 Sidebar.tsx 内部 state（避免改 Sidebar Props）
|
||
// - 自己从 store 读取 tabs/connections，定位当前激活 tab 的连接上下文
|
||
// - 点击后打开/聚焦 SQL 分析工作台，并默认切到慢 SQL 视图
|
||
// - 没有激活的连接时按钮禁用，hover 给提示
|
||
//
|
||
// 挂载位置：由调用方决定；当前用于 Sidebar 底部 footer。
|
||
|
||
interface SlowQueryRailButtonProps {
|
||
/** 自定义 className 用于外层定位 */
|
||
className?: string
|
||
/** 自定义 style（用于绝对定位到 Sidebar 角落） */
|
||
style?: React.CSSProperties
|
||
/** tooltip 位置 */
|
||
tooltipPlacement?:
|
||
| 'top'
|
||
| 'right'
|
||
| 'bottom'
|
||
| 'left'
|
||
| 'topLeft'
|
||
| 'topRight'
|
||
| 'bottomLeft'
|
||
| 'bottomRight'
|
||
| 'leftTop'
|
||
| 'leftBottom'
|
||
| 'rightTop'
|
||
| 'rightBottom'
|
||
}
|
||
|
||
export default function SlowQueryRailButton({
|
||
className,
|
||
style,
|
||
tooltipPlacement = 'right',
|
||
}: SlowQueryRailButtonProps) {
|
||
const tabs = useStore(s => s.tabs)
|
||
const activeTabId = useStore(s => s.activeTabId)
|
||
const connections = useStore(s => s.connections)
|
||
const addTab = useStore(s => s.addTab)
|
||
|
||
const activeTab = useMemo(
|
||
() => tabs.find(t => t.id === activeTabId) || null,
|
||
[activeTabId, tabs],
|
||
)
|
||
const hasActiveConnection = useMemo(
|
||
() =>
|
||
Boolean(
|
||
activeTab?.connectionId &&
|
||
connections.some(connection => connection.id === activeTab.connectionId),
|
||
),
|
||
[activeTab, connections],
|
||
)
|
||
|
||
const buttonDisabled = !hasActiveConnection
|
||
const tooltipText = buttonDisabled
|
||
? '请先打开一个数据库连接的标签页'
|
||
: '打开当前连接的 SQL 分析工作台'
|
||
|
||
return (
|
||
<Tooltip title={tooltipText} placement={tooltipPlacement}>
|
||
<button
|
||
type="button"
|
||
className={className}
|
||
onClick={() => {
|
||
if (buttonDisabled || !activeTab?.connectionId) {
|
||
return
|
||
}
|
||
addTab(buildSqlAnalysisWorkbenchTab({
|
||
connectionId: activeTab.connectionId,
|
||
dbName: activeTab.dbName,
|
||
view: 'slow-query',
|
||
}))
|
||
}}
|
||
disabled={buttonDisabled}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: 32,
|
||
height: 32,
|
||
border: 'none',
|
||
background: 'transparent',
|
||
cursor: buttonDisabled ? 'not-allowed' : 'pointer',
|
||
color: buttonDisabled
|
||
? 'var(--gn-text-muted, #adb5bd)'
|
||
: 'var(--gn-text, #495057)',
|
||
opacity: buttonDisabled ? 0.5 : 1,
|
||
transition: 'opacity 0.15s, color 0.15s',
|
||
...style,
|
||
}}
|
||
aria-label="慢 SQL 工作台"
|
||
>
|
||
<HistoryOutlined style={{ fontSize: 16 }} />
|
||
</button>
|
||
</Tooltip>
|
||
)
|
||
}
|