v0.10.5 首页 H2 产品线入口 ×6:ImageBoxWidget 重构为 Elementor 忠实 DOM + slim 白名单补齐 + H2 scoped CSS(post-18 对齐,桌面/移动/hover 实测一致)

docs/dusuniot-rebuild-tanstack-bun-pg-v2.md

@@ -0,0 +1,167 @@
+# DusunIoT WordPress 重构开发方案 V2
+
+> 状态：开发规划。基于 `dusuniot-website-stability-and-multilingual-brief.md` 和重构决策编写。
+> 核心原则：前台 1:1 还原，后台功能等价实现，底层用 Bun 单体替换 WordPress。
+
+## 1. 目标与边界
+
+- 将现有 WordPress + Elementor + WooCommerce + GTranslate 迁移到 **TanStack Start + Bun + PostgreSQL**。
+- **前台必须 1:1 还原**现有网站的视觉、响应式布局、内容、导航、产品筛选和实际交互；不要求复刻 WordPress/Elementor 的内部 DOM 或代码。以采集时的线上页面与截图为视觉基准。
+- **后台使用 React + Ant Design**，还原现有实际使用的业务功能，不要求与 WordPress 后台界面一致；不开发插件系统、Elementor 克隆或 WordPress 兼容运行环境。
+- **后台图标强制规范：只能使用 SVG 图标**（优先 Ant Design Icons SVG 或 Lucide React）。**禁止 Emoji、Unicode 特殊符号/特殊字体、Icon Font、字体图标、文字字符冒充图标**。菜单、按钮、提示、状态、空页面、表格操作、Dashboard 图标全部适用。图标要有可访问名称，装饰性图标 aria-hidden。
+- 单体项目同时提供 SSR、服务端 API / Server Functions、后台与定时任务；不引入 Go、PHP、微服务；PostgreSQL 为主数据库。
+- 保留 Cloudflare，按实际部署情况使用 Nginx/CDN 缓存；文件存储可用本地或 S3/R2。
+- 不以“更换技术栈”替代故障归因；现有 WordPress CPU 高负载、数据库权限撤销、筛选器和 GTranslate 回源等问题，仍需采集基线和证据。
+
+## 2. 技术栈
+
+| 领域 | 选型 |
+| --- | --- |
+| 前台 SSR / 路由 | TanStack Start + React + TypeScript |
+| 运行时和包管理 | Bun |
+| 业务 API | TanStack Start Server Functions / 服务端路由（对外接口） |
+| 数据库 | PostgreSQL |
+| SQL / 迁移 | Drizzle ORM + SQL 索引、事务 |
+| 后台 UI | React + Ant Design |
+| 前台样式 | 以原站 CSS 和视觉结果为基准，按需 Tailwind CSS |
+| 缓存 | Cloudflare + Nginx + 服务端缓存，按用户态区分 |
+| 图片与文档 | 本地对象目录或 S3/R2 |
+| 测试 | Playwright 截图对比 + E2E；Vitest 单元/集成测试 |
+| 图标 | SVG only（Ant Design Icons / Lucide） |
+
+生产环境要先验证 TanStack Start 与所选 Bun/Nitro 构建、SSR、Server Functions、流式响应及部署版本的兼容性，锁定经过测试的依赖版本。
+
+## 3. 功能还原范围
+
+### 前台：必须达到 1:1
+
+- 页面类型：首页、产品列表和详情、产品分类/筛选、文章/新闻、Landing Page、公司/联系页面、搜索和现有其他公开模板。
+- 还原 Header、Footer、导航及菜单、Banner、卡片、字体、颜色、边距、栅格、图片比例、动画、交互、移动端和平板布局。
+- 保留询盘表单的字段、验证、提交流程、通知；保留客户注册/登录、购物车、结账、订单查询及原站实际启用的支付/物流/税费规则。
+- 采集原站各页面样板和三类屏幕尺寸；通过 Playwright 截图差异及人工审核验收，不能仅以 DOM 或代码相同为标准。
+- 仅迁移实际使用的功能，不复制与业务无关的 WordPress 插件能力。
+
+### 后台：功能等价，界面重新设计
+
+使用 Ant Design 建立以下菜单（按审计结果增减）：
+
+| 模块 | 核心能力 |
+| --- | --- |
+| Dashboard | 业务概览、站点运行统计 |
+| Pages / Landing Pages | 内容、模板区块、发布/预览 |
+| Posts | 文章、分类、标签、状态 |
+| Products | 产品、分类、属性、规格、筛选配置、库存（如原站使用） |
+| Orders | 订单、状态、支付/发货/退款（按实际业务） |
+| Customers | 注册用户、资料、权限 |
+| Inquiries | 询盘记录、状态、通知 |
+| Media | 图片/附件上传、管理、引用 |
+| Languages | 语言版本、翻译、审核与发布 |
+| SEO | SEO Metadata、Sitemap、重定向 |
+| Settings | 导航、基本配置、邮件、支付（按实际启用） |
+
+**禁止在后台使用 Emoji、Icon Font、特殊字体或字符图标**；使用 SVG 图标组件库并统一尺寸、线宽和主题色。按钮图标也要兼容键盘和屏幕阅读器。
+
+页面编辑推荐“固定模板 + 可编辑内容区块”；不实现通用拖拽建站器。复杂模板只为现有业务页面制作 React 组件。
+
+## 4. 数据与后端模块
+
+建议按业务域组织：`auth`、`content`、`products`、`filters`、`orders`、`customers`、`inquiries`、`media`、`translations`、`seo`、`jobs`。
+
+核心表按实际数据进一步细化：
+
+- 内容：`contents`、`content_translations`、`content_revisions`、`categories`、`tags`、`menus`
+- 产品：`products`、`product_translations`、`product_attributes`、`product_attribute_values`、`product_categories`、`product_variants`（如存在）
+- 商城：`users`、`carts`、`orders`、`order_items`、`payments`（按现有功能）
+- 运营：`inquiries`、`media`、`redirects`、`jobs`、`audit_logs`、`legacy_id_mappings`
+
+关键约束：
+- 多语言为真实可发布的数据版本，每种语言有独立 URL、标题、正文、SEO 字段、CTA；缺翻译时不生成伪语言页面。
+- 筛选使用合理的关系型结构、索引、稳定分页和服务端参数校验；先用真实数据和 `EXPLAIN (ANALYZE, BUFFERS)` 验证，不默认加搜索引擎。
+- 订单创建、库存扣减、付款回调使用数据库事务、幂等键、唯一约束；第三方支付回调验证签名。
+- 认证使用安全的 HttpOnly、Secure Cookie 和服务端会话校验，后台所有接口执行权限检查；敏感操作审计。
+- 后台任务实现持久化队列、失败重试与可观测性；不能依赖 Web 请求触发后台任务。
+- Public SSR 响应可按 URL/语言缓存；登录、购物车、结账、账户、个性化内容禁止共享页面缓存；发布后精准失效。
+- 前端输入、富文本、文件上传要防 XSS/CSRF/恶意上传及滥用；密钥通过环境变量管理。
+
+## 5. 多语言与 SEO 迁移（硬性验收项）
+
+- 导出全部现有 WordPress 和 GTranslate 语言 URL，结合 Search Console/Analytics/询盘数据标记高价值页面；不直接下线小语种。
+- 尽量保持现有被索引 URL；确需变化时逐条建立 301 映射，校验跳转链；维护 `canonical`、`hreflang`、多语言 Sitemap、robots 与结构化数据。
+- 翻译支持草稿、人工审核、发布和原文更新提醒；语言的导航、CTA、表单字段等均可管理。
+- 先选重点语言及代表页面试点，再逐步扩展；商城多语言不默认全量复制。
+- 迁移前后比较：HTTP 状态码、标题/描述、页面正文、内部链接、结构化数据、索引覆盖、自然搜索流量、询盘转化。
+
+## 6. 建议目录结构
+
+```text
+src/
+    routes/
+        index.tsx
+        products/
+        blog/
+        account/
+        admin/
+    components/
+        website/
+        admin/
+        icons/
+    server/
+        auth/
+        content/
+        products/
+        filters/
+        orders/
+        inquiries/
+        translations/
+        seo/
+        jobs/
+    db/
+        schema/
+        migrations/
+    styles/
+scripts/
+    wordpress-import/
+    site-capture/
+tests/
+    visual/
+    e2e/
+    integration/
+public/
+```
+
+管理端图标组件集中维护于 `src/components/icons/`，通过 ESLint/代码审查阻止新增 Emoji、图标字体及字符冒充图标。
+
+## 7. 实施步骤
+
+1. **审计与基线**：盘点页面模板、WordPress 插件实际启用业务功能、WooCommerce 支付/运输/税费流程、GTranslate 语言 URL；采集桌面/移动端截图与可复现交互；统计源站 CPU、数据库慢查询、错误日志与高频请求，不能把相关性当根因。
+2. **建模与导入**：完成 PostgreSQL 结构和迁移；编写可重复执行的 WordPress/WooCommerce 导入脚本；维护旧 ID、资源 URL 与链接映射；校验数量、关联和资源完整性。
+3. **前台 1:1 还原**：先还原公共组件与代表模板，再批量覆盖产品/文章/页面；逐项校验截图、响应式及交互。
+4. **后台业务实现**：用 React + Ant Design 实现实际使用的 CMS/商品/订单/询盘/语言/SEO 功能；不做插件机制和 Elementor 克隆。
+5. **SEO、多语言、商城验收**：重点语言试点，验证 hreflang/301/Canonical/Sitemap；测试注册、筛选、询盘、购物车、下单、支付与订单管理。
+6. **灰度上线**：测试环境压测和安全测试；Cloudflare/Nginx 小比例导流；保留旧站只读备份与可回滚部署，处理迁移期间新增订单和内容的增量同步；切换后持续监控。
+
+## 8. 验收标准
+
+- 前台：原站页面模板与典型实际页面在约定视口下视觉、交互、内容基本一致；明显差异逐项修复，所有关键功能 E2E 通过。
+- 后台：原站实际启用的业务功能逐项通过检查；所有图标均为 SVG，**无 Emoji、Icon Font、特殊字体或字符图标**。
+- SEO：重要旧链接保持可用或正确 301；多语言 URL、canonical、hreflang、Sitemap、SEO 元数据正确；重点语言测试页面可以被正常抓取。
+- 交易：注册、询盘、购物车、结账、支付回调、订单状态端到端通过，订单数据与权限受保护。
+- 性能：以原站基线为比较对象，记录 p50/p95 TTFB、慢查询、CPU/内存、错误率、缓存命中率；达到试点确定的目标后才推广。
+- 运维：有备份恢复演练、日志、监控、迁移校验报告和回滚流程。
+
+## 9. 不做的事情
+
+- 不引入 Go、微服务、WordPress/PHP 运行环境或 WordPress 插件兼容层。
+- 不复刻 WordPress 后台外观或 Elementor 通用可视化编辑器。
+- 不凭推断删除原站重要功能、语言页面、已有 URL。
+- 不在未明确数据一致性与回滚方案前一次性全站切换。
+
+## 10. 开发执行优先级
+
+**P0**：原站模板/业务审计、完整页面采集、数据模型、迁移验证、关键页面 1:1 还原。
+
+**P1**：产品筛选、询盘、后台 CRUD、多语言 SEO、缓存与性能测试。
+
+**P2**：WooCommerce 实际启用业务的交易迁移、全面语言覆盖、灰度切换与长期监控。
+
+> 本文是目标架构与实施约束；现存 WordPress 的故障根因尚未被证明，不能将新框架本身视为修复证据。

