bigcode
1c190d00ca
- AdvTabsWidget: 忠实 EAEL DOM(li id/data-tab/aria-controls/aria-expanded)+ React 点击切换, active/inactive 类、内容面板 id=<slug>-tab;标题字体 Roboto - H12 scoped 生成规则: li bg #F4F5F8 + 底边 3px(默认同背景色,active/hover #ED6C00), 内容面板 color #333 + padding 16px 0 0 + 顶边 1px #C7CBDA(li 高 59 与原站全等) - image-box 修复: content_vertical_alignment 设置驱动 wrapper align-items(middle→center, 防 fig 被 flex stretch 拉高 2px);figure 内 <a> 块化消行盒下伸;ec11f3f 图宽 30% 仅存于 post-18 生成 CSS,DB 无对应键,scoped 补规则 - 审计方法修正: 先滚动全页触发 lazy 图加载再测量(视口外 lazy 图曾致 H11 虚假 -82.2px) - 实测 H0-H12 全部 section 高度与原站全等,页级漂移 0.8px;截图目视一致;点击切换正常
131 lines
12 KiB
Markdown
131 lines
12 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 | 🟡 | `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(卡片 <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 产品卡 ×6 | image-box ×6 | ⬜ |
|
||
| H14 | Why Choose Dusun IoT | heading + eael-info-box ×4 | ⬜ |
|
||
| H15 | Trusted By 世界领先品牌 | heading + image ×11(Logo 墙) | ⬜ |
|
||
| H16 | Developer Ecosystem | heading ×4+text+button+image+social-icons(左右两卡) | ⬜ |
|
||
| H17 | News & Updates 标题 | heading | ⬜ |
|
||
| H18 | 最新博文 *2 | posts widget ×2(标题行 + 列卡) | ⬜ |
|
||
| 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 进程 | 环境 | 记录 |
|