234 lines
27 KiB
Markdown
234 lines
27 KiB
Markdown
# 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（原站 elementor_library post 58） | ✅ v0.10.19 | `Footer.tsx`（ElementorRenderer 直出 46d7afa/d834160/28c7f0b8/a428bb4 + menu-2 移动菜单 + gtranslate 下拉） |
|
||
| G3 | 询价弹窗/表单（原站 Elementor popup 1129 + CF7 表单 604） | ✅ v0.10.20 | `InquiryPopup.tsx`（全局监听 popup 链接 + 弹窗 DOM + 表单提交入库） |
|
||
|
||
## 三、首页版块清单(自上而下,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(卡片 <a> 经 .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=<slug>-tab；标题 40px Poppins 居中、按钮 8390e24 设置驱动实测全等；随此版块修复:image-box 垂直对齐 content_vertical_alignment(middle→center,防 fig 被拉伸)、figure 内 <a> 块化(消 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 | Explore more DusunIoT news > | 83ecbc5:button 居中 | ✅ v0.10.18（随 H18 交付自然对齐:节 h 123 与原站全等(dy 0.8 页级漂移),按钮设置驱动（白底橙字描边,ButtonWidget 通用实现）。**首页内容树 H0-H19 全部完成**;原站 home 页另有 4 节(46d7afa/d834160/28c7f0b8/a428bb4)属页脚 Elementor 模板,已由 G2 v0.10.19 以原模板直出全覆盖） |
|
||
|
||
## 四、其他核心页型版块(自上而下,概览)
|
||
|
||
### 1. 产品归档/列表页（原站 /shop/，4 版块）
|
||
- C1 归档 hero：Elementor 模板 post 1398 的 a2ab15c（面包屑 Home / Shop，bg #F4F5F8）✅ v0.10.21
|
||
- C2 侧栏筛选：WPC Filter Everything（12 组属性复选、计数、See more、末三组折叠）✅ v0.10.21
|
||
- C3 商品网格：WooCommerce 归档 24 卡 4 列（图/标题/Read more，Elementor skin）✅ v0.10.21
|
||
- C4 排序 + 分页：orderby 下拉（默认 menu_order）、结果计数、页码/箭头分页 ✅ v0.10.21
|
||
- 说明：分类 URL（/product-category/*）在原站多数 301 到 landing-pages/*（Elementor 落地页，
|
||
归方案/落地页页型）；/shop/ 才是 WooCommerce 归档版块，已按模板 1398 直出 +
|
||
ShopFilters/ShopProducts 注入。筛选 URL 用查询参数（原站 WPC 为 /shop/type-som/ 美化链接），
|
||
术语顺序/计数来自导入数据（term taxonomy 顺序 + product_attribute_map 计数）。
|
||
|
||
### 1b. 落地页 /landing-pages/$slug（智能网关页已校对，v0.10.23 ✅ 桌面全对齐）
|
||
- 原站落地页为 post（如 smart-gateways legacy 6509）Elementor 直出，经 catch-all 路由渲染。
|
||
- smart-gateways 15 节桌面端全部与原站对齐（v0.10.23 复测：541ea84/49dcb11/dcfbe08/f9e27ce/
|
||
eb3462a/de5742a/9b87079/7c15af8/68babbb/028b4bc/5745b4f/2fee235/391a1ee/a36c301 逐节
|
||
高度 ≤1px；8e90920 按真实 JS 激活态 822.4 = 原站注入 active 后实测 822.4；页脚 590.5）。
|
||
- v0.10.23 修复：
|
||
- 391a1ee toggle 换成 Elementor 原生 DOM（默认全收起、h3 28/1/700、标题 1.125rem、
|
||
图标 caret-down/up 左浮动 1em+12px、item 间距 4、内容 .875rem、FAQPage JSON-LD），
|
||
桌面节高 496 / 移动 536 与原站全等；标题移动端响应式字号（1.5rem）补进
|
||
collectResponsiveCss。
|
||
- a36c301 内嵌模板：新增 scripts/import-embedded-templates.ts 导入 elementor_library
|
||
post 27143（slug=template-27143）；catch-all 路由扫描 `[elementor-template id="N"]`
|
||
短代码加载模板并注入渲染，同时预取 posts widget（多分类并集 53/54/703，发布时间倒序）。
|
||
- posts widget 按 widget-posts.min.css cards 皮肤重写：meta 移到 text 之后（border-top +
|
||
margin-top:auto）、badge 仅在有缩略图时渲染且绝对右上、缩略图 img 静态宽度 calc(100%+1px)、
|
||
比率/内距/字号/边框全部按设置内联；桌面 H18 卡片图高 220.6/187.9（原站 220.4/188.1）。
|
||
- 列 populated 宽度：新增 06632bb/3361c18/3317056/5938d26 的 auto 扣除规则（570 vs 580）。
|
||
- info-box：p 外距/颜色（eael_infobox_content_margin/color）、图标型 info-box
|
||
（eael_infobox_icon_new/icon_size，fa-check-circle 码位）、标题行高；
|
||
- 按钮：图标型按钮 wrapper 2px 行盒（原站 inline-block 基线导致 28px 高）。
|
||
- 已知数据差异：内嵌模板 posts 取本地快照（dump 2026-10-29），原站已新增 161855/161748
|
||
两篇（11-02/10-30），故卡片内容与原站当前列表不同；版式/卡片尺寸一致。
|
||
- 移动端待细化：EAEL tabs 原站 headless 未初始化无法直接取基线；posts 图片经由
|
||
srcset/medium 变体，个别卡片高度 ±5px。
|
||
|
||
### 2. 方案页
|
||
- S1 `/solution/` 列表入口页 v0.10.25 ✅ 一比一复刻原站 Elementor archive（widget 2da75291）：
|
||
hero #eee 120px（h1 40px/900 uppercase 居中）+ 卡片 grid 3/2/1 列 gap 28 + 缩略图 66%/50% 占位、
|
||
::after 黑 35%→75% 渐变（hover 1→0.5）+ 卡片阴影 0 0 10px（hover 30px）+ 标题 21px #ED6C00 +
|
||
摘录 14px/1.5 #777（24 词截断， 相连算一词）+ 分页（当前页 #FFA11B）；新增
|
||
/solution/page/N/ 分页路由与摘录/卡片数据（8 篇 excerpt 按原站回填）；桌面/平板/移动三断点
|
||
hero/卡片/分页几何差 ≤2px。
|
||
- S2 `/solution/$slug` 落地页 v0.10.25 ✅ 渲染器补齐：
|
||
- Renderer：populated 宽度改标准块级 auto（margin 收缩，6c765c4 卡列 272/272 精确）、
|
||
tabs 标题按 HTML 渲染、_css_classes 落到 section/column/class 上；
|
||
- page_css 导入管线（scripts/import-page-css.ts）：抓原站 post-<legacy_id>.css，把
|
||
.elementor-element-<id> 与 .ele-* 自定类规则翻译为 [data-el] 选择器存 meta.page_css，
|
||
ElementorRenderer 注入（补齐 dump 缺失的 widget 级 custom CSS，如 infobox 图 80px）；
|
||
- reviews 评价区重写为 Elementor 原生 reviews DOM（2 列 slide、79px 圆形头像、
|
||
星 14px #CCD6DF、职位 16px #697882、评价图 50% 居中）；
|
||
- Header 全断点对齐原站（topbar 36px/容器 1350/文字 16px、图标 36×36 gap10 顺序
|
||
Linkedin-Youtube-Facebook、无 Login；主导航容器 40/25、logo 后 80px、菜单序
|
||
Resources→Success Stories 修正、菜单项 pad 8/6 距 6、caret 16px、搜索 40×68、
|
||
CONTACT US/邮件/语言 48px；平板汉堡形态、移动 48px 导航+气泡）；菜单序为 DB 数据修正。
|
||
- 已知数据差异：smart-home-solution 原站 2026-10-16 改版新增内层版块（2faa053 等不在
|
||
dump 快照），9dc5c01 场景区较原站矮约 1540px，属快照滞后；其余 13 个落地页全部版块
|
||
齐全，逐节高度差 >15px 的多数为原站 headless lazy/swiper 未初始化假象。
|
||
- B1 `/blog/` 归档 v0.10.26 ✅ 一比一复刻原站 archive_cards 皮肤：缩略图 66% cover 盒、
|
||
右上角分类徽章 #FFA11B 圆角 999、标题 21px（margin 25）、摘录 24 词截断、Read More »、
|
||
meta（#EAEAEA 分隔线 + 作者/日期 12px #ADADAD）；/blog/page/N/ 分页路由；分页窗口算法
|
||
WP paginate_links（end 1/mid 2，两端组件共用）；数据源为 category-blog 归档。
|
||
- B2 `/blog/$slug` 文章详情 v0.10.26 ✅ single 模板复刻：hero（blog-tem-bg 背景图、
|
||
rgba(158,206,255,.1) 面板、h1 28px/600 白、摘要、updated/published 白色日期条、特色图）
|
||
+ 面包屑条（Home/Blog/标题）+ 三列正文（分享竖栏 60 / 正文 776 / 侧栏 360，容器 1200）；
|
||
侧栏 = 社交图标 + CONTACT US 表单 + IoT Gateways 折叠组；正文 Elementor 直出 +
|
||
pageCss + 图片 WP 尺寸变体解析（medium→-300x272 类文件，服务端目录扫描缓存）。
|
||
- page_css 导入扩展至全部文章：254 篇有 post-<id>.css 已导入，355 篇原站 404（无自定义 CSS）。
|
||
- 已知数据差异：/blog/ 本地 category-blog 302 篇（26 页）vs 原站当前 7 页（dump 后原站
|
||
调整了分类成员）；文章内文逐节高度仍有数据快照/lazy 假象差。
|
||
- P1 产品详情 `/product/$slug` v0.10.27 ✅ 产品单模板一比一（elementor_library 2741，从
|
||
legacy dump 补录入库 slug=product-template；内嵌模板 29972「IoT Gateways for
|
||
Recommendation」同步补录）：hero 图廊 484×617/标题/meta(Model/Category)/短描述精确、
|
||
数据标签页（Description 面板嵌产品自身 elementor 文档 + Additional information 属性表）、
|
||
相关产品 4 列、CF7 表单、posts 卡片（postsData/shortcodes 上下文）；产品 page_css 导入
|
||
130/138（8 篇原站 404）；ACF 规格书/popup 动态按钮落地（spec_url 非 URL 回退 /contact-us/）。
|
||
剩余差异：内嵌 CF7/推荐卡片区高 +350~364、产品文档内少数版块为原站 lazy 占位差。
|
||
|
||
### 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 表单→改造) | v0.10.24 ✅ hero 通栏+表单卡叠压；CF7 604 忠实复刻（两列字段/下拉/acceptance/reCAPTCHA/spinner 占位），提交走 submitInquiry；地址列 #F5F7FF+pin 图标+社交；桌面差 ≤2.3px、移动列差 ≤1px |
|
||
| 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` 例外。
|
||
>
|
||
> **G2 页脚取证(v0.10.19)**:原站页脚为 elementor_library post 58(两节 46d7afa/d834160 +
|
||
> 内嵌 28c7f0b8/a428bb4),导入脚本 `scripts/import-footer-template.ts` 从 legacy dump 取
|
||
> `_elementor_data` 写入 contents(type=template, slug=footer);快照之后的线上改动按线上
|
||
> post-58.css/DOM 补齐(f95e22e Google 徽章、405d251 width:auto、2481635 桌面外距)。
|
||
> 1436 实测(GTranslate 下拉已渲染、懒图已加载):页脚总高 590.4 两端一致,列宽
|
||
> 228/319.2/307.8/285、内层 615.6/171/193.8/159.6、logo 144.8×42.7、社交行 150×29、
|
||
> 下拉 202×39 全部全等;390 实测逐项全等(56/15/347/337/97/46.4/61)。
|
||
> 注意:原站 headless 下 WP Rocket 延迟加载 Elementor/jQuery,JS 组件(tabs/swiper)默认不初始化,
|
||
> 比对该类版块需先 `page.mouse.wheel` 或按线上真实状态换算,勿把"未初始化"当基线。
|
||
>
|
||
> **G3 询价弹窗取证(v0.10.20)**:全站 24 处 “Make an Inquiry”/按钮均为
|
||
> `#elementor-action:action=popup:open&settings={"id":"1129"}`(base64),对应 popup 1129,
|
||
> 内含 EAEL Contact Form 7(表单 604:Name/Company/Business email/Phone/Product/Interest/
|
||
> Annual Demand/Message + acceptance + reCAPTCHA 声明)。实现为全局 `InquiryPopup`:
|
||
> 文档级委托点击 → 渲染 Elementor 弹窗 DOM(遮罩 rgba(0,0,0,.8)、700px 白卡、close 20/20),
|
||
> 表单样式按 popup 生成 CSS(padding 2em 3em、字段 48%/31.3%、#C9CEE8 边框、textarea 134px、
|
||
> 按钮 #ED6C00→#FFA11B、圆角 10)与 EAEL 默认(input 8px 16px/高 42),提交走 submitInquiry
|
||
> (form_key=contact-form-1),成功显示 CF7 原文提示;弹窗内社交图标 5 个(20px/间距 14/品牌色)。
|
||
> 实测 1436:白卡 700×737 居中、两列 289.9/三列 189、消息框 604×153;390:宽 390、p5/p6 两列、
|
||
> p7 全宽,与 popup 自定义 CSS 一致;提交入库验证后已清理测试数据。
|
||
>
|
||
> **C1-C4 产品归档取证(v0.10.21)**:原站 /shop/ 使用 archive 模板 post 1398
|
||
> （scripts/import-shop-template.ts 导入 contents slug=shop-archive），/collection/ 路由直出
|
||
> 模板外壳并注入 ShopFilters（widget 98d2008）/ShopProducts（d761846）。1436 实测:
|
||
> hero 52.8、shop 节 2906.7（左列 275.2/右列 1100.8、列高一致）、筛选区 2798.7（12 组，
|
||
> 标题 44/灰底、行高 20.8、组距 32；CPU/OS/Interface/RAM/Flash 默认 5 项 + See more，
|
||
> Battery/Operating/Install 默认折叠）、H1 24/600、结果计数“Showing 1–24 of 138 results”、
|
||
> 商品网格 2523.3（24 卡 4 列 gap 10，卡 257.7×409）、分页 y2855 margin-top 40；
|
||
> 筛选 SoM → 22 条、排序 date、See more 5→17、分页 page2 均通过。默认排序改为
|
||
> products.meta.menu_order（scripts/import-product-menu-order.ts），术语顺序改为
|
||
> taxonomy 顺序（scripts/import-attribute-term-order.ts）。
|
||
|
||
## 七、已知遗留(非当前版块范围,后续版块收口)
|
||
|
||
| # | 现象(实测 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 进程 | 环境 | 记录 |
|
||
| 5 | 内嵌模板文章列表取 dump 快照,原站新增文章(161855/161748)尚未导入,卡片内容不同步(版式一致) | 内容数据 | 中 |
|
||
| 6 | posts 卡片移动端个别卡高 ±5px(原站 srcset 选 768/medium 变体,本地用原图;宽高比略有差异) | posts widget | 低 |
|
||
| 7 | dev 脚本须用 `bun --bun vite dev`:纯 node 下 Vite module-runner 无法解析 Bun 内置模块;vite.config 已把 "bun"/node:* 标记为 ssr builtins | 环境 | 记录 |
|