add anc

src/App.tsx

@@ -15,6 +15,7 @@ import { GrowDialogTransition } from "./component/FileManager/Search/SearchPopup
 import Warning from "./component/Icons/Warning.tsx";
 import { useAppSelector } from "./redux/hooks.ts";
 import { changeThemeColor } from "./util";
+import AnnouncementDialog from "./component/Common/AnnouncementDialog.tsx";
 
 export const applyThemeWithOverrides = (themeConfig: ThemeOptions): ThemeOptions => {
   return {
@@ -374,6 +375,7 @@ const AppContent = () => {
         }}
       >
         <GlobalDialogs />
+        <AnnouncementDialog />
         <Outlet />
       </SnackbarProvider>
     </>

src/component/Admin/Settings/SiteInformation/SiteInformation.tsx

@@ -64,9 +64,29 @@ const SiteInformation = () => {
                 <NoMarginHelperText>{t("settings.customFooterHTMLDes")}</NoMarginHelperText>
               </FormControl>
             </SettingForm>
-            <SettingForm title={t("settings.announcement")} lgWidth={5} pro>
+            <SettingForm title={t("settings.announcementEnabled")} lgWidth={5}>
               <FormControl fullWidth>
-                <DenseFilledTextField inputProps={{ readOnly: true }} fullWidth multiline rows={4} />
+                <Switch
+                  checked={isTrueVal(values.announcement_enabled)}
+                  onChange={(e) =>
+                    setSettings({
+                      announcement_enabled: e.target.checked ? "1" : "0",
+                    })
+                  }
+                />
+                <NoMarginHelperText>{t("settings.announcementEnabledDes")}</NoMarginHelperText>
+              </FormControl>
+            </SettingForm>
+            <SettingForm title={t("settings.announcement")} lgWidth={5}>
+              <FormControl fullWidth>
+                <DenseFilledTextField
+                  fullWidth
+                  multiline
+                  rows={4}
+                  value={values.announcement || ""}
+                  onChange={(e) => setSettings({ announcement: e.target.value })}
+                  disabled={!isTrueVal(values.announcement_enabled)}
+                />
                 <NoMarginHelperText>{t("settings.announcementDes")}</NoMarginHelperText>
               </FormControl>
             </SettingForm>

src/component/Common/AnnouncementDialog.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Checkbox,
+  FormControlLabel,
+  Button,
+  Paper,
+  Typography,
+} from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts";
+import { getAnnouncement } from "../../redux/thunks/site.ts";
+import SessionManager from "../../session";
+
+const AnnouncementDialog = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const announcement = useAppSelector((state) => state.siteConfig.basic.config.announcement || "");
+  const announcementEnabled = useAppSelector((state) => state.siteConfig.basic.config.announcement_enabled || false);
+  const [open, setOpen] = useState(false);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  useEffect(() => {
+    // 加载公告
+    dispatch(getAnnouncement());
+  }, [dispatch]);
+
+  useEffect(() => {
+    // 检查是否应该显示公告
+    const shouldShow =
+      announcementEnabled &&
+      announcement &&
+      announcement.trim() !== "" &&
+      !SessionManager.get("announcement_dismissed");
+
+    if (shouldShow) {
+      // 延迟显示，让页面加载完成
+      const timer = setTimeout(() => setOpen(true), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [announcement, announcementEnabled]);
+
+  const handleClose = () => {
+    if (dontShowAgain) {
+      // 保存用户选择不再显示
+      SessionManager.set("announcement_dismissed", "true");
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+      <DialogTitle sx={{ borderBottom: 1, borderColor: "divider", paddingBottom: 1 }}>
+        {t("common:announcement")}
+      </DialogTitle>
+      <DialogContent sx={{ padding: 2, maxHeight: "80vh" }}>
+        <Paper elevation={0} sx={{ p: 2, whiteSpace: "pre-line" }}>
+          <Typography variant="body1">{announcement}</Typography>
+        </Paper>
+        <FormControlLabel
+          control={<Checkbox checked={dontShowAgain} onChange={(e) => setDontShowAgain(e.target.checked)} />}
+          label={t("common:dontShowAgain")}
+          sx={{ mt: 2 }}
+        />
+      </DialogContent>
+      <Button onClick={handleClose} variant="contained" color="primary" sx={{ m: 2 }}>
+        {t("common:ok")}
+      </Button>
+    </Dialog>
+  );
+};
+
+export default AnnouncementDialog;

src/redux/thunks/site.ts

@@ -27,3 +27,10 @@ export function updateSiteConfig(): AppThunk {
     }
   };
 }
+
+export function getAnnouncement(): AppThunk {
+  return async (dispatch, _getState) => {
+    // 获取基本配置，其中包含公告信息
+    await dispatch(loadSiteConfig("basic"));
+  };
+}