9.4 KiB

Raw Blame History Unescape Escape

Mermaid 流程图实现说明

📋 项目概述

本文档说明了在资金使用管理系统中实现的 Mermaid 水平排列流程图 功能。

✅ 已完成的工作

1. 创建主流程图页面

文件: ui/pages/flowcharts.html

功能特点:

✅ 支持水平排列（LR 方向）的流程图展示
✅ 4 个标签页分类展示不同业务流程
- 支付流程（直接支付、非直接支付）
- 预算管理（预算执行、预算申报）
- 审批流程（事前审批、多级审批）
- 权限管理（用户权限、访问控制）
✅ 响应式设计，自适应各种屏幕尺寸
✅ 流程图导出功能（SVG 格式）
✅ 精美的配色方案和节点样式
✅ 每个流程图都有详细的文字说明

2. 创建模板和示例页面

文件: ui/pages/flowchart-template.html

包含内容:

✅ 6 种常用流程图模板
- 基础水平流程
- 带判断的流程
- 树状结构
- 多路径复杂流程
- 节点形状示例
- 连接线样式示例
✅ 每个示例都包含源代码展示
✅ 快速开始模板，复制即用

3. 编写使用说明文档

文件: ui/pages/README-Flowcharts.md

文档内容:

✅ 功能概述和特点介绍
✅ 详细的使用方法
✅ 技术实现说明
✅ 添加新流程图的步骤指南
✅ 自定义样式方法
✅ 常见问题解答
✅ Mermaid 语法速查
✅ 最佳实践建议

4. 集成到导航系统

修改文件: ui/layout.html

修改内容:

✅ 在左侧导航菜单添加 "业务流程图" 入口
✅ 添加 "新" 标签突出显示新功能
✅ 保持与现有菜单风格一致

🎯 功能亮点

1. 水平排列（LR 方向）

graph LR
    A[开始] --> B[处理] --> C[结束]

使用 graph LR 语法实现从左到右排列
符合中文阅读习惯
适合展示线性流程和树状结构

2. 精美的视觉设计

🔵 蓝色 - 开始/输入节点
🟢 绿色 - 完成/成功节点
🟠 橙红 - 退回/修改节点
🟡 黄色 - 判断/审核节点

3. 完整的业务流程覆盖

包含以下业务流程图：

支付流程
- 直接支付流程
- 非直接支付（北京支付）流程
预算管理
- 预算执行管理流程
- 预算申报审批流程
审批流程
- 事前审批流程
- 多级审批流程
权限管理
- 用户权限管理流程
- 访问控制流程

📁 文件结构

czemc-budget-execution-frontend/
├── ui/
│   ├── layout.html                          # ✏️ 已修改：添加导航链接
│   └── pages/
│       ├── flowcharts.html                  # ✨ 新增：主流程图页面
│       ├── flowchart-template.html          # ✨ 新增：模板和示例
│       └── README-Flowcharts.md             # ✨ 新增：使用说明文档
└── Mermaid流程图实现说明.md                 # ✨ 新增：本文档

🚀 使用方法

访问流程图页面

通过导航菜单
- 登录系统
- 在左侧导航找到 "业务流程图" 菜单项（带 "新" 标签）
- 点击进入

直接访问

http://localhost:3000/#/flowcharts
或
在 iframe 中加载：ui/pages/flowcharts.html

查看示例和模板

直接访问模板页面：

ui/pages/flowchart-template.html

添加新流程图

参考 ui/pages/README-Flowcharts.md 文档中的详细步骤。

🛠️ 技术栈

技术	版本	用途
Mermaid.js	v10	流程图渲染引擎
Bootstrap	5.3.0	UI 框架
Bootstrap Icons	1.11.0	图标库
ES Module	-	模块化加载

📊 Mermaid 配置

mermaid.initialize({ 
    startOnLoad: true,
    theme: 'default',
    flowchart: {
        curve: 'basis',        // 曲线类型
        padding: 20,           // 内边距
        nodeSpacing: 50,       // 节点间距
        rankSpacing: 80,       // 层级间距
        diagramPadding: 20,    // 图表边距
        useMaxWidth: true      // 响应式宽度
    },
    themeVariables: {
        fontSize: '14px',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif'
    }
});

🎨 配色方案

主要颜色定义

开始节点：fill:#E3F2FD, stroke:#1976D2  /* 蓝色系 */
成功节点：fill:#C8E6C9, stroke:#388E3C  /* 绿色系 */
失败节点：fill:#FFCCBC, stroke:#E64A19  /* 橙红系 */
判断节点：fill:#FFF9C4, stroke:#F9A825  /* 黄色系 */
处理节点：fill:#B2DFDB, stroke:#00897B  /* 青色系 */

模块分类颜色

