Beaver/beaver_project
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

```

Browse Source 
feat(engine): 优化智能体循环中的助手消息处理逻辑

- 在没有工具调用时才添加助手消息到上下文
- 确保工具调用响应正确添加到消息上下文中
- 修复了消息构建的条件逻辑

fix(cron): 改进定时任务调度的时间解析功能

- 添加正则表达式导入用于时间显示解析
- 实现从显示文本中提取毫秒间隔的功能
- 增强整数转换的安全性，避免类型错误
- 优化定时任务配置的解析逻辑

feat(outlook): 增强Outlook集成的功能和稳定性

- 将默认超时时间从10秒增加到180秒
- 为状态检查函数添加可选的验证参数
- 串行执行邮件概览获取操作而非并行
- 改进连接状态验证逻辑

feat(channel): 添加设备名称作为会话标识的选项

- 为终端WebSocket适配器添加新的配置选项
- 实现基于设备名称生成会话对等ID的功能
- 记录原始对等ID和设备名称的元数据
- 支持从设备名称创建会话对等ID

feat(skills): 完善技能学习评估系统和进度跟踪

- 在应用启动时自动调度待评估的技能草稿
- 为技能评估工作创建独立的循环工厂
- 实现异步技能评估任务的取消和清理机制
- 添加技能评估进度报告和状态跟踪功能
- 扩展会话列表API以包含更多详细信息
- 防止对不存在的会话进行操作
- 优化技能草稿提交和评估的业务逻辑

perf(skills): 提升技能评估的并发性能

- 实现并行技能案例评估以提高效率
- 添加最大并行案例数的环境变量控制
- 实现实时评估进度更新和回调机制
- 优化评估过程中的资源管理和同步

refactor(services): 创建隔离的智能体循环实例

- 添加创建独立智能体循环的工厂方法
- 确保新循环继承运行时服务配置
- 支持技能评估等需要隔离环境的场景
```
This commit is contained in:
steven_li
2026-06-15 14:48:16 +08:00
parent 8aeb97a5fc
commit 4b0bf65ace
53 changed files with 4328 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
docs/presentations/beaver-project/assets/animations/animations.css Normal file
View File

@ -0,0 +1,138 @@
/* html-ppt :: animations.css
* Apply by adding class="anim-<name>" or data-anim="<name>".
* Durations are deliberately snappy; tweak --anim-dur per element.
*/
:root{--anim-dur:.7s;--anim-ease:cubic-bezier(.4,0,.2,1)}
/* ---------- FADE DIRECTIONALS ---------- */
@keyframes kf-fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes kf-fade-down{from{opacity:0;transform:translateY(-32px)}to{opacity:1;transform:none}}
@keyframes kf-fade-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes kf-fade-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.anim-fade-up{animation:kf-fade-up var(--anim-dur) var(--anim-ease) both}
.anim-fade-down{animation:kf-fade-down var(--anim-dur) var(--anim-ease) both}
.anim-fade-left{animation:kf-fade-left var(--anim-dur) var(--anim-ease) both}
.anim-fade-right{animation:kf-fade-right var(--anim-dur) var(--anim-ease) both}
/* ---------- RISE / DROP / ZOOM / BLUR / GLITCH ---------- */
@keyframes kf-rise{from{opacity:0;transform:translateY(60px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes kf-drop{from{opacity:0;transform:translateY(-60px) scale(.97)}to{opacity:1;transform:none}}
@keyframes kf-zoom{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes kf-blur{from{opacity:0;filter:blur(18px)}to{opacity:1;filter:none}}
@keyframes kf-glitch{0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0)}
20%{opacity:1;transform:translateX(-6px);clip-path:inset(20% 0 30% 0)}
40%{transform:translateX(4px);clip-path:inset(50% 0 10% 0)}
60%{transform:translateX(-3px);clip-path:inset(10% 0 60% 0)}
80%{transform:translateX(2px);clip-path:inset(0 0 0 0)}
100%{opacity:1;transform:none}}
.anim-rise-in{animation:kf-rise .9s var(--anim-ease) both}
.anim-drop-in{animation:kf-drop .8s var(--anim-ease) both}
.anim-zoom-pop{animation:kf-zoom .7s cubic-bezier(.22,1.3,.36,1) both}
.anim-blur-in{animation:kf-blur .8s var(--anim-ease) both}
.anim-glitch-in{animation:kf-glitch .8s steps(5,end) both}
/* ---------- TYPEWRITER ---------- */
.anim-typewriter{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid currentColor;
width:0;animation:kf-type 2.4s steps(40,end) forwards, kf-caret 1s step-end infinite}
@keyframes kf-type{to{width:100%}}
@keyframes kf-caret{50%{border-color:transparent}}
/* ---------- GLOW / SHIMMER / GRADIENT-FLOW ---------- */
@keyframes kf-neon{0%,100%{text-shadow:0 0 8px var(--accent),0 0 20px var(--accent)}
50%{text-shadow:0 0 16px var(--accent),0 0 40px var(--accent),0 0 80px var(--accent)}}
.anim-neon-glow{animation:kf-neon 2s ease-in-out infinite}
.anim-shimmer-sweep{position:relative;overflow:hidden}
.anim-shimmer-sweep::after{content:"";position:absolute;inset:0;
background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
transform:translateX(-100%);animation:kf-shimmer 2.4s var(--anim-ease) infinite}
@keyframes kf-shimmer{to{transform:translateX(100%)}}
.anim-gradient-flow{background:linear-gradient(90deg,var(--accent),var(--accent-2,var(--accent)),var(--accent-3,var(--accent)),var(--accent));
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
animation:kf-gradflow 4s linear infinite}
@keyframes kf-gradflow{to{background-position:300% 0}}
/* ---------- STAGGER LIST ---------- */
.anim-stagger-list > *{opacity:0;animation:kf-rise .65s var(--anim-ease) both}
.anim-stagger-list > *:nth-child(1){animation-delay:.05s}
.anim-stagger-list > *:nth-child(2){animation-delay:.15s}
.anim-stagger-list > *:nth-child(3){animation-delay:.25s}
.anim-stagger-list > *:nth-child(4){animation-delay:.35s}
.anim-stagger-list > *:nth-child(5){animation-delay:.45s}
.anim-stagger-list > *:nth-child(6){animation-delay:.55s}
.anim-stagger-list > *:nth-child(7){animation-delay:.65s}
.anim-stagger-list > *:nth-child(8){animation-delay:.75s}
.anim-stagger-list > *:nth-child(n+9){animation-delay:.85s}
/* ---------- COUNTER-UP (JS-driven, marker class only) ---------- */
.counter{font-variant-numeric:tabular-nums}
/* ---------- SVG PATH DRAW ---------- */
.anim-path-draw path,.anim-path-draw line,.anim-path-draw polyline,.anim-path-draw circle,.anim-path-draw rect{
stroke-dasharray:1000;stroke-dashoffset:1000;animation:kf-draw 2s var(--anim-ease) forwards}
@keyframes kf-draw{to{stroke-dashoffset:0}}
/* ---------- PARALLAX TILT (hover) ---------- */
.anim-parallax-tilt{transform-style:preserve-3d;transition:transform .4s var(--anim-ease)}
.anim-parallax-tilt:hover{transform:perspective(900px) rotateX(6deg) rotateY(-8deg) translateZ(10px)}
/* ---------- CARD FLIP 3D ---------- */
@keyframes kf-flip{from{transform:perspective(1200px) rotateY(-90deg);opacity:0}
to{transform:perspective(1200px) rotateY(0);opacity:1}}
.anim-card-flip-3d{animation:kf-flip .9s var(--anim-ease) both;transform-style:preserve-3d;backface-visibility:hidden}
/* ---------- CUBE ROTATE 3D ---------- */
@keyframes kf-cube{from{transform:perspective(1200px) rotateX(20deg) rotateY(-90deg) translateZ(-200px);opacity:0}
to{transform:perspective(1200px) rotateX(0) rotateY(0) translateZ(0);opacity:1}}
.anim-cube-rotate-3d{animation:kf-cube 1s var(--anim-ease) both}
/* ---------- PAGE TURN 3D ---------- */
@keyframes kf-pageturn{from{transform:perspective(1600px) rotateY(-85deg);transform-origin:left center;opacity:0}
to{transform:perspective(1600px) rotateY(0);opacity:1}}
.anim-page-turn-3d{animation:kf-pageturn 1s var(--anim-ease) both;transform-origin:left center}
/* ---------- PERSPECTIVE ZOOM ---------- */
@keyframes kf-pzoom{from{opacity:0;transform:perspective(1400px) translateZ(-400px) rotateX(12deg)}
to{opacity:1;transform:none}}
.anim-perspective-zoom{animation:kf-pzoom 1s var(--anim-ease) both}
/* ---------- MARQUEE SCROLL ---------- */
.anim-marquee-scroll{display:flex;gap:48px;white-space:nowrap;animation:kf-marquee 20s linear infinite}
@keyframes kf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- KEN BURNS ---------- */
@keyframes kf-kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.15) translate(-2%,-1%)}}
.anim-kenburns{animation:kf-kenburns 14s ease-in-out infinite alternate}
/* ---------- CONFETTI BURST (pseudo — pure CSS sparkles) ---------- */
.anim-confetti-burst{position:relative}
.anim-confetti-burst::before,.anim-confetti-burst::after{
content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
background:var(--accent);box-shadow:
20px -30px 0 var(--accent-2,var(--accent)),-25px -20px 0 var(--accent-3,var(--accent)),
30px 20px 0 var(--good,#1aaf6c),-30px 25px 0 var(--warn,#f5a524),
40px -10px 0 var(--bad,#e0445a),-45px 0 0 var(--accent),
10px 40px 0 var(--accent-2,var(--accent)),-15px -40px 0 var(--accent-3,var(--accent));
opacity:0;animation:kf-confetti 1.2s var(--anim-ease) forwards}
.anim-confetti-burst::after{animation-delay:.15s;transform:rotate(45deg)}
@keyframes kf-confetti{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
/* ---------- SPOTLIGHT ---------- */
@keyframes kf-spot{0%{clip-path:circle(0% at 50% 50%)}100%{clip-path:circle(140% at 50% 50%)}}
.anim-spotlight{animation:kf-spot 1.1s var(--anim-ease) both}
/* ---------- MORPH SHAPE (SVG) ---------- */
.anim-morph-shape path{animation:kf-morph 6s ease-in-out infinite alternate}
@keyframes kf-morph{0%{d:path("M60,120 Q120,20 180,120 T300,120")}
100%{d:path("M60,120 Q120,220 180,120 T300,120")}}
/* ---------- RIPPLE REVEAL ---------- */
@keyframes kf-ripple{0%{clip-path:circle(0% at 20% 80%);opacity:.4}
100%{clip-path:circle(160% at 20% 80%);opacity:1}}
.anim-ripple-reveal{animation:kf-ripple 1.2s var(--anim-ease) both}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
[class*="anim-"]{animation:none!important;transition:none!important}
}

150
docs/presentations/beaver-project/assets/base.css Normal file
View File

@ -0,0 +1,150 @@
/* html-ppt :: base.css — reset + shared tokens + layout primitives */
/* Default tokens. Themes in assets/themes/*.css override the :root block. */
:root {
--bg: #ffffff;
--bg-soft: #f7f7f8;
--surface: #ffffff;
--surface-2: #f2f2f4;
--border: rgba(0,0,0,.08);
--border-strong: rgba(0,0,0,.16);
--text-1: #111216;
--text-2: #55596a;
--text-3: #8a8f9e;
--accent: #3b6cff;
--accent-2: #7a5cff;
--accent-3: #ff5c8a;
--good: #1aaf6c;
--warn: #f5a524;
--bad: #e0445a;
--grad: linear-gradient(135deg,#3b6cff,#7a5cff 55%,#ff5c8a);
--grad-soft: linear-gradient(135deg,#eef2ff,#f5ecff 55%,#ffeef5);
--radius: 18px;
--radius-sm: 12px;
--radius-lg: 26px;
--shadow: 0 10px 30px rgba(18,24,40,.08), 0 2px 6px rgba(18,24,40,.04);
--shadow-lg: 0 24px 60px rgba(18,24,40,.14), 0 6px 16px rgba(18,24,40,.06);
--font-sans: 'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
--font-serif: 'Playfair Display','Noto Serif SC',Georgia,serif;
--font-mono: 'JetBrains Mono','IBM Plex Mono',SFMono-Regular,Menlo,monospace;
--font-display: var(--font-sans);
--letter-tight: -.03em;
--letter-normal: -.01em;
--ease: cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);
font-family:var(--font-sans);font-weight:400;line-height:1.6;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
letter-spacing:var(--letter-normal)}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,samp{font-family:var(--font-mono)}
/* ================= SLIDE SYSTEM ================= */
.deck{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg)}
.slide{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:center;
padding:72px 96px;
box-sizing:border-box;
opacity:0;pointer-events:none;
transition:opacity .5s var(--ease), transform .5s var(--ease);
transform:translateX(30px);
overflow:hidden;
}
.slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);z-index:2}
.slide.is-prev{transform:translateX(-30px)}
/* single-page standalone (used when a layout file is opened directly) */
body.single .slide{position:relative;width:100vw;height:100vh;opacity:1;transform:none;pointer-events:auto}
/* ================= TYPOGRAPHY ================= */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
h1.title,.h1{font-family:var(--font-display);font-size:72px;line-height:1.05;font-weight:800;letter-spacing:var(--letter-tight);margin:0 0 18px;color:var(--text-1)}
h2.title,.h2{font-family:var(--font-display);font-size:54px;line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px}
h3,.h3{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:var(--letter-normal);margin:0 0 10px}
h4,.h4{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 8px}
.lede{font-size:22px;line-height:1.55;color:var(--text-2);font-weight:300;max-width:62ch}
.dim{color:var(--text-2)}
.dim2{color:var(--text-3)}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* ================= LAYOUT PRIMITIVES ================= */
.stack>*+*{margin-top:14px}
.row{display:flex;gap:24px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{display:flex;align-items:center;justify-content:center;text-align:center}
.fill{flex:1}
.sp-t{padding-top:24px}.sp-b{padding-bottom:24px}
.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
.mb-s{margin-bottom:8px}.mb-m{margin-bottom:18px}.mb-l{margin-bottom:32px}
/* ================= CARDS ================= */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card-soft{background:var(--surface-2);border:1px solid var(--border)}
.card-outline{background:transparent;border:1.5px solid var(--border-strong);box-shadow:none}
.card-accent{background:var(--surface);border-top:3px solid var(--accent)}
.card-hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;
background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.pill-accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
/* ================= BARS / DIVIDERS ================= */
.divider{height:1px;background:var(--border);width:100%}
.divider-accent{height:3px;width:72px;background:var(--accent);border-radius:2px}
/* ================= CHROME (header/footer/progress) ================= */
.deck-header{position:absolute;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
font-size:12px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
.deck-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
font-size:12px;color:var(--text-3);z-index:10;pointer-events:none}
.slide-number::before{content:attr(data-current)}
.slide-number::after{content:" / " attr(data-total)}
.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:20}
.progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
/* ================= PRESENTER / OVERVIEW ================= */
.notes{display:none!important}
.notes-overlay{position:fixed;inset:auto 0 0 0;max-height:42vh;background:rgba(20,22,30,.95);color:#e8ebf4;
padding:20px 32px;font-size:16px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);
transition:transform .3s var(--ease);z-index:40;overflow:auto;font-family:var(--font-sans)}
.notes-overlay.open{transform:translateY(0)}
.overview{position:fixed;inset:0;background:rgba(10,12,18,.92);backdrop-filter:blur(12px);z-index:50;
display:none;padding:40px;overflow:auto}
.overview.open{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:start}
.overview .thumb{background:var(--surface);border:1px solid var(--border);border-radius:12px;
aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;color:var(--text-1);padding:16px;
font-size:11px;transition:transform .2s var(--ease)}
.overview .thumb:hover{transform:scale(1.04)}
.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
/* ================= PRESENTER VIEW ================= */
/* Presenter view opens in a separate popup window (S key).
* All presenter styles are self-contained in the popup HTML generated by runtime.js.
* The audience window (this file) is NOT affected — it stays as normal deck view.
* Only the .notes class below is needed to hide speaker notes from audience. */
/* ================= UTILITY ================= */
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.tr{text-align:right}.tc{text-align:center}.tl{text-align:left}
.uppercase{text-transform:uppercase;letter-spacing:.12em}
/* ================= PRINT ================= */
@media print{
.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
.deck-header,.deck-footer,.progress-bar,.notes-overlay,.overview{display:none!important}
}

