From c1741772cd1b8d8e0b62f568167528a24f493876 Mon Sep 17 00:00:00 2001 From: bigcode Date: Sun, 1 Nov 2026 22:39:12 +0800 Subject: [PATCH] =?UTF-8?q?v0.10.13:=20H13=20The=20Difference=20Maker(?= =?UTF-8?q?=E4=BE=9B=E5=BA=94=E5=95=86=E4=B8=BB=E5=BC=A0=E6=9D=A1)?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - IconListWidget 重写为 Elementor 忠实 DOM:ul.elementor-icon-list-items(-inline-items flex wrap + 负边距对冲)、li>a>span.elementor-icon-list-text、text_color 落 span、 is_external→target=_blank;基础 CSS(widget-icon-list.min.css 语义) - 列背景全量:sectionBgStyle 支持 background_size(initial→100% auto,楼体图 bf3d0ba post-18 生成规则取证),ColumnNode 并入 position/repeat/size - H13 scoped:icon-list 悬停主色(globals text_color_hover);描边盒由 custom_css 注入 - 审计取证:text-editor _margin -1rem 的 BFC 折叠(widget h 15.4)双端一致; orig 侧 H12 面板渐进展开致整页 y 漂移,改用节内相对坐标对比 - 相对几何逐项全等,截图目视一致;11 测试全过 --- docs/sections-inventory.md | 2 +- package.json | 2 +- src/components/elementor/Renderer.tsx | 49 +++++++++++++++++++++------ src/components/elementor/slim.ts | 4 +++ src/styles/app.css | 15 ++++++++ 5 files changed, 60 insertions(+), 12 deletions(-) diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md index 4ad5c4e00..12a3bae1e 100644 --- a/docs/sections-inventory.md +++ b/docs/sections-inventory.md @@ -46,7 +46,7 @@ | 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) | ✅ 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 | ⬜ | +| H13 | Difference Maker 供应商主张条 | heading 5706426 + text c83a5d3 + icon-list 002494b(3 描边链接) + 内嵌 section 931e838(左文右空+楼体图) | ✅ v0.10.13（heading 40/600/#000 左对齐；text fs 1.375rem + _margin -1rem 折叠(widget h 15.4 机制与原站一致)；icon-list inline 视图 3 描边链接(custom_css .ele-supplier-dif 边框盒/悬停橙,li 213.7/190.4/206.2 全等)；楼体大图=列 bf3d0ba 背景 bottom left+100% auto；随此版块落地:IconListWidget 忠实 DOM 重写(inline-items flex 对冲边距)、列背景 background_size(initial→100% auto)/position/repeat 全量并入、icon-list 基础 CSS、悬停主色规则；相对几何逐项全等(183.4/251.4 等),截图目视一致。注意:orig 侧 H12 面板渐进展开致整页 y 多次测量间漂移,以节内相对坐标为准） | | H14 | Why Choose Dusun IoT | heading + eael-info-box ×4 | ⬜ | | H15 | Trusted By 世界领先品牌 | heading + image ×11(Logo 墙) | ⬜ | | H16 | Developer Ecosystem | heading ×4+text+button+image+social-icons(左右两卡) | ⬜ | diff --git a/package.json b/package.json index 3e5c580bb..83dfe476f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dusuniot-rebuild", - "version": "0.10.12", + "version": "0.10.13", "private": true, "type": "module", "scripts": { diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx index 811c714ad..801c326d3 100644 --- a/src/components/elementor/Renderer.tsx +++ b/src/components/elementor/Renderer.tsx @@ -206,6 +206,10 @@ function sectionBgStyle(settings: Record): CSSProperties { style.backgroundPosition = posRaw ? mapBgPosition(posRaw) : "center center"; const rep = s(settings.background_repeat); if (rep) style.backgroundRepeat = rep; + // 尺寸：initial → 100% auto（H13 楼体大图 bf3d0ba 生成规则实测； + // cover/contain/auto 原样输出） + const sizeRaw = s(settings.background_size); + if (sizeRaw) style.backgroundSize = sizeRaw === "initial" ? "100% auto" : sizeRaw; } } else if (bgType === "gradient") { const c1 = s(settings.background_color) || s(settings.color_a) || "#ffffff"; @@ -414,7 +418,8 @@ function ColumnNode({ el, gapPad }: { el: ElElement; gapPad?: string }) { } inner.padding = paddingCss(settings.padding) || gapPad || "10px"; const bg = sectionBgStyle(settings); - Object.assign(inner, { backgroundColor: bg.backgroundColor, backgroundImage: bg.backgroundImage }); + // 背景对象整体并入（颜色/图片/位置/平铺/尺寸，H13 楼体图 bottom left + 100% auto 实测） + Object.assign(inner, bg); const radius = paddingCss(settings.border_radius); if (radius) inner.borderRadius = radius; if (s(settings.border_border) === "solid") { @@ -1160,19 +1165,43 @@ function ReviewsWidget({ settings }: { settings: Record }) { ); } -/** # 组件 icon-list widget：仅渲染文字列表，emoji 图标跳过 */ +/** # 组件 icon-list widget：忠实 Elementor DOM（widget-icon-list.min.css 语义） + * view=inline 时 ul.elementor-icon-list-items.elementor-inline-items（flex wrap， + * ul 负边距 -8px 与 li 8px 侧边距对冲，实测 H13 链接条）；否则竖排 ul。 + * li.elementor-icon-list-item(flex 居中) > [a(target=_blank) >] span.elementor-icon-list-text； + * 文字色 text_color 落 span（实测 #0D152E，a 本身继承 kit 主色不影响文字）， + * 悬停色 text_color_hover(globals)由 H13 页面级生成规则注入；custom_css(.ele-supplier-dif + * 描边盒) 经 collectCustomCss 注入。 + */ function IconListWidget({ settings }: { settings: Record }) { - const list = Array.isArray(settings.icon_list) ? (settings.icon_list as { text?: string; selected_icon?: { value?: string } }[]) : []; - const items = list.map((it) => s(it.text)).filter(Boolean); + const list = Array.isArray(settings.icon_list) + ? (settings.icon_list as { text?: string; _id?: string; link?: { url?: string; is_external?: string }; selected_icon?: { value?: string } }[]) + : []; + const items = list.filter((it) => s(it.text)); if (!items.length) return null; + const inline = s(settings.view) === "inline"; + const color = s(settings.text_color) || undefined; return ( -