wangyifang
/
cz-hjjc-budget
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '8b69aefc7b'
${ noResults }
cz-hjjc-budget/ui/pages/flowchart-template.html

421 lines
13 KiB
Raw Normal View History Unescape

up
5 months ago
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程图模板 - 快速创建新流程图</title>
<link href="https://cdn.staticfile.org/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
background-color: #f5f7fa;
padding: 20px;
}
.page-header {
background: white;
padding: 25px 30px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.chart-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e5e7eb;
}
.mermaid {
text-align: center;
background: #fafafa;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
}
.code-example {
background: #1e1e1e;
color: #d4d4d4;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
overflow-x: auto;
}
.code-example pre {
margin: 0;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
}
.example-section {
margin-bottom: 40px;
}
.example-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
</style>
</head>
<body>
<div class="page-header">
<h1><i class="bi bi-file-code"></i> Mermaid 流程图模板与示例</h1>
<p class="text-muted">快速创建和定制您的业务流程图</p>
</div>
<!-- 示例 1：基础水平流程 -->
<div class="example-section">
<div class="chart-container">
<div class="example-title">
<i class="bi bi-1-circle-fill text-primary"></i>
基础水平流程（Linear Flow）
</div>
<p class="text-muted small">最简单的从左到右流程图，适合展示线性步骤</p>
<div class="mermaid">
graph LR
A[步骤1] --> B[步骤2]
B --> C[步骤3]
C --> D[步骤4]
D --> E[完成]
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
</div>
<div class="code-example">
<pre>graph LR
A[步骤1] --> B[步骤2]
B --> C[步骤3]
C --> D[步骤4]
D --> E[完成]
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style E fill:#C8E6C9,stroke:#388E3C,stroke-width:2px</pre>
</div>
</div>
</div>
<!-- 示例 2：带判断的流程 -->
<div class="example-section">
<div class="chart-container">
<div class="example-title">
<i class="bi bi-2-circle-fill text-success"></i>
带条件判断的流程（Decision Flow）
</div>
<p class="text-muted small">包含条件分支的流程图，适合审批、验证等场景</p>
<div class="mermaid">
graph LR
Start[开始] --> Input[输入数据]
Input --> Check{数据验证}
Check -->|通过| Process[处理数据]
Check -->|失败| Error[错误处理]
Process --> Save[保存结果]
Error --> Input
Save --> End[结束]
style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
style Error fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
style Check fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
</div>
<div class="code-example">
<pre>graph LR
Start[开始] --> Input[输入数据]
Input --> Check{数据验证}
Check -->|通过| Process[处理数据]
Check -->|失败| Error[错误处理]
Process --> Save[保存结果]
Error --> Input
Save --> End[结束]
style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
style Error fill:#FFCCBC,stroke:#E64A19,stroke-width:2px
style Check fill:#FFF9C4,stroke:#F9A825,stroke-width:2px</pre>
</div>
</div>
</div>
<!-- 示例 3：树状结构 -->
<div class="example-section">
<div class="chart-container">
<div class="example-title">
<i class="bi bi-3-circle-fill text-info"></i>
树状结构流程（Tree Structure）
</div>
<p class="text-muted small">从一个根节点展开到多个分支，适合组织架构、模块划分等</p>
<div class="mermaid">
graph LR
Root[系统管理] --> Module1[用户管理]
Root --> Module2[权限管理]
Root --> Module3[系统配置]
Module1 --> Sub1_1[用户列表]
Module1 --> Sub1_2[添加用户]
Module1 --> Sub1_3[用户审核]
Module2 --> Sub2_1[角色管理]
Module2 --> Sub2_2[权限分配]
Module3 --> Sub3_1[参数设置]
Module3 --> Sub3_2[日志管理]
style Root fill:#1976D2,color:#fff,stroke:#0D47A1,stroke-width:3px
style Module1 fill:#4CAF50,color:#fff,stroke:#2E7D32,stroke-width:2px
style Module2 fill:#FF9800,color:#fff,stroke:#E65100,stroke-width:2px
style Module3 fill:#F44336,color:#fff,stroke:#B71C1C,stroke-width:2px
</div>
<div class="code-example">
<pre>graph LR
Root[系统管理] --> Module1[用户管理]
Root --> Module2[权限管理]
Root --> Module3[系统配置]
Module1 --> Sub1_1[用户列表]
Module1 --> Sub1_2[添加用户]
Module1 --> Sub1_3[用户审核]
Module2 --> Sub2_1[角色管理]
Module2 --> Sub2_2[权限分配]
Module3 --> Sub3_1[参数设置]
Module3 --> Sub3_2[日志管理]
style Root fill:#1976D2,color:#fff,stroke:#0D47A1,stroke-width:3px
style Module1 fill:#4CAF50,color:#fff,stroke:#2E7D32,stroke-width:2px
style Module2 fill:#FF9800,color:#fff,stroke:#E65100,stroke-width:2px
style Module3 fill:#F44336,color:#fff,stroke:#B71C1C,stroke-width:2px</pre>
</div>
</div>
</div>
<!-- 示例 4：多路径复杂流程 -->
<div class="example-section">
<div class="chart-container">
<div class="example-title">
<i class="bi bi-4-circle-fill text-warning"></i>
多路径复杂流程（Complex Flow）
</div>
<p class="text-muted small">包含多个判断点和并行路径的复杂业务流程</p>
<div class="mermaid">
graph LR
Start[开始] --> Type{申请类型}
Type -->|类型A| PathA[处理A]
Type -->|类型B| PathB[处理B]
Type -->|类型C| PathC[处理C]
PathA --> ReviewA{审核A}
PathB --> ReviewB{审核B}
PathC --> ReviewC{审核C}
ReviewA -->|通过| Approve[最终审批]
ReviewB -->|通过| Approve
ReviewC -->|通过| Approve
ReviewA -->|拒绝| Reject[驳回]
ReviewB -->|拒绝| Reject
ReviewC -->|拒绝| Reject
Reject --> Start
Approve --> End[完成]
style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
style Reject fill:#FFCDD2,stroke:#C62828,stroke-width:2px
style Type fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
style Approve fill:#B2DFDB,stroke:#00897B,stroke-width:2px
</div>
<div class="code-example">
<pre>graph LR
Start[开始] --> Type{申请类型}
Type -->|类型A| PathA[处理A]
Type -->|类型B| PathB[处理B]
Type -->|类型C| PathC[处理C]
PathA --> ReviewA{审核A}
PathB --> ReviewB{审核B}
PathC --> ReviewC{审核C}
ReviewA -->|通过| Approve[最终审批]
ReviewB -->|通过| Approve
ReviewC -->|通过| Approve
ReviewA -->|拒绝| Reject[驳回]
ReviewB -->|拒绝| Reject
ReviewC -->|拒绝| Reject
Reject --> Start
Approve --> End[完成]
style Start fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style End fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
style Reject fill:#FFCDD2,stroke:#C62828,stroke-width:2px
style Type fill:#FFF9C4,stroke:#F9A825,stroke-width:2px
style Approve fill:#B2DFDB,stroke:#00897B,stroke-width:2px</pre>
</div>
</div>
</div>
<!-- 节点形状示例 -->
<div class="example-section">
<div class="chart-container">
<div class="example-title">
<i class="bi bi-star-fill text-danger"></i>
节点形状示例（Node Shapes）
</div>
<p class="text-muted small">Mermaid 支持多种节点形状，选择合适的形状可以更好地表达含义</p>
<div class="mermaid">
graph LR
A[方形节点] --> B(圆角矩形)
B --> C([体育场形])
C --> D[[子程序]]
D --> E[(数据库)]
E --> F((圆形))
F --> G{菱形判断}
G --> H[/平行四边形/]
H --> I[\反向平行四边形\]
I --> J>不对称形状]
</div>
<div class="code-example">
<pre>graph LR
A[方形节点] --> B(圆角矩形)
B --> C([体育场形])
C --> D[[子程序]]
D --> E[(数据库)]
E --> F((圆形))
F --> G{菱形判断}
G --> H[/平行四边形/]
H --> I[\反向平行四边形\]
I --> J>不对称形状]</pre>
</div>
</div>
</div>
<!-- 连接线样式示例 -->
<div class="example-section">
<div class="chart-container">
<div class="example-title">
<i class="bi bi-bezier text-purple"></i>
连接线样式示例（Link Styles）
</div>
<p class="text-muted small">不同的连接线样式可以表达不同的关系</p>
<div class="mermaid">
graph LR
A[节点A] --> B[实线箭头]
A -.-> C[虚线箭头]
A ==> D[粗线箭头]
A --- E[实线无箭头]
A -.- F[虚线无箭头]
B -->|带文本| G[节点G]
C -.->|虚线文本| G
D ==>|粗线文本| G
style A fill:#90CAF9,stroke:#1565C0,stroke-width:2px
</div>
<div class="code-example">
<pre>graph LR
A[节点A] --> B[实线箭头]
A -.-> C[虚线箭头]
A ==> D[粗线箭头]
A --- E[实线无箭头]
A -.- F[虚线无箭头]
B -->|带文本| G[节点G]
C -.->|虚线文本| G
D ==>|粗线文本| G
style A fill:#90CAF9,stroke:#1565C0,stroke-width:2px</pre>
</div>
</div>
</div>
<!-- 快速模板 -->
<div class="chart-container">
<div class="example-title">
<i class="bi bi-clipboard-check text-success"></i>
快速开始模板
</div>
<p class="text-muted small">复制以下代码，替换文本内容即可快速创建您的流程图</p>
<div class="code-example">
<pre>&lt;div class="chart-container"&gt;
&lt;div class="chart-header"&gt;
&lt;div class="chart-title"&gt;
&lt;i class="bi bi-arrow-right-circle"&gt;&lt;/i&gt;
您的流程图标题
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="chart-description"&gt;
&lt;i class="bi bi-info-circle"&gt;&lt;/i&gt;
&lt;strong&gt;流程说明：&lt;/strong&gt; 在这里添加流程说明
&lt;/div&gt;
&lt;div class="mermaid"&gt;
graph LR
A[开始] --&gt; B[处理]
B --&gt; C{判断}
C --&gt;|是| D[路径1]
C --&gt;|否| E[路径2]
D --&gt; F[结束]
E --&gt; F
style A fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
style F fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.esm.min.mjs';
mermaid.initialize({
startOnLoad: true,
theme: 'default',
flowchart: {
curve: 'basis',
padding: 20,
nodeSpacing: 50,
rankSpacing: 80,
useMaxWidth: true
}
});
</script>
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>