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,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>
+    </>
   );
 } 

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