From 6d533167da1b7540f20e7a5866321c534cd82202 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Thu, 2 Apr 2026 10:11:33 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(sidebar/table-overview):=20?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8D=B1=E9=99=A9=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E4=BA=8C=E7=BA=A7=E5=88=86=E7=B1=BB=E9=98=B2=E8=AF=AF?= =?UTF-8?q?=E8=A7=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 菜单增强：为数据库、表、视图、函数等底层对象节点新增「危险操作」二级子菜单 - 误触防护：将明确破坏性的「删除表」、「删除数据库」等入口移至更深层级进行视觉隔离 - UI 交互：引入 WarningOutlined 图标单独高亮标识风险区域 - 统一作用域：同步变更至侧边栏连接树 (Sidebar) 和表数据概览 (TableOverview) 的上下文菜单 --- frontend/src/components/Sidebar.tsx | 71 ++++++++++++++++------- frontend/src/components/TableOverview.tsx | 10 +++- 2 files changed, 57 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index b50d09f..08d27aa 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -31,7 +31,8 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge, TagOutlined, CheckOutlined, FilterOutlined, - DashboardOutlined + DashboardOutlined, + WarningOutlined } from '@ant-design/icons'; import { useStore } from '../store'; import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme'; @@ -3396,11 +3397,18 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> } }, { - key: 'drop-db', - label: '删除数据库', - icon: , - danger: true, - onClick: () => handleDeleteDatabase(node) + key: 'danger-zone', + label: '危险操作', + icon: , + children: [ + { + key: 'drop-db', + label: '删除数据库', + icon: , + danger: true, + onClick: () => handleDeleteDatabase(node) + } + ] }, { key: 'refresh', @@ -3513,11 +3521,18 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> } }, { - key: 'drop-view', - label: '删除视图', - icon: , - danger: true, - onClick: () => handleDropView(node) + key: 'danger-zone', + label: '危险操作', + icon: , + children: [ + { + key: 'drop-view', + label: '删除视图', + icon: , + danger: true, + onClick: () => handleDropView(node) + } + ] }, ]; } else if (node.type === 'routine') { @@ -3538,11 +3553,18 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> }, { type: 'divider' }, { - key: 'drop-routine', - label: `删除${typeLabel}`, - icon: , - danger: true, - onClick: () => handleDropRoutine(node) + key: 'danger-zone', + label: '危险操作', + icon: , + children: [ + { + key: 'drop-routine', + label: `删除${typeLabel}`, + icon: , + danger: true, + onClick: () => handleDropRoutine(node) + } + ] }, ]; } else if (node.type === 'table') { @@ -3594,11 +3616,18 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> } }, { - key: 'drop-table', - label: '删除表', - icon: , - danger: true, - onClick: () => handleDeleteTable(node) + key: 'danger-zone', + label: '危险操作', + icon: , + children: [ + { + key: 'drop-table', + label: '删除表', + icon: , + danger: true, + onClick: () => handleDeleteTable(node) + } + ] }, { type: 'divider' diff --git a/frontend/src/components/TableOverview.tsx b/frontend/src/components/TableOverview.tsx index da611e3..b93a66f 100644 --- a/frontend/src/components/TableOverview.tsx +++ b/frontend/src/components/TableOverview.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react'; import { Input, Spin, Empty, Dropdown, message, Tooltip, Modal } from 'antd'; -import { TableOutlined, SearchOutlined, ReloadOutlined, SortAscendingOutlined, DatabaseOutlined, ConsoleSqlOutlined, EditOutlined, CopyOutlined, SaveOutlined, DeleteOutlined, ExportOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons'; +import { TableOutlined, SearchOutlined, ReloadOutlined, SortAscendingOutlined, DatabaseOutlined, ConsoleSqlOutlined, EditOutlined, CopyOutlined, SaveOutlined, DeleteOutlined, ExportOutlined, AppstoreOutlined, UnorderedListOutlined, WarningOutlined } from '@ant-design/icons'; import { useStore } from '../store'; import { DBQuery, DBShowCreateTable, ExportTable, DropTable, RenameTable } from '../../wailsjs/go/app/App'; import type { TabData } from '../types'; @@ -432,7 +432,9 @@ const TableOverview: React.FC = ({ tab }) => { { key: 'copy-structure', label: '复制表结构', icon: , onClick: () => handleCopyStructure(t.name) }, { key: 'backup-table', label: '备份表 (SQL)', icon: , onClick: () => handleExport(t.name, 'sql') }, { key: 'rename-table', label: '重命名表', icon: , onClick: () => handleRenameTable(t.name) }, - { key: 'drop-table', label: '删除表', icon: , danger: true, onClick: () => handleDeleteTable(t.name) }, + { key: 'danger-zone', label: '危险操作', icon: , children: [ + { key: 'drop-table', label: '删除表', icon: , danger: true, onClick: () => handleDeleteTable(t.name) } + ]}, { type: 'divider' }, { key: 'export', label: '导出表数据', icon: , children: [ { key: 'export-csv', label: '导出 CSV', onClick: () => handleExport(t.name, 'csv') }, @@ -544,7 +546,9 @@ const TableOverview: React.FC = ({ tab }) => { { key: 'copy-structure', label: '复制表结构', icon: , onClick: () => handleCopyStructure(t.name) }, { key: 'backup-table', label: '备份表 (SQL)', icon: , onClick: () => handleExport(t.name, 'sql') }, { key: 'rename-table', label: '重命名表', icon: , onClick: () => handleRenameTable(t.name) }, - { key: 'drop-table', label: '删除表', icon: , danger: true, onClick: () => handleDeleteTable(t.name) }, + { key: 'danger-zone', label: '危险操作', icon: , children: [ + { key: 'drop-table', label: '删除表', icon: , danger: true, onClick: () => handleDeleteTable(t.name) } + ]}, { type: 'divider' }, { key: 'export', label: '导出表数据', icon: , children: [ { key: 'export-csv', label: '导出 CSV', onClick: () => handleExport(t.name, 'csv') },