SuperAPI AI 工具集

yakit-ui-binding

编程与开发

查看项目

更新于 10-16 02:12

技能介绍

用途

本技能面向在 Yakit 引擎中编写 yak 脚本(插件)的开发者,讲清 yak 脚本与 Yakit 前端界面之间的完整交互链路:脚本里调用的 yakit.* 库函数如何把结构化消息推送到前端,并最终渲染成日志面板、进度条、表格、图表、风险列表、网站树等 UI 组件。当写插件时想“让界面显示 X”,可以从这里查对应的输出函数。

核心机制

yak 脚本不是孤立的命令行程序。在 Yakit 引擎中运行时,yakit.* 函数并不直接操作 DOM,而是构造 YakitLog / YakitProgress / YakitFeature 等结构体,通过 YakitClient.send() 发出。send 有两种模式:

  • VirtualYakitClient(命令行 yak xxx.yak):send 回调把 ExecResult 打印到 stdout(log.Info)。
  • gRPC YakitClient(Yakit 引擎环境):send 把 ExecResult 通过 gRPC 双向流推到前端。

引擎到前端的每条消息都是 ExecResult{IsMessage: true, Message: JSON},其中 Message 是 YakitMessage 的 JSON 序列化。YakitMessage 含 Type("log" / "progress" / "status-card")与 Content(YakitLog / YakitProgress / YakitStatusCard)。YakitLog 含 Level、Data、Timestamp 字段。

前端 useHoldGRPCStream 解析 YakitMessage JSON,按 type 与 logData.level 路由到不同 UI 组件:progress 走进度条;log 且 level 为 feature-status-card-data 走状态卡片;json-feature 启用表格/网站树/文本标签页;feature-table-data 写表格行数据;feature-text-data 写文本标签页数据;json-risk 走风险列表;其余 log 进入日志面板。

主要能力(UI 输出函数速查)

日志输出(日志面板):yakit.Info / Warn / Error 支持 printf 格式化;yakit.Success / Debug / Text / Code / Markdown 不做 printf,需先拼好字符串;yakit.Report(id) 按 ID 引用报告。

进度条:yakit.SetProgress(f) 主进度条(f 为 0.0~1.0);yakit.SetProgressEx(id, f) 指定 id 的进度条,可同时维护多条。

状态卡片:yakit.StatusCard(id, data, tags...) 相同 id 原地更新,tags 用于分组。

静态表格(一次性输出):yakit.NewTable(head...) 创建表格对象,table.Append(row...) 追加行,yakit.Output(table) 渲染。适合收集完再统一展示。

动态表格(实时增量更新):yakit.EnableTable(name, columns) 声明动态表格,yakit.TableData(name, data) 向已声明表格写一行,data 是 map,键对应列名,可含 "uuid" 控制行标识;相同 uuid 再次写入可更新同一行。

图表:yakit.NewLineGraph / NewBarGraph / NewPieGraph / NewWordCloud 分别创建折线图、柱状图、饼图、词云,graph.Add(key, value) 添加数据点,yakit.Output(graph) 渲染。四种构造器签名一致。

网站树:yakit.EnableWebsiteTrees(targets),targets 为逗号分隔的目标。

文本标签页:yakit.EnableText(tabName) 声明,yakit.TextTabData(tabName, data) 追加文本。

DOT 图标签页:yakit.EnableDotGraphTab(tabName) 声明,yakit.OutputDotGraph(tabName, dotData) 输出 Graphviz DOT 字符串。

统一输出通道:yakit.Output(obj) 按对象类型自动选择输出通道——Table 走 json-table,Graph 走 json-graph,schema.Risk 走 json-risk,fp.MatchResult 走 fingerprint,YakitFixedTableData 走 feature-table-data,YakitStatusCard 走 feature-status-card-data 等。可把扫描器原生结果对象直接 Output 出去。

风险与文件:risk.NewRisk(...) 输出风险列表,yakit.NewHTTPFlowRisk(...) 输出带请求/响应的 HTTP 流量风险,yakit.File(path, desc...) 输出文件卡片,yakit.FileReadAction(...) 等系列记录文件操作。

流式输出:yakit.Stream(streamType, streamId, reader) 逐字符读取 reader 并推送。

使用方式

在 yak 脚本中直接调用上述 yakit.* 函数即可。示例(输出多种 UI 组件的插件)演示了进度条、状态卡片、动态表格、静态表格、柱状图、Markdown 报告的组合用法:先 yakit.SetProgress(0),再 yakit.StatusCard 设置指标,yakit.EnableTable 声明动态表格,循环中 yakit.TableData 写行并更新进度与卡片,最后用 yakit.NewTable 汇总、yakit.NewBarGraph 画图、yakit.Markdown 输出报告。

引擎启动脚本前,通过 SetEngineClient 把 YakitClient 实例注入为脚本的 yakit 全局变量;GetExtYakitLibByClient(client) 返回的 map 中每个 key 就是脚本可调用的 yakit.xxx 函数名。因此同一脚本在不同 client 下运行:gRPC client 输出到前端 UI,VirtualYakitClient 输出到 stdout,空 client 输出被丢弃。

适用场景

适用于编写 yak 原生插件、右键 codec 插件等需要在 Yakit 界面中实时展示扫描进度、结果表格、图表、风险列表的场景。也适用于“先在命令行自测逻辑,再粘回 Yakit 使用”的调试闭环:含 yakit.* 调用的脚本在命令行下不会崩溃,所有输出退化为日志打印。

限制与注意事项

yakit.Info 含 % 时需转义或使用占位符,如 yakit.Info("progress: 50%%") 或 yakit.Info("%s", "progress: 50%")。yakit.Success 不能当 printf 用,需先 sprintf。动态表格 TableData 前必须先 EnableTable 声明。表格 data 中含嵌套对象/数组会被前端过滤,需展平为基本类型。状态卡片 id 应固定以实现原地更新。yakit.* 本身并发安全,但应避免在 hook 里大量调用影响性能。

前端 useHoldGRPCStream 定时(默认 500ms)把缓冲区快照到 React state 触发重渲染。

验证

示例文件 examples/ui-output-tour.yak 演示日志/进度条/状态卡片/静态表格/动态表格/柱状图/Markdown 全链路,可用 yak <file> 自测。命令行运行时 yakit.* 走 VirtualYakitClient,输出退化为 stdout 日志;在 Yakit 中运行同一脚本,各 UI 组件实时展示。合格标准:10 秒内完成、无 panic、log 全英文、末尾出现 self test passed。