界面与状态条接入
插件界面应融入工作台的紧凑操作方式:常用动作直接可见,可选内容按需展开,减少嵌套弹窗和重复操作。
选择界面方式
| 方式 | 适用场景 | 执行边界 |
|---|---|---|
| declarative | 简单表单、按钮和参数操作 | 宿主根据清单渲染 |
| iframe | 独立技术栈、需要页面隔离的插件 | 沙盒页面,经受控桥通信 |
| core 宿主模块 | 与主工作台深度集成的可信 UI | 与主页面共享执行环境,需 ui.host 权限 |
官方模块通过 ui/entry.js 提供 SDK 版本和面板。共享依赖清单位于 sdk/ui/host-modules.json,复用宿主的 Vue 与状态,避免另一份 Vue 或互不相通的 store。
宿主模块清单需声明 UI 入口和宿主 UI API 版本。模块只在插件 Running 且获授权时接入;页面内不替换已有编辑实例,更新后保存并刷新。
布局与控件
- 常规控件以 28px 高度为基准,正文约 13px、说明约 12px,保证暗色背景上的对比度。
- 必填参数直接展示,可选参数和返回值通过一致的内联展开方式编辑。
- 密集步骤操作可用图标并提供名称提示;菜单中的操作使用清晰文字。
- 输入控件应有 label、焦点提示、校验反馈;错误尽量就地展示,并能定位到对应字段。
- 保存、运行等相邻按钮保持高度和样式体系一致,避免同一行出现无理由的尺寸差异。
详细尺寸、颜色与交互见界面设计规范。
轻状态反馈
状态条左侧用于 Core 相关操作,右侧用于插件相关操作。插件可以反馈当前资源保存结果、步骤状态、匹配结果或运行错误,并提供复制、详情、跳转等小操作。
不要把运行、停止等主工具栏按钮再放一遍,也不要持续展示与当前操作无关的状态列表。信息应能在窄空间裁切,悬停查看完整内容。
iframe 通过 UI 桥的 status.set 提交声明式状态;复制和详情使用数据描述,不传函数或 HTML。具体消息字段以 iframe SDK 和源码为准。
iframe 安全与调试
保留 sandbox="allow-scripts" 与严格 CSP,通过专属 MessagePort 调用能力。不要为方便换肤增加 allow-same-origin。
修改 SDK 示例的模板、脚本或样式后,执行 node tools/build-ui-sdk.mjs 重新生成自包含页面和 CSP 哈希;直接改生成文件的内联内容会使哈希失效。