Files
cms-SiteForge/examples/mobile-showcase/index.html
T
浅念 601451f22b upgrade: adopt V8.21.3 (V8.13→8.21.3: P5 SFTP/S3, P6 multilingual, editor overhaul, enterprise hardening)
Overlay ~150 upstream items onto our V8.12 base, preserving trade-pro
theme, registry tests, and design docs. Re-applied our patch set
(discovery/env_for/blocks.css/type-mapping/theme_color/frontend entries,
test_theme_pro_v3 mods) — all anchors survived upstream evolution.

New platform enhancement (fixes upgrade-introduced regression):
multilingual.site_locale now honors settings_json.locale, plus
PUT /api/i18n/sites/{id}/locale — standalone English sites get
<html lang='en'> under the V8.15 locale-rewrite pipeline.

compose: adopt V8.21.3 (image 8.21.3-dev.1, /api/ready probes, MySQL/S3
env) with project name pinned to siteforge-v8-10 (data volumes).

Tests: 356 passed / 11 failed — all 11 confirmed pre-existing in
pristine V8.21.3 on this host (10 upstream Windows env + our build test
now green after locale fix). Patch registry updated in plan doc.

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-10-23 12:31:03 +08:00

3 lines
3.8 KiB
HTML

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>四套主题移动端实际模板预览 | SiteForge</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>
*{box-sizing:border-box}body{margin:0;background:#edf2f7;color:#223047;font-family:system-ui,"Microsoft YaHei",sans-serif}.wrap{max-width:1200px;margin:auto;padding:26px 20px}h1{font-size:24px;margin:0 0 8px}p{font-size:13px;color:#65748a;margin:0 0 18px}.themes{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:19px}.themes button{padding:11px 18px;border-radius:11px;border:1px solid #d1dbea;background:white;color:#1d3047;font-weight:700;min-width:125px;cursor:pointer}.themes button.on{border-color:#ec8b39;background:#fff5e9}.themes small{display:block;font-size:11px;color:#7b8999;margin-top:4px}.preview-layout{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start}.phone{width:390px;height:750px;background:white;border:10px solid #1d2837;border-radius:32px;overflow:hidden;box-shadow:0 24px 65px #152d4728;position:relative}.phone iframe{display:block;border:0;width:100%;height:100%;background:#fff}.guide{padding:30px;background:white;border-radius:16px;border:1px solid #dce3eb}.guide h2{margin-top:0;font-size:18px}.guide li{margin-bottom:12px;line-height:1.75;font-size:14px}.guide strong{color:#c76c24}.note{color:#8b6c33;background:#fff8e8;padding:12px;border-radius:10px;font-size:12px}@media(max-width:850px){.preview-layout{display:block}.phone{width:min(390px,100%);margin:0 auto}.guide{margin-top:20px}}
</style></head><body><main class="wrap"><h1>SiteForge · 四套主题手机布局</h1><p>V8.21.3 真实模板离线演示 · 右上角汉堡菜单打开抽屉,底部 Tabs 仅在手机宽度显示</p><div class="themes"><button type="button" data-theme="automotive">Automotive<small>汽车出口</small></button><button type="button" data-theme="industrial">Industrial<small>建筑材料</small></button><button type="button" data-theme="corporate">Corporate<small>企业服务</small></button><button type="button" data-theme="minimal">Minimal<small>精选产品</small></button></div><div class="themes" id="pageButtons"><button type="button" data-page="index.html" class="on">首页</button><button type="button" data-page="listing.html">产品列表</button><button type="button" data-page="product.html">产品详情</button><button type="button" data-page="article.html">文章详情</button></div><div class="preview-layout"><div class="phone"><iframe id="frame" title="手机端真实主题预览" src="automotive/index.html"></iframe></div><aside class="guide"><h2>本轮优化与体验重点</h2><ol><li>在顶部点击 <strong>☰</strong>,体验右侧抽屉及多级目录</li><li>点击页面遮罩,或按 Esc 关闭抽屉</li><li>点击底部 <strong>菜单</strong> Tab,再次打开抽屉</li><li>查看不同主题的手机首页、产品卡片、字体与图片排布</li><li>真正的管理后台可以完全关闭 Tabs,或改变按钮数量与顺序</li></ol><div class="note">演示使用模拟企业数据;站内链接仅用于展示,不会打开线上网站。正式部署需先保存并发布设计,再重新构建站点。</div></aside></div></main><script>let activeTheme="automotive",activePage="index.html";document.querySelectorAll("[data-page]").forEach(b=>b.addEventListener("click",()=>{activePage=b.dataset.page;document.querySelector("#frame").src=activeTheme+"/"+activePage;document.querySelectorAll("[data-page]").forEach(x=>x.classList.toggle("on",x===b))}));document.querySelectorAll("[data-theme]").forEach(b=>b.addEventListener("click",()=>{activeTheme=b.dataset.theme;document.querySelector("#frame").src=activeTheme+"/"+activePage;document.querySelectorAll("[data-theme]").forEach(x=>x.classList.toggle("on",x===b));}));document.querySelector("[data-theme]").classList.add("on");</script></body></html>