Files
浅念 8884e100f9 upgrade: adopt V8.31.1 (theme 1.3/1.4 redesigns, editor deep-canvas, guided launch, component library)
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>
2026-10-26 09:43:17 +08:00

2 lines
4.6 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.30 · 四套专业主题 × 六类真实页面</title><style>
:root{font-family:system-ui,-apple-system,"Microsoft Yahei",sans-serif;background:#eef2f5;color:#172a39}*{box-sizing:border-box}body{margin:0}.shell{max-width:1510px;margin:auto;padding:23px 28px}.head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}.head small{color:#ff7448;font-size:11px;font-weight:800;letter-spacing:.16em}.head h1{font-size:26px;margin:7px 0}.head p{color:#6b7d89;margin:0 0 17px}.note{color:#617584;font-size:12px;line-height:1.6;max-width:400px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid #dce6eb;border-radius:13px;padding:13px 16px;margin:13px 0;box-shadow:0 4px 30px #22384909}.tabs{display:flex;flex-wrap:wrap;gap:7px}.tabs button,.views button{font:inherit;font-size:12px;color:#556b7a;border:1px solid transparent;background:#f3f6f7;padding:10px 13px;border-radius:8px;cursor:pointer;min-height:40px}.tabs button.active,.views button.active{background:#17314b;color:#fff}.tabs button:focus-visible,.views button:focus-visible{outline:2px solid #f28152;outline-offset:2px}.views{display:flex;gap:5px}.frame-wrap{background:#cbd5dc;border:1px solid #d0dce2;border-radius:14px;padding:23px;min-height:680px;display:flex;justify-content:center;align-items:flex-start;overflow:auto}.device{width:100%;max-width:100%;height:78vh;min-height:640px;border:0;background:#fff;box-shadow:0 20px 55px #1022352b;transition:width .2s ease}.device.tablet{width:768px}.device.mobile{width:390px}.bottom{font-size:12px;color:#667983;padding:15px 0}.bottom a{color:#214e6e}.device-label{font-size:12px;color:#637886;padding-left:8px}@media(max-width:700px){.shell{padding:15px}.head{display:block}.head h1{font-size:21px}.frame-wrap{padding:10px;min-height:580px}.device{height:70vh;min-height:560px}}</style></head><body><div class="shell"><header class="head"><div><small>SITEFORGE / THEME LAB / V8.30</small><h1>四套主题 · 六类真实页面布局</h1><p>不是静态效果图:下方页面来自原项目静态构建,含真实菜单、列表、详情与文章结构。</p></div><p class="note">提示:演示中的公司、车型及资料均为虚构数据;正式网站使用自己的真实内容。可切换主题、页面和设备宽度观察布局差异。</p></header><div class="toolbar"><div class="tabs" id="themes" role="group" aria-label="选择主题"><button data-theme="automotive" class="active">汽车 · 图片优先</button><button data-theme="industrial">建材 · 技术资料</button><button data-theme="corporate">企业 · 专业叙事</button><button data-theme="minimal">简约 · 编辑排版</button></div><div class="views" id="views" role="group" aria-label="预览尺寸"><button data-width="desktop" class="active">电脑</button><button data-width="tablet">平板</button><button data-width="mobile">手机</button></div></div><div class="toolbar"><div class="tabs" id="pages" role="group" aria-label="选择页面"><button data-page="/" class="active">首页</button><button data-page="/products/">产品列表</button><button data-page="/products/1/">产品详情</button><button data-page="/news/1/">文章详情</button><button data-page="/about/">关于我们</button><button data-page="/contact/">联系我们</button></div><span id="current" class="device-label" aria-live="polite"></span></div><div class="frame-wrap"><iframe class="device" id="preview" title="网站主题真实页面预览" src="automotive/index.html"></iframe></div><div class="bottom">所有内容是本地静态演示,不调用后台接口。返回上一级阅读 <a href="../README_V8_30.md">升级说明</a>,也可直接打开四套主题目录中的页面。</div></div><script>(function(){const state={theme:'automotive',page:'/',width:'desktop'};const f=document.getElementById('preview');function update(){const tail=state.page==='/'?'index.html':state.page+'index.html';f.src=state.theme+'/'+tail;f.className='device '+(state.width==='desktop'?'':state.width);document.getElementById('current').textContent=(state.width==='desktop'?'桌面':state.width==='tablet'?'平板':'手机')+' · '+state.page}for(let k of ['theme','page','width'])document.querySelectorAll('[data-'+k+']').forEach(btn=>btn.addEventListener('click',()=>{state[k]=btn.dataset[k];document.querySelectorAll('[data-'+k+']').forEach(b=>b.classList.toggle('active',b===btn));update()}));update()})();</script></body></html>