feng

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,6 +31,7 @@ export default function DocRating({ docId }) {
   }
 
   return (
+    <>
       <div className={styles.ratingSection}>
         <p className={styles.ratingText}>请您对本文档做出评价</p>
         <div className={styles.ratingButtons}>
@@ -47,11 +48,15 @@ export default function DocRating({ docId }) {
             不好
           </button>
         </div>
+      </div>
       {showMessage && (
+        <>
+          <div className={styles.messageOverlay} />
           <div className={styles.message}>
             {message}
           </div>
+        </>
       )}
-    </div>
+    </>
   );
 } 

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%);
   }
 }