界面扩展
大约 3 分钟
界面扩展
UI 组件的定制与扩展，包括 Ribbon 菜单、右键菜单、对话框、侧边栏面板、主题等。
在线示例
| 示例 | 描述 | 链接 |
|---|---|---|
| Ribbon 菜单 | addRibbonButton 用法 | 在线演示{target="_blank"} |
| 消息输出 | writeMessage 用法 | 在线演示{target="_blank"} |
| 预览视图组件 | PreviewView 在对话框中预览实体 | 在线演示{target="_blank"} |
| 确认对话框 | showConfirm、showInfo、showWarningConfirm 用法 | 在线演示{target="_blank"} |
| 输入对话框 | showInputDialog、showSelectDialog、showPrompt 用法 | 在线演示{target="_blank"} |
| 右键菜单（添加自定义项） | 在默认菜单中添加自定义项 | 在线演示{target="_blank"} |
| 右键菜单（命令状态定制） | 根据命令状态定制菜单 | 在线演示{target="_blank"} |
| 右键菜单（完全自定义） | 完全自定义菜单（不显示默认项） | 在线演示{target="_blank"} |
| 右键菜单（禁止系统菜单） | 禁止系统右键菜单 | 在线演示{target="_blank"} |
| 主题切换 | THEME_MODE 用法 | 在线演示{target="_blank"} |
| 状态栏 | FuncButtons 和 CoordsBar 用法 | 在线演示{target="_blank"} |
| 主视图配置 | MainViewConfig 用法 | 在线演示{target="_blank"} |
| Viewer 查看模式 | 只显示绘图区域，隐藏菜单工具栏命令行 | 在线演示{target="_blank"} |
| 对话框暂停/恢复 | 在对话框中选择实体、拾取点的用法 | 在线演示{target="_blank"} |
| 对话框暂停/恢复（Vue3） | Vue3 版本的对话框交互 | 在线演示{target="_blank"} |
| 模态对话框基类 | ModalDialogBase 快速创建对话框 | 在线演示{target="_blank"} |
| 非模态面板基类 | ModelessPanelBase 快速创建工具面板 | 在线演示{target="_blank"} |
| 侧边栏面板 | registerSidebarPanel 自定义侧边栏面板 | 在线演示{target="_blank"} |
| 浮动工具栏 | createFloatingToolbar 创建浮动可拖动图标工具栏 | 在线演示{target="_blank"} |
| 菜单栏和工具栏定制 | MenuBarCustomConfig、RibbonCustomConfig 增量/全量定制 | 在线演示{target="_blank"} |
核心 API
Ribbon 菜单
// 添加 Ribbon 按钮
Engine.addRibbonButton({
tab: "绘图", // 选项卡名称
panel: "自定义", // 面板名称
text: "我的命令", // 按钮文字
icon: "icon-custom", // 图标类名
command: "MYCMD" // 关联的命令
});消息输出
// 在命令行输出消息
writeMessage("操作成功");
writeMessage("<br/>换行消息");
// 消息提示框
message.info("提示信息");
message.success("操作成功");
message.warning("警告信息");
message.error("错误信息");对话框
// 确认对话框
const confirmed = await showConfirm("确定要删除吗？");
// 输入对话框
const value = await showInputDialog("请输入名称:", "默认值");
// 选择对话框
const selected = await showSelectDialog("请选择类型:", [
{ label: "类型A", value: "a" },
{ label: "类型B", value: "b" }
]);右键菜单
// 添加自定义菜单项
Engine.contextMenu.addItem({
text: "自定义功能",
icon: "icon-custom",
onClick: () => {
// 处理点击
}
});
// 完全自定义菜单
Engine.contextMenu.setCustomMenu((context) => {
return [
{ text: "菜单项1", onClick: () => {} },
{ text: "菜单项2", onClick: () => {} }
];
});主题切换
// 切换主题
Engine.setTheme('dark'); // 深色主题
Engine.setTheme('light'); // 浅色主题
// 获取当前主题
const theme = Engine.getTheme();菜单栏和 Ribbon 定制
通过 MainView 构造参数定制菜单栏和 Ribbon 工具栏，支持全量替换和增量修改两种模式：
const cadView = new MainView({
// 菜单栏定制
menuBar: {
removeMenus: ['help', 'appearance'],
addMenus: [{
id: 'custom-menu', label: '自定义菜单', after: 'insert',
items: [
{ type: 'command', command: 'MY_CMD' },
{ type: 'separator' },
{ type: 'command', command: 'REGEN' },
]
}],
modifyMenus: {
file: {
removeItems: ['SWITCHWORKSPACE'],
addItems: [{ type: 'command', command: 'MY_CMD', after: 'EXPORTPNG' }]
}
}
},
// Ribbon 定制
ribbon: {
removeTabs: ['recent'],
addTabs: [{
tab: { id: 'custom-tab', label: '自定义', groups: [/*...*/] },
after: 'default'
}],
modifyTabs: {
'default': {
modifyGroups: {
draw: {
addPrimaryButtons: [
{ icon: 'circle', cmd: 'MY_CMD', prompt: '工具提示', after: 'CIRCLE' }
]
}
}
}
}
}
});详细接口说明和完整示例参见 菜单栏与 Ribbon 定制。