From 64e7385a24f054356e512553e7c6ad9bc5935128 Mon Sep 17 00:00:00 2001
From: Leonmmcoset <testmod@qq.com>
Date: Thu, 23 Oct 2025 21:07:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86bug?=
 =?UTF-8?q?=EF=BC=8C=E5=85=AC=E5=91=8A=E5=8A=9F=E8=83=BD=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Common/AnnouncementDialog.tsx   | 61 ++++++++++++++++++-
 src/component/Frame/NavBar/PageNavigation.tsx |  2 +-
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/src/component/Common/AnnouncementDialog.tsx b/src/component/Common/AnnouncementDialog.tsx
index 81bb5ff..2807f80 100644
--- a/src/component/Common/AnnouncementDialog.tsx
+++ b/src/component/Common/AnnouncementDialog.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { styled } from "@mui/material/styles";
 import {
   Dialog,
   DialogContent,
@@ -16,9 +17,59 @@ import SessionManager from "../../session";
 
 interface AnnouncementDialogProps {
   forceOpen?: boolean;
+  onClose?: () => void;
 }
 
-const AnnouncementDialog = ({ forceOpen = false }: AnnouncementDialogProps) => {
+// 为公告内容创建一个带样式的容器组件
+const AnnouncementContent = styled("div")`
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 16px;
+    margin-bottom: 8px;
+  }
+  p {
+    margin-bottom: 12px;
+    line-height: 1.6;
+  }
+  ul,
+  ol {
+    margin-left: 24px;
+    margin-bottom: 12px;
+  }
+  li {
+    margin-bottom: 4px;
+  }
+  a {
+    color: #1976d2;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 16px;
+  }
+  th,
+  td {
+    border: 1px solid #e0e0e0;
+    padding: 8px;
+  }
+  th {
+    background-color: #f5f5f5;
+  }
+`;
+
+const AnnouncementDialog = ({ forceOpen = false, onClose }: AnnouncementDialogProps) => {
   const { t } = useTranslation("common");
   const dispatch = useAppDispatch();
   const announcement = useAppSelector((state) => state.siteConfig.basic.config.announcement || "");
@@ -81,6 +132,10 @@ const AnnouncementDialog = ({ forceOpen = false }: AnnouncementDialogProps) => {
       SessionManager.set("announcement_dismissed", "true");
     }
     setOpen(false);
+    // 通知父组件弹窗已关闭
+    if (onClose) {
+      onClose();
+    }
   };
 
   return (
@@ -89,8 +144,8 @@ const AnnouncementDialog = ({ forceOpen = false }: AnnouncementDialogProps) => {
         {t("announcement", "公告")}
       </DialogTitle>
       <DialogContent sx={{ padding: 2, maxHeight: "80vh" }}>
-        <Paper elevation={0} sx={{ p: 2, whiteSpace: "pre-line" }}>
-          <Typography variant="body1">{announcement}</Typography>
+        <Paper elevation={0} sx={{ p: 2 }}>
+          <AnnouncementContent dangerouslySetInnerHTML={{ __html: announcement }} />
         </Paper>
         <FormControlLabel
           control={<Checkbox checked={dontShowAgain} onChange={(e) => setDontShowAgain(e.target.checked)} />}
diff --git a/src/component/Frame/NavBar/PageNavigation.tsx b/src/component/Frame/NavBar/PageNavigation.tsx
index ef7f585..8cd7f39 100755
--- a/src/component/Frame/NavBar/PageNavigation.tsx
+++ b/src/component/Frame/NavBar/PageNavigation.tsx
@@ -319,7 +319,7 @@ const PageNavigation = () => {
         />
       )}
       {/* 公告对话框 */}
-      <AnnouncementDialog forceOpen={showAnnouncement} />
+      <AnnouncementDialog forceOpen={showAnnouncement} onClose={() => setShowAnnouncement(false)} />
     </>
   );
 };