double
pfqgauxfb 2 months ago
parent a134f85b10
commit dc94d43538

@ -1,36 +1,79 @@
import React from 'react';
import Giscus from '@giscus/react';
import Rating from '../Rating';
import React, { useState } from 'react';
import styles from './styles.module.css';
const Comments = () => {
const handleRating = (rating) => {
// 这里可以添加评分提交逻辑
console.log('Rating submitted:', rating);
const [rating, setRating] = useState(0);
const [comment, setComment] = useState('');
const [comments, setComments] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
if (comment.trim()) {
setComments([
...comments,
{
rating,
text: comment,
date: new Date().toLocaleString(),
},
]);
setComment('');
setRating(0);
}
};
return (
<div className={styles.commentsContainer}>
<h3>文档评分与评论</h3>
<div className={styles.ratingSection}>
<h3>文档评分</h3>
<Rating onRatingChange={handleRating} />
<div className={styles.stars}>
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
className={`${styles.star} ${star <= rating ? styles.active : ''}`}
onClick={() => setRating(star)}
>
</span>
))}
</div>
<div className={styles.ratingText}>
{rating ? `您给了 ${rating} 星评价` : '请为本文档评分'}
</div>
</div>
<div className={styles.commentsSection}>
<h3>评论区</h3>
<Giscus
id="comments"
repo="luffyZh/gitlink_help_center"
repoId="R_kgDOJQYwXg"
category="Comments"
categoryId="DIC_kwDOJQYwXs4CQYwX"
mapping="pathname"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="bottom"
lang="zh-CN"
loading="lazy"
<form onSubmit={handleSubmit} className={styles.commentForm}>
<textarea
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="写下您的评论..."
className={styles.commentInput}
/>
<button type="submit" className={styles.submitButton}>
提交评论
</button>
</form>
<div className={styles.commentsList}>
{comments.map((item, index) => (
<div key={index} className={styles.commentItem}>
<div className={styles.commentHeader}>
<div className={styles.stars}>
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
className={`${styles.star} ${star <= item.rating ? styles.active : ''}`}
>
</span>
))}
</div>
<span className={styles.commentDate}>{item.date}</span>
</div>
<p className={styles.commentText}>{item.text}</p>
</div>
))}
</div>
</div>
);

@ -1 +1,123 @@
.commentsContainer {
margin-top: 2rem;
padding: 1.5rem;
background: var(--ifm-background-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.commentsContainer h3 {
margin-bottom: 1.5rem;
color: var(--ifm-color-emphasis-800);
font-size: 1.2rem;
}
.ratingSection {
margin-bottom: 1.5rem;
text-align: center;
}
.stars {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.star {
font-size: 1.5rem;
color: #ddd;
cursor: pointer;
transition: color 0.2s;
}
.star:hover,
.star.active {
color: #ffd700;
}
.ratingText {
color: var(--ifm-color-emphasis-600);
font-size: 0.9rem;
}
.commentForm {
margin-bottom: 2rem;
}
.commentInput {
width: 100%;
min-height: 100px;
padding: 0.8rem;
margin-bottom: 1rem;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 4px;
resize: vertical;
font-family: inherit;
font-size: 0.9rem;
}
.commentInput:focus {
outline: none;
border-color: var(--ifm-color-primary);
}
.submitButton {
padding: 0.5rem 1.5rem;
background: var(--ifm-color-primary);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s;
}
.submitButton:hover {
background: var(--ifm-color-primary-darker);
}
.commentsList {
margin-top: 2rem;
}
.commentItem {
padding: 1rem;
margin-bottom: 1rem;
background: var(--ifm-background-color);
border: 1px solid var(--ifm-color-emphasis-200);
border-radius: 4px;
}
.commentHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.commentDate {
color: var(--ifm-color-emphasis-600);
font-size: 0.8rem;
}
.commentText {
margin: 0;
color: var(--ifm-color-emphasis-800);
font-size: 0.9rem;
line-height: 1.5;
}
/* 暗色模式适配 */
[data-theme='dark'] .commentsContainer {
background: var(--ifm-background-color);
}
[data-theme='dark'] .commentItem {
background: var(--ifm-background-color);
border-color: var(--ifm-color-emphasis-700);
}
[data-theme='dark'] .commentText {
color: var(--ifm-color-emphasis-100);
}
Loading…
Cancel
Save