diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8bceb2c..eb40164 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -149,12 +149,16 @@ jobs: TARGET_PLATFORM="${{ matrix.platform }}" GOOS="${TARGET_PLATFORM%%/*}" GOARCH="${TARGET_PLATFORM##*/}" - DRIVERS=(mariadb diros sphinx sqlserver sqlite duckdb dameng kingbase highgo vastbase mongodb tdengine clickhouse) + DRIVERS=(mariadb doris sphinx sqlserver sqlite duckdb dameng kingbase highgo vastbase mongodb tdengine clickhouse) OUTDIR="drivers/${{ matrix.os_name }}" mkdir -p "$OUTDIR" for DRIVER in "${DRIVERS[@]}"; do - TAG="gonavi_${DRIVER}_driver" + BUILD_DRIVER="$DRIVER" + if [ "$DRIVER" = "doris" ]; then + BUILD_DRIVER="diros" + fi + TAG="gonavi_${BUILD_DRIVER}_driver" OUTPUT="${DRIVER}-driver-agent-${GOOS}-${GOARCH}" if [ "$GOOS" = "windows" ]; then OUTPUT="${OUTPUT}.exe" diff --git a/README.md b/README.md index d773de9..de049cd 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# GoNavi - 现代化的轻量级数据库管理工具 +# GoNavi - A Modern Lightweight Database Client [![Go Version](https://img.shields.io/github/go-mod/go-version/Syngnat/GoNavi)](https://go.dev/) [![Wails Version](https://img.shields.io/badge/Wails-v2-red)](https://wails.io) @@ -6,11 +6,51 @@ [![License](https://img.shields.io/badge/License-Apache%202.0-green.svg)](LICENSE) [![Build Status](https://img.shields.io/github/actions/workflow/status/Syngnat/GoNavi/release.yml?label=Build)](https://github.com/Syngnat/GoNavi/actions) -**GoNavi** 是一款基于 **Wails (Go)** 和 **React** 构建的现代化、高性能、跨平台数据库管理客户端。它旨在提供如原生应用般流畅的用户体验,同时保持极低的资源占用。 +**Language**: English | [简体中文](README.zh-CN.md) -相比于 Electron 应用,GoNavi 的体积更小(~10MB),启动速度更快,内存占用更低。 +GoNavi is a modern, high-performance, cross-platform database client built with **Wails (Go)** and **React**. +It delivers native-like responsiveness with low resource usage. -

📸 项目截图

+Compared with many Electron-based clients, GoNavi is typically smaller in binary size (around 10MB class), starts faster, and uses less memory. + +--- + +## Project Overview + +GoNavi is designed for developers and DBAs who need a unified desktop experience across multiple databases. + +- **Native-performance architecture**: Wails (Go + WebView) with lightweight runtime overhead. +- **Large dataset usability**: virtualized rendering and optimized DataGrid workflows for high-volume tables. +- **Unified connectivity**: URI build/parse, SSH tunnel, proxy support, and on-demand driver activation. +- **Production-oriented workflow**: SQL editor, object management, batch export/backup, sync tools, execution logs, and update checks. + +## Supported Data Sources + +> `Built-in`: available out of the box. +> `Optional driver agent`: install/enable via Driver Manager first. + +| Category | Data Source | Driver Mode | Typical Capabilities | +|---|---|---|---| +| Relational | MySQL | Built-in | Schema browsing, SQL query, data editing, export/backup | +| Relational | PostgreSQL | Built-in | Schema browsing, SQL query, data editing, object management | +| Relational | Oracle | Built-in | Query execution, object browsing, data editing | +| Cache | Redis | Built-in | Key browsing, command execution, encoding/view switch | +| Relational | MariaDB | Optional driver agent | Querying, object management, data editing | +| Relational | Doris | Optional driver agent | Querying, object browsing, SQL execution | +| Search | Sphinx | Optional driver agent | SphinxQL querying and object browsing | +| Relational | SQL Server | Optional driver agent | Schema browsing, SQL query, object management | +| File-based | SQLite | Optional driver agent | Local DB browsing, editing, export | +| File-based | DuckDB | Optional driver agent | Large-table query, pagination, file-DB workflow | +| Domestic DB | Dameng | Optional driver agent | Querying, object browsing, data editing | +| Domestic DB | Kingbase | Optional driver agent | Querying, object browsing, data editing | +| Domestic DB | HighGo | Optional driver agent | Querying, object browsing, data editing | +| Domestic DB | Vastbase | Optional driver agent | Querying, object browsing, data editing | +| Document | MongoDB | Optional driver agent | Document query, collection browsing, connection management | +| Time-series | TDengine | Optional driver agent | Time-series schema browsing and querying | +| Columnar Analytics | ClickHouse | Optional driver agent | Analytical query, object browsing, SQL execution | +| Extensibility | Custom Driver/DSN | Custom | Extend to more data sources via Driver + DSN | + +

