# 流程设计器 (BPMN.js + Camunda)

## 📦 依赖说明

本页面集成了完整的 BPMN.js 工作流设计器，支持 Camunda 扩展。

### 必需依赖

```json
{
  "dependencies": {
    "@bpmn-io/properties-panel": "^3.33.0",  // 属性面板核心（提供 CSS）
    "bpmn-js": "^18.7.0",                     // BPMN 建模器
    "bpmn-js-properties-panel": "^5.42.1",   // 属性面板组件
    "camunda-bpmn-moddle": "^7.0.1"          // Camunda 扩展
  }
}
```

### 安装命令

```bash
pnpm add bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle @bpmn-io/properties-panel
```

## 🎨 功能特性

### ✅ 已实现功能

1. **完整的 BPMN 2.0 建模能力**
   - 支持所有标准 BPMN 元素（任务、网关、事件等）
   - 拖拽式设计，直观易用

2. **Camunda 扩展支持**
   - 执行监听器（Execution Listeners）
   - 任务监听器（Task Listeners）
   - 输入/输出参数映射
   - 表单配置
   - 异步执行配置
   - 重试机制配置

3. **属性面板**
   - 完全中文化（450+ 翻译项）
   - 适配 Ant Design 主题
   - 响应式布局

4. **工具栏功能**
   - 导出 XML/SVG
   - 撤销/重做
   - 缩放控制
   - 清空画布

## 📂 文件结构

```
src/views/workflow/process-design/
├── index.vue                    # 主组件
├── translate/
│   └── zh-CN.ts                # 中文翻译（450+ 条目）
├── README.md                    # 本文档
└── SOLUTION.md                  # 技术方案详解
```

## 🚀 使用方式

### 访问路径

```
http://localhost:5666/workflow/process-design
```

### 菜单位置

```
流程 > 流程设计
```

## 🔧 技术要点

### 1. CSS 导入顺序

**关键**：必须按以下顺序导入样式文件：

```javascript
// BPMN.js 核心样式
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';

// 属性面板样式（来自 @bpmn-io/properties-panel）
import '@bpmn-io/properties-panel/dist/assets/properties-panel.css';
```

### 2. 中文翻译

使用自定义翻译模块实现完全中文化：

```javascript
import { customTranslate } from './translate/zh-CN';

const modeler = new Modeler({
  additionalModules: [
    // ... 其他模块
    {
      translate: ['value', customTranslate]
    }
  ]
});
```

### 3. Camunda 扩展配置

```javascript
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

const modeler = new Modeler({
  moddleExtensions: {
    camunda: camundaModdleDescriptor
  }
});
```

## 📝 常见问题

### Q: 为什么需要显式安装 `@bpmn-io/properties-panel`？

**A**: 虽然 `bpmn-js-properties-panel` 内部依赖了它，但 Vite 在解析 CSS 路径时需要在 `node_modules` 顶层找到该包。pnpm 的严格依赖管理不会自动提升间接依赖。

### Q: 属性面板样式不对怎么办？

**A**: 确保：
1. 已安装 `@bpmn-io/properties-panel`
2. 已正确导入 `@bpmn-io/properties-panel/dist/assets/properties-panel.css`
3. CSS 导入顺序正确

### Q: 如何添加新的翻译？

**A**: 在 `translate/zh-CN.ts` 的 `translations` 对象中添加键值对：

```typescript
export const translations: Record<string, string> = {
  // ... 现有翻译
  'Your English Text': '你的中文文本',
};
```

### Q: 如何与后端 Camunda 集成？

**A**: 
1. 使用 `exportXML()` 方法导出 BPMN XML
2. 将 XML 发送到 Camunda REST API 的 `/deployment/create` 端点
3. 后端 Camunda 引擎会解析并部署流程定义

## 🔗 参考资源

- [BPMN.js 官方文档](https://bpmn.io/toolkit/bpmn-js/)
- [Camunda 官方文档](https://docs.camunda.org/)
- [BPMN 2.0 规范](https://www.omg.org/spec/BPMN/2.0/)

---

**最后更新**: 2025-10-11  
**维护者**: DevOps Team

