From 7dab6f2e3362373f32eecb9beea74c2956ec1992 Mon Sep 17 00:00:00 2001
From: tianqijiuyun-latiao
 <69459608+tianqijiuyun-latiao@users.noreply.github.com>
Date: Wed, 24 Jun 2026 10:47:37 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(query-editor):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E7=BB=93=E6=9E=9C=E9=9B=86=E9=98=BB=E5=A1=9E=E4=B8=8E?=
 =?UTF-8?q?=E6=9C=AA=E7=9F=A5=E6=80=BB=E6=95=B0=E5=88=86=E9=A1=B5=E8=AF=AF?=
 =?UTF-8?q?=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为查询结果定位元数据探测增加软超时降级，避免租户元数据卡死阻塞主查询结果渲染
- 将未知总数分页切换为顺序翻页模式，并修正文案仅在真实统计时显示正在统计中
- 补充查询结果与分页回归测试，覆盖元数据超时和 legacy 未知总数分页场景
---
 .../src/components/DataGrid.layout.test.tsx   | 39 +++++++++++
 .../src/components/DataGridPaginationBar.tsx  | 64 +++++++++++++------
 frontend/src/components/DataViewer.tsx        | 32 ++++++++--
 .../QueryEditor.external-sql-save.test.tsx    |  4 +-
 .../QueryEditor.results-and-drop.test.tsx     | 43 +++++++++++++
 .../queryEditor/QueryEditorHelpers.ts         | 34 +++++++++-
 frontend/src/utils/dataGridPagination.test.ts |  7 ++
 frontend/src/utils/dataGridPagination.ts      | 17 ++---
 8 files changed, 202 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/DataGrid.layout.test.tsx b/frontend/src/components/DataGrid.layout.test.tsx
index d48fb76..03206fc 100644
--- a/frontend/src/components/DataGrid.layout.test.tsx
+++ b/frontend/src/components/DataGrid.layout.test.tsx
@@ -1902,6 +1902,45 @@ describe('DataGrid layout', () => {
     expect(markup).not.toContain('data-grid-pagination-jump="true"');
   });
 
