feat: #222 support sql run feature

[Cythia828]

功能

#222 在 monaco-sql-languages 中新增可插拔的 SQL 语句级 gutter 运行按钮，含语句拆分、主题样式、只读/dispose 处理

验证截图

变更描述

功能概述

为 Monaco SQL 编辑器新增 「按语句运行」 能力：在每条 SQL 语句的首个可执行行前显示 gutter 运行图标（绿色三角），点击后通过回调把该语句交给业务侧执行。

---

核心新增模块 src/runStatementButton/

1. createRunStatementButton()（index.ts）

主入口，负责：

• 在 glyph margin 渲染运行图标（Monaco decoration）
• 监听内容变化（200ms debounce）、model 切换、readOnly 配置变化并刷新图标
• 点击 gutter 图标触发 onRun(context)
• 返回 { refresh, dispose } 控制器

可配置项包括：languageId、onRun、自定义 getStatementRanges、shouldShowRunButton、preprocessCode、主题色、hover 文案等。

健壮性处理：

• refreshRequestId + disposed 防异步竞态
• 只读编辑器不显示图标、不响应点击
• onRun 异步错误 catch 并打日志
• 同一行多条语句冲突时 console.warn
• dispose() 时取消 debounce、清理 decoration 和事件

2. SQL 语句拆分（statementRanges.ts）

拆分策略：

1. 优先用 dt-sql-parser 的 splitSQLByStatement（按 languageId 选 parser）
2. 失败或无 parser 时 fallback 到分号拆分（识别引号内分号）
3. 计算 executableLineNumber：跳过 leading 空白、-- 行注释、多行/行内 /* */ 块注释

导出工具：

• getStatementRangesByLanguage() — 内置拆分
• normalizeStatementRange(s) — custom resolver 结果归一化
• findFirstExecutableLine() — 找首个可执行行

3. 类型定义（types.ts）

• StatementRange：executableLineNumber（图标行）、text、startLineNumber 等
• RunStatementContext：点击回调上下文（statement + editor + model）
• RunStatementButtonOptions / RunStatementButtonController

4. 样式（styles.ts）

• CSS 三角形图标（::before）
• 适配 vs-dark / vs / hc-black / hc-light
• injectRunStatementButtonStyles() 按 className 注入/更新 style 标签

---

其它改动

文件	变更
src/main.ts	导出 runStatementButton 模块
src/common/utils.ts	debounce 增加 .cancel()，供 dispose 取消 pending refresh
test/all.js	测试 glob 纳入 runStatementButton/*.test.js
website/src/App.tsx	demo 接入运行按钮；Map 管理 controller；app unmount 时 dispose
README.md / README-zh_CN.md	新增「Run Statement Button / 运行语句按钮」章节与使用说明

预览地址

https://cythia828.github.io/monaco-sql-languages/

[jin-sir]

感觉放这个库上有点不太好，和这个库的定位有点不搭，感觉更应该放到dt-react-monaco-editor这个库中去支持，其中运行这个icon可以支持传入自定义

[Cythia828]

感觉放这个库上有点不太好，和这个库的定位有点不搭，感觉更应该放到dt-react-monaco-editor这个库中去支持，其中运行这个icon可以支持传入自定义

你提的这个点有点道理，但是思考了一下，我们运行这个功能要依赖SQL的切分能力、准确的识别哪部分是一句完整的SQL语句，如果在dt-react-monaco-editor 中去集成，那么势必要依赖dt-sql-parser，让他俩再次耦合，那么这跟我们当初将其拆分出来只做react编辑器的初衷相悖了。而放进monaco-sql-languages里面其实只有一点比较不合理，就是这个功能肉眼上跟language没有强关联性，但是事实上每种language的语法不同，那么对SQL的语句切割结果可能也会不一样，所以我理解放到monaco-sql-languages里去集成应该是目前的架构最合理的。