diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md index fea05acec..ec702b3e7 100644 --- a/docs/sections-inventory.md +++ b/docs/sections-inventory.md @@ -50,7 +50,7 @@ | H13.5 | counter 统计条 ×6 | 9084925:6 列 image-box(图标+数字标题+描述) | ✅ v0.10.14(双端节内相对几何/样式 JSON 逐字节一致:sec h 235、列 226.7×179 padding 20/16/16/36 + 边框 1px 0 1px 1px #E0E5F9(globals ee1917e,末列四边)、图标 30% 宽(仅存 post-18 生成 CSS,scoped 补规则)+image_space 6px、标题 36px/700/#ED6C00/lh54+mb4(㎡ 内联 span 1.5rem)、描述 18px/#333/lh27;随此版块:image-box 支持 title_typography_*/description_typography_*/image_space/text_align(进 slim 白名单)+title_color 落样式) | | H14 | Why Choose Dusun IoT | heading + eael-info-box ×4(工厂底图深色节) | ✅ v0.10.15(审计 0 差异:heading Poppins 40/600/#FFFFFF(globals 4d5c430)居中 + _padding 底 12px;4 卡 680×294 白底圆角 6、padding 16/40/32、margin 右 8/左 8 + 底 16(两行卡间距 0——随此修复:kit-spacing 20px 排除内嵌 section、populated 宽 100%→auto 扣水平 margin,H14 680-8=672);info-box 标题 20px/700/#0D152E + 图标背景 44×44/lh66/下划线(custom_css 注入)、药丸 li 2px 10px/圆角 16/边框 #C7CBDA、ul margin 0(hello reset,scoped);随此版块:EaelInfoBoxWidget 标题排版/颜色(eael_infobox_title_typography_*/_title_color 进白名单)、内容 div 直出不包 p) | | H15 | Trusted By 世界领先品牌 | heading + text + 3 行×5 列 logo 格(9 图 + 6 空占位) + 世界地图底图 | ✅ v0.10.16(审计仅剩口径/亚像素 3 项:heading 40/600/#000 + _padding 左右 10%、text 20px/_margin 顶 10/_padding 9rem、space_between_widgets=0 列内间距 0(scoped 覆盖 kit-spacing)、三行 logo 列 populated flex 纵向垂直居中 + 扣 margin(scoped auto,272-16=256)、列 margin 8px + 边框 #474DFF26 设置驱动、空占位列裸渲染(原站无 populated 盒,margin/边框 0)、logo 图 254 宽 text-align center(Elementor image widget 默认);节 margin-top 3.5%+padding 底 4.5rem;随此版块:ColumnNode 空列裸渲染、populated 语义辨析(H4 溢出=基线 100%,H11/H14/H15 扣减=scoped auto)——曾试基线改 auto 致 H4 -7.7 回归后回滚) | -| H16 | Developer Ecosystem | heading ×4+text+button+image+social-icons(左右两卡) | ⬜ | +| H16 | Developer Ecosystem | heading ×2 + 内嵌 section 两卡(heading+text+button/social-icons+image) | ✅ v0.10.17(审计 0 差异:节 ab35847 bg #F4F5F8 + heading 40/600/#000(_padding 10%)+副题 20px/_margin 顶 -6;两卡 680×528.4 白底圆角 6 边框 #E0E5F9、padding 48/48/16、margin 12(populated 扣减 scoped)、卡标题 24/700/#0D152E、文本 18px/_padding 3rem、Join Now 白底橙字 12px 56px、图 544×282 居中;随此版块:SocialIconsWidget 忠实重写(wrapper grid gap 10/a 44×44 官方底色 linkedin #0077B5/youtube #CD201F/facebook #3B5998/圆角 10%/白色字形)+FA Brands 字体子集(public/fonts/fa-brands-400.woff2 + 三码位 content 规则)+elementor-animation-shrink 通用类) | | H17 | News & Updates 标题 | heading | ⬜ | | H18 | 最新博文 *2 | posts widget ×2(标题行 + 列卡) | ⬜ | | H19 | 定制 CTA | button(大按钮) | ⬜ | diff --git a/package.json b/package.json index 09e80c8aa..19b123a83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dusuniot-rebuild", - "version": "0.10.16", + "version": "0.10.17", "private": true, "type": "module", "scripts": { diff --git a/public/fonts/fa-brands-400.woff2 b/public/fonts/fa-brands-400.woff2 new file mode 100644 index 000000000..a5876f37e Binary files /dev/null and b/public/fonts/fa-brands-400.woff2 differ diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx index 6f3526368..f3dfc2f46 100644 --- a/src/components/elementor/Renderer.tsx +++ b/src/components/elementor/Renderer.tsx @@ -786,16 +786,37 @@ function PostsWidget({ settings }: { settings: Record }) { } /** # 组件 social-icons widget(图标行) */ +/** # 组件 social-icons widget:忠实 Elementor DOM(widget-social-icons 语义,H16 实测) + * .elementor-social-icons-wrapper.elementor-grid(inline-grid + column-gap=icon_spacing, + * 由父级 text-align 居中)> a.elementor-icon.elementor-social-icon.elementor-social-icon- + * (官方品牌底色/44×44 盒/圆角 10%/白色字形 22px/hover shrink)> span.elementor-screen-only + i.fab; + * 字形色原站为白色(SVG fill #fff,icon_primary_color 未作用到字形)。 + */ function SocialIconsWidget({ settings }: { settings: Record }) { const items = (settings.social_icon_list as Array>) || []; + if (!items.length) return null; + const spacing = sizeCss(settings.icon_spacing) || "10px"; + const anim = s(settings.hover_animation) === "shrink" ? " elementor-animation-shrink" : ""; return ( -
+
{items.map((it, i) => { - const icon = ((it.social_icon as { value?: string })?.value || "").replace(/fa-brands |fa-solid |fa- /g, ""); + const value = ((it.social_icon as { value?: string })?.value || "").trim(); + // value 形如 "fab fa-linkedin":取末段去 fa- 前缀作品牌名(elementor-social-icon-) + const name = (value.split(" ").pop() || "").replace(/^fa-/, ""); + const label = name.replace(/^-/, "").replace(/^\w/, (c) => c.toUpperCase()); return ( - - - + + + {label} +