diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md index 6c7d5af2c..92bc05fa4 100644 --- a/docs/sections-inventory.md +++ b/docs/sections-inventory.md @@ -41,8 +41,8 @@ | H5 | 可定制/易生产 双主张条 | heading ×2(双栏大字) | ✅ v0.10.7(long-arrow 背景条、列 380、文字 20px/500/#fff 单行、arrow 194×39) | | H6 | 从概念到量产 宣言条 | 全大写 heading(ACCELERATE YOUR IOT DEVICE LAUNCH…) | ✅ v0.10.8(Poppins 24px/600/行高 1 由 DB 内联、≤767 20px、列 59bc2e1 四向 10px、sec 根 padding 10px,五层盒模型 y 全对齐 0.8px 页级漂移内) | | H7 | OS/芯片平台/语言/协议 四列 | heading ×4 图标列 | ✅ v0.10.8(外卡 66de90a 渐变+边框+圆角 8/16/16/0、四列 335.5 虚线分隔、_element_width:auto 图标横排 4+3 换行、el-w-auto 双层类修复 width:100% 强推回归) | -| H8 | 热门嵌入式硬件 标题 | heading | ⬜ | -| H9 | 热门硬件切换器(html) | html widget(原站 JS 切换逻辑,需看原站行为) | ⬜ | +| H8 | 热门嵌入式硬件 标题 | heading(Popular Embedded Hardware Products…) | ✅ v0.10.9(heading 40px/600/#000/行高 1 居中 x38/w1360;section 7df0244 gap=no→列 0px、margin-top 4%=57.4375px、bg #F4F5F8、padding 64px 0——section 级 margin/gap 渲染支持随此版块落地,slim 白名单补 gap) | +| H9 | 热门硬件切换器(tabs) | Elementor 原生 tabs widget ×6 标签(内容为自包含 HTML 卡片网格) | ✅ v0.10.9(TabsWidget 忠实 DOM+React 点击切换/aria;widget-tabs.min.css 基础块+fd97340 生成规则(border_width=0 含伪元素)+custom_css(.ele-soms-chip-dif 边框/内容覆盖)三层取证;全局修正 body 行高为无单位 1.5、补 kit 链接字体 Roboto(卡片 经 .elementor-kit-15 a 规则用 Roboto,否则 Arial 截断致规格多折一行);实测仅 0.8px 页级漂移) | | H10 | 技术产品 Tab 行 ×3 | heading+image+image-box ×4+button(三段 Tab 面板) | ⬜ | | H11 | Industries & Use Cases | heading + eael-adv-tabs + button(多标签竖排) | ⬜ | | H12 | The Difference Maker 段一 | heading+text+icon-list+text+button(左侧列表优势) | ⬜ | diff --git a/package.json b/package.json index c10c4bd81..e23777b9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dusuniot-rebuild", - "version": "0.10.8", + "version": "0.10.9", "private": true, "type": "module", "scripts": { diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx index 458068dd4..451e1efe2 100644 --- a/src/components/elementor/Renderer.tsx +++ b/src/components/elementor/Renderer.tsx @@ -5,7 +5,7 @@ * 样式以内联 style 复现视觉效果(背景、内边距、对齐、列宽百分比), * 未识别的 widgetType 优雅降级:渲染 heading_title / editor 文本或忽略。 */ -import { Component, useEffect, useState, type CSSProperties, type ReactNode } from "react"; +import { Component, Fragment, useEffect, useState, type CSSProperties, type ReactNode } from "react"; import { getLatestPosts, getLatestProducts, type LatestItem } from "~/server/data"; import TickerBar from "~/components/website/TickerBar"; import { InquiryForm } from "~/components/website/InquiryForm"; @@ -320,6 +320,9 @@ function SectionNode({ el }: { el: ElElement }) { const width = sizeCss(settings.content_width) || sizeCss((settings as Record).width) || "1140px"; const secPad = paddingCss(settings.padding); if (secPad) style.padding = secPad; + // section 外边距(原站 computed 在根元素,如 H8 7df0244 margin-top 4% = 57.4px @1436) + const secMargin = paddingCss(settings.margin); + if (secMargin) style.margin = secMargin; const inner: CSSProperties = {}; if (s(settings.layout) === "full_width") { // 通栏 section:内容不设上限(如首页 hero 轮播) @@ -1091,24 +1094,73 @@ function AccordionWidget({ settings }: { settings: Record }) { } /** # 组件 tabs widget:标签页 */ +/** # 组件 Elementor 原生 tabs widget(H9 热门嵌入式硬件切换器) + * DOM 对齐原站(1436 实测 2026-11-01):.elementor-tabs > .elementor-tabs-wrapper(desktop 标题行, + * role=tablist,flex 居中) + .elementor-tabs-content-wrapper(mobile 标题 ×N + 内容面板 ×N)。 + * active 用 elementor-active 类;点击切换(React state,原站为 Elementor JS 行为); + * 内容 tab_content 为自包含 HTML(含