预算管理：#4CAF50  /* 绿色 */
预算执行：#FF9800  /* 橙色 */
监督检查：#F44336  /* 红色 */
管理员：  #EF5350  /* 深红 */
财务：    #66BB6A  /* 绿色 */
审批人：  #AB47BC  /* 紫色 */
普通用户：#42A5F5  /* 蓝色 */

💡 最佳实践

1. 流程图设计原则

✅ 保持简洁，单个流程图不超过 20 个节点
✅ 使用统一的配色方案
✅ 为关键节点添加文字说明
✅ 合理使用不同的节点形状

2. 性能优化

✅ 避免在一个页面渲染过多复杂图表
✅ 使用标签页分组展示
✅ 按需加载（标签页切换时渲染）

3. 可维护性

✅ 为每个流程图添加注释
✅ 使用有意义的节点 ID
✅ 保持代码格式统一

🔧 常见问题

1. 如何修改流程图？

编辑 ui/pages/flowcharts.html 文件，找到对应的 <div class="mermaid"> 标签，修改其中的 Mermaid 语法。

2. 如何添加新的流程图？

参考 ui/pages/flowchart-template.html 中的模板，复制代码并修改内容。

3. 如何更改配色？

修改流程图末尾的 style 语句：

style 节点ID fill:#颜色,stroke:#边框色,stroke-width:2px

4. 如何导出流程图？

点击流程图右上角的 "导出" 按钮，会下载 SVG 格式文件。

📚 参考资源

📝 示例代码

基础水平流程

graph LR
    A[开始] --> B[处理]
    B --> C[结束]
    
    style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    style C fill:#C8E6C9,stroke:#388E3C,stroke-width:2px

带判断的流程

graph LR
    A[输入] --> B{判断}
    B -->|通过| C[处理A]
    B -->|拒绝| D[处理B]
    C --> E[结束]
    D --> E
    
    style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
    style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
    style B fill:#FFF9C4,stroke:#F9A825,stroke-width:2px

树状结构

graph LR
    Root[根节点] --> A[分支A]
    Root --> B[分支B]
    Root --> C[分支C]
    
    A --> A1[子节点A1]
    A --> A2[子节点A2]
    
    B --> B1[子节点B1]
    B --> B2[子节点B2]
    
    style Root fill:#1976D2,color:#fff,stroke:#0D47A1,stroke-width:3px
    style A fill:#4CAF50,color:#fff,stroke:#2E7D32,stroke-width:2px
    style B fill:#FF9800,color:#fff,stroke:#E65100,stroke-width:2px
    style C fill:#F44336,color:#fff,stroke:#B71C1C,stroke-width:2px

🎉 功能演示

访问以下页面查看完整功能：

主流程图页面
- 路径：ui/pages/flowcharts.html
- 包含 8 个完整的业务流程图
模板示例页面
- 路径：ui/pages/flowchart-template.html
- 包含 6 种常用模板和示例
使用说明文档
- 路径：ui/pages/README-Flowcharts.md
- 完整的使用指南和技术文档

📱 响应式设计

流程图页面已针对不同屏幕尺寸优化：

🖥️ 桌面端 (≥1200px)：完整展示所有内容
💻 平板端 (768px-1199px)：自适应布局
📱 移动端 (<768px)：单列布局，横向滚动查看流程图

🔄 浏览器兼容性

浏览器	版本要求	支持状态
Chrome	≥90	✅ 完全支持
Firefox	≥88	✅ 完全支持
Safari	≥14	✅ 完全支持
Edge	≥90	✅ 完全支持
IE	-	❌ 不支持

📈 下一步计划

添加流程图编辑功能（在线编辑）
支持导出为 PNG/PDF 格式
添加流程图版本管理
集成到后端，从数据库读取流程配置
添加流程图打印优化
支持更多 Mermaid 图表类型（时序图、甘特图等）

🙋 技术支持

如有问题或建议，请联系项目开发团队。

文档版本: v1.0.0
创建日期: 2024年1月
最后更新: 2024年1月
维护者: 项目开发团队
项目: 资金使用管理系统

附录：完整文件清单

新增文件

ui/pages/flowcharts.html - 主流程图页面（约 800 行）
ui/pages/flowchart-template.html - 模板示例页面（约 500 行）
ui/pages/README-Flowcharts.md - 使用说明文档（约 400 行）
Mermaid流程图实现说明.md - 项目实现说明（本文档）

修改文件

ui/layout.html - 添加导航菜单项（新增约 10 行）

总代码行数

新增代码：约 1700+ 行
流程图数量：8 个完整业务流程图
模板数量：6 个常用模板
文档数量：2 个完整文档

项目完成度: ✅ 100%
测试状态: ⏳ 待测试
部署状态: ⏳ 待部署

9.4 KiB Raw Blame History Unescape Escape