7.8 KiB
7.8 KiB
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 | ⬜ |
| H4 | 硬件与服务系列 ×5 组 | 每组 heading+text+image+eael-info-box ×4(横向四列) | ⬜ |
| H5 | 可定制/易生产 双主张条 | heading ×2(双栏大字) | ⬜ |
| H6 | 从概念到量产 宣言条 | 全大写 heading(ACCELERATE YOUR IOT DEVICE LAUNCH…) | ⬜ |
| H7 | OS/芯片平台/语言/协议 四列 | heading ×4 图标列 | ⬜ |
| H8 | 热门嵌入式硬件 标题 | heading | ⬜ |
| H9 | 热门硬件切换器(html) | html widget(原站 JS 切换逻辑,需看原站行为) | ⬜ |
| H10 | 技术产品 Tab 行 ×3 | heading+image+image-box ×4+button(三段 Tab 面板) | ⬜ |
| H11 | Industries & Use Cases | heading + eael-adv-tabs + button(多标签竖排) | ⬜ |
| H12 | The Difference Maker 段一 | heading+text+icon-list+text+button(左侧列表优势) | ⬜ |
| 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 |
六、执行顺序(与用户确认后逐项推进)
- 首页自上而下:H1(公告滚动)→ H2…H19,每版块对照原站截图核验后交付 +patch。
- 产品分类列表页(2 类入口最多、复用公共组件最多)。
- 方案页/商城/产品详情/博客。
- 公司页(about-us 24 版块最后收拾)。
每完成一个版块:与原站同页同区截图对比 → 头less Chromium 验算 computed style → 版本号 +1。
七、已知遗留(非当前版块范围,后续版块收口)
| # | 现象(实测 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 进程 | 环境 | 记录 |