📸 Screenshots

image @@ -24,137 +64,123 @@ --- -## ✨ 核心特性 +## Key Features -### 🚀 极致性能 -- **零卡顿交互**:采用独创的 "幽灵拖拽" (Ghost Resizing) 技术,在包含数万行数据的表格中调整列宽,依然保持 60fps+ 的丝滑体验。 -- **虚拟滚动**:轻松处理海量数据展示,拒绝卡顿。 +### Performance +- **Smooth interaction under load**: optimized table interaction (including column resize workflow on large datasets). +- **Virtualized rendering**: keeps large result sets responsive. -### 🔌 多数据库支持 -- **MySQL**:完整支持,涵盖数据编辑、结构管理与导入导出。 -- **PostgreSQL**:数据查看与编辑支持,事务提交能力持续完善。 -- **SQLite**:本地文件数据库支持。 -- **Oracle**:基础数据访问与编辑支持。 -- **Dameng(达梦)**:基础数据访问与编辑支持。 -- **Kingbase(人大金仓)**:基础数据访问与编辑支持。 -- **TDengine**:时序数据库连接、库表浏览与 SQL 查询支持。 -- **Redis**:Key/Value 浏览、命令执行、视图与编码切换。 -- **自定义驱动**:支持配置 Driver/DSN 接入更多数据源。 -- **SSH 隧道**:内置 SSH 隧道支持,安全连接内网数据库。 +### Data Management (DataGrid) +- In-place cell editing. +- Batch insert/update/delete with transaction-oriented submit/rollback. +- Large-field popup editor. +- Context actions (set NULL, copy/export, etc.). +- Smart read/write mode switching based on query context. +- Export formats: CSV, Excel (XLSX), JSON, Markdown. -### 📊 强大的数据管理 (DataGrid) -- **所见即所得编辑**:直接在表格中双击单元格修改数据。 -- **批量事务操作**:支持批量新增、修改、删除,一键提交或回滚事务。 -- **大字段编辑**:双击大字段自动打开弹窗编辑器,避免卡顿。 -- **右键上下文菜单**:快速设置 NULL、复制/导出等操作。 -- **智能上下文**:自动识别单表查询,解锁编辑功能;复杂查询自动切换为只读模式。 -- **批量导出/备份**:支持表与数据库的批量导出/备份。 -- **数据导出**:支持 CSV、Excel (XLSX)、JSON、Markdown 等格式。 +### SQL Editor +- Monaco Editor core. +- Context-aware completion for databases/tables/columns. +- Multi-tab query workflow. -### 🧰 批量导出/备份 -- **数据库批量导出**:支持结构导出与结构+数据备份。 -- **表批量导出**:支持多表一键导出/备份。 -- **智能上下文检测**:自动判断目标范围,避免误操作。 +### Batch Export / Backup +- Database-level and table-level batch export/backup. +- Scope-aware operation flow to reduce mistakes. -### 🧩 Redis 视图与编码 -- **视图模式切换**:自动/原始文本/UTF-8/十六进制多模式显示。 -- **智能解码**:针对二进制值进行 UTF-8 质量判定与中文字符识别。 -- **命令执行**:内置命令面板快速操作。 +### Connectivity +- URI generation/parsing. +- SSH tunnel support. +- Proxy support. +- Config import/export (JSON). +- Optional driver management and activation. -### 🔄 数据同步与导入导出 -- **连接配置导入/导出**:支持配置 JSON 导入导出,便于团队共享。 -- **数据同步**:内置数据同步面板,支持跨库同步任务配置。 +### Redis Tools +- Multi-view value rendering (auto/raw text/UTF-8/hex). +- Built-in command execution panel. -### 🆙 在线更新 -- **自动更新**:启动/定时/手动检查更新,自动下载并提示重启完成更新。 +### Observability and Update +- SQL execution logs with timing information. +- Startup/scheduled/manual update checks. -### 🧾 可观测性 -- **SQL 执行日志**:实时查看 SQL 与执行耗时,便于排障与优化。 - -### 📝 智能 SQL 编辑器 -- **Monaco Editor 内核**:集成 VS Code 同款编辑器,体验极佳。 -- **智能补全**:自动感知当前连接上下文,提供数据库、表名、字段名的实时补全。 -- **多标签页**:支持多窗口并行操作,像浏览器一样管理你的查询会话。 - -### 🎨 现代化 UI -- **Ant Design 5**:企业级 UI 设计语言。 -- **暗黑模式**:内置深色/浅色主题切换,适应不同光照环境。 -- **响应式布局**:灵活的侧边栏与布局调整。 +### UI/UX +- Ant Design 5 based interface. +- Light/Dark themes. +- Flexible sidebar and layout behavior. --- -## 🛠️ 技术栈 +## Tech Stack -* **后端 (Backend)**: Go 1.24 + Wails v2 -* **前端 (Frontend)**: React 18 + TypeScript + Vite -* **UI 框架**: Ant Design 5 -* **状态管理**: Zustand -* **编辑器**: Monaco Editor +- **Backend**: Go 1.24 + Wails v2 +- **Frontend**: React 18 + TypeScript + Vite +- **UI**: Ant Design 5 +- **State Management**: Zustand +- **Editor**: Monaco Editor --- -## 📦 安装与运行 +## Installation and Run -### 前置要求 -* [Go](https://go.dev/dl/) 1.21+ -* [Node.js](https://nodejs.org/) 18+ -* [Wails CLI](https://wails.io/docs/gettingstarted/installation): `go install github.com/wailsapp/wails/v2/cmd/wails@latest` +### Prerequisites +- [Go](https://go.dev/dl/) 1.21+ +- [Node.js](https://nodejs.org/) 18+ +- [Wails CLI](https://wails.io/docs/gettingstarted/installation): + `go install github.com/wailsapp/wails/v2/cmd/wails@latest` -### 开发模式 +### Development Mode ```bash -# 克隆项目 +# Clone git clone https://github.com/Syngnat/GoNavi.git cd GoNavi -# 启动开发服务器 (支持热重载) +# Start development with hot reload wails dev ``` -### 编译构建 +### Build ```bash -# 构建当前平台的可执行文件 +# Build for current platform wails build -# 清理并构建 (推荐发布前使用) +# Clean build (recommended before release) wails build -clean ``` -构建产物将位于 `build/bin` 目录下。 +Artifacts are generated in `build/bin`. -### 跨平台编译 (GitHub Actions) +### Cross-Platform Release (GitHub Actions) -本项目内置了 GitHub Actions 流水线,Push `v*` 格式的 Tag 即可自动触发构建并发布 Release。 -支持构建: -* macOS (AMD64 / ARM64) -* Windows (AMD64) -* Linux (AMD64,提供 WebKitGTK 4.0 与 4.1 变体产物) +The repository includes a release workflow. +Push a `v*` tag to trigger automated build and release. + +Target artifacts include: +- macOS (AMD64 / ARM64) +- Windows (AMD64) +- Linux (AMD64, WebKitGTK 4.0 and 4.1 variants) --- -## ❓ 常见问题 (Troubleshooting) +## Troubleshooting -### macOS 提示 "应用已损坏,无法打开" +### macOS: "App is damaged and can’t be opened" -由于本项目尚未购买 Apple 开发者证书进行签名(Notarization),macOS 的 Gatekeeper 安全机制可能会拦截应用的运行。请按照以下步骤解决: +Without Apple notarization, Gatekeeper may block startup. -1. 将下载的 `GoNavi.app` 拖入 **应用程序** 文件夹。 -2. 打开 **终端 (Terminal)**。 -3. 复制并执行以下命令(输入密码时不会显示): - ```bash - sudo xattr -rd com.apple.quarantine /Applications/GoNavi.app - ``` -4. 或者:在 Finder 中右键点击应用图标,按住 `Control` 键选择 **打开**,然后在弹出的窗口中再次点击 **打开**。 +1. Move `GoNavi.app` to **Applications**. +2. Open **Terminal**. +3. Run: -### Linux 启动报错缺少 `libwebkit2gtk` / `libjavascriptcoregtk` +```bash +sudo xattr -rd com.apple.quarantine /Applications/GoNavi.app +``` -GoNavi 的 Linux 二进制依赖系统 WebKitGTK 运行库。不同发行版默认版本不同: +Or right-click the app in Finder and choose **Open** with Control key flow. -- Debian 13 / Ubuntu 24.04 及更新版本:通常为 WebKitGTK 4.1 -- Ubuntu 22.04 / Debian 12 等:通常为 WebKitGTK 4.0 +### Linux: missing `libwebkit2gtk` / `libjavascriptcoregtk` -如果启动时报错(如 `libwebkit2gtk-4.0.so.37: cannot open shared object file`),请按系统安装对应依赖后重试: +GoNavi depends on WebKitGTK runtime libraries. ```bash # Debian 13 / Ubuntu 24.04+ @@ -166,20 +192,20 @@ sudo apt-get update sudo apt-get install -y libgtk-3-0 libwebkit2gtk-4.0-37 libjavascriptcoregtk-4.0-18 ``` -如果你使用的是 Release 中带 `-WebKit41` 后缀的 Linux 产物,请优先在 Debian 13 / Ubuntu 24.04+ 上使用;普通 Linux 产物更适合 WebKitGTK 4.0 运行环境。 +If you use Linux artifacts with the `-WebKit41` suffix, prefer Debian 13 / Ubuntu 24.04+. --- -## 🤝 贡献指南 +## Contributing -欢迎提交 Issue 和 Pull Request! +Issues and pull requests are welcome. -1. Fork 本仓库 -2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`) -3. 提交你的改动 (`git commit -m 'feat: Add some AmazingFeature'`) -4. 推送到分支 (`git push origin feature/AmazingFeature`) -5. 开启一个 Pull Request +1. Fork the repository. +2. Create a feature branch. +3. Commit your changes. +4. Push to your branch. +5. Open a pull request. -## 📄 开源协议 +## License -本项目采用 [Apache-2.0 协议](LICENSE) 开源。 +Licensed under [Apache-2.0](LICENSE). diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..b572ee8 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,194 @@ +# GoNavi - 现代化轻量级数据库客户端 + +[![Go Version](https://img.shields.io/github/go-mod/go-version/Syngnat/GoNavi)](https://go.dev/) +[![Wails Version](https://img.shields.io/badge/Wails-v2-red)](https://wails.io) +[![React Version](https://img.shields.io/badge/React-v18-blue)](https://reactjs.org/) +[![License](https://img.shields.io/badge/License-Apache%202.0-green.svg)](LICENSE) +[![Build Status](https://img.shields.io/github/actions/workflow/status/Syngnat/GoNavi/release.yml?label=Build)](https://github.com/Syngnat/GoNavi/actions) + +**语言**: [English](README.md) | 简体中文 + +GoNavi 是基于 **Wails (Go)** 与 **React** 构建的跨平台数据库管理工具,强调原生性能、低资源占用与多数据源统一工作流。 + +相比常见 Electron 客户端,GoNavi 在体积、启动速度和内存占用上更轻量。 + +--- + +## 项目简介 + +GoNavi 面向开发者与 DBA,核心目标是让数据库操作在桌面端做到“快、稳、统一”。 + +- **原生性能架构**:Wails(Go + WebView),降低运行时开销。 +- **大数据可用性**:虚拟滚动 + DataGrid 交互优化,提升大结果集可操作性。 +- **统一连接能力**:支持 URI 生成/解析、SSH 隧道、代理、驱动按需安装。 +- **工程化能力完整**:覆盖 SQL 编辑、对象管理、批量导出/备份、数据同步、执行日志、在线更新。 + +## 支持的数据源 + +> `内置`:主程序开箱即用。 +> `可选驱动代理`:需在驱动管理中安装启用后可用。 + +| 类别 | 数据源 | 驱动模式 | 典型能力 | +|---|---|---|---| +| 关系型 | MySQL | 内置 | 库表浏览、SQL 查询、数据编辑、导出/备份 | +| 关系型 | PostgreSQL | 内置 | 库表浏览、SQL 查询、数据编辑、对象管理 | +| 关系型 | Oracle | 内置 | 连接查询、对象浏览、数据编辑 | +| 缓存 | Redis | 内置 | Key 浏览、命令执行、编码/视图切换 | +| 关系型 | MariaDB | 可选驱动代理 | 连接查询、对象管理、数据编辑 | +| 关系型 | Doris | 可选驱动代理 | 连接查询、对象浏览、SQL 执行 | +| 搜索 | Sphinx | 可选驱动代理 | SphinxQL 查询与对象浏览 | +| 关系型 | SQL Server | 可选驱动代理 | 库表浏览、SQL 查询、对象管理 | +| 文件型 | SQLite | 可选驱动代理 | 本地文件库浏览、编辑、导出 | +| 文件型 | DuckDB | 可选驱动代理 | 大表查询、分页浏览、文件库管理 | +| 国产数据库 | Dameng | 可选驱动代理 | 连接查询、对象浏览、数据编辑 | +| 国产数据库 | Kingbase | 可选驱动代理 | 连接查询、对象浏览、数据编辑 | +| 国产数据库 | HighGo | 可选驱动代理 | 连接查询、对象浏览、数据编辑 | +| 国产数据库 | Vastbase | 可选驱动代理 | 连接查询、对象浏览、数据编辑 | +| 文档型 | MongoDB | 可选驱动代理 | 文档查询、集合浏览、连接管理 | +| 时序 | TDengine | 可选驱动代理 | 时序库表浏览、查询分析 | +| 列式分析 | ClickHouse | 可选驱动代理 | 分析查询、对象浏览、SQL 执行 | +| 扩展接入 | Custom Driver/DSN | 自定义 | 通过 Driver + DSN 接入更多数据源 | + +

