feng

src/components/DocRating/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+export default function DocRating({ docId }) {
+  const [hasRated, setHasRated] = useState(false);
+  const [showMessage, setShowMessage] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleRating = (isPositive) => {
+    // 保存评级到localStorage
+    const ratings = JSON.parse(localStorage.getItem('docRatings') || '{}');
+    ratings[docId] = isPositive;
+    localStorage.setItem('docRatings', JSON.stringify(ratings));
+
+    // 显示相应的消息
+    setMessage(isPositive 
+      ? '感谢您的评价，祝您使用愉快' 
+      : '不好意思，给您带来不好的体验，我们一定会积极改进'
+    );
+    setShowMessage(true);
+    setHasRated(true);
+
+    // 3秒后隐藏消息
+    setTimeout(() => {
+      setShowMessage(false);
+    }, 3000);
+  };
+
+  if (hasRated) {
+    return null;
+  }
+
+  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>
+      {showMessage && (
+        <div className={styles.message}>
+          {message}
+        </div>
+      )}
+    </div>
+  );
+} 

src/components/DocRating/styles.module.css

@@ -0,0 +1,69 @@
+.ratingSection {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  background-color: var(--ifm-background-color);
+  text-align: center;
+}
+
+.ratingText {
+  font-size: 1.1rem;
+  color: var(--ifm-color-emphasis-800);
+  margin-bottom: 1rem;
+}
+
+.ratingButtons {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.ratingButton {
+  padding: 0.5rem 2rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.positiveButton {
+  background-color: var(--ifm-color-success);
+  color: white;
+}
+
+.positiveButton:hover {
+  background-color: var(--ifm-color-success-darker);
+  transform: translateY(-1px);
+}
+
+.negativeButton {
+  background-color: var(--ifm-color-danger);
+  color: white;
+}
+
+.negativeButton:hover {
+  background-color: var(--ifm-color-danger-darker);
+  transform: translateY(-1px);
+}
+
+.message {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  border-radius: 6px;
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-800);
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+} 

src/theme/DocItem/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import DocItem from '@theme-original/DocItem';
 import DocComment from '@site/src/components/DocComment';
+import DocRating from '@site/src/components/DocRating';
 
 export default function DocItemWrapper(props) {
   return (
     <>
       <DocItem {...props} />
+      <DocRating docId={props.content.metadata.id} />
       <DocComment docId={props.content.metadata.id} />
     </>
   );