cms-SiteForge/examples/Studio_V8_21_2_新手友好版交互预览.html

<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SiteForge · 简洁可视化编辑器交互预览</title><style>
:root{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#253448;background:#eff2f6}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #db7a32;outline-offset:2px}[hidden]{display:none!important}.top{height:70px;display:flex;align-items:center;gap:14px;padding:0 20px;background:#fff;border-bottom:1px solid #e7ebf0}.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800}.logo b{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;background:#243246;color:#f39355;font-size:24px}.logo span{display:block;font-size:10px;letter-spacing:1.1px;color:#a0aabb;font-weight:500}.vline{height:28px;border-left:1px solid #e4e9f0}.filename{display:flex;flex-direction:column;gap:4px}.filename small{font-size:10px;color:#8b97a8}.filename strong{font-size:14px}.devices{margin:auto;display:flex;gap:3px;background:#f3f5f8;padding:4px;border-radius:9px}.devices button{border:0;border-radius:7px;background:transparent;color:#718092;font-weight:750;font-size:12px;padding:9px 12px}.devices button.on{background:#fff;box-shadow:0 2px 8px #17283b13;color:#bd6128}.muted{font-size:11px;color:#8391a2;white-space:nowrap}.primary,.outline{padding:11px 16px;border-radius:9px;font-weight:750;font-size:12px;border:1px solid #dcb18f}.primary{background:#de7532;color:white;border-color:#de7532}.outline{color:#b85a20;background:#fff8f2}.more{position:relative}.more summary{padding:10px 11px;border:1px solid #e3e7ec;border-radius:9px;background:white;list-style:none;font-size:12px;cursor:pointer}.more[open] .more-menu{display:grid}.more-menu{display:none;position:absolute;right:0;top:45px;min-width:190px;padding:10px;border:1px solid #e3e7ed;border-radius:12px;background:white;box-shadow:0 10px 40px #243a5528;z-index:20;gap:4px}.more-menu button{border:0;text-align:left;border-radius:7px;background:#fff;padding:9px;font-size:12px}.more-menu button:hover{background:#f3f5f8}.steps{display:flex;align-items:center;gap:13px;min-height:46px;background:#fff9f3;border-bottom:1px solid #f0e2d6;padding:7px 20px;font-size:12px;color:#8793a3}.steps b{color:#b1683c}.steps em{font-style:normal;border-radius:7px;padding:5px 8px;font-weight:750}.steps em.active{background:#fbe6d6;color:#b65c22}.steps button{margin-left:auto;border:0;background:transparent;text-decoration:underline;color:#b9642b;font-weight:750;font-size:12px}.app{display:grid;grid-template-columns:270px minmax(0,1fr) 320px;height:calc(100vh - 116px);min-height:590px}.side{background:white;overflow:auto}.left{border-right:1px solid #e5e9f0}.right{border-left:1px solid #e5e9f0}.panehead{display:flex;align-items:center;justify-content:space-between;padding:23px 18px 15px}.eyebrow{font-size:10px;letter-spacing:.7px;color:#d17b3c;font-weight:800}.panehead h2{font-size:17px;margin:6px 0 0}.pill{background:#f1f4f8;color:#78899c;padding:6px 8px;font-size:10px;border-radius:6px}.field{margin:0 16px 16px}.field label{display:block;color:#66768b;font-size:11px;font-weight:750;margin-bottom:8px}.field input,.field select,.field textarea{width:100%;border:1px solid #dde5ee;background:#fff;border-radius:8px;padding:11px 12px;font-size:12px;color:#293b51}.field textarea{min-height:98px;resize:vertical}.addarea{padding:0 16px 16px}.addarea>button{width:100%;border:0;border-radius:9px;padding:14px 10px;background:#df7834;color:white;font-weight:800;font-size:14px}.smallhint{margin:8px 0 0;color:#95a1af;font-size:10px;line-height:1.7}.library{margin:0 13px 12px;padding:11px;border:1px solid #f0cbb2;border-radius:10px;background:#fff9f4}.libgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.libgrid button{border:1px solid #eddfd3;border-radius:8px;padding:11px 5px;text-align:left;font-size:11px;font-weight:750;background:#fff;color:#715848}.caption{margin:5px 17px 10px;color:#617285;font-weight:750;font-size:11px}.search{margin:0 12px 10px;width:calc(100% - 24px);border:1px solid #e1e7ed;border-radius:8px;padding:10px;back
</style></head><body>
<header class="top"><div class="logo"><b>◈</b><div class="lname">SiteForge<span>页面编辑</span></div></div><div class="vline"></div><div class="filename"><small>HESU Auto</small><strong>首页 / 页面设计</strong></div><div class="mobiletoggles"><button onclick="panels('left')">☰ 内容</button><button onclick="panels('right')">⚙ 编辑</button></div><div class="devices"><button class="on" data-device="desktop" onclick="device('desktop')">电脑</button><button data-device="tablet" onclick="device('tablet')">平板</button><button data-device="phone" onclick="device('phone')">手机</button></div><span id="status" class="muted">已载入演示</span><button class="outline" onclick="save()">保存草稿</button><button class="primary" onclick="publish()">发布设计</button><details class="more"><summary>更多 ▾</summary><div class="more-menu"><button onclick="undo()">↶ 撤销上一步</button><button onclick="notify('版本历史：此交互预览不连接真实数据库')">版本历史</button><button onclick="notify('请在正式项目中构建网站')">构建网站</button></div></details></header>
<div class="steps"><b>只需 3 步</b><em id="step1" class="active">① 选择或添加内容</em><span class="arrow">→</span><em id="step2">② 修改右侧属性</em><span class="arrow">→</span><em id="step3">③ 保存并发布</em><button onclick="document.querySelector('#help').showModal()">新手使用指南 ?</button></div>
<main class="app"><aside class="side left" id="left"><div class="panehead"><div><span class="eyebrow">步骤 1 · 选择内容</span><h2>编辑页面</h2></div><span class="pill" id="count">3 个区块</span></div><div class="field"><label>当前编辑的页面</label><select><option>首页 Home</option><option disabled>关于我们（演示）</option><option disabled>产品中心（演示）</option></select></div><div class="addarea"><button onclick="toggleLibrary()" id="addbutton">＋ 添加内容区块</button><p class="smallhint">需要新内容时，点击这里选择区块类型。</p></div><div class="library" id="library" hidden><b style="font-size:12px">选择你要添加的内容</b><div class="libgrid"><button onclick="add('hero')">▣ 图片横幅</button><button onclick="add('features')">✦ 核心优势</button><button onclick="add('stats')">▤ 数据统计</button><button onclick="add('text')">≡ 文字介绍</button></div></div><div class="caption">当前页面内容 · 点击编辑</div><input class="search" placeholder="搜索页面内容…" oninput="search(this.value)" id="search"><div class="blocks" id="blocks"></div><p class="smallhint" style="margin:7px 18px 17px">提示：点击区块即可编辑；点击 ↑ ↓ 调整顺序。</p><details class="low"><summary>高级页面设置 ▾</summary><p>页面模板、全站设计、组件复用等功能放在这里，不影响日常编辑。</p></details></aside>
<section class="preview"><div class="previewbar"><span class="dot"></span><span id="previewState">实时预览 · 已更新</span><span class="route">/</span><aside>点击画布中的板块，可在右侧修改</aside></div><div class="canvas"><div class="site" id="site"><nav><div class="sitename">HESU<span> AUTO</span></div><div class="sitenav"><span>HOME</span><span>VEHICLES</span><span>OUR SERVICES</span><span>ABOUT</span></div><button>CONTACT US</button></nav><div id="sections"></div><div class="foot">HESU AUTO · China Sourcing. Global Delivery.</div></div></div><div class="canvasfoot" id="deviceInfo">电脑预览 · 内容修改实时显示；演示操作不会修改正式网站</div></section>
<aside class="side right" id="right"><div class="panehead"><div><span class="eyebrow">步骤 2 · 修改内容</span><h2>编辑选中的区块</h2></div><span class="pill" id="chosen">无选中</span></div><div class="tabs"><button class="on" onclick="tab('content')" data-tab="content">内容</button><button onclick="tab('style')" data-tab="style">样式</button><button onclick="tab('responsive')" data-tab="responsive">手机/平板</button></div><div id="inspector"></div><div class="note">修改后右上角点击“保存草稿”，核对预览后再点击“发布设计”。</div></aside></main>
<dialog class="help" id="help"><h2>3 分钟学会页面编辑</h2><ol><li><b>选择页面内容</b>：左侧点一个区块，或者点橙色“添加内容区块”。</li><li><b>修改文字和样式</b>：在右侧改标题、简介、颜色；中间预览会同步更新。</li><li><b>保存与发布</b>：保存草稿并不更新正式网站。正式项目还需要发布设计、构建和部署。</li></ol><p style="font-size:11px;color:#8d9baa">本页面是可独立操作的 UI 演示，数据只保留在当前浏览器页面，不连接服务器。</p><button class="primary" onclick="document.querySelector('#help').close()">知道了，开始编辑</button></dialog>
<script>
const names={hero:'图片横幅',features:'核心优势',stats:'数据统计',text:'文字介绍'};
const seed=[{id:1,type:'hero',title:'让中国好车，走向世界',desc:'从中国采购到海外交付，为全球客户提供更便捷的汽车采购体验。',color:'#eef1f5'},{id:2,type:'features',title:'值得信赖的全球汽车出口伙伴',desc:'专业采购、多式联运、海外交付与售后服务',color:'#ffffff'},{id:3,type:'stats',title:'我们的全球业务',desc:'以专业能力连接全球市场',color:'#ffffff'}];
let rows=structuredClone(seed),selected=0,filter='',currentTab='content',changed=false,history=[],idseq=4;
const $=s=>document.querySelector(s),esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
function remember(){history.push(JSON.stringify(rows));if(history.length>35)history.shift()}
function notify(s){$('#status').textContent=s;$('#previewState').textContent=s}
function changedNow(){changed=true;$('#status').textContent='● 有未保存修改';$('#step1').classList.remove('active');$('#step2').classList.remove('active');$('#step3').classList.add('active')}
function render(){drawList();drawPreview();drawInspector();$('#count').textContent=rows.length+' 个区块';$('#chosen').textContent=rows[selected]?names[rows[selected].type]:'无选中'}
function drawList(){const html=rows.map((r,i)=>!`${names[r.type]} ${r.title}`.toLowerCase().includes(filter.toLowerCase())?'':`<div class="block ${i===selected?'on':''}" onclick="choose(${i})"><span class="grip">⠿</span><div class="ico">${({hero:'▣',features:'✦',stats:'▤',text:'≡'})[r.type]}</div><span><strong>${names[r.type]}</strong><small>${esc(r.title)}</small></span><div class="tools"><button title="上移" onclick="event.stopPropagation();move(${i},-1)">↑</button><button title="下移" onclick="event.stopPropagation();move(${i},1)">↓</button></div></div>`).join('');$('#blocks').innerHTML=html||'<p class="smallhint">没有匹配的内容</p>'}
function drawPreview(){const svg=`<svg viewBox="0 0 450 230" xmlns="http://www.w3.org/2000/svg"><path d="M52 144 L89 107 Q120 68 203 68 L296 67 Q342 70 379 118 L406 132 Q427 135 423 155 L414 173 L38 173 L26 158 Q22 143 52 144" fill="#aebbc9" stroke="#53667c" stroke-width="4"/><path d="M103 111 L152 83 L291 81 Q331 85 354 117 Z" fill="#e6f5ff" stroke="#7c8d9c" stroke-width="3"/><circle cx="113" cy="172" r="32" fill="#25354a"/><circle cx="113" cy="172" r="18" fill="#d5dee8"/><circle cx="341" cy="172" r="32" fill="#25354a"/><circle cx="341" cy="172" r="18" fill="#d5dee8"/><path d="M400 137 l19 4 -3 13 -19 1" fill="#f5e2c1"/><path d="M32 146l22 -3" stroke="#fff" stroke-width="6"/></svg>`;$('#sections').innerHTML=rows.map((r,i)=>{const base=`class="liveblock ${selected===i?'active':''}" onclick="choose(${i})" style="background:${esc(r.color)}"><span class="editflag">点击右侧编辑 · ${names[r.type]}</span>`;if(r.type==='hero')return `<section ${base}<div class="hero" style="background:${esc(r.color)}"><div><div class="tag">CHINA SOURCING · GLOBAL DELIVERY</div><h1>${esc(r.title)}</h1><p>${esc(r.desc)}</p><span class="cta">EXPLORE MORE →</span></div><div class="heroart">${svg}</div></div></section>`;if(r.type==='stats')return `<section ${base}<div class="section"><h2>${esc(r.title)}</h2><p class="lead">${esc(r.desc)}</p><div class="stats"><div class="stat"><strong>50,000+</strong><small>VEHICLES</small></div><div class="stat"><strong>70+</strong><small>COUNTRIES</small></div><div class="stat"><strong>30+</strong><small>BRANDS</small></div></div></div></section>`;if(r.type==='features')return `<section ${base}<div class="section"><h2>${esc(r.title)}</h2><p class="lead">${esc(r.desc)}</p><div class="stats"><div class="stat"><strong>01</strong><small>GLOBAL SOURCING</small></div><div class="stat"><strong>02</strong><small>EXPORT LOGISTICS</small></div><div class="stat"><strong>03</strong><small>AFTER-SALES SERVICE</small></div></div></div></section>`;return `<section ${base}<div class="section"><h2>${esc(r.title)}</h2><p class="lead">${esc(r.desc)}</p></div></section>`}).join('')}
function drawInspector(){const r=rows[selected];if(!r){$('#inspector').innerHTML='<div class="hint">先从左侧选择一个区块，或点击“添加内容区块”。</div>';return}let content='';if(currentTab==='content')content=`<div class="field"><label>区块标题</label><input value="${esc(r.title)}" oninput="edit('title',this.value)"></div><div class="field"><label>介绍文字</label><textarea oninput="edit('desc',this.value)">${esc(r.desc)}</textarea></div><div class="field"><label>操作</label><button class="outline" onclick="copy()">复制此区块</button> <button class="outline" onclick="remove()">删除此区块</button></div>`;else if(currentTab==='style')content=`<div class="field"><label>区块背景颜色</label><input type="color" value="${esc(r.color)}" oninput="edit('color',this.value)"></div><div class="note">选择颜色后，中间预览会即时变化。</div>`;else content='<div class="field"><label>不同设备预览</label><button class="outline" onclick="device(\'phone\')">预览手机效果</button> <button class="outline" onclick="device(\'tablet\')">预览平板效果</button></div><div class="note">此演示支持设备宽度切换。正式编辑器的响应式间距和隐藏选项在这里设置。</div>';$('#inspector').innerHTML=`<div class="headline"><b>${names[r.type]}</b><small>区块 ${selected+1}/${rows.length}</small></div>`+content}
function choose(i){selected=i;$('#step1').classList.remove('active');$('#step2').classList.add('active');render();if(innerWidth<950){$('#right').classList.add('open');$('#left').classList.remove('open')}}
function edit(k,v){if(!changed)remember();rows[selected][k]=v;changedNow();drawList();drawPreview()}
function add(type){remember();rows.push({id:idseq++,type,title:type==='hero'?'新图片横幅':`新${names[type]}`,desc:'在右侧输入介绍文字',color:'#ffffff'});changedNow();$('#library').hidden=true;$('#addbutton').textContent='＋ 添加内容区块';choose(rows.length-1)}
function toggleLibrary(){const hidden=$('#library').hidden;$('#library').hidden=!hidden;$('#addbutton').textContent=hidden?'× 收起区块库':'＋ 添加内容区块'}
function move(i,by){if(i+by<0||i+by>=rows.length)return;remember();[rows[i],rows[i+by]]=[rows[i+by],rows[i]];selected=i+by;changedNow();render()}
function copy(){remember();rows.splice(selected+1,0,{...rows[selected],id:idseq++});selected++;changedNow();render()}
function remove(){if(!confirm('确定从页面移除此区块？'))return;remember();rows.splice(selected,1);selected=Math.min(selected,rows.length-1);changedNow();render()}
function search(v){filter=v;drawList()}
function tab(v){currentTab=v;document.querySelectorAll('[data-tab]').forEach(el=>el.classList.toggle('on',el.dataset.tab===v));drawInspector()}
function device(v){document.querySelectorAll('[data-device]').forEach(el=>el.classList.toggle('on',el.dataset.device===v));$('#site').className='site'+(v==='desktop'?'':' '+v);$('#deviceInfo').textContent=({desktop:'电脑预览',tablet:'平板预览（780px）',phone:'手机预览（390px）'})[v]+' · 演示操作不会修改正式网站'}
function panels(s){for(const n of ['left','right'])$('#'+n).classList.toggle('open',n===s?!$('#'+n).classList.contains('open'):false)}
function save(){changed=false;notify('✓ 演示草稿已保存（仅当前页面）');$('#step3').classList.add('active')}
function publish(){if(changed){notify('请先保存草稿，再发布设计');return}notify('✓ 模拟发布成功 · 正式项目仍需构建与部署')}
function undo(){if(!history.length)return notify('没有可以撤销的操作');rows=JSON.parse(history.pop());selected=Math.min(selected,rows.length-1);changedNow();render()}
render();
</script></body></html>