From d63b76b6390c4a7d4b29189f64784bb0c2021532 Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Sat, 13 Jul 2024 10:44:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=84=E8=AE=BA=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/favorite.svg | 1 + src/assets/icons/like.svg | 1 + .../components/ShareDetail/ShareDetail.tsx | 17 +- .../components/Comment/index.module.less | 19 + .../ShareDetail/components/Comment/index.tsx | 462 +++++++++++++++++- .../components/ShareDetail/index.module.less | 13 + 6 files changed, 504 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/favorite.svg create mode 100644 src/assets/icons/like.svg diff --git a/src/assets/icons/favorite.svg b/src/assets/icons/favorite.svg new file mode 100644 index 0000000..372504d --- /dev/null +++ b/src/assets/icons/favorite.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/like.svg b/src/assets/icons/like.svg new file mode 100644 index 0000000..e690532 --- /dev/null +++ b/src/assets/icons/like.svg @@ -0,0 +1 @@ + diff --git a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx index 327d057..fc082b0 100644 --- a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx +++ b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx @@ -8,8 +8,6 @@ import { HeartOutlined, InfoCircleOutlined, LeftOutlined, - LikeOutlined, - StarOutlined, TagsOutlined, WarningOutlined, } from "@ant-design/icons"; @@ -22,6 +20,8 @@ import { Typography } from "antd"; import Comment from "@/components/Main/Share/components/ShareDetail/components/Comment"; import getRandomColor from "@/constant/random-color.ts"; const { Paragraph } = Typography; +import like from "@/assets/icons/like.svg"; +import favorite from "@/assets/icons/favorite.svg"; const ShareDetail: React.FunctionComponent = () => { const navigate = useNavigate(); return ( @@ -139,7 +139,7 @@ const ShareDetail: React.FunctionComponent = () => { justify={"space-between"} align={"center"}>
- + { - - - + + +
diff --git a/src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less b/src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less index e69de29..b57a3ac 100644 --- a/src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less +++ b/src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less @@ -0,0 +1,19 @@ +.like_icon { + font-size: 13px; + color: grey; + margin-left: 10px; +} +.like_icon:hover{ + cursor: pointer; + color: #ce1111; +} + +.comment_icon{ + font-size: 13px; + color: grey; + margin-left: 10px; +} +.comment_icon:hover{ + cursor: pointer; + color: #08a327; +} diff --git a/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx b/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx index 2ca3e2d..60543f4 100644 --- a/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx +++ b/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx @@ -1,15 +1,23 @@ /** @format */ import { ProCard } from "@ant-design/pro-components"; -import { Avatar, Button, Flex, Input, Segmented } from "antd"; +import { Avatar, Button, Flex, Input, Segmented, Tag } from "antd"; import logo from "@/assets/icons/gitee.svg"; import { BarsOutlined, + CloseOutlined, + CommentOutlined, + CrownOutlined, FireOutlined, + LikeOutlined, PictureOutlined, SendOutlined, SmileOutlined, } from "@ant-design/icons"; +import { useState } from "react"; +import styles from "./index.module.less"; const Comment = () => { + const [isReply, setIsReply] = useState(false); + const [isReplyComment, setIsReplyComment] = useState(false); return ( <>
@@ -51,6 +59,458 @@ const Comment = () => { { label: "最热", value: "Kanban", icon: }, ]} /> + + + + + + + + + landaiqing + + } + color={"cyan"} + style={{ marginLeft: 5 }}> + 作者 + + + } + style={{ width: "100%" }}> + + i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是 + + + + 1 小时前 + + + + + 10 + + + + + + 10 + + + + + + + + {isReply && ( + <> + + + 回复： + + {" "} + landaiqing + + + + + + + + + + + + + + + + + + + + + )} + + + + + + + + sjm 回复 landaiqing + + {/*}*/} + {/* color={"cyan"}*/} + {/* style={{ marginLeft: 5 }}>*/} + {/* 作者*/} + {/**/} + + } + style={{ width: "100%" }}> + + i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是 + + + + 1 小时前 + + + + + 10 + + + + + + 10 + + + + + + + + {isReplyComment && ( + <> + + + + {" "} + 回复：{" "} + + + {" "} + landaiqing + + + + + + + + + + + + + + + + + + + + + )} + + + + + + + + + + sjm 回复 landaiqing + + {/*}*/} + {/* color={"cyan"}*/} + {/* style={{ marginLeft: 5 }}>*/} + {/* 作者*/} + {/**/} + + } + style={{ width: "100%" }}> + + i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是 + + + + 1 小时前 + + + + + 10 + + + + + + 10 + + + + + + + + {isReplyComment && ( + <> + + + + {" "} + 回复：{" "} + + + {" "} + landaiqing + + + + + + + + + + + + + + + + + + + + + )} + + + + +
diff --git a/src/components/Main/Share/components/ShareDetail/index.module.less b/src/components/Main/Share/components/ShareDetail/index.module.less index 2d14504..194b3cf 100644 --- a/src/components/Main/Share/components/ShareDetail/index.module.less +++ b/src/components/Main/Share/components/ShareDetail/index.module.less @@ -8,3 +8,16 @@ .link_btn:hover{ color: #1890ff; } +.like_icon:hover{ + cursor: pointer; + width: 50px; + height: auto; +} +.favtorie_icon{ + margin-left: 20px; +} +.favtorie_icon:hover{ + cursor: pointer; + width: 50px; + height: auto; +}