+
+ );
+
const currentSectionContent = resolvedSection === 'basic'
? baseInfoSection
- : networkSecuritySection;
+ : resolvedSection === 'appearance'
+ ? appearanceSection
+ : networkSecuritySection;
if (sectionItems.length <= 1) {
return currentSectionContent;
diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx
index 78ca46c..bb3f353 100644
--- a/frontend/src/components/DataGrid.tsx
+++ b/frontend/src/components/DataGrid.tsx
@@ -1,7 +1,8 @@
// cspell:ignore anticon sqls uuidv uuidv4 hscroll
import React, { useState, useEffect, useRef, useContext, useMemo, useCallback } from 'react';
import { createPortal } from 'react-dom';
-import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Modal, Checkbox, Segmented, Tooltip, Popover } from 'antd';
+import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Modal, Checkbox, Segmented, Tooltip, Popover, DatePicker, TimePicker } from 'antd';
+import dayjs from 'dayjs';
import type { SortOrder, ColumnType } from 'antd/es/table/interface';
import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined, EditOutlined, VerticalAlignBottomOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import Editor from '@monaco-editor/react';
@@ -28,7 +29,7 @@ import { useStore } from '../store';
import type { ColumnDefinition } from '../types';
import { v4 as generateUuid } from 'uuid';
import 'react-resizable/css/styles.css';
-import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
+import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, escapeLiteral, hasExplicitSort, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
import { isMacLikePlatform, normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
import { getDataSourceCapabilities } from '../utils/dataSourceCapabilities';
import { calculateTableBodyBottomPadding, calculateVirtualTableScrollX } from './dataGridLayout';
@@ -156,6 +157,43 @@ const isTemporalColumnType = (columnType?: string): boolean => {
return base === 'date' || base === 'time' || base === 'year';
};
+// 根据列类型返回 DatePicker 的 picker 模式
+type TemporalPickerType = 'datetime' | 'date' | 'time' | 'year' | null;
+const getTemporalPickerType = (columnType?: string): TemporalPickerType => {
+ const raw = String(columnType || '').trim().toLowerCase();
+ if (!raw) return null;
+ if (raw.includes('datetime') || raw.includes('timestamp')) return 'datetime';
+ const base = raw.split(/[ (]/)[0];
+ if (base === 'date') return 'date';
+ if (base === 'time') return 'time';
+ if (base === 'year') return 'year';
+ return null;
+};
+
+const TEMPORAL_FORMATS: Record
+
+ 图标
+
+ {DB_ICON_TYPES.map((iconKey) => {
+ const isActive = effectiveIconType === iconKey;
+ return (
+
+ );
+ })}
+
+
+ 当前：{getDbIconLabel(effectiveIconType)}
+
+
+
+ 颜色
+
+ {PRESET_ICON_COLORS.map((presetColor) => {
+ const isActive = effectiveIconColor === presetColor;
+ return (
+
+
+
+ 预览
+
+ {getDbIcon(effectiveIconType, effectiveIconColor, 24)}
+ {form.getFieldValue('name') || '连接名称'}
+
+ {(customIconType || customIconColor) && (
+
+ )}
+ = React.memo(({
{children}
);
+ } else if (cellContextMenuContext) {
+ // 非编辑模式（只读查询结果）也绑定右键菜单，支持复制为 INSERT/JSON/CSV 等操作
+ childNode = (
+
+ {children}
+
+ );
}
const handleDoubleClick = () => {
@@ -668,11 +761,20 @@ const ContextMenuRow = React.memo(({ children, record, ...props }: any) => {
{ key: 'csv', label: '复制为 CSV', icon:
@@ -3081,8 +3262,8 @@ const DataGrid: React.FC = ({
}, [displayColumnNames, columnWidths, sortInfo, handleResizeStart, canModifyData, onSort, renderColumnTitle]);
const mergedColumns = useMemo(() => columns.map((col): ColumnType => {
- if (!col.editable) return col as ColumnType;
const dataIndex = String(col.dataIndex);
+ // 即使不可编辑，也需要通过 onCell/render 绑定右键菜单
return {
...col,
onCell: (record: Item) => {
@@ -3091,8 +3272,24 @@ const DataGrid: React.FC = ({
'data-row-key': rowKey === undefined || rowKey === null ? undefined : String(rowKey),
'data-col-name': dataIndex,
};
+ // 数据预览面板：单击单元格时更新聚焦信息
+ cellProps.onClick = () => {
+ if (dataPanelOpenRef.current) {
+ updateFocusedCell(record, dataIndex);
+ }
+ };
- if (!enableInlineEditableCell) {
+ if (col.editable && enableInlineEditableCell) {
+ // 可编辑模式（非虚拟）：传递给 EditableCell 的 props
+ cellProps.record = record;
+ cellProps.editable = col.editable;
+ cellProps.dataIndex = col.dataIndex;
+ cellProps.title = dataIndex;
+ cellProps.handleSave = handleCellSave;
+ cellProps.focusCell = openCellEditor;
+ cellProps.columnType = (columnMetaMap[dataIndex] || columnMetaMapByLowerName[dataIndex.toLowerCase()])?.type;
+ } else if (col.editable && !enableInlineEditableCell) {
+ // 可编辑但非 inline（虚拟模式下）：双击和右键通过 onCell 绑定
cellProps.onDoubleClick = () => handleVirtualCellActivate(record, dataIndex, dataIndex);
cellProps.onContextMenu = (e: React.MouseEvent) => {
e.preventDefault();
@@ -3100,12 +3297,12 @@ const DataGrid: React.FC = ({
showCellContextMenu(e, record, dataIndex, dataIndex);
};
} else {
- cellProps.record = record;
- cellProps.editable = col.editable;
- cellProps.dataIndex = col.dataIndex;
- cellProps.title = dataIndex;
- cellProps.handleSave = handleCellSave;
- cellProps.focusCell = openCellEditor;
+ // 不可编辑（只读查询结果）：只绑定右键菜单
+ cellProps.onContextMenu = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ showCellContextMenu(e, record, dataIndex, dataIndex);
+ };
}
return cellProps;
},
@@ -3120,6 +3317,7 @@ const DataGrid: React.FC = ({
record={record}
handleSave={handleCellSave}
focusCell={openCellEditor}
+ columnType={(columnMetaMap[dataIndex] || columnMetaMapByLowerName[dataIndex.toLowerCase()])?.type}
as="div"
style={VIRTUAL_CELL_WRAPPER_STYLE}
>
@@ -3144,7 +3342,7 @@ const DataGrid: React.FC = ({
return originalRenderContent;
}
};
- }), [columns, enableInlineEditableCell, enableVirtual, handleCellSave, openCellEditor, handleVirtualCellActivate, showCellContextMenu]);
+ }), [columns, enableInlineEditableCell, enableVirtual, handleCellSave, openCellEditor, handleVirtualCellActivate, showCellContextMenu, columnMetaMap, columnMetaMapByLowerName]);
const handleAddRow = () => {
const newKey = `new-${Date.now()}`;
@@ -3207,7 +3405,7 @@ const DataGrid: React.FC = ({
if (!hasRowKey) {
values = { ...(newRow as any) };
} else {
- displayColumnNames.forEach((col) => {
+ columnNames.forEach((col) => {
const nextVal = (newRow as any)?.[col];
const prevVal = (originalRow as any)?.[col];
if (!isCellValueEqualForDiff(prevVal, nextVal)) values[col] = nextVal;
@@ -3300,14 +3498,19 @@ const DataGrid: React.FC = ({
return;
}
const records = getTargets(record);
+ // 使用 columnNames 保持表定义的字段顺序，而非 Object.keys() 的不确定顺序
+ const orderedCols = columnNames.filter(c => c !== GONAVI_ROW_KEY);
const sqlList = records.map((r: any) => {
- const { [GONAVI_ROW_KEY]: _rowKey, ...vals } = r;
- const cols = Object.keys(vals);
- const values = Object.values(vals).map(v => v === null ? 'NULL' : `'${v}'`);
+ const values = orderedCols.map(c => {
+ const v = r[c];
+ if (v === null || v === undefined) return 'NULL';
+ const escaped = String(v).replace(/'/g, "''");
+ return `'${escaped}'`;
+ });
const targetTable = tableName || 'table';
- return `INSERT INTO \`${targetTable}\` (${cols.map(c => `\`${c}\``).join(', ')}) VALUES (${values.join(', ')});`;
+ return `INSERT INTO \`${targetTable}\` (${orderedCols.map(c => `\`${c}\``).join(', ')}) VALUES (${values.join(', ')});`;
});
- copyToClipboard(sqlList.join('\n')); }, [supportsCopyInsert, tableName, getTargets, copyToClipboard]);
+ copyToClipboard(sqlList.join('\n')); }, [supportsCopyInsert, tableName, columnNames, getTargets, copyToClipboard]);
const handleCopyJson = useCallback((record: any) => {
const records = getTargets(record);
@@ -3320,13 +3523,21 @@ const DataGrid: React.FC = ({
const handleCopyCsv = useCallback((record: any) => {
const records = getTargets(record);
+ // 使用 columnNames 保持表定义的字段顺序
+ const orderedCols = columnNames.filter(c => c !== GONAVI_ROW_KEY);
+ const header = orderedCols.map(c => `"${c}"`).join(',');
const lines = records.map((r: any) => {
- const { [GONAVI_ROW_KEY]: _rowKey, ...vals } = r;
- const values = Object.values(vals).map(v => v === null ? 'NULL' : `"${v}"`);
+ const values = orderedCols.map(c => {
+ const v = r[c];
+ if (v === null || v === undefined) return 'NULL';
+ // CSV 标准：值中的双引号转义为两个双引号
+ const escaped = String(v).replace(/"/g, '""');
+ return `"${escaped}"`;
+ });
return values.join(',');
});
- copyToClipboard(lines.join('\n'));
- }, [getTargets, copyToClipboard]);
+ copyToClipboard([header, ...lines].join('\n'));
+ }, [getTargets, columnNames, copyToClipboard]);
const buildConnConfig = useCallback(() => {
if (!connectionId) return null;
@@ -3388,10 +3599,10 @@ const DataGrid: React.FC = ({
const baseSql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
const orderBySQL = buildOrderBySQL(dbType, sortInfo, pkColumns);
const normalizedType = String(dbType || '').trim().toLowerCase();
- const hasExplicitSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
+ const hasSortForBuffer = hasExplicitSort(sortInfo);
const offset = (pagination.current - 1) * pagination.pageSize;
let sql = buildPaginatedSelectSQL(dbType, baseSql, orderBySQL, pagination.pageSize, offset);
- if (hasExplicitSort && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
+ if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
}
return sql;
@@ -4452,6 +4663,24 @@ const DataGrid: React.FC = ({
)}
+
= ({
{showFilter && (
- = ({
const placeholder = rowEditorNullColsRef.current?.has(col) ? '(NULL)' : undefined;
const isJson = looksLikeJsonText(sample);
const useArea = isJson || sample.includes('\n') || sample.length >= 160;
+ const colMeta = columnMetaMap[col] || columnMetaMapByLowerName[col.toLowerCase()];
+ const rowPickerType = getTemporalPickerType(colMeta?.type);
+ const isRowDateTimeField = !!rowPickerType && !(/^0{4}-0{2}-0{2}/.test(String(sample || '')));
return (
- {useArea ? (
+ {isRowDateTimeField ? (
+ rowPickerType === 'time' ? (
+ = ({
)}
+ {/* Data Preview Panel */}
+ {dataPanelOpen && viewMode === 'table' && (
+ = {
+ mysql: [
+ // 数值
+ { value: 'tinyint' },
+ { value: 'tinyint(1)' },
+ { value: 'smallint' },
+ { value: 'mediumint' },
+ { value: 'int' },
+ { value: 'bigint' },
+ { value: 'float' },
+ { value: 'double' },
+ { value: 'decimal(10,2)' },
+ // 字符串
+ { value: 'char(50)' },
+ { value: 'varchar(255)' },
+ { value: 'tinytext' },
+ { value: 'text' },
+ { value: 'mediumtext' },
+ { value: 'longtext' },
+ // 二进制
+ { value: 'binary(255)' },
+ { value: 'varbinary(255)' },
+ { value: 'tinyblob' },
+ { value: 'blob' },
+ { value: 'mediumblob' },
+ { value: 'longblob' },
+ // 日期时间
+ { value: 'date' },
+ { value: 'time' },
+ { value: 'datetime' },
+ { value: 'timestamp' },
+ { value: 'year' },
+ // 其他
+ { value: 'json' },
+ { value: 'enum' },
+ { value: 'set' },
+ { value: 'bit(1)' },
+ ],
+ postgres: [
+ // 数值
+ { value: 'smallint' },
+ { value: 'integer' },
+ { value: 'bigint' },
+ { value: 'real' },
+ { value: 'double precision' },
+ { value: 'numeric(10,2)' },
+ { value: 'serial' },
+ { value: 'bigserial' },
+ // 字符串
+ { value: 'char(50)' },
+ { value: 'varchar(255)' },
+ { value: 'text' },
+ // 布尔
+ { value: 'boolean' },
+ // 日期时间
+ { value: 'date' },
+ { value: 'time' },
+ { value: 'timestamp' },
+ { value: 'timestamptz' },
+ { value: 'interval' },
+ // 二进制
+ { value: 'bytea' },
+ // JSON
+ { value: 'json' },
+ { value: 'jsonb' },
+ // 其他
+ { value: 'uuid' },
+ { value: 'inet' },
+ { value: 'cidr' },
+ { value: 'macaddr' },
+ { value: 'xml' },
+ { value: 'int4range' },
+ { value: 'tsquery' },
+ { value: 'tsvector' },
+ ],
+ sqlserver: [
+ // 数值
+ { value: 'tinyint' },
+ { value: 'smallint' },
+ { value: 'int' },
+ { value: 'bigint' },
+ { value: 'float' },
+ { value: 'real' },
+ { value: 'decimal(10,2)' },
+ { value: 'numeric(10,2)' },
+ { value: 'money' },
+ { value: 'smallmoney' },
+ // 字符串
+ { value: 'char(50)' },
+ { value: 'varchar(255)' },
+ { value: 'varchar(max)' },
+ { value: 'nchar(50)' },
+ { value: 'nvarchar(255)' },
+ { value: 'nvarchar(max)' },
+ { value: 'text' },
+ { value: 'ntext' },
+ // 日期时间
+ { value: 'date' },
+ { value: 'time' },
+ { value: 'datetime' },
+ { value: 'datetime2' },
+ { value: 'datetimeoffset' },
+ { value: 'smalldatetime' },
+ // 二进制
+ { value: 'binary(255)' },
+ { value: 'varbinary(255)' },
+ { value: 'varbinary(max)' },
+ { value: 'image' },
+ // 其他
+ { value: 'bit' },
+ { value: 'uniqueidentifier' },
+ { value: 'xml' },
+ ],
+ sqlite: [
+ { value: 'INTEGER' },
+ { value: 'REAL' },
+ { value: 'TEXT' },
+ { value: 'BLOB' },
+ { value: 'NUMERIC' },
+ ],
+ oracle: [
+ { value: 'NUMBER(10)' },
+ { value: 'NUMBER(10,2)' },
+ { value: 'FLOAT' },
+ { value: 'BINARY_FLOAT' },
+ { value: 'BINARY_DOUBLE' },
+ { value: 'CHAR(50)' },
+ { value: 'VARCHAR2(255)' },
+ { value: 'NVARCHAR2(255)' },
+ { value: 'CLOB' },
+ { value: 'NCLOB' },
+ { value: 'BLOB' },
+ { value: 'DATE' },
+ { value: 'TIMESTAMP' },
+ { value: 'TIMESTAMP WITH TIME ZONE' },
+ { value: 'RAW(255)' },
+ { value: 'LONG RAW' },
+ { value: 'XMLTYPE' },
+ ],
+};
+
const COMMON_DEFAULTS = [
{ value: 'CURRENT_TIMESTAMP' },
{ value: 'NULL' },
@@ -290,43 +433,23 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
setCommentEditorValue('');
}, []);
- // 初始化透明 Monaco Editor 主题
- useEffect(() => {
- loader.init().then(monaco => {
- monaco.editor.defineTheme('transparent-dark', {
- base: 'vs-dark',
- inherit: true,
- rules: [],
- colors: {
- 'editor.background': '#00000000',
- 'editor.lineHighlightBackground': '#ffffff10',
- 'editorGutter.background': '#00000000',
- }
- });
- monaco.editor.defineTheme('transparent-light', {
- base: 'vs',
- inherit: true,
- rules: [],
- colors: {
- 'editor.background': '#00000000',
- 'editor.lineHighlightBackground': '#00000010',
- 'editorGutter.background': '#00000000',
- }
- });
- });
- }, []);
+ // 透明 Monaco Editor 主题已在 main.tsx 全局注册（含 stickyScroll 不透明背景）
+ // 监听字段 Tab 容器高度，为所有 Tab 内表格计算 scroll.y
+ // 当 Tab 切换时，字段 Tab 被 display:none 导致 height=0，跳过该次更新保持有效值
useEffect(() => {
if (!containerRef.current) return;
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
- const h = Math.max(200, entry.contentRect.height - 40);
- setTableHeight(h);
+ const h = entry.contentRect.height;
+ // 跳过零高度观测（Tab 面板被隐藏时）
+ if (h <= 0) return;
+ setTableHeight(Math.max(200, h - 40));
}
});
resizeObserver.observe(containerRef.current);
return () => resizeObserver.disconnect();
- }, [activeKey]); // Re-attach when tab switches
+ }, []); // 不依赖 activeKey，仅挂载一次，通过零高度守卫避免 Tab 切换异常
// --- Resizable Columns State ---
const [tableColumns, setTableColumns] = useState([]);
@@ -430,7 +553,7 @@ const TableDesigner: React.FC<{ tab: TabData }> = ({ tab }) => {
key: 'type',
width: 150,
render: (text: string, record: EditableColumn) => readOnly ? text : (
- handleColumnChange(record._key, 'type', val)} style={{ width: '100%' }} variant="borderless" />
+ handleColumnChange(record._key, 'type', val)} style={{ width: '100%' }} variant="borderless" />
)
},
{
@@ -1711,28 +1834,44 @@ END;`;
};
const handleDeleteIndex = () => {
- if (!selectedIndex) {
- message.warning('请先选择一个索引');
+ if (selectedIndexKeys.length === 0) {
+ message.warning('请先选择要删除的索引');
return;
}
if (!supportsIndexSchemaOps()) {
message.warning('当前数据库暂不支持在此维护索引');
return;
}
+ // 根据选中的 key 找到对应的索引对象
+ const toDelete = groupedIndexes.filter(idx => selectedIndexKeys.includes(idx.key));
+ if (toDelete.length === 0) {
+ message.warning('请先选择要删除的索引');
+ return;
+ }
+ const names = toDelete.map(idx => `"${idx.name}"`).join('、');
Modal.confirm({
title: '确认删除索引',
icon: = ({ tab }) => {
const openTable = useCallback((tableName: string) => {
if (!connection) return;
addTab({
- id: `${connection.id}-${tab.dbName}-table-${tableName}`,
+ id: `${connection.id}-${tab.dbName}-${tableName}`,
title: tableName,
type: 'table',
connectionId: connection.id,
diff --git a/frontend/src/components/TriggerViewer.tsx b/frontend/src/components/TriggerViewer.tsx
index d0a91be..849a7ca 100644
--- a/frontend/src/components/TriggerViewer.tsx
+++ b/frontend/src/components/TriggerViewer.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import Editor, { loader } from '@monaco-editor/react';
+import Editor from '@monaco-editor/react';
import { Spin, Alert } from 'antd';
import { TabData } from '../types';
import { useStore } from '../store';
@@ -18,31 +18,7 @@ const TriggerViewer: React.FC = ({ tab }) => {
const theme = useStore(state => state.theme);
const darkMode = theme === 'dark';
- // 初始化透明 Monaco Editor 主题
- useEffect(() => {
- loader.init().then(monaco => {
- monaco.editor.defineTheme('transparent-dark', {
- base: 'vs-dark',
- inherit: true,
- rules: [],
- colors: {
- 'editor.background': '#00000000',
- 'editor.lineHighlightBackground': '#ffffff10',
- 'editorGutter.background': '#00000000',
- }
- });
- monaco.editor.defineTheme('transparent-light', {
- base: 'vs',
- inherit: true,
- rules: [],
- colors: {
- 'editor.background': '#00000000',
- 'editor.lineHighlightBackground': '#00000010',
- 'editorGutter.background': '#00000000',
- }
- });
- });
- }, []);
+ // 透明 Monaco Editor 主题已在 main.tsx 全局注册（含 stickyScroll 不透明背景）
const escapeSQLLiteral = (raw: string): string => String(raw || '').replace(/'/g, "''");
const quoteSqlServerIdentifier = (raw: string): string => `[${String(raw || '').replace(/]/g, ']]')}]`;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 7ab4fee..4c9d370 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -5,6 +5,8 @@ import App from './App'
// 全局配置 Monaco Editor 使用本地打包的文件，避免从 CDN (jsdelivr) 加载。
// Windows WebView2 环境下访问外部 CDN 可能失败，导致编辑器一直显示 Loading。
+// 中文语言包必须在 monaco-editor 主包之前导入，否则右键菜单等 UI 仍为英文。
+import 'monaco-editor/esm/nls.messages.zh-cn'
import { loader } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'
loader.config({ monaco })
@@ -42,11 +44,11 @@ if (typeof window !== 'undefined' && !(window as any).go) {
// 全局注册透明主题，避免每个 Editor 组件 beforeMount 中重复定义
monaco.editor.defineTheme('transparent-dark', {
base: 'vs-dark', inherit: true, rules: [],
- colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#ffffff10', 'editorGutter.background': '#00000000' }
+ colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#ffffff10', 'editorGutter.background': '#00000000', 'editorStickyScroll.background': '#1e1e1e', 'editorStickyScrollHover.background': '#2a2a2a' }
})
monaco.editor.defineTheme('transparent-light', {
base: 'vs', inherit: true, rules: [],
- colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#00000010', 'editorGutter.background': '#00000000' }
+ colors: { 'editor.background': '#00000000', 'editor.lineHighlightBackground': '#00000010', 'editorGutter.background': '#00000000', 'editorStickyScroll.background': '#ffffff', 'editorStickyScrollHover.background': '#f5f5f5' }
})
ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 0338859..e081769 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -721,6 +721,33 @@ export const useStore = create()(
newTabs[index] = { ...newTabs[index], ...tab };
return { tabs: newTabs, activeTabId: tab.id };
}
+ // 语义去重：对 table/design 类型按 connectionId+dbName+tableName 匹配已有 Tab
+ if ((tab.type === 'table' || tab.type === 'design') && tab.tableName && tab.connectionId && tab.dbName) {
+ const semanticIndex = state.tabs.findIndex(t =>
+ t.type === tab.type &&
+ t.connectionId === tab.connectionId &&
+ t.dbName === tab.dbName &&
+ t.tableName === tab.tableName
+ );
+ if (semanticIndex !== -1) {
+ const existingTab = state.tabs[semanticIndex];
+ const newTabs = [...state.tabs];
+ newTabs[semanticIndex] = { ...existingTab, ...tab, id: existingTab.id };
+ return { tabs: newTabs, activeTabId: existingTab.id };
+ }
+ }
+ // 语义去重：对 query 类型按 savedQueryId 匹配已有 Tab（避免保存后重复打开）
+ if (tab.type === 'query' && tab.savedQueryId) {
+ const savedQueryIndex = state.tabs.findIndex(t =>
+ t.type === 'query' && (t.savedQueryId === tab.savedQueryId || t.id === tab.savedQueryId)
+ );
+ if (savedQueryIndex !== -1) {
+ const existingTab = state.tabs[savedQueryIndex];
+ const newTabs = [...state.tabs];
+ newTabs[savedQueryIndex] = { ...existingTab, ...tab, id: existingTab.id };
+ return { tabs: newTabs, activeTabId: existingTab.id };
+ }
+ }
return { tabs: [...state.tabs, tab], activeTabId: tab.id };
}),
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index d173baf..ea10867 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -72,6 +72,8 @@ export interface SavedConnection {
config: ConnectionConfig;
includeDatabases?: string[];
includeRedisDatabases?: number[]; // Redis databases to show (0-15)
+ iconType?: string; // 自定义图标类型（如 'mysql','postgres'），不填则取 config.type
+ iconColor?: string; // 自定义图标颜色（十六进制），不填则取类型默认色
}
export interface ConnectionTag {
diff --git a/frontend/src/utils/mongodb.ts b/frontend/src/utils/mongodb.ts
index 577c5af..646d51e 100644
--- a/frontend/src/utils/mongodb.ts
+++ b/frontend/src/utils/mongodb.ts
@@ -1,10 +1,13 @@
import type { FilterCondition } from './sql';
import { parseListValues } from './sql';
-type SortInfo = {
+type SortInfoItem = {
columnKey?: string;
order?: string;
-} | null | undefined;
+ enabled?: boolean;
+};
+
+type SortInfo = SortInfoItem | SortInfoItem[] | null | undefined;
type ShellConvertResult = {
recognized: boolean;
@@ -607,14 +610,24 @@ export const buildMongoSort = (
sortInfo: SortInfo,
fallbackColumns: string[] = [],
): Record | undefined => {
- const sortColumn = String(sortInfo?.columnKey || '').trim();
- const sortOrder = String(sortInfo?.order || '');
- if (sortColumn && (sortOrder === 'ascend' || sortOrder === 'descend')) {
- return { [sortColumn]: sortOrder === 'ascend' ? 1 : -1 };
+ const items = Array.isArray(sortInfo) ? sortInfo : (sortInfo ? [sortInfo] : []);
+ const sort: Record = {};
+ const seen = new Set();
+ for (const item of items) {
+ if (item?.enabled === false) continue;
+ const col = String(item?.columnKey || '').trim();
+ const order = String(item?.order || '');
+ if (col && (order === 'ascend' || order === 'descend')) {
+ const key = col.toLowerCase();
+ if (!seen.has(key)) {
+ seen.add(key);
+ sort[col] = order === 'ascend' ? 1 : -1;
+ }
+ }
}
+ if (Object.keys(sort).length > 0) return sort;
const uniqueColumns: string[] = [];
- const seen = new Set();
(fallbackColumns || []).forEach((col) => {
const key = String(col || '').trim();
if (!key) return;
@@ -625,7 +638,6 @@ export const buildMongoSort = (
});
if (uniqueColumns.length === 0) return undefined;
- const sort: Record = {};
uniqueColumns.forEach((col) => {
sort[col] = 1;
});
diff --git a/frontend/src/utils/sql.ts b/frontend/src/utils/sql.ts
index 4fece31..0864683 100644
--- a/frontend/src/utils/sql.ts
+++ b/frontend/src/utils/sql.ts
@@ -69,10 +69,13 @@ export const quoteQualifiedIdent = (dbType: string, ident: string) => {
export const escapeLiteral = (val: string) => (val || '').replace(/'/g, "''");
-type SortInfo = {
+type SortInfoItem = {
columnKey?: string;
order?: string;
-} | null | undefined;
+ enabled?: boolean;
+};
+
+type SortInfo = SortInfoItem | SortInfoItem[] | null | undefined;
// 为排序查询按库类型注入 sort_buffer 提升参数（仅影响当前语句）。
// MySQL: 使用 Optimizer Hint `SET_VAR`。
@@ -101,17 +104,50 @@ export const withSortBufferTuningSQL = (
return rawSql;
};
+/** 将 SortInfo（单字段或多字段）标准化为 SortInfoItem 数组 */
+const normalizeSortInfoItems = (sortInfo: SortInfo): SortInfoItem[] => {
+ if (!sortInfo) return [];
+ if (Array.isArray(sortInfo)) return sortInfo;
+ return [sortInfo];
+};
+
+/** 判断 SortInfo 中是否存在至少一个有效排序 */
+export const hasExplicitSort = (sortInfo: SortInfo): boolean => {
+ const items = normalizeSortInfoItems(sortInfo);
+ return items.some(item => {
+ if (item?.enabled === false) return false;
+ const col = String(item?.columnKey || '').trim();
+ const order = String(item?.order || '');
+ return !!col && (order === 'ascend' || order === 'descend');
+ });
+};
+
export const buildOrderBySQL = (
dbType: string,
sortInfo: SortInfo,
fallbackColumns: string[] = [],
) => {
const dbTypeLower = String(dbType || '').trim().toLowerCase();
- const sortColumn = normalizeIdentPart(String(sortInfo?.columnKey || ''));
- const sortOrder = String(sortInfo?.order || '');
- const direction = sortOrder === 'ascend' ? 'ASC' : sortOrder === 'descend' ? 'DESC' : '';
- if (sortColumn && direction) {
- return ` ORDER BY ${quoteIdentPart(dbType, sortColumn)} ${direction}`;
+ const items = normalizeSortInfoItems(sortInfo);
+ const seen = new Set();
+ const sortParts: string[] = [];
+
+ for (const item of items) {
+ if (item?.enabled === false) continue;
+ const sortColumn = normalizeIdentPart(String(item?.columnKey || ''));
+ const sortOrder = String(item?.order || '');
+ const direction = sortOrder === 'ascend' ? 'ASC' : sortOrder === 'descend' ? 'DESC' : '';
+ if (sortColumn && direction) {
+ const key = sortColumn.toLowerCase();
+ if (!seen.has(key)) {
+ seen.add(key);
+ sortParts.push(`${quoteIdentPart(dbType, sortColumn)} ${direction}`);
+ }
+ }
+ }
+
+ if (sortParts.length > 0) {
+ return ` ORDER BY ${sortParts.join(', ')}`;
}
// MySQL/MariaDB 大表在无显式排序需求时强制 ORDER BY（即使按主键）可能触发 filesort，
@@ -121,7 +157,6 @@ export const buildOrderBySQL = (
return '';
}
- const seen = new Set();
const stableColumns = (fallbackColumns || [])
.map((col) => normalizeIdentPart(String(col || '')))
.filter((col) => {
diff --git a/internal/app/methods_file.go b/internal/app/methods_file.go
index e484091..3d02edf 100644
--- a/internal/app/methods_file.go
+++ b/internal/app/methods_file.go
@@ -2207,7 +2207,12 @@ func formatExportCellText(val interface{}) string {
}
return text
default:
- return fmt.Sprintf("%v", val)
+ text := fmt.Sprintf("%v", val)
+ // 字符串型日期时间值（如 RFC3339 "2026-03-10T17:01:55+08:00"）格式化为本地时区 yyyy-MM-dd HH:mm:ss
+ if parsed, ok := parseTemporalString(text); ok {
+ return parsed.Local().Format("2006-01-02 15:04:05")
+ }
+ return text
}
}
@@ -2217,6 +2222,18 @@ func normalizeExportJSONValue(val interface{}) interface{} {
}
switch v := val.(type) {
+ case time.Time:
+ return v.Local().Format("2006-01-02 15:04:05")
+ case *time.Time:
+ if v == nil {
+ return nil
+ }
+ return v.Local().Format("2006-01-02 15:04:05")
+ case string:
+ if parsed, ok := parseTemporalString(v); ok {
+ return parsed.Local().Format("2006-01-02 15:04:05")
+ }
+ return v
case float32:
f := float64(v)
if math.IsNaN(f) || math.IsInf(f, 0) {
diff --git a/internal/db/dameng_metadata.go b/internal/db/dameng_metadata.go
index c963da1..b0f698b 100644
--- a/internal/db/dameng_metadata.go
+++ b/internal/db/dameng_metadata.go
@@ -4,9 +4,15 @@ import (
"fmt"
"sort"
"strings"
+
+ "GoNavi-Wails/internal/logger"
)
var damengDatabaseQueries = []string{
+ // 优先使用达梦原生系统表
+ "SELECT DISTINCT OBJECT_NAME AS DATABASE_NAME FROM SYS.SYSOBJECTS WHERE TYPE$ = 'SCH' AND OBJECT_NAME NOT IN ('SYS','SYSDBA','SYSAUDITOR','SYSSSO','CTISYS','__RECYCLE_USER__') ORDER BY OBJECT_NAME",
+ "SELECT SCHEMA_NAME AS DATABASE_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME NOT IN ('SYS','SYSDBA','SYSAUDITOR','SYSSSO','CTISYS','INFORMATION_SCHEMA') ORDER BY SCHEMA_NAME",
+ // Oracle 兼容层
"SELECT SYS_CONTEXT('USERENV', 'CURRENT_SCHEMA') AS DATABASE_NAME FROM DUAL",
"SELECT SYS_CONTEXT('USERENV', 'CURRENT_USER') AS DATABASE_NAME FROM DUAL",
"SELECT USERNAME AS DATABASE_NAME FROM USER_USERS",
@@ -24,12 +30,14 @@ func collectDamengDatabaseNames(query damengQueryFunc) ([]string, error) {
dbs := make([]string, 0, 64)
var lastErr error
- for _, q := range damengDatabaseQueries {
+ for idx, q := range damengDatabaseQueries {
data, _, err := query(q)
if err != nil {
+ logger.Warnf("达梦 GetDatabases 查询[%d]失败：%v（SQL: %.80s…）", idx, err, q)
lastErr = err
continue
}
+ newCount := 0
for _, row := range data {
name := getDamengRowString(row,
"DATABASE_NAME",
@@ -58,10 +66,14 @@ func collectDamengDatabaseNames(query damengQueryFunc) ([]string, error) {
}
seen[key] = struct{}{}
dbs = append(dbs, name)
+ newCount++
}
+ logger.Infof("达梦 GetDatabases 查询[%d]成功：返回 %d 行，新增 %d 条（SQL: %.80s…）", idx, len(data), newCount, q)
}
+ logger.Infof("达梦 GetDatabases 最终结果：共 %d 条数据库/schema", len(dbs))
if len(dbs) == 0 && lastErr != nil {
+ logger.Warnf("达梦 GetDatabases 所有查询均失败，返回最后错误：%v", lastErr)
return nil, lastErr
}
+ }
+ type={dataPanelOpen ? 'primary' : 'default'}
+ onClick={() => {
+ const next = !dataPanelOpen;
+ setDataPanelOpen(next);
+ if (!next) {
+ setFocusedCellInfo(null);
+ setDataPanelValue('');
+ setDataPanelIsJson(false);
+ dataPanelDirtyRef.current = false;
+ }
+ }}
+ >
+ 数据预览
+
+
= ({
} onClick={() => removeFilter(cond.id)} type="text" danger />
))}
-
+ {onSort && (
+
@@ -4635,12 +4933,40 @@ const DataGrid: React.FC 0 ? 4 : 0, borderTop: filterConditions.length > 0 ? `1px dashed ${panelFrameColor}` : 'none' }}>
+ {sortInfo.map((s, idx) => (
+
+ )}
+
+ {
+ const next = [...sortInfo];
+ next[idx] = { ...next[idx], enabled: e.target.checked };
+ onSort(JSON.stringify(next), '');
+ }}
+ style={{ flex: '0 0 auto' }}
+ />
+ {idx === 0 ? '排序' : '然后'}
+
+ ))}
+ } onClick={() => {
+ const next = [...sortInfo, { columnKey: displayColumnNames.find(c => !sortInfo.some(s => s.columnKey === c)) || displayColumnNames[0] || '', order: 'ascend', enabled: true }];
+ onSort(JSON.stringify(next), '');
+ }} disabled={sortInfo.length >= displayColumnNames.length} style={{ marginBottom: 4 }}>添加排序
+ 0) ? 4 : 0, paddingTop: (onSort && sortInfo.length > 0) ? 6 : 0, borderTop: (onSort && sortInfo.length > 0) ? `1px dashed ${panelFrameColor}` : 'none' }}>
}>添加条件
+
+
} onClick={() => {
setFilterConditions([]);
if (onApplyFilter) onApplyFilter([]);
+ if (onSort) onSort('', '');
}}>清除
+
+ )}
+
{/* Cell Context Menu - 使用 Portal 渲染到 body，避免 backdropFilter 影响 fixed 定位 */}
{viewMode === 'table' && cellContextMenu.visible && createPortal(
+
+ {focusedCellInfo ? focusedCellInfo.dataIndex : '点击单元格查看数据'}
+
+ {focusedCellInfo && (() => {
+ const meta = columnMetaMap[focusedCellInfo.dataIndex] || columnMetaMapByLowerName[focusedCellInfo.dataIndex.toLowerCase()];
+ return meta?.type ? ({meta.type}) : null;
+ })()}
+
+ {dataPanelIsJson && (
+
+ )}
+ {canModifyData && focusedCellInfo && (
+
+ )}
+
+
+ {focusedCellInfo ? (
+ {
+ setDataPanelValue(val || '');
+ dataPanelDirtyRef.current = true;
+ }}
+ options={{
+ minimap: { enabled: false },
+ scrollBeyondLastLine: false,
+ wordWrap: 'on',
+ fontSize: 13,
+ tabSize: 2,
+ automaticLayout: true,
+ readOnly: !canModifyData,
+ lineNumbers: 'off',
+ glyphMargin: false,
+ folding: false,
+ lineDecorationsWidth: 4,
+ padding: { top: 6, bottom: 6 },
+ }}
+ />
+ ) : (
+
+
+ 点击表格中的单元格以预览完整数据
+
+ )}
+ ;
scrollTop: number;
scrollLeft: number;
};
@@ -185,16 +185,17 @@ const normalizeViewerFilterConditions = (conditions: FilterCondition[] | undefin
const getViewerFilterSnapshot = (tabId: string): ViewerFilterSnapshot => {
const cached = viewerFilterSnapshotsByTab.get(String(tabId || '').trim());
if (!cached) {
- return { showFilter: false, conditions: [], currentPage: 1, pageSize: 100, sortInfo: null, scrollTop: 0, scrollLeft: 0 };
+ return { showFilter: false, conditions: [], currentPage: 1, pageSize: 100, sortInfo: [], scrollTop: 0, scrollLeft: 0 };
}
return {
showFilter: cached.showFilter === true,
conditions: normalizeViewerFilterConditions(cached.conditions),
currentPage: Number.isFinite(Number(cached.currentPage)) && Number(cached.currentPage) > 0 ? Number(cached.currentPage) : 1,
pageSize: Number.isFinite(Number(cached.pageSize)) && Number(cached.pageSize) > 0 ? Number(cached.pageSize) : 100,
- sortInfo: cached.sortInfo && cached.sortInfo.columnKey && (cached.sortInfo.order === 'ascend' || cached.sortInfo.order === 'descend')
- ? { columnKey: String(cached.sortInfo.columnKey), order: cached.sortInfo.order }
- : null,
+ sortInfo: Array.isArray(cached.sortInfo)
+ ? cached.sortInfo.filter(s => s && s.columnKey && (s.order === 'ascend' || s.order === 'descend'))
+ .map(s => ({ columnKey: String(s.columnKey), order: s.order }))
+ : (cached.sortInfo && (cached.sortInfo as any).columnKey ? [{ columnKey: String((cached.sortInfo as any).columnKey), order: (cached.sortInfo as any).order }] : []),
scrollTop: Number.isFinite(Number(cached.scrollTop)) ? Number(cached.scrollTop) : 0,
scrollLeft: Number.isFinite(Number(cached.scrollLeft)) ? Number(cached.scrollLeft) : 0,
};
@@ -238,7 +239,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
totalCountCancelled: false,
});
- const [sortInfo, setSortInfo] = useState<{ columnKey: string, order: string } | null>(initialViewerSnapshot.sortInfo);
+ const [sortInfo, setSortInfo] = useState>(initialViewerSnapshot.sortInfo);
const [showFilter, setShowFilter] = useState(initialViewerSnapshot.showFilter);
const [filterConditions, setFilterConditions] = useState(initialViewerSnapshot.conditions);
@@ -511,7 +512,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
}
};
- const hasSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
+ const hasSort = hasExplicitSort(sortInfo);
const isSortMemoryErr = (msg: string) => /error\s*1038|out of sort memory/i.test(String(msg || ''));
let resData = await executeDataQuery(sql, '主查询');
@@ -788,13 +789,21 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
fetchData(pagination.current, pagination.pageSize);
}, [fetchData, pagination.current, pagination.pageSize]);
const handleSort = useCallback((field: string, order: string) => {
+ // 支持多字段排序：field 为 JSON 数组字符串时解析为多字段
+ try {
+ const parsed = JSON.parse(field);
+ if (Array.isArray(parsed)) {
+ setSortInfo(parsed.filter((s: any) => s && s.columnKey && (s.order === 'ascend' || s.order === 'descend')));
+ return;
+ }
+ } catch { /* 单字段模式 */ }
const normalizedOrder = order === 'ascend' || order === 'descend' ? order : '';
const normalizedField = String(field || '').trim();
if (!normalizedField || !normalizedOrder) {
- setSortInfo(null);
+ setSortInfo([]);
return;
}
- setSortInfo({ columnKey: normalizedField, order: normalizedOrder });
+ setSortInfo([{ columnKey: normalizedField, order: normalizedOrder, enabled: true }]);
}, []);
const handlePageChange = useCallback((page: number, size: number) => fetchData(page, size), [fetchData]);
const handleToggleFilter = useCallback(() => setShowFilter(prev => !prev), []);
@@ -811,8 +820,8 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
let sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
sql += buildOrderBySQL(dbType, sortInfo, pkColumns);
const normalizedType = dbType.toLowerCase();
- const hasExplicitSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
- if (hasExplicitSort && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
+ const hasSortForBuffer = hasExplicitSort(sortInfo);
+ if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
}
return sql;
diff --git a/frontend/src/components/DatabaseIcons.tsx b/frontend/src/components/DatabaseIcons.tsx
new file mode 100644
index 0000000..6d55fb2
--- /dev/null
+++ b/frontend/src/components/DatabaseIcons.tsx
@@ -0,0 +1,217 @@
+import React from 'react';
+
+// ─── 公共接口 ───────────────────────────────────────────────
+
+export interface DbIconProps {
+ size?: number;
+ color?: string;
+}
+
+// ─── 默认色表 ───────────────────────────────────────────────
+
+const DB_DEFAULT_COLORS: Record = {
+ mysql: '#00758F',
+ mariadb: '#003545',
+ postgres: '#336791',
+ redis: '#DC382D',
+ mongodb: '#47A248',
+ kingbase: '#1890FF',
+ dameng: '#E6002D',
+ oracle: '#F80000',
+ sqlserver: '#CC2927',
+ clickhouse: '#FFBF00',
+ sqlite: '#003B57',
+ duckdb: '#FFC107',
+ vastbase: '#0066CC',
+ highgo: '#00A86B',
+ tdengine: '#2962FF',
+ diros: '#0050B3',
+ sphinx: '#2F5D62',
+ custom: '#888888',
+};
+
+export const getDbDefaultColor = (type: string): string =>
+ DB_DEFAULT_COLORS[type?.toLowerCase()] || DB_DEFAULT_COLORS.custom;
+
+// ─── 有品牌 SVG 文件的数据库类型（文件在 /db-icons/ 下） ────
+
+const BRAND_SVG_TYPES = new Set([
+ 'mysql', 'mariadb', 'postgres', 'redis', 'mongodb', 'clickhouse', 'sqlite',
+ 'diros', 'sphinx', 'duckdb',
+]);
+
+/** 品牌 SVG 图标：用 ![]()
加载 /db-icons/*.svg */
+const BrandSvgIcon: React.FC<{ type: string; size: number; color?: string }> = ({ type, size, color }) => {
+ const bgColor = color || getDbDefaultColor(type);
+ return (
+
+ 
+
+ );
+};
+
+// ─── 彩色标签图标（fallback） ──────────────────────────────
+
+/** 通用彩色标签：填充背景 + 白色粗体缩写 */
+const ColorBadge: React.FC<{ size: number; color: string; label: string }> = ({ size, color, label }) => {
+ const textSize = label.length <= 2 ? size * 0.48 : size * 0.38;
+ return (
+
+ );
+};
+
+// ─── 各数据库图标 ───────────────────────────────────────────
+
+// 有品牌 SVG 的数据库
+const MySQLIcon: React.FC = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => {
+ const c = color || DB_DEFAULT_COLORS.custom;
+ return (
+
+ );
+};
+
+// ─── 图标注册表 ─────────────────────────────────────────────
+
+const DorisIconFallback: React.FC = ({ size = 16, color }) => (
+ = ({ size = 16, color }) => (
+ > = {
+ mysql: MySQLIcon,
+ mariadb: MariaDBIcon,
+ diros: DorisIcon,
+ sphinx: SphinxIcon,
+ postgres: PostgresIcon,
+ redis: RedisIcon,
+ mongodb: MongoDBIcon,
+ kingbase: KingBaseIcon,
+ dameng: DamengIcon,
+ oracle: OracleIcon,
+ sqlserver: SQLServerIcon,
+ clickhouse: ClickHouseIcon,
+ sqlite: SQLiteIcon,
+ duckdb: DuckDBIcon,
+ vastbase: VastBaseIcon,
+ highgo: HighGoIcon,
+ tdengine: TDengineIcon,
+ custom: CustomIcon,
+};
+
+/** 可选图标类型列表（用于图标选择器 UI） */
+export const DB_ICON_TYPES: string[] = [
+ 'mysql', 'mariadb', 'postgres', 'redis', 'mongodb',
+ 'oracle', 'sqlserver', 'sqlite', 'duckdb', 'clickhouse',
+ 'kingbase', 'dameng', 'vastbase', 'highgo', 'tdengine', 'custom',
+];
+
+/** 该类型是否有品牌 SVG 文件 */
+export const hasBrandSvg = (type: string): boolean => BRAND_SVG_TYPES.has(type?.toLowerCase());
+
+/** 获取数据库图标 React 节点 */
+export const getDbIcon = (type: string, color?: string, size?: number): React.ReactNode => {
+ const key = (type || 'custom').toLowerCase();
+ const Component = DB_ICON_MAP[key] || CustomIcon;
+ return = {
+ mysql: 'MySQL', mariadb: 'MariaDB', postgres: 'PostgreSQL',
+ redis: 'Redis', mongodb: 'MongoDB', oracle: 'Oracle',
+ sqlserver: 'SQL Server', clickhouse: 'ClickHouse', sqlite: 'SQLite',
+ duckdb: 'DuckDB', kingbase: '金仓', dameng: '达梦',
+ vastbase: 'VastBase', highgo: '瀚高', tdengine: 'TDengine',
+ custom: '自定义',
+ };
+ return labels[type?.toLowerCase()] || type;
+};
+
+/** 预设颜色列表 */
+export const PRESET_ICON_COLORS: string[] = [
+ '#336791', '#00758F', '#DC382D', '#47A248', '#F80000',
+ '#CC2927', '#1890FF', '#E6002D', '#FFBF00', '#2962FF',
+ '#00A86B', '#0066CC', '#FF6B35', '#7C3AED',
+];
diff --git a/frontend/src/components/QueryEditor.tsx b/frontend/src/components/QueryEditor.tsx
index 1a92a5f..5f66560 100644
--- a/frontend/src/components/QueryEditor.tsx
+++ b/frontend/src/components/QueryEditor.tsx
@@ -173,6 +173,16 @@ const SQL_FUNCTIONS: { name: string; detail: string }[] = [
// 模块级标志：确保 SQL completion provider 全局只注册一次
let sqlCompletionRegistered = false;
+// 模块级共享变量：completion provider 从这些变量读取当前活跃 Tab 的状态。
+// 每个 QueryEditor 实例在成为活跃 Tab 时更新这些变量，确保 provider 始终使用正确的上下文。
+let sharedCurrentDb = '';
+let sharedCurrentConnectionId = '';
+let sharedConnections: any[] = [];
+let sharedTablesData: {dbName: string, tableName: string}[] = [];
+let sharedAllColumnsData: {dbName: string, tableName: string, name: string, type: string}[] = [];
+let sharedVisibleDbs: string[] = [];
+let sharedColumnsCacheData: Record = {};
+
const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
const [query, setQuery] = useState(tab.query || 'SELECT * FROM ');
@@ -269,6 +279,19 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
currentDbRef.current = currentDb;
}, [currentDb]);
+ // 当此 Tab 成为活跃 Tab 时，将本实例的状态同步到模块级共享变量
+ // 确保 completion provider 始终使用当前活跃 Tab 的上下文
+ useEffect(() => {
+ if (activeTabId !== tab.id) return;
+ sharedCurrentDb = currentDb;
+ sharedCurrentConnectionId = currentConnectionId;
+ sharedConnections = connections;
+ sharedTablesData = tablesRef.current;
+ sharedAllColumnsData = allColumnsRef.current;
+ sharedVisibleDbs = visibleDbsRef.current;
+ sharedColumnsCacheData = columnsCacheRef.current;
+ }, [activeTabId, tab.id, currentDb, currentConnectionId, connections]);
+
useEffect(() => {
connectionsRef.current = connections;
}, [connections]);
@@ -325,6 +348,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
// 存储可见数据库列表用于跨库智能提示
visibleDbsRef.current = dbs;
+ if (activeTabId === tab.id) {
+ sharedVisibleDbs = dbs;
+ }
setDbList(dbs);
if (!currentDbRef.current) {
@@ -333,6 +359,9 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
}
} else {
visibleDbsRef.current = [];
+ if (activeTabId === tab.id) {
+ sharedVisibleDbs = [];
+ }
setDbList([]);
}
};
@@ -387,6 +416,11 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
tablesRef.current = allTables;
allColumnsRef.current = allColumns;
+ // 如果当前 Tab 是活跃 Tab，同步更新共享变量
+ if (activeTabId === tab.id) {
+ sharedTablesData = allTables;
+ sharedAllColumnsData = allColumns;
+ }
};
void fetchMetadata();
}, [currentConnectionId, connections, dbList]); // dbList 变化时触发重新加载
@@ -487,8 +521,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
};
const buildConnConfig = () => {
- const connId = currentConnectionIdRef.current;
- const conn = connectionsRef.current.find(c => c.id === connId);
+ const connId = sharedCurrentConnectionId;
+ const conn = sharedConnections.find(c => c.id === connId);
if (!conn) return null;
return {
...conn.config,
@@ -501,11 +535,11 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
};
const getColumnsByDB = async (tableIdent: string) => {
- const connId = currentConnectionIdRef.current;
- const dbName = currentDbRef.current;
+ const connId = sharedCurrentConnectionId;
+ const dbName = sharedCurrentDb;
if (!connId || !dbName) return [] as ColumnDefinition[];
const key = `${connId}|${dbName}|${tableIdent}`;
- const cached = columnsCacheRef.current[key];
+ const cached = sharedColumnsCacheData[key];
if (cached) return cached;
const config = buildConnConfig();
@@ -514,7 +548,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
const res = await DBGetColumns(config as any, dbName, tableIdent);
if (res?.success && Array.isArray(res.data)) {
const cols = res.data as ColumnDefinition[];
- columnsCacheRef.current[key] = cols;
+ sharedColumnsCacheData[key] = cols;
return cols;
}
return [] as ColumnDefinition[];
@@ -533,7 +567,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
const colPrefix = (threePartMatch[3] || '').toLowerCase();
// 在 allColumnsRef 中查找匹配的列
- const cols = allColumnsRef.current.filter(c =>
+ const cols = sharedAllColumnsData.filter(c =>
(c.dbName || '').toLowerCase() === dbPart.toLowerCase() &&
(c.tableName || '').toLowerCase() === tablePart.toLowerCase()
);
@@ -561,10 +595,10 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
const qualifierLower = qualifier.toLowerCase();
// 首先检查 qualifier 是否是数据库名（跨库表提示）
- const visibleDbs = visibleDbsRef.current;
+ const visibleDbs = sharedVisibleDbs;
if (visibleDbs.some(db => db.toLowerCase() === qualifierLower)) {
// qualifier 是数据库名，提示该库的表
- const tables = tablesRef.current.filter(t =>
+ const tables = sharedTablesData.filter(t =>
(t.dbName || '').toLowerCase() === qualifierLower
);
const filtered = prefix
@@ -583,7 +617,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
}
// qualifier 是 schema（如 dbo/public）时，仅补全表名，避免输入 dbo. 后再补成 dbo.dbo.table
- const schemaTables = tablesRef.current
+ const schemaTables = sharedTablesData
.map(t => {
const parsed = splitSchemaAndTable(t.tableName || '');
return {
@@ -627,7 +661,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
// 解析 db.table 或 table 格式
const parts = tableIdent.split('.');
- let dbName = currentDbRef.current || '';
+ let dbName = sharedCurrentDb || '';
let tableName = tableIdent;
if (parts.length === 2) {
dbName = parts[0];
@@ -649,8 +683,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
if (tableInfo) {
// Prefer preloaded MySQL all-columns cache
let cols: { name: string, type?: string, tableName?: string, dbName?: string }[];
- if (allColumnsRef.current.length > 0) {
- cols = allColumnsRef.current
+ if (sharedAllColumnsData.length > 0) {
+ cols = sharedAllColumnsData
.filter(c =>
(c.dbName || '').toLowerCase() === (tableInfo.dbName || '').toLowerCase() &&
(c.tableName || '').toLowerCase() === (tableInfo.tableName || '').toLowerCase()
@@ -688,7 +722,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
foundTables.add(t.toLowerCase());
}
- const currentDatabase = currentDbRef.current || '';
+ const currentDatabase = sharedCurrentDb || '';
const wordPrefix = (word.word || '').toLowerCase();
const startsWithPrefix = (candidate: string) => !wordPrefix || candidate.toLowerCase().startsWith(wordPrefix);
const expectsTableName = /\b(?:FROM|JOIN|UPDATE|INTO|DELETE\s+FROM|TABLE|DESCRIBE|DESC|EXPLAIN)\s+[`"]?[\w.]*$/i.test(linePrefix.trim());
@@ -703,7 +737,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
// 相关列提示：匹配 SQL 中引用的表（FROM/JOIN 等）
// 权重最高，输入 WHERE 条件时优先显示
- const relevantColumns = allColumnsRef.current
+ const relevantColumns = sharedAllColumnsData
.filter(c => {
const fullIdent = `${c.dbName}.${c.tableName}`.toLowerCase();
const shortIdent = (c.tableName || '').toLowerCase();
@@ -723,7 +757,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
});
// 表提示：当前库显示表名，其他库显示 db.table 格式
- const tableSuggestions = tablesRef.current
+ const tableSuggestions = sharedTablesData
.filter(t => {
const isCurrentDb = (t.dbName || '').toLowerCase() === currentDatabase.toLowerCase();
const label = isCurrentDb ? t.tableName : `${t.dbName}.${t.tableName}`;
@@ -744,7 +778,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
});
// 数据库提示
- const dbSuggestions = visibleDbsRef.current
+ const dbSuggestions = sharedVisibleDbs
.filter((db) => startsWithPrefix(db))
.map(db => ({
label: db,
@@ -1313,6 +1347,72 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
return selected;
};
+ // 精准重查询单个结果集（提交事务 / 刷新按钮使用），不会重跑整个编辑器 SQL
+ const handleReloadResult = async (resultKey: string, sql: string) => {
+ if (!sql?.trim() || !currentDb) return;
+ const conn = connections.find(c => c.id === currentConnectionId);
+ if (!conn) return;
+
+ const config = {
+ ...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: "" }
+ };
+
+ try {
+ setLoading(true);
+ // 使用 DBQueryMulti 保持和首次查询一致的后端路径
+ let queryId: string;
+ try {
+ queryId = await GenerateQueryID();
+ } catch {
+ queryId = 'reload-' + Date.now();
+ }
+ const res = await DBQueryMulti(config as any, currentDb, sql, queryId);
+ if (!res?.success) {
+ message.error('刷新失败: ' + (res?.message || '未知错误'));
+ return;
+ }
+
+ // 取第一个结果集（单条 SQL 只有一个结果集）
+ const resultSetDataArray = Array.isArray(res.data) ? (res.data as any[]) : [];
+ if (resultSetDataArray.length === 0) return;
+ const rsData = resultSetDataArray[0];
+ const isAffectedResult = Array.isArray(rsData.rows) && rsData.rows.length === 1
+ && rsData.columns && rsData.columns.length === 1
+ && rsData.columns[0] === 'affectedRows';
+ if (isAffectedResult) return; // 不应该出现，但保险起见
+
+ let rows = Array.isArray(rsData.rows) ? rsData.rows : [];
+ const maxRows = Number(queryOptions?.maxRows) || 0;
+ let truncated = false;
+ if (Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) {
+ truncated = true;
+ rows = rows.slice(0, maxRows);
+ }
+ const cols = (rsData.columns && rsData.columns.length > 0)
+ ? rsData.columns
+ : (rows.length > 0 ? Object.keys(rows[0]) : []);
+ rows.forEach((row: any, i: number) => {
+ if (row && typeof row === 'object') row[GONAVI_ROW_KEY] = i;
+ });
+
+ // 只更新匹配的结果集的 rows 和 columns，保留 tableName/pkColumns/readOnly 等元数据
+ setResultSets(prev => prev.map(rs =>
+ rs.key === resultKey
+ ? { ...rs, rows, columns: cols, truncated }
+ : rs
+ ));
+ } catch (err: any) {
+ message.error('刷新失败: ' + (err?.message || '未知错误'));
+ } finally {
+ setLoading(false);
+ }
+ };
+
const handleRun = async () => {
const currentQuery = getCurrentQuery();
if (!currentQuery.trim()) return;
@@ -1475,9 +1575,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
} else if (nextResultSets.length === 0) {
message.success('执行成功。');
}
- if (anyTruncated && maxRows > 0) {
- message.warning(`结果集已自动限制为最多 ${maxRows} 行（可在工具栏调整）。`);
- }
+
} else {
// 非 MongoDB：使用 DBQueryMulti 一次性执行多条 SQL，后端返回多结果集
let fullSQL = normalizedRawSQL;
@@ -1490,10 +1588,12 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
// 自动给 SELECT 语句注入行数限制（防止大结果集卡死）
const maxRowsForLimit = Number(queryOptions?.maxRows) || 0;
+ let anyLimitApplied = false;
if (Number.isFinite(maxRowsForLimit) && maxRowsForLimit > 0) {
const stmts = splitSQLStatements(fullSQL);
const limitedStmts = stmts.map(s => {
const result = applyAutoLimit(s, normalizedDbType, maxRowsForLimit);
+ if (result.applied) anyLimitApplied = true;
return result.sql;
});
fullSQL = limitedStmts.join(';\n');
@@ -1586,7 +1686,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
} else {
let rows = Array.isArray(rsData.rows) ? rsData.rows : [];
let truncated = false;
- if (Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) {
+ // 仅当前端自动注入了 LIMIT 时才做兜底截断；用户手写 LIMIT 时尊重原始结果
+ if (anyLimitApplied && Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) {
truncated = true;
anyTruncated = true;
rows = rows.slice(0, maxRows);
@@ -1601,7 +1702,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
let simpleTableName: string | undefined = undefined;
if (rawStatement) {
- const tableMatch = rawStatement.match(/^\s*SELECT\s+\*\s+FROM\s+[`"]?(\w+)[`"]?\s*(?:WHERE.*)?(?:ORDER BY.*)?(?:LIMIT.*)?$/i);
+ // 支持多行 SQL：SELECT * FROM [schema.]table [WHERE...] [ORDER BY...] [LIMIT...] 等
+ const tableMatch = rawStatement.match(/^\s*SELECT\s+\*\s+FROM\s+(?:[\w`"]+\.)?[`"]?(\w+)[`"]?\s*(?:$|[\s;])/im);
if (tableMatch) {
simpleTableName = tableMatch[1];
if (!forceReadOnlyResult) {
@@ -1654,9 +1756,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
} else if (nextResultSets.length === 0) {
message.success('执行成功。');
}
- if (anyTruncated && maxRows > 0) {
- message.warning(`结果集已自动限制为最多 ${maxRows} 行（可在工具栏调整）。`);
- }
+
}
} catch (e: any) {
message.error("Error executing query: " + e.message);
@@ -2015,7 +2115,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
{(() => {
const isAffected = rs.columns.length === 1 && rs.columns[0] === 'affectedRows';
if (isAffected) return `结果 ${idx + 1} ✓`;
- return `结果 ${idx + 1}${Array.isArray(rs.rows) ? ` (${rs.rows.length}${rs.truncated ? '+' : ''})` : ''}`;
+ return `结果 ${idx + 1}${Array.isArray(rs.rows) ? ` (${rs.rows.length})` : ''}`;
})()}
@@ -2060,7 +2160,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => {
dbName={currentDb}
connectionId={currentConnectionId}
pkColumns={rs.pkColumns}
- onReload={handleRun}
+ onReload={() => handleReloadResult(rs.key, rs.sql)}
readOnly={rs.readOnly}
/>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index ae0a9e9..d0f4e47 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -35,6 +35,7 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge,
import { useStore } from '../store';
import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
import { SavedConnection } from '../types';
+import { getDbIcon } from './DatabaseIcons';
import { DBGetDatabases, DBGetTables, DBQuery, DBShowCreateTable, ExportTable, OpenSQLFile, ExecuteSQLFile, CancelSQLFileExecution, CreateDatabase, RenameDatabase, DropDatabase, RenameTable, DropTable, DropView, DropFunction, RenameView } from '../../wailsjs/go/app/App';
import { EventsOn } from '../../wailsjs/runtime/runtime';
import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
@@ -329,7 +330,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
return {
title: conn.name,
key: conn.id,
- icon: conn.config.type === 'redis' ?
+
+ );
+};
+
+// ─── 彩色标签图标（fallback） ──────────────────────────────
+
+/** 通用彩色标签：填充背景 + 白色粗体缩写 */
+const ColorBadge: React.FC<{ size: number; color: string; label: string }> = ({ size, color, label }) => {
+ const textSize = label.length <= 2 ? size * 0.48 : size * 0.38;
+ return (
+
+ );
+};
+
+// ─── 各数据库图标 ───────────────────────────────────────────
+
+// 有品牌 SVG 的数据库
+const MySQLIcon: React.FC