141 lines
4.3 KiB
HTML
141 lines
4.3 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>Soul 创业派对 - 角色协同流程图</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 24px; background: #f5f5f5; }
|
||
h1 { color: #333; margin-bottom: 8px; }
|
||
.subtitle { color: #666; font-size: 14px; margin-bottom: 24px; }
|
||
.diagram { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
|
||
.diagram h2 { margin-top: 0; color: #444; font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
|
||
.mermaid { display: flex; justify-content: center; }
|
||
.mermaid svg { max-width: 100%; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Soul 创业派对 - 角色协同流程图</h1>
|
||
<p class="subtitle">小程序功能开发（新增/优化）驱动的三端协同流程 · 线框图</p>
|
||
|
||
<div class="diagram">
|
||
<h2>1. 主流程图（阶段划分）</h2>
|
||
<div class="mermaid">
|
||
flowchart TB
|
||
subgraph 阶段1["阶段 1：需求分析与接口设计"]
|
||
A[需求/变更发起] --> B[API 开发者分析 miniprogram 接口]
|
||
A --> C[管理端开发者分析]
|
||
C --> C1{管理端是否需要?}
|
||
C1 -->|需要| C2[记录：字段/配置/审核/统计]
|
||
C1 -->|不需要| C3[无需管理端调整]
|
||
B --> D[输出接口契约]
|
||
C2 --> D
|
||
end
|
||
|
||
阶段1 --> 阶段2
|
||
|
||
subgraph 阶段2["阶段 2：并行开发"]
|
||
E[API 开发者实现 miniprogram 接口]
|
||
F[API 开发者实现 admin/db 接口<br/>若管理端需要]
|
||
G[小程序开发者实现功能]
|
||
E --> G
|
||
end
|
||
|
||
阶段2 --> 阶段3
|
||
|
||
subgraph 阶段3["阶段 3：小程序完成 → 管理端启动"]
|
||
H[小程序完成并自测 ✓]
|
||
H --> I{管理端需要?}
|
||
I -->|是| J[管理端开发者开始调整]
|
||
I -->|否| K[跳过]
|
||
J --> L[API 开发者补充 admin/db<br/>若有新增需求]
|
||
end
|
||
|
||
阶段3 --> 阶段4
|
||
|
||
subgraph 阶段4["阶段 4：联调与收尾"]
|
||
M[三端联调]
|
||
N[过 soul-change-checklist]
|
||
O[提交]
|
||
M --> N --> O
|
||
end
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<h2>2. 角色时序图（谁在何时做什么）</h2>
|
||
<div class="mermaid">
|
||
sequenceDiagram
|
||
participant P as 产品/需求
|
||
participant MP as 小程序开发者
|
||
participant AD as 管理端开发者
|
||
participant API as API 开发者
|
||
|
||
P->>API: 1. 需求/变更
|
||
P->>AD: 1. 需求/变更
|
||
|
||
Note over API,AD: 阶段 1：需求分析
|
||
API->>API: 分析 miniprogram 接口需求
|
||
AD->>AD: 分析管理端是否需要字段/配置/审核/统计
|
||
AD->>API: 反馈：需要 / 不需要 + 具体项
|
||
API->>API: 输出接口契约
|
||
|
||
Note over API,MP: 阶段 2：并行开发
|
||
API->>API: 实现 miniprogram 接口
|
||
par 若管理端需要
|
||
API->>API: 实现 admin/db 接口
|
||
end
|
||
API->>MP: 接口可用
|
||
MP->>MP: 实现小程序功能
|
||
|
||
Note over MP,AD: 阶段 3：小程序完成 → 管理端
|
||
MP->>MP: 完成并自测 ✓
|
||
MP->>AD: 小程序完成
|
||
alt 管理端需要
|
||
AD->>AD: 开始管理端调整
|
||
AD->>API: 若有新增接口需求
|
||
API->>API: 补充 admin/db 接口
|
||
end
|
||
|
||
Note over API,AD: 阶段 4：联调
|
||
API->>API: 联调
|
||
MP->>MP: 联调
|
||
AD->>AD: 联调
|
||
Note over P,AD: 过 soul-change-checklist → 提交
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<h2>3. 三角色职责与依赖</h2>
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
subgraph 角色["三角色"]
|
||
MP[小程序开发者<br/>miniprogram/]
|
||
AD[管理端开发者<br/>soul-admin/]
|
||
API[API 开发者<br/>soul-api/]
|
||
end
|
||
|
||
subgraph 路径["API 路径"]
|
||
P1["/api/miniprogram/*"]
|
||
P2["/api/admin/*<br/>/api/db/*"]
|
||
end
|
||
|
||
MP -->|只调| P1
|
||
AD -->|只调| P2
|
||
API -->|提供| P1
|
||
API -->|提供| P2
|
||
|
||
MP -.->|依赖| API
|
||
AD -.->|依赖| API
|
||
AD -.->|小程序完成后启动| MP
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
|
||
</script>
|
||
</body>
|
||
</html>
|