From 1c190d00ca397943559a87122afb3bb615c0c113 Mon Sep 17 00:00:00 2001 From: bigcode Date: Sun, 1 Nov 2026 22:10:59 +0800 Subject: [PATCH] =?UTF-8?q?v0.10.12:=20H12=20Industries=20and=20Use=20Case?= =?UTF-8?q?s(eael-adv-tabs)=E5=AE=8C=E6=88=90=20+=20H11=20=E5=9B=9E?= =?UTF-8?q?=E5=BD=92=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AdvTabsWidget: 忠实 EAEL DOM(li id/data-tab/aria-controls/aria-expanded)+ React 点击切换, active/inactive 类、内容面板 id=-tab;标题字体 Roboto - H12 scoped 生成规则: li bg #F4F5F8 + 底边 3px(默认同背景色,active/hover #ED6C00), 内容面板 color #333 + padding 16px 0 0 + 顶边 1px #C7CBDA(li 高 59 与原站全等) - image-box 修复: content_vertical_alignment 设置驱动 wrapper align-items(middle→center, 防 fig 被 flex stretch 拉高 2px);figure 内 块化消行盒下伸;ec11f3f 图宽 30% 仅存于 post-18 生成 CSS,DB 无对应键,scoped 补规则 - 审计方法修正: 先滚动全页触发 lazy 图加载再测量(视口外 lazy 图曾致 H11 虚假 -82.2px) - 实测 H0-H12 全部 section 高度与原站全等,页级漂移 0.8px;截图目视一致;点击切换正常 --- docs/sections-inventory.md | 4 +- package.json | 2 +- src/components/elementor/Renderer.tsx | 70 ++++++++++++++++++++------- src/styles/app.css | 39 +++++++++++++++ 4 files changed, 95 insertions(+), 20 deletions(-) diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md index 1088ae3f6..4ad5c4e00 100644 --- a/docs/sections-inventory.md +++ b/docs/sections-inventory.md @@ -45,7 +45,7 @@ | 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 | Smart Apartment Gateway 规划模块 | html widget(17.9KB 自包含 HTML+CSS,无 JS) | ✅ v0.10.10（html widget 路径补 localSiteUrl 媒体改写、去掉内层 mb;补 Elementor 全局 figure margin 0(text-editor 例外)与 kit 标题排版(.elementor-kit-15 h1..h6 → Roboto 600/500,h2 38px)——H10 h2 由 kit Roboto 渲染换行点才与原站一致;sec h 674.8 与原站全等,3 图全载 | | H11 | Dusun IoT Developer Center 三卡 | heading+text+内嵌 section 三列卡(heading/image/image-box 行/button) | ✅ v0.10.11（heading 40/600、text 20px/_padding 4rem;三列 453.33-margin→443.33(实测原站 populated flex 收缩语义,该三列 scoped width auto);image-box pos-left 行布局(flex 居中/图 18%/间距 15/标题底距 4px);按钮设置驱动(白底橙字/1px 边框/12px 48px/18px+悬停注入);节背景=电路板条图 bottom center+no-repeat+F4F5F8→透明渐变遮罩(.elementor-background-overlay 通用实现,行 relative 防蒙灰);全局:全零 _margin 不覆盖 kit-spacing、0.9rem p 边距、html widget localSiteUrl/去 mb、Elementor figure margin 0(text-editor 例外)、kit 标题 Roboto 600/500(h2 38px)、按钮 collapseBoxValues 边框) | -| H12 | Industries and Use Cases | heading + eael-adv-tabs(6 标签,内容自包含 HTML) + button(ef0fcd9) | ⬜ | +| H12 | Industries and Use Cases | heading + eael-adv-tabs(6 标签,内容自包含 HTML) + button(ef0fcd9) | ✅ v0.10.12（AdvTabsWidget 忠实 DOM+React 切换(li id/data-tab/aria-controls)、active #ED6C00/文字 #333/bg #F4F5F8/li 底边 3px(默认同背景色,active/hover 变橙,故 li 高 59)、内容面板 padding 16px 0 0+顶边 1px #C7CBDA、id=-tab；标题 40px Poppins 居中、按钮 8390e24 设置驱动实测全等；随此版块修复:image-box 垂直对齐 content_vertical_alignment(middle→center,防 fig 被拉伸)、figure 内 块化(消 2px 行盒下伸)、ec11f3f 图宽 30% 仅存 post-18 生成 CSS 的补规则、AdvTabs 标题 Roboto；实测 H0-H12 各 section 高度全等,页级漂移 0.8px） | | H13 | Difference Maker 产品卡 ×6 | image-box ×6 | ⬜ | | H14 | Why Choose Dusun IoT | heading + eael-info-box ×4 | ⬜ | | H15 | Trusted By 世界领先品牌 | heading + image ×11(Logo 墙) | ⬜ | @@ -114,7 +114,7 @@ cookie-policy:19 段纯文本。 > 每完成一个版块:与原站同页同区截图对比 → 头less Chromium 验算 computed style → 版本号 +1。 > -> 取证基建补充(v0.10.8):原站 EAEL 样式实际加载 `uploads/essential-addons-elementor/eael-18.css` +> 取证基建补充(v0.10.8/v0.10.12):原站 EAEL 样式实际加载 `uploads/essential-addons-elementor/eael-18.css` > (合并包),并非 `view/*.min.css` 单件——后续 H9/H11 等 EAEL 版块以 eael-18.css 为准; > Elementor 通用布局三要素已落地 Renderer:section 根 padding、列 gap 默认 populated padding > (no 0/narrow 5/default 10/extended 15/wide 20/wider 30)、widget-wrap flex wrap + 子元素 width:100% diff --git a/package.json b/package.json index 4a418de46..3e5c580bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dusuniot-rebuild", - "version": "0.10.11", + "version": "0.10.12", "private": true, "type": "module", "scripts": { diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx index 6459d606a..811c714ad 100644 --- a/src/components/elementor/Renderer.tsx +++ b/src/components/elementor/Renderer.tsx @@ -539,7 +539,7 @@ function WidgetNodeInner({ el }: { el: ElElement }) { case "flip-box": return ; case "eael-adv-tabs": - return ; + return ; case "eael-data-table": return ; case "eael-testimonial": @@ -880,17 +880,21 @@ function ImageBoxWidget({ settings }: { settings: Record }) { : "h3") as "div"; const Tag = tag as "div"; // position left/right：wrapper 为 flex 行（widget-image-box.min.css .elementor-position-left - // .elementor-image-box-wrapper{display:flex;align-items:center}，实测 H11 卡内图标行）； + // .elementor-image-box-wrapper{display:flex}，实测 H11 卡内图标行）； // 图宽 image_size%（post-18 由 image_size 控件生成 .elementor-image-box-img{width:18%}）、 // 左侧布局 fig 右距 15px；标题底距 title_bottom_space（H11 实测 4px） const isRow = pos === "left" || pos === "right"; const imgW = sizeCss(settings.image_size); const titleSpace = sizeCss(settings.title_bottom_space); - // flex/边距在 app.css 的 .el-imagebox-pos-* 规则（带 768 断点），这里只带 per-widget 图宽 + // 内容垂直对齐（content_vertical_alignment 控件，仅 left/right 行布局生效）： + // 由 per-widget 生成规则输出 align-items（514e513 middle → center 实测；否则 flex 默认 stretch） + const vaMap: Record = { top: "flex-start", middle: "center", bottom: "flex-end" }; + const va = isRow ? vaMap[s(settings.content_vertical_alignment)] : undefined; + // flex/边距在 app.css 的 .el-imagebox-pos-* 规则（带 768 断点），这里只带 per-widget 图宽与垂直对齐 const figStyle: CSSProperties | undefined = isRow && imgW ? { width: imgW } : undefined; return (
-
+
{url ? (
{link ? ( @@ -1019,29 +1023,61 @@ function FlipBoxWidget({ settings }: { settings: Record }) { } /** # 组件 eael-adv-tabs（EAEL 高级标签页）：结构同 tabs，键名不同 */ -function AdvTabsWidget({ settings }: { settings: Record }) { +/** # 组件 EAEL adv-tabs widget（H12 Industries and Use Cases，6 标签横排） + * DOM 对齐原站（1436 实测 2026-11-01）：#eael-advance-tabs-.eael-advance-tabs.eael-tabs-horizontal > + * .eael-tabs-nav > ul[role=tablist] > li.eael-tab-item-trigger.eael-tab-nav-item(.active/.inactive, + * pad 16px 24px,flex 1 1 auto) > span.eael-tab-title.title-after-icon； + * .eael-tabs-content > div.eael-tab-content-item.clearfix#-tab(.active/.inactive,pad 16px 0 0)。 + * 内容 tab_content 为自包含 HTML（use-fl/use-fr 图文布局），custom_css 经 collectCustomCss 注入。 + * 基础样式移植 eael-18.css（app.css「EAEL adv-tabs」块）；激活/文字色由 post-18 生成规则 + * （li bg 26331af #F4F5F8、激活 #ED6C00、未激活 #333）落在 scoped 规则。 + */ +function AdvTabsWidget({ el, settings }: { el: ElElement; settings: Record }) { const raw = Array.isArray(settings.eael_adv_tabs_tab) ? (settings.eael_adv_tabs_tab as { eael_adv_tabs_tab_title?: string; eael_adv_tabs_tab_content?: string }[]) : []; const items = raw .map((t) => ({ title: s(t.eael_adv_tabs_tab_title), content: s(t.eael_adv_tabs_tab_content) })) .filter((t) => t.title || t.content); + const [active, setActive] = useState(0); if (!items.length) return null; + // 内容面板 id：标题 slug 化（原站 building-automation / building-automation-tab 等） + const slug = (t: string) => t.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-"); return ( - - +
+
+
    + {items.map((t, i) => ( + + ))} +
+
+
{items.map((t, i) => ( - - {t.title} - +
))} - - {items.map((t, i) => ( - -
- - ))} - +
+
); } diff --git a/src/styles/app.css b/src/styles/app.css index 3a2f08102..0503b5ea8 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -243,6 +243,8 @@ * 水平居中靠 wrapper text-align:center 的 inline-block 排版） */ .el-imagebox-img { display: inline-block; margin: 0; } .el-imagebox-img img { display: block; max-width: 100%; line-height: 0; } + /* 图外层的 必须块化：内联 a 的行盒按基线对齐会给 figure 多出 ~2px 下伸部（H11 实测 fig 28 vs 26） */ + .el-imagebox-img a { display: block; line-height: 0; } .el-imagebox-title a { color: inherit; } .el-imagebox-description { margin: 0; } .el-imagebox-img img { transition: filter 0.3s ease; } @@ -262,10 +264,47 @@ [data-el="f43387e"] > div, [data-el="508f31a"] > div, [data-el="2b7b38c"] > div { width: auto !important; } + /* ec11f3f 的图宽 30% 只存在于 post-18 生成 CSS（DB settings 已无对应键）， + * 其余八个 image-box 的 image_size 设置齐全、由组件内联输出（1436 实测 fig 宽全等） */ + [data-el="ec11f3f"] .el-imagebox-img { width: 30%; } @media (max-width: 767px) { .el-imagebox-img { margin-inline: auto !important; margin-bottom: 15px; } } + /* ===== EAEL adv-tabs 基础（eael-18.css 对应块；H12 Industries and Use Cases） + * 横排标签：nav ul flex flex-start；li flex 1 1 auto + 1em/1.5em（实测 16px 24px）； + * 内容默认隐藏、.active 显示。竖排/角标箭头规则无实例，不移植。 + */ + .eael-advance-tabs { display: block; } + .eael-advance-tabs .eael-tabs-nav > ul { + position: relative; padding: 0; margin: 0; list-style-type: none; + display: flex; justify-content: flex-start; align-items: center; z-index: 1; + } + .eael-advance-tabs .eael-tabs-nav > ul li { + position: relative; padding: 1em 1.5em; flex: 1 1 auto; cursor: pointer; + display: flex; justify-content: center; align-items: center; text-align: center; + background-color: #f1f1f1; + } + .eael-advance-tabs .eael-tabs-nav > ul li .eael-tab-title { + margin: unset; font-size: unset; line-height: unset; font-family: unset; font-weight: unset; color: unset; + } + .eael-advance-tabs .eael-tabs-content > div { display: none; opacity: 0; } + .eael-advance-tabs .eael-tabs-content > div.active { display: block; width: 100%; opacity: 1; } + + /* ===== 首页 H12 adv-tabs 生成规则（post-18.css 对应块；1436 实测 2026-11-01） + * li 背景 #F4F5F8 + 文字 #333 + 底边 3px（默认同背景色、active/hover 变 #ED6C00，故 li 高 = 24+16*2+3）； + * 内容面板 color #333 + padding 16px 0 0 + 顶边 1px #C7CBDA */ + [data-el="ef0fcd9"] .eael-tabs-nav > ul li { + background-color: #F4F5F8; color: #333333; + border-style: solid; border-width: 0 0 3px; border-color: #F4F5F8; + } + [data-el="ef0fcd9"] .eael-tabs-nav > ul li.active, + [data-el="ef0fcd9"] .eael-tabs-nav > ul li:hover { color: #ED6C00; border-bottom-color: #ED6C00; } + [data-el="ef0fcd9"] .eael-tabs-nav > ul li .eael-tab-title { font-family: "Roboto", sans-serif; } + [data-el="ef0fcd9"] .eael-tab-content-item { + color: #333333; padding: 16px 0 0; border-top: 1px solid #C7CBDA; + } + /* ===== 首页 H2 产品线入口（post-18.css 对应块；1436px 实测 2026-10-31） * 外层 section：白→#F4F5F8 线性渐变（180deg）+ 1360 容器（SectionNode 背景已渲染）； * 中列 0.5rem 内边距；内层 e38a898 六列均分 224px，列内容 wrap padding 10px（高 107）；