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>
|