Skip to content

Commit

Permalink
chore: 优化代码
Browse files Browse the repository at this point in the history
  • Loading branch information
@JackySoft
JackySoft authored and jianbing.chen committed Dec 18, 2024
1 parent fab6f44 commit 1d47133
Show file tree
Hide file tree
Showing 8 changed files with 537 additions and 831 deletions.
258 changes: 112 additions & 146 deletions packages/editor/src/pages/feedback/IssueDetail/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,26 @@
import { useEffect, useState } from 'react'
import styles from './index.module.less'
import { Image, Input, Avatar, Skeleton, Spin, Badge } from 'antd'
import { CheckCircleFilled, CheckOutlined, CloseCircleOutlined, FrownOutlined, HeartOutlined, LikeOutlined, SendOutlined } from '@ant-design/icons'
import { FeedbackCommentItem, FeedbackItem } from '@/pages/types';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Image, Input, Avatar, Spin, Badge } from 'antd';
import { CheckCircleFilled, FrownOutlined, SendOutlined } from '@ant-design/icons';
import { FeedbackCommentItem, FeedbackItem } from '@/pages/types';
import { createFeedbackComment, getFeedbackComments, getFeedbackDetail } from '@/api';
import RandomAvatar from '../UserDefaultAvatar';
import { usePageStore } from '@/stores/pageStore';
import { message } from '@/utils/AntdGlobal';
import styles from './index.module.less';
const { TextArea } = Input;


