Skip to content

界面与状态条接入

插件界面应融入工作台的紧凑操作方式:常用动作直接可见,可选内容按需展开,减少嵌套弹窗和重复操作。

选择界面方式

方式适用场景执行边界
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 哈希;直接改生成文件的内联内容会使哈希失效。

Gamer · Android 游戏自动化工具