898 lines
31 KiB
HTML
898 lines
31 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>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>
|