feat(settings): render update release notes as markdown

This commit is contained in:
xintaofei
2026-04-18 18:51:09 +08:00
parent 07ef376438
commit 0048126d53

View File

@@ -13,6 +13,8 @@ import { Github } from "@lobehub/icons"
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Update = any
import { useLocale, useTranslations } from "next-intl"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import { toast } from "sonner"
import { useAppI18n } from "@/components/i18n-provider"
import { Button } from "@/components/ui/button"
@@ -131,8 +133,8 @@ export function SystemNetworkSettings() {
}, [availableUpdate?.date, locale])
const updateNotes = useMemo(
() => availableUpdate?.body?.trim() || t("none"),
[availableUpdate?.body, t]
() => availableUpdate?.body?.trim() ?? "",
[availableUpdate?.body]
)
const updateStatusMessage = useMemo(() => {
@@ -476,8 +478,28 @@ export function SystemNetworkSettings() {
</span>
)}
</div>
<div className="mt-3 max-h-28 overflow-auto rounded-md border bg-background/70 px-3 py-3 leading-6 whitespace-pre-wrap break-words text-muted-foreground">
{updateNotes}
<div
className={
"mt-3 max-h-72 overflow-auto rounded-md border bg-background/70 px-3 py-3 leading-6 break-words text-muted-foreground " +
"[&_h1]:text-sm [&_h1]:font-semibold [&_h1]:mb-2 [&_h1]:text-foreground " +
"[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:text-foreground " +
"[&_h3]:text-xs [&_h3]:font-semibold [&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-foreground " +
"[&_p]:mb-2 [&_p:last-child]:mb-0 " +
"[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-2 [&_li]:mb-1 " +
"[&_code]:font-mono [&_code]:text-[11px] [&_code]:bg-muted [&_code]:rounded [&_code]:px-1 " +
"[&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:p-2 [&_pre]:overflow-x-auto [&_pre]:mb-2 " +
"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 " +
"[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground/80 " +
"[&_hr]:my-2 [&_hr]:border-border"
}
>
{updateNotes ? (
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{updateNotes}
</ReactMarkdown>
) : (
t("none")
)}
</div>
</div>
)}