编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 生成 PPT</title>
<style>
  :root{
    --primary:#5b5bd6; --primary-dark:#4646b8; --primary-light:#ecebfc;
    --success:#22a85b; --success-light:#e8f7ee;
    --warn:#ff7a2f; --warn-light:#fff3e8;
    --danger:#ff4d4f; --danger-light:#fff1f0;
    --bg:#f5f6fa; --card:#fff; --line:#eef0f4;
    --text:#1f2329; --sub:#8a8f99;
    --shadow:0 6px 24px rgba(31,35,41,.06);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(160deg,#eef0fb,#f6f7fb 40%,#f2f5f9);color:var(--text);}
  button{font-family:inherit;cursor:pointer;}
  input,textarea,select{font-family:inherit;outline:none;}
  .app{max-width:1180px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:0 20px 40px;}
  .topbar{height:60px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:0 6px;position:sticky;top:0;z-index:50;}
  .logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;color:var(--text);}
  .logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#8b7cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 4px 12px rgba(91,91,214,.35);}
  .logo small{font-size:10px;color:var(--sub);font-weight:500;display:block;letter-spacing:1px;}
  .topnav{margin-left:auto;display:flex;align-items:center;gap:6px;}
  .topnav a{font-size:13px;color:var(--sub);text-decoration:none;padding:7px 12px;border-radius:8px;cursor:pointer;}
  .topnav a:hover{background:var(--primary-light);color:var(--primary-dark);}
  .topnav a.active{background:var(--primary-light);color:var(--primary-dark);font-weight:600;}
  .ai-ind{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;display:flex;align-items:center;gap:5px;}
  .ai-ind.on{background:var(--success-light);color:var(--success);}
  .ai-ind.off{background:#f1f2f7;color:var(--sub);}
  .page{display:none;animation:fadeIn .3s ease;}
  .page.active{display:block;}
  @keyframes fadeIn{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
  .crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);padding:16px 2px 0;flex-wrap:wrap;}
  .crumbs b{color:var(--text);font-weight:600;}
  .crumbs .sep{color:#c6cad2;}
  .crumbs .cur{color:var(--primary);font-weight:700;}
  .crumbs .done{color:var(--success);font-weight:600;cursor:pointer;}
  .crumbs .done:hover{text-decoration:underline;}
  .btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;padding:11px 22px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 5px 16px rgba(91,91,214,.3);transition:transform .15s,opacity .15s;}
  .btn:hover{transform:translateY(-1px);}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
  .btn-ghost{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none;font-weight:500;}
  .btn-ghost:hover{border-color:var(--primary);color:var(--primary-dark);}
  .btn-ai{background:linear-gradient(135deg,#7b5bf6,#5b8bf6);box-shadow:0 5px 16px rgba(123,91,246,.3);}
  .btn-green{background:linear-gradient(135deg,#22a85b,#178a49);box-shadow:0 5px 16px rgba(34,168,91,.3);}
  .btn-block{width:100%;justify-content:center;}
  .pagefoot{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 2px;display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
  .card{background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);}
  .card-pad{padding:22px;}
  .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;padding:46px 8px 26px;}
  .hero h1{font-size:38px;line-height:1.28;font-weight:800;}
  .hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--primary),#8b7cf6);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero p{color:var(--sub);font-size:15px;margin:16px 0 26px;line-height:1.7;}
  .hero .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
  .hero-note{font-size:12px;color:var(--sub);margin-top:14px;}
  .hero-preview{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);}
  .hp-head{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff;padding:26px 24px;}
  .hp-head small{opacity:.8;font-size:11px;letter-spacing:2px;}
  .hp-head h3{font-size:20px;margin-top:6px;}
  .hp-body{padding:18px 20px;font-size:13px;color:#334;display:flex;flex-direction:column;gap:12px;}
  .hp-body .step{display:flex;gap:10px;align-items:center;}
  .hp-body .no{background:#ecebfc;color:var(--primary);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex:none;font-size:12px;}
  .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:10px 8px 30px;}
  .feat .f{background:#fff;border-radius:14px;padding:20px;border:1px solid var(--line);}
  .feat .f .ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px;}
  .feat .f h4{font-size:15px;}
  .feat .f p{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.6;}
  .f1{background:var(--primary-light);}.f2{background:var(--success-light);}.f3{background:var(--warn-light);}
  .drop{border:2px dashed #c9cde0;border-radius:14px;padding:40px 20px;text-align:center;cursor:pointer;transition:.2s;background:#fafbff;}
  .drop.drag{border-color:var(--primary);background:var(--primary-light);}
  .drop .big{font-size:38px;}
  .drop h3{font-size:16px;margin-top:10px;}
  .drop p{font-size:12px;color:var(--sub);margin-top:8px;line-height:1.7;}
  .fmt{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;}
  .fmt span{font-size:11px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 10px;color:#667;}
  .filelist{margin-top:18px;}
  .fl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .fl-head b{font-size:13px;}
  .fl-head .clr{font-size:12px;color:var(--danger);cursor:pointer;}
  .fitem{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff;}
  .ficon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;color:#fff;}
  .ft{flex:1;min-width:0;}
  .ft b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ft .fsub{font-size:11px;color:var(--sub);display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap;}
  .fstat{font-size:11px;font-weight:600;flex:none;padding:3px 9px;border-radius:20px;}
  .fstat.wait{background:#f1f2f7;color:var(--sub);}
  .fstat.run{background:var(--primary-light);color:var(--primary);}
  .fstat.ok{background:var(--success-light);color:var(--success);}
  .fstat.skip{background:var(--warn-light);color:var(--warn);}
  .fstat.err{background:var(--danger-light);color:var(--danger);}
  .fdel{width:30px;height:30px;border:none;background:#f5f6fa;color:#a0a6b0;border-radius:8px;font-size:14px;flex:none;}
  .fdel:hover{background:var(--danger-light);color:var(--danger);}
  .extract-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:16px;}
  .extract-box .eb-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:10px;cursor:pointer;}
  .extract-box textarea{width:100%;height:150px;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:12px;line-height:1.7;color:#444;resize:vertical;background:#fafbff;}
  .format-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);margin-top:14px;background:var(--primary-light);border-radius:10px;padding:10px 12px;flex-wrap:wrap;}
  .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:8px 0;}
  .mode-card{background:#fff;border:2px solid var(--line);border-radius:16px;padding:26px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;}
  .mode-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow);}
  .mode-card .mtag{position:absolute;top:16px;right:16px;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;}
  .m-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:16px;}
  .mode-card h3{font-size:18px;}
  .mode-card p{font-size:13px;color:var(--sub);line-height:1.7;margin:10px 0 16px;}
  .mode-card ul{list-style:none;font-size:12px;color:#667;display:flex;flex-direction:column;gap:7px;}
  .mode-card ul li{display:flex;gap:8px;align-items:flex-start;}
  .mode-card ul li::before{content:"✓";color:var(--success);font-weight:700;}
  .mode-card .go{margin-top:18px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--primary);}
  .mode-card.auto .m-ico{background:var(--primary-light);}
  .mode-card.auto .mtag{background:var(--primary-light);color:var(--primary);}
  .mode-card.step .m-ico{background:var(--success-light);}
  .mode-card.step .mtag{background:var(--success-light);color:var(--success);}
  .smart-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:10px 0;}
  .prog-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
  .prog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .prog-top b{font-size:13px;}
  .prog-top .pct{font-size:26px;font-weight:800;color:var(--primary);}
  .prog-top .pct small{font-size:12px;color:var(--sub);font-weight:500;}
  .progbar{height:10px;background:#eef0f4;border-radius:6px;overflow:hidden;margin:10px 0 4px;}
  .progbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#8b7cf6);border-radius:6px;transition:width .4s ease;}
  .stage{font-size:13px;color:var(--sub);margin-top:6px;}
  .stage b{color:var(--primary);}
  .timeline{margin-top:20px;display:flex;flex-direction:column;}
  .tl-item{display:flex;gap:12px;position:relative;padding-bottom:18px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line);}
  .tl-item:last-child::before{display:none;}
  .tl-dot{width:22px;height:22px;border-radius:50%;flex:none;background:#eef0f4;display:flex;align-items:center;justify-content:center;font-size:11px;color:#a0a6b0;z-index:1;position:relative;}
  .tl-item.run .tl-dot{background:var(--primary);color:#fff;animation:pulse 1.2s infinite;}
  .tl-item.done .tl-dot{background:var(--success);color:#fff;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(91,91,214,.4)}50%{box-shadow:0 0 0 6px rgba(91,91,214,.12)}}
  .tl-body{flex:1;padding-top:2px;}
  .tl-body b{font-size:13px;display:block;}
  .tl-body .st{font-size:11px;color:var(--sub);margin-top:3px;}
  .tl-item.run .st{color:var(--primary);}
  .log-card{display:flex;flex-direction:column;}
  .log-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:12px;}
  .log-head .live{width:8px;height:8px;background:var(--danger);border-radius:50%;animation:blink 1s infinite;}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
  .log{flex:1;background:#12141f;border-radius:12px;padding:16px;overflow-y:auto;max-height:430px;min-height:320px;}
  .log::-webkit-scrollbar{width:6px;}
  .log::-webkit-scrollbar-thumb{background:#2c3044;border-radius:3px;}
  .log-line{font-family:Consolas,Menlo,monospace;font-size:12px;color:#c3c9e6;line-height:1.9;word-break:break-all;}
  .log-line .ts{color:#4a5069;margin-right:8px;}
  .log-line.ok{color:#5fd38a;}
  .log-line.warn{color:#ffb36b;}
  .log-line.info{color:#7ea6ff;}
  .smart-done{display:none;text-align:center;padding:26px 0 8px;}
  .smart-done.show{display:block;animation:fadeIn .4s;}
  .smart-done .tick{width:64px;height:64px;border-radius:50%;background:var(--success-light);color:var(--success);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .pstep-bar{display:flex;gap:8px;padding:16px 0 6px;overflow-x:auto;}
  .pstep{flex:1;min-width:130px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;transition:.2s;}
  .pstep .n{width:26px;height:26px;border-radius:50%;background:#eef0f4;color:#a0a6b0;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
  .pstep b{font-size:13px;display:block;}
  .pstep span{font-size:11px;color:var(--sub);}
  .pstep.cur{border-color:var(--primary);background:var(--primary-light);}
  .pstep.cur .n{background:var(--primary);color:#fff;}
  .pstep.done{border-color:var(--success);}
  .pstep.done .n{background:var(--success);color:#fff;}
  .pstep.done b::after{content:" ✓";color:var(--success);}
  .ps-step{display:none;}
  .ps-step.active{display:block;animation:fadeIn .3s;}
  .ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px;flex-wrap:wrap;}
  .ps-head h3{font-size:17px;}
  .ps-head p{font-size:12px;color:var(--sub);margin-top:4px;}
  .outline-empty{text-align:center;padding:50px 0;color:var(--sub);}
  .outline-empty .big{font-size:40px;}
  .outline-empty p{font-size:13px;margin:12px 0 18px;}
  .outline-list{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
  .oitem{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;}
  .oitem .num{width:26px;height:26px;border-radius:8px;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
  .oitem input{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13px;flex:1;min-width:0;}
  .oitem input:focus{border-color:var(--primary);}
  .oitem .subinput{flex:1;}
  .oitem .del{width:30px;height:30px;border:none;background:#f5f6fa;color:#a0a6b0;border-radius:8px;font-size:14px;flex:none;}
  .oitem .del:hover{background:var(--danger-light);color:var(--danger);}
  .add-item{display:flex;align-items:center;gap:8px;background:#fafbff;border:1px dashed #c9cde0;border-radius:11px;padding:11px 12px;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;justify-content:center;margin-top:10px;}
  .loading-skel{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
  .skel{height:44px;border-radius:10px;background:linear-gradient(90deg,#f1f2f7 25%,#e6e8f1 50%,#f1f2f7 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;}
  @keyframes shimmer{to{background-position:-200% 0;}}
  .copy-wrap{display:grid;grid-template-columns:250px 1fr;gap:16px;}
  .slide-nav{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);max-height:520px;overflow-y:auto;}
  .snav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--text);}
  .snav-item .no{width:22px;height:22px;border-radius:6px;background:#f1f2f7;color:#778;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
  .snav-item b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
  .snav-item .ai{font-size:9px;background:var(--success-light);color:var(--success);border-radius:4px;padding:1px 5px;flex:none;font-weight:700;}
  .snav-item.cur{background:var(--primary-light);}
  .snav-item.cur .no{background:var(--primary);color:#fff;}
  .copy-editor{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);}
  .ce-row{margin-bottom:16px;}
  .ce-row label{font-size:12px;color:var(--sub);display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
  .ce-row label .hint{font-size:11px;color:#a0a6b0;font-weight:400;}
  .ce-row input,.ce-row textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13px;line-height:1.7;color:var(--text);}
  .ce-row input:focus,.ce-row textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,91,214,.1);}
  .ce-row textarea{height:200px;resize:vertical;}
  .ce-actions{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;}
  .ce-actions .hint-tip{margin-left:auto;font-size:11px;color:#a0a6b0;align-self:center;}
  .tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .tpl{background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:.2s;}
  .tpl:hover{border-color:#c9cde0;}
  .tpl.sel{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,91,214,.12);}
  .tpl-prev{height:130px;border-radius:10px;position:relative;overflow:hidden;margin-bottom:12px;}
  .tpl-prev .ttl{position:absolute;left:14px;top:16px;font-size:13px;font-weight:700;z-index:2;}
  .tpl-prev .ttl small{display:block;font-size:9px;font-weight:500;opacity:.75;margin-top:4px;}
  .tpl-prev .line{position:absolute;left:14px;top:62px;width:56px;height:4px;border-radius:2px;z-index:2;}
  .render-center{text-align:center;padding:50px 0 20px;}
  .render-ring{width:110px;height:110px;margin:0 auto 24px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;}
  .render-ring .inner{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;}
  .render-ring .inner b{font-size:22px;color:var(--primary);}
  .render-ring .inner span{font-size:11px;color:var(--sub);}
  .render-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:5px solid var(--primary-light);}
  .render-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:5px solid transparent;border-top-color:var(--primary);animation:spin 1s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .res-wrap{display:grid;grid-template-columns:220px 1fr;gap:18px;}
  .res-left{display:flex;flex-direction:column;gap:14px;}
  .thumb-list{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);max-height:560px;overflow-y:auto;}
  .thumb{display:flex;gap:9px;align-items:center;padding:7px;border-radius:9px;cursor:pointer;}
  .thumb .mini{width:74px;height:46px;border-radius:6px;flex:none;overflow:hidden;position:relative;border:1px solid var(--line);}
  .thumb.sel{background:var(--primary-light);}
  .thumb .tt{font-size:12px;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .thumb .no{font-size:10px;color:#a0a6b0;width:16px;text-align:right;flex:none;}
  .res-actions{display:flex;flex-direction:column;gap:9px;}
  .res-stage{background:#e8eaf2;border-radius:16px;padding:28px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
  .slide-preview{width:100%;max-width:760px;aspect-ratio:16/9;border-radius:12px;box-shadow:0 18px 50px rgba(31,35,41,.25);display:flex;flex-direction:column;position:relative;overflow:hidden;}
  .sp-top{display:flex;align-items:center;gap:6px;padding:10px 18px;flex:none;}
  .sp-top .mark{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex:none;}
  .sp-top span{font-size:11px;letter-spacing:2px;}
  .sp-body{flex:1;display:flex;flex-direction:column;padding:0 46px;}
  .sp-body h2{font-size:34px;margin:auto 0 14px;}
  .sp-body ul{list-style:none;margin-bottom:auto;display:flex;flex-direction:column;gap:14px;}
  .sp-body li{display:flex;gap:12px;font-size:17px;align-items:center;}
  .sp-body li::before{content:"";width:9px;height:9px;border-radius:3px;flex:none;transform:rotate(45deg);}
  .sp-num{position:absolute;right:18px;bottom:10px;font-size:11px;}
  .sp-tag{position:absolute;left:18px;bottom:10px;font-size:10px;letter-spacing:1px;opacity:.6;}
  .modal-mask{position:fixed;inset:0;background:rgba(15,17,26,.45);backdrop-filter:blur(3px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;}
  .modal-mask.show{display:flex;}
  .modal{background:#fff;border-radius:16px;width:520px;max-width:100%;max-height:90vh;overflow-y:auto;padding:24px;animation:fadeIn .25s;}
  .modal h3{font-size:17px;margin-bottom:6px;}
  .modal .msub{font-size:12px;color:var(--sub);margin-bottom:18px;line-height:1.7;}
  .mfield{margin-bottom:14px;}
  .mfield label{font-size:12px;color:var(--sub);display:block;margin-bottom:6px;}
  .mfield input,.mfield select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;}
  .mfield input:focus{border-color:var(--primary);}
  .switch-row{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:14px;}
  .switch{width:42px;height:24px;border-radius:12px;background:#d6d9e0;position:relative;cursor:pointer;transition:.2s;flex:none;}
  .switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .switch.on{background:var(--success);}
  .switch.on::after{left:21px;}
  .m-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}
  #toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:#1f2329;color:#fff;font-size:13px;padding:11px 20px;border-radius:10px;opacity:0;transition:.3s;z-index:200;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px;max-width:80vw;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .banner{background:var(--warn-light);color:#a05a00;font-size:12px;border-radius:10px;padding:10px 14px;margin-top:12px;display:none;}
  .banner.show{display:block;}
  .htag.ok{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--success-light);color:var(--success);font-weight:600;}
  @media(max-width:900px){
    .hero{grid-template-columns:1fr;}
    .mode-grid{grid-template-columns:1fr;}
    .smart-wrap,.res-wrap{grid-template-columns:1fr;}
    .tpl-grid{grid-template-columns:repeat(2,1fr);}
    .copy-wrap{grid-template-columns:1fr;}
    .feat{grid-template-columns:1fr;}
    .hero h1{font-size:30px;}
  }
</style>
</head>
<body>
<div class="app">

  <div class="topbar">
    <div class="logo"><div class="mark">✦</div><div>AI 生成 PPT<small>REAL PPT GENERATOR</small></div></div>
    <div class="topnav">
      <span class="ai-ind off" id="aiInd">⚙ 未启用 AI</span>
      <a class="active" onclick="go('home')">首页</a>
      <a onclick="go('upload')">新建 PPT</a>
      <a onclick="openModal()">AI 设置</a>
    </div>
  </div>

  <div class="banner" id="cdnBanner">⚠ 部分功能库加载失败（需要联网）。文件解析与 PPT 生成可能不可用。</div>

  <div class="page active" id="page-home">
    <div class="hero">
      <div>
        <h1>上传资料，<em>真实生成</em>专业 PPT 文件</h1>
        <p>在浏览器内解析 Word / Excel / PPT / PDF / TXT 的真实内容，AI 生成大纲与文案（无 Key 自动模板兜底），一键输出可下载的 .pptx 文件。</p>
        <div class="row">
          <button class="btn" onclick="go('upload')">🚀 开始制作 PPT</button>
          <button class="btn btn-ghost" onclick="useDemo()">用示例资料试试</button>
        </div>
        <div class="hero-note">✓ 纯前端运行，文件不出本机　✓ 生成真实 .pptx　✓ 数据本地保存</div>
      </div>
      <div class="hero-preview">
        <div class="hp-head">
          <small>REAL PPTX · 16:9</small>
          <h3>生成流程</h3>
        </div>
        <div class="hp-body">
          <div class="step"><b class="no">1</b> 上传并解析资料（docx/xlsx/pptx/pdf/txt）</div>
          <div class="step"><b class="no" style="background:#ecebfc;color:var(--primary);">2</b> AI 生成大纲与文案（无 Key 模板兜底）</div>
          <div class="step"><b class="no" style="background:#e8f7ee;color:var(--success);">3</b> 选择模板并渲染真实 .pptx</div>
        </div>
      </div>
    </div>

    <div class="feat">
      <div class="f"><div class="ico f1">📄</div><h4>真实解析</h4><p>docx / xlsx / pptx / pdf / txt 文本真实提取，生成的内容来自您的资料本身。</p></div>
      <div class="f"><div class="ico f2">🤖</div><h4>AI + 兜底</h4><p>配置任意 OpenAI 兼容 API 即可 AI 生成；未配置时自动用模板规则生成，永远可用。</p></div>
      <div class="f"><div class="ico f3">📦</div><h4>真实 .pptx</h4><p>使用 PptxGenJS 在本机渲染并导出 PPTX 文件，可在 WPS / Office / Keynote 直接打开。</p></div>
    </div>
  </div>

  <div class="page" id="page-upload">
    <div class="crumbs">
      <span class="done" onclick="go('home')">首页</span><span class="sep">›</span>
      <b class="cur">① 上传并解析资料</b><span class="sep">›</span>
      <b>② 选择模式</b><span class="sep">›</span>
      <b>③ 生成</b><span class="sep">›</span>
      <b>④ 下载</b>
    </div>

    <div class="card card-pad" style="margin-top:16px;">
      <div class="drop" id="dropZone" onclick="$('#fileInput').click()">
        <div class="big">📁</div>
        <h3>点击选择文件，或将文件拖拽到此处</h3>
        <p>支持多文件上传 · 单个文件不超过 50MB<br>上传后点击下方按钮，浏览器会真实解析文件文本内容</p>
        <div class="fmt">
          <span>Word .docx</span><span>Excel .xlsx</span><span>PPT .pptx</span><span>PDF .pdf</span><span>.txt</span><span>图片（仅作素材）</span>
        </div>
      </div>
      <input type="file" id="fileInput" multiple hidden accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.pdf,.png,.jpg,.jpeg,.gif,.webp,.bmp">
    </div>

    <div class="filelist" id="fileSection" style="display:none;">
      <div class="fl-head"><b>已添加 <span id="fileCount">0</span> 个文件</b><span class="clr" onclick="clearFiles()">清空全部</span></div>
      <div id="fileList"></div>
    </div>

    <div class="extract-box" id="extractBox" style="display:none;">
      <div class="eb-head" onclick="toggleExtract()"><span id="extractArrow">▸</span> 已提取内容预览 <span style="font-weight:400;color:var(--sub);">（<span id="extractLen">0</span> 字，点击展开）</span></div>
      <textarea id="extractText" readonly style="display:none;" placeholder="解析后这里会显示从文件中提取的真实文本…">
编辑页面

选择生成模式

智能规划模式

精准控制模式

PPT 生成完成

第一步 · 生成大纲

第二步 · 撰写文案

第三步 · 选择设计

第四步 · 渲染下载

📊 演示文稿
