src/components/DocFeedback/index.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'; 
+import styles from './styles.module.css'; 
+ 
+export default function DocFeedback() { 
+  const [voted, setVoted] = useState(false); 
+  const [feedback, setFeedback] = useState(''); 
+  const [showForm, setShowForm] = useState(false); 
+  const [submitted, setSubmitted] = useState(false); 
+ 
+  const handleVote = (isHelpful) => { 
+    setVoted(true); 
+    setShowForm(!isHelpful); 
+ 
+    // 可以在这里添加数据收集逻辑，例如发送到后端API 
+    console.log(`用户投票: ${isHelpful ? '有帮助' : '没有帮助'}`); 
+ 
+    // 如果评价是有帮助的，显示感谢信息 
+    if (isHelpful) { 
+      setTimeout(() => setVoted(false), 3000); 
+    } 
+  }; 
+ 
+  const handleSubmit = (e) => { 
+    e.preventDefault(); 
+    // 可以在这里添加提交反馈的逻辑，例如发送到后端API 
+    console.log(`用户反馈: ${feedback}`); 
+    setSubmitted(true); 
+    setShowForm(false); 
+ 
+    // 重置状态 
+    setTimeout(() => { 
+      setVoted(false); 
+      setFeedback(''); 
+      setSubmitted(false); 
+    }, 3000); 
+  }; 
+ 
+  return ( 
+    <div className={styles.feedbackContainer}> 
+        <div className={styles.feedbackQuestion}> 
+          <p>这篇文档对您有帮助吗？</p> 
+          <div className={styles.feedbackButtons}> 
+            <button 
+              onClick={() => handleVote(true)} 
+              className={styles.feedbackButton} 
+            > 
+              ?? 有帮助 
+            </button> 
+            <button 
+              onClick={() => handleVote(false)} 
+              className={styles.feedbackButton} 
+            > 
+              ?? 没有帮助 
+            </button> 
+          </div> 
+        </div> 
+      )} 
+ 
+        <div className={styles.feedbackThanks}> 
+          感谢您的反馈！ 
+        </div> 
+      )} 
+ 
+        <form onSubmit={handleSubmit} className={styles.feedbackForm}> 
+          <p>您希望如何改进这篇文档？</p> 
+          <textarea 
+            value={feedback} 
+            onChange={(e) => setFeedback(e.target.value)} 
+            placeholder="请告诉我们如何改进这篇文档..." 
+            rows={4} 
+            className={styles.feedbackTextarea} 
+            required 
+          /> 
+          <div className={styles.feedbackFormButtons}> 
+            <button type="submit" className={styles.submitButton}> 
+              提交反馈 
+            </button> 
+            <button 
+              type="button" 
+              onClick={() => { 
+                setShowForm(false); 
+                setVoted(false); 
+              }} 
+              className={styles.cancelButton} 
+            > 
+              取消 
+            </button> 
+          </div> 
+        </form> 
+      )} 
+ 
+        <div className={styles.feedbackThanks}> 
+          感谢您的宝贵反馈！我们会认真考虑您的建议。 
+        </div> 
+      )} 
+    </div> 
+  ); 
+} 

src/components/DocFeedback/styles.module.css

@@ -0,0 +1,78 @@
+.feedbackContainer { 
+  margin-top: 3rem; 
+  padding: 1.5rem; 
+  border-top: 1px solid var(--ifm-color-emphasis-200); 
+} 
+ 
+.feedbackQuestion { 
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+} 
+.feedbackButtons { 
+  display: flex; 
+  gap: 1rem; 
+  margin-top: 0.5rem; 
+} 
+ 
+.feedbackButton { 
+  padding: 0.5rem 1rem; 
+  border: 1px solid var(--ifm-color-emphasis-300); 
+  border-radius: 4px; 
+  background: var(--ifm-color-emphasis-100); 
+  cursor: pointer; 
+  transition: all 0.2s ease; 
+} 
+ 
+.feedbackButton:hover { 
+  background: var(--ifm-color-emphasis-200); 
+} 
+ 
+.feedbackThanks { 
+  text-align: center; 
+  padding: 1rem; 
+  color: var(--ifm-color-success-dark); 
+} 
+ 
+.feedbackForm { 
+  margin-top: 1rem; 
+} 
+ 
+.feedbackTextarea { 
+  width: 100%%; 
+  padding: 0.5rem; 
+  border: 1px solid var(--ifm-color-emphasis-300); 
+  border-radius: 4px; 
+  margin-bottom: 1rem; 
+} 
+ 
+.feedbackFormButtons { 
+  display: flex; 
+  gap: 1rem; 
+  justify-content: flex-end; 
+} 
+ 
+.submitButton { 
+  padding: 0.5rem 1rem; 
+  background: var(--ifm-color-primary); 
+  color: white; 
+  border: none; 
+  border-radius: 4px; 
+  cursor: pointer; 
+} 
+ 
+.submitButton:hover { 
+  background: var(--ifm-color-primary-dark); 
+} 
+ 
+.cancelButton { 
+  padding: 0.5rem 1rem; 
+  background: var(--ifm-color-emphasis-200); 
+  border: none; 
+  border-radius: 4px; 
+  cursor: pointer; 
+} 
+ 
+.cancelButton:hover { 
+  background: var(--ifm-color-emphasis-300); 
+} 

src/theme/DocItem/Footer/index.js

@@ -0,0 +1,10 @@
+import React from 'react'; 
+import DocFeedback from '@site/src/components/DocFeedback'; 
+ 
+export default function DocItemFooter() { 
+  return ( 
+    <footer className="docusaurus-mt-lg"> 
+      <DocFeedback /> 
+    </footer> 
+  ); 
+} 

src/theme/DocItem/Footer/styles.module.css

@@ -0,0 +1,11 @@
+.lastUpdated { 
+  margin-top: 0.2rem; 
+  font-style: italic; 
+  font-size: smaller; 
+} 
+ 
+@media (min-width: 997px) { 
+  .lastUpdated { 
+    text-align: right; 
+  } 
+}