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…
Reference in new issue