feat: trust_bar + applications_band blocks; homepage now block-driven

- blueprints: register trust_bar (icon/title/text items) and applications_band
  (2x2 dark-band tiles) block types; render with escaped items, ordinal icon
  fallback, 8-item cap; auto-exposed in editor via /api/editor/blocks and
  grouped under business in the studio palette
- blocks.css: platform base layer for both blocks (app/static + trade-pro
  Layer A kept verbatim in sync) + trade-pro bridge vocabulary (icon-circle,
  hairline dividers, navy->brand gradient band, glass tiles, 900/620
  breakpoints, reduced-motion) without touching canvas hooks
- tests: test_trade_pro_home_block_driven covers the full studio-draft
  PUT -> publish -> build chain; 8 block types on the homepage, template
  markers absent under layout_mode=replace, clean build report
- scripts/setup_home_blocks.py: production write path for site 483295c29ea0
  (login -> draft -> publish -> build -> verify); real catalogue counts feed
  the stats block; run after the Docker image picks up the new block types

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-10-28 18:11:32 +08:00
parent c4d9b1075c
commit 45c39b1695
6 changed files with 405 additions and 1 deletions
+52
View File
@@ -17,6 +17,9 @@
cta → sf-tp-cta(深色渐变带 + 幽灵按钮)、
richtext → sf-tp-article-body 排版层;gallery/carousel/video/pricing/
tabs 按同一令牌语汇补齐(cms 无一一对应组件)。
Task 13b 新增:trust_bar → sf-tp-trustbar(白底横带 + icon-circle +
发丝分隔线)、applications_band → sf-tp-applications(深色渐变带 +
2×2 玻璃瓦片)——支撑首页从模板驱动切换为区块驱动(layout_mode=replace)。
级联纪律:
- 节级底色用 .sf-canvas 链(0,4,0)压过 pro-base 晚载的
.pro-custom-content .sf-section(:nth-of-type(even))(静态构建 blocks 先于
@@ -99,6 +102,26 @@
.sf-hero-panel .sf-hero-copy h2{font-size:clamp(38px,5vw,76px);font-weight:790;letter-spacing:-.052em}
/* Trust bar: horizontal credibility strip under the hero (icon + title + note). */
.sf-section.sf-trust_bar{padding:38px 0}
.sf-trust-bar{display:grid;grid-template-columns:repeat(var(--sf-trust-cols,4),minmax(0,1fr))}
.sf-trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 20px;border-inline-end:1px solid #dce3eb}
.sf-trust-item:last-child{border-inline-end:0}
.sf-trust-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#eef2f8;color:var(--accent,#315ee2);font-size:18px;font-weight:800;margin-bottom:6px}
.sf-trust-item strong{font-size:15px}
.sf-trust-text{font-size:13px;opacity:.68;line-height:1.55}
@media(max-width:820px){.sf-trust-bar{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}.sf-trust-item:nth-child(2n){border-inline-end:0}}
@media(max-width:540px){.sf-trust-bar{grid-template-columns:minmax(0,1fr)}.sf-trust-item{border-inline-end:0}}
/* Applications band: dark gradient strip with a 2x2 tile grid. */
.sf-section.sf-applications_band{background:linear-gradient(115deg,#101828,#1d3a6e 78%);color:#f5f7fa}
.sf-applications-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sf-app-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:26px 24px}
.sf-app-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);font-size:17px;font-weight:800;margin-bottom:12px}
.sf-app-tile h3{font-size:20px;margin:0 0 6px}
.sf-app-tile p{font-size:14px;line-height:1.65;opacity:.75;margin:0}
@media(max-width:540px){.sf-applications-band{grid-template-columns:minmax(0,1fr)}}
/* ════════ Layer B:trade-pro 视觉桥接(sf-tp-* 模板语汇 → sf-* 区块)════════ */
/* ── 画布守护(V8.33 既有约定):区块节不溢出栅格列、贴入图片不撑破版心;
@@ -225,6 +248,27 @@
.sf-theme-trade-pro .sf-attribute strong{color:var(--sf-tp-color-text-primary)}
.sf-theme-trade-pro .sf-map-address{color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-md)}
/* ── trust_bar → sf-tp-trustbar(Task 13b):白底横带 + icon-circle(brand-soft 底
品牌字)+ 列间发丝分隔线(cms 首页信任条语汇)── */
.sf-theme-trade-pro .sf-canvas .sf-section.sf-trust_bar{background:var(--sf-bg,var(--sf-tp-color-surface-default));padding-block:calc(var(--sf-pad,var(--sf-tp-space-10)) - var(--sf-tp-space-2))}
.sf-theme-trade-pro .sf-trust-item{padding:var(--sf-tp-space-2) var(--sf-tp-space-4);gap:var(--sf-tp-space-1);border-inline-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-trust-item:last-child{border-inline-end:0}
.sf-theme-trade-pro .sf-trust-icon{width:var(--sf-tp-icon-size-xl);height:var(--sf-tp-icon-size-xl);margin-block-end:var(--sf-tp-space-2);border-radius:var(--sf-tp-radius-full);background:var(--sf-tp-color-surface-brand-soft);color:var(--sf-tp-color-text-brand);font-size:var(--sf-tp-font-size-md);box-shadow:var(--sf-tp-shadow-xs)}
.sf-theme-trade-pro .sf-trust-item strong{color:var(--sf-tp-color-text-primary);font-size:var(--sf-tp-font-size-md)}
.sf-theme-trade-pro .sf-trust-text{color:var(--sf-tp-color-text-muted);opacity:1;font-size:var(--sf-tp-font-size-sm);line-height:var(--sf-tp-line-height-normal)}
/* ── applications_band → sf-tp-applications(Task 13b):藏青→品牌蓝渐变带 +
2×2 玻璃瓦片(inverse 透底 + 发丝透边 + 品牌圆标,cms 应用带语汇)── */
.sf-theme-trade-pro .sf-canvas .sf-section.sf-applications_band{background:var(--sf-bg,linear-gradient(115deg,var(--sf-tp-color-surface-inverse),var(--sf-tp-color-brand-primary-deep) 78%));color:var(--sf-fg,var(--sf-tp-color-text-inverse))}
.sf-theme-trade-pro .sf-section.sf-applications_band .sf-kicker{color:var(--sf-tp-color-text-inverse-muted)}
.sf-theme-trade-pro .sf-section.sf-applications_band .sf-section-head h2{color:var(--sf-tp-color-text-inverse)}
.sf-theme-trade-pro .sf-applications-band{gap:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-app-tile{background:color-mix(in srgb,var(--sf-tp-color-text-inverse) 7%,transparent);border:var(--sf-tp-border-width-hairline) solid color-mix(in srgb,var(--sf-tp-color-text-inverse) 18%,transparent);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5);transition:transform var(--sf-tp-duration-fast) var(--sf-tp-easing-standard),box-shadow var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-app-tile:hover{transform:translateY(calc(-1 * var(--sf-tp-space-1)));box-shadow:var(--sf-tp-shadow-md)}
.sf-theme-trade-pro .sf-app-icon{width:var(--sf-tp-icon-size-xl);height:var(--sf-tp-icon-size-xl);margin-block-end:var(--sf-tp-space-3);border-radius:var(--sf-tp-radius-full);background:var(--sf-tp-color-surface-brand);color:var(--sf-tp-color-text-on-brand);font-size:var(--sf-tp-font-size-md)}
.sf-theme-trade-pro .sf-app-tile h3{color:var(--sf-tp-color-text-inverse);font-size:var(--sf-tp-font-size-md);margin-block-end:var(--sf-tp-space-1)}
.sf-theme-trade-pro .sf-app-tile p{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 80%,transparent);opacity:1;font-size:var(--sf-tp-font-size-sm);line-height:var(--sf-tp-line-height-normal);margin:0}
/* ── 桥接层响应式(断点随模板:900 栅格堆叠 / 620 紧凑;Layer A 的 820/540
设备控制语义由 responsive.py 继续接管 padding/显隐)── */
@media (max-width: 900px){
@@ -234,6 +278,8 @@
.sf-theme-trade-pro .sf-collection{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-theme-trade-pro .sf-gallery{grid-template-columns:repeat(2,1fr)}
.sf-theme-trade-pro .sf-cta-wrap{align-items:flex-start;flex-direction:column}
.sf-theme-trade-pro .sf-trust-bar{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-trust-item:nth-child(2n){border-inline-end:0}
}
@media (max-width: 620px){
.sf-theme-trade-pro .sf-section.sf-hero .sf-hero-grid{gap:var(--sf-tp-space-4)}
@@ -251,12 +297,18 @@
.sf-theme-trade-pro .sf-section-head>a{display:inline-block;margin-block-start:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-cta-wrap p{font-size:var(--sf-tp-font-size-sm)}
.sf-theme-trade-pro .sf-price{padding:var(--sf-tp-card-padding-md)}
.sf-theme-trade-pro .sf-trust-bar{grid-template-columns:minmax(0,1fr)}
.sf-theme-trade-pro .sf-trust-item{border-inline-end:0;padding:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-applications-band{gap:var(--sf-tp-space-3)}
.sf-theme-trade-pro .sf-app-tile{padding:var(--sf-tp-space-4)}
}
/* 动效尊重系统偏好(Layer A 同款契约,覆盖本层新增过渡)*/
@media(prefers-reduced-motion:reduce){
.sf-theme-trade-pro .sf-item,.sf-theme-trade-pro .sf-item-img img,.sf-theme-trade-pro .sf-gallery img,.sf-theme-trade-pro .sf-button{transition:none}
.sf-theme-trade-pro .sf-item:hover,.sf-theme-trade-pro .sf-button:hover{transform:none}
.sf-theme-trade-pro .sf-item:hover .sf-item-img img,.sf-theme-trade-pro .sf-gallery img:hover{transform:none}
.sf-theme-trade-pro .sf-app-tile{transition:none}
.sf-theme-trade-pro .sf-app-tile:hover{transform:none}
}
/* 画布列内区块的移动端收边(V8.33 既有约定)*/
@media(max-width:640px){.sf-theme-trade-pro .sf-layout-column{min-width:0}.sf-theme-trade-pro .sf-canvas .sf-section{padding-inline:clamp(12px,4vw,24px)}}