feat: 评论界面
This commit is contained in:
landaiqing
1
src/assets/icons/favorite.svg
Normal file
1
src/assets/icons/favorite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1720834001446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4550" width="200" height="200"><path d="M512 512.8704m-432.3328 0a432.3328 432.3328 0 1 0 864.6656 0 432.3328 432.3328 0 1 0-864.6656 0Z" fill="#F8A10F" p-id="4551"></path><path d="M287.0272 418.7136c-85.0432 0-160.4096 41.3696-207.104 105.0624 4.5568 182.7328 122.368 337.3056 285.952 396.032 103.2192-33.28 177.92-130.048 177.92-244.3776 0-141.7216-114.944-256.7168-256.768-256.7168z" fill="#FFBD48" p-id="4552"></path><path d="M573.184 251.4944L624.64 355.7888a45.8752 45.8752 0 0 0 34.5088 25.088l115.0976 16.7424c37.5808 5.4784 52.5824 51.6608 25.3952 78.1824l-83.3024 81.2032a45.78816 45.78816 0 0 0-13.1584 40.5504l19.6608 114.6368c6.4 37.4272-32.8704 65.9968-66.5088 48.3328l-102.9632-54.1184a45.8496 45.8496 0 0 0-42.6496 0l-102.9632 54.1184c-33.6384 17.664-72.9088-10.8544-66.5088-48.3328l19.6608-114.6368c2.56-14.848-2.3552-30.0544-13.1584-40.5504L264.4992 475.7504c-27.1872-26.5216-12.1856-72.704 25.3952-78.1824l115.0976-16.7424a45.63968 45.63968 0 0 0 34.5088-25.088L491.008 251.4944c16.7936-34.048 65.3824-34.048 82.176 0z" fill="#FFFFFF" p-id="4553"></path><path d="M510.7712 706.3552a45.8496 45.8496 0 0 1 42.6496 0l102.9632 54.1184c33.6384 17.664 72.9088-10.8544 66.5088-48.3328l-19.6608-114.6368c-2.56-14.848 2.3552-30.0544 13.1584-40.5504l-205.6192 149.4016z" fill="#FFEACC" p-id="4554"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/assets/icons/like.svg
Normal file
1
src/assets/icons/like.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1720833921345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1614" width="200" height="200"><path d="M511.4368 512m-432.3328 0a432.3328 432.3328 0 1 0 864.6656 0 432.3328 432.3328 0 1 0-864.6656 0Z" fill="#FF6161" p-id="1615"></path><path d="M286.464 417.8432c-85.0432 0-160.4096 41.3696-207.104 105.0624 4.5568 182.7328 122.368 337.3056 285.952 396.032 103.2192-33.28 177.92-130.048 177.92-244.3776 0-141.7728-114.944-256.7168-256.768-256.7168z" fill="#FF7D7D" p-id="1616"></path><path d="M342.6304 721.6128h6.7584V427.9808h-6.7584c-36.096 0-65.3824 29.2864-65.3824 65.3824v162.9184c0.0512 36.0448 29.2864 65.3312 65.3824 65.3312z" fill="#FFCAC7" p-id="1617"></path><path d="M710.656 390.9632h-136.8064c10.6496-34.9696 24.9344-106.8032-25.088-137.1648-23.5008-14.1824-78.8992-24.1664-77.568 37.9904 1.28 62.1568-2.2528 130.4064-81.152 136.192v293.632h280.2688c31.744 0 59.136-22.3232 65.4848-53.4528l40.2944-196.9152c8.5504-41.472-23.0912-80.2816-65.4336-80.2816z" fill="#FFFFFF" p-id="1618"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -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"}>
|
||||
<div>
|
||||
<Avatar src={logo}></Avatar>
|
||||
<Avatar src={logo as any}></Avatar>
|
||||
<span
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
@@ -196,11 +196,12 @@ const ShareDetail: React.FunctionComponent = () => {
|
||||
</Tag>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"} justify={"center"}>
|
||||
<LikeOutlined style={{ fontSize: 30, color: "red" }} />
|
||||
<StarOutlined
|
||||
style={{ fontSize: 30, marginLeft: 20, color: "orange" }}
|
||||
/>
|
||||
<Flex vertical={false} align={"center"} justify={"center"} style={{height: 50}}>
|
||||
<Avatar className={styles.like_icon} src={like as any} size={"large"}></Avatar>
|
||||
<Avatar
|
||||
className={styles.favtorie_icon}
|
||||
src={favorite as any}
|
||||
size={"large"}></Avatar>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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<boolean>(false);
|
||||
const [isReplyComment, setIsReplyComment] = useState<boolean>(false);
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
@@ -51,6 +59,458 @@ const Comment = () => {
|
||||
{ label: "最热", value: "Kanban", icon: <FireOutlined /> },
|
||||
]}
|
||||
/>
|
||||
<Flex vertical={true} style={{ marginTop: 20, width: "100%" }}>
|
||||
<Flex vertical={false}>
|
||||
<Flex vertical={true} justify={"flex-start"}>
|
||||
<Avatar src={logo as any} size={"large"}></Avatar>
|
||||
</Flex>
|
||||
<Flex vertical={true} style={{ marginLeft: 15, width: "100%" }}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<span style={{ fontSize: 16, fontWeight: 500 }}>
|
||||
landaiqing
|
||||
</span>
|
||||
<Tag
|
||||
bordered={false}
|
||||
icon={<CrownOutlined />}
|
||||
color={"cyan"}
|
||||
style={{ marginLeft: 5 }}>
|
||||
作者
|
||||
</Tag>
|
||||
</Flex>
|
||||
<ProCard
|
||||
bordered={true}
|
||||
boxShadow={false}
|
||||
extra={<></>}
|
||||
style={{ width: "100%" }}>
|
||||
<span>
|
||||
i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
|
||||
</span>
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 10, width: "100%" }}>
|
||||
<span style={{ fontSize: 13, color: "grey" }}>
|
||||
1 小时前
|
||||
</span>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<LikeOutlined className={styles.like_icon} />
|
||||
<span style={{ fontSize: 13, color: "grey" }}>
|
||||
10
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<CommentOutlined className={styles.comment_icon} />
|
||||
<span style={{ fontSize: 13, color: "grey" }}>
|
||||
10
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Button
|
||||
type="text"
|
||||
size={"small"}
|
||||
onClick={() => setIsReply(true)}
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
回复
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
{isReply && (
|
||||
<>
|
||||
<Flex vertical={true}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<span style={{ fontSize: 13 }}> 回复： </span>
|
||||
<span style={{ fontSize: 13 }}>
|
||||
{" "}
|
||||
landaiqing
|
||||
</span>
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
style={{ fontSize: 13, marginLeft: 5 }}
|
||||
type={"dashed"}
|
||||
onClick={() => setIsReply(false)}
|
||||
size={"small"}>
|
||||
{" "}
|
||||
取消回复
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex vertical={false} style={{ marginTop: 5 }}>
|
||||
<Flex vertical={true} justify={"flex-start"}>
|
||||
<Avatar
|
||||
src={logo as any}
|
||||
size={"default"}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex vertical={true} style={{ width: "100%" }}>
|
||||
<Input.TextArea
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
width: "100%",
|
||||
}}
|
||||
rows={3}
|
||||
maxLength={500}
|
||||
showCount
|
||||
placeholder={
|
||||
"平等表达，友善交流"
|
||||
}></Input.TextArea>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginLeft: 10,
|
||||
}}>
|
||||
<SmileOutlined
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: "grey",
|
||||
}}
|
||||
/>
|
||||
<PictureOutlined
|
||||
style={{
|
||||
marginLeft: 20,
|
||||
fontSize: 20,
|
||||
color: "grey",
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"flex-end"}>
|
||||
<Button
|
||||
icon={<SendOutlined />}
|
||||
type={"primary"}>
|
||||
发表
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
<Flex vertical={false}>
|
||||
<Flex vertical={true} justify={"flex-start"}>
|
||||
<Avatar src={logo as any} size={"default"}></Avatar>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={true}
|
||||
style={{ marginLeft: 15, width: "100%" }}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<span style={{ fontSize: 14, fontWeight: 500 }}>
|
||||
sjm 回复 landaiqing
|
||||
</span>
|
||||
{/*<Tag*/}
|
||||
{/* bordered={false}*/}
|
||||
{/* icon={<CrownOutlined />}*/}
|
||||
{/* color={"cyan"}*/}
|
||||
{/* style={{ marginLeft: 5 }}>*/}
|
||||
{/* 作者*/}
|
||||
{/*</Tag>*/}
|
||||
</Flex>
|
||||
<ProCard
|
||||
bordered={true}
|
||||
boxShadow={false}
|
||||
extra={<></>}
|
||||
style={{ width: "100%" }}>
|
||||
<span>
|
||||
i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
|
||||
</span>
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 10, width: "100%" }}>
|
||||
<span style={{ fontSize: 13, color: "grey" }}>
|
||||
1 小时前
|
||||
</span>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<LikeOutlined
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "grey",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
10
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<CommentOutlined
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "grey",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
10
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Button
|
||||
type="text"
|
||||
size={"small"}
|
||||
onClick={() => setIsReplyComment(true)}
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
回复
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
{isReplyComment && (
|
||||
<>
|
||||
<Flex vertical={true}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<span style={{ fontSize: 13 }}>
|
||||
{" "}
|
||||
回复：{" "}
|
||||
</span>
|
||||
<span style={{ fontSize: 13 }}>
|
||||
{" "}
|
||||
landaiqing
|
||||
</span>
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
type={"dashed"}
|
||||
onClick={() =>
|
||||
setIsReplyComment(false)
|
||||
}
|
||||
size={"small"}>
|
||||
{" "}
|
||||
取消回复
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 5 }}>
|
||||
<Flex
|
||||
vertical={true}
|
||||
justify={"flex-start"}>
|
||||
<Avatar
|
||||
src={logo as any}
|
||||
size={"default"}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={true}
|
||||
style={{ width: "100%" }}>
|
||||
<Input.TextArea
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
width: "100%",
|
||||
}}
|
||||
rows={3}
|
||||
maxLength={500}
|
||||
showCount
|
||||
placeholder={
|
||||
"平等表达，友善交流"
|
||||
}></Input.TextArea>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginLeft: 10,
|
||||
}}>
|
||||
<SmileOutlined
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: "grey",
|
||||
}}
|
||||
/>
|
||||
<PictureOutlined
|
||||
style={{
|
||||
marginLeft: 20,
|
||||
fontSize: 20,
|
||||
color: "grey",
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"flex-end"}>
|
||||
<Button
|
||||
icon={<SendOutlined />}
|
||||
type={"primary"}>
|
||||
发表
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex vertical={false}>
|
||||
<Flex vertical={true} justify={"flex-start"}>
|
||||
<Avatar src={logo as any} size={"default"}></Avatar>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={true}
|
||||
style={{ marginLeft: 15, width: "100%" }}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<span style={{ fontSize: 14, fontWeight: 500 }}>
|
||||
sjm 回复 landaiqing
|
||||
</span>
|
||||
{/*<Tag*/}
|
||||
{/* bordered={false}*/}
|
||||
{/* icon={<CrownOutlined />}*/}
|
||||
{/* color={"cyan"}*/}
|
||||
{/* style={{ marginLeft: 5 }}>*/}
|
||||
{/* 作者*/}
|
||||
{/*</Tag>*/}
|
||||
</Flex>
|
||||
<ProCard
|
||||
bordered={true}
|
||||
boxShadow={false}
|
||||
extra={<></>}
|
||||
style={{ width: "100%" }}>
|
||||
<span>
|
||||
i回复OIDHJHDCEHIceh车hi是事实上事实是事实hi是是是是是是是是是是
|
||||
</span>
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 10, width: "100%" }}>
|
||||
<span style={{ fontSize: 13, color: "grey" }}>
|
||||
1 小时前
|
||||
</span>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<LikeOutlined
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "grey",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
10
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<CommentOutlined
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "grey",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
10
|
||||
</span>
|
||||
</Flex>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<Button
|
||||
type="text"
|
||||
size={"small"}
|
||||
onClick={() => setIsReplyComment(true)}
|
||||
style={{ fontSize: 13, color: "grey" }}>
|
||||
回复
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
{isReplyComment && (
|
||||
<>
|
||||
<Flex vertical={true}>
|
||||
<Flex vertical={false} align={"center"}>
|
||||
<span style={{ fontSize: 13 }}>
|
||||
{" "}
|
||||
回复：{" "}
|
||||
</span>
|
||||
<span style={{ fontSize: 13 }}>
|
||||
{" "}
|
||||
landaiqing
|
||||
</span>
|
||||
<Button
|
||||
icon={<CloseOutlined />}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
type={"dashed"}
|
||||
onClick={() =>
|
||||
setIsReplyComment(false)
|
||||
}
|
||||
size={"small"}>
|
||||
{" "}
|
||||
取消回复
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
style={{ marginTop: 5 }}>
|
||||
<Flex
|
||||
vertical={true}
|
||||
justify={"flex-start"}>
|
||||
<Avatar
|
||||
src={logo as any}
|
||||
size={"default"}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={true}
|
||||
style={{ width: "100%" }}>
|
||||
<Input.TextArea
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
width: "100%",
|
||||
}}
|
||||
rows={3}
|
||||
maxLength={500}
|
||||
showCount
|
||||
placeholder={
|
||||
"平等表达，友善交流"
|
||||
}></Input.TextArea>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginLeft: 10,
|
||||
}}>
|
||||
<SmileOutlined
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: "grey",
|
||||
}}
|
||||
/>
|
||||
<PictureOutlined
|
||||
style={{
|
||||
marginLeft: 20,
|
||||
fontSize: 20,
|
||||
color: "grey",
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
vertical={false}
|
||||
align={"center"}
|
||||
justify={"flex-end"}>
|
||||
<Button
|
||||
icon={<SendOutlined />}
|
||||
type={"primary"}>
|
||||
发表
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user