From 9a5199486076f558eb0c3d1b8c928f05c37a2d57 Mon Sep 17 00:00:00 2001
From: bigcode <ibigcode@gmail.com>
Date: Tue, 3 Nov 2026 03:59:04 +0800
Subject: [PATCH] =?UTF-8?q?v0.10.25:=20/solution/=20=E5=BD=92=E6=A1=A3+?=
 =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E5=A4=8D=E5=88=BB=EF=BC=88archive?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6/=E5=88=86=E9=A1=B5/=E6=91=98=E5=BD=9524?=
 =?UTF-8?q?=E8=AF=8D=EF=BC=89=E3=80=81Header=20=E5=85=A8=E6=96=AD=E7=82=B9?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E3=80=81page=5Fcss=20=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E7=AE=A1=E7=BA=BF=E3=80=81reviews/populated=20=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6/=5Fcss=5Fclasses/tabs=20HTML/=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=8F=98=E4=BD=93=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/sections-inventory.md                 |  23 ++-
 package.json                               |   2 +-
 scripts/import-page-css.ts                 | 142 +++++++++++++++++
 src/components/elementor/Renderer.tsx      |  95 +++++++----
 src/components/elementor/slim.ts           |   6 +
 src/components/ui/navigation-menu.tsx      |   4 +-
 src/components/website/Header.tsx          |  86 +++++-----
 src/components/website/LangSwitcher.tsx    |   4 +-
 src/components/website/SolutionArchive.tsx | 174 +++++++++++++++++++++
 src/i18n/locales/en.ts                     |   2 +-
 src/routeTree.gen.ts                       |  44 +++++-
 src/routes/solution.$slug.tsx              |   7 +-
 src/routes/solution.index.tsx              |  24 +++
 src/routes/solution.page.$page.tsx         |  28 ++++
 src/routes/solution.tsx                    |  61 +-------
 src/server/data.ts                         |  37 +++--
 src/utils/image-variant.ts                 |  88 +++++++++++
 17 files changed, 681 insertions(+), 146 deletions(-)
 create mode 100644 scripts/import-page-css.ts
 create mode 100644 src/components/website/SolutionArchive.tsx
 create mode 100644 src/routes/solution.index.tsx
 create mode 100644 src/routes/solution.page.$page.tsx
 create mode 100644 src/utils/image-variant.ts

diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md
index c33d30f0d..894c276f3 100644
--- a/docs/sections-inventory.md
+++ b/docs/sections-inventory.md
@@ -93,8 +93,27 @@
   srcset/medium 变体，个别卡片高度 ±5px。
 
 ### 2. 方案页
-- S1 `/solution/` 列表入口页
-- S2 `/solution/$slug` 落地页:与首页同款 Elementor 直出,版块逐页不同
+- 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 词截断，&nbsp; 相连算一词）+ 分页（当前页 #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 未初始化假象。
 
 ### 3. 商城/产品/博客(WordPress 模板页)
 - SH1 商城:`/shop/` 分类+商品网格
