first commit

docs/archive/领导演示资料/docs-scripts/架构图使用说明.md

@@ -0,0 +1,114 @@
+# sgClaw 团队协作架构图
+
+## 📄 文档说明
+
+这是一个**独立的可视化架构图文档**，用于向领导清晰展示 sgClaw 项目的团队分工、协作关系和技术架构。
+
+## 🎯 包含的图表
+
+1. **团队协作总架构（5 人分工全景）**
+   - 每个人干什么？
+   - 为什么要这样干？
+   - 产出物是什么？
+
+2. **人员接口对接关系图**
+   - P1a ↔ P2：关键路径对接（极高优先级）
+   - P1a ↔ P1b：Runtime 集成对接
+   - P1b ↔ P3：Skill 加载对接
+   - P2 ↔ P4：UI 交互对接
+
+3. **数据流全链路**
+   - 从用户输入到浏览器执行的完整流程
+   - 8 步数据流转详解
+
+4. **关键路径时间轴**
+   - 为什么 Day 4-5 是瓶颈？
+   - 风险预案是什么？
+
+5. **技术栈分层**
+   - 每层对应哪些人员？
+   - 每层负责什么模块？
+
+6. **为什么这样分工？**
+   - 设计依据和决策背景
+   - 常见问题解答
+
+## 🚀 如何查看
+
+### 方法 1：本地浏览器直接打开（推荐）
+
+```bash
+# 在文件管理器中双击打开
+团队协作架构图.html
+```
+
+### 方法 2：局域网查看（适合开会演示）
+
+```bash
+cd /home/zyl/projects/sgClaw/docs
+./查看架构图.sh
+```
+
+然后在浏览器中访问显示的 URL，例如：
+- 本机：`http://localhost:8888/团队协作架构图.html`
+- 局域网：`http://192.168.x.x:8888/团队协作架构图.html`
+
+### 方法 3：导出为 PDF
+
+在浏览器中打开后：
+1. 点击右下角的「📄 打印 PDF」按钮
+2. 或按 `Ctrl+P`（Windows/Linux）/ `Cmd+P`（macOS）
+3. 选择「另存为 PDF」
+4. 保存
+
+## 💡 使用建议
+
+### 给领导汇报时
+
+1. **先看"团队协作总架构"**（第一图）
+   - 一目了然看到 5 个人各自负责什么
+   - 理解为什么要这样分工
+
+2. **重点讲"关键路径"**（第四图）
+   - 强调 Day 4-5 的 P1a + P2 联调是整个项目的瓶颈
+   - 说明有风险预案
+
+3. **数据流全链路**（第三图）
+   - 演示一个完整的业务场景
+   - 让领导理解 5 个人的工作如何串联起来
+
+### 给技术人员讲解时
+
+1. **技术栈分层**（第五图）
+   - 清晰展示模块划分
+   - 说明依赖关系（从下往上）
+
+2. **接口对接关系**（第二图）
+   - 详细展示每对人员之间的接口协议
+   - 包含代码示例
+
+## 📋 文件清单
+
+```
+/home/zyl/projects/sgClaw/docs/
+├── 团队协作架构图.html       # 主文档（独立 HTML，无外部依赖）
+├── 查看架构图.sh              # 启动脚本（局域网查看）
+└── 架构图使用说明.md          # 本文档
+```
+
+## 🎨 特性
+
+- ✅ **零依赖**：单文件 HTML，不需要网络，不需要额外资源
+- ✅ **深色主题**：适合投影演示，保护眼睛
+- ✅ **响应式设计**：自适应不同屏幕尺寸
+- ✅ **打印友好**：可直接打印或导出 PDF
+- ✅ **可视化清晰**：颜色编码（P1a 红色、P2 蓝色、P3 绿色等）
+
+## 🔄 更新记录
+
+- **v1.0** (2026-03-04)：初版发布，包含 6 张核心架构图
+
+---
+
+**维护者**：项目经理
+**最后更新**：2026-03-04