docs/dusuniot-website-stability-and-multilingual-brief.md

@@ -0,0 +1,80 @@
+# DusunIoT 网站稳定性与多语言改造项目 Brief
+
+**网站：** `dusuniot.com`  
+**用途：** 供外部网站/服务器专家评估、报价和执行方案讨论  
+**日期：** 2026-10-28
+
+## 1. 项目目标
+
+我们希望系统性解决网站反复宕机、服务器 CPU 长期偏高、WordPress 数据库连接/权限反复异常的问题，使现有英文网站、商城和询盘流程稳定运行。同时，重新设计小语种内容的发布方式，让有价值的多语言页面能够继续增长，而不会一扩充页面就使服务器负载明显恶化。
+
+本项目的目标是找到有证据支持的负载来源并完成治理，而不是仅升级主机套餐、停用插件或直接重建网站。若认为现有 WordPress/PHP 架构必须替换，请提供性能证据、迁移范围、成本、风险和与优化现有架构的比较。
+
+## 2. 当前架构与业务功能
+
+- 网站运行在 Hostinger Cloud Enterprise Hosting，使用 WordPress、Elementor 和 WooCommerce。
+- 域名通过 Cloudflare 代理；Hostinger 自带 CDN 未启用。需分别评估 Cloudflare、源站和 WordPress/LiteSpeed 缓存的作用。
+- 网站包含产品内容、landing pages、联系表单、产品筛选，以及客户注册和商城下单流程。
+- 当前使用 GTranslate 提供多语言页面。小语种页面过去为网站带来过重要自然搜索流量，因此不能在迁移时简单下线。
+
+请在正式诊断时核实以上配置和当前启用状态，不要只依据历史插件清单。
+
+## 3. 已观察到的问题与线索
+
+1. **反复故障。** 网站曾出现 `dusuniot.com` 跳转到 `/wp-admin/install.php`、WordPress 数据库读取失败等现象。Hostinger 检查曾显示数据库用户权限被其自动保护机制临时撤销；权限恢复后也可能再次被限制。需要取得保护事件和触发条件的原始证据。
+2. **持续高负载。** 过去曾观察到 CPU 长时间处于高位；近期 Hostinger 报告 2026-10-15 至 2026-10-22 期间多个采样点接近 100%。普通访客流量不能代表服务器收到的全部爬虫、自动化和 API 请求。
+3. **高频请求。** Hostinger 曾报告大量 `/wp-admin/install.php`、Contact Form 7 REST 接口和 `admin-ajax.php` 请求；Cloudflare 分析也显示大量请求仍由源站提供服务。高频路径与高负载在时间上重叠，但现有资料不足以证明某个插件或请求是最初根因。安装页请求也可能是数据库故障后的结果。
+4. **筛选器线索。** 同事近期停用了 landing page 上的筛选功能，随后观察到至少约 24 小时 CPU 比较稳定。请用停用前后的同口径 CPU、数据库负载、请求量、缓存命中和错误记录验证这一关联，并排除同时发生的其他变化。产品筛选项目较多，可能存在复杂查询。
+5. **商城与后台任务线索。** 客户可注册并下单。请检查 WooCommerce 相关查询、产品筛选、Action Scheduler、WP-Cron、同步和重试任务是否长期占用资源。
+6. **多语言线索。** 同事观察到 GTranslate 可能反复回源获取页面。请核查其请求频率、语言 URL、缓存命中、页面生成成本及爬虫行为；不能仅凭插件名称认定其直接查询数据库或造成故障。
+
+**现有证据边界：** 目前没有足以完成插件级归因的 MySQL 慢查询、PHP 慢请求/调用栈和精确的数据库权限撤销时间线。错误栈中出现某插件，只能说明其在权限已受限时尝试访问数据库，不能证明它触发了限制。
+
+## 4. 工作范围与交付要求
+
+### A. 故障诊断与短期止损
+
+- 建立故障时间线：首次异常、CPU/数据库负载变化、数据库保护事件、权限恢复与再次撤销、站点错误和恢复时间。
+- 关联 Cloudflare 请求、Hostinger 源站访问日志、CPU/PHP/MySQL 指标；区分经过 Cloudflare 的请求和直接访问源站的请求。
+- 在可行且受控的条件下，取得 MySQL 慢查询、实时数据库进程、PHP 慢请求、Web 服务器错误日志，以及相关 WordPress hook/Action Scheduler 记录。记录查询/请求的次数、累计耗时、时间戳和调用入口。
+- 区分最初造成高负载的活动与故障发生后产生的重定向、重试或扫描流量。
+- 对确认有害的流量或任务提出范围明确、可回滚的止损方案，并报告实施前后指标。不要无差别屏蔽 Contact Form 7 接口，以免影响询盘。
+- 说明 Hostinger 数据库保护机制的触发条件、撤权时间和恢复条件；必要时由主机/数据库工程师参与。
+
+### B. WordPress 后台与性能治理
+
+- 盘点现有插件、主题、自定义代码及其业务用途，重点检查筛选器、WooCommerce、表单、翻译、缓存、搜索、统计和 SEO 功能。
+- 对产品筛选的大量选项及其查询方式进行分析，提出保留关键筛选体验的优化方案。
+- 检查注册、购物车、结账、支付、邮件、产品同步等路径和后台任务；识别积压、重试或重复执行。
+- 核查页面缓存、对象缓存、数据库索引、慢查询及多语言页面的缓存策略。明确哪些页面必须动态生成，哪些可以缓存。
+- 给出保留、合并、替换或移除插件的建议，并说明每项建议的性能收益、功能影响和回滚方法。
+
+### C. 多语言页面方案
+
+比较至少以下路线，并给出推荐方案与试点范围：
+
+1. 保留 GTranslate，但优化回源、缓存和抓取控制。
+2. 将选定语言的重点页面制作成本站 WordPress 中可编辑、可管理的真实页面，使用独立语言 URL；评估 WPML、Polylang 或适当的定制方案。
+3. 对特定语言使用独立站点/多站点架构，仅在有明确必要时采用。
+
+我们希望重点语言页面的标题、正文、SEO 元数据、CTA 和表单内容由自己控制。请评估翻译内容如何生成、审核、更新和保存，以及与 Elementor、WooCommerce、筛选器和现有表单的兼容性。不要默认把所有语言、所有产品和全部商城功能一次性复制到同一数据库。
+
+多语言方案必须包含现有语言 URL 清单、自然搜索流量/询盘价值评估、保留或迁移策略、301 重定向、canonical、`hreflang`、站点地图和重要页面的验证计划。先以少量重点语言及代表性页面做试点，经性能和 SEO 检查后再扩展。
+
+## 5. 实施原则
+
+- 先收集证据并提出方案，再在测试环境验证。生产环境的插件停用、数据库修改、缓存规则、DNS/Cloudflare 规则和内容迁移应有明确变更记录与回滚方案。
+- 在故障原因未查明前，不重新安装 WordPress、不直接恢复旧备份、不清空任务队列、不盲目优化数据库表。
+- 不因 PHP 安全漏洞而将“放弃 PHP”作为默认解决方案。PHP 安全补丁属于主机运行环境的维护；WordPress 版本更新不能替代 PHP 补丁。架构迁移应单独论证。
+- 对商城下单、客户注册、产品筛选和询盘表单进行端到端验证；性能改进不能以破坏关键业务流程为代价。
+
+## 6. 预期交付物与验收
+
+请提供：
+
+1. **诊断报告：** 故障时间线、证据来源、确定原因与尚未证实的假设、关键慢查询/慢请求及关联插件或任务。
+2. **整改计划：** 按紧急程度排序的措施、预计影响、实施步骤、测试方案、回滚方案和负责人。
+3. **多语言方案：** 路线比较、试点语言和页面、内容与 SEO 迁移清单、性能容量评估、维护流程及报价。
+4. **验证报告：** 整改前后 CPU、数据库负载/权限状态、请求耗时、错误率与缓存命中情况；连续观察期内无同类宕机；英文及试点语言页面、注册、筛选、下单和表单测试结果。
+
+请在报价中区分**诊断与紧急止损、后台性能整改、多语言试点、全面迁移**四部分，并标明需要我们或 Hostinger/Cloudflare 提供的权限和日志。

docs/sections-inventory.md

@@ -0,0 +1,124 @@
+# 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 |
+
+## 六、执行顺序(与用户确认后逐项推进)
+
+1. **首页自上而下**:H1(公告滚动)→ H2…H19,每版块对照原站截图核验后交付 +patch。
+2. **产品分类列表页**(2 类入口最多、复用公共组件最多)。
+3. **方案页/商城/产品详情/博客**。
+4. **公司页**(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 进程 | 环境 | 记录 |