diff --git a/package.json b/package.json
index 1c08a09e0..46aa719bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dusuniot-rebuild",
-  "version": "0.10.24",
+  "version": "0.10.25",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/scripts/import-page-css.ts b/scripts/import-page-css.ts
new file mode 100644
index 000000000..27b3e8522
--- /dev/null
+++ b/scripts/import-page-css.ts
@@ -0,0 +1,142 @@
+/**
+ * # 脚本 导入原站页面级生成 CSS（post-<legacy_id>.css）到 contents.meta.page_css
+ *
+ * 背景：DB dump 的 meta.elementor 缺少 widget 级 custom_css（如 EAEL infobox 的
+ * `.elementor-element-7f1dc73 .eael-infobox .infobox-icon img{width:80px}`），这些规则
+ * 只存在于原站 Elementor 生成的页面样式表 post-<post_id>.css 中。
+ *
+ * 做法：
+ * 1. 抓 https://www.dusuniot.com/wp-content/uploads/elementor/css/post-<legacy_id>.css
+ * 2. 只保留选择器含 .elementor-element-<id>（id 属于本文档）的规则（含 @media 块内），
+ *    把 `.elementor-element.elementor-element-<id>` / `.elementor-element-<id>` 改写为
+ *    `[data-el="<id>"]`（与渲染器 DOM 对应），剥掉 `.elementor-<pid>` 页面作用域前缀
+ * 3. 拼接后写回 meta.page_css，渲染器（ElementorRenderer pageCss prop）注入 <style>
+ *
+ * 用法：bun scripts/import-page-css.ts <slug> [<slug> ...]   （缺省 = 全部方案落地页）
+ */
+import { SQL } from "bun";
+
+/** # 常量 方案落地页 slug 全集（缺省导入目标） **/
+const SOLUTION_SLUGS = [
+  "smart-apartment-gateway",
+  "smart-apartment-gateway-oem",
+  "oil-gas-management-solution",
+  "energy-storage-ems-solution",
+  "smart-robot-controller-solution",
+  "vehicle-iot-solution",
+  "smart-building-solution",
+  "smart-retail-solution",
+  "smart-home-solution",
+  "smart-apartment-solution",
+  "smart-elderly-care-solution",
+  "ble-positioning-solution",
+  "ble-mesh-lighting-control-solution",
+  "home-assistant-grow-lighting-solution",
+];
+
+/** # 常量 原站页面 CSS 地址模板 **/
+const CSS_URL = (pid: number) => `https://www.dusuniot.com/wp-content/uploads/elementor/css/post-${pid}.css`;
+
+/** # 函数 提取文档全部元素 id 集合（含嵌套；顶层为数组或 {elements} 包装均可） **/
+function collectIds(el: unknown, out: Set<string> = new Set()): Set<string> {
+  if (Array.isArray(el)) {
+    for (const x of el) collectIds(x, out);
+    return out;
+  }
+  if (!el || typeof el !== "object") return out;
+  const e = el as { id?: unknown; elements?: unknown[] };
+  if (typeof e.id === "string") out.add(e.id);
+  for (const c of Array.isArray(e.elements) ? e.elements : []) collectIds(c, out);
+  return out;
+}
+
+/** # 函数 把选择器中的 elementor-element-<id> 改写为 data-el 属性选择器
+ * 规则保留条件：含文档 id，或引用 .ele-<自定类>（页面自定义类，渲染器把 _css_classes
+ * 落到节点 class 上，如 .ele-sol-review-box / .ele-secondDep-dif）；其余丢弃
+ */
+function translateSelector(sel: string, ids: Set<string>, pid: number): string | null {
+  const idIn = [...sel.matchAll(/elementor-element-(\w+)/g)].map((m) => m[1]);
+  const hasDocId = idIn.some((id) => ids.has(id));
+  const hasCustomCls = /\.ele-[a-z][\w-]*/i.test(sel) && !/elementor-element-/.test(sel);
+  if (!hasDocId && !hasCustomCls) return null;
+  let out = sel;
+  for (const id of new Set(idIn)) {
+    if (!ids.has(id)) continue;
+    out = out.split(`.elementor-element.elementor-element-${id}`).join(`[data-el="${id}"]`);
+    out = out.split(`.elementor-element-${id}`).join(`[data-el="${id}"]`);
+  }
+  // 剥页面作用域前缀（.elementor-<pid> 空格相连）与多余空白
+  out = out.replace(new RegExp(`\\.elementor-${pid}\\s*`, "g"), "");
+  return out.replace(/\s+/g, " ").trim();
+}
+
+/** # 函数 解析 CSS 顶层规则（含 @media 嵌套块），返回过滤改写后的规则串
+ * 用花括号配对扫描，避免依赖完整 CSS 解析器
+ */
+function filterCss(css: string, ids: Set<string>, pid: number): string {
+  let out = "";
+  let i = 0;
+  const n = css.length;
+  while (i < n) {
+    // 跳过注释
+    if (css.startsWith("/*", i)) {
+      const end = css.indexOf("*/", i + 2);
+      i = end === -1 ? n : end + 2;
+      continue;
+    }
+    const brace = css.indexOf("{", i);
+    if (brace === -1) break;
+    const sel = css.slice(i, brace).trim();
+    // 找配对右括号
+    let depth = 1;
+    let j = brace + 1;
+    while (j < n && depth > 0) {
+      if (css[j] === "{") depth++;
+      else if (css[j] === "}") depth--;
+      j++;
+    }
+    const body = css.slice(brace + 1, j - 1);
+    if (sel.startsWith("@media") || sel.startsWith("@supports")) {
+      const inner = filterCss(body, ids, pid);
+      if (inner) out += `${sel}{${inner}}\n`;
+    } else if (sel.startsWith("@keyframes") || sel.startsWith("@font-face")) {
+      // 全局块整体保留（字体/动画与节点无关）
+      out += `${sel}{${body}}\n`;
+    } else {
+      const parts = sel.split(",").map((p) => translateSelector(p, ids, pid)).filter((p): p is string => !!p);
+      if (parts.length) out += `${parts.join(",")}{${body}}\n`;
+    }
+    i = j;
+  }
+  return out;
+}
+
+const slugs = process.argv.slice(2).length ? process.argv.slice(2) : SOLUTION_SLUGS;
+const sql = new SQL("postgres://dusuniot:dusuniot@127.0.0.1:25432/dusuniot", { max: 1 });
+for (const slug of slugs) {
+  const rows = await sql`select id, legacy_id, meta::text as meta from contents where slug = ${slug} and type = ${"post"} limit 1`;
+  const row = rows[0];
+  if (!row) {
+    console.log("SKIP(无内容):", slug);
+    continue;
+  }
+  const meta = JSON.parse(row.meta);
+  const ids = collectIds(meta.elementor);
+  const pid = row.legacy_id;
+  if (!pid) {
+    console.log("SKIP(无 legacy_id):", slug);
+    continue;
+  }
+  const res = await fetch(CSS_URL(pid), { headers: { "User-Agent": "Mozilla/5.0" } });
+  if (!res.ok) {
+    console.log("SKIP(css", res.status, "):", slug, CSS_URL(pid));
+    continue;
+  }
+  const raw = await res.text();
+  const pageCss = filterCss(raw, ids, pid);
+  meta.page_css = pageCss;
+  // ::text::jsonb 双重转换：Bun SQL 绑定字符串直接 ::jsonb 会把整串存成 JSON 字符串值
+  await sql`update contents set meta = ${JSON.stringify(meta)}::text::jsonb where id = ${row.id}`;
+  console.log("OK:", slug, "post", pid, "css", raw.length, "->", pageCss.length);
+}
+await sql.end();
diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx
index 8915f75c7..8a1f0ac15 100644
--- a/src/components/elementor/Renderer.tsx
+++ b/src/components/elementor/Renderer.tsx
@@ -291,15 +291,18 @@ export function ElementorRenderer({
   postsData,
   shortcodes,
   vars,
+  pageCss,
 }: {
   doc: ElDocument;
   postsData?: Record<string, PostCardItem[]>;
   shortcodes?: Record<string, ReactNode>;
   vars?: RendererVars;
+  /** # 成员变量 页面级生成 CSS（原站 post-<id>.css 翻译成 data-el 选择器，scripts/import-page-css.ts 导入） **/
+  pageCss?: string;
 }) {
   const elements = normalizeDoc(doc);
   if (!elements.length) return null;
-  const css = collectCustomCss(elements) + collectResponsiveCss(elements);
+  const css = (pageCss || "") + collectCustomCss(elements) + collectResponsiveCss(elements);
   return (
     <VarsContext.Provider value={vars || {}}>
       <PostsDataContext.Provider value={postsData || {}}>
@@ -527,8 +530,10 @@ function SectionNode({ el }: { el: ElElement }) {
   if (overlay) style.position = style.position || "relative";
   const Tag = sectionTag(settings);
   const vis = visibilityClass(settings);
+  // _css_classes（页面级 custom_css 的选择器挂在节点的 class 上，如 ele-secondDep-dif）
+  const secCls = [vis, s(settings._css_classes)].filter(Boolean).join(" ") || undefined;
   return (
-    <Tag className={vis || undefined} style={style} data-el={el.id}>
+    <Tag className={secCls} style={style} data-el={el.id}>
       {overlay}
       {/* 行加 relative：与绝对定位遮罩同属定位层，DOM 靠后绘制在上，内容不被蒙灰 */}
       <div className="mx-auto flex flex-wrap" style={{ ...inner, position: "relative" }}>
@@ -605,13 +610,13 @@ function ColumnNode({ el, gapPad, contentPos }: { el: ElElement; gapPad?: string
     } else inner.borderWidth = "1px";
   }
   return (
-    // 内层(populated)宽 100%：与列同宽、水平 margin 向右溢出（H4 卡实测 populated=272 含
-    // margin 溢出）；H11/H14/H15 等"扣除 margin"语义的列在 app.css 用 !important 覆写为 auto。
-    // 空列（无子元素）裸渲染：原站空列无 populated 盒（H15 占位格 margin/边框均为 0），
-    // 仅保留外层弹性宽度与拉伸高度
-    <div className={"el-col min-w-0 " + visibilityClass(settings)} style={outer} data-el={el.id}>
+    // 内层(populated)块级宽 auto：与原站 .elementor-element-populated 一致——水平 margin
+    // 存在时块盒收缩进列宽（6c765c4 卡列 margin 8/8 实测 populated=294=310-16、图片 272）；
+    // margin 为 0 时与 100% 等价；负 margin 自然外扩（H4 图）。空列（无子元素）裸渲染：
+    // 原站空列无 populated 盒（H15 占位格 margin/边框均为 0），仅保留外层弹性宽度与拉伸高度
+    <div className={("el-col min-w-0 " + [visibilityClass(settings), s(settings._css_classes)].filter(Boolean).join(" ")).trimEnd()} style={outer} data-el={el.id}>
       {(el.elements || []).length ? (
-        <div style={{ display: "flex", flexWrap: "wrap", alignContent: "flex-start", width: "100%", ...inner }}>
+        <div style={{ display: "flex", flexWrap: "wrap", alignContent: "flex-start", ...inner }}>
           {(el.elements || []).map((c, i) => (
             <ElementNode key={c.id || i} el={c} gapPad={gapPad} />
           ))}
@@ -1610,28 +1615,62 @@ function TestimonialWidget({ settings }: { settings: Record<string, unknown> })
   );
 }
 
-/** # 组件 reviews（评价轮播）：静态卡片网格（slides 复用：name/title/rating/content/image） */
+/** # 组件 reviews（Elementor 原生 reviews widget，swiper 轮播静态化）
+ * 取证（smart-building 07ecb19，1440 实测 2026-11-03）：
+ * 外层左右 28px 留白（箭头槽）；slide 宽 (100%-10)/2（slides_per_view=2、gap 10），
+ * 白底 radius 5；header flex pad 20 20 18（图 79×79 圆形 + cite 左 20：姓名 24px/700 #1C2022、
+ * 星 14px #CCD6DF 右距 5、职位 16px #697882）；content pad 18 20 20，内容 HTML
+ * （.ele-sol-review-box 等）由页面级 CSS（pageCss / custom_css）提供。
+ */
 function ReviewsWidget({ settings }: { settings: Record<string, unknown> }) {
   const slides = Array.isArray(settings.slides)
-    ? (settings.slides as { name?: string; title?: string; rating?: string; content?: string; image?: { url?: string; alt?: string } }[])
+    ? (settings.slides as { _id?: string; name?: string; title?: string; rating?: string; content?: string; image?: { url?: string; alt?: string } }[])
     : [];
   if (!slides.length) return null;
-  const stars = (n: string) => "★★★★★".slice(0, Math.max(1, Math.min(5, Math.round(Number(n) || 5))));
+  const perView = Math.max(1, Math.round(Number(s(settings.slides_per_view)) || 2));
   return (
-    <div className="mb-[18px] grid gap-4 min-[760px]:grid-cols-2">
-      {slides.map((it, i) => (
-        <div key={i} className="rounded-md border p-4">
-          <div className="text-[var(--brand)]">{stars(s(it.rating))}</div>
-          {s(it.content) ? <div className="content-html mt-2" dangerouslySetInnerHTML={{ __html: s(it.content) }} /> : null}
-          <div className="mt-3 flex items-center gap-3">
-            {it.image?.url ? <img src={it.image.url} alt={it.image.alt || it.name || ""} className="h-10 w-10 rounded-full object-cover" /> : null}
-            <div>
-              <div className="font-medium">{s(it.name)}</div>
-              <div className="text-sm text-muted-foreground">{s(it.title)}</div>
+    <div className="el-reviews">
+      <style>{`
+.el-reviews .el-swiper { padding: 0 28px; }
+.el-reviews .el-swiper-wrapper { display: grid; grid-template-columns: repeat(${perView}, 1fr); gap: 10px; }
+.el-reviews .swiper-slide { background: ${s(settings.slide_background_color) || "#fff"}; border-radius: 5px; }
+.el-reviews .elementor-testimonial__header { display: flex; align-items: center; padding: 20px 20px 18px; }
+.el-reviews .elementor-testimonial__image { flex: 0 0 auto; display: flex; }
+.el-reviews .elementor-testimonial__image img { display: block; width: 79px; height: 79px; border-radius: 999px; object-fit: cover; }
+.el-reviews .elementor-testimonial__cite { display: flex; flex-direction: column; margin: 0 0 0 20px; font-style: normal; }
+.el-reviews .elementor-testimonial__name { font-size: ${sizeCss(settings.name_typography_font_size) || "24px"}; line-height: 1.5; font-weight: 700; color: #1C2022; }
+.el-reviews .elementor-star-rating { font-size: 14px; line-height: 21px; color: #CCD6DF; white-space: nowrap; }
+.el-reviews .elementor-star-rating i { display: inline-block; font-style: normal; margin-right: 5px; }
+.el-reviews .elementor-testimonial__title { font-size: 16px; color: #697882; }
+.el-reviews .elementor-testimonial__content { padding: 18px 20px 20px; font-size: ${sizeCss(settings.content_typography_font_size) || "16px"}; line-height: ${sizeCss(settings.content_typography_line_height) || "24px"}; }
+`}</style>
+      <div className="el-swiper">
+        <div className="el-swiper-wrapper">
+          {slides.map((it, i) => (
+            <div key={it._id || i} className="swiper-slide">
+              <div className="elementor-testimonial">
+                <div className="elementor-testimonial__header">
+                  <div className="elementor-testimonial__image">
+                    {it.image?.url ? <img src={it.image.url} alt={it.image.alt || it.name || ""} loading="lazy" /> : null}
+                  </div>
+                  <cite className="elementor-testimonial__cite">
+                    <span className="elementor-testimonial__name">{s(it.name)}</span>
+                    <div className="elementor-star-rating" aria-label={it.rating}>
+                      {[1, 2, 3, 4, 5].map((n) => (
+                        <i key={n} className={"elementor-star-" + (n <= Math.round(Number(it.rating) || 5) ? "full" : "empty")}>★</i>
+                      ))}
+                    </div>
+                    <span className="elementor-testimonial__title">{s(it.title)}</span>
+                  </cite>
+                </div>
+                <div className="elementor-testimonial__content">
+                  <div className="elementor-testimonial__text" dangerouslySetInnerHTML={{ __html: localSiteUrl(s(it.content)) }} />
+                </div>
+              </div>
             </div>
-          </div>
+          ))}
         </div>
-      ))}
+      </div>
     </div>
   );
 }
@@ -1944,9 +1983,8 @@ function TabsWidget({ settings }: { settings: Record<string, unknown> }) {
             tabIndex={i === active ? 0 : -1}
             aria-selected={i === active}
             onClick={() => setActive(i)}
-          >
-            {s(t.tab_title)}
-          </div>
+            dangerouslySetInnerHTML={{ __html: s(t.tab_title) }}
+          />
         ))}
       </div>
       <div className="elementor-tabs-content-wrapper" role="tablist">
@@ -1959,9 +1997,8 @@ function TabsWidget({ settings }: { settings: Record<string, unknown> }) {
               tabIndex={i === active ? 0 : -1}
               aria-selected={i === active}
               onClick={() => setActive(i)}
-            >
-              {s(t.tab_title)}
-            </div>
+              dangerouslySetInnerHTML={{ __html: s(t.tab_title) }}
+            />
             <div
               id={`elementor-tab-content-${base + i}`}
               className="elementor-tab-content elementor-clearfix"
diff --git a/src/components/elementor/slim.ts b/src/components/elementor/slim.ts
index ce98f17fe..00a7fcfb7 100644
--- a/src/components/elementor/slim.ts
+++ b/src/components/elementor/slim.ts
@@ -126,6 +126,12 @@ const SETTING_KEYS = new Set([
   "social_icon_list",
   "slides",
   "slides_height",
+  // reviews widget（评价轮播静态化；smart-building 07ecb19）
+  "slides_per_view",
+  "slide_background_color",
+  "name_typography_font_size",
+  "content_typography_font_size",
+  "content_typography_line_height",
   "tabs",
   "tabs_align_horizontal",
   "tab_active_color",
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index bd3e33d0f..036c96b2d 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -77,8 +77,8 @@ function NavigationMenuHeading({ className, ...props }: React.ComponentProps<"di
 /** # 组件 实心下三角指示器（等价原站 dashicons arrow-down，展开不旋转，颜色随文字） */
 function CaretDown() {
   return (
-    <svg width="10" height="10" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="shrink-0">
-      <path d="M4.5 7h11L10 13.5 4.5 7Z" />
+    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="shrink-0">
+      <path d="M4.5 7.5h11L10 13.5 4.5 7.5Z" />
     </svg>
   );
 }
diff --git a/src/components/website/Header.tsx b/src/components/website/Header.tsx
index 1203868f4..852585e39 100644
--- a/src/components/website/Header.tsx
+++ b/src/components/website/Header.tsx
@@ -20,7 +20,7 @@
  */
 import { useState } from "react";
 import { Link } from "@tanstack/react-router";
-import { Search, Menu, X, ChevronRight, Mail, User, Star } from "lucide-react";
+import { Search, Menu, X, ChevronRight, Mail, MessageCircleMore, Star } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import {
@@ -118,60 +118,68 @@ export function Header(props: { menu: MenuNode[] }) {
   const tops = items.filter((it) => it.title !== "Search");
 
   return (
-    <header className="sticky top-0 z-[100] border-b border-line bg-white shadow-[0_1px_6px_rgba(16,42,76,0.06)]">
-      {/* topbar：口号 + 社交图标 + 登录 */}
-      <div className="bg-footer text-[13px] text-white">
-        <div className="site-container flex h-10 items-center justify-between">
-          <a href="/landing-pages/oem-odm/" className="text-white hover:text-[#f5b278]">
+    <header className="sticky top-0 z-[100] bg-white shadow-[0_1px_6px_rgba(16,42,76,0.06)]">
+      {/* topbar：口号 + 社交图标（原站实测 2026-11-03：高 36px、容器 1350、文字 16px/16、
+          图标 36×36 盒 gap 10、顺序 Linkedin/Youtube/Facebook、无登录项；<768 隐藏） */}
+      <div className="hidden bg-footer text-white min-[768px]:block">
+        <div className="mx-auto flex h-9 w-full max-w-[1350px] items-center justify-between">
+          <a href="/landing-pages/oem-odm/" className="text-[16px] leading-4 text-white hover:text-[#f5b278]">
             {t("topbar_oem")}
           </a>
-          <div className="flex items-center gap-3.5">
-            <a href="https://www.youtube.com/@dusuniot" aria-label="YouTube" target="_blank" rel="noreferrer" className="text-white hover:text-[#f5b278]">
-              <YoutubeGlyph />
-            </a>
-            <a href="https://www.facebook.com/dusuniot" aria-label="Facebook" target="_blank" rel="noreferrer" className="text-white hover:text-[#f5b278]">
-              <FacebookGlyph />
-            </a>
-            <a href="https://www.linkedin.com/company/dusun-iot" aria-label="LinkedIn" target="_blank" rel="noreferrer" className="text-white hover:text-[#f5b278]">
+          <div className="flex items-center gap-[10px]">
+            <a href="https://www.linkedin.com/company/dusun-iot" aria-label="LinkedIn" target="_blank" rel="noreferrer" className="flex h-9 w-9 items-center justify-center text-white hover:text-[#f5b278]">
               <LinkedinGlyph />
             </a>
-            <span className="h-3.5 w-px bg-white/35" aria-hidden />
-            <a href="/my-account/" className="inline-flex items-center gap-1 text-white hover:text-[#f5b278]">
-              <User size={15} aria-hidden /> {t("login")}
+            <a href="https://www.youtube.com/@dusuniot" aria-label="YouTube" target="_blank" rel="noreferrer" className="flex h-9 w-9 items-center justify-center text-white hover:text-[#f5b278]">
+              <YoutubeGlyph />
+            </a>
+            <a href="https://www.facebook.com/dusuniot" aria-label="Facebook" target="_blank" rel="noreferrer" className="flex h-9 w-9 items-center justify-center text-white hover:text-[#f5b278]">
+              <FacebookGlyph />
             </a>
           </div>
         </div>
       </div>
 
-      {/* 主导航（原站实测：白底条高 68px，topbar 40px，合计 108px） */}
-      <div className="site-container flex h-[68px] items-center gap-6">
+      {/* 主导航（原站实测 2026-11-03：桌面 68px 容器 40/25、logo 后 80px 起菜单、项 pad 8/6 项距 6；
+          平板 768-959 为汉堡导航（顶栏 36 + 导航 48，logo 缩放，右侧 CONTACT US+邮件）；
+          手机 <768 无顶栏、导航 48、汉堡在 logo 右 96px、右侧橙色气泡+邮件） */}
+      <div className="flex h-12 items-center px-2.5 pr-[13px] min-[768px]:pr-[68px] min-[960px]:h-[68px] min-[960px]:pl-10 min-[960px]:pr-[25px]">
         {/* 直接复用原站 header logo（Elementor site-logo 同一图片，实测渲染 171×42.75px） */}
         <Link to="/" className="shrink-0">
-          <img src="/uploads/2022/06/Dusuniot-logo-R-400-e1669108867399.png" width={300} height={75} alt="Dusun IoT" className="h-auto w-[171px]" />
+          <img src="/uploads/2022/06/Dusuniot-logo-R-400-e1669108867399.png" width={300} height={75} alt="Dusun IoT" className="block h-auto w-[109px] min-[768px]:w-[103px] min-[880px]:w-[124px] min-[960px]:w-[171px]" />
         </Link>
-        <DesktopNav tops={tops} />
-        {searchOpen ? (
-          <form action="/search" method="get" className="flex items-center overflow-hidden rounded-full border border-line bg-soft">
-            <Input type="search" name="q" placeholder={t("search_placeholder")} aria-label="Search" autoFocus className="w-40 rounded-none border-0 bg-transparent focus-visible:border-0" />
-            <button type="submit" aria-label="Submit search" className="flex cursor-pointer items-center border-0 bg-transparent px-2.5 py-1.5 text-muted-foreground">
-              <Search size={16} aria-hidden />
+        <div className="ml-[80px] hidden min-w-0 min-[960px]:flex min-[960px]:flex-1 min-[960px]:items-center">
+          <DesktopNav tops={tops} />
+          {searchOpen ? (
+            <form action="/search" method="get" className="ml-1.5 flex items-center overflow-hidden rounded-full border border-line bg-soft">
+              <Input type="search" name="q" placeholder={t("search_placeholder")} aria-label="Search" autoFocus className="w-40 rounded-none border-0 bg-transparent focus-visible:border-0" />
+              <button type="submit" aria-label="Submit search" className="flex cursor-pointer items-center border-0 bg-transparent px-2.5 py-1.5 text-muted-foreground">
+                <Search size={16} aria-hidden />
+              </button>
+            </form>
+          ) : (
+            <button aria-label="Open search" onClick={() => setSearchOpen(true)} className="ml-1.5 flex h-[68px] w-10 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-ink">
+              <Search size={19} aria-hidden />
             </button>
-          </form>
-        ) : (
-          <button aria-label="Open search" onClick={() => setSearchOpen(true)} className="flex cursor-pointer items-center border-0 bg-transparent p-1.5 text-ink">
-            <Search size={19} aria-hidden />
+          )}
+        </div>
+        {/* 汉堡：原站为 mega-toggle 块（手机位于 logo 右 96px、平板右聚拢），图标浅灰 */}
+        <div className="ml-[96px] flex h-12 items-center justify-end min-[768px]:ml-auto min-[960px]:hidden">
+          <button aria-label="Toggle menu" onClick={() => setOpen(!open)} className="flex h-12 w-10 cursor-pointer items-center justify-center rounded-[4px] border-0 bg-transparent p-0 text-[#c9c9c9]">
+            {open ? <X size={32} aria-hidden /> : <Menu size={32} aria-hidden />}
           </button>
-        )}
-        <Button asChild className="hidden whitespace-nowrap px-[18px] py-[9px] min-[960px]:inline-flex">
+        </div>
+        <div className="min-w-0 flex-1 min-[960px]:hidden" aria-hidden />
+        <a href="/contact-us/" aria-label="Contact us" className="flex h-[34px] w-[38px] items-center justify-center text-brand min-[768px]:hidden">
+          <MessageCircleMore size={28} aria-hidden />
+        </a>
+        <Button asChild className="hidden whitespace-nowrap px-[18px] py-[9px] min-[768px]:inline-flex">
           <a href="/contact-us/">{t("contact_us")}</a>
         </Button>
-        <a href="/contact-us/" aria-label="Email us" className="hidden items-center p-1 text-brand min-[960px]:flex">
-          <Mail size={19} aria-hidden />
+        <a href="/contact-us/" aria-label="Email us" className="flex h-10 w-[52px] items-center justify-center p-0 text-brand">
+          <Mail size={28} aria-hidden />
         </a>
         <LangSwitcher />
-        <button aria-label="Toggle menu" onClick={() => setOpen(!open)} className="ml-auto cursor-pointer rounded-[4px] border-0 bg-transparent p-1.5 text-ink min-[960px]:hidden">
-          {open ? <X size={24} aria-hidden /> : <Menu size={24} aria-hidden />}
-        </button>
       </div>
       {/* 移动端菜单 */}
       {open ? (
@@ -201,7 +209,7 @@ export function Header(props: { menu: MenuNode[] }) {
  */
 function DesktopNav({ tops }: { tops: MenuNode[] }) {
   return (
-    <div className="hidden min-[960px]:flex min-[960px]:flex-1 min-[960px]:items-center gap-0.5">
+    <div className="hidden min-[960px]:flex min-[960px]:items-center gap-1.5">
       {tops.map((node) => {
         const linkHref = TOP_URL_FIX[node.title] ?? normalizeUrl(node.url) ?? undefined;
         // 巨幕面板项（全宽视口）
@@ -298,7 +306,7 @@ function TopTrigger({ title, href }: { title: string; href?: string }) {
   if (href) {
     return (
       <NavigationMenuTrigger asChild chevron={false}>
-        <a href={href}>
+        <a href={href} className="pl-2 pr-1.5">
           {title}
           <CaretDown />
         </a>
diff --git a/src/components/website/LangSwitcher.tsx b/src/components/website/LangSwitcher.tsx
index f2be241f2..44df564a0 100644
--- a/src/components/website/LangSwitcher.tsx
+++ b/src/components/website/LangSwitcher.tsx
@@ -30,9 +30,9 @@ export function LangSwitcher() {
         aria-expanded={open}
         type="button"
         onClick={() => setOpen(!open)}
-        className="flex cursor-pointer items-center border-0 bg-transparent p-1 text-brand"
+        className="flex h-12 w-12 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-brand"
       >
-        <Globe size={19} aria-hidden />
+        <Globe size={28} aria-hidden />
       </button>
       {open ? (
         <div className="absolute right-0 top-full z-50 max-h-[340px] w-[200px] overflow-auto rounded-md border border-line bg-white py-1 shadow-[0_8px_24px_rgba(16,42,76,0.14)]">
diff --git a/src/components/website/SolutionArchive.tsx b/src/components/website/SolutionArchive.tsx
new file mode 100644
index 000000000..914f42d38
--- /dev/null
+++ b/src/components/website/SolutionArchive.tsx
@@ -0,0 +1,174 @@
+/**
+ * # 组件 方案归档页（/solution/ 与 /solution/page/N/ 共用）
+ * 一比一复刻原站 Elementor archive-posts 归档（widget 2da75291，skin=cards）：
+ * hero 灰底 h1 "Solution" + 卡片网格（3/2/1 列，gap 28）+ 分页。
+ * 全部几何/配色取自 2026-11-03 playwright 取证（桌面 1440/1280/1920、平板 1024、移动 390）：
+ * - hero：#eee 背景，上下 40px；h1 40px/40px 900 #000 居中；容器 1140+10 内边距
+ * - 卡片区：白底；桌面左右 192px、平板 100px 25px、移动 0；外层 margin 64px 0（移动 0）
+ * - 卡片：radius 3、阴影 0 0 10px rgba(0,0,0,.15)（hover 30px）、无边框
+ * - 缩略图：图高按原比例置于顶部 + padding-bottom 66%（移动 50%）占位，::after 黑 35%→75% 透明渐变
+ *   （base opacity 1，hover 0.5，transition .3s ease-out）
+ * - 标题 21px/1.2 600，链接 #ED6C00 400；摘录 14px/1.5 #777，底部 33px；文字区左右 30px
+ * - 分页：居中，页码 margin 0 10px，当前页 #FFA11B，当前页/端点为 span 其余为 a
+ */
+import { Link } from "@tanstack/react-router";
+import { getLayoutData, Layout } from "~/components/website/Layout";
+import { listSolutionLandings } from "~/server/data";
+import { useT } from "~/i18n";
+
+/** # 类型 方案归档页 props **/
+export type SolutionArchiveProps = { page: number };
+
+/** # 函数 加载方案归档数据（layout + 分页列表） **/
+export async function loadSolutionArchive(page: number) {
+  const [layout, list] = await Promise.all([
+    getLayoutData(),
+    listSolutionLandings(page, 12).catch(() => ({ items: [], total: 0, page: 1, pageSize: 12 })),
+  ]);
+  return { layout, list, page };
+}
+
+/** # 常量 摘录显示词数上限（原站 archive-posts excerpt_length，取证：12 张卡片全部 ≤24 词、DB 全文更长） **/
+const EXCERPT_WORDS = 24;
+
+/** # 函数 按词数截断摘录（WP wp_trim_words 语义：空白分词但 &nbsp; 相连算一个词，无省略号后缀）
+ * 参数 text DB 摘录全文；limit 词数上限
+ * 返回值 截断后的显示文本
+ */
+function trimExcerpt(text: string, limit: number) {
+  // \s 除 \u00a0 外的分隔符（PHP \s 不含 nbsp，"Smart&nbsp;Building" 是一个词）
+  const words = text.split(/[^\S\u00a0]+/).filter(Boolean);
+  return words.length > limit ? words.slice(0, limit).join(" ") : text;
+}
+
+/** # 组件 方案归档页（原站 Elementor archive 一比一） */
+export function SolutionArchive({ data }: { data: { layout: Awaited<ReturnType<typeof getLayoutData>>; list: Awaited<ReturnType<typeof listSolutionLandings>>; page: number } }) {
+  const t = useT();
+  const { list, page } = data;
+  const totalPages = Math.max(1, Math.ceil(list.total / list.pageSize));
+  /** 分页链接（原站路径 /solution/ 与 /solution/page/N/） */
+  const href = (p: number) => (p <= 1 ? "/solution/" : `/solution/page/${p}/`);
+  return (
+    <Layout layout={data.layout}>
+      <style>{SOLUTION_ARCHIVE_CSS}</style>
+      <div className="ds-solarch">
+        <div className="elementor-location-archive">
+          {/* hero：灰底 Solution 大标题 */}
+          <section className="ds-hero">
+            <div className="ds-hero-container">
+              <div className="ds-hero-col">
+                <div className="ds-widget">
+                  <h1 className="ds-heading">{t("solution_title")}</h1>
+                </div>
+              </div>
+            </div>
+          </section>
+          {/* 卡片归档 */}
+          <section className="ds-posts-section">
+            <div className="ds-container">
+              <div className="ds-col">
+                <div className="ds-widget-wrap">
+                  <div className="ds-widget ds-archive-posts">
+                    <div className="ds-posts">
+                      {list.items.map((post) => (
+                        <article className="ds-post" key={post.id}>
+                          <div className="ds-post-card">
+                            <Link to="/solution/$slug/" params={{ slug: post.slug }} className="ds-thumb-link" tabIndex={-1}>
+                              <div className="ds-thumb">
+                                {post.imageUrl ? (
+                                  <img src={post.imageUrl} alt={post.imageAlt || post.title} width={600} height={400} loading="lazy" decoding="async" />
+                                ) : null}
+                              </div>
+                            </Link>
+                            <div className="ds-post-text">
+                              <h3 className="ds-post-title">
+                                <Link to="/solution/$slug/" params={{ slug: post.slug }}>{post.title}</Link>
+                              </h3>
+                              {post.excerpt ? (
+                                <div className="ds-post-excerpt">
+                                  <p>{trimExcerpt(post.excerpt, EXCERPT_WORDS)}</p>
+                                </div>
+                              ) : null}
+                            </div>
+                          </div>
+                        </article>
+                      ))}
+                    </div>
+                    {totalPages > 1 ? (
+                      <nav className="ds-pagination" aria-label="Pagination">
+                        {page > 1 ? (
+                          <a className="ds-page-num ds-prev" href={href(page - 1)}>« Previous</a>
+                        ) : (
+                          <span className="ds-page-num ds-prev">« Previous</span>
+                        )}
+                        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) =>
+                          p === page ? (
+                            <span key={p} aria-current="page" className="ds-page-num ds-current">
+                              <span className="ds-screen-only">Page</span>
+                              {p}
+                            </span>
+                          ) : (
+                            <a key={p} className="ds-page-num" href={href(p)}>
+                              <span className="ds-screen-only">Page</span>
+                              {p}
+                            </a>
+                          ),
+                        )}
+                        {page < totalPages ? (
+                          <a className="ds-page-num ds-next" href={href(page + 1)}>Next »</a>
+                        ) : (
+                          <span className="ds-page-num ds-next">Next »</span>
+                        )}
+                      </nav>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+/** # 常量 方案归档页样式（取证值；断点 1024 平板 / 767 移动） **/
+export const SOLUTION_ARCHIVE_CSS = `
+.ds-solarch .ds-hero { background: #eee; padding: 40px 0; }
+.ds-solarch .ds-hero-container { max-width: 1140px; margin: 0 auto; }
+.ds-solarch .ds-hero-col { padding: 0 10px; }
+.ds-solarch .ds-heading { margin: 0; font-size: 40px; font-weight: 900; line-height: 40px; color: #000; text-align: center; text-transform: uppercase; }
+.ds-solarch .ds-posts-section { background: #fff; margin: 64px 0; padding: 0 192px; }
+.ds-solarch .ds-container { display: flex; }
+.ds-solarch .ds-col { width: 100%; }
+.ds-solarch .ds-widget-wrap { padding: 10px; width: 100%; }
+.ds-solarch .ds-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
+.ds-solarch .ds-post { display: flex; }
+.ds-solarch .ds-post-card { display: flex; flex-direction: column; flex: 1; background: #fff; border-radius: 3px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); transition: background .25s, box-shadow .25s; }
+.ds-solarch .ds-post:hover .ds-post-card { box-shadow: 0 0 30px 0 rgba(0,0,0,0.15); }
+.ds-solarch .ds-thumb-link { position: relative; display: block; margin: 0 0 20px; color: #ED6C00; }
+.ds-solarch .ds-thumb { position: relative; overflow: hidden; padding-bottom: 66%; }
+.ds-solarch .ds-thumb img { display: block; width: calc(100% + 1px); height: auto; margin: 0; }
+.ds-solarch .ds-thumb-link::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 75%); opacity: 1; transition: opacity .3s ease-out; pointer-events: none; }
+.ds-solarch .ds-post:hover .ds-thumb-link::after { opacity: 0.5; }
+.ds-solarch .ds-post-text { margin: 10px 0 0; padding: 0 30px; }
+.ds-solarch .ds-post-title { margin: 0 0 12px; font-size: 21px; font-weight: 600; line-height: 1.2; color: #333; }
+.ds-solarch .ds-post-title a { color: #ED6C00; font-weight: 400; }
+.ds-solarch .ds-post-excerpt { margin: 0 0 33px; }
+.ds-solarch .ds-post-excerpt p { margin: 0; font-size: 14px; line-height: 1.5; color: #777; }
+.ds-solarch .ds-pagination { margin: 40px 0 0; font-size: 16px; line-height: 24px; text-align: center; }
+.ds-solarch .ds-page-num { display: inline; margin: 0 10px; color: #000; text-decoration: none; }
+.ds-solarch .ds-page-num.ds-prev { margin: 0 10px 0 0; }
+.ds-solarch .ds-page-num.ds-next { margin: 0 0 0 10px; }
+.ds-solarch .ds-page-num.ds-current { color: #FFA11B; }
+.ds-solarch .ds-screen-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
+@media (max-width: 1024px) {
+  .ds-solarch .ds-posts-section { margin: 64px 0; padding: 100px 25px; }
+  .ds-solarch .ds-posts { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 767px) {
+  .ds-solarch .ds-posts-section { margin: 0; padding: 0; }
+  .ds-solarch .ds-posts { grid-template-columns: 1fr; }
+  .ds-solarch .ds-thumb { padding-bottom: 50%; }
+}
+`;
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 442a707b8..e6fbaf125 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -113,7 +113,7 @@ export const en = {
   nf_contact: "Contact Us",
 
   /** 方案页 */
-  solution_title: "SOLUTION",
+  solution_title: "Solution",
 };
 
 /** # 类型 词典形状（其它语言按 Partial<Dict> 提供即可） **/
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 9cc788bce..988f84859 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -33,6 +33,7 @@ import { Route as BlogSlugRouteImport } from './routes/blog.$slug'
 import { Route as CollectionIndexRouteImport } from './routes/collection.index'
 import { Route as CollectionSlugRouteImport } from './routes/collection.$slug'
 import { Route as ProductSlugRouteImport } from './routes/product.$slug'
+import { Route as SolutionIndexRouteImport } from './routes/solution.index'
 import { Route as SolutionSlugRouteImport } from './routes/solution.$slug'
 import { Route as AdminContentsIndexRouteImport } from './routes/admin.contents.index'
 import { Route as AdminContentsIdRouteImport } from './routes/admin.contents.$id'
@@ -40,6 +41,7 @@ import { Route as AdminOrdersIndexRouteImport } from './routes/admin.orders.inde
 import { Route as AdminOrdersIdRouteImport } from './routes/admin.orders.$id'
 import { Route as AdminProductsIndexRouteImport } from './routes/admin.products.index'
 import { Route as AdminProductsIdRouteImport } from './routes/admin.products.$id'
+import { Route as SolutionPagePageRouteImport } from './routes/solution.page.$page'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -161,6 +163,11 @@ const ProductSlugRoute = ProductSlugRouteImport.update({
   path: '/product/$slug',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SolutionIndexRoute = SolutionIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => SolutionRoute,
+} as any)
 const SolutionSlugRoute = SolutionSlugRouteImport.update({
   id: '/$slug',
   path: '/$slug',
@@ -196,6 +203,11 @@ const AdminProductsIdRoute = AdminProductsIdRouteImport.update({
   path: '/products/$id',
   getParentRoute: () => AdminRoute,
 } as any)
+const SolutionPagePageRoute = SolutionPagePageRouteImport.update({
+  id: '/page/$page',
+  path: '/page/$page',
+  getParentRoute: () => SolutionRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -223,9 +235,11 @@ export interface FileRoutesByFullPath {
   '/admin/': typeof AdminIndexRoute
   '/blog/': typeof BlogIndexRoute
   '/collection/': typeof CollectionIndexRoute
+  '/solution/': typeof SolutionIndexRoute
   '/admin/contents/$id': typeof AdminContentsIdRoute
   '/admin/orders/$id': typeof AdminOrdersIdRoute
   '/admin/products/$id': typeof AdminProductsIdRoute
+  '/solution/page/$page': typeof SolutionPagePageRoute
   '/admin/contents/': typeof AdminContentsIndexRoute
   '/admin/orders/': typeof AdminOrdersIndexRoute
   '/admin/products/': typeof AdminProductsIndexRoute
@@ -241,7 +255,6 @@ export interface FileRoutesByTo {
   '/search': typeof SearchRoute
   '/shop': typeof ShopRoute
   '/sitemap.xml': typeof SitemapDotxmlRoute
-  '/solution': typeof SolutionRouteWithChildren
   '/admin/filters': typeof AdminFiltersRoute
   '/admin/inquiries': typeof AdminInquiriesRoute
   '/admin/languages': typeof AdminLanguagesRoute
@@ -255,9 +268,11 @@ export interface FileRoutesByTo {
   '/admin': typeof AdminIndexRoute
   '/blog': typeof BlogIndexRoute
   '/collection': typeof CollectionIndexRoute
+  '/solution': typeof SolutionIndexRoute
   '/admin/contents/$id': typeof AdminContentsIdRoute
   '/admin/orders/$id': typeof AdminOrdersIdRoute
   '/admin/products/$id': typeof AdminProductsIdRoute
+  '/solution/page/$page': typeof SolutionPagePageRoute
   '/admin/contents': typeof AdminContentsIndexRoute
   '/admin/orders': typeof AdminOrdersIndexRoute
   '/admin/products': typeof AdminProductsIndexRoute
@@ -289,9 +304,11 @@ export interface FileRoutesById {
   '/admin/': typeof AdminIndexRoute
   '/blog/': typeof BlogIndexRoute
   '/collection/': typeof CollectionIndexRoute
+  '/solution/': typeof SolutionIndexRoute
   '/admin/contents/$id': typeof AdminContentsIdRoute
   '/admin/orders/$id': typeof AdminOrdersIdRoute
   '/admin/products/$id': typeof AdminProductsIdRoute
+  '/solution/page/$page': typeof SolutionPagePageRoute
   '/admin/contents/': typeof AdminContentsIndexRoute
   '/admin/orders/': typeof AdminOrdersIndexRoute
   '/admin/products/': typeof AdminProductsIndexRoute
@@ -324,9 +341,11 @@ export interface FileRouteTypes {
     | '/admin/'
     | '/blog/'
     | '/collection/'
+    | '/solution/'
     | '/admin/contents/$id'
     | '/admin/orders/$id'
     | '/admin/products/$id'
+    | '/solution/page/$page'
     | '/admin/contents/'
     | '/admin/orders/'
     | '/admin/products/'
@@ -342,7 +361,6 @@ export interface FileRouteTypes {
     | '/search'
     | '/shop'
     | '/sitemap.xml'
-    | '/solution'
     | '/admin/filters'
     | '/admin/inquiries'
     | '/admin/languages'
@@ -356,9 +374,11 @@ export interface FileRouteTypes {
     | '/admin'
     | '/blog'
     | '/collection'
+    | '/solution'
     | '/admin/contents/$id'
     | '/admin/orders/$id'
     | '/admin/products/$id'
+    | '/solution/page/$page'
     | '/admin/contents'
     | '/admin/orders'
     | '/admin/products'
@@ -389,9 +409,11 @@ export interface FileRouteTypes {
     | '/admin/'
     | '/blog/'
     | '/collection/'
+    | '/solution/'
     | '/admin/contents/$id'
     | '/admin/orders/$id'
     | '/admin/products/$id'
+    | '/solution/page/$page'
     | '/admin/contents/'
     | '/admin/orders/'
     | '/admin/products/'
@@ -587,6 +609,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProductSlugRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/solution/': {
+      id: '/solution/'
+      path: '/'
+      fullPath: '/solution/'
+      preLoaderRoute: typeof SolutionIndexRouteImport
+      parentRoute: typeof SolutionRoute
+    }
     '/solution/$slug': {
       id: '/solution/$slug'
       path: '/$slug'
@@ -636,6 +665,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminProductsIdRouteImport
       parentRoute: typeof AdminRoute
     }
+    '/solution/page/$page': {
+      id: '/solution/page/$page'
+      path: '/page/$page'
+      fullPath: '/solution/page/$page'
+      preLoaderRoute: typeof SolutionPagePageRouteImport
+      parentRoute: typeof SolutionRoute
+    }
   }
 }
 
@@ -675,10 +711,14 @@ const AdminRouteWithChildren = AdminRoute._addFileChildren(AdminRouteChildren)
 
 interface SolutionRouteChildren {
   SolutionSlugRoute: typeof SolutionSlugRoute
+  SolutionIndexRoute: typeof SolutionIndexRoute
+  SolutionPagePageRoute: typeof SolutionPagePageRoute
 }
 
 const SolutionRouteChildren: SolutionRouteChildren = {
   SolutionSlugRoute: SolutionSlugRoute,
+  SolutionIndexRoute: SolutionIndexRoute,
+  SolutionPagePageRoute: SolutionPagePageRoute,
 }
 
 const SolutionRouteWithChildren = SolutionRoute._addFileChildren(
diff --git a/src/routes/solution.$slug.tsx b/src/routes/solution.$slug.tsx
index cffa199ab..5a5be7a71 100644
--- a/src/routes/solution.$slug.tsx
+++ b/src/routes/solution.$slug.tsx
@@ -6,6 +6,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { getLayoutData, Layout } from "~/components/website/Layout";
 import { ElementorRenderer, extractElementor } from "~/components/elementor/Renderer";
 import { getPublishedContent } from "~/server/data";
+import { resolveImageVariants } from "~/utils/image-variant";
 
 export const Route = createFileRoute("/solution/$slug")({
   loader: async ({ params }) => {
@@ -15,6 +16,8 @@ export const Route = createFileRoute("/solution/$slug")({
     ]);
     if (!page || !extractElementor(page.meta)) return { layout, page: null };
     const meta = (page.meta ?? null) as Record<string, unknown> | null;
+    // image widget 的 WP 尺寸变体（medium/thumbnail）解析为本地 -300x272 类文件
+    resolveImageVariants(meta?.elementor);
     return { layout, page: { ...page, meta } };
   },
   head: ({ loaderData }) => ({
@@ -42,7 +45,9 @@ function SolutionPage() {
   const elementor = extractElementor(data.page.meta);
   return (
     <Layout layout={data.layout}>
-      {elementor ? <ElementorRenderer doc={elementor} /> : null}
+      {elementor ? (
+        <ElementorRenderer doc={elementor} pageCss={(data.page.meta as Record<string, unknown> | null)?.page_css as string | undefined} />
+      ) : null}
     </Layout>
   );
 }
diff --git a/src/routes/solution.index.tsx b/src/routes/solution.index.tsx
new file mode 100644
index 000000000..eff03bfd6
--- /dev/null
+++ b/src/routes/solution.index.tsx
@@ -0,0 +1,24 @@
+/**
+ * # 路由 方案归档 /solution/
+ * 原站 Elementor archive-posts 归档一比一复刻（SolutionArchive 组件，第 1 页）。
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { SolutionArchive, loadSolutionArchive } from "~/components/website/SolutionArchive";
+
+export const Route = createFileRoute("/solution/")({
+  loader: () => loadSolutionArchive(1),
+  head: () => ({
+    meta: [
+      { title: "IoT Gateways & Devices Solution - DusunIoT" },
+      { name: "description", content: "Dusun IoT hardware solutions for smart home, smart apartment, energy storage, vehicle IoT, retail, building and more." },
+    ],
+    links: [{ rel: "canonical", href: "https://www.dusuniot.com/solution/" }],
+  }),
+  component: SolutionArchivePage,
+});
+
+/** # 组件 方案归档页（第 1 页） */
+function SolutionArchivePage() {
+  const data = Route.useLoaderData();
+  return <SolutionArchive data={data} />;
+}
diff --git a/src/routes/solution.page.$page.tsx b/src/routes/solution.page.$page.tsx
new file mode 100644
index 000000000..52031d19c
--- /dev/null
+++ b/src/routes/solution.page.$page.tsx
@@ -0,0 +1,28 @@
+/**
+ * # 路由 方案归档分页 /solution/page/$page/
+ * 与原站一致的第 2+ 页归档（每页 12 篇，日期倒序）；越界页返回空网格（原站 200）。
+ */
+import { createFileRoute } from "@tanstack/react-router";
+import { SolutionArchive, loadSolutionArchive } from "~/components/website/SolutionArchive";
+
+export const Route = createFileRoute("/solution/page/$page")({
+  loader: async ({ params }) => {
+    const n = Number(params.page);
+    return loadSolutionArchive(Number.isFinite(n) && n > 1 ? Math.floor(n) : 1);
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      {
+        title: `IoT Gateways & Devices Solution - Page ${loaderData?.page ?? 2} of ${loaderData ? Math.max(1, Math.ceil(loaderData.list.total / loaderData.list.pageSize)) : 2} - DusunIoT`,
+      },
+      { name: "description", content: "Dusun IoT hardware solutions for smart home, smart apartment, energy storage, vehicle IoT, retail, building and more." },
+    ],
+  }),
+  component: SolutionArchivePagedPage,
+});
+
+/** # 组件 方案归档分页页 */
+function SolutionArchivePagedPage() {
+  const data = Route.useLoaderData();
+  return <SolutionArchive data={data} />;
+}
diff --git a/src/routes/solution.tsx b/src/routes/solution.tsx
index 85f2bad8d..0b72005c3 100644
--- a/src/routes/solution.tsx
+++ b/src/routes/solution.tsx
@@ -1,59 +1,8 @@
 /**
- * # 路由 方案索引 /solution/
- * 原站形态：SOLUTION 大标题 + 3 列方案卡片网格（图 / 标题 / 摘要）。
- * 卡片数据 = listSolutionLandings()（同 slug 方案落地页）。
+ * # 路由 /solution 布局
+ * 原站 /solution/（归档）、/solution/page/N/（归档分页）、/solution/$slug/（方案落地页）
+ * 共享该前缀。本路由只做布局挂载点（无 component 时 TanStack 直接渲染子路由 Outlet）。
  */
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { getLayoutData, Layout } from "~/components/website/Layout";
-import { listSolutionLandings } from "~/server/data";
-import { useT } from "~/i18n";
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/solution")({
-  loader: async () => {
-    const [layout, solutions] = await Promise.all([
-      getLayoutData(),
-      listSolutionLandings().catch(() => []),
-    ]);
-    return { layout, solutions };
-  },
-  head: () => ({
-    meta: [
-      { title: "IoT Solutions | Dusun IoT" },
-      { name: "description", content: "Dusun IoT hardware solutions for smart home, smart apartment, energy storage, vehicle IoT, retail, building and more." },
-    ],
-  }),
-  component: SolutionIndexPage,
-});
-
-/** # 组件 方案索引页 */
-function SolutionIndexPage() {
-  const t = useT();
-  const data = Route.useLoaderData();
-  return (
-    <Layout layout={data.layout}>
-      <div className="bg-[#f5f5f6] px-4 pt-[34px] pb-[30px] text-center">
-        <h1 className="m-0 text-[34px] tracking-wide">{t("solution_title")}</h1>
-      </div>
-      <div className="site-container my-10">
-        <div className="grid grid-cols-1 gap-6 min-[760px]:grid-cols-2 min-[1080px]:grid-cols-3">
-          {data.solutions.map((s) => (
-            <Link
-              key={s.id}
-              to="/solution/$slug/"
-              params={{ slug: s.slug }}
-              className="block overflow-hidden rounded-lg border border-line bg-white transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(16,42,76,0.1)]"
-            >
-              <div className="aspect-[4/3] overflow-hidden bg-gradient-to-b from-[#9aa3ad] to-[#c9ced4]">
-                {s.imageUrl ? <img src={s.imageUrl} alt={s.imageAlt || s.title} loading="lazy" className="h-full w-full object-cover" /> : null}
-              </div>
-              <div className="p-5">
-                <h2 className="mt-0 mb-2 text-[18px] font-semibold text-brand">{s.title}</h2>
-                {s.excerpt ? <p className="m-0 text-sm leading-relaxed text-muted-foreground">{s.excerpt.slice(0, 160)}</p> : null}
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-    </Layout>
-  );
-}
+export const Route = createFileRoute("/solution")({});
diff --git a/src/server/data.ts b/src/server/data.ts
index 4e59129a1..922284543 100644
--- a/src/server/data.ts
+++ b/src/server/data.ts
@@ -373,9 +373,9 @@ function firstUploadedImage(meta: unknown): string | null {
 /** # 类型 博客列表项（列表卡片 + 文章页侧栏/相关文章复用） */
 export type PostListItem = Awaited<ReturnType<typeof listPosts>>["items"][number];
 
-/** # 成员变量 /solution/ 索引页展示的方案落地页 slug（与原站 SOLUTION 索引卡片一一对应） **/
+/** # 成员变量 /solution/ 归档展示的方案落地页 slug（原站 category-solution 全部 14 篇） **/
 export const SOLUTION_SLUGS = [
-  "smart-apartment-solution",
+  "smart-apartment-gateway",
   "smart-apartment-gateway-oem",
   "oil-gas-management-solution",
   "energy-storage-ems-solution",
@@ -384,32 +384,47 @@ export const SOLUTION_SLUGS = [
   "smart-building-solution",
   "smart-retail-solution",
   "smart-home-solution",
+  "smart-apartment-solution",
   "smart-elderly-care-solution",
   "ble-positioning-solution",
+  "ble-mesh-lighting-control-solution",
+  "home-assistant-grow-lighting-solution",
 ] as const;
 
-/** # 函数 方案落地页列表（/solution/ 索引卡片：标题 + 摘要 + 图）
- * 返回值 按 SOLUTION_SLUGS 顺序的已发布 elementor 方案页（缺省跳过）
+/** # 函数 方案归档列表（/solution/ 索引卡片：标题 + 摘要 + 图）
+ * 与原站 Elementor archive-posts 一致：按发布时间倒序、每页 12 篇（第 1 页 12 篇 + 分页）。
+ * 参数 page 页码（1 起）；pageSize 每页条数（默认 12）
+ * 返回值 { items, total, page, pageSize }
  */
-export async function listSolutionLandings() {
+export async function listSolutionLandings(page = 1, pageSize = 12) {
+  const conds = [eq(contents.type, "post"), eq(contents.status, "published"), inArray(contents.slug, [...SOLUTION_SLUGS])];
+  const [{ n: total }] = await db
+    .select({ n: count() })
+    .from(contents)
+    .where(and(...conds));
   const rows = await db
     .select({
       id: contents.id,
       slug: contents.slug,
       title: contents.title,
       excerpt: contents.excerpt,
+      publishedAt: contents.publishedAt,
       imageUrl: media.url,
       imageAlt: media.altText,
       hasElementor: sql<boolean>`(meta -> 'elementor') is not null`,
     })
     .from(contents)
     .leftJoin(media, eq(media.id, contents.featuredMediaId))
-    .where(and(eq(contents.type, "post"), eq(contents.status, "published"), inArray(contents.slug, [...SOLUTION_SLUGS])));
-  const bySlug = new Map(rows.map((r) => [r.slug, r]));
-  return [...SOLUTION_SLUGS]
-    .map((s) => bySlug.get(s))
-    .filter((r) => !!r)
-    .map((r) => ({ ...r, title: decodeHtmlEntities(r.title) }));
+    .where(and(...conds))
+    .orderBy(desc(contents.publishedAt))
+    .limit(pageSize)
+    .offset((page - 1) * pageSize);
+  return {
+    items: rows.map((r) => ({ ...r, title: decodeHtmlEntities(r.title), excerpt: r.excerpt ?? "" })),
+    total,
+    page,
+    pageSize,
+  };
 }
 
 export async function listPosts(page = 1, pageSize = 12, categorySlug?: string) {
diff --git a/src/utils/image-variant.ts b/src/utils/image-variant.ts
new file mode 100644
index 000000000..d64443895
--- /dev/null
+++ b/src/utils/image-variant.ts
@@ -0,0 +1,88 @@
+/**
+ * # 模块 Elementor 图片 WP 尺寸变体解析（仅服务端）
+ * 原站 image widget 的 image_size=medium/thumbnail/... 时 WP 渲染 -300x272 这类裁剪/缩放
+ * 变体文件；dump 的 image.url 只存原图。这里在服务端按 uploads 目录里实际存在的
+ * `<base>-<w>x<h>.<ext>` 变体择优改写 image.url（选宽度 ≤ 目标里最大的；无变体保持原图）。
+ */
+import { readdirSync } from "node:fs";
+import { join, dirname } from "node:path";
+
+/** # 常量 WP 尺寸名 → 目标宽度（Elementor 常用档位） **/
+const SIZE_TARGET: Record<string, number> = {
+  thumbnail: 150,
+  medium: 300,
+  medium_large: 768,
+  large: 1024,
+};
+
+/** # 成员变量 目录列表缓存（同一目录只扫一次盘） **/
+const dirCache = new Map<string, string[]>();
+
+/** # 成员变量 变体解析结果缓存（url+size → 最终 url） **/
+const resultCache = new Map<string, string>();
+
+/** # 函数 查找某原图在给定目标宽度下的最佳变体 URL（无则返回 null）
+ * 参数 url 原图 URL（本地 /uploads/... 或原站绝对地址）；targetWidth WP 档位目标宽
+ */
+function findVariant(url: string, targetWidth: number): string | null {
+  // 归一化到本地 /uploads/ 路径（dump 里可能存原站绝对地址）
+  const up = url.indexOf("/uploads/");
+  if (up === -1) return null;
+  const localPath = url.slice(up); // /uploads/2022/06/Group-201.png
+  const m = localPath.match(/^(.*\/)([^/]+)\.(\w+)$/);
+  if (!m) return null;
+  const [, dir, base, ext] = m;
+  const fsDir = join("public", dir);
+  let files = dirCache.get(fsDir);
+  if (!files) {
+    try {
+      files = readdirSync(fsDir);
+    } catch {
+      files = [];
+    }
+    dirCache.set(fsDir, files);
+  }
+  // 候选：<base>-<w>x<h>.<ext>；取宽度 ≤ 目标里最大的（同宽取更矮的，WP medium 缩放优先于裁剪）
+  const prefix = `${base}-`;
+  let best: { w: number; h: number; file: string } | null = null;
+  for (const f of files) {
+    const fm = f.match(new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(\\d+)x(\\d+)\\.${ext}$`));
+    if (!fm) continue;
+    const w = Number(fm[1]);
+    const h = Number(fm[2]);
+    if (w > targetWidth) continue;
+    if (!best || w > best.w || (w === best.w && h < best.h)) best = { w, h, file: f };
+  }
+  return best ? `${dir}${best.file}` : null;
+}
+
+/** # 函数 就地解析文档内 image widget 的尺寸变体（服务端 loader 调用；浏览器端空操作）
+ * 参数 doc elementor 文档（数组或 {elements} 包装），image.url 被改写为变体地址
+ */
+export function resolveImageVariants(doc: unknown): void {
+  if (typeof window !== "undefined") return;
+  const walk = (el: unknown) => {
+    if (Array.isArray(el)) {
+      for (const x of el) walk(x);
+      return;
+    }
+    if (!el || typeof el !== "object") return;
+    const e = el as { id?: unknown; widgetType?: unknown; settings?: Record<string, unknown>; elements?: unknown[] };
+    if (e.widgetType === "image") {
+      const st = e.settings ?? {};
+      const target = SIZE_TARGET[String(st.image_size ?? "")];
+      const img = st.image as { url?: string } | undefined;
+      if (target && img?.url && img.url.includes("/uploads/")) {
+        const key = `${img.url}|${target}`;
+        let resolved = resultCache.get(key);
+        if (resolved === undefined) {
+          resolved = findVariant(img.url, target) ?? "";
+          resultCache.set(key, resolved);
+        }
+        if (resolved) img.url = resolved;
+      }
+    }
+    for (const c of Array.isArray(e.elements) ? e.elements : []) walk(c);
+  };
+  walk(doc);
+}