first commit
This commit is contained in:
zyl
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>
|
||||
Reference in New Issue
Block a user