v0.10.17: H16 Developer Ecosystem(ab35847+906379a)完成,审计 0 差异

- SocialIconsWidget 忠实重写:wrapper grid + column-gap(icon_spacing 10)、
  a.elementor-social-icon 44×44/圆角 10%/官方品牌底色(#0077B5/#CD201F/#3B5998)、
  字形白色(原站 SVG fill #fff 取证)、hover shrink、elementor-screen-only 结构
- FA Brands 字体子集:public/fonts/fa-brands-400.woff2(自 legacy elementor 插件库)+
  app.css 三码位 content 规则(.fab/.fa-linkedin/.fa-youtube/.fa-facebook)
- elementor-animation-shrink 通用动画类;H16 卡列 populated 扣 margin scoped
- 双端节内几何/样式 0 差异(sec 764.4/卡 528.4 全等),截图目视一致

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(大按钮) | ⬜ |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dusuniot-rebuild",
-  "version": "0.10.16",
+  "version": "0.10.17",
   "private": true,
   "type": "module",
   "scripts": {

src/components/elementor/Renderer.tsx

@@ -786,16 +786,37 @@ function PostsWidget({ settings }: { settings: Record<string, unknown> }) {
 }
 
 /** # 组件 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-<name>
+ * （官方品牌底色/44×44 盒/圆角 10%/白色字形 22px/hover shrink）> span.elementor-screen-only + i.fab；
+ * 字形色原站为白色（SVG fill #fff，icon_primary_color 未作用到字形）。
+ */
 function SocialIconsWidget({ settings }: { settings: Record<string, unknown> }) {
   const items = (settings.social_icon_list as Array<Record<string, unknown>>) || [];
+  if (!items.length) return null;
+  const spacing = sizeCss(settings.icon_spacing) || "10px";
+  const anim = s(settings.hover_animation) === "shrink" ? " elementor-animation-shrink" : "";
   return (
-    <div className="mb-[18px] flex gap-2.5">
+    <div className="elementor-social-icons-wrapper elementor-grid" style={{ columnGap: spacing }}>
       {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-<name>）
+        const name = (value.split(" ").pop() || "").replace(/^fa-/, "");
+        const label = name.replace(/^-/, "").replace(/^\w/, (c) => c.toUpperCase());
         return (
-          <a key={i} className="flex size-[34px] items-center justify-center rounded-full bg-soft text-ink hover:bg-brand hover:text-white" href={s((it.link as { url?: string })?.url) || "#"} target="_blank" rel="noreferrer" aria-label={icon}>
+          <span key={s(it._id) || i} className="elementor-grid-item">
-            <span className={"soc " + icon} />
+            <a
-          </a>
+              className={"elementor-icon elementor-social-icon elementor-social-icon-" + name + anim}
+              href={s((it.link as { url?: string })?.url) || "#"}
+              target={s((it.link as { is_external?: string })?.is_external) === "true" || s((it.link as { is_external?: string })?.is_external) === "on" ? "_blank" : undefined}
+              rel="noopener nofollow"
+              aria-label={label}
+            >
+              <span className="elementor-screen-only">{label}</span>
+              <i className={value} aria-hidden="true" />
+            </a>
+          </span>
         );
       })}
     </div>

src/styles/app.css

@@ -21,6 +21,27 @@
   src: url("/fonts/roboto-var-latin.woff2") format("woff2");
 }
 
+/* # 字体 Font Awesome Brands（H16 社交图标；字形子集内联,完整库见 legacy 镜像
+ * wp-content/plugins/elementor/assets/lib/font-awesome——此处只装用到的三个品牌码位） */
+@font-face {
+  font-family: "FA Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("/fonts/fa-brands-400.woff2") format("woff2");
+}
+.fab {
+  font-family: "FA Brands";
+  font-weight: 400;
+  font-style: normal;
+  display: inline-block;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+.fa-linkedin::before { content: "\f08c"; }
+.fa-youtube::before { content: "\f167"; }
+.fa-facebook::before { content: "\f09a"; }
+
 /* # 成员变量 Tailwind 主题令牌（与原 website.css 配色一一对应） **/
 @theme {
   --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
@@ -346,6 +367,11 @@
   [data-el="88b6737"] .el-col > div, [data-el="e194e4f"] .el-col > div,
   [data-el="f6a7591"] .el-col > div { width: auto !important; }
 
+  /* ===== 首页 H16 Developer Ecosystem（906379a 两卡列；1436 实测 2026-11-01）
+   * 卡列 populated 扣水平 margin（680-12=668，margin 右/左 0.75rem 设置驱动），
+   * padding 48/48/16 + 白底 + 圆角 6 + 边框 #E0E5F9 均设置驱动 */
+  [data-el="65282de"] > div, [data-el="cc3e8ca"] > div { width: auto !important; }
+
   /* ===== 首页 H2 产品线入口（post-18.css 对应块；1436px 实测 2026-10-31）
    * 外层 section：白→#F4F5F8 线性渐变（180deg）+ 1360 容器（SectionNode 背景已渲染）；
    * 中列 0.5rem 内边距；内层 e38a898 六列均分 224px，列内容 wrap padding 10px（高 107）；
@@ -408,6 +434,9 @@
   .content-html a { font-family: "Roboto", sans-serif; font-weight: 400; }
   .el-anim-shrink { transition-duration: 0.3s; transition-property: transform; }
   .el-anim-shrink:hover, .el-anim-shrink:focus, .el-anim-shrink:active { transform: scale(0.9); }
+  /* Elementor 通用动画类名（social-icons 等使用，H16） */
+  .elementor-animation-shrink { transition-duration: 0.3s; transition-property: transform; }
+  .elementor-animation-shrink:hover, .elementor-animation-shrink:focus, .elementor-animation-shrink:active { transform: scale(0.9); }
 
   /* ===== EAEL infobox 基础（取证：原站实际加载 uploads/essential-addons-elementor/eael-18.css，
    * 并未加载 view/info-box.min.css——后者仅在带 content-align--* 修饰类时才给 icon/content 上 flex，
@@ -429,6 +458,25 @@
   .eael-infobox .infobox-content ul,
   .eael-infobox .infobox-content ol { margin: 0; }
 
+  /* ===== Elementor social-icons（widget-social-icons.min.css 语义；H16 实测 2026-11-01）
+   * wrapper inline-grid + column-gap(=icon_spacing 10px)，随父级 text-align 居中；
+   * a 官方品牌底色(linkedin #0077B6 / youtube #CD201F / facebook #3B5998)、44×44 盒
+   * (icon_size 22 → font 22 + padding 0.5em)、圆角 10%、字形白色（原站 SVG fill #fff）、
+   * hover shrink（.elementor-animation-shrink 基础已含缩放） */
+  .elementor-social-icons-wrapper.elementor-grid {
+    display: grid; grid-auto-flow: column; justify-content: center; text-align: center;
+  }
+  .elementor-social-icon {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 44px; height: 44px; font-size: 22px; border-radius: 10%;
+    color: #ED6C00; cursor: pointer; transition: all 0.3s;
+  }
+  .elementor-social-icon i { color: #fff; }
+  .elementor-social-icon-linkedin { background-color: #0077b5; }
+  .elementor-social-icon-youtube { background-color: #cd201f; }
+  .elementor-social-icon-facebook { background-color: #3b5998; }
+  .elementor-screen-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
+
   /* ===== 首页 H4 硬件与服务系列 ×5（post-18.css 对应块；1436px 实测 2026-11-01）
    * 卡列：渐变 #F4F5F9→透明 + 1px #E0E5F9 边框 + 4px 圆角 + 列间 margin（ColumnNode 由 settings 渲染）；
    * 标题 widget 容器：底部橙线图背景（bottom center no-repeat）+ 左右 3rem 内边距；