跳至主要內容

Ribbon 菜单

大约 2 分钟

Ribbon 菜单

Ribbon 是 WebCAD 的主要工具栏，支持通过插件扩展。

RibbonConfig 结构

interface RibbonConfig {
  tabs: RibbonTabConfig[];
}

interface RibbonTabConfig {
  id: string;           // 标签ID
  label: string;        // 显示名称
  groups: RibbonGroupConfig[];
}

interface RibbonGroupConfig {
  id: string;           // 组ID
  label: string;        // 组名称
  primaryButtons: RibbonButtonConfig[];   // 主要按钮
  moreButtons?: RibbonButtonConfig[];     // 更多按钮
}

interface RibbonButtonConfig {
  cmd: string;          // 命令名
  label: string;        // 按钮文本
  icon?: string;        // 图标ID
  tooltip?: string;     // 提示文本
  enabled?: boolean;    // 是否启用
  visible?: boolean;    // 是否显示
}

通过插件扩展 Ribbon

添加按钮到现有组

import type { PluginContext, RibbonTabConfig, RibbonGroupConfig } from 'vjcad';

async onActivate(context: PluginContext): Promise<void> {
  // 添加按钮到现有组
  context.addRibbonButton('home', 'draw', {
    cmd: 'MYCMD',
    label: '我的命令',
    icon: 'my-icon',
    tooltip: '这是我的命令'
  }, 'primary');  // 或 'more'
}

添加组到现有标签

// 添加整组到现有标签
context.addRibbonGroup('home', {
  id: 'my-group',
  label: '我的工具',
  primaryButtons: [
    { cmd: 'MYCMD1', label: '命令1' },
    { cmd: 'MYCMD2', label: '命令2' }
  ],
  moreButtons: [
    { cmd: 'MYCMD3', label: '命令3' }
  ]
});

添加新标签页

// 添加整个标签页
const newTab: RibbonTabConfig = {
  id: 'my-tab',
  label: '我的插件',
  groups: [
    {
      id: 'tools-1',
      label: '工具组1',
      primaryButtons: [
        { cmd: 'TOOL1', label: '工具1' },
        { cmd: 'TOOL2', label: '工具2' }
      ]
    },
    {
      id: 'tools-2',
      label: '工具组2',
      primaryButtons: [
        { cmd: 'TOOL3', label: '工具3' }
      ]
    }
  ]
};
context.addRibbonTab(newTab, 'home');  // 在home标签后插入

移除 UI 元素

async onDeactivate(context: PluginContext): Promise<void> {
  // 移除时顺序相反
  context.removeRibbonTab('my-tab');
  context.removeRibbonGroup('home', 'my-group');
  context.removeRibbonButton('home', 'draw', 'MYCMD');
}

直接操作 RibbonConfigManager

RibbonConfigManager 提供静态方法来管理 Ribbon 配置：

import { RibbonConfigManager } from 'vjcad';

// 获取当前配置
const config = RibbonConfigManager.getConfig();

// 修改配置（直接操作配置对象）
config.tabs.push({
    id: 'my-tab',
    label: '自定义',
    groups: [...]
});

// 刷新 UI（通知 RibbonBar 重新渲染）
RibbonConfigManager.refresh();

RibbonConfigManager API

方法说明
getConfig()获取当前 Ribbon 配置
setConfig(config)设置 Ribbon 配置（合并）
refresh()刷新 UI，使配置变更生效
loadConfigFromJSON(url)从 JSON URL 加载配置
resetToDefault()重置为默认配置

默认标签页

WebCAD 默认包含以下标签页：

ID名称说明
default默认常用绘图、修改、编辑等工具
tools工具组、清理、特性、图像、测量等
plugins插件插件管理
recent最近命令动态显示最近执行的命令

按钮类型

primaryButtons

主要按钮，直接显示在 Ribbon 上。

moreButtons

更多按钮，显示在展开菜单中。

动态启用/禁用

// 根据条件动态设置按钮状态
const button: RibbonButtonConfig = {
  cmd: 'MYCMD',
  label: '我的命令',
  enabled: someCondition,  // 动态启用
  visible: anotherCondition  // 动态显示
};

下一步