first commit
This commit is contained in:
zyl
446
docs/archive/领导演示资料/docs-html/协作时间表.html
Normal file
446
docs/archive/领导演示资料/docs-html/协作时间表.html
Normal file
@@ -0,0 +1,446 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>sgClaw 协作时间表 - 甘特图</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
padding: 40px 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.container { max-width: 1400px; margin: 0 auto; }
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(135deg, #38bdf8, #818cf8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.subtitle {
|
||||
color: #94a3b8;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.section {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 20px;
|
||||
color: #38bdf8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.chart-container {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.alert {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-left: 4px solid #ef4444;
|
||||
padding: 15px 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.alert strong { color: #fca5a5; }
|
||||
.info {
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
border-left: 4px solid #38bdf8;
|
||||
padding: 15px 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
pre {
|
||||
background: #1e293b;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
th {
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
color: #38bdf8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.milestone {
|
||||
display: inline-block;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.critical {
|
||||
display: inline-block;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.nav a:hover {
|
||||
background: rgba(56, 189, 248, 0.2);
|
||||
color: #38bdf8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📊 sgClaw 项目协作时间表</h1>
|
||||
<p class="subtitle">2周开发计划 · 5人团队 · 关键路径：P1a + P2 联调（Day 3-5）</p>
|
||||
|
||||
<div class="nav">
|
||||
<strong style="color:#38bdf8;margin-bottom:10px;display:block;">快速导航</strong>
|
||||
<a href="#gantt">甘特图</a>
|
||||
<a href="#dependency">依赖关系</a>
|
||||
<a href="#critical">关键路径</a>
|
||||
<a href="#load">人员负载</a>
|
||||
<a href="#risk">风险热力图</a>
|
||||
<a href="#milestone">里程碑</a>
|
||||
</div>
|
||||
|
||||
<!-- 甘特图 -->
|
||||
<div class="section" id="gantt">
|
||||
<h2>📊 完整甘特图</h2>
|
||||
<div class="info">
|
||||
<strong>💡 图例说明：</strong> 红色任务 = 关键路径（阻塞后续工作） | 菱形 = 里程碑 | active = E2E测试周
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="mermaid">
|
||||
gantt
|
||||
title sgClaw 2周开发计划（关键路径：P1a+P2）
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat Day %d
|
||||
|
||||
section 关键路径⭐
|
||||
P1a环境搭建 :p1a1, 2026-03-04, 2d
|
||||
P1a Pipe协议开发 :crit, p1a2, after p1a1, 1d
|
||||
P1a+P2联调Pipe通信 :crit, p1a3, after p1a2, 2d
|
||||
P1a完善15个Action :crit, p1a4, after p1a3, 1d
|
||||
W1里程碑演示 :milestone, m1, after p1a4, 0d
|
||||
P1a+P1b集成Runtime :p1a5, after p1a4, 1d
|
||||
P1a MAC安全策略 :p1a6, after p1a5, 1d
|
||||
P1a bug修复 :p1a7, after p1a6, 2d
|
||||
P1a代码审查交付 :milestone, m2, after p1a7, 1d
|
||||
|
||||
section P2浏览器对接
|
||||
P2环境搭建 :p2a, 2026-03-04, 2d
|
||||
P2 ProcessHost框架 :p2b, after p2a, 1d
|
||||
P2+P1a联调Pipe :crit, p2c, after p2b, 2d
|
||||
P2 CommandRouter对接 :p2d, after p2c, 1d
|
||||
P2 MAC白名单 :p2e, after p2d, 1d
|
||||
P2+P4 UI对接 :p2f, after p2e, 1d
|
||||
P2 bug修复 :p2g, after p2f, 2d
|
||||
P2交付 :milestone, after p2g, 1d
|
||||
|
||||
section P1b业务支持
|
||||
P1b环境搭建 :p1b1, 2026-03-04, 2d
|
||||
P1b SkillLoader开发 :p1b2, after p1b1, 3d
|
||||
P1b Memory开发 :p1b3, after p1b2, 2d
|
||||
P1b+P1a集成Runtime :p1b4, after p1b3, 1d
|
||||
P1b+P3 Skill测试 :p1b5, after p1b4, 1d
|
||||
P1b Critic评估器 :p1b6, after p1b5, 1d
|
||||
P1b bug修复 :p1b7, after p1b6, 1d
|
||||
P1b交付 :milestone, after p1b7, 1d
|
||||
|
||||
section P3业务技能
|
||||
P3场景调研 :p3a, 2026-03-04, 1d
|
||||
P3黄金样本制作 :p3b, after p3a, 3d
|
||||
P3提示词工程 :p3c, after p3b, 1d
|
||||
P3 AI批量翻译 :p3d, after p3c, 3d
|
||||
P3质量抽检 :p3e, after p3d, 2d
|
||||
P3交付Skill仓库 :milestone, after p3e, 0d
|
||||
|
||||
section P4前端发布
|
||||
P4环境搭建 :p4a, 2026-03-04, 2d
|
||||
P4 UI原型设计 :p4b, after p4a, 1d
|
||||
P4 Side Panel开发 :p4c, after p4b, 2d
|
||||
P4 Skill后台开发 :p4d, after p4c, 1d
|
||||
P4+P2 IPC对接 :p4e, after p4d, 1d
|
||||
P4测试框架搭建 :p4f, after p4e, 1d
|
||||
P4 E2E测试 :p4g, after p4f, 2d
|
||||
P4打包发布 :milestone, p4h, after p4g, 1d
|
||||
|
||||
section 全员里程碑
|
||||
环境搭建完成 :milestone, after p1a1 p2a p1b1 p3a p4a, 0d
|
||||
W1里程碑(链路打通) :milestone, m1_all, 2026-03-08, 0d
|
||||
E2E测试周 :active, e2e, 2026-03-11, 2d
|
||||
W2里程碑(正式发布) :milestone, m2_all, 2026-03-14, 0d
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 依赖关系图 -->
|
||||
<div class="section" id="dependency">
|
||||
<h2>🔗 依赖关系图</h2>
|
||||
<div class="chart-container">
|
||||
<div class="mermaid">
|
||||
graph TD
|
||||
A[Day 1-2: 环境搭建] --> B[Day 3: P1a Pipe 协议]
|
||||
B --> C[Day 4-5: P1a+P2 联调 Pipe ⭐]
|
||||
C --> D[Day 5 晚: W1 里程碑]
|
||||
|
||||
D --> E1[Day 6: P1a+P1b 集成]
|
||||
D --> E2[Day 6: P1b+P3 Skill]
|
||||
D --> E3[Day 6: P2+P4 UI]
|
||||
|
||||
E1 --> F[Day 7: 安全+AI]
|
||||
E2 --> F
|
||||
E3 --> F
|
||||
|
||||
F --> G[Day 8-9: E2E 测试]
|
||||
G --> H[Day 10: P4 打包发布]
|
||||
|
||||
style C fill:#ff6b6b,stroke:#c92a2a,color:#fff
|
||||
style D fill:#51cf66,stroke:#2f9e44,color:#fff
|
||||
style H fill:#51cf66,stroke:#2f9e44,color:#fff
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关键路径 -->
|
||||
<div class="section" id="critical">
|
||||
<h2>⚡ 关键路径可视化</h2>
|
||||
<div class="alert">
|
||||
<strong>⚠️ 极高风险</strong>：Day 4-5 的 P1a + P2 联调是整个项目的关键瓶颈。如果这两天 Pipe 通信不通，所有后续工作都会被阻塞！
|
||||
</div>
|
||||
<pre>
|
||||
Day 1-2 ━━━━━━━━━━━━━━━━━━━━━━ 环境搭建（并行）
|
||||
┃
|
||||
Day 3 ━━━━━┻━━━━━━━━━━━━━━━━━ P1a Pipe 协议开发 ⭐
|
||||
┃
|
||||
Day 4-5 ━━━┻━━━━━━━━━━━━━━━━━ <span style="color:#ef4444">P1a + P2 联调 Pipe ⭐⭐⭐</span>
|
||||
┃ （关键路径，阻塞所有人）
|
||||
┃
|
||||
▼
|
||||
<span style="color:#10b981">【W1 里程碑】链路打通</span>
|
||||
┃
|
||||
Day 6 ━━━━━┻━━━━━━━━━━━━━━━━━ 三组并行集成：
|
||||
├─ P1a + P1b (Runtime)
|
||||
├─ P1b + P3 (Skill)
|
||||
└─ P2 + P4 (UI)
|
||||
┃
|
||||
Day 7 ━━━━━┫ 安全策略 + AI 翻译
|
||||
┃
|
||||
Day 8-9 ━━━┻━━━━━━━━━━━━━━━━━ 全员 E2E 测试
|
||||
┃
|
||||
Day 10 ━━━━▼━━━━━━━━━━━━━━━━━ P4 打包发布
|
||||
<span style="color:#10b981">【W2 里程碑】正式发布</span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<!-- 人员负载 -->
|
||||
<div class="section" id="load">
|
||||
<h2>👥 人员负载分析</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>日期</th>
|
||||
<th>P1a（你）</th>
|
||||
<th>P1b</th>
|
||||
<th>P2</th>
|
||||
<th>P3</th>
|
||||
<th>P4</th>
|
||||
<th>总负载</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Day 1-2</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>5 人</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Day 3</td>
|
||||
<td><span class="critical">🔴 高</span></td>
|
||||
<td>🟡 低</td>
|
||||
<td>🟡 低</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>2 人高负载</td>
|
||||
</tr>
|
||||
<tr style="background: rgba(239, 68, 68, 0.1);">
|
||||
<td><strong>Day 4-5</strong></td>
|
||||
<td><span class="critical">🔴 极高</span></td>
|
||||
<td>🟢 中</td>
|
||||
<td><span class="critical">🔴 极高</span></td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td><strong>2 人关键路径</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Day 6</td>
|
||||
<td><span class="critical">🔴 高</span></td>
|
||||
<td><span class="critical">🔴 高</span></td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>2 人高负载</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Day 7</td>
|
||||
<td>🟢 中</td>
|
||||
<td><span class="critical">🔴 高</span></td>
|
||||
<td>🟢 中</td>
|
||||
<td><span class="critical">🔴 高</span></td>
|
||||
<td>🟢 中</td>
|
||||
<td>2 人高负载</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Day 8-9</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>🟢 中</td>
|
||||
<td>5 人 E2E</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Day 10</td>
|
||||
<td>🟡 低</td>
|
||||
<td>🟡 低</td>
|
||||
<td>🟡 低</td>
|
||||
<td>🟡 低</td>
|
||||
<td><span class="critical">🔴 高</span></td>
|
||||
<td>1 人高负载</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="color:#94a3b8;margin-top:10px;">
|
||||
<strong>图例：</strong> 🔴 极高/高负载 🟢 正常负载 🟡 低负载
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 风险热力图 -->
|
||||
<div class="section" id="risk">
|
||||
<h2>⚠️ 风险热力图</h2>
|
||||
<pre>
|
||||
风险等级
|
||||
时间 │ 低 │ 中 │ 高 │ 极高
|
||||
─────────┼────┼────┼────┼─────
|
||||
Day 1-2 │ ✓ │ │ │
|
||||
Day 3 │ │ ✓ │ │
|
||||
<span style="color:#ef4444">Day 4-5 │ │ │ │ ⭐⭐⭐ ← Pipe 通信不通</span>
|
||||
Day 6 │ │ │ ✓ │
|
||||
Day 7 │ │ ✓ │ │
|
||||
Day 8-9 │ │ ✓ │ │
|
||||
Day 10 │ │ ✓ │ │
|
||||
</pre>
|
||||
<div class="alert">
|
||||
<strong>预案（Day 4-5 极高风险）：</strong><br>
|
||||
1. Day 4 晚上还没通 → P1b 全力支援<br>
|
||||
2. Day 5 中午还没通 → 启动降级方案（HTTP 替代 Pipe）
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 里程碑 -->
|
||||
<div class="section" id="milestone">
|
||||
<h2>✅ 里程碑验收清单</h2>
|
||||
|
||||
<h3 style="color:#10b981;margin-top:20px;">W1 里程碑（Day 5 晚上）</h3>
|
||||
<div class="info">
|
||||
<strong>演示场景：</strong>
|
||||
<ol style="margin-left:20px;margin-top:10px;">
|
||||
<li>P4 打开 Side Panel UI</li>
|
||||
<li>输入："点击页面上的登录按钮"</li>
|
||||
<li>Vue → C++ → Rust → 大模型（mock）→ Rust → C++ → 浏览器</li>
|
||||
<li>浏览器真实点击按钮</li>
|
||||
</ol>
|
||||
</div>
|
||||
<p style="margin-top:15px;"><strong>验收标准：</strong></p>
|
||||
<ul style="margin-left:20px;color:#94a3b8;">
|
||||
<li>Pipe 双向通信稳定（无消息丢失）</li>
|
||||
<li>15 个 BrowserAction 全部测试通过</li>
|
||||
<li>MAC 白名单生效（非白名单域名被拦截）</li>
|
||||
<li>延迟 < 100ms（从命令到执行完成）</li>
|
||||
</ul>
|
||||
|
||||
<h3 style="color:#10b981;margin-top:30px;">W2 里程碑（Day 10）</h3>
|
||||
<p><strong>交付物：</strong></p>
|
||||
<ul style="margin-left:20px;color:#94a3b8;">
|
||||
<li>.deb 安装包（银河麒麟 V10）</li>
|
||||
<li>.exe 安装包（Windows 10/11）</li>
|
||||
<li>6 个业务场景演示视频</li>
|
||||
<li>完整文档（API + Skill 开发指南 + 部署手册）</li>
|
||||
</ul>
|
||||
<p style="margin-top:15px;"><strong>验收标准：</strong></p>
|
||||
<ul style="margin-left:20px;color:#94a3b8;">
|
||||
<li>两平台安装成功</li>
|
||||
<li>E2E 测试全部通过</li>
|
||||
<li>单元测试覆盖率 > 70%</li>
|
||||
<li>内存占用 < 10MB（sgClaw 进程）</li>
|
||||
<li>无已知 P0/P1 级 bug</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center;margin-top:40px;padding:20px;color:#64748b;">
|
||||
<p>📄 文档版本：v1.0 | 最后更新：2026-03-04 | 维护者：项目经理</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'dark',
|
||||
themeVariables: {
|
||||
primaryColor: '#1e293b',
|
||||
primaryTextColor: '#f1f5f9',
|
||||
primaryBorderColor: '#38bdf8',
|
||||
lineColor: '#94a3b8',
|
||||
secondaryColor: '#334155',
|
||||
tertiaryColor: '#0f172a'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
897
docs/archive/领导演示资料/docs-html/团队协作架构图.html
Normal file
897
docs/archive/领导演示资料/docs-html/团队协作架构图.html
Normal file
@@ -0,0 +1,897 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>sgClaw 团队协作架构图</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
padding: 40px 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.container { max-width: 1600px; margin: 0 auto; }
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(135deg, #38bdf8, #818cf8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
color: #94a3b8;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.diagram-section {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.diagram-section h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 30px;
|
||||
color: #38bdf8;
|
||||
border-bottom: 2px solid rgba(56,189,248,0.3);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.diagram-section h3 {
|
||||
font-size: 1.3rem;
|
||||
margin: 25px 0 15px;
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
/* 总架构图样式 */
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.person-card {
|
||||
background: rgba(30,41,59,0.8);
|
||||
border: 2px solid;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.person-card.p1a { border-color: #ef4444; }
|
||||
.person-card.p1b { border-color: #f97316; }
|
||||
.person-card.p2 { border-color: #38bdf8; }
|
||||
.person-card.p3 { border-color: #10b981; }
|
||||
.person-card.p4 { border-color: #818cf8; }
|
||||
|
||||
.person-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.person-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.person-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.person-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.what-section, .why-section, .output-section {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.section-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.section-content {
|
||||
font-size: 0.9rem;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.tech-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.tech-tag {
|
||||
background: rgba(56,189,248,0.15);
|
||||
color: #38bdf8;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 接口连接线 */
|
||||
.interface-container {
|
||||
position: relative;
|
||||
margin: 50px 0;
|
||||
padding: 30px;
|
||||
background: rgba(15,23,42,0.5);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.interface-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
.interface-node {
|
||||
background: rgba(30,41,59,0.9);
|
||||
border: 2px solid;
|
||||
border-radius: 10px;
|
||||
padding: 15px 20px;
|
||||
min-width: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
.interface-node.p1a { border-color: #ef4444; color: #ef4444; }
|
||||
.interface-node.p1b { border-color: #f97316; color: #f97316; }
|
||||
.interface-node.p2 { border-color: #38bdf8; color: #38bdf8; }
|
||||
.interface-node.p3 { border-color: #10b981; color: #10b981; }
|
||||
.interface-node.p4 { border-color: #818cf8; color: #818cf8; }
|
||||
|
||||
.interface-arrow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.arrow-line {
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background: #64748b;
|
||||
position: relative;
|
||||
}
|
||||
.arrow-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -4px;
|
||||
border: 5px solid transparent;
|
||||
border-left-color: #64748b;
|
||||
}
|
||||
.arrow-label {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
background: #0f172a;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 详细架构图 */
|
||||
.detail-diagram {
|
||||
background: rgba(15,23,42,0.8);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.layer-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
.layer {
|
||||
background: rgba(30,41,59,0.6);
|
||||
border-left: 4px solid;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
.layer.runtime { border-color: #ef4444; }
|
||||
.layer.skill { border-color: #f97316; }
|
||||
.layer.browser { border-color: #38bdf8; }
|
||||
.layer.ai { border-color: #10b981; }
|
||||
.layer.ui { border-color: #818cf8; }
|
||||
|
||||
.layer-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.layer-modules {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.module-box {
|
||||
background: rgba(56,189,248,0.1);
|
||||
border: 1px solid rgba(56,189,248,0.3);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* 数据流图 */
|
||||
.flow-diagram {
|
||||
background: rgba(15,23,42,0.8);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.flow-num {
|
||||
background: #38bdf8;
|
||||
color: #0f172a;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.flow-content {
|
||||
flex: 1;
|
||||
}
|
||||
.flow-actor {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.flow-action {
|
||||
font-size: 1rem;
|
||||
color: #f1f5f9;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.critical-badge {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
.nav-button {
|
||||
background: rgba(56,189,248,0.2);
|
||||
border: 1px solid rgba(56,189,248,0.5);
|
||||
color: #38bdf8;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.nav-button:hover {
|
||||
background: rgba(56,189,248,0.3);
|
||||
border-color: #38bdf8;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { background: white; color: black; }
|
||||
.diagram-section { page-break-inside: avoid; border: 1px solid #ccc; }
|
||||
.nav-buttons { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>📊 sgClaw 团队协作架构图</h1>
|
||||
<p class="subtitle">5 人团队 · 2 周开发计划 · 职责分工与接口对接全景</p>
|
||||
|
||||
<!-- 第一图：总架构图 -->
|
||||
<div class="diagram-section">
|
||||
<h2>一、团队协作总架构（5 人分工全景）</h2>
|
||||
|
||||
<div class="overview-grid">
|
||||
<!-- P1a 卡片 -->
|
||||
<div class="person-card p1a">
|
||||
<div class="person-header">
|
||||
<div class="person-icon">⚡</div>
|
||||
<div>
|
||||
<div class="person-title">P1a · 核心通信</div>
|
||||
<div class="person-subtitle">赵义仑 <span class="critical-badge">关键路径</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="what-section">
|
||||
<div class="section-label">干什么？</div>
|
||||
<div class="section-content">
|
||||
打通 AI 引擎和浏览器之间的"通信管道"，让 AI 能控制浏览器操作
|
||||
</div>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-tag">Rust</span>
|
||||
<span class="tech-tag">STDIO Pipe</span>
|
||||
<span class="tech-tag">~900 行</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="why-section">
|
||||
<div class="section-label">为什么？</div>
|
||||
<div class="section-content">
|
||||
这是整个系统的"心脏"，如果 AI 和浏览器通信不通，后续所有功能都无法实现
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section">
|
||||
<div class="section-label">产出物</div>
|
||||
<div class="section-content">
|
||||
• Pipe 双向通信协议<br>
|
||||
• 15 个浏览器操作 API<br>
|
||||
• MAC 安全策略模块
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P1b 卡片 -->
|
||||
<div class="person-card p1b">
|
||||
<div class="person-header">
|
||||
<div class="person-icon">🧠</div>
|
||||
<div>
|
||||
<div class="person-title">P1b · 业务支持</div>
|
||||
<div class="person-subtitle">Rust 工程师</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="what-section">
|
||||
<div class="section-label">干什么？</div>
|
||||
<div class="section-content">
|
||||
让 AI 能"记住"操作经验，能加载业务技能包，让 AI 越用越聪明
|
||||
</div>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-tag">Rust</span>
|
||||
<span class="tech-tag">SQLite</span>
|
||||
<span class="tech-tag">~600 行</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="why-section">
|
||||
<div class="section-label">为什么？</div>
|
||||
<div class="section-content">
|
||||
AI 不能每次都重新学习，需要记忆系统沉淀经验，需要技能加载器复用业务逻辑
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section">
|
||||
<div class="section-label">产出物</div>
|
||||
<div class="section-content">
|
||||
• Skill 加载器与沙箱<br>
|
||||
• 三层记忆系统<br>
|
||||
• AI 推理引擎集成
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P2 卡片 -->
|
||||
<div class="person-card p2">
|
||||
<div class="person-header">
|
||||
<div class="person-icon">🌐</div>
|
||||
<div>
|
||||
<div class="person-title">P2 · 浏览器对接</div>
|
||||
<div class="person-subtitle">C++ 工程师</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="what-section">
|
||||
<div class="section-label">干什么？</div>
|
||||
<div class="section-content">
|
||||
在浏览器内核中嵌入 sgClaw 进程，接收 P1a 的指令，调用现有 70+ 浏览器能力
|
||||
</div>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-tag">C++</span>
|
||||
<span class="tech-tag">Chromium</span>
|
||||
<span class="tech-tag">~600 行</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="why-section">
|
||||
<div class="section-label">为什么？</div>
|
||||
<div class="section-content">
|
||||
浏览器是 C++ 写的，需要 C++ 工程师在内核中启动子进程、转发指令、管理安全白名单
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section">
|
||||
<div class="section-label">产出物</div>
|
||||
<div class="section-content">
|
||||
• SgClawProcessHost<br>
|
||||
• Pipe 监听器<br>
|
||||
• MAC 白名单检查器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P3 卡片 -->
|
||||
<div class="person-card p3">
|
||||
<div class="person-header">
|
||||
<div class="person-icon">🤖</div>
|
||||
<div>
|
||||
<div class="person-title">P3 · AI 辅助迁移</div>
|
||||
<div class="person-subtitle">业务 + AI 工程</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="what-section">
|
||||
<div class="section-label">干什么？</div>
|
||||
<div class="section-content">
|
||||
用 AI 把现有 400+ 个业务场景自动翻译成 Skill 技能包，人工制作黄金样本
|
||||
</div>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-tag">JavaScript</span>
|
||||
<span class="tech-tag">Qwen/DeepSeek</span>
|
||||
<span class="tech-tag">400+ Skill</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="why-section">
|
||||
<div class="section-label">为什么？</div>
|
||||
<div class="section-content">
|
||||
400+ 场景人工翻译不现实，但全靠 AI 质量没保证。需要人 + AI 配合：人做样本，AI 批量翻译
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section">
|
||||
<div class="section-label">产出物</div>
|
||||
<div class="section-content">
|
||||
• 10-15 个黄金样本<br>
|
||||
• 翻译提示词工程<br>
|
||||
• 400+ AI 生成 Skill
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P4 卡片 -->
|
||||
<div class="person-card p4">
|
||||
<div class="person-header">
|
||||
<div class="person-icon">🖥️</div>
|
||||
<div>
|
||||
<div class="person-title">P4 · 前端发布</div>
|
||||
<div class="person-subtitle">前端 + DevOps</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="what-section">
|
||||
<div class="section-label">干什么？</div>
|
||||
<div class="section-content">
|
||||
做 AI 助手面板让用户输入指令，做 Skill 管理后台，搭建测试并打包发布
|
||||
</div>
|
||||
<div class="tech-stack">
|
||||
<span class="tech-tag">Vue</span>
|
||||
<span class="tech-tag">Jest</span>
|
||||
<span class="tech-tag">~150 行</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="why-section">
|
||||
<div class="section-label">为什么？</div>
|
||||
<div class="section-content">
|
||||
AI 能力再强，用户看不到也用不了。需要界面让用户交互，需要 DevOps 发布安装包
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output-section">
|
||||
<div class="section-label">产出物</div>
|
||||
<div class="section-content">
|
||||
• Side Panel UI<br>
|
||||
• Skill 管理后台<br>
|
||||
• .deb + .exe 安装包
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:30px;padding:20px;background:rgba(56,189,248,0.1);border-left:4px solid #38bdf8;border-radius:8px;">
|
||||
<strong style="color:#38bdf8;">💡 总结</strong>：<span style="color:#cbd5e1;">
|
||||
P1a 是<strong style="color:#ef4444;">关键路径</strong>（通信不通，全项目停摆）→ P2 配合 P1a 打通链路 →
|
||||
P1b 让 AI 有记忆和技能 → P3 用 AI 批量生成内容 → P4 做界面和发布。
|
||||
5 人各司其职，Day 4-5 全员等 P1a+P2 联调成功。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二图：接口对接关系图 -->
|
||||
<div class="diagram-section">
|
||||
<h2>二、人员接口对接关系图</h2>
|
||||
|
||||
<h3>1. 关键路径对接：P1a ↔ P2（Day 4-5）<span class="critical-badge">极高优先级</span></h3>
|
||||
<div class="interface-container">
|
||||
<div class="interface-row">
|
||||
<div class="interface-node p1a">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P1a · Rust 端</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">发送 JSON 指令</div>
|
||||
</div>
|
||||
<div class="interface-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-label">STDIO Pipe</div>
|
||||
</div>
|
||||
<div class="interface-node p2">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P2 · C++ 端</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">接收指令调用浏览器</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:20px;padding:15px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:8px;">
|
||||
<div style="font-weight:700;color:#ef4444;margin-bottom:8px;">为什么这是关键路径？</div>
|
||||
<div style="color:#cbd5e1;font-size:0.9rem;">
|
||||
这两人如果没对接成功，整个系统就是"两张皮"——AI 引擎和浏览器无法通信，其他人的工作全部白做。
|
||||
Day 4-5 必须打通，否则启动降级方案（HTTP 替代）。
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:15px;padding:15px;background:rgba(30,41,59,0.6);border-radius:8px;">
|
||||
<div style="font-weight:700;color:#38bdf8;margin-bottom:8px;">接口协议示例：</div>
|
||||
<pre style="background:rgba(15,23,42,0.8);padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;"><code>{
|
||||
"sequence_id": 1,
|
||||
"action": "click",
|
||||
"params": {
|
||||
"selector": "#submit-button",
|
||||
"button": "left"
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>2. Runtime 集成对接：P1a ↔ P1b（Day 6）</h3>
|
||||
<div class="interface-container">
|
||||
<div class="interface-row">
|
||||
<div class="interface-node p1a">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P1a</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">提供 BrowserPipeTool</div>
|
||||
</div>
|
||||
<div class="interface-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-label">Rust trait</div>
|
||||
</div>
|
||||
<div class="interface-node p1b">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P1b</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">注册到 AgentRuntime</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:15px;color:#cbd5e1;font-size:0.9rem;">
|
||||
<strong>为什么？</strong>P1b 的 AI 引擎需要能调用 P1a 的浏览器操作工具，通过 Rust trait 实现插件式对接。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>3. Skill 加载对接：P1b ↔ P3（Day 6-7）</h3>
|
||||
<div class="interface-container">
|
||||
<div class="interface-row">
|
||||
<div class="interface-node p3">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P3</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">提供 Skill.js 文件</div>
|
||||
</div>
|
||||
<div class="interface-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-label">Ed25519 签名</div>
|
||||
</div>
|
||||
<div class="interface-node p1b">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P1b</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">扫描、验签、沙箱执行</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:15px;color:#cbd5e1;font-size:0.9rem;">
|
||||
<strong>为什么？</strong>P3 写的业务技能需要被 P1b 的加载器识别并执行，签名保证安全性。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>4. UI 交互对接：P2 ↔ P4（Day 6）</h3>
|
||||
<div class="interface-container">
|
||||
<div class="interface-row">
|
||||
<div class="interface-node p4">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P4 · Vue 前端</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">调用 IPC 接口</div>
|
||||
</div>
|
||||
<div class="interface-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-label">window.superrpa.sgclaw.*</div>
|
||||
</div>
|
||||
<div class="interface-node p2">
|
||||
<div style="font-weight:700;margin-bottom:5px;">P2 · C++ 后端</div>
|
||||
<div style="font-size:0.8rem;color:#cbd5e1;">暴露浏览器 API</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:15px;color:#cbd5e1;font-size:0.9rem;">
|
||||
<strong>为什么？</strong>用户界面（Vue）需要调用 C++ 暴露的接口来启动/停止 sgClaw、查看 Skill 列表等。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三图：数据流全链路 -->
|
||||
<div class="diagram-section">
|
||||
<h2>三、数据流全链路（端到端完整流程）</h2>
|
||||
|
||||
<div class="flow-diagram">
|
||||
<div style="text-align:center;margin-bottom:25px;color:#94a3b8;">
|
||||
从用户输入到浏览器执行，数据经过 5 个角色的系统
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">1</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P4 · Vue 前端</div>
|
||||
<div class="flow-action">用户在 Side Panel 输入："导出 ERP 月度报表"</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">2</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P2 · C++ 浏览器层</div>
|
||||
<div class="flow-action">Vue 通过 IPC 调用 C++ 的 <code>sendCommand(text)</code>，C++ 启动 sgClaw 子进程</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">3</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P1b · AI Runtime</div>
|
||||
<div class="flow-action">接收用户指令，查询记忆系统（L2 SQLite）：上次怎么导出的？检索到 P3 提供的 Skill</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">4</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P3 · Skill（被加载）</div>
|
||||
<div class="flow-action">Skill 内容："访问 ERP → 点击报表 → 选择月份 → 导出 Excel"，转换成浏览器操作序列</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">5</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P1a · Pipe 通信</div>
|
||||
<div class="flow-action">把操作序列包装成 JSON，通过 STDIO Pipe 发送给 P2：<code>{"action":"click", "selector":"#export"}</code></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">6</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P2 · CommandRouter</div>
|
||||
<div class="flow-action">C++ 接收 JSON，调用现有 CommandRouter，CommandRouter 通过 CDP 协议操作浏览器</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">7</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">浏览器</div>
|
||||
<div class="flow-action">真实执行：打开 ERP 页面 → 点击按钮 → 下载文件 → 完成✅</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-num">8</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-actor">P1b · 记忆系统</div>
|
||||
<div class="flow-action">把这次成功的操作记录到 L2 长期记忆，下次直接复用，从 8 步降到 1 步</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:25px;padding:20px;background:rgba(16,185,129,0.1);border-left:4px solid #10b981;border-radius:8px;">
|
||||
<strong style="color:#10b981;">🚀 自进化</strong>：<span style="color:#cbd5e1;">
|
||||
第一次需要 AI 推理 8 步，第二次查到 Skill 缩短到 4 步，多次执行后记忆沉淀，一句话直接执行。
|
||||
这就是为什么需要 P1b 的记忆系统 + P3 的 Skill 仓库。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四图：关键路径时间轴 -->
|
||||
<div class="diagram-section">
|
||||
<h2>四、关键路径时间轴（Day 4-5 为什么是瓶颈？）</h2>
|
||||
|
||||
<div class="detail-diagram">
|
||||
<div style="text-align:center;margin-bottom:20px;">
|
||||
<span style="font-size:1.2rem;color:#ef4444;font-weight:700;">⭐ Day 4-5：P1a + P2 联调 Pipe 通信</span>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(239,68,68,0.1);border:2px solid #ef4444;border-radius:8px;padding:20px;margin-bottom:20px;">
|
||||
<div style="font-weight:700;color:#ef4444;font-size:1.1rem;margin-bottom:10px;">为什么是极高风险？</div>
|
||||
<div style="color:#cbd5e1;line-height:1.8;">
|
||||
1. <strong>阻塞所有人</strong>：如果 P1a 和 P2 的 Pipe 通信打不通，AI 引擎就是空转，浏览器接收不到指令。
|
||||
P1b 做的记忆系统、P3 准备的 Skill、P4 做的界面，全部无法联动测试。<br>
|
||||
2. <strong>技术难度高</strong>：STDIO Pipe 是进程私有通道，需要 C++ 正确传递文件描述符给 Rust 子进程，
|
||||
一旦出错（如管道被关闭、缓冲区满、JSON 格式错误），排查困难。<br>
|
||||
3. <strong>跨语言调试</strong>：C++ ↔ Rust，两种语言的调试工具不互通，需要两人高度配合才能定位问题。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
|
||||
<div style="background:rgba(30,41,59,0.6);border-radius:8px;padding:20px;">
|
||||
<div style="font-weight:700;color:#38bdf8;margin-bottom:10px;">如果成功（Day 5 晚）✅</div>
|
||||
<div style="color:#cbd5e1;line-height:1.7;font-size:0.9rem;">
|
||||
• W1 里程碑达成，演示全链路<br>
|
||||
• P1b 可以对接 P1a 的工具<br>
|
||||
• P3 可以测试 Skill 执行<br>
|
||||
• P4 可以联调 UI 交互<br>
|
||||
• 全员进入并行开发模式
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);border-radius:8px;padding:20px;">
|
||||
<div style="font-weight:700;color:#ef4444;margin-bottom:10px;">如果失败（Day 5 中午）❌</div>
|
||||
<div style="color:#cbd5e1;line-height:1.7;font-size:0.9rem;">
|
||||
<strong>预案 1</strong>：P1b 全力支援排查<br>
|
||||
<strong>预案 2</strong>：启动降级方案（HTTP 替代 Pipe）<br>
|
||||
<strong>后果</strong>：项目延期 2-3 天，或者牺牲安全性（HTTP 有端口暴露风险）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第五图：技术栈分层 -->
|
||||
<div class="diagram-section">
|
||||
<h2>五、技术栈分层（每层对应的人员）</h2>
|
||||
|
||||
<div class="layer-stack">
|
||||
<div class="layer ui">
|
||||
<div class="layer-title" style="color:#818cf8;">
|
||||
📱 用户交互层 → P4 负责
|
||||
</div>
|
||||
<div style="color:#cbd5e1;margin-bottom:10px;">
|
||||
用户看到的界面，输入指令、查看进度、管理 Skill
|
||||
</div>
|
||||
<div class="layer-modules">
|
||||
<div class="module-box">Side Panel (Vue)</div>
|
||||
<div class="module-box">Skill Manager (Vue)</div>
|
||||
<div class="module-box">IPC 调用层</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer browser">
|
||||
<div class="layer-title" style="color:#38bdf8;">
|
||||
🌐 浏览器内核层 → P2 负责
|
||||
</div>
|
||||
<div style="color:#cbd5e1;margin-bottom:10px;">
|
||||
在 Chromium 中嵌入 sgClaw 进程，转发指令，调用 70+ 现有浏览器能力
|
||||
</div>
|
||||
<div class="layer-modules">
|
||||
<div class="module-box">SgClawProcessHost (C++)</div>
|
||||
<div class="module-box">PipeListener (C++)</div>
|
||||
<div class="module-box">MacWhitelistCheck (C++)</div>
|
||||
<div class="module-box">CommandRouter (已有)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer runtime">
|
||||
<div class="layer-title" style="color:#ef4444;">
|
||||
⚡ 通信与工具层 → P1a 负责 <span class="critical-badge">关键</span>
|
||||
</div>
|
||||
<div style="color:#cbd5e1;margin-bottom:10px;">
|
||||
Pipe 协议、JSON 消息序列化、浏览器操作 API、MAC 安全策略
|
||||
</div>
|
||||
<div class="layer-modules">
|
||||
<div class="module-box">PipeReader/Writer (Rust)</div>
|
||||
<div class="module-box">BrowserPipeTool (Rust)</div>
|
||||
<div class="module-box">MacPolicy (Rust)</div>
|
||||
<div class="module-box">15 个 BrowserAction</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer skill">
|
||||
<div class="layer-title" style="color:#f97316;">
|
||||
🧠 AI 引擎层 → P1b 负责
|
||||
</div>
|
||||
<div style="color:#cbd5e1;margin-bottom:10px;">
|
||||
AI 推理、记忆系统、Skill 加载、自进化能力
|
||||
</div>
|
||||
<div class="layer-modules">
|
||||
<div class="module-box">AgentRuntime (Rust)</div>
|
||||
<div class="module-box">SkillLoader (Rust)</div>
|
||||
<div class="module-box">Memory (Ring Buffer + SQLite)</div>
|
||||
<div class="module-box">Critic 评估器</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layer ai">
|
||||
<div class="layer-title" style="color:#10b981;">
|
||||
📦 业务技能层 → P3 负责
|
||||
</div>
|
||||
<div style="color:#cbd5e1;margin-bottom:10px;">
|
||||
400+ 业务场景的 Skill 定义，用 AI 批量生成 + 人工质检
|
||||
</div>
|
||||
<div class="layer-modules">
|
||||
<div class="module-box">10-15 黄金样本 (手写)</div>
|
||||
<div class="module-box">Prompt Engineering</div>
|
||||
<div class="module-box">400+ AI 生成 Skill</div>
|
||||
<div class="module-box">Ed25519 签名工具</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:25px;padding:20px;background:rgba(129,140,248,0.1);border-left:4px solid #818cf8;border-radius:8px;">
|
||||
<strong style="color:#818cf8;">📐 设计原则</strong>：<span style="color:#cbd5e1;">
|
||||
<strong>从下往上依赖</strong>，上层可以调用下层，下层不依赖上层。
|
||||
P1a 是最底层（Pipe 通信），P2 调用 P1a，P1b 调用 P1a，P4 调用 P2。
|
||||
这样保证模块独立，任何一层出问题不会波及其他层。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第六图：为什么这样分工？ -->
|
||||
<div class="diagram-section">
|
||||
<h2>六、为什么这样分工？（设计依据）</h2>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;">
|
||||
<div style="background:rgba(30,41,59,0.6);border-radius:8px;padding:20px;">
|
||||
<div style="font-weight:700;color:#38bdf8;margin-bottom:15px;font-size:1.1rem;">❓ 为什么 P1 要拆成 P1a 和 P1b？</div>
|
||||
<div style="color:#cbd5e1;line-height:1.8;font-size:0.95rem;">
|
||||
<strong>原因 1</strong>：P1a 的 Pipe 通信是<strong style="color:#ef4444;">关键路径</strong>，
|
||||
如果一个人承担 ~1500 行代码，Day 4-5 压力太大，容易延期。拆分后 P1a 专注通信（900 行），
|
||||
P1b 做业务支持（600 行），风险分散。<br><br>
|
||||
<strong>原因 2</strong>：P1a 负责的模块（Pipe/MAC）和 P1b 负责的模块（Skill/Memory）
|
||||
技术栈不同，耦合度低，可以<strong>并行开发</strong>。Day 6 之前互不依赖，Day 6 再对接。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);border-radius:8px;padding:20px;">
|
||||
<div style="font-weight:700;color:#10b981;margin-bottom:15px;font-size:1.1rem;">❓ 为什么 P3 用 AI 辅助而不是全手写？</div>
|
||||
<div style="color:#cbd5e1;line-height:1.8;font-size:0.95rem;">
|
||||
<strong>现实约束</strong>：agent-vue 有 400+ 个业务场景，全靠人手写 Skill 需要 <strong>2-3 个月</strong>。
|
||||
项目只有 2 周，不可能做到。<br><br>
|
||||
<strong>方案</strong>：人工精选 10-15 个代表性场景，写成"黄金样本"（高质量、带详细注释）。
|
||||
然后用内网大模型（Qwen-72B/DeepSeek）批量翻译剩余 390 个场景，准确率 85%-90%。
|
||||
最后人工抽检 20 个，确保质量。<strong>人 + AI 配合</strong>，2 周完成 400 个 Skill。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);border-radius:8px;padding:20px;">
|
||||
<div style="font-weight:700;color:#818cf8;margin-bottom:15px;font-size:1.1rem;">❓ 为什么 P4 工作量这么少（~150 行）？</div>
|
||||
<div style="color:#cbd5e1;line-height:1.8;font-size:0.95rem;">
|
||||
<strong>复用现有</strong>：SuperRPA 浏览器已经有 Side Panel 框架和 IPC 通道，
|
||||
P4 只需要写两个 Vue 组件（AI 助手面板 + Skill 管理）。<br><br>
|
||||
<strong>测试与发布</strong>：P4 的主要工作在后期（Day 8-10），搭建测试框架、运行 E2E、
|
||||
打包 .deb 和 .exe。前期（Day 1-7）工作量确实少，可以支援其他人（如帮 P3 做 Skill 质检）。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);border-radius:8px;padding:20px;">
|
||||
<div style="font-weight:700;color:#f97316;margin-bottom:15px;font-size:1.1rem;">❓ 如果 P1a + P2 联调失败怎么办？</div>
|
||||
<div style="color:#cbd5e1;line-height:1.8;font-size:0.95rem;">
|
||||
<strong>预案 1</strong>（Day 4 晚）：P1b 暂停自己的工作，全力支援 P1a 排查 Pipe 问题。
|
||||
三人配合比两人快。<br><br>
|
||||
<strong>预案 2</strong>（Day 5 中午）：如果 Pipe 实在调不通，启动<strong>降级方案</strong>——
|
||||
改用 HTTP 本地端口通信。牺牲一些安全性（端口可被检测），但能保证项目按时交付。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="nav-buttons">
|
||||
<button class="nav-button" onclick="window.print()">📄 打印 PDF</button>
|
||||
<button class="nav-button" onclick="window.scrollTo({top:0,behavior:'smooth'})">⬆️ 回到顶部</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
305
docs/archive/领导演示资料/docs-html/系统架构图_Mermaid.html
Normal file
305
docs/archive/领导演示资料/docs-html/系统架构图_Mermaid.html
Normal file
@@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>sgClaw 系统架构图</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f8fafc;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
margin-bottom: 30px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 36px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.88rem;
|
||||
color: #334155;
|
||||
font-weight: 500;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.diagram-wrap {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 40px 20px;
|
||||
margin-bottom: 30px;
|
||||
max-width: 1600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.diagram-wrap h2 {
|
||||
font-size: 1.25rem;
|
||||
color: #1e293b;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
.mermaid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.note {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 16px 24px;
|
||||
background: #fff7ed;
|
||||
border-left: 4px solid #f97316;
|
||||
border-radius: 8px;
|
||||
color: #7c3aed;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
color: #334155;
|
||||
}
|
||||
.note strong { color: #ea580c; }
|
||||
@media print { body { background: white; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>sgClaw 系统架构图</h1>
|
||||
<p class="subtitle">浏览器内嵌 AI Agent · 5 人团队 · 关键路径标注</p>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background:#fecaca;border:2px solid #ef4444;"></div>
|
||||
<span><strong>P1a</strong> 核心通信（赵义仑）</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background:#fed7aa;border:2px solid #f97316;"></div>
|
||||
<span><strong>P1b</strong> AI 引擎</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background:#bfdbfe;border:2px solid #3b82f6;"></div>
|
||||
<span><strong>P2</strong> 浏览器对接</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background:#bbf7d0;border:2px solid #22c55e;"></div>
|
||||
<span><strong>P3</strong> Skill 迁移</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background:#e9d5ff;border:2px solid #a855f7;"></div>
|
||||
<span><strong>P4</strong> 前端发布</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background:#f1f5f9;border:2px dashed #94a3b8;"></div>
|
||||
<span>已有系统（复用）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主架构图 -->
|
||||
<div class="diagram-wrap">
|
||||
<h2>系统架构总览</h2>
|
||||
<div class="mermaid">
|
||||
graph TB
|
||||
|
||||
User(["👤 业务人员"])
|
||||
|
||||
subgraph BROWSER["🌐 SuperRPA 浏览器（Chromium）"]
|
||||
direction TB
|
||||
|
||||
subgraph UI["用户交互层 · P4 负责"]
|
||||
SidePanel["AI 助手 Side Panel\nVue 组件"]
|
||||
SkillMgr["Skill 管理后台\nVue 组件"]
|
||||
end
|
||||
|
||||
subgraph KERNEL["浏览器内核层 · P2 负责（新增 ~600 行 C++）"]
|
||||
ProcessHost["SgClawProcessHost\n管理 sgClaw 子进程"]
|
||||
PipeListener["PipeListener\n监听 STDIO Pipe"]
|
||||
MACCheck["MAC 白名单检查\n校验指令合法性"]
|
||||
end
|
||||
|
||||
subgraph EXISTING["已有系统（直接复用）"]
|
||||
CommandRouter["CommandRouter\n70+ 浏览器命令"]
|
||||
CDP["CDP 协议桥\nChrome DevTools"]
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
subgraph SGCLAW["⚙️ sgClaw（独立 Rust 子进程）"]
|
||||
direction TB
|
||||
|
||||
subgraph P1A["通信与工具层 · P1a 负责（~900 行 Rust）⚡ 关键路径"]
|
||||
PipeRW["Pipe Reader/Writer\nSTDIO 双向通信"]
|
||||
BrowserTool["BrowserPipeTool\n15 个浏览器 Action"]
|
||||
MacPolicy["MacPolicy\n安全策略执行"]
|
||||
end
|
||||
|
||||
subgraph P1B["AI 引擎层 · P1b 负责（~600 行 Rust）"]
|
||||
Runtime["AgentRuntime\nZeroClaw ReAct 循环"]
|
||||
Memory["三层记忆系统\nL0即时 / L1 RingBuffer / L2 SQLite"]
|
||||
SkillLoader["SkillLoader\nEd25519 验签 + JS 沙箱"]
|
||||
Critic["Critic 评估器\n自动纠错"]
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
subgraph EXT["外部服务"]
|
||||
direction LR
|
||||
|
||||
subgraph LLM["🤖 AI 大模型（内网部署）"]
|
||||
LLM1["Claude 3.5 / GPT-4\n通用推理"]
|
||||
LLM2["Qwen-72B / DeepSeek\nSkill 批量翻译"]
|
||||
end
|
||||
|
||||
subgraph SKILLS["📦 Skill 技能仓库 · P3 负责"]
|
||||
GoldenSkill["黄金样本\n10-15 个手写"]
|
||||
AISkill["AI 批量生成\n400+ 个业务场景"]
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
%% ── 主数据流 ──────────────────────────────
|
||||
User -->|"输入自然语言指令"| SidePanel
|
||||
SidePanel <-->|"window.superrpa.sgclaw.*\nIPC 调用"| ProcessHost
|
||||
SkillMgr <-->|"IPC"| ProcessHost
|
||||
|
||||
ProcessHost --> PipeListener
|
||||
ProcessHost -.->|"复用已有能力"| CommandRouter
|
||||
CommandRouter -.-> CDP
|
||||
|
||||
PipeListener ==>|"⚡ STDIO Pipe\nJSON 消息流\n【关键路径 Day 4-5】"| PipeRW
|
||||
|
||||
PipeRW --> BrowserTool
|
||||
PipeRW --> MacPolicy
|
||||
BrowserTool --> Runtime
|
||||
MacPolicy --> Runtime
|
||||
|
||||
Runtime <-->|"推理请求 / 流式响应"| LLM1
|
||||
LLM2 -->|"批量 Skill 翻译"| AISkill
|
||||
|
||||
Runtime --> Memory
|
||||
Runtime --> SkillLoader
|
||||
Runtime --> Critic
|
||||
|
||||
SkillLoader -->|"扫描 + 验签"| GoldenSkill
|
||||
SkillLoader -->|"扫描 + 验签"| AISkill
|
||||
|
||||
BrowserTool ==>|"BrowserAction 结果"| PipeListener
|
||||
PipeListener --> CommandRouter
|
||||
|
||||
%% ── 样式 ──────────────────────────────────
|
||||
classDef p1a fill:#fecaca,stroke:#ef4444,stroke-width:2px,color:#7f1d1d
|
||||
classDef p1b fill:#fed7aa,stroke:#f97316,stroke-width:2px,color:#7c2d12
|
||||
classDef p2 fill:#bfdbfe,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
|
||||
classDef p3 fill:#bbf7d0,stroke:#22c55e,stroke-width:2px,color:#14532d
|
||||
classDef p4 fill:#e9d5ff,stroke:#a855f7,stroke-width:2px,color:#4a1d96
|
||||
classDef ext fill:#f1f5f9,stroke:#94a3b8,stroke-width:2px,stroke-dasharray:6 3,color:#475569
|
||||
classDef user fill:#fef9c3,stroke:#eab308,stroke-width:2px,color:#713f12
|
||||
|
||||
class PipeRW,BrowserTool,MacPolicy p1a
|
||||
class Runtime,Memory,SkillLoader,Critic p1b
|
||||
class ProcessHost,PipeListener,MACCheck p2
|
||||
class GoldenSkill,AISkill,LLM2 p3
|
||||
class SidePanel,SkillMgr p4
|
||||
class CommandRouter,CDP,LLM1 ext
|
||||
class User user
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人员协作图 -->
|
||||
<div class="diagram-wrap">
|
||||
<h2>人员对接关系 · 时间节点</h2>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
|
||||
subgraph W1["第一周（Day 1-5）"]
|
||||
direction TB
|
||||
P1a_W1["P1a · 赵义仑\nPipe 协议 + BrowserTool\nDay 1-5"]
|
||||
P2_W1["P2 · C++ 工程师\nProcessHost + PipeListener\nDay 1-5"]
|
||||
P1b_W1["P1b · Rust 工程师\nRuntime + Memory 框架\nDay 1-4（等待联调）"]
|
||||
P3_W1["P3 · 业务工程师\n场景调研 + 黄金样本\nDay 1-5"]
|
||||
P4_W1["P4 · 前端工程师\nSide Panel 界面\nDay 1-4"]
|
||||
end
|
||||
|
||||
subgraph CRIT["⚡ Day 4-5 关键联调"]
|
||||
Pipe["P1a + P2\nPipe 通信打通\n极高风险 · 全员等待"]
|
||||
end
|
||||
|
||||
subgraph W2["第二周（Day 6-10）"]
|
||||
direction TB
|
||||
INT1["P1a + P1b 对接\nBrowserTool → Runtime\nDay 6"]
|
||||
INT2["P1b + P3 对接\nSkillLoader ← Skill 文件\nDay 6-7"]
|
||||
INT3["P2 + P4 对接\nIPC 接口 → UI\nDay 6"]
|
||||
TEST["全员 E2E 测试\n6 个业务场景验收\nDay 8-9"]
|
||||
SHIP["P4 打包发布\n.deb + .exe\nDay 10"]
|
||||
end
|
||||
|
||||
W1 --> CRIT --> W2
|
||||
|
||||
classDef p1a fill:#fecaca,stroke:#ef4444,stroke-width:2px,color:#7f1d1d
|
||||
classDef p1b fill:#fed7aa,stroke:#f97316,stroke-width:2px,color:#7c2d12
|
||||
classDef p2 fill:#bfdbfe,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
|
||||
classDef p3 fill:#bbf7d0,stroke:#22c55e,stroke-width:2px,color:#14532d
|
||||
classDef p4 fill:#e9d5ff,stroke:#a855f7,stroke-width:2px,color:#4a1d96
|
||||
classDef crit fill:#fef2f2,stroke:#ef4444,stroke-width:3px,color:#7f1d1d
|
||||
|
||||
class P1a_W1,INT1 p1a
|
||||
class P1b_W1,INT2 p1b
|
||||
class P2_W1,INT3 p2
|
||||
class P3_W1 p3
|
||||
class P4_W1,SHIP p4
|
||||
class Pipe,TEST crit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<strong>关键路径说明：</strong>
|
||||
Day 4-5 的 P1a + P2 Pipe 联调是整个项目的瓶颈——Pipe 不通，sgClaw 引擎和浏览器就是两张皮，P1b 的 AI 推理、P3 的 Skill 库、P4 的界面都无法联动测试。
|
||||
风险预案：Day 4 晚未通则 P1b 支援；Day 5 中午仍未通则启动 HTTP 降级方案。
|
||||
</div>
|
||||
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'default',
|
||||
themeVariables: {
|
||||
fontSize: '15px',
|
||||
fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
edgeLabelBackground: '#ffffff'
|
||||
},
|
||||
flowchart: {
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true,
|
||||
curve: 'basis',
|
||||
padding: 20
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
561
docs/archive/领导演示资料/docs-html/系统架构总图.html
Normal file
561
docs/archive/领导演示资料/docs-html/系统架构总图.html
Normal file
@@ -0,0 +1,561 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>sgClaw 系统架构总图</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
padding: 40px 20px;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.container {
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
min-width: 1400px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(135deg, #38bdf8, #818cf8);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
color: #94a3b8;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 图例 */
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.legend-box {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid;
|
||||
}
|
||||
.legend-box.p1a { background: rgba(239,68,68,0.2); border-color: #ef4444; }
|
||||
.legend-box.p1b { background: rgba(249,115,22,0.2); border-color: #f97316; }
|
||||
.legend-box.p2 { background: rgba(56,189,248,0.2); border-color: #38bdf8; }
|
||||
.legend-box.p3 { background: rgba(16,185,129,0.2); border-color: #10b981; }
|
||||
.legend-box.p4 { background: rgba(129,140,248,0.2); border-color: #818cf8; }
|
||||
.legend-box.existing { background: rgba(148,163,184,0.2); border-color: #94a3b8; }
|
||||
.legend-label {
|
||||
font-size: 0.9rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* 主架构图 */
|
||||
.architecture-diagram {
|
||||
background: rgba(15,23,42,0.8);
|
||||
border: 2px solid rgba(56,189,248,0.3);
|
||||
border-radius: 16px;
|
||||
padding: 50px;
|
||||
position: relative;
|
||||
min-height: 900px;
|
||||
}
|
||||
|
||||
/* 层级容器 */
|
||||
.layer-container {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.layer-label {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 组件盒子 */
|
||||
.component-box {
|
||||
background: rgba(30,41,59,0.9);
|
||||
border: 3px solid;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
.component-box.p1a { border-color: #ef4444; }
|
||||
.component-box.p1b { border-color: #f97316; }
|
||||
.component-box.p2 { border-color: #38bdf8; }
|
||||
.component-box.p3 { border-color: #10b981; }
|
||||
.component-box.p4 { border-color: #818cf8; }
|
||||
.component-box.existing { border-color: #94a3b8; border-style: dashed; }
|
||||
|
||||
.component-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.component-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.component-title.p1a { color: #ef4444; }
|
||||
.component-title.p1b { color: #f97316; }
|
||||
.component-title.p2 { color: #38bdf8; }
|
||||
.component-title.p3 { color: #10b981; }
|
||||
.component-title.p4 { color: #818cf8; }
|
||||
.component-title.existing { color: #94a3b8; }
|
||||
|
||||
.owner-badge {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.owner-badge.p1a { background: rgba(239,68,68,0.15); color: #fca5a5; }
|
||||
.owner-badge.p1b { background: rgba(249,115,22,0.15); color: #fdba74; }
|
||||
.owner-badge.p2 { background: rgba(56,189,248,0.15); color: #7dd3fc; }
|
||||
.owner-badge.p3 { background: rgba(16,185,129,0.15); color: #6ee7b7; }
|
||||
.owner-badge.p4 { background: rgba(129,140,248,0.15); color: #a5b4fc; }
|
||||
|
||||
.component-content {
|
||||
font-size: 0.95rem;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.module-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.module-tag {
|
||||
background: rgba(56,189,248,0.1);
|
||||
border: 1px solid rgba(56,189,248,0.3);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
/* 布局网格 */
|
||||
.diagram-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.two-thirds {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* 连接线 */
|
||||
.connection {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.arrow-svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 关键路径标记 */
|
||||
.critical-badge {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* 数据流箭头 */
|
||||
.flow-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
gap: 15px;
|
||||
}
|
||||
.flow-line {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #38bdf8, #818cf8);
|
||||
position: relative;
|
||||
}
|
||||
.flow-line::after {
|
||||
content: '▶';
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -8px;
|
||||
color: #818cf8;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.flow-label {
|
||||
background: rgba(56,189,248,0.15);
|
||||
color: #38bdf8;
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background: rgba(56,189,248,0.1);
|
||||
border-left: 4px solid #38bdf8;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.info-card h3 {
|
||||
color: #38bdf8;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media print {
|
||||
body { background: white; color: black; }
|
||||
.component-box { border-width: 2px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>🏗️ sgClaw 系统架构总图</h1>
|
||||
<p class="subtitle">完整系统组件 · 层级关系 · 负责人标注 · 数据流向</p>
|
||||
|
||||
<!-- 图例 -->
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-box p1a"></div>
|
||||
<div class="legend-label"><strong>P1a</strong> · 核心通信（赵义仑）</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-box p1b"></div>
|
||||
<div class="legend-label"><strong>P1b</strong> · 业务支持</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-box p2"></div>
|
||||
<div class="legend-label"><strong>P2</strong> · 浏览器对接</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-box p3"></div>
|
||||
<div class="legend-label"><strong>P3</strong> · AI 辅助迁移</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-box p4"></div>
|
||||
<div class="legend-label"><strong>P4</strong> · 前端发布</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-box existing"></div>
|
||||
<div class="legend-label"><strong>已有系统</strong>（复用）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主架构图 -->
|
||||
<div class="architecture-diagram">
|
||||
|
||||
<!-- 第一层：用户交互层 -->
|
||||
<div class="layer-container">
|
||||
<div class="layer-label">🎨 用户交互层</div>
|
||||
<div class="diagram-grid">
|
||||
<div class="component-box p4 full-width">
|
||||
<div class="component-header">
|
||||
<div class="component-title p4">AI 助手 Side Panel</div>
|
||||
<div class="owner-badge p4">👤 P4 · 前端工程师</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>用户输入自然语言指令，查看执行进度，管理 Skill 启用/禁用
|
||||
<div class="module-list">
|
||||
<div class="module-tag">AgentControlPanel.vue</div>
|
||||
<div class="module-tag">SkillManager.vue</div>
|
||||
<div class="module-tag">IPC 调用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 向下箭头 -->
|
||||
<div class="flow-arrow">
|
||||
<div class="flow-line"></div>
|
||||
<div class="flow-label">用户指令："导出 ERP 报表"</div>
|
||||
<div class="flow-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- 第二层：浏览器内核层 -->
|
||||
<div class="layer-container">
|
||||
<div class="layer-label">🌐 浏览器内核层（SuperRPA Chromium）</div>
|
||||
<div class="diagram-grid">
|
||||
<!-- P2 负责的新增部分 -->
|
||||
<div class="component-box p2 two-thirds">
|
||||
<div class="component-header">
|
||||
<div class="component-title p2">sgClaw 进程管理器</div>
|
||||
<div class="owner-badge p2">👤 P2 · C++ 工程师</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>启动 sgClaw 子进程，监听 STDIO Pipe，转发 JSON 指令，MAC 白名单检查
|
||||
<div class="module-list">
|
||||
<div class="module-tag">SgClawProcessHost.cc (~600 行)</div>
|
||||
<div class="module-tag">PipeListener.cc</div>
|
||||
<div class="module-tag">MacWhitelistCheck.cc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已有系统 -->
|
||||
<div class="component-box existing">
|
||||
<div class="component-header">
|
||||
<div class="component-title existing">现有浏览器能力</div>
|
||||
<div class="owner-badge" style="background:rgba(148,163,184,0.15);color:#94a3b8;">已有系统</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>复用：</strong>CommandRouter（70+ 命令）、CdpBridge、Zombie 模式等
|
||||
<div class="module-list">
|
||||
<div class="module-tag" style="border-color:#94a3b8;color:#94a3b8;">CommandRouter</div>
|
||||
<div class="module-tag" style="border-color:#94a3b8;color:#94a3b8;">CDP 协议</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 向下箭头 - 关键路径 -->
|
||||
<div class="flow-arrow">
|
||||
<div class="flow-line"></div>
|
||||
<div class="flow-label" style="background:rgba(239,68,68,0.15);color:#ef4444;">
|
||||
<strong>⚡ STDIO Pipe 通信</strong> <span class="critical-badge">关键路径</span>
|
||||
</div>
|
||||
<div class="flow-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- 第三层：sgClaw AI 引擎层 -->
|
||||
<div class="layer-container">
|
||||
<div class="layer-label">🧠 sgClaw AI 引擎层（Rust 进程）</div>
|
||||
<div class="diagram-grid">
|
||||
|
||||
<!-- P1a 核心通信 -->
|
||||
<div class="component-box p1a">
|
||||
<div class="component-header">
|
||||
<div class="component-title p1a">通信与工具层</div>
|
||||
<div class="owner-badge p1a">👤 P1a · 赵义仑 <span class="critical-badge">核心</span></div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>Pipe 双向通信，JSON 序列化，15 个 BrowserAction，MAC 策略
|
||||
<div class="module-list">
|
||||
<div class="module-tag">PipeReader/Writer (~900 行)</div>
|
||||
<div class="module-tag">BrowserPipeTool</div>
|
||||
<div class="module-tag">MacPolicy</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P1b 业务支持 -->
|
||||
<div class="component-box p1b">
|
||||
<div class="component-header">
|
||||
<div class="component-title p1b">AI Runtime 引擎</div>
|
||||
<div class="owner-badge p1b">👤 P1b · Rust 工程师</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>ReAct 循环，工具调用，三层记忆，Critic 评估
|
||||
<div class="module-list">
|
||||
<div class="module-tag">AgentRuntime (~600 行)</div>
|
||||
<div class="module-tag">Memory (L0/L1/L2)</div>
|
||||
<div class="module-tag">Critic 评估器</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P1b Skill 加载器 -->
|
||||
<div class="component-box p1b">
|
||||
<div class="component-header">
|
||||
<div class="component-title p1b">Skill 加载器</div>
|
||||
<div class="owner-badge p1b">👤 P1b · Rust 工程师</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>扫描 Skill 目录，Ed25519 验签，JS 沙箱执行
|
||||
<div class="module-list">
|
||||
<div class="module-tag">SkillLoader.rs</div>
|
||||
<div class="module-tag">SignatureVerifier</div>
|
||||
<div class="module-tag">JSRuntime (Deno Core)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 横向连接：AI 引擎 ↔ 大模型 -->
|
||||
<div class="flow-arrow">
|
||||
<div class="flow-line"></div>
|
||||
<div class="flow-label">推理请求 / 流式响应</div>
|
||||
<div class="flow-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- 第四层：外部服务 -->
|
||||
<div class="layer-container">
|
||||
<div class="layer-label">🤖 外部服务层</div>
|
||||
<div class="diagram-grid">
|
||||
|
||||
<!-- 大模型 -->
|
||||
<div class="component-box existing two-thirds">
|
||||
<div class="component-header">
|
||||
<div class="component-title existing">AI 大模型（内网部署）</div>
|
||||
<div class="owner-badge" style="background:rgba(148,163,184,0.15);color:#94a3b8;">已有服务</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>接收自然语言 + 上下文，返回 JSON 格式的操作序列
|
||||
<div class="module-list">
|
||||
<div class="module-tag" style="border-color:#94a3b8;color:#94a3b8;">Claude 3.5 / GPT-4</div>
|
||||
<div class="module-tag" style="border-color:#94a3b8;color:#94a3b8;">本地 Qwen-72B</div>
|
||||
<div class="module-tag" style="border-color:#94a3b8;color:#94a3b8;">DeepSeek</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill 仓库 -->
|
||||
<div class="component-box p3">
|
||||
<div class="component-header">
|
||||
<div class="component-title p3">Skill 技能仓库</div>
|
||||
<div class="owner-badge p3">👤 P3 · AI + 业务工程</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<strong>功能：</strong>存储 400+ 业务场景的技能包，带签名验证
|
||||
<div class="module-list">
|
||||
<div class="module-tag">10-15 黄金样本（手写）</div>
|
||||
<div class="module-tag">390 AI 生成 Skill</div>
|
||||
<div class="module-tag">Ed25519 签名</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息卡 -->
|
||||
<div class="info-card">
|
||||
<h3>📊 数据流向总结</h3>
|
||||
<div style="color:#cbd5e1;line-height:1.8;">
|
||||
<strong>① 用户输入</strong>（P4 Vue 界面）→
|
||||
<strong>② IPC 传递</strong>（P2 C++ 层）→
|
||||
<strong>③ Pipe 通信</strong>（P1a Rust 层，<span style="color:#ef4444;font-weight:700;">关键路径</span>）→
|
||||
<strong>④ AI 推理</strong>（P1b Runtime + 大模型）→
|
||||
<strong>⑤ Skill 查询</strong>（P3 仓库）→
|
||||
<strong>⑥ 操作执行</strong>（P2 CommandRouter → 浏览器）→
|
||||
<strong>⑦ 记忆沉淀</strong>（P1b Memory）
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" style="background:rgba(239,68,68,0.1);border-color:#ef4444;margin-top:20px;">
|
||||
<h3 style="color:#ef4444;">⚠️ 关键依赖关系</h3>
|
||||
<div style="color:#cbd5e1;line-height:1.8;">
|
||||
<strong>1. P1a + P2 必须先联调成功</strong>（Day 4-5），否则整个系统无法打通。<br>
|
||||
<strong>2. P1b 依赖 P1a 的 BrowserPipeTool</strong>（Day 6 对接），才能让 AI 调用浏览器。<br>
|
||||
<strong>3. P3 的 Skill 需要 P1b 的加载器</strong>（Day 6-7 验证），才能被执行。<br>
|
||||
<strong>4. P4 的 UI 需要 P2 的 IPC 接口</strong>（Day 6 集成），才能控制 sgClaw。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 技术栈总结 -->
|
||||
<div style="margin-top:40px;background:rgba(255,255,255,0.05);border-radius:12px;padding:30px;">
|
||||
<h2 style="color:#38bdf8;margin-bottom:20px;font-size:1.5rem;">🛠️ 技术栈总结</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);padding:20px;border-radius:8px;">
|
||||
<div style="color:#ef4444;font-weight:700;margin-bottom:10px;">P1a + P1b（Rust）</div>
|
||||
<div style="color:#cbd5e1;font-size:0.9rem;line-height:1.6;">
|
||||
• Rust 1.75+<br>
|
||||
• ZeroClaw 框架<br>
|
||||
• Tokio 异步运行时<br>
|
||||
• SQLite (L2 记忆)<br>
|
||||
• Ed25519 签名<br>
|
||||
• Deno Core (JS 沙箱)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);padding:20px;border-radius:8px;">
|
||||
<div style="color:#38bdf8;font-weight:700;margin-bottom:10px;">P2（C++ 浏览器）</div>
|
||||
<div style="color:#cbd5e1;font-size:0.9rem;line-height:1.6;">
|
||||
• C++17<br>
|
||||
• Chromium 120+<br>
|
||||
• STDIO Pipe<br>
|
||||
• CDP 协议<br>
|
||||
• 现有 CommandRouter<br>
|
||||
• JSON 解析（RapidJSON）
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:rgba(30,41,59,0.6);padding:20px;border-radius:8px;">
|
||||
<div style="color:#10b981;font-weight:700;margin-bottom:10px;">P3（AI + 业务）</div>
|
||||
<div style="color:#cbd5e1;font-size:0.9rem;line-height:1.6;">
|
||||
• JavaScript (ES2022)<br>
|
||||
• Qwen-72B / DeepSeek<br>
|
||||
• Prompt Engineering<br>
|
||||
• agent-vue 场景分析<br>
|
||||
• Ed25519 签名工具
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div style="position:fixed;bottom:30px;right:30px;display:flex;gap:10px;z-index:100;">
|
||||
<button onclick="window.print()" style="background:rgba(56,189,248,0.2);border:1px solid rgba(56,189,248,0.5);color:#38bdf8;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:600;">
|
||||
📄 打印 PDF
|
||||
</button>
|
||||
<button onclick="window.scrollTo({top:0,behavior:'smooth'})" style="background:rgba(129,140,248,0.2);border:1px solid rgba(129,140,248,0.5);color:#818cf8;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:600;">
|
||||
⬆️ 回到顶部
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user