mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-06-15 19:19:35 +08:00
e687ae2819
- 为已存查询右键菜单补充重命名能力并同步已打开标签 - 优化 v2 侧栏与表概览右键菜单定位，避免底部遮挡 - 精简旧版数据视图工具栏布局并统一快捷键显示 - 补充侧栏与表概览菜单回归测试
742 lines
27 KiB
TypeScript
742 lines
27 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
CodeOutlined,
|
|
ConsoleSqlOutlined,
|
|
CopyOutlined,
|
|
DeleteOutlined,
|
|
DisconnectOutlined,
|
|
EditOutlined,
|
|
ExportOutlined,
|
|
FileAddOutlined,
|
|
FolderOpenOutlined,
|
|
FolderOutlined,
|
|
SaveOutlined,
|
|
LinkOutlined,
|
|
ReloadOutlined,
|
|
TableOutlined,
|
|
ThunderboltOutlined,
|
|
DatabaseOutlined,
|
|
CheckSquareOutlined,
|
|
CloudOutlined,
|
|
ClearOutlined,
|
|
ColumnWidthOutlined,
|
|
DashboardOutlined,
|
|
EyeInvisibleOutlined,
|
|
FileTextOutlined,
|
|
FolderAddOutlined,
|
|
HddOutlined,
|
|
PushpinOutlined,
|
|
SortAscendingOutlined,
|
|
SortDescendingOutlined,
|
|
VerticalAlignBottomOutlined,
|
|
} from '@ant-design/icons';
|
|
import { getPrimaryShortcutDisplayLabel, type ShortcutPlatform } from '../utils/shortcuts';
|
|
|
|
export type V2TableContextMenuActionKey =
|
|
| 'pin-table'
|
|
| 'unpin-table'
|
|
| 'open-data'
|
|
| 'design-table'
|
|
| 'open-new-tab'
|
|
| 'new-query'
|
|
| 'view-ddl'
|
|
| 'view-er'
|
|
| 'copy-table-name'
|
|
| 'copy-structure'
|
|
| 'copy-insert'
|
|
| 'rename-table'
|
|
| 'new-rollup'
|
|
| 'backup-table'
|
|
| 'refresh-stats'
|
|
| 'export-xlsx'
|
|
| 'export-csv'
|
|
| 'export-json'
|
|
| 'ai-explain'
|
|
| 'ai-generate-query'
|
|
| 'truncate-table'
|
|
| 'drop-table';
|
|
|
|
export type V2TableContextMenuStats = {
|
|
rowCount?: number;
|
|
dataLength?: number;
|
|
indexLength?: number;
|
|
engine?: string;
|
|
loading?: boolean;
|
|
unavailable?: boolean;
|
|
};
|
|
|
|
type V2TableContextMenuItemConfig = {
|
|
action: string;
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
kbd?: string;
|
|
featured?: boolean;
|
|
selected?: boolean;
|
|
disabled?: boolean;
|
|
tone?: 'default' | 'ai' | 'danger';
|
|
};
|
|
|
|
export const formatV2TableContextMenuRows = (count?: number): string => {
|
|
if (count === undefined || count === null || !Number.isFinite(count) || count < 0) return '— 行';
|
|
return `${Math.round(count).toLocaleString()} 行`;
|
|
};
|
|
|
|
export const formatV2TableContextMenuSize = (bytes?: number): string => {
|
|
if (bytes === undefined || bytes === null || !Number.isFinite(bytes) || bytes < 0) return '—';
|
|
if (bytes < 1024) return `${Math.round(bytes)} B`;
|
|
if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
|
|
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
|
};
|
|
|
|
const resolveV2TableContextMenuMeta = (stats?: V2TableContextMenuStats): string => {
|
|
if (!stats) return '点击刷新统计信息读取';
|
|
if (stats?.loading) return '正在读取统计信息…';
|
|
if (stats?.unavailable) return '统计信息不可用';
|
|
return `${formatV2TableContextMenuRows(stats?.rowCount)} · ${formatV2TableContextMenuSize(stats?.dataLength)} 数据 · ${formatV2TableContextMenuSize(stats?.indexLength)} 索引`;
|
|
};
|
|
|
|
const V2TableContextMenuItem: React.FC<{
|
|
item: V2TableContextMenuItemConfig;
|
|
onAction?: (action: string) => void;
|
|
}> = ({ item, onAction }) => (
|
|
<button
|
|
type="button"
|
|
className={[
|
|
'gn-v2-context-menu-item',
|
|
item.featured ? 'is-featured' : '',
|
|
item.selected ? 'is-selected' : '',
|
|
item.tone === 'ai' ? 'is-ai' : '',
|
|
item.tone === 'danger' ? 'is-danger' : '',
|
|
item.tone === 'default' ? 'is-default' : '',
|
|
item.disabled ? 'is-disabled' : '',
|
|
].filter(Boolean).join(' ')}
|
|
role="menuitem"
|
|
disabled={item.disabled}
|
|
aria-disabled={item.disabled || undefined}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (item.disabled) return;
|
|
onAction?.(item.action);
|
|
}}
|
|
>
|
|
<span className="gn-v2-context-menu-item-icon">{item.icon}</span>
|
|
<span className="gn-v2-context-menu-item-title">{item.title}</span>
|
|
{item.kbd && <span className="gn-v2-context-menu-kbd">{item.kbd}</span>}
|
|
</button>
|
|
);
|
|
|
|
const V2ContextMenuHeader: React.FC<{
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
meta: string;
|
|
pill?: string;
|
|
}> = ({ icon, title, meta, pill }) => (
|
|
<div className="gn-v2-context-menu-header">
|
|
<span className="gn-v2-context-menu-table-icon">{icon}</span>
|
|
<span className="gn-v2-context-menu-heading">
|
|
<strong title={title}>{title}</strong>
|
|
<small>{meta}</small>
|
|
</span>
|
|
{pill && (
|
|
<span className="gn-v2-context-menu-engine-pill">{pill}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const renderV2ContextMenuItems = (
|
|
items: V2TableContextMenuItemConfig[],
|
|
onAction?: (action: string) => void,
|
|
) => items.map((item) => (
|
|
<V2TableContextMenuItem key={item.action} item={item} onAction={onAction} />
|
|
));
|
|
|
|
export const V2TableContextMenuView: React.FC<{
|
|
tableName: string;
|
|
shortcutPlatform?: ShortcutPlatform;
|
|
stats?: V2TableContextMenuStats;
|
|
isPinned?: boolean;
|
|
supportsTruncate?: boolean;
|
|
supportsStarRocksRollup?: boolean;
|
|
onAction?: (action: V2TableContextMenuActionKey) => void;
|
|
}> = ({
|
|
tableName,
|
|
shortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
stats,
|
|
isPinned = false,
|
|
supportsTruncate = true,
|
|
supportsStarRocksRollup = false,
|
|
onAction,
|
|
}) => {
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
|
|
const maintenanceItems: V2TableContextMenuItemConfig[] = [
|
|
{ action: 'rename-table', icon: <EditOutlined />, title: '重命名…', kbd: 'F2' },
|
|
...(supportsStarRocksRollup ? [{ action: 'new-rollup' as const, icon: <ThunderboltOutlined />, title: '新增 Rollup' }] : []),
|
|
{ action: 'backup-table', icon: <ExportOutlined />, title: '备份 · SQL Dump' },
|
|
{ action: 'refresh-stats', icon: <ReloadOutlined />, title: '刷新统计信息' },
|
|
];
|
|
|
|
const dangerItems: V2TableContextMenuItemConfig[] = [
|
|
...(supportsTruncate ? [{ action: 'truncate-table' as const, icon: <DeleteOutlined />, title: '截断表 · TRUNCATE', tone: 'danger' as const }] : []),
|
|
{ action: 'drop-table', icon: <DeleteOutlined />, title: '删除表 · DROP', kbd: '⌫', tone: 'danger' },
|
|
];
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu" data-v2-table-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={<TableOutlined />}
|
|
title={tableName}
|
|
meta={resolveV2TableContextMenuMeta(stats)}
|
|
pill={(stats?.engine || stats?.loading) ? (stats?.loading ? '...' : stats?.engine) : undefined}
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{renderItems([
|
|
{ action: 'open-data', icon: <TableOutlined />, title: '查看数据', kbd: '↵', featured: true },
|
|
{ action: isPinned ? 'unpin-table' : 'pin-table', icon: <PushpinOutlined />, title: isPinned ? '取消置顶' : '置顶表', kbd: isPinned ? '已置顶' : undefined, selected: isPinned },
|
|
{ action: 'design-table', icon: <EditOutlined />, title: '设计表 · 字段 / 索引 / 外键', kbd: primaryShortcut('D', shortcutPlatform) },
|
|
{ action: 'open-new-tab', icon: <FileAddOutlined />, title: '在新标签打开', kbd: primaryShortcut('Enter', shortcutPlatform) },
|
|
{ action: 'new-query', icon: <ConsoleSqlOutlined />, title: '新建查询' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">元信息</div>
|
|
{renderItems([
|
|
{ action: 'view-ddl', icon: <CodeOutlined />, title: '查看 DDL · CREATE TABLE' },
|
|
{ action: 'view-er', icon: <LinkOutlined />, title: '在 ER 图中查看' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">复制</div>
|
|
{renderItems([
|
|
{ action: 'copy-table-name', icon: <CopyOutlined />, title: '复制表名', kbd: primaryShortcut('C', shortcutPlatform) },
|
|
{ action: 'copy-structure', icon: <CopyOutlined />, title: '复制表结构 · DDL' },
|
|
{ action: 'copy-insert', icon: <CopyOutlined />, title: '复制全表为 INSERT' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">维护</div>
|
|
{renderItems(maintenanceItems)}
|
|
|
|
<div className="gn-v2-context-menu-section-title">导出表数据</div>
|
|
{renderItems([
|
|
{ action: 'export-xlsx', icon: <ExportOutlined />, title: 'Excel · .xlsx' },
|
|
{ action: 'export-csv', icon: <ExportOutlined />, title: 'CSV · .csv' },
|
|
{ action: 'export-json', icon: <ExportOutlined />, title: 'JSON · .json' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-divider" />
|
|
{renderItems([
|
|
{ action: 'ai-explain', icon: <ThunderboltOutlined />, title: '用 AI 解释这张表', tone: 'ai', featured: true },
|
|
{ action: 'ai-generate-query', icon: <ConsoleSqlOutlined />, title: '用 AI 生成查询', tone: 'ai' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-divider" />
|
|
{renderItems(dangerItems)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export type V2TableGroupContextMenuActionKey =
|
|
| 'new-table'
|
|
| 'sort-by-name'
|
|
| 'sort-by-frequency';
|
|
|
|
export const V2TableGroupContextMenuView: React.FC<{
|
|
title?: string;
|
|
shortcutPlatform?: ShortcutPlatform;
|
|
dbName?: string;
|
|
count?: number;
|
|
currentSort?: 'name' | 'frequency';
|
|
onAction?: (action: V2TableGroupContextMenuActionKey) => void;
|
|
}> = ({
|
|
title = '表 · tables',
|
|
shortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
dbName,
|
|
count,
|
|
currentSort = 'name',
|
|
onAction,
|
|
}) => {
|
|
const sortLabel = currentSort === 'frequency' ? '使用频率' : '名称';
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu gn-v2-group-context-menu" data-v2-table-group-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={<TableOutlined />}
|
|
title={title}
|
|
meta={`${dbName || '当前数据库'} · ${count ?? 0} 张表 · 当前按${sortLabel}排序`}
|
|
pill="GROUP"
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{renderItems([
|
|
{ action: 'new-table', icon: <TableOutlined />, title: '新建表', kbd: primaryShortcut('N', shortcutPlatform), featured: true },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">排序</div>
|
|
{renderItems([
|
|
{ action: 'sort-by-name', icon: currentSort === 'name' ? <CheckSquareOutlined /> : <ReloadOutlined />, title: '按名称排序', kbd: currentSort === 'name' ? '当前' : undefined, selected: currentSort === 'name' },
|
|
{ action: 'sort-by-frequency', icon: currentSort === 'frequency' ? <CheckSquareOutlined /> : <ReloadOutlined />, title: '按使用频率排序', kbd: currentSort === 'frequency' ? '当前' : undefined, selected: currentSort === 'frequency' },
|
|
])}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export type V2DatabaseContextMenuActionKey =
|
|
| 'new-table'
|
|
| 'new-schema'
|
|
| 'new-materialized-view'
|
|
| 'new-external-catalog'
|
|
| 'rename-db'
|
|
| 'refresh'
|
|
| 'export-db-schema'
|
|
| 'backup-db-sql'
|
|
| 'disconnect-db'
|
|
| 'new-query'
|
|
| 'run-sql'
|
|
| 'drop-db';
|
|
|
|
export const V2DatabaseContextMenuView: React.FC<{
|
|
dbName: string;
|
|
shortcutPlatform?: ShortcutPlatform;
|
|
dialect?: string;
|
|
supportsSchemaActions?: boolean;
|
|
supportsStarRocksActions?: boolean;
|
|
supportsRenameDatabase?: boolean;
|
|
supportsDropDatabase?: boolean;
|
|
onAction?: (action: V2DatabaseContextMenuActionKey) => void;
|
|
}> = ({
|
|
dbName,
|
|
shortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
dialect,
|
|
supportsSchemaActions = false,
|
|
supportsStarRocksActions = false,
|
|
supportsRenameDatabase = true,
|
|
supportsDropDatabase = true,
|
|
onAction,
|
|
}) => {
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu gn-v2-database-context-menu" data-v2-database-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={<DatabaseOutlined />}
|
|
title={dbName}
|
|
meta={`${dialect || 'database'} · 数据库操作`}
|
|
pill="DB"
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{renderItems([
|
|
{ action: 'new-table', icon: <TableOutlined />, title: '新建表', kbd: primaryShortcut('N', shortcutPlatform), featured: true },
|
|
...(supportsSchemaActions ? [{ action: 'new-schema', icon: <FolderAddOutlined />, title: '新建模式' }] : []),
|
|
{ action: 'new-query', icon: <ConsoleSqlOutlined />, title: '新建查询' },
|
|
{ action: 'run-sql', icon: <FileAddOutlined />, title: '运行外部 SQL 文件' },
|
|
])}
|
|
|
|
{supportsStarRocksActions && (
|
|
<>
|
|
<div className="gn-v2-context-menu-section-title">StarRocks</div>
|
|
{renderItems([
|
|
{ action: 'new-materialized-view', icon: <ThunderboltOutlined />, title: '新建物化视图' },
|
|
{ action: 'new-external-catalog', icon: <CloudOutlined />, title: '新建外部 Catalog' },
|
|
])}
|
|
</>
|
|
)}
|
|
|
|
<div className="gn-v2-context-menu-section-title">维护</div>
|
|
{renderItems([
|
|
...(supportsRenameDatabase ? [{ action: 'rename-db', icon: <EditOutlined />, title: '重命名数据库', kbd: 'F2' }] : []),
|
|
{ action: 'refresh', icon: <ReloadOutlined />, title: '刷新对象树' },
|
|
{ action: 'disconnect-db', icon: <DisconnectOutlined />, title: '关闭数据库' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">导出与备份</div>
|
|
{renderItems([
|
|
{ action: 'export-db-schema', icon: <ExportOutlined />, title: '导出全部表结构 · SQL' },
|
|
{ action: 'backup-db-sql', icon: <SaveOutlined />, title: '备份全部表 · 结构 + 数据' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-divider" />
|
|
{supportsDropDatabase && renderItems([
|
|
{ action: 'drop-db', icon: <DeleteOutlined />, title: '删除数据库 · DROP', tone: 'danger', kbd: '⌫' },
|
|
])}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM: ShortcutPlatform = 'windows';
|
|
|
|
const primaryShortcut = (
|
|
key: string,
|
|
shortcutPlatform: ShortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
): string => getPrimaryShortcutDisplayLabel(key, shortcutPlatform);
|
|
|
|
export type V2ConnectionContextMenuActionKey =
|
|
| 'new-db'
|
|
| 'refresh'
|
|
| 'new-query'
|
|
| 'open-sql-file'
|
|
| 'new-command'
|
|
| 'open-monitor'
|
|
| 'edit'
|
|
| 'copy-connection'
|
|
| 'disconnect'
|
|
| 'delete'
|
|
| 'move-to-ungrouped'
|
|
| `move-to-tag:${string}`;
|
|
|
|
export type V2ConnectionContextMenuTagItem = {
|
|
id: string;
|
|
name: string;
|
|
selected?: boolean;
|
|
};
|
|
|
|
export type V2ConnectionGroupContextMenuActionKey =
|
|
| 'edit-group'
|
|
| 'delete-group';
|
|
|
|
export const V2ConnectionGroupContextMenuView: React.FC<{
|
|
groupName: string;
|
|
count?: number;
|
|
onAction?: (action: V2ConnectionGroupContextMenuActionKey) => void;
|
|
}> = ({
|
|
groupName,
|
|
count = 0,
|
|
onAction,
|
|
}) => {
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu gn-v2-connection-group-context-menu" data-v2-connection-group-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={<FolderOpenOutlined />}
|
|
title={groupName || '未命名分组'}
|
|
meta={`${count.toLocaleString()} 个连接 · 连接分组`}
|
|
pill="GROUP"
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{renderItems([
|
|
{ action: 'edit-group', icon: <EditOutlined />, title: '编辑分组', kbd: 'F2', featured: true },
|
|
])}
|
|
<div className="gn-v2-context-menu-divider" />
|
|
{renderItems([
|
|
{ action: 'delete-group', icon: <DeleteOutlined />, title: '删除分组', tone: 'danger', kbd: '⌫' },
|
|
])}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const V2ConnectionContextMenuView: React.FC<{
|
|
connectionName: string;
|
|
shortcutPlatform?: ShortcutPlatform;
|
|
hostSummary?: string;
|
|
driverLabel?: string;
|
|
isRedis?: boolean;
|
|
supportsCreateDatabase?: boolean;
|
|
tags?: V2ConnectionContextMenuTagItem[];
|
|
onAction?: (action: V2ConnectionContextMenuActionKey) => void;
|
|
}> = ({
|
|
connectionName,
|
|
shortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
hostSummary,
|
|
driverLabel,
|
|
isRedis = false,
|
|
supportsCreateDatabase = true,
|
|
tags = [],
|
|
onAction,
|
|
}) => {
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
const hasSelectedTag = tags.some((tag) => tag.selected);
|
|
const meta = [
|
|
driverLabel || (isRedis ? 'redis' : 'database'),
|
|
hostSummary || '未配置地址',
|
|
].filter(Boolean).join(' · ');
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu gn-v2-connection-context-menu" data-v2-connection-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={isRedis ? <HddOutlined /> : <CloudOutlined />}
|
|
title={connectionName}
|
|
meta={meta}
|
|
pill="HOST"
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{isRedis ? renderItems([
|
|
{ action: 'refresh', icon: <ReloadOutlined />, title: '刷新连接', kbd: primaryShortcut('R', shortcutPlatform), featured: true },
|
|
{ action: 'new-command', icon: <ConsoleSqlOutlined />, title: '新建命令窗口', featured: true },
|
|
{ action: 'open-monitor', icon: <DashboardOutlined />, title: 'Redis 实例监控' },
|
|
]) : renderItems([
|
|
...(supportsCreateDatabase ? [{ action: 'new-db' as const, icon: <DatabaseOutlined />, title: '新建数据库', kbd: primaryShortcut('N', shortcutPlatform), featured: true }] : []),
|
|
{ action: 'refresh', icon: <ReloadOutlined />, title: '刷新连接', kbd: primaryShortcut('R', shortcutPlatform) },
|
|
{ action: 'new-query', icon: <ConsoleSqlOutlined />, title: '新建查询' },
|
|
{ action: 'open-sql-file', icon: <FileAddOutlined />, title: '运行外部 SQL 文件' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">连接</div>
|
|
{renderItems([
|
|
{ action: 'edit', icon: <EditOutlined />, title: '编辑连接', kbd: 'F2' },
|
|
{ action: 'copy-connection', icon: <CopyOutlined />, title: '复制连接' },
|
|
{ action: 'disconnect', icon: <DisconnectOutlined />, title: '断开连接' },
|
|
])}
|
|
|
|
{tags.length > 0 && (
|
|
<>
|
|
<div className="gn-v2-context-menu-section-title">分组</div>
|
|
{renderItems([
|
|
...tags.map((tag): V2TableContextMenuItemConfig => ({
|
|
action: `move-to-tag:${tag.id}`,
|
|
icon: tag.selected ? <CheckSquareOutlined /> : <FolderOutlined />,
|
|
title: tag.name,
|
|
kbd: tag.selected ? '当前' : undefined,
|
|
selected: tag.selected,
|
|
})),
|
|
{
|
|
action: 'move-to-ungrouped',
|
|
icon: hasSelectedTag ? <FolderOpenOutlined /> : <CheckSquareOutlined />,
|
|
title: '移出分组',
|
|
kbd: hasSelectedTag ? undefined : '当前',
|
|
selected: !hasSelectedTag,
|
|
},
|
|
])}
|
|
</>
|
|
)}
|
|
|
|
<div className="gn-v2-context-menu-divider" />
|
|
{renderItems([
|
|
{ action: 'delete', icon: <DeleteOutlined />, title: '删除连接', tone: 'danger', kbd: '⌫' },
|
|
])}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export type V2CellContextMenuActionKey =
|
|
| 'copy-field-name'
|
|
| 'copy-row-data'
|
|
| 'copy-row-for-paste'
|
|
| 'paste-row-as-new'
|
|
| 'copy-column-data'
|
|
| 'set-null'
|
|
| 'edit-row'
|
|
| 'fill-selected'
|
|
| 'paste-copied-columns'
|
|
| 'copy-insert'
|
|
| 'copy-update'
|
|
| 'copy-delete'
|
|
| 'copy-json'
|
|
| 'copy-csv'
|
|
| 'copy-markdown'
|
|
| 'export-csv'
|
|
| 'export-xlsx'
|
|
| 'export-json'
|
|
| 'export-html';
|
|
|
|
export type V2ColumnHeaderContextMenuActionKey =
|
|
| 'copy-field-name'
|
|
| 'copy-column-data'
|
|
| 'sort-asc'
|
|
| 'sort-desc'
|
|
| 'clear-sort'
|
|
| 'auto-fit-column'
|
|
| 'hide-column'
|
|
| 'show-column-type'
|
|
| 'hide-column-type'
|
|
| 'show-column-comment'
|
|
| 'hide-column-comment';
|
|
|
|
export const V2ColumnHeaderContextMenuView: React.FC<{
|
|
fieldName: string;
|
|
shortcutPlatform?: ShortcutPlatform;
|
|
columnType?: string;
|
|
columnComment?: string;
|
|
sortOrder?: 'ascend' | 'descend' | null;
|
|
showColumnType?: boolean;
|
|
showColumnComment?: boolean;
|
|
onAction?: (action: V2ColumnHeaderContextMenuActionKey) => void;
|
|
}> = ({
|
|
fieldName,
|
|
shortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
columnType,
|
|
columnComment,
|
|
sortOrder,
|
|
showColumnType = true,
|
|
showColumnComment = true,
|
|
onAction,
|
|
}) => {
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
const normalizedType = String(columnType || '').trim();
|
|
const normalizedComment = String(columnComment || '').trim();
|
|
const meta = [
|
|
normalizedType || '未知类型',
|
|
normalizedComment || '暂无备注',
|
|
].join(' · ');
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu gn-v2-column-context-menu" data-v2-column-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={<FileTextOutlined />}
|
|
title={fieldName || '未命名字段'}
|
|
meta={meta}
|
|
pill="FIELD"
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{renderItems([
|
|
{ action: 'copy-field-name', icon: <CopyOutlined />, title: '复制字段名称', kbd: primaryShortcut('C', shortcutPlatform), featured: true },
|
|
{ action: 'copy-column-data', icon: <CopyOutlined />, title: '复制列数据' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">排序</div>
|
|
{renderItems([
|
|
{ action: 'sort-asc', icon: <SortAscendingOutlined />, title: '升序排序', selected: sortOrder === 'ascend', kbd: sortOrder === 'ascend' ? '当前' : undefined },
|
|
{ action: 'sort-desc', icon: <SortDescendingOutlined />, title: '降序排序', selected: sortOrder === 'descend', kbd: sortOrder === 'descend' ? '当前' : undefined },
|
|
{ action: 'clear-sort', icon: <ClearOutlined />, title: '取消此字段排序', disabled: !sortOrder },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">字段显示</div>
|
|
{renderItems([
|
|
{ action: 'auto-fit-column', icon: <ColumnWidthOutlined />, title: '按内容自适应列宽' },
|
|
{ action: 'hide-column', icon: <EyeInvisibleOutlined />, title: '隐藏此字段' },
|
|
{
|
|
action: showColumnType ? 'hide-column-type' : 'show-column-type',
|
|
icon: <FileTextOutlined />,
|
|
title: showColumnType ? '隐藏字段类型' : '显示字段类型',
|
|
selected: showColumnType,
|
|
},
|
|
{
|
|
action: showColumnComment ? 'hide-column-comment' : 'show-column-comment',
|
|
icon: <FileTextOutlined />,
|
|
title: showColumnComment ? '隐藏字段备注' : '显示字段备注',
|
|
selected: showColumnComment,
|
|
},
|
|
])}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const V2CellContextMenuView: React.FC<{
|
|
fieldName: string;
|
|
shortcutPlatform?: ShortcutPlatform;
|
|
tableName?: string;
|
|
rowLabel?: string;
|
|
selectedRowCount?: number;
|
|
canModifyData?: boolean;
|
|
copiedRowCount?: number;
|
|
canPasteCopiedColumns?: boolean;
|
|
supportsCopyInsert?: boolean;
|
|
onAction?: (action: V2CellContextMenuActionKey) => void;
|
|
}> = ({
|
|
fieldName,
|
|
shortcutPlatform = DEFAULT_V2_CONTEXT_MENU_SHORTCUT_PLATFORM,
|
|
tableName,
|
|
rowLabel,
|
|
selectedRowCount = 0,
|
|
canModifyData = false,
|
|
copiedRowCount = 0,
|
|
canPasteCopiedColumns = false,
|
|
supportsCopyInsert = true,
|
|
onAction,
|
|
}) => {
|
|
const renderItems = (items: V2TableContextMenuItemConfig[]) => renderV2ContextMenuItems(
|
|
items,
|
|
onAction as (action: string) => void,
|
|
);
|
|
const selectedCountLabel = Math.max(0, selectedRowCount).toLocaleString();
|
|
const menuTitle = fieldName || '未命名字段';
|
|
const meta = [tableName, rowLabel || '当前行'].filter(Boolean).join(' · ') || '当前单元格';
|
|
|
|
return (
|
|
<div className="gn-v2-table-context-menu gn-v2-cell-context-menu" data-v2-cell-context-menu="true" role="menu">
|
|
<V2ContextMenuHeader
|
|
icon={<TableOutlined />}
|
|
title={menuTitle}
|
|
meta={meta}
|
|
pill="CELL"
|
|
/>
|
|
|
|
<div className="gn-v2-context-menu-body">
|
|
{renderItems([
|
|
{ action: 'copy-field-name', icon: <CopyOutlined />, title: '复制字段名称', kbd: primaryShortcut('C', shortcutPlatform), featured: true },
|
|
])}
|
|
|
|
{canModifyData && (
|
|
<>
|
|
<div className="gn-v2-context-menu-section-title">编辑</div>
|
|
{renderItems([
|
|
{ action: 'set-null', icon: <ClearOutlined />, title: '设置为 NULL' },
|
|
{ action: 'edit-row', icon: <EditOutlined />, title: '编辑本行', kbd: '↵' },
|
|
{ action: 'copy-row-for-paste', icon: <CopyOutlined />, title: '复制本行为新增行' },
|
|
{
|
|
action: 'paste-row-as-new',
|
|
icon: <VerticalAlignBottomOutlined />,
|
|
title: copiedRowCount > 0 ? `粘贴为新增行 (${copiedRowCount})` : '粘贴为新增行',
|
|
disabled: copiedRowCount <= 0,
|
|
},
|
|
{
|
|
action: 'fill-selected',
|
|
icon: <VerticalAlignBottomOutlined />,
|
|
title: `填充到选中行 (${selectedCountLabel})`,
|
|
disabled: selectedRowCount <= 0,
|
|
},
|
|
{
|
|
action: 'paste-copied-columns',
|
|
icon: <VerticalAlignBottomOutlined />,
|
|
title: '粘贴已复制列 · 同名列',
|
|
disabled: !canPasteCopiedColumns,
|
|
},
|
|
])}
|
|
</>
|
|
)}
|
|
|
|
<div className="gn-v2-context-menu-section-title">复制</div>
|
|
{renderItems([
|
|
{ action: 'copy-row-data', icon: <CopyOutlined />, title: '复制行数据' },
|
|
{ action: 'copy-column-data', icon: <CopyOutlined />, title: '复制列数据' },
|
|
...(supportsCopyInsert ? [
|
|
{ action: 'copy-insert' as const, icon: <ConsoleSqlOutlined />, title: '复制为 INSERT', kbd: 'SQL' },
|
|
{ action: 'copy-update' as const, icon: <ConsoleSqlOutlined />, title: '复制为 UPDATE' },
|
|
{ action: 'copy-delete' as const, icon: <ConsoleSqlOutlined />, title: '复制为 DELETE' },
|
|
] : []),
|
|
{ action: 'copy-json', icon: <FileTextOutlined />, title: '复制为 JSON' },
|
|
{ action: 'copy-csv', icon: <FileTextOutlined />, title: '复制为 CSV' },
|
|
{ action: 'copy-markdown', icon: <CopyOutlined />, title: '复制为 Markdown' },
|
|
])}
|
|
|
|
<div className="gn-v2-context-menu-section-title">导出</div>
|
|
{renderItems([
|
|
{ action: 'export-csv', icon: <ExportOutlined />, title: 'CSV · .csv' },
|
|
{ action: 'export-xlsx', icon: <ExportOutlined />, title: 'Excel · .xlsx' },
|
|
{ action: 'export-json', icon: <ExportOutlined />, title: 'JSON · .json' },
|
|
{ action: 'export-html', icon: <ExportOutlined />, title: 'HTML · .html' },
|
|
])}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|