parent
faf4222020
commit
b98abe886f
@ -1,109 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const Comments = () => {
|
||||
const [comments, setComments] = useState([]);
|
||||
const [newComment, setNewComment] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const savedComments = localStorage.getItem('docComments');
|
||||
if (savedComments) {
|
||||
try {
|
||||
setComments(JSON.parse(savedComments));
|
||||
} catch (e) {
|
||||
console.error('Failed to parse comments:', e);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const saveComments = (newComments) => {
|
||||
try {
|
||||
localStorage.setItem('docComments', JSON.stringify(newComments));
|
||||
} catch (e) {
|
||||
console.error('Failed to save comments:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!newComment.trim() || !name.trim()) return;
|
||||
|
||||
const comment = {
|
||||
id: Date.now(),
|
||||
name,
|
||||
content: newComment,
|
||||
date: new Date().toLocaleString(),
|
||||
};
|
||||
|
||||
const updatedComments = [...comments, comment];
|
||||
setComments(updatedComments);
|
||||
saveComments(updatedComments);
|
||||
setNewComment('');
|
||||
};
|
||||
|
||||
const handleDelete = (commentId) => {
|
||||
const updatedComments = comments.filter(comment => comment.id !== commentId);
|
||||
setComments(updatedComments);
|
||||
saveComments(updatedComments);
|
||||
};
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.commentsContainer}>
|
||||
<h2 className={styles.title}>评论</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className={styles.form}>
|
||||
<div className={styles.inputGroup}>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="您的名字"
|
||||
className={styles.input}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.inputGroup}>
|
||||
<textarea
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
placeholder="写下您的评论..."
|
||||
className={styles.textarea}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className={styles.submitButton}>
|
||||
发表评论
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className={styles.commentsList}>
|
||||
{comments.map((comment) => (
|
||||
<div key={comment.id} className={styles.comment}>
|
||||
<div className={styles.commentHeader}>
|
||||
<span className={styles.commentName}>{comment.name}</span>
|
||||
<div className={styles.commentActions}>
|
||||
<span className={styles.commentDate}>{comment.date}</span>
|
||||
<button
|
||||
onClick={() => handleDelete(comment.id)}
|
||||
className={styles.deleteButton}
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className={styles.commentContent}>{comment.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comments;
|
||||
@ -1,114 +0,0 @@
|
||||
.commentsContainer {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background-color: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.inputGroup {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 4px;
|
||||
background-color: var(--ifm-background-color);
|
||||
color: var(--ifm-color-emphasis-900);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--ifm-color-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.submitButton:hover {
|
||||
background-color: var(--ifm-color-primary-darker);
|
||||
}
|
||||
|
||||
.commentsList {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 4px;
|
||||
background-color: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.commentHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.commentName {
|
||||
font-weight: bold;
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.commentActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.commentDate {
|
||||
font-size: 0.875rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
}
|
||||
|
||||
.deleteButton {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--ifm-color-danger);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.deleteButton:hover {
|
||||
background-color: var(--ifm-color-danger-darker);
|
||||
}
|
||||
|
||||
.commentContent {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
color: var(--ifm-color-emphasis-900);
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||
import DocItemContent from '@theme-original/DocItem/Content';
|
||||
import DocItemFooter from '@theme-original/DocItem/Footer';
|
||||
import DocItemPaginator from '@theme-original/DocItem/Paginator';
|
||||
import DocItemTOCMobile from '@theme-original/DocItem/TOC/Mobile';
|
||||
import DocItemTOCDesktop from '@theme-original/DocItem/TOC/Desktop';
|
||||
import DocVersionBadge from '@theme-original/DocVersionBadge';
|
||||
import DocVersionBanner from '@theme-original/DocVersionBanner';
|
||||
import DocBreadcrumbs from '@theme-original/DocBreadcrumbs';
|
||||
import styles from './styles.module.css';
|
||||
import Comments from '@site/src/components/Comments';
|
||||
|
||||
export default function DocItem(props) {
|
||||
const {metadata, frontMatter, assets} = useDoc();
|
||||
const {
|
||||
hide_table_of_contents: hideTableOfContents,
|
||||
toc_min_heading_level: tocMinHeadingLevel,
|
||||
toc_max_heading_level: tocMaxHeadingLevel,
|
||||
} = frontMatter;
|
||||
const {hide_comment_section: hideCommentSection} = frontMatter;
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.docItemContainer, 'container')}>
|
||||
<div className={styles.docItemCol}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemMain}>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
<DocItemContent>
|
||||
<DocItemTOCMobile
|
||||
toc={props.toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
maxHeadingLevel={tocMaxHeadingLevel}
|
||||
/>
|
||||
<DocItemContent {...props} />
|
||||
{!hideCommentSection && <Comments />}
|
||||
</DocItemContent>
|
||||
<DocItemFooter {...props} />
|
||||
</div>
|
||||
<DocItemPaginator />
|
||||
</div>
|
||||
{!hideTableOfContents && props.toc && (
|
||||
<div className="col col--3">
|
||||
<DocItemTOCDesktop
|
||||
toc={props.toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
maxHeadingLevel={tocMaxHeadingLevel}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
.docItemContainer {
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.docItemCol {
|
||||
flex: 1 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.docItemMain {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.docItemCol {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue