44 lines
2.1 KiB
TypeScript
44 lines
2.1 KiB
TypeScript
import { EmptyState } from "@/components/common/empty-state";
|
|
import { InfoPageShell, infoCardClass } from "@/components/info/info-page-layout";
|
|
import type { RichTextInfo } from "@/lib/api/types";
|
|
|
|
const richtextBodyClass =
|
|
"richtext-body [&_a]:text-[#F12B9E] [&_h1]:mb-2 [&_h1]:font-bold [&_h2]:mt-3 [&_h2]:mb-1.5 [&_h2]:font-bold [&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:font-semibold [&_li]:ml-4 [&_li]:list-disc [&_p]:mb-2 [&_ul]:mb-2";
|
|
|
|
export function HelpPage({ data }: { data: RichTextInfo | null }) {
|
|
const html = data?.content?.trim() || "";
|
|
const subtitle = data?.seoInfo?.description?.trim() || data?.title?.trim() || "常见问题与使用指南";
|
|
|
|
return (
|
|
<InfoPageShell data-component="help-page" title="帮助中心" subtitle={subtitle} mobile={
|
|
html ? (
|
|
<article
|
|
data-component="help-page-h5"
|
|
className={`${richtextBodyClass} rounded-2xl bg-[#13111C] px-4 py-3.5 text-xs leading-[18px] text-[#9E94AD] [&_h1]:text-base [&_h1]:text-[#FAF7FF] [&_h2]:text-sm [&_h2]:text-[#FAF7FF] [&_h3]:text-sm [&_h3]:text-[#FAF7FF]`}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
title="暂无帮助内容"
|
|
description="帮助文档正在完善中，请稍后再试或通过问题反馈联系我们"
|
|
className="rounded-2xl px-4 py-12"
|
|
/>
|
|
)
|
|
}>
|
|
{html ? (
|
|
<article
|
|
data-component="help-page-pc"
|
|
className={`${infoCardClass} ${richtextBodyClass} gap-4 px-8 pt-7 pb-[34px] text-sm leading-5 text-[#948CA8] [&_h1]:text-xl [&_h1]:leading-[26px] [&_h1]:font-semibold [&_h1]:text-[#F5F2FC] [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:text-[#F5F2FC] [&_h3]:text-base [&_h3]:font-medium [&_h3]:text-[#F5F2FC] [&_li]:ml-5 [&_p]:mb-3 [&_ul]:mb-3`}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
title="暂无帮助内容"
|
|
description="帮助文档正在完善中，请稍后再试或通过问题反馈联系我们"
|
|
className="rounded-3xl px-[110px] py-24"
|
|
/>
|
|
)}
|
|
</InfoPageShell>
|
|
);
|
|
}
|