📸 项目截图

+ +
+ image + image + image +
+ image + image + image +
+ +--- + +## 核心特性 + +### 性能与交互 +- 大数据场景下保持流畅交互(含 DataGrid 列宽拖拽、批量编辑流程优化)。 +- 虚拟滚动渲染,降低大结果集卡顿风险。 + +### 数据管理(DataGrid) +- 单元格所见即所得编辑。 +- 批量新增/修改/删除,支持事务提交与回滚。 +- 大字段弹窗编辑。 +- 右键上下文操作(NULL、复制、导出等)。 +- 根据查询上下文智能切换读写模式。 +- 支持 CSV / XLSX / JSON / Markdown 导出。 + +### SQL 编辑器 +- 基于 Monaco Editor。 +- 上下文补全(数据库/表/字段)。 +- 多标签查询工作流。 + +### 连接与驱动 +- URI 生成与解析。 +- SSH 隧道、代理支持。 +- 连接配置 JSON 导入/导出。 +- 可选驱动安装与启用管理。 + +### Redis 工具 +- 自动/原始文本/UTF-8/十六进制等视图模式。 +- 内置命令执行面板。 + +### 可观测性与更新 +- SQL 执行日志(含耗时)。 +- 启动/定时/手动更新检查。 + +### UI 体验 +- Ant Design 5 体系。 +- 深色/浅色主题切换。 +- 灵活布局与侧边栏行为。 + +--- + +## 技术栈 + +- **后端**: Go 1.24 + Wails v2 +- **前端**: React 18 + TypeScript + Vite +- **UI 框架**: Ant Design 5 +- **状态管理**: Zustand +- **编辑器**: Monaco Editor + +--- + +## 安装与运行 + +### 前置要求 +- [Go](https://go.dev/dl/) 1.21+ +- [Node.js](https://nodejs.org/) 18+ +- [Wails CLI](https://wails.io/docs/gettingstarted/installation): + `go install github.com/wailsapp/wails/v2/cmd/wails@latest` + +### 开发模式 + +```bash +# 克隆项目 +git clone https://github.com/Syngnat/GoNavi.git +cd GoNavi + +# 启动开发(热重载) +wails dev +``` + +### 编译构建 + +```bash +# 构建当前平台 +wails build + +# 清理后构建(发布前推荐) +wails build -clean +``` + +构建产物位于 `build/bin`。 + +### 跨平台发布(GitHub Actions) + +仓库内置发布流水线,推送 `v*` Tag 可自动构建并发布 Release。 + +支持目标: +- macOS (AMD64 / ARM64) +- Windows (AMD64) +- Linux (AMD64,含 WebKitGTK 4.0 / 4.1 变体) + +--- + +## 常见问题 + +### macOS 提示“应用已损坏,无法打开” + +在未进行 Apple Notarization 时,Gatekeeper 可能拦截应用。 + +```bash +sudo xattr -rd com.apple.quarantine /Applications/GoNavi.app +``` + +### Linux 缺少 `libwebkit2gtk` / `libjavascriptcoregtk` + +```bash +# Debian 13 / Ubuntu 24.04+ +sudo apt-get update +sudo apt-get install -y libgtk-3-0 libwebkit2gtk-4.1-0 libjavascriptcoregtk-4.1-0 + +# Ubuntu 22.04 / Debian 12 +sudo apt-get update +sudo apt-get install -y libgtk-3-0 libwebkit2gtk-4.0-37 libjavascriptcoregtk-4.0-18 +``` + +--- + +## 贡献指南 + +欢迎提交 Issue 与 Pull Request。 + +1. Fork 本仓库。 +2. 创建特性分支。 +3. 提交改动。 +4. 推送分支。 +5. 发起 Pull Request。 + +## 开源协议 + +本项目采用 [Apache-2.0 协议](LICENSE)。 diff --git a/docs/driver-manifest.json b/docs/driver-manifest.json index aaef2d8..1f0302a 100644 --- a/docs/driver-manifest.json +++ b/docs/driver-manifest.json @@ -7,11 +7,11 @@ "checksumPolicy": "off", "downloadUrl": "builtin://activate/mariadb" }, - "diros": { + "doris": { "engine": "go", "version": "1.9.3", "checksumPolicy": "off", - "downloadUrl": "builtin://activate/diros" + "downloadUrl": "builtin://activate/doris" }, "sphinx": { "engine": "go", diff --git a/frontend/src/App.css b/frontend/src/App.css index e532c84..713d6b9 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -92,3 +92,53 @@ body[data-theme='dark'] { background-color: #ff4d4f !important; color: #fff !important; } + +/* 驱动管理:统一关闭 antd sticky 横向条,仅保留自定义独立横向条 */ +.driver-manager-table .ant-table-sticky-scroll { + display: none !important; +} + +/* 仅在独立横向条激活时隐藏表格自身横向滚动条,避免出现双横向条 */ +.driver-manager-table-wrap.driver-manager-table-wrap-external-active .driver-manager-table .ant-table-content, +.driver-manager-table-wrap.driver-manager-table-wrap-external-active .driver-manager-table .ant-table-body { + overflow-x: auto !important; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.driver-manager-table-wrap.driver-manager-table-wrap-external-active .driver-manager-table .ant-table-content::-webkit-scrollbar:horizontal, +.driver-manager-table-wrap.driver-manager-table-wrap-external-active .driver-manager-table .ant-table-body::-webkit-scrollbar:horizontal { + height: 0 !important; +} + +.driver-manager-table-wrap { + width: 100%; + max-width: 100%; + overflow-x: hidden; +} + +.driver-manager-footer { + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; +} + +.driver-manager-footer-actions { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.driver-manager-hscroll { + width: 100%; + height: 12px; + overflow-x: auto; + overflow-y: hidden; + scrollbar-gutter: stable; + background: transparent; +} + +.driver-manager-hscroll-inner { + height: 1px; +} diff --git a/frontend/src/components/ConnectionModal.tsx b/frontend/src/components/ConnectionModal.tsx index d21d9e3..3f362a8 100644 --- a/frontend/src/components/ConnectionModal.tsx +++ b/frontend/src/components/ConnectionModal.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { Modal, Form, Input, InputNumber, Button, message, Checkbox, Divider, Select, Alert, Card, Row, Col, Typography, Collapse, Space, Table, Tag } from 'antd'; import { DatabaseOutlined, ConsoleSqlOutlined, FileTextOutlined, CloudServerOutlined, AppstoreAddOutlined, CloudOutlined, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'; import { useStore } from '../store'; +import { normalizeOpacityForPlatform } from '../utils/appearance'; import { DBGetDatabases, GetDriverStatusList, MongoDiscoverMembers, TestConnection, RedisConnect, SelectSSHKeyFile } from '../../wailsjs/go/app/App'; import { ConnectionConfig, MongoMemberInfo, SavedConnection } from '../types'; @@ -10,10 +11,16 @@ const { Text } = Typography; const MAX_URI_LENGTH = 4096; const MAX_URI_HOSTS = 32; const MAX_TIMEOUT_SECONDS = 3600; +const STEP1_MODAL_WIDTH = 760; +const STEP2_MODAL_WIDTH = 680; +const STEP1_MODAL_MIN_BODY_HEIGHT = 460; +const STEP1_SIDEBAR_DIVIDER_DARK = 'rgba(255, 255, 255, 0.16)'; +const STEP1_SIDEBAR_DIVIDER_LIGHT = 'rgba(0, 0, 0, 0.08)'; const getDefaultPortByType = (type: string) => { switch (type) { case 'mysql': return 3306; + case 'doris': case 'diros': return 9030; case 'sphinx': return 9306; case 'clickhouse': return 9000; @@ -78,10 +85,35 @@ const ConnectionModal: React.FC<{ const testTimerRef = useRef(null); const addConnection = useStore((state) => state.addConnection); const updateConnection = useStore((state) => state.updateConnection); + const theme = useStore((state) => state.theme); + const appearance = useStore((state) => state.appearance); + const darkMode = theme === 'dark'; + const effectiveOpacity = normalizeOpacityForPlatform(appearance.opacity); const mysqlTopology = Form.useWatch('mysqlTopology', form) || 'single'; const mongoTopology = Form.useWatch('mongoTopology', form) || 'single'; const mongoSrv = Form.useWatch('mongoSrv', form) || false; + const getSectionBg = (darkHex: string) => { + if (!darkMode) { + return `rgba(245, 245, 245, ${Math.max(effectiveOpacity, 0.92)})`; + } + const hex = darkHex.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + return `rgba(${r}, ${g}, ${b}, ${Math.max(effectiveOpacity, 0.82)})`; + }; + + const step1SidebarDividerColor = darkMode ? STEP1_SIDEBAR_DIVIDER_DARK : STEP1_SIDEBAR_DIVIDER_LIGHT; + + const tunnelSectionStyle: React.CSSProperties = { + padding: '12px', + background: getSectionBg('#2a2a2a'), + borderRadius: 6, + marginTop: 12, + border: darkMode ? '1px solid rgba(255, 255, 255, 0.16)' : '1px solid rgba(0, 0, 0, 0.06)', + }; + const fetchDriverStatusMap = async (): Promise> => { const result: Record = {}; const res = await GetDriverStatusList('', ''); @@ -456,7 +488,7 @@ const ConnectionModal: React.FC<{ const getUriPlaceholder = () => { if (dbType === 'mysql' || dbType === 'mariadb' || dbType === 'diros' || dbType === 'sphinx') { const defaultPort = getDefaultPortByType(dbType); - const scheme = dbType === 'diros' ? 'diros' : 'mysql'; + const scheme = dbType === 'diros' ? 'doris' : 'mysql'; return `${scheme}://user:pass@127.0.0.1:${defaultPort},127.0.0.2:${defaultPort}/db_name?topology=replica`; } if (isFileDatabaseType(dbType)) { @@ -501,7 +533,7 @@ const ConnectionModal: React.FC<{ } const dbPath = database ? `/${encodeURIComponent(database)}` : '/'; const query = params.toString(); - const scheme = type === 'diros' ? 'diros' : 'mysql'; + const scheme = type === 'diros' ? 'doris' : 'mysql'; return `${scheme}://${encodedAuth}${hosts.join(',')}${dbPath}${query ? `?${query}` : ''}`; } @@ -1131,7 +1163,7 @@ const ConnectionModal: React.FC<{ { label: '关系型数据库', items: [ { key: 'mysql', name: 'MySQL', icon: }, { key: 'mariadb', name: 'MariaDB', icon: }, - { key: 'diros', name: 'Diros', icon: }, + { key: 'diros', name: 'Doris', icon: }, { key: 'sphinx', name: 'Sphinx', icon: }, { key: 'clickhouse', name: 'ClickHouse', icon: }, { key: 'postgres', name: 'PostgreSQL', icon: }, @@ -1181,7 +1213,7 @@ const ConnectionModal: React.FC<{ )}
{/* 左侧分类导航 */} -
+
{dbTypeGroups.map((group, idx) => (
{useSSH && ( -
+
@@ -1634,7 +1666,7 @@ const ConnectionModal: React.FC<{ {useProxy && ( -
+