steven_li
520a21a027
添加 DEFAULT_TEAM_NODE_MAX_TOOL_ITERATIONS 配置项以控制团队节点的最大工具迭代次数， 并修改 LocalAgentRunner 中的逻辑来使用此默认值当 envelope 中未指定时。 fix(runtime): 修复团队节点运行成功判断逻辑 更新运行成功判断条件，将 finish_reason 为 "max_tool_iterations_finalized" 的情况 视为运行失败，并添加对原始工具调用输出的检测，避免将其误判为成功完成。 feat(mcp): 添加团队工作流MCP工具类别支持 增加新的本地MCP工具类别 "team_workflow" 及其对应的工具创建功能， 为团队工作流提供本地工具支持。 refactor(engine): 调整AgentLoop最大工具迭代次数设置 将 AgentProfile 中的默认 max_tool_iterations 从 30 增加到 100， 同时移除 TaskExecutionPlanner 构造函数中的重复参数传递。 perf(mcp): 优化MCP连接管理避免重复连接 添加 mcp_connected 标志来跟踪MCP连接状态，确保 connect_all 只执行一次， 提高性能并避免不必要的重复连接。 refactor(skills): 移除技能团队模板相关功能 移除与技能团队模板相关的代码，包括解析、存储和处理逻辑， 简化技能记录结构和加载流程。 feat(process): 增强会话过程投影器功能 添加技能激活快照事件处理，改进团队运行完成消息显示， 并增强技能激活事件的时间戳记录功能。 refactor(tasks): 简化任务尝试编排器团队执行逻辑 移除团队执行相关代码，将所有任务统一按单步执行处理， 简化任务编排器的复杂度并提升执行效率。 fix(evidence): 修复节点证据评估中需求验证逻辑 更新节点证据评估逻辑，跳过自然语言证据需求的确定性验证， 只执行机器可读的需求验证，避免因自然语言需求导致的节点失败。
1201 lines
82 KiB
HTML
1201 lines
82 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Beaver 高保真网页画册复刻</title>
|
||
<style>
|
||
:root {
|
||
--w: 1672px;
|
||
--h: 941px;
|
||
--bg: #020815;
|
||
--deep: #06112a;
|
||
--cyan: #1ff6ff;
|
||
--blue: #1688ff;
|
||
--line: rgba(38, 190, 255, .9);
|
||
--text: #eff8ff;
|
||
--muted: #a9c6df;
|
||
--green: #4fe879;
|
||
--purple: #b36cff;
|
||
--gold: #ffba3d;
|
||
--danger: #ff645d;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html, body { height: 100%; margin: 0; }
|
||
body {
|
||
background: #17171d;
|
||
color: var(--text);
|
||
overflow: hidden;
|
||
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
|
||
}
|
||
|
||
.viewer {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
background:
|
||
radial-gradient(circle at 50% 38%, rgba(13, 75, 148, .28), transparent 40%),
|
||
linear-gradient(135deg, #11131b, #24242b 48%, #11131b);
|
||
}
|
||
|
||
.stage {
|
||
position: relative;
|
||
width: var(--w);
|
||
height: var(--h);
|
||
transform-origin: center center;
|
||
background: var(--bg);
|
||
box-shadow: 0 24px 80px rgba(0, 0, 0, .62), 0 0 0 1px rgba(86, 189, 255, .22);
|
||
}
|
||
|
||
.slide {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: none;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(circle at 50% 52%, rgba(0, 128, 255, .28), transparent 31%),
|
||
radial-gradient(circle at 12% 58%, rgba(20, 172, 255, .18), transparent 24%),
|
||
radial-gradient(circle at 86% 62%, rgba(60, 126, 255, .2), transparent 24%),
|
||
linear-gradient(180deg, #030a1a 0%, #06142c 52%, #030a16 100%);
|
||
isolation: isolate;
|
||
}
|
||
|
||
.slide.is-active { display: block; }
|
||
.slide::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 18px 16px 18px 16px;
|
||
pointer-events: none;
|
||
border: 1px solid rgba(40, 170, 255, .45);
|
||
clip-path: polygon(2% 0, 15% 0, 16% 2%, 84% 2%, 85% 0, 98% 0, 100% 3%, 100% 15%, 98% 17%, 98% 83%, 100% 85%, 100% 97%, 98% 100%, 2% 100%, 0 97%, 0 86%, 2% 84%, 2% 17%, 0 15%, 0 3%);
|
||
box-shadow: inset 0 0 24px rgba(27, 160, 255, .2);
|
||
z-index: 2;
|
||
}
|
||
|
||
.slide::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(rgba(52, 175, 255, .055) 1px, transparent 1px) 0 0 / 44px 44px,
|
||
linear-gradient(90deg, rgba(52, 175, 255, .048) 1px, transparent 1px) 0 0 / 44px 44px,
|
||
radial-gradient(circle, rgba(20, 210, 255, .34) 0 1px, transparent 2px) 0 0 / 64px 64px;
|
||
opacity: .48;
|
||
mask-image: radial-gradient(circle at 50% 54%, black 0 46%, transparent 80%);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.circuit {
|
||
position: absolute;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, rgba(27, 209, 255, .75), transparent);
|
||
filter: drop-shadow(0 0 8px rgba(20, 199, 255, .8));
|
||
z-index: 1;
|
||
}
|
||
.circuit::before, .circuit::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -3px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--cyan);
|
||
box-shadow: 0 0 10px var(--cyan);
|
||
}
|
||
.circuit::before { left: 26%; }
|
||
.circuit::after { right: 18%; }
|
||
|
||
.logo {
|
||
position: absolute;
|
||
left: 42px;
|
||
top: 42px;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
z-index: 5;
|
||
font-weight: 900;
|
||
font-size: 30px;
|
||
line-height: 1;
|
||
}
|
||
.logo-mark {
|
||
width: 48px;
|
||
height: 54px;
|
||
background: conic-gradient(from 30deg, #0cf, #2468ff, #42e9ff, #2146c7, #0cf);
|
||
clip-path: polygon(50% 0, 93% 24%, 93% 75%, 50% 100%, 7% 75%, 7% 24%);
|
||
box-shadow: 0 0 18px rgba(39, 194, 255, .9);
|
||
position: relative;
|
||
}
|
||
.logo-mark::after {
|
||
content: "B";
|
||
position: absolute;
|
||
inset: 12px;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 26px;
|
||
color: #06142a;
|
||
font-weight: 1000;
|
||
background: rgba(202, 245, 255, .72);
|
||
clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
|
||
}
|
||
.logo small { display: block; margin-top: 6px; font-size: 12px; color: #d6efff; font-weight: 800; letter-spacing: .5px; }
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 24px;
|
||
z-index: 4;
|
||
text-align: center;
|
||
font-size: 76px;
|
||
line-height: 1.05;
|
||
font-weight: 1000;
|
||
letter-spacing: 0;
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 43%, #bdefff 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
text-shadow: 0 3px 0 rgba(96, 178, 235, .58), 0 0 28px rgba(67, 198, 255, .7);
|
||
}
|
||
.title.large { font-size: 94px; top: 28px; }
|
||
.subtitle {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 132px;
|
||
z-index: 4;
|
||
text-align: center;
|
||
font-size: 31px;
|
||
font-weight: 900;
|
||
color: #c9edff;
|
||
text-shadow: 0 0 12px rgba(25, 209, 255, .8);
|
||
}
|
||
.subtitle.cyan { color: #40f4ff; }
|
||
|
||
.panel {
|
||
position: absolute;
|
||
z-index: 3;
|
||
padding: 20px 24px;
|
||
border: 2px solid rgba(35, 204, 255, .9);
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(180deg, rgba(11, 39, 84, .84), rgba(5, 17, 40, .88)),
|
||
radial-gradient(circle at 20% 0, rgba(28, 168, 255, .38), transparent 36%);
|
||
box-shadow:
|
||
inset 0 0 30px rgba(32, 154, 255, .3),
|
||
0 0 24px rgba(11, 154, 255, .5);
|
||
}
|
||
.panel.glow { box-shadow: inset 0 0 32px rgba(31, 213, 255, .32), 0 0 28px rgba(19, 157, 255, .5); }
|
||
.panel.green { border-color: rgba(73, 239, 143, .82); box-shadow: inset 0 0 22px rgba(73, 239, 143, .2), 0 0 18px rgba(73, 239, 143, .28); }
|
||
.panel.purple { border-color: rgba(179, 108, 255, .82); box-shadow: inset 0 0 22px rgba(179, 108, 255, .2), 0 0 18px rgba(179, 108, 255, .3); }
|
||
.panel.gold { border-color: rgba(255, 186, 61, .82); box-shadow: inset 0 0 22px rgba(255, 186, 61, .18), 0 0 18px rgba(255, 186, 61, .28); }
|
||
.panel h3 {
|
||
margin: 0 0 14px;
|
||
color: var(--cyan);
|
||
font-size: 28px;
|
||
font-weight: 1000;
|
||
line-height: 1.1;
|
||
}
|
||
.panel p, .panel li {
|
||
margin: 0;
|
||
color: #eaf7ff;
|
||
font-size: 18px;
|
||
line-height: 1.55;
|
||
font-weight: 600;
|
||
}
|
||
.panel ul { margin: 10px 0 0; padding-left: 20px; }
|
||
.panel li::marker { color: var(--cyan); }
|
||
|
||
.num {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 10px;
|
||
border-radius: 10px;
|
||
background: linear-gradient(135deg, #0d7dff, #1bdcff);
|
||
color: #fff;
|
||
font-size: 20px;
|
||
font-weight: 1000;
|
||
box-shadow: 0 0 15px rgba(24, 173, 255, .8);
|
||
}
|
||
|
||
.icon {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 72px;
|
||
height: 72px;
|
||
border: 2px solid rgba(35, 216, 255, .9);
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(29, 181, 255, .24), rgba(10, 31, 70, .94));
|
||
box-shadow: inset 0 0 18px rgba(28, 217, 255, .3), 0 0 18px rgba(20, 155, 255, .58);
|
||
color: #d8fbff;
|
||
font-weight: 1000;
|
||
font-size: 18px;
|
||
}
|
||
.icon.square {
|
||
border-radius: 10px;
|
||
width: 86px;
|
||
height: 70px;
|
||
}
|
||
.icon.green { border-color: var(--green); color: var(--green); }
|
||
.icon.purple { border-color: var(--purple); color: #e6c8ff; }
|
||
.icon.gold { border-color: var(--gold); color: #ffd887; }
|
||
|
||
.card-row {
|
||
display: grid;
|
||
grid-template-columns: 72px 1fr;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.line {
|
||
position: absolute;
|
||
z-index: 2;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, rgba(30, 205, 255, .1), rgba(92, 210, 255, .95), rgba(30, 205, 255, .1));
|
||
box-shadow: 0 0 16px rgba(34, 189, 255, .85);
|
||
transform-origin: left center;
|
||
}
|
||
.line::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: -8px;
|
||
top: -7px;
|
||
border-left: 16px solid rgba(95, 222, 255, .95);
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
filter: drop-shadow(0 0 8px rgba(31, 216, 255, .95));
|
||
}
|
||
.line.noarrow::after { content: none; }
|
||
|
||
.bottom-banner {
|
||
position: absolute;
|
||
left: 180px;
|
||
right: 180px;
|
||
bottom: 34px;
|
||
height: 84px;
|
||
z-index: 5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 22px;
|
||
border: 1.5px solid rgba(34, 202, 255, .85);
|
||
background: linear-gradient(90deg, rgba(4, 21, 54, .9), rgba(8, 37, 84, .96), rgba(4, 21, 54, .9));
|
||
box-shadow: inset 0 0 28px rgba(32, 148, 255, .28), 0 0 28px rgba(23, 153, 255, .45);
|
||
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
|
||
font-size: 36px;
|
||
line-height: 1.1;
|
||
font-weight: 1000;
|
||
color: #f8fbff;
|
||
text-shadow: 0 0 14px rgba(37, 188, 255, .8);
|
||
letter-spacing: 0;
|
||
}
|
||
.bottom-banner .accent { color: var(--cyan); }
|
||
.diamond {
|
||
width: 58px;
|
||
height: 58px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(38, 217, 255, .9);
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--cyan);
|
||
box-shadow: 0 0 18px rgba(37, 205, 255, .8);
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.beaver {
|
||
position: absolute;
|
||
z-index: 6;
|
||
overflow: visible;
|
||
filter: drop-shadow(0 0 18px rgba(24, 175, 255, .45));
|
||
}
|
||
|
||
.pedestal {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: 460px;
|
||
height: 150px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(36, 204, 255, .88);
|
||
background: radial-gradient(ellipse at center, rgba(14, 136, 255, .42), rgba(3, 16, 42, .1) 62%, transparent 64%);
|
||
box-shadow: 0 0 54px rgba(25, 164, 255, .95), inset 0 0 42px rgba(34, 189, 255, .6);
|
||
}
|
||
|
||
.runtime-label {
|
||
position: absolute;
|
||
z-index: 4;
|
||
height: 78px;
|
||
padding: 0 48px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 2px solid rgba(34, 209, 255, .95);
|
||
border-radius: 18px;
|
||
background: linear-gradient(180deg, rgba(14, 80, 166, .9), rgba(6, 29, 79, .95));
|
||
color: #f7fbff;
|
||
font-size: 38px;
|
||
font-weight: 1000;
|
||
text-shadow: 0 0 14px rgba(45, 200, 255, .9);
|
||
box-shadow: inset 0 0 28px rgba(61, 201, 255, .52), 0 0 34px rgba(16, 155, 255, .9);
|
||
}
|
||
|
||
.ring {
|
||
position: absolute;
|
||
border: 2px solid rgba(55, 210, 255, .75);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 30px rgba(24, 162, 255, .5), inset 0 0 28px rgba(24, 162, 255, .22);
|
||
z-index: 2;
|
||
}
|
||
|
||
.node {
|
||
position: absolute;
|
||
z-index: 4;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 116px;
|
||
height: 116px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(63, 211, 255, .9);
|
||
background: radial-gradient(circle, rgba(29, 103, 220, .75), rgba(5, 19, 45, .95));
|
||
color: #fff;
|
||
font-size: 19px;
|
||
font-weight: 900;
|
||
text-align: center;
|
||
box-shadow: inset 0 0 22px rgba(90, 220, 255, .28), 0 0 24px rgba(20, 170, 255, .7);
|
||
}
|
||
.node .mini { display: block; font-size: 30px; line-height: 1; margin-bottom: 4px; color: #c7f8ff; }
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
color: #dcefff;
|
||
font-size: 14px;
|
||
}
|
||
.data-table td, .data-table th {
|
||
padding: 9px 10px;
|
||
border-bottom: 1px solid rgba(92, 180, 255, .22);
|
||
text-align: left;
|
||
}
|
||
.data-table th { color: #91dfff; font-size: 13px; }
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 72px;
|
||
height: 26px;
|
||
padding: 0 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid currentColor;
|
||
color: var(--cyan);
|
||
background: rgba(24, 163, 255, .12);
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
}
|
||
.tag.green { color: var(--green); }
|
||
.tag.gold { color: var(--gold); }
|
||
.tag.purple { color: #d99cff; }
|
||
|
||
.metric-strip {
|
||
position: absolute;
|
||
z-index: 4;
|
||
display: grid;
|
||
grid-auto-flow: column;
|
||
grid-auto-columns: 1fr;
|
||
border: 1px solid rgba(47, 191, 255, .65);
|
||
border-radius: 12px;
|
||
background: rgba(5, 22, 52, .86);
|
||
box-shadow: inset 0 0 18px rgba(36, 170, 255, .18);
|
||
overflow: hidden;
|
||
}
|
||
.metric {
|
||
padding: 18px 28px;
|
||
border-right: 1px solid rgba(59, 168, 255, .32);
|
||
color: #d8efff;
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
}
|
||
.metric:last-child { border-right: 0; }
|
||
.metric b {
|
||
display: block;
|
||
margin-top: 6px;
|
||
color: var(--cyan);
|
||
font-size: 30px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.mini-window {
|
||
position: absolute;
|
||
z-index: 4;
|
||
border: 1px solid rgba(90, 181, 255, .4);
|
||
border-radius: 14px;
|
||
background: linear-gradient(180deg, rgba(3, 13, 28, .98), rgba(7, 24, 52, .96));
|
||
box-shadow: 0 0 22px rgba(18, 150, 255, .45);
|
||
overflow: hidden;
|
||
}
|
||
.mini-window .bar {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 0 18px;
|
||
border-bottom: 1px solid rgba(80, 160, 245, .22);
|
||
color: #e8f6ff;
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
background: rgba(4, 14, 30, .9);
|
||
}
|
||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
|
||
|
||
.flow-box {
|
||
position: absolute;
|
||
z-index: 4;
|
||
display: grid;
|
||
place-items: center;
|
||
text-align: center;
|
||
border: 2px solid rgba(41, 196, 255, .85);
|
||
border-radius: 15px;
|
||
background: linear-gradient(180deg, rgba(12, 39, 83, .95), rgba(5, 17, 39, .96));
|
||
box-shadow: inset 0 0 24px rgba(30, 155, 255, .24), 0 0 20px rgba(30, 155, 255, .5);
|
||
color: #f6fbff;
|
||
font-weight: 1000;
|
||
font-size: 28px;
|
||
}
|
||
.flow-box small { display: block; margin-top: 12px; color: var(--cyan); font-size: 18px; }
|
||
|
||
.page-indicator {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 16px;
|
||
z-index: 20;
|
||
color: #cdd6e5;
|
||
font: 700 13px/1 Arial, sans-serif;
|
||
opacity: .78;
|
||
user-select: none;
|
||
}
|
||
|
||
body.capture {
|
||
width: var(--w);
|
||
height: var(--h);
|
||
background: var(--bg);
|
||
}
|
||
body.capture .viewer {
|
||
position: static;
|
||
display: block;
|
||
width: var(--w);
|
||
height: var(--h);
|
||
background: transparent;
|
||
}
|
||
body.capture .stage {
|
||
transform: none !important;
|
||
box-shadow: none;
|
||
}
|
||
body.capture .screen-note,
|
||
body.capture .page-indicator {
|
||
display: none;
|
||
}
|
||
|
||
.screen-note {
|
||
position: fixed;
|
||
left: 20px;
|
||
bottom: 16px;
|
||
z-index: 20;
|
||
color: #aab3c3;
|
||
font: 600 12px/1.4 Arial, sans-serif;
|
||
opacity: .7;
|
||
user-select: none;
|
||
}
|
||
|
||
.slide.exact-mode > :not(.asset-layer):not(.editable-layer) {
|
||
display: none !important;
|
||
}
|
||
.asset-layer {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 10;
|
||
pointer-events: none;
|
||
}
|
||
.asset-layer img {
|
||
position: absolute;
|
||
display: block;
|
||
max-width: none;
|
||
user-select: none;
|
||
}
|
||
.editable-layer {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 30;
|
||
display: none;
|
||
}
|
||
body.editable-mode .editable-layer {
|
||
display: block;
|
||
}
|
||
body.editable-mode .asset-layer {
|
||
opacity: .42;
|
||
}
|
||
.edit-box {
|
||
position: absolute;
|
||
min-height: 24px;
|
||
padding: 8px 10px;
|
||
border: 1px dashed rgba(47, 235, 255, .45);
|
||
border-radius: 8px;
|
||
background: rgba(2, 10, 28, .78);
|
||
color: #f4fbff;
|
||
font-weight: 800;
|
||
line-height: 1.28;
|
||
text-shadow: 0 0 10px rgba(33, 207, 255, .75);
|
||
outline: none;
|
||
white-space: pre-line;
|
||
overflow: hidden;
|
||
pointer-events: auto;
|
||
}
|
||
.edit-box:focus {
|
||
border-color: #23f6ff;
|
||
background: rgba(1, 12, 35, .92);
|
||
box-shadow: 0 0 0 2px rgba(35, 246, 255, .18), 0 0 24px rgba(35, 246, 255, .34);
|
||
}
|
||
.edit-title {
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
font-size: 64px;
|
||
font-weight: 1000;
|
||
line-height: 1.05;
|
||
text-align: center;
|
||
color: #fff;
|
||
text-shadow: 0 3px 0 rgba(150, 212, 255, .75), 0 0 24px rgba(58, 208, 255, .85);
|
||
}
|
||
.edit-subtitle {
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
font-size: 29px;
|
||
font-weight: 1000;
|
||
text-align: center;
|
||
color: #c9f5ff;
|
||
}
|
||
.edit-banner {
|
||
font-size: 34px;
|
||
font-weight: 1000;
|
||
text-align: center;
|
||
color: #f8fbff;
|
||
border-color: rgba(35, 186, 255, .7);
|
||
background: rgba(4, 24, 62, .84);
|
||
}
|
||
.edit-panel-title {
|
||
font-size: 22px;
|
||
color: #1ff6ff;
|
||
}
|
||
.edit-note {
|
||
position: fixed;
|
||
top: 16px;
|
||
right: 18px;
|
||
z-index: 60;
|
||
display: none;
|
||
gap: 8px;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
border: 1px solid rgba(35, 214, 255, .4);
|
||
border-radius: 10px;
|
||
background: rgba(5, 12, 28, .88);
|
||
color: #dff8ff;
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
}
|
||
body:not(.capture) .edit-note {
|
||
display: flex;
|
||
}
|
||
.edit-note button {
|
||
height: 30px;
|
||
border: 1px solid rgba(35, 214, 255, .5);
|
||
border-radius: 7px;
|
||
background: rgba(22, 80, 160, .8);
|
||
color: #fff;
|
||
font-weight: 900;
|
||
cursor: pointer;
|
||
}
|
||
body.capture .editable-layer,
|
||
body.capture .edit-note {
|
||
display: none !important;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg width="0" height="0" style="position:absolute">
|
||
<symbol id="beaverSymbol" viewBox="0 0 260 300">
|
||
<ellipse cx="68" cy="206" rx="44" ry="72" fill="#6b3b1f" stroke="#2b160d" stroke-width="6" transform="rotate(-20 68 206)"/>
|
||
<path d="M44 151c31 20 56 47 67 92" fill="none" stroke="#2b160d" stroke-width="5"/>
|
||
<path d="M52 171l56 35M44 199l73 21M47 227l70 6" stroke="#2b160d" stroke-width="4" opacity=".85"/>
|
||
<ellipse cx="130" cy="178" rx="72" ry="84" fill="#9a5a2d" stroke="#3b1d10" stroke-width="6"/>
|
||
<circle cx="76" cy="89" r="25" fill="#8c4f27" stroke="#3b1d10" stroke-width="6"/>
|
||
<circle cx="184" cy="89" r="25" fill="#8c4f27" stroke="#3b1d10" stroke-width="6"/>
|
||
<ellipse cx="130" cy="101" rx="69" ry="56" fill="#b9773c" stroke="#3b1d10" stroke-width="6"/>
|
||
<path d="M83 72c18-29 52-34 92-17-8-18-26-29-52-28 10-7 24-10 43-6-27-25-72-17-91 20 2 9 4 20 8 31z" fill="#a25d2a" stroke="#3b1d10" stroke-width="4"/>
|
||
<ellipse cx="105" cy="105" rx="17" ry="23" fill="#fff"/>
|
||
<ellipse cx="155" cy="105" rx="17" ry="23" fill="#fff"/>
|
||
<circle cx="109" cy="108" r="8" fill="#10131a"/>
|
||
<circle cx="151" cy="108" r="8" fill="#10131a"/>
|
||
<ellipse cx="130" cy="128" rx="23" ry="16" fill="#2d170f"/>
|
||
<path d="M96 145c18 24 51 28 70 0" fill="#f6d7a9" stroke="#3b1d10" stroke-width="4"/>
|
||
<path d="M120 145v23h20v-23" fill="#fff" stroke="#3b1d10" stroke-width="3"/>
|
||
<path d="M68 164c19 20 42 30 67 30 26 0 48-10 67-30 14 22 20 55 15 93H43c-1-40 7-71 25-93z" fill="#082450" stroke="#05172f" stroke-width="7"/>
|
||
<path d="M78 171c16 22 35 33 57 33 21 0 38-11 50-33" fill="none" stroke="#153d78" stroke-width="5"/>
|
||
<path d="M122 209l24 14v28l-24 14-24-14v-28z" fill="#23b9ff" stroke="#a5efff" stroke-width="4"/>
|
||
<text x="122" y="246" text-anchor="middle" font-family="Arial" font-size="34" font-weight="900" fill="#fff">B</text>
|
||
<path d="M192 154c21-3 30 17 19 37" fill="none" stroke="#7d4824" stroke-width="14" stroke-linecap="round"/>
|
||
<path d="M205 151l13-31" stroke="#7d4824" stroke-width="14" stroke-linecap="round"/>
|
||
<path d="M204 136l-17-3" stroke="#7d4824" stroke-width="10" stroke-linecap="round"/>
|
||
<path d="M203 146l-17 4" stroke="#7d4824" stroke-width="10" stroke-linecap="round"/>
|
||
<ellipse cx="77" cy="272" rx="36" ry="10" fill="#28150c"/>
|
||
<ellipse cx="177" cy="272" rx="38" ry="10" fill="#28150c"/>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<main class="viewer" aria-label="Beaver 网页画册">
|
||
<div id="stage" class="stage">
|
||
<section class="slide is-active" data-page="1">
|
||
<div class="logo"><span class="logo-mark"></span><span>Beaver<small>AI 智能体平台</small></span></div>
|
||
<h1 class="title">多 Channel 随身连接</h1>
|
||
<div class="subtitle">让 Beaver 进入用户真实工作入口</div>
|
||
<div class="circuit" style="left:475px;top:155px;width:250px"></div>
|
||
<div class="circuit" style="right:475px;top:155px;width:250px"></div>
|
||
<div class="panel" style="left:28px;top:138px;width:320px;height:146px"><h3><span class="num">01</span>微信 / 飞书接入</h3><p>无缝连接主流沟通工具，在熟悉的环境中高效协作。</p></div>
|
||
<div class="panel" style="left:28px;top:304px;width:320px;height:148px"><h3><span class="num">02</span>小终端实时对话</h3><p>M5Stack 等便携终端接入，随时随地与 Beaver 对话。</p></div>
|
||
<div class="panel" style="left:28px;top:470px;width:320px;height:148px"><h3><span class="num">03</span>A2UI 设备扩展</h3><p>支持智能眼镜等 A2UI 设备，自然交互，拓展应用边界。</p></div>
|
||
<div class="panel" style="left:28px;top:636px;width:320px;height:146px"><h3><span class="num">04</span>多端任务同步</h3><p>跨端同步上下文与任务，无缝衔接，持续推进工作。</p></div>
|
||
<div class="pedestal" style="left:606px;top:486px"></div>
|
||
<div class="runtime-label" style="left:707px;top:510px">Beaver Runtime</div>
|
||
<img class="beaver" src="assets/beaver-crop-01.png" alt="" style="left:635px;top:175px;width:413px;height:490px">
|
||
<div class="panel glow" style="left:378px;top:202px;width:300px;height:130px"><div class="card-row"><span class="icon square">WEB</span><div><h3>Web</h3><p>浏览器访问，随时使用</p></div></div></div>
|
||
<div class="panel green" style="left:378px;top:374px;width:286px;height:126px"><div class="card-row"><span class="icon green">CHAT</span><div><h3>微信 / WeChat</h3><p>在微信中直接对话</p></div></div></div>
|
||
<div class="panel" style="left:378px;top:540px;width:266px;height:130px"><div class="card-row"><span class="icon square">APP</span><div><h3>移动端</h3><p>移动办公，高效随行</p></div></div></div>
|
||
<div class="panel" style="right:120px;top:202px;width:358px;height:130px"><div class="card-row"><span class="icon">飞书</span><div><h3>飞书 / Feishu</h3><p>连接工作流与团队协同</p></div></div></div>
|
||
<div class="panel purple" style="right:120px;top:374px;width:358px;height:126px"><div class="card-row"><span class="icon purple">M5</span><div><h3>M5Stack 小终端</h3><p>硬件终端，实时对话</p></div></div></div>
|
||
<div class="panel" style="right:120px;top:540px;width:358px;height:130px"><div class="card-row"><span class="icon">A2</span><div><h3>智能眼镜</h3><p>语音交互，解放双手</p></div></div></div>
|
||
<div class="line" style="left:657px;top:270px;width:96px;transform:rotate(45deg)"></div>
|
||
<div class="line" style="left:642px;top:438px;width:120px;transform:rotate(19deg)"></div>
|
||
<div class="line" style="left:626px;top:604px;width:110px;transform:rotate(-17deg)"></div>
|
||
<div class="line" style="left:960px;top:270px;width:235px;transform:rotate(-23deg)"></div>
|
||
<div class="line" style="left:950px;top:436px;width:245px;transform:rotate(-5deg)"></div>
|
||
<div class="line" style="left:960px;top:606px;width:240px;transform:rotate(19deg)"></div>
|
||
<div class="panel" style="left:642px;top:622px;width:468px;height:58px;padding:10px 26px;text-align:center;border-radius:24px"><h3 style="font-size:22px;margin:0;color:#fff">同一个 Agent Runtime，多种交互入口</h3></div>
|
||
<div class="bottom-banner" style="left:354px;right:112px;bottom:128px;height:78px;font-size:32px">让 Beaver 不只停留在网页，而是连接沟通工具、随身终端和智能设备。</div>
|
||
<div class="metric-strip" style="left:28px;right:28px;bottom:30px;height:92px">
|
||
<div class="metric">多人入口覆盖<br>满足不同场景需要</div><div class="metric">安全可控<br>企业级权限与数据保护</div><div class="metric">开放集成<br>标准 API，灵活接入</div><div class="metric">一致体验<br>同一能力，处处可用</div><div class="metric">可观测可管理<br>全渠道接入与使用分析</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="2">
|
||
<div class="logo"><span class="logo-mark"></span><span>Beaver<small>企业级 Agent 运行平台</small></span></div>
|
||
<h1 class="title">可追溯文件系统</h1>
|
||
<div class="subtitle">让 Agent 产物成为可管理的企业资产</div>
|
||
<div class="panel" style="left:24px;top:126px;width:414px;height:146px"><h3><span class="num">1</span>MiniO 私有化存储</h3><ul><li>企业自建，数据不出域</li><li>高可用、高性能、无限扩展</li><li>S3 兼容，生态丰富</li></ul></div>
|
||
<div class="panel" style="left:24px;top:286px;width:414px;height:137px"><h3><span class="num">2</span>用户文件权限隔离</h3><ul><li>多租户隔离，用户级权限</li><li>细粒度访问控制（RBAC）</li><li>加密存储，安全可控</li></ul></div>
|
||
<div class="panel" style="left:24px;top:438px;width:414px;height:137px"><h3><span class="num">3</span>文件修改可追溯</h3><ul><li>完整版本历史与变更记录</li><li>操作留痕，审计可靠</li><li>谁改了什么，一目了然</li></ul></div>
|
||
<div class="panel" style="left:24px;top:590px;width:414px;height:130px"><h3><span class="num">4</span>支持版本回滚扩展</h3><ul><li>一键回滚到任意版本</li><li>保留历史版本，可扩展存储策略</li></ul></div>
|
||
<img class="beaver" src="assets/beaver-crop-02.png" alt="" style="left:0;top:678px;width:256px;height:260px">
|
||
<div class="panel glow" style="left:520px;top:168px;width:606px;height:405px;border-radius:34px;text-align:center">
|
||
<h3 style="font-size:34px;color:#fff;margin-top:4px">MinIO 私有化存储</h3>
|
||
<h3 style="font-size:42px;color:#fff;margin-top:4px">企业文件仓库</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px">
|
||
<div class="panel" style="position:static;height:158px;padding:18px"><span class="icon square">UP</span><h3 style="font-size:22px">uploads</h3><p>用户上传文件</p></div>
|
||
<div class="panel green" style="position:static;height:158px;padding:18px"><span class="icon square green">TASK</span><h3 style="font-size:22px">tasks</h3><p>任务与配置文件</p></div>
|
||
<div class="panel purple" style="position:static;height:158px;padding:18px"><span class="icon square purple"></></span><h3 style="font-size:22px">outputs</h3><p>Agent 产出文件</p></div>
|
||
<div class="panel gold" style="position:static;height:158px;padding:18px"><span class="icon square gold">TEAM</span><h3 style="font-size:22px">shared</h3><p>共享与协作文件</p></div>
|
||
</div>
|
||
<div class="metric-strip" style="left:42px;right:42px;bottom:24px;height:66px"><div class="metric" style="padding:14px">权限隔离</div><div class="metric" style="padding:14px">加密存储</div><div class="metric" style="padding:14px">多副本</div><div class="metric" style="padding:14px">高可用</div><div class="metric" style="padding:14px">S3 兼容</div></div>
|
||
</div>
|
||
<div class="panel" style="right:188px;top:142px;width:304px;height:344px"><h3 style="text-align:center;color:#fff">Agent 与文件交互</h3><div class="card-row" style="margin-top:18px"><span class="icon square green">GEN</span><div><h3>生成</h3><p>写入 outputs 或其他目录</p></div></div><div class="card-row" style="margin-top:22px"><span class="icon square">READ</span><div><h3 style="color:#dff">读取</h3><p>从仓库读取文件作为上下文</p></div></div><div class="card-row" style="margin-top:22px"><span class="icon square gold">EDIT</span><div><h3 style="color:#ffd878">修改</h3><p>产生新版本并记录变更</p></div></div></div>
|
||
<div class="panel" style="right:24px;top:260px;width:128px;height:304px;text-align:center"><span class="icon">锁</span><h3 style="font-size:24px;margin-top:18px">安全边界</h3><p>网络隔离<br>访问控制<br>操作审计<br>合规治理</p></div>
|
||
<div class="panel" style="left:470px;top:584px;width:1036px;height:224px"><h3 style="color:#fff">版本历史（以文件报告.md 为例）</h3><div style="display:grid;grid-template-columns:130px 1fr;gap:26px"><div class="panel" style="position:static;height:132px;text-align:center"><span class="icon square">MD</span><p>报告.md<br><small>所在路径：outputs/</small></p></div><div style="display:grid;grid-template-columns:repeat(3,1fr) 120px;gap:18px;align-items:center"><div class="panel" style="position:static;height:132px"><h3>v1.0</h3><p>创建<br>2025-05-18 10:30<br>Alice</p></div><div class="panel green" style="position:static;height:132px"><h3>v1.1</h3><p>修改图表数据<br>2025-05-18 14:22<br>Bob</p></div><div class="panel purple" style="position:static;height:132px"><h3>v2.0</h3><p>新增结论章节<br>2025-05-19 09:15<br>Carol</p></div><p style="font-size:22px">更多<br>版本...</p></div></div></div>
|
||
<div class="bottom-banner" style="left:450px;right:92px;font-size:34px"><span class="diamond">✓</span>让 Agent 生成、读取和修改的文件都可<span class="accent">追踪、可恢复、可治理</span>。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="3">
|
||
<h1 class="title">可信协议与工具接入</h1>
|
||
<div class="subtitle">不只是调用工具，而是安全、可控地调用工具</div>
|
||
<div class="panel" style="left:36px;top:144px;width:330px;height:140px"><div class="card-row"><span class="icon">链</span><div><h3>1 MCP 工具统一接入</h3><p>统一接入 MCP Server，无缝连接各类工具与服务。</p></div></div></div>
|
||
<div class="panel" style="left:36px;bottom:138px;width:330px;height:126px"><div class="card-row"><span class="icon">Bot</span><div><h3>2 A2A 协议扩展支持</h3><p>支持 A2A 协议，打通 Agent 之间协作与能力扩展。</p></div></div></div>
|
||
<div class="panel" style="right:36px;top:144px;width:356px;height:140px"><div class="card-row"><span class="icon">审</span><div><h3>3 工具调用权限审核</h3><p>细粒度权限控制与策略审核，全链路审计。</p></div></div></div>
|
||
<div class="panel" style="right:36px;bottom:138px;width:356px;height:126px"><div class="card-row"><span class="icon">锁</span><div><h3>4 账号密码外置托管</h3><p>凭据外置托管，密钥不入 Runtime，更安全可靠。</p></div></div></div>
|
||
<div class="panel glow" style="left:130px;top:320px;width:230px;height:160px;text-align:center"><h3 style="color:#fff">MCP Server</h3><span class="icon square">CLOUD</span></div>
|
||
<div class="panel glow" style="left:132px;top:505px;width:228px;height:142px;text-align:center"><h3 style="color:#fff">A2A Agent</h3><span class="icon square">A2A</span></div>
|
||
<div class="panel glow" style="left:462px;top:244px;width:168px;height:500px;text-align:center"><h3 style="color:#fff">安全控制层</h3><div class="panel" style="position:static;margin:22px 0;height:108px"><h3>AuthZ</h3><p>权限鉴权</p></div><div class="panel" style="position:static;margin:22px 0;height:108px"><h3>Token</h3><p>令牌管理</p></div><div class="panel" style="position:static;height:108px"><h3>Audit</h3><p>操作审计</p></div></div>
|
||
<div class="pedestal" style="left:640px;top:486px;width:392px;height:128px"></div>
|
||
<div class="runtime-label" style="left:724px;top:430px;height:108px">BEAVER<br>RUNTIME</div>
|
||
<img class="beaver" src="assets/beaver-crop-03.png" alt="" style="left:702px;top:175px;width:306px;height:435px">
|
||
<div class="panel glow" style="right:318px;top:278px;width:190px;height:382px;text-align:center;padding:10px"></div>
|
||
<div class="panel" style="right:315px;top:270px;width:190px;height:56px;padding:12px 20px"><h3 style="color:#fff;font-size:24px;margin:0">ERP</h3></div>
|
||
<div class="panel" style="right:315px;top:342px;width:190px;height:56px;padding:12px 20px"><h3 style="color:#fff;font-size:24px;margin:0">CRM</h3></div>
|
||
<div class="panel" style="right:315px;top:414px;width:190px;height:56px;padding:12px 20px"><h3 style="color:#fff;font-size:24px;margin:0">Database</h3></div>
|
||
<div class="panel" style="right:315px;top:486px;width:190px;height:56px;padding:12px 20px"><h3 style="color:#fff;font-size:24px;margin:0">Internal API</h3></div>
|
||
<div class="panel" style="right:315px;top:558px;width:190px;height:56px;padding:12px 20px"><h3 style="color:#fff;font-size:24px;margin:0">Workflow</h3></div>
|
||
<div class="panel" style="right:315px;top:630px;width:190px;height:56px;padding:12px 20px"><h3 style="color:#fff;font-size:20px;margin:0">其他企业服务</h3></div>
|
||
<div class="panel" style="left:680px;bottom:146px;width:310px;height:112px"><div class="card-row"><span class="icon square">锁</span><div><h3>外置凭据</h3><p>账号密码外置托管</p></div></div></div>
|
||
<div class="line" style="left:360px;top:399px;width:110px"></div><div class="line" style="left:360px;top:573px;width:110px"></div><div class="line" style="left:630px;top:493px;width:104px"></div><div class="line" style="left:1010px;top:477px;width:156px"></div>
|
||
<div class="bottom-banner"><span class="diamond">◆</span>让 Agent 接入企业系统时可鉴权、可审计、可控权。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="4">
|
||
<h1 class="title">长期记忆与用户画像</h1>
|
||
<div class="subtitle">让 Agent 持续理解用户、任务和业务背景</div>
|
||
<div class="panel" style="left:32px;top:186px;width:274px;height:162px"><div class="card-row"><span class="icon">多模态</span><div><h3>多模态记忆接入</h3><p>整合文字、图片、语音、文件等信息</p></div></div></div>
|
||
<div class="panel green" style="left:32px;bottom:172px;width:274px;height:136px"><div class="card-row"><span class="icon green">史</span><div><h3>历史任务经验复用</h3><p>沉淀任务历史，复用经验，提升效率</p></div></div></div>
|
||
<div class="panel purple" style="right:32px;top:190px;width:274px;height:132px"><div class="card-row"><span class="icon purple">人</span><div><h3>用户画像持续沉淀</h3><p>持续更新用户画像，越用越懂用户</p></div></div></div>
|
||
<div class="panel gold" style="right:32px;bottom:170px;width:274px;height:136px"><div class="card-row"><span class="icon gold">端</span><div><h3>随身设备记忆同步</h3><p>多设备记忆无缝同步</p></div></div></div>
|
||
<div class="panel glow" style="left:298px;top:312px;width:222px;height:352px"><h3 style="color:#fff;text-align:center">用户画像</h3><div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px"><span class="tag">兴趣</span><span class="tag">行为</span><span class="tag">技能</span><span class="tag">偏好</span></div><ul><li>个性化推荐</li><li>需求预测</li><li>偏好适配</li></ul></div>
|
||
<div class="panel glow" style="right:292px;top:312px;width:240px;height:352px"><h3 style="color:#fff;text-align:center">组织知识</h3><div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px"><span class="tag">业务</span><span class="tag">SOP</span><span class="tag">实践</span><span class="tag">案例</span></div><ul><li>知识检索增强</li><li>减少重复劳动</li><li>提升决策质量</li></ul></div>
|
||
<div class="ring" style="left:592px;top:192px;width:486px;height:486px"></div>
|
||
<img class="beaver" src="assets/beaver-crop-04.png" alt="" style="left:650px;top:255px;width:365px;height:355px">
|
||
<div class="panel glow" style="left:846px;top:414px;width:142px;height:112px;text-align:center"><h3 style="color:#fff">记忆中枢</h3><p>长期上下文</p></div>
|
||
<div class="node" style="left:782px;top:164px"><span><span class="mini">T</span>文字</span></div>
|
||
<div class="node" style="left:978px;top:222px"><span><span class="mini">图</span>图片</span></div>
|
||
<div class="node" style="left:1040px;top:424px"><span><span class="mini">声</span>语音</span></div>
|
||
<div class="node" style="left:982px;top:598px"><span><span class="mini">文</span>文件</span></div>
|
||
<div class="node" style="left:782px;top:666px"><span><span class="mini">...</span>对话记录</span></div>
|
||
<div class="node" style="left:612px;top:600px"><span><span class="mini">勾</span>任务历史</span></div>
|
||
<div class="node" style="left:548px;top:420px"><span><span class="mini">端</span>设备记忆</span></div>
|
||
<div class="node" style="left:612px;top:226px"><span><span class="mini">心</span>用户偏好</span></div>
|
||
<div class="line" style="left:306px;top:476px;width:274px"></div><div class="line" style="left:1082px;top:476px;width:294px"></div>
|
||
<div class="bottom-banner"><span class="diamond">◆</span>让 Agent 从“临时助手”变成“理解用户的长期工作伙伴”。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="5">
|
||
<h1 class="title">核心优势四：结果可验证</h1>
|
||
<div class="subtitle cyan">不靠感觉调 Prompt，而靠回放评估优化</div>
|
||
<div class="panel glow" style="left:30px;top:148px;width:430px;height:650px"><h3 style="text-align:center">评估与验证</h3><div class="panel" style="position:static;height:190px"><h3 style="color:#fff">评估报告</h3><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px"><span class="tag">基础 0.77</span><span class="tag">候选 0.78</span><span class="tag green">+0.01</span><span class="tag">覆盖 31%</span><span class="tag">替代 69%</span><span class="tag">medium</span></div></div><div class="panel" style="position:static;height:196px;margin-top:16px"><h3 style="color:#fff">修订对比</h3><div style="display:grid;grid-template-columns:1fr 1fr;gap:12px"><p>当前版本 v0001<br>− clarify<br>− delegate<br>− send_message<br>− spawn<br>− todo</p><p>草稿版本 v0002<br>✓ clarify<br>✓ delegate<br>✓ send_message<br>✓ spawn<br>✓ todo</p></div></div><div class="panel" style="position:static;height:96px;margin-top:16px"><h3 style="color:#fff;font-size:22px">安全报告</h3><p>未发现高风险问题，已通过安全检查。</p></div></div>
|
||
<div class="panel" style="left:718px;top:154px;width:246px;height:42px;padding:6px;text-align:center"><h3 style="margin:0;font-size:28px">评估优化闭环</h3></div>
|
||
<div class="ring" style="left:640px;top:256px;width:430px;height:360px"></div>
|
||
<div class="panel glow" style="left:716px;top:360px;width:248px;height:140px;text-align:center"><h3>数据驱动<br>持续进化</h3></div>
|
||
<div class="panel" style="left:720px;top:214px;width:226px;height:94px"><div class="card-row"><span class="icon" style="width:46px;height:46px">▶</span><div><h3 style="font-size:22px;color:#fff">历史任务 Replay</h3><p>真实任务回放</p></div></div></div>
|
||
<div class="panel" style="left:960px;top:362px;width:216px;height:104px"><h3 style="font-size:23px;color:#fff">Skill 版本对比</h3><p>多版本并行对比</p></div>
|
||
<div class="panel" style="left:718px;top:516px;width:228px;height:104px"><h3 style="font-size:23px;color:#fff">用户反馈沉淀</h3><p>记录评分与反馈</p></div>
|
||
<div class="panel" style="left:488px;top:362px;width:218px;height:104px"><h3 style="font-size:23px;color:#fff">失败案例复盘</h3><p>定位原因，制定规则</p></div>
|
||
<div class="panel glow" style="right:32px;top:148px;width:428px;height:540px"><h3 style="text-align:center">版本记录</h3><div class="panel" style="position:static;height:126px"><h3 style="color:#fff">v0002 <span class="tag green">当前</span></h3><p>根据用户反馈与评估结果优化，增强检索逻辑。</p></div><div class="panel" style="position:static;height:126px;margin-top:16px"><h3 style="color:#fff">v0001 <span class="tag">published</span></h3><p>新增 tools 获取与 user_files 工具。</p></div><div class="panel" style="position:static;height:126px;margin-top:16px"><h3 style="color:#fff">v0000 <span class="tag purple">draft</span></h3><p>初始版本，基础工具与流程搭建。</p></div></div>
|
||
<div class="metric-strip" style="left:476px;right:306px;bottom:146px;height:92px"><div class="metric">基础得分<b>0.77</b></div><div class="metric">候选得分<b>0.78</b></div><div class="metric">提升<b style="color:var(--green)">+0.01</b></div><div class="metric">置信度<b>medium</b></div><div class="metric">评估样本<b>236</b></div><div class="metric">通过率<b>100%</b></div></div>
|
||
<img class="beaver" src="assets/beaver-crop-05.png" alt="" style="left:1342px;top:650px;width:274px;height:270px">
|
||
<div class="bottom-banner" style="left:174px;right:270px;font-size:40px">让 Agent 能力持续进化，而不是一次性试错。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="6">
|
||
<h1 class="title">核心优势一：经验可复用</h1>
|
||
<div class="panel" style="left:108px;top:182px;width:176px;height:44px;text-align:center;padding:8px"><h3 style="font-size:20px;color:#fff;margin:0">个人经验碎片</h3></div>
|
||
<div style="position:absolute;left:44px;top:260px;z-index:4;color:#dff;font-weight:900">
|
||
<div class="panel" style="position:static;width:110px;height:84px;margin-bottom:18px">Prompt<br><small>———</small></div>
|
||
<div class="panel gold" style="position:static;width:118px;height:80px;margin-bottom:18px">备忘笔记</div>
|
||
<div class="panel" style="position:static;width:126px;height:88px;margin-bottom:18px">处理逻辑<br>$ ...</div>
|
||
<div class="panel" style="position:static;width:128px;height:92px">经验总结</div>
|
||
</div>
|
||
<div class="line" style="left:190px;top:494px;width:340px"></div>
|
||
<div class="panel glow" style="left:416px;top:168px;width:198px;height:254px;text-align:center"><span class="icon">清单</span><h3>固化业务 SOP</h3><ul><li>标准流程</li><li>步骤清单</li><li>角色分工</li></ul></div>
|
||
<div class="panel green" style="left:416px;top:522px;width:198px;height:286px;text-align:center"><span class="icon green">✓</span><h3>约束输出质量</h3><ul><li>输出结构化</li><li>质量校验</li><li>质量门禁</li></ul></div>
|
||
<div class="panel glow" style="left:676px;top:204px;width:318px;height:478px;text-align:center"><span class="icon square">DOC</span><img class="beaver" src="assets/beaver-crop-06.png" alt="" style="left:110px;top:-22px;width:208px;height:166px"><h3 style="color:#fff;font-size:32px;margin-top:20px">SKILL TEMPLATE</h3><p>企业任务模板</p><div class="panel" style="position:static;margin-top:20px;text-align:left"><p>名称 —————————<br>目标 —————————<br>适用场景 ———————<br>输入 —————————<br>流程 — □ → ◇ → □<br>输出 —————————<br>验收标准 ———————</p></div></div>
|
||
<div class="panel glow" style="right:424px;top:168px;width:198px;height:254px;text-align:center"><span class="icon">API</span><h3>规范工具调用</h3><ul><li>工具白名单</li><li>参数规范</li><li>调用编排</li></ul></div>
|
||
<div class="panel" style="right:424px;top:522px;width:198px;height:286px;text-align:center"><span class="icon">版本</span><h3>支持版本演进</h3><p><span class="tag">v1.0</span> → <span class="tag">v2.0</span> → <span class="tag green">v3.0</span></p><ul><li>版本管理</li><li>变更追踪</li><li>平滑升级</li></ul></div>
|
||
<div class="line" style="left:1002px;top:496px;width:238px"></div>
|
||
<div class="panel" style="right:70px;top:164px;width:238px;height:64px;text-align:center"><h3 style="font-size:21px;color:#fff;margin:0">组织能力沉淀与复用</h3></div>
|
||
<div class="panel glow" style="right:78px;top:268px;width:200px;height:204px;text-align:center"><span class="icon square">库</span><p>企业级能力库</p><h3 style="font-size:20px;color:#fff">SKILL TEMPLATE</h3></div>
|
||
<div style="position:absolute;right:108px;top:536px;z-index:4;display:grid;grid-template-columns:repeat(2,135px);gap:28px;text-align:center">
|
||
<div><span class="icon">产品</span><p>产品团队</p></div><div><span class="icon green">运营</span><p>运营团队</p></div><div><span class="icon">研发</span><p>研发团队</p></div><div><span class="icon gold">财务</span><p>财务团队</p></div>
|
||
</div>
|
||
<div class="panel" style="right:30px;bottom:132px;width:366px;height:46px;text-align:center;padding:8px"><h3 style="font-size:22px;margin:0">跨部门复用 · 快速复制 · 持续优化</h3></div>
|
||
<div class="bottom-banner" style="left:510px;right:510px;font-size:34px"><span class="diamond">◆</span>把个人经验沉淀为组织能力</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="7">
|
||
<h1 class="title">核心优势三：过程可观测</h1>
|
||
<div class="subtitle cyan">Agent 在做什么，全程可见</div>
|
||
<div class="panel" style="left:14px;top:232px;width:192px;height:76px;opacity:.72"><h3 style="font-size:22px;color:#d7dbe5">黑盒时代</h3><p>过程不透明，结果难追溯</p></div>
|
||
<div class="panel glow" style="left:66px;top:398px;width:220px;height:172px;text-align:center;font-size:76px;color:#b9d7ff">?</div>
|
||
<div class="line" style="left:214px;top:474px;width:92px"></div><div class="line" style="left:214px;top:522px;width:92px"></div>
|
||
<div class="mini-window" style="left:286px;top:144px;width:1068px;height:636px">
|
||
<div class="bar"><b>Beaver</b><span class="dot"></span><span>对话</span><span>Task</span><span>通知</span><span>技能</span><span>文件</span><span>工具</span><span>智能体</span><span>Outlook</span><span>市场</span></div>
|
||
<div style="padding:26px 32px">
|
||
<h3 style="margin:0 0 8px;font-size:22px">我想要AI去网站查一下MGM和...</h3>
|
||
<p style="margin:0 0 18px;color:#c8d7e8">任务执行流程</p>
|
||
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px">
|
||
<div class="panel green" style="position:static;height:110px;padding:12px"><h3 style="font-size:15px;color:#fff">任务已创建</h3><p>已完成</p></div>
|
||
<div class="panel" style="position:static;height:110px;padding:12px"><h3 style="font-size:15px;color:#fff">选择 Skill</h3><p>已完成</p></div>
|
||
<div class="panel green" style="position:static;height:110px;padding:12px"><h3 style="font-size:15px;color:#fff">收集官方来源</h3><p>已完成</p></div>
|
||
<div class="panel gold" style="position:static;height:110px;padding:12px"><h3 style="font-size:15px;color:#fff">提取财务指标</h3><p>进行中</p></div>
|
||
<div class="panel" style="position:static;height:110px;padding:12px"><h3 style="font-size:15px;color:#fff">验证数据</h3><p>等待中</p></div>
|
||
<div class="panel" style="position:static;height:110px;padding:12px"><h3 style="font-size:15px;color:#fff">生成图表报告</h3><p>等待中</p></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1.15fr .85fr;gap:18px">
|
||
<div>
|
||
<h3 style="font-size:16px">Agent Team (DAG)</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px"><div class="panel green" style="position:static;height:64px;padding:10px">planner<br>100%</div><div class="panel green" style="position:static;height:64px;padding:10px">collector<br>100%</div><div class="panel gold" style="position:static;height:64px;padding:10px">extractor<br>60%</div><div class="panel" style="position:static;height:64px;padding:10px">validator<br>0%</div><div class="panel" style="position:static;height:64px;padding:10px">report<br>0%</div></div>
|
||
<h3 style="font-size:16px">工具调用 (Tool Calls)</h3>
|
||
<table class="data-table"><tr><th>Agent</th><th>工具名</th><th>状态</th><th>耗时</th></tr><tr><td>main-agent</td><td>web_search</td><td><span class="tag green">已完成</span></td><td>23.4s</td></tr><tr><td>collector</td><td>read_url</td><td><span class="tag green">已完成</span></td><td>18.7s</td></tr><tr><td>extractor</td><td>extract_metrics</td><td><span class="tag gold">进行中</span></td><td>--</td></tr><tr><td>validator</td><td>validate_metrics</td><td><span class="tag">等待中</span></td><td>--</td></tr></table>
|
||
</div>
|
||
<div><h3 style="font-size:16px">Workspace 文件</h3><table class="data-table"><tr><th>文件名</th><th>类型</th><th>状态</th></tr><tr><td>official_sources.json</td><td>JSON</td><td><span class="tag green">完成</span></td></tr><tr><td>mgm_financials.csv</td><td>CSV</td><td><span class="tag green">完成</span></td></tr><tr><td>chart_report.md</td><td>MD</td><td><span class="tag gold">进行中</span></td></tr><tr><td>chart.png</td><td>PNG</td><td><span class="tag gold">进行中</span></td></tr></table><div class="panel" style="position:static;margin-top:18px;height:142px"><h3 style="font-size:16px;color:#fff">本轮结果（摘要）</h3><p>已完成网页财务信息分段提取，正在生成图表报告。</p></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel purple" style="right:34px;top:164px;width:254px;height:116px"><div class="card-row"><span class="icon purple">人</span><div><h3 style="color:#fff">Skill 选择可见</h3><p>依据充分，透明可控</p></div></div></div>
|
||
<div class="panel" style="right:34px;top:306px;width:254px;height:116px"><div class="card-row"><span class="icon"></></span><div><h3>工具调用可追踪</h3><p>输入输出、耗时可见</p></div></div></div>
|
||
<div class="panel" style="right:34px;top:450px;width:254px;height:116px"><div class="card-row"><span class="icon">文</span><div><h3>中间文件可复查</h3><p>版本可追溯，便于审查</p></div></div></div>
|
||
<div class="panel green" style="right:34px;top:592px;width:254px;height:116px"><div class="card-row"><span class="icon green">盾</span><div><h3>执行状态可解释</h3><p>结果可信，过程可控</p></div></div></div>
|
||
<img class="beaver" src="assets/beaver-crop-07.png" alt="" style="left:1236px;top:640px;width:282px;height:260px">
|
||
<div class="bottom-banner" style="left:226px;right:198px;font-size:44px">把 Agent 黑盒变成透明工作流</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="8">
|
||
<h1 class="title">核心优势二：复杂任务可拆解</h1>
|
||
<div class="subtitle cyan">Agent Team 不是角色聊天，而是任务协作</div>
|
||
<div class="panel glow" style="left:30px;top:198px;width:326px;height:560px"><h3 style="text-align:center">复杂任务拆解流程</h3><div style="display:grid;gap:34px;margin-top:28px"><div class="card-row"><span class="icon">01</span><div><h3 style="color:#fff">用户提出</h3><p>复杂任务需求</p></div></div><div class="card-row"><span class="icon">02</span><div><h3 style="color:#fff">拆解编排</h3><p>生成子任务 DAG</p></div></div><div class="card-row"><span class="icon">03</span><div><h3 style="color:#fff">并行执行</h3><p>多节点协同完成</p></div></div><div class="card-row"><span class="icon">04</span><div><h3 style="color:#fff">汇总验证</h3><p>输出可验证结果</p></div></div></div></div>
|
||
<div class="panel glow" style="left:382px;top:190px;width:872px;height:568px"></div>
|
||
<div class="flow-box" style="left:626px;top:192px;width:314px;height:80px"><span class="icon" style="width:56px;height:56px;margin-right:12px">人</span>用户任务</div>
|
||
<div class="flow-box" style="left:394px;top:338px;width:172px;height:190px;color:#fff">信息收集<small><span class="tag green">完成</span></small></div>
|
||
<div class="flow-box" style="left:602px;top:338px;width:172px;height:190px;color:#fff">数据分析<small><span class="tag">进行中</span></small></div>
|
||
<div class="flow-box purple" style="left:810px;top:338px;width:180px;height:190px;color:#fff;border-color:var(--purple)">检索验证<small><span class="tag gold">待验证</span></small></div>
|
||
<div class="flow-box" style="left:1026px;top:338px;width:178px;height:190px;color:#fff">报告生成<small><span class="tag">进行中</span></small></div>
|
||
<div class="flow-box" style="left:578px;top:582px;width:428px;height:66px">结果汇总 <span class="tag green" style="margin-left:18px">完成</span></div>
|
||
<div class="flow-box" style="left:554px;top:666px;width:494px;height:92px;font-size:40px">最终输出 <span class="tag green" style="margin-left:18px">完成</span></div>
|
||
<div class="line noarrow" style="left:480px;top:306px;width:622px"></div><div class="line noarrow" style="left:482px;top:552px;width:642px"></div>
|
||
<img class="beaver" src="assets/beaver-crop-08.png" alt="" style="left:1016px;top:548px;width:259px;height:272px">
|
||
<div class="panel glow" style="right:30px;top:198px;width:360px;height:560px"><h3 style="text-align:center">核心价值</h3><div style="display:grid;gap:34px;margin-top:34px"><div class="card-row"><span class="icon">1</span><h3 style="color:#fff">按任务动态组队</h3></div><div class="card-row"><span class="icon">2</span><h3 style="color:#fff">子任务 DAG 编排</h3></div><div class="card-row"><span class="icon">3</span><h3 style="color:#fff">并行执行与结果汇总</h3></div><div class="card-row"><span class="icon">4</span><h3 style="color:#fff">关键步骤可验证</h3></div></div></div>
|
||
<div class="bottom-banner" style="left:82px;right:82px;font-size:44px">让复杂任务从“模型硬答”变成“流程执行”</div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="9">
|
||
<h1 class="title large">Beaver 产品定位</h1>
|
||
<div class="subtitle cyan" style="top:146px">面向复杂任务的 Agent Runtime</div>
|
||
<p style="position:absolute;left:460px;right:460px;top:198px;z-index:4;text-align:center;font-size:24px;line-height:1.5;color:#eef7ff">Beaver 将 Skill、Tool、Workspace、Agent Team 和 Eval 统一起来，构建可执行、可追踪、可验证、可复用的企业 Agent 工作空间。</p>
|
||
<div class="panel" style="left:56px;top:234px;width:370px;height:252px;text-align:center"><h3>复杂任务编排</h3><div style="height:145px;border:1px solid rgba(80,180,255,.28);border-radius:10px;background:linear-gradient(135deg,transparent 48%,rgba(55,169,255,.35) 49% 51%,transparent 52%)"></div></div>
|
||
<div class="panel" style="left:56px;top:510px;width:370px;height:260px"><h3>运行时观测</h3><div style="height:74px;border:1px solid rgba(80,180,255,.28);border-radius:10px;margin-bottom:18px;background:linear-gradient(135deg,rgba(20,150,255,.2),transparent)"></div><p>实时日志与追踪</p><p style="color:var(--cyan)">● ● ● ●</p><p style="color:var(--danger)">●</p></div>
|
||
<div class="ring" style="left:482px;top:282px;width:704px;height:464px"></div>
|
||
<img class="beaver" src="assets/beaver-crop-09.png" alt="" style="left:600px;top:318px;width:416px;height:428px">
|
||
<div class="node" style="left:770px;top:288px"><span><span class="mini">脑</span>Skill</span></div>
|
||
<div class="node" style="left:1030px;top:404px"><span><span class="mini">⚙</span>Tool</span></div>
|
||
<div class="node" style="left:1008px;top:604px"><span><span class="mini">队</span>Agent Team</span></div>
|
||
<div class="node" style="left:540px;top:604px"><span><span class="mini">评</span>Eval</span></div>
|
||
<div class="node" style="left:514px;top:404px"><span><span class="mini">夹</span>Workspace</span></div>
|
||
<div class="panel" style="right:56px;top:234px;width:360px;height:252px"><h3 style="text-align:center">知识与资产</h3><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px"><div class="panel" style="position:static;height:76px;text-align:center;padding:12px">文档</div><div class="panel" style="position:static;height:76px;text-align:center;padding:12px">代码</div><div class="panel" style="position:static;height:76px;text-align:center;padding:12px">数据</div><div class="panel" style="position:static;height:76px;text-align:center;padding:12px">API</div><div class="panel" style="position:static;height:76px;text-align:center;padding:12px">模型</div><div class="panel" style="position:static;height:76px;text-align:center;padding:12px">...</div></div></div>
|
||
<div class="panel" style="right:56px;top:512px;width:360px;height:258px"><h3 style="text-align:center">结果验证与评估</h3><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px"><div class="panel" style="position:static;height:94px;text-align:center">柱图</div><div class="panel" style="position:static;height:94px;text-align:center">折线</div><div class="panel" style="position:static;height:94px;text-align:center">环图</div></div><div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px"><span class="tag" style="color:#ff7b67">72%</span><span class="tag gold">48%</span><span class="tag green">85%</span><span class="tag gold">60%</span></div></div>
|
||
<div class="metric-strip" style="left:106px;right:106px;bottom:42px;height:96px"><div class="metric"><b>可执行</b>任务可执行，结果可交付</div><div class="metric"><b>可追踪</b>全链路追踪，过程可观测</div><div class="metric"><b>可验证</b>结果可验证，质量可保障</div><div class="metric"><b>可复用</b>资产可复用，能力可沉淀</div></div>
|
||
</section>
|
||
|
||
<section class="slide" data-page="10">
|
||
<h1 class="title">SkillHub 能力治理</h1>
|
||
<div class="subtitle cyan">把个人 skill 升级为组织级能力市场</div>
|
||
<div class="panel" style="left:72px;top:164px;width:330px;height:144px"><div class="card-row"><span class="icon">脑</span><div><h3>模型自学习经验</h3><p>训练与推理数据<br>自我迭代结果<br>技巧与策略沉淀</p></div></div></div>
|
||
<div class="panel" style="left:72px;top:320px;width:330px;height:144px"><div class="card-row"><span class="icon">史</span><div><h3>历史任务</h3><p>任务流程与步骤<br>成功方案与模板<br>复用率与效果沉淀</p></div></div></div>
|
||
<div class="panel" style="left:72px;top:476px;width:330px;height:144px"><div class="card-row"><span class="icon">反馈</span><div><h3>用户反馈</h3><p>用户评价与打分<br>问题与建议<br>改进方向洞察</p></div></div></div>
|
||
<img class="beaver" src="assets/beaver-crop-10.png" alt="" style="left:0;top:610px;width:250px;height:290px">
|
||
<div class="panel glow" style="left:520px;top:166px;width:630px;height:486px;border-radius:42px;text-align:center"><div class="logo-mark" style="margin:0 auto 8px"></div><h3 style="font-size:52px;color:#fff">SkillHub</h3><h3 style="font-size:30px;color:#fff;margin-top:0">企业能力治理与分发平台</h3><div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:16px 36px"><div class="panel" style="position:static;height:108px"><span class="icon" style="width:58px;height:58px">审</span><h3 style="font-size:22px;color:#fff">审核</h3></div><div class="panel" style="position:static;height:108px"><span class="icon" style="width:58px;height:58px">发</span><h3 style="font-size:22px;color:#fff">发布</h3></div><div class="panel" style="position:static;height:108px"><span class="icon" style="width:58px;height:58px">回</span><h3 style="font-size:22px;color:#fff">回滚</h3></div></div><div class="pedestal" style="position:absolute;left:186px;top:252px;width:260px;height:112px"></div><div class="icon square" style="position:absolute;left:268px;top:274px;width:96px;height:84px">方块</div><div class="panel" style="position:absolute;left:60px;right:60px;bottom:30px;height:118px;text-align:left"><h3 style="color:#fff">版本与治理</h3><p><span class="tag">v1.0 草稿</span> → <span class="tag">v1.1 待审核</span> → <span class="tag">v1.2 已批准</span> → <span class="tag green">v1.3 已发布</span> → <span class="tag">v0.x 已回滚</span></p></div></div>
|
||
<div class="line" style="left:400px;top:256px;width:116px"></div><div class="line" style="left:400px;top:392px;width:116px"></div><div class="line" style="left:400px;top:536px;width:116px"></div>
|
||
<h2 style="position:absolute;right:90px;top:146px;z-index:4;font-size:30px;color:#dff;margin:0">企业能力统一分发与复用</h2>
|
||
<div class="panel" style="right:58px;top:184px;width:374px;height:136px"><div class="card-row"><span class="icon">Group</span><div><h3 style="color:#fff">团队 Group</h3><p>多团队共享能力<br>权限继承与隔离<br>复用与协作提效</p></div></div></div>
|
||
<div class="panel" style="right:58px;top:338px;width:374px;height:136px"><div class="card-row"><span class="icon">Agent</span><div><h3 style="color:#fff">Agent</h3><p>Agent 调用执行<br>能力组合编排<br>智能体生态复用</p></div></div></div>
|
||
<div class="panel" style="right:58px;top:494px;width:374px;height:136px"><div class="card-row"><span class="icon">Work</span><div><h3 style="color:#fff">Workspace</h3><p>项目空间复用<br>流程集成调用<br>沉淀为标准资产</p></div></div></div>
|
||
<div style="position:absolute;left:244px;right:244px;bottom:130px;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:18px">
|
||
<div class="panel" style="position:static;height:126px"><h3><span class="num">01</span>Skill 版本与审核</h3><p>多版本管理与生命周期</p></div>
|
||
<div class="panel" style="position:static;height:126px"><h3><span class="num">02</span>企业能力统一分发</h3><p>标准化上架与目录化管理</p></div>
|
||
<div class="panel" style="position:static;height:126px"><h3><span class="num">03</span>Group 级权限控制</h3><p>细粒度权限与继承</p></div>
|
||
<div class="panel" style="position:static;height:126px"><h3><span class="num">04</span>Beaver 运行时联动</h3><p>运行时动态获取最新能力</p></div>
|
||
</div>
|
||
<div class="bottom-banner" style="left:184px;right:120px;font-size:38px"><span class="diamond">✓</span>让企业经验可以被<span class="accent">审核、分发、复用和持续优化</span>。</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
<div class="edit-note" aria-live="polite">
|
||
<button id="editToggle" type="button">编辑模式</button>
|
||
<span>按 E 切换；编辑模式下 F12 可直接改 DOM 文本</span>
|
||
</div>
|
||
<div class="screen-note">鼠标滚轮 / ↑ ↓ / PageUp PageDown 翻页</div>
|
||
<div id="pageIndicator" class="page-indicator">1 / 10</div>
|
||
|
||
<script>
|
||
const stage = document.getElementById('stage');
|
||
const slides = Array.from(document.querySelectorAll('.slide'));
|
||
const indicator = document.getElementById('pageIndicator');
|
||
const captureMode = new URLSearchParams(location.search).get('capture') === '1';
|
||
const params = new URLSearchParams(location.search);
|
||
const exactAssets = [
|
||
{p:1, src:'assets/exact/p01-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:1, src:'assets/exact/p01-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:1, src:'assets/exact/p01-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:1, src:'assets/exact/p01-logo.png', x:22, y:40, w:180, h:78},
|
||
{p:1, src:'assets/exact/p01-title.png', x:475, y:45, w:710, h:132},
|
||
{p:1, src:'assets/exact/p01-top_icons.png', x:1410, y:46, w:242, h:50},
|
||
{p:1, src:'assets/exact/p01-left_01.png', x:24, y:136, w:325, h:150},
|
||
{p:1, src:'assets/exact/p01-left_02.png', x:24, y:302, w:325, h:151},
|
||
{p:1, src:'assets/exact/p01-left_03.png', x:24, y:470, w:325, h:150},
|
||
{p:1, src:'assets/exact/p01-left_04.png', x:24, y:636, w:325, h:148},
|
||
{p:1, src:'assets/exact/p01-center_runtime.png', x:376, y:198, w:840, h:484},
|
||
{p:1, src:'assets/exact/p01-left_web.png', x:376, y:199, w:304, h:135},
|
||
{p:1, src:'assets/exact/p01-left_wechat.png', x:376, y:372, w:290, h:130},
|
||
{p:1, src:'assets/exact/p01-left_mobile.png', x:376, y:539, w:270, h:134},
|
||
{p:1, src:'assets/exact/p01-right_feishu.png', x:1188, y:198, w:372, h:138},
|
||
{p:1, src:'assets/exact/p01-right_m5.png', x:1188, y:372, w:372, h:130},
|
||
{p:1, src:'assets/exact/p01-right_glass.png', x:1188, y:538, w:372, h:136},
|
||
{p:1, src:'assets/exact/p01-mid_pill.png', x:640, y:620, w:470, h:62},
|
||
{p:1, src:'assets/exact/p01-slogan.png', x:352, y:728, w:1240, h:82},
|
||
{p:1, src:'assets/exact/p01-footer.png', x:13, y:813, w:1646, h:110},
|
||
{p:1, src:'assets/exact/p01-frame_r.png', x:1588, y:158, w:64, h:545},
|
||
{p:1, src:'assets/exact/p01-frame_l.png', x:15, y:19, w:250, h:112},
|
||
{p:2, src:'assets/exact/p02-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:2, src:'assets/exact/p02-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:2, src:'assets/exact/p02-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:2, src:'assets/exact/p02-logo.png', x:20, y:24, w:182, h:58},
|
||
{p:2, src:'assets/exact/p02-title.png', x:523, y:23, w:626, h:128},
|
||
{p:2, src:'assets/exact/p02-left_stack.png', x:22, y:124, w:416, h:598},
|
||
{p:2, src:'assets/exact/p02-center_repo.png', x:512, y:168, w:628, h:410},
|
||
{p:2, src:'assets/exact/p02-agent_panel.png', x:1182, y:142, w:306, h:352},
|
||
{p:2, src:'assets/exact/p02-security.png', x:1504, y:298, w:142, h:276},
|
||
{p:2, src:'assets/exact/p02-history.png', x:468, y:584, w:1040, h:226},
|
||
{p:2, src:'assets/exact/p02-slogan.png', x:448, y:827, w:1200, h:96},
|
||
{p:2, src:'assets/exact/p02-beaver.png', x:0, y:678, w:256, h:260},
|
||
{p:3, src:'assets/exact/p03-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:3, src:'assets/exact/p03-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:3, src:'assets/exact/p03-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:3, src:'assets/exact/p03-title.png', x:523, y:28, w:626, h:120},
|
||
{p:3, src:'assets/exact/p03-left_top.png', x:34, y:143, w:333, h:142},
|
||
{p:3, src:'assets/exact/p03-left_middle.png', x:130, y:308, w:232, h:340},
|
||
{p:3, src:'assets/exact/p03-left_bottom.png', x:34, y:675, w:333, h:138},
|
||
{p:3, src:'assets/exact/p03-control.png', x:461, y:237, w:172, h:506},
|
||
{p:3, src:'assets/exact/p03-runtime.png', x:645, y:179, w:410, h:430},
|
||
{p:3, src:'assets/exact/p03-systems.png', x:1096, y:272, w:260, h:402},
|
||
{p:3, src:'assets/exact/p03-right_top.png', x:1298, y:144, w:335, h:142},
|
||
{p:3, src:'assets/exact/p03-right_bottom.png', x:1296, y:674, w:338, h:138},
|
||
{p:3, src:'assets/exact/p03-credential.png', x:680, y:650, w:366, h:148},
|
||
{p:3, src:'assets/exact/p03-slogan.png', x:244, y:824, w:1185, h:74},
|
||
{p:4, src:'assets/exact/p04-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:4, src:'assets/exact/p04-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:4, src:'assets/exact/p04-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:4, src:'assets/exact/p04-title.png', x:535, y:32, w:600, h:118},
|
||
{p:4, src:'assets/exact/p04-left_top.png', x:34, y:185, w:272, h:164},
|
||
{p:4, src:'assets/exact/p04-left_profile.png', x:267, y:300, w:254, h:368},
|
||
{p:4, src:'assets/exact/p04-right_org.png', x:1152, y:320, w:254, h:354},
|
||
{p:4, src:'assets/exact/p04-right_top.png', x:1364, y:190, w:274, h:132},
|
||
{p:4, src:'assets/exact/p04-right_bottom.png', x:1385, y:604, w:254, h:134},
|
||
{p:4, src:'assets/exact/p04-center_memory.png', x:545, y:160, w:585, h:570},
|
||
{p:4, src:'assets/exact/p04-slogan.png', x:244, y:796, w:1190, h:91},
|
||
{p:5, src:'assets/exact/p05-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:5, src:'assets/exact/p05-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:5, src:'assets/exact/p05-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:5, src:'assets/exact/p05-title.png', x:392, y:24, w:890, h:118},
|
||
{p:5, src:'assets/exact/p05-left_eval.png', x:28, y:148, w:432, h:650},
|
||
{p:5, src:'assets/exact/p05-loop.png', x:488, y:158, w:730, h:522},
|
||
{p:5, src:'assets/exact/p05-versions.png', x:1214, y:148, w:432, h:542},
|
||
{p:5, src:'assets/exact/p05-metrics.png', x:474, y:696, w:890, h:100},
|
||
{p:5, src:'assets/exact/p05-slogan.png', x:176, y:826, w:1228, h:88},
|
||
{p:5, src:'assets/exact/p05-beaver.png', x:1342, y:650, w:274, h:270},
|
||
{p:6, src:'assets/exact/p06-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:6, src:'assets/exact/p06-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:6, src:'assets/exact/p06-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:6, src:'assets/exact/p06-title.png', x:522, y:28, w:632, h:82},
|
||
{p:6, src:'assets/exact/p06-left_fragments.png', x:43, y:181, w:493, h:561},
|
||
{p:6, src:'assets/exact/p06-skill_template.png', x:414, y:132, w:824, h:676},
|
||
{p:6, src:'assets/exact/p06-org_reuse.png', x:1275, y:165, w:370, h:644},
|
||
{p:6, src:'assets/exact/p06-slogan.png', x:512, y:832, w:650, h:74},
|
||
{p:7, src:'assets/exact/p07-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:7, src:'assets/exact/p07-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:7, src:'assets/exact/p07-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:7, src:'assets/exact/p07-title.png', x:378, y:23, w:870, h:116},
|
||
{p:7, src:'assets/exact/p07-blackbox.png', x:0, y:232, w:310, h:455},
|
||
{p:7, src:'assets/exact/p07-app_window.png', x:286, y:144, w:1068, h:636},
|
||
{p:7, src:'assets/exact/p07-right_stack.png', x:1384, y:162, w:286, h:548},
|
||
{p:7, src:'assets/exact/p07-slogan.png', x:226, y:806, w:1256, h:86},
|
||
{p:7, src:'assets/exact/p07-beaver.png', x:1236, y:640, w:282, h:260},
|
||
{p:8, src:'assets/exact/p08-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:8, src:'assets/exact/p08-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:8, src:'assets/exact/p08-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:8, src:'assets/exact/p08-title.png', x:330, y:30, w:1010, h:122},
|
||
{p:8, src:'assets/exact/p08-left_flow.png', x:30, y:196, w:328, h:562},
|
||
{p:8, src:'assets/exact/p08-main_flow.png', x:382, y:190, w:872, h:568},
|
||
{p:8, src:'assets/exact/p08-right_value.png', x:1285, y:190, w:360, h:580},
|
||
{p:8, src:'assets/exact/p08-slogan.png', x:84, y:808, w:1500, h:92},
|
||
{p:8, src:'assets/exact/p08-beaver.png', x:1016, y:548, w:259, h:272},
|
||
{p:9, src:'assets/exact/p09-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:9, src:'assets/exact/p09-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:9, src:'assets/exact/p09-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:9, src:'assets/exact/p09-title.png', x:426, y:34, w:818, h:142},
|
||
{p:9, src:'assets/exact/p09-subtitle.png', x:540, y:146, w:590, h:48},
|
||
{p:9, src:'assets/exact/p09-desc.png', x:456, y:204, w:760, h:64},
|
||
{p:9, src:'assets/exact/p09-left_panels.png', x:55, y:235, w:372, h:536},
|
||
{p:9, src:'assets/exact/p09-center_runtime.png', x:482, y:282, w:704, h:464},
|
||
{p:9, src:'assets/exact/p09-right_panels.png', x:1254, y:235, w:362, h:538},
|
||
{p:9, src:'assets/exact/p09-footer.png', x:104, y:802, w:1464, h:98},
|
||
{p:10, src:'assets/exact/p10-bg-top.png', x:0, y:0, w:1672, h:150},
|
||
{p:10, src:'assets/exact/p10-bg-main.png', x:0, y:150, w:1672, h:650},
|
||
{p:10, src:'assets/exact/p10-bg-bottom.png', x:0, y:800, w:1672, h:141},
|
||
{p:10, src:'assets/exact/p10-title.png', x:506, y:25, w:660, h:122},
|
||
{p:10, src:'assets/exact/p10-left_stack.png', x:72, y:164, w:330, h:456},
|
||
{p:10, src:'assets/exact/p10-hub.png', x:516, y:164, w:636, h:490},
|
||
{p:10, src:'assets/exact/p10-right_stack.png', x:1238, y:145, w:376, h:486},
|
||
{p:10, src:'assets/exact/p10-bottom_cards.png', x:244, y:668, w:1244, h:142},
|
||
{p:10, src:'assets/exact/p10-slogan.png', x:184, y:834, w:1368, h:88},
|
||
{p:10, src:'assets/exact/p10-beaver.png', x:0, y:610, w:250, h:290},
|
||
];
|
||
const editableText = [
|
||
{p:1, cls:'edit-title', x:475, y:50, w:710, h:88, text:'多 Channel 随身连接'},
|
||
{p:1, cls:'edit-subtitle', x:610, y:142, w:470, h:38, text:'让 Beaver 进入用户真实工作入口'},
|
||
{p:1, cls:'edit-panel-title', x:70, y:126, w:230, h:70, text:'01 微信 / 飞书接入'},
|
||
{p:1, cls:'edit-panel-title', x:70, y:292, w:230, h:70, text:'02 小终端实时对话'},
|
||
{p:1, cls:'edit-panel-title', x:70, y:460, w:230, h:70, text:'03 A2UI 设备扩展'},
|
||
{p:1, cls:'edit-panel-title', x:70, y:626, w:230, h:70, text:'04 多端任务同步'},
|
||
{p:1, cls:'edit-banner', x:352, y:734, w:1240, h:68, text:'让 Beaver 不只停留在网页，而是连接沟通工具、随身终端和智能设备。'},
|
||
{p:2, cls:'edit-title', x:523, y:28, w:626, h:86, text:'可追溯文件系统'},
|
||
{p:2, cls:'edit-subtitle', x:565, y:120, w:540, h:42, text:'让 Agent 产物成为可管理的企业资产'},
|
||
{p:2, cls:'edit-panel-title', x:72, y:136, w:250, h:58, text:'1 MiniO 私有化存储'},
|
||
{p:2, cls:'edit-panel-title', x:72, y:296, w:270, h:58, text:'2 用户文件权限隔离'},
|
||
{p:2, cls:'edit-panel-title', x:72, y:448, w:270, h:58, text:'3 文件修改可追溯'},
|
||
{p:2, cls:'edit-panel-title', x:72, y:600, w:300, h:58, text:'4 支持版本回滚扩展'},
|
||
{p:2, cls:'edit-banner', x:448, y:842, w:1200, h:64, text:'让 Agent 生成、读取和修改的文件都可追踪、可恢复、可治理。'},
|
||
{p:3, cls:'edit-title', x:523, y:34, w:626, h:78, text:'可信协议与工具接入'},
|
||
{p:3, cls:'edit-subtitle', x:548, y:118, w:580, h:42, text:'不只是调用工具，而是安全、可控地调用工具'},
|
||
{p:3, cls:'edit-panel-title', x:100, y:174, w:230, h:52, text:'1 MCP 工具统一接入'},
|
||
{p:3, cls:'edit-panel-title', x:100, y:706, w:240, h:52, text:'2 A2A 协议扩展支持'},
|
||
{p:3, cls:'edit-panel-title', x:1370, y:174, w:230, h:52, text:'3 工具调用权限审核'},
|
||
{p:3, cls:'edit-panel-title', x:1370, y:706, w:230, h:52, text:'4 账号密码外置托管'},
|
||
{p:3, cls:'edit-banner', x:244, y:830, w:1185, h:58, text:'让 Agent 接入企业系统时可鉴权、可审计、可控权。'},
|
||
{p:4, cls:'edit-title', x:535, y:36, w:600, h:78, text:'长期记忆与用户画像'},
|
||
{p:4, cls:'edit-subtitle', x:560, y:122, w:560, h:40, text:'让 Agent 持续理解用户、任务和业务背景'},
|
||
{p:4, cls:'edit-panel-title', x:122, y:220, w:180, h:54, text:'多模态记忆接入'},
|
||
{p:4, cls:'edit-panel-title', x:76, y:642, w:210, h:54, text:'历史任务经验复用'},
|
||
{p:4, cls:'edit-panel-title', x:1428, y:220, w:190, h:54, text:'用户画像持续沉淀'},
|
||
{p:4, cls:'edit-panel-title', x:1430, y:642, w:190, h:54, text:'随身设备记忆同步'},
|
||
{p:4, cls:'edit-banner', x:244, y:804, w:1190, h:68, text:'让 Agent 从“临时助手”变成“理解用户的长期工作伙伴”。'},
|
||
{p:5, cls:'edit-title', x:392, y:28, w:890, h:78, text:'核心优势四：结果可验证'},
|
||
{p:5, cls:'edit-subtitle', x:560, y:112, w:560, h:42, text:'不靠感觉调 Prompt，而靠回放评估优化'},
|
||
{p:5, cls:'edit-panel-title', x:166, y:164, w:170, h:42, text:'评估与验证'},
|
||
{p:5, cls:'edit-panel-title', x:768, y:164, w:200, h:42, text:'评估优化闭环'},
|
||
{p:5, cls:'edit-panel-title', x:1372, y:164, w:170, h:42, text:'版本记录'},
|
||
{p:5, cls:'edit-banner', x:176, y:842, w:1228, h:56, text:'让 Agent 能力持续进化，而不是一次性试错。'},
|
||
{p:6, cls:'edit-title', x:522, y:30, w:632, h:72, text:'核心优势一：经验可复用'},
|
||
{p:6, cls:'edit-panel-title', x:130, y:188, w:150, h:38, text:'个人经验碎片'},
|
||
{p:6, cls:'edit-panel-title', x:720, y:370, w:260, h:82, text:'SKILL TEMPLATE\n企业任务模板'},
|
||
{p:6, cls:'edit-panel-title', x:1388, y:176, w:210, h:42, text:'组织能力沉淀与复用'},
|
||
{p:6, cls:'edit-banner', x:512, y:842, w:650, h:48, text:'把个人经验沉淀为组织能力'},
|
||
{p:7, cls:'edit-title', x:378, y:28, w:870, h:76, text:'核心优势三：过程可观测'},
|
||
{p:7, cls:'edit-subtitle', x:615, y:112, w:440, h:42, text:'Agent 在做什么，全程可见'},
|
||
{p:7, cls:'edit-panel-title', x:66, y:250, w:140, h:48, text:'黑盒时代'},
|
||
{p:7, cls:'edit-panel-title', x:1478, y:184, w:180, h:54, text:'Skill 选择可见'},
|
||
{p:7, cls:'edit-panel-title', x:1478, y:328, w:180, h:54, text:'工具调用可追踪'},
|
||
{p:7, cls:'edit-panel-title', x:1478, y:472, w:180, h:54, text:'中间文件可复查'},
|
||
{p:7, cls:'edit-panel-title', x:1478, y:616, w:180, h:54, text:'执行状态可解释'},
|
||
{p:7, cls:'edit-banner', x:226, y:820, w:1256, h:58, text:'把 Agent 黑盒变成透明工作流'},
|
||
{p:8, cls:'edit-title', x:330, y:34, w:1010, h:76, text:'核心优势二：复杂任务可拆解'},
|
||
{p:8, cls:'edit-subtitle', x:510, y:120, w:650, h:42, text:'Agent Team 不是角色聊天，而是任务协作'},
|
||
{p:8, cls:'edit-panel-title', x:84, y:222, w:220, h:52, text:'复杂任务拆解流程'},
|
||
{p:8, cls:'edit-panel-title', x:740, y:218, w:180, h:54, text:'用户任务'},
|
||
{p:8, cls:'edit-panel-title', x:1410, y:222, w:160, h:52, text:'核心价值'},
|
||
{p:8, cls:'edit-banner', x:84, y:826, w:1500, h:56, text:'让复杂任务从“模型硬答”变成“流程执行”'},
|
||
{p:9, cls:'edit-title', x:426, y:42, w:818, h:86, text:'Beaver 产品定位'},
|
||
{p:9, cls:'edit-subtitle', x:540, y:146, w:590, h:42, text:'面向复杂任务的 Agent Runtime'},
|
||
{p:9, cls:'edit-panel-title', x:180, y:252, w:160, h:42, text:'复杂任务编排'},
|
||
{p:9, cls:'edit-panel-title', x:180, y:528, w:160, h:42, text:'运行时观测'},
|
||
{p:9, cls:'edit-panel-title', x:1380, y:252, w:160, h:42, text:'知识与资产'},
|
||
{p:9, cls:'edit-panel-title', x:1360, y:530, w:210, h:42, text:'结果验证与评估'},
|
||
{p:10, cls:'edit-title', x:506, y:34, w:660, h:76, text:'SkillHub 能力治理'},
|
||
{p:10, cls:'edit-subtitle', x:590, y:118, w:500, h:42, text:'把个人 skill 升级为组织级能力市场'},
|
||
{p:10, cls:'edit-panel-title', x:220, y:184, w:180, h:54, text:'模型自学习经验'},
|
||
{p:10, cls:'edit-panel-title', x:220, y:340, w:160, h:54, text:'历史任务'},
|
||
{p:10, cls:'edit-panel-title', x:220, y:496, w:160, h:54, text:'用户反馈'},
|
||
{p:10, cls:'edit-panel-title', x:762, y:196, w:240, h:80, text:'SkillHub\n企业能力治理与分发平台'},
|
||
{p:10, cls:'edit-panel-title', x:1328, y:150, w:250, h:42, text:'企业能力统一分发与复用'},
|
||
{p:10, cls:'edit-banner', x:184, y:848, w:1368, h:56, text:'让企业经验可以被审核、分发、复用和持续优化。'},
|
||
];
|
||
let current = 0;
|
||
let wheelLock = false;
|
||
let editMode = !captureMode && params.get('pixel') !== '1';
|
||
|
||
function mountExactAssets() {
|
||
slides.forEach((slide, index) => {
|
||
slide.classList.add('exact-mode');
|
||
const layer = document.createElement('div');
|
||
layer.className = 'asset-layer';
|
||
exactAssets.filter(item => item.p === index + 1).forEach(item => {
|
||
const img = document.createElement('img');
|
||
img.src = item.src;
|
||
img.alt = '';
|
||
img.style.left = `${item.x}px`;
|
||
img.style.top = `${item.y}px`;
|
||
img.style.width = `${item.w}px`;
|
||
img.style.height = `${item.h}px`;
|
||
layer.appendChild(img);
|
||
});
|
||
slide.appendChild(layer);
|
||
|
||
const editableLayer = document.createElement('div');
|
||
editableLayer.className = 'editable-layer';
|
||
editableText.filter(item => item.p === index + 1).forEach(item => {
|
||
const box = document.createElement('div');
|
||
box.className = `edit-box ${item.cls || ''}`;
|
||
box.contentEditable = 'true';
|
||
box.spellcheck = false;
|
||
box.innerText = item.text;
|
||
box.style.left = `${item.x}px`;
|
||
box.style.top = `${item.y}px`;
|
||
box.style.width = `${item.w}px`;
|
||
box.style.height = `${item.h}px`;
|
||
editableLayer.appendChild(box);
|
||
});
|
||
slide.appendChild(editableLayer);
|
||
});
|
||
}
|
||
|
||
function setEditMode(enabled) {
|
||
editMode = !captureMode && enabled;
|
||
document.body.classList.toggle('editable-mode', editMode);
|
||
const btn = document.getElementById('editToggle');
|
||
if (btn) btn.textContent = editMode ? '像素模式' : '编辑模式';
|
||
}
|
||
|
||
function fitStage() {
|
||
if (captureMode) return;
|
||
const pad = 28;
|
||
const scale = Math.min((window.innerWidth - pad * 2) / 1672, (window.innerHeight - pad * 2) / 941, 1);
|
||
stage.style.transform = `scale(${Math.max(scale, 0.1)})`;
|
||
}
|
||
|
||
function show(index, updateHash = true) {
|
||
current = Math.max(0, Math.min(slides.length - 1, index));
|
||
slides.forEach((slide, i) => slide.classList.toggle('is-active', i === current));
|
||
indicator.textContent = `${current + 1} / ${slides.length}`;
|
||
if (updateHash) history.replaceState(null, '', `#/page-${current + 1}`);
|
||
}
|
||
|
||
function fromHash() {
|
||
const match = location.hash.match(/page-(\d+)/);
|
||
if (match) show(Number(match[1]) - 1, false);
|
||
}
|
||
|
||
window.addEventListener('resize', fitStage);
|
||
window.addEventListener('hashchange', fromHash);
|
||
window.addEventListener('wheel', event => {
|
||
event.preventDefault();
|
||
if (wheelLock || Math.abs(event.deltaY) < 12) return;
|
||
wheelLock = true;
|
||
show(current + (event.deltaY > 0 ? 1 : -1));
|
||
setTimeout(() => { wheelLock = false; }, 420);
|
||
}, { passive: false });
|
||
|
||
window.addEventListener('keydown', event => {
|
||
const nextKeys = ['ArrowDown', 'PageDown', ' ', 'Enter'];
|
||
const prevKeys = ['ArrowUp', 'PageUp'];
|
||
if (nextKeys.includes(event.key)) { event.preventDefault(); show(current + 1); }
|
||
if (prevKeys.includes(event.key)) { event.preventDefault(); show(current - 1); }
|
||
if (event.key === 'Home') { event.preventDefault(); show(0); }
|
||
if (event.key === 'End') { event.preventDefault(); show(slides.length - 1); }
|
||
if (event.key.toLowerCase() === 'e') { event.preventDefault(); setEditMode(!editMode); }
|
||
});
|
||
|
||
mountExactAssets();
|
||
if (captureMode) document.body.classList.add('capture');
|
||
document.getElementById('editToggle')?.addEventListener('click', () => setEditMode(!editMode));
|
||
setEditMode(editMode);
|
||
fitStage();
|
||
fromHash();
|
||
</script>
|
||
</body>
|
||
</html>
|