{"id":"piki-free-image-story-deck-1791262494107","deck":{"version":1,"title":"图像叙事演示 · PIKI 样例","theme":"piki-free-image-story-deck","slides":[{"id":"demo-1","layout":"image","title":"图像叙事演示","kicker":"PIKI / 可编辑演示","body":"先确定对象与目的，再决定画面和节奏。","notes":"讲述提示：用自己的案例解释这一页，停下来让观众读完重点。","bullets":[],"steps":["整理输入","选择结构","检查结果"],"cards":[{"title":"对象","text":"这份内容要给谁看？"},{"title":"重点","text":"读者应该记住什么？"},{"title":"行动","text":"接下来能做什么？"}],"metrics":[{"value":"01","label":"明确一个目标"},{"value":"03","label":"保留三项重点"},{"value":"下一步","label":"落实到一个动作"}],"image":""},{"id":"demo-2","layout":"quote","title":"从材料到清楚的表达","kicker":"演示数据 · 请替换为自己的资料","body":"这是独立制作的示意课件，文字、图形与讲稿可继续修改。","notes":"讲述提示：用自己的案例解释这一页，停下来让观众读完重点。","bullets":[],"steps":["整理输入","选择结构","检查结果"],"cards":[{"title":"对象","text":"这份内容要给谁看？"},{"title":"重点","text":"读者应该记住什么？"},{"title":"行动","text":"接下来能做什么？"}],"metrics":[{"value":"01","label":"明确一个目标"},{"value":"03","label":"保留三项重点"},{"value":"下一步","label":"落实到一个动作"}],"image":""},{"id":"demo-3","layout":"image","title":"给一个决定充分的依据","kicker":"演示数据 · 请替换为自己的资料","body":"页面中的指标只是示例，不代表真实经营或研究成绩。","notes":"讲述提示：用自己的案例解释这一页，停下来让观众读完重点。","bullets":[],"steps":["整理输入","选择结构","检查结果"],"cards":[{"title":"对象","text":"这份内容要给谁看？"},{"title":"重点","text":"读者应该记住什么？"},{"title":"行动","text":"接下来能做什么？"}],"metrics":[{"value":"01","label":"明确一个目标"},{"value":"03","label":"保留三项重点"},{"value":"下一步","label":"落实到一个动作"}],"image":""},{"id":"demo-4","layout":"quote","title":"把下一步讲具体","kicker":"演示数据 · 请替换为自己的资料","body":"带走源文件，用自己的材料再完成一次。","notes":"讲述提示：用自己的案例解释这一页，停下来让观众读完重点。","bullets":[],"steps":["整理输入","选择结构","检查结果"],"cards":[{"title":"对象","text":"这份内容要给谁看？"},{"title":"重点","text":"读者应该记住什么？"},{"title":"行动","text":"接下来能做什么？"}],"metrics":[{"value":"01","label":"明确一个目标"},{"value":"03","label":"保留三项重点"},{"value":"下一步","label":"落实到一个动作"}],"image":""}]},"themes":[{"id":"piki-free-event-deck","name":"活动邀请演示","theme":"confetti","brief":"活动对象、参与理由、安排和报名入口","layouts":["cover","timeline","grid","quote"],"bg":"#F6F0DF","paper":"#FFFCF4","ink":"#24231C","accent":"#E36D36","secondary":"#507C6B"},{"id":"piki-free-cutpaper-deck","name":"剪纸感课程演示","theme":"cutpaper","brief":"学习目标、概念关系和课程练习","layouts":["cover","process","compare","quote"],"bg":"#EBE5DC","paper":"#FAF5EB","ink":"#24372F","accent":"#D87446","secondary":"#758D69"},{"id":"piki-free-sketchnote-deck","name":"手绘笔记式演示","theme":"sketch","brief":"主题、一个核心观点和讲述逻辑","layouts":["cover","process","metrics","quote"],"bg":"#F4E5A9","paper":"#FFFCED","ink":"#29251A","accent":"#B76527","secondary":"#55746A"},{"id":"piki-free-field-course-deck","name":"户外课程介绍","theme":"field","brief":"真实活动目标、场地、准备清单和时间表","layouts":["cover","image","grid","timeline"],"bg":"#E4EBD9","paper":"#F8FAF2","ink":"#243C35","accent":"#3D7961","secondary":"#80A3BD"},{"id":"piki-free-system-release-deck","name":"系统产品发布演示","theme":"cobalt","brief":"用户问题、真实产品能力和使用路径","layouts":["cover","grid","process","metrics"],"bg":"#263DB0","paper":"#EFF2FF","ink":"#172358","accent":"#C1E273","secondary":"#718AE1"},{"id":"piki-free-editorial-deck","name":"编辑感观点演示","theme":"editorial","brief":"观点、证据、上下文和结论","layouts":["cover","quote","compare","quote"],"bg":"#DBC5A3","paper":"#F7EFE1","ink":"#352A26","accent":"#9C4739","secondary":"#8F8457"},{"id":"piki-free-glass-deck","name":"轻玻璃感演示","theme":"glass","brief":"少量重点信息、数据和视觉材料","layouts":["cover","metrics","process","image"],"bg":"#DDEBF1","paper":"#F4F8FB","ink":"#243B50","accent":"#3D6EBD","secondary":"#89BBB4"},{"id":"piki-free-brand-story-deck","name":"品牌故事演示","theme":"brand","brief":"品牌起点、关键选择、用户价值和事实证据","layouts":["cover","timeline","compare","quote"],"bg":"#35362F","paper":"#F1E9DA","ink":"#302F29","accent":"#BD6D42","secondary":"#8B9870"},{"id":"piki-free-visual-explainer-deck","name":"可编辑图解演示","theme":"visual","brief":"对象、动作、条件及结果之间的关系","layouts":["cover","process","compare","metrics"],"bg":"#E9E7E1","paper":"#FBFAF6","ink":"#242E3A","accent":"#3A7180","secondary":"#D99B52"},{"id":"piki-free-image-story-deck","name":"图像叙事演示","theme":"narrative","brief":"故事段落、图像和需要表达的变化","layouts":["image","quote","image","quote"],"bg":"#E6D9CF","paper":"#FAF0E8","ink":"#392F35","accent":"#B86566","secondary":"#788AB3"},{"id":"piki-free-research-deck","name":"研究分享演示","theme":"research","brief":"研究问题、方法、数据、发现和限制","layouts":["cover","metrics","compare","quote"],"bg":"#DDE3E7","paper":"#F7F9FA","ink":"#26333E","accent":"#476F83","secondary":"#B38A56"},{"id":"piki-free-proposal-deck","name":"方案汇报演示","theme":"proposal","brief":"决策事项、候选方案、资源和执行安排","layouts":["cover","compare","timeline","metrics"],"bg":"#D8DEE2","paper":"#F4F6F7","ink":"#253447","accent":"#456B8A","secondary":"#AA8E60"},{"id":"piki-free-article-deck","name":"文章要点演示","theme":"brief","brief":"原文主张、证据、例子和分享对象","layouts":["cover","grid","quote","process"],"bg":"#E8DDD0","paper":"#FBF6EE","ink":"#36322E","accent":"#896148","secondary":"#6B8372"},{"id":"piki-free-learning-review-deck","name":"学习复盘演示","theme":"review","brief":"目标、尝试、结果和下一轮行动","layouts":["cover","timeline","compare","quote"],"bg":"#DFE7E1","paper":"#F4F8F4","ink":"#2C3B36","accent":"#52765E","secondary":"#CA945E"}],"css":"*{box-sizing:border-box}body{margin:0;background:var(--bg,#EEE9DF);color:var(--ink,#242B31);font:15px/1.6 system-ui,\"PingFang SC\",sans-serif}button,input,textarea,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:1px solid #0003;background:var(--paper);border-radius:7px;padding:8px 12px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header.toolbar{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #0002;background:var(--paper)}.toolbar strong{font-size:17px;letter-spacing:-.03em}.toolbar div{display:flex;flex-wrap:wrap;gap:8px}.workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 270px;gap:20px;padding:22px}.sidebar{display:grid;align-content:start;gap:10px}.sidebar>span{font-size:11px;opacity:.65}#slideList{display:grid;gap:8px}#slideList button{text-align:left;line-height:1.4;font-size:12px}#slideList button[aria-current=true]{color:var(--paper);background:var(--ink)}.reorder{display:flex;flex-wrap:wrap;gap:5px}.reorder button{font-size:11px;padding:7px 9px}.canvas-area{min-width:0}.piki-slide{position:relative;aspect-ratio:16/9;padding:clamp(26px,4vw,64px);background:var(--paper);border-radius:12px;overflow:hidden;box-shadow:0 16px 42px #0002;display:flex;flex-direction:column;isolation:isolate}.piki-slide[hidden]{display:none}.piki-slide .kicker{font-size:clamp(8px,.9vw,13px);font-weight:700;letter-spacing:.12em;opacity:.65}.piki-slide h1{font-size:clamp(22px,3.8vw,56px);line-height:1.12;letter-spacing:-.045em;margin:16px 0;max-width:91%;overflow-wrap:anywhere}.slide-body{font-size:clamp(11px,1.45vw,22px);line-height:1.65;max-width:86%;margin:4px 0 20px}.piki-slide footer{margin-top:auto;padding-top:18px;font:9px ui-monospace,monospace;opacity:.55}.art{position:absolute;right:7%;bottom:15%;width:34%;height:52%;z-index:-1}.art-part{position:absolute;display:block;border-radius:28%;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}.part-0{width:76%;height:78%;right:0;bottom:0;background:var(--accent);transform:rotate(12deg)}.part-1{width:63%;height:62%;left:0;top:0;background:var(--secondary);border-radius:50%}.part-2{width:35%;height:34%;right:4%;top:6%;background:var(--paper);border-radius:50%}.part-3{width:10%;height:12%;right:27%;top:18%;background:var(--ink);border-radius:50%}.part-4{width:10%;height:12%;right:9%;top:18%;background:var(--ink);border-radius:50%}.art-label{position:absolute;bottom:-15%;right:0;font:8px ui-monospace,monospace;opacity:.5}.layout-cover h1,.layout-cover .slide-body{max-width:58%}.layout-cover h1{font-size:clamp(28px,4.8vw,70px)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:14px;margin:12px 0}.cards article{padding:20px 18px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px;background:color-mix(in srgb,var(--bg) 55%,var(--paper))}.cards h2{font-size:clamp(13px,1.6vw,24px);line-height:1.3;margin:0 0 14px}.cards p{font-size:clamp(10px,1.2vw,18px);margin:0;line-height:1.6}.layout-compare .cards article:nth-child(2){background:var(--ink);color:var(--paper)}.process,.timeline{list-style:none;margin:22px 0;padding:0;display:flex;gap:14px}.process li,.timeline li{flex:1;min-width:0;border-top:3px solid var(--accent);padding:16px 4px}.process b,.timeline b{display:block;font-size:clamp(26px,3vw,45px);color:var(--accent);line-height:1.2;margin-bottom:14px}.process span,.timeline span{font-size:clamp(11px,1.5vw,22px)}.timeline{gap:0;border-top:1px solid #0003}.timeline li{border:0;position:relative;padding-top:24px}.timeline li:before{content:'';position:absolute;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--accent)}.metrics{display:flex;gap:15px;margin-top:22px}.metrics article{flex:1;min-width:0;border-left:2px solid var(--accent);padding:12px 17px}.metrics strong{display:block;font-size:clamp(24px,3.4vw,48px);line-height:1.2;color:var(--accent);overflow-wrap:anywhere}.metrics span{display:block;font-size:clamp(10px,1.2vw,18px);margin-top:15px}.layout-quote blockquote{font-size:clamp(22px,3.5vw,50px);line-height:1.35;letter-spacing:-.04em;margin:26px 0 20px;border-left:6px solid var(--accent);padding-left:26px;max-width:92%}.layout-image img{max-width:75%;max-height:55%;object-fit:contain;align-self:flex-end;border-radius:18px}.layout-image .art{position:relative;align-self:flex-end;right:auto;bottom:auto;width:53%;height:42%;min-height:150px;margin-top:-30px}.layout-image .slide-body{max-width:70%}.bullets{font-size:clamp(11px,1.4vw,20px);padding-left:22px;margin:10px 0}.transport{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px}.transport span{font:11px ui-monospace,monospace}.inspector{padding:18px;background:var(--paper);border-radius:12px;display:grid;align-content:start;gap:11px}.inspector label{display:grid;gap:5px;font-size:10px;font-weight:700}.inspector input,.inspector textarea,.inspector select{width:100%;min-width:0;border:1px solid #0002;border-radius:6px;background:#fff8;padding:8px;font-size:12px}.inspector textarea{resize:vertical;min-height:80px}.inspector small{font-size:10px;opacity:.65}#status{font-size:11px}.notes-panel{background:var(--paper);border:1px solid #0002;padding:20px;border-radius:10px}.notes-panel h2{font-size:14px;margin:0 0 12px}#notesText{white-space:pre-wrap;font-size:14px}.present .workspace{display:block;padding:18px}.present .sidebar,.present .inspector,.present .toolbar{display:none}.present .canvas-area{width:min(1200px,100%);margin:auto}.present .piki-slide{border-radius:5px}.present .piki-slide h1{font-size:clamp(28px,5vw,72px)}.present .slide-body{font-size:clamp(14px,2vw,28px)}body[data-theme=confetti] .piki-slide:before{content:'';position:absolute;right:3%;top:5%;width:70px;height:70px;background:var(--accent);border-radius:50%;box-shadow:-90px 36px 0 -22px var(--secondary),-26px 120px 0 -15px var(--ink);z-index:-1}body[data-theme=cutpaper] .cards article{box-shadow:7px 8px 0 color-mix(in srgb,var(--accent) 40%,transparent);transform:rotate(-1deg);border-radius:2px}body[data-theme=sketch] .cards article,body[data-theme=sketch] .piki-slide{border:2px solid var(--ink);border-radius:10px 18px 12px 22px}body[data-theme=field] .piki-slide{border-radius:30px}body[data-theme=cobalt] .layout-cover{background:var(--bg);color:var(--paper)}body[data-theme=editorial] h1,body[data-theme=brand] h1{font-family:Georgia,\"Songti SC\",serif;font-weight:500}body[data-theme=glass] .cards article{background:color-mix(in srgb,var(--paper) 60%,transparent);box-shadow:0 10px 25px #436c8c15;border-color:#fff9}body[data-theme=brand] .layout-cover{background:var(--bg);color:var(--paper)}body[data-theme=visual] .process li{border:1px solid var(--accent);padding:17px;border-radius:10px}body[data-theme=narrative] .layout-image{background:var(--bg)}body[data-theme=research] .kicker,body[data-theme=proposal] .kicker{font-family:ui-monospace,monospace}body[data-theme=brief] h1{font-family:Georgia,\"Songti SC\",serif}body[data-theme=review] .timeline li:before{border-radius:2px}@media(max-width:1100px){.workspace{grid-template-columns:145px minmax(0,1fr)}.inspector{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){header.toolbar{align-items:start;flex-direction:column;padding:14px}.workspace{display:block;padding:14px}.sidebar{margin-bottom:18px}#slideList{display:flex;overflow:auto}#slideList button{flex:none;max-width:160px}.reorder{margin-top:5px}.inspector{margin-top:15px;display:grid;grid-template-columns:1fr 1fr}.piki-slide{padding:22px}.piki-slide h1{font-size:25px}.slide-body{font-size:12px}.cards{gap:8px}.cards article{padding:12px 10px}.process,.timeline{gap:8px}.layout-cover h1{font-size:33px}.layout-image .art{min-height:70px}.piki-slide footer{font-size:7px}.metrics article{padding:8px}.layout-quote blockquote{padding-left:14px}.transport{padding:15px}.present .workspace{padding:8px}.present .piki-slide h1{font-size:28px}}@media print{@page{size:landscape;margin:0}.toolbar,.sidebar,.inspector,.transport,.notes-panel{display:none!important}body{background:white}.workspace{display:block;padding:0}.piki-slide,.piki-slide[hidden]{display:flex!important;width:100vw;height:100vh;aspect-ratio:auto;box-shadow:none;border-radius:0;break-after:page;padding:6vw}.piki-slide h1{font-size:6vw}.slide-body{font-size:2.5vw}.cards h2{font-size:3vw}.cards p,.process span,.timeline span,.metrics span{font-size:2.2vw}.metrics strong{font-size:5vw}.piki-slide footer{font-size:1vw}.layout-quote blockquote{font-size:5vw}.art{height:48%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}\n.sidebar{background:var(--paper);color:var(--ink);border-radius:12px;padding:16px}.transport{background:var(--paper);color:var(--ink);border-radius:10px;margin-top:16px}@media print{.transport{display:none!important}}\n@media screen{.canvas-area{container-type:inline-size}.piki-slide{padding:5cqw}.piki-slide .kicker{font-size:1.45cqw}.piki-slide h1{font-size:5cqw;margin:1.8cqw 0}.slide-body{font-size:2.2cqw;margin:.5cqw 0 2cqw}.piki-slide footer{padding-top:1.5cqw;font-size:1.2cqw}.layout-cover h1{font-size:7cqw}.cards{gap:1.8cqw;margin:1.5cqw 0}.cards article{padding:2cqw}.cards h2{font-size:2.5cqw;margin-bottom:1.4cqw}.cards p{font-size:1.9cqw}.process,.timeline{gap:1.8cqw;margin:2cqw 0}.process li,.timeline li{padding:2cqw .5cqw}.process b,.timeline b{font-size:4cqw;margin-bottom:1.4cqw}.process span,.timeline span{font-size:2.2cqw}.metrics{gap:1.8cqw;margin-top:2cqw}.metrics article{padding:1.5cqw 2cqw}.metrics strong{font-size:5cqw}.metrics span{font-size:2cqw;margin-top:1.5cqw}.layout-quote blockquote{font-size:5cqw;margin:2cqw 0;padding-left:3cqw}.layout-image img,.layout-image .art{position:absolute;right:6%;bottom:14%;width:50%;height:40%;min-height:0;margin:0;max-width:50%;max-height:40%}.present .piki-slide h1{font-size:5cqw}.present .slide-body{font-size:2.2cqw}.present .layout-cover h1{font-size:7cqw}}\n@media screen{body[data-theme=visual] .process li{padding:2cqw}}\n","runtime":"(() => {\n const payload=JSON.parse(document.getElementById('piki-deck-data').content.textContent);\n let deck=payload.deck,index=0,present=false;\n const $=id=>document.getElementById(id);\n const el=(tag,text,cls)=>{const x=document.createElement(tag);if(text!==undefined)x.textContent=text;if(cls)x.className=cls;return x;};\n const theme=()=>payload.themes.find(t=>t.id===deck.theme)||payload.themes[0];\n function saveLocal(){try{localStorage.setItem('piki-deck-'+payload.id,JSON.stringify(deck));}catch{}}\n try{const saved=JSON.parse(localStorage.getItem('piki-deck-'+payload.id));if(saved?.version===1&&Array.isArray(saved.slides)&&saved.slides.length)deck=saved;}catch{}\n function editable(node,s,key){if(present)return;node.contentEditable='true';node.dataset.editField=key;node.addEventListener('input',()=>{s[key]=node.textContent;saveLocal();$('currentLabel').textContent=(index+1)+' / '+deck.slides.length;});}\n function illustration(s){const x=el('div',undefined,'art');x.setAttribute('aria-label','独立绘制的抽象示意图');for(let i=0;i<5;i++){const q=el('i');q.className='art-part part-'+i;x.append(q);}x.append(el('span',s.kicker||'PIKI / 示例','art-label'));return x;}\n function slide(s,i){\n const page=el('section',undefined,'piki-slide layout-'+s.layout);page.dataset.slide=s.id;page.hidden=i!==index;page.append(el('span',s.kicker||deck.title,'kicker'));\n const title=el('h1',s.title);editable(title,s,'title');page.append(title);\n const body=el('p',s.body,'slide-body');editable(body,s,'body');page.append(body);\n if(s.layout==='image'){if(s.image){const image=el('img');image.src=s.image;image.alt=s.title;page.append(image);}else page.append(illustration(s));}\n if(s.layout==='cover')page.append(illustration(s));\n if(s.layout==='quote'){const quote=el('blockquote',s.body||s.title);page.querySelector('.slide-body').hidden=true;page.append(quote);}\n if(['grid','compare'].includes(s.layout)){const list=el('div',undefined,'cards');for(const c of s.cards){const card=el('article');card.append(el('h2',c.title),el('p',c.text));list.append(card);}page.append(list);}\n if(['process','timeline'].includes(s.layout)){const list=el('ol',undefined,s.layout==='timeline'?'timeline':'process');for(const [j,value] of s.steps.entries()){const step=el('li');step.append(el('b',String(j+1).padStart(2,'0')),el('span',value));list.append(step);}page.append(list);}\n if(s.layout==='metrics'){const list=el('div',undefined,'metrics');for(const m of s.metrics){const card=el('article');card.append(el('strong',m.value),el('span',m.label));list.append(card);}page.append(list);}\n if(s.bullets?.length){const list=el('ul',undefined,'bullets');s.bullets.forEach(t=>list.append(el('li',t)));page.append(list);}\n page.append(el('footer','PIKI / '+String(i+1).padStart(2,'0')+' · '+deck.slides.length));return page;\n }\n function applyTheme(){const t=theme();document.body.dataset.theme=t.theme;for(const k of ['bg','paper','ink','accent','secondary'])document.documentElement.style.setProperty('--'+k,t[k]);$('themeSelect').value=t.id;}\n function render(){\n index=Math.max(0,Math.min(index,deck.slides.length-1));applyTheme();$('slides').replaceChildren(...deck.slides.map(slide));\n $('slideList').replaceChildren(...deck.slides.map((s,i)=>{const b=el('button',(i+1)+' '+s.title);b.type='button';b.setAttribute('aria-current',String(i===index));b.onclick=()=>{index=i;render();};return b;}));\n const s=deck.slides[index];for(const k of ['title','kicker','body','notes'])$(k+'Input').value=s[k]||'';\n $('layoutSelect').value=s.layout;$('cardsInput').value=(s.cards||[]).map(c=>c.title+' :: '+c.text).join('\\n');$('stepsInput').value=(s.steps||[]).join('\\n');$('metricsInput').value=(s.metrics||[]).map(m=>m.value+' :: '+m.label).join('\\n');\n $('currentLabel').textContent=(index+1)+' / '+deck.slides.length;$('notesText').textContent=s.notes||'这一页还没有备注。';\n document.body.classList.toggle('present',present);saveLocal();\n }\n function change(delta){index=Math.max(0,Math.min(index+delta,deck.slides.length-1));render();}\n ['title','kicker','body','notes'].forEach(k=>{\n const input=$(k+'Input');\n input.addEventListener('input',()=>{\n const s=deck.slides[index];s[k]=input.value;saveLocal();\n const page=$('slides').children[index];\n const node=page?.querySelector({title:'h1',kicker:'.kicker',body:'.slide-body'}[k]||'.unused');\n if(node)node.textContent=s[k];\n if(k==='body'&&s.layout==='quote')page.querySelector('blockquote').textContent=s.body||s.title;\n if(k==='title')$('slideList').children[index].textContent=(index+1)+' '+s.title;\n if(k==='notes')$('notesText').textContent=s.notes||'这一页还没有备注。';\n });\n });\n const parsePairs=(value)=>value.split('\\n').filter(s=>s.trim()).map(line=>{const [title,...text]=line.split('::');return {title:title.trim(),text:text.join('::').trim()};});\n $('cardsInput').addEventListener('input',()=>{deck.slides[index].cards=parsePairs($('cardsInput').value).slice(0,6);saveLocal();});\n $('stepsInput').addEventListener('input',()=>{deck.slides[index].steps=$('stepsInput').value.split('\\n').filter(s=>s.trim()).slice(0,6);saveLocal();});\n $('metricsInput').addEventListener('input',()=>{deck.slides[index].metrics=parsePairs($('metricsInput').value).slice(0,4).map(x=>({value:x.title,label:x.text}));saveLocal();});\n ['cardsInput','stepsInput','metricsInput'].forEach(id=>$(id).addEventListener('blur',render));\n $('layoutSelect').onchange=()=>{deck.slides[index].layout=$('layoutSelect').value;render();};\n $('themeSelect').onchange=()=>{deck.theme=$('themeSelect').value;render();};\n $('previous').onclick=()=>change(-1);$('next').onclick=()=>change(1);\n $('presentButton').onclick=()=>{present=!present;render();};\n $('notesButton').onclick=()=>{$('notesPanel').hidden=!$('notesPanel').hidden;};\n $('moveUp').onclick=()=>{if(index){[deck.slides[index-1],deck.slides[index]]=[deck.slides[index],deck.slides[index-1]];index--;render();}};\n $('moveDown').onclick=()=>{if(index<deck.slides.length-1){[deck.slides[index+1],deck.slides[index]]=[deck.slides[index],deck.slides[index+1]];index++;render();}};\n $('duplicate').onclick=()=>{const copy=JSON.parse(JSON.stringify(deck.slides[index]));copy.id='copy-'+crypto.randomUUID().slice(0,8);deck.slides.splice(index+1,0,copy);index++;render();};\n $('removeSlide').onclick=()=>{if(deck.slides.length>1){deck.slides.splice(index,1);render();}};\n $('addSlide').onclick=()=>{deck.slides.push({id:'new-'+crypto.randomUUID().slice(0,8),layout:'grid',title:'新的观点',kicker:'PIKI',body:'写清楚这一页要表达什么。',notes:'',cards:[],steps:[],metrics:[],bullets:[],image:''});index=deck.slides.length-1;render();};\n $('imageInput').onchange=()=>{const f=$('imageInput').files[0];if(!f)return;if(!['image/png','image/jpeg','image/webp'].includes(f.type)||f.size>10*1024*1024){$('status').textContent='请选择不超过 10 MB 的 PNG、JPEG 或 WebP。';return;}const r=new FileReader();r.onload=()=>{deck.slides[index].image=r.result;deck.slides[index].layout='image';render();};r.readAsDataURL(f);};\n function download(text,type,name){const url=URL.createObjectURL(new Blob([text],{type}));const a=el('a');a.href=url;a.download=name;document.body.append(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1500);}\n $('saveJson').onclick=()=>download(JSON.stringify(deck,null,2),'application/json','source.json');\n $('saveHtml').onclick=()=>{\n const encoded=JSON.stringify({...payload,deck}).replaceAll('<','\\\\u003c');\n const html='<!doctype html><html lang=\"zh-CN\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>PIKI 可编辑演示</title><style>'+payload.css+'</style></head><body>'+payload.shell+'<template id=\"piki-deck-data\">'+encoded.replaceAll('&','&')+'</template><script>'+payload.runtime.replaceAll('</script','<\\\\/script')+'</'+'script></body></html>';\n download(html,'text/html','index.html');\n };\n $('printPdf').onclick=()=>{present=false;render();window.print();};\n document.addEventListener('keydown',e=>{if(e.target.matches('input,textarea,select')||e.target.isContentEditable)return;if(e.key==='ArrowRight'||e.key==='PageDown'){e.preventDefault();change(1);}if(e.key==='ArrowLeft'||e.key==='PageUp'){e.preventDefault();change(-1);}if(e.key==='Escape'){present=false;render();}});\n render();\n})();\n","shell":"<header class=\"toolbar\"><strong>PIKI 可编辑演示</strong><div><select id=\"themeSelect\" aria-label=\"主题\"><option value=\"piki-free-event-deck\">活动邀请演示</option><option value=\"piki-free-cutpaper-deck\">剪纸感课程演示</option><option value=\"piki-free-sketchnote-deck\">手绘笔记式演示</option><option value=\"piki-free-field-course-deck\">户外课程介绍</option><option value=\"piki-free-system-release-deck\">系统产品发布演示</option><option value=\"piki-free-editorial-deck\">编辑感观点演示</option><option value=\"piki-free-glass-deck\">轻玻璃感演示</option><option value=\"piki-free-brand-story-deck\">品牌故事演示</option><option value=\"piki-free-visual-explainer-deck\">可编辑图解演示</option><option value=\"piki-free-image-story-deck\">图像叙事演示</option><option value=\"piki-free-research-deck\">研究分享演示</option><option value=\"piki-free-proposal-deck\">方案汇报演示</option><option value=\"piki-free-article-deck\">文章要点演示</option><option value=\"piki-free-learning-review-deck\">学习复盘演示</option></select><button id=\"presentButton\">演讲 / 编辑</button><button id=\"saveJson\">保存源数据</button><button id=\"saveHtml\">下载 HTML</button><button id=\"printPdf\">打印 PDF</button></div></header><main class=\"workspace\"><aside class=\"sidebar\"><span>页面目录</span><div id=\"slideList\"></div><div class=\"reorder\"><button id=\"moveUp\">上移</button><button id=\"moveDown\">下移</button><button id=\"duplicate\">复制页</button><button id=\"removeSlide\">删当前页</button><button id=\"addSlide\">新建页</button></div><small>编辑仅保存在本机；分享前导出文件。</small></aside><section class=\"canvas-area\"><div id=\"slides\"></div><div class=\"transport\"><button id=\"previous\" aria-label=\"上一页\">←</button><span id=\"currentLabel\"></span><button id=\"next\" aria-label=\"下一页\">→</button><button id=\"notesButton\">备注</button></div><section class=\"notes-panel\" id=\"notesPanel\" hidden><h2>当前页讲稿</h2><div id=\"notesText\"></div></section></section><aside class=\"inspector\"><label>标题<input id=\"titleInput\"></label><label>页眉<input id=\"kickerInput\"></label><label>布局<select id=\"layoutSelect\"><option>cover</option><option>grid</option><option>process</option><option>compare</option><option>metrics</option><option>image</option><option>quote</option><option>timeline</option></select></label><label>正文<textarea id=\"bodyInput\"></textarea></label><label>讲稿备注<textarea id=\"notesInput\"></textarea></label><label>卡片：标题 :: 内容，每行一项<textarea id=\"cardsInput\"></textarea></label><label>流程或时间线，每行一项<textarea id=\"stepsInput\"></textarea></label><label>指标：数值 :: 标签，每行一项<textarea id=\"metricsInput\"></textarea></label><label>替换图片<input id=\"imageInput\" type=\"file\" accept=\"image/png,image/jpeg,image/webp\"></label><small>可编辑文本和图形；图片内容需在图片工具中修改。</small><p id=\"status\" role=\"status\"></p></aside></main>"}