🔧 fix(frontend-data-grid): 修复小屏布局截断并根治MySQL排序内存溢出

frontend/src/App.tsx

@@ -705,7 +705,7 @@ function App() {
             </Dropdown>
             <Button type="text" icon={<InfoCircleOutlined />} title="关于" onClick={() => setIsAboutOpen(true)}>关于</Button>
           </div>
-          <Layout style={{ flex: 1, minHeight: 0 }}>
+          <Layout style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
           <Sider 
             width={sidebarWidth} 
             style={{ 
@@ -756,8 +756,8 @@ function App() {
                 title="拖动调整宽度"
             />
           </Sider>
-           <Content style={{ background: 'transparent', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
-             <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', background: bgContent }}>
+           <Content style={{ background: 'transparent', overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+             <div style={{ flex: 1, minHeight: 0, minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', background: bgContent }}>
                  <TabManager />
              </div>
              {isLogPanelOpen && (

frontend/src/components/DataGrid.tsx

@@ -9,7 +9,7 @@ import ImportPreviewModal from './ImportPreviewModal';
 import { useStore } from '../store';
 import { v4 as uuidv4 } from 'uuid';
 import 'react-resizable/css/styles.css';
-import { buildOrderBySQL, buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent, type FilterCondition } from '../utils/sql';
+import { buildOrderBySQL, buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
 import { isMacLikePlatform, normalizeOpacityForPlatform } from '../utils/appearance';
 
 // --- Error Boundary ---
@@ -496,6 +496,7 @@ interface DataGridProps {
     onSort?: (field: string, order: string) => void;
     onPageChange?: (page: number, size: number) => void;
     pagination?: { current: number, pageSize: number, total: number, totalKnown?: boolean };
+    sortInfoExternal?: { columnKey: string, order: string } | null;
     // Filtering
     showFilter?: boolean;
     onToggleFilter?: () => void;
@@ -514,7 +515,7 @@ type GridViewMode = 'table' | 'json' | 'text';
 
 const DataGrid: React.FC<DataGridProps> = ({ 
     data, columnNames, loading, tableName, dbName, connectionId, pkColumns = [], readOnly = false,
-    onReload, onSort, onPageChange, pagination, showFilter, onToggleFilter, onApplyFilter
+    onReload, onSort, onPageChange, pagination, sortInfoExternal, showFilter, onToggleFilter, onApplyFilter
 }) => {
   const connections = useStore(state => state.connections);
   const addSqlLog = useStore(state => state.addSqlLog);
@@ -661,6 +662,21 @@ const DataGrid: React.FC<DataGridProps> = ({
   const [sortInfo, setSortInfo] = useState<{ columnKey: string, order: string } | null>(null);
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
 
+  useEffect(() => {
+      const nextOrder = sortInfoExternal?.order === 'ascend' || sortInfoExternal?.order === 'descend'
+          ? sortInfoExternal.order
+          : '';
+      const nextColumn = nextOrder ? String(sortInfoExternal?.columnKey || '') : '';
+      const currColumn = String(sortInfo?.columnKey || '');
+      const currOrder = sortInfo?.order === 'ascend' || sortInfo?.order === 'descend' ? sortInfo.order : '';
+      if (nextColumn === currColumn && nextOrder === currOrder) return;
+      if (!nextColumn || !nextOrder) {
+          setSortInfo(null);
+      } else {
+          setSortInfo({ columnKey: nextColumn, order: nextOrder });
+      }
+  }, [sortInfoExternal, sortInfo]);
+
   const closeCellEditor = useCallback(() => {
       setCellEditorOpen(false);
       setCellEditorMeta(null);
@@ -1113,9 +1129,16 @@ const DataGrid: React.FC<DataGridProps> = ({
   const handleTableChange = (pag: any, filtersArg: any, sorter: any) => {
       if (isResizingRef.current) return; // Block sort if resizing
       if (sorter.field) {
+          const field = String(sorter.field);
           const order = sorter.order as string;
-          setSortInfo({ columnKey: sorter.field as string, order });
-          if (onSort) onSort(sorter.field, order);
+          const normalizedOrder = order === 'ascend' || order === 'descend' ? order : '';
+          if (!normalizedOrder) {
+              setSortInfo(null);
+              if (onSort) onSort('', '');
+              return;
+          }
+          setSortInfo({ columnKey: field, order: normalizedOrder });
+          if (onSort) onSort(field, normalizedOrder);
       } else {
           setSortInfo(null);
           if (onSort) onSort('', '');
@@ -1820,6 +1843,11 @@ const DataGrid: React.FC<DataGridProps> = ({
       const whereSQL = buildWhereSQL(dbType, filterConditions);
       let sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
       sql += buildOrderBySQL(dbType, sortInfo, pkColumns);
+      const normalizedType = String(dbType || '').trim().toLowerCase();
+      const hasExplicitSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
+      if (hasExplicitSort && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
+          sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
+      }
       const offset = (pagination.current - 1) * pagination.pageSize;
       sql += ` LIMIT ${pagination.pageSize} OFFSET ${offset}`;
       return sql;
@@ -2034,9 +2062,9 @@ const DataGrid: React.FC<DataGridProps> = ({
   }, [viewMode, totalWidth, mergedDisplayData.length, recalculateTableMetrics]);
 
   return (
-    <div className={`${gridId}${cellEditMode ? ' cell-edit-mode' : ''}`} ref={containerRef} style={{ flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0, background: bgContent }}>
-	       {/* Toolbar */}
-	        <div style={{ padding: '8px', borderBottom: '1px solid #eee', display: 'flex', gap: 8, alignItems: 'center' }}>
+    <div className={`${gridId}${cellEditMode ? ' cell-edit-mode' : ''} data-grid-root`} style={{ flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0, minWidth: 0, background: bgContent }}>
+		       {/* Toolbar */}
+		        <div className="data-grid-toolbar-scroll" style={{ padding: '8px', borderBottom: '1px solid #eee', display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'nowrap', minWidth: 0, overflowX: 'auto', overflowY: 'hidden', scrollbarGutter: 'stable', WebkitOverflowScrolling: 'touch' }}>
 	            {onReload && <Button icon={<ReloadOutlined />} disabled={loading} onClick={() => {
 	                setAddedRows([]);
 	                setModifiedRows({});
@@ -2121,36 +2149,38 @@ const DataGrid: React.FC<DataGridProps> = ({
            )}
 
            <div style={{ marginLeft: 'auto' }} />
-           <Segmented
-               size="small"
-               value={viewMode}
-               options={[
-                   { label: '表格', value: 'table' },
-                   { label: 'JSON', value: 'json' },
-                   { label: '文本', value: 'text' }
-               ]}
-               onChange={(val) => {
-                   const nextMode = String(val) as GridViewMode;
-                   if (nextMode === 'json' && cellEditMode) {
-                       setCellEditMode(false);
-                       setSelectedCells(new Set());
-                       currentSelectionRef.current = new Set();
-                       selectionStartRef.current = null;
-                       updateCellSelection(new Set());
-                   }
-                   if (nextMode === 'text') {
-                       const selectedKey = selectedRowKeys[0];
-                       if (selectedKey !== undefined) {
-                           const idx = mergedDisplayData.findIndex((row) => rowKeyStr(row?.[GONAVI_ROW_KEY]) === rowKeyStr(selectedKey));
-                           if (idx >= 0) {
-                               setTextRecordIndex(idx);
-                           }
-                       }
-                   }
-                   setViewMode(nextMode);
-               }}
-           />
-       </div>
+	           <div style={{ flexShrink: 0 }}>
+	               <Segmented
+	                   size="small"
+	                   value={viewMode}
+	                   options={[
+	                       { label: '表格', value: 'table' },
+	                       { label: 'JSON', value: 'json' },
+	                       { label: '文本', value: 'text' }
+	                   ]}
+	                   onChange={(val) => {
+	                       const nextMode = String(val) as GridViewMode;
+	                       if (nextMode === 'json' && cellEditMode) {
+	                           setCellEditMode(false);
+	                           setSelectedCells(new Set());
+	                           currentSelectionRef.current = new Set();
+	                           selectionStartRef.current = null;
+	                           updateCellSelection(new Set());
+	                       }
+	                       if (nextMode === 'text') {
+	                           const selectedKey = selectedRowKeys[0];
+	                           if (selectedKey !== undefined) {
+	                               const idx = mergedDisplayData.findIndex((row) => rowKeyStr(row?.[GONAVI_ROW_KEY]) === rowKeyStr(selectedKey));
+	                               if (idx >= 0) {
+	                                   setTextRecordIndex(idx);
+	                               }
+	                           }
+	                       }
+	                       setViewMode(nextMode);
+	                   }}
+	               />
+	           </div>
+	       </div>
 
        {/* Filter Panel */}
        {showFilter && (
@@ -2448,8 +2478,8 @@ const DataGrid: React.FC<DataGridProps> = ({
                     />
                 </div>
             </div>
-        ) : (
-            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+	        ) : (
+	            <div style={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
                 <div style={{ padding: '8px 12px', borderBottom: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', gap: 8 }}>
                     <Button size="small" onClick={() => setTextRecordIndex(i => Math.max(0, i - 1))} disabled={textViewRows.length === 0 || textRecordIndex <= 0}>
                         上一条
@@ -2466,7 +2496,7 @@ const DataGrid: React.FC<DataGridProps> = ({
                         </Button>
                     )}
                 </div>
-                <div className="custom-scrollbar" style={{ flex: 1, overflow: 'auto', padding: '8px 12px' }}>
+	                <div className="custom-scrollbar" style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '8px 12px' }}>
                     {currentTextRow ? columnNames.map((col) => (
                         <div key={col} style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 10, padding: '6px 0', borderBottom: darkMode ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.06)', alignItems: 'start' }}>
                             <div style={{ fontWeight: 600, color: darkMode ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.88)', wordBreak: 'break-all' }}>
@@ -2672,8 +2702,21 @@ const DataGrid: React.FC<DataGridProps> = ({
            </div>
        )}
 
-	        <style>{`
-                .${gridId} .ant-table { background: transparent !important; }
+		        <style>{`
+	                .${gridId} .data-grid-toolbar-scroll > * {
+	                    flex-shrink: 0;
+	                }
+	                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar {
+	                    height: 7px;
+	                }
+	                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-thumb {
+	                    background: ${darkMode ? 'rgba(255,255,255,0.28)' : 'rgba(0,0,0,0.22)'};
+	                    border-radius: 999px;
+	                }
+	                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-track {
+	                    background: transparent;
+	                }
+	                .${gridId} .ant-table { background: transparent !important; }
                 .${gridId} .ant-table-container { background: transparent !important; border: none !important; }
                 .${gridId} .ant-table-tbody > tr > td { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: 1px solid transparent !important; }
                 .${gridId} .ant-table-thead > tr > th { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: 1px solid transparent !important; }

frontend/src/components/DataViewer.tsx

@@ -4,7 +4,7 @@ import { TabData, ColumnDefinition } from '../types';
 import { useStore } from '../store';
 import { DBQuery, DBGetColumns } from '../../wailsjs/go/app/App';
 import DataGrid, { GONAVI_ROW_KEY } from './DataGrid';
-import { buildOrderBySQL, buildWhereSQL, quoteQualifiedIdent, type FilterCondition } from '../utils/sql';
+import { buildOrderBySQL, buildWhereSQL, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
 
 const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
   const [data, setData] = useState<any[]>([]);
@@ -60,6 +60,8 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
     };
 
     const dbType = config.type || '';
+    const dbTypeLower = String(dbType || '').trim().toLowerCase();
+    const isMySQLFamily = dbTypeLower === 'mysql' || dbTypeLower === 'mariadb';
 
     const dbName = tab.dbName || '';
     const tableName = tab.tableName || '';
@@ -74,24 +76,46 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
     // 大表性能：打开表不阻塞在 COUNT(*)，先通过多取 1 条判断是否还有下一页；总数在后台统计并异步回填。
     sql += ` LIMIT ${size + 1} OFFSET ${offset}`;
 
-    const startTime = Date.now();
+    const requestStartTime = Date.now();
+    let executedSql = sql;
     try {
-        const pData = DBQuery(config as any, dbName, sql);
+        const executeDataQuery = async (querySql: string, attemptLabel: string) => {
+            const startTime = Date.now();
+            const result = await DBQuery(config as any, dbName, querySql);
+            addSqlLog({
+                id: `log-${Date.now()}-data`,
+                timestamp: Date.now(),
+                sql: querySql,
+                status: result.success ? 'success' : 'error',
+                duration: Date.now() - startTime,
+                message: result.success ? '' : `${attemptLabel}: ${result.message}`,
+                affectedRows: Array.isArray(result.data) ? result.data.length : undefined,
+                dbName
+            });
+            return result;
+        };
 
-        const resData = await pData;
-        const duration = Date.now() - startTime;
-        
-        // Log Execution
-        addSqlLog({
-            id: `log-${Date.now()}-data`,
-            timestamp: Date.now(),
-            sql: sql,
-            status: resData.success ? 'success' : 'error',
-            duration: duration,
-            message: resData.success ? '' : resData.message,
-            affectedRows: Array.isArray(resData.data) ? resData.data.length : undefined,
-            dbName
-        });
+        const hasSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
+        const isSortMemoryErr = (msg: string) => /error\s*1038|out of sort memory/i.test(String(msg || ''));
+        let resData = await executeDataQuery(sql, '主查询');
+
+        if (!resData.success && isMySQLFamily && hasSort && isSortMemoryErr(resData.message)) {
+            const retrySql32MB = withSortBufferTuningSQL(dbType, sql, 32 * 1024 * 1024);
+            if (retrySql32MB !== sql) {
+                executedSql = retrySql32MB;
+                resData = await executeDataQuery(retrySql32MB, '重试(32MB sort_buffer)');
+            }
+            if (!resData.success && isSortMemoryErr(resData.message)) {
+                const retrySql128MB = withSortBufferTuningSQL(dbType, sql, 128 * 1024 * 1024);
+                if (retrySql128MB !== executedSql) {
+                    executedSql = retrySql128MB;
+                    resData = await executeDataQuery(retrySql128MB, '重试(128MB sort_buffer)');
+                }
+            }
+            if (resData.success) {
+                message.warning('已自动提升排序缓冲并重试成功。');
+            }
+        }
         
         if (pkColumns.length === 0) {
             const pkKey = `${tab.connectionId}|${dbName}|${tableName}`;
@@ -187,7 +211,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
                 }
             }
         } else {
-            message.error(resData.message);
+            message.error(String(resData.message || '查询失败'));
         }
     } catch (e: any) {
         if (fetchSeqRef.current !== seq) return;
@@ -195,9 +219,9 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
         addSqlLog({
             id: `log-${Date.now()}-error`,
             timestamp: Date.now(),
-            sql: sql,
+            sql: executedSql,
             status: 'error',
-            duration: Date.now() - startTime,
+            duration: Date.now() - requestStartTime,
             message: e.message,
             dbName
         });
@@ -211,7 +235,15 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
   const handleReload = useCallback(() => {
     fetchData(pagination.current, pagination.pageSize);
   }, [fetchData, pagination.current, pagination.pageSize]);
-  const handleSort = useCallback((field: string, order: string) => setSortInfo({ columnKey: field, order }), []);
+  const handleSort = useCallback((field: string, order: string) => {
+    const normalizedOrder = order === 'ascend' || order === 'descend' ? order : '';
+    const normalizedField = String(field || '').trim();
+    if (!normalizedField || !normalizedOrder) {
+      setSortInfo(null);
+      return;
+    }
+    setSortInfo({ columnKey: normalizedField, order: normalizedOrder });
+  }, []);
   const handlePageChange = useCallback((page: number, size: number) => fetchData(page, size), [fetchData]);
   const handleToggleFilter = useCallback(() => setShowFilter(prev => !prev), []);
   const handleApplyFilter = useCallback((conditions: FilterCondition[]) => setFilterConditions(conditions), []);
@@ -221,7 +253,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
   }, [tab, sortInfo, filterConditions]); // Initial load and re-load on sort/filter
 
   return (
-    <div style={{ flex: '1 1 auto', minHeight: 0, height: '100%', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ flex: '1 1 auto', minHeight: 0, minWidth: 0, height: '100%', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
       <DataGrid
           data={data}
           columnNames={columnNames}
@@ -238,6 +270,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
           onToggleFilter={handleToggleFilter}
           onApplyFilter={handleApplyFilter}
           readOnly={forceReadOnly}
+          sortInfoExternal={sortInfo}
       />
     </div>
   );

frontend/src/components/TabManager.tsx

@@ -116,6 +116,7 @@ const TabManager: React.FC = () => {
               height: 100%;
               flex: 1 1 auto;
               min-height: 0;
+              min-width: 0;
               display: flex;
               flex-direction: column;
               overflow: hidden;
@@ -126,6 +127,7 @@ const TabManager: React.FC = () => {
             .main-tabs .ant-tabs-content-holder {
               flex: 1 1 auto;
               min-height: 0;
+              min-width: 0;
               overflow: hidden;
               display: flex;
               flex-direction: column;
@@ -133,12 +135,14 @@ const TabManager: React.FC = () => {
             .main-tabs .ant-tabs-content {
               flex: 1 1 auto;
               min-height: 0;
+              min-width: 0;
               display: flex;
               flex-direction: column;
             }
             .main-tabs .ant-tabs-tabpane {
               flex: 1 1 auto;
               min-height: 0;
+              min-width: 0;
               display: flex;
               flex-direction: column;
               overflow: hidden;
@@ -146,6 +150,7 @@ const TabManager: React.FC = () => {
             .main-tabs .ant-tabs-tabpane > div {
               flex: 1 1 auto;
               min-height: 0;
+              min-width: 0;
             }
             .main-tabs .ant-tabs-tabpane-hidden {
               display: none !important;

frontend/src/utils/sql.ts

@@ -68,11 +68,39 @@ type SortInfo = {
   order?: string;
 } | null | undefined;
 
+// 为排序查询按库类型注入 sort_buffer 提升参数（仅影响当前语句）。
+// MySQL: 使用 Optimizer Hint `SET_VAR`。
+// MariaDB: 使用 `SET STATEMENT ... FOR` 包装当前查询。
+export const withSortBufferTuningSQL = (
+  dbType: string,
+  sql: string,
+  sortBufferBytes: number,
+) => {
+  const rawSql = String(sql || '');
+  const trimmed = rawSql.trim();
+  if (!trimmed) return rawSql;
+  if (!/^select\b/i.test(trimmed)) return rawSql;
+
+  const normalizedType = String(dbType || '').trim().toLowerCase();
+  const bytes = Math.max(256 * 1024, Math.floor(Number(sortBufferBytes) || 0));
+  if (normalizedType === 'mysql') {
+    return rawSql.replace(
+      /^\s*select\b/i,
+      (matched) => `${matched} /*+ SET_VAR(sort_buffer_size=${bytes}) */`,
+    );
+  }
+  if (normalizedType === 'mariadb') {
+    return `SET STATEMENT sort_buffer_size=${bytes} FOR ${rawSql}`;
+  }
+  return rawSql;
+};
+
 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' : '';
@@ -80,6 +108,13 @@ export const buildOrderBySQL = (
     return ` ORDER BY ${quoteIdentPart(dbType, sortColumn)} ${direction}`;
   }
 
+  // MySQL/MariaDB 大表在无显式排序需求时强制 ORDER BY（即使按主键）可能触发 filesort，
+  // 导致 `Error 1038 (HY001): Out of sort memory`。
+  // 因此仅在用户主动点击排序时下发 ORDER BY，默认分页查询不加兜底排序。
+  if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
+    return '';
+  }
+
   const seen = new Set<string>();
   const stableColumns = (fallbackColumns || [])
     .map((col) => normalizeIdentPart(String(col || '')))