|
|
# Mermaid 流程图功能 - 快速测试指南
|
|
|
|
|
|
## 🚀 快速开始
|
|
|
|
|
|
### 方法一：直接在浏览器中打开
|
|
|
|
|
|
1. **打开主页面**
|
|
|
```
|
|
|
文件路径：ui/pages/flowcharts.html
|
|
|
```
|
|
|
直接在浏览器中打开此文件即可看到所有流程图。
|
|
|
|
|
|
2. **打开模板页面**
|
|
|
```
|
|
|
文件路径：ui/pages/flowchart-template.html
|
|
|
```
|
|
|
查看各种流程图模板和示例。
|
|
|
|
|
|
### 方法二：通过系统导航访问
|
|
|
|
|
|
1. 打开系统主页面
|
|
|
```
|
|
|
文件路径：ui/layout.html
|
|
|
```
|
|
|
|
|
|
2. 在左侧导航菜单找到 **"业务流程图"** 菜单项（带 "新" 标签）
|
|
|
|
|
|
3. 点击进入流程图展示页面
|
|
|
|
|
|
## ✅ 测试检查清单
|
|
|
|
|
|
### 1. 页面加载测试
|
|
|
- [ ] 页面能正常打开
|
|
|
- [ ] 所有流程图都能正确渲染
|
|
|
- [ ] 页面样式显示正常
|
|
|
- [ ] 没有控制台错误
|
|
|
|
|
|
### 2. 标签页切换测试
|
|
|
- [ ] 点击 "支付流程" 标签
|
|
|
- [ ] 点击 "预算管理" 标签
|
|
|
- [ ] 点击 "审批流程" 标签
|
|
|
- [ ] 点击 "权限管理" 标签
|
|
|
- [ ] 切换时流程图正常显示
|
|
|
|
|
|
### 3. 流程图展示测试
|
|
|
每个标签页检查：
|
|
|
- [ ] 流程图能完整显示
|
|
|
- [ ] 节点颜色正确
|
|
|
- [ ] 连接线清晰
|
|
|
- [ ] 文字可读
|
|
|
- [ ] 布局合理（水平排列）
|
|
|
|
|
|
### 4. 交互功能测试
|
|
|
- [ ] 流程图可以横向滚动（如果内容过宽）
|
|
|
- [ ] 点击 "导出" 按钮能下载 SVG 文件
|
|
|
- [ ] 鼠标悬停在流程图容器上有阴影效果
|
|
|
- [ ] 页面加载时有渐入动画
|
|
|
|
|
|
### 5. 响应式测试
|
|
|
调整浏览器窗口大小：
|
|
|
- [ ] 桌面端显示正常（宽度 > 1200px）
|
|
|
- [ ] 平板端显示正常（宽度 768px-1199px）
|
|
|
- [ ] 移动端显示正常（宽度 < 768px）
|
|
|
- [ ] 流程图在小屏幕上能横向滚动
|
|
|
|
|
|
### 6. 导航集成测试
|
|
|
在 layout.html 页面中：
|
|
|
- [ ] 左侧菜单显示 "业务流程图" 选项
|
|
|
- [ ] "新" 标签显示正确
|
|
|
- [ ] 点击菜单项能在 iframe 中加载流程图页面
|
|
|
- [ ] 菜单激活状态正确
|
|
|
|
|
|
## 🎯 核心功能验证
|
|
|
|
|
|
### 支付流程
|
|
|
访问 "支付流程" 标签页，应该看到：
|
|
|
1. ✅ 直接支付流程图（提交→审核→审批→支付→完成）
|
|
|
2. ✅ 非直接支付流程图（包含合规审核和财政审批）
|
|
|
|
|
|
### 预算管理
|
|
|
访问 "预算管理" 标签页，应该看到：
|
|
|
1. ✅ 预算执行管理流程图（三大模块树状结构）
|
|
|
2. ✅ 预算申报审批流程图（按金额分级审批）
|
|
|
|
|
|
### 审批流程
|
|
|
访问 "审批流程" 标签页，应该看到：
|
|
|
1. ✅ 事前审批流程图（采购/出差/会议/合同）
|
|
|
2. ✅ 多级审批流程图（初审→复审→终审）
|
|
|
|
|
|
### 权限管理
|
|
|
访问 "权限管理" 标签页，应该看到：
|
|
|
1. ✅ 用户权限管理流程图（角色分类权限树）
|
|
|
2. ✅ 访问控制流程图（登录验证流程）
|
|
|
|
|
|
## 🔍 详细测试步骤
|
|
|
|
|
|
### 测试 1：直接打开 flowcharts.html
|
|
|
|
|
|
```bash
|
|
|
# 在项目目录下
|
|
|
cd czemc-budget-execution-frontend/ui/pages
|
|
|
# 用浏览器打开
|
|
|
open flowcharts.html # macOS
|
|
|
# 或
|
|
|
start flowcharts.html # Windows
|
|
|
```
|
|
|
|
|
|
**预期结果**：
|
|
|
- 页面标题显示 "业务流程图 - 资金使用管理系统"
|
|
|
- 看到 4 个标签页：支付流程、预算管理、审批流程、权限管理
|
|
|
- 默认显示 "支付流程" 标签内容
|
|
|
- 至少显示 2 个流程图
|
|
|
|
|
|
### 测试 2：通过 layout.html 访问
|
|
|
|
|
|
```bash
|
|
|
# 打开主布局页面
|
|
|
cd czemc-budget-execution-frontend/ui
|
|
|
open layout.html # macOS
|
|
|
```
|
|
|
|
|
|
**预期结果**：
|
|
|
- 左侧菜单显示 "业务流程图" 选项（带蓝色 "新" 标签）
|
|
|
- 点击后在右侧 iframe 中加载流程图页面
|
|
|
- 菜单项变为激活状态（蓝色背景）
|
|
|
|
|
|
### 测试 3：导出功能测试
|
|
|
|
|
|
1. 打开 flowcharts.html
|
|
|
2. 找到任意流程图的 "导出" 按钮
|
|
|
3. 点击按钮
|
|
|
|
|
|
**预期结果**：
|
|
|
- 浏览器下载一个 SVG 文件
|
|
|
- 文件名类似 `flowchart-1234567890.svg`
|
|
|
- 弹出提示 "流程图已导出为 SVG 格式"
|
|
|
- 下载的 SVG 文件可以用图片查看器打开
|
|
|
|
|
|
### 测试 4：模板页面测试
|
|
|
|
|
|
```bash
|
|
|
cd czemc-budget-execution-frontend/ui/pages
|
|
|
open flowchart-template.html
|
|
|
```
|
|
|
|
|
|
**预期结果**：
|
|
|
- 看到 6 个流程图示例
|
|
|
- 每个示例下方显示对应的 Mermaid 代码
|
|
|
- 代码显示在黑色背景的代码框中
|
|
|
- 所有流程图都能正确渲染
|
|
|
|
|
|
## 🐛 常见问题排查
|
|
|
|
|
|
### 问题 1：流程图不显示
|
|
|
|
|
|
**可能原因**：
|
|
|
- CDN 加载失败
|
|
|
- JavaScript 被禁用
|
|
|
- Mermaid 语法错误
|
|
|
|
|
|
**解决方法**：
|
|
|
1. 打开浏览器开发者工具（F12）
|
|
|
2. 查看 Console 标签页是否有错误
|
|
|
3. 检查 Network 标签页，确认 Mermaid CDN 加载成功
|
|
|
4. 确保浏览器启用了 JavaScript
|
|
|
|
|
|
### 问题 2：样式显示异常
|
|
|
|
|
|
**可能原因**：
|
|
|
- Bootstrap CSS 未加载
|
|
|
- 自定义样式冲突
|
|
|
|
|
|
**解决方法**：
|
|
|
1. 检查 Bootstrap CDN 是否加载成功
|
|
|
2. 清除浏览器缓存后刷新
|
|
|
3. 尝试在隐私模式/无痕模式下打开
|
|
|
|
|
|
### 问题 3：在 iframe 中显示不正常
|
|
|
|
|
|
**可能原因**：
|
|
|
- 路径问题
|
|
|
- iframe 高度不足
|
|
|
|
|
|
**解决方法**：
|
|
|
1. 检查 layout.html 中的 iframe src 路径
|
|
|
2. 确保使用相对路径 `pages/flowcharts.html`
|
|
|
3. 检查 iframe 的 CSS 样式
|
|
|
|
|
|
## 📸 预期截图参考
|
|
|
|
|
|
### 1. 主页面 - 支付流程标签
|
|
|
应该看到：
|
|
|
- 顶部：4 个标签页，"支付流程" 被选中（蓝色下划线）
|
|
|
- 左侧：页面标题 "业务流程图"
|
|
|
- 主体：2 个流程图卡片
|
|
|
- 第一个：直接支付流程
|
|
|
- 第二个：非直接支付流程
|
|
|
- 底部：使用说明卡片（3 列布局）
|
|
|
|
|
|
### 2. 导航菜单
|
|
|
应该看到：
|
|
|
- 左侧边栏菜单
|
|
|
- "业务流程图" 选项位于 "资金管理" 下方
|
|
|
- 带有蓝色小标签显示 "新"
|
|
|
- 图标是三个连接的圆圈（bi-diagram-3）
|
|
|
|
|
|
### 3. 流程图样式
|
|
|
每个流程图应该：
|
|
|
- 有白色背景的卡片容器
|
|
|
- 顶部标题区域（带图标）
|
|
|
- 浅蓝色说明区域
|
|
|
- 浅灰色背景的流程图区域
|
|
|
- 节点使用彩色填充
|
|
|
- 连接线清晰可见
|
|
|
|
|
|
## ✨ 功能亮点演示
|
|
|
|
|
|
### 1. 水平排列效果
|
|
|
打开任意流程图，观察：
|
|
|
- ✅ 流程从左到右展开
|
|
|
- ✅ 适合中文阅读习惯
|
|
|
- ✅ 层次清晰
|
|
|
|
|
|
### 2. 配色方案
|
|
|
注意观察不同类型节点的颜色：
|
|
|
- 🔵 蓝色节点 - 开始/输入
|
|
|
- 🟢 绿色节点 - 完成/成功
|
|
|
- 🟠 橙红节点 - 退回/修改
|
|
|
- 🟡 黄色节点 - 判断/审核
|
|
|
|
|
|
### 3. 交互效果
|
|
|
- 鼠标悬停在流程图卡片上会有轻微上移效果
|
|
|
- 标签页切换流畅
|
|
|
- 页面加载时有渐入动画
|
|
|
|
|
|
## 🎓 学习测试
|
|
|
|
|
|
### 任务 1：理解基础语法
|
|
|
查看 flowchart-template.html 中的 "基础水平流程" 示例，理解：
|
|
|
- `graph LR` 的含义
|
|
|
- `-->` 箭头的使用
|
|
|
- `style` 语句的作用
|
|
|
|
|
|
### 任务 2：修改现有流程图
|
|
|
尝试修改 flowcharts.html 中的任意流程图：
|
|
|
- 修改节点文字
|
|
|
- 更改节点颜色
|
|
|
- 添加新的节点
|
|
|
|
|
|
### 任务 3：创建新流程图
|
|
|
使用 flowchart-template.html 中的模板，创建一个新的流程图：
|
|
|
- 选择合适的模板
|
|
|
- 替换节点文字
|
|
|
- 调整颜色样式
|
|
|
|
|
|
## 📊 性能测试
|
|
|
|
|
|
### 加载时间
|
|
|
- [ ] 首次加载时间 < 2 秒
|
|
|
- [ ] 标签页切换响应 < 0.5 秒
|
|
|
- [ ] 流程图渲染时间 < 1 秒
|
|
|
|
|
|
### 资源占用
|
|
|
打开浏览器开发者工具，检查：
|
|
|
- [ ] 页面大小 < 500KB（不含 CDN 资源）
|
|
|
- [ ] 初始 JavaScript 执行时间 < 500ms
|
|
|
- [ ] 内存占用合理（< 50MB）
|
|
|
|
|
|
## 🎉 测试完成
|
|
|
|
|
|
完成所有测试后，您应该能够：
|
|
|
- ✅ 正常访问流程图页面
|
|
|
- ✅ 看到 8 个完整的业务流程图
|
|
|
- ✅ 切换不同标签页
|
|
|
- ✅ 导出流程图为 SVG
|
|
|
- ✅ 理解如何添加新的流程图
|
|
|
- ✅ 掌握 Mermaid 基础语法
|
|
|
|
|
|
## 📝 测试报告模板
|
|
|
|
|
|
```
|
|
|
测试日期：________
|
|
|
测试人员：________
|
|
|
浏览器：________ 版本：________
|
|
|
|
|
|
[ ] 页面加载正常
|
|
|
[ ] 所有流程图显示正常
|
|
|
[ ] 标签页切换功能正常
|
|
|
[ ] 导出功能正常
|
|
|
[ ] 响应式布局正常
|
|
|
[ ] 导航集成正常
|
|
|
|
|
|
问题记录：
|
|
|
1. ________________________________
|
|
|
2. ________________________________
|
|
|
3. ________________________________
|
|
|
|
|
|
总体评价：□ 优秀 □ 良好 □ 一般 □ 需改进
|
|
|
|
|
|
备注：
|
|
|
________________________________
|
|
|
________________________________
|
|
|
```
|
|
|
|
|
|
## 🔗 相关文档
|
|
|
|
|
|
- [使用说明文档](ui/pages/README-Flowcharts.md)
|
|
|
- [实现说明文档](Mermaid流程图实现说明.md)
|
|
|
- [模板示例页面](ui/pages/flowchart-template.html)
|
|
|
|
|
|
---
|
|
|
|
|
|
**测试指南版本**: v1.0.0
|
|
|
**创建日期**: 2024年1月
|
|
|
**适用范围**: 资金使用管理系统 Mermaid 流程图功能
|
|
|
|
|
|
祝测试顺利！🎉
|
|
|
|