+  it('keeps legacy unknown-total pagination in sequential mode instead of numbered pages', () => {
+    const previousUiVersion = mockStoreState.uiVersion;
+    mockStoreState.uiVersion = 'legacy';
+
+    try {
+      const markup = renderDataGridWithI18n(
+        <DataGrid
+          data={[
+            {
+              __gonavi_row_key__: 'row-1',
+              id: 1,
+              name: 'alpha',
+            },
+          ]}
+          columnNames={['id', 'name']}
+          loading={false}
+          tableName="users"
+          dbName="main"
+          connectionId="conn-1"
+          readOnly
+          pagination={{
+            current: 3,
+            pageSize: 100,
+            total: 400,
+            totalKnown: false,
+          }}
+          onPageChange={() => {}}
+        />,
+      );
+
+      expect(markup).toContain('第 3 页');
+      expect(markup).toContain('data-grid-pagination-sequential="true"');
+      expect(markup).not.toContain('class="ant-pagination');
+      expect(markup).not.toContain('data-grid-pagination-jump="true"');
+    } finally {
+      mockStoreState.uiVersion = previousUiVersion;
+    }
+  });
+
   it('renders the v2 DataGrid toolbar using the redesigned topbar hooks', () => {
     const markup = renderDataGridWithI18n(
       <DataGrid
diff --git a/frontend/src/components/DataGridPaginationBar.tsx b/frontend/src/components/DataGridPaginationBar.tsx
index 7844d9d..1bef385 100644
--- a/frontend/src/components/DataGridPaginationBar.tsx
+++ b/frontend/src/components/DataGridPaginationBar.tsx
@@ -48,6 +48,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
   translate = defaultTranslate,
 }) => {
   const [jumpPage, setJumpPage] = React.useState<number | null>(pagination?.current ?? null);
+  const showSequentialPagination = !showKnownPageCount;
 
   React.useEffect(() => {
     setJumpPage(pagination?.current ?? null);
@@ -93,6 +94,31 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
       </Button>
     </div>
   ) : null;
+  const sequentialPaginationControl = (
+    <div
+      className="data-grid-pagination-sequential"
+      data-grid-pagination-sequential="true"
+      style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}
+    >
+      <Button
+        data-grid-pagination-prev="true"
+        size="small"
+        icon={<LeftOutlined />}
+        disabled={!onPageChange || pagination.current <= 1}
+        onClick={() => onV2PageStep('previous')}
+      />
+      <div className="data-grid-pagination-page-chip" data-grid-page-chip="true">
+        <span>{paginationPageText}</span>
+      </div>
+      <Button
+        data-grid-pagination-next="true"
+        size="small"
+        icon={<RightOutlined />}
+        disabled={!onPageChange || pagination.current >= paginationTotalPages}
+        onClick={() => onV2PageStep('next')}
+      />
+    </div>
+  );
 
   return (
     <div
@@ -146,24 +172,26 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
             <span className="data-grid-pagination-kicker">{translate('data_grid.pagination.result_set')}</span>
             <span className="data-grid-pagination-summary-value">{paginationSummaryText}</span>
           </div>
-          <Pagination
-            current={pagination.current}
-            pageSize={pagination.pageSize}
-            total={paginationControlTotal}
-            showSizeChanger={false}
-            onChange={onPageChange}
-            showTitle={false}
-            size="small"
-            itemRender={(_page, type, originalElement) => {
-              if (type === 'prev') {
-                return <span className="data-grid-pagination-nav-icon" aria-hidden="true"><LeftOutlined /></span>;
-              }
-              if (type === 'next') {
-                return <span className="data-grid-pagination-nav-icon" aria-hidden="true"><RightOutlined /></span>;
-              }
-              return originalElement;
-            }}
-          />
+          {showSequentialPagination ? sequentialPaginationControl : (
+            <Pagination
+              current={pagination.current}
+              pageSize={pagination.pageSize}
+              total={paginationControlTotal}
+              showSizeChanger={false}
+              onChange={onPageChange}
+              showTitle={false}
+              size="small"
+              itemRender={(_page, type, originalElement) => {
+                if (type === 'prev') {
+                  return <span className="data-grid-pagination-nav-icon" aria-hidden="true"><LeftOutlined /></span>;
+                }
+                if (type === 'next') {
+                  return <span className="data-grid-pagination-nav-icon" aria-hidden="true"><RightOutlined /></span>;
+                }
+                return originalElement;
+              }}
+            />
+          )}
           {jumpPageControl}
           <Select
             size="small"
diff --git a/frontend/src/components/DataViewer.tsx b/frontend/src/components/DataViewer.tsx
index e44e957..c09dd48 100644
--- a/frontend/src/components/DataViewer.tsx
+++ b/frontend/src/components/DataViewer.tsx
@@ -369,6 +369,7 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
   const duckdbApproxKeyRef = useRef<string>('');
   const oracleApproxSeqRef = useRef(0);
   const oracleApproxKeyRef = useRef<string>('');
+  const autoCountKeyRef = useRef<string>('');
   const manualCountSeqRef = useRef(0);
   const manualCountKeyRef = useRef<string>('');
   const pkSeqRef = useRef(0);
@@ -463,6 +464,7 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
     countKeyRef.current = '';
     duckdbApproxKeyRef.current = '';
     oracleApproxKeyRef.current = '';
+    autoCountKeyRef.current = '';
     manualCountKeyRef.current = '';
     duckdbSafeSelectCacheRef.current = {};
     latestConfigRef.current = null;
@@ -923,7 +925,9 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
                         return { ...prev, current: currentPage, pageSize: size };
                     }
                 }
-                const keepManualCounting = prev.totalCountLoading && manualCountKeyRef.current === countKey;
+                const keepTotalCounting = prev.totalCountLoading && (
+                  manualCountKeyRef.current === countKey || autoCountKeyRef.current === countKey
+                );
                 const hasApproximateTotalForCurrentKey =
                   prev.totalApprox &&
                   (duckdbApproxKeyRef.current === countKey || oracleApproxKeyRef.current === countKey) &&
@@ -938,7 +942,7 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
                         totalKnown: false,
                         totalApprox: true,
                         approximateTotal: prev.approximateTotal,
-                        totalCountLoading: keepManualCounting,
+                        totalCountLoading: keepTotalCounting,
                         totalCountCancelled: false,
                     };
                 }
