v0.10.8 首页 H6 宣言条 + H7 四列图标卡 1:1:section 根 padding/列 gap 默认 populated padding(10px 全向)/WidgetNode 双层 el-w-auto 修复 width:100% 强推;EAEL 取证改以原站实际加载的 eael-18.css 为准(icon/content 默认 block、title width:max-content maxW100%);H2~H7 全量 computed 归零(仅 0.8px 页级漂移),清理被取代的 scoped 补丁

docs/sections-inventory.md

@@ -38,9 +38,9 @@
 | H2 | 产品线入口 ×6 | image-box ×6(6 条产品线图标卡) | ✅ v0.10.5（图片上方图标+标题 16px/400/#333、figure 30% 宽、hover 亮度 90%、五列右侧 v-line 竖线、列 10px 内边距、≤767 50% 两列；ImageBoxWidget 重构为 Elementor 忠实 DOM 供 H13/about 复用） |
 | H3 | 「Dusun Hardware & Service」标题条 | heading | ✅ v0.10.6（Poppins®600/40px/48 行高/#000 居中、widget 底 padding 24px、section 上 padding 64px；Poppins 与原站一致走系统 fallback 不载字体文件；typographyCss/_padding/resolveGlobals 修复基建） |
 | H4 | 硬件与服务系列 ×5 组 | 每组 heading+text+image+eael-info-box ×2(五列卡组) | ✅ v0.10.7（heading 橙线下划线/20px/#333、text-editor BFC 62.4、image widget link/shrink 动画、eael-info-box icon-on-left 完整结构、列卡渐变+边框+margin 折叠(实测 sec 529.6/列 513.6/inf2 y1429.4 与原站一致)；WidgetNode 双层容器(elementor-widget + widget-container)对齐原站 margin 折叠语义) |
-| H5 | 可定制/易生产 双主张条 | heading ×2(双栏大字) | ⬜ |
+| H5 | 可定制/易生产 双主张条 | heading ×2(双栏大字) | ✅ v0.10.7（long-arrow 背景条、列 380、文字 20px/500/#fff 单行、arrow 194×39） |
-| H6 | 从概念到量产 宣言条 | 全大写 heading(ACCELERATE YOUR IOT DEVICE LAUNCH…) | ⬜ |
+| 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 图标列 | ⬜ |
+| 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 切换逻辑,需看原站行为) | ⬜ |
 | H10 | 技术产品 Tab 行 ×3 | heading+image+image-box ×4+button(三段 Tab 面板) | ⬜ |
@@ -113,6 +113,12 @@ cookie-policy:19 段纯文本。
 4. **公司页**(about-us 24 版块最后收拾)。
 
 > 每完成一个版块:与原站同页同区截图对比 → 头less Chromium 验算 computed style → 版本号 +1。
+>
+> 取证基建补充(v0.10.8):原站 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%
+> + `_element_width:auto` 例外。
 
 ## 七、已知遗留(非当前版块范围,后续版块收口)
 

package.json

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

src/components/elementor/Renderer.tsx

@@ -282,18 +282,20 @@ function collectResponsiveCss(elements: ElElement[]): string {
   return css;
 }
 
