diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 5679f67..d6100da 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,4 +1,5 @@ import Modal from './common/ResizableDraggableModal'; +import SidebarConnectionRail from './sidebar/SidebarConnectionRail'; import { V2_RAIL_UNGROUPED_CONNECTION_GROUP_ID, formatSidebarRowCount, @@ -9162,104 +9163,38 @@ const Sidebar: React.FC<{ const v2CommandSearchLabel = t('sidebar.command_search.label'); const v2CommandSearchPlaceholder = t('sidebar.command_search.placeholder'); - const renderV2ConnectionRail = () => ( -
-
- - - - - - - - - - - - - - - - - -
-
- - - - - - - - - -
-
- ); + // V2 Connection Rail 子组件 props(从原 renderV2ConnectionRail 抽出,保留所有原行为) + const v2ConnectionRailProps = { + labels: { + railSystemActions: v2RailSystemActionsLabel, + railObjectActions: v2RailObjectActionsLabel, + newGroup: v2NewGroupLabel, + batchTables: v2BatchTablesLabel, + batchDatabases: v2BatchDatabasesLabel, + openExternalSqlFile: v2OpenExternalSqlFileLabel, + locateCurrentTable: v2LocateCurrentTableLabel, + locateCurrentTableUnavailable: v2LocateCurrentTableUnavailableLabel, + aiAssistant: v2AiAssistantLabel, + tools: v2ToolsLabel, + settings: v2SettingsLabel, + }, + handlers: { + openCreateTagModal: () => { setRenameViewTarget(null); createTagForm.resetFields(); setIsCreateTagModalOpen(true); }, + openBatchTableExport: () => openBatchTableExportWorkbench(), + openBatchDatabaseExport: () => openBatchDatabaseExportWorkbench(), + openExternalSqlFile: handleOpenSQLFileFromToolbar, + locateActiveTab: handleLocateActiveTabInSidebar, + toggleAI: onToggleAI ?? (() => {}), + openTools: onOpenTools ?? (() => {}), + openSettings: onOpenSettings ?? (() => {}), + }, + canLocateActiveTab, + }; return (
{exportProgressModal} - {isV2Ui && renderV2ConnectionRail()} + {isV2Ui && }
{isV2Ui && (
diff --git a/frontend/src/components/sidebar/SidebarConnectionRail.tsx b/frontend/src/components/sidebar/SidebarConnectionRail.tsx new file mode 100644 index 0000000..12ed98d --- /dev/null +++ b/frontend/src/components/sidebar/SidebarConnectionRail.tsx @@ -0,0 +1,144 @@ +import React from 'react'; +import { Tooltip, Form } from 'antd'; +import { + FolderOpenOutlined, + TableOutlined, + DatabaseOutlined, + FileAddOutlined, + AimOutlined, + RobotOutlined, + ToolOutlined, + SettingOutlined, +} from '@ant-design/icons'; + +// V2 Connection Rail 子组件(从 Sidebar.tsx 抽取)。 +// +// 注意:本组件是 Sidebar.tsx 拆分的一部分,依赖大量主组件的 label/state/handler。 +// 通过聚合 props 对象传递,避免 18+ 个独立 props 的 drilling 噪音。 +// 后续状态管理重构(PR-A)会把 labels/handlers 迁到 useSidebarUIState hook。 +// +// 设计取舍:用 labels + handlers 聚合对象 + FormInstance,换取 Sidebar.tsx 减少 ~100 行。 +// 主组件 props drilling 复杂度可控(只有一处调用点)。 + +export interface SidebarConnectionRailProps { + labels: { + railSystemActions: string; + railObjectActions: string; + newGroup: string; + batchTables: string; + batchDatabases: string; + openExternalSqlFile: string; + locateCurrentTable: string; + locateCurrentTableUnavailable: string; + aiAssistant: string; + tools: string; + settings: string; + }; + handlers: { + openCreateTagModal: () => void; + openBatchTableExport: () => void; + openBatchDatabaseExport: () => void; + openExternalSqlFile: () => void; + locateActiveTab: () => void; + toggleAI: () => void; + openTools: () => void; + openSettings: () => void; + }; + canLocateActiveTab: boolean; +} + +const SidebarConnectionRail: React.FC = ({ labels, handlers, canLocateActiveTab }) => ( +
+
+ + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+
+); + +export default SidebarConnectionRail;