diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx index 8601b35..04b1f37 100644 --- a/frontend/src/components/DataGrid.tsx +++ b/frontend/src/components/DataGrid.tsx @@ -1,11 +1,13 @@ import React, { useState, useEffect, useRef, useContext, useMemo, useCallback } from 'react'; import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Modal } from 'antd'; import type { SortOrder } from 'antd/es/table/interface'; -import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined } from '@ant-design/icons'; -import { ImportData, ExportTable, ExportData, ApplyChanges } from '../../wailsjs/go/app/App'; +import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined, EditOutlined } from '@ant-design/icons'; +import Editor from '@monaco-editor/react'; +import { ImportData, ExportTable, ExportData, ExportQuery, ApplyChanges } from '../../wailsjs/go/app/App'; import { useStore } from '../store'; import { v4 as uuidv4 } from 'uuid'; import 'react-resizable/css/styles.css'; +import { buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent } from '../utils/sql'; // 内部行标识字段：避免与真实业务字段（如 `key` 列）冲突。 export const GONAVI_ROW_KEY = '__gonavi_row_key__'; @@ -27,16 +29,47 @@ const formatCellValue = (val: any) => { return String(val); }; +const toEditableText = (val: any): string => { + if (val === null || val === undefined) return ''; + if (typeof val === 'string') return val; + try { + return JSON.stringify(val, null, 2); + } catch { + return String(val); + } +}; + +const toFormText = (val: any): string => { + if (val === null || val === undefined) return ''; + if (typeof val === 'string') return normalizeDateTimeString(val); + return toEditableText(val); +}; + +const looksLikeJsonText = (text: string): boolean => { + const raw = (text || '').trim(); + if (!raw) return false; + const first = raw[0]; + const last = raw[raw.length - 1]; + return (first === '{' && last === '}') || (first === '[' && last === ']'); +}; + // --- Resizable Header (Native Implementation) --- const ResizableTitle = (props: any) => { const { onResizeStart, width, ...restProps } = props; - if (!width) { - return ; + const nextStyle = { ...(restProps.style || {}) } as React.CSSProperties; + if (width) { + nextStyle.width = width; + } + + // 注意：virtual table 模式下，rc-table 会依赖 header cell 的 width 样式来渲染选择列。 + // 若这里丢失 width，可能导致左上角“全选”checkbox 不显示。 + if (!width || typeof onResizeStart !== 'function') { + return ; } return ( - + {restProps.children} void; + focusCell?: (record: Item, dataIndex: string, title: React.ReactNode) => void; [key: string]: any; } @@ -95,6 +129,7 @@ const EditableCell: React.FC = React.memo(({ dataIndex, record, handleSave, + focusCell, ...restProps }) => { const [editing, setEditing] = useState(false); @@ -139,7 +174,26 @@ const EditableCell: React.FC = React.memo(({ ); } - return {childNode}; + const handleDoubleClick = () => { + if (!editable) return; + toggleEdit(); + }; + + const handleClick = (e: React.MouseEvent) => { + restProps?.onClick?.(e); + if (!editable) return; + if (typeof focusCell === 'function') focusCell(record, dataIndex, title); + }; + + return ( + + {childNode} + + ); }); const ContextMenuRow = React.memo(({ children, record, ...props }: any) => { @@ -221,9 +275,23 @@ const DataGrid: React.FC = ({ }) => { const { connections } = useStore(); const addSqlLog = useStore(state => state.addSqlLog); + const darkMode = useStore(state => state.darkMode); + const selectionColumnWidth = 46; const [form] = Form.useForm(); const [modal, contextHolder] = Modal.useModal(); const gridId = useMemo(() => `grid-${uuidv4()}`, []); + const [cellEditorOpen, setCellEditorOpen] = useState(false); + const [cellEditorValue, setCellEditorValue] = useState(''); + const [cellEditorIsJson, setCellEditorIsJson] = useState(false); + const [cellEditorMeta, setCellEditorMeta] = useState<{ record: Item; dataIndex: string; title: string } | null>(null); + const cellEditorApplyRef = useRef<((val: string) => void) | null>(null); + const [activeCell, setActiveCell] = useState<{ rowKey: string; dataIndex: string; title: string } | null>(null); + const [rowEditorOpen, setRowEditorOpen] = useState(false); + const [rowEditorRowKey, setRowEditorRowKey] = useState(''); + const rowEditorBaseRef = useRef>({}); + const rowEditorDisplayRef = useRef>({}); + const rowEditorNullColsRef = useRef>(new Set()); + const [rowEditorForm] = Form.useForm(); // Helper to export specific data const exportData = async (rows: any[], format: string) => { @@ -237,6 +305,28 @@ const DataGrid: React.FC = ({ const [sortInfo, setSortInfo] = useState<{ columnKey: string, order: string } | null>(null); const [columnWidths, setColumnWidths] = useState>({}); + + const closeCellEditor = useCallback(() => { + setCellEditorOpen(false); + setCellEditorMeta(null); + setCellEditorValue(''); + setCellEditorIsJson(false); + cellEditorApplyRef.current = null; + }, []); + + const openCellEditor = useCallback((record: Item, dataIndex: string, title: React.ReactNode, onApplyValue?: (val: string) => void) => { + if (!record || !dataIndex) return; + const raw = record?.[dataIndex]; + const text = toEditableText(raw); + const isJson = looksLikeJsonText(text); + const titleText = typeof title === 'string' ? title : (typeof title === 'number' ? String(title) : String(dataIndex)); + + setCellEditorMeta({ record, dataIndex, title: titleText }); + setCellEditorValue(text); + setCellEditorIsJson(isJson); + setCellEditorOpen(true); + cellEditorApplyRef.current = typeof onApplyValue === 'function' ? onApplyValue : null; + }, []); // Dynamic Height const [tableHeight, setTableHeight] = useState(500); @@ -284,7 +374,7 @@ const DataGrid: React.FC = ({ const [deletedRowKeys, setDeletedRowKeys] = useState>(new Set()); // Filter State - const [filterConditions, setFilterConditions] = useState<{ id: number, column: string, op: string, value: string }[]>([]); + const [filterConditions, setFilterConditions] = useState<{ id: number, column: string, op: string, value: string, value2?: string }[]>([]); const [nextFilterId, setNextFilterId] = useState(1); const selectedRowKeysRef = useRef(selectedRowKeys); @@ -298,6 +388,14 @@ const DataGrid: React.FC = ({ setModifiedRows({}); setDeletedRowKeys(new Set()); setSelectedRowKeys([]); + setActiveCell(null); + setRowEditorOpen(false); + setRowEditorRowKey(''); + rowEditorBaseRef.current = {}; + rowEditorDisplayRef.current = {}; + rowEditorNullColsRef.current = new Set(); + rowEditorForm.resetFields(); + closeCellEditor(); form.resetFields(); }, [tableName, dbName, connectionId]); // Reset on context change @@ -452,6 +550,29 @@ const DataGrid: React.FC = ({ } }, [addedRows]); + const handleCellEditorSave = useCallback(() => { + if (!cellEditorMeta) return; + const apply = cellEditorApplyRef.current; + if (apply) { + apply(cellEditorValue); + closeCellEditor(); + return; + } + const nextRow: any = { ...cellEditorMeta.record, [cellEditorMeta.dataIndex]: cellEditorValue }; + handleCellSave(nextRow); + closeCellEditor(); + }, [cellEditorMeta, cellEditorValue, handleCellSave, closeCellEditor]); + + const handleFormatJsonInEditor = useCallback(() => { + if (!cellEditorIsJson) return; + try { + const obj = JSON.parse(cellEditorValue); + setCellEditorValue(JSON.stringify(obj, null, 2)); + } catch (e: any) { + message.error("JSON 格式无效：" + (e?.message || String(e))); + } + }, [cellEditorIsJson, cellEditorValue]); + // Merge Data for Display // 'displayData' already merges addedRows. // We need to merge modifiedRows into it for rendering. @@ -465,6 +586,110 @@ const DataGrid: React.FC = ({ }); }, [displayData, modifiedRows]); + const focusCell = useCallback((record: Item, dataIndex: string, title: React.ReactNode) => { + const k = record?.[GONAVI_ROW_KEY]; + if (k === undefined) return; + const titleText = typeof title === 'string' ? title : (typeof title === 'number' ? String(title) : String(dataIndex)); + setActiveCell({ rowKey: rowKeyStr(k), dataIndex, title: titleText }); + }, [rowKeyStr]); + + const closeRowEditor = useCallback(() => { + setRowEditorOpen(false); + setRowEditorRowKey(''); + rowEditorBaseRef.current = {}; + rowEditorDisplayRef.current = {}; + rowEditorNullColsRef.current = new Set(); + rowEditorForm.resetFields(); + }, [rowEditorForm]); + + const openRowEditor = useCallback(() => { + if (readOnly || !tableName) return; + if (selectedRowKeys.length > 1) { + message.info('一次只能编辑一行，请仅选择一行'); + return; + } + + const keyStr = + selectedRowKeys.length === 1 ? rowKeyStr(selectedRowKeys[0]) : activeCell?.rowKey; + if (!keyStr) { + message.info('请先选择一行（勾选一行或点击任意单元格）'); + return; + } + + const displayRow = mergedDisplayData.find(r => rowKeyStr(r?.[GONAVI_ROW_KEY]) === keyStr); + if (!displayRow) { + message.error('未找到目标行，请刷新后重试'); + return; + } + + const baseRow = + data.find(r => rowKeyStr(r?.[GONAVI_ROW_KEY]) === keyStr) || + addedRows.find(r => rowKeyStr(r?.[GONAVI_ROW_KEY]) === keyStr) || + displayRow; + + const baseMap: Record = {}; + const displayMap: Record = {}; + const nullCols = new Set(); + + columnNames.forEach((col) => { + const baseVal = (baseRow as any)?.[col]; + const displayVal = (displayRow as any)?.[col]; + baseMap[col] = toFormText(baseVal); + displayMap[col] = toFormText(displayVal); + if (baseVal === null || baseVal === undefined) nullCols.add(col); + }); + + rowEditorBaseRef.current = baseMap; + rowEditorDisplayRef.current = displayMap; + rowEditorNullColsRef.current = nullCols; + + rowEditorForm.setFieldsValue(displayMap); + setRowEditorRowKey(keyStr); + setRowEditorOpen(true); + }, [readOnly, tableName, selectedRowKeys, activeCell, mergedDisplayData, data, addedRows, columnNames, rowEditorForm, rowKeyStr]); + + const openRowEditorFieldEditor = useCallback((dataIndex: string) => { + if (!dataIndex) return; + const val = rowEditorForm.getFieldValue(dataIndex); + openCellEditor( + { [dataIndex]: val ?? '' }, + dataIndex, + dataIndex, + (nextVal) => rowEditorForm.setFieldsValue({ [dataIndex]: nextVal }), + ); + }, [rowEditorForm, openCellEditor]); + + const applyRowEditor = useCallback(() => { + const keyStr = rowEditorRowKey; + if (!keyStr) return; + const values = rowEditorForm.getFieldsValue(true) || {}; + + const isAdded = addedRows.some(r => rowKeyStr(r?.[GONAVI_ROW_KEY]) === keyStr); + if (isAdded) { + setAddedRows(prev => prev.map(r => rowKeyStr(r?.[GONAVI_ROW_KEY]) === keyStr ? { ...r, ...values } : r)); + closeRowEditor(); + return; + } + + const baseMap = rowEditorBaseRef.current || {}; + const patch: Record = {}; + columnNames.forEach((col) => { + const nextVal = values[col]; + const nextStr = toFormText(nextVal); + const baseStr = baseMap[col] ?? ''; + if (nextStr !== baseStr) patch[col] = nextStr; + }); + + setModifiedRows(prev => { + const next = { ...prev }; + if (Object.keys(patch).length === 0) delete next[keyStr]; + else next[keyStr] = patch; + return next; + }); + + closeRowEditor(); + }, [rowEditorRowKey, rowEditorForm, addedRows, columnNames, rowKeyStr, closeRowEditor]); + const columns = useMemo(() => { return columnNames.map(key => ({ title: key, @@ -493,9 +718,13 @@ const DataGrid: React.FC = ({ dataIndex: col.dataIndex, title: col.title, handleSave: handleCellSave, + focusCell, + className: (activeCell && rowKeyStr(record?.[GONAVI_ROW_KEY]) === activeCell.rowKey && col.dataIndex === activeCell.dataIndex) + ? 'gonavi-active-cell' + : undefined, }), }; - }), [columns, handleCellSave]); + }), [columns, handleCellSave, openCellEditor, focusCell, activeCell, rowKeyStr]); const handleAddRow = () => { const newKey = `new-${Date.now()}`; @@ -645,11 +874,98 @@ const DataGrid: React.FC = ({ copyToClipboard(lines.join('\n')); }, [getTargets, copyToClipboard]); + const buildConnConfig = useCallback(() => { + if (!connectionId) return null; + const conn = connections.find(c => c.id === connectionId); + if (!conn) return null; + return { + ...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: "" } + }; + }, [connections, connectionId]); + + const exportByQuery = useCallback(async (sql: string, format: string, defaultName: string) => { + const config = buildConnConfig(); + if (!config) return; + const hide = message.loading(`正在导出...`, 0); + const res = await ExportQuery(config as any, dbName || '', sql, defaultName || 'export', format); + hide(); + if (res.success) { + message.success("导出成功"); + } else if (res.message !== "Cancelled") { + message.error("导出失败: " + res.message); + } + }, [buildConnConfig, dbName]); + + const buildPkWhereSql = useCallback((rows: any[], dbType: string) => { + if (!tableName || pkColumns.length === 0) return ''; + const targets = (rows || []).filter(Boolean); + if (targets.length === 0) return ''; + + const clauses: string[] = []; + for (const r of targets) { + const andParts: string[] = []; + for (const pk of pkColumns) { + const col = quoteIdentPart(dbType, pk); + const v = r?.[pk]; + if (v === null || v === undefined) return ''; + andParts.push(`${col} = '${escapeLiteral(String(v))}'`); + } + if (andParts.length === pkColumns.length) { + clauses.push(`(${andParts.join(' AND ')})`); + } + } + if (clauses.length === 0) return ''; + return clauses.join(' OR '); + }, [pkColumns, tableName]); + + const buildCurrentPageSql = useCallback((dbType: string) => { + if (!tableName || !pagination) return ''; + const whereSQL = buildWhereSQL(dbType, filterConditions); + let sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`; + if (sortInfo && sortInfo.order) { + sql += ` ORDER BY ${quoteIdentPart(dbType, sortInfo.columnKey)} ${sortInfo.order === 'ascend' ? 'ASC' : 'DESC'}`; + } + const offset = (pagination.current - 1) * pagination.pageSize; + sql += ` LIMIT ${pagination.pageSize} OFFSET ${offset}`; + return sql; + }, [tableName, pagination, filterConditions, sortInfo]); + // Context Menu Export const handleExportSelected = useCallback(async (format: string, record: any) => { const records = getTargets(record); - await exportData(records, format); - }, [getTargets]); + if (!connectionId || !tableName) { + await exportData(records, format); + return; + } + + // 有未提交修改时，优先按界面数据导出，避免与数据库不一致。 + if (hasChanges) { + message.warning("当前存在未提交修改，导出将按界面数据生成；如需完整长字段建议先提交后再导出。"); + await exportData(records, format); + return; + } + + const config = buildConnConfig(); + if (!config) { + await exportData(records, format); + return; + } + + const dbType = config.type || ''; + const pkWhere = buildPkWhereSql(records, dbType); + if (!pkWhere) { + await exportData(records, format); + return; + } + + const sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} WHERE ${pkWhere}`; + await exportByQuery(sql, format, tableName || 'export'); + }, [getTargets, connectionId, tableName, hasChanges, exportData, buildConnConfig, buildPkWhereSql, exportByQuery]); // Export const handleExport = async (format: string) => { @@ -658,7 +974,7 @@ const DataGrid: React.FC = ({ // 1. Export Selected if (selectedRowKeys.length > 0) { const selectedRows = displayData.filter(d => selectedRowKeys.includes(d?.[GONAVI_ROW_KEY])); - await exportData(selectedRows, format); + await handleExportSelected(format, selectedRows[0]); return; } @@ -667,9 +983,8 @@ const DataGrid: React.FC = ({ let instance: any; const handleAll = async () => { instance.destroy(); - const conn = connections.find(c => c.id === connectionId); - 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: "" } }; + const config = buildConnConfig(); + if (!config) return; const hide = message.loading(`正在导出全部数据...`, 0); const res = await ExportTable(config as any, dbName || '', tableName, format); hide(); @@ -677,7 +992,25 @@ const DataGrid: React.FC = ({ }; const handlePage = async () => { instance.destroy(); - await exportData(displayData, format); + if (hasChanges) { + message.warning("当前存在未提交修改，导出将按界面数据生成；如需完整长字段建议先提交后再导出。"); + await exportData(displayData, format); + return; + } + + const config = buildConnConfig(); + if (!config) { + await exportData(displayData, format); + return; + } + + const sql = buildCurrentPageSql(config.type || ''); + if (!sql) { + await exportData(displayData, format); + return; + } + + await exportByQuery(sql, format, tableName || 'export'); }; instance = modal.info({ @@ -700,21 +1033,64 @@ const DataGrid: React.FC = ({ const handleImport = async () => { if (!connectionId || !tableName) return; - const conn = connections.find(c => c.id === connectionId); - 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: "" } }; + const config = buildConnConfig(); + if (!config) return; const res = await ImportData(config as any, dbName || '', tableName); if (res.success) { message.success(res.message); if (onReload) onReload(); } else if (res.message !== "Cancelled") { message.error("Import Failed: " + res.message); } }; // Filters + const filterOpOptions = useMemo(() => ([ + { value: '=', label: '=' }, + { value: '!=', label: '!=' }, + { value: '<', label: '<' }, + { value: '<=', label: '<=' }, + { value: '>', label: '>' }, + { value: '>=', label: '>=' }, + { value: 'CONTAINS', label: '包含' }, + { value: 'NOT_CONTAINS', label: '不包含' }, + { value: 'STARTS_WITH', label: '开始以' }, + { value: 'NOT_STARTS_WITH', label: '不是开始于' }, + { value: 'ENDS_WITH', label: '结束以' }, + { value: 'NOT_ENDS_WITH', label: '不是结束于' }, + { value: 'IS_NULL', label: '是 null' }, + { value: 'IS_NOT_NULL', label: '不是 null' }, + { value: 'IS_EMPTY', label: '是空的' }, + { value: 'IS_NOT_EMPTY', label: '不是空的' }, + { value: 'BETWEEN', label: '介于' }, + { value: 'NOT_BETWEEN', label: '不介于' }, + { value: 'IN', label: '在列表' }, + { value: 'NOT_IN', label: '不在列表' }, + { value: 'CUSTOM', label: '[自定义]' }, + ]), []); + + const isNoValueOp = useCallback((op: string) => ( + op === 'IS_NULL' || op === 'IS_NOT_NULL' || op === 'IS_EMPTY' || op === 'IS_NOT_EMPTY' + ), []); + const isBetweenOp = useCallback((op: string) => op === 'BETWEEN' || op === 'NOT_BETWEEN', []); + const isListOp = useCallback((op: string) => op === 'IN' || op === 'NOT_IN', []); + const addFilter = () => { - setFilterConditions([...filterConditions, { id: nextFilterId, column: columnNames[0] || '', op: '=', value: '' }]); + setFilterConditions([...filterConditions, { id: nextFilterId, column: columnNames[0] || '', op: '=', value: '', value2: '' }]); setNextFilterId(nextFilterId + 1); }; const updateFilter = (id: number, field: string, val: string) => { - setFilterConditions(prev => prev.map(c => c.id === id ? { ...c, [field]: val } : c)); + setFilterConditions(prev => prev.map(c => { + if (c.id !== id) return c; + const next: any = { ...c, [field]: val }; + if (field === 'op') { + if (isNoValueOp(val)) { + next.value = ''; + next.value2 = ''; + } else if (isBetweenOp(val)) { + if (typeof next.value2 !== 'string') next.value2 = ''; + } else { + next.value2 = ''; + } + } + return next; + })); }; const removeFilter = (id: number) => { setFilterConditions(prev => prev.filter(c => c.id !== id)); @@ -735,33 +1111,41 @@ const DataGrid: React.FC = ({ header: { cell: ResizableTitle } }), []); - const totalWidth = columns.reduce((sum, col) => sum + (col.width as number || 200), 0); + const totalWidth = columns.reduce((sum, col) => sum + (Number(col.width) || 200), 0) + selectionColumnWidth; const enableVirtual = mergedDisplayData.length >= 200; return (
- {/* Toolbar */} -
- {onReload && } - {tableName && } - {tableName && } - - {!readOnly && tableName && ( - <> -
- - - {selectedRowKeys.length > 0 && 已选 {selectedRowKeys.length}} -
- - {hasChanges && (} + {tableName && } + {tableName && } + + {!readOnly && tableName && ( + <> +
+ + + + {selectedRowKeys.length > 0 && 已选 {selectedRowKeys.length}} +
+ + {hasChanges && ()} @@ -783,10 +1167,62 @@ const DataGrid: React.FC = ({ {showFilter && (
{filterConditions.map(cond => ( -
- updateFilter(cond.id, 'op', v)} options={[{ value: '=', label: '=' }, { value: 'LIKE', label: '包含' }]} /> - updateFilter(cond.id, 'value', e.target.value)} /> +
+ updateFilter(cond.id, 'op', v)} + options={filterOpOptions as any} + /> + + {cond.op === 'CUSTOM' ? ( + updateFilter(cond.id, 'value', e.target.value)} + placeholder="输入自定义 WHERE 表达式（不需要再写 WHERE），例如：status IN ('A','B')" + /> + ) : isListOp(cond.op) ? ( + updateFilter(cond.id, 'value', e.target.value)} + placeholder="多个值用逗号或换行分隔" + /> + ) : isBetweenOp(cond.op) ? ( + <> + updateFilter(cond.id, 'value', e.target.value)} + placeholder="开始值" + /> + updateFilter(cond.id, 'value2', e.target.value)} + placeholder="结束值" + /> + + ) : isNoValueOp(cond.op) ? ( + + ) : ( + updateFilter(cond.id, 'value', e.target.value)} + /> + )} +
))} @@ -801,8 +1237,90 @@ const DataGrid: React.FC = ({
)} -
- {contextHolder} +
+ {contextHolder} + 取消, + , + ]} + > +
+ {tableName ? `${tableName}` : ''} + {rowEditorRowKey ? `rowKey: ${rowEditorRowKey}` : ''} +
+
+
+ {columnNames.map((col) => { + const sample = rowEditorDisplayRef.current?.[col] ?? ''; + const placeholder = rowEditorNullColsRef.current?.has(col) ? '(NULL)' : undefined; + const isJson = looksLikeJsonText(sample); + const useArea = isJson || sample.includes('\n') || sample.length >= 160; + + return ( + +
+ + {useArea ? ( + + ) : ( + + )} + + +
+ + ); + })} +
+
+ + + 格式化 JSON + , + , + , + ]} + > +
+ {cellEditorMeta ? `${tableName || ''}${tableName ? '.' : ''}${cellEditorMeta.dataIndex}` : ''} +
+ {cellEditorOpen && ( + setCellEditorValue(val || '')} + options={{ + minimap: { enabled: false }, + scrollBeyondLastLine: false, + wordWrap: "on", + fontSize: 14, + tabSize: 2, + automaticLayout: true, + }} + /> + )} +
@@ -811,6 +1329,7 @@ const DataGrid: React.FC = ({ dataSource={mergedDisplayData} columns={mergedColumns} size="small" + tableLayout="fixed" scroll={{ x: Math.max(totalWidth, 1000), y: tableHeight }} virtual={enableVirtual} loading={loading} @@ -821,6 +1340,7 @@ const DataGrid: React.FC = ({ rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys, + columnWidth: selectionColumnWidth, }} rowClassName={(record) => { const k = record?.[GONAVI_ROW_KEY]; @@ -854,13 +1374,14 @@ const DataGrid: React.FC = ({
)} - + {/* Ghost Resize Line for Columns */}
= ({ tab }) => { const [data, setData] = useState([]); @@ -14,6 +15,8 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => { const fetchSeqRef = useRef(0); const countSeqRef = useRef(0); const countKeyRef = useRef(''); + const pkSeqRef = useRef(0); + const pkKeyRef = useRef(''); const [pagination, setPagination] = useState({ current: 1, @@ -27,6 +30,13 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => { const [showFilter, setShowFilter] = useState(false); const [filterConditions, setFilterConditions] = useState([]); + useEffect(() => { + setPkColumns([]); + pkKeyRef.current = ''; + countKeyRef.current = ''; + setPagination(prev => ({ ...prev, current: 1, total: 0, totalKnown: false })); + }, [tab.connectionId, tab.dbName, tab.tableName]); + const fetchData = useCallback(async (page = pagination.current, size = pagination.pageSize) => { const seq = ++fetchSeqRef.current; setLoading(true); @@ -46,54 +56,18 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => { ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" } }; - const normalizeIdentPart = (ident: string) => { - let raw = (ident || '').trim(); - if (!raw) return raw; - const first = raw[0]; - const last = raw[raw.length - 1]; - if ((first === '"' && last === '"') || (first === '`' && last === '`')) { - raw = raw.slice(1, -1).trim(); - } - // 防御：如果传入已包含引号（例如 `"schema"."table"` 的拆分结果），移除残留引号再重新安全转义。 - raw = raw.replace(/["`]/g, '').trim(); - return raw; - }; - - const quoteIdentPart = (ident: string) => { - const raw = normalizeIdentPart(ident); - if (!raw) return raw; - if (config.type === 'mysql') return `\`${raw.replace(/`/g, '``')}\``; - return `"${raw.replace(/"/g, '""')}"`; - }; - const quoteQualifiedIdent = (ident: string) => { - const raw = (ident || '').trim(); - if (!raw) return raw; - const parts = raw.split('.').map(normalizeIdentPart).filter(Boolean); - if (parts.length <= 1) return quoteIdentPart(raw); - return parts.map(quoteIdentPart).join('.'); - }; - const escapeLiteral = (val: string) => val.replace(/'/g, "''"); + const dbType = config.type || ''; const dbName = tab.dbName || ''; const tableName = tab.tableName || ''; - const whereParts: string[] = []; - filterConditions.forEach(cond => { - if (cond.column && cond.value) { - if (cond.op === 'LIKE') { - whereParts.push(`${quoteIdentPart(cond.column)} LIKE '%${escapeLiteral(cond.value)}%'`); - } else { - whereParts.push(`${quoteIdentPart(cond.column)} ${cond.op} '${escapeLiteral(cond.value)}'`); - } - } - }); - const whereSQL = whereParts.length > 0 ? `WHERE ${whereParts.join(' AND ')}` : ""; + const whereSQL = buildWhereSQL(dbType, filterConditions); - const countSql = `SELECT COUNT(*) as total FROM ${quoteQualifiedIdent(tableName)} ${whereSQL}`; + const countSql = `SELECT COUNT(*) as total FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`; - let sql = `SELECT * FROM ${quoteQualifiedIdent(tableName)} ${whereSQL}`; + let sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`; if (sortInfo && sortInfo.order) { - sql += ` ORDER BY ${quoteIdentPart(sortInfo.columnKey)} ${sortInfo.order === 'ascend' ? 'ASC' : 'DESC'}`; + sql += ` ORDER BY ${quoteIdentPart(dbType, sortInfo.columnKey)} ${sortInfo.order === 'ascend' ? 'ASC' : 'DESC'}`; } const offset = (page - 1) * size; // 大表性能：打开表不阻塞在 COUNT(*)，先通过多取 1 条判断是否还有下一页；总数在后台统计并异步回填。 @@ -103,11 +77,6 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => { try { const pData = DBQuery(config as any, dbName, sql); - let pCols: Promise | null = null; - if (pkColumns.length === 0) { - pCols = DBGetColumns(config as any, dbName, tableName); - } - const resData = await pData; const duration = Date.now() - startTime; @@ -123,11 +92,23 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => { dbName }); - if (pCols) { - const resCols = await pCols; - if (resCols.success) { - const pks = (resCols.data as ColumnDefinition[]).filter(c => c.key === 'PRI').map(c => c.name); - setPkColumns(pks); + if (pkColumns.length === 0) { + const pkKey = `${tab.connectionId}|${dbName}|${tableName}`; + if (pkKeyRef.current !== pkKey) { + pkKeyRef.current = pkKey; + const pkSeq = ++pkSeqRef.current; + DBGetColumns(config as any, dbName, tableName) + .then((resCols: any) => { + if (pkSeqRef.current !== pkSeq) return; + if (pkKeyRef.current !== pkKey) return; + if (!resCols?.success) return; + const pks = (resCols.data as ColumnDefinition[]).filter((c: any) => c.key === 'PRI').map((c: any) => c.name); + setPkColumns(pks); + }) + .catch(() => { + if (pkSeqRef.current !== pkSeq) return; + if (pkKeyRef.current !== pkKey) return; + }); } } diff --git a/frontend/src/components/QueryEditor.tsx b/frontend/src/components/QueryEditor.tsx index 5e7e1b0..4c7ec9f 100644 --- a/frontend/src/components/QueryEditor.tsx +++ b/frontend/src/components/QueryEditor.tsx @@ -19,6 +19,8 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { tableName?: string; pkColumns: string[]; readOnly: boolean; + truncated?: boolean; + pkLoading?: boolean; }; // Result Sets @@ -26,6 +28,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { const [activeResultKey, setActiveResultKey] = useState(''); const [loading, setLoading] = useState(false); + const runSeqRef = useRef(0); const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); const [saveForm] = Form.useForm(); @@ -47,6 +50,13 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { const darkMode = useStore(state => state.darkMode); const sqlFormatOptions = useStore(state => state.sqlFormatOptions); const setSqlFormatOptions = useStore(state => state.setSqlFormatOptions); + const queryOptions = useStore(state => state.queryOptions); + const setQueryOptions = useStore(state => state.setQueryOptions); + + const currentDbRef = useRef(currentDb); + useEffect(() => { + currentDbRef.current = currentDb; + }, [currentDb]); // If opening a saved query, load its SQL useEffect(() => { @@ -72,7 +82,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { if (res.success && Array.isArray(res.data)) { const dbs = res.data.map((row: any) => row.Database || row.database); setDbList(dbs); - if (!currentDb) { + if (!currentDbRef.current) { if (conn.config.database) setCurrentDb(conn.config.database); else if (dbs.length > 0 && dbs[0] !== 'information_schema') setCurrentDb(dbs[0]); } @@ -81,7 +91,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { } }; fetchDbs(); - }, [currentConnectionId, connections, currentDb]); + }, [currentConnectionId, connections]); // Fetch Metadata for Autocomplete useEffect(() => { @@ -343,6 +353,327 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { return statements; }; + const getLeadingKeyword = (sql: string): string => { + const text = (sql || '').replace(/\r\n/g, '\n'); + const isWS = (ch: string) => ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r'; + const isWord = (ch: string) => /[A-Za-z0-9_]/.test(ch); + + let inSingle = false; + let inDouble = false; + let inBacktick = false; + let escaped = false; + let inLineComment = false; + let inBlockComment = false; + let dollarTag: string | null = null; + + for (let i = 0; i < text.length; i++) { + const ch = text[i]; + const next = i + 1 < text.length ? text[i + 1] : ''; + const prev = i > 0 ? text[i - 1] : ''; + const next2 = i + 2 < text.length ? text[i + 2] : ''; + + if (!inSingle && !inDouble && !inBacktick) { + if (inLineComment) { + if (ch === '\n') inLineComment = false; + continue; + } + if (inBlockComment) { + if (ch === '*' && next === '/') { + i++; + inBlockComment = false; + } + continue; + } + + if (ch === '/' && next === '*') { + i++; + inBlockComment = true; + continue; + } + if (ch === '#') { + inLineComment = true; + continue; + } + if (ch === '-' && next === '-' && (i === 0 || isWS(prev)) && (next2 === '' || isWS(next2))) { + i++; + inLineComment = true; + continue; + } + + if (dollarTag) { + if (text.startsWith(dollarTag, i)) { + i += dollarTag.length - 1; + dollarTag = null; + } + continue; + } + if (ch === '$') { + const m = text.slice(i).match(/^\$[A-Za-z0-9_]*\$/); + if (m && m[0]) { + dollarTag = m[0]; + i += dollarTag.length - 1; + continue; + } + } + } + + if (escaped) { + escaped = false; + continue; + } + if ((inSingle || inDouble) && ch === '\\') { + escaped = true; + continue; + } + + if (!inDouble && !inBacktick && ch === '\'') { + inSingle = !inSingle; + continue; + } + if (!inSingle && !inBacktick && ch === '"') { + inDouble = !inDouble; + continue; + } + if (!inSingle && !inDouble && ch === '`') { + inBacktick = !inBacktick; + continue; + } + + if (inSingle || inDouble || inBacktick || dollarTag) continue; + if (isWS(ch)) continue; + + if (isWord(ch)) { + let j = i; + while (j < text.length && isWord(text[j])) j++; + return text.slice(i, j).toLowerCase(); + } + return ''; + } + return ''; + }; + + const splitSqlTail = (sql: string): { main: string; tail: string } => { + const text = (sql || '').replace(/\r\n/g, '\n'); + const isWS = (ch: string) => ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r'; + + let inSingle = false; + let inDouble = false; + let inBacktick = false; + let escaped = false; + let inLineComment = false; + let inBlockComment = false; + let dollarTag: string | null = null; + let lastMeaningful = -1; + + for (let i = 0; i < text.length; i++) { + const ch = text[i]; + const next = i + 1 < text.length ? text[i + 1] : ''; + const prev = i > 0 ? text[i - 1] : ''; + const next2 = i + 2 < text.length ? text[i + 2] : ''; + + if (!inSingle && !inDouble && !inBacktick) { + if (dollarTag) { + if (text.startsWith(dollarTag, i)) { + lastMeaningful = i + dollarTag.length - 1; + i += dollarTag.length - 1; + dollarTag = null; + } else if (!isWS(ch)) { + lastMeaningful = i; + } + continue; + } + if (inLineComment) { + if (ch === '\n') inLineComment = false; + continue; + } + if (inBlockComment) { + if (ch === '*' && next === '/') { + i++; + inBlockComment = false; + } + continue; + } + + // Start comments + if (ch === '/' && next === '*') { + i++; + inBlockComment = true; + continue; + } + if (ch === '#') { + inLineComment = true; + continue; + } + if (ch === '-' && next === '-' && (i === 0 || isWS(prev)) && (next2 === '' || isWS(next2))) { + i++; + inLineComment = true; + continue; + } + + if (ch === '$') { + const m = text.slice(i).match(/^\$[A-Za-z0-9_]*\$/); + if (m && m[0]) { + dollarTag = m[0]; + lastMeaningful = i + dollarTag.length - 1; + i += dollarTag.length - 1; + continue; + } + } + } + + if (escaped) { + escaped = false; + } else if ((inSingle || inDouble) && ch === '\\') { + escaped = true; + } else { + if (!inDouble && !inBacktick && ch === '\'') inSingle = !inSingle; + else if (!inSingle && !inBacktick && ch === '"') inDouble = !inDouble; + else if (!inSingle && !inDouble && ch === '`') inBacktick = !inBacktick; + } + + if (!inLineComment && !inBlockComment && !isWS(ch)) { + lastMeaningful = i; + } + } + + if (lastMeaningful < 0) return { main: '', tail: text }; + return { main: text.slice(0, lastMeaningful + 1), tail: text.slice(lastMeaningful + 1) }; + }; + + const findTopLevelKeyword = (sql: string, keyword: string): number => { + const text = sql; + const kw = keyword.toLowerCase(); + const isWS = (ch: string) => ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r'; + const isWord = (ch: string) => /[A-Za-z0-9_]/.test(ch); + + let inSingle = false; + let inDouble = false; + let inBacktick = false; + let escaped = false; + let inLineComment = false; + let inBlockComment = false; + let dollarTag: string | null = null; + let parenDepth = 0; + + for (let i = 0; i < text.length; i++) { + const ch = text[i]; + const next = i + 1 < text.length ? text[i + 1] : ''; + const prev = i > 0 ? text[i - 1] : ''; + const next2 = i + 2 < text.length ? text[i + 2] : ''; + + if (!inSingle && !inDouble && !inBacktick) { + if (inLineComment) { + if (ch === '\n') inLineComment = false; + continue; + } + if (inBlockComment) { + if (ch === '*' && next === '/') { + i++; + inBlockComment = false; + } + continue; + } + + if (ch === '/' && next === '*') { + i++; + inBlockComment = true; + continue; + } + if (ch === '#') { + inLineComment = true; + continue; + } + if (ch === '-' && next === '-' && (i === 0 || isWS(prev)) && (next2 === '' || isWS(next2))) { + i++; + inLineComment = true; + continue; + } + + if (dollarTag) { + if (text.startsWith(dollarTag, i)) { + i += dollarTag.length - 1; + dollarTag = null; + } + continue; + } + if (ch === '$') { + const m = text.slice(i).match(/^\$[A-Za-z0-9_]*\$/); + if (m && m[0]) { + dollarTag = m[0]; + i += dollarTag.length - 1; + continue; + } + } + } + + if (escaped) { + escaped = false; + continue; + } + if ((inSingle || inDouble) && ch === '\\') { + escaped = true; + continue; + } + + if (!inDouble && !inBacktick && ch === '\'') { + inSingle = !inSingle; + continue; + } + if (!inSingle && !inBacktick && ch === '"') { + inDouble = !inDouble; + continue; + } + if (!inSingle && !inDouble && ch === '`') { + inBacktick = !inBacktick; + continue; + } + + if (inSingle || inDouble || inBacktick || dollarTag) continue; + + if (ch === '(') { parenDepth++; continue; } + if (ch === ')') { if (parenDepth > 0) parenDepth--; continue; } + if (parenDepth !== 0) continue; + + if (!isWord(ch)) continue; + + if (text.slice(i, i + kw.length).toLowerCase() !== kw) continue; + const before = i - 1 >= 0 ? text[i - 1] : ''; + const after = i + kw.length < text.length ? text[i + kw.length] : ''; + if ((before && isWord(before)) || (after && isWord(after))) continue; + return i; + } + return -1; + }; + + const applyAutoLimit = (sql: string, dbType: string, maxRows: number): { sql: string; applied: boolean; maxRows: number } => { + const normalizedType = (dbType || 'mysql').toLowerCase(); + const supportsLimit = normalizedType === 'mysql' || normalizedType === 'postgres' || normalizedType === 'kingbase' || normalizedType === 'sqlite' || normalizedType === ''; + if (!supportsLimit) return { sql, applied: false, maxRows }; + if (!Number.isFinite(maxRows) || maxRows <= 0) return { sql, applied: false, maxRows }; + + const { main, tail } = splitSqlTail(sql); + if (!main.trim()) return { sql, applied: false, maxRows }; + + const fromPos = findTopLevelKeyword(main, 'from'); + const limitPos = findTopLevelKeyword(main, 'limit'); + if (limitPos >= 0 && (fromPos < 0 || limitPos > fromPos)) return { sql, applied: false, maxRows }; + const fetchPos = findTopLevelKeyword(main, 'fetch'); + if (fetchPos >= 0 && (fromPos < 0 || fetchPos > fromPos)) return { sql, applied: false, maxRows }; + + const offsetPos = findTopLevelKeyword(main, 'offset'); + const forPos = findTopLevelKeyword(main, 'for'); + const lockPos = findTopLevelKeyword(main, 'lock'); + + const candidates = [offsetPos, forPos, lockPos] + .filter(pos => pos >= 0 && (fromPos < 0 || pos > fromPos)); + + const insertAt = candidates.length > 0 ? Math.min(...candidates) : main.length; + const before = main.slice(0, insertAt).trimEnd(); + const after = main.slice(insertAt).trimStart(); + const nextMain = [before, `LIMIT ${maxRows}`, after].filter(Boolean).join(' ').trim(); + return { sql: nextMain + tail, applied: true, maxRows }; + }; + const getSelectedSQL = (): string => { const editor = editorRef.current; if (!editor) return ''; @@ -362,12 +693,13 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { message.error("请先选择数据库"); return; } + const runSeq = ++runSeqRef.current; setLoading(true); const runStartTime = Date.now(); const conn = connections.find(c => c.id === currentConnectionId); if (!conn) { message.error("Connection not found"); - setLoading(false); + if (runSeqRef.current === runSeq) setLoading(false); return; } @@ -391,17 +723,29 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { } const nextResultSets: ResultSet[] = []; + const maxRows = Number(queryOptions?.maxRows) || 0; + const dbType = String((config as any).type || 'mysql'); + const wantsLimitProbe = Number.isFinite(maxRows) && maxRows > 0; + const probeLimit = wantsLimitProbe ? (maxRows + 1) : 0; + let anyTruncated = false; + const pendingPk: Array<{ resultKey: string; tableName: string }> = []; for (let idx = 0; idx < statements.length; idx++) { - const sql = statements[idx]; + const rawStatement = statements[idx]; + const leadingKeyword = getLeadingKeyword(rawStatement); + const shouldAutoLimit = leadingKeyword === 'select' || leadingKeyword === 'with'; + + const limitApplied = shouldAutoLimit && wantsLimitProbe; + const limited = limitApplied ? applyAutoLimit(rawStatement, dbType, probeLimit) : { sql: rawStatement, applied: false, maxRows: probeLimit }; + const executedSql = limited.sql; const startTime = Date.now(); - const res = await DBQuery(config as any, currentDb, sql); + const res = await DBQuery(config as any, currentDb, executedSql); const duration = Date.now() - startTime; addSqlLog({ id: `log-${Date.now()}-query-${idx + 1}`, timestamp: Date.now(), - sql, + sql: executedSql, status: res.success ? 'success' : 'error', duration, message: res.success ? '' : res.message, @@ -418,7 +762,13 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { } if (Array.isArray(res.data)) { - const rows = (res.data as any[]) || []; + let rows = (res.data as any[]) || []; + let truncated = false; + if (limited.applied && Number.isFinite(maxRows) && maxRows > 0 && rows.length > maxRows) { + truncated = true; + anyTruncated = true; + rows = rows.slice(0, maxRows); + } const cols = (res.fields && res.fields.length > 0) ? (res.fields as string[]) : (rows.length > 0 ? Object.keys(rows[0]) : []); @@ -428,24 +778,22 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { }); let simpleTableName: string | undefined = undefined; - let primaryKeys: string[] = []; - const tableMatch = sql.match(/^\s*SELECT\s+\*\s+FROM\s+[`"]?(\w+)[`"]?\s*(?:WHERE.*)?(?:ORDER BY.*)?(?:LIMIT.*)?$/i); + const tableMatch = rawStatement.match(/^\s*SELECT\s+\*\s+FROM\s+[`"]?(\w+)[`"]?\s*(?:WHERE.*)?(?:ORDER BY.*)?(?:LIMIT.*)?$/i); if (tableMatch) { simpleTableName = tableMatch[1]; - const resCols = await DBGetColumns(config as any, currentDb, simpleTableName); - if (resCols.success) { - primaryKeys = (resCols.data as ColumnDefinition[]).filter(c => c.key === 'PRI').map(c => c.name); - } + pendingPk.push({ resultKey: `result-${idx + 1}`, tableName: simpleTableName }); } nextResultSets.push({ key: `result-${idx + 1}`, - sql, + sql: rawStatement, rows, columns: cols, tableName: simpleTableName, - pkColumns: primaryKeys, - readOnly: !simpleTableName + pkColumns: [], + readOnly: true, + pkLoading: !!simpleTableName, + truncated }); } else { const affected = Number((res.data as any)?.affectedRows); @@ -454,7 +802,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { (row as any)[GONAVI_ROW_KEY] = 0; nextResultSets.push({ key: `result-${idx + 1}`, - sql, + sql: rawStatement, rows: [row], columns: ['affectedRows'], pkColumns: [], @@ -467,11 +815,31 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { setResultSets(nextResultSets); setActiveResultKey(nextResultSets[0]?.key || ''); + pendingPk.forEach(({ resultKey, tableName }) => { + DBGetColumns(config as any, currentDb, tableName) + .then((resCols: any) => { + if (runSeqRef.current !== runSeq) return; + if (!resCols?.success) { + setResultSets(prev => prev.map(rs => rs.key === resultKey ? { ...rs, pkLoading: false, readOnly: false } : rs)); + return; + } + const primaryKeys = (resCols.data as ColumnDefinition[]).filter(c => c.key === 'PRI').map(c => c.name); + setResultSets(prev => prev.map(rs => rs.key === resultKey ? { ...rs, pkColumns: primaryKeys, pkLoading: false, readOnly: false } : rs)); + }) + .catch(() => { + if (runSeqRef.current !== runSeq) return; + setResultSets(prev => prev.map(rs => rs.key === resultKey ? { ...rs, pkLoading: false, readOnly: false } : rs)); + }); + }); + if (statements.length > 1) { message.success(`已执行 ${statements.length} 条语句，生成 ${nextResultSets.length} 个结果集。`); } else if (nextResultSets.length === 0) { message.success('执行成功。'); } + if (anyTruncated && maxRows > 0) { + message.warning(`结果集已自动限制为最多 ${maxRows} 行（可在工具栏调整）。`); + } } catch (e: any) { message.error("Error executing query: " + e.message); addSqlLog({ @@ -486,7 +854,7 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { setResultSets([]); setActiveResultKey(''); } finally { - setLoading(false); + if (runSeqRef.current === runSeq) setLoading(false); } }; @@ -587,6 +955,20 @@ const QueryEditor: React.FC<{ tab: TabData }> = ({ tab }) => { options={dbList.map(db => ({ label: db, value: db }))} showSearch /> + +