397 lines
21 KiB
HTML
397 lines
21 KiB
HTML
<!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/ethanfly/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/ethanfly/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/ethanfly/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/ethanfly/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/ethanfly/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/ethanfly/easysql" target="_blank">GitHub</a>
|
||
<a href="https://github.com/ethanfly/easysql/issues" target="_blank">反馈问题</a>
|
||
</div>
|
||
<p class="copyright">© 2024 EasySQL. 基于 MIT 协议开源.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
|
||
</html>
|
||
|