bpmn.js左侧Palette默认没有user-task（用户任务）

1.bpmn.js左侧Palette默认没有user-task（用户任务）

做项目时想找个Vue3.x + bpmn-js + element-plus配合后端实现Activiti流程设计器于是去github找到了唯一个契合的案例：
bpmn-vue-activiti基于Vue3.x + Vite + bpmn-js + element-plus + tsx 实现的Activiti流程设计器

可是不知道为什么他左侧Palette没有user-task，因为他是封装过的并且我前端也不是很厉害所以我没发现他是怎么配置的。
看了很多文章都是自定义palette的可我试过css中是可以展示bpmn-icon-user-task图标的，所以我不需要则定义palette只需要将user-task配置到palette。

a.进入node_modules下的
bpmn-js/lib/features/palette/paletteprovider.js
b.在create.task下添加create.user-task

'create.task': createAction(
      'bpmn:Task', 'activity', 'bpmn-icon-task',
      translate('Create Task')
    ),
    'create.user-task': createAction(
      'bpmn:UserTask', 'activity', 'bpmn-icon-user-task',
      translate('Create User Task')
    ),

c.重新编译运行

2. 2024补充

1.首先将node_modules\bpmn-js\lib\features\palette\下的文件复制到项目中

2.将PaletteProvider.js修改为CustomPaletteProvider.js，之后修改文件的内容。

解决依赖问题，只需要将相对路径修改为绝对路径
3.create.task下添加

        'create.user-task': createAction(
            'bpmn:UserTask', 'activity', 'bpmn-icon-user-task',
            translate('Create User Task')
        ),

4.之后修改Provider为自己项目的Provider，即CustomPaletteProvider，整个文件如下：

import PaletteModule from 'diagram-js/lib/features/palette';
import CreateModule from 'diagram-js/lib/features/create';
import SpaceToolModule from 'diagram-js/lib/features/space-tool';
import LassoToolModule from 'diagram-js/lib/features/lasso-tool';
import HandToolModule from 'diagram-js/lib/features/hand-tool';
import GlobalConnectModule from 'diagram-js/lib/features/global-connect';
import translate from 'diagram-js/lib/i18n/translate';

import CustomPaletteProvider from './CustomPaletteProvider';

export default {
    __depends__: [
        PaletteModule,
        CreateModule,
        SpaceToolModule,
        LassoToolModule,
        HandToolModule,
        GlobalConnectModule,
        translate
    ],
    __init__: ['paletteProvider'],
    paletteProvider: ['type', CustomPaletteProvider]
};

5.additionalModules 加载自定义palette

 import './modeler.css';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

import { defineComponent, onMounted } from 'vue';
import createDefaultBpmnXml from '../../bpmn/defaultBpmnXml';
import activitiModdel from '../../bpmn/resources/activiti-moddel.json';
import translate from '../../bpmn/i18n';
import { BpmnStore } from '@/bpmn/store';
import CustomPaletteProvider from '@/components/palette'

export default defineComponent({
    name: 'Modeler',
    setup() {
        const bpmnContext = BpmnStore;
        onMounted(() => {
            bpmnContext.initModeler({
                container: '#modeler-container',
                additionalModules: [
                    //添加翻译
                    { translate: ['value', translate('zh')] }, CustomPaletteProvider,

                ],
                moddleExtensions: {
                    activiti: activitiModdel,
                },
            });
            const defaultProcessIdAndName = '1';
            bpmnContext
                .importXML(createDefaultBpmnXml(defaultProcessIdAndName, defaultProcessIdAndName))
                .then((result: Array<string>) => {
                    if (result.length) {
                        console.warn('importSuccess warnings', result);
                    }
                })
                .catch((err: any) => {
                    console.warn('importFail errors ', err);
                });
        });

        return () => <div id="modeler-container" />;
    },
});