3174 lines
112 KiB
HTML
3174 lines
112 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>RAG 知识库问答入门：从 LLM 到 Agent / MCP</title>
|
||
<style>
|
||
:root{
|
||
--bg:#eef4ff;
|
||
--paper:#ffffff;
|
||
--ink:#071b4a;
|
||
--text:#102754;
|
||
--muted:#516381;
|
||
--blue:#1769ff;
|
||
--blue2:#0a4bd8;
|
||
--cyan:#12b9c9;
|
||
--green:#0f9f7a;
|
||
--orange:#f59e0b;
|
||
--red:#e54865;
|
||
--line:#c8dafe;
|
||
--soft:#f3f8ff;
|
||
--shadow:0 18px 44px rgba(17,55,122,.16),0 2px 10px rgba(17,55,122,.06);
|
||
}
|
||
*{box-sizing:border-box}
|
||
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Microsoft YaHei",Arial,sans-serif}
|
||
body{display:grid;place-items:center}
|
||
h1,h2,h3,h4,p{margin:0}
|
||
.deck{position:relative;width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 8% 10%,rgba(23,105,255,.14),transparent 26%),radial-gradient(circle at 92% 86%,rgba(18,185,201,.14),transparent 26%),#eef4ff}
|
||
.slide{position:relative;display:none;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
|
||
.slide.active{display:block}
|
||
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,105,255,.045) 1px,transparent 1px),linear-gradient(rgba(23,105,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse at 44% 42%,black 10%,transparent 78%);pointer-events:none}
|
||
.slide::after{content:"";position:absolute;left:-90px;bottom:-70px;width:500px;height:150px;background:repeating-linear-gradient(155deg,rgba(23,105,255,.12) 0 2px,transparent 2px 11px);transform:skewX(-18deg);opacity:.45;pointer-events:none}
|
||
.canvas{position:relative;z-index:1;height:100%;padding:34px 48px 30px;display:flex;flex-direction:column;gap:16px}
|
||
.topbar{height:68px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border-bottom:2px solid #dbe8ff;padding-bottom:12px}
|
||
.sec{width:116px;height:54px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:29px;font-weight:950;background:linear-gradient(135deg,#0457e8,#178cff);clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%);letter-spacing:.02em}
|
||
.title h2{font-size:29px;line-height:1.08;color:var(--ink);font-weight:950;letter-spacing:0}
|
||
.title p{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.35}
|
||
.mark{display:flex;align-items:center;gap:9px;color:var(--blue);font-weight:950;font-size:13px}
|
||
.mark i,.mark .lucide-icon{width:38px;height:38px;border:2px solid var(--blue);border-radius:12px;display:grid;place-items:center;font-style:normal;background:#fff;padding:8px;color:var(--blue)}
|
||
.body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
|
||
.foot{height:34px;border-top:1px solid #dbe8ff;padding-top:10px;display:flex;justify-content:space-between;align-items:flex-start;color:#7d90b4;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
|
||
.corner{position:absolute;right:0;bottom:0;width:82px;height:50px;background:linear-gradient(135deg,var(--blue),var(--blue2));clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);color:#fff;font-weight:950;font-size:17px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 11px;z-index:2}
|
||
.kicker{color:var(--blue);font-size:13px;font-weight:950;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
|
||
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center}
|
||
.hero h1{font-size:50px;line-height:1.1;color:var(--ink);font-weight:950;letter-spacing:0}
|
||
.hero .lead{margin-top:18px;font-size:20px;line-height:1.55;color:var(--muted);max-width:760px}
|
||
.accent{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.panel{border:1.5px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(20,84,170,.10);padding:18px}
|
||
.panel.blue{background:linear-gradient(135deg,#eef6ff,#ffffff);border-color:#9dc2ff}
|
||
.panel.dark{background:#061c49;color:#eaf2ff;border-color:#061c49}
|
||
.panel.dark p,.panel.dark li{color:#c9dbff}
|
||
.panel h3{font-size:19px;color:var(--ink);font-weight:950;margin-bottom:8px}
|
||
.panel.dark h3{color:#fff}
|
||
.panel p,.panel li{font-size:14px;line-height:1.58;color:var(--muted)}
|
||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
|
||
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
|
||
.tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;background:#eaf3ff;color:var(--blue);font-size:12px;font-weight:950;margin-bottom:10px}
|
||
.tag .lucide-icon{width:14px;height:14px;stroke-width:2.4}
|
||
.tag.green{background:#e8fbf4;color:var(--green)}
|
||
.tag.orange{background:#fff4df;color:#bd6b00}
|
||
.tag.red{background:#fff0f4;color:var(--red)}
|
||
.tag.cyan{background:#e7fbff;color:#098fa0}
|
||
.mini-list{display:grid;gap:7px}
|
||
.mini-list span{position:relative;padding-left:15px;color:var(--text);font-size:14px;line-height:1.45}
|
||
.mini-list span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
|
||
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}
|
||
.step{position:relative;border:1.5px solid #bdd6ff;border-radius:14px;background:#fff;padding:14px;min-height:132px;box-shadow:0 10px 22px rgba(23,105,255,.08)}
|
||
.step::after{content:"";position:absolute;right:-11px;top:50%;width:10px;height:2px;background:#83b2ff}
|
||
.step:last-child::after{display:none}
|
||
.num{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;font-size:14px;font-weight:950;margin-bottom:9px}
|
||
.num .lucide-icon{width:17px;height:17px}
|
||
.step h3{font-size:16px;color:var(--ink);font-weight:950}
|
||
.step p{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
|
||
.wide-flow{display:grid;grid-template-columns:1fr 58px 1fr 58px 1fr;gap:12px;align-items:center}
|
||
.arrow{height:48px;border-radius:999px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-size:26px;font-weight:950}
|
||
.compare{display:grid;grid-template-columns:1fr 82px 1fr;gap:16px;align-items:center}
|
||
.mid{height:82px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:26px;font-weight:950;box-shadow:0 14px 28px rgba(23,105,255,.22)}
|
||
.problem-map{display:grid;grid-template-columns:1fr 170px 1fr;gap:16px;align-items:center}
|
||
.limit-stack{display:grid;gap:12px}
|
||
.limit{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;border:1.5px solid #cfe0ff;border-radius:14px;background:#fff;padding:13px}
|
||
.limit b{font-size:15px;color:var(--ink)}
|
||
.limit p{font-size:12.5px;line-height:1.42;color:var(--muted);margin-top:3px}
|
||
.badge-center{width:155px;height:155px;border-radius:34px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;text-align:center;font-size:24px;line-height:1.25;font-weight:950;box-shadow:0 18px 34px rgba(23,105,255,.25)}
|
||
.ribbon-row{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center;margin:11px 0}
|
||
.ribbon{height:70px;border-radius:12px 0 0 12px;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);display:flex;align-items:center;padding-left:20px;color:#fff;background:linear-gradient(135deg,var(--blue),#0051d9);font-size:20px;font-weight:950}
|
||
.ribbon.green{background:linear-gradient(135deg,#089d86,#12b9c9)}
|
||
.ribbon.orange{background:linear-gradient(135deg,#f59e0b,#ef7d00)}
|
||
.ribbon-box{min-height:70px;border:1.5px solid var(--line);border-radius:13px;background:#fff;display:grid;grid-template-columns:70px 1fr;align-items:center;gap:16px;padding:13px 18px}
|
||
.round-icon{width:54px;height:54px;border-radius:50%;background:#eef6ff;border:1.5px solid #bdd6ff;display:grid;place-items:center;color:var(--blue);font-weight:950;font-size:20px}
|
||
.round-icon .lucide-icon{width:25px;height:25px;stroke-width:2.2}
|
||
.matrix{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:center}
|
||
.chunk{border-left:5px solid var(--blue);background:#f6faff;border-radius:10px;padding:11px 12px;margin-top:9px}
|
||
.chunk h4{font-size:14px;color:var(--ink);margin-bottom:4px}
|
||
.chunk p{font-size:12.3px;line-height:1.42;color:var(--muted)}
|
||
.vector{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:12px}
|
||
.bar{height:48px;border-radius:7px;background:var(--blue);opacity:.24}
|
||
.bar:nth-child(2n){opacity:.48}.bar:nth-child(3n){opacity:.76}.bar:nth-child(5n){opacity:.92}
|
||
.rank-list{display:grid;gap:9px}
|
||
.rank{display:grid;grid-template-columns:38px 1fr 52px;gap:10px;align-items:center;border:1.5px solid #cfe0ff;border-radius:12px;background:#fff;padding:10px}
|
||
.rank .r{width:34px;height:34px;border-radius:9px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:950}
|
||
.rank strong{font-size:14px;color:var(--ink)}
|
||
.rank span{font-size:12px;color:var(--muted)}
|
||
.score{font-size:18px;font-weight:950;color:var(--green);text-align:right}
|
||
.prompt{background:#061c49;color:#e9f2ff;border-radius:16px;padding:16px 18px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12.5px;line-height:1.62;box-shadow:0 16px 30px rgba(6,28,73,.22)}
|
||
.prompt b{color:#7dd3fc}.prompt mark{background:rgba(250,204,21,.16);color:#fde68a;border-radius:4px;padding:1px 4px}
|
||
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
|
||
.metric{border:1.5px solid #cfe0ff;border-radius:14px;background:#fff;padding:14px;min-height:142px}
|
||
.metric .big{font-size:28px;line-height:1;color:var(--blue);font-weight:950;margin-bottom:8px;display:flex;align-items:center;gap:8px}
|
||
.metric .big .lucide-icon{width:26px;height:26px;stroke-width:2.2}
|
||
.metric h3{font-size:16px;color:var(--ink);font-weight:950;margin-bottom:6px}
|
||
.metric p{font-size:12.5px;line-height:1.45;color:var(--muted)}
|
||
.agent-grid{display:grid;grid-template-columns:1fr 62px 1fr 62px 1fr;gap:10px;align-items:center}
|
||
.agent{min-height:176px;border:1.5px solid #cfe0ff;border-radius:16px;background:#fff;text-align:center;padding:16px}
|
||
.agent .round-icon{margin:0 auto 11px}
|
||
.agent h3{font-size:17px;color:var(--ink);font-weight:950}
|
||
.agent p{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px}
|
||
.bus-layout{display:grid;grid-template-columns:.95fr 1.2fr 1fr;gap:16px;align-items:center}
|
||
.bus{height:110px;border-radius:24px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;text-align:center;font-size:25px;font-weight:950;box-shadow:0 16px 30px rgba(23,105,255,.24)}
|
||
.bus span{font-size:13px;font-weight:700;margin-top:5px;opacity:.92}
|
||
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||
.tool{border:1.5px solid #cfe0ff;border-radius:13px;background:#fff;padding:12px;text-align:center;color:var(--ink);font-weight:950}
|
||
.tool .lucide-icon{width:22px;height:22px;color:var(--blue);display:block;margin:0 auto 6px;stroke-width:2.2}
|
||
.tool span{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:4px}
|
||
.answer-template{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
||
.answer-card{border:1.5px solid #bdd6ff;border-radius:15px;background:#fff;padding:13px;min-height:134px;box-shadow:0 10px 22px rgba(23,105,255,.08)}
|
||
.answer-card h3{font-size:16px;color:var(--ink);font-weight:950;margin-bottom:7px}
|
||
.answer-card p{font-size:12px;line-height:1.42;color:var(--muted)}
|
||
.takeaway{margin-top:16px;border:1.5px solid #9dc2ff;border-radius:18px;background:linear-gradient(135deg,#eef6ff,#fff);padding:18px;text-align:center}
|
||
.takeaway h3{font-size:27px;color:var(--ink);font-weight:950}
|
||
.nav-controls{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(16,32,71,.12);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(16,32,71,.12);backdrop-filter:blur(10px);opacity:.76;transition:opacity .18s ease,background .18s ease}
|
||
.nav-controls:hover,.nav-controls:focus-within{opacity:1;background:rgba(255,255,255,.96)}
|
||
.nav-btn{width:32px;height:32px;border:0;border-radius:50%;background:#061b4e;color:#fff;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
||
.nav-btn:disabled{opacity:.32;cursor:not-allowed}
|
||
.nav-index{min-width:60px;text-align:center;font-size:13px;font-weight:950;color:var(--muted)}
|
||
.progress{position:fixed;left:0;right:0;bottom:0;height:4px;background:#dbe6f6;z-index:25}
|
||
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .2s ease}
|
||
.notes{display:none}
|
||
@media (min-width:901px) and (max-width:1100px){
|
||
.canvas{padding:24px 34px 22px;gap:10px}
|
||
.hero h1{font-size:38px;line-height:1.08}
|
||
.hero .lead{font-size:16px;line-height:1.42;margin-top:10px}
|
||
.panel{padding:12px}
|
||
.panel h3{font-size:16px;margin-bottom:5px}
|
||
.panel p,.panel li{font-size:12px;line-height:1.42}
|
||
.grid3{gap:8px}
|
||
.tag{min-height:22px;font-size:11px;margin-bottom:6px}
|
||
.foot{height:28px;padding-top:8px}
|
||
.corner{width:72px;height:42px;font-size:15px;padding:0 14px 9px}
|
||
}
|
||
@media (max-width:900px){
|
||
html,body{height:auto;min-height:100%;overflow:auto}
|
||
body{display:block;background:#fff}
|
||
.deck{display:block;height:auto;min-height:100vh;background:#fff}
|
||
.slide{width:100%;height:auto;min-height:100vh;box-shadow:none}
|
||
.canvas{padding:26px 20px 34px}
|
||
.topbar{height:auto;grid-template-columns:1fr;gap:10px}
|
||
.sec{width:110px}
|
||
.mark{display:none}
|
||
.body{justify-content:flex-start;padding-top:20px}
|
||
.hero,.grid2,.grid3,.grid4,.matrix,.problem-map,.bus-layout,.agent-grid,.wide-flow,.compare{grid-template-columns:1fr}
|
||
.flow,.metric-grid,.answer-template{grid-template-columns:1fr}
|
||
.step::after,.arrow,.mid{display:none}
|
||
.ribbon-row{grid-template-columns:1fr}
|
||
.ribbon{clip-path:none;border-radius:12px}
|
||
.ribbon-box{grid-template-columns:1fr}
|
||
.corner{display:none}
|
||
}
|
||
/* 版式升级：从网页卡片感改成技术汇报型 PPT 视觉系统 */
|
||
@media (min-width:901px){
|
||
:root{
|
||
--bg:#e8edf5;
|
||
--paper:#fbfcff;
|
||
--ink:#071636;
|
||
--text:#172846;
|
||
--muted:#62708a;
|
||
--blue:#145cff;
|
||
--blue2:#083b9f;
|
||
--cyan:#09aebd;
|
||
--green:#0d9b7b;
|
||
--orange:#ed9700;
|
||
--red:#db3d59;
|
||
--line:#d5deec;
|
||
--soft:#f5f8fc;
|
||
--shadow:0 28px 70px rgba(20,34,63,.18),0 2px 10px rgba(20,34,63,.08);
|
||
}
|
||
body{background:#dfe5ef}
|
||
.deck{
|
||
background:
|
||
linear-gradient(135deg,rgba(7,22,54,.06) 0 25%,transparent 25% 100%),
|
||
linear-gradient(0deg,#e6ebf3,#f2f5f9);
|
||
}
|
||
.slide{
|
||
background:var(--paper);
|
||
border:1px solid rgba(116,133,165,.28);
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.slide::before{
|
||
content:"";
|
||
position:absolute;
|
||
inset:0;
|
||
background:
|
||
linear-gradient(90deg,#071636 0 14px,transparent 14px),
|
||
linear-gradient(90deg,rgba(20,92,255,.06) 1px,transparent 1px),
|
||
linear-gradient(rgba(20,92,255,.05) 1px,transparent 1px);
|
||
background-size:auto,42px 42px,42px 42px;
|
||
mask-image:linear-gradient(90deg,#000 0 52%,transparent 96%);
|
||
opacity:.82;
|
||
pointer-events:none;
|
||
}
|
||
.slide::after{
|
||
content:"";
|
||
position:absolute;
|
||
right:0;
|
||
top:0;
|
||
width:360px;
|
||
height:130px;
|
||
background:
|
||
linear-gradient(135deg,rgba(20,92,255,.15),rgba(9,174,189,.10)),
|
||
repeating-linear-gradient(135deg,rgba(7,22,54,.08) 0 2px,transparent 2px 12px);
|
||
clip-path:polygon(28% 0,100% 0,100% 100%,0 0);
|
||
pointer-events:none;
|
||
}
|
||
.canvas{
|
||
padding:42px 58px 34px 66px;
|
||
display:grid;
|
||
grid-template-rows:auto minmax(0,1fr) auto;
|
||
gap:22px;
|
||
}
|
||
.topbar{
|
||
height:82px;
|
||
display:grid;
|
||
grid-template-columns:82px minmax(0,1fr) 172px;
|
||
gap:18px;
|
||
align-items:start;
|
||
border-bottom:1px solid var(--line);
|
||
padding-bottom:16px;
|
||
position:relative;
|
||
}
|
||
.topbar::after{
|
||
content:"";
|
||
position:absolute;
|
||
left:100px;
|
||
right:0;
|
||
bottom:-1px;
|
||
height:3px;
|
||
background:linear-gradient(90deg,var(--blue),var(--cyan),transparent 72%);
|
||
}
|
||
.sec{
|
||
width:72px;
|
||
height:56px;
|
||
clip-path:none;
|
||
border-radius:8px;
|
||
background:#071636;
|
||
border-left:7px solid var(--cyan);
|
||
color:#fff;
|
||
font-size:26px;
|
||
letter-spacing:0;
|
||
box-shadow:none;
|
||
}
|
||
.title h2{
|
||
font-size:31px;
|
||
line-height:1.08;
|
||
color:var(--ink);
|
||
font-weight:950;
|
||
max-width:920px;
|
||
}
|
||
.title p{
|
||
margin-top:8px;
|
||
font-size:14px;
|
||
line-height:1.35;
|
||
color:var(--muted);
|
||
}
|
||
.mark{
|
||
justify-content:flex-end;
|
||
gap:9px;
|
||
color:var(--blue2);
|
||
font-size:12px;
|
||
letter-spacing:.08em;
|
||
text-transform:uppercase;
|
||
}
|
||
.mark i,.mark .lucide-icon{
|
||
width:34px;
|
||
height:34px;
|
||
border:1px solid #b9c8df;
|
||
border-radius:8px;
|
||
background:#fff;
|
||
color:var(--blue);
|
||
padding:7px;
|
||
}
|
||
.body{
|
||
min-height:0;
|
||
justify-content:center;
|
||
}
|
||
.foot{
|
||
height:30px;
|
||
border-top:1px solid var(--line);
|
||
padding-top:10px;
|
||
color:#7b879a;
|
||
font-size:10px;
|
||
letter-spacing:.16em;
|
||
}
|
||
.corner{display:none}
|
||
.kicker{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
height:28px;
|
||
padding:0 12px;
|
||
border:1px solid #b9c8df;
|
||
border-left:4px solid var(--blue);
|
||
border-radius:6px;
|
||
background:#fff;
|
||
color:var(--blue2);
|
||
font-size:12px;
|
||
letter-spacing:.16em;
|
||
}
|
||
.hero{
|
||
grid-template-columns:minmax(0,1.04fr) minmax(380px,.78fr);
|
||
gap:34px;
|
||
align-items:center;
|
||
}
|
||
.hero h1{
|
||
font-size:57px;
|
||
line-height:1.04;
|
||
letter-spacing:0;
|
||
}
|
||
.hero .lead{
|
||
margin-top:20px;
|
||
max-width:730px;
|
||
font-size:19px;
|
||
line-height:1.6;
|
||
color:#475872;
|
||
}
|
||
.accent{
|
||
color:var(--blue);
|
||
background:none;
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent,.tool,.rank,.ribbon-box{
|
||
box-shadow:none;
|
||
}
|
||
.panel{
|
||
position:relative;
|
||
border:1px solid var(--line);
|
||
border-top:3px solid #9fb8df;
|
||
border-radius:8px;
|
||
background:linear-gradient(180deg,#fff,#f8fafc);
|
||
padding:18px 18px 17px;
|
||
}
|
||
.panel.blue{
|
||
background:linear-gradient(180deg,#eef5ff,#fff);
|
||
border-color:#b9ccee;
|
||
border-top-color:var(--blue);
|
||
}
|
||
.panel.dark{
|
||
background:#071636;
|
||
border-color:#071636;
|
||
}
|
||
.panel h3{
|
||
font-size:18px;
|
||
line-height:1.25;
|
||
margin-bottom:8px;
|
||
color:var(--ink);
|
||
}
|
||
.panel p,.panel li{
|
||
font-size:13.2px;
|
||
line-height:1.55;
|
||
color:var(--muted);
|
||
}
|
||
.tag{
|
||
min-height:24px;
|
||
padding:0 9px;
|
||
border-radius:6px;
|
||
background:#edf4ff;
|
||
color:var(--blue2);
|
||
font-size:11px;
|
||
letter-spacing:.03em;
|
||
margin-bottom:10px;
|
||
}
|
||
.tag.green{background:#e9f8f4;color:var(--green)}
|
||
.tag.orange{background:#fff4df;color:#a86500}
|
||
.tag.red{background:#fff0f3;color:var(--red)}
|
||
.tag.cyan{background:#e7fbff;color:#087d8b}
|
||
.mini-list{gap:8px}
|
||
.mini-list span{
|
||
padding-left:17px;
|
||
font-size:13.2px;
|
||
line-height:1.48;
|
||
}
|
||
.mini-list span::before{
|
||
top:.58em;
|
||
width:7px;
|
||
height:7px;
|
||
border-radius:2px;
|
||
background:var(--cyan);
|
||
}
|
||
.grid2{gap:20px}
|
||
.grid3{gap:16px}
|
||
.grid4,.metric-grid{gap:16px}
|
||
.flow{
|
||
gap:14px;
|
||
position:relative;
|
||
}
|
||
.step{
|
||
min-height:150px;
|
||
border:1px solid var(--line);
|
||
border-top:4px solid var(--blue);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
padding:16px 14px;
|
||
}
|
||
.step::after{
|
||
right:-14px;
|
||
width:14px;
|
||
height:1px;
|
||
background:#aab8cd;
|
||
}
|
||
.num{
|
||
width:36px;
|
||
height:36px;
|
||
border-radius:8px;
|
||
background:#071636;
|
||
color:#fff;
|
||
font-size:14px;
|
||
margin-bottom:11px;
|
||
}
|
||
.num .lucide-icon{width:18px;height:18px}
|
||
.step h3{font-size:16px;line-height:1.2}
|
||
.step p{font-size:12.2px;line-height:1.48}
|
||
.wide-flow{gap:14px}
|
||
.arrow{
|
||
height:44px;
|
||
border-radius:8px;
|
||
border:1px solid var(--line);
|
||
background:#f3f6fb;
|
||
color:var(--blue);
|
||
font-size:22px;
|
||
box-shadow:none;
|
||
}
|
||
.compare{grid-template-columns:1fr 80px 1fr;gap:18px}
|
||
.compare .panel{min-height:250px}
|
||
.mid{
|
||
width:78px;
|
||
height:78px;
|
||
border-radius:8px;
|
||
background:#071636;
|
||
box-shadow:none;
|
||
font-size:28px;
|
||
}
|
||
.problem-map{
|
||
grid-template-columns:1.05fr 180px 1.05fr;
|
||
gap:18px;
|
||
}
|
||
.limit-stack{gap:14px}
|
||
.limit{
|
||
grid-template-columns:44px 1fr;
|
||
border:1px solid var(--line);
|
||
border-left:4px solid var(--blue);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
padding:14px;
|
||
}
|
||
.limit b{font-size:15px}
|
||
.limit p{font-size:12.2px;line-height:1.45}
|
||
.badge-center{
|
||
width:164px;
|
||
height:164px;
|
||
border-radius:10px;
|
||
background:#071636;
|
||
box-shadow:none;
|
||
font-size:25px;
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.badge-center::after{
|
||
content:"";
|
||
position:absolute;
|
||
inset:10px;
|
||
border:1px solid rgba(255,255,255,.18);
|
||
pointer-events:none;
|
||
}
|
||
.ribbon-row{
|
||
grid-template-columns:178px minmax(0,1fr);
|
||
gap:16px;
|
||
margin:14px 0;
|
||
}
|
||
.ribbon{
|
||
height:76px;
|
||
clip-path:none;
|
||
border-radius:8px;
|
||
background:#071636;
|
||
border-left:7px solid var(--blue);
|
||
padding-left:18px;
|
||
font-size:19px;
|
||
}
|
||
.ribbon.green{background:#071636;border-left-color:var(--green)}
|
||
.ribbon.orange{background:#071636;border-left-color:var(--orange)}
|
||
.ribbon-box{
|
||
min-height:76px;
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
grid-template-columns:64px 1fr;
|
||
gap:16px;
|
||
padding:14px 18px;
|
||
}
|
||
.round-icon{
|
||
width:52px;
|
||
height:52px;
|
||
border-radius:8px;
|
||
border:0;
|
||
background:#071636;
|
||
color:#fff;
|
||
}
|
||
.round-icon .lucide-icon{width:24px;height:24px}
|
||
.matrix{
|
||
grid-template-columns:1.05fr .95fr;
|
||
gap:22px;
|
||
}
|
||
.chunk{
|
||
border:1px solid var(--line);
|
||
border-left:4px solid var(--blue);
|
||
border-radius:6px;
|
||
background:#fff;
|
||
padding:12px 13px;
|
||
}
|
||
.chunk h4{font-size:14px}
|
||
.chunk p{font-size:12.2px}
|
||
.vector{gap:7px}
|
||
.bar{height:54px;border-radius:4px;background:var(--blue)}
|
||
.rank{
|
||
grid-template-columns:40px 1fr 58px;
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
padding:10px 12px;
|
||
}
|
||
.rank .r{
|
||
width:34px;
|
||
height:34px;
|
||
border-radius:8px;
|
||
background:#071636;
|
||
color:#fff;
|
||
}
|
||
.score{color:var(--green);font-size:18px}
|
||
.prompt{
|
||
border-radius:8px;
|
||
background:#071636;
|
||
border:1px solid #213c70;
|
||
box-shadow:none;
|
||
font-size:12.4px;
|
||
line-height:1.66;
|
||
padding:18px;
|
||
}
|
||
.metric{
|
||
position:relative;
|
||
min-height:158px;
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
padding:18px 16px 16px;
|
||
overflow:hidden;
|
||
}
|
||
.metric::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:0;
|
||
top:0;
|
||
width:100%;
|
||
height:4px;
|
||
background:linear-gradient(90deg,var(--blue),var(--cyan));
|
||
}
|
||
.metric .big{
|
||
font-size:28px;
|
||
margin-bottom:12px;
|
||
color:var(--blue2);
|
||
}
|
||
.metric .big .lucide-icon{width:25px;height:25px}
|
||
.metric h3{font-size:15px;line-height:1.25}
|
||
.metric p{font-size:12.2px;line-height:1.47}
|
||
.agent-grid{gap:12px}
|
||
.agent{
|
||
min-height:188px;
|
||
border:1px solid var(--line);
|
||
border-top:4px solid var(--blue);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
padding:18px 16px;
|
||
}
|
||
.agent h3{font-size:17px}
|
||
.agent p{font-size:12.2px}
|
||
.bus-layout{
|
||
grid-template-columns:.95fr 1.18fr 1fr;
|
||
gap:18px;
|
||
}
|
||
.bus{
|
||
height:118px;
|
||
border-radius:8px;
|
||
background:#071636;
|
||
box-shadow:none;
|
||
font-size:28px;
|
||
}
|
||
.tool-grid{gap:10px}
|
||
.tool{
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
padding:12px;
|
||
}
|
||
.answer-template{gap:14px}
|
||
.answer-card{
|
||
position:relative;
|
||
min-height:148px;
|
||
border:1px solid var(--line);
|
||
border-top:4px solid var(--blue);
|
||
border-radius:8px;
|
||
background:#fff;
|
||
padding:16px;
|
||
}
|
||
.answer-card h3{font-size:16px}
|
||
.answer-card p{font-size:12.1px;line-height:1.45}
|
||
.takeaway{
|
||
margin-top:18px;
|
||
border:1px solid #b9ccee;
|
||
border-left:6px solid var(--cyan);
|
||
border-radius:8px;
|
||
background:linear-gradient(90deg,#f0f7ff,#fff);
|
||
padding:16px 18px;
|
||
text-align:left;
|
||
}
|
||
.takeaway h3{
|
||
font-size:22px;
|
||
line-height:1.34;
|
||
color:var(--ink);
|
||
}
|
||
.nav-controls{
|
||
bottom:14px;
|
||
padding:5px;
|
||
border-radius:8px;
|
||
border:1px solid rgba(7,22,54,.18);
|
||
background:rgba(255,255,255,.92);
|
||
box-shadow:0 8px 22px rgba(20,34,63,.14);
|
||
}
|
||
.nav-btn{
|
||
width:32px;
|
||
height:30px;
|
||
border-radius:6px;
|
||
background:#071636;
|
||
}
|
||
.progress{height:3px;background:#cfd8e6}
|
||
.progress span{background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green))}
|
||
section[data-title="封面"] .canvas{
|
||
grid-template-rows:1fr auto;
|
||
padding:50px 62px 38px 74px;
|
||
}
|
||
section[data-title="封面"] .hero{height:100%}
|
||
section[data-title="封面"] .grid3{margin-top:26px!important}
|
||
section[data-title="封面"] .grid3 .panel{
|
||
min-height:126px;
|
||
}
|
||
section[data-title="封面"] .panel.blue{
|
||
min-height:620px;
|
||
display:flex;
|
||
align-items:center;
|
||
background:#071636;
|
||
border:0;
|
||
color:#fff;
|
||
padding:28px;
|
||
overflow:hidden;
|
||
}
|
||
section[data-title="封面"] .panel.blue::after{
|
||
content:"";
|
||
position:absolute;
|
||
inset:16px;
|
||
border:1px solid rgba(255,255,255,.16);
|
||
pointer-events:none;
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel{
|
||
background:rgba(255,255,255,.08);
|
||
border:1px solid rgba(255,255,255,.18);
|
||
border-left:4px solid var(--cyan);
|
||
color:#fff;
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel h3{color:#fff}
|
||
section[data-title="封面"] .panel.blue .panel p{color:#c9d8ef}
|
||
section[data-title="封面"] .panel.blue .arrow{
|
||
height:26px;
|
||
border:0;
|
||
background:transparent;
|
||
color:#7dd3fc;
|
||
font-size:24px;
|
||
}
|
||
section[data-title="RAG 总架构"] .panel,
|
||
section[data-title="生成与提示词"] .panel.blue,
|
||
section[data-title="切片与元数据"] .panel{
|
||
min-height:300px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
min-height:138px;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-template{
|
||
grid-template-columns:repeat(3,1fr);
|
||
}
|
||
section[data-title="学习路线"] .flow,
|
||
section[data-title="在线检索流程"] .flow{
|
||
padding-top:18px;
|
||
isolation:isolate;
|
||
}
|
||
section[data-title="学习路线"] .flow::before,
|
||
section[data-title="在线检索流程"] .flow::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:5%;
|
||
right:5%;
|
||
top:36px;
|
||
height:2px;
|
||
background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green));
|
||
z-index:0;
|
||
}
|
||
section[data-title="学习路线"] .flow .step,
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
z-index:1;
|
||
}
|
||
section[data-title="学习路线"] .flow .step:nth-child(2),
|
||
section[data-title="在线检索流程"] .flow .step:nth-child(2){border-top-color:var(--cyan)}
|
||
section[data-title="学习路线"] .flow .step:nth-child(3),
|
||
section[data-title="在线检索流程"] .flow .step:nth-child(3){border-top-color:var(--green)}
|
||
section[data-title="学习路线"] .flow .step:nth-child(4),
|
||
section[data-title="在线检索流程"] .flow .step:nth-child(4){border-top-color:var(--orange)}
|
||
section[data-title="学习路线"] .flow .step:nth-child(5),
|
||
section[data-title="在线检索流程"] .flow .step:nth-child(5){border-top-color:var(--red)}
|
||
section[data-title="RAG 总架构"] .grid2{
|
||
position:relative;
|
||
gap:28px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:50%;
|
||
top:22px;
|
||
bottom:22px;
|
||
width:1px;
|
||
background:linear-gradient(#b9c8df,transparent 20%,transparent 80%,#b9c8df);
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2>.panel{
|
||
padding-top:46px;
|
||
overflow:hidden;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2>.panel::before{
|
||
content:"OFFLINE INDEXING";
|
||
position:absolute;
|
||
left:18px;
|
||
top:16px;
|
||
height:20px;
|
||
padding:0 8px;
|
||
display:flex;
|
||
align-items:center;
|
||
border-radius:5px;
|
||
background:#071636;
|
||
color:#fff;
|
||
font-size:10px;
|
||
font-weight:950;
|
||
letter-spacing:.12em;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2>.panel:nth-child(2)::before{
|
||
content:"ONLINE RUNTIME";
|
||
background:var(--green);
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2 .flow{
|
||
align-items:stretch;
|
||
}
|
||
section[data-title="离线建库流程"] .body{
|
||
counter-reset:stage;
|
||
position:relative;
|
||
}
|
||
section[data-title="离线建库流程"] .body::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:206px;
|
||
top:36px;
|
||
bottom:36px;
|
||
width:2px;
|
||
background:linear-gradient(var(--blue),var(--green),var(--orange));
|
||
}
|
||
section[data-title="离线建库流程"] .ribbon-row{
|
||
counter-increment:stage;
|
||
position:relative;
|
||
}
|
||
section[data-title="离线建库流程"] .ribbon::before{
|
||
content:counter(stage, decimal-leading-zero);
|
||
width:34px;
|
||
height:34px;
|
||
margin-right:12px;
|
||
border-radius:6px;
|
||
display:grid;
|
||
place-items:center;
|
||
background:rgba(255,255,255,.12);
|
||
color:#fff;
|
||
font-size:13px;
|
||
letter-spacing:.04em;
|
||
}
|
||
section[data-title="切片与元数据"] .vector{
|
||
padding:12px;
|
||
border:1px solid #c5d5eb;
|
||
background:#f8fbff;
|
||
border-radius:8px;
|
||
}
|
||
section[data-title="在线检索流程"] .rank-list{
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
overflow:hidden;
|
||
gap:0;
|
||
}
|
||
section[data-title="在线检索流程"] .rank{
|
||
border:0;
|
||
border-bottom:1px solid var(--line);
|
||
border-radius:0;
|
||
}
|
||
section[data-title="在线检索流程"] .rank:last-child{border-bottom:0}
|
||
section[data-title="生成与提示词"] .prompt{
|
||
min-height:312px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
justify-content:center;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2{
|
||
gap:10px;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .panel{
|
||
border-top-width:2px;
|
||
min-height:104px;
|
||
padding:13px;
|
||
}
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(2)::before{background:linear-gradient(90deg,var(--cyan),var(--green))}
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(3)::before{background:linear-gradient(90deg,var(--green),var(--orange))}
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(4)::before{background:linear-gradient(90deg,var(--orange),var(--red))}
|
||
section[data-title="常见失败场景"] .grid3:first-child .panel:nth-child(1){border-top-color:var(--red)}
|
||
section[data-title="常见失败场景"] .grid3:first-child .panel:nth-child(2){border-top-color:var(--orange)}
|
||
section[data-title="常见失败场景"] .grid3:first-child .panel:nth-child(3){border-top-color:var(--blue)}
|
||
section[data-title="Agent"] .agent-grid{
|
||
position:relative;
|
||
padding-top:8px;
|
||
}
|
||
section[data-title="Agent"] .agent-grid::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:11%;
|
||
right:11%;
|
||
top:72px;
|
||
height:2px;
|
||
background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green));
|
||
}
|
||
section[data-title="Agent"] .agent,
|
||
section[data-title="Agent"] .arrow{z-index:1}
|
||
section[data-title="MCP"] .bus-layout{
|
||
position:relative;
|
||
}
|
||
section[data-title="MCP"] .bus-layout::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:31%;
|
||
right:31%;
|
||
top:50%;
|
||
height:2px;
|
||
background:linear-gradient(90deg,var(--blue),var(--cyan));
|
||
z-index:0;
|
||
}
|
||
section[data-title="MCP"] .panel,
|
||
section[data-title="MCP"] .bus,
|
||
section[data-title="MCP"] .tool-grid{
|
||
position:relative;
|
||
z-index:1;
|
||
}
|
||
section[data-title="MCP"] .tool-grid{
|
||
padding:12px;
|
||
border:1px solid var(--line);
|
||
border-radius:8px;
|
||
background:#f7faff;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(1){border-top-color:#071636}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(2){border-top-color:var(--blue)}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(3){border-top-color:var(--cyan)}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(4){border-top-color:var(--green)}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(5){border-top-color:var(--orange)}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(6){border-top-color:var(--red)}
|
||
}
|
||
@media (min-width:901px) and (max-width:1100px){
|
||
.canvas{padding:28px 38px 26px 46px;gap:12px}
|
||
.topbar{height:68px;grid-template-columns:66px 1fr 136px;gap:12px;padding-bottom:10px}
|
||
.topbar::after{left:78px}
|
||
.sec{width:58px;height:46px;font-size:21px}
|
||
.title h2{font-size:23px}
|
||
.title p{font-size:11.5px;margin-top:4px}
|
||
.mark{font-size:10px}
|
||
.mark i,.mark .lucide-icon{width:28px;height:28px;padding:6px}
|
||
.hero{gap:18px;grid-template-columns:1fr .8fr}
|
||
.hero h1{font-size:37px;line-height:1.06}
|
||
.hero .lead{font-size:14.5px;line-height:1.42;margin-top:10px}
|
||
.panel{padding:11px}
|
||
.panel h3{font-size:14.5px;margin-bottom:4px}
|
||
.panel p,.panel li,.mini-list span{font-size:10.8px;line-height:1.34}
|
||
.tag{min-height:20px;font-size:9.5px;margin-bottom:5px}
|
||
.step{min-height:116px;padding:10px}
|
||
.step h3{font-size:13px}
|
||
.step p{font-size:10px}
|
||
.num{width:28px;height:28px;border-radius:6px;margin-bottom:6px}
|
||
.metric{min-height:116px;padding:12px}
|
||
.metric .big{font-size:22px;margin-bottom:7px}
|
||
.metric h3{font-size:12.5px}
|
||
.metric p{font-size:10px}
|
||
.takeaway{padding:11px 13px;margin-top:10px}
|
||
.takeaway h3{font-size:16px;line-height:1.25}
|
||
.foot{height:24px;padding-top:7px;font-size:8.5px}
|
||
section[data-title="封面"] .canvas{padding:32px 38px 28px 48px}
|
||
section[data-title="封面"] .panel.blue{min-height:420px;padding:18px}
|
||
section[data-title="封面"] .grid3 .panel{min-height:96px}
|
||
}
|
||
/* 配色修正：撤掉跳色科技感，统一为克制蓝灰白 */
|
||
@media (min-width:901px){
|
||
:root{
|
||
--bg:#edf2f7;
|
||
--paper:#fbfcfe;
|
||
--ink:#111827;
|
||
--text:#1f2937;
|
||
--muted:#667085;
|
||
--blue:#2563eb;
|
||
--blue2:#1d4ed8;
|
||
--cyan:#3b82f6;
|
||
--green:#64748b;
|
||
--orange:#64748b;
|
||
--red:#64748b;
|
||
--line:#d8e0ec;
|
||
--soft:#f7f9fc;
|
||
--shadow:0 24px 64px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06);
|
||
}
|
||
body{background:#e7ecf3}
|
||
.deck{background:linear-gradient(180deg,#f3f6fa,#e7ecf3)}
|
||
.slide{
|
||
background:#fbfcfe;
|
||
border:1px solid #d8e0ec;
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.slide::before{
|
||
background:
|
||
linear-gradient(90deg,#111827 0 10px,transparent 10px),
|
||
linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px),
|
||
linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px);
|
||
background-size:auto,44px 44px,44px 44px;
|
||
opacity:.72;
|
||
}
|
||
.slide::after{display:none}
|
||
.topbar{border-bottom-color:#d8e0ec}
|
||
.topbar::after{background:linear-gradient(90deg,#2563eb,#8ea7d7,transparent 76%)}
|
||
.sec{
|
||
background:#111827;
|
||
border-left-color:#2563eb;
|
||
}
|
||
.mark{color:#475569}
|
||
.mark i,.mark .lucide-icon{
|
||
border-color:#d8e0ec;
|
||
color:#2563eb;
|
||
background:#fff;
|
||
}
|
||
.kicker{
|
||
border-color:#d8e0ec;
|
||
border-left-color:#2563eb;
|
||
color:#1d4ed8;
|
||
background:#fff;
|
||
}
|
||
.accent{color:#1d4ed8}
|
||
.panel{
|
||
background:#fff;
|
||
border-color:#d8e0ec;
|
||
border-top-color:#aab7ca;
|
||
}
|
||
.panel.blue{
|
||
background:#f8fbff;
|
||
border-color:#d8e0ec;
|
||
border-top-color:#2563eb;
|
||
}
|
||
.panel.dark,.prompt{
|
||
background:#111827;
|
||
border-color:#273449;
|
||
}
|
||
.tag,.tag.green,.tag.orange,.tag.red,.tag.cyan{
|
||
background:#eef2f7;
|
||
color:#475569;
|
||
}
|
||
.tag .lucide-icon{color:#2563eb}
|
||
.mini-list span::before{background:#2563eb}
|
||
.step,.metric,.agent,.answer-card{
|
||
background:#fff;
|
||
border-color:#d8e0ec;
|
||
border-top-color:#2563eb;
|
||
}
|
||
.step::after{background:#c7d2e4}
|
||
.num,.mid,.badge-center,.round-icon,.rank .r,.bus,.nav-btn{
|
||
background:#111827;
|
||
color:#fff;
|
||
}
|
||
.arrow{
|
||
background:#f3f6fa;
|
||
border-color:#d8e0ec;
|
||
color:#2563eb;
|
||
}
|
||
.limit{
|
||
border-color:#d8e0ec;
|
||
border-left-color:#2563eb;
|
||
}
|
||
.ribbon,.ribbon.green,.ribbon.orange{
|
||
background:#111827;
|
||
border-left-color:#2563eb;
|
||
}
|
||
.chunk{border-color:#d8e0ec;border-left-color:#2563eb}
|
||
.bar{background:#2563eb}
|
||
.score{color:#1d4ed8}
|
||
.metric::before,
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(2)::before,
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(3)::before,
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(4)::before{
|
||
background:#2563eb;
|
||
}
|
||
.metric .big{color:#1d4ed8}
|
||
.takeaway{
|
||
background:#f8fbff;
|
||
border-color:#d8e0ec;
|
||
border-left-color:#2563eb;
|
||
}
|
||
.progress span{background:#2563eb}
|
||
section[data-title="封面"] .panel.blue{
|
||
background:#f8fbff;
|
||
border:1px solid #d8e0ec;
|
||
color:var(--text);
|
||
}
|
||
section[data-title="封面"] .panel.blue::after{
|
||
border-color:#d8e0ec;
|
||
opacity:.65;
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel{
|
||
background:#fff;
|
||
border:1px solid #d8e0ec;
|
||
border-left:4px solid #2563eb;
|
||
color:var(--text);
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel h3{color:var(--ink)}
|
||
section[data-title="封面"] .panel.blue .panel p{color:var(--muted)}
|
||
section[data-title="封面"] .panel.blue .arrow{color:#64748b}
|
||
section[data-title="学习路线"] .flow::before,
|
||
section[data-title="在线检索流程"] .flow::before,
|
||
section[data-title="Agent"] .agent-grid::before,
|
||
section[data-title="MCP"] .bus-layout::before{
|
||
background:#c7d2e4;
|
||
}
|
||
section[data-title="学习路线"] .flow .step:nth-child(n),
|
||
section[data-title="在线检索流程"] .flow .step:nth-child(n),
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(n),
|
||
section[data-title="常见失败场景"] .grid3:first-child .panel:nth-child(n){
|
||
border-top-color:#2563eb;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2>.panel::before,
|
||
section[data-title="RAG 总架构"] .grid2>.panel:nth-child(2)::before{
|
||
background:#111827;
|
||
}
|
||
}
|
||
/* Carbon palette pass：基于 IBM Carbon 的 White / Gray 10 / Blue 60 */
|
||
@media (min-width:901px){
|
||
:root{
|
||
--bg:#f4f4f4;
|
||
--paper:#ffffff;
|
||
--ink:#161616;
|
||
--text:#393939;
|
||
--muted:#6f6f6f;
|
||
--blue:#0f62fe;
|
||
--blue2:#0043ce;
|
||
--cyan:#0f62fe;
|
||
--green:#525252;
|
||
--orange:#525252;
|
||
--red:#525252;
|
||
--line:#e0e0e0;
|
||
--soft:#f4f4f4;
|
||
--shadow:0 26px 64px rgba(22,22,22,.12),0 2px 8px rgba(22,22,22,.06);
|
||
}
|
||
body{background:#e0e0e0}
|
||
.deck{background:#e0e0e0}
|
||
.slide{
|
||
background:#fff;
|
||
border:1px solid #c6c6c6;
|
||
}
|
||
.slide::before{
|
||
background:
|
||
linear-gradient(90deg,#161616 0 12px,transparent 12px),
|
||
linear-gradient(90deg,rgba(15,98,254,.035) 1px,transparent 1px),
|
||
linear-gradient(rgba(15,98,254,.03) 1px,transparent 1px);
|
||
background-size:auto,44px 44px,44px 44px;
|
||
opacity:.68;
|
||
}
|
||
.canvas{padding-top:40px}
|
||
.title h2{color:#161616}
|
||
.title p,.panel p,.panel li,.metric p,.step p,.agent p,.answer-card p,.mini-list span{color:#525252}
|
||
.topbar{border-bottom-color:#e0e0e0}
|
||
.topbar::after{height:2px;background:linear-gradient(90deg,#0f62fe,#78a9ff,transparent 76%)}
|
||
.sec,.num,.mid,.badge-center,.round-icon,.rank .r,.bus,.nav-btn{
|
||
background:#161616;
|
||
}
|
||
.sec{border-left-color:#0f62fe}
|
||
.panel,.metric,.step,.answer-card,.agent,.tool,.ribbon-box,.rank{
|
||
background:#fff;
|
||
border-color:#e0e0e0;
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent{
|
||
border-top-color:#0f62fe;
|
||
}
|
||
.panel.blue{background:#f4f4f4;border-color:#e0e0e0;border-top-color:#0f62fe}
|
||
.mark i,.mark .lucide-icon,.kicker,.tool-grid{
|
||
border-color:#e0e0e0;
|
||
}
|
||
.mark,.kicker,.accent,.metric .big,.score,.tool .lucide-icon{color:#0f62fe}
|
||
.tag,.tag.green,.tag.orange,.tag.red,.tag.cyan{
|
||
background:#edf5ff;
|
||
color:#0043ce;
|
||
}
|
||
.arrow{background:#f4f4f4;border-color:#e0e0e0;color:#0f62fe}
|
||
.takeaway{
|
||
background:#f4f4f4;
|
||
border:1px solid #e0e0e0;
|
||
border-left:5px solid #0f62fe;
|
||
}
|
||
.takeaway h3{color:#161616}
|
||
.ribbon,.ribbon.green,.ribbon.orange{
|
||
background:#161616;
|
||
border-left-color:#0f62fe;
|
||
}
|
||
.prompt,.panel.dark{background:#161616;border-color:#393939}
|
||
.vector,.tool-grid{background:#f4f4f4}
|
||
.bar,.metric::before,
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(2)::before,
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(3)::before,
|
||
section[data-title="如何评估 RAG"] .metric:nth-child(4)::before{
|
||
background:#0f62fe;
|
||
}
|
||
.progress span{background:#0f62fe}
|
||
section[data-title="封面"] .panel.blue{
|
||
background:#f4f4f4;
|
||
border:1px solid #e0e0e0;
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel{
|
||
background:#fff;
|
||
border:1px solid #e0e0e0;
|
||
border-left:4px solid #0f62fe;
|
||
}
|
||
section[data-title="学习路线"] .body{
|
||
justify-content:flex-start;
|
||
padding-top:74px;
|
||
}
|
||
section[data-title="学习路线"] .flow::before,
|
||
section[data-title="在线检索流程"] .flow::before,
|
||
section[data-title="Agent"] .agent-grid::before,
|
||
section[data-title="MCP"] .bus-layout::before{
|
||
background:#c6c6c6;
|
||
}
|
||
section[data-title="学习路线"] .flow .step,
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
border-top-width:3px;
|
||
}
|
||
section[data-title="学习路线"] .takeaway{
|
||
margin-top:28px;
|
||
padding:18px 22px;
|
||
}
|
||
section[data-title="学习路线"] .takeaway h3{
|
||
font-size:21px;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card:nth-child(n),
|
||
section[data-title="常见失败场景"] .grid3:first-child .panel:nth-child(n){
|
||
border-top-color:#0f62fe;
|
||
}
|
||
}
|
||
/* Reference visual pass：按用户参考图重建柔和蓝白 PPT 观感 */
|
||
@media (min-width:901px){
|
||
:root{
|
||
--sky-0:#f8fbff;
|
||
--sky-1:#eef5ff;
|
||
--sky-2:#dbeafe;
|
||
--brand:#1769ff;
|
||
--brand-deep:#0b4fe8;
|
||
--navy:#071833;
|
||
--copy:#4d6280;
|
||
}
|
||
.slide{
|
||
background:
|
||
radial-gradient(circle at -7% -11%,rgba(23,105,255,.44) 0 8%,rgba(23,105,255,.12) 8.5% 18%,transparent 18.5%),
|
||
radial-gradient(circle at 104% 32%,rgba(23,105,255,.08) 0 10%,transparent 10.5%),
|
||
radial-gradient(circle at -7% 109%,rgba(23,105,255,.55) 0 12%,rgba(23,105,255,.14) 12.5% 23%,transparent 23.5%),
|
||
linear-gradient(135deg,#f8fbff 0%,#fff 48%,#f2f7ff 100%);
|
||
border:0;
|
||
}
|
||
.slide::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:0;
|
||
top:0;
|
||
width:210px;
|
||
height:150px;
|
||
background:radial-gradient(circle,rgba(23,105,255,.34) 2px,transparent 2.7px);
|
||
background-size:18px 18px;
|
||
mask-image:radial-gradient(circle at 10% 0,#000 0 58%,transparent 74%);
|
||
opacity:.85;
|
||
}
|
||
.slide::after{
|
||
content:"";
|
||
position:absolute;
|
||
right:0;
|
||
bottom:0;
|
||
width:190px;
|
||
height:150px;
|
||
background:radial-gradient(circle,rgba(23,105,255,.23) 2px,transparent 2.7px);
|
||
background-size:18px 18px;
|
||
opacity:.75;
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent,.tool,.ribbon-box,.rank{
|
||
border-color:#dbe8ff;
|
||
box-shadow:0 18px 45px rgba(28,91,184,.10);
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent{
|
||
border-radius:14px;
|
||
}
|
||
.topbar{border-bottom-color:#dbe8ff}
|
||
.topbar::after{background:linear-gradient(90deg,var(--brand),#bcd2ff,transparent 72%)}
|
||
.mark i,.mark .lucide-icon{
|
||
border-color:#dbe8ff;
|
||
box-shadow:0 12px 26px rgba(23,105,255,.12);
|
||
}
|
||
.takeaway{
|
||
border-radius:14px;
|
||
background:rgba(255,255,255,.68);
|
||
box-shadow:0 16px 42px rgba(28,91,184,.10);
|
||
}
|
||
.nav-controls{
|
||
border:1px solid #dbe8ff;
|
||
border-radius:18px;
|
||
box-shadow:0 16px 34px rgba(28,91,184,.18);
|
||
}
|
||
.nav-btn{
|
||
border-radius:12px;
|
||
background:linear-gradient(135deg,var(--brand),var(--brand-deep));
|
||
}
|
||
section[data-title="学习路线"] .canvas{
|
||
padding:56px 58px 40px 66px;
|
||
gap:22px;
|
||
}
|
||
section[data-title="学习路线"] .topbar{
|
||
height:184px;
|
||
grid-template-columns:140px minmax(0,1fr) 250px;
|
||
align-items:center;
|
||
border-bottom:0;
|
||
padding-bottom:0;
|
||
}
|
||
section[data-title="学习路线"] .topbar::after{
|
||
left:0;
|
||
right:0;
|
||
bottom:0;
|
||
height:4px;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,var(--brand) 0 11%,#d7e5ff 11% 100%);
|
||
}
|
||
section[data-title="学习路线"] .sec{
|
||
position:relative;
|
||
width:112px;
|
||
height:112px;
|
||
border:0;
|
||
border-radius:14px;
|
||
background:linear-gradient(145deg,#5aa1ff 0%,#1769ff 45%,#0755e8 100%);
|
||
box-shadow:0 24px 42px rgba(23,105,255,.32);
|
||
font-size:46px;
|
||
font-weight:900;
|
||
overflow:visible;
|
||
}
|
||
section[data-title="学习路线"] .sec::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:-12px;
|
||
top:-12px;
|
||
width:92px;
|
||
height:92px;
|
||
border-radius:14px;
|
||
background:linear-gradient(145deg,rgba(90,161,255,.48),rgba(23,105,255,.24));
|
||
z-index:-1;
|
||
}
|
||
section[data-title="学习路线"] .title h2{
|
||
max-width:850px;
|
||
font-size:48px;
|
||
line-height:1.18;
|
||
color:var(--navy);
|
||
text-shadow:0 8px 22px rgba(7,24,51,.08);
|
||
}
|
||
section[data-title="学习路线"] .title p{
|
||
margin-top:16px;
|
||
font-size:18px;
|
||
color:#607391;
|
||
}
|
||
section[data-title="学习路线"] .mark{
|
||
justify-content:center;
|
||
gap:14px;
|
||
color:#214f9e;
|
||
font-size:16px;
|
||
letter-spacing:.04em;
|
||
}
|
||
section[data-title="学习路线"] .mark i,
|
||
section[data-title="学习路线"] .mark .lucide-icon{
|
||
width:56px;
|
||
height:56px;
|
||
border-radius:12px;
|
||
padding:13px;
|
||
color:var(--brand);
|
||
background:rgba(255,255,255,.74);
|
||
}
|
||
section[data-title="学习路线"] .body{
|
||
justify-content:flex-start;
|
||
padding-top:64px;
|
||
}
|
||
section[data-title="学习路线"] .flow{
|
||
gap:28px;
|
||
padding-top:0;
|
||
}
|
||
section[data-title="学习路线"] .flow::before{
|
||
left:7%;
|
||
right:7%;
|
||
top:144px;
|
||
height:2px;
|
||
background:#c6dbff;
|
||
}
|
||
section[data-title="学习路线"] .step{
|
||
min-height:250px;
|
||
padding:24px 22px 22px;
|
||
border:1px solid #dbe8ff;
|
||
border-top:0;
|
||
border-radius:15px;
|
||
background:rgba(255,255,255,.84);
|
||
box-shadow:0 24px 52px rgba(38,96,180,.15);
|
||
backdrop-filter:blur(10px);
|
||
}
|
||
section[data-title="学习路线"] .step::after{
|
||
right:-28px;
|
||
top:142px;
|
||
width:28px;
|
||
height:2px;
|
||
background:#b9d4ff;
|
||
box-shadow:14px 0 0 -4px var(--brand);
|
||
}
|
||
section[data-title="学习路线"] .num{
|
||
position:absolute;
|
||
left:20px;
|
||
top:20px;
|
||
width:38px;
|
||
height:38px;
|
||
border-radius:50%;
|
||
background:linear-gradient(145deg,#448fff,#0f62fe);
|
||
color:#fff;
|
||
font-size:18px;
|
||
box-shadow:0 10px 22px rgba(15,98,254,.32);
|
||
}
|
||
.visual-icon{
|
||
height:96px;
|
||
margin:46px auto 18px;
|
||
display:grid;
|
||
place-items:center;
|
||
color:#fff;
|
||
position:relative;
|
||
}
|
||
.visual-icon::before{
|
||
content:"";
|
||
position:absolute;
|
||
width:78px;
|
||
height:62px;
|
||
border-radius:18px;
|
||
background:linear-gradient(145deg,#69adff,#0f62fe);
|
||
box-shadow:0 18px 30px rgba(15,98,254,.28),inset 0 8px 14px rgba(255,255,255,.28);
|
||
transform:rotate(-4deg);
|
||
}
|
||
.visual-icon::after{
|
||
content:"";
|
||
position:absolute;
|
||
width:72px;
|
||
height:16px;
|
||
bottom:7px;
|
||
border-radius:50%;
|
||
background:rgba(15,98,254,.16);
|
||
filter:blur(6px);
|
||
}
|
||
.visual-icon .lucide-icon{
|
||
position:relative;
|
||
z-index:1;
|
||
width:48px;
|
||
height:48px;
|
||
stroke-width:2.4;
|
||
filter:drop-shadow(0 6px 10px rgba(0,54,154,.30));
|
||
}
|
||
section[data-title="学习路线"] .step h3{
|
||
margin-top:0;
|
||
font-size:23px;
|
||
color:var(--navy);
|
||
}
|
||
section[data-title="学习路线"] .step p{
|
||
margin-top:18px;
|
||
font-size:16px;
|
||
line-height:1.65;
|
||
color:var(--copy);
|
||
}
|
||
section[data-title="学习路线"] .answer-flow{
|
||
height:108px;
|
||
margin-top:38px;
|
||
padding:0 34px;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:24px;
|
||
border:1px solid #cfe0ff;
|
||
border-left:0;
|
||
background:rgba(255,255,255,.76);
|
||
}
|
||
section[data-title="学习路线"] .answer-flow::before{
|
||
content:"";
|
||
width:7px;
|
||
align-self:stretch;
|
||
margin-left:-34px;
|
||
border-radius:999px;
|
||
background:linear-gradient(180deg,#5aa1ff,#0f62fe);
|
||
}
|
||
.answer-lead,.answer-node{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:14px;
|
||
white-space:nowrap;
|
||
}
|
||
.answer-lead h3{
|
||
font-size:24px;
|
||
color:var(--navy);
|
||
}
|
||
.answer-icon,.answer-node .lucide-icon{
|
||
width:54px;
|
||
height:54px;
|
||
border-radius:50%;
|
||
display:grid;
|
||
place-items:center;
|
||
background:linear-gradient(145deg,#6fb0ff,#0f62fe);
|
||
color:#fff;
|
||
box-shadow:0 12px 26px rgba(15,98,254,.22);
|
||
}
|
||
.answer-icon .lucide-icon{width:28px;height:28px}
|
||
.answer-node .lucide-icon{
|
||
width:46px;
|
||
height:46px;
|
||
padding:11px;
|
||
background:#eaf3ff;
|
||
color:var(--brand);
|
||
box-shadow:none;
|
||
}
|
||
.answer-node span{
|
||
color:#263b5d;
|
||
font-size:16px;
|
||
font-weight:700;
|
||
}
|
||
.answer-arrow{
|
||
color:#8aa2c6;
|
||
font-size:30px;
|
||
font-weight:600;
|
||
}
|
||
}
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
section[data-title="学习路线"] .canvas{
|
||
padding:34px 42px 28px 48px;
|
||
gap:14px;
|
||
}
|
||
section[data-title="学习路线"] .topbar{
|
||
height:132px;
|
||
grid-template-columns:104px minmax(0,1fr) 190px;
|
||
}
|
||
section[data-title="学习路线"] .sec{
|
||
width:86px;
|
||
height:86px;
|
||
border-radius:12px;
|
||
font-size:34px;
|
||
}
|
||
section[data-title="学习路线"] .sec::before{
|
||
left:-9px;
|
||
top:-9px;
|
||
width:70px;
|
||
height:70px;
|
||
border-radius:12px;
|
||
}
|
||
section[data-title="学习路线"] .title h2{
|
||
font-size:35px;
|
||
line-height:1.14;
|
||
}
|
||
section[data-title="学习路线"] .title p{
|
||
margin-top:8px;
|
||
font-size:14px;
|
||
}
|
||
section[data-title="学习路线"] .mark{
|
||
gap:10px;
|
||
font-size:12px;
|
||
}
|
||
section[data-title="学习路线"] .mark i,
|
||
section[data-title="学习路线"] .mark .lucide-icon{
|
||
width:40px;
|
||
height:40px;
|
||
padding:9px;
|
||
}
|
||
section[data-title="学习路线"] .body{
|
||
padding-top:34px;
|
||
}
|
||
section[data-title="学习路线"] .flow{
|
||
gap:18px;
|
||
}
|
||
section[data-title="学习路线"] .flow::before{
|
||
top:116px;
|
||
}
|
||
section[data-title="学习路线"] .step{
|
||
min-height:208px;
|
||
padding:18px 16px 16px;
|
||
}
|
||
section[data-title="学习路线"] .step::after{
|
||
right:-18px;
|
||
top:116px;
|
||
width:18px;
|
||
}
|
||
section[data-title="学习路线"] .num{
|
||
left:16px;
|
||
top:16px;
|
||
width:32px;
|
||
height:32px;
|
||
font-size:15px;
|
||
}
|
||
.visual-icon{
|
||
height:74px;
|
||
margin:38px auto 12px;
|
||
}
|
||
.visual-icon::before{
|
||
width:62px;
|
||
height:50px;
|
||
border-radius:14px;
|
||
}
|
||
.visual-icon .lucide-icon{
|
||
width:38px;
|
||
height:38px;
|
||
}
|
||
section[data-title="学习路线"] .step h3{
|
||
font-size:18px;
|
||
}
|
||
section[data-title="学习路线"] .step p{
|
||
margin-top:10px;
|
||
font-size:12.5px;
|
||
line-height:1.48;
|
||
}
|
||
section[data-title="学习路线"] .answer-flow{
|
||
height:76px;
|
||
margin-top:22px;
|
||
padding:0 20px;
|
||
gap:12px;
|
||
}
|
||
section[data-title="学习路线"] .answer-flow::before{
|
||
margin-left:-20px;
|
||
width:6px;
|
||
}
|
||
.answer-lead,.answer-node{
|
||
gap:9px;
|
||
}
|
||
.answer-lead h3{
|
||
font-size:18px;
|
||
}
|
||
.answer-icon{
|
||
width:40px;
|
||
height:40px;
|
||
}
|
||
.answer-icon .lucide-icon{
|
||
width:22px;
|
||
height:22px;
|
||
}
|
||
.answer-node .lucide-icon{
|
||
width:34px;
|
||
height:34px;
|
||
padding:8px;
|
||
}
|
||
.answer-node span{
|
||
font-size:12px;
|
||
}
|
||
.answer-arrow{
|
||
font-size:20px;
|
||
}
|
||
}
|
||
/* Full-deck reference pass：把参考图的蓝白柔和、立体图标、卡片深度推广到全页 */
|
||
@media (min-width:901px){
|
||
.slide{
|
||
background:
|
||
radial-gradient(circle at -8% -9%,rgba(23,105,255,.42) 0 8%,rgba(23,105,255,.12) 8.5% 18%,transparent 18.5%),
|
||
radial-gradient(circle at 104% 31%,rgba(23,105,255,.08) 0 11%,transparent 11.5%),
|
||
radial-gradient(circle at -8% 110%,rgba(23,105,255,.50) 0 12%,rgba(23,105,255,.13) 12.5% 23%,transparent 23.5%),
|
||
linear-gradient(135deg,#f8fbff 0%,#fff 46%,#f1f6ff 100%);
|
||
box-shadow:0 30px 80px rgba(28,91,184,.18);
|
||
}
|
||
.slide::before{
|
||
left:0;
|
||
top:0;
|
||
width:220px;
|
||
height:160px;
|
||
background:radial-gradient(circle,rgba(23,105,255,.30) 2px,transparent 2.8px);
|
||
background-size:18px 18px;
|
||
mask-image:radial-gradient(circle at 8% 0,#000 0 60%,transparent 76%);
|
||
opacity:.75;
|
||
}
|
||
.slide::after{
|
||
display:block;
|
||
right:0;
|
||
bottom:0;
|
||
top:auto;
|
||
width:205px;
|
||
height:155px;
|
||
background:radial-gradient(circle,rgba(23,105,255,.22) 2px,transparent 2.8px);
|
||
background-size:18px 18px;
|
||
clip-path:none;
|
||
opacity:.7;
|
||
}
|
||
.canvas{
|
||
padding:46px 58px 34px 66px;
|
||
}
|
||
.topbar{
|
||
height:112px;
|
||
grid-template-columns:104px minmax(0,1fr) 220px;
|
||
align-items:center;
|
||
border-bottom:0;
|
||
padding-bottom:0;
|
||
}
|
||
.topbar::after{
|
||
left:0;
|
||
right:0;
|
||
bottom:0;
|
||
height:3px;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,var(--brand) 0 12%,#d7e5ff 12% 100%);
|
||
}
|
||
.sec{
|
||
position:relative;
|
||
width:76px;
|
||
height:76px;
|
||
border:0;
|
||
border-radius:14px;
|
||
background:linear-gradient(145deg,#67adff 0%,#1769ff 46%,#0755e8 100%);
|
||
box-shadow:0 18px 34px rgba(23,105,255,.30);
|
||
color:#fff;
|
||
font-size:30px;
|
||
overflow:visible;
|
||
}
|
||
.sec::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:-9px;
|
||
top:-9px;
|
||
width:62px;
|
||
height:62px;
|
||
border-radius:14px;
|
||
background:linear-gradient(145deg,rgba(103,173,255,.42),rgba(23,105,255,.18));
|
||
z-index:-1;
|
||
}
|
||
.title h2{
|
||
color:var(--navy);
|
||
font-size:34px;
|
||
line-height:1.16;
|
||
text-shadow:0 8px 22px rgba(7,24,51,.06);
|
||
}
|
||
.title p{
|
||
margin-top:10px;
|
||
color:#637798;
|
||
font-size:15px;
|
||
}
|
||
.mark{
|
||
justify-content:center;
|
||
gap:12px;
|
||
color:#214f9e;
|
||
font-size:14px;
|
||
letter-spacing:.04em;
|
||
}
|
||
.mark i,.mark .lucide-icon{
|
||
width:48px;
|
||
height:48px;
|
||
border-radius:12px;
|
||
padding:11px;
|
||
color:var(--brand);
|
||
background:rgba(255,255,255,.78);
|
||
border:1px solid #dbe8ff;
|
||
box-shadow:0 14px 28px rgba(23,105,255,.14);
|
||
}
|
||
.body{
|
||
justify-content:center;
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent,.tool,.ribbon-box,.rank,.chunk{
|
||
border:1px solid #dbe8ff;
|
||
border-radius:16px;
|
||
background:rgba(255,255,255,.84);
|
||
box-shadow:0 20px 48px rgba(38,96,180,.13);
|
||
backdrop-filter:blur(10px);
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent{
|
||
border-top:0;
|
||
}
|
||
.panel::after,.metric::after,.step::before,.answer-card::after,.agent::after{
|
||
content:"";
|
||
position:absolute;
|
||
left:20px;
|
||
bottom:16px;
|
||
width:28px;
|
||
height:5px;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,#1769ff,#6fb0ff);
|
||
}
|
||
.panel.blue{
|
||
background:rgba(246,250,255,.88);
|
||
border-color:#cfe0ff;
|
||
}
|
||
.panel h3,.metric h3,.step h3,.agent h3,.answer-card h3{
|
||
color:var(--navy);
|
||
}
|
||
.panel p,.metric p,.step p,.agent p,.answer-card p,.mini-list span,.rank span,.chunk p{
|
||
color:#516987;
|
||
}
|
||
.tag,.tag.green,.tag.orange,.tag.red,.tag.cyan{
|
||
background:#edf5ff;
|
||
color:#185abc;
|
||
border:1px solid #dbe8ff;
|
||
box-shadow:0 8px 18px rgba(23,105,255,.08);
|
||
}
|
||
.num,.round-icon,.rank .r{
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
color:#fff;
|
||
box-shadow:0 12px 26px rgba(15,98,254,.24),inset 0 8px 14px rgba(255,255,255,.20);
|
||
}
|
||
.num .lucide-icon,.round-icon .lucide-icon{
|
||
color:#fff;
|
||
filter:drop-shadow(0 5px 8px rgba(0,54,154,.28));
|
||
}
|
||
.step{
|
||
min-height:156px;
|
||
padding:18px 15px 24px;
|
||
}
|
||
.step::after{
|
||
background:#b9d4ff;
|
||
}
|
||
.metric{
|
||
min-height:158px;
|
||
padding-bottom:24px;
|
||
}
|
||
.metric::before{
|
||
display:none;
|
||
}
|
||
.metric .big{
|
||
color:var(--navy);
|
||
gap:12px;
|
||
}
|
||
.metric .big .lucide-icon{
|
||
width:42px;
|
||
height:42px;
|
||
padding:10px;
|
||
border-radius:14px;
|
||
background:linear-gradient(145deg,#6fb0ff,#0f62fe);
|
||
color:#fff;
|
||
box-shadow:0 12px 24px rgba(15,98,254,.24);
|
||
}
|
||
.mid,.badge-center,.bus{
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
box-shadow:0 18px 34px rgba(15,98,254,.26);
|
||
}
|
||
.limit{
|
||
border:1px solid #dbe8ff;
|
||
border-left:0;
|
||
border-radius:16px;
|
||
background:rgba(255,255,255,.86);
|
||
box-shadow:0 18px 42px rgba(38,96,180,.12);
|
||
}
|
||
.limit .num{
|
||
border-radius:14px;
|
||
}
|
||
.ribbon{
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
border-left:0;
|
||
border-radius:16px;
|
||
box-shadow:0 18px 36px rgba(15,98,254,.24);
|
||
}
|
||
.ribbon.green,.ribbon.orange{
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
border-left:0;
|
||
}
|
||
.ribbon::before{
|
||
background:rgba(255,255,255,.22);
|
||
}
|
||
.ribbon-box{
|
||
background:rgba(255,255,255,.86);
|
||
}
|
||
.chunk{
|
||
border-left:4px solid #1769ff;
|
||
}
|
||
.vector{
|
||
border-color:#dbe8ff;
|
||
background:rgba(255,255,255,.54);
|
||
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
|
||
}
|
||
.bar{
|
||
background:linear-gradient(180deg,#6fb0ff,#0f62fe);
|
||
box-shadow:0 12px 18px rgba(15,98,254,.12);
|
||
}
|
||
.rank-list{
|
||
border-color:#dbe8ff;
|
||
box-shadow:0 16px 32px rgba(38,96,180,.10);
|
||
}
|
||
.score{
|
||
color:#0f62fe;
|
||
}
|
||
.prompt{
|
||
border:0;
|
||
border-radius:16px;
|
||
background:linear-gradient(145deg,#061b4a,#0b2c72);
|
||
box-shadow:0 22px 50px rgba(6,27,74,.24);
|
||
}
|
||
.tool-grid{
|
||
border-color:#dbe8ff;
|
||
background:rgba(255,255,255,.58);
|
||
box-shadow:0 18px 42px rgba(38,96,180,.10);
|
||
}
|
||
.tool{
|
||
background:rgba(255,255,255,.9);
|
||
box-shadow:0 14px 28px rgba(38,96,180,.10);
|
||
}
|
||
.tool .lucide-icon{
|
||
width:38px;
|
||
height:38px;
|
||
padding:9px;
|
||
border-radius:13px;
|
||
background:linear-gradient(145deg,#6fb0ff,#0f62fe);
|
||
color:#fff;
|
||
box-shadow:0 10px 22px rgba(15,98,254,.22);
|
||
}
|
||
.agent .round-icon{
|
||
margin-bottom:16px;
|
||
}
|
||
.takeaway{
|
||
min-height:76px;
|
||
display:flex;
|
||
align-items:center;
|
||
text-align:left;
|
||
border:1px solid #cfe0ff;
|
||
border-left:0;
|
||
border-radius:16px;
|
||
background:rgba(255,255,255,.74);
|
||
box-shadow:0 18px 42px rgba(38,96,180,.12);
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.takeaway::before{
|
||
content:"";
|
||
width:7px;
|
||
align-self:stretch;
|
||
margin:-18px 22px -18px -18px;
|
||
border-radius:999px;
|
||
background:linear-gradient(180deg,#5aa1ff,#0f62fe);
|
||
flex:0 0 auto;
|
||
}
|
||
.takeaway h3{
|
||
color:var(--navy);
|
||
font-size:22px;
|
||
line-height:1.34;
|
||
}
|
||
.foot{
|
||
border-top:0;
|
||
color:#8aa2c6;
|
||
}
|
||
section[data-title="封面"] .canvas{
|
||
padding:56px 62px 38px 74px;
|
||
}
|
||
section[data-title="封面"] .hero{
|
||
gap:34px;
|
||
}
|
||
section[data-title="封面"] .kicker{
|
||
border-color:#dbe8ff;
|
||
background:rgba(255,255,255,.78);
|
||
color:#185abc;
|
||
box-shadow:0 12px 28px rgba(23,105,255,.10);
|
||
}
|
||
section[data-title="封面"] .hero h1{
|
||
color:var(--navy);
|
||
text-shadow:0 12px 26px rgba(7,24,51,.08);
|
||
}
|
||
section[data-title="封面"] .lead{
|
||
color:#637798;
|
||
}
|
||
section[data-title="封面"] .panel.blue{
|
||
background:rgba(255,255,255,.68);
|
||
border:1px solid #dbe8ff;
|
||
box-shadow:0 24px 56px rgba(38,96,180,.14);
|
||
}
|
||
section[data-title="封面"] .panel.blue::after{
|
||
display:none;
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel{
|
||
background:rgba(255,255,255,.86);
|
||
border:1px solid #dbe8ff;
|
||
border-left:0;
|
||
color:var(--text);
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel h3{
|
||
color:var(--navy);
|
||
}
|
||
section[data-title="封面"] .panel.blue .panel p{
|
||
color:#516987;
|
||
}
|
||
section[data-title="封面"] .panel.blue .arrow{
|
||
color:#8aa2c6;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2>.panel::before,
|
||
section[data-title="RAG 总架构"] .grid2>.panel:nth-child(2)::before{
|
||
background:linear-gradient(90deg,#1769ff,#6fb0ff);
|
||
border-radius:999px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2::before,
|
||
section[data-title="离线建库流程"] .body::before,
|
||
section[data-title="Agent"] .agent-grid::before,
|
||
section[data-title="MCP"] .bus-layout::before,
|
||
section[data-title="在线检索流程"] .flow::before{
|
||
background:#c6dbff;
|
||
}
|
||
.answer-card{
|
||
padding-bottom:28px;
|
||
}
|
||
.answer-card .num{
|
||
border-radius:14px;
|
||
}
|
||
}
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
.canvas{
|
||
padding:30px 38px 24px 46px;
|
||
gap:12px;
|
||
}
|
||
.topbar{
|
||
height:82px;
|
||
grid-template-columns:78px minmax(0,1fr) 150px;
|
||
gap:12px;
|
||
}
|
||
.sec{
|
||
width:58px;
|
||
height:58px;
|
||
border-radius:12px;
|
||
font-size:22px;
|
||
}
|
||
.sec::before{
|
||
left:-7px;
|
||
top:-7px;
|
||
width:46px;
|
||
height:46px;
|
||
border-radius:12px;
|
||
}
|
||
.title h2{
|
||
font-size:24px;
|
||
}
|
||
.title p{
|
||
font-size:12px;
|
||
margin-top:4px;
|
||
}
|
||
.mark{
|
||
font-size:10px;
|
||
}
|
||
.mark i,.mark .lucide-icon{
|
||
width:32px;
|
||
height:32px;
|
||
padding:7px;
|
||
}
|
||
.panel,.metric,.step,.answer-card,.agent,.tool,.ribbon-box,.rank,.chunk{
|
||
border-radius:12px;
|
||
}
|
||
.panel{padding:12px}
|
||
.panel h3{font-size:15px}
|
||
.panel p,.panel li,.mini-list span{font-size:11px;line-height:1.38}
|
||
.step{min-height:118px;padding:10px 10px 20px}
|
||
.step h3{font-size:13px}
|
||
.step p{font-size:10px;line-height:1.35}
|
||
.num{width:28px;height:28px;border-radius:10px}
|
||
.metric{min-height:120px;padding:12px 11px 22px}
|
||
.metric .big{font-size:21px;margin-bottom:7px}
|
||
.metric .big .lucide-icon{width:31px;height:31px;padding:7px;border-radius:10px}
|
||
.metric h3{font-size:12.5px}
|
||
.metric p{font-size:10px}
|
||
.takeaway{min-height:58px;padding:10px 12px}
|
||
.takeaway::before{margin:-10px 14px -10px -12px}
|
||
.takeaway h3{font-size:16px}
|
||
.prompt{font-size:10.2px;padding:12px}
|
||
.ribbon-row{grid-template-columns:138px minmax(0,1fr);gap:10px;margin:9px 0}
|
||
.ribbon{height:58px;font-size:15px}
|
||
.ribbon-box{min-height:58px;padding:10px 12px;grid-template-columns:46px 1fr}
|
||
.round-icon{width:40px;height:40px;border-radius:12px}
|
||
.round-icon .lucide-icon{width:21px;height:21px}
|
||
section[data-title="封面"] .canvas{padding:34px 38px 26px 48px}
|
||
section[data-title="封面"] .panel.blue{min-height:420px}
|
||
}
|
||
/* Final audit pass：收敛流程卡片与底部流程条，避免伪元素撑出滚动尺寸 */
|
||
@media (min-width:901px){
|
||
.body{
|
||
min-height:0;
|
||
justify-content:center;
|
||
}
|
||
.flow{
|
||
gap:16px;
|
||
align-items:stretch;
|
||
}
|
||
.step{
|
||
display:flex;
|
||
flex-direction:column;
|
||
min-height:166px;
|
||
padding:18px 15px 26px;
|
||
}
|
||
.step::after{
|
||
display:none;
|
||
}
|
||
.step h3{
|
||
line-height:1.18;
|
||
}
|
||
.step p{
|
||
line-height:1.44;
|
||
}
|
||
.takeaway::before{
|
||
position:absolute;
|
||
left:0;
|
||
top:0;
|
||
bottom:0;
|
||
width:7px;
|
||
margin:0;
|
||
}
|
||
.takeaway{
|
||
padding-left:28px;
|
||
}
|
||
section[data-title="学习路线"] .body{
|
||
padding-top:18px;
|
||
}
|
||
section[data-title="学习路线"] .flow{
|
||
grid-template-columns:repeat(5,minmax(0,1fr));
|
||
gap:16px;
|
||
padding-top:10px;
|
||
}
|
||
section[data-title="学习路线"] .flow::before{
|
||
top:88px;
|
||
left:6%;
|
||
right:6%;
|
||
height:3px;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,#b9d8ff,#d9e9ff);
|
||
}
|
||
section[data-title="学习路线"] .step{
|
||
min-height:238px;
|
||
padding:16px 14px 24px;
|
||
}
|
||
section[data-title="学习路线"] .num{
|
||
margin-bottom:0;
|
||
}
|
||
.visual-icon{
|
||
width:76px;
|
||
height:64px;
|
||
margin:34px auto 10px;
|
||
}
|
||
.visual-icon::before{
|
||
width:56px;
|
||
height:46px;
|
||
}
|
||
.visual-icon .lucide-icon{
|
||
width:34px;
|
||
height:34px;
|
||
}
|
||
section[data-title="学习路线"] .step h3{
|
||
font-size:17px;
|
||
line-height:1.18;
|
||
}
|
||
section[data-title="学习路线"] .step p{
|
||
margin-top:8px;
|
||
font-size:12.1px;
|
||
line-height:1.42;
|
||
}
|
||
section[data-title="学习路线"] .answer-flow{
|
||
position:relative;
|
||
min-height:76px;
|
||
height:76px;
|
||
margin-top:18px;
|
||
padding:0 18px 0 28px;
|
||
gap:11px;
|
||
overflow:visible;
|
||
}
|
||
section[data-title="学习路线"] .answer-flow::before{
|
||
left:0;
|
||
top:0;
|
||
bottom:0;
|
||
width:7px;
|
||
margin:0;
|
||
}
|
||
.answer-lead,
|
||
.answer-node{
|
||
min-width:0;
|
||
white-space:nowrap;
|
||
}
|
||
.answer-node span{
|
||
font-size:12px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow{
|
||
gap:14px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow::before{
|
||
top:55px;
|
||
height:3px;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,#b9d8ff,#d9e9ff);
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
min-height:166px;
|
||
padding:16px 14px 24px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2 .flow .step{
|
||
min-height:142px;
|
||
padding:14px 12px 22px;
|
||
}
|
||
}
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
.step{
|
||
min-height:128px;
|
||
padding:11px 10px 18px;
|
||
}
|
||
section[data-title="学习路线"] .body{
|
||
padding-top:10px;
|
||
}
|
||
section[data-title="学习路线"] .step{
|
||
min-height:178px;
|
||
padding:11px 10px 18px;
|
||
}
|
||
section[data-title="学习路线"] .flow::before{
|
||
top:68px;
|
||
}
|
||
.visual-icon{
|
||
width:72px;
|
||
height:48px;
|
||
margin:28px auto 7px;
|
||
}
|
||
.visual-icon::before{
|
||
width:44px;
|
||
height:36px;
|
||
border-radius:11px;
|
||
}
|
||
.visual-icon .lucide-icon{
|
||
width:27px;
|
||
height:27px;
|
||
}
|
||
section[data-title="学习路线"] .step h3{
|
||
font-size:13px;
|
||
}
|
||
section[data-title="学习路线"] .step p{
|
||
font-size:9.6px;
|
||
line-height:1.35;
|
||
}
|
||
section[data-title="学习路线"] .answer-flow{
|
||
height:58px;
|
||
min-height:58px;
|
||
gap:7px;
|
||
padding-left:22px;
|
||
}
|
||
.answer-lead h3{
|
||
font-size:14px;
|
||
}
|
||
.answer-icon,
|
||
.answer-node .lucide-icon{
|
||
width:28px;
|
||
height:28px;
|
||
padding:6px;
|
||
}
|
||
.answer-node span{
|
||
font-size:9.6px;
|
||
}
|
||
.answer-arrow{
|
||
font-size:14px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
min-height:128px;
|
||
padding:11px 10px 18px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow::before{
|
||
top:43px;
|
||
}
|
||
section[data-title="MCP"] .bus-layout{
|
||
gap:10px;
|
||
grid-template-columns:.9fr 1fr 1.06fr;
|
||
}
|
||
section[data-title="MCP"] .panel{
|
||
padding:10px;
|
||
}
|
||
section[data-title="MCP"] .panel h3{
|
||
font-size:13px;
|
||
}
|
||
section[data-title="MCP"] .panel p{
|
||
font-size:10px;
|
||
line-height:1.32;
|
||
}
|
||
section[data-title="MCP"] .bus{
|
||
height:86px;
|
||
font-size:22px;
|
||
}
|
||
section[data-title="MCP"] .bus span{
|
||
font-size:10px;
|
||
}
|
||
section[data-title="MCP"] .tool-grid{
|
||
gap:6px;
|
||
padding:8px;
|
||
}
|
||
section[data-title="MCP"] .tool{
|
||
padding:7px 6px;
|
||
font-size:11px;
|
||
}
|
||
section[data-title="MCP"] .tool .lucide-icon{
|
||
width:26px;
|
||
height:26px;
|
||
padding:6px;
|
||
margin-bottom:3px;
|
||
}
|
||
section[data-title="MCP"] .tool span{
|
||
font-size:9px;
|
||
margin-top:2px;
|
||
}
|
||
section[data-title="MCP"] .takeaway{
|
||
min-height:48px;
|
||
margin-top:10px;
|
||
padding:8px 10px 8px 22px;
|
||
}
|
||
section[data-title="MCP"] .takeaway h3{
|
||
font-size:13.5px;
|
||
line-height:1.24;
|
||
}
|
||
}
|
||
/* Presentation polish pass：降低网页控件感，并提升小投屏密集页可读性 */
|
||
@media (min-width:901px){
|
||
.nav-controls{
|
||
left:auto;
|
||
right:22px;
|
||
bottom:18px;
|
||
transform:none;
|
||
gap:4px;
|
||
padding:5px 6px;
|
||
border-radius:999px;
|
||
border:1px solid rgba(132,170,230,.26);
|
||
background:rgba(255,255,255,.32);
|
||
box-shadow:0 10px 24px rgba(38,96,180,.10);
|
||
opacity:.42;
|
||
backdrop-filter:blur(12px);
|
||
}
|
||
.nav-controls:hover,
|
||
.nav-controls:focus-within{
|
||
opacity:.96;
|
||
background:rgba(255,255,255,.90);
|
||
}
|
||
.nav-btn{
|
||
width:28px;
|
||
height:28px;
|
||
border-radius:50%;
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
box-shadow:0 8px 18px rgba(15,98,254,.20);
|
||
font-size:18px;
|
||
}
|
||
.nav-index{
|
||
min-width:48px;
|
||
font-size:11px;
|
||
color:rgba(33,79,158,.74);
|
||
}
|
||
.progress{
|
||
left:50%;
|
||
right:auto;
|
||
bottom:6px;
|
||
width:min(320px,36vw);
|
||
height:2px;
|
||
transform:translateX(-50%);
|
||
border-radius:999px;
|
||
background:rgba(185,212,255,.30);
|
||
opacity:.46;
|
||
}
|
||
.progress span{
|
||
border-radius:999px;
|
||
}
|
||
}
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
section[data-title="学习路线"] .step{
|
||
min-height:184px;
|
||
}
|
||
section[data-title="学习路线"] .step h3{
|
||
font-size:13.6px;
|
||
}
|
||
section[data-title="学习路线"] .step p{
|
||
font-size:10.3px;
|
||
line-height:1.38;
|
||
}
|
||
.answer-node span{
|
||
font-size:10.2px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
min-height:136px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step p{
|
||
font-size:10.5px;
|
||
line-height:1.38;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-template{
|
||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||
gap:8px 10px;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card{
|
||
min-height:86px;
|
||
display:grid;
|
||
grid-template-columns:30px minmax(0,1fr);
|
||
grid-template-rows:auto auto;
|
||
column-gap:8px;
|
||
padding:9px 10px 15px;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card .num{
|
||
grid-row:1 / span 2;
|
||
margin:0;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card h3{
|
||
font-size:12.6px;
|
||
line-height:1.18;
|
||
margin:0 0 4px;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card p{
|
||
font-size:10.4px;
|
||
line-height:1.32;
|
||
}
|
||
section[data-title="方案设计模板"] .takeaway{
|
||
min-height:50px;
|
||
margin-top:10px;
|
||
}
|
||
section[data-title="方案设计模板"] .takeaway h3{
|
||
font-size:13.6px;
|
||
line-height:1.24;
|
||
}
|
||
}
|
||
/* Diagram pass：把高密度页从“卡片堆”收敛成图解区域 */
|
||
@media (min-width:901px){
|
||
section[data-title="在线检索流程"] .flow{
|
||
gap:12px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
border-radius:20px;
|
||
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,249,255,.86));
|
||
box-shadow:0 18px 38px rgba(38,96,180,.11);
|
||
}
|
||
section[data-title="在线检索流程"] .grid2{
|
||
gap:18px;
|
||
padding:18px;
|
||
border:1px solid #dbe8ff;
|
||
border-radius:22px;
|
||
background:rgba(255,255,255,.58);
|
||
box-shadow:0 18px 42px rgba(38,96,180,.10);
|
||
}
|
||
section[data-title="在线检索流程"] .grid2>.panel{
|
||
border:0;
|
||
background:transparent;
|
||
box-shadow:none;
|
||
backdrop-filter:none;
|
||
padding:2px;
|
||
}
|
||
section[data-title="在线检索流程"] .grid2>.panel::after{
|
||
display:none;
|
||
}
|
||
section[data-title="在线检索流程"] .rank-list{
|
||
border:0;
|
||
background:transparent;
|
||
box-shadow:none;
|
||
}
|
||
section[data-title="在线检索流程"] .rank{
|
||
border:1px solid #dbe8ff;
|
||
border-radius:14px;
|
||
margin-bottom:8px;
|
||
background:rgba(255,255,255,.86);
|
||
}
|
||
section[data-title="生成与提示词"] .grid2{
|
||
align-items:stretch;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue{
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2{
|
||
display:grid;
|
||
grid-template-columns:1fr;
|
||
gap:0;
|
||
margin-top:10px !important;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel{
|
||
display:grid;
|
||
grid-template-columns:74px minmax(0,1fr);
|
||
column-gap:14px;
|
||
min-height:auto;
|
||
border:0;
|
||
border-bottom:1px solid #dbe8ff;
|
||
border-radius:0;
|
||
background:transparent;
|
||
box-shadow:none;
|
||
backdrop-filter:none;
|
||
padding:12px 0;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel:last-child{
|
||
border-bottom:0;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel::after{
|
||
display:none;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel h3{
|
||
margin:0;
|
||
align-self:start;
|
||
height:26px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
border-radius:999px;
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
color:#fff;
|
||
font-size:13px;
|
||
box-shadow:0 8px 18px rgba(15,98,254,.18);
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel p{
|
||
margin:0;
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
}
|
||
}
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
section[data-title="在线检索流程"] .grid2{
|
||
padding:11px;
|
||
gap:10px;
|
||
}
|
||
section[data-title="在线检索流程"] .rank{
|
||
margin-bottom:5px;
|
||
padding:7px 8px;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel{
|
||
grid-template-columns:58px minmax(0,1fr);
|
||
column-gap:9px;
|
||
padding:8px 0;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel h3{
|
||
height:22px;
|
||
font-size:10.8px;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel p{
|
||
font-size:10.5px;
|
||
line-height:1.34;
|
||
}
|
||
}
|
||
@media (min-width:901px){
|
||
.story-node{
|
||
position:relative;
|
||
min-height:132px;
|
||
padding:16px 18px 16px 22px;
|
||
border-left:6px solid #5aa1ff;
|
||
border-radius:18px;
|
||
background:linear-gradient(90deg,rgba(255,255,255,.90),rgba(244,249,255,.62));
|
||
box-shadow:0 16px 34px rgba(38,96,180,.10);
|
||
}
|
||
.story-node::before{
|
||
content:"";
|
||
position:absolute;
|
||
left:-13px;
|
||
top:22px;
|
||
width:20px;
|
||
height:20px;
|
||
border-radius:50%;
|
||
background:linear-gradient(145deg,#6fb0ff,#0f62fe);
|
||
box-shadow:0 8px 18px rgba(15,98,254,.22);
|
||
}
|
||
.story-node h3{
|
||
margin:2px 0 7px;
|
||
color:var(--navy);
|
||
font-size:18px;
|
||
line-height:1.22;
|
||
}
|
||
.story-node p{
|
||
color:#516987;
|
||
font-size:13.2px;
|
||
line-height:1.48;
|
||
}
|
||
section[data-title="封面"] .panel.blue .story-node h3{
|
||
color:var(--navy);
|
||
}
|
||
section[data-title="封面"] .panel.blue .story-node p{
|
||
color:#516987;
|
||
}
|
||
.rule-row{
|
||
display:grid;
|
||
grid-template-columns:74px minmax(0,1fr);
|
||
column-gap:14px;
|
||
padding:12px 0;
|
||
border-bottom:1px solid #dbe8ff;
|
||
}
|
||
.rule-row:last-child{
|
||
border-bottom:0;
|
||
}
|
||
.rule-row h3{
|
||
margin:0;
|
||
align-self:start;
|
||
height:26px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
border-radius:999px;
|
||
background:linear-gradient(145deg,#5aa1ff,#0f62fe);
|
||
color:#fff;
|
||
font-size:13px;
|
||
box-shadow:0 8px 18px rgba(15,98,254,.18);
|
||
}
|
||
.rule-row p{
|
||
margin:0;
|
||
color:#516987;
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
}
|
||
}
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
.story-node{
|
||
min-height:88px;
|
||
padding:10px 12px 10px 16px;
|
||
border-left-width:4px;
|
||
border-radius:14px;
|
||
}
|
||
.story-node::before{
|
||
left:-10px;
|
||
top:16px;
|
||
width:16px;
|
||
height:16px;
|
||
}
|
||
.story-node h3{
|
||
font-size:13.5px;
|
||
margin-bottom:4px;
|
||
}
|
||
.story-node p{
|
||
font-size:10.5px;
|
||
line-height:1.34;
|
||
}
|
||
.rule-row{
|
||
grid-template-columns:58px minmax(0,1fr);
|
||
column-gap:9px;
|
||
padding:8px 0;
|
||
}
|
||
.rule-row h3{
|
||
height:22px;
|
||
font-size:10.8px;
|
||
}
|
||
.rule-row p{
|
||
font-size:10.5px;
|
||
line-height:1.34;
|
||
}
|
||
}
|
||
/* Readability pass：修复投屏/小桌面下字号过小和视觉错位感 */
|
||
@media (min-width:901px) and (max-width:1300px){
|
||
.canvas{
|
||
padding:26px 36px 22px 42px;
|
||
gap:10px;
|
||
}
|
||
.topbar{
|
||
height:76px;
|
||
grid-template-columns:66px minmax(0,1fr) 132px;
|
||
}
|
||
.title h2{
|
||
font-size:24.5px;
|
||
line-height:1.12;
|
||
}
|
||
.title p{
|
||
font-size:12.5px;
|
||
line-height:1.28;
|
||
}
|
||
.mark{
|
||
font-size:10.8px;
|
||
}
|
||
.tag,
|
||
.tag.green,
|
||
.tag.orange,
|
||
.tag.red,
|
||
.tag.cyan{
|
||
min-height:23px;
|
||
font-size:11.5px;
|
||
margin-bottom:6px;
|
||
}
|
||
.panel h3,
|
||
.metric h3,
|
||
.step h3,
|
||
.agent h3,
|
||
.answer-card h3{
|
||
font-size:14px;
|
||
line-height:1.2;
|
||
}
|
||
.panel p,
|
||
.panel li,
|
||
.mini-list span,
|
||
.metric p,
|
||
.agent p,
|
||
.answer-card p,
|
||
.limit p,
|
||
.chunk p,
|
||
.rank span{
|
||
font-size:12px;
|
||
line-height:1.34;
|
||
}
|
||
.step p{
|
||
font-size:11.5px;
|
||
line-height:1.32;
|
||
}
|
||
.prompt{
|
||
font-size:12px;
|
||
line-height:1.45;
|
||
padding:14px;
|
||
}
|
||
.foot,
|
||
.foot span{
|
||
font-size:9.6px;
|
||
}
|
||
section[data-title="封面"] .canvas{
|
||
padding:30px 38px 24px 46px;
|
||
}
|
||
section[data-title="封面"] .hero{
|
||
gap:20px;
|
||
grid-template-columns:minmax(0,1fr) minmax(330px,.78fr);
|
||
}
|
||
section[data-title="封面"] .hero h1{
|
||
font-size:39px;
|
||
line-height:1.08;
|
||
}
|
||
section[data-title="封面"] .lead{
|
||
font-size:15.2px;
|
||
line-height:1.42;
|
||
}
|
||
section[data-title="封面"] .grid3{
|
||
gap:10px;
|
||
margin-top:18px !important;
|
||
}
|
||
section[data-title="封面"] .grid3 .panel{
|
||
min-height:104px;
|
||
}
|
||
section[data-title="封面"] .panel.blue{
|
||
min-height:392px;
|
||
}
|
||
.story-node{
|
||
min-height:94px;
|
||
}
|
||
.story-node h3{
|
||
font-size:14px;
|
||
}
|
||
.story-node p{
|
||
font-size:12px;
|
||
line-height:1.32;
|
||
}
|
||
section[data-title="学习路线"] .body{
|
||
padding-top:6px;
|
||
}
|
||
section[data-title="学习路线"] .flow{
|
||
gap:10px;
|
||
}
|
||
section[data-title="学习路线"] .step{
|
||
min-height:188px;
|
||
padding:11px 9px 16px;
|
||
}
|
||
section[data-title="学习路线"] .step h3{
|
||
font-size:13.8px;
|
||
}
|
||
section[data-title="学习路线"] .step p{
|
||
font-size:11.5px;
|
||
line-height:1.28;
|
||
}
|
||
section[data-title="学习路线"] .answer-node span{
|
||
font-size:11.2px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2{
|
||
gap:16px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2>.panel{
|
||
padding:40px 12px 12px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2 .flow{
|
||
gap:8px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2 .flow .step{
|
||
min-height:124px;
|
||
padding:10px 8px 14px;
|
||
}
|
||
section[data-title="RAG 总架构"] .grid2 .flow .step p{
|
||
font-size:11.5px;
|
||
line-height:1.24;
|
||
}
|
||
section[data-title="在线检索流程"] .flow{
|
||
gap:10px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step{
|
||
min-height:142px;
|
||
}
|
||
section[data-title="在线检索流程"] .flow .step p{
|
||
font-size:11.5px;
|
||
line-height:1.3;
|
||
}
|
||
section[data-title="生成与提示词"] .prompt{
|
||
min-height:286px;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel,
|
||
.rule-row{
|
||
grid-template-columns:62px minmax(0,1fr);
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel h3,
|
||
.rule-row h3{
|
||
height:24px;
|
||
font-size:11.5px;
|
||
}
|
||
section[data-title="生成与提示词"] .panel.blue .grid2>.panel p,
|
||
.rule-row p{
|
||
font-size:12px;
|
||
line-height:1.3;
|
||
}
|
||
section[data-title="MCP"] .bus-layout{
|
||
gap:12px;
|
||
grid-template-columns:.94fr .95fr 1.04fr;
|
||
}
|
||
section[data-title="MCP"] .panel p{
|
||
font-size:11.6px;
|
||
line-height:1.3;
|
||
}
|
||
section[data-title="MCP"] .bus span{
|
||
font-size:11px;
|
||
}
|
||
section[data-title="MCP"] .tool{
|
||
min-height:76px;
|
||
font-size:12px;
|
||
}
|
||
section[data-title="MCP"] .tool span{
|
||
font-size:11.5px;
|
||
}
|
||
section[data-title="方案设计模板"] .answer-card p{
|
||
font-size:11.8px;
|
||
line-height:1.3;
|
||
}
|
||
}
|
||
/* Accent line cleanup：禁用卡片内短蓝线，避免在紧凑页压到正文 */
|
||
@media (min-width:901px){
|
||
.panel::after,
|
||
.metric::after,
|
||
.step::before,
|
||
.answer-card::after,
|
||
.agent::after{
|
||
content:none !important;
|
||
display:none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck" id="deck">
|
||
|
||
<section class="slide active" data-title="封面">
|
||
<div class="canvas">
|
||
<div class="hero" style="flex:1;min-height:0">
|
||
<div>
|
||
<div class="kicker">RAG 入门讲解</div>
|
||
<h1>RAG 知识库问答：从 <span class="accent">LLM 缺陷</span> 到 Agent / MCP</h1>
|
||
<p class="lead">学完这份 PPT，能建立四个基本理解：为什么需要 RAG、RAG 如何工作、怎么评估效果、Agent / MCP 分别解决什么问题。</p>
|
||
<div class="grid3" style="margin-top:24px">
|
||
<div class="panel"><span class="tag"><i data-lucide="brain"></i>Why</span><h3>LLM 为什么不够用</h3><p>上下文、幻觉、私有知识、长上下文注意力。</p></div>
|
||
<div class="panel"><span class="tag green"><i data-lucide="search"></i>How</span><h3>RAG 怎么落地</h3><p>离线建库、在线检索、排序、提示词生成。</p></div>
|
||
<div class="panel"><span class="tag cyan"><i data-lucide="git-branch"></i>Extend</span><h3>复杂任务怎么扩展</h3><p>Agent 负责流程，MCP 负责连接工具。</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel blue">
|
||
<div class="wide-flow" style="grid-template-columns:1fr;gap:12px">
|
||
<div class="story-node"><span class="tag red"><i data-lucide="alert-triangle"></i>问题</span><h3>LLM 会说，但不知道你公司的最新事实</h3><p>在企业知识问答里，答案必须有依据、能追溯、能控权限。</p></div>
|
||
<div class="arrow">↓</div>
|
||
<div class="story-node"><span class="tag green"><i data-lucide="file-search"></i>方案</span><h3>RAG 先找证据，再回答</h3><p>把知识库变成可检索、可引用、可更新的外部记忆。</p></div>
|
||
<div class="arrow">↓</div>
|
||
<div class="story-node"><span class="tag cyan"><i data-lucide="plug"></i>扩展</span><h3>跨系统办事，再上 Workflow / Agent</h3><p>MCP 负责把外部工具和数据规范地接进来。</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>RAG Knowledge Base QA</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">开场直接说明：这份 PPT 用一条主线讲清 RAG 的来龙去脉。重点不是技术炫技，而是让听众理解系统为什么这样设计。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="学习路线">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">01</div><div class="title"><h2>学习路线：从“模型会说话”到“系统能办事”</h2><p>先理解模型边界，再理解 RAG、Agent 和 MCP 各自解决什么问题。</p></div><div class="mark"><i data-lucide="route"></i>Learning Map</div></div>
|
||
<div class="body">
|
||
<div class="flow">
|
||
<div class="step"><div class="num">1</div><div class="visual-icon"><i data-lucide="message-square"></i></div><h3>LLM 是什么</h3><p>理解它擅长语言生成，但不是事实系统。</p></div>
|
||
<div class="step"><div class="num">2</div><div class="visual-icon"><i data-lucide="puzzle"></i></div><h3>LLM 的缺陷</h3><p>上下文有限、幻觉、私有知识缺失、注意力漂移。</p></div>
|
||
<div class="step"><div class="num">3</div><div class="visual-icon"><i data-lucide="file-search"></i></div><h3>RAG 的方案</h3><p>先检索知识库，再把资料交给 LLM 生成。</p></div>
|
||
<div class="step"><div class="num">4</div><div class="visual-icon"><i data-lucide="database"></i></div><h3>知识库流程</h3><p>资料准备、切片、向量化、检索、排序、引用。</p></div>
|
||
<div class="step"><div class="num">5</div><div class="visual-icon"><i data-lucide="bot"></i></div><h3>Agent / MCP</h3><p>复杂任务要规划和工具连接，不只是问答。</p></div>
|
||
</div>
|
||
<div class="takeaway answer-flow"><div class="answer-lead"><div class="answer-icon"><i data-lucide="target"></i></div><h3>理解顺序：</h3></div><div class="answer-node"><i data-lucide="message-circle"></i><span>先看业务问题</span></div><div class="answer-arrow">→</div><div class="answer-node"><i data-lucide="route"></i><span>再看系统链路</span></div><div class="answer-arrow">→</div><div class="answer-node"><i data-lucide="flag"></i><span>最后看指标和风险</span></div></div>
|
||
</div>
|
||
<div class="foot"><span>Learning Path</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这页不要展开细节，只把学习路径建立起来。后面每页都服务这条路线。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="LLM 是什么">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">02</div><div class="title"><h2>LLM 是语言引擎，不是企业事实库</h2><p>先把模型边界说清楚，后面引出 RAG 才自然。</p></div><div class="mark"><i data-lucide="brain"></i>Language Model</div></div>
|
||
<div class="body">
|
||
<div class="compare">
|
||
<div class="panel"><span class="tag">它擅长</span><h3>理解语义，组织表达</h3><div class="mini-list"><span>把用户问题转成可处理的意图</span><span>总结、改写、解释、翻译、生成结构化答案</span><span>根据给定上下文做推理和表达</span></div></div>
|
||
<div class="mid">≠</div>
|
||
<div class="panel"><span class="tag red">它不是</span><h3>可靠的事实来源</h3><div class="mini-list"><span>不知道你的内部文档和实时制度</span><span>不能天然保证每句话有出处</span><span>拿不到资料时仍可能生成看似合理的答案</span></div></div>
|
||
</div>
|
||
<div class="takeaway"><h3>产品理解：LLM 负责“读懂和表达”，事实依据必须由外部知识或工具提供。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>LLM Boundary</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页是基础定义。讲成“语言引擎”比直接展开算法细节更容易让听众理解。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="LLM 缺陷">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">03</div><div class="title"><h2>为什么 LLM 不适合直接回答复杂企业知识问题</h2><p>在企业知识问答场景里，裸用模型通常不利于新鲜度、权限、成本和可追溯。</p></div><div class="mark"><i data-lucide="alert-triangle"></i>Limitations</div></div>
|
||
<div class="body">
|
||
<div class="problem-map">
|
||
<div class="limit-stack">
|
||
<div class="limit"><div class="num">1</div><div><b>上下文窗口有限</b><p>输入再长也有上限；越长越贵、越慢、越容易混乱。</p></div></div>
|
||
<div class="limit"><div class="num">2</div><div><b>事实会过期或缺失</b><p>内部知识、最新政策、业务数据通常不在模型参数里。</p></div></div>
|
||
</div>
|
||
<div class="badge-center">裸用<br>通常<br>不稳</div>
|
||
<div class="limit-stack">
|
||
<div class="limit"><div class="num">3</div><div><b>幻觉风险</b><p>资料不足、冲突或提示不清时，可能编造细节。</p></div></div>
|
||
<div class="limit"><div class="num">4</div><div><b>长上下文利用不均</b><p>重点可能被噪声稀释，中间信息尤其容易被忽略。</p></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="takeaway"><h3>结论：企业问答要先筛出“小而准”的上下文，再交给 LLM。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Context · Hallucination · Freshness · Attention</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页是引出 RAG 的关键。不能只说“LLM 有幻觉”，要把上下文、私有知识、注意力顺序一起说明白。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="为什么不能全量塞资料">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">04</div><div class="title"><h2>为什么不把所有知识一次性给 LLM</h2><p>RAG 不是任何场景都必须上；文档多、更新快、要权限和引用时才更有价值。</p></div><div class="mark"><i data-lucide="search"></i>Need Retrieval</div></div>
|
||
<div class="body">
|
||
<div class="grid4">
|
||
<div class="metric"><div class="big"><i data-lucide="clock"></i>慢</div><h3>响应变慢</h3><p>长上下文会拉高推理时间，用户体验变差。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="dollar-sign"></i>贵</div><h3>成本变高</h3><p>每次都读大量文档，token 成本不可控。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="shuffle"></i>乱</div><h3>答案变乱</h3><p>无关资料越多，模型越难抓住真正依据。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="shield"></i>险</div><h3>权限风险</h3><p>不该给用户看的资料可能进入上下文。</p></div>
|
||
</div>
|
||
<div class="wide-flow" style="margin-top:20px">
|
||
<div class="panel"><span class="tag red">不适合的做法</span><h3>全量塞文档</h3><p>资料多、权限复杂时，把知识管理问题转移给模型，效果不可控。</p></div>
|
||
<div class="arrow">→</div>
|
||
<div class="panel blue"><span class="tag green">RAG 思路</span><h3>先筛资料</h3><p>先用检索和排序选出少量相关资料。</p></div>
|
||
<div class="arrow">→</div>
|
||
<div class="panel"><span class="tag cyan">生成答案</span><h3>基于证据回答</h3><p>让 LLM 在受控上下文里生成。</p></div>
|
||
</div>
|
||
<div class="takeaway"><h3>长上下文适合“资料少、位置已知、可以整包读完”；RAG 适合“资料多、常更新、答案位置不确定、要权限和引用”。两者经常组合：先检索，再把少量证据放进上下文。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Why Retrieval Before Generation</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页回答常见疑问：既然大模型能读长文本，为什么还要 RAG。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="知识库问答是什么">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">05</div><div class="title"><h2>知识库问答产品，本质是“带证据的回答系统”</h2><p>RAG 不是一个模型功能，而是一条产品链路。</p></div><div class="mark"><i data-lucide="file-check"></i>Product View</div></div>
|
||
<div class="body">
|
||
<div class="wide-flow">
|
||
<div class="panel"><span class="tag">用户问题</span><h3>“这个退款能不能批？”</h3><p>用户通常用口语表达，不会精确匹配文档标题。</p></div>
|
||
<div class="arrow">→</div>
|
||
<div class="panel blue"><span class="tag green">知识库证据</span><h3>政策、流程、版本、权限</h3><p>系统先找到可用资料，并保留来源。</p></div>
|
||
<div class="arrow">→</div>
|
||
<div class="panel"><span class="tag cyan">LLM 答案</span><h3>结论 + 理由 + 来源</h3><p>回答不只是顺口，还要能追溯和复核。</p></div>
|
||
</div>
|
||
<div class="grid4" style="margin-top:18px">
|
||
<div class="metric"><div class="big"><i data-lucide="target"></i>准</div><h3>准确</h3><p>答案来自可信资料。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="refresh-cw"></i>新</div><h3>及时</h3><p>多数知识更新可先更新知识库，不必依赖重训模型。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="link"></i>源</div><h3>可追溯</h3><p>能展示引用来源。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="lock"></i>权</div><h3>可控权限</h3><p>检索前先过滤用户权限。</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>Knowledge Base QA</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页把 RAG 落到产品形态。这里要强调“带证据”，不是“聊天更聪明”。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="RAG 总架构">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">06</div><div class="title"><h2>RAG = 离线建索引 + 在线检索生成</h2><p>把这句话讲清楚，基本就进入 RAG 的门了。</p></div><div class="mark"><i data-lucide="git-branch"></i>Architecture</div></div>
|
||
<div class="body">
|
||
<div class="grid2">
|
||
<div class="panel blue">
|
||
<span class="tag">离线：让资料可被找到</span>
|
||
<div class="flow" style="grid-template-columns:repeat(3,1fr);margin-top:8px">
|
||
<div class="step"><div class="num"><i data-lucide="filter"></i></div><h3>清洗</h3><p>去重、去噪、统一格式。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="scissors"></i></div><h3>切片</h3><p>长文档拆成小知识块。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="database"></i></div><h3>建索引</h3><p>建立向量、关键词或混合索引，并保存元数据。</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<span class="tag green">在线：让回答有依据</span>
|
||
<div class="flow" style="grid-template-columns:repeat(3,1fr);margin-top:8px">
|
||
<div class="step"><div class="num"><i data-lucide="search"></i></div><h3>检索</h3><p>按问题找候选片段。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="sliders"></i></div><h3>排序</h3><p>筛出最相关、最可信资料。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="message-square"></i></div><h3>生成</h3><p>LLM 基于上下文回答。</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="takeaway"><h3>RAG 的关键不是“有没有向量库”，而是资料能否被正确检索、正确排序、正确使用。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Offline Indexing + Online Retrieval</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页建立总架构。可以先用离线和在线两段讲，再展开细节。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="离线建库流程">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">07</div><div class="title"><h2>离线建库：资料准备比模型选择更先决定上限</h2><p>这部分最容易被忽略，却往往最先决定知识库问答的效果上限。</p></div><div class="mark"><i data-lucide="database"></i>Indexing</div></div>
|
||
<div class="body">
|
||
<div class="ribbon-row"><div class="ribbon">资料盘点</div><div class="ribbon-box"><div class="round-icon"><i data-lucide="file-text"></i></div><div class="mini-list"><span>确定业务范围：客服 FAQ、产品手册、制度、合同、接口文档</span><span>标清来源、负责人、更新时间、适用对象</span></div></div></div>
|
||
<div class="ribbon-row"><div class="ribbon green">清洗治理</div><div class="ribbon-box"><div class="round-icon"><i data-lucide="filter"></i></div><div class="mini-list"><span>删除重复、过期、目录噪声、网页导航、无效表格</span><span>统一标题、层级、术语，避免同义词混乱</span></div></div></div>
|
||
<div class="ribbon-row"><div class="ribbon orange">索引入库</div><div class="ribbon-box"><div class="round-icon"><i data-lucide="database"></i></div><div class="mini-list"><span>切片、向量化、保存元数据，写入向量库或混合检索索引</span><span>准备评测问题集，后续用来验证召回和答案质量</span></div></div></div>
|
||
</div>
|
||
<div class="foot"><span>Source Governance · Chunking · Embedding</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页讲产品工作：资料范围、治理、版本、权限、评测集。不要只讲技术名词。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="切片与元数据">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">08</div><div class="title"><h2>切片不是随便截断，而是让知识块能独立回答问题</h2><p>切片粒度、重叠、元数据，会直接影响召回质量。</p></div><div class="mark"><i data-lucide="scissors"></i>Data Design</div></div>
|
||
<div class="body">
|
||
<div class="matrix">
|
||
<div class="panel">
|
||
<span class="tag">示例：退款政策文档</span>
|
||
<div class="chunk"><h4>切片 A：退款条件</h4><p>购买后 7 天内，且未使用核心服务，可以申请全额退款。</p></div>
|
||
<div class="chunk"><h4>切片 B：不可退场景</h4><p>已开票、已交付定制服务、超过合同期限，不支持自动退款。</p></div>
|
||
<div class="chunk"><h4>切片 C：审批路径</h4><p>超过 5 万元的退款，需要客户成功经理和财务双审批。</p></div>
|
||
</div>
|
||
<div class="panel blue">
|
||
<span class="tag green">产品要关注</span>
|
||
<div class="mini-list"><span>太大：噪声多，模型抓不住重点</span><span>太小：语义断裂，缺少必要上下文</span><span>需要重叠：避免关键信息跨片丢失</span><span>元数据：来源、版本、时间、权限、业务线</span></div>
|
||
<div class="vector"><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>Chunk Size · Overlap · Metadata</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">讲切片时一定用例子。听众能理解“为什么切片决定检索效果”。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="在线检索流程">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">09</div><div class="title"><h2>在线检索：先召回候选，再排序决定给 LLM 什么</h2><p>召回解决“找得到”，排序解决“排得对”。</p></div><div class="mark"><i data-lucide="search"></i>Retrieval</div></div>
|
||
<div class="body">
|
||
<div class="flow">
|
||
<div class="step"><div class="num"><i data-lucide="user"></i></div><h3>理解问题</h3><p>识别意图，必要时改写查询。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="search"></i></div><h3>召回候选</h3><p>向量检索、关键词检索或混合检索。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="shield"></i></div><h3>过滤</h3><p>按权限、业务线、版本、时间过滤；强权限可在索引或检索阶段提前做。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="sliders"></i></div><h3>重排</h3><p>把最相关、最新、可信的片段排前面。</p></div>
|
||
<div class="step"><div class="num"><i data-lucide="package"></i></div><h3>拼上下文</h3><p>控制长度，去重，保留来源。</p></div>
|
||
</div>
|
||
<div class="grid2" style="margin-top:16px">
|
||
<div class="panel"><h3>候选排序示例</h3><div class="rank-list"><div class="rank"><div class="r">1</div><div><strong>退款政策 v2026Q2</strong><br><span>直接回答，版本最新</span></div><div class="score">96</div></div><div class="rank"><div class="r">2</div><div><strong>大客户审批流程</strong><br><span>金额超过 5 万时补充</span></div><div class="score">82</div></div><div class="rank"><div class="r">3</div><div><strong>历史退款 FAQ</strong><br><span>相关但版本较旧</span></div><div class="score">41</div></div></div></div>
|
||
<div class="panel blue"><h3>理解检索要抓住的点</h3><div class="mini-list"><span>向量检索适合语义相近，但不一定精确</span><span>关键词适合编号、术语、代码、合同条款</span><span>搜索负责找资料，RAG 负责“找资料 + 选证据 + 组织回答”</span><span>权限过滤最好发生在进入上下文之前</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>Query Rewrite · Hybrid Search · Rerank · Top-K</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这一页把“排序”讲清楚。很多人只知道向量库，但不知道召回和重排的区别。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="生成与提示词">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">10</div><div class="title"><h2>生成阶段：Prompt 规定 LLM 如何使用资料</h2><p>检索负责找证据，提示词负责使用规则。</p></div><div class="mark"><i data-lucide="terminal"></i>Prompt</div></div>
|
||
<div class="body">
|
||
<div class="grid2">
|
||
<div class="prompt">
|
||
<b>SYSTEM</b><br>
|
||
你是客服知识库助手。只能基于 CONTEXT 回答；资料不足时说“不确定”，不要编造。输出必须包含：结论、依据、来源。<br><br>
|
||
<b>CONTEXT</b><br>
|
||
<mark>[退款政策 v2026Q2]</mark> 购买后 7 天内且未使用核心服务，可全额退款。<br><br>
|
||
<b>USER</b><br>
|
||
客户买了 3 天，还没使用，可以退吗？
|
||
</div>
|
||
<div class="panel blue">
|
||
<span class="tag green">系统提示词要约束什么</span>
|
||
<div class="grid2" style="margin-top:8px">
|
||
<div class="rule-row"><h3>角色</h3><p>你是谁，服务什么场景。</p></div>
|
||
<div class="rule-row"><h3>边界</h3><p>只能基于资料，不够就说不确定。</p></div>
|
||
<div class="rule-row"><h3>格式</h3><p>结论、理由、来源、下一步。</p></div>
|
||
<div class="rule-row"><h3>安全</h3><p>权限控制主要在数据层/检索层做，Prompt 是最后一层约束。</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="takeaway"><h3>RAG 的答案质量 = 检索质量 × 上下文组织 × 提示词约束；权限安全不能只靠 Prompt。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Prompt Engineering for RAG</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">提示词工程不要讲玄学，要讲规则：角色、边界、格式、兜底、安全。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="如何评估 RAG">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">11</div><div class="title"><h2>RAG 做得好不好，要拆成哪些指标看</h2><p>不能只说“效果不错”，要能拆成检索、答案、体验、治理。</p></div><div class="mark"><i data-lucide="bar-chart-3"></i>Evaluation</div></div>
|
||
<div class="body">
|
||
<div class="metric-grid">
|
||
<div class="metric"><div class="big"><i data-lucide="search"></i>检索</div><h3>正确资料是否进候选</h3><p>离线看 Hit@K、Recall、问题集覆盖；先确认资料找没找到。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="sliders"></i>重排</div><h3>正确资料是否排前面</h3><p>看相关性、时效、权限、来源可信度，避免过期资料进入上下文。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="check-circle"></i>答案</div><h3>是否基于证据</h3><p>看 groundedness / faithfulness、引用命中率、拒答是否稳妥。</p></div>
|
||
<div class="metric"><div class="big"><i data-lucide="activity"></i>在线</div><h3>能不能上线</h3><p>看延迟、成本、失败率、满意度、人工转接率和线上反馈。</p></div>
|
||
</div>
|
||
<div class="takeaway"><h3>排查顺序：先离线看检索/重排，再看答案是否忠于证据，最后看线上体验和成本。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Retrieval Metrics · Groundedness · Latency · Cost</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这页用于建立评估框架。要能把“效果不好”定位到链路中的某一段。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="常见失败场景">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">12</div><div class="title"><h2>RAG 失败时，通常不是“模型太差”这么简单</h2><p>把失败原因拆到资料、检索、生成和产品机制，才方便定位和迭代。</p></div><div class="mark"><i data-lucide="bug"></i>Failure Modes</div></div>
|
||
<div class="body">
|
||
<div class="grid3">
|
||
<div class="panel"><span class="tag red">资料问题</span><h3>知识库本身不可信</h3><p>文档过期、重复、格式混乱、缺少负责人，导致检索出来的证据就错。</p></div>
|
||
<div class="panel"><span class="tag orange">检索问题</span><h3>找不到或找偏</h3><p>切片粒度不合适、同义词没处理、只用向量导致编号/条款匹配差。</p></div>
|
||
<div class="panel"><span class="tag">生成问题</span><h3>模型没有按证据答</h3><p>上下文太长、提示词边界弱、冲突资料没处理，都会导致幻觉。</p></div>
|
||
</div>
|
||
<div class="grid3" style="margin-top:14px">
|
||
<div class="panel blue"><h3>治理动作</h3><p>建立资料负责人、版本规则、过期提醒和灰度发布。</p></div>
|
||
<div class="panel blue"><h3>技术动作</h3><p>混合检索、重排、查询改写、权限过滤、上下文去重。</p></div>
|
||
<div class="panel blue"><h3>产品动作</h3><p>展示来源、允许反馈、低置信度转人工、持续评测。</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>Failure Analysis</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这页用于建立排查思路：如果效果不好，先判断问题出在资料、检索、生成还是产品机制。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Agent">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">13</div><div class="title"><h2>什么时候从 RAG 走到 Agent</h2><p>不要为了显得高级而上 Agent；先判断任务是否真的需要动态决策。</p></div><div class="mark"><i data-lucide="cpu"></i>Agent</div></div>
|
||
<div class="body">
|
||
<div class="agent-grid">
|
||
<div class="agent"><div class="round-icon"><i data-lucide="route"></i></div><h3>规划</h3><p>判断任务目标，拆成检索、调用工具、确认结果等步骤。</p></div>
|
||
<div class="arrow">→</div>
|
||
<div class="agent"><div class="round-icon"><i data-lucide="search"></i></div><h3>检索</h3><p>用 RAG 查政策、流程、历史案例，给后续动作提供依据。</p></div>
|
||
<div class="arrow">→</div>
|
||
<div class="agent"><div class="round-icon"><i data-lucide="send"></i></div><h3>执行</h3><p>调用工具查订单、建工单、写系统、发送通知，并检查结果。</p></div>
|
||
</div>
|
||
<div class="grid2" style="margin-top:16px">
|
||
<div class="panel"><span class="tag">不需要 Agent</span><h3>单轮问答或固定流程</h3><p>路径确定、风险高、规则清晰时，workflow + RAG 往往更稳。</p></div>
|
||
<div class="panel blue"><span class="tag green">需要 Agent</span><h3>多步骤动态任务</h3><p>需要规划、试错、跨系统调用，并根据中间结果决定下一步。</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="foot"><span>RAG Gives Knowledge · Agent Orchestrates Tasks</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">不要把 Agent 讲神。它是围绕目标进行计划、工具调用和反馈循环的系统。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="MCP">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">14</div><div class="title"><h2>MCP：AI 应用连接外部能力的标准协议</h2><p>这是扩展理解点。可以记住一句：MCP 让 AI 应用用统一方式连接工具、数据和提示模板。</p></div><div class="mark"><i data-lucide="plug"></i>Protocol</div></div>
|
||
<div class="body">
|
||
<div class="bus-layout">
|
||
<div class="panel"><span class="tag">Host / Client</span><h3>AI 应用侧</h3><p>Host 承载用户和模型；Client 负责按 MCP 协议连接 Server。</p></div>
|
||
<div class="bus">MCP<br><span>连接 tools · resources · prompts</span></div>
|
||
<div class="tool-grid">
|
||
<div class="tool"><i data-lucide="user"></i>CRM<span>客户资料</span></div>
|
||
<div class="tool"><i data-lucide="clipboard"></i>工单系统<span>创建 / 查询</span></div>
|
||
<div class="tool"><i data-lucide="database"></i>数据库<span>实时数据</span></div>
|
||
<div class="tool"><i data-lucide="folder"></i>文件系统<span>内部文档</span></div>
|
||
<div class="tool"><i data-lucide="search"></i>搜索<span>外部信息</span></div>
|
||
<div class="tool"><i data-lucide="message-square"></i>消息<span>通知和审批</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="takeaway"><h3>关系一句话：RAG 提供知识证据，Workflow / Agent 决定步骤，MCP 负责统一连接外部工具和数据。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Model Context Protocol · Host · Client · Server</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">MCP 不要讲太深。入门层面只要讲清它解决“模型和工具怎么标准连接”。</div>
|
||
</section>
|
||
|
||
<section class="slide" data-title="方案设计模板">
|
||
<div class="canvas">
|
||
<div class="topbar"><div class="sec">15</div><div class="title"><h2>实战练习：设计一个企业知识库问答系统</h2><p>按这个结构梳理方案，既有业务视角，也能覆盖技术链路。</p></div><div class="mark"><i data-lucide="list-checks"></i>Template</div></div>
|
||
<div class="body">
|
||
<div class="answer-template">
|
||
<div class="answer-card"><div class="num">0</div><h3>先判断问题类型</h3><p>长上下文解决“读得下”，RAG 解决“找得到”，微调更适合风格/格式/任务适配，Agent 解决“做得到”；MCP 是连接协议。</p></div>
|
||
<div class="answer-card"><div class="num">1</div><h3>定场景</h3><p>用户是谁？问什么问题？需要结论、解释、引用，还是要执行动作？</p></div>
|
||
<div class="answer-card"><div class="num">2</div><h3>治理资料</h3><p>资料从哪里来，谁负责，版本和权限怎么管，是否有评测问题集？</p></div>
|
||
<div class="answer-card"><div class="num">3</div><h3>设计检索</h3><p>切片、元数据、向量检索、关键词检索、混合检索、重排和 Top-K。</p></div>
|
||
<div class="answer-card"><div class="num">4</div><h3>约束生成</h3><p>系统提示词规定只能基于资料回答，输出来源，不确定就兜底。</p></div>
|
||
<div class="answer-card"><div class="num">5</div><h3>评估迭代</h3><p>看召回、排序、groundedness、引用、延迟、成本、权限和用户反馈。</p></div>
|
||
</div>
|
||
<div class="takeaway"><h3>一句话收束：企业 AI 问答要先分清“读得下 / 找得到 / 说得稳 / 做得到”，再决定长上下文、RAG、微调、Agent 分别怎么用。</h3></div>
|
||
</div>
|
||
<div class="foot"><span>Solution Design Template</span><span class="page"></span></div>
|
||
</div>
|
||
<div class="corner"></div>
|
||
<div class="notes">这页是最终方案框架。讲解时可以按 0 到 5 展开，把前面的概念串成一个完整设计。</div>
|
||
</section>
|
||
|
||
</div>
|
||
<div class="progress"><span id="progress"></span></div>
|
||
<div class="nav-controls" aria-label="翻页导航">
|
||
<button class="nav-btn" id="prevBtn" type="button" aria-label="上一页">‹</button>
|
||
<span class="nav-index" id="navIndex">1 / 16</span>
|
||
<button class="nav-btn" id="nextBtn" type="button" aria-label="下一页">›</button>
|
||
</div>
|
||
<script src="/assets/lucide.min.js"></script>
|
||
<script>
|
||
(function(){
|
||
const slides = Array.from(document.querySelectorAll('.slide'));
|
||
const progress = document.getElementById('progress');
|
||
const prevBtn = document.getElementById('prevBtn');
|
||
const nextBtn = document.getElementById('nextBtn');
|
||
const navIndex = document.getElementById('navIndex');
|
||
let idx = 0;
|
||
function hydrateIcons(){
|
||
if(window.lucide){
|
||
window.lucide.createIcons({
|
||
attrs: {
|
||
class: ['lucide-icon'],
|
||
'stroke-width': 2.2
|
||
}
|
||
});
|
||
}
|
||
}
|
||
function render(){
|
||
slides.forEach((slide,i)=>slide.classList.toggle('active',i===idx));
|
||
document.querySelectorAll('.page').forEach(el=>{el.textContent=(idx+1)+' / '+slides.length});
|
||
document.querySelectorAll('.corner').forEach(el=>{el.textContent=String(idx+1).padStart(2,'0')});
|
||
navIndex.textContent = (idx+1)+' / '+slides.length;
|
||
prevBtn.disabled = idx === 0;
|
||
nextBtn.disabled = idx === slides.length - 1;
|
||
progress.style.width = ((idx+1)/slides.length*100)+'%';
|
||
if(location.hash !== '#/'+(idx+1)) history.replaceState(null,'','#/'+(idx+1));
|
||
}
|
||
function go(n){idx=Math.max(0,Math.min(slides.length-1,n));render()}
|
||
function fromHash(){
|
||
const match = location.hash.match(/#\/(\d+)/);
|
||
if(match) idx = Math.max(0,Math.min(slides.length-1,Number(match[1])-1));
|
||
render();
|
||
}
|
||
window.addEventListener('hashchange',fromHash);
|
||
prevBtn.addEventListener('click',()=>go(idx-1));
|
||
nextBtn.addEventListener('click',()=>go(idx+1));
|
||
document.addEventListener('keydown',event=>{
|
||
if(['ArrowRight','PageDown',' '].includes(event.key)){event.preventDefault();go(idx+1)}
|
||
if(['ArrowLeft','PageUp'].includes(event.key)){event.preventDefault();go(idx-1)}
|
||
if(event.key==='Home'){event.preventDefault();go(0)}
|
||
if(event.key==='End'){event.preventDefault();go(slides.length-1)}
|
||
if(event.key==='f'||event.key==='F'){document.documentElement.requestFullscreen?.()}
|
||
});
|
||
hydrateIcons();
|
||
fromHash();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|