v0.10.24: /contact-us/ 一比一复刻（CF7 604 表单/通栏 hero/列宽修复）+ PG 连接池 HMR 泄漏修复

src/components/elementor/Renderer.tsx

@@ -8,7 +8,7 @@
 import { Component, createContext, useContext, Fragment, useEffect, useState, type CSSProperties, type ReactNode } from "react";
 import { getLatestPosts, getLatestProducts, type LatestItem, type PostCardItem } from "~/server/data";
 import TickerBar from "~/components/website/TickerBar";
-import { InquiryForm } from "~/components/website/InquiryForm";
+import { Cf7Form604 } from "~/components/website/Cf7Form604";
 import { localSiteUrl } from "~/utils/media";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
@@ -384,14 +384,22 @@ function collectResponsiveCss(elements: ElElement[]): string {
         if (fsM) css += `@media (max-width:767px){${sel} .el-heading-title{font-size:${fsM} !important;}}\n`;
       }
     }
-    // 列响应式宽度（_inline_size_tablet / _inline_size_mobile；页脚内层四列 43%/100%）
-    const tw = st._inline_size_tablet;
-    const mw = st._inline_size_mobile;
-    if (typeof tw === "number" && tw > 0) {
+    // 列响应式宽度（_inline_size_tablet / _inline_size_mobile；页脚内层四列 43%/100%）。
+    // Elementor 语义：桌面 _inline_size 仅 ≥768 生效（原站 post-840.css 的 min-width:768 门），
+    // 未设 _inline_size_mobile 的列在 ≤767 回退 100%（Elementor frontend.css 的
+    // @media(max-width:767px){.elementor-column{width:100%}}）——联系页 60/40 两列移动端堆叠。
+    // 值既有数字也有字符串（联系页 _inline_size="60"），统一转数值。
+    const num = (v: unknown) => (typeof v === "number" ? v : v != null && v !== "" ? Number(v) : NaN);
+    const tw = num(st._inline_size_tablet);
+    const mw = num(st._inline_size_mobile);
+    const dw = num(st._inline_size);
+    if (Number.isFinite(tw) && tw > 0) {
       css += `@media (max-width:1024px){${sel}{flex:0 0 ${tw}% !important;max-width:${tw}% !important;}}\n`;
     }
-    if (typeof mw === "number" && mw > 0) {
+    if (Number.isFinite(mw) && mw > 0) {
       css += `@media (max-width:767px){${sel}{flex:0 0 ${mw}% !important;max-width:${mw}% !important;}}\n`;
+    } else if (Number.isFinite(dw) && dw > 0) {
+      css += `@media (max-width:767px){${sel}{flex:0 0 100% !important;max-width:100% !important;}}\n`;
     }
     // icon-list 响应式项间距（space_between_tablet/mobile：页脚社交 10 → 7px）
     if (s(el.widgetType) === "icon-list") {
@@ -404,6 +412,11 @@ function collectResponsiveCss(elements: ElElement[]): string {
       if (smHalf) {
         css += `@media (max-width:767px){${inlineItems}{margin-inline:-${smHalf} !important;}${inlineItems} > .elementor-icon-list-item{margin-inline:${smHalf} !important;}}\n`;
       }
+      // 移动端行高（icon_typography_line_height_mobile：联系页地址列 1.25rem，post-840.css 生成规则）
+      const lhM = sizeCss(st.icon_typography_line_height_mobile);
+      if (lhM) {
+        css += `@media (max-width:767px){${sel} .elementor-icon-list-item > .elementor-icon-list-text,${sel} .elementor-icon-list-item > a{line-height:${lhM} !important;}}\n`;
+      }
     }
   }
   function walk(els: ElElement[]) {
@@ -501,6 +514,11 @@ function SectionNode({ el }: { el: ElElement }) {
     const bc = s(settings.border_color);
     if (bc) style.borderColor = bc;
   }
+  // section 阴影（Elementor box_shadow 控件；联系页 5ed2d55 = 0 10px 50px rgba(71,77,255,.2)）
+  const sh = settings.box_shadow_box_shadow as { horizontal?: number; vertical?: number; blur?: number; spread?: number; color?: string } | undefined;
+  if (sh && (sh.blur || sh.spread || sh.horizontal || sh.vertical)) {
+    style.boxShadow = `${sh.horizontal || 0}px ${sh.vertical || 0}px ${sh.blur || 0}px ${sh.spread || 0}px ${sh.color || "rgba(0,0,0,0.5)"}`;
+  }
   // 列内容垂直对齐（content_position=middle → align-items:center；页脚 d834160 实测）
   const contentPos = s(settings.content_position);
   if (contentPos === "middle") inner.alignItems = "center";
@@ -547,8 +565,10 @@ function boxNonZero(v: unknown): boolean {
 function ColumnNode({ el, gapPad, contentPos }: { el: ElElement; gapPad?: string; contentPos?: string }) {
   const settings = resolveGlobals(el.settings || {});
   const outer: CSSProperties = { minWidth: 0, flex: "1 1 0" };
-  const inline = settings._inline_size;
-  if (typeof inline === "number" && inline > 0) {
+  // _inline_size 既有数字也有字符串（联系页 ec3c8ff = "60"，原站生成 width:60%），统一转数值
+  const inlineRaw = settings._inline_size;
+  const inline = typeof inlineRaw === "number" ? inlineRaw : inlineRaw != null && inlineRaw !== "" ? Number(inlineRaw) : NaN;
+  if (Number.isFinite(inline) && inline > 0) {
     outer.flex = `0 0 ${inline}%`;
     outer.maxWidth = `${inline}%`;
   }
@@ -753,7 +773,7 @@ function WidgetNodeInner({ el }: { el: ElElement }) {
     case "social-icons":
       return <SocialIconsWidget settings={settings} />;
     case "eael-contact-form-7":
-      return <ContactFormWidget settings={settings} />;
+      return <ContactFormWidget el={el} settings={settings} />;
     case "video":
       return <VideoWidget settings={settings} />;
     case "counter":
@@ -1133,11 +1153,49 @@ function SocialIconsWidget({ settings }: { settings: Record<string, unknown> })
 }
 
 
-/** # 组件 eael-contact-form-7（EAEL Contact Form 7 皮肤）：渲染内置询盘表单 */
-function ContactFormWidget({ settings }: { settings: Record<string, unknown> }) {
+/** # 组件 eael-contact-form-7（EAEL Contact Form 7 皮肤）：渲染 CF7 604 忠实表单
+ * DOM 层级仿 EAEL 输出：eael-contact-form-7-wrapper > eael-contact-form.eael-contact-form-7 > wpcf7 > form。
+ * 控件样式按原站 post-840.css 生成规则 + widget 设置生成节点级 <style>
+ * （字段 1px #C9CEE8 边框/圆角 3、textarea 134px、select #efefef/#757575、提交 #ED6C00→#FFA11B）。
+ * 基础规则用 :where() 降特异性（0,0,0），保证页面注入的 custom_css
+ * （.ele-new-form4-dif 的 p 两列浮动布局、submit 全宽等）与响应式规则优先生效。
+ */
+function ContactFormWidget({ el, settings }: { el: ElElement; settings: Record<string, unknown> }) {
+  const sid = el.id;
+  const fieldBorder = s(settings.field_border_color) || "#C9CEE8";
+  const taH = sizeCss(settings.textarea_height) || "134px";
+  const btnRadius = paddingCss(settings.button_border_radius) || "3px";
+  const css = `
+[data-el="${sid}"] :where(.wpcf7-form p){margin:0 0 20px}
+[data-el="${sid}"] :where(.wpcf7-form label){display:block;margin-bottom:0;line-height:1;font-size:16px;color:#333}
+[data-el="${sid}"] :where(.wpcf7-form-control-wrap){display:block}
+[data-el="${sid}"] :where(.wpcf7-text,.wpcf7-email,.wpcf7-tel,.wpcf7-select,.wpcf7-textarea){width:100%;height:42px;padding:8px 16px;margin:0;border:1px solid ${fieldBorder};border-radius:3px;background:#fff;color:#000;font-size:16px;line-height:24px;font-family:inherit}
+[data-el="${sid}"] :where(.wpcf7-select){padding:10px 12px 9px;background:#efefef;color:#757575}
+[data-el="${sid}"] :where(.wpcf7-textarea){height:${taH};line-height:1.5;resize:vertical}
+[data-el="${sid}"] :where(input[type=submit]){width:100%;height:44px;margin:10px 0 0;padding:10px 20px;border:0;border-radius:${btnRadius};background:#ED6C00;color:#fff;font-size:16px;line-height:24px;cursor:pointer;transition:background .25s linear}
+[data-el="${sid}"] :where(input[type=submit]:hover){background:#FFA11B}
+[data-el="${sid}"] :where(.wpcf7-list-item){display:inline-block;margin:0 !important}
+[data-el="${sid}"] :where(.wpcf7-list-item > label){display:block;font-size:14px}
+[data-el="${sid}"] :where(.wpcf7-list-item input[type=checkbox]){margin:0 0 3px;vertical-align:middle}
+[data-el="${sid}"] :where(.wpcf7-list-item-label){color:#9396A1;font-size:0.875rem;line-height:1}
+[data-el="${sid}"] :where(.wpcf7-list-item-label a){color:#9396A1}
+[data-el="${sid}"] :where(.ds-recaptcha-note){color:#9396A1;font-size:0.875rem}
+[data-el="${sid}"] :where(.ds-recaptcha-note a){color:#9396A1}
+[data-el="${sid}"] :where(.ds-submit-p){margin:0 !important}
+[data-el="${sid}"] :where(.wpcf7-spinner){display:inline-block;position:relative;visibility:hidden;opacity:0.75;width:24px;height:24px;margin:0 24px;border:none;border-radius:100%;background-color:#23282d}
+[data-el="${sid}"] :where(.wpcf7-response-output){margin:0 0.5em 2em;padding:0.2em 1em;border:2px solid transparent;font-size:16px}
+[data-el="${sid}"] :where(.wpcf7-response-output.ds-ok){border-color:#46b450}
+[data-el="${sid}"] :where(.wpcf7-response-output.ds-err){border-color:#dc3232}
+[data-el="${sid}"] :where(.wpcf7-response-output[aria-hidden="true"]){display:none}
+`;
   return (
-    <div className="mb-[18px] rounded-md bg-white px-7 py-[26px]">
-      <InquiryForm formKey="contact-us-form" title={undefined} />
+    <div className="eael-contact-form-7-wrapper">
+      <style>{css}</style>
+      <div className="eael-contact-form eael-contact-form-7">
+        <div className="wpcf7">
+          <Cf7Form604 formKey="contact-form-1" spinner />
+        </div>
+      </div>
     </div>
   );
 }