免费高效的 SQL 在线格式化与美化工具。支持 MySQL、PostgreSQL、Oracle、SQLite 等各大数据库方言，提供关键字大小写转换、缩进排版及单行压缩。100% 浏览器纯前端运行，安全无数据泄露风险。
<!-- Case -->
<div class="flex items-center space-x-1.5">
<label for="sql-case" class="font-medium text-slate-700 dark:text-slate-300">关键字:</label>
<select id="sql-case" class="bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg px-2.5 py-1 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-500">
<option value="upper" selected>全大写 (UPPERCASE)</option>
<option value="lower">全小写 (lowercase)</option>
<option value="preserve">保持原样</option>
</select>
</div>
<!-- Indent -->
<div class="flex items-center space-x-1.5">
<label for="sql-indent" class="font-medium text-slate-700 dark:text-slate-300">缩进:</label>
<select id="sql-indent" class="bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg px-2.5 py-1 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-500">
<option value="2" selected>2 个空格</option>
<option value="4">4 个空格</option>
<option value="tab">制表符 (Tab)</option>
</select>
</div>
</div>
<!-- Actions -->
<div class="flex items-center space-x-2">
<button id="btn-load-sample" class="px-3 py-1 rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors font-medium cursor-pointer">
加载示例
</button>
<button id="btn-minify" class="px-3 py-1 rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors font-medium cursor-pointer">
压缩为单行
</button>
<button id="btn-clear" class="px-3 py-1 rounded-lg text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer">
清空
</button>
<button id="btn-format" class="px-4 py-1.5 bg-sky-600 hover:bg-sky-500 text-white rounded-lg font-bold shadow-sm transition-all cursor-pointer flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
格式化 (Ctrl+Enter)
</button>
</div>
<!-- Output Pane -->
<div class="flex flex-col h-full bg-white dark:bg-slate-900">
<div class="px-4 py-2 border-b border-slate-100 dark:border-slate-800 text-xs font-semibold text-slate-500 flex justify-between items-center">
<span>格式化美化结果</span>
<div class="flex items-center space-x-3">
<span id="output-stats" class="text-emerald-600 dark:text-emerald-400 font-normal">就绪</span>
<button id="btn-copy-output" class="px-2 py-0.5 rounded border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 font-medium transition-colors cursor-pointer flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
</svg>
<span id="copy-text">复制结果</span>
</button>
</div>
</div>
<div class="relative flex-1">
<textarea id="sql-output" readonly spellcheck="false" placeholder="格式化后的优美代码将展示在此处..." class="w-full h-full min-h-[380px] p-4 font-mono text-xs sm:text-sm bg-slate-50/50 dark:bg-slate-950/40 border-0 focus:outline-none text-slate-800 dark:text-slate-100 resize-y leading-relaxed"></textarea>
</div>
</div>
在团队协同开发或日常排查线上故障时，开发者经常从应用程序日志（Log）、性能分析工具（如 APM、慢查询日志）或 ORM 框架中抓取到成团混杂、毫无换行与缩进的“面条式”单行 SQL 代码。 这种未经格式化的 SQL 不仅难以肉眼审查，极易掩盖语法错误，还会显著增加慢查询排查与 Code Review 的心智负担。
SELECT、FROM、WHERE、GROUP BY、HAVING、ORDER BY、JOIN 等主子句自动分行对齐；AND、OR 等逻辑连接词自动缩进放置于行首，逻辑层次一目了然；-- 和 /* */）内容；SELECT、UPDATE、INNER JOIN）全部大写，而表名、列名保持小写或业务原有命名，形成鲜明的视觉反差；JOIN 后紧跟 ON 过滤条件，避免与 WHERE 条件混淆。