-/** # 组件 单个元素节点分发（section/column/container/widget） */
+/** # 组件 单个元素节点分发（section/column/container/widget）
-function ElementNode({ el }: { el: ElElement }) {
+ * 参数 gapPad 所属 section 的默认列内边距（Elementor gap 档位，仅 column 消费）
+ */
+function ElementNode({ el, gapPad }: { el: ElElement; gapPad?: string }) {
   const type = s(el.elType);
   if (type === "widget") return <WidgetNode el={el} />;
   if (type === "section" || type === "container") return <SectionNode el={el} />;
-  if (type === "column") return <ColumnNode el={el} />;
+  if (type === "column") return <ColumnNode el={el} gapPad={gapPad} />;
   // 未知结构：有子元素则递归，否则忽略
   if (el.elements?.length) {
     return (
       <>
         {el.elements.map((c, i) => (
-          <ElementNode key={c.id || i} el={c} />
+          <ElementNode key={c.id || i} el={c} gapPad={gapPad} />
         ))}
       </>
     );
@@ -303,23 +305,29 @@ function ElementNode({ el }: { el: ElElement }) {
 
 /** # 组件 section / container：背景 + 内部布局
  * 取证（原站实测/post CSS）：boxed 内容容器 = margin auto + flex wrap 的定宽行；
- * 内容宽度 content_width 优先，否则沿用 Elementor kit 默认 1140px；
+ * 内容宽度 content_width 优先，否则沿用 Elementor kit 默认 1140px。
- * 自带 padding 只取 settings.padding（不再叠加通用 px/py）。
+ * padding 挂在 section 根（原站 computed padding 在 .elementor-section 上，行容器无 padding，
+ * 根 padding 同时把行往内推：1436 视口 + 1.6px 侧 padding 时行仍为整宽 1360，实测一致）。
+ * gap 档位决定子列的默认 populated padding（frontend.min.css：no 0 / narrow 5 / default 10 /
+ * extended 15 / wide 20 / wider 30；settings 缺省 = default）。
  */
+const GAP_PAD: Record<string, string> = {
+  no: "0px", narrow: "5px", default: "10px", extended: "15px", wide: "20px", wider: "30px",
+};
 function SectionNode({ el }: { el: ElElement }) {
   const settings = resolveGlobals(el.settings || {});
   const style = sectionBgStyle(settings);
   const width = sizeCss(settings.content_width) || sizeCss((settings as Record<string, unknown>).width) || "1140px";
+  const secPad = paddingCss(settings.padding);
+  if (secPad) style.padding = secPad;
   const inner: CSSProperties = {};
   if (s(settings.layout) === "full_width") {
-    // 通栏 section：内容不设上限、无内边距（如首页 hero 轮播）
+    // 通栏 section：内容不设上限（如首页 hero 轮播）
     inner.maxWidth = "none";
-    inner.padding = "0";
   } else {
     inner.maxWidth = width;
-    const innerPad = paddingCss(settings.padding);
-    if (innerPad) inner.padding = innerPad;
   }
+  const gapPad = GAP_PAD[s(settings.gap) || "default"] || "10px";
   // section 高度模式（Elementor: min-height / full），配合 custom_height；
   // 取证（原站 09fe4b7 实测）：height 未设置时 custom_height 不生效（min-height 0px），
   // 故仅在显式 height 模式下应用
@@ -331,7 +339,7 @@ function SectionNode({ el }: { el: ElElement }) {
     <section style={style} data-el={el.id}>
       <div className="mx-auto flex flex-wrap" style={inner}>
         {(el.elements || []).map((c, i) => (
-          <ElementNode key={c.id || i} el={c} />
+          <ElementNode key={c.id || i} el={c} gapPad={gapPad} />
         ))}
       </div>
     </section>
@@ -342,8 +350,11 @@ function SectionNode({ el }: { el: ElElement }) {
  * 外层参与 flex 布局（按 _inline_size 百分比否则均分），不承载盒样式；
  * 内层承载 populated 的盒样式：_margin（margin，移动卡片间距且不影响 flex 宽度，与原站一致）、
  * padding、背景、边框、圆角。
+ * padding：列自带 settings.padding 优先；否则用所属 section 的 gap 默认值
+ * （frontend.min.css .elementor-column-gap-default > … > .elementor-element-populated{padding:10px}，
+ * 实测 H6 列 59bc2e1 四向 10px、H7 列 66de90a 设置覆盖为 8/16/16/0，两端一致）。
  */
-function ColumnNode({ el }: { el: ElElement }) {
+function ColumnNode({ el, gapPad }: { el: ElElement; gapPad?: string }) {
   const settings = resolveGlobals(el.settings || {});
   const outer: CSSProperties = { minWidth: 0, flex: "1 1 0" };
   const inline = settings._inline_size;
@@ -359,8 +370,7 @@ function ColumnNode({ el }: { el: ElElement }) {
     inner.width = "100%";
     inner.margin = mg;
   }
-  const pad = paddingCss(settings.padding);
+  inner.padding = paddingCss(settings.padding) || gapPad || "10px";
-  if (pad) inner.padding = pad;
   const bg = sectionBgStyle(settings);
   Object.assign(inner, { backgroundColor: bg.backgroundColor, backgroundImage: bg.backgroundImage });
   const radius = paddingCss(settings.border_radius);
@@ -375,9 +385,9 @@ function ColumnNode({ el }: { el: ElElement }) {
   }
   return (
     <div className="el-col min-w-0" style={outer} data-el={el.id}>
-      <div className="px-2.5" style={inner}>
+      <div style={{ display: "flex", flexWrap: "wrap", alignContent: "flex-start", width: "100%", ...inner }}>
         {(el.elements || []).map((c, i) => (
-          <ElementNode key={c.id || i} el={c} />
+          <ElementNode key={c.id || i} el={c} gapPad={gapPad} />
         ))}
       </div>
     </div>
@@ -421,16 +431,22 @@ function WidgetNode({ el }: { el: ElElement }) {
       <WidgetNodeInner el={el} />
     </WidgetGuard>
   );
+  // 原站 .elementor-widget-wrap > .elementor-element { width:100% }:
+  // widget 默认满宽(flex wrap 中独占一行),_element_width=auto 时按内容宽(横排)
+  const widthAuto = s(settings._element_width) === "auto";
   const cls = s(settings._css_classes) || undefined;
+  const baseCls = cls ? (widthAuto ? cls + " el-w-auto" : cls) : widthAuto ? "el-w-auto" : undefined;
   const hasContainerStyle = Object.keys(style).length > 0;
   if (hasContainerStyle) {
     return (
-      <div data-el={el.id}>
+      // 外层也要带 el-w-auto：列内基础规则按 :not(.el-w-auto) 放行 width:auto 的根,
-        <div className={cls} style={style}>{inner}</div>
+      // 否则 width-auto widget(如图标)被 width:100% 强推成每行一个(H7 回归根因)
+      <div className={widthAuto ? "el-w-auto" : undefined} data-el={el.id}>
+        <div className={baseCls} style={{ width: widthAuto ? "auto" : "100%", ...style }}>{inner}</div>
       </div>
     );
   }
-  return <div className={cls} data-el={el.id}>{inner}</div>;
+  return <div className={baseCls} style={{ width: widthAuto ? "auto" : "100%" }} data-el={el.id}>{inner}</div>;
 }
 
 /** # 组件 单个 widget 渲染错误边界：异常 widget 降级为空，不拖垮整页 */

src/components/elementor/slim.ts

@@ -102,6 +102,8 @@ const SETTING_KEYS = new Set([
   "hover_animation",
   // widget 高级盒模型（如 eael-info-box 边框卡：_border_* + _padding/_margin）
   "_margin",
+  // widget 宽度模式（auto → 按内容宽横排，如 H7 图标行）
+  "_element_width",
   // widget 容器背景（如 H4 标题下的橙线图）
   "_background_image",
   "_background_position",

src/styles/app.css

@@ -261,7 +261,7 @@
     background-repeat: no-repeat;
     background-position: center right;
   }
-  [data-el="e38a898"] > div > [data-el] > div { padding: 10px; }
+  /* 六列的 10px 内边距由列 gap 默认 padding 通用逻辑提供(ColumnNode),此处不再重复 */
   [data-el="e38a898"] .el-imagebox-img { width: 30%; }
   [data-el="e38a898"] .el-imagebox:hover .el-imagebox-img img {
     filter: brightness(90%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
@@ -280,7 +280,8 @@
    * text-editor：display flow-root 建立 BFC（子元素 p 的下外距计入容器高度，与原站
    * 实测 62.4 = 2 行 48 + p margin 14.4 一致），p 下外距 0.9em（原站 hello 环境 14.4px）。
    */
-  .el-col > div > [data-el]:not(:last-child) { margin-bottom: 20px; }
+  .el-col > div > [data-el]:not(.el-w-auto) { width: 100%; }
+  .el-col > div > [data-el]:not(:last-child):not(.el-w-auto) { margin-bottom: 20px; }
   .el-texteditor { display: flow-root; }
   .el-texteditor p { margin: 0 0 0.9em; }
 
@@ -298,21 +299,20 @@
   .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); }
 
-  /* ===== EAEL infobox 基础（info-box.min.css 对应块）：
+  /* ===== EAEL infobox 基础（取证：原站实际加载 uploads/essential-addons-elementor/eael-18.css，
-   * 图在左为 flex 行；内容列 padding-left 15px；标题行高 1（margin 由页面级覆盖）；
+   * 并未加载 view/info-box.min.css——后者仅在带 content-align--* 修饰类时才给 icon/content 上 flex，
-   * 图标列垂直居中。
+   * 本站 infobox 只有 icon-on-left 类，故 icon/content 均为默认 block、img 默认 inline 32×32；
+   * 2026-11-01 原站样式表命中探针实测）
+   * box 为 flex 行；内容列 padding-left 15px + flex item；title-section 纵向 flex。
    */
   .eael-infobox.icon-on-left { display: flex; position: relative; }
   .eael-infobox.icon-on-left .infobox-content { padding-left: 15px; flex: 1 1 auto; min-width: 0; }
-  .eael-infobox .infobox-icon {
-    display: flex; justify-content: flex-start; align-self: center;
-    /* flex 行内拉伸：H4 实测 icon 容器 39px(img 32px + 7px 排版余量)，
-     * 与 .eael-infobox 盒 42px 对齐 */
-  }
   .eael-infobox .infobox-icon img { transition: all 300ms ease-in-out 0s; }
-  .eael-infobox .infobox-content { display: flex; flex-direction: column; justify-content: center; }
   .eael-infobox .infobox-content .infobox-title-section { display: flex; flex-direction: column; }
-  .eael-infobox .infobox-content .title { line-height: 1; }
+  .eael-infobox .infobox-content .infobox-title-section .title {
+    width: max-content; max-width: 100%; overflow-wrap: break-word; word-break: break-word;
+  }
+  .eael-infobox.icon-on-left .infobox-content .title { line-height: 1; margin: 0 0 10px 0; }
   .eael-infobox .infobox-content p { margin: 0 0 15px; }
 
   /* ===== 首页 H4 硬件与服务系列 ×5（post-18.css 对应块；1436px 实测 2026-11-01）
@@ -329,14 +329,15 @@
   [data-el="7c9ceeb"] .infobox-icon, [data-el="9ff518a"] .infobox-icon,
   [data-el="2c9eb1c"] .infobox-icon, [data-el="1aa62bd"] .infobox-icon,
   [data-el="64432f0"] .infobox-icon, [data-el="2ba29de"] .infobox-icon {
+    align-self: center;
     margin: 3px 0 0 0;
     height: 39px;
   }
-  [data-el="314b8d5"] .infobox-content .title, [data-el="8417167"] .infobox-content .title,
+  [data-el="314b8d5"] .eael-infobox .infobox-content .title, [data-el="8417167"] .eael-infobox .infobox-content .title,
-  [data-el="9e1009f"] .infobox-content .title, [data-el="2032426"] .infobox-content .title,
+  [data-el="9e1009f"] .eael-infobox .infobox-content .title, [data-el="2032426"] .eael-infobox .infobox-content .title,
-  [data-el="7c9ceeb"] .infobox-content .title, [data-el="9ff518a"] .infobox-content .title,
+  [data-el="7c9ceeb"] .eael-infobox .infobox-content .title, [data-el="9ff518a"] .eael-infobox .infobox-content .title,
-  [data-el="2c9eb1c"] .infobox-content .title, [data-el="1aa62bd"] .infobox-content .title,
+  [data-el="2c9eb1c"] .eael-infobox .infobox-content .title, [data-el="1aa62bd"] .eael-infobox .infobox-content .title,
-  [data-el="64432f0"] .infobox-content .title, [data-el="2ba29de"] .infobox-content .title {
+  [data-el="64432f0"] .eael-infobox .infobox-content .title, [data-el="2ba29de"] .eael-infobox .infobox-content .title {
     color: #4d4d4d;
     font-size: 14px;
     margin: 7px 0 0 -10px;
@@ -358,12 +359,53 @@
     }
   }
   @media (max-width: 767px) {
-    [data-el="9ff518a"] .infobox-content .title, [data-el="2c9eb1c"] .infobox-content .title,
+    [data-el="9ff518a"] .eael-infobox .infobox-content .title, [data-el="2c9eb1c"] .eael-infobox .infobox-content .title,
-    [data-el="1aa62bd"] .infobox-content .title, [data-el="64432f0"] .infobox-content .title,
+    [data-el="1aa62bd"] .eael-infobox .infobox-content .title, [data-el="64432f0"] .eael-infobox .infobox-content .title,
-    [data-el="2ba29de"] .infobox-content .title {
+    [data-el="2ba29de"] .eael-infobox .infobox-content .title {
       margin: 7px 0 0 -6px;
     }
   }
+
+  /* ===== 首页 H6 宣言条(post-18.css 对应块;1436 实测 2026-11-01)
+   * 标题排版(Poppins 24px/600/行高 1,≤767 20px)由 DB typography 内联提供,
+   * 列 59bc2e1 的四向 10px 由 gap 默认 padding 通用逻辑提供;
+   * 此处仅保留 post-18 的 text-align:center 与移动端字号覆盖(需 !important 压过内联 24px)。
+   */
+  [data-el="e50246d"] { text-align: center; }
+  @media (max-width: 767px) {
+    [data-el="e50246d"] .el-heading-title { font-size: 20px !important; }
+  }
+
+  /* ===== 首页 H5 双主张条(post-18.css 对应块;1436 实测 2026-11-01)
+   * 大列 b504916 的 wrap 即视觉条:long-arrow.png(1353×54)居中不重复(settings padding 全 0);
+   * 中列 f158695 与两侧列的 padding 由 settings/gap 默认逻辑提供;列宽 380(structure 30 三列);
+   * 文字 20px/500/#FFF 居中。
+   */
+  [data-el="b504916"] > div {
+    background: url("/uploads/2023/09/long-arrow.png") 50% 50% no-repeat;
+  }
+
+  /* ===== 首页 H7 OS/芯片平台/语言/协议 四列(post-18.css 对应块;1436 实测)
+   * 外卡 66de90a:渐变 #F4F5F9→透明 + 1px #E0E5F9 边框 + 4px 圆角 + padding 8/16/16/0;
+   * 内四列 b99f434/c8bd50b/821fd51 右侧虚线分隔(dashed #E0E5F9),列 padding-top 16px;
+   * ≤767 分隔虚线改下边框,section 左右 padding 1rem。
+   */
+  [data-el="66de90a"] > div {
+    background: linear-gradient(180deg, #F4F5F9 0%, rgba(244, 245, 249, 0) 100%);
+    border: 1px solid #E0E5F9;
+    border-radius: 4px;
+    padding: 8px 16px 16px 0;
+  }
+  [data-el="b99f434"] > div, [data-el="c8bd50b"] > div, [data-el="821fd51"] > div {
+    border-right: 1px dashed #E0E5F9;
+  }
+  @media (max-width: 767px) {
+    [data-el="b99f434"] > div, [data-el="c8bd50b"] > div, [data-el="821fd51"] > div {
+      border-right: 0;
+      border-bottom: 1px dashed #E0E5F9;
+    }
+    [data-el="338fb86"] { padding-inline: 1rem; }
+  }
 }
 
 @media (max-width: 900px) {