审批与人工接管
Approval / Human-in-the-loop
在动作执行前，把决定和后果清晰交给用户。
允许导出这份报告？
确认操作后保留你的决定。
等待你的决定
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'approval',
{
"demo": true
}
);
view.element.addEventListener('ui:decision', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
有明确授权边界，或 Agent 需要用户补充决定。
什么时候不用
普通进度提示不应阻断用户并索要批准。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "允许导出这份报告？" |
description | "确认操作后保留你的决定。" |
approveLabel | "允许导出" |
rejectLabel | "拒绝" |
state | "pending" |
demo | false |
事件
ui:decision
INTERACTION NOTES
交互与可访问性
- 按钮写明动作和后果。
- 决定后保留结果，避免重复提交。
和相似组件的区别
审批改变执行权限；提示框本身不构成后端授权。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验