浅念
8884e100f9
Overlay 190 upstream items (V8.22→8.31) preserving trade-pro theme, registry tests, and design docs. Re-applied full patch set on identical anchors (discovery/env_for/blocks.css/type-mapping/locale-override/ theme_color/frontend entries/test_theme_pro_v3 mods) plus compose pins. Verified: theme suites 35/35; dual-baseline full run 415 passed vs pristine 386+29 ours, FAILED-set diff EMPTY (same 10 Windows env fails). Live: container 8.31.1-dev.1 healthy, hesupipe 192 entries intact, trade-pro build 203 pages 0 errors. Co-Authored-By: Claude Code <noreply@anthropic.com>
6 lines
13 KiB
HTML
6 lines
13 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.29 · 主题与可视化编辑交互演示</title><style>
|
||
*{box-sizing:border-box}body{margin:0;background:#edf1f5;color:#243548;font:14px/1.5 system-ui,'Microsoft YaHei',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #eb984c;outline-offset:2px}header{background:white;border-bottom:1px solid #dce4ed;display:flex;align-items:center;gap:12px;padding:13px 20px;flex-wrap:wrap}header strong{font-size:17px}header small,.muted{color:#748499}button{border:1px solid #dae2ed;background:white;border-radius:9px;padding:9px 13px;color:#32445e}button.primary{background:#db7434;color:white;border-color:#db7434}.right{margin-left:auto;display:flex;gap:8px}.notice{background:#fff8ef;color:#8d612f;padding:9px 22px;border-bottom:1px solid #f0dfcb;font-size:12px}.shell{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;min-height:calc(100vh - 105px)}aside{padding:20px 15px;background:white;min-width:0}aside.left{border-right:1px solid #dce4ee}aside.right-pane{border-left:1px solid #dce4ee}h3{font-size:16px;margin:0 0 14px}.group{margin:15px 0 7px;font-size:12px;color:#6e7c91;font-weight:750}.blocks{display:grid;gap:6px}.blocks button{display:block;text-align:left;width:100%}.blocks button.selected{background:#fff4ec;border-color:#e4aa80}.search{display:flex;width:100%;padding:10px;border:1px solid #dbe3ed;border-radius:9px}.library{background:#fbfcfe;border:1px solid #e3e9ef;border-radius:12px;margin-top:10px;padding:12px;display:none}.library.open{display:block}.palette{display:grid;grid-template-columns:1fr 1fr;gap:7px}.palette button{font-size:12px;min-height:46px}.canvas{padding:22px;min-width:0}.canvas-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:15px;flex-wrap:wrap}.devices{display:flex;gap:5px}.devices button.active{background:#fff0e5;border-color:#e6a274;color:#a45629}.frame{max-width:100%;margin:auto;background:white;border:1px solid #dfe6ef;min-height:570px;box-shadow:0 12px 40px #18324713;transition:width .2s;overflow:hidden}.sample-nav{padding:18px 26px;display:flex;justify-content:space-between;gap:12px;align-items:center}.sample-nav span{font-weight:750}.sample-nav small{font-size:11px}.sample-hero{padding:60px 8%;min-height:255px;display:flex;flex-direction:column;justify-content:center}.sample-hero h1{font-size:clamp(30px,4vw,58px);line-height:1.06;margin:0 0 16px;max-width:12ch;letter-spacing:-1.7px}.sample-hero p{font-size:15px;max-width:420px}.sample-hero .action{display:inline-block;padding:11px 19px;border-radius:6px;background:#ec863f;color:white;align-self:start}.sample-cards{padding:28px 8% 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sample-card{border:1px solid #e1e8ed;border-radius:10px;padding:10px;min-width:0;cursor:pointer}.sample-art{height:95px;border-radius:6px;background:linear-gradient(125deg,#d8e2e8,#eef2f5);display:grid;place-items:center;font-size:25px}.sample-card strong{display:block;padding-top:9px;font-size:12px}.sample-card small{font-size:11px;color:#8494a6}.sample-card.selected{outline:3px solid #ed964e}.frame.automotive .sample-nav{background:#172c42;color:white}.frame.automotive .sample-hero{background:linear-gradient(110deg,#0f2237,#2b4960);color:white}.frame.industrial .sample-nav{background:#fff;color:#174969}.frame.industrial .sample-hero{background:#e5f0f6;color:#174969}.frame.corporate .sample-nav{background:white;color:#4a448f}.frame.corporate .sample-hero{background:linear-gradient(125deg,#f6f3ff,#e9ecff);color:#363565}.frame.minimal .sample-nav{background:#f9f7f3;color:#2a2925}.frame.minimal .sample-hero{background:#eae9e4;color:#232420}.frame.minimal .sample-hero h1{font-family:Georgia,serif}.frame.automotive .sample-art{background:#203a52;color:#c69b61}.frame.industrial .sample-art{background:#d1e6ef;color:#19608c}.frame.corporate .sample-art{background:#edeafd;color:#6a5cc4}.frame.minimal .sample-art{background:#e5e4dc;color:#34342d}label{display:grid;gap:6px;margin:12px 0;color:#536477;font-weight:650;font-size:12px}input,select{padding:10px;border:1px solid #dce4ed;border-radius:8px;min-width:0;background:white}.presets{display:flex;gap:5px}.presets button{flex:1;padding:10px 5px;font-size:11px}.subtle{font-size:11px;color:#7b8da1}.toolbar{display:flex;flex-wrap:wrap;gap:7px}.status{font-size:12px;padding:10px;border-radius:8px;background:#eef6f1;color:#277b58;margin-top:10px}dialog{border:1px solid #e2e7ee;border-radius:15px;padding:20px;box-shadow:0 25px 80px #14263c45;width:min(960px,94vw)}dialog::backdrop{background:#18273e9c}.dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.dialog-compare{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.compare-card{min-height:130px;padding:18px 12px;border-radius:10px;cursor:pointer}.compare-card strong{display:block;margin-top:14px}.compare-card span{font-size:12px}.compare-card[data-theme=automotive]{background:#132c43;color:white}.compare-card[data-theme=industrial]{background:#e4eff5;color:#174d6b}.compare-card[data-theme=corporate]{background:#f1eeff;color:#4d438f}.compare-card[data-theme=minimal]{background:#efeee8;color:#2d2b26}.badge{padding:3px 7px;border-radius:7px;background:#edf2f8;font-size:11px}@media(max-width:980px){.shell{grid-template-columns:205px minmax(0,1fr)}aside.right-pane{grid-column:1/-1;border-top:1px solid #dce4ee;display:grid;grid-template-columns:1fr 1fr;gap:12px}}@media(max-width:600px){header{padding:10px}.right{margin-left:0;width:100%}.shell{display:block}aside{padding:12px}.canvas{padding:12px}.frame{min-height:390px}.sample-nav{padding:12px 16px}.sample-hero{padding:35px 20px;min-height:200px}.sample-hero h1{font-size:30px}.sample-cards{grid-template-columns:1fr 1fr;padding:18px;gap:8px}.sample-art{height:67px}aside.right-pane{display:block}.dialog-compare{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.frame{transition:none}}
|
||
</style></head><body><header><strong>◈ SiteForge Studio</strong><small>V8.29 · 交互演示</small><button onclick="showThemes()">◫ 比较主题</button><div class="right"><button onclick="undo()">↶ 撤销</button><button onclick="redo()">↷ 重做</button><button class="primary" onclick="save()">保存草稿（演示）</button></div></header><div class="notice">这是独立离线交互示例：内容、保存状态和样式只在当前页面演示，不连接正式网站或数据库。</div><div class="shell"><aside class="left"><h3>编辑页面</h3><label>当前页面<select><option>首页</option></select></label><button class="primary" style="width:100%" onclick="toggleLibrary()">＋ 添加内容区块</button><div id="library" class="library"><input id="search" class="search" placeholder="搜索：横幅、产品、文字…" oninput="filterPalette()"><div id="palette"></div></div><div class="group">页面内容</div><div class="blocks" id="blocks"></div><p class="subtle">单击卡片或区块，再到右侧修改。使用「比较主题」可以先看风格。</p></aside><main class="canvas"><div class="canvas-head"><strong>实时预览 <span id="themeName" class="badge"></span></strong><div class="devices"><button data-device="desktop" class="active" onclick="device('desktop')">电脑</button><button data-device="tablet" onclick="device('tablet')">平板</button><button data-device="phone" onclick="device('phone')">手机</button></div></div><div id="frame" class="frame automotive"><div class="sample-nav"><span>HESU / SITEFORGE</span><small>HOME · PRODUCTS · ABOUT</small></div><section class="sample-hero" onclick="selectBlock(0)"><h1 id="heroTitle"></h1><p id="heroDesc"></p><span class="action">探索更多 ↗</span></section><section class="sample-cards" id="cards"></section></div><p class="subtle">预览宽度可切换。切换风格只影响此演示，不会替换网站主题。</p></main><aside class="right-pane"><h3>修改选中的内容</h3><span id="selectedLabel" class="badge">主横幅</span><label>文字标题<input id="titleInput" oninput="changeTitle(this.value)" maxlength="100"></label><label>文字介绍<input id="descInput" oninput="changeDesc(this.value)" maxlength="220"></label><div class="group">区块外观</div><div class="presets"><button onclick="preset('clean')">清爽白底</button><button onclick="preset('soft')">柔和浅底</button><button onclick="preset('feature')">重点深底</button></div><div id="saveStatus" class="status">尚未修改（演示）</div></aside></div><dialog id="themeDialog"><div class="dialog-head"><div><strong style="font-size:21px">比较四套主题</strong><p class="subtle">选择风格即可返回演示页面查看，正式站点不受影响。</p></div><button onclick="themeDialog.close()">关闭 ×</button></div><div class="dialog-compare"><button class="compare-card" data-theme="automotive" onclick="theme('automotive')">汽车与出行<strong>有力量的深色视觉</strong><span>适合车型展示与出口业务</span></button><button class="compare-card" data-theme="industrial" onclick="theme('industrial')">工业制造<strong>清爽理性的技术风格</strong><span>适合产品目录与工程案例</span></button><button class="compare-card" data-theme="corporate" onclick="theme('corporate')">企业品牌<strong>现代舒展的企业风格</strong><span>适合公司与服务展示</span></button><button class="compare-card" data-theme="minimal" onclick="theme('minimal')">简约展示<strong>留白充足的编辑风格</strong><span>适合品牌形象与作品</span></button></div></dialog><script>
|
||
const themes={automotive:'汽车与出行',industrial:'工业制造',corporate:'企业品牌',minimal:'简约展示'};let data={theme:'automotive',blocks:[{title:'链接中国汽车与全球市场',desc:'真实、高效、可持续的全球采购与交付解决方案。',type:'hero'},{title:'精选车型',desc:'面向多种需求的专业产品展示。',type:'collection'}]},selected=0,history=[],future=[];const el=id=>document.getElementById(id);function snapshot(){history.push(JSON.stringify(data));if(history.length>50)history.shift();future=[]}function render(){el('frame').className='frame '+data.theme;el('themeName').textContent=themes[data.theme];el('heroTitle').textContent=data.blocks[0]?.title||'欢迎访问';el('heroDesc').textContent=data.blocks[0]?.desc||'';el('cards').innerHTML=data.blocks.slice(1).map((b,i)=>`<article class="sample-card ${selected===i+1?'selected':''}" onclick="selectBlock(${i+1})"><div class="sample-art">✦</div><strong></strong><small>点击查看与编辑</small></article>`).join('');[...el('cards').querySelectorAll('strong')].forEach((x,i)=>x.textContent=data.blocks[i+1].title);el('blocks').replaceChildren(...data.blocks.map((b,i)=>{let btn=document.createElement('button');btn.textContent=(i+1)+'. '+b.title;btn.className=selected===i?'selected':'';btn.onclick=()=>selectBlock(i);return btn}));el('selectedLabel').textContent=selected===0?'主横幅':'内容区块 '+selected;el('titleInput').value=data.blocks[selected]?.title||'';el('descInput').value=data.blocks[selected]?.desc||''}function selectBlock(i){selected=i;render()}function changeTitle(v){snapshot();data.blocks[selected].title=v;render();el('titleInput').focus();el('titleInput').setSelectionRange(v.length,v.length);dirty()}function changeDesc(v){snapshot();data.blocks[selected].desc=v;render();el('descInput').focus();el('descInput').setSelectionRange(v.length,v.length);dirty()}function dirty(){el('saveStatus').textContent='有未保存的更改（模拟）'}function save(){el('saveStatus').textContent='模拟草稿已保存；未发布至网站'}function undo(){if(!history.length)return;future.push(JSON.stringify(data));data=JSON.parse(history.pop());selected=Math.min(selected,data.blocks.length-1);render();dirty()}function redo(){if(!future.length)return;history.push(JSON.stringify(data));data=JSON.parse(future.pop());selected=Math.min(selected,data.blocks.length-1);render();dirty()}function device(d){el('frame').style.width={desktop:'100%',tablet:'780px',phone:'390px'}[d];document.querySelectorAll('[data-device]').forEach(b=>b.classList.toggle('active',b.dataset.device===d))}function showThemes(){el('themeDialog').showModal()}function theme(name){snapshot();data.theme=name;render();el('themeDialog').close();dirty()}function toggleLibrary(){el('library').classList.toggle('open');filterPalette()}function filterPalette(){let q=el('search').value.toLowerCase();let kinds=[['常用内容','文字介绍'],['图片与展示','横幅'],['产品与业务','产品列表'],['复杂布局','多列布局']];el('palette').replaceChildren(...kinds.filter(x=>!q||x[1].includes(q)).map(x=>{let wrap=document.createElement('div'),title=document.createElement('div'),button=document.createElement('button');title.className='group';title.textContent=x[0];button.textContent='＋ '+x[1];button.onclick=()=>{snapshot();data.blocks.push({title:x[1],desc:'点击右侧填写介绍文字',type:'richtext'});selected=data.blocks.length-1;render();dirty()};wrap.append(title,button);return wrap}))}function preset(type){let hero=document.querySelector('.sample-hero');let colors={clean:['#fff','#213548'],soft:['#edf2f7','#213548'],feature:['#21384f','#fff']}[type];if(colors){hero.style.background=colors[0];hero.style.color=colors[1];dirty()}}render();
|
||
</script></body></html>
|