From f8878bfb980d6c44651614489fe8d7eeace20892 Mon Sep 17 00:00:00 2001 From: gujiangjiang Date: Fri, 10 Oct 2025 14:52:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E2=80=9C=E9=9A=90=E7=A7=81?= =?UTF-8?q?=E6=94=BF=E7=AD=96=E2=80=9D=E3=80=81=E2=80=9C=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E6=9D=A1=E6=AC=BE=E2=80=9D=E3=80=81=E2=80=9C=E5=85=B3=E4=BA=8E?= =?UTF-8?q?=E6=88=91=E4=BB=AC=E2=80=9D=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=BC=B9=E7=AA=97=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 7 +-- frontend/src/components/Footer.tsx | 29 +++++++---- frontend/src/components/InfoModal.tsx | 71 +++++++++++++++++++++++++++ frontend/src/components/Layout.tsx | 30 +++++++++-- 4 files changed, 119 insertions(+), 18 deletions(-) create mode 100644 frontend/src/components/InfoModal.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5930c99..b69e927 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,9 +3,6 @@ import { Routes, Route } from 'react-router-dom'; import Layout from './components/Layout'; import HomePage from './pages/HomePage'; import NotFoundPage from './pages/NotFoundPage'; -import PrivacyPolicyPage from './pages/PrivacyPolicyPage'; -import TermsPage from './pages/TermsPage'; -import AboutPage from './pages/AboutPage'; import { MailboxProvider } from './contexts/MailboxContext'; const App: React.FC = () => { @@ -16,9 +13,7 @@ const App: React.FC = () => { }> } /> - } /> - } /> - } /> + {/* 移除了 privacy-policy, terms, 和 about 的路由 */} } /> diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index d058036..973251f 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -1,9 +1,13 @@ import React from "react"; import { useTranslation } from "react-i18next"; import Container from "./Container"; -import { Link } from "react-router-dom"; -const Footer: React.FC = () => { +// 定义 props 类型，允许父组件传递控制弹窗显示的函数 +interface FooterProps { + onShowInfo: (infoType: 'privacy' | 'terms' | 'about') => void; +} + +const Footer: React.FC = ({ onShowInfo }) => { const { t } = useTranslation(); const year = new Date().getFullYear(); @@ -15,18 +19,25 @@ const Footer: React.FC = () => { © {year} {t("app.title")}

- onShowInfo('privacy')} className="hover:text-primary transition-colors" > {t("common.privacyPolicy", "隐私政策")} - - + + +
void; + type: 'privacy' | 'terms' | 'about' | null; +} + +const InfoModal: React.FC = ({ isOpen, onClose, type }) => { + const { t } = useTranslation(); + + if (!isOpen || !type) { + return null; + } + + // 根据类型获取标题和内容组件 + const getContent = () => { + switch (type) { + case 'privacy': + return { + title: t('common.privacyPolicy'), + content: , + }; + case 'terms': + return { + title: t('common.terms'), + content: , + }; + case 'about': + return { + title: t('common.about'), + content: , + }; + default: + return { + title: '', + content: null, + }; + } + }; + + const { title, content } = getContent(); + + return ( +
+
+ {/* 弹窗头部 */} +
+

{title}

+ +
+ {/* 弹窗内容 */} +
+ {content} +
+
+
+ ); +}; + +export default InfoModal; \ No newline at end of file diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 66d7073..b16334b 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,16 +1,33 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; // 导入 useState import { Outlet, useLocation } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import Header from './Header'; import Footer from './Footer'; import SEO from './SEO'; import { MailboxContext } from '../contexts/MailboxContext'; +import InfoModal from './InfoModal'; // 导入弹窗组件 const Layout: React.FC = () => { const { t } = useTranslation(); const { mailbox, setMailbox, isLoading } = useContext(MailboxContext); const location = useLocation(); + // 添加状态来管理弹窗的显示和内容 + const [infoModal, setInfoModal] = useState<{ + isOpen: boolean; + type: 'privacy' | 'terms' | 'about' | null; + }>({ isOpen: false, type: null }); + + // 打开弹窗的函数 + const handleShowInfo = (type: 'privacy' | 'terms' | 'about') => { + setInfoModal({ isOpen: true, type }); + }; + + // 关闭弹窗的函数 + const handleCloseInfo = () => { + setInfoModal({ isOpen: false, type: null }); + }; + // 根据当前路径设置不同的SEO信息 const getSEOProps = () => { const path = location.pathname; @@ -27,7 +44,7 @@ const Layout: React.FC = () => { return { ...defaultProps, title: `ZMAIL-24小时匿名邮箱`, - description: `查看 ${mailbox} 的临时邮箱收件箱，接收邮件，无需注册，保护您的隐私安全`, + description: `查看 ${mailbox.address} 的临时邮箱收件箱，接收邮件，无需注册，保护您的隐私安全`, }; } @@ -45,7 +62,14 @@ const Layout: React.FC = () => {
-
+ {/* 传递 onShowInfo 函数给 Footer 组件 */} +
+ {/* 渲染弹窗组件 */} +
); };