10.扩展资源管理器面板

首先创建一个HTML插件用于测试

对编辑器的资源管理器面板自定义右击菜单

在扩展的contributions 配置中，assets 对象可以用来扩展资源管理器面板。

在扩展的 package.json文件中，通过定义 contributions.assets.menu 字段，即可对资源管理器面板的右击菜单显示事件进行监听，会有对应的追加菜单。

新增一个asset.menu字段如下：

其中：

methods - 菜单事件处理函数（示例中的 on***Menu 系列）所在的脚本相对路径
createMenu - 创建资源菜单显示时触发的事件，有两个触发时机:
- 点击资源管理器面板左上角的 + 按钮
- 资源菜单中的新建菜单项被选中时
dbMenu - 右击资源数据库根节点 assets 时触发的事件
assetMenu - 右击普通资源节点或目录时触发的事件
panelMenu - 右击资源管理面板空白区域时触发的事件

如上，我们需要创建一个脚本用于实现菜单事件处理函数
这里就在入口函数的同级目录创建一个assets-menu.ts脚本，并编写功能实现

import { AssetInfo } from "@cocos/creator-types/editor/packages/asset-db/@types/public";

export function onCreateMenu(assetInfo: AssetInfo) {
    return [
      {
        label: 'i18n:extend-assets-demo.menu.createAsset',
        click() {
          if (!assetInfo) {
            console.log('右击+号准备创建资源');
          } else {
            console.log('右击菜单准备新建资源, 当前目录的详细信息如下:');
            console.log(assetInfo);
          }
        },
      },
    ];
  };
  
  export function onAssetMenu(assetInfo: AssetInfo) {
    return [
      {
        label: 'i18n:extend-assets-demo.menu.assetCommandParent',
        submenu: [
          {
            label: 'i18n:extend-assets-demo.menu.assetCommand1',
            enabled: assetInfo.isDirectory,
            click() {
              console.log('get it');
              console.log(assetInfo);
            },
          },
          {
            label: 'i18n:extend-assets-demo.menu.assetCommand2',
            enabled: !assetInfo.isDirectory,
            click() {
              console.log('yes, you clicked');
              console.log(assetInfo);
            },
          },
        ],
      },
    ];
  };
  export function dbMenu (assetInfo: AssetInfo) {
    return [];
  };
  export function panelMenu (assetInfo: AssetInfo) {
    return [];
  };

注意⚠️，到这里应该发现，所谓“自定义右击菜单”，只是对右击菜单的追加，扩展当前“右击资源（文件）”追加信息实现（消息监听），并没有其他的扩展功能比如自定义创建一个资源、文件什么的。
比如：
createMenu ->在资源管理器中选择创建时会多出一个onCreateMenu的菜单，它会触发返回一些当前选择的文件或目录的信息。
assetMenu ->在选择非“assets”文件的其他资源（文件夹或其他）右键会多出一个onAssetMenu菜单，而且右两个子级菜单：assetCommand1在选择文件夹时高亮（可点击触发事件），assetCommand1在选择其他资源时高亮（可点击触发事件），同样的，返回值是[MenuItem]类型的数据。
备注：https://www.electronjs.org/docs/latest/api/app

保存->编译，检查assets.menu.methods的脚本路径是否正确。
刷新插件。

拖入识别

假设我们做了一个拥有若干资源的扩展包，且有一个面板用于展示这些资源的图标。我们希望实现将面板上的图标拖放到资源窗口时，即可将资源包中的资源拷贝到资源窗口。

在CocosCreator中，通过定义一个 UI 组件，自定义一个拖入类型，并注入到资源管理器面板的识别范围内。后续在编辑器其他面板将含有该自定义类型的元素拖入资源管理器面板时，资源管理器面板便能识别到它，并给自定义类型的注册方（扩展）发送消息，注册方便能执行一个自定义的动作，比如执行新建一组资源。

step1

在插件的 defualt 面板中加入 ui-drag-item UI 组件：
打开默认面板的index.html文件，添加ui组件

<div>
    <h1 id="app"></h1>
    <ui-drag-item
        type="my-defined-asset-type-for-drop"
        additional='{"value":"this additional is dragInfo data."}'
        >
        <ui-label>Drag me to assets panel, and look conosole log.</ui-label>
    </ui-drag-item>
</div>

step2

打开package.json 文件，添加相应的配置

step3

在扩展的 default 面板中加入 dropAsset 方法
打开panel的index.ts

import { readFileSync } from 'fs-extra';
import { join } from 'path';
/**
 * @zh 如果希望兼容 3.3 之前的版本可以使用下方的代码
 * @en You can add the code below if you want compatibility with versions prior to 3.3
 */
// Editor.Panel.define = Editor.Panel.define || function(options: any) { return options }
module.exports = Editor.Panel.define({
    listeners: {
        show() { console.log('show'); },
        hide() { console.log('hide'); },
    },
    template: readFileSync(join(__dirname, '../../../static/template/default/index.html'), 'utf-8'),
    style: readFileSync(join(__dirname, '../../../static/style/default/index.css'), 'utf-8'),
    $: {
        app: '#app',
    },
    methods: {
        hello() {
            if (this.$.app) {
                this.$.app.innerHTML = 'hello';
                console.log('[cocos-panel-html.default]: hello');
            }
        },
        dropAsset(assetInfo: any, dragInfo: any) {
            console.log(Editor.I18n.t('extend-assets-demo.drop.callback'));
            console.log(assetInfo);
            console.log(dragInfo);
          },
    },
    ready() {
        if (this.$.app) {
            this.$.app.innerHTML = 'Hello Cocos.';
        }
    },
    beforeClose() { },
    close() { },
});

关于assetInfo 参数
uuid：string - 拖拽资源时，鼠标释放位置的资源 uuid
type：string - 该资源的类型
isDirectory：boolean - 该资源是否是文件夹

保存->编译->刷新->测试：

posted @ 2025-06-17 13:54 EricShx 阅读(21) 评论(0) 收藏举报

刷新页面返回顶部