From 96ea9bf65b3bfdcd0adbfa031e70c732730bf1d6 Mon Sep 17 00:00:00 2001
From: gujiangjiang <gujiangjiang@qq.com>
Date: Fri, 17 Oct 2025 05:46:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E6=A8=A1=E6=80=81?=
 =?UTF-8?q?=E6=A1=86=E4=B8=BB=E9=A2=98=E4=B8=BA=E7=BD=91=E7=AB=99=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E9=A3=8E=E6=A0=BC=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E5=92=8C=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E9=9A=8F?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=BB=9A=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/InfoModal.tsx | 25 ++++++++++++++++---------
 frontend/src/pages/About.tsx          |  3 ++-
 frontend/src/pages/Privacy.tsx        |  3 ++-
 frontend/src/pages/Terms.tsx          |  3 ++-
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/InfoModal.tsx b/frontend/src/components/InfoModal.tsx
index e9770c0..6f18891 100644
--- a/frontend/src/components/InfoModal.tsx
+++ b/frontend/src/components/InfoModal.tsx
@@ -12,16 +12,23 @@ interface InfoModalProps {
 export function InfoModal({ showModal, setShowModal, title, children }: InfoModalProps) {
   return (
     <Modal showModal={showModal} setShowModal={setShowModal}>
-      <div className="w-full max-h-[80vh] overflow-y-auto bg-white/95 backdrop-blur-xl shadow-xl p-4 md:max-w-3xl md:rounded-2xl md:border md:border-gray-200">
-        <Close
-          className="absolute top-4 right-4 h-6 w-6 text-gray-500 hover:text-gray-700 cursor-pointer"
-          onClick={() => setShowModal(false)}
-          onPointerDown={(e) => e.stopPropagation()}
-        />
-        <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-5 text-center md:px-16">
-          <h3 className="font-display text-2xl font-bold">{title}</h3>
+      {/* 修复：将背景色从白色更改为网站的深色主题，并调整边框颜色 */}
+      <div className="w-full max-h-[80vh] flex flex-col bg-neutral-800/95 backdrop-blur-xl shadow-xl md:max-w-3xl md:rounded-2xl md:border md:border-cyan-50/20">
+        {/* 修复：创建一个固定的头部，包含标题和关闭按钮，使其不随内容滚动 */}
+        <div className="flex-shrink-0 flex items-center justify-center p-4 border-b border-cyan-50/20 relative">
+            <h3 className="font-display text-2xl font-bold text-white">{title}</h3>
+            <Close
+              className="absolute top-4 right-4 h-6 w-6 text-gray-400 hover:text-white cursor-pointer"
+              onClick={() => setShowModal(false)}
+              onPointerDown={(e) => e.stopPropagation()}
+            />
+        </div>
+
+        {/* 修复：为内容区域添加 overflow-y-auto，使其可独立滚动 */}
+        <div className="flex-grow overflow-y-auto text-white p-6">
+            {/* 修复：将内容区域的文字颜色从黑色改为白色 */}
+            <div className="text-white">{children}</div>
         </div>
-        <div className="text-black p-4">{children}</div>
       </div>
     </Modal>
   );
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index bb6bee7..3ff45f4 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,7 +1,8 @@
 // 这个文件内容直接从您的 _h.about.tsx 迁移而来
 export function About() {
   return (
-    <div className="text-black">
+    // 修复：移除 text-black 类，文本颜色将由父组件 InfoModal 控制
+    <div>
       <div className="max-w-[1400px] ">
         <p className="mt-8">
           <strong>Vmail.DEV </strong> is a Virtual temporary email service.{" "}
diff --git a/frontend/src/pages/Privacy.tsx b/frontend/src/pages/Privacy.tsx
index 5030c45..513635c 100644
--- a/frontend/src/pages/Privacy.tsx
+++ b/frontend/src/pages/Privacy.tsx
@@ -1,7 +1,8 @@
 // 这个文件内容直接从您的 _h.privacy.tsx 迁移而来
 export function Privacy() {
   return (
-    <div className="text-black">
+    // 修复：移除 text-black 类，文本颜色将由父组件 InfoModal 控制
+    <div>
       <div className="max-w-[1400px] ">
         <p className="mt-8">
           At Vmail.DEV, we value the privacy of our users and are committed to
diff --git a/frontend/src/pages/Terms.tsx b/frontend/src/pages/Terms.tsx
index 27ee618..3b5048b 100644
--- a/frontend/src/pages/Terms.tsx
+++ b/frontend/src/pages/Terms.tsx
@@ -1,7 +1,8 @@
 // 这个文件内容直接从您的 _h.terms.tsx 迁移而来
 export function Terms() {
   return (
-    <div className="text-black">
+    // 修复：移除 text-black 类，文本颜色将由父组件 InfoModal 控制
+    <div>
       <div className="max-w-[1400px] ">
         <p className="mt-8">
           Welcome to Vmail.DEV! These Terms of Service ("Terms") govern your