dusuniot/docs/sections-inventory.md

Dusun IoT 复刻 · 页面类型与版块清单

目标:以「页面类型 → 版块(自上而下)」为单位 1:1 复刻 dusuniot.com,一个版块一个版块做, 不一次做整页。每版块验证后交付一次版本号 +patch。

状态图例: ✅ 已按原站逐像素对齐(有截图对照) | 🟡 有基础渲染但未对齐原站 | ⬜ 未做 | ⚪ 纯文本页,优先级低

一、页面类型清单(共 10 类)

#	页面类型	路由(对本站)	原站对应	版块数	数据来源
1	首页	/	/	20	DB contents slug=home 的 Elementor 树
2	产品分类列表/落地页	/collection/$slug	/smart-gateways/ /product-category/… 等约 60 个入口	4(落地主题区…侧栏筛选…)	分类(16 个 product_cat)+ 同 slug 落地文
3	方案页	/solution/ 与 /solution/$slug	/solution/ 及各方案营销页	列表页 + 落地页(每页自定)	posts(solution 分类)+ /solution/ 页
4	商城列表	/shop/	/shop/	WordPress 模板	products 表
5	产品详情	/product/$slug	/product/…	WooCommerce 模板	products 表
6	博客	/blog/ 与 /blog/$slug	/blog/	WordPress 模板	posts 表(639 篇)
7	公司/品牌页 ×7	—	about-us / research-development / certification / after-sales-service / faq / distributor / login	2~24 各异	各自 Elementor 树
8	合规/法务页 ×4	—	privacy-policy / terms-of-service / refund_returns / cookie-policy	1~2(富文本)	各自 Elementor 树
9	商务流程页 ×4	cart / checkout / my-account / search	站内功能	—	carts / orders
10	管理后台	admin.*	(本项目新增,不属复刻)	—	—

二、通用版块(全局组件)

#	版块	状态	组件
G1	顶部导航 Header(含 mega menu、语言切换)	✅ v0.10.3	Header.tsx
G2	页脚 Footer	🟡	Footer.tsx
G3	询价弹窗/表单	🟡	InquiryForm.tsx

三、首页版块清单(自上而下,20 版块)

#	版块名(取标题)	内容(Widget 组成)	状态
H0	Banner 轮播	slides ×4(Swiper,fadeInUp 内容、5000ms 自动播)	✅ v0.10.3
H1	公告滚动条	eael-content-ticker	✅ v0.10.4（badge 18px/600、内容 #222 hover #ED6C00、fade 200ms/5000ms、1300px 容器、bg #F4F5F8，数据取最新 3 产品）
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(双栏大字)	✅ v0.10.7（long-arrow 背景条、列 380、文字 20px/500/#fff 单行、arrow 194×39）
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 图标列	✅ v0.10.8（外卡 66de90a 渐变+边框+圆角 8/16/16/0、四列 335.5 虚线分隔、_element_width:auto 图标横排 4+3 换行、el-w-auto 双层类修复 width:100% 强推回归）
H8	热门嵌入式硬件 标题	heading(Popular Embedded Hardware Products…)	✅ v0.10.9（heading 40px/600/#000/行高 1 居中 x38/w1360；section 7df0244 gap=no→列 0px、margin-top 4%=57.4375px、bg #F4F5F8、padding 64px 0——section 级 margin/gap 渲染支持随此版块落地，slim 白名单补 gap）
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)	✅ 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 供应商主张条	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 多次测量间漂移,以节内相对坐标为准）
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 ×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	8bc6b68:左 posts 卡×2(3025217)+右 Latest blogs>>标题(1c96d68)+posts 列表×5(a22c185)	✅ v0.10.18（双端节内几何/样式全等(sec 521):左 skin-cards grid 335×2/gap 16 10、卡 520 高(custom_css .ele-post-dif)、缩略图比率 0.66×内宽+img 铺满、NEWS 徽章(uppercase/白 70%/12px/圆角 4,绝对右上)、标题 18/400/#000+mb16、日期 F j,Y/#ADADAD/padding 10 12、摘要 18 词/#767676/底距 44(空摘要回退正文 18 词);右列卡 grid 630、卡 bg #F4F5F8/圆角 3、纯标题 44px 两行钳制+右侧箭头图标(custom_css);Latest blogs>> 标题 24px+#E0E5F9 下划线+橙线图背景;随此版块:PostsWidget 忠实重写(PostsDataContext 预取架构:loader 按 widget 收集 posts_include_term_ids→listPostsByTermLegacy)、posts cards 基础 CSS、slim 白名单 cards_* 全键、数据修复 scripts/repair-content-terms.ts(从 legacy dump wp_term_relationships 补 1162 条分类关联,Blog 302/News 22——原导入仅 61/609 篇有关联)）
H19	定制 CTA	button(大按钮)	⬜

