Merge branch 'refs/heads/dev' into feature/20260307_opt

- 统一 DuckDB 文件库与 Parquet 文件接入能力
- 补充 URI、文件选择、只读挂载与连接缓存键处理
- 去掉数据源卡片点击前的同步驱动查询，修复打开卡顿
- refs #166

.github/workflows/sync-main-to-dev.yml

@@ -1,159 +0,0 @@
-name: main 回灌 dev
-
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-
-permissions:
-  contents: write
-  pull-requests: write
-
-concurrency:
-  group: sync-main-to-dev
-  cancel-in-progress: true
-
-jobs:
-  sync-main-to-dev:
-    name: 执行回灌同步
-    runs-on: ubuntu-latest
-    steps:
-      - name: 检出代码
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: 检查是否需要同步
-        id: diff_check
-        shell: bash
-        run: |
-          set -euo pipefail
-          echo "开始检查 main 与 dev 的分支差异..."
-          git fetch origin main dev
-          ahead_count="$(git rev-list --count origin/dev..origin/main)"
-          echo "ahead_count=${ahead_count}" >> "$GITHUB_OUTPUT"
-          if [ "${ahead_count}" -eq 0 ]; then
-            echo "无需同步，dev 已包含 main 的最新提交。"
-            echo "has_changes=false" >> "$GITHUB_OUTPUT"
-          else
-            echo "检测到 ${ahead_count} 个待同步提交，准备创建或复用同步 PR。"
-            echo "has_changes=true" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: 创建或复用同步 PR
-        id: sync_pr
-        if: steps.diff_check.outputs.has_changes == 'true'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        shell: bash
-        run: |
-          set -euo pipefail
-          echo "permission_blocked=false" >> "$GITHUB_OUTPUT"
-          existing_number="$(gh pr list --base dev --head main --state open --json number --jq '.[0].number // empty')"
-
-          if [ -n "${existing_number}" ]; then
-            pr_number="${existing_number}"
-            pr_url="$(gh pr view "${pr_number}" --json url --jq '.url')"
-            echo "复用已有同步 PR：#${pr_number}"
-            echo "created=false" >> "$GITHUB_OUTPUT"
-          else
-            body_file="$(mktemp)"
-            error_file="$(mktemp)"
-            {
-              echo "## 自动回灌：\`main -> dev\`"
-              echo
-              echo "- 触发条件：\`main\` 分支出现新提交（含贡献者直接合并到 \`main\` 的 PR）"
-              echo "- 目标：让 \`dev\` 持续吸收 \`main\` 的更新，避免发布前集中冲突"
-              echo
-              echo "### 合并建议"
-              echo "- 无冲突：直接合并该 PR（建议 \`Merge commit\`）"
-              echo "- 有冲突：在该 PR 内解决冲突后再合并"
-            } > "${body_file}"
-
-            if pr_url="$(gh pr create \
-              --base dev \
-              --head main \
-              --title "🔁 chore(sync): 回灌 main 到 dev" \
-              --body-file "${body_file}" 2>"${error_file}")"; then
-              pr_number="${pr_url##*/}"
-              echo "已创建同步 PR：#${pr_number}"
-              echo "created=true" >> "$GITHUB_OUTPUT"
-            else
-              error_message="$(tr '\n' ' ' < "${error_file}")"
-              if printf '%s' "${error_message}" | grep -Fq "GitHub Actions is not permitted to create or approve pull requests"; then
-                echo "::warning::仓库未开启“Allow GitHub Actions to create and approve pull requests”，已跳过自动创建同步 PR。"
-                echo "permission_blocked=true" >> "$GITHUB_OUTPUT"
-                echo "created=false" >> "$GITHUB_OUTPUT"
-                echo "pr_number=" >> "$GITHUB_OUTPUT"
-                echo "pr_url=" >> "$GITHUB_OUTPUT"
-                exit 0
-              fi
-              echo "::error::创建同步 PR 失败：${error_message}"
-              exit 1
-            fi
-          fi
-
-          echo "pr_number=${pr_number}" >> "$GITHUB_OUTPUT"
-          echo "pr_url=${pr_url}" >> "$GITHUB_OUTPUT"
-
-      - name: 检查合并状态
-        id: merge_state
-        if: steps.diff_check.outputs.has_changes == 'true' && steps.sync_pr.outputs.permission_blocked != 'true'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        shell: bash
-        run: |
-          set -euo pipefail
-          pr_number="${{ steps.sync_pr.outputs.pr_number }}"
-          mergeable="$(gh pr view "${pr_number}" --json mergeable --jq '.mergeable')"
-          merge_state_status="$(gh pr view "${pr_number}" --json mergeStateStatus --jq '.mergeStateStatus')"
-          echo "PR #${pr_number} 合并状态：mergeable=${mergeable}, mergeStateStatus=${merge_state_status}"
-          echo "mergeable=${mergeable}" >> "$GITHUB_OUTPUT"
-          echo "merge_state_status=${merge_state_status}" >> "$GITHUB_OUTPUT"
-
-      - name: 可合并时开启自动合并
-        id: auto_merge
-        if: steps.diff_check.outputs.has_changes == 'true' && steps.sync_pr.outputs.permission_blocked != 'true' && steps.merge_state.outputs.mergeable == 'MERGEABLE'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        shell: bash
-        run: |
-          set -euo pipefail
-          pr_number="${{ steps.sync_pr.outputs.pr_number }}"
-          if gh pr merge "${pr_number}" --merge --auto; then
-            echo "已为 PR #${pr_number} 开启自动合并。"
-            echo "result=enabled" >> "$GITHUB_OUTPUT"
-          else
-            echo "::warning::自动合并开启失败，请手动处理并合并该 PR。"
-            echo "result=failed" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: 写入执行摘要
-        if: always()
-        shell: bash
-        run: |
-          {
-            echo "## main 回灌 dev 执行结果"
-            if [ "${{ steps.diff_check.outputs.has_changes }}" != "true" ]; then
-              echo "- 状态：无需同步（dev 已包含 main 最新提交）"
-              exit 0
-            fi
-            if [ "${{ steps.sync_pr.outputs.permission_blocked }}" = "true" ]; then
-              echo "- 状态：已跳过自动创建同步 PR"
-              echo "- 原因：仓库未开启 GitHub Actions 创建与审批 Pull Request 权限"
-              echo "- 处理：前往 Settings -> Actions -> General -> Workflow permissions，开启 Allow GitHub Actions to create and approve pull requests"
-              echo "- 兜底：由维护者手动执行 main 到 dev 合并，或开启该设置后重新运行 workflow"
-              exit 0
-            fi
-            echo "- PR：${{ steps.sync_pr.outputs.pr_url }}"
-            echo "- 可合并状态：${{ steps.merge_state.outputs.mergeable }}"
-            echo "- 合并状态详情：${{ steps.merge_state.outputs.merge_state_status }}"
-            if [ "${{ steps.merge_state.outputs.mergeable }}" = "CONFLICTING" ]; then
-              echo "- 结论：检测到冲突，需要手动处理后合并"
-            elif [ "${{ steps.auto_merge.outputs.result }}" = "enabled" ]; then
-              echo "- 结论：已启用自动合并（满足保护规则后将自动入 dev）"
-            else
-              echo "- 结论：PR 已创建/复用，请按分支策略人工合并"
-            fi
-          } >> "$GITHUB_STEP_SUMMARY"

.github/workflows/test-build-all-platforms.yml

