Update README.md to enhance project description, improve feature list clarity, and add interface previews. Adjusted installation instructions and included a new license badge for better visibility.

This commit is contained in:
ethan 2026-01-02 02:10:15 +08:00
parent 929e445424
commit d5546b524c

230
README.md
View File

@ -6,11 +6,13 @@
![Electron](https://img.shields.io/badge/Electron-33-47848f?style=for-the-badge&logo=electron)
![React](https://img.shields.io/badge/React-18-61dafb?style=for-the-badge&logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?style=for-the-badge&logo=typescript)
![Node.js](https://img.shields.io/badge/Node.js-18+-339933?style=for-the-badge&logo=node.js)
![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
**现代化多数据库管理工具**
**简洁高效的数据库管理工具**
*轻量、高性能、跨平台*
*轻量 · 高性能 · 跨平台*
[下载](#-快速开始) · [功能](#-特性) · [截图](#-界面预览) · [文档](#-配置说明)
</div>
@ -18,29 +20,58 @@
## ✨ 特性
- 🚀 **跨平台** - 基于 Electron支持 Windows、macOS、Linux
- ⚡ **高性能** - 原生数据库驱动,毫秒级响应
- 🎨 **精美 UI** - 简约现代浅色主题,圆角设计,柔和阴影
- 🔌 **多数据库** - 支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis、MariaDB
- 📝 **智能编辑器** - Monaco EditorSQL 语法高亮、智能补全
- 📊 **数据编辑** - 支持直接编辑表格数据,虚拟滚动大数据量,列宽可拖动调整
- 📅 **日期选择器** - 智能识别日期字段,内置精确到秒的日期时间选择器
- 🛠️ **表设计器** - Navicat 风格,可视化编辑字段、索引、外键、表选项
- 🗃️ **完整管理** - 创建/删除/重命名/复制数据库和表
- 📤 **导入导出** - 支持 JSON、Navicat NCX 格式连接配置导入导出(含密码解密)
- 🔄 **批量操作** - 支持多选连接批量删除管理
- 🚀 **跨平台支持** - 基于 Electron完美支持 Windows、macOS、Linux
- ⚡ **高性能** - 原生数据库驱动,毫秒级响应,虚拟滚动支持大数据量
- 🎨 **现代化 UI** - 简约清新的浅色主题,圆角设计,舒适的视觉体验
- 🔌 **多数据库** - 支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis、MariaDB 等
- 📝 **智能编辑器** - 基于 Monaco EditorSQL 语法高亮、智能补全
- 📊 **数据编辑** - 双击单元格直接编辑,支持新增/删除行
- 🛠️ **表设计器** - Navicat 风格,可视化编辑字段、索引、外键
- 📤 **导入导出** - 支持 JSON、Navicat NCX 格式连接配置(含密码解密)
## 🗃️ 支持的数据库
<div align="center">
| 数据库 | 状态 | 驱动 |
|--------|------|------|
| 🐬 MySQL | ✅ | mysql2 |
| 🐘 PostgreSQL | ✅ | pg |
| 💾 SQLite | ✅ | sql.js |
| 📊 SQL Server | ✅ | mssql |
| 🦭 MariaDB | ✅ | mysql2 |
| 🍃 MongoDB | ✅ | mongodb |
| ⚡ Redis | ✅ | ioredis |
|:------:|:----:|:----:|
| 🐬 MySQL | ✅ 完全支持 | mysql2 |
| 🐘 PostgreSQL | ✅ 完全支持 | pg |
| 💾 SQLite | ✅ 完全支持 | sql.js |
| 📊 SQL Server | ✅ 完全支持 | mssql |
| 🦭 MariaDB | ✅ 完全支持 | mysql2 |
| 🍃 MongoDB | ✅ 完全支持 | mongodb |
| ⚡ Redis | ✅ 完全支持 | ioredis |
| 🔶 Oracle | 🚧 计划中 | - |
| ❄️ Snowflake | 🚧 计划中 | - |
</div>
## 📸 界面预览
### 主页
简洁的欢迎界面,展示支持的数据库类型,快速开始查询。
![主页](docs/index.png)
### 数据浏览
直观的数据表格视图,支持分页、排序,双击单元格可直接编辑数据。
![数据浏览](docs/table.png)
### SQL 查询
强大的 SQL 编辑器,基于 Monaco Editor支持语法高亮、代码补全、格式化。
![SQL 查询](docs/query.png)
### 表设计器
Navicat 风格的表结构设计器,可视化管理字段、索引、外键、表选项。
![表设计器](docs/edit.png)
## 🚀 快速开始
@ -49,7 +80,7 @@
- Node.js 18+
- npm 或 yarn
### 安装
### 安装运行
```bash
# 克隆项目
@ -62,42 +93,33 @@ npm install
# 开发模式运行
npm run electron:dev
# 构建应用(自动递增版本号)
# 构建应用
npm run electron:build
```
## 📸 界面预览
```
┌─────────────────────────────────────────────────────────────────┐
│ 🗄️ EasySQL v2.0 ─ □ ✕ │
├────────────────┬────────────────────────────────────────────────┤
│ │ 🏠 主页 │ 📝 查询1 │ 📋 users │ + │
│ + 新建连接 │ ┌──────────────────────────────────────────┐ │
│ │ │ SELECT * FROM users │ │
│ ─ 连接 ─────── │ │ WHERE status = 'active' │ │
│ │ │ ORDER BY created_at DESC │ │
│ 🐬 MySQL本地 │ │ LIMIT 100; │ │
│ 🐘 PostgreSQL │ ├──────────────────────────────────────────┤ │
│ 📊 SQL Server │ │ ┌────┬────────┬─────────┬────────────┐ │ │
│ │ │ │ id │ name │ email │ created_at │ │ │
│ ─ mydb ─────── │ │ ├────┼────────┼─────────┼────────────┤ │ │
│ 📋 users │ │ │ 1 │ Alice │ a@... │ 2024-01-01 │ │ │
│ 📋 orders │ │ │ 2 │ Bob │ b@... │ 2024-01-02 │ │ │
│ 📋 products │ │ └────┴────────┴─────────┴────────────┘ │ │
├────────────────┴────────────────────────────────────────────────┤
│ ● 就绪 · 2 行 (0.05s) EasySQL v2.0 │
└─────────────────────────────────────────────────────────────────┘
```
## 🛠️ 技术栈
- **运行时**: Electron 33
- **前端**: React 18 + TypeScript 5
- **样式**: Tailwind CSS 3
- **构建**: Vite 5
- **编辑器**: Monaco Editor
- **数据库驱动**: mysql2, pg, sql.js, mssql, mongodb, ioredis
| 类别 | 技术 |
|------|------|
| 运行时 | Electron 33 |
| 前端框架 | React 18 + TypeScript 5 |
| 样式 | Tailwind CSS 3 |
| 构建工具 | Vite 5 |
| 代码编辑器 | Monaco Editor |
| 数据库驱动 | mysql2, pg, sql.js, mssql, mongodb, ioredis |
## ⌨️ 快捷键
| 快捷键 | 功能 |
|--------|------|
| `Ctrl+Q` | 新建查询 |
| `Ctrl+Enter` | 执行 SQL |
| `Ctrl+S` | 保存修改 |
| `Ctrl+O` | 打开 SQL 文件 |
| `Ctrl+Shift+F` | 格式化 SQL |
| `Ctrl+W` | 关闭当前标签 |
| `双击连接` | 快速连接数据库 |
| `双击单元格` | 编辑单元格数据 |
## 📁 项目结构
@ -108,88 +130,42 @@ easysql/
│ └── preload.js # 预加载脚本
├── src/ # React 前端
│ ├── components/ # UI 组件
│ │ ├── TitleBar.tsx # 标题栏
│ │ ├── Sidebar.tsx # 侧边栏(连接/数据库/表树)
│ │ ├── Sidebar.tsx # 侧边栏
│ │ ├── MainContent.tsx # 主内容区
│ │ ├── SqlEditor.tsx # SQL 编辑器Monaco
│ │ ├── VirtualDataTable.tsx # 虚拟滚动数据表格
│ │ ├── TableDesigner.tsx # 表设计器Navicat 风格)
│ │ ├── ConnectionModal.tsx # 连接配置弹窗
│ │ ├── CreateDatabaseModal.tsx # 新建数据库弹窗
│ │ ├── CreateTableModal.tsx # 快速新建表弹窗
│ │ └── InputDialog.tsx # 通用输入对话框
│ ├── lib/
│ │ ├── electron-api.ts # Electron API 封装
│ │ └── hooks.ts # 自定义 Hooks
│ ├── App.tsx
│ ├── types.ts
│ └── index.css
├── scripts/
│ ├── bump-version.js # 版本号递增脚本
│ └── generate-icons.js # 图标生成脚本
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
│ │ ├── SqlEditor.tsx # SQL 编辑器
│ │ ├── VirtualDataTable.tsx # 虚拟滚动表格
│ │ ├── TableDesigner.tsx # 表设计器
│ │ └── ...
│ ├── lib/ # 工具库
│ └── App.tsx # 应用入口
├── docs/ # 文档和截图
└── package.json
```
## ⌨️ 快捷键
| 快捷键 | 功能 |
|--------|------|
| `Ctrl+Enter` | 执行 SQL |
| `Ctrl+S` | 保存文件/保存修改 |
| `Ctrl+O` | 打开 SQL 文件 |
| `Ctrl+Shift+F` | 格式化 SQL |
| `Ctrl+Q` | 新建查询 |
| `Ctrl+W` | 关闭当前标签 |
| `Ctrl+C` | 复制选中单元格 |
| `Ctrl+F` | 搜索(侧边栏/表格) |
| `双击连接` | 快速连接数据库 |
| `双击单元格` | 编辑单元格数据 |
| `右键菜单` | 连接/数据库/表操作 |
## 🔧 配置说明
连接配置保存在用户配置目录:
- Windows: `%APPDATA%\easysql\connections.json`
- macOS: `~/Library/Application Support/easysql/connections.json`
- Linux: `~/.config/easysql/connections.json`
连接配置自动保存在用户配置目录:
## 📦 npm 脚本
| 命令 | 说明 |
| 系统 | 路径 |
|------|------|
| `npm run dev` | 启动 Vite 开发服务器 |
| `npm run build` | 构建前端资源 |
| `npm run electron:dev` | 开发模式运行 Electron |
| `npm run electron:build` | 打包应用(自动递增补丁版本) |
| `npm run electron:build:minor` | 打包应用(递增次版本) |
| `npm run electron:build:major` | 打包应用(递增主版本) |
| `npm run version:patch` | 只递增补丁版本号 |
| `npm run version:minor` | 只递增次版本号 |
| `npm run version:major` | 只递增主版本号 |
| `npm run icons` | 生成应用图标 |
| Windows | `%APPDATA%\easysql\connections.json` |
| macOS | `~/Library/Application Support/easysql/connections.json` |
| Linux | `~/.config/easysql/connections.json` |
## 📋 版本号管理
项目使用语义化版本号 (SemVer)`主版本.次版本.补丁版本`
## 📦 构建命令
```bash
# 递增补丁版本 2.0.0 -> 2.0.1
npm run version:patch
# 开发模式
npm run electron:dev
# 递增次版本 2.0.0 -> 2.1.0
npm run version:minor
# 构建(自动递增补丁版本)
npm run electron:build
# 递增主版本 2.0.0 -> 3.0.0
npm run version:major
# 构建(递增次版本)
npm run electron:build:minor
# 构建时自动递增版本号
npm run electron:build # patch
npm run electron:build:minor # minor
npm run electron:build:major # major
# 构建(递增主版本)
npm run electron:build:major
```
## 🤝 贡献
@ -198,10 +174,14 @@ npm run electron:build:major # major
## 📄 License
MIT
[MIT](LICENSE)
---
<div align="center">
Made with ❤️ using Electron + React + Node.js
Made with ❤️ by EasySQL Team
**[⬆ 返回顶部](#-easysql)**
</div>