diff --git a/README-easysql.md b/README-easysql.md new file mode 100644 index 0000000..7b97c0a --- /dev/null +++ b/README-easysql.md @@ -0,0 +1,187 @@ +# 🗄️ EasySQL + +
+ +![EasySQL](https://img.shields.io/badge/EasySQL-v2.0-06b6d4?style=for-the-badge) +![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) +![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge) + +**简洁高效的数据库管理工具** + +*轻量 · 高性能 · 跨平台* + +[下载](#-快速开始) · [功能](#-特性) · [截图](#-界面预览) · [文档](#-配置说明) + +
+ +--- + +## ✨ 特性 + +- 🚀 **跨平台支持** - 基于 Electron，完美支持 Windows、macOS、Linux +- ⚡ **高性能** - 原生数据库驱动，毫秒级响应，虚拟滚动支持大数据量 +- 🎨 **现代化 UI** - 简约清新的浅色主题，圆角设计，舒适的视觉体验 +- 🔌 **多数据库** - 支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis、MariaDB 等 +- 📝 **智能编辑器** - 基于 Monaco Editor，SQL 语法高亮、智能补全 +- 📊 **数据编辑** - 双击单元格直接编辑，支持新增/删除行 +- 🛠️ **表设计器** - Navicat 风格，可视化编辑字段、索引、外键 +- 📤 **导入导出** - 支持 JSON、Navicat NCX 格式连接配置（含密码解密） + +## 🗃️ 支持的数据库 + +
+ +| 数据库 | 状态 | 驱动 | +|:------:|:----:|:----:| +| 🐬 MySQL | ✅ 完全支持 | mysql2 | +| 🐘 PostgreSQL | ✅ 完全支持 | pg | +| 💾 SQLite | ✅ 完全支持 | sql.js | +| 📊 SQL Server | ✅ 完全支持 | mssql | +| 🦭 MariaDB | ✅ 完全支持 | mysql2 | +| 🍃 MongoDB | ✅ 完全支持 | mongodb | +| ⚡ Redis | ✅ 完全支持 | ioredis | +| 🔶 Oracle | 🚧 计划中 | - | +| ❄️ Snowflake | 🚧 计划中 | - | + +
+ +## 📸 界面预览 + +### 主页 + +简洁的欢迎界面，展示支持的数据库类型，快速开始查询。 + +![主页](docs/index.png) + +### 数据浏览 + +直观的数据表格视图，支持分页、排序，双击单元格可直接编辑数据。 + +![数据浏览](docs/table.png) + +### SQL 查询 + +强大的 SQL 编辑器，基于 Monaco Editor，支持语法高亮、代码补全、格式化。 + +![SQL 查询](docs/query.png) + +### 表设计器 + +Navicat 风格的表结构设计器，可视化管理字段、索引、外键、表选项。 + +![表设计器](docs/edit.png) + +## 🚀 快速开始 + +### 环境要求 + +- Node.js 18+ +- npm 或 yarn + +### 安装运行 + +```bash +# 克隆项目 +git clone https://github.com/your-repo/easysql.git +cd easysql + +# 安装依赖 +npm install + +# 开发模式运行 +npm run electron:dev + +# 构建应用 +npm run electron:build +``` + +## 🛠️ 技术栈 + +| 类别 | 技术 | +|------|------| +| 运行时 | 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` | 关闭当前标签 | +| `双击连接` | 快速连接数据库 | +| `双击单元格` | 编辑单元格数据 | + +## 📁 项目结构 + +``` +easysql/ +├── electron/ # Electron 主进程 +│ ├── main.js # 主程序入口 +│ └── preload.js # 预加载脚本 +├── src/ # React 前端 +│ ├── components/ # UI 组件 +│ │ ├── Sidebar.tsx # 侧边栏 +│ │ ├── MainContent.tsx # 主内容区 +│ │ ├── SqlEditor.tsx # SQL 编辑器 +│ │ ├── VirtualDataTable.tsx # 虚拟滚动表格 +│ │ ├── TableDesigner.tsx # 表设计器 +│ │ └── ... +│ ├── lib/ # 工具库 +│ └── App.tsx # 应用入口 +├── docs/ # 文档和截图 +└── package.json +``` + +## 🔧 配置说明 + +连接配置自动保存在用户配置目录： + +| 系统 | 路径 | +|------|------| +| Windows | `%APPDATA%\easysql\connections.json` | +| macOS | `~/Library/Application Support/easysql/connections.json` | +| Linux | `~/.config/easysql/connections.json` | + +## 📦 构建命令 + +```bash +# 开发模式 +npm run electron:dev + +# 构建（自动递增补丁版本） +npm run electron:build + +# 构建（递增次版本） +npm run electron:build:minor + +# 构建（递增主版本） +npm run electron:build:major +``` + +## 🤝 贡献 + +欢迎提交 Issue 和 Pull Request！ + +## 📄 License + +[MIT](LICENSE) + +--- + +
+ +Made with ❤️ by EasySQL Team + +**[⬆ 返回顶部](#️-easysql)** + +
diff --git a/docs-easysql/edit.png b/docs-easysql/edit.png new file mode 100644 index 0000000..4e0a18c Binary files /dev/null and b/docs-easysql/edit.png differ diff --git a/docs-easysql/index.png b/docs-easysql/index.png new file mode 100644 index 0000000..0c1993e Binary files /dev/null and b/docs-easysql/index.png differ diff --git a/docs-easysql/query.png b/docs-easysql/query.png new file mode 100644 index 0000000..7c2ff20 Binary files /dev/null and b/docs-easysql/query.png differ diff --git a/docs-easysql/table.png b/docs-easysql/table.png new file mode 100644 index 0000000..6cdca0a Binary files /dev/null and b/docs-easysql/table.png differ diff --git a/easyshell.html b/easyshell.html index 9fbe4ed..de6639d 100644 --- a/easyshell.html +++ b/easyshell.html @@ -36,6 +36,7 @@ 首页 PHPer EasyShell + EasySQL @@ -316,6 +317,7 @@
首页 PHPer + EasySQL GitHub 反馈问题
diff --git a/easysql.html b/easysql.html new file mode 100644 index 0000000..a6fe6cc --- /dev/null +++ b/easysql.html @@ -0,0 +1,396 @@ + + + + + + + EasySQL - 简洁高效的跨平台数据库管理工具 + + + + + + + + + + + +
+
+
+
+
+
+
+ + + + + +
+
+
+
+ + 轻量 · 高性能 · 跨平台 +
+

+ EasySQL + EasySQL +

+

简洁高效的数据库管理工具

+

+ 支持 MySQL · + PostgreSQL · + SQLite · + MongoDB · + Redis 等多种数据库 +

+
+ + + + + + + 下载最新版本 + + + + + + 查看源码 + +
+
+
+ 7+ + 支持数据库 +
+
+
+ ⚡ + 高性能 +
+
+
+ 🎨 + 现代化 UI +
+
+
+
+
+ + +
+
+
+ 数据库支持 +

一个工具管理所有数据库

+

支持主流关系型和 NoSQL 数据库

+
+
+
+
🐬
+

MySQL

+

完全支持

+ mysql2 +
+
+
🐘
+

PostgreSQL

+

完全支持

+ pg +
+
+
💾
+

SQLite

+

完全支持

+ sql.js +
+
+
📊
+

SQL Server

+

完全支持

+ mssql +
+
+
🦭
+

MariaDB

+

完全支持

+ mysql2 +
+
+
🍃
+

MongoDB

+

完全支持

+ mongodb +
+
+
⚡
+

Redis

+

完全支持

+ ioredis +
+
+
🔶
+

Oracle

+

计划中

+ 即将推出 +
+
+
+
+ + +
+
+
+ 界面预览 +

简约清新的浅色主题

+

圆角设计，舒适的视觉体验

+
+
+ + + + +
+
+
+
+
+ +
+ EasySQL +
+
+ 主页 + 数据浏览 + SQL 查询 + 表设计器 +
+
+
+
+
+ + +
+
+
+ 功能特性 +

专业功能
简单易用

+

为数据库管理而生的专业工具

+
+
+
+
🚀
+

跨平台支持

+

基于 Electron，完美支持 Windows、macOS、Linux

+
+
+
⚡
+

高性能

+

原生数据库驱动，毫秒级响应，虚拟滚动支持大数据量

+
+
+
🎨
+

现代化 UI

+

简约清新的浅色主题，圆角设计，舒适的视觉体验

+
+
+
📝
+

智能编辑器

+

基于 Monaco Editor，SQL 语法高亮、智能补全

+
+
+
📊
+

数据编辑

+

双击单元格直接编辑，支持新增/删除行

+
+
+
🛠️
+

表设计器

+

Navicat 风格，可视化编辑字段、索引、外键

+
+
+
📤
+

导入导出

+

支持 JSON、Navicat NCX 格式连接配置

+
+
+
🔌
+

多数据库

+

一个工具支持 7+ 种主流数据库

+
+
+
+
+ + +
+
+
+ 快捷键 +

键盘快捷操作

+
+
+
+ Ctrl + Q + 新建查询 +
+
+ Ctrl + Enter + 执行 SQL +
+
+ Ctrl + S + 保存修改 +
+
+ Ctrl + O + 打开 SQL 文件 +
+
+ Ctrl + Shift + F + 格式化 SQL +
+
+ Ctrl + W + 关闭当前标签 +
+
+ 双击连接 + 快速连接数据库 +
+
+ 双击单元格 + 编辑单元格数据 +
+
+
+
+ + +
+
+
+ 平台支持 +

一次开发处处运行

+
+
+
+
🪟
+

Windows

+

Electron 原生应用

+
+
+
🍎
+

macOS

+

Electron 原生应用

+
+
+
🐧
+

Linux

+

Electron 原生应用

+
+
+
+
+ + +
+
+
+

🛠️ 技术栈

+
+ Electron 33 + React 18 + TypeScript 5 + Tailwind CSS 3 + Vite 5 + Monaco Editor +
+
+
+
+ + +
+
+
+

准备好管理你的数据库了吗？

+

下载 EasySQL，开启高效的数据库管理体验

+
+ + + + + + + 免费下载 + + + + + + Star on GitHub + +
+
+
+
+ + + + + + + + + diff --git a/easysql_icon.svg b/easysql_icon.svg new file mode 100644 index 0000000..5fe0899 --- /dev/null +++ b/easysql_icon.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 0ea457c..188b85e 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@ 产品 PHPer EasyShell + EasySQL
产品 -

两款精心打造的开发者工具

+

三款精心打造的开发者工具

每一款都专注于解决特定的开发痛点

@@ -254,6 +255,75 @@ + + +
+
+
+ EasySQL +
+

EasySQL

+ 跨平台 +
+
+

简洁高效的数据库管理工具

+

+ 轻量高性能的数据库管理工具，支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis 等多种数据库。 + 现代化浅色主题 UI，智能 SQL 编辑器，Navicat 风格表设计器。 +

+
+
+ 🗃️ + 多数据库支持 +
+
+ 📝 + 智能 SQL 编辑器 +
+
+ 🛠️ + 表设计器 +
+
+ ⚡ + 高性能 +
+
+
+ React + Electron + TypeScript +
+
+ + 了解更多 + + + + + + + + + + + 下载 + +
+
+
+
+
+
+ +
+ EasySQL +
+ EasySQL 界面 +
+
+
@@ -264,8 +334,8 @@ 对比

选择适合你的工具

-
-
+
+
PHPer @@ -275,31 +345,40 @@ EasyShell EasyShell
+
+ EasySQL + EasySQL +
-
+
主要用途
本地开发环境管理
远程服务器管理
+
数据库管理
-
+
支持平台
Windows
Win/Mac/Linux/Android
+
Win/Mac/Linux
-
+
UI 风格
现代简约
赛博朋克
+
清新浅色
-
+
技术栈
Vue + Electron
React + Electron/Capacitor
+
React + Electron
-
+
适用场景
PHP/Web 开发者
运维/全栈开发者
+
DBA/后端开发者
@@ -317,6 +396,7 @@
PHPer EasyShell + EasySQL GitHub

© 2024 Ethan's DevTools. 基于 MIT 协议开源.

diff --git a/phper.html b/phper.html index cdfd325..7b7c5bc 100644 --- a/phper.html +++ b/phper.html @@ -33,6 +33,7 @@ 首页 PHPer EasyShell + EasySQL @@ -404,6 +405,7 @@
首页 EasyShell + EasySQL GitHub 反馈问题
diff --git a/style.css b/style.css index 45324e9..90862dd 100644 --- a/style.css +++ b/style.css @@ -31,10 +31,17 @@ --color-cyber-purple: #8b5cf6; --color-cyber-pink: #ec4899; + /* EasySQL 主色 - 清新青蓝 */ + --color-sql-teal: #06b6d4; + --color-sql-teal-light: #22d3ee; + --color-sql-teal-dark: #0891b2; + --color-sql-sky: #0ea5e9; + /* 渐变 */ --gradient-green: linear-gradient(135deg, var(--color-green) 0%, var(--color-cyan) 100%); --gradient-cyber: linear-gradient(135deg, var(--color-cyber-cyan) 0%, var(--color-cyber-magenta) 100%); --gradient-purple: linear-gradient(135deg, var(--color-cyber-purple) 0%, var(--color-cyber-pink) 100%); + --gradient-sql: linear-gradient(135deg, var(--color-sql-teal) 0%, var(--color-sql-sky) 100%); /* 字体 */ --font-display: 'Outfit', sans-serif; @@ -917,6 +924,17 @@ code { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 212, 255, 0.1); } +.preview-sql { + border-color: rgba(6, 182, 212, 0.3); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(6, 182, 212, 0.1); +} + +.product-badge-sql { + color: var(--color-sql-teal); + background: rgba(6, 182, 212, 0.1); + border-color: rgba(6, 182, 212, 0.3); +} + .window-header { display: flex; align-items: center; @@ -978,6 +996,15 @@ code { gap: 20px; } +.comparison-header-4col, +.comparison-row-4col { + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.comparison-table-3col { + max-width: 1100px; +} + .comparison-header { background: var(--color-bg-tertiary); padding: 20px 24px; @@ -1723,6 +1750,11 @@ code { gap: 8px; } + .comparison-header-4col, + .comparison-row-4col { + grid-template-columns: 1fr; + } + .comparison-header { display: none; } @@ -1918,3 +1950,334 @@ code { opacity: 1; transform: translateY(0); } + +/* ============================================ + EasySQL 专用样式 - 清新青蓝主题 + ============================================ */ + +/* 背景装饰 */ +.orb-teal { background: var(--color-sql-teal); opacity: 0.2; } +.orb-sky { background: var(--color-sql-sky); opacity: 0.15; } + +.sql-pattern { + position: absolute; + inset: 0; + background-image: + radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.08) 0%, transparent 50%); +} + +/* 导航栏 */ +.navbar-sql { + border-bottom-color: rgba(6, 182, 212, 0.2); +} + +.btn-nav-sql:hover { + border-color: var(--color-sql-teal); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); +} + +/* Section 标签 */ +.section-tag-sql { + color: var(--color-sql-teal); + background: rgba(6, 182, 212, 0.1); + border-color: rgba(6, 182, 212, 0.3); +} + +/* 渐变文字 */ +.gradient-text-sql { + background: var(--gradient-sql); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Hero Badge */ +.hero-badge-sql { + color: var(--color-sql-teal); + background: rgba(6, 182, 212, 0.1); + border-color: rgba(6, 182, 212, 0.3); +} + +.badge-dot-sql { + background: var(--color-sql-teal); + box-shadow: 0 0 10px var(--color-sql-teal); +} + +/* Hero 标题 */ +.sql-hero .hero-title { + font-family: var(--font-display); +} + +.title-sql { + background: var(--gradient-sql); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-shadow: none; + filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.3)); +} + +.sql-tagline { + color: var(--color-text-secondary); +} + +.highlight-sql { + color: var(--color-sql-teal); + font-weight: 600; +} + +/* Hero Stats */ +.stat-value-sql { + color: var(--color-sql-teal); + text-shadow: 0 0 20px rgba(6, 182, 212, 0.5); +} + +.stat-divider-sql { + background: rgba(6, 182, 212, 0.3); +} + +/* 按钮 */ +.btn-sql { + background: var(--gradient-sql); + color: white; + box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3); + position: relative; + overflow: hidden; +} + +.btn-sql::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transform: translateX(-100%); + transition: transform 0.5s; +} + +.btn-sql:hover::before { + transform: translateX(100%); +} + +.btn-sql:hover { + transform: translateY(-2px); + box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4), 0 0 60px rgba(6, 182, 212, 0.2); + color: white; +} + +.btn-outline-sql { + background: transparent; + color: var(--color-sql-teal); + border: 1px solid var(--color-sql-teal); +} + +.btn-outline-sql:hover { + background: rgba(6, 182, 212, 0.1); + box-shadow: 0 0 30px rgba(6, 182, 212, 0.2); + color: var(--color-sql-teal); +} + +.btn-ghost-sql { + background: rgba(6, 182, 212, 0.05); + color: var(--color-text); + border: 1px solid rgba(6, 182, 212, 0.3); +} + +.btn-ghost-sql:hover { + background: rgba(6, 182, 212, 0.1); + border-color: var(--color-sql-teal); + color: var(--color-text); +} + +/* 数据库卡片 */ +.databases-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + max-width: 1000px; + margin: 0 auto; +} + +.database-card { + text-align: center; + padding: 32px 24px; + background: var(--color-bg-card); + border: 1px solid var(--color-border); + border-radius: var(--border-radius); + transition: all var(--transition-base); +} + +.database-card-sql:hover { + border-color: var(--color-sql-teal); + transform: translateY(-4px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(6, 182, 212, 0.1); +} + +.database-card-coming { + opacity: 0.6; +} + +.database-card-coming:hover { + opacity: 0.8; +} + +.database-icon { + font-size: 40px; + margin-bottom: 12px; +} + +.database-card h3 { + font-size: 18px; + font-weight: 600; + margin-bottom: 4px; + color: var(--color-text); +} + +.database-card p { + font-size: 13px; + color: var(--color-text-muted); + margin-bottom: 12px; +} + +.driver-tag { + display: inline-block; + font-family: var(--font-mono); + font-size: 11px; + color: var(--color-sql-teal); + background: rgba(6, 182, 212, 0.1); + border: 1px solid rgba(6, 182, 212, 0.3); + padding: 4px 10px; + border-radius: 12px; +} + +.driver-tag-coming { + color: var(--color-text-muted); + background: rgba(255, 255, 255, 0.05); + border-color: var(--color-border); +} + +/* 截图区域 */ +.sql-frame { + border-color: rgba(6, 182, 212, 0.2); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 80px rgba(6, 182, 212, 0.1); +} + +.sql-window-bar { + border-bottom-color: rgba(6, 182, 212, 0.2); +} + +.tab-btn-sql:hover { + border-color: var(--color-sql-teal); +} + +.tab-btn-sql.active { + color: var(--color-sql-teal); + background: rgba(6, 182, 212, 0.1); + border-color: var(--color-sql-teal); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); +} + +/* 功能卡片 */ +.sql-grid-features { + grid-template-columns: repeat(4, 1fr); +} + +.feature-card-sql { + background: rgba(6, 182, 212, 0.02); +} + +.feature-card-sql:hover { + border-color: var(--color-sql-teal); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(6, 182, 212, 0.1); +} + +/* 快捷键 */ +.shortcuts-grid-sql { + grid-template-columns: repeat(4, 1fr); + max-width: 1000px; +} + +.shortcut-item-sql kbd { + color: var(--color-sql-teal); + background: rgba(6, 182, 212, 0.1); + border-color: rgba(6, 182, 212, 0.3); +} + +/* 平台卡片 */ +.platforms-grid-sql { + grid-template-columns: repeat(3, 1fr); + max-width: 700px; +} + +.platform-card-sql:hover { + border-color: var(--color-sql-teal); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(6, 182, 212, 0.1); +} + +/* 技术标签 */ +.tech-tag-sql:hover { + border-color: var(--color-sql-teal); + color: var(--color-sql-teal); + box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); +} + +/* CTA 区域 */ +.cta-sql { + background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%); + border-top: 1px solid rgba(6, 182, 212, 0.2); + border-bottom: 1px solid rgba(6, 182, 212, 0.2); +} + +/* 页脚 */ +.footer-sql { + border-top-color: rgba(6, 182, 212, 0.2); +} + +.footer-sql .footer-links a:hover { + color: var(--color-sql-teal); +} + +.logo-text-sql { + background: var(--gradient-sql); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* 响应式 */ +@media (max-width: 1024px) { + .databases-grid { + grid-template-columns: repeat(2, 1fr); + } + + .sql-grid-features { + grid-template-columns: repeat(2, 1fr); + } + + .shortcuts-grid-sql { + grid-template-columns: repeat(2, 1fr); + } + + .platforms-grid-sql { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 768px) { + .databases-grid { + grid-template-columns: 1fr 1fr; + gap: 16px; + } + + .sql-grid-features { + grid-template-columns: 1fr; + } + + .shortcuts-grid-sql { + grid-template-columns: 1fr; + } + + .platforms-grid-sql { + grid-template-columns: 1fr; + } +}