@@ -0,0 +1,342 @@
+name: Test Build All Platforms (Manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      build_label:
+        description: "测试包标识（仅用于文件名）"
+        required: false
+        default: "test"
+
+permissions:
+  contents: read
+
+concurrency:
+  group: test-build-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Build ${{ matrix.platform }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: macos-latest
+            platform: darwin/amd64
+            os_name: MacOS
+            arch_name: Amd64
+            build_name: gonavi-test-darwin-amd64
+            wails_tags: ""
+            artifact_suffix: ""
+            build_optional_agents: true
+            linux_webkit: ""
+          - os: macos-latest
+            platform: darwin/arm64
+            os_name: MacOS
+            arch_name: Arm64
+            build_name: gonavi-test-darwin-arm64
+            wails_tags: ""
+            artifact_suffix: ""
+            build_optional_agents: true
+            linux_webkit: ""
+          - os: windows-latest
+            platform: windows/amd64
+            os_name: Windows
+            arch_name: Amd64
+            build_name: gonavi-test-windows-amd64
+            wails_tags: ""
+            artifact_suffix: ""
+            build_optional_agents: true
+            linux_webkit: ""
+          - os: windows-latest
+            platform: windows/arm64
+            os_name: Windows
+            arch_name: Arm64
+            build_name: gonavi-test-windows-arm64
+            wails_tags: ""
+            artifact_suffix: ""
+            build_optional_agents: true
+            linux_webkit: ""
+          - os: ubuntu-22.04
+            platform: linux/amd64
+            os_name: Linux
+            arch_name: Amd64
+            build_name: gonavi-test-linux-amd64
+            wails_tags: ""
+            artifact_suffix: ""
+            build_optional_agents: true
+            linux_webkit: "4.0"
+          - os: ubuntu-24.04
+            platform: linux/amd64
+            os_name: Linux
+            arch_name: Amd64
+            build_name: gonavi-test-linux-amd64-webkit41
+            wails_tags: "webkit2_41"
+            artifact_suffix: "-WebKit41"
+            build_optional_agents: false
+            linux_webkit: "4.1"
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.24'
+          check-latest: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Linux Dependencies
+        if: contains(matrix.platform, 'linux')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev
+
+          if [ "${{ matrix.linux_webkit }}" = "4.1" ]; then
+            sudo apt-get install -y libwebkit2gtk-4.1-dev libsoup-3.0-dev
+          else
+            sudo apt-get install -y libwebkit2gtk-4.0-dev
+          fi
+
+          sudo apt-get install -y libfuse2 || sudo apt-get install -y libfuse2t64 || true
+
+          LINUXDEPLOY_URL="https://github.com/linuxdeploy/linuxdeploy/releases/download/continuous/linuxdeploy-x86_64.AppImage"
+          PLUGIN_URL="https://github.com/linuxdeploy/linuxdeploy-plugin-gtk/releases/download/continuous/linuxdeploy-plugin-gtk-x86_64.AppImage"
+
+          wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 --tries=3 -O /tmp/linuxdeploy "$LINUXDEPLOY_URL" || {
+            echo "skip-appimage=true" >> "$GITHUB_ENV"
+          }
+          wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 --tries=3 -O /tmp/linuxdeploy-plugin-gtk "$PLUGIN_URL" || {
+            echo "skip-appimage=true" >> "$GITHUB_ENV"
+          }
+
+          if [ "${skip-appimage:-false}" != "true" ]; then
+            chmod +x /tmp/linuxdeploy /tmp/linuxdeploy-plugin-gtk
+          fi
+
+      - name: Install Wails
+        run: go install github.com/wailsapp/wails/v2/cmd/wails@v2.11.0
+
+      - name: Setup MSYS2 Toolchain For DuckDB (Windows AMD64)
+        id: msys2_duckdb
+        if: ${{ matrix.build_optional_agents && matrix.platform == 'windows/amd64' }}
+        continue-on-error: true
+        uses: msys2/setup-msys2@v2
+        with:
+          msystem: UCRT64
+          update: true
+          install: >-
+            mingw-w64-ucrt-x86_64-gcc
+
+      - name: Configure DuckDB CGO Toolchain (Windows AMD64)
+        if: ${{ matrix.build_optional_agents && matrix.platform == 'windows/amd64' }}
+        shell: pwsh
+        run: |
+          function Find-MingwBin([string[]]$candidates) {
+            foreach ($bin in $candidates) {
+              if ([string]::IsNullOrWhiteSpace($bin)) {
+                continue
+              }
+              $gcc = Join-Path $bin 'gcc.exe'
+              $gxx = Join-Path $bin 'g++.exe'
+              if ((Test-Path $gcc) -and (Test-Path $gxx)) {
+                return $bin
+              }
+            }
+            return $null
+          }
+
+          $msys2Location = "${{ steps.msys2_duckdb.outputs['msys2-location'] }}"
+          $candidateBins = @()
+          if (-not [string]::IsNullOrWhiteSpace($msys2Location)) {
+            $candidateBins += Join-Path $msys2Location 'ucrt64\bin'
+          }
+          $candidateBins += @(
+            'C:\msys64\ucrt64\bin',
+            'D:\a\_temp\msys64\ucrt64\bin'
+          )
+          $candidateBins = @($candidateBins | Select-Object -Unique)
+
+          $mingwBin = Find-MingwBin $candidateBins
+          if (-not $mingwBin) {
+            Write-Error "❌ 未找到可用的 DuckDB UCRT64 编译器。"
+            exit 1
+          }
+
+          $gcc = Join-Path $mingwBin 'gcc.exe'
+          $gxx = Join-Path $mingwBin 'g++.exe'
+          "$mingwBin" | Out-File -FilePath $env:GITHUB_PATH -Append -Encoding utf8
+          "CC=$gcc" | Out-File -FilePath $env:GITHUB_ENV -Append -Encoding utf8
+          "CXX=$gxx" | Out-File -FilePath $env:GITHUB_ENV -Append -Encoding utf8
+
+      - name: Build App
+        shell: bash
+        run: |
+          set -euo pipefail
+          BUILD_LABEL="${{ inputs.build_label }}"
+          if [ -z "$BUILD_LABEL" ]; then
+            BUILD_LABEL="test"
+          fi
+          APP_VERSION="${BUILD_LABEL}-${GITHUB_RUN_NUMBER}"
+          if [ -n "${{ matrix.wails_tags }}" ]; then
+            wails build -platform "${{ matrix.platform }}" -clean -o "${{ matrix.build_name }}" -tags "${{ matrix.wails_tags }}" -ldflags "-s -w -X GoNavi-Wails/internal/app.AppVersion=${APP_VERSION}"
+          else
+            wails build -platform "${{ matrix.platform }}" -clean -o "${{ matrix.build_name }}" -ldflags "-s -w -X GoNavi-Wails/internal/app.AppVersion=${APP_VERSION}"
+          fi
+
+      - name: Build Optional Driver Agents
+        if: ${{ matrix.build_optional_agents }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          TARGET_PLATFORM="${{ matrix.platform }}"
+          GOOS="${TARGET_PLATFORM%%/*}"
+          GOARCH="${TARGET_PLATFORM##*/}"
+          DRIVERS=(mariadb doris sphinx sqlserver sqlite duckdb dameng kingbase highgo vastbase mongodb tdengine clickhouse)
+          OUTDIR="drivers/${{ matrix.os_name }}"
+          mkdir -p "$OUTDIR"
+
+          for DRIVER in "${DRIVERS[@]}"; do
+            BUILD_DRIVER="$DRIVER"
+            if [ "$DRIVER" = "doris" ]; then
+              BUILD_DRIVER="diros"
+            fi
+            if [ "$DRIVER" = "duckdb" ] && [ "$GOOS" = "windows" ] && [ "$GOARCH" != "amd64" ]; then
+              echo "跳过 DuckDB driver: ${GOOS}/${GOARCH}"
+              continue
+            fi
+            TAG="gonavi_${BUILD_DRIVER}_driver"
+            OUTPUT="${DRIVER}-driver-agent-${GOOS}-${GOARCH}"
+            if [ "$GOOS" = "windows" ]; then
+              OUTPUT="${OUTPUT}.exe"
+            fi
+            OUTPUT_PATH="${OUTDIR}/${OUTPUT}"
+            if [ "$DRIVER" = "duckdb" ]; then
+              CGO_ENABLED=1 GOOS="$GOOS" GOARCH="$GOARCH" go build -tags "$TAG" -trimpath -ldflags "-s -w" -o "$OUTPUT_PATH" ./cmd/optional-driver-agent
+            else
+              CGO_ENABLED=0 GOOS="$GOOS" GOARCH="$GOARCH" go build -tags "$TAG" -trimpath -ldflags "-s -w" -o "$OUTPUT_PATH" ./cmd/optional-driver-agent
+            fi
+          done
+
+      - name: Package macOS
+        if: contains(matrix.platform, 'darwin')
+        shell: bash
+        run: |
+          set -euo pipefail
+          brew install create-dmg
+          LABEL="${{ inputs.build_label }}"
+          if [ -z "$LABEL" ]; then
+            LABEL="test"
+          fi
+          cd build/bin
+          APP_PATH=$(find . -maxdepth 1 -name "*.app" | head -n 1)
+          if [ -z "$APP_PATH" ]; then
+            echo "未找到 .app 应用包"
+            exit 1
+          fi
+          APP_NAME=$(basename "$APP_PATH")
+          codesign --force --deep --sign - "$APP_NAME"
+          ZIP_NAME="GoNavi-${LABEL}-${{ matrix.os_name }}-${{ matrix.arch_name }}-run${GITHUB_RUN_NUMBER}.zip"
+          DMG_NAME="GoNavi-${LABEL}-${{ matrix.os_name }}-${{ matrix.arch_name }}-run${GITHUB_RUN_NUMBER}.dmg"
+          mkdir -p ../../artifacts
+          ditto -c -k --sequesterRsrc --keepParent "$APP_NAME" "../../artifacts/$ZIP_NAME"
+          create-dmg \
+            --volname "GoNavi Test Installer" \
+            --window-pos 200 120 \
+            --window-size 800 400 \
+            --icon-size 100 \
+            --icon "$APP_NAME" 200 190 \
+            --hide-extension "$APP_NAME" \
+            --app-drop-link 600 185 \
+            "$DMG_NAME" \
+            "$APP_NAME"
+          mv "$DMG_NAME" "../../artifacts/$DMG_NAME"
+          shasum -a 256 "../../artifacts/$ZIP_NAME" > "../../artifacts/$ZIP_NAME.sha256"
+          shasum -a 256 "../../artifacts/$DMG_NAME" > "../../artifacts/$DMG_NAME.sha256"
+
+      - name: Package Windows
+        if: contains(matrix.platform, 'windows')
+        shell: pwsh
+        run: |
+          $label = "${{ inputs.build_label }}"
+          if ([string]::IsNullOrWhiteSpace($label)) { $label = 'test' }
+          Set-Location build/bin
+          $target = "${{ matrix.build_name }}"
+          $finalExeName = "GoNavi-$label-${{ matrix.os_name }}-${{ matrix.arch_name }}-run$env:GITHUB_RUN_NUMBER.exe"
+          $finalZipName = "GoNavi-$label-${{ matrix.os_name }}-${{ matrix.arch_name }}-run$env:GITHUB_RUN_NUMBER.zip"
+          if (Test-Path "$target.exe") {
+            $finalExe = "$target.exe"
+          } elseif (Test-Path "$target") {
+            Rename-Item -Path "$target" -NewName "$target.exe"
+            $finalExe = "$target.exe"
+          } else {
+            Write-Error "未找到构建产物 '$target'"
+            exit 1
+          }
+          New-Item -ItemType Directory -Force -Path ..\..\artifacts | Out-Null
+          Copy-Item -LiteralPath $finalExe -Destination "..\..\artifacts\$finalExeName" -Force
+          Compress-Archive -LiteralPath $finalExe -DestinationPath "..\..\artifacts\$finalZipName" -Force
+          Get-FileHash "..\..\artifacts\$finalExeName" -Algorithm SHA256 | ForEach-Object { "{0} *{1}" -f $_.Hash.ToLower(), (Split-Path $_.Path -Leaf) } | Out-File "..\..\artifacts\$finalExeName.sha256" -Encoding ascii
+          Get-FileHash "..\..\artifacts\$finalZipName" -Algorithm SHA256 | ForEach-Object { "{0} *{1}" -f $_.Hash.ToLower(), (Split-Path $_.Path -Leaf) } | Out-File "..\..\artifacts\$finalZipName.sha256" -Encoding ascii
+
+      - name: Package Linux
+        if: contains(matrix.platform, 'linux')
+        shell: bash
+        run: |
+          set -euo pipefail
+          LABEL="${{ inputs.build_label }}"
+          if [ -z "$LABEL" ]; then
+            LABEL="test"
+          fi
+          cd build/bin
+          TARGET="${{ matrix.build_name }}"
+          TAR_NAME="GoNavi-${LABEL}-${{ matrix.os_name }}-${{ matrix.arch_name }}${{ matrix.artifact_suffix }}-run${GITHUB_RUN_NUMBER}.tar.gz"
+          APPIMAGE_NAME="GoNavi-${LABEL}-${{ matrix.os_name }}-${{ matrix.arch_name }}${{ matrix.artifact_suffix }}-run${GITHUB_RUN_NUMBER}.AppImage"
+          mkdir -p ../../artifacts
+
+          if [ ! -f "$TARGET" ]; then
+            echo "未找到构建产物 '$TARGET'"
+            exit 1
+          fi
+          chmod +x "$TARGET"
+          tar -czvf "../../artifacts/$TAR_NAME" "$TARGET"
+          sha256sum "../../artifacts/$TAR_NAME" > "../../artifacts/$TAR_NAME.sha256"
+
+          if [ "${skip-appimage:-false}" = "true" ]; then
+            echo "跳过 AppImage 打包"
+            exit 0
+          fi
+
+          mkdir -p AppDir/usr/bin AppDir/usr/share/applications AppDir/usr/share/icons/hicolor/256x256/apps
+          cp "$TARGET" AppDir/usr/bin/gonavi
+          printf '%s\n' '[Desktop Entry]' 'Name=GoNavi' 'Exec=gonavi' 'Icon=gonavi' 'Type=Application' 'Categories=Development;Database;' 'Comment=Database Management Tool' > AppDir/usr/share/applications/gonavi.desktop
+          cp AppDir/usr/share/applications/gonavi.desktop AppDir/gonavi.desktop
+          if [ -f "../../build/appicon.png" ]; then
+            cp "../../build/appicon.png" AppDir/usr/share/icons/hicolor/256x256/apps/gonavi.png
+            cp "../../build/appicon.png" AppDir/gonavi.png
+          else
+            touch AppDir/gonavi.png
+            cp AppDir/gonavi.png AppDir/usr/share/icons/hicolor/256x256/apps/gonavi.png
+          fi
+          export DEPLOY_GTK_VERSION=3
+          /tmp/linuxdeploy --appdir AppDir --plugin gtk --output appimage || exit 0
+          mv GoNavi*.AppImage "$APPIMAGE_NAME" 2>/dev/null || exit 0
+          mv "$APPIMAGE_NAME" "../../artifacts/$APPIMAGE_NAME"
+          sha256sum "../../artifacts/$APPIMAGE_NAME" > "../../artifacts/$APPIMAGE_NAME.sha256"
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-build-${{ matrix.build_name }}-run${{ github.run_number }}
+          path: |
+            artifacts/*
+            drivers/**
+          if-no-files-found: error
+          retention-days: 7

CONTRIBUTING.md

@@ -79,14 +79,8 @@ Because external pull requests are merged directly into `main`, maintainers must
 
 ### 1. Sync `main` -> `dev` (required)
 
-This repository provides automatic sync via GitHub Actions workflow:
-
-- `.github/workflows/sync-main-to-dev.yml`
-- Trigger: every push to `main`
-- Behavior: create/reuse a PR from `main` to `dev`; if mergeable, it tries to enable auto-merge
-- Prerequisite: in `Settings -> Actions -> General -> Workflow permissions`, enable `Allow GitHub Actions to create and approve pull requests`; otherwise the workflow will skip PR creation and only emit a warning summary
-
-Manual fallback (when conflicts or automation is unavailable):
+The automatic GitHub Actions sync workflow has been removed.
+Maintainers should sync `main` back to `dev` manually when needed:
 
 ```bash
 git checkout dev

CONTRIBUTING.zh-CN.md

@@ -79,14 +79,8 @@ feature/* / fix/* -> dev -> release/* -> main -> tag(vX.Y.Z)
 
 ### 1. main → dev 同步（必做）
 
-仓库已提供 GitHub Actions 自动同步机制：
-
-- `.github/workflows/sync-main-to-dev.yml`
-- 触发时机：每次 `main` 分支有新的 push
-- 行为：自动创建或复用 `main` 到 `dev` 的同步 PR；若可合并，则尝试开启自动合并
-- 前置条件：需在 `Settings -> Actions -> General -> Workflow permissions` 中开启 `Allow GitHub Actions to create and approve pull requests`，否则 workflow 只会输出告警摘要并跳过建 PR
-
-当出现冲突，或自动化暂不可用时，使用以下手动兜底方式：
+仓库已移除 GitHub Actions 自动回灌 workflow。
+当前统一采用手动方式将 `main` 同步回 `dev`：
 
 ```bash
 git checkout dev

frontend/src/App.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Layout, Button, ConfigProvider, theme, Dropdown, MenuProps, message, Modal, Spin, Slider, Progress, Switch, Input, InputNumber, Select } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
-import { PlusOutlined, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, GlobalOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined, LinkOutlined } from '@ant-design/icons';
+import { PlusOutlined, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, GlobalOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined, LinkOutlined, BgColorsOutlined, AppstoreOutlined } from '@ant-design/icons';
 import { BrowserOpenURL, Environment, EventsOn, Quit, WindowFullscreen, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowMaximise, WindowMinimise, WindowSetSize, WindowToggleMaximise } from '../wailsjs/runtime';
 import Sidebar from './components/Sidebar';
 import TabManager from './components/TabManager';
@@ -11,7 +11,7 @@ import DriverManagerModal from './components/DriverManagerModal';
 import LogPanel from './components/LogPanel';
 import { useStore } from './store';
 import { SavedConnection } from './types';
-import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform } from './utils/appearance';
+import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform, resolveAppearanceValues } from './utils/appearance';
 import {
   SHORTCUT_ACTION_META,
   SHORTCUT_ACTION_ORDER,
@@ -78,11 +78,11 @@ function App() {
   const tokenControlHeightLG = Math.max(30, Math.round(40 * effectiveUiScale));
   const appComponentSize: 'small' | 'middle' | 'large' = effectiveUiScale <= 0.92 ? 'small' : (effectiveUiScale >= 1.12 ? 'large' : 'middle');
   const titleBarHeight = Math.max(28, Math.round(32 * effectiveUiScale));
-  const toolbarHeight = Math.max(32, Math.round(36 * effectiveUiScale));
   const titleBarButtonWidth = Math.max(40, Math.round(46 * effectiveUiScale));
   const floatingLogButtonHeight = Math.max(30, Math.round(34 * effectiveUiScale));
-  const effectiveOpacity = normalizeOpacityForPlatform(appearance.opacity);
-  const effectiveBlur = normalizeBlurForPlatform(appearance.blur);
+  const resolvedAppearance = resolveAppearanceValues(appearance);
+  const effectiveOpacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
+  const effectiveBlur = normalizeBlurForPlatform(resolvedAppearance.blur);
   const blurFilter = blurToFilter(effectiveBlur);
   const windowCornerRadius = 14;
   const [runtimePlatform, setRuntimePlatform] = useState('');
@@ -93,8 +93,8 @@ function App() {
   // 同步 macOS 窗口透明度：opacity=1.0 且 blur=0 时关闭 NSVisualEffectView，
   // 避免 GPU 持续计算窗口背后的模糊合成
   useEffect(() => {
-    void SetWindowTranslucency(appearance.opacity, appearance.blur).catch(() => undefined);
-  }, [appearance.opacity, appearance.blur]);
+    void SetWindowTranslucency(resolvedAppearance.opacity, resolvedAppearance.blur).catch(() => undefined);
+  }, [resolvedAppearance.blur, resolvedAppearance.opacity]);
 
   useEffect(() => {
       let cancelled = false;
@@ -283,6 +283,7 @@ function App() {
       let inFlight = false;
       let lastRatio = Number(window.devicePixelRatio) || 1;
       let lastFixAt = 0;
+      let activationTimer: number | null = null;
 
       const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));
 
@@ -334,17 +335,55 @@ function App() {
           void fixWindowScaleIfNeeded();
       };
 
+      const scheduleActivationFix = () => {
+          if (cancelled) return;
+          if (activationTimer !== null) {
+              window.clearTimeout(activationTimer);
+          }
+          activationTimer = window.setTimeout(() => {
+              activationTimer = null;
+              if (cancelled) return;
+              void fixWindowScaleIfNeeded();
+          }, 80);
+      };
+
+      const handleWindowFocus = () => {
+          if (cancelled) return;
+          checkDevicePixelRatio();
+          scheduleActivationFix();
+      };
+
+      const handleVisibilityChange = () => {
+          if (cancelled) return;
+          if (document.visibilityState !== 'visible') {
+              return;
+          }
+          checkDevicePixelRatio();
+          scheduleActivationFix();
+      };
+
+      const handlePageShow = () => {
+          if (cancelled) return;
+          checkDevicePixelRatio();
+          scheduleActivationFix();
+      };
+
       const pollTimer = window.setInterval(checkDevicePixelRatio, 900);
       window.addEventListener('resize', checkDevicePixelRatio);
-      window.addEventListener('focus', checkDevicePixelRatio);
-      document.addEventListener('visibilitychange', checkDevicePixelRatio);
+      window.addEventListener('focus', handleWindowFocus);
+      window.addEventListener('pageshow', handlePageShow);
+      document.addEventListener('visibilitychange', handleVisibilityChange);
 
       return () => {
           cancelled = true;
+          if (activationTimer !== null) {
+              window.clearTimeout(activationTimer);
+          }
           window.clearInterval(pollTimer);
           window.removeEventListener('resize', checkDevicePixelRatio);
-          window.removeEventListener('focus', checkDevicePixelRatio);
-          document.removeEventListener('visibilitychange', checkDevicePixelRatio);
+          window.removeEventListener('focus', handleWindowFocus);
+          window.removeEventListener('pageshow', handlePageShow);
+          document.removeEventListener('visibilitychange', handleVisibilityChange);
       };
   }, []);
 
@@ -370,6 +409,141 @@ function App() {
   const floatingLogButtonShadow = darkMode
       ? '0 8px 22px rgba(0,0,0,0.38)'
       : '0 8px 20px rgba(0,0,0,0.16)';
+
+  const isOpaqueUtilityMode = resolvedAppearance.opacity >= 0.999 && resolvedAppearance.blur <= 0;
+  const utilityButtonBgAlpha = darkMode
+      ? Math.max(0.28, Math.min(0.76, effectiveOpacity * 0.72))
+      : Math.max(0.52, Math.min(0.92, effectiveOpacity * 0.9));
+  const utilityButtonBgColor = isOpaqueUtilityMode
+      ? 'transparent'
+      : (darkMode
+          ? `rgba(20, 26, 38, ${utilityButtonBgAlpha})`
+          : `rgba(255, 255, 255, ${utilityButtonBgAlpha})`);
+  const utilityButtonBorderColor = isOpaqueUtilityMode
+      ? (darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.10)')
+      : (darkMode
+          ? `rgba(255,255,255,${Math.max(0.08, Math.min(0.18, effectiveOpacity * 0.16))})`
+          : `rgba(16,24,40,${Math.max(0.06, Math.min(0.14, effectiveOpacity * 0.12))})`);
+  const utilityButtonShadow = isOpaqueUtilityMode
+      ? 'none'
+      : (darkMode
+          ? `0 8px 18px rgba(0,0,0,${Math.max(0.10, Math.min(0.22, effectiveOpacity * 0.24))})`
+          : `0 8px 18px rgba(15,23,42,${Math.max(0.04, Math.min(0.12, effectiveOpacity * 0.12))})`);
+  const utilityButtonStyle = useMemo(() => ({
+      height: Math.max(30, Math.round(32 * effectiveUiScale)),
+      width: '100%',
+      paddingInline: Math.max(10, Math.round(12 * effectiveUiScale)),
+      borderRadius: 10,
+      border: `1px solid ${utilityButtonBorderColor}`,
+      background: utilityButtonBgColor,
+      color: darkMode ? 'rgba(255,255,255,0.94)' : '#162033',
+      boxShadow: utilityButtonShadow,
+      backdropFilter: isOpaqueUtilityMode ? 'none' : blurFilter,
+      WebkitBackdropFilter: isOpaqueUtilityMode ? 'none' : blurFilter,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 6,
+  }), [blurFilter, darkMode, effectiveUiScale, isOpaqueUtilityMode, utilityButtonBgColor, utilityButtonBorderColor, utilityButtonShadow]);
+  const utilityDropdownShellStyle = useMemo(() => ({
+      borderRadius: 14,
+      padding: 6,
+      background: darkMode ? 'linear-gradient(180deg, rgba(20,26,38,0.96) 0%, rgba(13,17,26,0.98) 100%)' : 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)',
+      border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+      boxShadow: darkMode ? '0 20px 48px rgba(0,0,0,0.32)' : '0 16px 36px rgba(15,23,42,0.12)',
+      backdropFilter: darkMode ? 'blur(16px)' : 'none',
+      overflow: 'hidden',
+  }), [darkMode]);
+
+  const sidebarQuickActionBaseStyle = useMemo(() => ({
+      height: Math.max(34, Math.round(36 * effectiveUiScale)),
+      borderRadius: 12,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      paddingInline: Math.max(12, Math.round(14 * effectiveUiScale)),
+      fontWeight: 700,
+      boxShadow: darkMode ? '0 8px 18px rgba(0,0,0,0.16)' : '0 8px 16px rgba(15,23,42,0.08)',
+      backdropFilter: blurFilter,
+      WebkitBackdropFilter: blurFilter,
+      minWidth: 0,
+      whiteSpace: 'nowrap',
+    }), [blurFilter, darkMode, effectiveUiScale]);
+  const sidebarQueryActionStyle = useMemo(() => ({
+      ...sidebarQuickActionBaseStyle,
+      flex: '1 1 0',
+      border: `1px solid ${darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.10)'}`,
+      background: darkMode ? `rgba(255,255,255,0.05)` : 'rgba(255,255,255,0.88)',
+      color: darkMode ? 'rgba(255,255,255,0.92)' : '#162033',
+    }), [darkMode, sidebarQuickActionBaseStyle]);
+  const sidebarCreateConnectionActionStyle = useMemo(() => ({
+      ...sidebarQuickActionBaseStyle,
+      flex: '1 1 0',
+      border: 'none',
+      background: 'linear-gradient(135deg, rgba(255,214,102,0.96) 0%, rgba(240,183,39,0.92) 100%)',
+      color: '#2a1f00',
+    }), [sidebarQuickActionBaseStyle]);
+
+  const utilityMenuTheme = useMemo(() => ({
+      components: {
+          Menu: {
+              popupBg: 'transparent',
+              darkPopupBg: 'transparent',
+              itemBg: 'transparent',
+              darkItemBg: 'transparent',
+              subMenuItemBg: 'transparent',
+              itemColor: darkMode ? 'rgba(255,255,255,0.88)' : '#162033',
+              itemHoverColor: darkMode ? '#fff7d6' : '#0f172a',
+              itemHoverBg: darkMode ? 'rgba(255,214,102,0.10)' : 'rgba(24,144,255,0.08)',
+              itemSelectedColor: darkMode ? '#ffd666' : '#1677ff',
+              itemSelectedBg: darkMode ? 'rgba(255,214,102,0.14)' : 'rgba(24,144,255,0.12)',
+              itemBorderRadius: 10,
+              itemMarginBlock: 4,
+              itemMarginInline: 0,
+              itemPaddingInline: 12,
+              itemHeight: 40,
+              groupTitleColor: darkMode ? 'rgba(255,255,255,0.48)' : 'rgba(16,24,40,0.48)',
+          },
+      },
+  }), [darkMode]);
+  const renderUtilityDropdown = (menu: React.ReactNode) => (
+      <ConfigProvider theme={utilityMenuTheme}>
+          <div style={{ ...utilityDropdownShellStyle, minWidth: 220 }}>
+              {menu}
+          </div>
+      </ConfigProvider>
+  );
+  const utilityModalShellStyle = useMemo(() => ({
+      background: darkMode ? 'linear-gradient(180deg, rgba(20,26,38,0.96) 0%, rgba(13,17,26,0.98) 100%)' : 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)',
+      border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+      boxShadow: darkMode ? '0 24px 56px rgba(0,0,0,0.32)' : '0 18px 42px rgba(15,23,42,0.12)',
+      backdropFilter: darkMode ? 'blur(18px)' : 'none',
+  }), [darkMode]);
+  const utilityPanelStyle = useMemo(() => ({
+      padding: 16,
+      borderRadius: 14,
+      border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+      background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.84)',
+  }), [darkMode]);
+  const utilityMutedTextStyle = useMemo(() => ({
+      color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)',
+      fontSize: 12,
+      lineHeight: 1.6,
+  }), [darkMode]);
+  const renderUtilityModalTitle = (icon: React.ReactNode, title: string, description: string) => (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+          <div style={{ width: 36, height: 36, borderRadius: 12, display: 'grid', placeItems: 'center', background: darkMode ? 'rgba(255,214,102,0.12)' : 'rgba(24,144,255,0.1)', color: darkMode ? '#ffd666' : '#1677ff', flexShrink: 0 }}>
+              {icon}
+          </div>
+          <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 16, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>{title}</div>
+              <div style={{ marginTop: 4, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', fontSize: 12, lineHeight: 1.6 }}>{description}</div>
+          </div>
+      </div>
+  );
+
+  const sidebarHorizontalPadding = 10;
   
   const addTab = useStore(state => state.addTab);
   const activeContext = useStore(state => state.activeContext);
@@ -786,37 +960,18 @@ function App() {
           label: '驱动管理',
           icon: <SettingOutlined />,
           onClick: () => setIsDriverModalOpen(true)
-      }
-  ];
-
-  const themeMenu: MenuProps['items'] = [
-      {
-          key: 'light',
-          label: '亮色主题',
-          icon: themeMode === 'light' ? <CheckOutlined /> : undefined,
-          onClick: () => setTheme('light')
-      },
-      {
-          key: 'dark',
-          label: '暗色主题',
-          icon: themeMode === 'dark' ? <CheckOutlined /> : undefined,
-          onClick: () => setTheme('dark')
       },
       { type: 'divider' },
-      {
-          key: 'settings',
-          label: '外观设置...',
-          icon: <SettingOutlined />,
-          onClick: () => setIsAppearanceModalOpen(true)
-      },
       {
           key: 'shortcut-settings',
-          label: '快捷键管理...',
+          label: '快捷键管理',
           icon: <LinkOutlined />,
           onClick: () => setIsShortcutModalOpen(true)
       }
   ];
 
+  const [isThemeModalOpen, setIsThemeModalOpen] = useState(false);
+  const [themeModalSection, setThemeModalSection] = useState<'theme' | 'appearance'>('theme');
   const [isAppearanceModalOpen, setIsAppearanceModalOpen] = useState(false);
   const [isShortcutModalOpen, setIsShortcutModalOpen] = useState(false);
   const [capturingShortcutAction, setCapturingShortcutAction] = useState<ShortcutAction | null>(null);
@@ -1190,8 +1345,6 @@ function App() {
             },
             components: {
                 Layout: {
-                    colorBgBody: 'transparent', 
-                    colorBgHeader: 'transparent',
                     bodyBg: 'transparent',
                     headerBg: 'transparent',
                     siderBg: 'transparent',
@@ -1272,28 +1425,6 @@ function App() {
               </div>
           </div>
 
-          <div
-            style={{
-                height: toolbarHeight,
-                flexShrink: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                gap: Math.max(2, Math.round(4 * effectiveUiScale)),
-                padding: `0 ${Math.max(6, Math.round(8 * effectiveUiScale))}px`,
-                borderBottom: 'none',
-                background: bgMain,
-            }}
-          >
-            <Dropdown menu={{ items: toolsMenu }} placement="bottomLeft">
-                <Button type="text" icon={<ToolOutlined />} title="工具">工具</Button>
-            </Dropdown>
-            <Button type="text" icon={<GlobalOutlined />} title="代理" onClick={() => setIsProxyModalOpen(true)}>代理</Button>
-            <Dropdown menu={{ items: themeMenu }} placement="bottomLeft">
-                <Button type="text" icon={<SkinOutlined />} title="主题">主题</Button>
-            </Dropdown>
-            <Button type="text" icon={<InfoCircleOutlined />} title="关于" onClick={() => setIsAboutOpen(true)}>关于</Button>
-          </div>
           <Layout style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
           <Sider 
             width={sidebarWidth} 
@@ -1304,13 +1435,26 @@ function App() {
             }}
           >
             <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-                <div style={{ padding: '10px', borderBottom: 'none', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', flexShrink: 0 }}>
-                
-                <div>
-                    <Button type="text" icon={<ConsoleSqlOutlined />} onClick={handleNewQuery} title="新建查询" />
-                    <Button type="text" icon={<PlusOutlined />} onClick={() => setIsModalOpen(true)} title="新建连接" />
+                <div style={{ padding: `12px ${sidebarHorizontalPadding}px 8px`, borderBottom: 'none', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 8, width: '100%' }}>
+                        <Dropdown menu={{ items: toolsMenu }} placement="bottomLeft" dropdownRender={renderUtilityDropdown}>
+                            <Button type="text" icon={<ToolOutlined />} title="工具" style={utilityButtonStyle}>工具</Button>
+                        </Dropdown>
+                        <Button type="text" icon={<GlobalOutlined />} title="代理" style={utilityButtonStyle} onClick={() => setIsProxyModalOpen(true)}>代理</Button>
+                        <Button type="text" icon={<SkinOutlined />} title="主题" style={utilityButtonStyle} onClick={() => setIsThemeModalOpen(true)}>主题</Button>
+                        <Button type="text" icon={<InfoCircleOutlined />} title="关于" style={utilityButtonStyle} onClick={() => setIsAboutOpen(true)}>关于</Button>
+                    </div>
+                </div>
+                <div style={{ padding: `0 ${sidebarHorizontalPadding}px 10px`, borderBottom: 'none', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 8, width: '100%' }}>
+                        <Button icon={<ConsoleSqlOutlined />} onClick={handleNewQuery} title="新建查询" style={sidebarQueryActionStyle}>
+                            新建查询
+                        </Button>
+                        <Button icon={<PlusOutlined />} onClick={() => setIsModalOpen(true)} title="新建连接" style={sidebarCreateConnectionActionStyle}>
+                            新建连接
+                        </Button>
+                    </div>
                 </div>
-            </div>
                 
                 <div style={{ flex: 1, overflow: 'hidden', paddingBottom: 58 }}>
                     <Sidebar onEditConnection={handleEditConnection} />
@@ -1370,8 +1514,8 @@ function App() {
                 title="拖动调整宽度"
             />
           </Sider>
-           <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 }}>
+           <Content style={{ background: isLogPanelOpen ? bgContent : '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, marginBottom: isLogPanelOpen ? 8 : 0, borderRadius: isLogPanelOpen ? windowCornerRadius : 0, clipPath: isLogPanelOpen ? `inset(0 round ${windowCornerRadius}px)` : 'none' }}>
                  <TabManager />
              </div>
              {isLogPanelOpen && (
@@ -1399,9 +1543,10 @@ function App() {
             onOpenGlobalProxySettings={() => setIsProxyModalOpen(true)}
           />
           <Modal
-            title="关于 GoNavi"
+            title={renderUtilityModalTitle(<InfoCircleOutlined />, '关于 GoNavi', '查看版本信息、仓库地址、更新状态与下载入口。')}
             open={isAboutOpen}
             onCancel={() => setIsAboutOpen(false)}
+            styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
             footer={[
                 canShowProgressEntry ? (
                     <Button key="progress" icon={<DownloadOutlined />} onClick={showUpdateDownloadProgress}>下载进度</Button>
@@ -1421,150 +1566,274 @@ function App() {
                     <Spin />
                 </div>
             ) : (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div>版本：{aboutInfo?.version || '未知'}</div>
-                    <div>作者：{aboutInfo?.author || '未知'}</div>
-                    {aboutInfo?.communityUrl ? (
-                        <div>技术圈：<a onClick={(e) => { e.preventDefault(); if (aboutInfo?.communityUrl) BrowserOpenURL(aboutInfo.communityUrl); }} href={aboutInfo.communityUrl}>AI全书</a></div>
-                    ) : null}
-                    <div>更新状态：{aboutUpdateStatus || '未检查'}</div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                        <GithubOutlined />
-                        {aboutInfo?.repoUrl ? (
-                        <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.repoUrl) BrowserOpenURL(aboutInfo.repoUrl); }} href={aboutInfo.repoUrl}>
-                            {aboutInfo.repoUrl}
-                        </a>
-                    ) : '未知'}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                    <div style={utilityPanelStyle}>
+                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
+                            <div>
+                                <div style={{ marginBottom: 6, fontWeight: 600 }}>版本</div>
+                                <div style={utilityMutedTextStyle}>{aboutInfo?.version || '未知'}</div>
+                            </div>
+                            <div>
+                                <div style={{ marginBottom: 6, fontWeight: 600 }}>作者</div>
+                                <div style={utilityMutedTextStyle}>{aboutInfo?.author || '未知'}</div>
+                            </div>
+                            <div style={{ gridColumn: '1 / -1' }}>
+                                <div style={{ marginBottom: 6, fontWeight: 600 }}>更新状态</div>
+                                <div style={utilityMutedTextStyle}>{aboutUpdateStatus || '未检查'}</div>
+                            </div>
+                            {aboutInfo?.communityUrl ? (
+                                <div style={{ gridColumn: '1 / -1' }}>
+                                    <div style={{ marginBottom: 6, fontWeight: 600 }}>技术圈</div>
+                                    <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.communityUrl) BrowserOpenURL(aboutInfo.communityUrl); }} href={aboutInfo.communityUrl}>AI全书</a>
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                    <div style={utilityPanelStyle}>
+                        <div style={{ marginBottom: 10, fontWeight: 600 }}>项目入口</div>
+                        <div style={{ display: 'grid', gap: 10 }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                <GithubOutlined />
+                                {aboutInfo?.repoUrl ? (
+                                    <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.repoUrl) BrowserOpenURL(aboutInfo.repoUrl); }} href={aboutInfo.repoUrl}>{aboutInfo.repoUrl}</a>
+                                ) : '未知'}
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                <BugOutlined />
+                                {aboutInfo?.issueUrl ? (
+                                    <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.issueUrl) BrowserOpenURL(aboutInfo.issueUrl); }} href={aboutInfo.issueUrl}>{aboutInfo.issueUrl}</a>
+                                ) : '未知'}
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                                <CloudDownloadOutlined />
+                                {aboutInfo?.releaseUrl ? (
+                                    <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.releaseUrl) BrowserOpenURL(aboutInfo.releaseUrl); }} href={aboutInfo.releaseUrl}>{aboutInfo.releaseUrl}</a>
+                                ) : '未知'}
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <BugOutlined />
-                    {aboutInfo?.issueUrl ? (
-                        <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.issueUrl) BrowserOpenURL(aboutInfo.issueUrl); }} href={aboutInfo.issueUrl}>
-                            {aboutInfo.issueUrl}
-                        </a>
-                    ) : '未知'}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <CloudDownloadOutlined />
-                    {aboutInfo?.releaseUrl ? (
-                        <a onClick={(e) => { e.preventDefault(); if (aboutInfo?.releaseUrl) BrowserOpenURL(aboutInfo.releaseUrl); }} href={aboutInfo.releaseUrl}>
-                            {aboutInfo.releaseUrl}
-                        </a>
-                    ) : '未知'}
-                </div>
-            </div>
             )}
           </Modal>
 
           <Modal
-              title="外观设置"
-              open={isAppearanceModalOpen}
-              onCancel={() => setIsAppearanceModalOpen(false)}
+              title={renderUtilityModalTitle(
+                  themeModalSection === 'theme' ? <SkinOutlined /> : <BgColorsOutlined />,
+                  themeModalSection === 'theme' ? '主题设置' : '外观设置',
+                  themeModalSection === 'theme'
+                      ? '切换亮暗主题，保持整体视觉风格统一。'
+                      : '统一调整缩放、字体、透明度与模糊效果。'
+              )}
+              open={isThemeModalOpen}
+              onCancel={() => { setIsThemeModalOpen(false); setThemeModalSection('theme'); }}
               footer={null}
-              width={460}
+              width={820}
+              styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8, height: 620, overflow: 'hidden' }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
           >
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: '12px 0' }}>
-                  <div>
-                      <div style={{ marginBottom: 8, fontWeight: 500 }}>界面缩放 (UI Scale)</div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-                          <Slider
-                            min={MIN_UI_SCALE}
-                            max={MAX_UI_SCALE}
-                            step={0.05}
-                            value={effectiveUiScale}
-                            onChange={(v) => setUiScale(Number(v))}
-                            style={{ flex: 1 }}
-                          />
-                          <span style={{ width: 56 }}>{Math.round(effectiveUiScale * 100)}%</span>
-                      </div>
-                      <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
-                          * 建议小屏设备设置为 85%-95%
+              <div style={{ display: 'grid', gridTemplateColumns: '180px minmax(0, 1fr)', gap: 16, padding: '12px 0', height: '100%', minHeight: 0, overflow: 'hidden', alignItems: 'stretch' }}>
+                  <div style={{ ...utilityPanelStyle, padding: 12, height: 'fit-content' }}>
+                      <div style={{ marginBottom: 12, fontWeight: 600 }}>设置导航</div>
+                      <div style={{ display: 'grid', gap: 10 }}>
+                          {[
+                              { key: 'theme', title: '主题模式', description: '亮色与暗色切换', icon: <SkinOutlined /> },
+                              { key: 'appearance', title: '外观参数', description: '缩放、字体与透明度', icon: <BgColorsOutlined /> },
+                          ].map((item) => {
+                              const active = themeModalSection === item.key;
+                              return (
+                                  <button
+                                      key={item.key}
+                                      type="button"
+                                      onClick={() => setThemeModalSection(item.key as 'theme' | 'appearance')}
+                                      style={{
+                                          textAlign: 'left',
+                                          padding: '12px 12px',
+                                          borderRadius: 12,
+                                          border: `1px solid ${active
+                                              ? (darkMode ? 'rgba(255,214,102,0.3)' : 'rgba(24,144,255,0.24)')
+                                              : (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
+                                          background: active
+                                              ? (darkMode ? 'linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)' : 'linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)')
+                                              : (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.72)'),
+                                          color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
+                                          cursor: 'pointer',
+                                      }}
+                                  >
+                                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                                          <span>{item.icon}</span>
+                                          <span style={{ fontWeight: 700 }}>{item.title}</span>
+                                      </div>
+                                      <div style={{ marginTop: 6, fontSize: 12, lineHeight: 1.6, color: active ? (darkMode ? 'rgba(255,255,255,0.68)' : 'rgba(22,32,51,0.68)') : utilityMutedTextStyle.color }}>
+                                          {item.description}
+                                      </div>
+                                  </button>
+                              );
+                          })}
                       </div>
                   </div>
-                  <div>
-                      <div style={{ marginBottom: 8, fontWeight: 500 }}>基础字体大小 (Font Size)</div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-                          <Slider
-                            min={MIN_FONT_SIZE}
-                            max={MAX_FONT_SIZE}
-                            step={1}
-                            value={effectiveFontSize}
-                            onChange={(v) => setFontSize(Number(v))}
-                            style={{ flex: 1 }}
-                          />
-                          <span style={{ width: 56 }}>{effectiveFontSize}px</span>
-                      </div>
-                  </div>
-                  <div>
-                      <div style={{ marginBottom: 8, fontWeight: 500 }}>背景不透明度 (Opacity)</div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-                          <Slider 
-                            min={0.1} 
-                            max={1.0} 
-                            step={0.05} 
-                            value={appearance.opacity ?? 1.0} 
-                            onChange={(v) => setAppearance({ opacity: v })} 
-                            style={{ flex: 1 }}
-                          />
-                          <span style={{ width: 40 }}>{Math.round((appearance.opacity ?? 1.0) * 100)}%</span>
-                      </div>
-                  </div>
-                  <div>
-                      <div style={{ marginBottom: 8, fontWeight: 500 }}>高斯模糊 (Blur)</div>
-                      {isWindowsPlatform() ? (
-                          <div style={{ fontSize: 12, color: '#888' }}>
-                              Windows 使用系统 Acrylic 效果，模糊程度由系统控制
+                  <div style={{ minWidth: 0, minHeight: 0, height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 8, paddingBottom: 28 }}>
+                      {themeModalSection === 'theme' ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                              <div style={utilityPanelStyle}>
+                                  <div style={{ marginBottom: 10, fontWeight: 600 }}>主题模式</div>
+                                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
+                                      {[
+                                          { key: 'light', label: '亮色主题', description: '适合明亮环境，层次更轻。' },
+                                          { key: 'dark', label: '暗色主题', description: '适合低光环境，视觉更沉稳。' },
+                                      ].map((item) => {
+                                          const active = themeMode === item.key;
+                                          return (
+                                              <button
+                                                  key={item.key}
+                                                  type="button"
+                                                  onClick={() => setTheme(item.key as 'light' | 'dark')}
+                                                  style={{
+                                                      textAlign: 'left',
+                                                      padding: '14px 14px',
+                                                      borderRadius: 14,
+                                                      border: `1px solid ${active
+                                                          ? (darkMode ? 'rgba(255,214,102,0.3)' : 'rgba(24,144,255,0.24)')
+                                                          : (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)')}`,
+                                                      background: active
+                                                          ? (darkMode ? 'linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)' : 'linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)')
+                                                          : (darkMode ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.72)'),
+                                                      color: active ? (darkMode ? '#f5f7ff' : '#162033') : (darkMode ? 'rgba(255,255,255,0.82)' : '#3f4b5e'),
+                                                      cursor: 'pointer',
+                                                  }}
+                                              >
+                                                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                                                      <span style={{ fontSize: 14, fontWeight: 700 }}>{item.label}</span>
+                                                      {active ? <CheckOutlined style={{ color: darkMode ? '#ffd666' : '#1677ff' }} /> : null}
+                                                  </div>
+                                                  <div style={{ marginTop: 6, fontSize: 12, lineHeight: 1.6, color: active ? (darkMode ? 'rgba(255,255,255,0.68)' : 'rgba(22,32,51,0.68)') : utilityMutedTextStyle.color }}>
+                                                      {item.description}
+                                                  </div>
+                                              </button>
+                                          );
+                                      })}
+                                  </div>
+                              </div>
                           </div>
                       ) : (
-                          <>
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-                                  <Slider
-                                    min={0}
-                                    max={20}
-                                    value={appearance.blur ?? 0}
-                                    onChange={(v) => setAppearance({ blur: v })}
-                                    style={{ flex: 1 }}
-                                  />
-                                  <span style={{ width: 40 }}>{appearance.blur}px</span>
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                              <div style={utilityPanelStyle}>
+                                  <div style={{ marginBottom: 8, fontWeight: 500 }}>界面缩放 (UI Scale)</div>
+                                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                                      <Slider
+                                        min={MIN_UI_SCALE}
+                                        max={MAX_UI_SCALE}
+                                        step={0.05}
+                                        value={effectiveUiScale}
+                                        onChange={(v) => setUiScale(Number(v))}
+                                        style={{ flex: 1 }}
+                                      />
+                                      <span style={{ width: 56 }}>{Math.round(effectiveUiScale * 100)}%</span>
+                                  </div>
+                                  <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 4 }}>
+                                      * 建议小屏设备设置为 85%-95%
+                                  </div>
                               </div>
-                              <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
-                                  * 仅控制应用内覆盖层的模糊效果
+                              <div style={utilityPanelStyle}>
+                                  <div style={{ marginBottom: 8, fontWeight: 500 }}>基础字体大小 (Font Size)</div>
+                                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                                      <Slider
+                                        min={MIN_FONT_SIZE}
+                                        max={MAX_FONT_SIZE}
+                                        step={1}
+                                        value={effectiveFontSize}
+                                        onChange={(v) => setFontSize(Number(v))}
+                                        style={{ flex: 1 }}
+                                      />
+                                      <span style={{ width: 56 }}>{effectiveFontSize}px</span>
+                                  </div>
                               </div>
-                          </>
+                              <div style={utilityPanelStyle}>
+                                  <div style={{ marginBottom: 10, fontWeight: 500 }}>透明与模糊效果</div>
+                                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
+                                      <div>
+                                          <div style={{ fontWeight: 500 }}>启用透明与模糊</div>
+                                          <div style={{ ...utilityMutedTextStyle, marginTop: 4 }}>关闭后保留当前阈值，重新开启时直接恢复之前的设置。</div>
+                                      </div>
+                                      <Switch checked={appearance.enabled !== false} onChange={(checked) => setAppearance({ enabled: checked })} />
+                                  </div>
+                                  <div style={{ display: 'grid', gap: 14, opacity: appearance.enabled !== false ? 1 : 0.6 }}>
+                                      <div>
+                                          <div style={{ marginBottom: 8, fontWeight: 500 }}>背景不透明度 (Opacity)</div>
+                                          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                                              <Slider 
+                                                min={0.1} 
+                                                max={1.0} 
+                                                step={0.05} 
+                                                disabled={appearance.enabled === false}
+                                                value={appearance.opacity ?? 1.0} 
+                                                onChange={(v) => setAppearance({ opacity: v })} 
+                                                style={{ flex: 1 }}
+                                              />
+                                              <span style={{ width: 40 }}>{Math.round((appearance.opacity ?? 1.0) * 100)}%</span>
+                                          </div>
+                                      </div>
+                                      <div>
+                                          <div style={{ marginBottom: 8, fontWeight: 500 }}>高斯模糊 (Blur)</div>
+                                          {isWindowsPlatform() ? (
+                                              <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
+                                                  Windows 使用系统 Acrylic 效果，模糊程度由系统控制
+                                              </div>
+                                          ) : (
+                                              <>
+                                                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                                                      <Slider
+                                                        min={0}
+                                                        max={20}
+                                                        disabled={appearance.enabled === false}
+                                                        value={appearance.blur ?? 0}
+                                                        onChange={(v) => setAppearance({ blur: v })}
+                                                        style={{ flex: 1 }}
+                                                      />
+                                                      <span style={{ width: 40 }}>{appearance.blur}px</span>
+                                                  </div>
+                                                  <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 4 }}>
+                                                      * 仅控制应用内覆盖层的模糊效果
+                                                  </div>
+                                              </>
+                                          )}
+                                      </div>
+                                  </div>
+                              </div>
+                              <div style={utilityPanelStyle}>
+                                  <div style={{ marginBottom: 8, fontWeight: 500 }}>启动窗口</div>
+                                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+                                      <span>启动时全屏</span>
+                                      <Switch checked={startupFullscreen} onChange={(checked) => setStartupFullscreen(checked)} />
+                                  </div>
+                                  <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 4 }}>
+                                      * 修改后下次启动生效
+                                  </div>
+                              </div>
+                              <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, paddingTop: 8, paddingBottom: 12 }}>
+                                  <Button
+                                      onClick={() => {
+                                          setUiScale(DEFAULT_UI_SCALE);
+                                          setFontSize(DEFAULT_FONT_SIZE);
+                                          setAppearance({ enabled: true, opacity: 1.0, blur: 0 });
+                                      }}
+                                  >
+                                      恢复默认
+                                  </Button>
+                              </div>
+                          </div>
                       )}
                   </div>
-                  <div>
-                      <div style={{ marginBottom: 8, fontWeight: 500 }}>启动窗口</div>
-                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-                          <span>启动时全屏</span>
-                          <Switch checked={startupFullscreen} onChange={(checked) => setStartupFullscreen(checked)} />
-                      </div>
-                      <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
-                          * 修改后下次启动生效
-                      </div>
-                  </div>
-                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                      <Button
-                          onClick={() => {
-                              setUiScale(DEFAULT_UI_SCALE);
-                              setFontSize(DEFAULT_FONT_SIZE);
-                              setAppearance({ opacity: 1.0, blur: 0 });
-                          }}
-                      >
-                          恢复默认
-                      </Button>
-                  </div>
               </div>
           </Modal>
 
           <Modal
-              title="快捷键管理"
+              title={renderUtilityModalTitle(<LinkOutlined />, '快捷键管理', '统一查看、录制与启停常用快捷键，保持操作习惯一致。')}
               open={isShortcutModalOpen}
               onCancel={() => {
                   setIsShortcutModalOpen(false);
                   setCapturingShortcutAction(null);
               }}
-              width={720}
+              width={760}
+              styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
               footer={[
                   <Button
                       key="reset"
@@ -1588,9 +1857,11 @@ function App() {
                   </Button>,
               ]}
           >
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 8 }}>
-                  <div style={{ fontSize: 12, color: '#8c8c8c' }}>
-                      点击“录制”后按下快捷键。按 Esc 可取消录制。建议至少包含一个修饰键（Ctrl/Alt/Shift/Meta）。
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8 }}>
+                  <div style={utilityPanelStyle}>
+                      <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
+                          点击“录制”后按下快捷键。按 Esc 可取消录制。建议至少包含一个修饰键（Ctrl/Alt/Shift/Meta）。
+                      </div>
                   </div>
                   {SHORTCUT_ACTION_ORDER.map((action) => {
                       const meta = SHORTCUT_ACTION_META[action];
@@ -1600,18 +1871,17 @@ function App() {
                           <div
                               key={action}
                               style={{
+                                  ...utilityPanelStyle,
                                   display: 'grid',
                                   gridTemplateColumns: '1fr auto',
                                   gap: 12,
                                   alignItems: 'center',
                                   padding: '10px 12px',
-                                  border: '1px solid rgba(128, 128, 128, 0.2)',
-                                  borderRadius: 8,
                               }}
                           >
                               <div>
                                   <div style={{ fontWeight: 500 }}>{meta.label}</div>
-                                  <div style={{ fontSize: 12, color: '#8c8c8c' }}>{meta.description}</div>
+                                  <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>{meta.description}</div>
                               </div>
                               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                   <Input
@@ -1636,14 +1906,15 @@ function App() {
               </div>
           </Modal>
           <Modal
-              title="全局代理设置"
+              title={renderUtilityModalTitle(<GlobalOutlined />, '全局代理设置', '统一配置更新检查、驱动管理与未单独指定代理的连接网络出口。')}
               open={isProxyModalOpen}
               onCancel={() => setIsProxyModalOpen(false)}
               footer={null}
-              width={460}
+              width={520}
+              styles={{ content: utilityModalShellStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 8 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 10 } }}
           >
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: '12px 0' }}>
-                  <div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '12px 0' }}>
+                  <div style={utilityPanelStyle}>
                       <div style={{ marginBottom: 8, fontWeight: 500 }}>全局代理</div>
                       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                           <span>启用全局代理</span>
@@ -1651,7 +1922,7 @@ function App() {
                       </div>
                       <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, opacity: globalProxy.enabled ? 1 : 0.7 }}>
                           <div>
-                              <div style={{ marginBottom: 6, fontSize: 12, color: '#8c8c8c' }}>代理类型</div>
+                              <div style={{ marginBottom: 6, fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>代理类型</div>
                               <Select
                                   value={globalProxy.type}
                                   disabled={!globalProxy.enabled}
@@ -1663,7 +1934,7 @@ function App() {
                               />
                           </div>
                           <div>
-                              <div style={{ marginBottom: 6, fontSize: 12, color: '#8c8c8c' }}>端口</div>
+                              <div style={{ marginBottom: 6, fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>端口</div>
                               <InputNumber
                                   min={1}
                                   max={65535}
@@ -1676,7 +1947,7 @@ function App() {
                               />
                           </div>
                           <div style={{ gridColumn: '1 / span 2' }}>
-                              <div style={{ marginBottom: 6, fontSize: 12, color: '#8c8c8c' }}>代理地址</div>
+                              <div style={{ marginBottom: 6, fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>代理地址</div>
                               <Input
                                   placeholder="例如：127.0.0.1"
                                   value={globalProxy.host}
@@ -1685,7 +1956,7 @@ function App() {
                               />
                           </div>
                           <div>
-                              <div style={{ marginBottom: 6, fontSize: 12, color: '#8c8c8c' }}>用户名（可选）</div>
+                              <div style={{ marginBottom: 6, fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>用户名（可选）</div>
                               <Input
                                   placeholder="proxy-user"
                                   value={globalProxy.user}
@@ -1694,7 +1965,7 @@ function App() {
                               />
                           </div>
                           <div>
-                              <div style={{ marginBottom: 6, fontSize: 12, color: '#8c8c8c' }}>密码（可选）</div>
+                              <div style={{ marginBottom: 6, fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>密码（可选）</div>
                               <Input.Password
                                   placeholder="proxy-password"
                                   value={globalProxy.password}
@@ -1703,7 +1974,7 @@ function App() {
                               />
                           </div>
                       </div>
-                      <div style={{ fontSize: 12, color: '#888', marginTop: 6 }}>
+                      <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', marginTop: 6 }}>
                           * 作用于更新检查、驱动管理网络请求，以及未单独配置代理的数据库连接
                       </div>
                   </div>
@@ -1738,7 +2009,7 @@ function App() {
                       percent={Math.round(updateDownloadProgress.percent)}
                       status={updateDownloadProgress.status === 'error' ? 'exception' : (updateDownloadProgress.status === 'done' ? 'success' : 'active')}
                   />
-                  <div style={{ fontSize: 12, color: '#8c8c8c' }}>
+                  <div style={{ fontSize: 12, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)' }}>
                       {`${formatBytes(updateDownloadProgress.downloaded)} / ${formatBytes(updateDownloadProgress.total)}`}
                   </div>
                   {updateDownloadProgress.message ? (

frontend/src/components/DataGrid.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext, useMemo, useCallback }
 import { createPortal } from 'react-dom';
 import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Modal, Checkbox, Segmented, Tooltip, Popover } 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, EditOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { ReloadOutlined, ImportOutlined, ExportOutlined, DownOutlined, PlusOutlined, DeleteOutlined, SaveOutlined, UndoOutlined, FilterOutlined, CloseOutlined, ConsoleSqlOutlined, FileTextOutlined, CopyOutlined, ClearOutlined, EditOutlined, VerticalAlignBottomOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
 import Editor from '@monaco-editor/react';
 import { ImportData, ExportTable, ExportData, ExportQuery, ApplyChanges, DBGetColumns } from '../../wailsjs/go/app/App';
 import ImportPreviewModal from './ImportPreviewModal';
@@ -10,8 +10,8 @@ import { useStore } from '../store';
 import type { ColumnDefinition } from '../types';
 import { v4 as uuidv4 } from 'uuid';
 import 'react-resizable/css/styles.css';
-import { buildOrderBySQL, buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
-import { isMacLikePlatform, normalizeOpacityForPlatform } from '../utils/appearance';
+import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, escapeLiteral, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
+import { isMacLikePlatform, normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
 import { getDataSourceCapabilities } from '../utils/dataSourceCapabilities';
 
 // --- Error Boundary ---
@@ -610,6 +610,8 @@ interface DataGridProps {
     exportSqlWithFilter?: string;
     onApplyFilter?: (conditions: GridFilterCondition[]) => void;
     appliedFilterConditions?: FilterCondition[];
+    scrollSnapshot?: { top: number; left: number };
+    onScrollSnapshotChange?: (snapshot: { top: number; left: number }) => void;
 }
 
 type GridFilterCondition = FilterCondition & {
@@ -629,7 +631,8 @@ type ColumnMeta = {
 
 const DataGrid: React.FC<DataGridProps> = ({
     data, columnNames, loading, tableName, exportScope = 'table', resultSql, dbName, connectionId, pkColumns = [], readOnly = false,
-    onReload, onSort, onPageChange, pagination, onRequestTotalCount, onCancelTotalCount, sortInfoExternal, showFilter, onToggleFilter, exportSqlWithFilter, onApplyFilter, appliedFilterConditions
+    onReload, onSort, onPageChange, pagination, onRequestTotalCount, onCancelTotalCount, sortInfoExternal, showFilter, onToggleFilter, exportSqlWithFilter, onApplyFilter, appliedFilterConditions,
+    scrollSnapshot, onScrollSnapshotChange
 }) => {
   const connections = useStore(state => state.connections);
   const addSqlLog = useStore(state => state.addSqlLog);
@@ -639,7 +642,8 @@ const DataGrid: React.FC<DataGridProps> = ({
   const setQueryOptions = useStore(state => state.setQueryOptions);
   const isMacLike = useMemo(() => isMacLikePlatform(), []);
   const darkMode = theme === 'dark';
-  const opacity = normalizeOpacityForPlatform(appearance.opacity);
+  const resolvedAppearance = resolveAppearanceValues(appearance);
+  const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
   const canModifyData = !readOnly && !!tableName;
   const showColumnComment = queryOptions?.showColumnComment !== false;
   const showColumnType = queryOptions?.showColumnType !== false;
@@ -706,6 +710,33 @@ const DataGrid: React.FC<DataGridProps> = ({
   const toolbarDividerColor = darkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.10)';
   const columnMetaHintColor = darkMode ? darkHighlightTextColor : lightMetaHintColor;
   const columnMetaTooltipColor = darkMode ? darkHighlightTextColor : lightMetaTooltipColor;
+  const paginationPageSizeOptions = ['100', '200', '500', '1000'];
+  const paginationGlassMode = opacity < 0.999 || resolvedAppearance.blur > 0;
+  const paginationShellBg = darkMode
+      ? `linear-gradient(135deg, rgba(17,22,34,${paginationGlassMode ? Math.max(0.22, opacity * 0.38) : 0.82}) 0%, rgba(10,14,24,${paginationGlassMode ? Math.max(0.28, opacity * 0.46) : 0.9}) 100%)`
+      : `linear-gradient(135deg, rgba(255,255,255,${paginationGlassMode ? Math.max(0.24, opacity * 0.36) : 0.96}) 0%, rgba(246,248,252,${paginationGlassMode ? Math.max(0.32, opacity * 0.44) : 0.99}) 100%)`;
+  const paginationShellBorderColor = darkMode
+      ? `rgba(255,255,255,${paginationGlassMode ? 0.10 : 0.08})`
+      : `rgba(16,24,40,${paginationGlassMode ? 0.08 : 0.08})`;
+  const paginationShellShadow = darkMode
+      ? `0 16px 34px rgba(0,0,0,${paginationGlassMode ? 0.10 : 0.22})`
+      : `0 14px 30px rgba(15,23,42,${paginationGlassMode ? 0.03 : 0.08})`;
+  const paginationChipBg = darkMode
+      ? `rgba(255,255,255,${paginationGlassMode ? Math.max(0.02, opacity * 0.035) : 0.04})`
+      : `rgba(255,255,255,${paginationGlassMode ? Math.max(0.18, opacity * 0.26) : 0.86})`;
+  const paginationChipBorderColor = darkMode
+      ? `rgba(255,255,255,${paginationGlassMode ? 0.10 : 0.08})`
+      : `rgba(16,24,40,${paginationGlassMode ? 0.10 : 0.08})`;
+  const paginationHoverBg = darkMode
+      ? `rgba(255,255,255,${paginationGlassMode ? Math.max(0.04, opacity * 0.06) : 0.07})`
+      : `rgba(255,255,255,${paginationGlassMode ? Math.max(0.24, opacity * 0.34) : 0.96})`;
+  const paginationPrimaryTextColor = darkMode ? '#f5f7ff' : '#162033';
+  const paginationSecondaryTextColor = darkMode ? 'rgba(255,255,255,0.54)' : 'rgba(16,24,40,0.56)';
+  const paginationAccentBg = darkMode ? 'rgba(255,214,102,0.14)' : 'rgba(24,144,255,0.10)';
+  const paginationAccentBorderColor = darkMode ? 'rgba(255,214,102,0.38)' : 'rgba(24,144,255,0.22)';
+  const paginationActiveItemBg = darkMode ? 'rgba(255,214,102,0.18)' : 'rgba(24,144,255,0.12)';
+  const paginationActiveItemBorderColor = darkMode ? 'rgba(255,214,102,0.46)' : 'rgba(24,144,255,0.28)';
+  const paginationActiveItemTextColor = darkMode ? '#fff7d6' : '#0958d9';
   
   const [form] = Form.useForm();
   const [modal, contextHolder] = Modal.useModal();
@@ -750,6 +781,8 @@ const DataGrid: React.FC<DataGridProps> = ({
   const lastTableScrollLeftRef = useRef(0);
   const lastExternalScrollLeftRef = useRef(0);
   const pendingScrollToBottomRef = useRef(false);
+  const lastReportedScrollRef = useRef<{ top: number; left: number }>({ top: 0, left: 0 });
+  const didRestoreScrollRef = useRef(false);
 
   // 批量编辑模式状态
   const [cellEditMode, setCellEditMode] = useState(false);
@@ -2074,9 +2107,14 @@ const DataGrid: React.FC<DataGridProps> = ({
 
   const estimatedVisibleCellCount = mergedDisplayData.length * Math.max(columnNames.length, 1);
   const enableLargeResultOptimizedEditing =
-      viewMode === 'table' && (mergedDisplayData.length >= 60 || estimatedVisibleCellCount >= 4000);
+      viewMode === 'table' && (
+          mergedDisplayData.length >= 60 ||
+          estimatedVisibleCellCount >= 1600 ||
+          columnNames.length >= 36 ||
+          (isMacLike && columnNames.length >= 24)
+      );
   const enableVirtual = enableLargeResultOptimizedEditing;
-  const enableInlineEditableCell = canModifyData;
+  const enableInlineEditableCell = canModifyData && !enableLargeResultOptimizedEditing;
 
   const columns = useMemo(() => {
       return columnNames.map(key => ({
@@ -2409,18 +2447,18 @@ const DataGrid: React.FC<DataGridProps> = ({
       return clauses.join(' OR ');
   }, [pkColumns, tableName]);
 
-  const buildCurrentPageSql = useCallback((dbType: string) => {
+      const buildCurrentPageSql = useCallback((dbType: string) => {
       if (!tableName || !pagination) return '';
       const whereSQL = buildWhereSQL(dbType, filterConditions);
-      let sql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
-      sql += buildOrderBySQL(dbType, sortInfo, pkColumns);
+      const baseSql = `SELECT * FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
+      const orderBySQL = buildOrderBySQL(dbType, sortInfo, pkColumns);
       const normalizedType = String(dbType || '').trim().toLowerCase();
       const hasExplicitSort = !!sortInfo?.columnKey && (sortInfo?.order === 'ascend' || sortInfo?.order === 'descend');
+      const offset = (pagination.current - 1) * pagination.pageSize;
+      let sql = buildPaginatedSelectSQL(dbType, baseSql, orderBySQL, pagination.pageSize, offset);
       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;
   }, [tableName, pagination, filterConditions, sortInfo, pkColumns]);
 
@@ -2762,6 +2800,13 @@ const DataGrid: React.FC<DataGridProps> = ({
       return active ? [active] : [];
   }, []);
 
+  const pickVerticalScrollTarget = useCallback((tableContainer: HTMLElement): HTMLElement | null => {
+      const virtualHolder = tableContainer.querySelector('.ant-table-tbody-virtual-holder') as HTMLElement | null;
+      const rcVirtualHolder = tableContainer.querySelector('.rc-virtual-list-holder') as HTMLElement | null;
+      const body = tableContainer.querySelector('.ant-table-body') as HTMLElement | null;
+      return virtualHolder || rcVirtualHolder || body;
+  }, []);
+
   const syncExternalScrollFromTargets = useCallback((targets?: HTMLElement[], source?: HTMLElement | null) => {
       const externalScroll = externalHScrollRef.current;
       if (!(externalScroll instanceof HTMLDivElement) || horizontalSyncSourceRef.current === 'external') {
@@ -2844,12 +2889,162 @@ const DataGrid: React.FC<DataGridProps> = ({
       };
   }, [horizontalScrollVisible]);
 
+  // 非虚拟模式：支持在数据区直接使用触摸板/Shift+滚轮进行横向滚动。
+  // 某些平台在表格内容未铺满一页时，不会把水平手势正确路由到表格 body，导致只能在表头/底部滚动条区域滚动。
+  useEffect(() => {
+      if (viewMode !== 'table' || enableVirtual) return;
+      const container = tableContainerRef.current;
+      if (!(container instanceof HTMLElement)) return;
+
+      const resolveHorizontalDelta = (event: WheelEvent) => {
+          if (Math.abs(event.deltaX) > 0.5) {
+              return event.deltaX;
+          }
+          if (event.shiftKey && Math.abs(event.deltaY) > 0.5) {
+              return event.deltaY;
+          }
+          return 0;
+      };
+
+      const isTableDataAreaTarget = (target: EventTarget | null) => {
+          const element = target instanceof HTMLElement ? target : null;
+          if (!element) return false;
+          if (element.closest('.data-grid-external-hscroll')) return false;
+          return !!element.closest('.ant-table-body, .ant-table-content, .ant-table-cell, .ant-table-row, .ant-table-tbody');
+      };
+
+      const handleContainerHorizontalWheel = (event: WheelEvent) => {
+          const horizontalDelta = resolveHorizontalDelta(event);
+          if (!Number.isFinite(horizontalDelta) || Math.abs(horizontalDelta) < 0.5) return;
+          if (!isTableDataAreaTarget(event.target)) return;
+
+          const targets = pickHorizontalScrollTargets(container);
+          const activeTarget = targets.find((target) => target.scrollWidth > target.clientWidth + 1) || targets[0];
+          if (!(activeTarget instanceof HTMLElement)) return;
+
+          const maxScrollLeft = Math.max(0, activeTarget.scrollWidth - activeTarget.clientWidth);
+          if (maxScrollLeft <= 0) return;
+
+          const nextScrollLeft = Math.max(0, Math.min(maxScrollLeft, activeTarget.scrollLeft + horizontalDelta));
+          if (Math.abs(nextScrollLeft - activeTarget.scrollLeft) < 1) return;
+
+          event.preventDefault();
+          event.stopPropagation();
+
+          horizontalSyncSourceRef.current = 'table';
+          activeTarget.scrollLeft = nextScrollLeft;
+          lastTableScrollLeftRef.current = nextScrollLeft;
+
+          const externalScroll = externalHScrollRef.current;
+          if (externalScroll && Math.abs(externalScroll.scrollLeft - nextScrollLeft) > 1) {
+              externalScroll.scrollLeft = nextScrollLeft;
+              lastExternalScrollLeftRef.current = nextScrollLeft;
+          }
+          horizontalSyncSourceRef.current = '';
+      };
+
+      container.addEventListener('wheel', handleContainerHorizontalWheel, { passive: false, capture: true });
+      return () => {
+          container.removeEventListener('wheel', handleContainerHorizontalWheel, { capture: true } as EventListenerOptions);
+      };
+  }, [viewMode, enableVirtual, pickHorizontalScrollTargets]);
+
   useEffect(() => {
       if (viewMode !== 'table') return;
       const rafId = requestAnimationFrame(() => recalculateTableMetrics(containerRef.current));
       return () => cancelAnimationFrame(rafId);
   }, [viewMode, totalWidth, mergedDisplayData.length, recalculateTableMetrics]);
 
+  useEffect(() => {
+      if (viewMode !== 'table' || !onScrollSnapshotChange) return;
+      const tableContainer = tableContainerRef.current;
+      if (!(tableContainer instanceof HTMLElement)) return;
+
+      let rafId: number | null = null;
+      let boundVerticalTarget: HTMLElement | null = null;
+      let boundHorizontalTargets: HTMLElement[] = [];
+      const externalScroll = externalHScrollRef.current;
+      const hasStoredScroll = !!scrollSnapshot && (Math.abs(scrollSnapshot.top) > 0.5 || Math.abs(scrollSnapshot.left) > 0.5);
+
+      const emitSnapshot = () => {
+          if (!didRestoreScrollRef.current && hasStoredScroll) {
+              return;
+          }
+          const verticalTarget = boundVerticalTarget || pickVerticalScrollTarget(tableContainer);
+          const horizontalTargets = boundHorizontalTargets.length > 0 ? boundHorizontalTargets : pickHorizontalScrollTargets(tableContainer);
+          const top = verticalTarget ? verticalTarget.scrollTop : 0;
+          const left = horizontalTargets[0]?.scrollLeft ?? externalScroll?.scrollLeft ?? 0;
+          if (Math.abs(lastReportedScrollRef.current.top - top) < 1 && Math.abs(lastReportedScrollRef.current.left - left) < 1) {
+              return;
+          }
+          lastReportedScrollRef.current = { top, left };
+          onScrollSnapshotChange({ top, left });
+      };
+
+      const bindTargets = () => {
+          if (boundVerticalTarget) {
+              boundVerticalTarget.removeEventListener('scroll', emitSnapshot);
+          }
+          boundHorizontalTargets.forEach(target => target.removeEventListener('scroll', emitSnapshot));
+          externalScroll?.removeEventListener('scroll', emitSnapshot);
+
+          boundVerticalTarget = pickVerticalScrollTarget(tableContainer);
+          boundHorizontalTargets = pickHorizontalScrollTargets(tableContainer);
+
+          boundVerticalTarget?.addEventListener('scroll', emitSnapshot, { passive: true });
+          boundHorizontalTargets.forEach(target => target.addEventListener('scroll', emitSnapshot, { passive: true }));
+          externalScroll?.addEventListener('scroll', emitSnapshot, { passive: true });
+          emitSnapshot();
+      };
+
+      rafId = requestAnimationFrame(bindTargets);
+      return () => {
+          if (rafId !== null) cancelAnimationFrame(rafId);
+          if (boundVerticalTarget) {
+              boundVerticalTarget.removeEventListener('scroll', emitSnapshot);
+          }
+          boundHorizontalTargets.forEach(target => target.removeEventListener('scroll', emitSnapshot));
+          externalScroll?.removeEventListener('scroll', emitSnapshot);
+      };
+  }, [viewMode, mergedDisplayData.length, onScrollSnapshotChange, pickHorizontalScrollTargets, pickVerticalScrollTarget, scrollSnapshot]);
+
+  useEffect(() => {
+      if (viewMode !== 'table') return;
+      if (!scrollSnapshot) return;
+      if (didRestoreScrollRef.current) return;
+      const tableContainer = tableContainerRef.current;
+      if (!(tableContainer instanceof HTMLElement)) return;
+      if (mergedDisplayData.length === 0) return;
+
+      let rafId = requestAnimationFrame(() => {
+          const verticalTarget = pickVerticalScrollTarget(tableContainer);
+          const horizontalTargets = pickHorizontalScrollTargets(tableContainer);
+          const nextTop = Math.max(0, scrollSnapshot.top);
+          const nextLeft = Math.max(0, scrollSnapshot.left);
+          if (verticalTarget && Math.abs(verticalTarget.scrollTop - scrollSnapshot.top) > 1) {
+              verticalTarget.scrollTop = nextTop;
+          }
+          if (Math.abs(nextLeft) > 0.5) {
+              horizontalTargets.forEach(target => {
+                  if (Math.abs(target.scrollLeft - nextLeft) > 1) {
+                      target.scrollLeft = nextLeft;
+                  }
+              });
+              const externalScroll = externalHScrollRef.current;
+              if (externalScroll && Math.abs(externalScroll.scrollLeft - nextLeft) > 1) {
+                  externalScroll.scrollLeft = nextLeft;
+              }
+              lastTableScrollLeftRef.current = nextLeft;
+              lastExternalScrollLeftRef.current = nextLeft;
+          }
+          lastReportedScrollRef.current = { top: nextTop, left: nextLeft };
+          didRestoreScrollRef.current = true;
+          onScrollSnapshotChange?.({ top: nextTop, left: nextLeft });
+      });
+
+      return () => cancelAnimationFrame(rafId);
+  }, [viewMode, mergedDisplayData.length, scrollSnapshot, pickHorizontalScrollTargets, pickVerticalScrollTarget, onScrollSnapshotChange]);
+
   // 虚拟模式下，在容器级别监听 wheel 事件，当鼠标在底部水平滚动条区域时拦截并转为水平滚动
   useEffect(() => {
       if (viewMode !== 'table' || !enableVirtual) return;
@@ -2965,6 +3160,49 @@ const DataGrid: React.FC<DataGridProps> = ({
       };
   }, [viewMode, tableScrollX, mergedDisplayData.length, syncExternalScrollFromTargets, pickHorizontalScrollTargets]);
 
+  const paginationSummaryText = useMemo(() => {
+      if (!pagination) return '';
+      const total = Number.isFinite(pagination.total) ? pagination.total : 0;
+      const rangeStart = Math.max(0, (pagination.current - 1) * pagination.pageSize + (total > 0 ? 1 : 0));
+      const hasValidRange = total > 0 && rangeStart > 0;
+      const rangeEnd = hasValidRange ? Math.min(total, rangeStart + pagination.pageSize - 1) : 0;
+      const currentCount = hasValidRange ? Math.max(0, rangeEnd - rangeStart + 1) : 0;
+
+      if (pagination.totalKnown === false) {
+          if (isDuckDBConnection) {
+              if (pagination.totalCountLoading) return `当前 ${currentCount} 条 / 正在统计精确总数…`;
+              if (pagination.totalApprox && Number.isFinite(total) && total > 0) return `当前 ${currentCount} 条 / 约 ${total} 条`;
+              if (pagination.totalCountCancelled) return `当前 ${currentCount} 条 / 已取消统计`;
+              return `当前 ${currentCount} 条 / 总数未统计`;
+          }
+          return `当前 ${currentCount} 条 / 正在统计总数…`;
+      }
+
+      if (isDuckDBConnection && (!Number.isFinite(total) || total <= 0)) {
+          return '当前 0 条 / 共 0 条';
+      }
+
+      return `当前 ${currentCount} 条 / 共 ${total} 条`;
+  }, [pagination, isDuckDBConnection]);
+
+  const paginationPageText = useMemo(() => {
+      if (!pagination) return '';
+      const total = Number.isFinite(pagination.total) ? pagination.total : 0;
+      const canShowTotalPages = pagination.totalKnown !== false || (isDuckDBConnection && pagination.totalApprox && total > 0);
+      if (!canShowTotalPages || total <= 0) return `第 ${pagination.current} 页`;
+      const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pagination.pageSize)));
+      return `第 ${pagination.current} / ${totalPages} 页`;
+  }, [pagination, isDuckDBConnection]);
+
+  const handlePageSizeChange = useCallback((value: string) => {
+      if (!pagination || !onPageChange) return;
+      const nextSize = Number(value);
+      if (!Number.isFinite(nextSize) || nextSize <= 0) return;
+      const firstRowIndex = Math.max(0, (pagination.current - 1) * pagination.pageSize);
+      const nextPage = Math.floor(firstRowIndex / nextSize) + 1;
+      onPageChange(nextPage, nextSize);
+  }, [pagination, onPageChange]);
+
   return (
     <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: 'transparent' }}>
 		       {/* Toolbar + Filter Panel */}
@@ -3146,22 +3384,17 @@ const DataGrid: React.FC<DataGridProps> = ({
                        <Checkbox
                            checked={cond.enabled !== false}
                            onChange={e => updateFilter(cond.id, 'enabled', e.target.checked)}
-                           style={{ marginTop: 6 }}
+                            style={{ marginTop: 6, flex: '0 0 auto', whiteSpace: 'nowrap' }}
                        >
                            启用
                        </Checkbox>
-                       {condIndex === 0 ? (
-                           <div style={{ width: 96, marginTop: 7, textAlign: 'center', fontSize: 12, color: '#8c8c8c' }}>
-                               首条
-                           </div>
-                       ) : (
-                           <Select
-                               style={{ width: 96 }}
-                               value={cond.logic === 'OR' ? 'OR' : 'AND'}
-                               onChange={v => updateFilter(cond.id, 'logic', v)}
-                               options={filterLogicOptions as any}
-                           />
-                       )}
+                        <Select
+                            style={{ width: 96, minWidth: 96, maxWidth: 96, flex: '0 0 96px' }}
+                            value={condIndex === 0 ? '__FIRST__' : (cond.logic === 'OR' ? 'OR' : 'AND')}
+                            onChange={v => updateFilter(cond.id, 'logic', v)}
+                            options={condIndex === 0 ? [{ value: '__FIRST__', label: '首条' }] : (filterLogicOptions as any)}
+                            disabled={condIndex === 0}
+                        />
                         <Select
                             style={{ width: 180 }}
                             value={cond.column}
@@ -3692,33 +3925,41 @@ const DataGrid: React.FC<DataGridProps> = ({
        </div>
        
        {pagination && (
-           <div style={{ padding: '8px', borderTop: 'none', display: 'flex', justifyContent: 'flex-end' }}>
-                   <Pagination 
-                   current={pagination.current}
-                   pageSize={pagination.pageSize}
-                   total={pagination.total}
-                   showTotal={(total, range) => {
-                       const hasValidRange = Array.isArray(range) && range[0] > 0 && range[1] >= range[0];
-                       const currentCount = hasValidRange ? Math.max(0, range[1] - range[0] + 1) : 0;
-                       if (pagination.totalKnown === false) {
-                           if (isDuckDBConnection) {
-                               if (pagination.totalCountLoading) return `当前 ${currentCount} 条 / 正在统计精确总数...`;
-                               if (pagination.totalApprox && Number.isFinite(total) && total > 0) return `当前 ${currentCount} 条 / 约 ${total} 条`;
-                               if (pagination.totalCountCancelled) return `当前 ${currentCount} 条 / 已取消统计`;
-                               return `当前 ${currentCount} 条 / 总数未统计`;
+           <div style={{ padding: '12px 0 0', borderTop: 'none', display: 'flex', justifyContent: 'flex-end' }}>
+               <div className="data-grid-pagination-shell">
+                   <div className="data-grid-pagination-summary" aria-live="polite">
+                       <span className="data-grid-pagination-kicker">结果集</span>
+                       <span className="data-grid-pagination-summary-value">{paginationSummaryText}</span>
+                   </div>
+                   <div className="data-grid-pagination-page-chip">{paginationPageText}</div>
+                   <Pagination
+                       current={pagination.current}
+                       pageSize={pagination.pageSize}
+                       total={pagination.total}
+                       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>;
                            }
-                           return `当前 ${currentCount} 条 / 正在统计总数...`;
-                       }
-                       if (isDuckDBConnection && (!Number.isFinite(total) || total <= 0)) {
-                           return '当前 0 条 / 共 0 条';
-                       }
-                       return `当前 ${currentCount} 条 / 共 ${total} 条`;
-                   }}
-                   showSizeChanger
-                   pageSizeOptions={['100', '200', '500', '1000']}
-                   onChange={onPageChange}
-                   size="small"
-               />
+                           if (type === 'next') {
+                               return <span className="data-grid-pagination-nav-icon" aria-hidden="true"><RightOutlined /></span>;
+                           }
+                           return originalElement;
+                       }}
+                   />
+                   <Select
+                       size="small"
+                       popupMatchSelectWidth={false}
+                       value={String(pagination.pageSize)}
+                       onChange={handlePageSizeChange}
+                       options={paginationPageSizeOptions.map((value) => ({ value, label: `${value} 条 / 页` }))}
+                       className="data-grid-pagination-size-select"
+                       aria-label="每页条数"
+                   />
+               </div>
            </div>
        )}
 
@@ -3894,6 +4135,266 @@ const DataGrid: React.FC<DataGridProps> = ({
                 .${gridId} .data-grid-external-hscroll-inner {
                     height: 1px;
                 }
+                .${gridId} .data-grid-pagination-shell {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    gap: 10px;
+                    flex-wrap: wrap;
+                    max-width: 100%;
+                    padding: 8px 10px;
+                    border-radius: 16px;
+                    border: 1px solid ${paginationShellBorderColor};
+                    background: ${paginationShellBg};
+                    box-shadow: ${paginationShellShadow};
+                    backdrop-filter: ${opacity < 0.999 ? 'blur(14px)' : 'none'};
+                    -webkit-backdrop-filter: ${opacity < 0.999 ? 'blur(14px)' : 'none'};
+                }
+                .${gridId} .data-grid-pagination-summary,
+                .${gridId} .data-grid-pagination-page-chip {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 8px;
+                    min-height: 34px;
+                    padding: 0 12px;
+                    border-radius: 999px;
+                    border: 1px solid ${paginationChipBorderColor};
+                    background: ${paginationChipBg};
+                    color: ${paginationPrimaryTextColor};
+                    font-size: 12px;
+                    line-height: 1;
+                    font-variant-numeric: tabular-nums;
+                    white-space: nowrap;
+                }
+                .${gridId} .data-grid-pagination-kicker {
+                    display: inline-flex;
+                    align-items: center;
+                    height: 20px;
+                    padding: 0 8px;
+                    border-radius: 999px;
+                    background: ${paginationAccentBg};
+                    border: 1px solid ${paginationAccentBorderColor};
+                    color: ${paginationActiveItemTextColor};
+                    font-size: 11px;
+                    font-weight: 700;
+                    letter-spacing: 0.02em;
+                }
+                .${gridId} .data-grid-pagination-summary-value {
+                    color: ${paginationPrimaryTextColor};
+                    font-weight: 600;
+                    font-variant-numeric: tabular-nums;
+                }
+                .${gridId} .data-grid-pagination-page-chip {
+                    color: ${paginationSecondaryTextColor};
+                    font-weight: 600;
+                }
+                .${gridId} .ant-pagination {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 6px;
+                    margin: 0;
+                    color: ${paginationPrimaryTextColor};
+                }
+                .${gridId} .ant-pagination .ant-pagination-item,
+                .${gridId} .ant-pagination .ant-pagination-prev,
+                .${gridId} .ant-pagination .ant-pagination-next,
+                .${gridId} .ant-pagination .ant-pagination-jump-prev,
+                .${gridId} .ant-pagination .ant-pagination-jump-next {
+                    min-width: 34px;
+                    height: 34px;
+                    margin-inline-end: 0;
+                    border-radius: 12px;
+                    border: 1px solid ${paginationChipBorderColor};
+                    background: ${paginationChipBg};
+                    box-shadow: none;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    overflow: hidden;
+                    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
+                }
+                .${gridId} .ant-pagination .ant-pagination-item a,
+                .${gridId} .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
+                .${gridId} .ant-pagination .ant-pagination-next .ant-pagination-item-link,
+                .${gridId} .ant-pagination .ant-pagination-prev > *,
+                .${gridId} .ant-pagination .ant-pagination-next > * {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    color: ${paginationPrimaryTextColor};
+                    font-weight: 600;
+                    border: none;
+                    background: transparent;
+                    border-radius: inherit;
+                    line-height: 1;
+                }
+                .${gridId} .ant-pagination .ant-pagination-item:hover,
+                .${gridId} .ant-pagination .ant-pagination-prev:hover,
+                .${gridId} .ant-pagination .ant-pagination-next:hover {
+                    background: ${paginationHoverBg};
+                    border-color: ${paginationActiveItemBorderColor};
+                    transform: translateY(-1px);
+                }
+                .${gridId} .ant-pagination .ant-pagination-item-active {
+                    border-color: ${paginationActiveItemBorderColor};
+                    background: ${paginationActiveItemBg};
+                    box-shadow: inset 0 0 0 1px ${paginationAccentBorderColor};
+                }
+                .${gridId} .ant-pagination .ant-pagination-item-active a {
+                    color: ${paginationActiveItemTextColor};
+                }
+                .${gridId} .ant-pagination .ant-pagination-disabled,
+                .${gridId} .ant-pagination .ant-pagination-disabled:hover {
+                    background: transparent;
+                    border-color: ${paginationChipBorderColor};
+                    transform: none;
+                    opacity: 0.42;
+                }
+                .${gridId} .ant-pagination .ant-pagination-jump-prev,
+                .${gridId} .ant-pagination .ant-pagination-jump-next {
+                    padding: 0;
+                }
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    margin: 0;
+                    line-height: 1;
+                }
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-container,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    line-height: 1;
+                }
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis,
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon {
+                    position: absolute !important;
+                    top: 0 !important;
+                    right: 0 !important;
+                    bottom: 0 !important;
+                    left: 0 !important;
+                    inset: 0 !important;
+                    width: fit-content !important;
+                    height: fit-content !important;
+                    min-width: 0 !important;
+                    min-height: 0 !important;
+                    margin: auto !important;
+                    padding: 0 !important;
+                    transform: none !important;
+                    display: inline-flex !important;
+                    align-items: center !important;
+                    justify-content: center !important;
+                    line-height: 1 !important;
+                    color: ${paginationSecondaryTextColor};
+                }
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis {
+                    letter-spacing: 0.18em;
+                    text-indent: 0.18em;
+                    text-align: center;
+                }
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon .anticon,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon .anticon,
+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon svg,
+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon svg {
+                    display: inline-flex !important;
+                    align-items: center !important;
+                    justify-content: center !important;
+                    width: 1em;
+                    height: 1em;
+                    line-height: 1;
+                }
+                .${gridId} .data-grid-pagination-nav-icon {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    font-size: 12px;
+                    line-height: 1;
+                }
+                .${gridId} .data-grid-pagination-nav-icon .anticon {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                }
+                .${gridId} .data-grid-pagination-size-select {
+                    min-width: 112px;
+                    height: 34px;
+                    display: inline-flex;
+                    align-items: stretch;
+                }
+                .${gridId} .data-grid-pagination-size-select.ant-select-single,
+                .${gridId} .data-grid-pagination-size-select.ant-select-single.ant-select-sm {
+                    height: 34px;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-selector {
+                    height: 34px !important;
+                    border-radius: 12px !important;
+                    border: 1px solid ${paginationChipBorderColor} !important;
+                    background: ${paginationChipBg} !important;
+                    box-shadow: none !important;
+                    padding: 0 12px !important;
+                    display: flex !important;
+                    align-items: center !important;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-wrap {
+                    display: flex !important;
+                    align-items: center !important;
+                    height: 100%;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search,
+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search-input {
+                    height: 100% !important;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-item,
+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-placeholder {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    line-height: 34px !important;
+                    color: ${paginationPrimaryTextColor};
+                    font-weight: 600;
+                    font-variant-numeric: tabular-nums;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search {
+                    inset-inline-start: 12px !important;
+                    inset-inline-end: 32px !important;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-arrow {
+                    color: ${paginationSecondaryTextColor};
+                    inset-inline-end: 12px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    margin-top: 0;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 16px;
+                    line-height: 1;
+                }
+                .${gridId} .data-grid-pagination-size-select .ant-select-arrow .anticon {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    line-height: 1;
+                }
 	        `}</style>
        
        {/* Ghost Resize Line for Columns */}

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, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
+import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, quoteIdentPart, quoteQualifiedIdent, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
 import { buildMongoCountCommand, buildMongoFilter, buildMongoFindCommand, buildMongoSort } from '../utils/mongodb';
 import { getDataSourceCapabilities } from '../utils/dataSourceCapabilities';
 
@@ -155,6 +155,16 @@ const reverseOrderBySQL = (orderBySQL: string): string => {
 type ViewerFilterSnapshot = {
   showFilter: boolean;
   conditions: FilterCondition[];
+  currentPage: number;
+  pageSize: number;
+  sortInfo: { columnKey: string, order: string } | null;
+  scrollTop: number;
+  scrollLeft: number;
+};
+
+type ViewerScrollSnapshot = {
+  top: number;
+  left: number;
 };
 
 const viewerFilterSnapshotsByTab = new Map<string, ViewerFilterSnapshot>();
@@ -175,15 +185,23 @@ const normalizeViewerFilterConditions = (conditions: FilterCondition[] | undefin
 const getViewerFilterSnapshot = (tabId: string): ViewerFilterSnapshot => {
   const cached = viewerFilterSnapshotsByTab.get(String(tabId || '').trim());
   if (!cached) {
-    return { showFilter: false, conditions: [] };
+    return { showFilter: false, conditions: [], currentPage: 1, pageSize: 100, sortInfo: null, scrollTop: 0, scrollLeft: 0 };
   }
   return {
     showFilter: cached.showFilter === true,
     conditions: normalizeViewerFilterConditions(cached.conditions),
+    currentPage: Number.isFinite(Number(cached.currentPage)) && Number(cached.currentPage) > 0 ? Number(cached.currentPage) : 1,
+    pageSize: Number.isFinite(Number(cached.pageSize)) && Number(cached.pageSize) > 0 ? Number(cached.pageSize) : 100,
+    sortInfo: cached.sortInfo && cached.sortInfo.columnKey && (cached.sortInfo.order === 'ascend' || cached.sortInfo.order === 'descend')
+      ? { columnKey: String(cached.sortInfo.columnKey), order: cached.sortInfo.order }
+      : null,
+    scrollTop: Number.isFinite(Number(cached.scrollTop)) ? Number(cached.scrollTop) : 0,
+    scrollLeft: Number.isFinite(Number(cached.scrollLeft)) ? Number(cached.scrollLeft) : 0,
   };
 };
 
 const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
+  const initialViewerSnapshot = useMemo(() => getViewerFilterSnapshot(tab.id), [tab.id]);
   const [data, setData] = useState<any[]>([]);
   const [columnNames, setColumnNames] = useState<string[]>([]);
   const [pkColumns, setPkColumns] = useState<string[]>([]);
@@ -204,10 +222,15 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
   const latestDbNameRef = useRef<string>('');
   const latestCountSqlRef = useRef<string>('');
   const latestCountKeyRef = useRef<string>('');
+  const scrollSnapshotRef = useRef<ViewerScrollSnapshot>({
+    top: initialViewerSnapshot.scrollTop,
+    left: initialViewerSnapshot.scrollLeft,
+  });
+  const initialLoadRef = useRef(false);
 
   const [pagination, setPagination] = useState<ViewerPaginationState>({
-      current: 1,
-      pageSize: 100,
+      current: initialViewerSnapshot.currentPage,
+      pageSize: initialViewerSnapshot.pageSize,
       total: 0,
       totalKnown: false,
       totalApprox: false,
@@ -215,10 +238,10 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
       totalCountCancelled: false,
   });
 
-  const [sortInfo, setSortInfo] = useState<{ columnKey: string, order: string } | null>(null);
+  const [sortInfo, setSortInfo] = useState<{ columnKey: string, order: string } | null>(initialViewerSnapshot.sortInfo);
   
-  const [showFilter, setShowFilter] = useState<boolean>(() => getViewerFilterSnapshot(tab.id).showFilter);
-  const [filterConditions, setFilterConditions] = useState<FilterCondition[]>(() => getViewerFilterSnapshot(tab.id).conditions);
+  const [showFilter, setShowFilter] = useState<boolean>(initialViewerSnapshot.showFilter);
+  const [filterConditions, setFilterConditions] = useState<FilterCondition[]>(initialViewerSnapshot.conditions);
   const duckdbSafeSelectCacheRef = useRef<Record<string, string>>({});
   const currentConnConfig = connections.find(c => c.id === tab.connectionId)?.config;
   const currentConnCaps = getDataSourceCapabilities(currentConnConfig);
@@ -229,16 +252,25 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
     const snapshot = getViewerFilterSnapshot(tab.id);
     setShowFilter(snapshot.showFilter);
     setFilterConditions(snapshot.conditions);
+    setSortInfo(snapshot.sortInfo);
+    scrollSnapshotRef.current = { top: snapshot.scrollTop, left: snapshot.scrollLeft };
+    initialLoadRef.current = false;
   }, [tab.id]);
 
   useEffect(() => {
     viewerFilterSnapshotsByTab.set(tab.id, {
       showFilter,
       conditions: normalizeViewerFilterConditions(filterConditions),
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      sortInfo,
+      scrollTop: scrollSnapshotRef.current.top,
+      scrollLeft: scrollSnapshotRef.current.left,
     });
-  }, [tab.id, showFilter, filterConditions]);
+  }, [tab.id, showFilter, filterConditions, pagination.current, pagination.pageSize, sortInfo]);
 
   useEffect(() => {
+    const snapshot = getViewerFilterSnapshot(tab.id);
     setPkColumns([]);
     pkKeyRef.current = '';
     countKeyRef.current = '';
@@ -250,16 +282,29 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
     latestDbNameRef.current = '';
     latestCountSqlRef.current = '';
     latestCountKeyRef.current = '';
+    scrollSnapshotRef.current = { top: snapshot.scrollTop, left: snapshot.scrollLeft };
+    initialLoadRef.current = false;
     setPagination(prev => ({
       ...prev,
-      current: 1,
+      current: snapshot.currentPage,
+      pageSize: snapshot.pageSize,
       total: 0,
       totalKnown: false,
       totalApprox: false,
       totalCountLoading: false,
       totalCountCancelled: false,
     }));
-  }, [tab.connectionId, tab.dbName, tab.tableName]);
+  }, [tab.id, tab.connectionId, tab.dbName, tab.tableName]);
+
+  const handleTableScrollSnapshotChange = useCallback((snapshot: ViewerScrollSnapshot) => {
+    scrollSnapshotRef.current = snapshot;
+    const cached = getViewerFilterSnapshot(tab.id);
+    viewerFilterSnapshotsByTab.set(tab.id, {
+      ...cached,
+      scrollTop: snapshot.top,
+      scrollLeft: snapshot.left,
+    });
+  }, [tab.id]);
 
   const handleDuckDBManualCount = useCallback(async () => {
     if (latestDbTypeRef.current !== 'duckdb') {
@@ -410,7 +455,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
             if (pageRowCount > 0) {
                 const tailOffset = Math.max(0, totalRows - (offset + pageRowCount));
                 if (tailOffset < offset) {
-                    sql = `${baseSql}${reverseOrderSQL} LIMIT ${pageRowCount} OFFSET ${tailOffset}`;
+                    sql = buildPaginatedSelectSQL(dbType, baseSql, reverseOrderSQL, pageRowCount, tailOffset);
                     useClickHouseReversePagination = true;
                     clickHouseReverseLimit = pageRowCount;
                     clickHouseReverseHasMore = currentPage < totalPages;
@@ -419,7 +464,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
         }
         if (!useClickHouseReversePagination) {
             // 大表性能：打开表不阻塞在 COUNT(*)，先通过多取 1 条判断是否还有下一页；总数在后台统计并异步回填。
-            sql += ` LIMIT ${size + 1} OFFSET ${offset}`;
+            sql = buildPaginatedSelectSQL(dbType, baseSql, orderBySQL, size + 1, offset);
         }
     }
 
@@ -489,8 +534,7 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
 
             if (safeSelect) {
                 let fallbackSql = `SELECT ${safeSelect} FROM ${quoteQualifiedIdent(dbType, tableName)} ${whereSQL}`;
-                fallbackSql += buildOrderBySQL(dbType, sortInfo, pkColumns);
-                fallbackSql += ` LIMIT ${size + 1} OFFSET ${offset}`;
+                fallbackSql = buildPaginatedSelectSQL(dbType, fallbackSql, buildOrderBySQL(dbType, sortInfo, pkColumns), size + 1, offset);
                 executedSql = fallbackSql;
                 resData = await executeDataQuery(fallbackSql, '复杂类型降级重试');
             }
@@ -765,8 +809,13 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
   }, [tab.tableName, currentConnConfig?.type, filterConditions, sortInfo, pkColumns]);
 
   useEffect(() => {
-    fetchData(1, pagination.pageSize); 
-  }, [tab, sortInfo, filterConditions]); // Initial load and re-load on sort/filter
+    if (!initialLoadRef.current) {
+      initialLoadRef.current = true;
+      fetchData(pagination.current, pagination.pageSize);
+      return;
+    }
+    fetchData(1, pagination.pageSize);
+  }, [tab.id, tab.connectionId, tab.dbName, tab.tableName, sortInfo, filterConditions]); // Initial load and re-load on sort/filter
 
   return (
     <div style={{ flex: '1 1 auto', minHeight: 0, minWidth: 0, height: '100%', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
@@ -792,6 +841,8 @@ const DataViewer: React.FC<{ tab: TabData }> = ({ tab }) => {
           readOnly={forceReadOnly}
           sortInfoExternal={sortInfo}
           exportSqlWithFilter={exportSqlWithFilter || undefined}
+          scrollSnapshot={scrollSnapshotRef.current}
+          onScrollSnapshotChange={handleTableScrollSnapshotChange}
       />
     </div>
   );

frontend/src/components/DriverManagerModal.tsx

@@ -3,7 +3,7 @@ import { Alert, Button, Collapse, Input, Modal, Progress, Select, Space, Switch,
 import { DeleteOutlined, DownloadOutlined, FileSearchOutlined, FolderOpenOutlined, InfoCircleFilled, ReloadOutlined } from '@ant-design/icons';
 import { EventsOn } from '../../wailsjs/runtime/runtime';
 import { useStore } from '../store';
-import { normalizeOpacityForPlatform } from '../utils/appearance';
+import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
 import {
   CheckDriverNetworkStatus,
   DownloadDriverPackage,
@@ -166,7 +166,8 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG
   const theme = useStore((state) => state.theme);
   const appearance = useStore((state) => state.appearance);
   const darkMode = theme === 'dark';
-  const opacity = normalizeOpacityForPlatform(appearance.opacity);
+  const resolvedAppearance = resolveAppearanceValues(appearance);
+  const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
   const modalContentRef = useRef<HTMLDivElement | null>(null);
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
   const tableScrollTargetsRef = useRef<HTMLElement[]>([]);
@@ -1223,7 +1224,7 @@ const DriverManagerModal: React.FC<{ open: boolean; onClose: () => void; onOpenG
           paddingRight: 18,
         },
       }}
-      destroyOnClose
+      destroyOnHidden
       footer={(
         <div className="driver-manager-footer">
           <div

frontend/src/components/LogPanel.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect } from 'react';
-import { Table, Tag, Button, Tooltip } from 'antd';
-import { ClearOutlined, CloseOutlined, CaretRightOutlined, BugOutlined } from '@ant-design/icons';
+import { Table, Tag, Button, Tooltip, Empty } from 'antd';
+import { ClearOutlined, CloseOutlined, BugOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { useStore } from '../store';
-import { normalizeOpacityForPlatform } from '../utils/appearance';
+import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
 
 interface LogPanelProps {
     height: number;
@@ -16,7 +16,8 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
     const theme = useStore(state => state.theme);
     const appearance = useStore(state => state.appearance);
     const darkMode = theme === 'dark';
-    const opacity = normalizeOpacityForPlatform(appearance.opacity);
+    const resolvedAppearance = resolveAppearanceValues(appearance);
+    const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
 
     // Background Helper
     const getBg = (darkHex: string) => {
@@ -28,10 +29,25 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
         return `rgba(${r}, ${g}, ${b}, ${opacity})`;
     };
     const bgMain = getBg('#1d1d1d');
-    const panelDividerColor = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
+    const shellOpacity = darkMode ? Math.max(0.18, opacity * 0.82) : Math.max(0.28, opacity * 0.92);
+    const shellOpacityStrong = darkMode ? Math.max(0.22, opacity * 0.9) : Math.max(0.34, opacity * 0.96);
+    const panelDividerColor = darkMode
+        ? `rgba(255,255,255,${Math.max(0.04, opacity * 0.10)})`
+        : `rgba(0,0,0,${Math.max(0.04, opacity * 0.08)})`;
     const panelMutedTextColor = darkMode ? 'rgba(255,255,255,0.62)' : 'rgba(0,0,0,0.58)';
-    const logScrollbarThumb = darkMode ? 'rgba(255, 255, 255, 0.34)' : 'rgba(0, 0, 0, 0.26)';
-    const logScrollbarThumbHover = darkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.36)';
+    const panelShellBg = darkMode
+        ? `linear-gradient(180deg, rgba(15,20,30,${shellOpacity}) 0%, rgba(9,13,22,${shellOpacityStrong}) 100%)`
+        : `linear-gradient(180deg, rgba(255,255,255,${shellOpacityStrong}) 0%, rgba(246,248,252,${shellOpacity}) 100%)`;
+    const panelAccentColor = darkMode ? '#ffd666' : '#1677ff';
+    const panelShadow = darkMode
+        ? `0 12px 28px rgba(0,0,0,${Math.max(0.05, opacity * 0.18)})`
+        : `0 12px 24px rgba(15,23,42,${Math.max(0.02, opacity * 0.08)})`;
+    const logScrollbarThumb = darkMode
+        ? `rgba(255, 255, 255, ${Math.max(0.18, opacity * 0.34)})`
+        : `rgba(0, 0, 0, ${Math.max(0.12, opacity * 0.26)})`;
+    const logScrollbarThumbHover = darkMode
+        ? `rgba(255, 255, 255, ${Math.max(0.28, opacity * 0.48)})`
+        : `rgba(0, 0, 0, ${Math.max(0.18, opacity * 0.36)})`;
 
     const columns = [
         {
@@ -45,7 +61,7 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
             dataIndex: 'status',
             width: 70,
             render: (status: string) => (
-                <Tag color={status === 'success' ? 'success' : 'error'} style={{ marginRight: 0 }}>
+                <Tag color={status === 'success' ? 'success' : 'error'} style={{ marginRight: 0, borderRadius: 999, paddingInline: 8, fontSize: 11, fontWeight: 700 }}>
                     {status === 'success' ? 'OK' : 'ERR'}
                 </Tag>
             )
@@ -60,7 +76,7 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
             title: 'SQL / Message',
             dataIndex: 'sql',
             render: (text: string, record: any) => (
-                <div style={{ fontFamily: 'monospace', wordBreak: 'break-all', fontSize: '12px', lineHeight: '1.2' }}>
+                <div style={{ fontFamily: 'monospace', wordBreak: 'break-all', fontSize: '12px', lineHeight: '1.45' }}>
                     <div style={{ color: darkMode ? '#a6e22e' : '#005cc5' }}>{text}</div>
                     {record.message && <div style={{ color: '#ff4d4f', marginTop: 2 }}>{record.message}</div>}
                     {record.affectedRows !== undefined && <div style={{ color: panelMutedTextColor, marginTop: 1 }}>Affected: {record.affectedRows}</div>}
@@ -72,12 +88,18 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
     return (
         <div style={{ 
             height, 
-            borderTop: `1px solid ${panelDividerColor}`,
-            background: bgMain,
+            margin: 0,
+            border: `1px solid ${panelDividerColor}`,
+            borderRadius: 14,
+            background: panelShellBg,
+            WebkitBackdropFilter: opacity < 0.999 ? 'blur(14px)' : 'none',
+            boxShadow: panelShadow,
+            backdropFilter: darkMode && opacity < 0.999 ? 'blur(18px)' : 'none',
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            zIndex: 100 // Ensure above other content
+            overflow: 'hidden',
+            zIndex: 100
         }}>
             {/* Resize Handle */}
             <div 
@@ -95,38 +117,53 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
 
             {/* Toolbar */}
             <div style={{ 
-                padding: '4px 8px', 
+                padding: '10px 14px', 
                 borderBottom: `1px solid ${panelDividerColor}`,
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                height: 32
+                gap: 12,
+                minHeight: 48
             }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 'bold', fontSize: '12px' }}>
-                    <BugOutlined /> SQL 执行日志
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+                    <div style={{ width: 30, height: 30, borderRadius: 10, display: 'grid', placeItems: 'center', background: darkMode ? `rgba(255,214,102,${Math.max(0.10, Math.min(0.18, opacity * 0.18))})` : `rgba(24,144,255,${Math.max(0.08, Math.min(0.16, opacity * 0.16))})`, color: panelAccentColor, flexShrink: 0 }}>
+                        <BugOutlined />
+                    </div>
+                    <div style={{ minWidth: 0 }}>
+                        <div style={{ fontWeight: 700, fontSize: 13, color: darkMode ? '#f5f7ff' : '#162033' }}>SQL 执行日志</div>
+                        <div style={{ fontSize: 12, color: panelMutedTextColor }}>记录执行状态、耗时与错误信息，便于快速回溯。</div>
+                    </div>
                 </div>
-                <div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                     <Tooltip title="清空日志">
-                        <Button type="text" size="small" icon={<ClearOutlined />} onClick={clearSqlLogs} />
+                        <Button type="text" size="small" icon={<ClearOutlined />} onClick={clearSqlLogs} style={{ color: panelMutedTextColor }} />
                     </Tooltip>
                     <Tooltip title="关闭面板">
-                        <Button type="text" size="small" icon={<CloseOutlined />} onClick={onClose} />
+                        <Button type="text" size="small" icon={<CloseOutlined />} onClick={onClose} style={{ color: panelMutedTextColor }} />
                     </Tooltip>
                 </div>
             </div>
 
             {/* List */}
-            <div className="log-panel-scroll" style={{ flex: 1, overflow: 'auto' }}>
-                <Table 
-                    className="log-panel-table"
-                    dataSource={sqlLogs} 
-                    columns={columns} 
-                    size="small" 
-                    pagination={false} 
-                    rowKey="id"
-                    showHeader={false}
-                    // scroll={{ y: height - 32 }} // Let flex handle it
-                />
+            <div className="log-panel-scroll" style={{ flex: 1, overflow: 'auto', padding: '8px 10px 10px' }}>
+                {sqlLogs.length === 0 ? (
+                    <div style={{ height: '100%', minHeight: 160, display: 'grid', placeItems: 'center' }}>
+                        <Empty
+                            image={Empty.PRESENTED_IMAGE_SIMPLE}
+                            description={<span style={{ color: panelMutedTextColor }}>暂无 SQL 执行日志</span>}
+                        />
+                    </div>
+                ) : (
+                    <Table 
+                        className="log-panel-table"
+                        dataSource={sqlLogs} 
+                        columns={columns} 
+                        size="small" 
+                        pagination={false} 
+                        rowKey="id"
+                        showHeader={false}
+                    />
+                )}
             </div>
             <style>{`
                 .log-panel-scroll {
@@ -156,6 +193,16 @@ const LogPanel: React.FC<LogPanelProps> = ({ height, onClose, onResizeStart }) =
                 .log-panel-table .ant-table-tbody > tr > td {
                     background: transparent !important;
                 }
+                .log-panel-table .ant-table-tbody > tr > td {
+                    padding: 8px 10px !important;
+                    border-bottom: 1px solid ${panelDividerColor} !important;
+                }
+                .log-panel-table .ant-table-tbody > tr:last-child > td {
+                    border-bottom: none !important;
+                }
+                .log-panel-table .ant-table-row:hover > td {
+                    background: ${darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(16,24,40,0.03)'} !important;
+                }
             `}</style>
         </div>
     );

frontend/src/components/RedisViewer.tsx

@@ -5,7 +5,7 @@ import { useStore } from '../store';
 import { RedisKeyInfo, RedisValue, StreamEntry } from '../types';
 import Editor from '@monaco-editor/react';
 import type { DataNode } from 'antd/es/tree';
-import { normalizeOpacityForPlatform } from '../utils/appearance';
+import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
 
 const { Search } = Input;
 
@@ -399,7 +399,8 @@ const RedisViewer: React.FC<RedisViewerProps> = ({ connectionId, redisDB }) => {
     const theme = useStore(state => state.theme);
     const appearance = useStore(state => state.appearance);
     const darkMode = theme === 'dark';
-    const opacity = normalizeOpacityForPlatform(appearance.opacity);
+    const resolvedAppearance = resolveAppearanceValues(appearance);
+    const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
     const connection = connections.find(c => c.id === connectionId);
     const keyAccentColor = darkMode ? '#ffd666' : '#1677ff';
     const jsonAccentColor = darkMode ? '#f6c453' : '#1890ff';

frontend/src/components/Sidebar.tsx

@@ -27,12 +27,15 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge,
   DisconnectOutlined,
   CloudOutlined,
   CheckSquareOutlined,
-  CodeOutlined
+  CodeOutlined,
+  TagOutlined,
+  CheckOutlined,
+  FilterOutlined
 	} from '@ant-design/icons';
 	import { useStore } from '../store';
 	import { SavedConnection } from '../types';
 	import { DBGetDatabases, DBGetTables, DBQuery, DBShowCreateTable, ExportTable, OpenSQLFile, CreateDatabase, RenameDatabase, DropDatabase, RenameTable, DropTable, DropView, DropFunction, RenameView } from '../../wailsjs/go/app/App';
-  import { normalizeOpacityForPlatform } from '../utils/appearance';
+  import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
 
 const { Search } = Input;
 
@@ -73,6 +76,15 @@ const SEARCH_SCOPE_LABEL_MAP: Record<SearchScope, string> = SEARCH_SCOPE_OPTIONS
   return acc;
 }, {} as Record<SearchScope, string>);
 
+
+const SEARCH_SCOPE_ICON_MAP: Record<SearchScope, React.ReactNode> = {
+  smart: <ThunderboltOutlined />,
+  object: <TableOutlined />,
+  database: <DatabaseOutlined />,
+  host: <CloudOutlined />,
+  tag: <TagOutlined />,
+};
+
 const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> = ({ onEditConnection }) => {
   const connections = useStore(state => state.connections);
   const savedQueries = useStore(state => state.savedQueries);
@@ -95,7 +107,8 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
   const recordTableAccess = useStore(state => state.recordTableAccess);
   const setTableSortPreference = useStore(state => state.setTableSortPreference);
   const darkMode = theme === 'dark';
-  const opacity = normalizeOpacityForPlatform(appearance.opacity);
+  const resolvedAppearance = resolveAppearanceValues(appearance);
+  const opacity = normalizeOpacityForPlatform(resolvedAppearance.opacity);
   const [treeData, setTreeData] = useState<TreeNode[]>([]);
 
   // Background Helper (Duplicate logic for now, ideally shared)
@@ -108,6 +121,44 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
       return `rgba(${r}, ${g}, ${b}, ${opacity})`;
   };
   const bgMain = getBg('#141414');
+  const modalPanelStyle = useMemo(() => ({
+      background: darkMode
+          ? 'linear-gradient(180deg, rgba(20,26,38,0.96) 0%, rgba(13,17,26,0.98) 100%)'
+          : 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)',
+      border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+      boxShadow: darkMode ? '0 20px 48px rgba(0,0,0,0.38)' : '0 18px 42px rgba(15,23,42,0.12)',
+      backdropFilter: darkMode ? 'blur(18px)' : 'none',
+  }), [darkMode]);
+  const modalSectionStyle = useMemo(() => ({
+      padding: 14,
+      borderRadius: 14,
+      border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+      background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.84)',
+  }), [darkMode]);
+  const modalScrollSectionStyle = useMemo(() => ({
+      maxHeight: 400,
+      overflow: 'auto' as const,
+      border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(16,24,40,0.08)',
+      borderRadius: 14,
+      padding: 12,
+      background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.8)',
+  }), [darkMode]);
+  const modalHintTextStyle = useMemo(() => ({
+      color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)',
+      fontSize: 12,
+      lineHeight: 1.6,
+  }), [darkMode]);
+  const renderSidebarModalTitle = (icon: React.ReactNode, title: string, description: string) => (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+          <div style={{ width: 34, height: 34, borderRadius: 12, display: 'grid', placeItems: 'center', background: darkMode ? 'rgba(255,214,102,0.12)' : 'rgba(24,144,255,0.1)', color: darkMode ? '#ffd666' : '#1677ff', flexShrink: 0 }}>
+              {icon}
+          </div>
+          <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 16, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>{title}</div>
+              <div style={{ marginTop: 4, color: darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)', fontSize: 12, lineHeight: 1.6 }}>{description}</div>
+          </div>
+      </div>
+  );
   const [searchValue, setSearchValue] = useState('');
   const [searchScopes, setSearchScopes] = useState<SearchScope[]>(['smart']);
   const [isSearchScopePopoverOpen, setIsSearchScopePopoverOpen] = useState(false);
@@ -2471,32 +2522,100 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
   const searchScopePopoverContent = useMemo(() => {
       const smartSelected = searchScopes.includes('smart');
       const scopedOptions = SEARCH_SCOPE_OPTIONS.filter((option) => option.value !== 'smart');
+      const borderColor = darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(16,24,40,0.08)';
+      const mutedTextColor = darkMode ? 'rgba(255,255,255,0.5)' : 'rgba(16,24,40,0.55)';
+      const titleColor = darkMode ? 'rgba(255,255,255,0.92)' : '#162033';
+      const panelBg = darkMode
+          ? 'linear-gradient(180deg, rgba(17,24,39,0.96) 0%, rgba(10,15,26,0.98) 100%)'
+          : 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,248,252,0.98) 100%)';
+      const smartBg = smartSelected
+          ? (darkMode ? 'linear-gradient(135deg, rgba(255,214,102,0.22) 0%, rgba(255,179,71,0.16) 100%)' : 'linear-gradient(135deg, rgba(255,214,102,0.26) 0%, rgba(255,244,204,0.92) 100%)')
+          : (darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.72)');
+      const smartBorder = smartSelected
+          ? (darkMode ? 'rgba(255,214,102,0.42)' : 'rgba(245,176,65,0.34)')
+          : borderColor;
+      const getOptionCardStyle = (checked: boolean) => ({
+          display: 'flex',
+          alignItems: 'center' as const,
+          justifyContent: 'space-between' as const,
+          gap: 12,
+          padding: '10px 12px',
+          borderRadius: 12,
+          border: `1px solid ${checked ? (darkMode ? 'rgba(118,169,250,0.44)' : 'rgba(24,144,255,0.32)') : borderColor}`,
+          background: checked
+              ? (darkMode ? 'rgba(64,124,255,0.18)' : 'rgba(24,144,255,0.08)')
+              : (darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.76)'),
+          transition: 'all 120ms ease',
+      });
       return (
-          <div style={{ minWidth: 220, display: 'flex', flexDirection: 'column', gap: 8 }}>
-              <div style={{ fontSize: 12, color: '#8c8c8c' }}>搜索范围</div>
-              <Checkbox
-                  checked={smartSelected}
-                  onChange={(e) => setSearchScopeChecked('smart', e.target.checked)}
-              >
-                  智能（推荐）
-              </Checkbox>
-              <div style={{ paddingLeft: 12, display: 'grid', gap: 6 }}>
-                  {scopedOptions.map((option) => (
-                      <Checkbox
-                          key={option.value}
-                          checked={searchScopes.includes(option.value)}
-                          onChange={(e) => setSearchScopeChecked(option.value, e.target.checked)}
-                      >
-                          {option.label}
-                      </Checkbox>
-                  ))}
+          <div style={{ minWidth: 280, display: 'flex', flexDirection: 'column', background: panelBg, padding: 14, gap: 12 }}>
+              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
+                  <div>
+                      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.4, color: mutedTextColor, textTransform: 'uppercase' }}>搜索范围</div>
+                      <div style={{ marginTop: 4, fontSize: 13, lineHeight: 1.5, color: mutedTextColor }}>“智能”自动匹配最可能的命中项；手动模式支持按维度组合筛选。</div>
+                  </div>
+                  <div style={{ width: 32, height: 32, borderRadius: 10, display: 'grid', placeItems: 'center', background: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(17,24,39,0.06)', color: darkMode ? '#ffd666' : '#1677ff', flexShrink: 0 }}>
+                      <FilterOutlined />
+                  </div>
               </div>
-              <div style={{ fontSize: 12, color: '#8c8c8c' }}>
-                  智能与其他项互斥；其他项支持多选。
+
+              <label style={{ display: 'block', cursor: 'pointer' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 14, border: `1px solid ${smartBorder}`, background: smartBg, boxShadow: smartSelected ? (darkMode ? '0 10px 24px rgba(0,0,0,0.24)' : '0 10px 24px rgba(245,176,65,0.14)') : 'none' }}>
+                      <Checkbox
+                          checked={smartSelected}
+                          onChange={(e) => setSearchScopeChecked('smart', e.target.checked)}
+                      />
+                      <div style={{ width: 30, height: 30, borderRadius: 10, display: 'grid', placeItems: 'center', background: darkMode ? 'rgba(255,214,102,0.16)' : 'rgba(255,214,102,0.3)', color: darkMode ? '#ffd666' : '#ad6800', flexShrink: 0 }}>
+                          {SEARCH_SCOPE_ICON_MAP.smart}
+                      </div>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                              <span style={{ fontSize: 14, fontWeight: 700, color: titleColor }}>智能</span>
+                              <span style={{ padding: '2px 8px', borderRadius: 999, fontSize: 11, fontWeight: 700, color: darkMode ? '#ffe58f' : '#ad6800', background: darkMode ? 'rgba(255,214,102,0.16)' : 'rgba(255,214,102,0.35)' }}>推荐</span>
+                          </div>
+                          <div style={{ marginTop: 3, fontSize: 12, lineHeight: 1.5, color: mutedTextColor }}>适合日常检索，自动覆盖名称、库、Host 和标签等高频维度。</div>
+                      </div>
+                  </div>
+              </label>
+
+              <div style={{ height: 1, background: borderColor, opacity: 0.9 }} />
+
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+                  <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.3, color: mutedTextColor, textTransform: 'uppercase' }}>手动范围</div>
+                  <div style={{ fontSize: 12, color: mutedTextColor }}>支持多选组合</div>
+              </div>
+
+              <div style={{ display: 'grid', gap: 8 }}>
+                  {scopedOptions.map((option) => {
+                      const checked = searchScopes.includes(option.value);
+                      return (
+                          <label key={option.value} style={{ display: 'block', cursor: 'pointer' }}>
+                              <div style={getOptionCardStyle(checked)}>
+                                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
+                                      <Checkbox
+                                          checked={checked}
+                                          onChange={(e) => setSearchScopeChecked(option.value, e.target.checked)}
+                                      />
+                                      <div style={{ width: 28, height: 28, borderRadius: 9, display: 'grid', placeItems: 'center', background: checked ? (darkMode ? 'rgba(118,169,250,0.2)' : 'rgba(24,144,255,0.12)') : (darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(17,24,39,0.06)'), color: checked ? (darkMode ? '#91caff' : '#1677ff') : mutedTextColor, flexShrink: 0 }}>
+                                          {SEARCH_SCOPE_ICON_MAP[option.value]}
+                                      </div>
+                                      <span style={{ fontSize: 14, fontWeight: 600, color: titleColor, whiteSpace: 'nowrap' }}>{option.label}</span>
+                                  </div>
+                                  <div style={{ width: 18, display: 'flex', justifyContent: 'center', color: checked ? (darkMode ? '#91caff' : '#1677ff') : 'transparent', flexShrink: 0 }}>
+                                      <CheckOutlined />
+                                  </div>
+                              </div>
+                          </label>
+                      );
+                  })}
+              </div>
+
+              <div style={{ padding: '10px 12px', borderRadius: 12, background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(17,24,39,0.04)', color: mutedTextColor, fontSize: 12, lineHeight: 1.6 }}>
+                  智能与其他项互斥。若你明确知道要搜的是对象、库、Host 或标签，建议切到手动范围以减少噪音结果。
               </div>
           </div>
       );
-  }, [searchScopes]);
+  }, [darkMode, searchScopes]);
 
   const parseHostOnlyToken = (value: unknown): string[] => {
       const raw = String(value || '').trim();
@@ -3301,14 +3420,14 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div style={{ padding: '4px 8px' }}>
-            <Space.Compact block size="small">
+        <div style={{ padding: '4px 10px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                 <Search
                     ref={searchInputRef}
                     placeholder="搜索..."
                     onChange={onSearch}
                     size="small"
-                    style={{ width: '100%' }}
+                    style={{ flex: 1, minWidth: 0 }}
                 />
                 <Popover
                     content={searchScopePopoverContent}
@@ -3316,18 +3435,66 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                     placement="bottomRight"
                     open={isSearchScopePopoverOpen}
                     onOpenChange={setIsSearchScopePopoverOpen}
+                    styles={{ body: { padding: 0, borderRadius: 18, overflow: 'hidden' } }}
                 >
                     <Tooltip title={`搜索范围：${searchScopeSummary}`}>
-                        <Button size="small" icon={<DownOutlined />} style={{ width: 86 }}>
-                            范围{searchScopes.includes('smart') ? '(智)' : `(${searchScopes.length})`}
+                        <Button
+                            size="small"
+                            style={{
+                                minWidth: 86,
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: 6,
+                                paddingInline: 10,
+                                borderRadius: 10,
+                                borderColor: darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.12)',
+                                background: darkMode ? bgMain : 'rgba(255,255,255,0.92)',
+                                color: darkMode ? 'rgba(255,255,255,0.88)' : '#162033',
+                                boxShadow: isSearchScopePopoverOpen
+                                    ? (darkMode ? '0 0 0 1px rgba(255,214,102,0.22) inset' : '0 0 0 1px rgba(24,144,255,0.24) inset')
+                                    : 'none',
+                                backdropFilter: darkMode ? 'blur(10px)' : 'none',
+                                flexShrink: 0,
+                            }}
+                        >
+                            <span style={{ display: 'inline-flex', alignItems: 'center', color: searchScopes.includes('smart') ? '#ffd666' : (darkMode ? 'rgba(255,255,255,0.72)' : 'rgba(22,32,51,0.72)') }}>
+                                <FilterOutlined />
+                            </span>
+                            <span style={{ fontWeight: 700, color: darkMode ? 'rgba(255,255,255,0.88)' : '#162033' }}>筛选</span>
+                            <span
+                                style={{
+                                    minWidth: 18,
+                                    height: 18,
+                                    padding: '0 5px',
+                                    borderRadius: 999,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: 11,
+                                    fontWeight: 700,
+                                    lineHeight: 1,
+                                    background: searchScopes.includes('smart')
+                                        ? (darkMode ? 'rgba(255,214,102,0.16)' : 'rgba(24,144,255,0.12)')
+                                        : (darkMode ? 'rgba(118,169,250,0.18)' : 'rgba(24,144,255,0.12)'),
+                                    color: searchScopes.includes('smart')
+                                        ? (darkMode ? '#ffd666' : '#1677ff')
+                                        : (darkMode ? '#91caff' : '#1677ff'),
+                                }}
+                            >
+                                {searchScopes.includes('smart') ? '智' : searchScopes.length}
+                            </span>
+                            <span style={{ display: 'inline-flex', alignItems: 'center', color: darkMode ? 'rgba(255,255,255,0.48)' : 'rgba(22,32,51,0.4)', fontSize: 12 }}>
+                                <DownOutlined />
+                            </span>
                         </Button>
                     </Tooltip>
                 </Popover>
-            </Space.Compact>
+            </div>
         </div>
 
         {/* Toolbar */}
-        <div style={{ padding: '4px 8px', borderBottom: 'none', display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+        <div style={{ padding: '4px 10px', borderBottom: 'none', display: 'flex', flexWrap: 'wrap', gap: 4 }}>
             <Button
                 size="small"
                 icon={<FolderOpenOutlined />}
@@ -3395,8 +3562,14 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
         )}
 
         <Modal
-            title={renameViewTarget?.type === 'tag' ? "编辑标签" : "新建组"}
+            title={renderSidebarModalTitle(
+                <FolderOpenOutlined />,
+                renameViewTarget?.type === 'tag' ? "编辑标签" : "新建组",
+                renameViewTarget?.type === 'tag' ? "调整分组名称和包含的连接。" : "为连接树创建一个更清晰的分组视图。"
+            )}
             open={isCreateTagModalOpen}
+            centered
+            styles={{ content: modalPanelStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 10 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 12 } }}
             onOk={() => {
                 createTagForm.validateFields().then(values => {
                     if (renameViewTarget?.type === 'tag') {
@@ -3431,20 +3604,24 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
             onCancel={() => setIsCreateTagModalOpen(false)}
         >
             <Form form={createTagForm} layout="vertical">
-                <Form.Item name="name" label="标签名称" rules={[{ required: true, message: '请输入标签名称' }]}>
-                    <Input />
-                </Form.Item>
-                <Form.Item name="connectionIds" label="选择连接">
-                    <Checkbox.Group style={{ width: '100%' }}>
-                        <Space direction="vertical" style={{ width: '100%', maxHeight: '400px', overflowY: 'auto' }}>
-                            {connections.map(conn => (
-                                <Checkbox key={conn.id} value={conn.id}>
-                                    {conn.name} {conn.config.host ? `(${conn.config.host})` : ''}
-                                </Checkbox>
-                            ))}
-                        </Space>
-                    </Checkbox.Group>
-                </Form.Item>
+                <div style={modalSectionStyle}>
+                    <Form.Item name="name" label="标签名称" rules={[{ required: true, message: '请输入标签名称' }]}>
+                        <Input placeholder="例如：线上环境 / 核心业务 / 临时调试" />
+                    </Form.Item>
+                    <Form.Item name="connectionIds" label="选择连接" style={{ marginBottom: 0 }}>
+                        <Checkbox.Group style={{ width: '100%' }}>
+                            <div style={modalScrollSectionStyle}>
+                                <Space direction="vertical" style={{ width: '100%' }}>
+                                    {connections.map(conn => (
+                                        <Checkbox key={conn.id} value={conn.id}>
+                                            {conn.name} {conn.config.host ? `(${conn.config.host})` : ''}
+                                        </Checkbox>
+                                    ))}
+                                </Space>
+                            </div>
+                        </Checkbox.Group>
+                    </Form.Item>
+                </div>
             </Form>
         </Modal>
 
@@ -3514,10 +3691,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
         </Modal>
 
         <Modal
-            title="批量操作表"
+            title={renderSidebarModalTitle(<TableOutlined />, "批量操作表", "按对象批量导出结构、数据或完整备份。")}
             open={isBatchModalOpen}
             onCancel={() => setIsBatchModalOpen(false)}
-            width={680}
+            width={720}
+            centered
+            styles={{ content: modalPanelStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 10 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 12 } }}
             footer={
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                     <Button key="cancel" onClick={() => setIsBatchModalOpen(false)}>
@@ -3553,7 +3732,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                 </div>
             }
         >
-            <div style={{ marginBottom: 16 }}>
+            <div style={{ ...modalSectionStyle, marginBottom: 16 }}>
                 <div style={{ marginBottom: 8 }}>
                     <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>选择连接：</label>
                     <Select
@@ -3585,10 +3764,11 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                         ))}
                     </Select>
                 </div>
+                <div style={modalHintTextStyle}>先选择连接与数据库，再决定导出范围和目标对象。</div>
             </div>
 
             {batchTables.length > 0 && (
-                <div style={{ marginBottom: 16 }}>
+                <div style={{ ...modalSectionStyle, marginBottom: 16 }}>
                     <Space wrap size={8} style={{ width: '100%' }}>
                         <Input
                             allowClear
@@ -3626,7 +3806,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
 
             {batchTables.length > 0 && (
                 <>
-                    <div style={{ marginBottom: 16 }}>
+                    <div style={{ ...modalSectionStyle, marginBottom: 16 }}>
                         <Space>
                             <Button
                                 size="small"
@@ -3654,7 +3834,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                             </span>
                         </Space>
                     </div>
-                    <div style={{ maxHeight: 400, overflow: 'auto', border: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
+                    <div style={modalScrollSectionStyle}>
                         <Checkbox.Group
                             value={checkedTableKeys}
                             onChange={(values) => setCheckedTableKeys(values as string[])}
@@ -3704,10 +3884,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
         </Modal>
 
         <Modal
-            title="批量操作库"
+            title={renderSidebarModalTitle(<DatabaseOutlined />, "批量操作库", "按数据库批量导出结构，或生成结构加数据的备份。")}
             open={isBatchDbModalOpen}
             onCancel={() => setIsBatchDbModalOpen(false)}
-            width={600}
+            width={640}
+            centered
+            styles={{ content: modalPanelStyle, header: { background: 'transparent', borderBottom: 'none', paddingBottom: 10 }, body: { paddingTop: 8 }, footer: { background: 'transparent', borderTop: 'none', paddingTop: 12 } }}
             footer={[
                 <Button key="cancel" onClick={() => setIsBatchDbModalOpen(false)}>
                     取消
@@ -3731,8 +3913,8 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                 </Button>
             ]}
         >
-            <div style={{ marginBottom: 16 }}>
-                <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>选择连接：</label>
+            <div style={{ ...modalSectionStyle, marginBottom: 16 }}>
+                <label style={{ display: 'block', marginBottom: 4, fontWeight: 600, color: darkMode ? '#f5f7ff' : '#162033' }}>选择连接：</label>
                 <Select
                     value={selectedDbConnection}
                     onChange={handleDbConnectionChange}
@@ -3745,11 +3927,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                         </Select.Option>
                     ))}
                 </Select>
+                <div style={{ ...modalHintTextStyle, marginTop: 10 }}>连接选定后会加载当前连接下可批量导出的数据库列表。</div>
             </div>
 
             {batchDatabases.length > 0 && (
                 <>
-                    <div style={{ marginBottom: 16 }}>
+                    <div style={{ ...modalSectionStyle, marginBottom: 16 }}>
                         <Space>
                             <Button
                                 size="small"
@@ -3774,7 +3957,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                             </span>
                         </Space>
                     </div>
-                    <div style={{ maxHeight: 400, overflow: 'auto', border: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', borderRadius: 4, padding: 8 }}>
+                    <div style={modalScrollSectionStyle}>
                         <Checkbox.Group
                             value={checkedDbKeys}
                             onChange={(values) => setCheckedDbKeys(values as string[])}

frontend/src/components/TableDesigner.tsx

@@ -2491,7 +2491,7 @@ END;`;
             okText="应用"
             cancelText="取消"
             width={640}
-            destroyOnClose
+            destroyOnHidden
         >
             <Input.TextArea
                 value={commentEditorValue}

frontend/src/store.ts

@@ -10,7 +10,7 @@ import {
   sanitizeShortcutOptions,
 } from './utils/shortcuts';
 
-const DEFAULT_APPEARANCE = { opacity: 1.0, blur: 0 };
+const DEFAULT_APPEARANCE = { enabled: true, opacity: 1.0, blur: 0 };
 const DEFAULT_UI_SCALE = 1.0;
 const MIN_UI_SCALE = 0.8;
 const MAX_UI_SCALE = 1.25;
@@ -25,7 +25,7 @@ const MAX_HOST_ENTRY_LENGTH = 512;
 const MAX_HOST_ENTRIES = 64;
 const DEFAULT_TIMEOUT_SECONDS = 30;
 const MAX_TIMEOUT_SECONDS = 3600;
-const PERSIST_VERSION = 5;
+const PERSIST_VERSION = 6;
 const DEFAULT_CONNECTION_TYPE = 'mysql';
 const DEFAULT_GLOBAL_PROXY: GlobalProxyConfig = {
   enabled: false,
@@ -405,7 +405,7 @@ interface AppState {
   activeContext: { connectionId: string; dbName: string } | null;
   savedQueries: SavedQuery[];
   theme: 'light' | 'dark';
-  appearance: { opacity: number; blur: number };
+  appearance: { enabled: boolean; opacity: number; blur: number };
   uiScale: number;
   fontSize: number;
   startupFullscreen: boolean;
@@ -443,7 +443,7 @@ interface AppState {
   deleteQuery: (id: string) => void;
 
   setTheme: (theme: 'light' | 'dark') => void;
-  setAppearance: (appearance: Partial<{ opacity: number; blur: number }>) => void;
+  setAppearance: (appearance: Partial<{ enabled: boolean; opacity: number; blur: number }>) => void;
   setUiScale: (scale: number) => void;
   setFontSize: (size: number) => void;
   setStartupFullscreen: (enabled: boolean) => void;
@@ -522,13 +522,14 @@ const sanitizeTableSortPreference = (value: unknown): Record<string, 'name' | 'f
 };
 
 const sanitizeAppearance = (
-  appearance: Partial<{ opacity: number; blur: number }> | undefined,
+  appearance: Partial<{ enabled: boolean; opacity: number; blur: number }> | undefined,
   version: number
-): { opacity: number; blur: number } => {
+): { enabled: boolean; opacity: number; blur: number } => {
   if (!appearance || typeof appearance !== 'object') {
     return { ...DEFAULT_APPEARANCE };
   }
   const nextAppearance = {
+    enabled: typeof appearance.enabled === 'boolean' ? appearance.enabled : DEFAULT_APPEARANCE.enabled,
     opacity: typeof appearance.opacity === 'number' ? appearance.opacity : DEFAULT_APPEARANCE.opacity,
     blur: typeof appearance.blur === 'number' ? appearance.blur : DEFAULT_APPEARANCE.blur,
   };

frontend/src/utils/appearance.ts

@@ -10,6 +10,22 @@ const WINDOWS_BLUR_FACTOR = 1.00;
 
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
+export interface AppearanceSettingsLike {
+  enabled?: boolean;
+  opacity?: number;
+  blur?: number;
+}
+
+export const resolveAppearanceValues = (appearance: AppearanceSettingsLike | undefined): { opacity: number; blur: number } => {
+  if (!appearance || appearance.enabled !== false) {
+    return {
+      opacity: appearance?.opacity ?? DEFAULT_OPACITY,
+      blur: appearance?.blur ?? 0,
+    };
+  }
+  return { opacity: DEFAULT_OPACITY, blur: 0 };
+};
+
 export const isMacLikePlatform = (): boolean => {
   if (typeof navigator === 'undefined') {
     return false;

frontend/src/utils/sql.ts

@@ -134,6 +134,41 @@ export const buildOrderBySQL = (
   return '';
 };
 
+export const buildPaginatedSelectSQL = (
+  dbType: string,
+  baseSql: string,
+  orderBySQL: string,
+  limit: number,
+  offset: number,
+) => {
+  const normalizedType = String(dbType || '').trim().toLowerCase();
+  const safeLimit = Math.max(0, Math.floor(Number(limit) || 0));
+  const safeOffset = Math.max(0, Math.floor(Number(offset) || 0));
+  const base = String(baseSql || '').trim();
+  const orderBy = String(orderBySQL || '');
+
+  if (!base || safeLimit <= 0) {
+    return `${base}${orderBy}`;
+  }
+
+  switch (normalizedType) {
+    case 'oracle': {
+      const orderedSql = `${base}${orderBy}`;
+      const upperBound = safeOffset + safeLimit;
+      if (safeOffset <= 0) {
+        return `SELECT * FROM (${orderedSql}) WHERE ROWNUM <= ${upperBound}`;
+      }
+      return `SELECT * FROM (SELECT "__gonavi_page__".*, ROWNUM "__gonavi_rn__" FROM (${orderedSql}) "__gonavi_page__" WHERE ROWNUM <= ${upperBound}) WHERE "__gonavi_rn__" > ${safeOffset}`;
+    }
+    case 'sqlserver': {
+      const effectiveOrderBy = orderBy.trim() ? orderBy : ' ORDER BY (SELECT NULL)';
+      return `${base}${effectiveOrderBy} OFFSET ${safeOffset} ROWS FETCH NEXT ${safeLimit} ROWS ONLY`;
+    }
+    default:
+      return `${base}${orderBy} LIMIT ${safeLimit} OFFSET ${safeOffset}`;
+  }
+};
+
 export const parseListValues = (val: string) => {
   const raw = (val || '').trim();
   if (!raw) return [];

internal/app/methods_db.go

@@ -416,12 +416,7 @@ func (a *App) DBQueryWithCancel(config connection.ConnectionConfig, dbName strin
 		a.queryMu.Unlock()
 	}()
 
-	lowerQuery := strings.TrimSpace(strings.ToLower(query))
-	isReadQuery := strings.HasPrefix(lowerQuery, "select") || strings.HasPrefix(lowerQuery, "show") || strings.HasPrefix(lowerQuery, "describe") || strings.HasPrefix(lowerQuery, "explain")
-	// MongoDB JSON 命令中的 find/count/aggregate 也属于读查询
-	if !isReadQuery && strings.ToLower(strings.TrimSpace(runConfig.Type)) == "mongodb" && strings.HasPrefix(strings.TrimSpace(query), "{") {
-		isReadQuery = true
-	}
+	isReadQuery := isReadOnlySQLQuery(runConfig.Type, query)
 
 	runReadQuery := func(inst db.Database) ([]map[string]interface{}, []string, error) {
 		if q, ok := inst.(interface {
@@ -500,11 +495,7 @@ func (a *App) DBQueryIsolated(config connection.ConnectionConfig, dbName string,
 	ctx, cancel := utils.ContextWithTimeout(time.Duration(timeoutSeconds) * time.Second)
 	defer cancel()
 
-	lowerQuery := strings.TrimSpace(strings.ToLower(query))
-	isReadQuery := strings.HasPrefix(lowerQuery, "select") || strings.HasPrefix(lowerQuery, "show") || strings.HasPrefix(lowerQuery, "describe") || strings.HasPrefix(lowerQuery, "explain")
-	if !isReadQuery && strings.ToLower(strings.TrimSpace(runConfig.Type)) == "mongodb" && strings.HasPrefix(strings.TrimSpace(query), "{") {
-		isReadQuery = true
-	}
+	isReadQuery := isReadOnlySQLQuery(runConfig.Type, query)
 
 	if isReadQuery {
 		var data []map[string]interface{}

internal/app/sql_sanitize.go

@@ -5,6 +5,66 @@ import (
 	"unicode"
 )
 
+func leadingSQLKeyword(query string) string {
+	text := strings.TrimSpace(query)
+	for len(text) > 0 {
+		trimmed := strings.TrimLeft(text, " \t\r\n")
+		if trimmed == "" {
+			return ""
+		}
+		text = trimmed
+
+		switch {
+		case strings.HasPrefix(text, "--"):
+			if idx := strings.IndexByte(text, '\n'); idx >= 0 {
+				text = text[idx+1:]
+				continue
+			}
+			return ""
+		case strings.HasPrefix(text, "#"):
+			if idx := strings.IndexByte(text, '\n'); idx >= 0 {
+				text = text[idx+1:]
+				continue
+			}
+			return ""
+		case strings.HasPrefix(text, "/*"):
+			if idx := strings.Index(text, "*/"); idx >= 0 {
+				text = text[idx+2:]
+				continue
+			}
+			return ""
+		}
+		break
+	}
+
+	if text == "" {
+		return ""
+	}
+	for i, r := range text {
+		if unicode.IsLetter(r) || unicode.IsDigit(r) || r == '_' {
+			continue
+		}
+		if i == 0 {
+			return ""
+		}
+		return strings.ToLower(text[:i])
+	}
+	return strings.ToLower(text)
+}
+
+func isReadOnlySQLQuery(dbType string, query string) bool {
+	if strings.ToLower(strings.TrimSpace(dbType)) == "mongodb" && strings.HasPrefix(strings.TrimSpace(query), "{") {
+		return true
+	}
+
+	switch leadingSQLKeyword(query) {
+	case "select", "with", "show", "describe", "desc", "explain", "pragma", "values":
+		return true
+	default:
+		return false
+	}
+}
+
 func sanitizeSQLForPgLike(dbType string, query string) string {
 	switch strings.ToLower(strings.TrimSpace(dbType)) {
 	case "postgres", "kingbase", "highgo", "vastbase":

internal/db/kingbase_impl.go

@@ -305,10 +305,30 @@ func (k *KingbaseDB) GetColumns(dbName, tableName string) ([]connection.ColumnDe
 		return strings.ReplaceAll(s, "'", "''")
 	}
 
-	query := fmt.Sprintf(`SELECT column_name, data_type, is_nullable, column_default
-		FROM information_schema.columns
-		WHERE table_schema = '%s' AND table_name = '%s'
-		ORDER BY ordinal_position`, esc(schema), esc(table))
+	query := fmt.Sprintf(`
+SELECT
+	a.attname AS column_name,
+	pg_catalog.format_type(a.atttypid, a.atttypmod) AS data_type,
+	CASE WHEN a.attnotnull THEN 'NO' ELSE 'YES' END AS is_nullable,
+	pg_get_expr(ad.adbin, ad.adrelid) AS column_default,
+	col_description(a.attrelid, a.attnum) AS comment,
+	CASE WHEN pk.attname IS NOT NULL THEN 'PRI' ELSE '' END AS column_key
+FROM pg_class c
+JOIN pg_namespace n ON n.oid = c.relnamespace
+JOIN pg_attribute a ON a.attrelid = c.oid
+LEFT JOIN pg_attrdef ad ON ad.adrelid = c.oid AND ad.adnum = a.attnum
+LEFT JOIN (
+	SELECT i.indrelid, a3.attname
+	FROM pg_index i
+	JOIN pg_attribute a3 ON a3.attrelid = i.indrelid AND a3.attnum = ANY(i.indkey)
+	WHERE i.indisprimary
+) pk ON pk.indrelid = c.oid AND pk.attname = a.attname
+WHERE c.relkind IN ('r', 'p')
+	AND n.nspname = '%s'
+	AND c.relname = '%s'
+	AND a.attnum > 0
+	AND NOT a.attisdropped
+ORDER BY a.attnum`, esc(schema), esc(table))
 
 	data, _, err := k.Query(query)
 	if err != nil {
@@ -321,11 +341,21 @@ func (k *KingbaseDB) GetColumns(dbName, tableName string) ([]connection.ColumnDe
 			Name:     fmt.Sprintf("%v", row["column_name"]),
 			Type:     fmt.Sprintf("%v", row["data_type"]),
 			Nullable: fmt.Sprintf("%v", row["is_nullable"]),
+			Key:      fmt.Sprintf("%v", row["column_key"]),
+			Extra:    "",
+			Comment:  "",
 		}
 
 		if row["column_default"] != nil {
 			def := fmt.Sprintf("%v", row["column_default"])
 			col.Default = &def
+			if strings.HasPrefix(strings.ToLower(strings.TrimSpace(def)), "nextval(") {
+				col.Extra = "auto_increment"
+			}
+		}
+
+		if v, ok := row["comment"]; ok && v != nil {
+			col.Comment = fmt.Sprintf("%v", v)
 		}
 
 		columns = append(columns, col)
@@ -347,10 +377,30 @@ func (k *KingbaseDB) getColumnsWithCurrentSchema(tableName string) ([]connection
 	}
 
 	// 使用 current_schema() 获取当前schema
-	query := fmt.Sprintf(`SELECT column_name, data_type, is_nullable, column_default
-		FROM information_schema.columns
-		WHERE table_schema = current_schema() AND table_name = '%s'
-		ORDER BY ordinal_position`, esc(table))
+	query := fmt.Sprintf(`
+SELECT
+	a.attname AS column_name,
+	pg_catalog.format_type(a.atttypid, a.atttypmod) AS data_type,
+	CASE WHEN a.attnotnull THEN 'NO' ELSE 'YES' END AS is_nullable,
+	pg_get_expr(ad.adbin, ad.adrelid) AS column_default,
+	col_description(a.attrelid, a.attnum) AS comment,
+	CASE WHEN pk.attname IS NOT NULL THEN 'PRI' ELSE '' END AS column_key
+FROM pg_class c
+JOIN pg_namespace n ON n.oid = c.relnamespace
+JOIN pg_attribute a ON a.attrelid = c.oid
+LEFT JOIN pg_attrdef ad ON ad.adrelid = c.oid AND ad.adnum = a.attnum
+LEFT JOIN (
+	SELECT i.indrelid, a3.attname
+	FROM pg_index i
+	JOIN pg_attribute a3 ON a3.attrelid = i.indrelid AND a3.attnum = ANY(i.indkey)
+	WHERE i.indisprimary
+) pk ON pk.indrelid = c.oid AND pk.attname = a.attname
+WHERE c.relkind IN ('r', 'p')
+	AND n.nspname = current_schema()
+	AND c.relname = '%s'
+	AND a.attnum > 0
+	AND NOT a.attisdropped
+ORDER BY a.attnum`, esc(table))
 
 	data, _, err := k.Query(query)
 	if err != nil {
@@ -363,11 +413,21 @@ func (k *KingbaseDB) getColumnsWithCurrentSchema(tableName string) ([]connection
 			Name:     fmt.Sprintf("%v", row["column_name"]),
 			Type:     fmt.Sprintf("%v", row["data_type"]),
 			Nullable: fmt.Sprintf("%v", row["is_nullable"]),
+			Key:      fmt.Sprintf("%v", row["column_key"]),
+			Extra:    "",
+			Comment:  "",
 		}
 
 		if row["column_default"] != nil {
 			def := fmt.Sprintf("%v", row["column_default"])
 			col.Default = &def
+			if strings.HasPrefix(strings.ToLower(strings.TrimSpace(def)), "nextval(") {
+				col.Extra = "auto_increment"
+			}
+		}
+
+		if v, ok := row["comment"]; ok && v != nil {
+			col.Comment = fmt.Sprintf("%v", v)
 		}
 
 		columns = append(columns, col)
@@ -650,7 +710,7 @@ func (k *KingbaseDB) ApplyChanges(tableName string, changes connection.ChangeSet
 		}
 		query := fmt.Sprintf("DELETE FROM %s WHERE %s", qualifiedTable, strings.Join(wheres, " AND "))
 		if _, err := tx.Exec(query, args...); err != nil {
-			return fmt.Errorf("delete error: %v", err)
+			return fmt.Errorf("delete error: %v; sql=%s", err, query)
 		}
 	}
 
@@ -683,7 +743,7 @@ func (k *KingbaseDB) ApplyChanges(tableName string, changes connection.ChangeSet
 
 		query := fmt.Sprintf("UPDATE %s SET %s WHERE %s", qualifiedTable, strings.Join(sets, ", "), strings.Join(wheres, " AND "))
 		if _, err := tx.Exec(query, args...); err != nil {
-			return fmt.Errorf("update error: %v", err)
+			return fmt.Errorf("update error: %v; sql=%s", err, query)
 		}
 	}
 
@@ -707,7 +767,7 @@ func (k *KingbaseDB) ApplyChanges(tableName string, changes connection.ChangeSet
 
 		query := fmt.Sprintf("INSERT INTO %s (%s) VALUES (%s)", qualifiedTable, strings.Join(cols, ", "), strings.Join(placeholders, ", "))
 		if _, err := tx.Exec(query, args...); err != nil {
-			return fmt.Errorf("insert error: %v", err)
+			return fmt.Errorf("insert error: %v; sql=%s", err, query)
 		}
 	}
 

internal/db/query_value.go

@@ -31,12 +31,44 @@ func normalizeQueryValue(v interface{}) interface{} {
 }
 
 func normalizeQueryValueWithDBType(v interface{}, databaseTypeName string) interface{} {
+	if tm, ok := v.(time.Time); ok {
+		return normalizeTemporalValueForDisplay(tm, databaseTypeName)
+	}
 	if b, ok := v.([]byte); ok {
 		return bytesToDisplayValue(b, databaseTypeName)
 	}
 	return normalizeCompositeQueryValue(v)
 }
 
+func normalizeTemporalValueForDisplay(value time.Time, databaseTypeName string) interface{} {
+	if value.IsZero() {
+		if zeroValue, ok := zeroTemporalDisplayValue(databaseTypeName); ok {
+			return zeroValue
+		}
+	}
+	return value.Format(time.RFC3339Nano)
+}
+
+func zeroTemporalDisplayValue(databaseTypeName string) (string, bool) {
+	typeName := strings.ToUpper(strings.TrimSpace(databaseTypeName))
+	if typeName == "" {
+		return "0000-00-00 00:00:00", true
+	}
+
+	switch {
+	case strings.Contains(typeName, "TIMESTAMP") || strings.Contains(typeName, "DATETIME"):
+		return "0000-00-00 00:00:00", true
+	case typeName == "DATE" || typeName == "NEWDATE":
+		return "0000-00-00", true
+	case strings.Contains(typeName, "TIME"):
+		return "00:00:00", true
+	case strings.Contains(typeName, "YEAR"):
+		return "0000", true
+	default:
+		return "", false
+	}
+}
+
 func normalizeCompositeQueryValue(v interface{}) interface{} {
 	if v == nil {
 		return nil
@@ -91,7 +123,7 @@ func normalizeCompositeQueryValue(v interface{}) interface{} {
 		// 部分驱动（如 Kingbase）会返回复杂结构体值，直接透传会导致前端渲染和比较开销激增。
 		// 统一降级为可读字符串，避免对象深层序列化触发 UI 卡顿。
 		if tm, ok := v.(time.Time); ok {
-			return tm.Format(time.RFC3339Nano)
+			return normalizeTemporalValueForDisplay(tm, "")
 		}
 		if stringer, ok := v.(fmt.Stringer); ok {
 			return stringer.String()

internal/db/query_value_test.go

@@ -195,3 +195,33 @@ func TestNormalizeQueryValueWithDBType_TimeStructToRFC3339(t *testing.T) {
 		t.Fatalf("time.Time 规整值异常，实际=%s", text)
 	}
 }
+
+func TestNormalizeQueryValueWithDBType_ZeroTemporalValues(t *testing.T) {
+	zero := time.Time{}
+	cases := []struct {
+		name     string
+		dbType   string
+		wantText string
+	}{
+		{name: "date", dbType: "DATE", wantText: "0000-00-00"},
+		{name: "newdate", dbType: "NEWDATE", wantText: "0000-00-00"},
+		{name: "datetime", dbType: "DATETIME", wantText: "0000-00-00 00:00:00"},
+		{name: "timestamp", dbType: "TIMESTAMP", wantText: "0000-00-00 00:00:00"},
+		{name: "time", dbType: "TIME", wantText: "00:00:00"},
+		{name: "year", dbType: "YEAR", wantText: "0000"},
+		{name: "unknown", dbType: "", wantText: "0000-00-00 00:00:00"},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			got := normalizeQueryValueWithDBType(zero, tc.dbType)
+			text, ok := got.(string)
+			if !ok {
+				t.Fatalf("期望 string，实际=%v(%T)", got, got)
+			}
+			if text != tc.wantText {
+				t.Fatalf("dbType=%s 期望=%s，实际=%s", tc.dbType, tc.wantText, text)
+			}
+		})
+	}
+}