Add EasySQL product to the site; update navigation and comparison sections. Enhance styles for EasySQL with new color scheme and responsive design elements.

README-easysql.md

@@ -0,0 +1,187 @@
+# 🗄️ EasySQL
+
+<div align="center">
+
+![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)
+
+**简洁高效的数据库管理工具**
+
+*轻量 · 高性能 · 跨平台*
+
+[下载](#-快速开始) · [功能](#-特性) · [截图](#-界面预览) · [文档](#-配置说明)
+
+</div>
+
+---
+
+## ✨ 特性
+
+- 🚀 **跨平台支持** - 基于 Electron，完美支持 Windows、macOS、Linux
+- ⚡ **高性能** - 原生数据库驱动，毫秒级响应，虚拟滚动支持大数据量
+- 🎨 **现代化 UI** - 简约清新的浅色主题，圆角设计，舒适的视觉体验
+- 🔌 **多数据库** - 支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis、MariaDB 等
+- 📝 **智能编辑器** - 基于 Monaco Editor，SQL 语法高亮、智能补全
+- 📊 **数据编辑** - 双击单元格直接编辑，支持新增/删除行
+- 🛠️ **表设计器** - Navicat 风格，可视化编辑字段、索引、外键
+- 📤 **导入导出** - 支持 JSON、Navicat NCX 格式连接配置（含密码解密）
+
+## 🗃️ 支持的数据库
+
+<div align="center">
+
+| 数据库 | 状态 | 驱动 |
+|:------:|:----:|:----:|
+| 🐬 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)
+
+## 🚀 快速开始
+
+### 环境要求
+
+- 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)
+
+---
+
+<div align="center">
+
+Made with ❤️ by EasySQL Team
+
+**[⬆ 返回顶部](#️-easysql)**
+
+</div>

easyshell.html

@@ -36,6 +36,7 @@
                 <a href="index.html">首页</a>
                 <a href="phper.html">PHPer</a>
                 <a href="easyshell.html" class="active">EasyShell</a>
+                <a href="easysql.html">EasySQL</a>
                 <a href="https://github.com/ethanfly/easyshell" target="_blank" class="btn btn-nav btn-nav-cyber">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
@@ -316,6 +317,7 @@
                 <div class="footer-links">
                     <a href="index.html">首页</a>
                     <a href="phper.html">PHPer</a>
+                    <a href="easysql.html">EasySQL</a>
                     <a href="https://github.com/ethanfly/easyshell" target="_blank">GitHub</a>
                     <a href="https://github.com/ethanfly/easyshell/issues" target="_blank">反馈问题</a>
                 </div>

easysql.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EasySQL - 简洁高效的跨平台数据库管理工具</title>
+    <meta name="description" content="简洁高效的跨平台数据库管理工具，支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis 等多种数据库">
+    <meta name="keywords" content="数据库, MySQL, PostgreSQL, SQLite, MongoDB, Redis, SQL, 数据库管理, Electron">
+    <link rel="icon" type="image/svg+xml" href="easysql_icon.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body class="easysql-page">
+    <!-- 背景装饰 - 清新简约风格 -->
+    <div class="bg-decoration sql-bg">
+        <div class="gradient-orb orb-1 orb-teal"></div>
+        <div class="gradient-orb orb-2 orb-sky"></div>
+        <div class="gradient-orb orb-3 orb-teal"></div>
+        <div class="sql-pattern"></div>
+        <div class="noise-overlay"></div>
+    </div>
+
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-sql">
+        <div class="container">
+            <a href="index.html" class="logo">
+                <span class="logo-icon">⚡</span>
+                <span class="logo-text">Ethan's DevTools</span>
+            </a>
+            <div class="nav-links">
+                <a href="index.html">首页</a>
+                <a href="phper.html">PHPer</a>
+                <a href="easyshell.html">EasyShell</a>
+                <a href="easysql.html" class="active">EasySQL</a>
+                <a href="https://github.com/nicemoe/easysql" target="_blank" class="btn btn-nav btn-nav-sql">
+                    <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                    </svg>
+                    GitHub
+                </a>
+            </div>
+            <button class="mobile-menu-btn" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero 区域 -->
+    <header class="hero detail-hero sql-hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-badge hero-badge-sql">
+                    <span class="badge-dot badge-dot-sql"></span>
+                    轻量 · 高性能 · 跨平台
+                </div>
+                <h1 class="hero-title sql-title">
+                    <img src="easysql_icon.svg" alt="EasySQL" class="product-logo-img">
+                    <span class="title-line title-sql">EasySQL</span>
+                </h1>
+                <p class="hero-tagline sql-tagline">简洁高效的数据库管理工具</p>
+                <p class="hero-description">
+                    支持 <span class="highlight-sql">MySQL</span> · 
+                    <span class="highlight-sql">PostgreSQL</span> · 
+                    <span class="highlight-sql">SQLite</span> · 
+                    <span class="highlight-sql">MongoDB</span> · 
+                    <span class="highlight-sql">Redis</span> 等多种数据库
+                </p>
+                <div class="hero-actions">
+                    <a href="https://github.com/nicemoe/easysql/releases" target="_blank" class="btn btn-sql btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7 10 12 15 17 10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                        </svg>
+                        下载最新版本
+                    </a>
+                    <a href="https://github.com/nicemoe/easysql" target="_blank" class="btn btn-ghost-sql btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        查看源码
+                    </a>
+                </div>
+                <div class="hero-stats sql-stats">
+                    <div class="stat">
+                        <span class="stat-value stat-value-sql">7+</span>
+                        <span class="stat-label">支持数据库</span>
+                    </div>
+                    <div class="stat-divider stat-divider-sql"></div>
+                    <div class="stat">
+                        <span class="stat-value stat-value-sql">⚡</span>
+                        <span class="stat-label">高性能</span>
+                    </div>
+                    <div class="stat-divider stat-divider-sql"></div>
+                    <div class="stat">
+                        <span class="stat-value stat-value-sql">🎨</span>
+                        <span class="stat-label">现代化 UI</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- 数据库支持 -->
+    <section class="section databases sql-section">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-sql">数据库支持</span>
+                <h2 class="section-title">一个工具<span class="gradient-text-sql">管理所有数据库</span></h2>
+                <p class="section-desc">支持主流关系型和 NoSQL 数据库</p>
+            </div>
+            <div class="databases-grid">
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">🐬</div>
+                    <h3>MySQL</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">mysql2</span>
+                </div>
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">🐘</div>
+                    <h3>PostgreSQL</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">pg</span>
+                </div>
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">💾</div>
+                    <h3>SQLite</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">sql.js</span>
+                </div>
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">📊</div>
+                    <h3>SQL Server</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">mssql</span>
+                </div>
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">🦭</div>
+                    <h3>MariaDB</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">mysql2</span>
+                </div>
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">🍃</div>
+                    <h3>MongoDB</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">mongodb</span>
+                </div>
+                <div class="database-card database-card-sql">
+                    <div class="database-icon">⚡</div>
+                    <h3>Redis</h3>
+                    <p>完全支持</p>
+                    <span class="driver-tag">ioredis</span>
+                </div>
+                <div class="database-card database-card-sql database-card-coming">
+                    <div class="database-icon">🔶</div>
+                    <h3>Oracle</h3>
+                    <p>计划中</p>
+                    <span class="driver-tag driver-tag-coming">即将推出</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 界面预览 -->
+    <section id="screenshots" class="section screenshots sql-section">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-sql">界面预览</span>
+                <h2 class="section-title">简约清新的<span class="gradient-text-sql">浅色主题</span></h2>
+                <p class="section-desc">圆角设计，舒适的视觉体验</p>
+            </div>
+            <div class="screenshot-tabs sql-tabs">
+                <button class="tab-btn tab-btn-sql active" data-tab="index">🏠 主页</button>
+                <button class="tab-btn tab-btn-sql" data-tab="table">📋 数据浏览</button>
+                <button class="tab-btn tab-btn-sql" data-tab="query">📝 SQL 查询</button>
+                <button class="tab-btn tab-btn-sql" data-tab="edit">🛠️ 表设计器</button>
+            </div>
+            <div class="screenshot-container">
+                <div class="screenshot-frame sql-frame">
+                    <div class="screenshot-window-bar sql-window-bar">
+                        <div class="window-buttons">
+                            <span></span><span></span><span></span>
+                        </div>
+                        <span class="window-title">EasySQL</span>
+                    </div>
+                    <div class="screenshot-wrapper">
+                        <img src="docs-easysql/index.png" alt="主页" class="screenshot-img active" data-tab="index">
+                        <img src="docs-easysql/table.png" alt="数据浏览" class="screenshot-img" data-tab="table">
+                        <img src="docs-easysql/query.png" alt="SQL 查询" class="screenshot-img" data-tab="query">
+                        <img src="docs-easysql/edit.png" alt="表设计器" class="screenshot-img" data-tab="edit">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 功能特性 -->
+    <section id="features" class="section features sql-features">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-sql">功能特性</span>
+                <h2 class="section-title">专业功能<br><span class="gradient-text-sql">简单易用</span></h2>
+                <p class="section-desc">为数据库管理而生的专业工具</p>
+            </div>
+            <div class="features-grid sql-grid-features">
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">🚀</div>
+                    <h3>跨平台支持</h3>
+                    <p>基于 Electron，完美支持 Windows、macOS、Linux</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">⚡</div>
+                    <h3>高性能</h3>
+                    <p>原生数据库驱动，毫秒级响应，虚拟滚动支持大数据量</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">🎨</div>
+                    <h3>现代化 UI</h3>
+                    <p>简约清新的浅色主题，圆角设计，舒适的视觉体验</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">📝</div>
+                    <h3>智能编辑器</h3>
+                    <p>基于 Monaco Editor，SQL 语法高亮、智能补全</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">📊</div>
+                    <h3>数据编辑</h3>
+                    <p>双击单元格直接编辑，支持新增/删除行</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">🛠️</div>
+                    <h3>表设计器</h3>
+                    <p>Navicat 风格，可视化编辑字段、索引、外键</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">📤</div>
+                    <h3>导入导出</h3>
+                    <p>支持 JSON、Navicat NCX 格式连接配置</p>
+                </div>
+                <div class="feature-card feature-card-sql">
+                    <div class="feature-icon">🔌</div>
+                    <h3>多数据库</h3>
+                    <p>一个工具支持 7+ 种主流数据库</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 快捷键 -->
+    <section class="section shortcuts sql-section">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-sql">快捷键</span>
+                <h2 class="section-title">键盘<span class="gradient-text-sql">快捷操作</span></h2>
+            </div>
+            <div class="shortcuts-grid shortcuts-grid-sql">
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>Ctrl</kbd> + <kbd>Q</kbd>
+                    <span>新建查询</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>Ctrl</kbd> + <kbd>Enter</kbd>
+                    <span>执行 SQL</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>Ctrl</kbd> + <kbd>S</kbd>
+                    <span>保存修改</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>Ctrl</kbd> + <kbd>O</kbd>
+                    <span>打开 SQL 文件</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>
+                    <span>格式化 SQL</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>Ctrl</kbd> + <kbd>W</kbd>
+                    <span>关闭当前标签</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>双击连接</kbd>
+                    <span>快速连接数据库</span>
+                </div>
+                <div class="shortcut-item shortcut-item-sql">
+                    <kbd>双击单元格</kbd>
+                    <span>编辑单元格数据</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 平台支持 -->
+    <section class="section platforms sql-section">
+        <div class="container">
+            <div class="section-header">
+                <span class="section-tag section-tag-sql">平台支持</span>
+                <h2 class="section-title">一次开发<span class="gradient-text-sql">处处运行</span></h2>
+            </div>
+            <div class="platforms-grid platforms-grid-sql">
+                <div class="platform-card platform-card-sql">
+                    <div class="platform-icon">🪟</div>
+                    <h3>Windows</h3>
+                    <p>Electron 原生应用</p>
+                </div>
+                <div class="platform-card platform-card-sql">
+                    <div class="platform-icon">🍎</div>
+                    <h3>macOS</h3>
+                    <p>Electron 原生应用</p>
+                </div>
+                <div class="platform-card platform-card-sql">
+                    <div class="platform-icon">🐧</div>
+                    <h3>Linux</h3>
+                    <p>Electron 原生应用</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 技术栈 -->
+    <section class="section tech-stack sql-section">
+        <div class="container">
+            <div class="tech-content">
+                <h3>🛠️ 技术栈</h3>
+                <div class="tech-tags sql-tech-tags">
+                    <span class="tech-tag tech-tag-sql">Electron 33</span>
+                    <span class="tech-tag tech-tag-sql">React 18</span>
+                    <span class="tech-tag tech-tag-sql">TypeScript 5</span>
+                    <span class="tech-tag tech-tag-sql">Tailwind CSS 3</span>
+                    <span class="tech-tag tech-tag-sql">Vite 5</span>
+                    <span class="tech-tag tech-tag-sql">Monaco Editor</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA 区域 -->
+    <section class="section cta cta-sql">
+        <div class="container">
+            <div class="cta-content">
+                <h2>准备好管理你的数据库了吗？</h2>
+                <p>下载 EasySQL，开启高效的数据库管理体验</p>
+                <div class="cta-actions">
+                    <a href="https://github.com/nicemoe/easysql/releases" target="_blank" class="btn btn-sql btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7 10 12 15 17 10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                        </svg>
+                        免费下载
+                    </a>
+                    <a href="https://github.com/nicemoe/easysql" target="_blank" class="btn btn-outline-sql btn-lg">
+                        <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        Star on GitHub
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer class="footer footer-sql">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <img src="easysql_icon.svg" alt="EasySQL" class="footer-icon">
+                    <span class="logo-text logo-text-sql">EasySQL</span>
+                </div>
+                <p class="footer-text">Made with ❤️ by EasySQL Team</p>
+                <div class="footer-links">
+                    <a href="index.html">首页</a>
+                    <a href="phper.html">PHPer</a>
+                    <a href="easyshell.html">EasyShell</a>
+                    <a href="https://github.com/nicemoe/easysql" target="_blank">GitHub</a>
+                    <a href="https://github.com/nicemoe/easysql/issues" target="_blank">反馈问题</a>
+                </div>
+                <p class="copyright">© 2024 EasySQL. 基于 MIT 协议开源.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+

easysql_icon.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+  <defs>
+    <linearGradient id="sqlGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#06b6d4"/>
+      <stop offset="100%" style="stop-color:#0891b2"/>
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#06b6d4" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+  <!-- 背景圆角矩形 -->
+  <rect x="8" y="8" width="104" height="104" rx="24" ry="24" fill="url(#sqlGrad)" filter="url(#shadow)"/>
+  <!-- 数据库圆柱体 -->
+  <ellipse cx="60" cy="38" rx="28" ry="10" fill="white" opacity="0.95"/>
+  <rect x="32" y="38" width="56" height="44" fill="white" opacity="0.95"/>
+  <ellipse cx="60" cy="82" rx="28" ry="10" fill="white" opacity="0.95"/>
+  <!-- 中间线条 -->
+  <ellipse cx="60" cy="54" rx="28" ry="10" fill="none" stroke="#06b6d4" stroke-width="2" opacity="0.6"/>
+  <ellipse cx="60" cy="68" rx="28" ry="10" fill="none" stroke="#06b6d4" stroke-width="2" opacity="0.6"/>
+  <!-- 顶部高光 -->
+  <ellipse cx="60" cy="38" rx="22" ry="6" fill="#06b6d4" opacity="0.15"/>
+</svg>
+

index.html

@@ -36,6 +36,7 @@
                 <a href="#products">产品</a>
                 <a href="phper.html">PHPer</a>
                 <a href="easyshell.html">EasyShell</a>
+                <a href="easysql.html">EasySQL</a>
                 <a href="https://github.com/ethanfly" target="_blank" class="btn btn-nav">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                         <path
@@ -113,7 +114,7 @@
         <div class="container">
             <div class="section-header">
                 <span class="section-tag">产品</span>
-                <h2 class="section-title">两款精心打造的<span class="gradient-text">开发者工具</span></h2>
+                <h2 class="section-title">三款精心打造的<span class="gradient-text">开发者工具</span></h2>
                 <p class="section-desc">每一款都专注于解决特定的开发痛点</p>
             </div>
 
@@ -254,6 +255,75 @@
                     </div>
                 </div>
             </div>
+
+            <!-- EasySQL 产品卡片 -->
+            <div class="product-card product-easysql">
+                <div class="product-info">
+                    <div class="product-header">
+                        <img src="easysql_icon.svg" alt="EasySQL" class="product-icon-img">
+                        <div class="product-meta">
+                            <h3 class="product-name">EasySQL</h3>
+                            <span class="product-badge product-badge-sql">跨平台</span>
+                        </div>
+                    </div>
+                    <p class="product-tagline">简洁高效的数据库管理工具</p>
+                    <p class="product-desc">
+                        轻量高性能的数据库管理工具，支持 MySQL、PostgreSQL、SQLite、SQL Server、MongoDB、Redis 等多种数据库。
+                        现代化浅色主题 UI，智能 SQL 编辑器，Navicat 风格表设计器。
+                    </p>
+                    <div class="product-features">
+                        <div class="feature-item">
+                            <span class="feature-icon">🗃️</span>
+                            <span>多数据库支持</span>
+                        </div>
+                        <div class="feature-item">
+                            <span class="feature-icon">📝</span>
+                            <span>智能 SQL 编辑器</span>
+                        </div>
+                        <div class="feature-item">
+                            <span class="feature-icon">🛠️</span>
+                            <span>表设计器</span>
+                        </div>
+                        <div class="feature-item">
+                            <span class="feature-icon">⚡</span>
+                            <span>高性能</span>
+                        </div>
+                    </div>
+                    <div class="product-tech">
+                        <span class="tech-item">React</span>
+                        <span class="tech-item">Electron</span>
+                        <span class="tech-item">TypeScript</span>
+                    </div>
+                    <div class="product-actions">
+                        <a href="easysql.html" class="btn btn-sql">
+                            了解更多
+                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7" />
+                            </svg>
+                        </a>
+                        <a href="https://github.com/nicemoe/easysql/releases" target="_blank"
+                            class="btn btn-outline-sql">
+                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                                <polyline points="7 10 12 15 17 10" />
+                                <line x1="12" y1="15" x2="12" y2="3" />
+                            </svg>
+                            下载
+                        </a>
+                    </div>
+                </div>
+                <div class="product-preview">
+                    <div class="preview-window preview-sql">
+                        <div class="window-header">
+                            <div class="window-dots">
+                                <span></span><span></span><span></span>
+                            </div>
+                            <span class="window-title">EasySQL</span>
+                        </div>
+                        <img src="docs-easysql/index.png" alt="EasySQL 界面" class="preview-img">
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
 
@@ -264,8 +334,8 @@
                 <span class="section-tag">对比</span>
                 <h2 class="section-title">选择适合你的<span class="gradient-text">工具</span></h2>
             </div>
-            <div class="comparison-table">
+            <div class="comparison-table comparison-table-3col">
-                <div class="comparison-header">
+                <div class="comparison-header comparison-header-4col">
                     <div class="comparison-cell"></div>
                     <div class="comparison-cell">
                         <img src="phper_icon.svg" alt="PHPer" class="comparison-icon">
@@ -275,31 +345,40 @@
                         <img src="easyshell_icon.svg" alt="EasyShell" class="comparison-icon">
                         <span>EasyShell</span>
                     </div>
+                    <div class="comparison-cell">
+                        <img src="easysql_icon.svg" alt="EasySQL" class="comparison-icon">
+                        <span>EasySQL</span>
                     </div>
-                <div class="comparison-row">
+                </div>
+                <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">主要用途</div>
                     <div class="comparison-cell">本地开发环境管理</div>
                     <div class="comparison-cell">远程服务器管理</div>
+                    <div class="comparison-cell">数据库管理</div>
                 </div>
-                <div class="comparison-row">
+                <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">支持平台</div>
                     <div class="comparison-cell">Windows</div>
                     <div class="comparison-cell">Win/Mac/Linux/Android</div>
+                    <div class="comparison-cell">Win/Mac/Linux</div>
                 </div>
-                <div class="comparison-row">
+                <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">UI 风格</div>
                     <div class="comparison-cell">现代简约</div>
                     <div class="comparison-cell">赛博朋克</div>
+                    <div class="comparison-cell">清新浅色</div>
                 </div>
-                <div class="comparison-row">
+                <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">技术栈</div>
                     <div class="comparison-cell">Vue + Electron</div>
                     <div class="comparison-cell">React + Electron/Capacitor</div>
+                    <div class="comparison-cell">React + Electron</div>
                 </div>
-                <div class="comparison-row">
+                <div class="comparison-row comparison-row-4col">
                     <div class="comparison-cell">适用场景</div>
                     <div class="comparison-cell">PHP/Web 开发者</div>
                     <div class="comparison-cell">运维/全栈开发者</div>
+                    <div class="comparison-cell">DBA/后端开发者</div>
                 </div>
             </div>
         </div>
@@ -317,6 +396,7 @@
                 <div class="footer-links">
                     <a href="phper.html">PHPer</a>
                     <a href="easyshell.html">EasyShell</a>
+                    <a href="easysql.html">EasySQL</a>
                     <a href="https://github.com/ethanfly" target="_blank">GitHub</a>
                 </div>
                 <p class="copyright">© 2024 Ethan's DevTools. 基于 MIT 协议开源.</p>

phper.html

@@ -33,6 +33,7 @@
                 <a href="index.html">首页</a>
                 <a href="phper.html" class="active">PHPer</a>
                 <a href="easyshell.html">EasyShell</a>
+                <a href="easysql.html">EasySQL</a>
                 <a href="https://github.com/ethanfly/php-manager" target="_blank" class="btn btn-nav">
                     <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
@@ -404,6 +405,7 @@
                 <div class="footer-links">
                     <a href="index.html">首页</a>
                     <a href="easyshell.html">EasyShell</a>
+                    <a href="easysql.html">EasySQL</a>
                     <a href="https://github.com/ethanfly/php-manager" target="_blank">GitHub</a>
                     <a href="https://github.com/ethanfly/php-manager/issues" target="_blank">反馈问题</a>
                 </div>

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;
+    }
+}