From c6b6b2a109757114d80646e9c4121f2ecafcfa7a Mon Sep 17 00:00:00 2001
From: pfqgauxfb <3521106529@qq.com>
Date: Tue, 3 Jun 2025 11:19:30 +0800
Subject: [PATCH] feng

---
 src/components/DocRating/index.js          | 47 ++++++++++++----------
 src/components/DocRating/styles.module.css | 32 ++++++++++++---
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/components/DocRating/index.js b/src/components/DocRating/index.js
index daf161a..746136a 100644
--- a/src/components/DocRating/index.js
+++ b/src/components/DocRating/index.js
@@ -20,10 +20,10 @@ export default function DocRating({ docId }) {
     setShowMessage(true);
     setHasRated(true);
 
-    // 3秒后隐藏消息
+    // 5秒后隐藏消息
     setTimeout(() => {
       setShowMessage(false);
-    }, 3000);
+    }, 5000);
   };
 
   if (hasRated) {
@@ -31,27 +31,32 @@ export default function DocRating({ docId }) {
   }
 
   return (
-    <div className={styles.ratingSection}>
-      <p className={styles.ratingText}>请您对本文档做出评价</p>
-      <div className={styles.ratingButtons}>
-        <button
-          onClick={() => handleRating(true)}
-          className={`${styles.ratingButton} ${styles.positiveButton}`}
-        >
-          好
-        </button>
-        <button
-          onClick={() => handleRating(false)}
-          className={`${styles.ratingButton} ${styles.negativeButton}`}
-        >
-          不好
-        </button>
+    <>
+      <div className={styles.ratingSection}>
+        <p className={styles.ratingText}>请您对本文档做出评价</p>
+        <div className={styles.ratingButtons}>
+          <button
+            onClick={() => handleRating(true)}
+            className={`${styles.ratingButton} ${styles.positiveButton}`}
+          >
+            好
+          </button>
+          <button
+            onClick={() => handleRating(false)}
+            className={`${styles.ratingButton} ${styles.negativeButton}`}
+          >
+            不好
+          </button>
+        </div>
       </div>
       {showMessage && (
-        <div className={styles.message}>
-          {message}
-        </div>
+        <>
+          <div className={styles.messageOverlay} />
+          <div className={styles.message}>
+            {message}
+          </div>
+        </>
       )}
-    </div>
+    </>
   );
 } 
\ No newline at end of file
diff --git a/src/components/DocRating/styles.module.css b/src/components/DocRating/styles.module.css
index f19a9a4..f7702b1 100644
--- a/src/components/DocRating/styles.module.css
+++ b/src/components/DocRating/styles.module.css
@@ -48,22 +48,42 @@
   transform: translateY(-1px);
 }
 
+.messageOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  animation: fadeIn 0.3s ease;
+}
+
 .message {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  border-radius: 6px;
-  background-color: var(--ifm-color-emphasis-100);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1.5rem 2rem;
+  border-radius: 8px;
+  background-color: var(--ifm-background-color);
   color: var(--ifm-color-emphasis-800);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  font-size: 1.1rem;
+  text-align: center;
+  min-width: 300px;
+  border: 1px solid var(--ifm-color-emphasis-200);
   animation: fadeIn 0.3s ease;
 }
 
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translate(-50%, -40%);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translate(-50%, -50%);
   }
 } 
\ No newline at end of file