2101 lines
118 KiB
HTML
2101 lines
118 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
<title>sgClaw · 项目架构宣讲</title>
|
||
<style>
|
||
|
||
/* ====== 全局变量 ====== */
|
||
:root {
|
||
--bg1: #0f172a; --bg2: #1e293b; --bg3: #334155;
|
||
--text: #f1f5f9; --text2: #94a3b8; --text3: #64748b;
|
||
--accent: #38bdf8; --accent2: #818cf8; --green: #4ade80; --orange: #fb923c;
|
||
--red: #f87171; --yellow: #facc15; --pink: #f472b6;
|
||
--card: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.1);
|
||
--font: "PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
|
||
--mono: "Consolas","Monaco","Courier New",monospace;
|
||
}
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg1); color:var(--text); font-family:var(--font); }
|
||
[v-cloak] { display:none!important; }
|
||
|
||
/* ====== 幻灯片容器 ====== */
|
||
.deck { width:100%; height:100%; position:relative; }
|
||
.slide {
|
||
position:absolute; top:0; left:0; width:100%; height:100%;
|
||
display:flex; flex-direction:column; justify-content:center; align-items:center;
|
||
padding:40px 60px; opacity:0; transform:translateX(60px);
|
||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||
pointer-events:none; background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
|
||
overflow-y:auto;
|
||
}
|
||
.slide.active { opacity:1; transform:translateX(0); pointer-events:all; z-index:2; }
|
||
.slide.prev { opacity:0; transform:translateX(-60px); }
|
||
|
||
/* ====== 页码指示器 ====== */
|
||
.nav-bar {
|
||
position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
|
||
display:flex; gap:8px; z-index:100; background:rgba(0,0,0,0.4);
|
||
padding:8px 16px; border-radius:20px; backdrop-filter:blur(8px);
|
||
}
|
||
.nav-dot {
|
||
width:10px; height:10px; border-radius:50%; background:var(--text3);
|
||
cursor:pointer; transition:all 0.3s; border:none; outline:none;
|
||
}
|
||
.nav-dot.active { background:var(--accent); transform:scale(1.3); }
|
||
.nav-dot:hover { background:var(--text2); }
|
||
.page-num {
|
||
position:fixed; bottom:24px; right:30px; font-size:14px; color:var(--text3);
|
||
z-index:100; font-family:var(--mono);
|
||
}
|
||
|
||
/* ====== 通用排版 ====== */
|
||
.slide-title {
|
||
font-size:clamp(24px,3vw,40px); font-weight:700; margin-bottom:40px;
|
||
text-align:center; line-height:1.3;
|
||
}
|
||
.slide-title .accent { color:var(--accent); }
|
||
.slide-title .sub {
|
||
display:block; font-size:clamp(14px,1.5vw,20px); font-weight:400;
|
||
color:var(--text2); margin-top:8px;
|
||
}
|
||
.slide-body { width:100%; max-width:1200px; }
|
||
|
||
/* ====== 封面 ====== */
|
||
.cover { justify-content:center; text-align:center; }
|
||
.cover-logo {
|
||
font-size:clamp(48px,6vw,80px); font-weight:800; letter-spacing:-2px;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent2));
|
||
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
|
||
background-clip:text; margin-bottom:16px;
|
||
}
|
||
.cover-sub { font-size:clamp(16px,2vw,26px); color:var(--text2); margin-bottom:8px; }
|
||
.cover-meta { font-size:14px; color:var(--text3); margin-top:32px; }
|
||
.cover-badge {
|
||
display:inline-block; padding:6px 18px; border-radius:20px; font-size:13px;
|
||
background:rgba(56,189,248,0.15); color:var(--accent); border:1px solid rgba(56,189,248,0.3);
|
||
margin-top:20px;
|
||
}
|
||
|
||
/* ====== 卡片网格 ====== */
|
||
.card-grid { display:grid; gap:20px; width:100%; }
|
||
.card-grid.cols-2 { grid-template-columns:1fr 1fr; }
|
||
.card-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
|
||
.card-grid.cols-4 { grid-template-columns:1fr 1fr 1fr 1fr; }
|
||
.card {
|
||
background:var(--card); border:1px solid var(--border); border-radius:12px;
|
||
padding:24px; transition:transform 0.3s, border-color 0.3s;
|
||
}
|
||
.card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.2); }
|
||
.card-icon { font-size:32px; margin-bottom:12px; }
|
||
.card-num { font-size:clamp(28px,3vw,42px); font-weight:800; line-height:1; }
|
||
.card-label { font-size:14px; color:var(--text2); margin-top:6px; }
|
||
.card-desc { font-size:13px; color:var(--text3); margin-top:8px; line-height:1.6; }
|
||
|
||
/* ====== 表格 ====== */
|
||
.slide-table { width:100%; border-collapse:collapse; font-size:clamp(12px,1.2vw,14px); }
|
||
.slide-table th {
|
||
padding:10px 14px; text-align:left; border-bottom:2px solid var(--accent);
|
||
font-weight:600; color:var(--accent); white-space:nowrap;
|
||
}
|
||
.slide-table td {
|
||
padding:8px 14px; border-bottom:1px solid var(--border); color:var(--text2);
|
||
}
|
||
.slide-table tr:hover td { background:rgba(255,255,255,0.03); }
|
||
.slide-table .highlight { background:rgba(74,222,128,0.08); }
|
||
.slide-table .highlight td { color:var(--green); font-weight:600; }
|
||
.tag {
|
||
display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px;
|
||
font-weight:600; white-space:nowrap;
|
||
}
|
||
.tag-green { background:rgba(74,222,128,0.15); color:var(--green); }
|
||
.tag-red { background:rgba(248,113,113,0.15); color:var(--red); }
|
||
.tag-blue { background:rgba(56,189,248,0.15); color:var(--accent); }
|
||
.tag-orange { background:rgba(251,146,60,0.15); color:var(--orange); }
|
||
.tag-yellow { background:rgba(250,204,21,0.15); color:var(--yellow); }
|
||
|
||
/* ====== 架构图 ====== */
|
||
.arch-row {
|
||
display:flex; align-items:center; justify-content:center; gap:0;
|
||
width:100%; flex-wrap:nowrap;
|
||
}
|
||
.arch-node {
|
||
padding:20px 16px; border-radius:12px; border:2px solid var(--border);
|
||
background:var(--card); text-align:center; min-width:160px;
|
||
backdrop-filter:blur(4px); flex-shrink:0;
|
||
}
|
||
.arch-node.active-node { border-color:var(--accent); box-shadow:0 0 20px rgba(56,189,248,0.15); }
|
||
.arch-node .n-icon { font-size:28px; margin-bottom:6px; }
|
||
.arch-node .n-title { font-size:14px; font-weight:700; }
|
||
.arch-node .n-tech { font-size:11px; color:var(--text3); margin-top:2px; }
|
||
.arch-node .n-detail { font-size:10px; color:var(--text3); margin-top:6px; opacity:0.7; }
|
||
.arch-arrow {
|
||
display:flex; flex-direction:column; align-items:center; padding:0 8px;
|
||
flex-shrink:0; min-width:70px;
|
||
}
|
||
.arch-arrow .a-line {
|
||
width:50px; height:3px; background:var(--border); position:relative;
|
||
}
|
||
.arch-arrow .a-line::after {
|
||
content:''; position:absolute; right:-1px; top:-4px;
|
||
border:5px solid transparent; border-left-color:var(--border);
|
||
}
|
||
.arch-arrow .a-line.pipe { background:var(--red); }
|
||
.arch-arrow .a-line.pipe::after { border-left-color:var(--red); }
|
||
.arch-arrow .a-label { font-size:9px; color:var(--text3); margin-top:4px; white-space:nowrap; }
|
||
|
||
/* ====== 三层安全 ====== */
|
||
.layer-stack { display:flex; flex-direction:column; gap:16px; width:100%; }
|
||
.layer-box {
|
||
border-radius:12px; padding:20px 24px; border-left:4px solid;
|
||
background:var(--card);
|
||
}
|
||
.layer-box.l3 { border-color:var(--red); }
|
||
.layer-box.l2 { border-color:var(--orange); }
|
||
.layer-box.l1 { border-color:var(--green); }
|
||
.layer-title { font-size:16px; font-weight:700; margin-bottom:8px; }
|
||
.layer-items { display:flex; flex-wrap:wrap; gap:8px; }
|
||
.layer-item {
|
||
padding:4px 10px; border-radius:6px; font-size:12px;
|
||
background:rgba(255,255,255,0.05); color:var(--text2);
|
||
}
|
||
|
||
/* ====== 模块拓扑 ====== */
|
||
.module-section { margin-bottom:20px; }
|
||
.module-section-title { font-size:14px; font-weight:700; color:var(--accent); margin-bottom:10px; }
|
||
.module-grid { display:flex; flex-wrap:wrap; gap:8px; }
|
||
.mod-chip {
|
||
padding:8px 14px; border-radius:8px; font-size:12px; font-weight:600;
|
||
border:1px solid var(--border); background:var(--card);
|
||
}
|
||
.mod-chip.rust { border-color:rgba(248,113,113,0.4); color:var(--red); }
|
||
.mod-chip.cpp { border-color:rgba(56,189,248,0.4); color:var(--accent); }
|
||
.mod-chip.vue { border-color:rgba(74,222,128,0.4); color:var(--green); }
|
||
|
||
/* ====== ReAct 循环 ====== */
|
||
.react-loop {
|
||
display:flex; align-items:center; justify-content:center; gap:12px;
|
||
flex-wrap:wrap; margin:20px 0;
|
||
}
|
||
.react-step {
|
||
padding:16px 20px; border-radius:10px; text-align:center;
|
||
min-width:120px; font-weight:700; font-size:15px;
|
||
}
|
||
.react-step.think { background:rgba(129,140,248,0.15); color:var(--accent2); border:1px solid rgba(129,140,248,0.3); }
|
||
.react-step.act { background:rgba(56,189,248,0.15); color:var(--accent); border:1px solid rgba(56,189,248,0.3); }
|
||
.react-step.observe { background:rgba(74,222,128,0.15); color:var(--green); border:1px solid rgba(74,222,128,0.3); }
|
||
.react-step.critic { background:rgba(251,146,60,0.15); color:var(--orange); border:1px solid rgba(251,146,60,0.3); }
|
||
.react-arrow { font-size:20px; color:var(--text3); }
|
||
|
||
/* ====== 迁移路线 ====== */
|
||
.phase-row { display:flex; gap:16px; width:100%; }
|
||
.phase-card {
|
||
flex:1; padding:20px; border-radius:12px; background:var(--card);
|
||
border:1px solid var(--border); position:relative;
|
||
}
|
||
.phase-num {
|
||
position:absolute; top:-12px; left:16px; padding:2px 10px; border-radius:10px;
|
||
font-size:11px; font-weight:700;
|
||
}
|
||
|
||
/* ====== 记忆层 ====== */
|
||
.mem-stack { display:flex; flex-direction:column; gap:12px; }
|
||
.mem-level {
|
||
padding:16px 20px; border-radius:10px; border-left:4px solid;
|
||
background:var(--card);
|
||
}
|
||
.mem-level.m0 { border-color:var(--accent); }
|
||
.mem-level.m1 { border-color:var(--accent2); }
|
||
.mem-level.m2 { border-color:var(--green); }
|
||
|
||
/* ====== 甘特图 ====== */
|
||
.gantt { width:100%; }
|
||
.gantt-row { display:flex; align-items:center; margin-bottom:8px; gap:12px; }
|
||
.gantt-label { width:120px; font-size:13px; font-weight:600; text-align:right; flex-shrink:0; }
|
||
.gantt-track { flex:1; height:28px; background:rgba(255,255,255,0.04); border-radius:6px; position:relative; }
|
||
.gantt-bar {
|
||
position:absolute; top:3px; height:22px; border-radius:4px; font-size:10px;
|
||
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/* ====== 时间轴 ====== */
|
||
.timeline { display:flex; width:100%; position:relative; margin:20px 0; }
|
||
.timeline::before {
|
||
content:''; position:absolute; top:18px; left:0; right:0;
|
||
height:3px; background:var(--border); z-index:0;
|
||
}
|
||
.tl-item { flex:1; text-align:center; position:relative; z-index:1; }
|
||
.tl-dot {
|
||
width:16px; height:16px; border-radius:50%; margin:10px auto 10px;
|
||
border:3px solid var(--accent); background:var(--bg1);
|
||
}
|
||
.tl-dot.done { background:var(--accent); }
|
||
.tl-label { font-size:12px; font-weight:600; color:var(--text); }
|
||
.tl-desc { font-size:11px; color:var(--text3); margin-top:4px; line-height:1.4; }
|
||
|
||
/* ====== 结尾数字 ====== */
|
||
.big-numbers { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
|
||
.big-num-card { text-align:center; padding:20px 30px; }
|
||
.big-num-val {
|
||
font-size:clamp(36px,5vw,60px); font-weight:800;
|
||
background:linear-gradient(135deg,var(--accent),var(--green));
|
||
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
|
||
}
|
||
.big-num-label { font-size:14px; color:var(--text2); margin-top:4px; }
|
||
|
||
/* ====== 代码块 ====== */
|
||
.code-block {
|
||
background:rgba(0,0,0,0.3); border-radius:8px; padding:16px;
|
||
font-family:var(--mono); font-size:12px; color:var(--green);
|
||
overflow-x:auto; line-height:1.6; white-space:pre; border:1px solid var(--border);
|
||
}
|
||
.code-comment { color:var(--text3); }
|
||
|
||
/* ====== 两列布局 ====== */
|
||
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:30px; width:100%; }
|
||
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; width:100%; }
|
||
|
||
/* ====== 快捷提示 ====== */
|
||
.shortcut-hint {
|
||
position:fixed; top:20px; right:20px; font-size:12px; color:var(--text3);
|
||
z-index:100; opacity:0.5; transition:opacity 0.3s;
|
||
}
|
||
.shortcut-hint:hover { opacity:1; }
|
||
|
||
/* ====== 滚动条 ====== */
|
||
.slide::-webkit-scrollbar { width:4px; }
|
||
.slide::-webkit-scrollbar-thumb { background:var(--text3); border-radius:2px; }
|
||
|
||
|
||
/* ====== 章节分隔页 ====== */
|
||
.section-divider {
|
||
background: linear-gradient(135deg, var(--bg1) 0%, #1a1a3e 50%, var(--bg2) 100%) !important;
|
||
text-align: center;
|
||
}
|
||
.section-divider .slide-title { font-size: clamp(32px, 4vw, 56px); }
|
||
|
||
/* ====== 补充样式 ====== */
|
||
.slide h2.slide-title { text-align: center; }
|
||
.slide h3 { margin-bottom: 0.5rem; }
|
||
.slide p { margin: 0; }
|
||
.slide ul { margin: 0; padding: 0; }
|
||
.slide strong { color: var(--text); }
|
||
.slide code {
|
||
background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px;
|
||
font-family: var(--mono); font-size: 0.85em;
|
||
}
|
||
.gantt-row { display:flex; align-items:center; margin-bottom:8px; gap:12px; }
|
||
.gantt-label { width:120px; font-size:13px; font-weight:600; text-align:right; flex-shrink:0; }
|
||
.gantt-track { flex:1; height:28px; background:rgba(255,255,255,0.04); border-radius:6px; position:relative; }
|
||
.gantt-bar {
|
||
position:absolute; top:3px; height:22px; border-radius:4px; font-size:10px;
|
||
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600;
|
||
white-space:nowrap;
|
||
}
|
||
.vue { border-color:rgba(74,222,128,0.4); color:var(--green); }
|
||
|
||
/* ====== 封面变体 ====== */
|
||
.cover-logo {
|
||
font-size:clamp(48px,6vw,80px); font-weight:800; letter-spacing:-2px;
|
||
background:linear-gradient(135deg,var(--accent),var(--accent2));
|
||
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
|
||
background-clip:text; margin-bottom:16px;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- Slide 1 — 封面 -->
|
||
<section class="slide cover" data-section="mgmt">
|
||
<div class="slide-body" style="text-align:center;">
|
||
<div style="margin-bottom:1.2rem;">
|
||
<span class="tag tag-blue" style="font-size:1rem;padding:0.5em 1.2em;">Rust 内核 · 浏览器嵌入 · 三层安全</span>
|
||
</div>
|
||
<h1 class="slide-title" style="font-size:3rem;margin-bottom:0.5rem;">
|
||
<span class="accent">sgClaw</span> · AI Agent 自动化底座
|
||
</h1>
|
||
<p style="font-size:1.4rem;color:var(--text2);margin-bottom:0.8rem;">业数融合一平台 · SuperRPA 智能增强层</p>
|
||
<div style="width:80px;height:3px;background:var(--accent);margin:1.5rem auto;border-radius:2px;"></div>
|
||
<p style="font-size:1.1rem;color:var(--text3);">项目架构宣讲 · 2026年3月</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 2 — 议程 -->
|
||
<section class="slide section-divider" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title" style="text-align:center;margin-bottom:2rem;">
|
||
<span class="accent">议程</span> <span class="sub">/ 今日宣讲内容</span>
|
||
</h2>
|
||
<div class="two-col" style="gap:2.5rem;">
|
||
<div class="card" style="border:2px solid var(--accent);position:relative;">
|
||
<div style="position:absolute;top:-0.7rem;left:1rem;">
|
||
<span class="tag tag-blue">当前部分</span>
|
||
</div>
|
||
<h3 style="color:var(--accent);margin-top:0.8rem;margin-bottom:0.3rem;">第一部分 · 管理层概览</h3>
|
||
<p style="color:var(--text2);margin-bottom:1rem;font-size:0.9rem;">约 30 分钟</p>
|
||
<ul style="list-style:none;padding:0;margin:0;line-height:2;">
|
||
<li>✦ 项目背景与业务痛点</li>
|
||
<li>✦ 什么是 Claw 技术</li>
|
||
<li>✦ 竞品分析与差异化</li>
|
||
<li>✦ 产品方案与业务场景</li>
|
||
<li>✦ 架构与安全保障</li>
|
||
<li>✦ 团队分工与排期</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card" style="opacity:0.6;">
|
||
<h3 style="color:var(--text2);margin-bottom:0.3rem;">第二部分 · 技术深潜</h3>
|
||
<p style="color:var(--text3);margin-bottom:1rem;font-size:0.9rem;">约 30 分钟</p>
|
||
<ul style="list-style:none;padding:0;margin:0;line-height:2;color:var(--text3);">
|
||
<li>◇ 框架选型依据</li>
|
||
<li>◇ 详细架构分解</li>
|
||
<li>◇ 安全机制详解</li>
|
||
<li>◇ 模块设计细节</li>
|
||
<li>◇ 数据流全链路</li>
|
||
<li>◇ Skill 体系设计</li>
|
||
<li>◇ 工程实现方案</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 3 — 项目背景 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">项目背景</span> <span class="sub">/ 从 SuperRPA 到智能 Agent</span>
|
||
</h2>
|
||
<div class="two-col" style="gap:2rem;margin-top:1.5rem;">
|
||
<div class="card">
|
||
<h3 style="color:var(--accent);margin-bottom:1rem;">🌐 业数融合一平台现状</h3>
|
||
<p style="line-height:1.8;color:var(--text2);">
|
||
国网系统已有 <strong style="color:var(--text);">SuperRPA 定制 Chromium 浏览器</strong>，广泛覆盖 OA、ERP、财务、人资等核心业务系统。
|
||
</p>
|
||
<p style="line-height:1.8;color:var(--text2);margin-top:0.8rem;">
|
||
浏览器内建 <strong style="color:var(--text);">40+ 自动化操作能力</strong>（CommandRouter），可执行点击、输入、页面跳转等操作。
|
||
</p>
|
||
<div style="border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem;">
|
||
<p style="color:var(--orange);">⚠️ 但目前全靠预编写脚本驱动，遇到新场景必须开发人员介入修改。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3 style="color:var(--green);margin-bottom:1rem;">🧠 为什么需要 AI Agent</h3>
|
||
<p style="line-height:1.8;color:var(--text2);">
|
||
现有脚本方案<strong style="color:var(--red);">无法应对业务变化</strong>——每当出现新的操作场景，都需要开发人员编写新脚本，响应周期长。
|
||
</p>
|
||
<p style="line-height:1.8;color:var(--text2);margin-top:0.8rem;">
|
||
<strong style="color:var(--text);">期望：</strong>业务人员用自然语言就能驱动自动化，无需编写脚本，无需等待开发排期。
|
||
</p>
|
||
<div style="border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem;">
|
||
<p style="color:var(--green);">✨ sgClaw = 让 SuperRPA 拥有 AI 大脑，从"按剧本执行"升级为"自主理解、自主操作"。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 4 — 业务痛点 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">业务痛点</span> <span class="sub">/ 跨系统人工操作的四大瓶颈</span>
|
||
</h2>
|
||
<div class="card-grid cols-2" style="margin-top:1.5rem;">
|
||
<div class="card">
|
||
<div class="card-icon">⏱</div>
|
||
<div class="card-label" style="color:var(--orange);">效率瓶颈</div>
|
||
<div class="card-num" style="font-size:1.6rem;color:var(--accent);">15-30 分钟/次</div>
|
||
<div class="card-desc">财务月末需手动登录 ERP → 导出数据 → 切换到合规系统 → 逐条核对 → 生成报告。一个人一天只能处理几份，严重影响业务效率。</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">⚠️</div>
|
||
<div class="card-label" style="color:var(--red);">差错风险</div>
|
||
<div class="card-num" style="font-size:1.6rem;color:var(--accent);">2-5% 错误率</div>
|
||
<div class="card-desc">金额录入错误、系统间数据不一致、审批流程遗漏——在财务合规场景中，这些差错零容忍，一旦出错代价极高。</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🎓</div>
|
||
<div class="card-label" style="color:var(--yellow);">培训成本</div>
|
||
<div class="card-num" style="font-size:1.6rem;color:var(--accent);">3-6 个月上手</div>
|
||
<div class="card-desc">新员工需熟悉 3-5 个业务系统的操作流程，师傅带徒弟、口口相传，知识传承效率低下，人员流动带来反复培训。</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-icon">🔄</div>
|
||
<div class="card-label" style="color:var(--accent2);">重复劳动</div>
|
||
<div class="card-num" style="font-size:1.6rem;color:var(--accent);">~80% 规则型</div>
|
||
<div class="card-desc">绝大多数日常操作有明确规则和流程，完全可被自动化替代。但现有方案受限于预编写脚本，新场景无法自适应。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 5 — 什么是 Claw -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">什么是 Claw</span> <span class="sub">/ 浏览器 AI Agent 技术</span>
|
||
</h2>
|
||
<div class="card" style="text-align:center;margin:1.2rem 0;padding:1.2rem;">
|
||
<p style="font-size:1.3rem;color:var(--accent);">💡 核心概念：Claw = 让 AI 像人一样操作浏览器的技术</p>
|
||
</div>
|
||
<div class="two-col" style="gap:2rem;margin-top:1rem;">
|
||
<div class="card" style="text-align:center;">
|
||
<h3 style="color:var(--text2);margin-bottom:1rem;">👤 人操作浏览器</h3>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:0.8rem;flex-wrap:wrap;">
|
||
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;min-width:100px;">
|
||
<div style="font-size:2rem;">👁</div>
|
||
<div style="color:var(--text2);font-size:0.85rem;margin-top:0.3rem;">眼睛看</div>
|
||
<div style="color:var(--text3);font-size:0.75rem;">看到页面内容</div>
|
||
</div>
|
||
<div style="color:var(--text3);font-size:1.5rem;">→</div>
|
||
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;min-width:100px;">
|
||
<div style="font-size:2rem;">🧠</div>
|
||
<div style="color:var(--text2);font-size:0.85rem;margin-top:0.3rem;">大脑想</div>
|
||
<div style="color:var(--text3);font-size:0.75rem;">判断下一步</div>
|
||
</div>
|
||
<div style="color:var(--text3);font-size:1.5rem;">→</div>
|
||
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;min-width:100px;">
|
||
<div style="font-size:2rem;">🖐</div>
|
||
<div style="color:var(--text2);font-size:0.85rem;margin-top:0.3rem;">手操作</div>
|
||
<div style="color:var(--text3);font-size:0.75rem;">点击、输入</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;border:1px solid var(--accent);">
|
||
<h3 style="color:var(--accent);margin-bottom:1rem;">🤖 AI 操作浏览器</h3>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:0.8rem;flex-wrap:wrap;">
|
||
<div style="background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:1rem;min-width:100px;">
|
||
<div style="font-size:2rem;">📄</div>
|
||
<div style="color:var(--accent);font-size:0.85rem;margin-top:0.3rem;">感知页面</div>
|
||
<div style="color:var(--text3);font-size:0.75rem;">读取页面结构</div>
|
||
</div>
|
||
<div style="color:var(--accent);font-size:1.5rem;">→</div>
|
||
<div style="background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:1rem;min-width:100px;">
|
||
<div style="font-size:2rem;">🧠</div>
|
||
<div style="color:var(--accent);font-size:0.85rem;margin-top:0.3rem;">大模型推理</div>
|
||
<div style="color:var(--text3);font-size:0.75rem;">规划操作步骤</div>
|
||
</div>
|
||
<div style="color:var(--accent);font-size:1.5rem;">→</div>
|
||
<div style="background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:1rem;min-width:100px;">
|
||
<div style="font-size:2rem;">⚡</div>
|
||
<div style="color:var(--accent);font-size:0.85rem;margin-top:0.3rem;">自动操作</div>
|
||
<div style="color:var(--text3);font-size:0.75rem;">自主执行任务</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:1.2rem;display:flex;gap:1rem;align-items:stretch;">
|
||
<div class="card" style="flex:1;text-align:center;border-top:2px solid var(--orange);">
|
||
<p style="color:var(--orange);font-weight:600;margin-bottom:0.3rem;">⚠️ 这不是传统自动化脚本</p>
|
||
<p style="color:var(--text3);font-size:0.85rem;">Claw 使用 AI 推理，能应对页面变化，而非依赖预设路径</p>
|
||
</div>
|
||
<div class="card" style="flex:1;text-align:center;border-top:2px solid var(--green);">
|
||
<p style="color:var(--green);font-weight:600;margin-bottom:0.3rem;">🔥 2024-2025 最热方向</p>
|
||
<p style="color:var(--text3);font-size:0.85rem;">Claw 成为 AI 领域最热门的方向之一，开源社区涌现大量项目</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 6 — Claw 技术原理 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">Claw 如何工作</span> <span class="sub">/ 以"导出合规报表"为例</span>
|
||
</h2>
|
||
<div style="display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;">
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1.2rem;border-left:4px solid var(--accent);">
|
||
<div style="font-size:2.5rem;min-width:50px;text-align:center;">👁</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:0.3rem;">第一步 · 看见</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">AI 读取当前页面的全部内容，理解页面上有哪些按钮、输入框、菜单选项。就像一个人打开网页后先"看一眼"，搞清楚当前在哪个页面、有什么可以操作的。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1.2rem;border-left:4px solid var(--accent2);">
|
||
<div style="font-size:2.5rem;min-width:50px;text-align:center;">🧠</div>
|
||
<div>
|
||
<h3 style="color:var(--accent2);margin-bottom:0.3rem;">第二步 · 思考</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">AI 大模型进行分析和规划："要导出报表，我需要先登录 ERP，找到报表页面，选择本月日期范围，点击导出按钮。" 这个过程就像一个熟练员工在脑海里规划操作步骤。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1.2rem;border-left:4px solid var(--green);">
|
||
<div style="font-size:2.5rem;min-width:50px;text-align:center;">🖱</div>
|
||
<div>
|
||
<h3 style="color:var(--green);margin-bottom:0.3rem;">第三步 · 操作</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">AI 自动点击按钮、输入文字、切换页面，就像真人在操作浏览器一样。每一步操作后，AI 会重新"看一眼"页面，确认操作是否生效。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1.2rem;border-left:4px solid var(--orange);">
|
||
<div style="font-size:2.5rem;min-width:50px;text-align:center;">✅</div>
|
||
<div>
|
||
<h3 style="color:var(--orange);margin-bottom:0.3rem;">第四步 · 确认</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">AI 检查操作是否成功完成。如果发现页面报错或操作不符合预期，会自动重试或调整方案。遇到无法解决的问题，会主动请求人工帮助。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;margin-top:1rem;background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.2);">
|
||
<p style="color:var(--accent);">🔁 整个过程循环进行，直到任务完成。与传统脚本不同，AI 能应对页面变化和异常情况——即使按钮位置变了、多了一步确认弹窗，AI 也能自适应处理。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 7 — OpenClaw 开源生态 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">开源生态</span> <span class="sub">/ Claw 技术的主要项目</span>
|
||
</h2>
|
||
<div class="card-grid cols-3" style="margin-top:1.5rem;">
|
||
<div class="card" style="border-top:3px solid var(--accent);">
|
||
<div class="card-num" style="font-size:0.85rem;color:var(--text3);">Python</div>
|
||
<div class="card-label" style="color:var(--accent);font-size:1.1rem;">browser-use</div>
|
||
<div style="margin:0.5rem 0;"><span class="tag tag-yellow">⭐ 60K+ Stars</span></div>
|
||
<div class="card-desc">最流行的浏览器 Agent 框架，基于 Playwright 控制浏览器，社区活跃度最高。</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--accent2);">
|
||
<div class="card-num" style="font-size:0.85rem;color:var(--text3);">Python</div>
|
||
<div class="card-label" style="color:var(--accent2);font-size:1.1rem;">OpenHands</div>
|
||
<div style="margin:0.5rem 0;"><span class="tag tag-blue">原 OpenDevin</span></div>
|
||
<div class="card-desc">开发者 Agent 平台，支持浏览器操作和代码编写，功能全面但体量较重。</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--green);">
|
||
<div class="card-num" style="font-size:0.85rem;color:var(--text3);">TypeScript</div>
|
||
<div class="card-label" style="color:var(--green);font-size:1.1rem;">Stagehand</div>
|
||
<div style="margin:0.5rem 0;"><span class="tag tag-green">Browserbase 出品</span></div>
|
||
<div class="card-desc">专注网页自动化的轻量方案，由 Browserbase 公司开发维护。</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--orange);">
|
||
<div class="card-num" style="font-size:0.85rem;color:var(--text3);">Rust</div>
|
||
<div class="card-label" style="color:var(--orange);font-size:1.1rem;">ZeroClaw</div>
|
||
<div style="margin:0.5rem 0;"><span class="tag tag-orange">⭐ 17K+ Stars</span></div>
|
||
<div class="card-desc">高性能 Agent 框架，基于模块化架构，是 sgClaw 的技术底座。</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--text3);">
|
||
<div class="card-num" style="font-size:0.85rem;color:var(--text3);">其他项目</div>
|
||
<div class="card-label" style="color:var(--text2);font-size:1.1rem;">LaVague · AgentQL · Skyvern ...</div>
|
||
<div style="margin:0.5rem 0;"><span class="tag tag-blue">持续涌现</span></div>
|
||
<div class="card-desc">各有侧重点，如视觉操作、结构化查询、企业级工作流等方向。</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;margin-top:1rem;border:1px solid var(--orange);background:rgba(251,146,60,0.06);">
|
||
<p style="color:var(--orange);">⚠️ 这些项目各有特色，但直接用于国网政企环境存在共性问题 →</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 8 — 竞品问题分析 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">直接使用的问题</span> <span class="sub">/ 开源方案为何不能直接用</span>
|
||
</h2>
|
||
<div style="display:flex;flex-direction:column;gap:0.8rem;margin-top:1.5rem;">
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1rem;border-left:4px solid var(--red);">
|
||
<div style="font-size:1.8rem;min-width:40px;text-align:center;">🔌</div>
|
||
<div>
|
||
<h3 style="color:var(--red);margin-bottom:0.3rem;">外部进程架构 — 暴露通信端口</h3>
|
||
<p style="color:var(--text2);line-height:1.6;">所有开源方案都是独立进程通过网络端口控制浏览器。端口暴露在本机上，任何进程都能连接，容易被安全检测工具发现和拦截。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1rem;border-left:4px solid var(--red);">
|
||
<div style="font-size:1.8rem;min-width:40px;text-align:center;">🚨</div>
|
||
<div>
|
||
<h3 style="color:var(--red);margin-bottom:0.3rem;">安全不可控 — AI 输出无防护</h3>
|
||
<p style="color:var(--text2);line-height:1.6;">AI 大模型的输出直接执行，没有任何防护层。如果 AI 被恶意网页内容诱导（提示词注入攻击），可能执行危险操作、泄露敏感数据。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1rem;border-left:4px solid var(--orange);">
|
||
<div style="font-size:1.8rem;min-width:40px;text-align:center;">💾</div>
|
||
<div>
|
||
<h3 style="color:var(--orange);margin-bottom:0.3rem;">资源占用高 — 终端配置吃紧</h3>
|
||
<p style="color:var(--text2);line-height:1.6;">运行环境加浏览器实例，动辄占用 300-500MB 内存。国网终端标配 8GB 内存，同时运行业务系统后所剩无几，无法承受额外负担。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1rem;border-left:4px solid var(--orange);">
|
||
<div style="font-size:1.8rem;min-width:40px;text-align:center;">🔁</div>
|
||
<div>
|
||
<h3 style="color:var(--orange);margin-bottom:0.3rem;">无经验沉淀 — 每次从零开始</h3>
|
||
<p style="color:var(--text2);line-height:1.6;">每次执行相同任务都要从头推理，消耗大量 AI 调用额度和等待时间。没有学习能力，不会越用越快、越用越准。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="display:flex;align-items:flex-start;gap:1rem;border-left:4px solid var(--yellow);">
|
||
<div style="font-size:1.8rem;min-width:40px;text-align:center;">🏠</div>
|
||
<div>
|
||
<h3 style="color:var(--yellow);margin-bottom:0.3rem;">无国产化适配 — 内网部署困难</h3>
|
||
<p style="color:var(--text2);line-height:1.6;">均面向国外操作系统开发，未适配银河麒麟 V10。运行环境依赖复杂，内网环境下安装部署难度极大。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 9 — sgClaw 的答案 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">sgClaw 方案</span> <span class="sub">/ 五个问题，五个解法</span>
|
||
</h2>
|
||
<div style="display:flex;flex-direction:column;gap:0.7rem;margin-top:1.5rem;">
|
||
<div style="display:flex;align-items:stretch;gap:0.5rem;">
|
||
<div class="card" style="flex:1;border-left:4px solid var(--red);opacity:0.7;">
|
||
<div style="font-size:0.75rem;color:var(--red);margin-bottom:0.2rem;">❌ 问题</div>
|
||
<h4 style="color:var(--text2);margin-bottom:0.2rem;">外部进程架构</h4>
|
||
<p style="color:var(--text3);font-size:0.85rem;">通信端口暴露，可被检测拦截</p>
|
||
</div>
|
||
<div style="display:flex;align-items:center;color:var(--green);font-size:1.5rem;">→</div>
|
||
<div class="card" style="flex:1.3;border-left:4px solid var(--green);">
|
||
<div style="font-size:0.75rem;color:var(--green);margin-bottom:0.2rem;">✅ 解法：内核嵌入</div>
|
||
<h4 style="color:var(--text);margin-bottom:0.2rem;">直接嵌入浏览器内核</h4>
|
||
<p style="color:var(--text2);font-size:0.85rem;">通过进程私有管道通信，没有端口暴露，不可被外部检测</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;gap:0.5rem;">
|
||
<div class="card" style="flex:1;border-left:4px solid var(--red);opacity:0.7;">
|
||
<div style="font-size:0.75rem;color:var(--red);margin-bottom:0.2rem;">❌ 问题</div>
|
||
<h4 style="color:var(--text2);margin-bottom:0.2rem;">安全不可控</h4>
|
||
<p style="color:var(--text3);font-size:0.85rem;">AI 输出直接执行，零防护</p>
|
||
</div>
|
||
<div style="display:flex;align-items:center;color:var(--green);font-size:1.5rem;">→</div>
|
||
<div class="card" style="flex:1.3;border-left:4px solid var(--green);">
|
||
<div style="font-size:0.75rem;color:var(--green);margin-bottom:0.2rem;">✅ 解法：三层防御</div>
|
||
<h4 style="color:var(--text);margin-bottom:0.2rem;">管道隔离 + 命令审查 + 人工确认</h4>
|
||
<p style="color:var(--text2);font-size:0.85rem;">三层独立拦截，任意一层即可阻断危险操作</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;gap:0.5rem;">
|
||
<div class="card" style="flex:1;border-left:4px solid var(--red);opacity:0.7;">
|
||
<div style="font-size:0.75rem;color:var(--red);margin-bottom:0.2rem;">❌ 问题</div>
|
||
<h4 style="color:var(--text2);margin-bottom:0.2rem;">资源占用高</h4>
|
||
<p style="color:var(--text3);font-size:0.85rem;">300-500MB 内存，终端吃紧</p>
|
||
</div>
|
||
<div style="display:flex;align-items:center;color:var(--green);font-size:1.5rem;">→</div>
|
||
<div class="card" style="flex:1.3;border-left:4px solid var(--green);">
|
||
<div style="font-size:0.75rem;color:var(--green);margin-bottom:0.2rem;">✅ 解法：超轻量</div>
|
||
<h4 style="color:var(--text);margin-bottom:0.2rem;">仅 5MB 内存，冷启动 <10ms</h4>
|
||
<p style="color:var(--text2);font-size:0.85rem;">Rust 编写，二进制仅 8.8MB，占总内存预算不到 0.1%</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;gap:0.5rem;">
|
||
<div class="card" style="flex:1;border-left:4px solid var(--red);opacity:0.7;">
|
||
<div style="font-size:0.75rem;color:var(--red);margin-bottom:0.2rem;">❌ 问题</div>
|
||
<h4 style="color:var(--text2);margin-bottom:0.2rem;">无经验沉淀</h4>
|
||
<p style="color:var(--text3);font-size:0.85rem;">每次从头推理，不会学习</p>
|
||
</div>
|
||
<div style="display:flex;align-items:center;color:var(--green);font-size:1.5rem;">→</div>
|
||
<div class="card" style="flex:1.3;border-left:4px solid var(--green);">
|
||
<div style="font-size:0.75rem;color:var(--green);margin-bottom:0.2rem;">✅ 解法：Skill 自进化</div>
|
||
<h4 style="color:var(--text);margin-bottom:0.2rem;">成功经验自动保存，越用越快</h4>
|
||
<p style="color:var(--text2);font-size:0.85rem;">相似任务直接复用历史经验，高频任务提炼为正式技能</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;gap:0.5rem;">
|
||
<div class="card" style="flex:1;border-left:4px solid var(--red);opacity:0.7;">
|
||
<div style="font-size:0.75rem;color:var(--red);margin-bottom:0.2rem;">❌ 问题</div>
|
||
<h4 style="color:var(--text2);margin-bottom:0.2rem;">无国产化适配</h4>
|
||
<p style="color:var(--text3);font-size:0.85rem;">内网部署极其困难</p>
|
||
</div>
|
||
<div style="display:flex;align-items:center;color:var(--green);font-size:1.5rem;">→</div>
|
||
<div class="card" style="flex:1.3;border-left:4px solid var(--green);">
|
||
<div style="font-size:0.75rem;color:var(--green);margin-bottom:0.2rem;">✅ 解法：原生支持</div>
|
||
<h4 style="color:var(--text);margin-bottom:0.2rem;">银河麒麟 V10 原生运行</h4>
|
||
<p style="color:var(--text2);font-size:0.85rem;">静态编译零依赖，内网部署仅需复制一个文件</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 10 — sgClaw vs 竞品 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">方案对比</span> <span class="sub">/ sgClaw 的差异化优势</span>
|
||
</h2>
|
||
<div style="overflow-x:auto;margin-top:1.5rem;">
|
||
<table class="slide-table" style="width:100%;font-size:0.88rem;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:16%;">对比维度</th>
|
||
<th style="width:21%;background:rgba(74,222,128,0.1);color:var(--green);border-bottom:2px solid var(--green);">🏆 sgClaw</th>
|
||
<th style="width:21%;">browser-use</th>
|
||
<th style="width:21%;">OpenHands</th>
|
||
<th style="width:21%;">Stagehand</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="color:var(--text2);">语言 / 框架</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">Rust / ZeroClaw</strong></td>
|
||
<td>Python / Playwright</td>
|
||
<td>Python / Playwright</td>
|
||
<td>TypeScript / Playwright</td>
|
||
</tr>
|
||
<tr class="highlight">
|
||
<td style="color:var(--text2);">架构模式</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">浏览器内核嵌入</strong></td>
|
||
<td>外部进程 + 网络端口</td>
|
||
<td>外部进程 + 网络端口</td>
|
||
<td>外部进程 + 网络端口</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="color:var(--text2);">通信方式</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">私有管道（零暴露）</strong></td>
|
||
<td style="color:var(--red);">端口暴露</td>
|
||
<td style="color:var(--red);">端口暴露</td>
|
||
<td style="color:var(--red);">端口暴露</td>
|
||
</tr>
|
||
<tr class="highlight">
|
||
<td style="color:var(--text2);">安全管控</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">三层纵深防御</strong></td>
|
||
<td style="color:var(--red);">无</td>
|
||
<td style="color:var(--text3);">基础沙箱</td>
|
||
<td style="color:var(--red);">无</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="color:var(--text2);">运行内存</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">~5MB</strong></td>
|
||
<td style="color:var(--orange);">~394MB</td>
|
||
<td style="color:var(--red);">~500MB+</td>
|
||
<td style="color:var(--orange);">~200MB</td>
|
||
</tr>
|
||
<tr class="highlight">
|
||
<td style="color:var(--text2);">国产化支持</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">银河麒麟原生</strong></td>
|
||
<td style="color:var(--text3);">需适配</td>
|
||
<td style="color:var(--text3);">需适配</td>
|
||
<td style="color:var(--text3);">需适配</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="color:var(--text2);">Skill 复用</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">自进化 + Skill 仓库</strong></td>
|
||
<td style="color:var(--red);">无</td>
|
||
<td style="color:var(--red);">无</td>
|
||
<td style="color:var(--red);">无</td>
|
||
</tr>
|
||
<tr class="highlight">
|
||
<td style="color:var(--text2);">反检测能力</td>
|
||
<td style="background:rgba(74,222,128,0.05);"><strong style="color:var(--green);">内核级，不可检测</strong></td>
|
||
<td style="color:var(--red);">可被检测</td>
|
||
<td style="color:var(--red);">可被检测</td>
|
||
<td style="color:var(--red);">可被检测</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 11 — 产品形态 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">产品形态</span> <span class="sub">/ 用户视角的操作体验</span>
|
||
</h2>
|
||
<div style="display:flex;flex-direction:column;gap:0.6rem;margin-top:1.5rem;">
|
||
<div class="card" style="display:flex;align-items:center;gap:1rem;">
|
||
<div style="min-width:52px;height:52px;border-radius:50%;background:var(--card);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--accent);">1</div>
|
||
<div>
|
||
<h4 style="color:var(--accent);margin-bottom:0.2rem;">打开 SuperRPA 浏览器</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;">和平时一模一样的浏览器，没有额外安装，没有新软件</p>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);font-size:1.2rem;">↓</div>
|
||
<div class="card" style="display:flex;align-items:center;gap:1rem;">
|
||
<div style="min-width:52px;height:52px;border-radius:50%;background:var(--card);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--accent);">2</div>
|
||
<div>
|
||
<h4 style="color:var(--accent);margin-bottom:0.2rem;">点击侧边栏"AI 助手"面板</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;">浏览器侧边栏新增一个 AI 助手入口，点击即可展开对话界面</p>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);font-size:1.2rem;">↓</div>
|
||
<div class="card" style="display:flex;align-items:center;gap:1rem;">
|
||
<div style="min-width:52px;height:52px;border-radius:50%;background:var(--card);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--accent);">3</div>
|
||
<div>
|
||
<h4 style="color:var(--accent);margin-bottom:0.2rem;">输入自然语言指令</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;">在对话框输入：<strong style="color:var(--text);">"帮我导出本月 ERP 合规报表"</strong>，像和同事说话一样</p>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);font-size:1.2rem;">↓</div>
|
||
<div class="card" style="display:flex;align-items:center;gap:1rem;border:1px solid var(--accent);">
|
||
<div style="min-width:52px;height:52px;border-radius:50%;background:rgba(56,189,248,0.15);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--accent);">4</div>
|
||
<div>
|
||
<h4 style="color:var(--accent);margin-bottom:0.2rem;">AI 助手自动执行</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;">自动登录 ERP → 导航到报表页 → 选择月份 → 点击导出。侧边栏实时显示执行进度</p>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--text3);font-size:1.2rem;">↓</div>
|
||
<div class="card" style="display:flex;align-items:center;gap:1rem;border:1px solid var(--green);">
|
||
<div style="min-width:52px;height:52px;border-radius:50%;background:rgba(74,222,128,0.15);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--green);">5</div>
|
||
<div>
|
||
<h4 style="color:var(--green);margin-bottom:0.2rem;">✅ 任务完成</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;">侧边栏显示 "报表已导出到下载目录"，用户确认即可</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;margin-top:0.8rem;background:rgba(74,222,128,0.06);border:1px solid rgba(74,222,128,0.2);">
|
||
<p style="color:var(--green);font-size:1rem;"><strong>全程不离开浏览器 · 不需要安装任何软件 · 不需要编写脚本</strong></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 12 — 业务场景 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">业务场景覆盖</span> <span class="sub">/ 六大核心场景</span>
|
||
</h2>
|
||
<div class="card-grid cols-3" style="margin-top:1.5rem;">
|
||
<div class="card" style="border-top:3px solid var(--accent);">
|
||
<div class="card-icon">📊</div>
|
||
<div class="card-label" style="color:var(--accent);">财务合规</div>
|
||
<div class="card-desc">自动导出 ERP 合规报表，交叉核对多系统数据，生成合规报告</div>
|
||
<div style="margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);">
|
||
<span class="tag tag-green">2-3小时 → 5-8分钟</span>
|
||
<span class="tag tag-blue" style="margin-top:0.3rem;">差错率 0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--accent2);">
|
||
<div class="card-icon">📋</div>
|
||
<div class="card-label" style="color:var(--accent2);">OA 审批</div>
|
||
<div class="card-desc">批量处理待审批单据，按预设规则自动审批，异常单据自动标记</div>
|
||
<div style="margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);">
|
||
<span class="tag tag-green">200条/人日 → 5000+/小时</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--orange);">
|
||
<div class="card-icon">⚡</div>
|
||
<div class="card-label" style="color:var(--orange);">风险监测</div>
|
||
<div class="card-desc">7×24 小时实时监控风险指标，异常数据自动预警，及时处置</div>
|
||
<div style="margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);">
|
||
<span class="tag tag-green">次日发现 → 实时预警</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--green);">
|
||
<div class="card-icon">👥</div>
|
||
<div class="card-label" style="color:var(--green);">人资社保</div>
|
||
<div class="card-desc">批量办理社保增减员，自动填报各类人事表单，减少重复录入</div>
|
||
<div style="margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);">
|
||
<span class="tag tag-green">3-5个工作日 → 2-4小时</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--yellow);">
|
||
<div class="card-icon">📈</div>
|
||
<div class="card-label" style="color:var(--yellow);">营销数据</div>
|
||
<div class="card-desc">跨平台采集营销数据，自动汇总分析，输出可视化报表</div>
|
||
<div style="margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);">
|
||
<span class="tag tag-green">200条/人日 → 5000+/小时</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--red);">
|
||
<div class="card-icon">🔄</div>
|
||
<div class="card-label" style="color:var(--red);">跨系统同步</div>
|
||
<div class="card-desc">ERP → 财务 → HR 多系统数据同步，确保数据一致性</div>
|
||
<div style="margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);">
|
||
<span class="tag tag-green">2-3天 → 30分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 13 — 整体架构(简版) -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">整体架构</span> <span class="sub">/ 给管理层看的简化视图</span>
|
||
</h2>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:0.5rem;margin:2rem 0 1.5rem;flex-wrap:wrap;">
|
||
<div class="arch-node" style="text-align:center;min-width:160px;">
|
||
<div style="font-size:2rem;margin-bottom:0.3rem;">👤</div>
|
||
<div style="color:var(--accent);font-weight:600;">业务人员</div>
|
||
<div style="color:var(--text3);font-size:0.8rem;margin-top:0.3rem;">用自然语言说需求</div>
|
||
</div>
|
||
<div class="arch-arrow">
|
||
<div class="a-line">→</div>
|
||
<div class="a-label">对话</div>
|
||
</div>
|
||
<div class="arch-node" style="text-align:center;min-width:160px;border-color:var(--accent2);">
|
||
<div style="font-size:2rem;margin-bottom:0.3rem;">🌐</div>
|
||
<div style="color:var(--accent2);font-weight:600;">SuperRPA 浏览器</div>
|
||
<div style="color:var(--text3);font-size:0.8rem;margin-top:0.3rem;">已有定制浏览器<br>sgClaw 嵌入其中</div>
|
||
</div>
|
||
<div class="arch-arrow">
|
||
<div class="a-line">⇄</div>
|
||
<div class="a-label">私有管道</div>
|
||
</div>
|
||
<div class="arch-node" style="text-align:center;min-width:160px;border-color:var(--green);">
|
||
<div style="font-size:2rem;margin-bottom:0.3rem;">⚙️</div>
|
||
<div style="color:var(--green);font-weight:600;">sgClaw 引擎</div>
|
||
<div style="color:var(--text3);font-size:0.8rem;margin-top:0.3rem;">AI 大脑：理解意图<br>规划步骤、执行操作</div>
|
||
</div>
|
||
<div class="arch-arrow">
|
||
<div class="a-line">⇄</div>
|
||
<div class="a-label">推理</div>
|
||
</div>
|
||
<div class="arch-node" style="text-align:center;min-width:160px;border-color:var(--orange);">
|
||
<div style="font-size:2rem;margin-bottom:0.3rem;">🤖</div>
|
||
<div style="color:var(--orange);font-weight:600;">AI 大模型</div>
|
||
<div style="color:var(--text3);font-size:0.8rem;margin-top:0.3rem;">Claude / GPT / 本地模型<br>提供智能推理</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-grid cols-3" style="margin-top:1rem;">
|
||
<div class="card" style="border-top:2px solid var(--accent);">
|
||
<h4 style="color:var(--accent);margin-bottom:0.5rem;">💡 为什么嵌在浏览器里？</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;line-height:1.6;">直接复用浏览器已有的 40+ 操作能力，不重复造轮子，开发效率最大化。</p>
|
||
</div>
|
||
<div class="card" style="border-top:2px solid var(--orange);">
|
||
<h4 style="color:var(--orange);margin-bottom:0.5rem;">🔒 为什么不用外部方案？</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;line-height:1.6;">外部方案有端口暴露和安全风险，嵌入方案零暴露、零风险，满足政企安全要求。</p>
|
||
</div>
|
||
<div class="card" style="border-top:2px solid var(--green);">
|
||
<h4 style="color:var(--green);margin-bottom:0.5rem;">🛡️ 对现有系统有影响吗？</h4>
|
||
<p style="color:var(--text2);font-size:0.9rem;line-height:1.6;">零侵入设计。sgClaw 不在时，浏览器完全正常工作，不影响任何现有功能。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 14 — 安全保障 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">安全保障</span> <span class="sub">/ 三层防御，绝不失控</span>
|
||
</h2>
|
||
<div style="display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;">
|
||
<div class="card" style="border-left:5px solid var(--red);position:relative;">
|
||
<div style="position:absolute;top:-0.6rem;right:1rem;">
|
||
<span class="tag tag-red">第三层 · 最后防线</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-start;gap:1rem;margin-top:0.5rem;">
|
||
<div style="font-size:2.5rem;">🛑</div>
|
||
<div>
|
||
<h3 style="color:var(--red);margin-bottom:0.4rem;">人工兜底</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">涉及登录密码、数据删除等敏感操作时，<strong style="color:var(--text);">必须弹窗请用户确认</strong>，AI 无法绕过。任何时候用户都可以<strong style="color:var(--text);">一键停止 AI</strong>，立即中断所有操作。人始终拥有最终控制权。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-left:5px solid var(--orange);position:relative;">
|
||
<div style="position:absolute;top:-0.6rem;right:1rem;">
|
||
<span class="tag tag-orange">第二层 · 智能审查</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-start;gap:1rem;margin-top:0.5rem;">
|
||
<div style="font-size:2.5rem;">🔍</div>
|
||
<div>
|
||
<h3 style="color:var(--orange);margin-bottom:0.4rem;">命令审查</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">AI 每次要操作浏览器，都要经过严格审查：<strong style="color:var(--text);">不能访问未授权的网站</strong>，不能执行危险操作（如批量删除），连续失败超过阈值会<strong style="color:var(--text);">自动停止运行</strong>，防止 AI 陷入错误循环。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-left:5px solid var(--green);position:relative;">
|
||
<div style="position:absolute;top:-0.6rem;right:1rem;">
|
||
<span class="tag tag-green">第一层 · 物理隔离</span>
|
||
</div>
|
||
<div style="display:flex;align-items:flex-start;gap:1rem;margin-top:0.5rem;">
|
||
<div style="font-size:2.5rem;">🔐</div>
|
||
<div>
|
||
<h3 style="color:var(--green);margin-bottom:0.4rem;">通信隔离</h3>
|
||
<p style="color:var(--text2);line-height:1.7;">AI 引擎和浏览器之间的通信管道是<strong style="color:var(--text);">完全私有的</strong>，就像两个人通过专线电话交谈，外人无法窃听、无法插话、无法伪造指令。不存在网络端口暴露。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;margin-top:1rem;background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.2);">
|
||
<p style="color:var(--accent);font-size:1.05rem;">🛡️ <strong>即使 AI 大模型被恶意内容诱导，三层防线中的任意一层都能独立拦截，确保安全可控。</strong></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 15 — 团队分工 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">团队分工</span> <span class="sub">/ 5 人团队，2250 行自研代码</span>
|
||
</h2>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;margin-top:1.2rem;">
|
||
<div class="card" style="border-top:3px solid var(--orange);padding:0.9rem;">
|
||
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;">
|
||
<div style="font-size:1.6rem;">🦀</div>
|
||
<div>
|
||
<div class="card-label" style="color:var(--orange);font-size:0.95rem;">P1a · 核心通信</div>
|
||
<div style="color:var(--text3);font-size:0.72rem;">Rust 工程师 · 赵义仑</div>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--text2);line-height:1.5;font-size:0.8rem;">Pipe 协议、浏览器工具、安全策略</p>
|
||
<div style="margin-top:0.6rem;">
|
||
<span class="tag tag-orange" style="font-size:0.68rem;">~900 行</span>
|
||
<span class="tag tag-red" style="font-size:0.68rem;">关键路径</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--pink);padding:0.9rem;">
|
||
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;">
|
||
<div style="font-size:1.6rem;">🧩</div>
|
||
<div>
|
||
<div class="card-label" style="color:var(--pink);font-size:0.95rem;">P1b · 业务支持</div>
|
||
<div style="color:var(--text3);font-size:0.72rem;">Rust 工程师</div>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--text2);line-height:1.5;font-size:0.8rem;">Skill 加载、记忆管理、评估器</p>
|
||
<div style="margin-top:0.6rem;"><span class="tag tag-blue" style="font-size:0.68rem;">~600 行</span></div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--accent);padding:0.9rem;">
|
||
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;">
|
||
<div style="font-size:1.6rem;">🔷</div>
|
||
<div>
|
||
<div class="card-label" style="color:var(--accent);font-size:0.95rem;">P2 · 浏览器对接</div>
|
||
<div style="color:var(--text3);font-size:0.72rem;">C++ 浏览器工程师</div>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--text2);line-height:1.5;font-size:0.8rem;">进程宿主、管道监听、MAC 检查</p>
|
||
<div style="margin-top:0.6rem;"><span class="tag tag-blue" style="font-size:0.68rem;">~600 行</span></div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--green);padding:0.9rem;">
|
||
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;">
|
||
<div style="font-size:1.6rem;">📦</div>
|
||
<div>
|
||
<div class="card-label" style="color:var(--green);font-size:0.95rem;">P3 · 业务技能</div>
|
||
<div style="color:var(--text3);font-size:0.72rem;">业务 + AI 工程师</div>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--text2);line-height:1.5;font-size:0.8rem;">AI 辅助迁移 400+ 场景，提示词工程</p>
|
||
<div style="margin-top:0.6rem;">
|
||
<span class="tag tag-green" style="font-size:0.68rem;">10-15 个黄金样本</span>
|
||
<span class="tag tag-blue" style="font-size:0.68rem;">AI 生成 400+</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-top:3px solid var(--accent2);padding:0.9rem;grid-column:span 2;">
|
||
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;">
|
||
<div style="font-size:1.6rem;">🖥️</div>
|
||
<div>
|
||
<div class="card-label" style="color:var(--accent2);font-size:0.95rem;">P4 · 前端与发布</div>
|
||
<div style="color:var(--text3);font-size:0.72rem;">前端 + DevOps</div>
|
||
</div>
|
||
</div>
|
||
<p style="color:var(--text2);line-height:1.5;font-size:0.8rem;">AI 助手面板、Skill 管理后台、测试框架、CI/CD 流水线、双平台打包</p>
|
||
<div style="margin-top:0.6rem;"><span class="tag tag-blue" style="font-size:0.68rem;">UI ~150 行</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;margin-top:0.8rem;background:rgba(129,140,248,0.08);border:1px solid rgba(129,140,248,0.2);padding:0.75rem;">
|
||
<p style="color:var(--accent2);font-size:0.85rem;">📐 基于开源 ZeroClaw 框架，<strong style="color:var(--text);">84% 代码复用</strong>，仅需自研约 <strong style="color:var(--text);">2250 行</strong>代码——高效务实，不重复造轮子</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 16 — 里程碑 -->
|
||
<section class="slide" data-section="mgmt">
|
||
<div class="slide-body">
|
||
<h2 class="slide-title">
|
||
<span class="accent">里程碑与排期</span> <span class="sub">/ 2 周开发计划 · 5 人协作</span>
|
||
</h2>
|
||
<div class="timeline" style="margin-top:1.5rem;">
|
||
<div class="tl-item">
|
||
<div class="tl-dot done"></div>
|
||
<div class="tl-label">Day 1-2</div>
|
||
<div class="tl-desc">
|
||
<strong style="color:var(--text);">环境搭建 · 5 人并行</strong>
|
||
<p style="color:var(--text3);font-size:0.8rem;margin-top:0.2rem;">P1a/P1b: Rust 环境 · P2: Chromium 编译 · P3: 场景调研 · P4: Vue 开发环境</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot done"></div>
|
||
<div class="tl-label">Day 3</div>
|
||
<div class="tl-desc">
|
||
<strong style="color:var(--text);">P1a Pipe 协议开发</strong>
|
||
<p style="color:var(--text3);font-size:0.8rem;margin-top:0.2rem;">实现 STDIO 双向通信，为 Day 4-5 联调做准备</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot" style="background:var(--red);box-shadow:0 0 12px var(--red);"></div>
|
||
<div class="tl-label" style="color:var(--red);font-weight:700;">Day 4-5 ⭐⭐⭐</div>
|
||
<div class="tl-desc" style="border:2px solid var(--red);border-radius:8px;padding:0.7rem;background:rgba(239,68,68,0.05);">
|
||
<strong style="color:var(--red);">关键路径 — P1a + P2 联调 Pipe 通信</strong>
|
||
<p style="color:var(--text2);font-size:0.8rem;margin-top:0.2rem;"><strong>极高风险</strong>：阻塞所有后续工作！互发 JSON 消息 → 调用 15 个 BrowserAction</p>
|
||
<p style="color:var(--orange);font-size:0.75rem;margin-top:0.3rem;">🛡️ 预案：Day 4 晚没通 → P1b 全力支援 · Day 5 中午没通 → 启动 HTTP 降级方案</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot done" style="background:var(--yellow);box-shadow:0 0 12px var(--yellow);"></div>
|
||
<div class="tl-label" style="color:var(--yellow);font-weight:700;">Day 5 晚 ★</div>
|
||
<div class="tl-desc" style="border:1px solid rgba(250,204,21,0.3);border-radius:8px;padding:0.7rem;">
|
||
<strong style="color:var(--yellow);">W1 里程碑 — LLM → Pipe → Browser 全链路演示</strong>
|
||
<p style="color:var(--text2);font-size:0.8rem;margin-top:0.2rem;">Vue 输入"点击登录" → C++ → Rust → 大模型 → 浏览器真实点击</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-label">Day 6</div>
|
||
<div class="tl-desc">
|
||
<strong style="color:var(--text);">三组并行集成</strong>
|
||
<p style="color:var(--text3);font-size:0.8rem;margin-top:0.2rem;">P1a+P1b Runtime · P1b+P3 Skill 加载 · P2+P4 UI 对接</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-label">Day 7</div>
|
||
<div class="tl-desc">
|
||
<strong style="color:var(--text);">安全策略 + AI 翻译</strong>
|
||
<p style="color:var(--text3);font-size:0.8rem;margin-top:0.2rem;">P1a: MAC 策略 · P2: 人工确认弹窗 · P3: 批量 AI 翻译第 1 批 (100 个)</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot"></div>
|
||
<div class="tl-label">Day 8-9</div>
|
||
<div class="tl-desc">
|
||
<strong style="color:var(--text);">E2E 测试 + Skill 翻译</strong>
|
||
<p style="color:var(--text3);font-size:0.8rem;margin-top:0.2rem;">6 个业务场景全流程测试 · P3 完成 400 个 Skill AI 翻译</p>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-dot" style="background:var(--green);box-shadow:0 0 12px var(--green);"></div>
|
||
<div class="tl-label" style="color:var(--green);font-weight:700;">Day 10 ★★</div>
|
||
<div class="tl-desc" style="border:1px solid rgba(74,222,128,0.3);border-radius:8px;padding:0.7rem;">
|
||
<strong style="color:var(--green);">W2 里程碑 — 打包发布 · 内部演示</strong>
|
||
<p style="color:var(--text2);font-size:0.8rem;margin-top:0.2rem;">P4 打包 .deb + .exe · 完整测试报告 · 演示视频</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin-top:1rem;">
|
||
<h4 style="color:var(--accent);margin-bottom:0.5rem;">📦 最终交付物</h4>
|
||
<div style="display:flex;flex-wrap:wrap;gap:0.4rem;">
|
||
<span class="tag tag-green">银河麒麟 V10 .deb</span>
|
||
<span class="tag tag-blue">Windows .exe</span>
|
||
<span class="tag tag-orange">400+ AI 生成 Skill</span>
|
||
<span class="tag tag-yellow">测试报告</span>
|
||
<span class="tag tag-accent2">6 场景演示视频</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 17 — 管理层总结 -->
|
||
<section class="slide cover" data-section="mgmt">
|
||
<div class="slide-body" style="text-align:center;">
|
||
<div style="margin-bottom:2rem;">
|
||
<p style="font-size:2.2rem;font-weight:700;color:var(--text);line-height:1.4;">
|
||
"嵌入浏览器内核的 <span style="color:var(--accent);">AI Agent</span>"
|
||
</p>
|
||
</div>
|
||
<div style="display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;">
|
||
<div style="text-align:center;">
|
||
<div style="font-size:1.8rem;font-weight:700;color:var(--accent);">5MB</div>
|
||
<div style="color:var(--text3);font-size:0.85rem;">运行内存</div>
|
||
</div>
|
||
<div style="color:var(--border);font-size:1.5rem;">|</div>
|
||
<div style="text-align:center;">
|
||
<div style="font-size:1.8rem;font-weight:700;color:var(--green);"><10ms</div>
|
||
<div style="color:var(--text3);font-size:0.85rem;">冷启动速度</div>
|
||
</div>
|
||
<div style="color:var(--border);font-size:1.5rem;">|</div>
|
||
<div style="text-align:center;">
|
||
<div style="font-size:1.8rem;font-weight:700;color:var(--orange);">2 周</div>
|
||
<div style="color:var(--text3);font-size:0.85rem;">完成交付</div>
|
||
</div>
|
||
<div style="color:var(--border);font-size:1.5rem;">|</div>
|
||
<div style="text-align:center;">
|
||
<div style="font-size:1.8rem;font-weight:700;color:var(--accent2);">零侵入</div>
|
||
<div style="color:var(--text3);font-size:0.85rem;">现有系统</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:80px;height:2px;background:var(--border);margin:0 auto 2rem;"></div>
|
||
<div class="two-col" style="gap:2rem;text-align:left;max-width:700px;margin:0 auto;">
|
||
<div class="card" style="border-top:2px solid var(--orange);">
|
||
<h4 style="color:var(--orange);margin-bottom:0.8rem;">🤝 需要的支持</h4>
|
||
<ul style="list-style:none;padding:0;margin:0;color:var(--text2);line-height:1.9;">
|
||
<li>◆ 测试环境（银河麒麟 V10 终端）</li>
|
||
<li>◆ AI 大模型调用额度</li>
|
||
<li>◆ 业务场景需求方对接人</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card" style="border-top:2px solid var(--green);">
|
||
<h4 style="color:var(--green);margin-bottom:0.8rem;">🚀 下一步行动</h4>
|
||
<ul style="list-style:none;padding:0;margin:0;color:var(--text2);line-height:1.9;">
|
||
<li>◆ 本周启动正式开发</li>
|
||
<li>◆ 两周后内部演示汇报</li>
|
||
<li>◆ 持续迭代，场景扩展</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:2rem;color:var(--text3);font-size:0.95rem;">
|
||
感谢关注 · 技术细节请留步后半场
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 18 — 技术议程 Section Divider -->
|
||
<section class="slide section-divider" data-section="tech">
|
||
<h1 class="slide-title"><span class="accent">第二部分</span> · 技术深潜</h1>
|
||
<p class="sub">框架选型 → 详细架构 → 安全详解 → 模块设计 → 数据流 → Skill体系 → 工程实现</p>
|
||
<div class="card-grid cols-4" style="margin-top:2.5rem;">
|
||
<div class="card"><div class="card-num">01</div><div class="card-label">框架选型</div><div class="card-desc">ZeroClaw 介绍与对比</div></div>
|
||
<div class="card"><div class="card-num">02</div><div class="card-label">技术决策</div><div class="card-desc">Rust + STDIO Pipe</div></div>
|
||
<div class="card"><div class="card-num">03</div><div class="card-label">详细架构</div><div class="card-desc">进程模型与内存预算</div></div>
|
||
<div class="card"><div class="card-num">04</div><div class="card-label">安全详解</div><div class="card-desc">三层纵深防御</div></div>
|
||
<div class="card"><div class="card-num">05</div><div class="card-label">模块设计</div><div class="card-desc">Rust 端 & C++ 端</div></div>
|
||
<div class="card"><div class="card-num">06</div><div class="card-label">数据流</div><div class="card-desc">ReAct 循环详解</div></div>
|
||
<div class="card"><div class="card-num">07</div><div class="card-label">Skill 体系</div><div class="card-desc">定义 · 签名 · 沙箱</div></div>
|
||
<div class="card"><div class="card-num">08</div><div class="card-label">工程实现</div><div class="card-desc">构建 · 测试 · 部署</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 19 — ZeroClaw 框架介绍 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">ZeroClaw 框架</span> <span class="sub">/ Rust 生态的 AI Agent 引擎</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">What is ZeroClaw?</h3>
|
||
<p style="color:var(--text2);margin-bottom:1rem;">Rust 实现的 AI Agent 框架 · GitHub <span class="tag tag-yellow">★ 17K Stars</span></p>
|
||
<p style="color:var(--text2);margin-bottom:.5rem;font-size:.95rem;">Core: <strong style="color:var(--text);">trait-driven architecture</strong></p>
|
||
<div class="card-grid cols-3" style="margin:1rem 0;">
|
||
<div class="card"><div class="card-icon" style="color:var(--accent);">⚙</div><div class="card-label">Tool</div><div class="card-desc">工具抽象<br><code>fn execute()</code></div></div>
|
||
<div class="card"><div class="card-icon" style="color:var(--accent2);">◆</div><div class="card-label">Provider</div><div class="card-desc">模型适配<br><code>fn chat()</code></div></div>
|
||
<div class="card"><div class="card-icon" style="color:var(--green);">☃</div><div class="card-label">Memory</div><div class="card-desc">记忆接口<br><code>fn search()</code></div></div>
|
||
</div>
|
||
<p style="color:var(--text2);font-size:.9rem;line-height:1.7;">
|
||
Built-in: <span class="tag tag-blue">ReAct Loop</span>
|
||
<span class="tag tag-blue">MCP Client (rmcp)</span>
|
||
<span class="tag tag-blue">Streaming Output</span>
|
||
<span class="tag tag-blue">Multi-Provider</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Architecture & sgClaw 接入点</h3>
|
||
<div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;text-align:center;">
|
||
<div class="arch-row">
|
||
<div class="arch-node" style="border-color:var(--accent2);">ZeroClaw Core<br><small style="color:var(--text3);">ReAct · Streaming · Config</small></div>
|
||
</div>
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">trait impl</div></div>
|
||
<div class="arch-row">
|
||
<div class="arch-node" style="border-color:var(--accent);">Tool trait</div>
|
||
<div class="arch-node" style="border-color:var(--accent);">Provider trait</div>
|
||
<div class="arch-node" style="border-color:var(--accent);">Memory trait</div>
|
||
</div>
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">sgClaw plugs in</div></div>
|
||
<div class="arch-row">
|
||
<div class="arch-node" style="border-color:var(--green);background:rgba(74,222,128,0.08);">
|
||
<strong>BrowserPipeTool</strong><br><small>Custom Tool impl</small>
|
||
</div>
|
||
<div class="arch-node" style="border-color:var(--text3);">Claude / GPT<br><small>Provider impl</small></div>
|
||
<div class="arch-node" style="border-color:var(--text3);">CompositeMemory<br><small>Memory impl</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:1.5rem;padding:.75rem 1.25rem;background:rgba(56,189,248,0.08);border-left:3px solid var(--accent);border-radius:6px;">
|
||
<strong style="color:var(--accent);">💡</strong> <span style="color:var(--text);">"我们不是从零开始, 而是站在 ZeroClaw 的肩膀上"</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 20 — 为什么选 ZeroClaw -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">框架选型</span> <span class="sub">/ ZeroClaw vs 其他 Rust Agent 框架</span></h2>
|
||
<div class="slide-body">
|
||
<table class="slide-table" style="font-size:.85rem;margin-bottom:1.5rem;">
|
||
<thead>
|
||
<tr><th>维度</th><th class="highlight">ZeroClaw</th><th>Rig</th><th>Moltis</th><th>OpenFang</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Stars</td><td class="highlight"><strong>17K</strong></td><td>4.2K</td><td>1.8K</td><td>0.9K</td></tr>
|
||
<tr><td>Runtime Memory</td><td class="highlight"><strong>~5MB</strong></td><td>~12MB</td><td>~20MB</td><td>~15MB</td></tr>
|
||
<tr><td>Embeddability</td><td class="highlight"><span class="tag tag-green">Library</span></td><td><span class="tag tag-green">Library</span></td><td><span class="tag tag-orange">Framework</span></td><td><span class="tag tag-orange">Framework</span></td></tr>
|
||
<tr><td>Browser Replaceable</td><td class="highlight"><span class="tag tag-green">✓ Tool trait</span></td><td><span class="tag tag-red">✗</span></td><td><span class="tag tag-red">✗</span></td><td><span class="tag tag-orange">Partial</span></td></tr>
|
||
<tr><td>ReAct Loop</td><td class="highlight"><span class="tag tag-green">✓ Built-in</span></td><td><span class="tag tag-green">✓</span></td><td><span class="tag tag-red">✗</span></td><td><span class="tag tag-green">✓</span></td></tr>
|
||
<tr><td>MCP</td><td class="highlight"><span class="tag tag-green">✓ rmcp</span></td><td><span class="tag tag-red">✗</span></td><td><span class="tag tag-red">✗</span></td><td><span class="tag tag-orange">WIP</span></td></tr>
|
||
<tr><td>Key Advantage</td><td class="highlight">Trait 可插拔 + 最小体积</td><td>RAG 生态</td><td>多 Agent</td><td>代码生成</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">复用分析</h3>
|
||
<div class="two-col">
|
||
<div>
|
||
<div class="card" style="border-left:3px solid var(--green);">
|
||
<div class="card-label" style="color:var(--green);">ZeroClaw 提供 <span class="tag tag-green">84%</span></div>
|
||
<div class="card-desc" style="line-height:1.8;font-size:.85rem;">
|
||
ReAct loop · Tool framework · Streaming output<br>
|
||
MCP client (rmcp) · Provider abstraction · Memory interface
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="card" style="border-left:3px solid var(--accent);">
|
||
<div class="card-label" style="color:var(--accent);">sgClaw 自研 <span class="tag tag-blue">16%</span></div>
|
||
<div class="card-desc" style="line-height:1.8;font-size:.85rem;">
|
||
BrowserPipeTool · Pipe Protocol · MAC Policy<br>
|
||
SkillLoader · Critic / CircuitBreaker
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="text-align:center;margin-top:1rem;color:var(--text2);font-size:.9rem;">
|
||
代码行数: <span style="color:var(--text3);text-decoration:line-through;">5000 行</span> → <strong style="color:var(--green);font-size:1.1rem;">1500 行</strong> (-70%)
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 21 — Rust + STDIO Pipe 决策 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">技术决策</span> <span class="sub">/ 为什么 Rust + STDIO Pipe</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Why Rust</h3>
|
||
<div style="background:var(--card);border-radius:10px;padding:1rem;font-size:.85rem;line-height:1.8;">
|
||
<p><span class="tag tag-green">Memory Safety</span> 无 GC → 运行时 <strong style="color:var(--green);">~5MB</strong></p>
|
||
<p><span class="tag tag-blue">Cross-compile</span></p>
|
||
<p style="padding-left:1rem;color:var(--text2);">银河麒麟 V10: <code>x86_64-unknown-linux-musl</code><br>Windows: <code>x86_64-pc-windows-msvc</code></p>
|
||
<p><span class="tag tag-blue">Binary</span> 8.8MB (Linux) / 9.0MB (Windows)<br><span style="color:var(--text3);padding-left:1rem;">static linking, zero deps</span></p>
|
||
<p><span class="tag tag-green">Cold Start</span> <strong style="color:var(--green);"><10ms</strong></p>
|
||
<table class="slide-table" style="font-size:.8rem;margin-top:.75rem;">
|
||
<thead><tr><th>vs</th><th>内存</th><th>启动</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Node.js</td><td><strong style="color:var(--green);">1/40</strong></td><td><strong style="color:var(--green);">1/100</strong></td></tr>
|
||
<tr><td>Python</td><td><strong style="color:var(--green);">10x ↑</strong></td><td>无运行时依赖</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Why STDIO Pipe</h3>
|
||
<table class="slide-table" style="font-size:.8rem;">
|
||
<thead>
|
||
<tr><th>Method</th><th>Linux</th><th>Windows</th><th>Security</th><th>Latency</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="highlight">
|
||
<td><strong>STDIO Pipe</strong></td>
|
||
<td><span class="tag tag-green">✓ fd inherit</span></td>
|
||
<td><span class="tag tag-green">✓ HANDLE</span></td>
|
||
<td><span class="tag tag-green">Highest</span><br><small>process-private</small></td>
|
||
<td><strong style="color:var(--green);">~0.1ms</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Unix Socket</td>
|
||
<td><span class="tag tag-green">✓</span></td>
|
||
<td><span class="tag tag-red">✗</span></td>
|
||
<td><span class="tag tag-blue">High</span></td>
|
||
<td>~0.2ms</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Named Pipe</td>
|
||
<td><span class="tag tag-red">✗</span></td>
|
||
<td><span class="tag tag-green">✓</span></td>
|
||
<td><span class="tag tag-blue">High</span></td>
|
||
<td>~0.2ms</td>
|
||
</tr>
|
||
<tr>
|
||
<td>TCP localhost</td>
|
||
<td><span class="tag tag-green">✓</span></td>
|
||
<td><span class="tag tag-green">✓</span></td>
|
||
<td><span class="tag tag-red">LOW</span><br><small>any process</small></td>
|
||
<td>~0.5ms</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:1rem;padding:.75rem 1.25rem;background:rgba(56,189,248,0.08);border-left:3px solid var(--accent);border-radius:6px;font-size:.9rem;">
|
||
<strong style="color:var(--accent);">⚡</strong> STDIO Pipe = Chromium <code>base::LaunchProcess</code> 原生支持 + 最高安全 + 最低延迟
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 22 — 详细架构拓扑 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">详细架构</span> <span class="sub">/ 完整进程模型与模块关系</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<div style="background:var(--card);border-radius:12px;padding:1rem;font-size:.68rem;line-height:1.5;">
|
||
<div class="arch-node" style="padding:12px 10px;font-size:.7rem;" style="border-color:var(--text3);margin-bottom:.35rem;">
|
||
<strong>superrpa-chromium.sh</strong> <small style="color:var(--text3);">(wrapper)</small>
|
||
</div>
|
||
<div style="display:flex;gap:.5rem;margin-bottom:.5rem;">
|
||
<div class="arch-node" style="border-color:var(--text3);flex:1;">watchdog → node local_service<br><small style="color:var(--text3);">Existing, unchanged</small></div>
|
||
</div>
|
||
<div class="arch-node" style="border-color:var(--accent);margin-bottom:.5rem;">
|
||
<strong>chrome</strong> (main process)
|
||
</div>
|
||
<div style="padding-left:1rem;">
|
||
<div class="arch-node" style="border-color:var(--green);background:rgba(74,222,128,0.06);margin-bottom:.4rem;">
|
||
<strong>SgClawProcessHost</strong> <span class="tag tag-green">NEW</span> Singleton
|
||
</div>
|
||
<div style="padding-left:1rem;margin-bottom:.4rem;">
|
||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;">
|
||
<span style="color:var(--accent);">STDIO Pipe →</span>
|
||
<div class="arch-node" style="border-color:var(--orange);background:rgba(251,146,60,0.06);">
|
||
<strong>sgclaw</strong> <small>(Rust binary)</small><br>
|
||
<span style="color:var(--text3);font-size:.7rem;">AgentRuntime · LlmProvider · BrowserPipeTool<br>SkillLoader · MAC Policy · Critic · Memory · MCP</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-node" style="border-color:var(--green);margin-bottom:.3rem;">PipeListener <span class="tag tag-green">NEW</span> ~150 lines</div>
|
||
<div class="arch-node" style="border-color:var(--green);margin-bottom:.3rem;">MAC Whitelist Check <span class="tag tag-green">NEW</span> ~100 lines</div>
|
||
<div class="arch-node" style="border-color:var(--text3);">→ CommandRouter <span class="tag tag-blue">EXISTING</span> 40+ actions, <strong style="color:var(--green);">ZERO modification</strong></div>
|
||
</div>
|
||
<div style="display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem;">
|
||
<div class="arch-node" style="border-color:var(--text3);font-size:.7rem;">CdpBridgeManager<br><small>Existing</small></div>
|
||
<div class="arch-node" style="border-color:var(--text3);font-size:.7rem;">ZombiePageManager<br><small>Existing</small></div>
|
||
<div class="arch-node" style="border-color:var(--text3);font-size:.7rem;">SessionManager<br><small>Existing</small></div>
|
||
<div class="arch-node" style="border-color:var(--text3);font-size:.7rem;">RpaGlobalStorage<br><small>Existing</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">8GB Memory Budget</h3>
|
||
<table class="slide-table" style="font-size:.8rem;">
|
||
<thead><tr><th>Component</th><th>Memory</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>OS + Desktop (Kylin V10)</td><td>~2.0 GB</td></tr>
|
||
<tr><td>Browser (main)</td><td>~0.2 GB</td></tr>
|
||
<tr><td>Foreground Tabs</td><td>~0.3-0.9 GB</td></tr>
|
||
<tr><td>Side Panel</td><td>~0.05 GB</td></tr>
|
||
<tr><td>Zombie Pool (max 5)</td><td>~0.15-0.25 GB</td></tr>
|
||
<tr><td>local_service</td><td>~0.1 GB</td></tr>
|
||
<tr class="highlight"><td><strong>sgClaw</strong></td><td><strong style="color:var(--green);">~0.005 GB (5MB!)</strong></td></tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr><td><strong>Total</strong></td><td><strong>~3.0-3.6 GB</strong></td></tr>
|
||
<tr><td>Headroom</td><td><strong style="color:var(--green);">>50%</strong></td></tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 23 — 安全三层防御详解 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">安全详解</span> <span class="sub">/ 三层纵深防御</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<div class="layer-stack">
|
||
<div class="layer-box l3">
|
||
<div class="layer-title">L3 C++ 浏览器内核层</div>
|
||
<div class="layer-items">
|
||
<span class="layer-item">MAC 域白名单</span>
|
||
<span class="layer-item">Action 白名单</span>
|
||
<span class="layer-item">凭证隔离</span>
|
||
<span class="layer-item">速率限制 10/s</span>
|
||
</div>
|
||
</div>
|
||
<div class="layer-box l2">
|
||
<div class="layer-title">L2 Rust 中枢层</div>
|
||
<div class="layer-items">
|
||
<span class="layer-item">JSON Schema 校验</span>
|
||
<span class="layer-item">禁止 eval 类</span>
|
||
<span class="layer-item">Human-in-the-loop</span>
|
||
<span class="layer-item">seq + HMAC</span>
|
||
<span class="layer-item">熔断器</span>
|
||
</div>
|
||
</div>
|
||
<div class="layer-box l1">
|
||
<div class="layer-title">L1 管道传输层</div>
|
||
<div class="layer-items">
|
||
<span class="layer-item">进程私有 fd</span>
|
||
<span class="layer-item">握手版本校验</span>
|
||
<span class="layer-item">递增 sequence_id</span>
|
||
<span class="layer-item">消息 ≤1MB</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.95rem;">Threat Model</h3>
|
||
<table class="slide-table" style="font-size:.78rem;">
|
||
<thead><tr><th>Threat</th><th>Layer</th><th>Strategy</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Pipe 劫持</td>
|
||
<tr><td>HTTP/TCP 劫持</td><td><span class="tag tag-blue">L1</span></td><td>STDIO Pipe 无端口，规避网络劫持</td></tr><td><span class="tag tag-blue">L1</span></td><td>进程私有 fd</td></tr>
|
||
<tr><td>Prompt 注入</td><td><span class="tag tag-orange">L2</span></td><td>JSON Schema + Action 白名单</td></tr>
|
||
<tr><td>Skill 投毒</td><td><span class="tag tag-orange">L2</span>+<span class="tag tag-red">L3</span></td><td>Ed25519 签名 + 沙箱</td></tr>
|
||
<tr><td>凭证泄露</td><td><span class="tag tag-red">L3</span></td><td>credential_store 不暴露</td></tr>
|
||
<tr><td>重放攻击</td><td><span class="tag tag-orange">L2</span></td><td>seq 递增 + HMAC</td></tr>
|
||
<tr><td>重试风暴</td><td><span class="tag tag-orange">L2</span></td><td>熔断器 (阈值 10)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="margin-top:.75rem;font-size:.8rem;">
|
||
<p style="margin-bottom:.35rem;"><span class="tag tag-green">✓ Allowed</span> <span style="color:var(--text2);">navigate, click, fill, getText, getAOM, screenshot</span></p>
|
||
<p style="margin-bottom:.35rem;"><span class="tag tag-red">✗ Forbidden</span> <span style="color:var(--text2);">eval, deleteCookies, clearStorage, modifyHeaders</span></p>
|
||
<p><span class="tag tag-yellow">⚠ NeedConfirm</span> <span style="color:var(--text2);">download, upload, formSubmit, printPage</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 24 — 模块设计 Rust 端 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">模块设计 · Rust 端</span> <span class="sub">/ 9 模块 · 依赖 DAG 无环</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Module Map</h3>
|
||
<div class="module-section">
|
||
<div class="module-grid">
|
||
<div class="mod-chip rust">main.rs<br><small>入口 / pipe / tokio</small></div>
|
||
<div class="mod-chip rust">AgentRuntime<br><small>ReAct 循环</small></div>
|
||
<div class="mod-chip rust">BrowserPipeTool<br><small>Tool trait impl</small></div>
|
||
<div class="mod-chip rust">Pipe Protocol<br><small>JSON Line 编解码</small></div>
|
||
<div class="mod-chip rust">MAC Policy<br><small>域名 + Action 白名单</small></div>
|
||
<div class="mod-chip rust">SkillLoader<br><small>JS 发现 + Ed25519 验签</small></div>
|
||
<div class="mod-chip rust">CompositeMemory<br><small>Ring Buffer + SQLite</small></div>
|
||
<div class="mod-chip rust">LlmProvider<br><small>Claude / OpenAI / Ollama</small></div>
|
||
<div class="mod-chip rust">McpClientManager<br><small>rmcp</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Key Interfaces</h3>
|
||
<div class="code-block" style="font-size:10px;padding:12px;line-height:1.5;">
|
||
<span class="code-comment">// ZeroClaw 定义的核心 trait</span>
|
||
<strong style="color:var(--accent);">trait</strong> Tool {
|
||
<strong style="color:var(--accent);">fn</strong> execute(input: &str) -> Result<String>;
|
||
}
|
||
<strong style="color:var(--accent);">trait</strong> Provider {
|
||
<strong style="color:var(--accent);">fn</strong> chat(msgs: Vec<Message>) -> Result<Message>;
|
||
}
|
||
<strong style="color:var(--accent);">trait</strong> Memory {
|
||
<strong style="color:var(--accent);">fn</strong> search(query: &str) -> Vec<Entry>;
|
||
}
|
||
|
||
<span class="code-comment">// sgClaw 自定义实现</span>
|
||
<strong style="color:var(--green);">struct</strong> BrowserPipeTool {
|
||
pipe: PipeWriter,
|
||
mac: MacPolicy,
|
||
}
|
||
<strong style="color:var(--green);">impl</strong> Tool <strong style="color:var(--accent);">for</strong> BrowserPipeTool {
|
||
<strong style="color:var(--accent);">fn</strong> execute(input: &str) -> Result<String> {
|
||
<span class="code-comment">// MAC check → serialize → pipe write → await response</span>
|
||
}
|
||
}
|
||
</div>
|
||
<div style="margin-top:.75rem;font-size:.7rem;color:var(--text2);line-height:1.5;">
|
||
<p><strong style="color:var(--text);">依赖原则:</strong></p>
|
||
<p>· <code>Config</code> 是叶节点 → 所有模块依赖它</p>
|
||
<p>· <code>AgentRuntime</code> 是根 → 协调所有模块</p>
|
||
<p>· <span class="tag tag-green">No circular deps</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 25 — 模块设计 C++ 端 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">模块设计 · C++ 端</span> <span class="sub">/ 3 新增模块 · ~500 行 · 已有代码零修改</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">3 New Modules</h3>
|
||
<div class="card" style="border-left:3px solid var(--accent);margin-bottom:.75rem;">
|
||
<div class="mod-chip cpp" style="display:inline-block;margin-bottom:.4rem;">SgClawProcessHost</div>
|
||
<div class="card-desc" style="font-size:.82rem;line-height:1.7;">
|
||
<strong>~200-300 lines</strong> · Singleton<br>
|
||
<code>Start() / Stop() / OnCrash()</code><br>
|
||
ProcessState enum: <code>Idle → Starting → Running → Stopping → Stopped → Crashed</code>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--accent2);margin-bottom:.75rem;">
|
||
<div class="mod-chip cpp" style="display:inline-block;margin-bottom:.4rem;">PipeListener</div>
|
||
<div class="card-desc" style="font-size:.82rem;line-height:1.7;">
|
||
<strong>~150 lines</strong> · Async fd read loop<br>
|
||
JSON Line parsing · 1MB limit<br>
|
||
dispatch to <code>CommandRouter</code>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--green);">
|
||
<div class="mod-chip cpp" style="display:inline-block;margin-bottom:.4rem;">MacWhitelistCheck</div>
|
||
<div class="card-desc" style="font-size:.82rem;line-height:1.7;">
|
||
<strong>~100 lines</strong> · domain/action whitelist<br>
|
||
from <code>rules.json</code><br>
|
||
MacResult: <code>Allow | NeedConfirm | Deny</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">ProcessState State Machine</h3>
|
||
<div style="background:var(--card);border-radius:12px;padding:1.5rem;text-align:center;font-size:.82rem;">
|
||
<div class="arch-row">
|
||
<div class="arch-node" style="border-color:var(--text3);">Idle</div>
|
||
</div>
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">Start()</div></div>
|
||
<div class="arch-row">
|
||
<div class="arch-node" style="border-color:var(--yellow);">Starting</div>
|
||
</div>
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">handshake OK</div></div>
|
||
<div class="arch-row">
|
||
<div class="arch-node" style="border-color:var(--green);">Running</div>
|
||
</div>
|
||
<div style="display:flex;justify-content:center;gap:2rem;margin-top:.5rem;">
|
||
<div style="text-align:center;">
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">Stop()</div></div>
|
||
<div class="arch-node" style="border-color:var(--accent);">Stopping</div>
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">exited</div></div>
|
||
<div class="arch-node" style="border-color:var(--text3);">Stopped</div>
|
||
</div>
|
||
<div style="text-align:center;">
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">unexpected exit</div></div>
|
||
<div class="arch-node" style="border-color:var(--red);">Crashed</div>
|
||
<div class="arch-arrow"><div class="a-line"></div><div class="a-label">auto-restart</div></div>
|
||
<div class="arch-node" style="border-color:var(--yellow);">Starting</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:1rem;padding:.75rem 1.25rem;background:rgba(74,222,128,0.08);border-left:3px solid var(--green);border-radius:6px;font-size:.85rem;">
|
||
<strong style="color:var(--green);">✓</strong> CommandRouter <strong>零修改</strong> — sgClaw 只是一个新的命令来源
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 26 — 数据流 & ReAct -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">数据流 & ReAct 循环</span> <span class="sub">/ 从自然语言到浏览器操作</span></h2>
|
||
<div class="slide-body">
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.95rem;">端到端数据流</h3>
|
||
<div class="phase-row" style="margin-bottom:1.5rem;">
|
||
<div class="phase-card"><div class="phase-num">1</div>用户<br><small>自然语言指令</small></div>
|
||
<div style="color:var(--accent);font-size:1.2rem;align-self:center;">→</div>
|
||
<div class="phase-card"><div class="phase-num">2</div>Vue<br><small>FunctionsUI</small></div>
|
||
<div style="color:var(--accent);font-size:1.2rem;align-self:center;">→</div>
|
||
<div class="phase-card"><div class="phase-num">3</div>C++<br><small>MAC → Pipe</small></div>
|
||
<div style="color:var(--accent);font-size:1.2rem;align-self:center;">→</div>
|
||
<div class="phase-card"><div class="phase-num">4</div>Rust<br><small>ReAct Engine</small></div>
|
||
<div style="color:var(--accent);font-size:1.2rem;align-self:center;">→</div>
|
||
<div class="phase-card"><div class="phase-num">5</div>大模型<br><small>AI推理</small></div>
|
||
<div style="color:var(--accent);font-size:1.2rem;align-self:center;">→</div>
|
||
<div class="phase-card"><div class="phase-num">6</div>回传<br><small>结果</small></div>
|
||
</div>
|
||
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.95rem;">ReAct 循环</h3>
|
||
<div class="react-loop" style="margin-bottom:1.5rem;">
|
||
<div class="react-step think">
|
||
<strong>思考</strong><br><small>大模型推理<br>选择动作+参数</small>
|
||
</div>
|
||
<div class="react-arrow">→</div>
|
||
<div class="react-step act">
|
||
<strong>执行</strong><br><small>调用浏览器工具<br>执行操作</small>
|
||
</div>
|
||
<div class="react-arrow">→</div>
|
||
<div class="react-step observe">
|
||
<strong>观察</strong><br><small>读取页面<br>AOM/截图</small>
|
||
</div>
|
||
<div class="react-arrow">→</div>
|
||
<div class="react-step critic">
|
||
<strong>评估</strong><br><small>质量检查<br>成功?失败?</small>
|
||
</div>
|
||
<div class="react-arrow" style="color:var(--text3);">↺ loop</div>
|
||
</div>
|
||
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.95rem;">Token 预算分配</h3>
|
||
<div class="card-grid cols-4">
|
||
<div class="card"><div class="card-label">System Prompt</div><div class="card-desc" style="font-size:1.1rem;color:var(--accent);">~2,000 tokens</div></div>
|
||
<div class="card"><div class="card-label">Long-term Memory</div><div class="card-desc" style="font-size:1.1rem;color:var(--accent2);">~1,000 tokens</div></div>
|
||
<div class="card"><div class="card-label">Short-term Memory</div><div class="card-desc" style="font-size:1.1rem;color:var(--green);">50 条 / 8,000 tokens</div></div>
|
||
<div class="card"><div class="card-label">Generation Budget</div><div class="card-desc" style="font-size:1.1rem;color:var(--orange);">~4,096 tokens</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 27 — Skill 体系 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">Skill 体系</span> <span class="sub">/ 定义 · 签名 · 沙箱 · 迁移</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.95rem;">Skill Definition</h3>
|
||
<div class="code-block" style="font-size:9.5px;padding:10px;line-height:1.4;" style="font-size:.72rem;">
|
||
<span class="code-comment">/**
|
||
* @skill erp-monthly-report
|
||
* @version 1.0.0
|
||
* @domains erp.example.com
|
||
* @params { month: string, format: enum }
|
||
*/</span>
|
||
<strong style="color:var(--accent);">async function</strong> execute(params, browserAction) {
|
||
<strong style="color:var(--accent);">await</strong> browserAction(<span style="color:var(--green);">'navigate'</span>, {
|
||
url: <span style="color:var(--green);">'https://erp.example.com/report'</span>
|
||
});
|
||
<strong style="color:var(--accent);">await</strong> browserAction(<span style="color:var(--green);">'fill'</span>, {
|
||
selector: <span style="color:var(--green);">'#month'</span>,
|
||
value: params.month
|
||
});
|
||
<strong style="color:var(--accent);">await</strong> browserAction(<span style="color:var(--green);">'click'</span>, {
|
||
selector: <span style="color:var(--green);">'#export'</span>
|
||
});
|
||
}
|
||
</div>
|
||
<h3 style="color:var(--accent);margin:.75rem 0 .5rem;font-size:.95rem;">10 Built-in Skills</h3>
|
||
<div style="display:flex;flex-wrap:wrap;gap:.35rem;font-size:.78rem;">
|
||
<span class="tag tag-blue">OA 审批</span>
|
||
<span class="tag tag-blue">ERP 报表</span>
|
||
<span class="tag tag-blue">财务合规</span>
|
||
<span class="tag tag-blue">人资社保</span>
|
||
<span class="tag tag-blue">法务合同</span>
|
||
<span class="tag tag-green">营销数据</span>
|
||
<span class="tag tag-green">风控监测</span>
|
||
<span class="tag tag-green">数据同步</span>
|
||
<span class="tag tag-orange">系统巡检</span>
|
||
<span class="tag tag-orange">批量录入</span>
|
||
</div>
|
||
<h3 style="color:var(--accent);margin:.75rem 0 .5rem;font-size:.95rem;">Sandbox Constraints</h3>
|
||
<div style="font-size:.82rem;line-height:1.7;">
|
||
<p><span class="tag tag-green">✓</span> <code>browserAction</code> <code>console</code> <code>JSON</code> <code>Promise</code> <code>setTimeout</code></p>
|
||
<p><span class="tag tag-red">✗</span> <code>fetch</code> <code>require</code> <code>process</code> <code>fs</code> <code>eval</code></p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.95rem;">3-Phase Migration Path</h3>
|
||
<div class="card" style="padding:14px 16px;border-left:3px solid var(--green);margin-bottom:.75rem;">
|
||
<div class="card-label"><span class="tag tag-green">Phase 1</span> 直接复用</div>
|
||
<div class="card-desc" style="font-size:.78rem;line-height:1.5;">
|
||
agent-vue 现有 JS 通过 <code>BrowserAction API</code> 直接调用<br>
|
||
<span style="color:var(--text3);">零改造, 即插即用</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--accent);margin-bottom:.75rem;">
|
||
<div class="card-label"><span class="tag tag-blue">Phase 2</span> 技能化封装</div>
|
||
<div class="card-desc" style="font-size:.82rem;line-height:1.6;">
|
||
提取为 Skill + 元数据 + <strong>Ed25519 签名</strong><br>
|
||
<span style="color:var(--text3);">结构化 · 可复用 · 可验证</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--accent2);margin-bottom:.75rem;">
|
||
<div class="card-label"><span class="tag tag-orange">Phase 3</span> LLM 增强</div>
|
||
<div class="card-desc" style="font-size:.82rem;line-height:1.6;">
|
||
Skill 注册为 Agent 工具, <strong>LLM 自动选择</strong><br>
|
||
<span style="color:var(--text3);">用户说意图 → Agent 选 Skill → 执行</span>
|
||
</div>
|
||
</div>
|
||
<div style="background:var(--card);border-radius:10px;padding:1rem;margin-top:.5rem;text-align:center;">
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.85rem;">
|
||
<div style="color:var(--text3);">手写 JS</div>
|
||
<span style="color:var(--accent);">→</span>
|
||
<div style="color:var(--text);">Signed Skill</div>
|
||
<span style="color:var(--accent);">→</span>
|
||
<div style="color:var(--green);font-weight:bold;">LLM-driven</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 28 — 记忆与自进化 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">记忆与自进化</span> <span class="sub">/ 三层记忆 · 越用越快</span></h2>
|
||
<div class="slide-body">
|
||
<div class="two-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Memory Stack</h3>
|
||
<div class="mem-stack">
|
||
<div class="mem-level m0">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;">
|
||
<strong>L0 即时记忆</strong>
|
||
<span class="tag tag-blue">LLM Context Window</span>
|
||
</div>
|
||
<div style="font-size:.82rem;color:var(--text2);line-height:1.6;">
|
||
范围: 单次调用<br>
|
||
容量: <code>max_tokens 4096</code><br>
|
||
特点: 最快, 无持久化
|
||
</div>
|
||
</div>
|
||
<div class="mem-level m1">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;">
|
||
<strong>L1 短期记忆</strong>
|
||
<span class="tag tag-green">Ring Buffer</span>
|
||
</div>
|
||
<div style="font-size:.82rem;color:var(--text2);line-height:1.6;">
|
||
实现: <code>VecDeque<Message></code><br>
|
||
范围: 单次任务<br>
|
||
容量: <strong>50 条 / 8000 tokens</strong><br>
|
||
策略: FIFO + 压缩摘要
|
||
</div>
|
||
</div>
|
||
<div class="mem-level m2">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;">
|
||
<strong>L2 长期记忆</strong>
|
||
<span class="tag tag-orange">SQLite + 向量</span>
|
||
</div>
|
||
<div style="font-size:.82rem;color:var(--text2);line-height:1.6;">
|
||
范围: 跨任务持久化<br>
|
||
容量: <strong><100MB</strong><br>
|
||
检索: 语义相似度 + 关键词<br>
|
||
索引: embedding (384-dim)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;">Self-Evolution Path</h3>
|
||
<div style="background:var(--card);border-radius:12px;padding:1.5rem;">
|
||
<div style="display:flex;flex-direction:column;gap:1rem;">
|
||
<div style="display:flex;align-items:center;gap:1rem;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:rgba(248,113,113,0.15);border:2px solid var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||
<strong style="color:var(--red);font-size:.85rem;">首次</strong>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:1.3rem;font-weight:bold;color:var(--text);">8-15 步</div>
|
||
<div style="color:var(--text3);font-size:.82rem;">LLM 从零推理, 探索式执行</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--accent);font-size:.85rem;">
|
||
⬇ 经验沉淀 → L2 长期记忆
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:1rem;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:rgba(74,222,128,0.15);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||
<strong style="color:var(--green);font-size:.85rem;">再次</strong>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:1.3rem;font-weight:bold;color:var(--text);">4-6 步</div>
|
||
<div style="color:var(--text3);font-size:.82rem;">检索历史经验, 跳过探索</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;color:var(--accent);font-size:.85rem;">
|
||
⬇ 高频提炼 → Skill 封装
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:1rem;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:rgba(56,189,248,0.15);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||
<strong style="color:var(--accent);font-size:.8rem;">Skill</strong>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:1.3rem;font-weight:bold;color:var(--text);">1-2 步</div>
|
||
<div style="color:var(--text3);font-size:.82rem;">直接执行, 接近零推理</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="big-numbers" style="margin-top:1rem;">
|
||
<div class="big-num-card"><div class="big-num-val" style="color:var(--red);">87%</div><div class="big-num-label">步骤减少</div></div>
|
||
<div class="big-num-card"><div class="big-num-val" style="color:var(--green);">10x</div><div class="big-num-label">执行加速</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 29 — 工程实现 -->
|
||
<section class="slide" data-section="tech">
|
||
<h2 class="slide-title"><span class="accent">工程实现</span> <span class="sub">/ 仓库 · 构建 · 测试 · 部署</span></h2>
|
||
<div class="slide-body">
|
||
<div class="three-col">
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;font-size:.9rem;">Repo Structure</h3>
|
||
<div class="code-block" style="font-size:.72rem;line-height:1.7;">
|
||
<span class="code-comment"># Rust crate</span>
|
||
sgClaw/
|
||
src/
|
||
main.rs
|
||
agent/ <span class="code-comment"># AgentRuntime</span>
|
||
pipe/ <span class="code-comment"># Protocol</span>
|
||
skill/ <span class="code-comment"># SkillLoader</span>
|
||
llm/ <span class="code-comment"># Providers</span>
|
||
memory/ <span class="code-comment"># Composite</span>
|
||
security/ <span class="code-comment"># MAC + HMAC</span>
|
||
config/ <span class="code-comment"># Settings</span>
|
||
Cargo.toml
|
||
|
||
<span class="code-comment"># C++ (in SuperRPA)</span>
|
||
src/chrome/browser/
|
||
superrpa/sgclaw/
|
||
sgclaw_process_host.cc
|
||
pipe_listener.cc
|
||
mac_whitelist_check.cc
|
||
<span class="code-comment">// ~500 lines total</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;font-size:.9rem;">Build Commands</h3>
|
||
<div class="code-block" style="font-size:.72rem;line-height:1.7;">
|
||
<span class="code-comment"># Rust (Linux musl)</span>
|
||
cargo build --release \
|
||
--target x86_64-unknown-linux-musl
|
||
|
||
<span class="code-comment"># Rust (Windows MSVC)</span>
|
||
cargo build --release \
|
||
--target x86_64-pc-windows-msvc
|
||
|
||
<span class="code-comment"># C++ (Chromium)</span>
|
||
autoninja -j 24 \
|
||
-C out/Default chrome
|
||
</div>
|
||
<div style="margin-top:.75rem;">
|
||
<h3 style="color:var(--accent);margin-bottom:.5rem;font-size:.9rem;">Binary Size</h3>
|
||
<div class="card-grid cols-2">
|
||
<div class="card"><div class="card-label">Linux musl</div><div class="card-desc" style="font-size:1.1rem;color:var(--green);font-weight:bold;">8.8 MB</div></div>
|
||
<div class="card"><div class="card-label">Windows MSVC</div><div class="card-desc" style="font-size:1.1rem;color:var(--green);font-weight:bold;">9.0 MB</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="color:var(--accent);margin-bottom:.75rem;font-size:.9rem;">Test Pyramid</h3>
|
||
<div style="background:var(--card);border-radius:10px;padding:1rem;font-size:.8rem;line-height:1.8;">
|
||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;">
|
||
<div style="width:40px;text-align:right;font-weight:bold;color:var(--green);">70%</div>
|
||
<div style="flex:1;height:18px;background:rgba(74,222,128,0.25);border-radius:4px;"></div>
|
||
</div>
|
||
<p style="color:var(--text2);padding-left:3rem;font-size:.78rem;">Rust unit tests (mock LLM + mock pipe)</p>
|
||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;">
|
||
<div style="width:40px;text-align:right;font-weight:bold;color:var(--accent);">15%</div>
|
||
<div style="flex:1;height:18px;background:rgba(56,189,248,0.25);border-radius:4px;max-width:60%;"></div>
|
||
</div>
|
||
<p style="color:var(--text2);padding-left:3rem;font-size:.78rem;">C++ unit tests (ProcessHost/Listener/MAC)</p>
|
||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;">
|
||
<div style="width:40px;text-align:right;font-weight:bold;color:var(--accent2);">10%</div>
|
||
<div style="flex:1;height:18px;background:rgba(129,140,248,0.25);border-radius:4px;max-width:35%;"></div>
|
||
</div>
|
||
<p style="color:var(--text2);padding-left:3rem;font-size:.78rem;">Pipe integration (real sgclaw process)</p>
|
||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;">
|
||
<div style="width:40px;text-align:right;font-weight:bold;color:var(--orange);">5%</div>
|
||
<div style="flex:1;height:18px;background:rgba(251,146,60,0.25);border-radius:4px;max-width:20%;"></div>
|
||
</div>
|
||
<p style="color:var(--text2);padding-left:3rem;font-size:.78rem;">E2E acceptance (mock LLM, full scenario)</p>
|
||
</div>
|
||
<h3 style="color:var(--accent);margin:.75rem 0 .5rem;font-size:.9rem;">Deployment</h3>
|
||
<div style="font-size:.8rem;color:var(--text2);line-height:1.7;">
|
||
<p><span class="tag tag-blue">银河麒麟 V10 SP1</span> .deb</p>
|
||
<p><span class="tag tag-blue">Windows 10/11</span></p>
|
||
<p style="color:var(--text3);">Package: 447 → 456MB <span class="tag tag-green">+2%</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 30 — 技术 Q&A -->
|
||
<section class="slide cover" data-section="tech">
|
||
<h1 class="slide-title" style="font-size:2.5rem;margin-bottom:.5rem;">技术讨论 · <span class="accent">Q&A</span></h1>
|
||
<p style="color:var(--text2);font-size:1.1rem;margin-bottom:2rem;">Known Risks & Pending Decisions</p>
|
||
<div style="max-width:720px;margin:0 auto;text-align:left;">
|
||
<div class="card-grid cols-2">
|
||
<div class="card" style="border-left:3px solid var(--orange);">
|
||
<div class="card-label"><span class="tag tag-orange">⚠</span> LLM Provider 选择</div>
|
||
<div class="card-desc">外网 Claude / GPT vs 内网本地模型 (Ollama + Qwen)?<br><small style="color:var(--text3);">延迟、成本、数据合规</small></div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--orange);">
|
||
<div class="card-label"><span class="tag tag-orange">⚠</span> Skill 签名密钥管理</div>
|
||
<div class="card-desc">硬编码 vs HSM?<br><small style="color:var(--text3);">安全等级与运维复杂度平衡</small></div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--yellow);">
|
||
<div class="card-label"><span class="tag tag-yellow">⚠</span> AOM 覆盖率</div>
|
||
<div class="card-desc">部分业务系统可能需要视觉兜底<br><small style="color:var(--text3);">截图 + SoM (Set-of-Marks)</small></div>
|
||
</div>
|
||
<div class="card" style="border-left:3px solid var(--yellow);">
|
||
<div class="card-label"><span class="tag tag-yellow">⚠</span> 性能基线</div>
|
||
<div class="card-desc">需要实际环境 benchmarking<br><small style="color:var(--text3);">LLM latency · Pipe throughput · E2E time</small></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:2rem;padding:1rem 1.5rem;background:var(--card);border-radius:10px;text-align:center;font-size:.9rem;">
|
||
<p style="color:var(--text2);margin-bottom:.5rem;">
|
||
<strong style="color:var(--text);">各组接口人:</strong>
|
||
浏览器组 · AI 平台组 · 安全组 · 测试组
|
||
</p>
|
||
<p style="color:var(--text3);">
|
||
项目文档: <code style="color:var(--accent);">confluence/sgclaw</code> ·
|
||
代码仓库: <code style="color:var(--accent);">gitlab/superrpa/sgclaw</code> ·
|
||
看板: <code style="color:var(--accent);">jira/SGCLAW</code>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="nav-bar" id="navBar"></div>
|
||
<div id="pageNum" style="position:fixed;bottom:30px;right:30px;font-size:14px;color:var(--text3);z-index:100;font-weight:600;"></div>
|
||
|
||
<script>
|
||
|
||
(function(){
|
||
'use strict';
|
||
var slides = document.querySelectorAll('.slide');
|
||
var navBar = document.getElementById('navBar');
|
||
var pageNum = document.getElementById('pageNum');
|
||
var current = 0;
|
||
var total = slides.length;
|
||
var animating = false;
|
||
|
||
// 构建页码指示器
|
||
for(var i=0;i<total;i++){
|
||
var dot=document.createElement('button');
|
||
dot.className='nav-dot';
|
||
dot.dataset.idx=i;
|
||
dot.addEventListener('click',function(){ goTo(+this.dataset.idx); });
|
||
navBar.appendChild(dot);
|
||
}
|
||
|
||
function getSectionLabel(idx) {
|
||
var sec = slides[idx].getAttribute('data-section');
|
||
if (sec === 'mgmt') return ' · 管理层概览';
|
||
if (sec === 'tech') return ' · 技术深潜';
|
||
return '';
|
||
}
|
||
|
||
function goTo(idx){
|
||
if(idx<0||idx>=total||idx===current||animating) return;
|
||
animating=true;
|
||
var prev=slides[current];
|
||
var next=slides[idx];
|
||
if(idx>current){
|
||
prev.className='slide prev';
|
||
next.style.transform='translateX(60px)';
|
||
} else {
|
||
prev.className='slide prev';
|
||
prev.style.transform='translateX(60px)';
|
||
next.style.transform='translateX(-60px)';
|
||
}
|
||
next.style.opacity='0';
|
||
void next.offsetWidth;
|
||
next.className='slide active';
|
||
next.style.transform='';
|
||
next.style.opacity='';
|
||
current=idx;
|
||
updateNav();
|
||
setTimeout(function(){ animating=false; },500);
|
||
}
|
||
|
||
function updateNav(){
|
||
var dots=navBar.querySelectorAll('.nav-dot');
|
||
for(var i=0;i<dots.length;i++){
|
||
dots[i].className=i===current?'nav-dot active':'nav-dot';
|
||
}
|
||
pageNum.textContent=(current+1)+' / '+total+getSectionLabel(current);
|
||
}
|
||
|
||
function next(){ goTo(current+1); }
|
||
function prev(){ goTo(current-1); }
|
||
|
||
document.addEventListener('keydown',function(e){
|
||
switch(e.key){
|
||
case 'ArrowRight': case 'ArrowDown': case ' ': case 'PageDown': e.preventDefault(); next(); break;
|
||
case 'ArrowLeft': case 'ArrowUp': case 'PageUp': e.preventDefault(); prev(); break;
|
||
case 'Home': e.preventDefault(); goTo(0); break;
|
||
case 'End': e.preventDefault(); goTo(total-1); break;
|
||
}
|
||
});
|
||
|
||
document.addEventListener('click',function(e){
|
||
if(e.target.closest('.nav-bar')||e.target.closest('button')||e.target.closest('a')) return;
|
||
if(e.clientX > window.innerWidth*0.5) next(); else prev();
|
||
});
|
||
|
||
var touchStartX=0;
|
||
document.addEventListener('touchstart',function(e){ touchStartX=e.touches[0].clientX; });
|
||
document.addEventListener('touchend',function(e){
|
||
var dx=e.changedTouches[0].clientX-touchStartX;
|
||
if(Math.abs(dx)>50){ dx<0?next():prev(); }
|
||
});
|
||
|
||
slides[0].className='slide active';
|
||
updateNav();
|
||
})();
|
||
|
||
</script>
|
||
</body>
|
||
</html> |