cms-SiteForge/examples/ui-preview-v811.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.11 · 统一专业后台预览</title><style>
:root{--blue:#285dc3;--ink:#213650;--muted:#718198;--line:#e0e7f2;--bg:#f5f7fb;font-family:Inter,'Microsoft YaHei',system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,select,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.top{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px #122b4208}.top-main{display:flex;align-items:center;gap:18px;padding:13px 28px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;color:#203c69;font-size:16px;font-weight:800}.brand i{font-style:normal;background:var(--blue);color:white;width:33px;height:33px;border-radius:9px;display:grid;place-items:center}.crumb{font-size:12px;color:#7f8da0;padding-left:15px;border-left:1px solid var(--line)}.nav{display:flex;gap:3px;margin-left:auto}.nav button{border:0;background:transparent;padding:9px 12px;color:#647590;border-radius:7px;font-size:12px;font-weight:650}.nav button.active,.nav button:hover{background:#eaf1fe;color:var(--blue)}.switcher{display:flex;gap:7px;align-items:center;font-size:12px;color:#687e96}.switcher select{max-width:175px;min-width:130px;padding:9px;border:1px solid #d4dfed;border-radius:8px;background:white;color:#304b6c}.hint{background:#edf4ff;border-bottom:1px solid #deebfe;padding:11px 28px;font-size:12px;color:#4f6688;display:flex;align-items:center;gap:13px;flex-wrap:wrap}.hint b{color:#275bb0}.hint button{margin-left:auto;border:1px solid #bfd1ed;border-radius:7px;padding:6px 12px;color:#2b58a4;background:white}.hint-extra{display:none;flex:1 0 100%;padding:12px;border:1px solid #d7e4f7;background:white;border-radius:8px}.hint.expanded .hint-extra{display:block}.wrap{max-width:1440px;margin:0 auto;padding:28px 30px 70px}.header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:24px}.overline{font-size:10px;color:#527dce;letter-spacing:1.6px;font-weight:800}.header h1{font-size:29px;margin:7px 0 6px;letter-spacing:-.8px}.header p{color:var(--muted);font-size:13px;margin:0}.panel{border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 3px 15px #18335006;padding:23px;margin-bottom:18px}.panel h2{margin:0 0 6px;font-size:17px}.panel p{font-size:12px;color:#718198;line-height:1.7;margin:5px 0 17px}.btn{border:1px solid #d5dfec;border-radius:8px;background:#fff;color:#4b6686;font-size:12px;font-weight:700;padding:11px 15px}.btn.primary{border-color:var(--blue);background:var(--blue);color:white}.btn.red{color:#ad4048}.btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #6192ed;outline-offset:2px}.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.main-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.stat b{display:block;font-size:25px;margin:8px 0 2px}.stat small{font-size:12px;color:#718198}.fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}.fields label{font-size:12px;color:#435975;display:grid;gap:7px;font-weight:650}.fields .wide{grid-column:1/-1}.fields select,.fields input,.fields textarea{border:1px solid #d7e1ef;border-radius:8px;padding:10px;color:#34516e;background:#fff;min-width:0}.fields textarea{min-height:91px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.card{border:1px solid #dce5ef;border-radius:11px;padding:15px;background:#f9fbff}.card b{display:block;font-size:13px;margin-bottom:7px}.card small{color:#7a8ca2;font-size:11px;line-height:1.6}.badge{display:inline-block;padding:3px 9px;border-radius:7px;background:#e7f5ee;color:#23815e;font-size:11px}.badge.warn{background:#fff5e3;color:#a56a17}.subtabs{display:flex;gap:8px;margin-bottom:17px;flex-wrap:wrap}.subtabs button{padding:11px 18px;border:1px solid #d9e3f1;border-radius:8px;background:white;color:#60748e;font-weight:650;font-size:12px}.subtabs button.active{border-color:#abc5f1;background:#eaf2ff;color:#285dc3}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{text-align:left;padding:15px 12px;border-bottom:1px solid #e9eef6}.table th{color:#7d8ea7;background:#f9fbfe}.theme-swatch{height:115px;background:linear-gradient(125deg,#152f54,#6a8ab8);border-radius:10px;margin-bottom:11px}.theme-swatch.two{background:linear-gradient(125deg,#cadbd9,#4e7b78)}.theme-swatch.three{background:linear-gradient(125deg,#d5e3f9,#8ab4f2)}.hide{display:none!important}.studio{display:grid;grid-template-columns:220px minmax(0,1fr) 230px;gap:13px}.studio .panel{margin:0;min-height:440px;padding:16px}.studio-preview{background:linear-gradient(140deg,#dce6f5,#f5f8fd);padding:16px;border-radius:11px;height:365px;display:flex;align-items:center;justify-content:center}.preview-site{background:white;width:90%;height:92%;border-radius:8px;box-shadow:0 6px 30px #1c3a5b22;overflow:hidden}.preview-site .mocktop{height:36px;background:#1a365c;display:flex;align-items:center;padding:0 14px;color:white;font-size:10px}.preview-site .mockhero{background:linear-gradient(145deg,#d6e4f4,#f2f7fc);height:150px;padding:22px}.preview-site .mockhero h3{font-size:22px;margin:9px 0}.mockproducts{display:flex;gap:8px;padding:12px}.mockproducts span{flex:1;background:#edf3fa;height:76px;border-radius:6px}.component{font-size:12px;background:#f5f8fd;border:1px solid #e5ebf4;border-radius:8px;margin:8px 0;padding:13px;cursor:pointer}.component.active{background:#eaf1ff;border-color:#89aef0}.note{padding:14px 16px;border:1px solid #dce9fd;background:#f3f8ff;border-radius:10px;color:#4f698c;font-size:12px;line-height:1.6}.mobile-tools{display:none}@media(max-width:1120px){.nav{order:10;width:100%;overflow:auto}.nav button{white-space:nowrap}.studio{grid-template-columns:180px minmax(0,1fr) 200px}}@media(max-width:750px){.top-main{padding:12px 16px;gap:8px}.crumb{display:none}.switcher{margin-left:auto}.hint{padding:10px 16px}.wrap{padding:18px 14px 40px}.header{align-items:flex-start;flex-direction:column}.header h1{font-size:23px}.main-grid,.fields,.cards,.stat-grid{grid-template-columns:1fr}.fields .wide{grid-column:auto}.studio{display:block}.studio .panel{min-height:0;margin-bottom:12px}.studio .pane{display:none}.studio .pane.active{display:block}.mobile-tools{display:flex;gap:8px;margin-bottom:13px}.mobile-tools button{flex:1}.mobile-tools button.active{background:#eaf2ff;color:var(--blue)}}
</style></head><body><header class="top"><div class="top-main"><div class="brand"><i>SF</i>SiteForge</div><span class="crumb" id="crumb">专业工具 / 主题预览</span><nav class="nav" id="nav"><button data-page="theme" class="active">主题预览</button><button data-page="editor">页面设计器</button><button data-page="factory">高级建站</button><button data-page="migration">数据与迁移</button><button data-page="operations">任务与交付</button></nav><label class="switcher">当前网站<select id="siteSelect"><option>HESU Auto 全球官网</option><option>HESU Industrial 工业站</option><option>企业示例站点</option></select></label></div></header>
<div class="hint" id="hint"><b>当前任务</b><span id="hintText">比较主题在不同设备上的页面效果。</span><button id="helpToggle">查看操作说明 ＋</button><div class="hint-extra" id="hintExtra">选择主题和设备尺寸进行预览；确认风格后返回网站工作台应用到实际网站。</div></div><div class="wrap" id="content"></div>
<script>
const data={
theme:{title:'主题预览',desc:'选择风格、页面和设备，先看效果，再决定是否应用。',help:'比较主题在不同设备上的页面效果。',extra:'当前只是独立预览。正式应用主题需要回到外观与设计，并重新构建静态网站。'},
editor:{title:'可视化页面编辑器',desc:'先调整区块和属性，保存草稿；审核通过后再发布设计。',help:'从页面结构到预览、属性，按顺序调整。',extra:'保存草稿不改变线上版本。发布设计后需要重新构建，才能产生新版网站。'},
factory:{title:'高级建站中心',desc:'主题、数据映射和 SEO 验收按不同业务环节组织。',help:'首先选择操作环节，避免一次面对全部功能。',extra:'高级建站提供主题版本与兼容性检查。日常添加产品、新闻应从工作台进入内容与页面。'},
migration:{title:'数据与迁移工具',desc:'Excel、WordPress、XML、API 和数据库导入统一先暂存、后审核。',help:'一次只处理一类数据，先预演，再正式提交。',extra:'不清楚高级参数时可以保留默认值。导入前检查 URL 冲突和字段映射。'},
operations:{title:'任务与交付',desc:'用一个清晰的顺序完成导入检查、构建、审批与发布。',help:'执行前先检查对应阶段的阻断事项。',extra:'部署到生产环境需要已审核的版本，并由权限和目标服务器配置共同限制。'}};
let active='theme',tool='batch',op='migration',pane='preview';const content=document.getElementById('content');
function btn(title,primary=false){return `<button class="btn ${primary?'primary':''}" data-demo="${title}">${title}</button>`}
function title(s){return `<div class="header"><div><div class="overline">SITEFORGE · UNIFIED ADMIN</div><h1>${s.title}</h1><p>${s.desc}</p></div><span class="badge">工作流引导</span></div>`}
function panel(name,desc,inner){return `<div class="panel"><h2>${name}</h2><p>${desc}</p>${inner}</div>`}
function render(){const d=data[active];document.getElementById('hintText').textContent=d.help;document.getElementById('hintExtra').textContent=d.extra;document.getElementById('crumb').textContent='专业工具 / '+d.title;document.querySelectorAll('[data-page]').forEach(b=>b.classList.toggle('active',b.dataset.page===active));let main=title(d);
if(active==='theme')main+=`<div class="fields" style="max-width:760px;margin-bottom:18px"><label>行业主题<select id="th"><option>汽车与出行</option><option>工业制造</option><option>企业品牌</option><option>极简展示</option></select></label><label>设备预览<select id="device"><option>PC · 1440px</option><option>平板 · 820px</option><option>手机 · 390px</option></select></label></div>`+panel('四套商业主题','选中主题后查看典型首页设计与栏目风格。',`<div class="cards"><div class="card"><div class="theme-swatch"></div><b>Automotive</b><small>汽车产品、品牌、技术与询盘</small></div><div class="card"><div class="theme-swatch two"></div><b>Industrial</b><small>工业产品、参数、分类和应用</small></div><div class="card"><div class="theme-swatch three"></div><b>Corporate</b><small>公司介绍、服务和项目案例</small></div></div>`);
if(active==='editor')main+=`<div class="row" style="margin-bottom:16px">${btn('↶ 撤销')}${btn('保存草稿',true)}${btn('刷新预览')}${btn('发布设计')}</div><div class="mobile-tools">${['structure','preview','properties'].map((x,i)=>`<button class="btn ${pane===x?'active':''}" data-pane="${x}">${['页面结构','页面预览','属性设置'][i]}</button>`).join('')}</div><div class="studio"><div class="panel pane ${pane==='structure'?'active':''}"><h2>页面结构</h2><p>按顺序组织区块，可拖拽排序。</p><div class="component">网站顶部导航</div><div class="component active">首页横幅</div><div class="component">产品系列展示</div><div class="component">客户询盘入口</div>${btn('＋ 添加区块')}</div><div class="panel pane ${pane==='preview'?'active':''}"><h2>实时主题预览</h2><p>查看与正式网站相同的布局风格。</p><div class="studio-preview"><div class="preview-site"><div class="mocktop">HESU AUTO · PRODUCTS · ABOUT</div><div class="mockhero"><small>CHINA SOURCING · GLOBAL DELIVERY</small><h3>Global Automotive<br>Solutions</h3></div><div class="mockproducts"><span></span><span></span><span></span></div></div></div></div><div class="panel pane ${pane==='properties'?'active':''}"><h2>属性设置</h2><p>当前正在修改：首页横幅。</p><div class="fields"><label class="wide">主标题<input value="Global Automotive Solutions"></label><label class="wide">描述<textarea>China Sourcing. Global Delivery.</textarea></label><label class="wide">手机端显示<select><option>显示</option><option>隐藏</option></select></label></div></div></div>`;
if(active==='factory')main+=`<div class="subtabs">${['网站总览','主题与版本','内容与数据','迁移与 SEO','构建发布'].map((t,i)=>`<button class="${i===0?'active':''}" data-demo="${t}">${t}</button>`).join('')}</div><div class="stat-grid"><div class="stat"><small>网站主题</small><b>汽车与出行</b><span class="badge">已应用</span></div><div class="stat"><small>内容记录</small><b>56</b><small>个页面与产品</small></div><div class="stat"><small>最近构建</small><b>36</b><small>个静态页面</small></div></div>`+panel('下一步建议','按照建站流程完善主题、内容及 SEO，再提交 Worker 构建。',`<div class="row">${btn('检查主题兼容性',true)}${btn('打开内容装配')}${btn('SEO 差异检查')}</div>`);
if(active==='migration')main+=`<div class="subtabs">${[['batch','批次导入'],['templates','整站模板'],['wp','WordPress'],['api','XML / API'],['mysql','MySQL']].map(([k,t])=>`<button data-tool="${k}" class="${tool===k?'active':''}">${t}</button>`).join('')}</div>`+panel(({batch:'导入 Excel / CSV / JSON',templates:'整站模板套用',wp:'WordPress 迁移',api:'XML / HTTP API',mysql:'MySQL 数据源'})[tool], '同一时间只显示当前操作需要填写的字段。', `<div class="fields"><label>数据来源<select><option>${({batch:'Excel 产品数据',templates:'已保存的整站模板',wp:'WordPress 网站地址',api:'HTTP API',mysql:'只读数据库'})[tool]}</option></select></label><label>内容类型<select><option>产品与车型</option><option>新闻与页面</option></select></label><label class="wide">关联的网站<input value="HESU Auto 全球官网" readonly></label></div><div class="row" style="margin-top:18px">${btn('预览并检查',true)}${btn('确认导入')}</div><p class="note">提示：字段冲突和 URL 错误必须先处理；提交后才能进入正式内容库。</p>`);
if(active==='operations')main+=`<div class="stat-grid"><div class="stat"><small>网站构建</small><b>12</b></div><div class="stat"><small>正在执行</small><b>1</b></div><div class="stat"><small>待审核发布</small><b>2</b></div></div><div class="subtabs">${[['migration','① 导入与复核'],['build','② 生成静态站'],['release','③ 审批与发布']].map(([k,t])=>`<button data-op="${k}" class="${op===k?'active':''}">${t}</button>`).join('')}</div>`+panel(({migration:'导入质量复核',build:'Worker 构建任务',release:'正式发布审批'})[op],({migration:'核查旧站 URL、SEO 和复杂插件字段问题。',build:'构建失败可以重试，运行中的任务可以取消。',release:'只有审批通过且质量检查合格的版本才能部署。'})[op],`<table class="table"><thead><tr><th>项目</th><th>状态</th><th>下一步</th></tr></thead><tbody><tr><td>HESU Auto · ${op==='migration'?'旧站分类关系':op==='build'?'静态构建 #0012':'生产环境发布 #0011'}</td><td><span class="badge warn">${op==='migration'?'待复核':op==='build'?'运行中':'等待审批'}</span></td><td>${btn(op==='migration'?'查看差异':op==='build'?'查看任务':'进入审批')}</td></tr></tbody></table>`);
content.innerHTML=main;}
document.querySelector('#nav').addEventListener('click',e=>{const b=e.target.closest('[data-page]');if(b){active=b.dataset.page;render()}});document.addEventListener('click',e=>{const a=e.target.closest('[data-tool],[data-op],[data-pane],[data-demo]');if(!a)return;if(a.dataset.tool)tool=a.dataset.tool;if(a.dataset.op)op=a.dataset.op;if(a.dataset.pane)pane=a.dataset.pane;if(a.dataset.demo)alert('此预览使用模拟数据。正式操作请在部署后的 SiteForge 后台进行。');if(!a.dataset.demo)render()});document.getElementById('helpToggle').onclick=()=>{const el=document.getElementById('hint');const open=el.classList.toggle('expanded');document.getElementById('helpToggle').textContent=open?'收起操作说明 −':'查看操作说明 ＋'};document.getElementById('siteSelect').addEventListener('change',()=>{});render();
</script></body></html>