feat(settings): render update release notes as markdown

src/components/settings/system-network-settings.tsx

@@ -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?.trim() ?? "",
-    [availableUpdate?.body, t]
+    [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">
+                <div
-                  {updateNotes}
+                  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>
             )}