83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
/**
|
||
* # 路由 联系页 /contact-us/
|
||
* 有 Elementor 内容则渲染；否则标准布局：联系方式卡片 + 询盘表单。
|
||
*/
|
||
import { createFileRoute } from "@tanstack/react-router";
|
||
import { createServerFn } from "@tanstack/react-start";
|
||
import { getLayoutData, Layout } from "~/components/website/Layout";
|
||
import { ElementorRenderer, extractElementor } from "~/components/elementor/Renderer";
|
||
import { InquiryForm } from "~/components/website/InquiryForm";
|
||
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "~/components/ui/breadcrumb";
|
||
import { getPublishedContent } from "~/server/data";
|
||
|
||
export const Route = createFileRoute("/contact-us")({
|
||
// loader 本体抽为 Server Function（客户端导航在浏览器重跑 loader，db 依赖必须在服务端执行）
|
||
loader: () => loadContactData(),
|
||
head: ({ loaderData }) => ({
|
||
meta: [
|
||
{ title: loaderData?.page?.seoTitle || "Contact Us | Dusun IoT" },
|
||
{ name: "description", content: loaderData?.page?.seoDescription || "Contact Dusun IoT for IoT gateway solutions, OEM/ODM customization and technical support. Email sales@dusuniot.com." },
|
||
],
|
||
}),
|
||
component: ContactPage,
|
||
});
|
||
|
||
/** # 函数 联系页数据加载（Server Function：客户端导航时由服务端执行） */
|
||
const loadContactData = createServerFn({ method: "GET" }).handler(async (): Promise<any> => {
|
||
const [layout, page] = await Promise.all([
|
||
getLayoutData(),
|
||
getPublishedContent("contact-us", "page").catch(() => null),
|
||
]);
|
||
const meta = (page?.meta ?? null) as Record<string, unknown> | null;
|
||
return { layout, page, meta };
|
||
});
|
||
|
||
/** # 组件 联系页（原站为 full-canvas Elementor 模板：hero 通栏 + 表单卡叠压，不加 site-container） */
|
||
function ContactPage() {
|
||
const data = Route.useLoaderData();
|
||
const elementor = extractElementor(data.meta);
|
||
return (
|
||
<Layout layout={data.layout}>
|
||
{elementor ? (
|
||
<ElementorRenderer doc={elementor} />
|
||
) : (
|
||
<div className="site-container">
|
||
<Breadcrumb className="pt-6" aria-label="Breadcrumb">
|
||
<BreadcrumbList>
|
||
<BreadcrumbItem><BreadcrumbLink to="/">Home</BreadcrumbLink></BreadcrumbItem>
|
||
<BreadcrumbSeparator />
|
||
<BreadcrumbItem><BreadcrumbPage>Contact Us</BreadcrumbPage></BreadcrumbItem>
|
||
</BreadcrumbList>
|
||
</Breadcrumb>
|
||
<h1 className="mt-0 text-[28px]">Contact Us</h1>
|
||
<div className="mb-8 grid grid-cols-1 gap-[18px] min-[800px]:grid-cols-3">
|
||
<div className="rounded-lg border border-line bg-soft p-5">
|
||
<h3 className="mt-0">Sales & Inquiries</h3>
|
||
<p>
|
||
Email: <a href="mailto:sales@dusuniot.com">sales@dusuniot.com</a>
|
||
<br />
|
||
Tel: +86 755 2643 0850
|
||
</p>
|
||
</div>
|
||
<div className="rounded-lg border border-line bg-soft p-5">
|
||
<h3 className="mt-0">Visit Us</h3>
|
||
<p>
|
||
5F, Building B, Henglong Industrial Park,
|
||
<br />
|
||
Xili, Nanshan District, Shenzhen, Guangdong, China
|
||
</p>
|
||
</div>
|
||
<div className="rounded-lg border border-line bg-soft p-5">
|
||
<h3 className="mt-0">Support</h3>
|
||
<p>24/7 technical support for OEM/ODM partners. Response within 24 hours on business days.</p>
|
||
</div>
|
||
</div>
|
||
<section className="mt-4 mb-14">
|
||
<InquiryForm formKey="contact-us-form" title="Get a Quote" />
|
||
</section>
|
||
</div>
|
||
)}
|
||
</Layout>
|
||
);
|
||
}
|