From 02d7491529fe17b497db32f68c9425264ec42595 Mon Sep 17 00:00:00 2001
From: wenjiankun <2155441558@qq.com>
Date: Mon, 2 Jun 2025 19:19:46 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=9A=E6=96=87=E6=A1=A3=E5=8F=8D=E9=A6=88=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DocFeedback/index.js          | 98 ++++++++++++++++++++
 src/components/DocFeedback/styles.module.css | 78 ++++++++++++++++
 src/theme/DocItem/Footer/index.js            | 77 +++++++++++++++
 src/theme/DocItem/Footer/styles.module.css   | 11 +++
 4 files changed, 264 insertions(+)
 create mode 100644 src/components/DocFeedback/index.js
 create mode 100644 src/components/DocFeedback/styles.module.css
 create mode 100644 src/theme/DocItem/Footer/index.js
 create mode 100644 src/theme/DocItem/Footer/styles.module.css

diff --git a/src/components/DocFeedback/index.js b/src/components/DocFeedback/index.js
new file mode 100644
index 0000000..ef88a29
--- /dev/null
+++ b/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> 
+  ); 
+} 
diff --git a/src/components/DocFeedback/styles.module.css b/src/components/DocFeedback/styles.module.css
new file mode 100644
index 0000000..aef6953
--- /dev/null
+++ b/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); 
+} 
diff --git a/src/theme/DocItem/Footer/index.js b/src/theme/DocItem/Footer/index.js
new file mode 100644
index 0000000..495d585
--- /dev/null
+++ b/src/theme/DocItem/Footer/index.js
@@ -0,0 +1,77 @@
+import React from 'react'; 
+import clsx from 'clsx'; 
+import {ThemeClassNames} from '@docusaurus/theme-common'; 
+import {useDoc} from '@docusaurus/theme-common/internal'; 
+import LastUpdated from '@theme/LastUpdated'; 
+import EditThisPage from '@theme/EditThisPage'; 
+import TagsListInline from '@theme/TagsListInline'; 
+import DocFeedback from '@site/src/components/DocFeedback'; 
+ 
+import styles from './styles.module.css'; 
+ 
+function TagsRow(props) { 
+  return ( 
+    <div 
+      className={clsx( 
+        ThemeClassNames.docs.docFooterTagsRow, 
+        'row margin-bottom--sm', 
+      )}> 
+      <div className="col"> 
+        <TagsListInline {...props} /> 
+      </div> 
+    </div> 
+  ); 
+} 
+ 
+function EditMetaRow({ 
+  editUrl, 
+  lastUpdatedAt, 
+  lastUpdatedBy, 
+  formattedLastUpdatedAt, 
+}) { 
+  return ( 
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}> 
+ 
+      <div className={clsx('col', styles.lastUpdated)}> 
+          <LastUpdated 
+            lastUpdatedAt={lastUpdatedAt} 
+            formattedLastUpdatedAt={formattedLastUpdatedAt} 
+            lastUpdatedBy={lastUpdatedBy} 
+          /> 
+        )} 
+      </div> 
+    </div> 
+  ); 
+} 
+ 
+export default function DocItemFooter() { 
+  const {metadata} = useDoc(); 
+  const { 
+    editUrl, 
+    lastUpdatedAt, 
+    formattedLastUpdatedAt, 
+    lastUpdatedBy, 
+    tags, 
+  } = metadata; 
+ 
+  const canDisplayTagsRow = tags.length > 0; 
+ 
+ 
+  if (!canDisplayFooter) { 
+    return null; 
+  } 
+ 
+  return ( 
+    <footer 
+      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}> 
+        <EditMetaRow 
+          editUrl={editUrl} 
+          lastUpdatedAt={lastUpdatedAt} 
+          lastUpdatedBy={lastUpdatedBy} 
+          formattedLastUpdatedAt={formattedLastUpdatedAt} 
+        /> 
+      )} 
+      <DocFeedback /> 
+    </footer> 
+  ); 
+} 
diff --git a/src/theme/DocItem/Footer/styles.module.css b/src/theme/DocItem/Footer/styles.module.css
new file mode 100644
index 0000000..2667e32
--- /dev/null
+++ b/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; 
+  } 
+} 
-- 
2.34.1


From 69b24c896ec83b3868685ae60540a203389e5902 Mon Sep 17 00:00:00 2001
From: wenjiankun <2155441558@qq.com>
Date: Mon, 2 Jun 2025 19:31:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=B0=9D=E8=AF=95=E4=BF=AE=E5=A4=8DFooter?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/theme/DocItem/Footer/index.js | 69 +------------------------------
 1 file changed, 1 insertion(+), 68 deletions(-)

diff --git a/src/theme/DocItem/Footer/index.js b/src/theme/DocItem/Footer/index.js
index 495d585..24781ad 100644
--- a/src/theme/DocItem/Footer/index.js
+++ b/src/theme/DocItem/Footer/index.js
@@ -1,76 +1,9 @@
 import React from 'react'; 
-import clsx from 'clsx'; 
-import {ThemeClassNames} from '@docusaurus/theme-common'; 
-import {useDoc} from '@docusaurus/theme-common/internal'; 
-import LastUpdated from '@theme/LastUpdated'; 
-import EditThisPage from '@theme/EditThisPage'; 
-import TagsListInline from '@theme/TagsListInline'; 
 import DocFeedback from '@site/src/components/DocFeedback'; 
  
-import styles from './styles.module.css'; 
- 
-function TagsRow(props) { 
-  return ( 
-    <div 
-      className={clsx( 
-        ThemeClassNames.docs.docFooterTagsRow, 
-        'row margin-bottom--sm', 
-      )}> 
-      <div className="col"> 
-        <TagsListInline {...props} /> 
-      </div> 
-    </div> 
-  ); 
-} 
- 
-function EditMetaRow({ 
-  editUrl, 
-  lastUpdatedAt, 
-  lastUpdatedBy, 
-  formattedLastUpdatedAt, 
-}) { 
-  return ( 
-    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}> 
- 
-      <div className={clsx('col', styles.lastUpdated)}> 
-          <LastUpdated 
-            lastUpdatedAt={lastUpdatedAt} 
-            formattedLastUpdatedAt={formattedLastUpdatedAt} 
-            lastUpdatedBy={lastUpdatedBy} 
-          /> 
-        )} 
-      </div> 
-    </div> 
-  ); 
-} 
- 
 export default function DocItemFooter() { 
-  const {metadata} = useDoc(); 
-  const { 
-    editUrl, 
-    lastUpdatedAt, 
-    formattedLastUpdatedAt, 
-    lastUpdatedBy, 
-    tags, 
-  } = metadata; 
- 
-  const canDisplayTagsRow = tags.length > 0; 
- 
- 
-  if (!canDisplayFooter) { 
-    return null; 
-  } 
- 
   return ( 
-    <footer 
-      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}> 
-        <EditMetaRow 
-          editUrl={editUrl} 
-          lastUpdatedAt={lastUpdatedAt} 
-          lastUpdatedBy={lastUpdatedBy} 
-          formattedLastUpdatedAt={formattedLastUpdatedAt} 
-        /> 
-      )} 
+    <footer className="docusaurus-mt-lg"> 
       <DocFeedback /> 
     </footer> 
   ); 
-- 
2.34.1