first commit
This commit is contained in:
zyl
18
docs/archive/领导演示资料/README.md
Normal file
18
docs/archive/领导演示资料/README.md
Normal file
@@ -0,0 +1,18 @@
|
||||
# 领导演示资料归档
|
||||
|
||||
本目录用于存放“为汇报/演示准备”的图、网页、导出 PDF 与相关脚本。
|
||||
|
||||
## 子目录说明
|
||||
|
||||
- `docs-html/`：HTML 演示页（系统架构图、团队协作图、时间表）
|
||||
- `docs-pdf/`：对外展示 PDF 版本
|
||||
- `docs-figures/`：演示图源（如 SVG）
|
||||
- `docs-scripts/`：演示查看脚本、PDF 导出脚本
|
||||
- `frontend-pages/`：前端演示页与备份
|
||||
- `frontend-svgs/`：drawio/mmd/svg/png 等图源
|
||||
|
||||
## 使用约定
|
||||
|
||||
1. 研发主线文档只保留在 `docs/` 根目录。
|
||||
2. 面向领导汇报的衍生物统一进入本目录。
|
||||
3. 归档文件如需更新，保留原文件名，避免引用断链。
|
||||
183
docs/archive/领导演示资料/docs-figures/协作甘特图.svg
Normal file
183
docs/archive/领导演示资料/docs-figures/协作甘特图.svg
Normal file
@@ -0,0 +1,183 @@
|
||||
<svg width="1200" height="800" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>
|
||||
.title { font: bold 24px sans-serif; fill: #1e293b; }
|
||||
.subtitle { font: 14px sans-serif; fill: #64748b; }
|
||||
.person { font: bold 14px sans-serif; fill: #334155; }
|
||||
.day { font: 12px sans-serif; fill: #475569; }
|
||||
.task { font: 12px sans-serif; fill: #1e293b; }
|
||||
.critical { fill: #ef4444; stroke: #b91c1c; stroke-width: 2; }
|
||||
.normal { fill: #60a5fa; stroke: #2563eb; stroke-width: 1; }
|
||||
.milestone { fill: #10b981; stroke: #059669; stroke-width: 2; }
|
||||
.grid { stroke: #e2e8f0; stroke-width: 1; }
|
||||
.axis { stroke: #94a3b8; stroke-width: 2; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- 标题 -->
|
||||
<text x="600" y="30" text-anchor="middle" class="title">sgClaw 项目协作甘特图（2周）</text>
|
||||
<text x="600" y="55" text-anchor="middle" class="subtitle">⭐ 红色 = 关键路径 | 🔷 蓝色 = 常规任务 | ✅ 绿色 = 里程碑</text>
|
||||
|
||||
<!-- 时间轴 -->
|
||||
<line x1="150" y1="90" x2="1150" y2="90" class="axis"/>
|
||||
<text x="200" y="110" text-anchor="middle" class="day">Day 1-2</text>
|
||||
<text x="300" y="110" text-anchor="middle" class="day">Day 3</text>
|
||||
<text x="400" y="110" text-anchor="middle" class="day">Day 4</text>
|
||||
<text x="500" y="110" text-anchor="middle" class="day">Day 5</text>
|
||||
<text x="600" y="110" text-anchor="middle" class="day">Day 6</text>
|
||||
<text x="700" y="110" text-anchor="middle" class="day">Day 7</text>
|
||||
<text x="800" y="110" text-anchor="middle" class="day">Day 8</text>
|
||||
<text x="900" y="110" text-anchor="middle" class="day">Day 9</text>
|
||||
<text x="1000" y="110" text-anchor="middle" class="day">Day 10</text>
|
||||
|
||||
<!-- 网格线 -->
|
||||
<line x1="200" y1="90" x2="200" y2="750" class="grid"/>
|
||||
<line x1="300" y1="90" x2="300" y2="750" class="grid"/>
|
||||
<line x1="400" y1="90" x2="400" y2="750" class="grid"/>
|
||||
<line x1="500" y1="90" x2="500" y2="750" class="grid"/>
|
||||
<line x1="600" y1="90" x2="600" y2="750" class="grid"/>
|
||||
<line x1="700" y1="90" x2="700" y2="750" class="grid"/>
|
||||
<line x1="800" y1="90" x2="800" y2="750" class="grid"/>
|
||||
<line x1="900" y1="90" x2="900" y2="750" class="grid"/>
|
||||
<line x1="1000" y1="90" x2="1000" y2="750" class="grid"/>
|
||||
|
||||
<!-- P1a（你）的任务 -->
|
||||
<text x="30" y="150" class="person">P1a (你)</text>
|
||||
<rect x="150" y="135" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="200" y="153" text-anchor="middle" class="task">环境搭建</text>
|
||||
|
||||
<rect x="250" y="135" width="50" height="25" class="critical" rx="3"/>
|
||||
<text x="275" y="153" text-anchor="middle" class="task" fill="#fff">Pipe协议</text>
|
||||
|
||||
<rect x="300" y="135" width="200" height="25" class="critical" rx="3"/>
|
||||
<text x="400" y="153" text-anchor="middle" class="task" fill="#fff">⭐ 联调Pipe（关键路径）</text>
|
||||
|
||||
<polygon points="500,140 520,147.5 500,155" class="milestone"/>
|
||||
<text x="535" y="153" class="task" fill="#10b981">W1里程碑</text>
|
||||
|
||||
<rect x="550" y="135" width="50" height="25" class="normal" rx="3"/>
|
||||
<text x="575" y="153" text-anchor="middle" class="task">集成</text>
|
||||
|
||||
<rect x="600" y="135" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="650" y="153" text-anchor="middle" class="task">MAC安全</text>
|
||||
|
||||
<rect x="700" y="135" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="800" y="153" text-anchor="middle" class="task">bug修复+测试</text>
|
||||
|
||||
<!-- P1b 的任务 -->
|
||||
<text x="30" y="210" class="person">P1b</text>
|
||||
<rect x="150" y="195" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="200" y="213" text-anchor="middle" class="task">环境搭建</text>
|
||||
|
||||
<rect x="250" y="195" width="150" height="25" class="normal" rx="3"/>
|
||||
<text x="325" y="213" text-anchor="middle" class="task">SkillLoader</text>
|
||||
|
||||
<rect x="400" y="195" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="450" y="213" text-anchor="middle" class="task">Memory</text>
|
||||
|
||||
<rect x="550" y="195" width="50" height="25" class="normal" rx="3"/>
|
||||
<text x="575" y="213" text-anchor="middle" class="task">集成</text>
|
||||
|
||||
<rect x="600" y="195" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="650" y="213" text-anchor="middle" class="task">Critic</text>
|
||||
|
||||
<rect x="700" y="195" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="800" y="213" text-anchor="middle" class="task">bug修复</text>
|
||||
|
||||
<!-- P2 的任务 -->
|
||||
<text x="30" y="270" class="person">P2</text>
|
||||
<rect x="150" y="255" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="200" y="273" text-anchor="middle" class="task">环境搭建</text>
|
||||
|
||||
<rect x="250" y="255" width="50" height="25" class="normal" rx="3"/>
|
||||
<text x="275" y="273" text-anchor="middle" class="task">框架</text>
|
||||
|
||||
<rect x="300" y="255" width="200" height="25" class="critical" rx="3"/>
|
||||
<text x="400" y="273" text-anchor="middle" class="task" fill="#fff">⭐ 联调Pipe</text>
|
||||
|
||||
<rect x="500" y="255" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="550" y="273" text-anchor="middle" class="task">MAC白名单</text>
|
||||
|
||||
<rect x="600" y="255" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="650" y="273" text-anchor="middle" class="task">UI对接</text>
|
||||
|
||||
<rect x="700" y="255" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="800" y="273" text-anchor="middle" class="task">bug修复</text>
|
||||
|
||||
<!-- P3 的任务 -->
|
||||
<text x="30" y="330" class="person">P3</text>
|
||||
<rect x="150" y="315" width="50" height="25" class="normal" rx="3"/>
|
||||
<text x="175" y="333" text-anchor="middle" class="task">调研</text>
|
||||
|
||||
<rect x="200" y="315" width="150" height="25" class="normal" rx="3"/>
|
||||
<text x="275" y="333" text-anchor="middle" class="task">黄金样本</text>
|
||||
|
||||
<rect x="350" y="315" width="50" height="25" class="normal" rx="3"/>
|
||||
<text x="375" y="333" text-anchor="middle" class="task">Prompt</text>
|
||||
|
||||
<rect x="400" y="315" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="500" y="333" text-anchor="middle" class="task">AI批量翻译</text>
|
||||
|
||||
<rect x="700" y="315" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="800" y="333" text-anchor="middle" class="task">质量抽检</text>
|
||||
|
||||
<!-- P4 的任务 -->
|
||||
<text x="30" y="390" class="person">P4</text>
|
||||
<rect x="150" y="375" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="200" y="393" text-anchor="middle" class="task">环境搭建</text>
|
||||
|
||||
<rect x="250" y="375" width="50" height="25" class="normal" rx="3"/>
|
||||
<text x="275" y="393" text-anchor="middle" class="task">UI设计</text>
|
||||
|
||||
<rect x="300" y="375" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="400" y="393" text-anchor="middle" class="task">Side Panel + Skill后台</text>
|
||||
|
||||
<rect x="600" y="375" width="100" height="25" class="normal" rx="3"/>
|
||||
<text x="650" y="393" text-anchor="middle" class="task">测试框架</text>
|
||||
|
||||
<rect x="700" y="375" width="200" height="25" class="normal" rx="3"/>
|
||||
<text x="800" y="393" text-anchor="middle" class="task">E2E测试</text>
|
||||
|
||||
<polygon points="900,380 920,387.5 900,395" class="milestone"/>
|
||||
<text x="935" y="393" class="task" fill="#10b981">打包发布</text>
|
||||
|
||||
<!-- E2E 测试高亮 -->
|
||||
<rect x="700" y="440" width="200" height="40" fill="#fef3c7" stroke="#f59e0b" stroke-width="2" rx="5"/>
|
||||
<text x="800" y="465" text-anchor="middle" class="task">🧪 全员 E2E 测试</text>
|
||||
|
||||
<!-- 里程碑标注 -->
|
||||
<line x1="500" y1="115" x2="500" y2="420" stroke="#10b981" stroke-width="3" stroke-dasharray="5,5"/>
|
||||
<rect x="450" y="495" width="100" height="60" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="5"/>
|
||||
<text x="500" y="515" text-anchor="middle" class="person" fill="#059669">W1 里程碑</text>
|
||||
<text x="500" y="535" text-anchor="middle" class="task" fill="#065f46">链路打通</text>
|
||||
|
||||
<line x1="900" y1="115" x2="900" y2="420" stroke="#10b981" stroke-width="3" stroke-dasharray="5,5"/>
|
||||
<rect x="850" y="495" width="100" height="60" fill="#d1fae5" stroke="#10b981" stroke-width="2" rx="5"/>
|
||||
<text x="900" y="515" text-anchor="middle" class="person" fill="#059669">W2 里程碑</text>
|
||||
<text x="900" y="535" text-anchor="middle" class="task" fill="#065f46">正式发布</text>
|
||||
|
||||
<!-- 关键路径高亮 -->
|
||||
<rect x="250" y="560" width="250" height="60" fill="#fee2e2" stroke="#dc2626" stroke-width="2" rx="5"/>
|
||||
<text x="375" y="580" text-anchor="middle" class="person" fill="#991b1b">⚠️ 关键路径</text>
|
||||
<text x="375" y="600" text-anchor="middle" class="task" fill="#7f1d1d">Day 3-5: P1a + P2 联调</text>
|
||||
|
||||
<!-- 并行度标注 -->
|
||||
<rect x="550" y="560" width="200" height="60" fill="#dbeafe" stroke="#2563eb" stroke-width="2" rx="5"/>
|
||||
<text x="650" y="580" text-anchor="middle" class="person" fill="#1e40af">并行度最高</text>
|
||||
<text x="650" y="600" text-anchor="middle" class="task" fill="#1e3a8a">Day 6-7: 4组同时开发</text>
|
||||
|
||||
<!-- 风险提示 -->
|
||||
<rect x="100" y="650" width="1000" height="80" fill="#fff7ed" stroke="#f97316" stroke-width="2" rx="5"/>
|
||||
<text x="600" y="675" text-anchor="middle" class="person" fill="#c2410c">⚠️ 极高风险：Day 4-5 如果 Pipe 通信不通，阻塞所有后续工作</text>
|
||||
<text x="600" y="700" text-anchor="middle" class="task" fill="#9a3412">预案：Day 4 晚上还没通 → P1b 全力支援 | Day 5 中午还没通 → 降级 HTTP</text>
|
||||
|
||||
<!-- 图例 -->
|
||||
<rect x="50" y="760" width="30" height="20" class="critical" rx="2"/>
|
||||
<text x="90" y="775" class="task">关键路径</text>
|
||||
|
||||
<rect x="200" y="760" width="30" height="20" class="normal" rx="2"/>
|
||||
<text x="240" y="775" class="task">常规任务</text>
|
||||
|
||||
<polygon points="350,765 365,772.5 350,780" class="milestone"/>
|
||||
<text x="375" y="775" class="task">里程碑</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.5 KiB |
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>
|
||||
BIN
docs/archive/领导演示资料/docs-pdf/L0-产品白皮书与能力全景层.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/L0-产品白皮书与能力全景层.pdf
Normal file
Binary file not shown.
BIN
docs/archive/领导演示资料/docs-pdf/L1-系统架构与安全模型层.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/L1-系统架构与安全模型层.pdf
Normal file
Binary file not shown.
BIN
docs/archive/领导演示资料/docs-pdf/L2-核心模块与接口契约层.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/L2-核心模块与接口契约层.pdf
Normal file
Binary file not shown.
BIN
docs/archive/领导演示资料/docs-pdf/L3-数据流与Skill体系层.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/L3-数据流与Skill体系层.pdf
Normal file
Binary file not shown.
BIN
docs/archive/领导演示资料/docs-pdf/L4-工程实现与部署拓扑层.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/L4-工程实现与部署拓扑层.pdf
Normal file
Binary file not shown.
BIN
docs/archive/领导演示资料/docs-pdf/协作时间表.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/协作时间表.pdf
Normal file
Binary file not shown.
BIN
docs/archive/领导演示资料/docs-pdf/团队分工.pdf
Normal file
BIN
docs/archive/领导演示资料/docs-pdf/团队分工.pdf
Normal file
Binary file not shown.
12764
docs/archive/领导演示资料/docs-pdf/团队管理标准.pdf
Normal file
12764
docs/archive/领导演示资料/docs-pdf/团队管理标准.pdf
Normal file
File diff suppressed because it is too large
Load Diff
261
docs/archive/领导演示资料/docs-scripts/export-all-pdf.sh
Executable file
261
docs/archive/领导演示资料/docs-scripts/export-all-pdf.sh
Executable file
@@ -0,0 +1,261 @@
|
||||
#!/bin/bash
|
||||
|
||||
# sgClaw 文档一键导出 PDF 脚本
|
||||
# 使用方法：chmod +x export-all-pdf.sh && ./export-all-pdf.sh
|
||||
|
||||
echo "============================================================"
|
||||
echo "📄 sgClaw 文档一键导出 PDF"
|
||||
echo "============================================================"
|
||||
echo ""
|
||||
|
||||
# 创建输出目录
|
||||
mkdir -p pdfs
|
||||
echo "✅ 创建输出目录: pdfs/"
|
||||
echo ""
|
||||
|
||||
# 定义需要导出的文档
|
||||
declare -A docs=(
|
||||
["协作时间表.html"]="协作时间表_interactive.pdf"
|
||||
["协作时间表_printable.md"]="协作时间表.pdf"
|
||||
["协作甘特图_printable.md"]="协作甘特图.pdf"
|
||||
["团队分工.md"]="团队分工.pdf"
|
||||
)
|
||||
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📋 导出清单"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
|
||||
# 列出所有文件
|
||||
for src in "${!docs[@]}"; do
|
||||
if [ -f "$src" ]; then
|
||||
size=$(du -h "$src" | cut -f1)
|
||||
dst="${docs[$src]}"
|
||||
echo " 📄 $src ($size) → pdfs/$dst"
|
||||
fi
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "🚀 选择导出方式"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "1) 自动导出（使用 wkhtmltopdf，需要安装）"
|
||||
echo "2) 浏览器手动打印（推荐，最美观）"
|
||||
echo "3) 在线工具（最简单）"
|
||||
echo "4) VS Code 插件（最专业）"
|
||||
echo ""
|
||||
read -p "请选择 (1-4): " choice
|
||||
|
||||
case $choice in
|
||||
1)
|
||||
# 检查 wkhtmltopdf 是否安装
|
||||
if ! command -v wkhtmltopdf &> /dev/null; then
|
||||
echo ""
|
||||
echo "⚠️ 未安装 wkhtmltopdf，正在尝试安装..."
|
||||
echo ""
|
||||
if command -v apt-get &> /dev/null; then
|
||||
sudo apt-get update && sudo apt-get install -y wkhtmltopdf
|
||||
elif command -v yum &> /dev/null; then
|
||||
sudo yum install -y wkhtmltopdf
|
||||
else
|
||||
echo "❌ 无法自动安装，请手动安装 wkhtmltopdf"
|
||||
echo " 访问: https://wkhtmltopdf.org/downloads.html"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "开始自动导出..."
|
||||
echo ""
|
||||
|
||||
# 导出 HTML 文件
|
||||
if [ -f "协作时间表.html" ]; then
|
||||
echo "📄 处理: 协作时间表.html"
|
||||
wkhtmltopdf --enable-local-file-access \
|
||||
--orientation Landscape \
|
||||
--page-size A4 \
|
||||
协作时间表.html \
|
||||
pdfs/协作时间表_interactive.pdf 2>/dev/null
|
||||
if [ $? -eq 0 ]; then
|
||||
echo " ✅ 成功: pdfs/协作时间表_interactive.pdf"
|
||||
else
|
||||
echo " ❌ 失败"
|
||||
fi
|
||||
fi
|
||||
|
||||
# 导出 Markdown 文件（先转 HTML）
|
||||
for md_file in 协作时间表_printable.md 协作甘特图_printable.md 团队分工.md; do
|
||||
if [ -f "$md_file" ]; then
|
||||
echo ""
|
||||
echo "📄 处理: $md_file"
|
||||
|
||||
# 创建临时 HTML
|
||||
temp_html="/tmp/${md_file%.md}.html"
|
||||
cat > "$temp_html" << 'HTML_HEAD'
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
h1 { color: #1e40af; border-bottom: 3px solid #3b82f6; padding-bottom: 10px; }
|
||||
h2 { color: #2563eb; margin-top: 30px; }
|
||||
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
|
||||
th, td { border: 1px solid #ddd; padding: 10px; }
|
||||
th { background: #3b82f6; color: white; }
|
||||
img { max-width: 100%; height: auto; }
|
||||
code { background: #f1f5f9; padding: 2px 6px; border-radius: 3px; }
|
||||
pre { background: #1e293b; color: #f1f5f9; padding: 15px; border-radius: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
HTML_HEAD
|
||||
|
||||
# 简单的 Markdown to HTML（保留图片链接）
|
||||
sed 's/^# \(.*\)/<h1>\1<\/h1>/g; s/^## \(.*\)/<h2>\1<\/h2>/g; s/^### \(.*\)/<h3>\1<\/h3>/g' "$md_file" >> "$temp_html"
|
||||
|
||||
echo '</body></html>' >> "$temp_html"
|
||||
|
||||
# 转 PDF
|
||||
pdf_file="pdfs/${md_file%.md}.pdf"
|
||||
pdf_file="${pdf_file/_printable/}"
|
||||
|
||||
wkhtmltopdf --enable-local-file-access \
|
||||
--orientation Portrait \
|
||||
--page-size A4 \
|
||||
"$temp_html" \
|
||||
"$pdf_file" 2>/dev/null
|
||||
|
||||
if [ $? -eq 0 ]; then
|
||||
echo " ✅ 成功: $pdf_file"
|
||||
else
|
||||
echo " ❌ 失败"
|
||||
fi
|
||||
|
||||
rm -f "$temp_html"
|
||||
fi
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "✅ 导出完成！"
|
||||
;;
|
||||
|
||||
2)
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "🌐 浏览器手动打印步骤"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "正在打开文件..."
|
||||
firefox 协作时间表.html 2>/dev/null &
|
||||
sleep 1
|
||||
firefox 协作时间表_printable.md 2>/dev/null &
|
||||
sleep 1
|
||||
firefox 团队分工.md 2>/dev/null &
|
||||
echo ""
|
||||
echo "✅ 已在浏览器中打开文档"
|
||||
echo ""
|
||||
echo "对每个文件："
|
||||
echo " 1. 按 Ctrl+P（或 Cmd+P）"
|
||||
echo " 2. 目标打印机：选择「另存为 PDF」"
|
||||
echo " 3. 方向：选择「横向」（甘特图）或「纵向」（其他）"
|
||||
echo " 4. 保存到 pdfs/ 目录"
|
||||
echo " 5. 点击「保存」"
|
||||
;;
|
||||
|
||||
3)
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "🌍 在线工具"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "推荐工具："
|
||||
echo ""
|
||||
echo " 📄 Markdown to PDF:"
|
||||
echo " https://markdown2pdf.com"
|
||||
echo " https://www.markdowntopdf.com"
|
||||
echo ""
|
||||
echo " 🎨 HTML to PDF:"
|
||||
echo " https://www.sejda.com/html-to-pdf"
|
||||
echo " https://html2pdf.com"
|
||||
echo ""
|
||||
echo "使用步骤："
|
||||
echo " 1. 访问上述网站"
|
||||
echo " 2. 上传文件（见下方文件列表）"
|
||||
echo " 3. 下载生成的 PDF"
|
||||
echo " 4. 保存到 pdfs/ 目录"
|
||||
echo ""
|
||||
echo "文件列表："
|
||||
echo " • 协作时间表.html"
|
||||
echo " • 协作时间表_printable.md"
|
||||
echo " • 协作甘特图_printable.md"
|
||||
echo " • 团队分工.md"
|
||||
echo ""
|
||||
echo "文件位置: $(pwd)/"
|
||||
|
||||
# 打开文件管理器
|
||||
xdg-open . 2>/dev/null &
|
||||
;;
|
||||
|
||||
4)
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📝 VS Code 插件方法"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "步骤："
|
||||
echo " 1. 打开 VS Code"
|
||||
echo " 2. 安装插件：Markdown PDF"
|
||||
echo " (Ctrl+Shift+X 搜索 \"Markdown PDF\")"
|
||||
echo ""
|
||||
echo " 3. 打开 Markdown 文件："
|
||||
echo " code 协作时间表_printable.md"
|
||||
echo " code 协作甘特图_printable.md"
|
||||
echo " code 团队分工.md"
|
||||
echo ""
|
||||
echo " 4. 右键 → \"Markdown PDF: Export (pdf)\""
|
||||
echo ""
|
||||
echo " 5. PDF 会自动保存到同目录"
|
||||
echo ""
|
||||
|
||||
# 提供快捷命令
|
||||
echo "快捷命令："
|
||||
echo " code 协作时间表_printable.md &"
|
||||
;;
|
||||
|
||||
*)
|
||||
echo ""
|
||||
echo "❌ 无效选择"
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📊 输出目录"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "PDF 文件将保存到："
|
||||
echo " $(pwd)/pdfs/"
|
||||
echo ""
|
||||
|
||||
# 列出已生成的 PDF
|
||||
if ls pdfs/*.pdf 1> /dev/null 2>&1; then
|
||||
echo "已生成的 PDF 文件："
|
||||
ls -lh pdfs/*.pdf | awk '{printf " • %s (%s)\n", $9, $5}'
|
||||
else
|
||||
echo "（尚无 PDF 文件）"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "============================================================"
|
||||
echo "完成！🎉"
|
||||
echo "============================================================"
|
||||
116
docs/archive/领导演示资料/docs-scripts/export-pdf.sh
Executable file
116
docs/archive/领导演示资料/docs-scripts/export-pdf.sh
Executable file
@@ -0,0 +1,116 @@
|
||||
#!/bin/bash
|
||||
|
||||
# sgClaw 文档 PDF 导出脚本
|
||||
# 使用方法：chmod +x export-pdf.sh && ./export-pdf.sh
|
||||
|
||||
echo "============================================================"
|
||||
echo "📄 sgClaw 文档 PDF 导出工具"
|
||||
echo "============================================================"
|
||||
echo ""
|
||||
echo "本脚本将帮助你导出所有文档为 PDF"
|
||||
echo ""
|
||||
|
||||
# 创建输出目录
|
||||
mkdir -p pdfs
|
||||
echo "✅ 创建输出目录: pdfs/"
|
||||
echo ""
|
||||
|
||||
# 方法说明
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📖 导出方法（推荐）"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "方法 1：浏览器打印（推荐，最美观）✅"
|
||||
echo " 1. 在浏览器中打开文件（见下方文件列表）"
|
||||
echo " 2. 按 Ctrl+P（或 Cmd+P）"
|
||||
echo " 3. 选择\"另存为 PDF\""
|
||||
echo " 4. 保存到 pdfs/ 目录"
|
||||
echo ""
|
||||
echo "方法 2：在线工具（最简单）✅"
|
||||
echo " 对于 Markdown 文件："
|
||||
echo " - 访问 https://markdown2pdf.com"
|
||||
echo " - 或 https://www.markdowntopdf.com"
|
||||
echo " - 上传 .md 文件，下载 PDF"
|
||||
echo ""
|
||||
echo "方法 3：VS Code（最专业）✅"
|
||||
echo " 1. 安装插件: \"Markdown PDF\""
|
||||
echo " 2. 打开 .md 文件"
|
||||
echo " 3. 右键 -> \"Markdown PDF: Export (pdf)\""
|
||||
echo ""
|
||||
|
||||
# 文件列表
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📁 需要导出的文档"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
|
||||
files=(
|
||||
"协作时间表.html"
|
||||
"团队分工.md"
|
||||
"协作时间表.md"
|
||||
"协作甘特图.md"
|
||||
)
|
||||
|
||||
for file in "${files[@]}"; do
|
||||
if [ -f "$file" ]; then
|
||||
size=$(du -h "$file" | cut -f1)
|
||||
echo " 📄 $file ($size)"
|
||||
echo " file://$(pwd)/$file"
|
||||
echo ""
|
||||
fi
|
||||
done
|
||||
|
||||
# SVG 文件特殊说明
|
||||
if [ -f "协作甘特图.svg" ]; then
|
||||
echo " 🎨 协作甘特图.svg"
|
||||
echo " 可以用浏览器打开后打印，或直接插入 PPT"
|
||||
echo " file://$(pwd)/协作甘特图.svg"
|
||||
echo ""
|
||||
fi
|
||||
|
||||
# 快捷命令
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "🚀 快捷命令"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "# 在 Firefox 中打开所有文件"
|
||||
echo "firefox 协作时间表.html &"
|
||||
echo "firefox 协作甘特图.svg &"
|
||||
echo ""
|
||||
echo "# 在 Chrome 中打开"
|
||||
echo "google-chrome 协作时间表.html &"
|
||||
echo ""
|
||||
echo "# 在文件管理器中打开当前目录"
|
||||
echo "xdg-open . &"
|
||||
echo ""
|
||||
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "💡 提示"
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "• HTML 文件包含交互式甘特图，建议保持 HTML 格式或打印为 PDF"
|
||||
echo "• Markdown 文件可以用 GitHub/GitLab 在线查看（自动渲染）"
|
||||
echo "• SVG 文件可以直接拖入 PowerPoint/Keynote"
|
||||
echo "• 打印时建议选择\"横向\"方向，页面更宽"
|
||||
echo ""
|
||||
|
||||
# 提供一个自动打开的选项
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
read -p "是否在浏览器中打开主要文档？(y/n): " choice
|
||||
|
||||
if [ "$choice" = "y" ] || [ "$choice" = "Y" ]; then
|
||||
echo ""
|
||||
echo "正在打开浏览器..."
|
||||
firefox 协作时间表.html 2>/dev/null &
|
||||
sleep 1
|
||||
firefox 协作甘特图.svg 2>/dev/null &
|
||||
echo "✅ 已打开！按 Ctrl+P 可以打印为 PDF"
|
||||
else
|
||||
echo ""
|
||||
echo "👋 你可以随时手动打开文件进行打印"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "============================================================"
|
||||
echo "完成！祝你汇报顺利！🎉"
|
||||
echo "============================================================"
|
||||
114
docs/archive/领导演示资料/docs-scripts/架构图使用说明.md
Normal file
114
docs/archive/领导演示资料/docs-scripts/架构图使用说明.md
Normal file
@@ -0,0 +1,114 @@
|
||||
# sgClaw 团队协作架构图
|
||||
|
||||
## 📄 文档说明
|
||||
|
||||
这是一个**独立的可视化架构图文档**，用于向领导清晰展示 sgClaw 项目的团队分工、协作关系和技术架构。
|
||||
|
||||
## 🎯 包含的图表
|
||||
|
||||
1. **团队协作总架构（5 人分工全景）**
|
||||
- 每个人干什么？
|
||||
- 为什么要这样干？
|
||||
- 产出物是什么？
|
||||
|
||||
2. **人员接口对接关系图**
|
||||
- P1a ↔ P2：关键路径对接（极高优先级）
|
||||
- P1a ↔ P1b：Runtime 集成对接
|
||||
- P1b ↔ P3：Skill 加载对接
|
||||
- P2 ↔ P4：UI 交互对接
|
||||
|
||||
3. **数据流全链路**
|
||||
- 从用户输入到浏览器执行的完整流程
|
||||
- 8 步数据流转详解
|
||||
|
||||
4. **关键路径时间轴**
|
||||
- 为什么 Day 4-5 是瓶颈？
|
||||
- 风险预案是什么？
|
||||
|
||||
5. **技术栈分层**
|
||||
- 每层对应哪些人员？
|
||||
- 每层负责什么模块？
|
||||
|
||||
6. **为什么这样分工？**
|
||||
- 设计依据和决策背景
|
||||
- 常见问题解答
|
||||
|
||||
## 🚀 如何查看
|
||||
|
||||
### 方法 1：本地浏览器直接打开（推荐）
|
||||
|
||||
```bash
|
||||
# 在文件管理器中双击打开
|
||||
团队协作架构图.html
|
||||
```
|
||||
|
||||
### 方法 2：局域网查看（适合开会演示）
|
||||
|
||||
```bash
|
||||
cd /home/zyl/projects/sgClaw/docs
|
||||
./查看架构图.sh
|
||||
```
|
||||
|
||||
然后在浏览器中访问显示的 URL，例如：
|
||||
- 本机：`http://localhost:8888/团队协作架构图.html`
|
||||
- 局域网：`http://192.168.x.x:8888/团队协作架构图.html`
|
||||
|
||||
### 方法 3：导出为 PDF
|
||||
|
||||
在浏览器中打开后：
|
||||
1. 点击右下角的「📄 打印 PDF」按钮
|
||||
2. 或按 `Ctrl+P`（Windows/Linux）/ `Cmd+P`（macOS）
|
||||
3. 选择「另存为 PDF」
|
||||
4. 保存
|
||||
|
||||
## 💡 使用建议
|
||||
|
||||
### 给领导汇报时
|
||||
|
||||
1. **先看"团队协作总架构"**（第一图）
|
||||
- 一目了然看到 5 个人各自负责什么
|
||||
- 理解为什么要这样分工
|
||||
|
||||
2. **重点讲"关键路径"**（第四图）
|
||||
- 强调 Day 4-5 的 P1a + P2 联调是整个项目的瓶颈
|
||||
- 说明有风险预案
|
||||
|
||||
3. **数据流全链路**（第三图）
|
||||
- 演示一个完整的业务场景
|
||||
- 让领导理解 5 个人的工作如何串联起来
|
||||
|
||||
### 给技术人员讲解时
|
||||
|
||||
1. **技术栈分层**（第五图）
|
||||
- 清晰展示模块划分
|
||||
- 说明依赖关系（从下往上）
|
||||
|
||||
2. **接口对接关系**（第二图）
|
||||
- 详细展示每对人员之间的接口协议
|
||||
- 包含代码示例
|
||||
|
||||
## 📋 文件清单
|
||||
|
||||
```
|
||||
/home/zyl/projects/sgClaw/docs/
|
||||
├── 团队协作架构图.html # 主文档（独立 HTML，无外部依赖）
|
||||
├── 查看架构图.sh # 启动脚本（局域网查看）
|
||||
└── 架构图使用说明.md # 本文档
|
||||
```
|
||||
|
||||
## 🎨 特性
|
||||
|
||||
- ✅ **零依赖**：单文件 HTML，不需要网络，不需要额外资源
|
||||
- ✅ **深色主题**：适合投影演示，保护眼睛
|
||||
- ✅ **响应式设计**：自适应不同屏幕尺寸
|
||||
- ✅ **打印友好**：可直接打印或导出 PDF
|
||||
- ✅ **可视化清晰**：颜色编码（P1a 红色、P2 蓝色、P3 绿色等）
|
||||
|
||||
## 🔄 更新记录
|
||||
|
||||
- **v1.0** (2026-03-04)：初版发布，包含 6 张核心架构图
|
||||
|
||||
---
|
||||
|
||||
**维护者**：项目经理
|
||||
**最后更新**：2026-03-04
|
||||
44
docs/archive/领导演示资料/docs-scripts/查看架构图.sh
Executable file
44
docs/archive/领导演示资料/docs-scripts/查看架构图.sh
Executable file
@@ -0,0 +1,44 @@
|
||||
#!/bin/bash
|
||||
|
||||
# sgClaw 团队协作架构图查看脚本
|
||||
# 使用方法：chmod +x 查看架构图.sh && ./查看架构图.sh
|
||||
|
||||
echo "============================================================"
|
||||
echo "📊 sgClaw 团队协作架构图"
|
||||
echo "============================================================"
|
||||
echo ""
|
||||
|
||||
# 获取本机 IP
|
||||
IP=$(hostname -I | awk '{print $1}')
|
||||
|
||||
if [ -z "$IP" ]; then
|
||||
IP="localhost"
|
||||
fi
|
||||
|
||||
PORT=8888
|
||||
|
||||
echo "正在启动 HTTP 服务器..."
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📱 在浏览器中访问："
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo " 本机访问："
|
||||
echo " http://localhost:$PORT/团队协作架构图.html"
|
||||
echo ""
|
||||
echo " 局域网其他设备访问："
|
||||
echo " http://$IP:$PORT/团队协作架构图.html"
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "💡 提示："
|
||||
echo " • 按 Ctrl+C 停止服务器"
|
||||
echo " • 可以直接打印为 PDF（点击右下角「打印 PDF」按钮）"
|
||||
echo " • 或在浏览器中按 Ctrl+P 打印"
|
||||
echo ""
|
||||
echo "============================================================"
|
||||
echo ""
|
||||
|
||||
# 启动 HTTP 服务器
|
||||
cd "$(dirname "$0")"
|
||||
python3 -m http.server $PORT --bind 0.0.0.0
|
||||
52
docs/archive/领导演示资料/docs-scripts/查看系统架构总图.sh
Executable file
52
docs/archive/领导演示资料/docs-scripts/查看系统架构总图.sh
Executable file
@@ -0,0 +1,52 @@
|
||||
#!/bin/bash
|
||||
|
||||
# sgClaw 系统架构总图查看脚本
|
||||
|
||||
echo "============================================================"
|
||||
echo "🏗️ sgClaw 系统架构图"
|
||||
echo "============================================================"
|
||||
echo ""
|
||||
|
||||
# 获取本机 IP
|
||||
IP=$(hostname -I | awk '{print $1}')
|
||||
|
||||
if [ -z "$IP" ]; then
|
||||
IP="localhost"
|
||||
fi
|
||||
|
||||
PORT=8889
|
||||
|
||||
echo "正在启动 HTTP 服务器..."
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo "📱 在浏览器中访问："
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo " 【推荐】Mermaid 流程图版本："
|
||||
echo " http://localhost:$PORT/系统架构图_Mermaid.html"
|
||||
echo ""
|
||||
echo " 方框布局版本："
|
||||
echo " http://localhost:$PORT/系统架构总图.html"
|
||||
echo ""
|
||||
echo " 局域网访问："
|
||||
echo " http://$IP:$PORT/系统架构图_Mermaid.html"
|
||||
echo ""
|
||||
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
echo ""
|
||||
echo "💡 Mermaid 版本特点："
|
||||
echo " ✓ 专业流程图风格（不是方框布局）"
|
||||
echo " ✓ 带箭头和连接线，展示数据流向"
|
||||
echo " ✓ 包含 3 张图："
|
||||
echo " - 系统架构总览（所有组件关系）"
|
||||
echo " - 端到端数据流（10 步完整流程）"
|
||||
echo " - 人员协作依赖（5 人对接关系）"
|
||||
echo " ✓ 颜色区分负责人（红=P1a，橙=P1b，绿=P2，蓝=P3，紫=P4）"
|
||||
echo " ✓ 关键路径用粗线标注"
|
||||
echo ""
|
||||
echo "按 Ctrl+C 停止服务器"
|
||||
echo ""
|
||||
echo "============================================================"
|
||||
echo ""
|
||||
|
||||
cd "$(dirname "$0")"
|
||||
python3 -m http.server $PORT --bind 0.0.0.0
|
||||
2101
docs/archive/领导演示资料/frontend-pages/presentation.html
Normal file
2101
docs/archive/领导演示资料/frontend-pages/presentation.html
Normal file
File diff suppressed because it is too large
Load Diff
1433
docs/archive/领导演示资料/frontend-pages/presentation.html.backup
Normal file
1433
docs/archive/领导演示资料/frontend-pages/presentation.html.backup
Normal file
File diff suppressed because it is too large
Load Diff
413
docs/archive/领导演示资料/frontend-pages/指令解析.html
Normal file
413
docs/archive/领导演示资料/frontend-pages/指令解析.html
Normal file
@@ -0,0 +1,413 @@
|
||||
<!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>
|
||||
:root {
|
||||
--bg-color: #f8fafc;
|
||||
--text-main: #0f172a;
|
||||
--text-muted: #64748b;
|
||||
--card-bg: #ffffff;
|
||||
--border-color: #e2e8f0;
|
||||
--blue: #3b82f6;
|
||||
--blue-light: #eff6ff;
|
||||
--blue-dark: #1e3a8a;
|
||||
--orange: #f97316;
|
||||
--orange-light: #fff7ed;
|
||||
--orange-dark: #7c2d12;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ============ 页头 ============ */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
.header p {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ============ 主流程容器 ============ */
|
||||
.flow-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* ============ 卡片通用 ============ */
|
||||
.flow-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 32px 28px;
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.flow-desc {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* ============ 路由卡：中性色 ============ */
|
||||
.card-router {
|
||||
border-left: 5px solid #a855f7;
|
||||
}
|
||||
.card-router .flow-title { color: #6b21a8; }
|
||||
|
||||
/* ============ 简单指令卡：蓝色 ============ */
|
||||
.card-simple {
|
||||
border-left: 5px solid var(--blue);
|
||||
}
|
||||
.card-simple .flow-title { color: var(--blue-dark); }
|
||||
|
||||
/* ============ 复杂指令卡：橙色 ============ */
|
||||
.card-complex {
|
||||
border-left: 5px solid var(--orange);
|
||||
}
|
||||
.card-complex .flow-title { color: var(--orange-dark); }
|
||||
|
||||
/* ============ 图表包装器 ============ */
|
||||
.mermaid-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #fcfcfc;
|
||||
border-radius: 12px;
|
||||
padding: 24px 8px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
}
|
||||
.mermaid {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
/* ============ 对比表格 ============ */
|
||||
.compare-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.compare-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92rem;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
|
||||
}
|
||||
.compare-table th {
|
||||
padding: 14px 20px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.compare-table td {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.compare-table tr:last-child td { border-bottom: none; }
|
||||
.compare-table tbody tr:hover { background: #f8fafc; }
|
||||
|
||||
.th-dim { background: #f1f5f9; color: #475569; text-align: left; }
|
||||
.th-simple { background: var(--blue-light); color: var(--blue-dark); }
|
||||
.th-complex { background: var(--orange-light); color: var(--orange-dark); }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.badge-blue { background: var(--blue-light); color: var(--blue); border: 1px solid #bfdbfe; }
|
||||
.badge-orange { background: var(--orange-light); color: var(--orange); border: 1px solid #fed7aa; }
|
||||
.badge-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
|
||||
.badge-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
||||
|
||||
/* ============ 底部说明 ============ */
|
||||
.footer-note {
|
||||
margin-top: 16px;
|
||||
padding: 18px 24px;
|
||||
background: #eff6ff;
|
||||
border-left: 4px solid var(--blue);
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--blue-dark);
|
||||
line-height: 1.7;
|
||||
}
|
||||
.footer-note strong { color: #1d4ed8; }
|
||||
code {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- 页头 -->
|
||||
<div class="header">
|
||||
<h1>sgClaw 指令执行全链路解析</h1>
|
||||
<p>同一个 Agent 框架，面对"简单直调"与"复杂规划"两类指令走完全不同的路径。本文拆解两条路径的内部时序，帮助研发与业务团队建立准确认知。</p>
|
||||
</div>
|
||||
|
||||
<div class="flow-container">
|
||||
|
||||
<!-- ===== 0. 指令路由决策 ===== -->
|
||||
<div class="flow-card card-router">
|
||||
<h2 class="flow-title"><span style="font-size:1.5rem;">🔀</span> 0. 指令路由：走哪条路？</h2>
|
||||
<p class="flow-desc">
|
||||
sgClaw 在执行任何操作前，先由引擎分析指令语义，判断是否能从技能库中直接命中一个 Skill。<br>
|
||||
<strong>命中率高 → 跳过大模型，走简单路径；</strong> <strong>需要拆解 → 交由大模型规划，走复杂路径。</strong>
|
||||
</p>
|
||||
<div class="mermaid-wrapper">
|
||||
<div class="mermaid">
|
||||
flowchart LR
|
||||
Input(["💬 用户指令"])
|
||||
Router{"🔍 引擎意图分析\n（语义匹配技能库）"}
|
||||
Simple["⚡ 简单路径\nSingle-Skill Direct\n无 LLM 调用"]
|
||||
Complex["🧠 复杂路径\nReAct Planning Loop\n动态拆解 + 多轮 LLM"]
|
||||
|
||||
Input --> Router
|
||||
Router -->|"Skill 命中率高\n单一、明确意图"| Simple
|
||||
Router -->|"无匹配 Skill\n模糊或组合目标"| Complex
|
||||
|
||||
style Simple fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
|
||||
style Complex fill:#fff7ed,stroke:#f97316,stroke-width:2px,color:#7c2d12
|
||||
style Router fill:#faf5ff,stroke:#a855f7,stroke-width:2px,color:#6b21a8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 对比速览表 ===== -->
|
||||
<div class="compare-section">
|
||||
<table class="compare-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="th-dim">对比维度</th>
|
||||
<th class="th-simple">⚡ A. 简单指令（Single-Skill）</th>
|
||||
<th class="th-complex">🧠 B. 复杂指令（ReAct Planning）</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>典型场景</strong></td>
|
||||
<td>提取当前页面表格、截图保存</td>
|
||||
<td>对比A/B公司财报、跨系统数据同步</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>大模型调用次数</strong></td>
|
||||
<td><span class="badge badge-green">0 次</span>（无需LLM）</td>
|
||||
<td><span class="badge badge-orange">2 ~ 8+ 次</span>（规划 + 每步评估）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>预计完成时间</strong></td>
|
||||
<td><span class="badge badge-blue">< 1 秒</span></td>
|
||||
<td><span class="badge badge-orange">5 ~ 30 秒</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Skill 调用数量</strong></td>
|
||||
<td>1 个 Skill（直接命中）</td>
|
||||
<td>N 个 Skill（动态加载）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>记忆系统使用</strong></td>
|
||||
<td>不写入记忆（一次性操作）</td>
|
||||
<td>每步写入 L1 短期记忆，汇总写入 L2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>失败恢复</strong></td>
|
||||
<td>无 Critic，直接报错返回</td>
|
||||
<td>Critic 评估后可自动纠错重试</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>适用前提</strong></td>
|
||||
<td>技能库中已有对应 Skill</td>
|
||||
<td>技能库有原子 Skill，需 LLM 组合编排</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- ===== A. 简单指令 ===== -->
|
||||
<div class="flow-card card-simple">
|
||||
<h2 class="flow-title"><span style="font-size:1.5rem;">⚡</span> A. 简单指令执行 (Single-Skill)</h2>
|
||||
<p class="flow-desc">
|
||||
当用户输入目的极其明确的指令（如"提取当前表格"），引擎直接命中对应的预设 Skill，
|
||||
<strong>全程零 LLM 调用，执行延迟 < 1 秒</strong>。Skill 在 Deno Core 沙箱中运行，直接向浏览器内核下发 CDP 动作。
|
||||
</p>
|
||||
|
||||
<div class="mermaid-wrapper">
|
||||
<div class="mermaid">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor U as 👤 用户
|
||||
participant UI as 💻 UI面板(P4)
|
||||
participant Core as ⚙️ 引擎(P1a+P1b)
|
||||
participant Sandbox as 📦 Skill沙箱(Deno)
|
||||
participant Browser as 🌐 浏览器内核(P2)
|
||||
|
||||
U->>UI: "提取当前页面表格"
|
||||
UI->>Core: 发送执行请求（含页面上下文）
|
||||
|
||||
rect rgb(239, 246, 255)
|
||||
Note over Core,Sandbox: 语义匹配：命中 TableExtract_Skill，跳过大模型
|
||||
Core->>Sandbox: 加载并 Ed25519 验签 TableExtract_Skill
|
||||
Sandbox-->>Core: 验签通过，JS 沙箱就绪
|
||||
end
|
||||
|
||||
Sandbox->>Browser: 下发 BrowserAction：CDP 获取 DOM 结构
|
||||
Browser-->>Sandbox: 返回页面 HTML / 表格节点
|
||||
|
||||
Sandbox-->>Core: Skill 执行完毕，返回结构化数据
|
||||
Core-->>UI: 格式化结果（JSON → 可读表格）
|
||||
UI-->>U: 界面展示提取结果 ✅
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== B. 复杂指令 ===== -->
|
||||
<div class="flow-card card-complex">
|
||||
<h2 class="flow-title"><span style="font-size:1.5rem;">🧠</span> B. 复杂指令执行 (ReAct Planning)</h2>
|
||||
<p class="flow-desc">
|
||||
面对模糊或组合型任务（如"对比A、B公司最新财报"），引擎依赖大模型进行<strong>动态拆解</strong>，并多次调用不同 Skill。
|
||||
每一步执行后经 <strong>Critic 评估器</strong>判断是否继续或纠错，同时将中间结果写入记忆系统。
|
||||
</p>
|
||||
|
||||
<div class="mermaid-wrapper">
|
||||
<div class="mermaid">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor U as 👤 用户
|
||||
participant UI as 💻 UI面板(P4)
|
||||
participant Core as ⚙️ 引擎(P1a+P1b)
|
||||
participant LLM as 🤖 大模型底座
|
||||
participant Memory as 🗄️ 记忆系统(L0/L1/L2)
|
||||
participant Sandbox as 📦 Skill沙箱(Deno)
|
||||
participant Browser as 🌐 浏览器内核(P2)
|
||||
|
||||
U->>UI: "对比 A 和 B 公司最新财报"
|
||||
UI->>Core: 发送复杂任务请求
|
||||
|
||||
rect rgb(255, 247, 237)
|
||||
Note over Core,LLM: Think 阶段：大模型拆解目标
|
||||
Core->>LLM: 意图分析 + 生成执行计划 (Plan)
|
||||
LLM-->>Core: 返回步骤列表：① 搜 A 财报 → ② 搜 B 财报 → ③ 对比汇总
|
||||
end
|
||||
|
||||
rect rgb(254, 242, 242)
|
||||
Note over Core,Browser: ReAct 循环：逐步执行，每步评估
|
||||
loop 针对每个拆解步骤（Step 1..N）
|
||||
Core->>Sandbox: Act：加载当前步骤对应的 Skill
|
||||
Sandbox->>Browser: 执行 BrowserAction（操作页面）
|
||||
Browser-->>Sandbox: 返回页面反馈（Observation）
|
||||
Sandbox-->>Core: Skill 执行结果
|
||||
Core->>Memory: 写入 L1 短期记忆（RingBuffer）
|
||||
Core->>LLM: Critic 评估：当前步骤是否成功？
|
||||
LLM-->>Core: 决断：✅ 继续下一步 / ⚠️ 纠错重试
|
||||
end
|
||||
end
|
||||
|
||||
Core->>LLM: 汇总所有步骤结果，生成最终报告
|
||||
LLM-->>Core: 输出多维度财报对比分析
|
||||
Core->>Memory: 将成功路径写入 L2 长期记忆（SQLite）
|
||||
Core-->>UI: 返回完整分析报告
|
||||
UI-->>U: 界面展示多维度对比结果 ✅
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.flow-container -->
|
||||
|
||||
<div class="footer-note">
|
||||
<strong>💡 架构启示：</strong><br>
|
||||
两条路径共享同一套底层基础设施（Pipe 通信 + Skill 沙箱 + 浏览器内核），区别仅在于<strong>是否经过 LLM 规划层与 Critic 评估层</strong>。
|
||||
这意味着：① <code>P1a Pipe 通信稳定性</code> 是两条路径的共同命脉；
|
||||
② <code>P1b Prompt 工程质量</code> 决定了复杂路径的拆解准确率与 Critic 纠错能力；
|
||||
③ <code>P3 Skill 覆盖度</code> 决定了有多少指令可以走成本更低的简单路径。
|
||||
三者互相支撑，缺一不可。
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'base',
|
||||
securityLevel: 'loose',
|
||||
themeVariables: {
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
fontSize: '14px',
|
||||
primaryColor: '#ffffff',
|
||||
primaryTextColor: '#1e293b',
|
||||
primaryBorderColor: '#cbd5e1',
|
||||
lineColor: '#64748b',
|
||||
secondaryColor: '#f1f5f9',
|
||||
tertiaryColor: '#f8fafc',
|
||||
activationBorderColor: '#3b82f6',
|
||||
activationBkgColor: '#eff6ff',
|
||||
sequenceNumberColor: '#64748b',
|
||||
},
|
||||
sequence: {
|
||||
useMaxWidth: false,
|
||||
actorMargin: 50,
|
||||
messageMargin: 30,
|
||||
boxMargin: 12,
|
||||
noteMargin: 12,
|
||||
mirrorActors: false,
|
||||
},
|
||||
flowchart: {
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true,
|
||||
curve: 'basis',
|
||||
nodeSpacing: 60,
|
||||
rankSpacing: 50,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
435
docs/archive/领导演示资料/frontend-pages/系统架构图.html
Normal file
435
docs/archive/领导演示资料/frontend-pages/系统架构图.html
Normal file
@@ -0,0 +1,435 @@
|
||||
<!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>
|
||||
:root {
|
||||
--bg-color: #f4f7f9;
|
||||
--blue-light: #eff6ff; --blue-border: #93c5fd; --blue-dark: #1e3a8a;
|
||||
--red-light: #fef2f2; --red-border: #fca5a5; --red-dark: #7f1d1d;
|
||||
--green-light: #f0fdf4; --green-border: #86efac; --green-dark: #14532d;
|
||||
--conn-color: #94a3b8;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: #334155;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden; /* 防止全局横向滚动 */
|
||||
}
|
||||
|
||||
/* ================= 1. 顶部导航 ================= */
|
||||
.header-nav {
|
||||
position: sticky; top: 0; z-index: 1000;
|
||||
height: 64px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
display: flex; justify-content: space-between; align-items: center; padding: 0 40px;
|
||||
}
|
||||
.header-titles { display: flex; align-items: baseline; gap: 16px; }
|
||||
.header-titles h1 { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0; }
|
||||
.header-titles p { font-size: 0.9rem; color: #64748b; margin: 0; display: none; }
|
||||
|
||||
.jump-links { display: flex; gap: 10px; }
|
||||
.jump-links a {
|
||||
text-decoration: none; color: #475569; font-weight: 600; font-size: 0.85rem;
|
||||
padding: 6px 12px; border-radius: 6px; background: #f1f5f9; transition: all 0.2s;
|
||||
}
|
||||
.jump-links a:hover { background: #e2e8f0; color: #0f172a; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header-titles h1 { font-size: 1.4rem; }
|
||||
.header-titles p { display: block; }
|
||||
}
|
||||
|
||||
/* ================= 2. 首屏高管总图 (弹性高度) ================= */
|
||||
.hero-screen {
|
||||
/* 使用 min-height 而不是 height，避免内容过多时被裁剪 */
|
||||
min-height: calc(100vh - 64px);
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 40px 20px 80px; position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-header { text-align: center; margin-bottom: 40px; }
|
||||
.hero-header h2 { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
|
||||
.hero-header p { font-size: 1rem; color: #64748b; max-width: 800px; margin: 0 auto; }
|
||||
|
||||
/* 核心三模块的 Flex 容器 */
|
||||
.architecture-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch; /* 让三个卡片等高 */
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 模块卡片 */
|
||||
.module-card {
|
||||
flex: 1; /* 平分空间 */
|
||||
border-radius: 20px; padding: 25px 20px;
|
||||
display: flex; flex-direction: column;
|
||||
border: 2px solid; background: white;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
min-width: 0; /* 防止内容撑破 flex 布局 */
|
||||
}
|
||||
.module-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
|
||||
|
||||
.mod-ui { border-color: var(--blue-border); }
|
||||
.mod-ai { border-color: var(--red-border); }
|
||||
.mod-biz { border-color: var(--green-border); }
|
||||
|
||||
.module-header { text-align: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px dashed rgba(0,0,0,0.08); }
|
||||
.module-title-text { font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; }
|
||||
.mod-ui .module-title-text { color: var(--blue-dark); }
|
||||
.mod-ai .module-title-text { color: var(--red-dark); }
|
||||
.mod-biz .module-title-text { color: var(--green-dark); }
|
||||
|
||||
.meta-tags { display: flex; flex-direction: column; gap: 8px; align-items: center; }
|
||||
.meta-tag { padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; text-align: center; width: 100%; }
|
||||
.tag-who { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
|
||||
.tag-why { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; font-weight: 500;}
|
||||
|
||||
/* 内部组件列表 */
|
||||
.comp-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
|
||||
.comp-item { background: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; }
|
||||
.comp-name { font-weight: 800; color: #1e293b; margin-bottom: 4px; font-size: 0.95rem; }
|
||||
.comp-desc { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
|
||||
|
||||
/* ================= 安全的流式连接桥梁 ================= */
|
||||
.connection-bridge {
|
||||
flex: 0 0 70px; /* 固定宽度，不拉伸不缩小 */
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bridge-line {
|
||||
position: absolute;
|
||||
width: 100%; height: 4px; z-index: 1;
|
||||
background: repeating-linear-gradient(90deg, var(--conn-color) 0, var(--conn-color) 8px, transparent 8px, transparent 16px);
|
||||
}
|
||||
|
||||
.bridge-label {
|
||||
position: relative; z-index: 2;
|
||||
background: white; border: 2px solid var(--conn-color);
|
||||
padding: 8px 12px; border-radius: 8px;
|
||||
text-align: center; width: 140px; /* 固定标签宽度以保证文字排版 */
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
.bridge-label.risk { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }
|
||||
|
||||
.bridge-main-text { font-size: 0.85rem; font-weight: 800; color: #1e293b; display: block; }
|
||||
.risk .bridge-main-text { color: #b91c1c; }
|
||||
.bridge-sub-text { font-size: 0.7rem; font-weight: normal; margin-top: 4px; color: #64748b; display: block; }
|
||||
.risk .bridge-sub-text { color: #ef4444; }
|
||||
|
||||
/* 向下指示器 */
|
||||
.scroll-indicator {
|
||||
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
color: #94a3b8; font-size: 0.8rem; font-weight: 600;
|
||||
}
|
||||
.scroll-indicator svg { width: 20px; height: 20px; stroke: #94a3b8; animation: bounce 2s infinite; }
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-8px); }
|
||||
60% { transform: translateY(-4px); }
|
||||
}
|
||||
|
||||
/* ================= 3. 下方技术与管理视图 ================= */
|
||||
.detail-sections {
|
||||
max-width: 1400px; margin: 0 auto; padding: 20px 20px 80px;
|
||||
display: flex; flex-direction: column; gap: 40px;
|
||||
}
|
||||
|
||||
.section-block {
|
||||
background: white; border-radius: 16px; padding: 40px 30px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.section-title { text-align: center; font-size: 1.5rem; color: #0f172a; margin-bottom: 8px; font-weight: 800; }
|
||||
.section-subtitle { text-align: center; color: #64748b; margin-bottom: 30px; font-size: 0.95rem; }
|
||||
|
||||
/* 图表防溢出包装器 */
|
||||
.mermaid-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto; /* 核心：太宽时允许水平滚动，而不是撑破外框 */
|
||||
padding: 10px 0;
|
||||
display: flex; justify-content: center;
|
||||
}
|
||||
|
||||
.mermaid {
|
||||
min-width: 800px; /* 保证图形不至于被挤压得无法辨认 */
|
||||
}
|
||||
|
||||
.note-box {
|
||||
margin: 20px auto 0; padding: 16px 20px; background: #fff7ed; border-left: 4px solid #f97316;
|
||||
border-radius: 8px; font-size: 0.9rem; color: #334155; max-width: 1000px; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ================= 响应式布局 (适配笔记本与平板) ================= */
|
||||
@media (max-width: 1024px) {
|
||||
.architecture-container {
|
||||
flex-direction: column; /* 小屏改为纵向排列 */
|
||||
align-items: center;
|
||||
}
|
||||
.module-card { width: 100%; max-width: 600px; }
|
||||
|
||||
.connection-bridge {
|
||||
flex: 0 0 80px; width: 100%;
|
||||
}
|
||||
.bridge-line {
|
||||
width: 4px; height: 100%;
|
||||
background: repeating-linear-gradient(180deg, var(--conn-color) 0, var(--conn-color) 8px, transparent 8px, transparent 16px);
|
||||
}
|
||||
.bridge-label { width: auto; max-width: 200px; }
|
||||
.scroll-indicator { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航悬浮栏 -->
|
||||
<div class="header-nav">
|
||||
<div class="header-titles">
|
||||
<h1>sgClaw 架构研讨看板</h1>
|
||||
<p>总图定战略与边界 · 分图定技术与接口</p>
|
||||
</div>
|
||||
<div class="jump-links">
|
||||
<a href="#section-exec">宏观总图</a>
|
||||
<a href="#section-tech">技术流向</a>
|
||||
<a href="#section-time">里程碑</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= 绝佳首屏体验：高管业务总图 ================= -->
|
||||
<section class="hero-screen" id="section-exec">
|
||||
<div class="hero-header">
|
||||
<h2>第一部分：业务全景与宏观分工</h2>
|
||||
<p>明确“三大核心阵地”的作用、责任人与对接瓶颈 (Left to Right)</p>
|
||||
</div>
|
||||
|
||||
<div class="architecture-container">
|
||||
|
||||
<!-- 模块 1：浏览器端 -->
|
||||
<div class="module-card mod-ui">
|
||||
<div class="module-header">
|
||||
<div class="module-title-text">🌐 1. 浏览器交互宿主</div>
|
||||
<div class="meta-tags">
|
||||
<div class="meta-tag tag-who">👨💻 责任人：P4 (前端) + P2 (C++)</div>
|
||||
<div class="meta-tag tag-why">提供界面输入与 Agent 执行环境</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp-list">
|
||||
<div class="comp-item"><div class="comp-name">UI 面板层 (P4)</div><div class="comp-desc">Side Panel 助手界面 + Skill 管理后台</div></div>
|
||||
<div class="comp-item"><div class="comp-name">进程守护内核 (P2)</div><div class="comp-desc">启动、管理与保活 sgClaw 独立子进程</div></div>
|
||||
<div class="comp-item"><div class="comp-name">底层能力复用 (现有)</div><div class="comp-desc">复用 70+ 核心 CDP 浏览器操纵指令</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 桥梁 1 -->
|
||||
<div class="connection-bridge">
|
||||
<div class="bridge-line"></div>
|
||||
<div class="bridge-label risk">
|
||||
<span class="bridge-main-text">⚡风险点</span>
|
||||
<span class="bridge-sub-text">STDIO 跨进程通信流<br>(P2 ↔ P1a)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块 2：AI 引擎 -->
|
||||
<div class="module-card mod-ai">
|
||||
<div class="module-header">
|
||||
<div class="module-title-text">⚙️ 2. sgClaw AI 引擎</div>
|
||||
<div class="meta-tags">
|
||||
<div class="meta-tag tag-who">👨💻 责任人：P1a (协议) + P1b (Rust AI)</div>
|
||||
<div class="meta-tag tag-why">系统级智能中枢，负责推理与逻辑</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp-list">
|
||||
<div class="comp-item"><div class="comp-name">协议枢纽层 (P1a)</div><div class="comp-desc">Pipe 双向流处理、白名单指令拦截</div></div>
|
||||
<div class="comp-item"><div class="comp-name">推理与记忆引擎 (P1b)</div><div class="comp-desc">ReAct 核心调度循环 + L0/1/2 记忆系统</div></div>
|
||||
<div class="comp-item"><div class="comp-name">沙箱加载器 (P1b)</div><div class="comp-desc">验证签名并隔离运行外部业务 Skill</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 桥梁 2 -->
|
||||
<div class="connection-bridge">
|
||||
<div class="bridge-line"></div>
|
||||
<div class="bridge-label">
|
||||
<span class="bridge-main-text">🔄 逻辑常识支撑</span>
|
||||
<span class="bridge-sub-text">提示词与技能下发<br>(P1b ↔ P3)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块 3：业务库 -->
|
||||
<div class="module-card mod-biz">
|
||||
<div class="module-header">
|
||||
<div class="module-title-text">📦 3. 业务技能与基座</div>
|
||||
<div class="meta-tags">
|
||||
<div class="meta-tag tag-who">👨💻 责任人：P3 (业务) + 算法基座</div>
|
||||
<div class="meta-tag tag-why">提供底层算力与具体场景业务规则</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp-list">
|
||||
<div class="comp-item"><div class="comp-name">黄金基准样本 (P3)</div><div class="comp-desc">人工手写测试的 15 个高可用业务场景</div></div>
|
||||
<div class="comp-item"><div class="comp-name">泛化扩容技能库 (P3)</div><div class="comp-desc">通过大模型批量生成的长尾应用技能</div></div>
|
||||
<div class="comp-item"><div class="comp-name">大模型底座 (内网)</div><div class="comp-desc">Minimax-M2.5/Deepseek v3.2 通用流式推理</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="scroll-indicator">
|
||||
<span>向下滚动查看技术架构</span>
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= 下方滚动区域：技术分图与时间线 ================= -->
|
||||
<div class="detail-sections">
|
||||
|
||||
<!-- 技术流向图 -->
|
||||
<div id="section-tech" class="section-block">
|
||||
<h2 class="section-title">第二部分：技术研发架构与数据流向</h2>
|
||||
<p class="section-subtitle">面向研发团队：明确模块边界、API 交互方式及底层数据流传路径</p>
|
||||
|
||||
<div class="mermaid-wrapper">
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
User(["👤 用户操作"])
|
||||
|
||||
subgraph BROWSER["🌐 浏览器侧 (P4+P2)"]
|
||||
direction TB
|
||||
SidePanel("UI: AI 面板 (Vue)")
|
||||
ProcessHost("Host: 进程守护")
|
||||
PipeListener("IPC: Pipe 监听")
|
||||
Cmd["Action: CDP 操纵指令"]
|
||||
|
||||
SidePanel <-->|"Window IPC"| ProcessHost
|
||||
ProcessHost --> PipeListener
|
||||
PipeListener -.->|"复用"| Cmd
|
||||
end
|
||||
|
||||
subgraph SGCLAW["⚙️ sgClaw AI 引擎进程 (P1a+P1b)"]
|
||||
direction TB
|
||||
PipeRW("Core: Pipe 双向读写")
|
||||
BrowserTool("Tool: Action 封装")
|
||||
Runtime("Brain: ReAct 核心循环")
|
||||
Memory[("Mem: 记忆层 (SQLite)")]
|
||||
SkillLoader("Sandbox: 沙箱加载验签")
|
||||
|
||||
PipeRW <--> BrowserTool
|
||||
BrowserTool <--> Runtime
|
||||
Runtime --> Memory
|
||||
Runtime --> SkillLoader
|
||||
end
|
||||
|
||||
subgraph EXT["☁️ 远端服务与库 (P3)"]
|
||||
direction TB
|
||||
LLM1("LLM: Claude/GPT API")
|
||||
SkillDB[/"Skill: 黄金/泛化技能库"/]
|
||||
end
|
||||
|
||||
%% 数据流连线
|
||||
User --> SidePanel
|
||||
PipeListener == "⚡ 高风险卡点 (STDIO 双工流)" === PipeRW
|
||||
Runtime <-->|"提示词组装"| LLM1
|
||||
SkillLoader -->|"签名挂载调用"| SkillDB
|
||||
BrowserTool -.->|"执行结果回调"| PipeListener
|
||||
|
||||
%% 颜色样式
|
||||
classDef p1 fill:#fff7ed,stroke:#ea580c,stroke-width:1px
|
||||
classDef p2 fill:#eff6ff,stroke:#2563eb,stroke-width:1px
|
||||
classDef p3 fill:#f0fdf4,stroke:#16a34a,stroke-width:1px
|
||||
|
||||
class PipeRW,BrowserTool,Runtime,Memory,SkillLoader p1
|
||||
class SidePanel,ProcessHost,PipeListener,Cmd p2
|
||||
class LLM1,SkillDB p3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 里程碑与卡点 -->
|
||||
<div id="section-time" class="section-block">
|
||||
<h2 class="section-title">第三部分：关键路径与里程碑依赖</h2>
|
||||
<p class="section-subtitle">面向 PM/TL：把握各干系人的研发依赖与联调卡点，控制排期风险</p>
|
||||
|
||||
<div class="mermaid-wrapper">
|
||||
<div class="mermaid">
|
||||
graph TB
|
||||
subgraph W1["📌 W1 独立开发期 (Day 1-3)"]
|
||||
direction LR
|
||||
P1a["P1a 协议层构建"]
|
||||
P2["P2 内核扩展开发"]
|
||||
P1b["P1b ReAct框架"]
|
||||
P3["P3 核心用例设计"]
|
||||
P4["P4 面板UI开发"]
|
||||
P1a ~~~ P2 ~~~ P1b ~~~ P3 ~~~ P4
|
||||
end
|
||||
|
||||
CRIT{{"⚠️ W1 末期关键联调 (Day 4-5)\n=====================\nP1a 🤝 P2 联合打通 STDIO Pipe\n(如果阻塞，整个后续测试将无法进行)"}}
|
||||
|
||||
subgraph W2["🚀 W2 集成与验收期 (Day 6-10)"]
|
||||
direction TB
|
||||
INT1["P1b 🤝 P3\n沙箱能力与用例装载测试"]
|
||||
INT2["P1a 🤝 P1b\n引擎接入浏览器动作测试"]
|
||||
INT3["P2 🤝 P4\n前后端 IPC 接口贯通测试"]
|
||||
TEST["🎯 全链路 E2E 测试\n跑通首批 6 个核心业务场景"]
|
||||
SHIP["📦 P4 打包发版"]
|
||||
|
||||
INT1 --> TEST
|
||||
INT2 --> TEST
|
||||
INT3 --> TEST
|
||||
TEST --> SHIP
|
||||
end
|
||||
|
||||
W1 --> CRIT
|
||||
CRIT -->|打通后| W2
|
||||
|
||||
classDef crit fill:#fef2f2,stroke:#ef4444,stroke-width:2px,color:#991b1b
|
||||
class CRIT crit
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-box">
|
||||
<strong>🚨 风险管控重点说明：</strong><br>
|
||||
Day 4-5 的 <strong>P1a (协议层) 与 P2 (内核层) 的 Pipe 通信</strong>是整个项目的物理连通基石。如果这个桥梁不通，P1b (AI 引擎)、P3 (业务技能) 和 P4 (UI 面板) 将沦为孤岛，无法进行端到端全链路验证。建议在此节点安排 <strong>Daily Sync 重点跟进</strong>，必要时准备 HTTP 兜底预案。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'base',
|
||||
securityLevel: 'loose',
|
||||
themeVariables: {
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
fontSize: '14px',
|
||||
primaryColor: '#ffffff',
|
||||
primaryTextColor: '#334155',
|
||||
primaryBorderColor: '#cbd5e1',
|
||||
lineColor: '#64748b',
|
||||
secondaryColor: '#f8fafc',
|
||||
tertiaryColor: '#ffffff'
|
||||
},
|
||||
flowchart: {
|
||||
useMaxWidth: false, /* 配合外部 div 的 overflow-x 实现可滑动，而不被强行压扁 */
|
||||
htmlLabels: true,
|
||||
curve: 'basis',
|
||||
nodeSpacing: 40,
|
||||
rankSpacing: 40
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
176
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.drawio
Normal file
176
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.drawio
Normal file
@@ -0,0 +1,176 @@
|
||||
<mxfile host="Electron" modified="2024-03-05T10:00:00.000Z" agent="Mozilla/5.0" version="24.0.0" type="device">
|
||||
<diagram id="sgclaw_arch" name="sgClaw Architecture">
|
||||
<mxGraphModel dx="1400" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1600" pageHeight="900" background="#F4F7F9" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
|
||||
<!-- Swimlanes (Subgraphs) -->
|
||||
<mxCell id="browser_bg" value="🌐 浏览器侧 (P4+P2)" style="swimlane;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#cbd5e1;strokeWidth=2;fontStyle=1;startSize=36;rounded=1;shadow=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="160" y="40" width="280" height="460" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="sgclaw_bg" value="⚙️ sgClaw AI 引擎进程 (P1a+P1b)" style="swimlane;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#cbd5e1;strokeWidth=2;fontStyle=1;startSize=36;rounded=1;shadow=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="580" y="40" width="280" height="560" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="ext_bg" value="☁️ 远端服务与库 (P3)" style="swimlane;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#cbd5e1;strokeWidth=2;fontStyle=1;startSize=36;dashed=1;rounded=1;shadow=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="980" y="40" width="280" height="560" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Node: User -->
|
||||
<mxCell id="user" value="👤 用户操作" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fef9c3;strokeColor=#eab308;strokeWidth=2;fontStyle=1;shadow=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="20" y="100" width="100" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Nodes in BROWSER -->
|
||||
<mxCell id="sidepanel" value="UI: AI 面板 (Vue)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#2563eb;strokeWidth=2;fontStyle=1;" vertex="1" parent="browser_bg">
|
||||
<mxGeometry x="40" y="60" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="processhost" value="Host: 进程守护" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#2563eb;strokeWidth=2;fontStyle=1;" vertex="1" parent="browser_bg">
|
||||
<mxGeometry x="40" y="160" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="pipelistener" value="IPC: Pipe 监听" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#2563eb;strokeWidth=2;fontStyle=1;" vertex="1" parent="browser_bg">
|
||||
<mxGeometry x="40" y="260" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="cmd" value="Action: CDP 操纵指令" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#2563eb;strokeWidth=2;fontStyle=1;" vertex="1" parent="browser_bg">
|
||||
<mxGeometry x="40" y="360" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Nodes in SGCLAW -->
|
||||
<mxCell id="runtime" value="Brain: ReAct 核心循环" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7ed;strokeColor=#ea580c;strokeWidth=2;fontStyle=1;" vertex="1" parent="sgclaw_bg">
|
||||
<mxGeometry x="40" y="60" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="browsertool" value="Tool: Action 封装" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7ed;strokeColor=#ea580c;strokeWidth=2;fontStyle=1;" vertex="1" parent="sgclaw_bg">
|
||||
<mxGeometry x="40" y="160" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="piperw" value="Core: Pipe 双向读写" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7ed;strokeColor=#ea580c;strokeWidth=2;fontStyle=1;" vertex="1" parent="sgclaw_bg">
|
||||
<mxGeometry x="40" y="260" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="memory" value="Mem: 记忆层 (SQLite)" style="shape=cylinder3;boundedLbl=1;backgroundOutline=1;size=10;whiteSpace=wrap;html=1;fillColor=#fff7ed;strokeColor=#ea580c;strokeWidth=2;fontStyle=1;" vertex="1" parent="sgclaw_bg">
|
||||
<mxGeometry x="40" y="360" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="skillloader" value="Sandbox: 沙箱加载验签" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff7ed;strokeColor=#ea580c;strokeWidth=2;fontStyle=1;" vertex="1" parent="sgclaw_bg">
|
||||
<mxGeometry x="40" y="460" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Nodes in EXT -->
|
||||
<mxCell id="llm1" value="LLM: Minimax-M2.5 API" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f0fdf4;strokeColor=#16a34a;strokeWidth=2;fontStyle=1;" vertex="1" parent="ext_bg">
|
||||
<mxGeometry x="40" y="60" width="200" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="skilldb" value="Skill: 黄金/泛化技能库" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#f0fdf4;strokeColor=#16a34a;strokeWidth=2;fontStyle=1;size=15;" vertex="1" parent="ext_bg">
|
||||
<mxGeometry x="30" y="460" width="220" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Edges -->
|
||||
|
||||
<!-- User -> SidePanel -->
|
||||
<mxCell id="e_user_ui" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="user" target="sidepanel">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- SidePanel <-> ProcessHost -->
|
||||
<mxCell id="e_ui_host" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;endArrow=classic;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="sidepanel" target="processhost">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e_ui_host_l" value="Window IPC" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fillColor=#ffffff;fontStyle=1;fontColor=#475569;" vertex="1" connectable="0" parent="e_ui_host">
|
||||
<mxGeometry x="-0.1" y="0" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- ProcessHost -> PipeListener -->
|
||||
<mxCell id="e_host_listener" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="processhost" target="pipelistener">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- PipeListener -.-> Cmd -->
|
||||
<mxCell id="e_listener_cmd" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="pipelistener" target="cmd">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e_listener_cmd_l" value="复用" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fillColor=#ffffff;fontStyle=1;fontColor=#475569;" vertex="1" connectable="0" parent="e_listener_cmd">
|
||||
<mxGeometry x="-0.1" y="0" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- Internal SGCLAW Edges -->
|
||||
<!-- PipeRW <-> BrowserTool -->
|
||||
<mxCell id="e_piperw_tool" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;endArrow=classic;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="piperw" target="browsertool">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- BrowserTool <-> Runtime -->
|
||||
<mxCell id="e_tool_runtime" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;endArrow=classic;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="browsertool" target="runtime">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Runtime -> Memory (Routed around left side) -->
|
||||
<mxCell id="e_runtime_mem" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#64748b;strokeWidth=2;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="runtime" target="memory">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="600" y="130" />
|
||||
<mxPoint x="600" y="430" />
|
||||
</Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- Runtime -> SkillLoader (Routed around right side) -->
|
||||
<mxCell id="e_runtime_skill" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#64748b;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="runtime" target="skillloader">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="840" y="130" />
|
||||
<mxPoint x="840" y="530" />
|
||||
</Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- Cross-Boundary Edges -->
|
||||
|
||||
<!-- PipeListener == PipeRW (Critical Path) -->
|
||||
<mxCell id="e_critical" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;startArrow=none;endArrow=none;strokeColor=#ef4444;strokeWidth=4;" edge="1" parent="1" source="pipelistener" target="piperw">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e_critical_l" value="⚡ 高风险卡点 (STDIO 双工流)" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fillColor=#fef2f2;strokeColor=#fca5a5;fontColor=#991b1b;fontStyle=1;spacing=4;rounded=1;" vertex="1" connectable="0" parent="e_critical">
|
||||
<mxGeometry x="0" y="0" relative="1" as="geometry">
|
||||
<mxPoint y="-15" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- Runtime <-> LLM1 -->
|
||||
<mxCell id="e_runtime_llm" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;endArrow=classic;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="runtime" target="llm1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e_runtime_llm_l" value="提示词组装" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fillColor=#ffffff;fontStyle=1;fontColor=#475569;" vertex="1" connectable="0" parent="e_runtime_llm">
|
||||
<mxGeometry x="0" y="0" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- SkillLoader -> SkillDB -->
|
||||
<mxCell id="e_skill_db" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#64748b;strokeWidth=2;" edge="1" parent="1" source="skillloader" target="skilldb">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e_skill_db_l" value="签名挂载调用" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fillColor=#ffffff;fontStyle=1;fontColor=#475569;" vertex="1" connectable="0" parent="e_skill_db">
|
||||
<mxGeometry x="0" y="0" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
<!-- BrowserTool -.-> PipeListener (Callback) -->
|
||||
<mxCell id="e_tool_cb" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;strokeColor=#2563eb;strokeWidth=2;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.25;entryDx=0;entryDy=0;" edge="1" parent="1" source="browsertool" target="pipelistener">
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="540" y="230" />
|
||||
<mxPoint x="540" y="315" />
|
||||
</Array>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="e_tool_cb_l" value="执行结果回调" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fillColor=#eff6ff;fontColor=#1e3a8a;fontStyle=1;" vertex="1" connectable="0" parent="e_tool_cb">
|
||||
<mxGeometry x="-0.15" y="0" relative="1" as="geometry">
|
||||
<mxPoint x="10" y="-12" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
48
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.mmd
Normal file
48
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.mmd
Normal file
@@ -0,0 +1,48 @@
|
||||
graph LR
|
||||
User(["👤 用户操作"])
|
||||
|
||||
subgraph BROWSER["🌐 浏览器侧 (P4+P2)"]
|
||||
direction TB
|
||||
SidePanel("UI: AI 面板 (Vue)")
|
||||
ProcessHost("Host: 进程守护")
|
||||
PipeListener("IPC: Pipe 监听")
|
||||
Cmd["Action: CDP 操纵指令"]
|
||||
|
||||
SidePanel <-->|"Window IPC"| ProcessHost
|
||||
ProcessHost --> PipeListener
|
||||
PipeListener -.->|"复用"| Cmd
|
||||
end
|
||||
|
||||
subgraph SGCLAW["⚙️ sgClaw AI 引擎进程 (P1a+P1b)"]
|
||||
direction TB
|
||||
PipeRW("Core: Pipe 双向读写")
|
||||
BrowserTool("Tool: Action 封装")
|
||||
Runtime("Brain: ReAct 核心循环")
|
||||
Memory[("Mem: 记忆层 (SQLite)")]
|
||||
SkillLoader("Sandbox: 沙箱加载验签")
|
||||
|
||||
PipeRW <--> BrowserTool
|
||||
BrowserTool <--> Runtime
|
||||
Runtime --> Memory
|
||||
Runtime --> SkillLoader
|
||||
end
|
||||
|
||||
subgraph EXT["☁️ 远端服务与库 (P3)"]
|
||||
direction TB
|
||||
LLM1("LLM: Minimax-M2.5 API")
|
||||
SkillDB[/"Skill: 黄金/泛化技能库"/]
|
||||
end
|
||||
|
||||
User --> SidePanel
|
||||
PipeListener == "⚡ 高风险卡点 (STDIO 双工流)" === PipeRW
|
||||
Runtime <-->|"提示词组装"| LLM1
|
||||
SkillLoader -->|"签名挂载调用"| SkillDB
|
||||
BrowserTool -.->|"执行结果回调"| PipeListener
|
||||
|
||||
classDef p1 fill:#fff7ed,stroke:#ea580c,stroke-width:2px
|
||||
classDef p2 fill:#eff6ff,stroke:#2563eb,stroke-width:2px
|
||||
classDef p3 fill:#f0fdf4,stroke:#16a34a,stroke-width:2px
|
||||
|
||||
class PipeRW,BrowserTool,Runtime,Memory,SkillLoader p1
|
||||
class SidePanel,ProcessHost,PipeListener,Cmd p2
|
||||
class LLM1,SkillDB p3
|
||||
BIN
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.png
Normal file
BIN
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
1
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.svg
Normal file
1
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 342 KiB |
1
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向1.svg
Normal file
1
docs/archive/领导演示资料/frontend-svgs/01-架构总图-技术流向1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 37 KiB |
9
docs/archive/领导演示资料/frontend-svgs/02-架构总图-里程碑.drawio
Normal file
9
docs/archive/领导演示资料/frontend-svgs/02-架构总图-里程碑.drawio
Normal file
File diff suppressed because one or more lines are too long
32
docs/archive/领导演示资料/frontend-svgs/02-架构总图-里程碑.mmd
Normal file
32
docs/archive/领导演示资料/frontend-svgs/02-架构总图-里程碑.mmd
Normal file
@@ -0,0 +1,32 @@
|
||||
graph TB
|
||||
subgraph W1["📌 W1 独立开发期 (Day 1-3)"]
|
||||
direction LR
|
||||
P1a["P1a 协议层构建"]
|
||||
P2["P2 内核扩展开发"]
|
||||
P1b["P1b ReAct框架"]
|
||||
P3["P3 核心用例设计"]
|
||||
P4["P4 面板UI开发"]
|
||||
P1a ~~~ P2 ~~~ P1b ~~~ P3 ~~~ P4
|
||||
end
|
||||
|
||||
CRIT{{"⚠️ W1 末期关键联调 (Day 4-5)\n=====================\nP1a 🤝 P2 联合打通 STDIO Pipe\n(如果阻塞，整个后续测试将无法进行)"}}
|
||||
|
||||
subgraph W2["🚀 W2 集成与验收期 (Day 6-10)"]
|
||||
direction TB
|
||||
INT1["P1b 🤝 P3\n沙箱能力与用例装载测试"]
|
||||
INT2["P1a 🤝 P1b\n引擎接入浏览器动作测试"]
|
||||
INT3["P2 🤝 P4\n前后端 IPC 接口贯通测试"]
|
||||
TEST["🎯 全链路 E2E 测试\n跑通首批 6 个核心业务场景"]
|
||||
SHIP["📦 P4 打包发版"]
|
||||
|
||||
INT1 --> TEST
|
||||
INT2 --> TEST
|
||||
INT3 --> TEST
|
||||
TEST --> SHIP
|
||||
end
|
||||
|
||||
W1 --> CRIT
|
||||
CRIT -->|打通后| W2
|
||||
|
||||
classDef crit fill:#fef2f2,stroke:#ef4444,stroke-width:2px,color:#991b1b
|
||||
class CRIT crit
|
||||
1
docs/archive/领导演示资料/frontend-svgs/02-架构总图-里程碑.svg
Normal file
1
docs/archive/领导演示资料/frontend-svgs/02-架构总图-里程碑.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
9
docs/archive/领导演示资料/frontend-svgs/03-指令解析-路由决策.drawio
Normal file
9
docs/archive/领导演示资料/frontend-svgs/03-指令解析-路由决策.drawio
Normal file
File diff suppressed because one or more lines are too long
13
docs/archive/领导演示资料/frontend-svgs/03-指令解析-路由决策.mmd
Normal file
13
docs/archive/领导演示资料/frontend-svgs/03-指令解析-路由决策.mmd
Normal file
@@ -0,0 +1,13 @@
|
||||
flowchart LR
|
||||
Input(["💬 用户指令"])
|
||||
Router{"🔍 引擎意图分析\n（语义匹配技能库）"}
|
||||
Simple["⚡ 简单路径\nSingle-Skill Direct\n无 LLM 调用"]
|
||||
Complex["🧠 复杂路径\nReAct Planning Loop\n动态拆解 + 多轮 LLM"]
|
||||
|
||||
Input --> Router
|
||||
Router -->|"Skill 命中率高\n单一、明确意图"| Simple
|
||||
Router -->|"无匹配 Skill\n模糊或组合目标"| Complex
|
||||
|
||||
style Simple fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
|
||||
style Complex fill:#fff7ed,stroke:#f97316,stroke-width:2px,color:#7c2d12
|
||||
style Router fill:#faf5ff,stroke:#a855f7,stroke-width:2px,color:#6b21a8
|
||||
1
docs/archive/领导演示资料/frontend-svgs/03-指令解析-路由决策.svg
Normal file
1
docs/archive/领导演示资料/frontend-svgs/03-指令解析-路由决策.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 53 KiB |
9
docs/archive/领导演示资料/frontend-svgs/04-指令解析-简单指令.drawio
Normal file
9
docs/archive/领导演示资料/frontend-svgs/04-指令解析-简单指令.drawio
Normal file
File diff suppressed because one or more lines are too long
23
docs/archive/领导演示资料/frontend-svgs/04-指令解析-简单指令.mmd
Normal file
23
docs/archive/领导演示资料/frontend-svgs/04-指令解析-简单指令.mmd
Normal file
@@ -0,0 +1,23 @@
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor U as 用户
|
||||
participant UI as UI面板(P4)
|
||||
participant Core as 引擎(P1a+P1b)
|
||||
participant Sandbox as Skill沙箱(Deno)
|
||||
participant Browser as 浏览器内核(P2)
|
||||
|
||||
U->>UI: "提取当前页面表格"
|
||||
UI->>Core: 发送执行请求（含页面上下文）
|
||||
|
||||
rect rgb(239, 246, 255)
|
||||
Note over Core,Sandbox: 语义匹配：命中 TableExtract_Skill，跳过大模型
|
||||
Core->>Sandbox: 加载并 Ed25519 验签 TableExtract_Skill
|
||||
Sandbox-->>Core: 验签通过，JS 沙箱就绪
|
||||
end
|
||||
|
||||
Sandbox->>Browser: 下发 BrowserAction：CDP 获取 DOM 结构
|
||||
Browser-->>Sandbox: 返回页面 HTML / 表格节点
|
||||
|
||||
Sandbox-->>Core: Skill 执行完毕，返回结构化数据
|
||||
Core-->>UI: 格式化结果（JSON → 可读表格）
|
||||
UI-->>U: 界面展示提取结果
|
||||
1
docs/archive/领导演示资料/frontend-svgs/04-指令解析-简单指令.svg
Normal file
1
docs/archive/领导演示资料/frontend-svgs/04-指令解析-简单指令.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
9
docs/archive/领导演示资料/frontend-svgs/05-指令解析-复杂指令.drawio
Normal file
9
docs/archive/领导演示资料/frontend-svgs/05-指令解析-复杂指令.drawio
Normal file
File diff suppressed because one or more lines are too long
37
docs/archive/领导演示资料/frontend-svgs/05-指令解析-复杂指令.mmd
Normal file
37
docs/archive/领导演示资料/frontend-svgs/05-指令解析-复杂指令.mmd
Normal file
@@ -0,0 +1,37 @@
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
actor U as 用户
|
||||
participant UI as UI面板(P4)
|
||||
participant Core as 引擎(P1a+P1b)
|
||||
participant LLM as 大模型底座
|
||||
participant Memory as 记忆系统(L0/L1/L2)
|
||||
participant Sandbox as Skill沙箱(Deno)
|
||||
participant Browser as 浏览器内核(P2)
|
||||
|
||||
U->>UI: "对比 A 和 B 公司最新财报"
|
||||
UI->>Core: 发送复杂任务请求
|
||||
|
||||
rect rgb(255, 247, 237)
|
||||
Note over Core,LLM: Think 阶段：大模型拆解目标
|
||||
Core->>LLM: 意图分析 + 生成执行计划 (Plan)
|
||||
LLM-->>Core: 返回步骤列表：① 搜 A 财报 → ② 搜 B 财报 → ③ 对比汇总
|
||||
end
|
||||
|
||||
rect rgb(254, 242, 242)
|
||||
Note over Core,Browser: ReAct 循环：逐步执行，每步评估
|
||||
loop 针对每个拆解步骤（Step 1..N）
|
||||
Core->>Sandbox: Act：加载当前步骤对应的 Skill
|
||||
Sandbox->>Browser: 执行 BrowserAction（操作页面）
|
||||
Browser-->>Sandbox: 返回页面反馈（Observation）
|
||||
Sandbox-->>Core: Skill 执行结果
|
||||
Core->>Memory: 写入 L1 短期记忆（RingBuffer）
|
||||
Core->>LLM: Critic 评估：当前步骤是否成功？
|
||||
LLM-->>Core: 决断：继续下一步 / 纠错重试
|
||||
end
|
||||
end
|
||||
|
||||
Core->>LLM: 汇总所有步骤结果，生成最终报告
|
||||
LLM-->>Core: 输出多维度财报对比分析
|
||||
Core->>Memory: 将成功路径写入 L2 长期记忆（SQLite）
|
||||
Core-->>UI: 返回完整分析报告
|
||||
UI-->>U: 界面展示多维度对比结果
|
||||
1
docs/archive/领导演示资料/frontend-svgs/05-指令解析-复杂指令.svg
Normal file
1
docs/archive/领导演示资料/frontend-svgs/05-指令解析-复杂指令.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
26
docs/archive/领导演示资料/frontend-svgs/mermaid.config.json
Normal file
26
docs/archive/领导演示资料/frontend-svgs/mermaid.config.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"theme": "base",
|
||||
"themeVariables": {
|
||||
"fontFamily": "PingFang SC, Microsoft YaHei, Arial, sans-serif",
|
||||
"fontSize": "15px",
|
||||
"primaryColor": "#ffffff",
|
||||
"primaryTextColor": "#1e293b",
|
||||
"primaryBorderColor": "#cbd5e1",
|
||||
"lineColor": "#64748b",
|
||||
"secondaryColor": "#f1f5f9",
|
||||
"tertiaryColor": "#f8fafc"
|
||||
},
|
||||
"flowchart": {
|
||||
"useMaxWidth": false,
|
||||
"htmlLabels": true,
|
||||
"curve": "basis",
|
||||
"nodeSpacing": 50,
|
||||
"rankSpacing": 50
|
||||
},
|
||||
"sequence": {
|
||||
"useMaxWidth": false,
|
||||
"actorMargin": 50,
|
||||
"messageMargin": 30,
|
||||
"mirrorActors": false
|
||||
}
|
||||
}
|
||||
3
docs/archive/领导演示资料/frontend-svgs/puppeteer.config.json
Normal file
3
docs/archive/领导演示资料/frontend-svgs/puppeteer.config.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"args": ["--no-sandbox", "--disable-setuid-sandbox"]
|
||||
}
|
||||
Reference in New Issue
Block a user