admin/skill-lib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4e32b3193f1528235fed884fb788f0137fb6e084
skill-lib/docs/archive/领导演示资料/frontend-pages/presentation.html.backup
zyl 4e32b3193f first commit
2026-03-06 03:36:12 +08:00

1434 lines
76 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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">/ 5 人团队，2250 行自研代码</span>
</h2>
<div class="card-grid cols-3" style="margin-top:1.5rem;gap:1rem;">
<div class="card" style="border-top:3px solid var(--orange);padding:1rem;">
<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.7rem;">~900 行</span> <span class="tag tag-red" style="font-size:0.7rem;">关键路径</span></div>
</div>
<div class="card" style="border-top:3px solid var(--pink);padding:1rem;">
<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.7rem;">~600 行</span></div>
</div>
<div class="card" style="border-top:3px solid var(--accent);padding:1rem;">
<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.7rem;">~600 行</span></div>
</div>
<div class="card" style="border-top:3px solid var(--green);padding:1rem;">
<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.7rem;">10-15 个黄金样本</span> <span class="tag tag-blue" style="font-size:0.7rem;">AI 生成 400+</span></div>
</div>
<div class="card" style="border-top:3px solid var(--accent2);padding:1rem;">
<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 后台、测试、打包</p>
<div style="margin-top:0.6rem;"><span class="tag tag-blue" style="font-size:0.7rem;">UI ~150 行</span></div>
</div>
</div>
<div class="card" style="text-align:center;margin-top:1rem;background:rgba(129,140,248,0.08);border:1px solid rgba(129,140,248,0.2);padding:0.8rem;">
<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 周完成交付</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);">环境搭建 · 管道通信打通</strong>
<p style="color:var(--text3);font-size:0.85rem;margin-top:0.2rem;">搭建开发环境，完成 sgClaw 引擎与浏览器之间的管道通信验证</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot done"></div>
<div class="tl-label">Day 3-4</div>
<div class="tl-desc">
<strong style="color:var(--text);">核心链路联调 · 第一个 AI 操作成功</strong>
<p style="color:var(--text3);font-size:0.85rem;margin-top:0.2rem;">完成 AI 引擎到浏览器的完整链路，实现第一个 AI 驱动的浏览器操作</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.8rem;">
<strong style="color:var(--yellow);">W1 里程碑 — 全链路跑通</strong>
<p style="color:var(--text2);font-size:0.85rem;margin-top:0.2rem;">AI 指令 → sgClaw 引擎 → 浏览器操作，端到端链路全部打通并可演示</p>
</div>
</div>
<div class="tl-item">
<div class="tl-dot"></div>
<div class="tl-label">Day 6-7</div>
<div class="tl-desc">
<strong style="color:var(--text);">安全策略 + Skill 系统接入</strong>
<p style="color:var(--text3);font-size:0.85rem;margin-top:0.2rem;">三层安全防御上线，Skill 经验复用系统集成，10 个内置业务技能对接</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);">场景验收 + 性能优化</strong>
<p style="color:var(--text3);font-size:0.85rem;margin-top:0.2rem;">六大业务场景逐一验收，性能调优确保流畅体验</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.8rem;">
<strong style="color:var(--green);">W2 里程碑 — 打包发布，内部演示</strong>
<p style="color:var(--text2);font-size:0.85rem;margin-top:0.2rem;">双平台安装包就绪，内部演示汇报，收集反馈</p>
</div>
</div>
</div>
<div class="card" style="margin-top:1.2rem;">
<h4 style="color:var(--accent);margin-bottom:0.6rem;">📦 最终交付物</h4>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;">
<span class="tag tag-green">银河麒麟 V10 .deb 安装包</span>
<span class="tag tag-blue">Windows 安装包</span>
<span class="tag tag-orange">10 个内置业务 Skill</span>
<span class="tag tag-yellow">完整测试报告</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);">&lt;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">框架选型 &rarr; 详细架构 &rarr; 安全详解 &rarr; 模块设计 &rarr; 数据流 &rarr; Skill体系 &rarr; 工程实现</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 端 &amp; 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 框架 &middot; GitHub <span class="tag tag-yellow">&#9733; 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);">&#9881;</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);">&#9670;</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);">&#9731;</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 &amp; 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);">&#128161;</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">&#10003; Tool trait</span></td><td><span class="tag tag-red">&#10007;</span></td><td><span class="tag tag-red">&#10007;</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">&#10003; Built-in</span></td><td><span class="tag tag-green">&#10003;</span></td><td><span class="tag tag-red">&#10007;</span></td><td><span class="tag tag-green">&#10003;</span></td></tr>
<tr><td>MCP</td><td class="highlight"><span class="tag tag-green">&#10003; rmcp</span></td><td><span class="tag tag-red">&#10007;</span></td><td><span class="tag tag-red">&#10007;</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 &middot; Tool framework &middot; Streaming output<br>
MCP client (rmcp) &middot; Provider abstraction &middot; 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 &middot; Pipe Protocol &middot; MAC Policy<br>
SkillLoader &middot; 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> &rarr; <strong style="color:var(--green);font-size:1.1rem;">1500 行</strong> &nbsp;(-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 &rarr; 运行时 <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);">&lt;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 &#8593;</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">&#10003; fd inherit</span></td>
<td><span class="tag tag-green">&#10003; 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">&#10003;</span></td>
<td><span class="tag tag-red">&#10007;</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">&#10007;</span></td>
<td><span class="tag tag-green">&#10003;</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">&#10003;</span></td>
<td><span class="tag tag-green">&#10003;</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);">&#9889;</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 &rarr; 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 &rarr;</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 &middot; LlmProvider &middot; BrowserPipeTool<br>SkillLoader &middot; MAC Policy &middot; Critic &middot; Memory &middot; 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);">&rarr; 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);">&gt;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">消息 &le;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">&#10003; 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">&#10007; Forbidden</span> <span style="color:var(--text2);">eval, deleteCookies, clearStorage, modifyHeaders</span></p>
<p><span class="tag tag-yellow">&#9888; 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">模块设计 &middot; Rust 端</span> <span class="sub">/ 9 模块 &middot; 依赖 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: &amp;str) -&gt; Result&lt;String&gt;;
}
<strong style="color:var(--accent);">trait</strong> Provider {
<strong style="color:var(--accent);">fn</strong> chat(msgs: Vec&lt;Message&gt;) -&gt; Result&lt;Message&gt;;
}
<strong style="color:var(--accent);">trait</strong> Memory {
<strong style="color:var(--accent);">fn</strong> search(query: &amp;str) -&gt; Vec&lt;Entry&gt;;
}
<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: &amp;str) -&gt; Result&lt;String&gt; {
<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>&middot; <code>Config</code> 是叶节点 &rarr; 所有模块依赖它</p>
<p>&middot; <code>AgentRuntime</code> 是根 &rarr; 协调所有模块</p>
<p>&middot; <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">模块设计 &middot; C++ 端</span> <span class="sub">/ 3 新增模块 &middot; ~500 行 &middot; 已有代码零修改</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> &middot; Singleton<br>
<code>Start() / Stop() / OnCrash()</code><br>
ProcessState enum: <code>Idle &rarr; Starting &rarr; Running &rarr; Stopping &rarr; Stopped &rarr; 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> &middot; Async fd read loop<br>
JSON Line parsing &middot; 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> &middot; 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);">&#10003;</strong> CommandRouter <strong>零修改</strong> &mdash; sgClaw 只是一个新的命令来源
</div>
</div>
</div>
</div>
</section>
<!-- Slide 26 — 数据流 & ReAct -->
<section class="slide" data-section="tech">
<h2 class="slide-title"><span class="accent">数据流 &amp; 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;">&rarr;</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;">&rarr;</div>
<div class="phase-card"><div class="phase-num">3</div>C++<br><small>MAC &rarr; Pipe</small></div>
<div style="color:var(--accent);font-size:1.2rem;align-self:center;">&rarr;</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;">&rarr;</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;">&rarr;</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">&rarr;</div>
<div class="react-step act">
<strong>执行</strong><br><small>调用浏览器工具<br>执行操作</small>
</div>
<div class="react-arrow">&rarr;</div>
<div class="react-step observe">
<strong>观察</strong><br><small>读取页面<br>AOM/截图</small>
</div>
<div class="react-arrow">&rarr;</div>
<div class="react-step critic">
<strong>评估</strong><br><small>质量检查<br>成功?失败?</small>
</div>
<div class="react-arrow" style="color:var(--text3);">&#8634; 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">/ 定义 &middot; 签名 &middot; 沙箱 &middot; 迁移</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">&#10003;</span> <code>browserAction</code> <code>console</code> <code>JSON</code> <code>Promise</code> <code>setTimeout</code></p>
<p><span class="tag tag-red">&#10007;</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);">结构化 &middot; 可复用 &middot; 可验证</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);">用户说意图 &rarr; Agent 选 Skill &rarr; 执行</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);">&rarr;</span>
<div style="color:var(--text);">Signed Skill</div>
<span style="color:var(--accent);">&rarr;</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">/ 三层记忆 &middot; 越用越快</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&lt;Message&gt;</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>&lt;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;">
&#11015; 经验沉淀 &rarr; 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;">
&#11015; 高频提炼 &rarr; 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">/ 仓库 &middot; 构建 &middot; 测试 &middot; 部署</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 &rarr; 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;">技术讨论 &middot; <span class="accent">Q&amp;A</span></h1>
<p style="color:var(--text2);font-size:1.1rem;margin-bottom:2rem;">Known Risks &amp; 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">&#9888;</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">&#9888;</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">&#9888;</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">&#9888;</span> 性能基线</div>
<div class="card-desc">需要实际环境 benchmarking<br><small style="color:var(--text3);">LLM latency &middot; Pipe throughput &middot; 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>
浏览器组 &middot; AI 平台组 &middot; 安全组 &middot; 测试组
</p>
<p style="color:var(--text3);">
项目文档: <code style="color:var(--accent);">confluence/sgclaw</code> &nbsp;&middot;&nbsp;
代码仓库: <code style="color:var(--accent);">gitlab/superrpa/sgclaw</code> &nbsp;&middot;&nbsp;
看板: <code style="color:var(--accent);">jira/SGCLAW</code>
</p>
</div>
</div>
</section>
</div><!-- /deck -->
<!-- ====== 导航 ====== -->
<div class="nav-bar" id="navBar"></div>
<div class="page-num" id="pageNum"></div>
<div class="shortcut-hint">← → 翻页 · F11 全屏</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>
Reference in New Issue View Git Blame Copy Permalink