feng

src/components/Comments/index.js

@@ -1,36 +1,79 @@
-import React from 'react';
+import React, { useState } from 'react';
-import Giscus from '@giscus/react';
-import Rating from '../Rating';
 import styles from './styles.module.css';
 
 const Comments = () => {
-  const handleRating = (rating) => {
+  const [rating, setRating] = useState(0);
-    // 这里可以添加评分提交逻辑
+  const [comment, setComment] = useState('');
-    console.log('Rating submitted:', rating);
+  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>
+        <div className={styles.stars}>
-        <Rating onRatingChange={handleRating} />
+          {[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}>
+      <form onSubmit={handleSubmit} className={styles.commentForm}>
-        <h3>评论区</h3>
+        <textarea
-        <Giscus
+          value={comment}
-          id="comments"
+          onChange={(e) => setComment(e.target.value)}
-          repo="luffyZh/gitlink_help_center"
+          placeholder="写下您的评论..."
-          repoId="R_kgDOJQYwXg"
+          className={styles.commentInput}
-          category="Comments"
-          categoryId="DIC_kwDOJQYwXs4CQYwX"
-          mapping="pathname"
-          reactionsEnabled="1"
-          emitMetadata="0"
-          inputPosition="bottom"
-          lang="zh-CN"
-          loading="lazy"
         />
+        <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>
   );

src/components/Comments/styles.module.css

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