feat: port cms header/footer chrome visuals + mobile drawer into trade-pro

Task 10j: reshape the platform chrome DOM (sf-site-head/pro-header/
pro-navigation/pro-mega/pro-footer) into the cms Header.astro/Footer.astro
design via a pure CSS layer in trade-pro pro.css (--pro-* token bridge +
scoped 0,2,0 overrides): sticky glass header, right-aligned semibold nav
with brand underline hover, white dropdown cards with desktop hover/focus
reveal (>=1025px only; drawer semantics below), cms button CTA, dark
four-column-style footer with hairline copyright bar, cms wrap geometry.

Mobile drawer reuses the upstream V8.21.3 four-theme mechanism verbatim
(commercial.css locked styles + pro.js generic [data-pro-menu]/
#pro-navigation hooks trade-pro already emits); mobile_tabs is
template-driven so trade-pro gains the render block (English labels,
data-mobile-open-menu opens the shared drawer).

pro.html: +footer_nav-gated <h3>Quick Links</h3> (cms column heading),
+mobile tabs block. No DOM restructuring elsewhere; site_design data flow
(announcement/CTA/search/footer/mobile_tabs) and pro.js hooks intact.

Tests: +test_trade_pro_chrome_layout (structure/hooks/EN fallback nav/
css evidence/drawer assets + safe-area/mobile_tabs publish cycle).
35 passed in theme suite; full run 364 passed + same 10 known infra fails.

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-10-23 17:53:14 +08:00
parent 87ce104d7e
commit a63548c645
3 changed files with 265 additions and 1 deletions
+3 -1
View File
@@ -21,7 +21,9 @@
{% if has_custom and kind!='notfound' %}<main id="main-content" class="sf-canvas pro-custom-content">{{custom_blocks}}</main>{% else %}<main id="main-content" class="sf-canvas pro-custom-content" aria-hidden="true"></main>{% endif %}
{% if kind not in ('notfound','search') %}<section class="pro-end-cta"><div class="pro-wrap"><div><span class="pro-eyebrow">LET'S CONNECT</span><h2>Ready to source with confidence?</h2><p>{{site.tagline or 'Send your specifications and get a quotation within one business day.'}}</p></div><a class="sf-tp-btn" href="/contact/">Contact us <span>{{ icon('arrow-right') }}</span></a></div></section>{% endif %}
<footer class="sf-site-foot pro-footer"><div class="pro-wrap"><div class="pro-footer-top"><div><span class="pro-eyebrow">TRADE PARTNERSHIP</span><h2>{{chrome.footer.title or site.name}}</h2><p>{{footer_text if (chrome_is_custom or footer_text) else 'Quality products, transparent specifications and dependable worldwide delivery.'}}</p></div><div class="pro-footer-links">{{footer_links(tp_nav if footer_nav else [])}}</div><div><span class="pro-eyebrow">BUSINESS ENQUIRY</span><p>{% if footer_email %}<a href="mailto:{{footer_email}}">{{footer_email}}</a>{% else %}Configure the business email in the admin console.{% endif %}</p></div></div><div class="pro-footer-bottom"><span>© {{year}} {{site.name}}</span><span>ENGINEERED FOR GLOBAL TRADE</span></div></div></footer>
<footer class="sf-site-foot pro-footer"><div class="pro-wrap"><div class="pro-footer-top"><div><span class="pro-eyebrow">TRADE PARTNERSHIP</span><h2>{{chrome.footer.title or site.name}}</h2><p>{{footer_text if (chrome_is_custom or footer_text) else 'Quality products, transparent specifications and dependable worldwide delivery.'}}</p></div><div class="pro-footer-links">{% if footer_nav %}<h3>Quick Links</h3>{% endif %}{{footer_links(tp_nav if footer_nav else [])}}</div><div><span class="pro-eyebrow">BUSINESS ENQUIRY</span><p>{% if footer_email %}<a href="mailto:{{footer_email}}">{{footer_email}}</a>{% else %}Configure the business email in the admin console.{% endif %}</p></div></div><div class="pro-footer-bottom"><span>© {{year}} {{site.name}}</span><span>ENGINEERED FOR GLOBAL TRADE</span></div></div></footer>
{% if chrome.mobile_tabs['enabled'] and chrome.mobile_tabs['items'] %}<nav class="sf-mobile-tabs" style="--sf-mobile-tab-count:{{ chrome.mobile_tabs['items']|length }}" aria-label="Mobile quick navigation" data-mobile-tabs>
{% for tab in chrome.mobile_tabs['items'] %}{% if tab.action == 'menu' %}<button type="button" class="sf-mobile-tab" data-mobile-open-menu aria-label="{{tab.title}}"><span class="sf-tab-icon" aria-hidden="true">{{ mobile_tab_icons[tab.icon] }}</span><span class="sf-tab-label">{{tab.title}}</span></button>{% else %}<a class="sf-mobile-tab" href="{{tab.route}}"{% if tab.route == route %} aria-current="page"{% endif %}><span class="sf-tab-icon" aria-hidden="true">{{ mobile_tab_icons[tab.icon] }}</span><span class="sf-tab-label">{{tab.title}}</span></a>{% endif %}{% endfor %}</nav>{% endif %}
<script defer src="assets/site-runtime.js"></script><script defer src="assets/pro.js"></script>
<script>
/* cms reveal port (Task 10a): progressive enhancement only. Without JS or