double
pfqgauxfb 2 months ago
parent a80b13901d
commit be14099289

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

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

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

Loading…
Cancel
Save