9
docs/presentations/beaver-project/assets/fonts.css Normal file
View File

@ -0,0 +1,9 @@
/* html-ppt :: shared webfonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

960
docs/presentations/beaver-project/assets/runtime.js Normal file
View File

@ -0,0 +1,960 @@
/* html-ppt :: runtime.js
* Keyboard-driven deck runtime. Zero dependencies.
*
* Features:
* ← → / space / PgUp PgDn / Home End navigation
* F fullscreen
* S presenter mode (opens a NEW WINDOW with current/next slide preview + notes + timer)
* The original window stays as audience view, synced via BroadcastChannel.
* Slide previews use CSS transform:scale() at design resolution for pixel-perfect layout.
* N quick notes overlay (bottom drawer)
* O slide overview grid
* T cycle themes (reads data-themes on <html> or <body>)
* A cycle demo animation on current slide
* URL hash #/N deep-link to slide N (1-based)
* Progress bar auto-managed
*/
(function () {
'use strict';
const ANIMS = ['fade-up','fade-down','fade-left','fade-right','rise-in','drop-in',
'zoom-pop','blur-in','glitch-in','typewriter','neon-glow','shimmer-sweep',
'gradient-flow','stagger-list','counter-up','path-draw','parallax-tilt',
'card-flip-3d','cube-rotate-3d','page-turn-3d','perspective-zoom',
'marquee-scroll','kenburns','confetti-burst','spotlight','morph-shape','ripple-reveal'];
function ready(fn){ if(document.readyState!='loading')fn(); else document.addEventListener('DOMContentLoaded',fn);}
/* ========== Parse URL for preview-only mode ==========
* When loaded as iframe.src = "index.html?preview=3", runtime enters a
* locked single-slide mode: only slide N is visible, no chrome, no keys,
* no hash updates. This is how the presenter window shows pixel-perfect
* previews — by loading the actual deck file in an iframe and telling it
* to display only a specific slide.
*/
function getPreviewIdx() {
const m = /[?&]preview=(\d+)/.exec(location.search || '');
return m ? parseInt(m[1], 10) - 1 : -1;
}
ready(function () {
const deck = document.querySelector('.deck');
if (!deck) return;
const slides = Array.from(deck.querySelectorAll('.slide'));
if (!slides.length) return;
const previewOnlyIdx = getPreviewIdx();
const isPreviewMode = previewOnlyIdx >= 0 && previewOnlyIdx < slides.length;
/* ===== Preview-only mode: show one slide, hide everything else ===== */
if (isPreviewMode) {
function showSlide(i) {
slides.forEach((s, j) => {
const active = (j === i);
s.classList.toggle('is-active', active);
s.style.display = active ? '' : 'none';
if (active) {
s.style.opacity = '1';
s.style.transform = 'none';
s.style.pointerEvents = 'auto';
}
});
}
showSlide(previewOnlyIdx);
/* Hide chrome that the presenter shouldn't see in preview */
const hideSel = '.progress-bar, .notes-overlay, .overview, .notes, aside.notes, .speaker-notes';
document.querySelectorAll(hideSel).forEach(el => { el.style.display = 'none'; });
document.documentElement.setAttribute('data-preview', '1');
document.body.setAttribute('data-preview', '1');
/* Auto-detect theme base path for theme switching in preview mode */
function getPreviewThemeBase() {
const base = document.documentElement.getAttribute('data-theme-base');
if (base) return base;
const tl = document.getElementById('theme-link');
if (tl) {
const raw = tl.getAttribute('href') || '';
const ls = raw.lastIndexOf('/');
if (ls >= 0) return raw.substring(0, ls + 1);
}
return 'assets/themes/';
}
const previewThemeBase = getPreviewThemeBase();
/* Listen for postMessage from parent presenter window:
* - preview-goto: switch visible slide WITHOUT reloading
* - preview-theme: switch theme CSS link to match audience window */
window.addEventListener('message', function(e) {
if (!e.data) return;
if (e.data.type === 'preview-goto') {
const n = parseInt(e.data.idx, 10);
if (n >= 0 && n < slides.length) showSlide(n);
} else if (e.data.type === 'preview-theme' && e.data.name) {
let link = document.getElementById('theme-link');
if (!link) {
link = document.createElement('link');
link.rel = 'stylesheet';
link.id = 'theme-link';
document.head.appendChild(link);
}
link.href = previewThemeBase + e.data.name + '.css';
document.documentElement.setAttribute('data-theme', e.data.name);
}
});
/* Signal to parent that preview iframe is ready */
try { window.parent && window.parent.postMessage({ type: 'preview-ready' }, '*'); } catch(e) {}
return;
}
let idx = 0;
const total = slides.length;
/* ===== BroadcastChannel for presenter sync ===== */
const CHANNEL_NAME = 'html-ppt-presenter-' + location.pathname;
let bc;
try { bc = new BroadcastChannel(CHANNEL_NAME); } catch(e) { bc = null; }
// Are we running inside the presenter popup? (legacy flag, now unused)
const isPresenterWindow = false;
/* ===== progress bar ===== */
let bar = document.querySelector('.progress-bar');
if (!bar) {
bar = document.createElement('div');
bar.className = 'progress-bar';
bar.innerHTML = '<span></span>';
document.body.appendChild(bar);
}
const barFill = bar.querySelector('span');
/* ===== notes overlay (N key) ===== */
let notes = document.querySelector('.notes-overlay');
if (!notes) {
notes = document.createElement('div');
notes.className = 'notes-overlay';
document.body.appendChild(notes);
}
/* ===== overview grid (O key) ===== */
let overview = document.querySelector('.overview');
if (!overview) {
overview = document.createElement('div');
overview.className = 'overview';
slides.forEach((s, i) => {
const t = document.createElement('div');
t.className = 'thumb';
// Force 16:9 aspect ratio robustly
t.style.padding = '0 0 56.25% 0';
t.style.height = '0';
t.style.position = 'relative';
t.style.overflow = 'hidden';
const title = s.getAttribute('data-title') ||
(s.querySelector('h1,h2,h3')||{}).textContent || ('Slide '+(i+1));
// Create a container for the mini-slide
const mini = document.createElement('div');
mini.className = 'mini-slide';
mini.style.position = 'absolute';
mini.style.top = '0';
mini.style.left = '0';
mini.style.width = '1920px';
mini.style.height = '1080px';
mini.style.transformOrigin = 'top left';
mini.style.pointerEvents = 'none';
mini.style.background = 'var(--bg)';
// Clone the slide content
const clone = s.cloneNode(true);
clone.className = 'slide is-active'; // force active styles
clone.style.position = 'absolute';
clone.style.inset = '0';
clone.style.transform = 'none';
clone.style.opacity = '1';
clone.style.padding = '72px 96px'; // ensure padding is kept
mini.appendChild(clone);
t.appendChild(mini);
// Add the number and title overlay
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.inset = '0';
overlay.style.background = 'linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.8) 100%)';
overlay.style.color = '#fff';
overlay.style.zIndex = '10';
overlay.style.pointerEvents = 'none';
const n = document.createElement('div');
n.className = 'n';
n.textContent = i + 1;
n.style.position = 'absolute';
n.style.top = '12px';
n.style.left = '16px';
n.style.fontWeight = '700';
n.style.fontSize = '16px';
n.style.color = '#fff';
n.style.textShadow = '0 1px 4px rgba(0,0,0,0.8)';
const text = document.createElement('div');
text.className = 't';
text.textContent = title.trim().slice(0,80);
text.style.position = 'absolute';
text.style.bottom = '12px';
text.style.left = '16px';
text.style.right = '16px';
text.style.fontWeight = '600';
text.style.fontSize = '14px';
text.style.color = '#fff';
text.style.textShadow = '0 1px 4px rgba(0,0,0,0.8)';
overlay.appendChild(n);
overlay.appendChild(text);
t.appendChild(overlay);
t.addEventListener('click', () => { go(i); toggleOverview(false); });
overview.appendChild(t);
});
document.body.appendChild(overview);
}
/* ===== navigation ===== */
function go(n, fromRemote){
n = Math.max(0, Math.min(total-1, n));
slides.forEach((s,i) => {
s.classList.toggle('is-active', i===n);
s.classList.toggle('is-prev', i<n);
});
idx = n;
barFill.style.width = ((n+1)/total*100)+'%';
const numEl = document.querySelector('.slide-number');
if (numEl) { numEl.setAttribute('data-current', n+1); numEl.setAttribute('data-total', total); }
// notes (bottom overlay)
const note = slides[n].querySelector('.notes, aside.notes, .speaker-notes');
notes.innerHTML = note ? note.innerHTML : '';
// hash
const hashTarget = '#/'+(n+1);
if (location.hash !== hashTarget && !isPresenterWindow) {
history.replaceState(null,'', hashTarget);
}
// re-trigger entry animations
slides[n].querySelectorAll('[data-anim]').forEach(el => {
const a = el.getAttribute('data-anim');
el.classList.remove('anim-'+a);
void el.offsetWidth;
el.classList.add('anim-'+a);
});
// counter-up
slides[n].querySelectorAll('.counter').forEach(el => {
const target = parseFloat(el.getAttribute('data-to')||el.textContent);
const dur = parseInt(el.getAttribute('data-dur')||'1200',10);
const start = performance.now();
const from = 0;
function tick(now){
const t = Math.min(1,(now-start)/dur);
const v = from + (target-from)*(1-Math.pow(1-t,3));
el.textContent = (target % 1 === 0) ? Math.round(v) : v.toFixed(1);
if (t<1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
});
// Broadcast to other window (audience ↔ presenter)
if (!fromRemote && bc) {
bc.postMessage({ type: 'go', idx: n });
}
}
/* ===== listen for remote navigation / theme changes ===== */
if (bc) {
bc.onmessage = function(e) {
if (!e.data) return;
if (e.data.type === 'go' && typeof e.data.idx === 'number') {
go(e.data.idx, true);
} else if (e.data.type === 'theme' && e.data.name) {
/* Sync theme across windows */
const i = themes.indexOf(e.data.name);
if (i >= 0) themeIdx = i;
applyTheme(e.data.name);
}
};
}
function toggleNotes(force){ notes.classList.toggle('open', force!==undefined?force:!notes.classList.contains('open')); }
function toggleOverview(force){
const isOpen = force!==undefined ? force : !overview.classList.contains('open');
overview.classList.toggle('open', isOpen);
if (isOpen) {
requestAnimationFrame(() => {
const thumbs = overview.querySelectorAll('.thumb');
if (thumbs.length) {
const scale = thumbs[0].clientWidth / 1920;
overview.querySelectorAll('.mini-slide').forEach(m => {
m.style.transform = 'scale(' + scale + ')';
});
}
});
}
}
/* ========== PRESENTER MODE — Magnetic-card popup window ========== */
/* Opens a new window with 4 draggable, resizable cards:
* CURRENT — iframe(?preview=N) pixel-perfect preview of current slide
* NEXT — iframe(?preview=N+1) pixel-perfect preview of next slide
* SCRIPT — large speaker notes (逐字稿)
* TIMER — elapsed timer + page counter + controls
* Cards remember position/size in localStorage.
* Two windows sync via BroadcastChannel.
*/
let presenterWin = null;
function openPresenterWindow() {
if (presenterWin && !presenterWin.closed) {
presenterWin.focus();
return;
}
// Build absolute URL of THIS deck file (without hash/query)
const deckUrl = location.protocol + '//' + location.host + location.pathname;
// Collect slide titles + notes (HTML strings)
const slideMeta = slides.map((s, i) => {
const note = s.querySelector('.notes, aside.notes, .speaker-notes');
return {
title: s.getAttribute('data-title') ||
(s.querySelector('h1,h2,h3')||{}).textContent || ('Slide '+(i+1)),
notes: note ? note.innerHTML : ''
};
});
/* Capture current theme so presenter previews match the audience */
const currentTheme = root.getAttribute('data-theme') || (themes[themeIdx] || '');
const presenterHTML = buildPresenterHTML(deckUrl, slideMeta, total, idx, CHANNEL_NAME, currentTheme);
presenterWin = window.open('', 'html-ppt-presenter', 'width=1280,height=820,menubar=no,toolbar=no');
if (!presenterWin) {
alert('请允许弹出窗口以使用演讲者视图');
return;
}
presenterWin.document.open();
presenterWin.document.write(presenterHTML);
presenterWin.document.close();
}
function buildPresenterHTML(deckUrl, slideMeta, total, startIdx, channelName, currentTheme) {
const metaJSON = JSON.stringify(slideMeta);
const deckUrlJSON = JSON.stringify(deckUrl);
const channelJSON = JSON.stringify(channelName);
const themeJSON = JSON.stringify(currentTheme || '');
const storageKey = 'html-ppt-presenter:' + location.pathname;
// Build the document as a single template string for clarity
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Presenter View</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%; overflow: hidden;
background: #1a1d24;
background-image:
radial-gradient(circle at 20% 30%, rgba(88,166,255,.04), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(188,140,255,.04), transparent 50%);
color: #e6edf3;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
}
/* Stage: positioned area where cards live */
#stage { position: absolute; inset: 0; overflow: hidden; }
/* Magnetic card */
.pcard {
position: absolute;
background: #0d1117;
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02);
display: flex; flex-direction: column;
overflow: hidden;
min-width: 180px; min-height: 100px;
transition: box-shadow .2s, border-color .2s;
}
.pcard.dragging { box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 2px rgba(88,166,255,.5); border-color: #58a6ff; transition: none; z-index: 9999; }
.pcard.resizing { box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 2px rgba(63,185,80,.5); border-color: #3fb950; transition: none; z-index: 9999; }
.pcard:hover { border-color: rgba(88,166,255,.3); }
/* Card header (drag handle) */
.pcard-head {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,.04);
border-bottom: 1px solid rgba(255,255,255,.06);
cursor: move;
user-select: none;
flex-shrink: 0;
}
.pcard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color, #58a6ff); flex-shrink: 0; }
.pcard-title {
font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
font-weight: 700; color: #8b949e; flex: 1;
}
.pcard-meta { font-size: 11px; color: #6e7681; }
/* Card body */
.pcard-body { flex: 1; position: relative; overflow: hidden; min-height: 0; }
/* Preview cards (CURRENT/NEXT) — iframe-based pixel-perfect render */
.pcard-preview .pcard-body { background: #000; }
.pcard-preview iframe {
position: absolute; top: 0; left: 0;
width: 1920px; height: 1080px;
border: none;
transform-origin: top left;
pointer-events: none;
background: transparent;
}
.pcard-preview .preview-end {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #484f58; font-size: 14px; letter-spacing: .12em;
}
/* Notes card */
.pcard-notes .pcard-body {
padding: 14px 18px;
overflow-y: auto;
font-size: 18px; line-height: 1.75;
color: #d0d7de;
font-family: "Noto Sans SC", -apple-system, sans-serif;
}
.pcard-notes .pcard-body p { margin: 0 0 .7em 0; }
.pcard-notes .pcard-body strong { color: #f0883e; }
.pcard-notes .pcard-body em { color: #58a6ff; font-style: normal; }
.pcard-notes .pcard-body code {
font-family: "SF Mono", monospace; font-size: .9em;
background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 4px;
}
.pcard-notes .empty { color: #484f58; font-style: italic; }
/* Timer card */
.pcard-timer .pcard-body {
display: flex; flex-direction: column; gap: 14px;
padding: 18px 20px; justify-content: center;
}
.timer-display {
font-family: "SF Mono", "JetBrains Mono", monospace;
font-size: 42px; font-weight: 700;
color: #3fb950;
letter-spacing: .04em;
line-height: 1;
}
.timer-row {
display: flex; align-items: center; gap: 12px;
font-size: 14px; color: #8b949e;
}
.timer-row .label { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #6e7681; }
.timer-row .val { color: #e6edf3; font-weight: 600; font-family: "SF Mono", monospace; }
.timer-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.timer-btn {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: #e6edf3;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
}
.timer-btn:hover { background: rgba(88,166,255,.15); border-color: #58a6ff; }
.timer-btn:active { transform: translateY(1px); }
/* Resize handle */
.pcard-resize {
position: absolute; right: 0; bottom: 0;
width: 18px; height: 18px;
cursor: nwse-resize;
background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 60%, transparent 60%, transparent 70%, rgba(255,255,255,.25) 70%, rgba(255,255,255,.25) 80%, transparent 80%);
z-index: 5;
}
.pcard-resize:hover { background: linear-gradient(135deg, transparent 50%, #58a6ff 50%, #58a6ff 60%, transparent 60%, transparent 70%, #58a6ff 70%, #58a6ff 80%, transparent 80%); }
/* Bottom hint bar */
.hint-bar {
position: fixed; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,.6);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,255,255,.08);
padding: 6px 16px;
font-size: 11px; color: #8b949e;
display: flex; gap: 18px; align-items: center;
z-index: 1000;
}
.hint-bar kbd {
background: rgba(255,255,255,.08);
padding: 1px 6px; border-radius: 3px;
font-family: "SF Mono", monospace;
font-size: 10px;
border: 1px solid rgba(255,255,255,.1);
color: #e6edf3;
}
.hint-bar .reset-layout {
margin-left: auto;
background: transparent; border: 1px solid rgba(255,255,255,.15);
color: #8b949e; padding: 3px 10px; border-radius: 4px;
font-size: 11px; cursor: pointer; font-family: inherit;
}
.hint-bar .reset-layout:hover { background: rgba(248,81,73,.15); border-color: #f85149; color: #f85149; }
body.is-dragging-card * { user-select: none !important; }
body.is-dragging-card iframe { pointer-events: none !important; }
</style>
</head>
<body>
<div id="stage">
<div class="pcard pcard-preview" id="card-cur" style="--dot-color:#58a6ff">
<div class="pcard-head" data-drag>
<span class="pcard-dot"></span>
<span class="pcard-title">CURRENT</span>
<span class="pcard-meta" id="cur-meta">—</span>
</div>
<div class="pcard-body"><iframe id="iframe-cur"></iframe></div>
<div class="pcard-resize" data-resize></div>
</div>
<div class="pcard pcard-preview" id="card-nxt" style="--dot-color:#bc8cff">
<div class="pcard-head" data-drag>
<span class="pcard-dot"></span>
<span class="pcard-title">NEXT</span>
<span class="pcard-meta" id="nxt-meta">—</span>
</div>
<div class="pcard-body"><iframe id="iframe-nxt"></iframe></div>
<div class="pcard-resize" data-resize></div>
</div>
<div class="pcard pcard-notes" id="card-notes" style="--dot-color:#f0883e">
<div class="pcard-head" data-drag>
<span class="pcard-dot"></span>
<span class="pcard-title">SPEAKER SCRIPT · 逐字稿</span>
</div>
<div class="pcard-body" id="notes-body"></div>
<div class="pcard-resize" data-resize></div>
</div>
<div class="pcard pcard-timer" id="card-timer" style="--dot-color:#3fb950">
<div class="pcard-head" data-drag>
<span class="pcard-dot"></span>
<span class="pcard-title">TIMER</span>
</div>
<div class="pcard-body">
<div class="timer-display" id="timer-display">00:00</div>
<div class="timer-row">
<span class="label">Slide</span>
<span class="val" id="timer-count">1 / ${total}</span>
</div>
<div class="timer-controls">
<button class="timer-btn" id="btn-prev">← Prev</button>
<button class="timer-btn" id="btn-next">Next →</button>
<button class="timer-btn" id="btn-reset">⏱ Reset</button>
</div>
</div>
<div class="pcard-resize" data-resize></div>
</div>
</div>
<div class="hint-bar">
<span><kbd>← →</kbd> 翻页</span>
<span><kbd>R</kbd> 重置计时</span>
<span><kbd>Esc</kbd> 关闭</span>
<span style="color:#6e7681">拖动卡片头部移动 · 拖动右下角调整大小</span>
<button class="reset-layout" id="reset-layout">重置布局</button>
</div>
<script>
(function(){
var slideMeta = ${metaJSON};
var total = ${total};
var idx = ${startIdx};
var deckUrl = ${deckUrlJSON};
var STORAGE_KEY = ${JSON.stringify(storageKey)};
var bc;
try { bc = new BroadcastChannel(${channelJSON}); } catch(e) {}
var iframeCur = document.getElementById('iframe-cur');
var iframeNxt = document.getElementById('iframe-nxt');
var notesBody = document.getElementById('notes-body');
var curMeta = document.getElementById('cur-meta');
var nxtMeta = document.getElementById('nxt-meta');
var timerDisplay = document.getElementById('timer-display');
var timerCount = document.getElementById('timer-count');
/* ===== Default card layout ===== */
function defaultLayout() {
var w = window.innerWidth;
var h = window.innerHeight - 36; /* leave room for hint bar */
return {
'card-cur': { x: 16, y: 16, w: Math.round(w*0.55) - 24, h: Math.round(h*0.62) - 16 },
'card-nxt': { x: Math.round(w*0.55) + 8, y: 16, w: w - Math.round(w*0.55) - 24, h: Math.round(h*0.42) - 16 },
'card-notes': { x: Math.round(w*0.55) + 8, y: Math.round(h*0.42) + 8, w: w - Math.round(w*0.55) - 24, h: h - Math.round(h*0.42) - 16 },
'card-timer': { x: 16, y: Math.round(h*0.62) + 8, w: Math.round(w*0.55) - 24, h: h - Math.round(h*0.62) - 16 }
};
}
/* ===== Apply / save / restore layout ===== */
function applyLayout(layout) {
Object.keys(layout).forEach(function(id){
var el = document.getElementById(id);
var l = layout[id];
if (el && l) {
el.style.left = l.x + 'px';
el.style.top = l.y + 'px';
el.style.width = l.w + 'px';
el.style.height = l.h + 'px';
}
});
rescaleAll();
}
function readLayout() {
try {
var saved = localStorage.getItem(STORAGE_KEY);
if (saved) return JSON.parse(saved);
} catch(e) {}
return defaultLayout();
}
function saveLayout() {
var layout = {};
['card-cur','card-nxt','card-notes','card-timer'].forEach(function(id){
var el = document.getElementById(id);
if (el) {
layout[id] = {
x: parseInt(el.style.left,10) || 0,
y: parseInt(el.style.top,10) || 0,
w: parseInt(el.style.width,10) || 300,
h: parseInt(el.style.height,10) || 200
};
}
});
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(layout)); } catch(e) {}
}
/* ===== iframe rescale to fit card body ===== */
function rescaleIframe(iframe) {
if (!iframe || iframe.style.display === 'none') return;
var body = iframe.parentElement;
var cw = body.clientWidth, ch = body.clientHeight;
if (!cw || !ch) return;
var s = Math.min(cw / 1920, ch / 1080);
iframe.style.transform = 'scale(' + s + ')';
/* Center the scaled iframe in the body */
var sw = 1920 * s, sh = 1080 * s;
iframe.style.left = Math.max(0, (cw - sw) / 2) + 'px';
iframe.style.top = Math.max(0, (ch - sh) / 2) + 'px';
}
function rescaleAll() {
rescaleIframe(iframeCur);
rescaleIframe(iframeNxt);
}
window.addEventListener('resize', rescaleAll);
/* ===== Drag (move card by header) ===== */
document.querySelectorAll('[data-drag]').forEach(function(handle){
handle.addEventListener('mousedown', function(e){
if (e.button !== 0) return;
var card = handle.closest('.pcard');
if (!card) return;
e.preventDefault();
card.classList.add('dragging');
document.body.classList.add('is-dragging-card');
var startX = e.clientX, startY = e.clientY;
var startL = parseInt(card.style.left,10) || 0;
var startT = parseInt(card.style.top,10) || 0;
function onMove(ev){
var nx = Math.max(0, Math.min(window.innerWidth - 100, startL + ev.clientX - startX));
var ny = Math.max(0, Math.min(window.innerHeight - 50, startT + ev.clientY - startY));
card.style.left = nx + 'px';
card.style.top = ny + 'px';
}
function onUp(){
card.classList.remove('dragging');
document.body.classList.remove('is-dragging-card');
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
saveLayout();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
});
/* ===== Resize (drag bottom-right corner) ===== */
document.querySelectorAll('[data-resize]').forEach(function(handle){
handle.addEventListener('mousedown', function(e){
if (e.button !== 0) return;
var card = handle.closest('.pcard');
if (!card) return;
e.preventDefault(); e.stopPropagation();
card.classList.add('resizing');
document.body.classList.add('is-dragging-card');
var startX = e.clientX, startY = e.clientY;
var startW = parseInt(card.style.width,10) || card.offsetWidth;
var startH = parseInt(card.style.height,10) || card.offsetHeight;
function onMove(ev){
var nw = Math.max(180, startW + ev.clientX - startX);
var nh = Math.max(100, startH + ev.clientY - startY);
card.style.width = nw + 'px';
card.style.height = nh + 'px';
if (card.querySelector('iframe')) rescaleIframe(card.querySelector('iframe'));
}
function onUp(){
card.classList.remove('resizing');
document.body.classList.remove('is-dragging-card');
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
rescaleAll();
saveLayout();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
});
/* ===== Preview iframe ready tracking =====
* Each iframe loads the deck ONCE with ?preview=1 on init. Subsequent
* slide changes are sent via postMessage('preview-goto') so the iframe
* just toggles visibility of a different .slide — no reload, no flicker.
*/
var iframeReady = { cur: false, nxt: false };
var currentTheme = ${themeJSON};
window.addEventListener('message', function(e) {
if (!e.data || e.data.type !== 'preview-ready') return;
var iframe = null;
if (e.source === iframeCur.contentWindow) {
iframeReady.cur = true;
iframe = iframeCur;
postPreviewGoto(iframeCur, idx);
} else if (e.source === iframeNxt.contentWindow) {
iframeReady.nxt = true;
iframe = iframeNxt;
postPreviewGoto(iframeNxt, idx + 1 < total ? idx + 1 : idx);
}
/* Sync current theme to the iframe */
if (iframe && currentTheme) {
try { iframe.contentWindow.postMessage({ type: 'preview-theme', name: currentTheme }, '*'); } catch(err) {}
}
if (iframe) rescaleIframe(iframe);
});
function postPreviewGoto(iframe, n) {
try {
iframe.contentWindow.postMessage({ type: 'preview-goto', idx: n }, '*');
} catch(e) {}
}
/* ===== Update content =====
* Smooth (no-reload) navigation: send postMessage to iframes instead of
* resetting src. Iframes stay loaded, just switch visible .slide.
*/
function update(n) {
n = Math.max(0, Math.min(total - 1, n));
idx = n;
/* Current preview — postMessage (smooth) */
if (iframeReady.cur) postPreviewGoto(iframeCur, n);
curMeta.textContent = (n + 1) + '/' + total;
/* Next preview */
if (n + 1 < total) {
iframeNxt.style.display = '';
var endEl = document.querySelector('#card-nxt .preview-end');
if (endEl) endEl.remove();
if (iframeReady.nxt) postPreviewGoto(iframeNxt, n + 1);
nxtMeta.textContent = (n + 2) + '/' + total;
} else {
iframeNxt.style.display = 'none';
var body = document.querySelector('#card-nxt .pcard-body');
if (body && !body.querySelector('.preview-end')) {
var end = document.createElement('div');
end.className = 'preview-end';
end.textContent = '— END OF DECK —';
body.appendChild(end);
}
nxtMeta.textContent = 'END';
}
/* Notes */
var note = slideMeta[n].notes;
notesBody.innerHTML = note || '<span class="empty">（这一页还没有逐字稿）</span>';
/* Timer count */
timerCount.textContent = (n + 1) + ' / ' + total;
}
/* ===== Timer ===== */
var tStart = Date.now();
setInterval(function(){
var s = Math.floor((Date.now() - tStart) / 1000);
var mm = String(Math.floor(s/60)).padStart(2,'0');
var ss = String(s%60).padStart(2,'0');
timerDisplay.textContent = mm + ':' + ss;
}, 1000);
function resetTimer(){ tStart = Date.now(); timerDisplay.textContent = '00:00'; }
/* ===== BroadcastChannel sync ===== */
if (bc) {
bc.onmessage = function(e){
if (!e.data) return;
if (e.data.type === 'go') update(e.data.idx);
else if (e.data.type === 'theme' && e.data.name) {
currentTheme = e.data.name;
/* Forward theme change to preview iframes */
[iframeCur, iframeNxt].forEach(function(iframe){
try {
iframe.contentWindow.postMessage({ type: 'preview-theme', name: e.data.name }, '*');
} catch(err) {}
});
}
};
}
function go(n) {
update(n);
if (bc) bc.postMessage({ type: 'go', idx: idx });
}
/* ===== Buttons ===== */
document.getElementById('btn-prev').addEventListener('click', function(){ go(idx - 1); });
document.getElementById('btn-next').addEventListener('click', function(){ go(idx + 1); });
document.getElementById('btn-reset').addEventListener('click', resetTimer);
document.getElementById('reset-layout').addEventListener('click', function(){
if (confirm('恢复默认卡片布局？')) {
try { localStorage.removeItem(STORAGE_KEY); } catch(e){}
applyLayout(defaultLayout());
}
});
/* ===== Keyboard ===== */
document.addEventListener('keydown', function(e){
if (e.metaKey || e.ctrlKey || e.altKey) return;
switch(e.key) {
case 'ArrowRight': case ' ': case 'PageDown': go(idx + 1); e.preventDefault(); break;
case 'ArrowLeft': case 'PageUp': go(idx - 1); e.preventDefault(); break;
case 'Home': go(0); break;
case 'End': go(total - 1); break;
case 'r': case 'R': resetTimer(); break;
case 'Escape': window.close(); break;
}
});
/* ===== Iframe load → rescale (catches initial size) ===== */
iframeCur.addEventListener('load', function(){ rescaleIframe(iframeCur); });
iframeNxt.addEventListener('load', function(){ rescaleIframe(iframeNxt); });
/* ===== Init =====
* Load each iframe ONCE with the deck file. After they post
* 'preview-ready', all subsequent navigation is via postMessage
* (smooth, no reload, no flicker).
*/
applyLayout(readLayout());
iframeCur.src = deckUrl + '?preview=' + (idx + 1);
if (idx + 1 < total) iframeNxt.src = deckUrl + '?preview=' + (idx + 2);
/* Initialize notes/timer/count without touching iframes */
notesBody.innerHTML = slideMeta[idx].notes || '<span class="empty">（这一页还没有逐字稿）</span>';
curMeta.textContent = (idx + 1) + '/' + total;
nxtMeta.textContent = (idx + 2) + '/' + total;
timerCount.textContent = (idx + 1) + ' / ' + total;
})();
</` + `script>
</body></html>`;
}
function fullscreen(){ const el=document.documentElement;
if (!document.fullscreenElement) el.requestFullscreen&&el.requestFullscreen();
else document.exitFullscreen&&document.exitFullscreen();
}
// theme cycling
const root = document.documentElement;
const themesAttr = root.getAttribute('data-themes') || document.body.getAttribute('data-themes');
const themes = themesAttr ? themesAttr.split(',').map(s=>s.trim()).filter(Boolean) : [];
let themeIdx = 0;
// Auto-detect theme base path from existing <link id="theme-link">
let themeBase = root.getAttribute('data-theme-base');
if (!themeBase) {
const existingLink = document.getElementById('theme-link');
if (existingLink) {
// el.getAttribute('href') gives the raw relative path written in HTML
const rawHref = existingLink.getAttribute('href') || '';
const lastSlash = rawHref.lastIndexOf('/');
themeBase = lastSlash >= 0 ? rawHref.substring(0, lastSlash + 1) : 'assets/themes/';
} else {
themeBase = 'assets/themes/';
}
}
function applyTheme(name) {
let link = document.getElementById('theme-link');
if (!link) {
link = document.createElement('link');
link.rel = 'stylesheet';
link.id = 'theme-link';
document.head.appendChild(link);
}
link.href = themeBase + name + '.css';
root.setAttribute('data-theme', name);
const ind = document.querySelector('.theme-indicator');
if (ind) ind.textContent = name;
}
function cycleTheme(fromRemote){
if (!themes.length) return;
themeIdx = (themeIdx+1) % themes.length;
const name = themes[themeIdx];
applyTheme(name);
/* Broadcast to other window (audience ↔ presenter) */
if (!fromRemote && bc) bc.postMessage({ type: 'theme', name: name });
}
// animation cycling on current slide
let animIdx = 0;
function cycleAnim(){
animIdx = (animIdx+1) % ANIMS.length;
const a = ANIMS[animIdx];
const target = slides[idx].querySelector('[data-anim-target]') || slides[idx];
ANIMS.forEach(x => target.classList.remove('anim-'+x));
void target.offsetWidth;
target.classList.add('anim-'+a);
target.setAttribute('data-anim', a);
const ind = document.querySelector('.anim-indicator');
if (ind) ind.textContent = a;
}
document.addEventListener('keydown', function (e) {
if (e.metaKey||e.ctrlKey||e.altKey) return;
switch (e.key) {
case 'ArrowRight': case ' ': case 'PageDown': case 'Enter': go(idx+1); e.preventDefault(); break;
case 'ArrowLeft': case 'PageUp': case 'Backspace': go(idx-1); e.preventDefault(); break;
case 'Home': go(0); break;
case 'End': go(total-1); break;
case 'f': case 'F': fullscreen(); break;
case 's': case 'S': openPresenterWindow(); break;
case 'n': case 'N': toggleNotes(); break;
case 'o': case 'O': toggleOverview(); break;
case 't': case 'T': cycleTheme(); break;
case 'a': case 'A': cycleAnim(); break;
case 'Escape': toggleOverview(false); toggleNotes(false); break;
}
});
// hash deep-link
function fromHash(){
const m = /^#\/(\d+)/.exec(location.hash||'');
if (m) go(Math.max(0, parseInt(m[1],10)-1));
}
window.addEventListener('hashchange', fromHash);
fromHash();
go(idx);
});
})();

287
docs/presentations/beaver-project/index.html Normal file
View File

@ -0,0 +1,287 @@
<!DOCTYPE html>
<html lang="zh-CN" class="replay-root">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beaver Agent Sandbox · 客户方案介绍</title>
<link rel="stylesheet" href="assets/fonts.css">
<link rel="stylesheet" href="assets/base.css">
<link rel="stylesheet" href="assets/animations/animations.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="tpl-beaver-replay">
<div class="deck">
<section class="slide" data-title="Cover">
<p class="kicker">Beaver Agent Sandbox</p>
<h1 class="h1">企业级智能体沙盒<br><span class="gradient-text">从 AI 对话到可交付任务</span></h1>
<p class="lede">为企业提供可私有部署、可追踪、可验收、可复用的 AI Agent 工作台，让智能体真正进入业务流程，而不只是停留在聊天窗口。</p>
<div class="speaker">
<div class="av"></div>
<div><b>Beaver 客户方案介绍</b><span>产品展示 · 商业价值 · 落地路径</span></div>
</div>
<div class="deck-footer"><span>Agent Sandbox for enterprise teams</span><span class="slide-number" data-current="1" data-total="13"></span></div>
<aside class="notes">
开场不要先讲技术，而是讲客户能听懂的定位：Beaver 是一个企业级智能体沙盒。它的价值不是“又一个聊天机器人”，而是把 AI 从问答推进到任务执行、过程追踪、结果验收和经验复用。客户最关心的是能不能落地到真实工作、能不能管控风险、能不能把成功经验变成组织资产。
</aside>
</section>
<section class="slide" data-title="Customer Problem">
<p class="kicker">why now</p>
<h2 class="h2">大多数企业 AI 试点卡在“能聊”，但离“能交付”还差一层操作系统。</h2>
<div class="grid g3 mt-l">
<div class="card card-accent"><h4>结果不可验收</h4><p class="dim">模型回答看起来合理，但缺少任务状态、修改闭环、产物管理和用户确认。</p><span class="tag bad mt-s">chat-only</span></div>
<div class="card card-accent"><h4>过程不可审计</h4><p class="dim">工具用了什么、文件改了什么、依据来自哪里，常常没有清晰证据链。</p><span class="tag warn mt-s">black box</span></div>
<div class="card card-accent"><h4>经验不可复用</h4><p class="dim">一次成功交付没有沉淀成团队方法，下一次仍然依赖人工提示和临场判断。</p><span class="tag mt-s">one-off</span></div>
</div>
<div class="panel mt-l">
<span class="tag good">Beaver 的切入点</span>
<p class="lede mt-s">把智能体运行所需的任务、工具、文件、记忆、技能、验收和多实例部署统一到一个可控沙盒里。</p>
</div>
<div class="deck-footer"><span>customer pain: execution, control, reuse</span><span class="slide-number" data-current="2" data-total="13"></span></div>
<aside class="notes">
这一页用客户语言讲痛点。企业不是没有模型，也不是不能接一个聊天入口。真正的问题是：回答之后谁来确认？执行过程能不能追溯？文件和工具调用有没有边界？成功经验能不能变成下次自动调用的方法？Beaver 的价值就是补上这层“智能体操作系统”。
</aside>
</section>
<section class="slide" data-title="Product Positioning">
<p class="kicker">positioning</p>
<h2 class="h2">Beaver 的定位：企业 AI Agent 的执行与治理平台。</h2>
<div class="flow mt-l">
<div class="flow-step"><span class="n">01</span><h4>识别</h4><p>判断用户是在普通对话，还是在交办需要持续完成的任务。</p></div>
<div class="flow-step"><span class="n">02</span><h4>执行</h4><p>按任务选择模型、技能和工具，处理文件、搜索、终端或外部连接器。</p></div>
<div class="flow-step"><span class="n">03</span><h4>追踪</h4><p>记录过程、工具调用、子任务、产物、通知和执行证据。</p></div>
<div class="flow-step"><span class="n">04</span><h4>验收</h4><p>支持满意、修改、放弃，让用户反馈成为质量闭环。</p></div>
<div class="flow-step card-accent"><span class="n">05</span><h4>沉淀</h4><p>把被认可的工作方法转为技能和长期记忆，形成组织资产。</p></div>
</div>
<div class="metric-grid mt-l">
<div class="metric"><span>deployment</span><b>多实例</b><p class="dim">每个用户/团队可拥有独立 app-instance。</p></div>
<div class="metric"><span>workspace</span><b>沙盒</b><p class="dim">文件、配置和运行数据在实例边界内管理。</p></div>
<div class="metric"><span>control</span><b>验收</b><p class="dim">AI 产出以用户是否认可作为闭环信号。</p></div>
<div class="metric"><span>growth</span><b>技能库</b><p class="dim">成功任务经验可持续复用。</p></div>
</div>
<div class="deck-footer"><span>not a chatbot, an agent execution layer</span><span class="slide-number" data-current="3" data-total="13"></span></div>
<aside class="notes">
这里要把产品定位说清楚：Beaver 不是单纯的聊天前端，也不是一个模型代理。它是一层智能体执行与治理平台。用户一句话进来，系统能判断是否进入任务模式，随后执行、追踪、验收，并把成功经验沉淀为长期能力。这就是客户购买的核心价值。
</aside>
</section>
<section class="slide" data-title="Product Modules">
<p class="kicker">product modules</p>
<h2 class="h2">一套完整工作台：从日常协作到工具治理都在同一界面。</h2>
<div class="roadmap mt-l">
<div class="item"><span>01</span><b>对话工作台</b><p>会话、附件、Agent 运行过程、当前任务进度和验收操作。</p></div>
<div class="item"><span>02</span><b>任务中心</b><p>普通任务、定时任务、任务详情、时间线和结果验收。</p></div>
<div class="item"><span>03</span><b>文件空间</b><p>上传、目录管理、Markdown/文本/图片预览、下载和删除。</p></div>
<div class="item"><span>04</span><b>技能与市场</b><p>企业技能库、草稿评审、发布门禁和技能安装。</p></div>
</div>
<div class="roadmap mt-m">
<div class="item"><span>05</span><b>工具管理</b><p>MCP 工具配置、工具详情、测试、编辑和删除。</p></div>
<div class="item"><span>06</span><b>通知与定时</b><p>周期任务、主动提醒、运行记录和后续修改。</p></div>
<div class="item"><span>07</span><b>连接器</b><p>Outlook 等外部系统接入，承接邮件、日历和业务入口。</p></div>
<div class="item"><span>08</span><b>配置中心</b><p>模型供应商、Agent profile、通道、系统状态和运行参数。</p></div>
</div>
<div class="deck-footer"><span>customer-facing workspace, admin-facing control</span><span class="slide-number" data-current="4" data-total="13"></span></div>
<aside class="notes">
这一页适合给客户展示产品范围。Beaver 不是单点工具，而是一套工作台。对普通用户来说，有对话、任务、文件和通知。对管理员或实施团队来说，有技能、工具、连接器、模型配置和系统状态。这样客户能看到它不是 demo，而是可以承载真实使用流程的产品。
</aside>
</section>
<section class="slide" data-title="Business Scenarios">
<p class="kicker">use cases</p>
<h2 class="h2">典型客户场景：高频、跨工具、需要留痕的知识工作。</h2>
<div class="grid g3 mt-l">
<div class="card card-accent"><h4>项目交付助手</h4><p class="dim">梳理需求、拆任务、生成方案、跟踪修改意见，把交付过程沉淀为可复用模板。</p></div>
<div class="card card-accent"><h4>运营与周报自动化</h4><p class="dim">定时触发数据整理、状态汇总、风险提醒和通知推送，减少重复人工跟进。</p></div>
<div class="card card-accent"><h4>企业知识与文件处理</h4><p class="dim">围绕 workspace 文件、历史任务和业务知识进行整理、摘要、审查和产物生成。</p></div>
<div class="card card-accent"><h4>研发与技术支持</h4><p class="dim">分析代码、执行命令、读取日志、记录证据，为工程团队提供可追溯协作。</p></div>
<div class="card card-accent"><h4>销售与客户成功</h4><p class="dim">沉淀客户上下文、准备沟通材料、跟踪待办，并与邮件日历等连接器协同。</p></div>
<div class="card card-accent"><h4>内部 AI 能力平台</h4><p class="dim">让不同团队共用安全边界、工具管理、技能市场和多模型供应商策略。</p></div>
</div>
<div class="deck-footer"><span>best fit: repeatable workflows with review requirements</span><span class="slide-number" data-current="5" data-total="13"></span></div>
<aside class="notes">
这里不要讲单一行业，而是讲适合 Beaver 的任务类型：高频、跨工具、需要留痕、结果需要验收。客户会自然映射到自己的场景，比如项目管理、运营报告、技术支持、知识库维护、客户成功和内部 AI 平台。关键是让客户看到 Beaver 能进入真实工作流。
</aside>
</section>
<section class="slide" data-title="Comparison">
<p class="kicker">competitive edge</p>
<h2 class="h2">优势对比：Beaver 补齐聊天、RPA 和通用 Agent 框架之间的空白。</h2>
<div class="matrix mt-l">
<div class="head">能力维度</div><div class="head">普通 AI 聊天</div><div class="head">传统自动化/RPA</div><div class="head">Beaver Agent Sandbox</div>
<div class="rowhead">任务生命周期</div><div>以消息为中心</div><div>以固定流程为中心</div><div><span class="tag good">识别、执行、验收、复用闭环</span></div>
<div class="rowhead">工具与文件</div><div>通常只生成建议</div><div>能执行但流程僵硬</div><div><span class="tag good">技能指导工具调用，过程留痕</span></div>
<div class="rowhead">用户控制</div><div>缺少明确交付确认</div><div>改流程成本较高</div><div><span class="tag good">满意、修改、放弃进入任务状态</span></div>
<div class="rowhead">经验沉淀</div><div>依赖聊天记录</div><div>依赖人工维护脚本</div><div><span class="tag good">成功任务转技能和长期记忆</span></div>
<div class="rowhead">部署边界</div><div>SaaS 居多</div><div>企业内复杂集成</div><div><span class="tag good">Docker 多实例沙盒，适配私有部署</span></div>
</div>
<div class="deck-footer"><span>differentiation: task closure + evidence + reusable skills</span><span class="slide-number" data-current="6" data-total="13"></span></div>
<aside class="notes">
这一页是客户很关心的“为什么不是已有方案”。普通聊天工具擅长生成内容，但缺少任务闭环和治理。RPA 能执行，但通常流程固定、维护成本高。通用 Agent 框架适合开发者搭系统，但客户还需要完整工作台、验收和管理界面。Beaver 的差异化在于把执行、证据、验收和经验沉淀做成一套产品。
</aside>
</section>
<section class="slide" data-title="Architecture For Customers">
<p class="kicker">deployment model</p>
<h2 class="h2">客户可理解的部署模型：入口统一，实例隔离，数据边界清晰。</h2>
<div class="flow mt-l">
<div class="flow-step"><span class="n">01</span><h4>认证门户</h4><p>用户注册、登录、进入模型配置引导。</p></div>
<div class="flow-step"><span class="n">02</span><h4>授权服务</h4><p>管理账号、内部身份和 backend 注册。</p></div>
<div class="flow-step"><span class="n">03</span><h4>部署控制</h4><p>为用户创建独立 app-instance 容器。</p></div>
<div class="flow-step"><span class="n">04</span><h4>统一代理</h4><p>按实例域名把流量分发到对应容器。</p></div>
<div class="flow-step card-accent"><span class="n">05</span><h4>用户实例</h4><p>前端、后端、workspace、文件、技能和配置在实例内运行。</p></div>
</div>
<div class="grid g3 mt-l">
<div class="card card-accent"><h4>私有化友好</h4><p class="dim">最小部署基于 Linux/WSL2 + Docker，可放在企业自有环境或云主机。</p></div>
<div class="card card-accent"><h4>实例级隔离</h4><p class="dim">每个 app-instance 有自己的 workspace、配置和运行数据边界。</p></div>
<div class="card card-accent"><h4>供应商灵活</h4><p class="dim">模型 provider 可配置，支持后续成本、速度和质量策略。</p></div>
</div>
<div class="deck-footer"><span>deployment: auth portal + deploy control + routed app instances</span><span class="slide-number" data-current="7" data-total="13"></span></div>
<aside class="notes">
客户介绍中不需要展开所有代码细节，但要说明架构可信。Beaver 的多实例模式是：用户从认证门户进入，授权服务和部署控制创建独立实例，路由代理按域名分发流量。每个用户实例里有自己的前端、后端、workspace、技能和配置。客户能理解这是一个有边界的沙盒，而不是所有人混在一个共享会话里。
</aside>
</section>
<section class="slide" data-title="Trust And Governance">
<p class="kicker">trust and control</p>
<h2 class="h2">企业需要的不只是智能，还要可控、可解释、可治理。</h2>
<div class="metric-grid mt-l">
<div class="metric"><span>trace</span><b>证据链</b><p class="dim">任务、工具调用、产物和结果进入时间线。</p></div>
<div class="metric"><span>review</span><b>验收</b><p class="dim">用户可接受、要求修改或放弃任务。</p></div>
<div class="metric"><span>boundary</span><b>沙盒</b><p class="dim">文件与配置在实例边界内管理。</p></div>
<div class="metric"><span>admin</span><b>工具治理</b><p class="dim">MCP 工具可测试、编辑、启停和审查。</p></div>
</div>
<div class="split mt-l">
<div class="card card-accent">
<h3>对业务负责人</h3>
<ul class="clean mt-m">
<li>每个 AI 任务都有状态和产物。</li>
<li>结果不是默认正确，需要用户确认。</li>
<li>成功经验可沉淀为团队可复用能力。</li>
</ul>
</div>
<div class="card card-accent">
<h3>对 IT / 安全团队</h3>
<ul class="clean mt-m">
<li>部署控制面不直接暴露公网。</li>
<li>实例有独立 workspace 和配置边界。</li>
<li>工具、模型和连接器可按企业策略逐步接入。</li>
</ul>
</div>
</div>
<div class="deck-footer"><span>governance: evidence, acceptance, isolation, admin controls</span><span class="slide-number" data-current="8" data-total="13"></span></div>
<aside class="notes">
这一页强调企业采购最关心的风险问题。业务负责人关心能不能交付，IT 和安全团队关心能不能管控。Beaver 的回答是：任务有证据链，结果有验收，实例有边界，工具和连接器可治理。这样客户会觉得它不是一个不受控的 AI 黑盒，而是一个可纳入企业管理的系统。
</aside>
</section>
<section class="slide" data-title="Learning Loop">
<p class="kicker">learning moat</p>
<h2 class="h2">长期优势：越用越会做，把企业经验变成智能体资产。</h2>
<div class="pipeline mt-l">
<div class="phase card-accent"><span class="tag">memory</span><h3>长期记忆</h3><p class="dim">沉淀用户偏好、组织知识、历史任务、文件产物和工具经验。</p></div>
<div class="phase card-accent"><span class="tag">skills</span><h3>技能库</h3><p class="dim">把被认可的任务方法转为技能候选、草稿、审核和发布。</p></div>
<div class="phase card-accent"><span class="tag">marketplace</span><h3>市场与分发</h3><p class="dim">让团队安装、复用和管理已验证的技能与工具能力。</p></div>
</div>
<div class="panel mt-l">
<span class="tag good">客户价值</span>
<p class="lede mt-s">第一次交付依赖人工指导，第二次开始复用技能和记忆，长期形成企业自己的 AI 工作方法库。</p>
</div>
<div class="deck-footer"><span>compounding advantage: accepted work becomes reusable capability</span><span class="slide-number" data-current="9" data-total="13"></span></div>
<aside class="notes">
客户会问：这个系统的长期壁垒是什么？答案是学习闭环。普通工具每次都从头开始，而 Beaver 会把被用户认可的任务经验沉淀为技能，把稳定信息沉淀为记忆。后续类似任务可以自动激活已有方法。这让企业的 AI 能力随着使用增加，而不是永远停留在通用模型层。
</aside>
</section>
<section class="slide" data-title="Readiness">
<p class="kicker">current readiness</p>
<h2 class="h2">当前已具备的可展示能力，足够支撑客户试点。</h2>
<div class="matrix mt-l">
<div class="head">能力</div><div class="head">当前状态</div><div class="head">客户看到什么</div><div class="head">商业价值</div>
<div class="rowhead">任务执行闭环</div><div><span class="tag good">已完成</span></div><div>任务列表、详情、时间线、验收操作</div><div>从回答变成可交付结果</div>
<div class="rowhead">工具与证据</div><div><span class="tag good">已具备</span></div><div>文件、终端、网页、技能、定时任务等工具调用记录</div><div>可审计、可复盘</div>
<div class="rowhead">多智能体协作</div><div><span class="tag good">已具备</span></div><div>复杂任务拆分、子任务结果汇总</div><div>处理多阶段复杂工作</div>
<div class="rowhead">技能沉淀</div><div><span class="tag good">已具备</span></div><div>候选、草稿、评审、发布链路</div><div>形成企业技能库</div>
<div class="rowhead">长期记忆</div><div><span class="tag warn">底层已完成，待产品化接入</span></div><div>后续展示记忆管理台和检索轨迹</div><div>越用越懂业务</div>
</div>
<div class="deck-footer"><span>pilot-ready modules plus roadmap for memory/productization</span><span class="slide-number" data-current="10" data-total="13"></span></div>
<aside class="notes">
这一页要避免过度承诺，同时告诉客户可以试点。任务闭环、工具调用、证据留存、多智能体、技能沉淀这些已经具备展示基础。长期记忆底层能力已经完成，但仍需要接入主产品链路和 UI，因此对客户可以讲成下一阶段重点。这样既展示实力，也保持可信边界。
</aside>
</section>
<section class="slide" data-title="Business Value">
<p class="kicker">business value</p>
<h2 class="h2">客户收益：更快交付、更低风险、更强复用。</h2>
<div class="metric-grid mt-l">
<div class="metric"><span>speed</span><b>交付提速</b><p class="dim">将多步骤知识工作从人工串联变成 AI 协作执行。</p></div>
<div class="metric"><span>quality</span><b>过程透明</b><p class="dim">任务时间线和证据链降低黑盒风险。</p></div>
<div class="metric"><span>reuse</span><b>经验复用</b><p class="dim">技能和记忆让团队避免重复提示和重复摸索。</p></div>
<div class="metric"><span>control</span><b>成本可控</b><p class="dim">模型供应商可配置，为后续质量/成本路由打基础。</p></div>
</div>
<div class="split mt-l">
<div class="card card-accent">
<h3>适合先做试点的部门</h3>
<ul class="clean mt-m">
<li>需要频繁生成和修改交付物的项目团队。</li>
<li>重复处理文件、报告和知识资料的运营团队。</li>
<li>需要审计工具调用和任务证据的技术团队。</li>
</ul>
</div>
<div class="card card-accent">
<h3>成功指标建议</h3>
<ul class="clean mt-m">
<li>任务交付时间下降。</li>
<li>重复工作模板化比例提升。</li>
<li>人工修改轮次下降。</li>
<li>可追溯任务报告覆盖率提升。</li>
</ul>
</div>
</div>
<div class="deck-footer"><span>value: speed, governance, reuse, model flexibility</span><span class="slide-number" data-current="11" data-total="13"></span></div>
<aside class="notes">
这里把商业价值说得具体一点。不要只说提升效率，而要拆成可衡量指标：任务交付时间、重复工作模板化比例、修改轮次、可追溯报告覆盖率。客户如果要做试点，也需要这些指标判断是否成功。Beaver 的核心收益是更快交付、更低风险、更强复用。
</aside>
</section>
<section class="slide" data-title="Pilot Plan">
<p class="kicker">pilot plan</p>
<h2 class="h2">建议落地方式：先选高价值场景，4 步完成客户试点。</h2>
<div class="roadmap mt-l">
<div class="item"><span>01</span><b>场景选择</b><p>选择一个高频、跨工具、需要验收的部门流程，例如周报、方案交付或文件处理。</p></div>
<div class="item"><span>02</span><b>私有部署</b><p>在客户环境部署 Beaver，配置模型 provider、用户入口和实例域名。</p></div>
<div class="item"><span>03</span><b>工具接入</b><p>接入文件、搜索、邮件日历、MCP 工具或企业内部系统。</p></div>
<div class="item"><span>04</span><b>技能沉淀</b><p>把试点成功流程整理成技能，建立可复用的企业 Agent 模板。</p></div>
</div>
<div class="panel mt-l">
<span class="tag warn">推荐节奏</span>
<p class="lede mt-s">第一阶段先做 2-4 周试点，验证一个部门流程；第二阶段扩展连接器、权限策略和技能市场；第三阶段接入长期记忆管理。</p>
</div>
<div class="deck-footer"><span>pilot path: scenario, deploy, integrate, reuse</span><span class="slide-number" data-current="12" data-total="13"></span></div>
<aside class="notes">
客户方案要给落地路径。建议不要一开始全公司铺开，而是先挑一个高价值流程，2 到 4 周试点。先部署系统和模型，接入必要工具，再把成功流程沉淀成技能。试点成功后再扩展连接器、权限策略、市场和长期记忆管理。这样客户知道下一步怎么做。
</aside>
</section>
<section class="slide center tc" data-title="Closing">
<div>
<div class="center-mark">B</div>
<h2 class="h2 mt-m">Beaver Agent Sandbox</h2>
<p class="lede" style="margin-left:auto;margin-right:auto;">把企业 AI 从“会回答”升级为“能执行、可验收、可追踪、会复用”的智能体工作台。</p>
<div class="row mt-l" style="justify-content:center">
<span class="tag good">任务闭环</span>
<span class="tag">过程证据</span>
<span class="tag warn">私有沙盒</span>
<span class="tag">技能沉淀</span>
</div>
</div>
<div class="deck-footer"><span>Commercial proposal deck</span><span class="slide-number" data-current="13" data-total="13"></span></div>
<aside class="notes">
最后一页用于收束。可以把一句话再重复一遍：Beaver 让企业 AI 不止停留在回答，而是进入可执行任务、可验收结果、可追踪证据和可复用经验。随后进入客户问题讨论：他们最想先试点哪个场景、已有模型和工具是什么、部署环境有什么约束。
</aside>
</section>
</div>
<script src="assets/runtime.js"></script>
</body>
</html>

511
docs/presentations/beaver-project/style.css Normal file
View File

@ -0,0 +1,511 @@
/* Beaver Project deck, based on html-ppt tech-sharing template. */
.replay-root {
background: #08111d;
}
.tpl-beaver-replay {
--bg: #08111d;
--bg-soft: #0d1726;
--surface: #101b2c;
--surface-2: #132235;
--border: rgba(147, 197, 253, .18);
--border-strong: rgba(147, 197, 253, .34);
--text-1: #eef6ff;
--text-2: #a9bfd7;
--text-3: #6f879f;
--accent: #64e3a1;
--accent-2: #7cc7ff;
--accent-3: #d9a6ff;
--good: #64e3a1;
--warn: #ffd166;
--bad: #ff7b7b;
--grad: linear-gradient(120deg, #64e3a1 0%, #7cc7ff 52%, #d9a6ff 100%);
--radius: 8px;
--radius-sm: 6px;
--radius-lg: 8px;
--shadow: 0 20px 60px rgba(0, 0, 0, .38);
--letter-tight: 0;
--letter-normal: 0;
font-family: "Inter", "Noto Sans SC", sans-serif;
background: var(--bg);
color: var(--text-1);
}
.tpl-beaver-replay .slide {
padding: 50px 72px;
background:
linear-gradient(rgba(124, 199, 255, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(124, 199, 255, .04) 1px, transparent 1px),
linear-gradient(135deg, #08111d 0%, #0b1524 54%, #101426 100%);
background-size: 40px 40px, 40px 40px, auto;
color: var(--text-1);
}
.tpl-beaver-replay .slide::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(100, 227, 161, .1), transparent 22%, transparent 78%, rgba(124, 199, 255, .08)),
linear-gradient(180deg, rgba(217, 166, 255, .07), transparent 30%, transparent 82%, rgba(100, 227, 161, .05));
opacity: .7;
pointer-events: none;
z-index: 0;
}
.tpl-beaver-replay .slide > * {
position: relative;
z-index: 1;
}
.tpl-beaver-replay .h1 {
font-size: 62px;
line-height: 1.06;
font-weight: 800;
letter-spacing: 0;
margin-bottom: 20px;
color: #fff;
}
.tpl-beaver-replay .h2 {
font-size: 40px;
line-height: 1.12;
font-weight: 760;
letter-spacing: 0;
color: #fff;
margin-bottom: 16px;
}
.tpl-beaver-replay h3,
.tpl-beaver-replay h4 {
color: #fff;
letter-spacing: 0;
}
.tpl-beaver-replay .lede {
font-size: 19px;
line-height: 1.55;
color: var(--text-2);
max-width: 66ch;
}
.tpl-beaver-replay .kicker {
color: var(--accent);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.tpl-beaver-replay .kicker::before {
content: "> ";
}
.tpl-beaver-replay .mono {
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
}
.tpl-beaver-replay .gradient-text {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.tpl-beaver-replay .deck-footer {
position: absolute;
left: 40px;
right: 40px;
bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-3);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
letter-spacing: 0;
}
.tpl-beaver-replay .card {
background: rgba(16, 27, 44, .92);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: none;
}
.tpl-beaver-replay .card-accent {
border-top: 3px solid var(--accent);
}
.tpl-beaver-replay .panel {
padding: 20px 22px;
background: rgba(8, 17, 29, .68);
border: 1px solid var(--border);
border-radius: 8px;
}
.tpl-beaver-replay .tag,
.tpl-beaver-replay .pill {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 10px;
border-radius: 6px;
background: rgba(19, 34, 53, .9);
border: 1px solid var(--border);
color: var(--text-2);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 12px;
letter-spacing: 0;
}
.tpl-beaver-replay .tag.good {
color: var(--good);
border-color: rgba(100, 227, 161, .34);
background: rgba(100, 227, 161, .1);
}
.tpl-beaver-replay .tag.warn {
color: var(--warn);
border-color: rgba(255, 209, 102, .34);
background: rgba(255, 209, 102, .1);
}
.tpl-beaver-replay .tag.bad {
color: var(--bad);
border-color: rgba(255, 123, 123, .34);
background: rgba(255, 123, 123, .1);
}
.tpl-beaver-replay .terminal {
background: #050a12;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 14px;
line-height: 1.62;
}
.tpl-beaver-replay .terminal .bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #0d1726;
border-bottom: 1px solid var(--border);
font-size: 12px;
color: var(--text-3);
}
.tpl-beaver-replay .terminal .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff7b7b;
}
.tpl-beaver-replay .terminal .dot:nth-child(2) {
background: #ffd166;
}
.tpl-beaver-replay .terminal .dot:nth-child(3) {
background: #64e3a1;
}
.tpl-beaver-replay .terminal pre {
margin: 0;
padding: 20px 22px;
color: #dbeafe;
overflow: auto;
max-height: 420px;
}
.tpl-beaver-replay .kw { color: #ff9f9f; }
.tpl-beaver-replay .fn { color: #d9a6ff; }
.tpl-beaver-replay .str { color: #9fe6ff; }
.tpl-beaver-replay .num { color: #7cc7ff; }
.tpl-beaver-replay .cmt { color: #6f879f; }
.tpl-beaver-replay .speaker {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
}
.tpl-beaver-replay .speaker .av {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--grad);
}
.tpl-beaver-replay .speaker b {
display: block;
color: #fff;
font-size: 17px;
}
.tpl-beaver-replay .speaker span {
color: var(--text-3);
font-size: 13px;
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
}
.tpl-beaver-replay .agenda-row {
display: grid;
grid-template-columns: 58px 1fr 190px;
gap: 22px;
align-items: baseline;
padding: 15px 0;
border-bottom: 1px dashed var(--border);
}
.tpl-beaver-replay .agenda-row .num {
color: var(--accent);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
}
.tpl-beaver-replay .agenda-row .t {
color: #fff;
font-size: 22px;
font-weight: 700;
}
.tpl-beaver-replay .agenda-row .d {
color: var(--text-3);
font-size: 13px;
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
}
.tpl-beaver-replay .flow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
align-items: stretch;
}
.tpl-beaver-replay .flow-step {
min-height: 120px;
padding: 16px;
border-radius: 8px;
background: rgba(16, 27, 44, .94);
border: 1px solid var(--border);
}
.tpl-beaver-replay .flow-step .n {
display: inline-block;
margin-bottom: 10px;
color: var(--accent);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 13px;
}
.tpl-beaver-replay .flow-step h4 {
margin: 0 0 8px;
font-size: 18px;
}
.tpl-beaver-replay .flow-step p {
margin: 0;
color: var(--text-2);
font-size: 14px;
line-height: 1.5;
}
.tpl-beaver-replay .split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
align-items: start;
}
.tpl-beaver-replay .compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.tpl-beaver-replay .compare .side {
min-height: 330px;
padding: 22px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(8, 17, 29, .72);
}
.tpl-beaver-replay .compare .side.candidate {
border-color: rgba(100, 227, 161, .4);
background: rgba(100, 227, 161, .08);
}
.tpl-beaver-replay .metric-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.tpl-beaver-replay .metric {
padding: 18px;
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(16, 27, 44, .9);
min-height: 104px;
}
.tpl-beaver-replay .metric b {
display: block;
font-size: 23px;
line-height: 1.1;
color: #fff;
}
.tpl-beaver-replay .metric span {
color: var(--text-3);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 12px;
}
.tpl-beaver-replay .matrix {
display: grid;
grid-template-columns: 190px repeat(3, 1fr);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.tpl-beaver-replay .matrix > div {
min-height: 76px;
padding: 14px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: rgba(16, 27, 44, .78);
font-size: 14px;
}
.tpl-beaver-replay .matrix > div:nth-child(4n) {
border-right: 0;
}
.tpl-beaver-replay .matrix .head {
min-height: 48px;
color: var(--accent-2);
background: rgba(124, 199, 255, .08);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 12px;
}
.tpl-beaver-replay .matrix .rowhead {
color: #fff;
font-weight: 700;
}
.tpl-beaver-replay .pipeline {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 18px;
}
.tpl-beaver-replay .pipeline .phase {
min-height: 250px;
padding: 22px;
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(16, 27, 44, .88);
}
.tpl-beaver-replay .phase h3 {
font-size: 22px;
margin-bottom: 12px;
}
.tpl-beaver-replay ul.clean {
list-style: none;
padding: 0;
margin: 0;
}
.tpl-beaver-replay ul.clean li {
position: relative;
padding-left: 18px;
margin: 10px 0;
color: var(--text-2);
font-size: 15px;
line-height: 1.45;
}
.tpl-beaver-replay ul.clean li::before {
content: "";
position: absolute;
left: 0;
top: .65em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.tpl-beaver-replay .large-number {
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 96px;
line-height: .9;
font-weight: 800;
color: var(--accent);
}
.tpl-beaver-replay .source-line {
color: var(--text-3);
font-size: 12px;
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
}
.tpl-beaver-replay .roadmap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.tpl-beaver-replay .roadmap .item {
min-height: 150px;
padding: 18px;
background: rgba(16, 27, 44, .9);
border: 1px solid var(--border);
border-radius: 8px;
}
.tpl-beaver-replay .roadmap .item b {
display: block;
margin-bottom: 10px;
color: #fff;
font-size: 18px;
}
.tpl-beaver-replay .roadmap .item span {
color: var(--accent);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 12px;
}
.tpl-beaver-replay .roadmap .item p {
color: var(--text-2);
font-size: 14px;
line-height: 1.5;
}
.tpl-beaver-replay .center-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 112px;
height: 112px;
border-radius: 50%;
border: 1px solid rgba(100, 227, 161, .38);
background: rgba(100, 227, 161, .08);
color: var(--accent);
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
font-size: 46px;
font-weight: 800;
}