From f66f4775d6f8935ba42307b4d59a74921e35a36a Mon Sep 17 00:00:00 2001 From: bigcode Date: Sun, 1 Nov 2026 10:34:54 +0800 Subject: [PATCH] =?UTF-8?q?v0.10.9=20=E9=A6=96=E9=A1=B5=20H8=20=E6=A0=87?= =?UTF-8?q?=E9=A2=98=E6=9D=A1=20+=20H9=20tabs=20=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E5=99=A8=201:1:TabsWidget=20=E5=BF=A0=E5=AE=9E=20DOM/React=20?= =?UTF-8?q?=E5=88=87=E6=8D=A2;widget-tabs=20=E5=9F=BA=E7=A1=80=E5=9D=97+?= =?UTF-8?q?=E7=94=9F=E6=88=90=E8=A7=84=E5=88=99+custom=5Fcss=20=E4=B8=89?= =?UTF-8?q?=E5=B1=82;section=20margin/gap=20=E6=B8=B2=E6=9F=93=E6=94=AF?= =?UTF-8?q?=E6=8C=81;=E5=85=A8=E5=B1=80=20body=20=E8=A1=8C=E9=AB=98?= =?UTF-8?q?=E6=94=B9=E6=97=A0=E5=8D=95=E4=BD=8D=201.5=E3=80=81kit=20?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=E5=AD=97=E4=BD=93=20Roboto;H1~H7=20=E5=85=A8?= =?UTF-8?q?=E9=87=8F=E5=9B=9E=E5=BD=92=E6=97=A0=E5=B7=AE=E5=BC=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/sections-inventory.md | 4 +- package.json | 2 +- src/components/elementor/Renderer.tsx | 78 +++++++++++++++++++++----- src/components/elementor/slim.ts | 4 ++ src/styles/app.css | 79 ++++++++++++++++++++++++++- 5 files changed, 148 insertions(+), 19 deletions(-) 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（含