谏知中文网

仿照 Kibana 的控制台工具做一款浏览器插件，方便日常工作使用，命名为：Kina

界面如下所示：

公司提供了 ES 网关进行查询服务，只要快捷获取 JSON 体再发送 XHR 请求就能获取查询数据，原理很简单。插件的难度主要集中在界面交互上，简单罗列下功能点，如下：

• 鼠标键入能快速定位当前 JSON 体、显示操作按钮（包括：执行、复制、格式化）

• 滚动条上下滑动，操作区能实时定位以保证在可视区域内

• DSL 语法提示功能

• 多 JSON 语法校验
  

其他，如输入区自适应、设置字体、设置模式等较为简单，查询 ACE 编辑器的官方文档即可，戳这里：https://ace.c9.io/#nav=api

foldWidgets 的使用

中文翻译为折叠式，可以理解为用 { 和 } 包裹的父级折叠区域

{
    "index": "wx",
    "statement": {
        "from": 0,
        "size": 20
    },
    "startStamp": 1627047781000,
    "endStamp": 1629726181000
}

{
    "index": "weibo",
    "statement": {
        "from": 0,
        "size": 20
    },
    "startStamp": 1627047781000,
    "endStamp": 1629726181000
}

可以看到它们的foldWidgets值如下所示，行数从 0 开始计

[
    0: "start", 1: "", 2: "start", 3: "", 4: "", 5: "", 6: "", 7: "", 8: "", 9: "",
     
    10: "start", 11: "", 12: "start", 13: "", 14: "", 15: "", 16: "", 17: ""
]

只需要循环 foldWidgets 数组，判断当前鼠标所在行是否在折叠区域的 Range 内就能快速定位出 JSON 体，代码如下所示：

foldWidgetsList.forEach(function (v, k) {
    if (v == 'start') {
        // 计算折叠区域
        var range = editor.session.getFoldWidgetRange(k)
        if (range.start.row <= currentRow && range.end.row >= currentRow) {
            // 判断
            xxx
        }
    }
})

DSL 语法提示

将 ElasticSearch 的常用关键词罗列并用文件组织，配合 ACE 自带的语法提示来模拟 Kibana 控制台交互

更多实现细节请查看：https://github.com/inkime/Kina