306 lines
8.9 KiB
HTML
306 lines
8.9 KiB
HTML
<!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>
|