const CommentCard = (props: { comment: FeedbackCommentItem }) => {
const { comment } = props;
return (
<div key={comment.id} className={styles.commentCard}>
<div className={styles.authorInfo}>
<div className={styles.avatar}>
{
comment.userAvatar ? (
<Avatar src={comment.userAvatar} size={40} className={styles.avatar} />
) : (
<RandomAvatar size={40} className={styles.avatar} seed={comment.nickName + ''} />
)
}
{comment.userAvatar ? (
<Avatar src={comment.userAvatar} size={40} className={styles.avatar} />
) : (
<RandomAvatar size={40} className={styles.avatar} seed={comment.nickName + ''} />
)}
</div>
<div className={styles.commentHeader}>
<div className={styles.commentAuthor}>{comment.nickName}</div>
Expand All @@ -32,13 +29,10 @@ const CommentCard = (props: { comment: FeedbackCommentItem }) => {
</div>
<p className={styles.commentContent}>{comment.content}</p>
</div>
)
}
);
};
export default function IssueDetail() {

const {
userInfo,
} = usePageStore((state) => {
const { userInfo } = usePageStore((state) => {
return {
userInfo: state.userInfo,
};
Expand All @@ -54,7 +48,7 @@ export default function IssueDetail() {
userAvatar: '',
createdAt: '',
nickName: '',
type: 1
type: 1,
});

// 在组件内部
Expand All @@ -66,15 +60,14 @@ export default function IssueDetail() {
const [hasMore, setHasMore] = useState(true);
const [total, setTotal] = useState(0);


useEffect(() => {
fetchFeedbackDetail(Number(id));
}, [id]);

const fetchFeedbackDetail = async (id: number) => {
const res = await getFeedbackDetail(id);
setItemDetail(res);
}
const res = await getFeedbackDetail(id);
setItemDetail(res);
};

useEffect(() => {
fetchComments(pageNum);
Expand All @@ -94,56 +87,53 @@ export default function IssueDetail() {
const handleReply = async () => {
if (!replyContent) {
message.info('请输入评论内容');
return
return;
}
if(replyContent.length > 60) {
message.info('评论内容不能超过60字符～');
return
if (replyContent.length > 150) {
message.info('评论内容不能超过150字符～');
return;
}
const data = {
feedbackId: itemDetail.id,
content: replyContent
}
content: replyContent,
};
const res = await createFeedbackComment(data);

setComments((prevComments) => [{
id: res.id,
nickName: userInfo.userName,
content: replyContent,
createdAt: new Date().toLocaleString(),
feedbackId: itemDetail.id
}, ...prevComments]);
setComments((prevComments) => [
{
id: res.id,
nickName: userInfo.userName,
content: replyContent,
createdAt: new Date().toLocaleString(),
feedbackId: itemDetail.id,
},
...prevComments,
]);
setReplyContent('');
};


return (
<div className={styles.container}>
{/* Header Section */}
<div className={styles.header}>
<div>
<h1 className={styles.title}>{itemDetail.title ? itemDetail.title : "不知名用户"}</h1>
<h1 className={styles.title}>{itemDetail.title ? itemDetail.title : '不知名用户'}</h1>
<div className={styles.tagContainer}>
{
itemDetail.type === 1 ? (
<span className={`${styles.tag} ${styles.tagBug}`}>Bug</span>
) : itemDetail.type === 2 ? (
<span className={`${styles.tag} ${styles.tagAdvise}`}>建议</span>
) : (
<span className={`${styles.tag} ${styles.tagOther}`}>其他</span>
)
}
{itemDetail.type === 1 ? (
<span className={`${styles.tag} ${styles.tagBug}`}>Bug</span>
) : itemDetail.type === 2 ? (
<span className={`${styles.tag} ${styles.tagAdvise}`}>建议</span>
) : (
<span className={`${styles.tag} ${styles.tagOther}`}>其他</span>
)}
</div>
<div className={styles.authorInfo}>
<div className={styles.avatar}>
{
itemDetail.userAvatar ? (
<Avatar src={itemDetail.userAvatar} size={40} className={styles.avatar} />
) : (
<RandomAvatar size={40} className={styles.avatar} seed={itemDetail.nickName
+ ''} />
)
}
{itemDetail.userAvatar ? (
<Avatar src={itemDetail.userAvatar} size={40} className={styles.avatar} />
) : (
<RandomAvatar size={40} className={styles.avatar} seed={itemDetail.nickName + ''} />
)}
</div>
<div>
<div className={styles.authorName}>{itemDetail.nickName}</div>
Expand All @@ -153,123 +143,99 @@ export default function IssueDetail() {
</div>
</div>
</div>

</div>

{/* Content Section */}
<div className={styles.content}>
<div className={styles.imageGallery}>
{itemDetail.images && itemDetail.images.split(",").map( (item, i) => (
<div key={i} className={styles.imageWrapper}>
<Image
src={item}
alt={`Image ${i}`}
className="object-cover"
/>
</div>
))}
{itemDetail.images &&
itemDetail.images.split(',').map((item, i) => (
<div key={i} className={styles.imageWrapper}>
<Image src={item} alt={`Image ${i}`} className="object-cover" />
</div>
))}
</div>

<div className={styles.description}>
{
itemDetail && itemDetail.content ? (
itemDetail.content.split('\n').map((paragraph, index) => (
<p key={index} className={styles.paragraph}>{paragraph}</p>
))
) : null
}
{itemDetail && itemDetail.content
? itemDetail.content.split('\n').map((paragraph, index) => (
<p key={index} className={styles.paragraph}>
{paragraph}
</p>
))
: null}
</div>
</div>

{/* Status Card */}
<div className={styles.status}>
{
itemDetail.isSolve ? (
<div className={styles.statusCard}>
<div className={styles.statusContent}>
<div className={styles.statusText}>
<CheckCircleFilled className={styles.solveIcon} /> <span>
{
itemDetail.type === 1 ? '问题已被解决' : '建议已被采纳'
}
</span>
</div>
</div>
{/* Status Card */}
<div className={styles.status}>
{itemDetail.isSolve ? (
<div className={styles.statusCard}>
<div className={styles.statusContent}>
<div className={styles.statusText}>
<CheckCircleFilled className={styles.solveIcon} /> <span>{itemDetail.type === 1 ? '问题已被解决' : '建议已被采纳'}</span>
</div>
) :(

<div className={styles.statusCard}>
<div className={styles.statusContent}>
<div className={styles.statusText}>
<FrownOutlined /> <span>
{
itemDetail.type === 1 ? '问题还未被解决' : '建议还未被采纳'
}
</span>
</div>
</div>
</div>
) : (
<div className={styles.statusCard}>
<div className={styles.statusContent}>
<div className={styles.statusText}>
<FrownOutlined /> <span>{itemDetail.type === 1 ? '问题还未被解决' : '建议还未被采纳'}</span>
</div>
</div>
)
}
{/* {
!itemDetail.isSolve? (
<div className={styles.statusChange}>
<div className={styles.statusChangeButton}>
<CheckOutlined className={styles.statusChangeIcon} />
</div>
</div>) : null
} */}
</div>
)}
</div>

{/* Comments Section */}
<div className={styles.replyModule}>
<RandomAvatar size={40} className={styles.userAvatar} seed={userInfo.userId + ''} />
<div className={styles.replyInputArea}>
<TextArea
value={replyContent}
showCount
allowClear
onChange={(e) => setReplyContent(e.target.value)}
placeholder="写下你的评论..."
autoSize={{ minRows: 2, maxRows:10 }}
/>
</div>
<div className={styles.action} onClick={handleReply}>
<SendOutlined className={styles.sendIcon} />
</div>
<RandomAvatar size={40} className={styles.userAvatar} seed={userInfo.userId + ''} />
<div className={styles.replyInputArea}>
<TextArea
value={replyContent}
showCount
allowClear
onChange={(e) => setReplyContent(e.target.value)}
placeholder="写下你的评论..."
autoSize={{ minRows: 2, maxRows: 10 }}
maxLength={150}
/>
</div>
<div className={styles.action} onClick={handleReply}>
<SendOutlined className={styles.sendIcon} />
</div>
</div>
<div className={styles.commentsSection}>
<div className={styles.commentsHeader}>
<h2 className={styles.commentsTitle}>讨论 ({total})</h2>
</div>

<div>
{
comments.map((comment) =>
(
comment.isTop ? (
<Badge.Ribbon text="置顶" color="#f50">
<CommentCard comment={comment} />
</Badge.Ribbon>
) : (
<CommentCard comment={comment} />
)
)
)
}
{comments.map((comment) =>
comment.isTop ? (
<Badge.Ribbon text="置顶" color="#f50">
<CommentCard comment={comment} />
</Badge.Ribbon>
) : (
<CommentCard comment={comment} />
),
)}
</div>
{
comments.length === 0 && !hasMore && (
<div className={styles.loadMore}>
<span className={styles.loadMoreText}>暂无讨论，快来抢沙发吧~</span>
</div>
)
}
{comments.length === 0 && !hasMore && (
<div className={styles.loadMore}>
<span className={styles.loadMoreText}>暂无讨论，快来抢沙发吧~</span>
</div>
)}
{hasMore && (
<div className={styles.loadMore}>
{
loading ? <Spin /> :<span className={styles.loadMoreText} onClick={() => setPageNum((prevPage) => prevPage + 1)} >更 多</span>
}
{loading ? (
<Spin />
) : (
<span className={styles.loadMoreText} onClick={() => setPageNum((prevPage) => prevPage + 1)}>
更 多
</span>
)}
</div>
)}

Expand All @@ -280,5 +246,5 @@ export default function IssueDetail() {
)}
</div>
</div>
)
);
}
Loading

0 comments on commit 1d47133

Please sign in to comment.