Release/0.5.4 (#199)

* 🐛 fix(data-viewer): 修复ClickHouse尾部分页异常并增强DuckDB复杂类型兼容

- DataViewer 新增 ClickHouse 反向分页策略，修复最后页与倒数页查询失败
- DuckDB 查询失败时按列类型生成安全 SELECT，复杂类型转 VARCHAR 重试
- 分页状态统一使用 currentPage 回填，避免页码与总数推导不一致
- 增强查询异常日志与重试路径，降低大表场景卡顿与误报

* ✨ feat(frontend-driver): 驱动管理支持快速搜索并优化信息展示

- 新增搜索框，支持按 DuckDB/ClickHouse 等关键字快速定位驱动
- 显示“匹配 x / y”统计与无结果提示
- 优化头部区域排版，提升透明/暗色场景下的视觉对齐

* 🔧 fix(connection-modal): 修复多数据源URI导入解析并校正Oracle服务名校验

- 新增单主机URI解析映射，兼容 postgres/postgresql、sqlserver、redis、tdengine、dameng(dm)、kingbase、highgo、vastbase、clickhouse、oracle
- 抽取 parseSingleHostUri 复用逻辑，统一 host/port/user/password/database 回填行为
- Oracle 连接新增服务名必填校验，移除“服务名为空回退用户名”的隐式逻辑
- 连接弹窗补充 Oracle 服务名输入项与 URI 示例

* 🐛 fix(query-export): 修复查询结果导出卡住并统一按数据源能力控制导出路径

- 查询结果页导出增加稳定兜底，异常时确保 loading 关闭避免持续转圈
- DataGrid 导出逻辑按数据源能力分流，优先走后端 ExportQuery 并保留结果集导出降级
- QueryEditor 传递结果导出 SQL，保证查询结果导出范围与当前结果一致
- 后端补充 ExportData/ExportQuery 关键日志，提升导出链路可观测性

* 🐛 fix(precision): 修复查询链路与分页统计的大整数精度丢失

- 代理响应数据解码改为 UseNumber，避免默认 float64 吞精度
- 统一归一化 json.Number 与超界整数，超出 JS 安全范围转字符串
- 修复 DataViewer 总数解析，超大值不再误转 Number 参与分页
- refs #142

* 🐛 fix(driver-manager): 修复驱动管理网络告警重复并强化代理引导

- 新增下载链路域名探测，区分“GitHub可达但驱动下载链路不可达”
- 网络不可达场景仅保留红色强提醒，移除重复二级告警
- 强提醒增加“打开全局代理设置”入口，优先引导使用 GoNavi 全局代理
- 统一网络检测与目录说明提示图标尺寸，修复加载期视觉不一致
- refs #141

* ♻️ refactor(frontend-interaction): 统一标签拖拽与暗色主题交互实现

- 重构Tab拖拽排序实现，统一为可配置拖拽引擎
- 规范拖拽与点击事件边界，提升交互一致性
- 统一多组件暗色透明样式策略，减少硬编码色值
- 提升Redis/表格/连接面板在透明模式下的观感一致性
- refs #144

* ♻️ refactor(update-state): 重构在线更新状态流并按版本统一进度展示

- 重构更新检查与下载状态同步流程，减少前后端状态分叉
- 进度展示严格绑定 latestVersion，避免跨版本状态串用
- 优化 about 打开场景的静默检查状态回填逻辑
- 统一下载弹窗关闭/后台隐藏行为
- 保持现有安装流程并补齐目录打开能力

* 🎨 style(sidebar-log): 将SQL执行日志入口调整为悬浮胶囊样式

- 移除侧栏底部整条日志入口容器
- 新增悬浮按钮阴影/边框/透明背景并适配明暗主题
- 为树区域预留底部空间避免入口遮挡内容

* ✨ feat(redis-cluster): 支持集群模式逻辑多库隔离与 0-15 库切换

- 前端恢复 Redis 集群场景下 db0-db15 的数据库选择与展示
- 后端新增集群逻辑库命名空间前缀映射，统一 key/pattern 读写隔离
- 覆盖扫描、读取、写入、删除、重命名等核心操作的键映射规则
- 集群命令通道支持 SELECT 逻辑切库与 FLUSHDB 逻辑库清空
- refs #145

* ✨ feat(DataGrid): 大数据表虚拟滚动性能优化及UI一致性修复

- 启用动态虚拟滚动（数据量≥500行自动切换），解决万行数据表卡顿问题
- 虚拟模式下EditableCell改用div渲染，CSS选择器从元素级改为类级适配虚拟DOM
- 修复虚拟模式双水平滚动条：样式化rc-virtual-list内置滚动条为胶囊外观，禁用自定义外部滚动条
- 为rc-virtual-list水平滚动条添加鼠标滚轮支持（MutationObserver + marginLeft驱动）
- 修复白色主题透明模式下列名悬浮Tooltip对比度不足的问题
- 新增白色主题全局滚动条样式适配透明模式（App.css）
- App.tsx主题token与组件样式优化
- refs #147

* 🔧 chore(app): 清理 App.tsx 类型告警并收敛前端壳层实现

- 清除未使用代码和冗余状态
- 替换弃用 API 以消除 IDE 提示
- 显式处理浮动 Promise 避免告警
- 保持现有更新检查和代理设置行为不变

* 🔧 fix(ci): 修复 Windows AMD64 下 DuckDB 驱动构建链路

- 将 DuckDB 工具链准备切换为优先使用 MSYS2
- 增加 gcc 和 g++ 存在性校验与版本验证
- 在 MSYS2 异常时回退 Chocolatey 安装 MinGW
- 保持 Windows ARM64 跳过 DuckDB 构建与平台支持一致

* 🔧 fix(ci): 修复 Windows AMD64 下 DuckDB 驱动构建链路

- 将 DuckDB 工具链准备切换为优先使用 MSYS2
- 增加 gcc 和 g++ 存在性校验与版本验证
- 在 MSYS2 异常时回退 Chocolatey 安装 MinGW
- 保持 Windows ARM64 跳过 DuckDB 构建与平台支持一致

* 🔧 fix(ci): 修复 Windows AMD64 下 DuckDB 驱动构建工具链

- 将 DuckDB 编译链从 MINGW64 切换为 MSYS2 UCRT64
- 修正 Windows AMD64 的 gcc 和 g++ 探测路径
- 增加 DuckDB 编译器版本校验步骤

* 📝 docs(contributing): 补充中英文贡献指南并统一 README 入口

- 新增英文版 CONTRIBUTING.md 作为正式贡献文档
- 新增中文版 CONTRIBUTING.zh-CN.md 作为中文贡献说明
- 调整 README 和 README.zh-CN 的贡献入口指向对应语言文档

* - feat(connection,metadata,kingbase): 增强多数据源连接能力并修复金仓/达梦/Oracle/ClickHouse兼容性问题 (#188) (#190)

* feat(http-tunnel): 支持独立 HTTP 隧道连接并覆盖多数据源

refs #168

* fix(kingbase-data-grid): 修复金仓打开表卡顿并降低对象渲染开销

refs #178

* fix(kingbase-transaction): 修复金仓事务提交重复引号导致语法错误

refs #176

* fix(driver-agent): 修复老版本 Win10 升级后金仓驱动代理启动失败

refs #177

* chore(ci): 新增手动触发的 macOS 测试构建工作流

* chore(ci): 允许测试工作流在当前分支自动触发

* fix(query-editor): 修复 SQL 编辑中光标随机跳到末尾 refs #185

* feat(data-sync): 增加差异 SQL 预览能力便于审核 refs #174

* fix(clickhouse-connect): 自动识别并回退 HTTP/Native 协议连接 refs #181

* fix(oracle-metadata): 修复视图与函数加载按 schema 过滤异常 refs #155

* fix(dameng-databases): 修复显示全部库时数据库列表不完整 refs #154

* fix(connection,db-list): 统一处理空列表返回并修复达梦连接测试报错 refs #157

Co-authored-by: 辣条 <69459608+tianqijiuyun-latiao@users.noreply.github.com>

* ✨ feat(release-notes): 支持自动生成 Release 更新说明并区分配置文件命名

* 🔁 chore(sync): 回灌 main 到 dev (#192)

* - feat(connection,metadata,kingbase): 增强多数据源连接能力并修复金仓/达梦/Oracle/ClickHouse兼容性问题 (#188)

* feat(http-tunnel): 支持独立 HTTP 隧道连接并覆盖多数据源

refs #168

* fix(kingbase-data-grid): 修复金仓打开表卡顿并降低对象渲染开销

refs #178

* fix(kingbase-transaction): 修复金仓事务提交重复引号导致语法错误

refs #176

* fix(driver-agent): 修复老版本 Win10 升级后金仓驱动代理启动失败

refs #177

* chore(ci): 新增手动触发的 macOS 测试构建工作流

* chore(ci): 允许测试工作流在当前分支自动触发

* fix(query-editor): 修复 SQL 编辑中光标随机跳到末尾 refs #185

* feat(data-sync): 增加差异 SQL 预览能力便于审核 refs #174

* fix(clickhouse-connect): 自动识别并回退 HTTP/Native 协议连接 refs #181

* fix(oracle-metadata): 修复视图与函数加载按 schema 过滤异常 refs #155

* fix(dameng-databases): 修复显示全部库时数据库列表不完整 refs #154

* fix(connection,db-list): 统一处理空列表返回并修复达梦连接测试报错 refs #157

* Release/0.5.3 (#191)

---------

Co-authored-by: 辣条 <69459608+tianqijiuyun-latiao@users.noreply.github.com>
Co-authored-by: Syngnat <92659908+Syngnat@users.noreply.github.com>

* 🐛 fix(branch-sync): 修复 main 回灌 dev 时 mergeable 异步计算导致漏开自动合并

- 增加 mergeable 状态轮询，避免新建同步 PR 后立即返回 UNKNOWN
- 在合并状态未稳定时输出中文告警与执行摘要
- 保持冲突分支、待计算分支与自动合并分支的处理路径清晰

* 🔁 chore(sync): 回灌 main 到 dev (#195)

* - feat(connection,metadata,kingbase): 增强多数据源连接能力并修复金仓/达梦/Oracle/ClickHouse兼容性问题 (#188)

* feat(http-tunnel): 支持独立 HTTP 隧道连接并覆盖多数据源

refs #168

* fix(kingbase-data-grid): 修复金仓打开表卡顿并降低对象渲染开销

refs #178

* fix(kingbase-transaction): 修复金仓事务提交重复引号导致语法错误

refs #176

* fix(driver-agent): 修复老版本 Win10 升级后金仓驱动代理启动失败

refs #177

* chore(ci): 新增手动触发的 macOS 测试构建工作流

* chore(ci): 允许测试工作流在当前分支自动触发

* fix(query-editor): 修复 SQL 编辑中光标随机跳到末尾 refs #185

* feat(data-sync): 增加差异 SQL 预览能力便于审核 refs #174

* fix(clickhouse-connect): 自动识别并回退 HTTP/Native 协议连接 refs #181

* fix(oracle-metadata): 修复视图与函数加载按 schema 过滤异常 refs #155

* fix(dameng-databases): 修复显示全部库时数据库列表不完整 refs #154

* fix(connection,db-list): 统一处理空列表返回并修复达梦连接测试报错 refs #157

* Release/0.5.3 (#191)

* - chore(ci): 新增全平台测试包手动构建工作流 tianqijiuyun-latiao 今天 下午4:26 (#194)

* feat(http-tunnel): 支持独立 HTTP 隧道连接并覆盖多数据源

refs #168

* fix(kingbase-data-grid): 修复金仓打开表卡顿并降低对象渲染开销

refs #178

* fix(kingbase-transaction): 修复金仓事务提交重复引号导致语法错误

refs #176

* fix(driver-agent): 修复老版本 Win10 升级后金仓驱动代理启动失败

refs #177

* chore(ci): 新增手动触发的 macOS 测试构建工作流

* chore(ci): 允许测试工作流在当前分支自动触发

* fix(query-editor): 修复 SQL 编辑中光标随机跳到末尾 refs #185

* feat(data-sync): 增加差异 SQL 预览能力便于审核 refs #174

* fix(clickhouse-connect): 自动识别并回退 HTTP/Native 协议连接 refs #181

* fix(oracle-metadata): 修复视图与函数加载按 schema 过滤异常 refs #155

* fix(dameng-databases): 修复显示全部库时数据库列表不完整 refs #154

* fix(connection,db-list): 统一处理空列表返回并修复达梦连接测试报错 refs #157

* fix(kingbase): 补齐主键识别并优化宽表卡顿 refs #176 refs #178

* fix(query-execution): 支持带前置注释的读查询结果识别

* chore(ci): 新增全平台测试包手动构建工作流

---------

Co-authored-by: 辣条 <69459608+tianqijiuyun-latiao@users.noreply.github.com>
Co-authored-by: Syngnat <92659908+Syngnat@users.noreply.github.com>

* ♻️ refactor(frontend-sync): 优化桌面交互细节并移除 main 回灌 dev 自动化

- 优化新建连接、主题设置、侧边栏工具区与 SQL 日志的界面表现
- 调整分页、筛选、透明模式与弹窗样式，统一整体交互层次
- 收口外观参数生效逻辑并补齐多组件适配
- 删除 sync-main-to-dev 工作流并同步维护者手动回灌说明

---------

Co-authored-by: Syngnat <yangguofeng919@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: 辣条 <69459608+tianqijiuyun-latiao@users.noreply.github.com>

.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-macos-build.yml

@@ -0,0 +1,91 @@
+name: Test Build macOS (Manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      build_label:
+        description: "测试包标识（仅用于文件名）"
+        required: false
+        default: "test"
+  push:
+    branches:
+      - feature/kingbase_opt
+    paths:
+      - ".github/workflows/test-macos-build.yml"
+
+permissions:
+  contents: read
+
+jobs:
+  build-macos:
+    name: Build macOS ${{ matrix.arch }}
+    runs-on: macos-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: darwin/amd64
+            arch: amd64
+          - platform: darwin/arm64
+            arch: arm64
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24.3"
+          check-latest: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install Wails
+        run: go install github.com/wailsapp/wails/v2/cmd/wails@v2.11.0
+
+      - name: Build App
+        run: |
+          set -euo pipefail
+          OUTPUT_NAME="gonavi-test-${{ matrix.arch }}"
+          BUILD_LABEL="${{ inputs.build_label }}"
+          if [ -z "$BUILD_LABEL" ]; then
+            BUILD_LABEL="test"
+          fi
+          APP_VERSION="${BUILD_LABEL}-${GITHUB_RUN_NUMBER}"
+          wails build \
+            -platform "${{ matrix.platform }}" \
+            -clean \
+            -o "$OUTPUT_NAME" \
+            -ldflags "-s -w -X GoNavi-Wails/internal/app.AppVersion=${APP_VERSION}"
+
+      - name: Package Zip
+        run: |
+          set -euo pipefail
+          APP_PATH="build/bin/gonavi-test-${{ matrix.arch }}.app"
+          if [ ! -d "$APP_PATH" ]; then
+            APP_PATH=$(find build/bin -maxdepth 1 -name "*.app" | head -n 1 || true)
+          fi
+          if [ -z "$APP_PATH" ] || [ ! -d "$APP_PATH" ]; then
+            echo "未找到 .app 产物"
+            ls -la build/bin || true
+            exit 1
+          fi
+          LABEL="${{ inputs.build_label }}"
+          if [ -z "$LABEL" ]; then
+            LABEL="test"
+          fi
+          ZIP_NAME="GoNavi-${LABEL}-macos-${{ matrix.arch }}-run${GITHUB_RUN_NUMBER}.zip"
+          mkdir -p artifacts
+          ditto -c -k --sequesterRsrc --keepParent "$APP_PATH" "artifacts/$ZIP_NAME"
+          shasum -a 256 "artifacts/$ZIP_NAME" > "artifacts/$ZIP_NAME.sha256"
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: gonavi-macos-${{ matrix.arch }}-run${{ github.run_number }}
+          path: artifacts/*
+          if-no-files-found: error

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;
@@ -409,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);
@@ -825,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);
@@ -1229,8 +1345,6 @@ function App() {
             },
             components: {
                 Layout: {
-                    colorBgBody: 'transparent', 
-                    colorBgHeader: 'transparent',
                     bodyBg: 'transparent',
                     headerBg: 'transparent',
                     siderBg: 'transparent',
@@ -1311,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} 
@@ -1343,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} />
@@ -1409,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 && (
@@ -1438,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>
@@ -1460,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"
@@ -1627,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];
@@ -1639,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
@@ -1675,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>
@@ -1690,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}
@@ -1702,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}
@@ -1715,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}
@@ -1724,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}
@@ -1733,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}
@@ -1742,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>
@@ -1777,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';
@@ -11,7 +11,7 @@ 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 { isMacLikePlatform, normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
 import { getDataSourceCapabilities } from '../utils/dataSourceCapabilities';
 
 // --- Error Boundary ---
@@ -642,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;
@@ -709,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();
@@ -3132,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 */}
@@ -3859,33 +3930,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>
        )}
 
@@ -4061,6 +4140,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/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;

internal/db/query_value.go

@@ -1,4 +1,4 @@
-package db
+package db
 
 import (
 	"encoding/hex"