# 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 流程图功能

祝测试顺利！🎉