四、其他核心页型版块(自上而下,概览)

1. 产品分类列表/落地页(4 版块)

• C1 落地主题区(同 slug 文章 Elementor 直出,每类内容不同)
• C2 侧栏:分类树 + 属性复选筛选(URL search 驱动)
• C3 产品网格(ProductCard ×24)
• C4 分页

2. 方案页

• S1 /solution/ 列表入口页
• S2 /solution/$slug 落地页:与首页同款 Elementor 直出,版块逐页不同

3. 商城/产品/博客(WordPress 模板页)

• SH1 商城:/shop/ 分类+商品网格
• P1 产品详情:标题、参数表、图集、询价 CTA(依原站 Woo 模板)
• B1 /blog/ 列表:卡片+分页
• B2 /blog/$slug 详情:正文渲染(WP 样式)

4. 公司/品牌页

Slug	标题	顶层版块概览	备注
about-us	About Dusun IoT	24 版块:hero 图集、视频区、4 项数据 counter、里程碑、认证/展会/研发/语言能力等	最重的一页
research-development	Research & Development	5:标题、视频、info-box ×3+3、info-box ×9
certification	Certification	2:文案+按钮;html ×2(证书大全)
after-sales-service	After Sales Service	2:标题;目录+文本长块(table-of-contents)
faq	FAQs	2:标题;目录+10 组 toggle 手风琴
contact-us	Contact Us	1:标题+地图/联系方式 ×9 列表+社媒+表单(CF7 表单→改造)
distributor	Distributor	2:图+文+按钮;图区
login	Login	1:登录注册表单

5. 合规页(⚪ 只需 WP 正文样式统一)

privacy-policy / terms-of-service / refund_returns:标题+目录+正文。 cookie-policy:19 段纯文本。

五、复用组件策略(一批版块落下后沉淀)

组件	首次出现	复用页
SectionTitle(中/左对齐大标题规范)	H3	H8/H11/H14/H17、分类/方案/博客各页
IconBoxGrid(eael-info-box 四列)	H4	H14、R&D、分类落地页
ImageBoxGrid(image-box 卡片行)	H2	H13、about、distributor
MediaTextRow(图+文+按钮左右组合)	about [5]	about、recru-letter、distributor
LogoWall(灰度 Logo 行)	H15	about
TabsRow / AdvTabs(左标签+右面板)	H10/H11	分类落地页
PostCardGrid(posts widget 列卡)	H18	博客列表、分类页尾部
CTAButton(红/描边大按钮,含 hover)	H19	全站尾部 CTA
TickerBar(滚动公告)	H1(v0.10.4 已落地 src/components/website/TickerBar.tsx)	全站头部下方
CounterStats(数字滚动统计)	about [3]	方案页
VideoEmbed(视频框)	about [2]	R&D
TocText(目录+层级文本,合规/售后页共用)	after-sales	terms、privacy、cookie

六、执行顺序(与用户确认后逐项推进)

1. 首页自上而下:H1(公告滚动)→ H2…H19,每版块对照原站截图核验后交付 +patch。
2. 产品分类列表页(2 类入口最多、复用公共组件最多)。
3. 方案页/商城/产品详情/博客。
4. 公司页(about-us 24 版块最后收拾)。

每完成一个版块:与原站同页同区截图对比 → 头less Chromium 验算 computed style → 版本号 +1。

取证基建补充(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%

• _element_width:auto 例外。

七、已知遗留(非当前版块范围,后续版块收口)

#	现象(实测 2026-11-01,1436/390px 视口)	归属	优先级
1	移动端(≤767px)Header 高度差 ~21px(原站 slides y=88,本地 109)	G1 Header 移动端	中
2	移动端 H1 ticker 高度差 ~14px(原站 117,本地 131.2)	H1 ticker 移动端	中
3	全局 a:hover 为 --brand-dark(#c85600),kit 全局 secondary 是 #FFA11B	G1/全局样式	低
4	PG 连接曾被 stale vite dev 进程(3311 端口)泄漏占满(290 连接),已清理;重复发生时检查残留 dev 进程	环境	记录