add anc
This commit is contained in:
@@ -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>
|
||||
|
||||
75
src/component/Common/AnnouncementDialog.tsx
Normal file
75
src/component/Common/AnnouncementDialog.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user