15 lines
8.3 KiB
HTML
15 lines
8.3 KiB
HTML
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SiteForge V8.25 · 公共组件管理演示</title><style>
|
||
|
|
:root{color-scheme:light;font-family:system-ui,'Microsoft Yahei',sans-serif;color:#24354a}*{box-sizing:border-box}body{margin:0;background:#f4f6f9;font-size:14px}.top{background:#fff;border-bottom:1px solid #e5eaf1;padding:16px max(16px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;gap:12px;align-items:center}.brand{font-weight:800;font-size:19px}.brand b{color:#db762e}.chip{border-radius:50px;padding:6px 11px;background:#f1f3f6;color:#65758b;font-size:11px}.wrap{max-width:1160px;margin:30px auto;padding:0 20px}.heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:0 0 22px}.heading h1{font-size:27px;margin:0 0 8px}.muted{color:#728096;font-size:13px;margin:0;line-height:1.6}.columns{display:grid;grid-template-columns:260px 1fr;gap:20px}.card{background:white;border:1px solid #e4e9f0;border-radius:13px;padding:20px;box-shadow:0 5px 24px #28354a05}.mini{color:#8e9aab;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.list{display:grid;gap:7px;margin-top:15px}.item{width:100%;background:transparent;border:1px solid transparent;padding:13px;border-radius:9px;text-align:left;cursor:pointer;color:#3d4c63}.item.active{border-color:#f0c8ab;background:#fff5ed;color:#b95e26}.item span{display:block;font-weight:700}.item small{color:#8090a0;display:block;margin-top:6px}.btn{border:1px solid #d7dfea;border-radius:9px;background:white;padding:10px 14px;font-weight:700;color:#43556a;cursor:pointer;font-size:12px}.btn.primary{background:#e77731;border-color:#e77731;color:white}.btn:disabled{opacity:.4;cursor:not-allowed}.controls{display:flex;gap:8px;flex-wrap:wrap}.intro{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.intro h2{margin:8px 0;font-size:19px}.num{font-weight:800;color:#dc7831;font-size:23px}.steps{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 18px}.steps span{font-size:11px;background:#f0f3f8;border-radius:7px;padding:7px 10px;color:#67788c}.table-row{display:grid;grid-template-columns:26px 1fr 115px;align-items:center;gap:14px;border:1px solid #e2e8f0;border-radius:10px;padding:13px 15px;margin:10px 0}.table-row input{width:17px;height:17px;accent-color:#e77731}.table-row strong{display:block;font-size:13px}.table-row small{font-size:11px;color:#718096;line-height:1.8}.status{padding:6px 8px;text-align:center;border-radius:7px;background:#eaf7ef;color:#23704b;font-size:11px}.status.warn{background:#fff0e6;color:#af642c}.status.neutral{background:#f1f4f7;color:#68778b}.hint{border-top:1px solid #eef0f5;margin-top:19px;padding-top:18px;color:#68768b;font-size:12px;line-height:1.8}.log{min-height:38px;margin-top:14px;color:#286d4d;font-size:12px}.versionline{display:flex;gap:8px;margin:13px 0;flex-wrap:wrap}.versionline span{border:1px solid #e1e6ed;padding:9px 12px;border-radius:8px;color:#6b7b90;background:#fff}.versionline .current{background:#fff4eb;border-color:#edd0b8;color:#b95c2d}a{color:inherit}@media(max-width:750px){.columns{grid-template-columns:1fr}.intro{grid-template-columns:1fr}.top{padding:15px 18px}.table-row{grid-template-columns:20px 1fr;gap:8px}.status{grid-column:2;justify-self:start}.heading h1{font-size:24px}}</style></head><body>
|
||
|
|
<div class="top"><div class="brand"><b>◈</b> SiteForge <span style="font-weight:400;color:#8590a0">/ Studio</span></div><div class="chip">V8.25 · 交互演示（模拟数据）</div></div>
|
||
|
|
<main class="wrap"><div class="heading"><div><div class="mini">全站设计系统 · 组件库</div><h1>公共组件，集中维护</h1><p class="muted">更新一个组件后，先确认受影响的页面，再选择同步到草稿。已发布页面不会自动更改。</p></div><div class="controls"><button class="btn" id="versionBtn">查看历史版本</button><button class="btn primary" id="publishBtn">创建新版组件</button></div></div>
|
||
|
|
<div class="columns"><aside class="card"><div class="mini">我的公共组件</div><div class="list" id="leftList"></div><p class="hint">关联插入：允许将来选择同步。<br>复制插入：独立编辑，不跟随组件版本。</p></aside><section class="card"><div class="intro"><div><div class="mini">当前选中组件</div><h2 id="currentTitle"></h2><p id="note" class="muted"></p></div><div><div class="num" id="currentVersion"></div><small class="muted">当前版本</small></div></div><div class="steps"><span>① 编辑组件</span><span>→</span><span>② 查看引用与冲突</span><span>→</span><span>③ 勾选页面同步草稿</span></div><div id="versionList" hidden></div><h3 style="font-size:15px;margin:18px 0">引用该组件的页面</h3><div id="pageRows"></div><div class="controls"><button id="selectBtn" class="btn">全选可同步页面</button><button id="syncBtn" class="btn primary">同步到选中的页面草稿</button></div><div class="log" role="status" id="log"></div><p class="hint">安全规则：本地修改和有冲突的页面无法被覆盖；同步后还需进入页面编辑器检查、保存并发布。<br>这是无需服务器的操作演示，不会修改真实网站。</p></section></div></main>
|
||
|
|
<script>
|
||
|
|
const data=[{title:'全站行动按钮',version:3,desc:'页尾联系方式 CTA',pages:[{name:'首页',path:'/',v:1,status:'ready'},{name:'产品中心',path:'/products/',v:2,status:'ready'},{name:'关于我们',path:'/about/',v:1,status:'modified'},{name:'新闻详情',path:'/news/example/',v:3,status:'current'}]},{title:'通用优势卡片',version:2,desc:'企业优势组件',pages:[{name:'首页',path:'/',v:1,status:'ready'},{name:'服务介绍',path:'/services/',v:1,status:'ready'}]},{title:'产品咨询区',version:1,desc:'询盘联系模块',pages:[{name:'产品详情',path:'/products/example/',v:1,status:'current'}]}];let active=0;
|
||
|
|
function render(){const c=data[active];document.querySelector('#leftList').innerHTML=data.map((v,i)=>`<button class="item ${active===i?'active':''}" onclick="active=${i};render()"><span>${v.title}</span><small>版本 v${v.version} · ${v.pages.length} 个引用</small></button>`).join('');document.querySelector('#currentTitle').textContent=c.title;document.querySelector('#currentVersion').textContent='v'+c.version;document.querySelector('#note').textContent=c.desc;document.querySelector('#pageRows').innerHTML=c.pages.map((p,i)=>{let ready=p.status==='ready';let msg=ready?'可同步':p.status==='current'?'已是最新版':p.status==='modified'?'有本地修改':'已同步为草稿';return `<label class="table-row"><input type="checkbox" data-index="${i}" ${ready?'':'disabled'}><span><strong>${p.name}</strong><small>${p.path} · 当前 v${p.v} → 最新 v${c.version}</small></span><span class="status ${ready?'':p.status==='current'?'neutral':'warn'}">${msg}</span></label>`}).join('');document.querySelector('#versionList').hidden=true;document.querySelector('#log').textContent='';}
|
||
|
|
document.querySelector('#selectBtn').onclick=()=>{document.querySelectorAll('#pageRows input:not(:disabled)').forEach(x=>x.checked=true)};
|
||
|
|
document.querySelector('#syncBtn').onclick=()=>{let c=data[active];let indexes=[...document.querySelectorAll('#pageRows input:checked')].map(x=>Number(x.dataset.index));if(!indexes.length){document.querySelector('#log').textContent='请选择至少一个可同步的页面。';return;}if(!confirm(`只更新 ${indexes.length} 个页面的草稿，确认吗？`))return;for(const i of indexes){c.pages[i].v=c.version;c.pages[i].status='synced'}render();document.querySelector('#log').textContent=`✓ 已创建 ${indexes.length} 个新版页面草稿，已发布内容保持不变。`};
|
||
|
|
document.querySelector('#versionBtn').onclick=()=>{let c=data[active],el=document.querySelector('#versionList');el.hidden=!el.hidden;el.innerHTML=`<div class="versionline">${Array.from({length:c.version},(_,i)=>`<span class="${i===c.version-1?'current':''}">历史快照 v${i+1}</span>`).join('')}</div>`};
|
||
|
|
document.querySelector('#publishBtn').onclick=()=>{let c=data[active];if(!confirm('模拟创建组件新版本？不会改变任何已发布页面。'))return;c.version++;for(const p of c.pages)if(p.status==='current'||p.status==='synced')p.status='ready';render();document.querySelector('#log').textContent='已创建组件新版本。请检查引用后选择同步。'};
|
||
|
|
render();
|
||
|
|
</script></body></html>
|