✨ feat(data-grid): 支持隐藏表格行号列 (#790)

frontend/src/components/DataGrid.layout.test.tsx

@@ -58,6 +58,7 @@ vi.mock('../store', () => ({
       dataTableDensity: 'comfortable',
       uiVersion: mockStoreState.uiVersion,
     },
+    setAppearance: vi.fn(),
     queryOptions: {
       showColumnComment: false,
       showColumnType: false,

frontend/src/components/DataGrid.tsx

@@ -327,6 +327,7 @@ const DataGrid: React.FC<DataGridProps> = ({
   const addSqlLog = useStore(state => state.addSqlLog);
   const theme = useStore(state => state.theme);
   const appearance = useStore(state => state.appearance);
+  const setAppearance = useStore(state => state.setAppearance);
   const uiScale = useStore(state => state.uiScale);
   const queryOptions = useStore(state => state.queryOptions);
   const setQueryOptions = useStore(state => state.setQueryOptions);
@@ -3897,6 +3898,7 @@ const DataGrid: React.FC<DataGridProps> = ({
           darkMode={darkMode}
           showColumnComment={showColumnComment}
           showColumnType={showColumnType}
+          showRowNumberColumn={resolvedShowRowNumberColumn}
           columnSearchText={columnSearchText}
           allOrderedColumnNames={allOrderedColumnNames}
           localHiddenColumns={localHiddenColumns}
@@ -3907,6 +3909,7 @@ const DataGrid: React.FC<DataGridProps> = ({
           translate={translateDataGrid}
           onShowColumnCommentChange={(checked) => setQueryOptions({ showColumnComment: checked })}
           onShowColumnTypeChange={(checked) => setQueryOptions({ showColumnType: checked })}
+          onShowRowNumberColumnChange={(checked) => setAppearance({ showDataTableRowNumber: checked })}
           onToggleAllColumnsVisibility={toggleAllColumnsVisibility}
           onColumnSearchTextChange={setColumnSearchText}
           onToggleColumnVisibility={toggleColumnVisibility}

frontend/src/components/DataGridColumnInfoPopoverContent.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('antd', async () => {
+  const ReactModule = await import('react');
+  const Checkbox = ({ checked, children, onChange }: any) => ReactModule.createElement(
+    'label',
+    null,
+    ReactModule.createElement('input', {
+      type: 'checkbox',
+      checked,
+      'data-label': children,
+      onChange,
+    }),
+    children,
+  );
+  const Input = ({ value, onChange }: any) => ReactModule.createElement('input', { value, onChange });
+  Input.TextArea = ({ value, onChange }: any) => ReactModule.createElement('textarea', { value, onChange });
+  const Button = ({ children, onClick }: any) => ReactModule.createElement('button', { onClick }, children);
+  return { Button, Checkbox, Input };
+});
+
+import DataGridColumnInfoPopoverContent from './DataGridColumnInfoPopoverContent';
+
+describe('DataGridColumnInfoPopoverContent', () => {
+  it('allows the row number column to be hidden from the column settings', () => {
+    const onShowRowNumberColumnChange = vi.fn();
+    const renderer = create(
+      <DataGridColumnInfoPopoverContent
+        darkMode={false}
+        showColumnComment
+        showColumnType
+        showRowNumberColumn
+        columnSearchText=""
+        allOrderedColumnNames={['id', 'name']}
+        localHiddenColumns={[]}
+        enableColumnOrderMemory={false}
+        enableHiddenColumnMemory={false}
+        canResetOrder={false}
+        canResetHidden={false}
+        translate={(key) => key === 'app.theme.data_table.row_number' ? 'Show row numbers' : key}
+        onShowColumnCommentChange={() => {}}
+        onShowColumnTypeChange={() => {}}
+        onShowRowNumberColumnChange={onShowRowNumberColumnChange}
+        onToggleAllColumnsVisibility={() => {}}
+        onColumnSearchTextChange={() => {}}
+        onToggleColumnVisibility={() => {}}
+        onEnableColumnOrderMemoryChange={() => {}}
+        onEnableHiddenColumnMemoryChange={() => {}}
+        onResetOrder={() => {}}
+        onResetHidden={() => {}}
+      />,
+    );
+
+    const rowNumberCheckbox = renderer.root.findAllByType('input')
+      .find((input) => input.props['data-label'] === 'Show row numbers');
+    expect(rowNumberCheckbox).toBeDefined();
+
+    act(() => rowNumberCheckbox?.props.onChange({ target: { checked: false } }));
+    expect(onShowRowNumberColumnChange).toHaveBeenCalledWith(false);
+  });
+});

frontend/src/components/DataGridColumnInfoPopoverContent.tsx

@@ -15,6 +15,7 @@ export interface DataGridColumnInfoPopoverContentProps {
   darkMode: boolean;
   showColumnComment: boolean;
   showColumnType: boolean;
+  showRowNumberColumn: boolean;
   columnSearchText: string;
   allOrderedColumnNames: string[];
   localHiddenColumns: string[];
@@ -25,6 +26,7 @@ export interface DataGridColumnInfoPopoverContentProps {
   translate?: DataGridColumnInfoTranslate;
   onShowColumnCommentChange: (checked: boolean) => void;
   onShowColumnTypeChange: (checked: boolean) => void;
+  onShowRowNumberColumnChange: (checked: boolean) => void;
   onToggleAllColumnsVisibility: (visible: boolean) => void;
   onColumnSearchTextChange: (value: string) => void;
   onToggleColumnVisibility: (columnName: string, visible: boolean) => void;
@@ -40,6 +42,7 @@ const DataGridColumnInfoPopoverContent: React.FC<DataGridColumnInfoPopoverConten
   darkMode,
   showColumnComment,
   showColumnType,
+  showRowNumberColumn,
   columnSearchText,
   allOrderedColumnNames,
   localHiddenColumns,
@@ -50,6 +53,7 @@ const DataGridColumnInfoPopoverContent: React.FC<DataGridColumnInfoPopoverConten
   translate = defaultTranslate,
   onShowColumnCommentChange,
   onShowColumnTypeChange,
+  onShowRowNumberColumnChange,
   onToggleAllColumnsVisibility,
   onColumnSearchTextChange,
   onToggleColumnVisibility,
@@ -112,6 +116,13 @@ const DataGridColumnInfoPopoverContent: React.FC<DataGridColumnInfoPopoverConten
         allowClear
       />
       <div className="custom-scrollbar" style={{ maxHeight: 220, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <Checkbox
+          checked={showRowNumberColumn}
+          onChange={(e) => onShowRowNumberColumnChange(e.target.checked)}
+          style={{ marginLeft: 0 }}
+        >
+          {translate('app.theme.data_table.row_number')}
+        </Checkbox>
         {allOrderedColumnNames
           .filter((col) => !columnSearchText || col.toLowerCase().includes(columnSearchText.toLowerCase()))
           .map((col) => (