143 lines
3.9 KiB
HTML
143 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>习正陪伴系统交互图和流程图</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
h1 {
|
||
color: #333;
|
||
border-bottom: 3px solid #4CAF50;
|
||
padding-bottom: 10px;
|
||
}
|
||
h2 {
|
||
color: #555;
|
||
margin-top: 40px;
|
||
border-left: 5px solid #2196F3;
|
||
padding-left: 15px;
|
||
}
|
||
.mermaid {
|
||
background-color: white;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.note {
|
||
background-color: #fff3cd;
|
||
border-left: 4px solid #ffc107;
|
||
padding: 15px;
|
||
margin: 20px 0;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>📊 习正陪伴系统交互图和流程图</h1>
|
||
|
||
<div class="note">
|
||
<strong>💡 使用说明：</strong>
|
||
<ul>
|
||
<li>本页面展示了系统的核心流程图</li>
|
||
<li>可以使用鼠标滚轮缩放图表</li>
|
||
<li>完整文档请查看：Archive/[重要]习正陪伴系统交互图和流程图.md</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2>1. 系统架构图</h2>
|
||
<div class="mermaid">
|
||
graph TB
|
||
subgraph "前端层"
|
||
A1[家长端小程序]
|
||
A2[陪伴员端小程序]
|
||
A3[管理师端小程序]
|
||
A4[分销员端小程序]
|
||
end
|
||
|
||
subgraph "应用层"
|
||
B1[订单服务]
|
||
B2[支付服务]
|
||
B3[用户服务]
|
||
end
|
||
|
||
subgraph "数据层"
|
||
C1[(MySQL数据库)]
|
||
end
|
||
|
||
A1 --> B1
|
||
A2 --> B1
|
||
A3 --> B1
|
||
A4 --> B1
|
||
B1 --> C1
|
||
B2 --> C1
|
||
B3 --> C1
|
||
</div>
|
||
|
||
<h2>2. 订单状态流转图</h2>
|
||
<div class="mermaid">
|
||
stateDiagram-v2
|
||
[*] --> 待支付: 创建订单
|
||
待支付 --> 待派单: 支付成功
|
||
待支付 --> 已取消: 取消订单
|
||
待派单 --> 待接单: 管理师派单
|
||
待接单 --> 待服务: 陪伴员接单
|
||
待接单 --> 待派单: 陪伴员拒单
|
||
待服务 --> 服务中: 签到
|
||
服务中 --> 已完成: 签退
|
||
已完成 --> [*]
|
||
已取消 --> [*]
|
||
</div>
|
||
|
||
<h2>3. 核心业务流程</h2>
|
||
<div class="mermaid">
|
||
sequenceDiagram
|
||
participant 家长
|
||
participant 系统
|
||
participant 管理师
|
||
participant 陪伴员
|
||
|
||
家长->>系统: 1.创建订单
|
||
家长->>系统: 2.支付订单
|
||
系统->>管理师: 3.通知待派单
|
||
管理师->>系统: 4.派单
|
||
系统->>陪伴员: 5.通知待接单
|
||
陪伴员->>系统: 6.接单
|
||
陪伴员->>系统: 7.签到
|
||
陪伴员->>系统: 8.签退
|
||
系统->>家长: 9.通知服务完成
|
||
家长->>系统: 10.评价
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>📝 提示：</strong>
|
||
<p>这只是部分核心流程图的展示。完整的文档包含10大类、30+个详细流程图，请使用Markdown编辑器查看完整文档。</p>
|
||
<p><strong>推荐工具：</strong></p>
|
||
<ul>
|
||
<li>Typora（付费，体验最好）</li>
|
||
<li>VS Code + Markdown Preview Enhanced插件（免费）</li>
|
||
<li>在线工具：https://stackedit.io/</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<script>
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'default',
|
||
flowchart: {
|
||
useMaxWidth: true,
|
||
htmlLabels: true,
|
||
curve: 'basis'
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|