@@ -950,8 +954,8 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
                     totalKnown: false,
                     totalApprox: false,
                     approximateTotal: undefined,
-                    totalCountLoading: keepManualCounting,
-                    totalCountCancelled: keepManualCounting ? false : prev.totalCountCancelled,
+                    totalCountLoading: keepTotalCounting,
+                    totalCountCancelled: keepTotalCounting ? false : prev.totalCountCancelled,
                 };
             });
 
@@ -959,11 +963,13 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
             if (shouldRunAsyncCount) {
                 if (countKeyRef.current !== countKey) {
                     countKeyRef.current = countKey;
+                    autoCountKeyRef.current = countKey;
                     const countSeq = ++countSeqRef.current;
                     const countStart = Date.now();
                     // Large-table COUNT(*) can be slow and may delay later operations in some runtimes.
                     // DuckDB large-file scenarios disable background COUNT because it can slow pagination significantly.
                     const countConfig = buildRpcConnectionConfig(config, { timeout: 5 });
+                    setPagination(prev => ({ ...prev, totalCountLoading: true, totalCountCancelled: false }));
 
                     DBQuery(countConfig, dbName, countSql)
                         .then((resCount: any) => {
@@ -982,11 +988,21 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
                             if (countSeqRef.current !== countSeq) return;
                             if (latestCountKeyRef.current !== countKey) return;
 
-                            if (!resCount.success) return;
-                            if (!Array.isArray(resCount.data) || resCount.data.length === 0) return;
+                            autoCountKeyRef.current = '';
+                            if (!resCount.success) {
+                                setPagination(prev => ({ ...prev, totalCountLoading: false }));
+                                return;
+                            }
+                            if (!Array.isArray(resCount.data) || resCount.data.length === 0) {
+                                setPagination(prev => ({ ...prev, totalCountLoading: false }));
+                                return;
+                            }
 
                             const total = parseTotalFromCountRow(resCount.data[0]);
-                            if (total === null) return;
+                            if (total === null) {
+                                setPagination(prev => ({ ...prev, totalCountLoading: false }));
+                                return;
+                            }
 
                             setPagination(prev => ({
                                 ...prev,
@@ -1001,6 +1017,8 @@ const DataViewer: React.FC<{ tab: TabData; isActive?: boolean }> = React.memo(({
                         .catch(() => {
                             if (countSeqRef.current !== countSeq) return;
                             if (countKeyRef.current !== countKey) return;
+                            autoCountKeyRef.current = '';
+                            setPagination(prev => ({ ...prev, totalCountLoading: false }));
                             // Count failures do not block the main flow; details stay in the SQL log.
                         });
                 }
diff --git a/frontend/src/components/QueryEditor.external-sql-save.test.tsx b/frontend/src/components/QueryEditor.external-sql-save.test.tsx
index bed4649..f258508 100644
--- a/frontend/src/components/QueryEditor.external-sql-save.test.tsx
+++ b/frontend/src/components/QueryEditor.external-sql-save.test.tsx
@@ -5716,7 +5716,7 @@ describe('QueryEditor external SQL save', () => {
       await Promise.resolve();
     });
 
-    expect(textContent(renderer!.toJSON())).toContain('消息 2');
+    expect(textContent(renderer!.toJSON())).toContain('消息 1');
     expect(queryResultMessageText(renderer!)).toContain("insert into c_dyscript(projectid,name) values (1,'demo')");
     expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
     expect(dataGridState.latestProps).toBeNull();
@@ -5748,7 +5748,7 @@ describe('QueryEditor external SQL save', () => {
       await Promise.resolve();
     });
 
-    expect(textContent(renderer!.toJSON())).toContain('消息 2');
+    expect(textContent(renderer!.toJSON())).toContain('消息 1');
     expect(queryResultMessageText(renderer!)).toContain("insert into c_dyscript(projectid,name) values (1,'demo')");
     expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
     expect(dataGridState.latestProps).toBeNull();
diff --git a/frontend/src/components/QueryEditor.results-and-drop.test.tsx b/frontend/src/components/QueryEditor.results-and-drop.test.tsx
index 3e9ee7f..2a4cb3e 100644
--- a/frontend/src/components/QueryEditor.results-and-drop.test.tsx
+++ b/frontend/src/components/QueryEditor.results-and-drop.test.tsx
@@ -1306,6 +1306,49 @@ describe('QueryEditor external SQL save', () => {
     );
   });
 
+  it('falls back to read-only results when query locator metadata stalls', async () => {
+    vi.useFakeTimers();
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['NAME'], rows: [{ NAME: 'alpha' }] }],
+    });
+    backendApp.DBGetColumns.mockReturnValueOnce(new Promise(() => {}));
+    backendApp.DBGetIndexes.mockReturnValueOnce(new Promise(() => {}));
+
+    try {
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
+      });
+
+      await act(async () => {
+        findButton(renderer!, '运行').props.onClick();
+        await Promise.resolve();
+      });
+
+      expect(backendApp.DBQueryMulti).not.toHaveBeenCalled();
+
+      await act(async () => {
+        vi.advanceTimersByTime(2000);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(
+        expect.anything(),
+        'main',
+        'SELECT NAME FROM users LIMIT 5000',
+        'query-1',
+      );
+      expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ NAME: 'alpha' });
+      expect(dataGridState.latestProps?.tableName).toBe('users');
+      expect(dataGridState.latestProps?.readOnly).toBe(true);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it('keeps MySQL information_schema routine results read-only without a locator warning', async () => {
     const sql = [
       'SELECT ROUTINE_SCHEMA, ROUTINE_NAME, DEFINER, SECURITY_TYPE',
diff --git a/frontend/src/components/queryEditor/QueryEditorHelpers.ts b/frontend/src/components/queryEditor/QueryEditorHelpers.ts
index f4c0913..da72521 100644
--- a/frontend/src/components/queryEditor/QueryEditorHelpers.ts
+++ b/frontend/src/components/queryEditor/QueryEditorHelpers.ts
@@ -25,8 +25,30 @@ export type CompletionTriggerMeta = {dbName: string, triggerName: string, tableN
 export type CompletionRoutineMeta = {dbName: string, routineName: string, routineType: string, schemaName?: string};
 
 export const QUERY_LOCATOR_ALIAS_PREFIX = '__gonavi_locator_';
+const QUERY_LOCATOR_METADATA_TIMEOUT_MS = 1500;
 const SQLSERVER_MESSAGE_PREFIX_RE = /^\s*mssql:/i;
 
+const withSoftTimeout = <T,>(promise: Promise<T>, fallback: () => T, timeoutMs = QUERY_LOCATOR_METADATA_TIMEOUT_MS): Promise<T> => {
+    if (!Number.isFinite(timeoutMs) || timeoutMs <= 0 || typeof globalThis.setTimeout !== 'function') {
+        return promise.catch(() => fallback());
+    }
+    return new Promise<T>((resolve) => {
+        let settled = false;
+        const finish = (value: T) => {
+            if (settled) return;
+            settled = true;
+            globalThis.clearTimeout(timerId);
+            resolve(value);
+        };
+        const timerId = globalThis.setTimeout(() => {
+            finish(fallback());
+        }, timeoutMs);
+        promise
+            .then((value) => finish(value))
+            .catch(() => finish(fallback()));
+    });
+};
+
 const trimBoundaryBlankEntries = (entries: string[]): string[] => {
     let start = 0;
     let end = entries.length;
@@ -2059,9 +2081,15 @@ export const resolveQueryLocatorPlan = async ({
 
     try {
         const [resCols, resIndexes] = await Promise.all([
-            DBGetColumns(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName),
-            DBGetIndexes(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName)
-                .catch((error: any) => ({ success: false, message: String(error?.message || error || 'Failed to load indexes'), data: [] })),
+            withSoftTimeout(
+                DBGetColumns(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName),
+                () => ({ success: false, message: 'Timed out while loading columns', data: [] }),
+            ),
+            withSoftTimeout(
+                DBGetIndexes(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName)
+                    .catch((error: any) => ({ success: false, message: String(error?.message || error || 'Failed to load indexes'), data: [] })),
+                () => ({ success: false, message: 'Timed out while loading indexes', data: [] }),
+            ),
         ]);
         if (!resCols?.success || !Array.isArray(resCols.data)) {
             const reason = translate('query_editor.message.read_only_table_locator_metadata_unavailable', {
diff --git a/frontend/src/utils/dataGridPagination.test.ts b/frontend/src/utils/dataGridPagination.test.ts
index acdb4f7..83f410a 100644
--- a/frontend/src/utils/dataGridPagination.test.ts
+++ b/frontend/src/utils/dataGridPagination.test.ts
@@ -47,6 +47,13 @@ describe('dataGridPagination', () => {
       translate: keyEchoTranslate,
     })).toBe('data_grid.pagination.summary.counting {"current":1}');
 
+    expect(resolvePaginationSummaryText({
+      pagination: { ...pagination, totalKnown: false },
+      prefersManualTotalCount: false,
+      supportsApproximateTableCount: false,
+      translate: keyEchoTranslate,
+    })).toBe('data_grid.pagination.summary.not_counted {"current":1}');
+
     expect(resolvePaginationSummaryText({
       pagination: {
         ...pagination,
diff --git a/frontend/src/utils/dataGridPagination.ts b/frontend/src/utils/dataGridPagination.ts
index 183ca45..3ff8ba0 100644
--- a/frontend/src/utils/dataGridPagination.ts
+++ b/frontend/src/utils/dataGridPagination.ts
@@ -46,15 +46,16 @@ export const resolvePaginationSummaryText = (params: {
   const approximateTotal = resolveApproximateTotal(pagination);
 
   if (pagination.totalKnown === false) {
-    if (prefersManualTotalCount) {
-      if (pagination.totalCountLoading) return translate('data_grid.pagination.summary.counting_exact', { current: currentCount });
-      if (supportsApproximateTableCount && approximateTotal !== null) {
-        return translate('data_grid.pagination.summary.approximate', { current: currentCount, total: approximateTotal });
-      }
-      if (pagination.totalCountCancelled) return translate('data_grid.pagination.summary.cancelled', { current: currentCount });
-      return translate('data_grid.pagination.summary.not_counted', { current: currentCount });
+    if (pagination.totalCountLoading) {
+      return prefersManualTotalCount
+        ? translate('data_grid.pagination.summary.counting_exact', { current: currentCount })
+        : translate('data_grid.pagination.summary.counting', { current: currentCount });
     }
-    return translate('data_grid.pagination.summary.counting', { current: currentCount });
+    if (supportsApproximateTableCount && approximateTotal !== null) {
+      return translate('data_grid.pagination.summary.approximate', { current: currentCount, total: approximateTotal });
+    }
+    if (pagination.totalCountCancelled) return translate('data_grid.pagination.summary.cancelled', { current: currentCount });
+    return translate('data_grid.pagination.summary.not_counted', { current: currentCount });
   }
 
   if (!Number.isFinite(total) || total <= 0) {