feat: 评论接口对接

2024-07-19 18:58:47 +08:00
parent 359ef60128
commit 6e8b2ae643
38 changed files with 5184 additions and 2096 deletions
--- a/src/components/Main/Share/index.tsx
+++ b/src/components/Main/Share/index.tsx
@@ -1,22 +1,48 @@
 /** @format */
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import { ProCard } from "@ant-design/pro-components";
 import styles from "./index.module.less";
-import { Avatar, Button, Card, Drawer, Flex, FloatButton, Form, Image, Input, Space } from "antd";
+import {
+	Avatar,
+	Button,
+	Card,
+	Drawer,
+	Flex,
+	FloatButton,
+	Form,
+	Image,
+	Input,
+	message,
+	Skeleton,
+	Tooltip,
+} from "antd";

 import { useNavigate } from "react-router-dom";
 import TextArea from "antd/es/input/TextArea";
 import { EyeOutlined, PlusOutlined, UnorderedListOutlined } from "@ant-design/icons";
-import pic from "@/assets/images/background.png";
-
 import Meta from "antd/es/card/Meta";
+import { addShareCircle, getShareCircleList } from "@/api/share";
 const MainShare: FunctionComponent = () => {
 	const navigate = useNavigate();
 	const [open, setOpen] = useState(false);
-
+	const [loading, setLoading] = useState(true);
+	const [circleList, setCircleList] = useState<any[]>([]);
+	const [form] = Form.useForm();
 	const onClose = () => {
 		setOpen(false);
 	};
+	async function getShareCircles() {
+		getShareCircleList().then((res: any) => {
+			if (res && res.success && res.data) {
+				setCircleList(res.data);
+				setLoading(false);
+			}
+		});
+	}
+
+	useEffect(() => {
+		getShareCircles().then();
+	}, []);
 	return (
 		<>
 			<div className={styles.share_main}>
@@ -30,77 +56,108 @@ const MainShare: FunctionComponent = () => {
 					</div>
 				</ProCard>
 				<ProCard title={<h3>文件分享圈</h3>} bordered={false} boxShadow={false}>
-					<Flex vertical={false} align={"center"}>
-						<Card
-							hoverable
-							style={{
-								width: "250px",
-								boxShadow: " 0 0 10px rgba(0, 0, 0, 0.1)",
-								borderRadius: 20,
-								// backgroundColor: "rgba(79,68,68,0.11)",
-							}}
-							onClick={() => {
-								navigate("/main/share/list/1");
-							}}
-							cover={
-								<Image
-									alt="example"
-									src={pic as any}
-									style={{
-										height: 180,
-										borderTopLeftRadius: 20,
-										borderTopRightRadius: 20,
-									}}
-									preview={false}
-									width={"100%"}
-									fallback="data:image/png;base64,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"
-								/>
-							}>
-							<Meta title="工具软件分享" description="分享一些常用的办公软件" />
-							{/*<Avatar*/}
-							{/*	src={pic2 as any}*/}
-							{/*	shape={"circle"}*/}
-							{/*	style={{*/}
-							{/*		position: "absolute",*/}
-							{/*		top: 160,*/}
-							{/*		left: 10,*/}
-							{/*		width: 60,*/}
-							{/*		height: 60,*/}
-							{/*		zIndex: 9999,*/}
-							{/*	}}></Avatar>*/}
-							<Flex
-								vertical={false}
-								style={{ marginTop: 10 }}
-								align={"center"}
-								justify={"space-between"}>
-								<Flex vertical={false} align={"center"}>
-									<Avatar src={pic as any} size={"small"} />{" "}
-									<span style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
-										landaiqing
-									</span>
-								</Flex>
-								<Flex
-									vertical={false}
-									align={"center"}
-									style={{ width: 100 }}
-									justify={"space-between"}>
-									<Flex vertical={false} align={"center"}>
-										<EyeOutlined style={{ color: "gray" }} />{" "}
-										<span
-											style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
-											1024
-										</span>
-									</Flex>
-									<Flex vertical={false} align={"center"}>
-										<UnorderedListOutlined style={{ color: "gray" }} />{" "}
-										<span
-											style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
-											999
-										</span>
-									</Flex>
-								</Flex>
-							</Flex>
-						</Card>
+					<Flex vertical={false} align={"center"} wrap={true} justify={"flex-start"}>
+						<Skeleton active={true} loading={loading} paragraph={{ rows: 10 }}>
+							{circleList &&
+								circleList.map((item: any, index: number) => {
+									return (
+										<div key={index}>
+											<Card
+												hoverable
+												style={{
+													width: "250px",
+													boxShadow: " 0 0 10px rgba(0, 0, 0, 0.1)",
+													borderRadius: 20,
+													marginLeft: 30,
+													marginTop: 20,
+													// backgroundColor: "rgba(79,68,68,0.11)",
+												}}
+												onClick={() => {
+													navigate("/main/share/list/" + item.id);
+												}}
+												cover={
+													<Image
+														alt="example"
+														src={item.icon}
+														style={{
+															height: 180,
+															borderTopLeftRadius: 20,
+															borderTopRightRadius: 20,
+															backgroundSize: "cover",
+														}}
+														preview={false}
+														width={"100%"}
+														height={"100%"}
+														fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
+													/>
+												}>
+												<Meta
+													title={item.name}
+													description={
+														<>
+															<Tooltip title={item.description}>
+																<span>{item.description}</span>
+															</Tooltip>
+														</>
+													}
+												/>
+												<Flex
+													vertical={false}
+													style={{ marginTop: 10 }}
+													align={"center"}
+													justify={"space-between"}>
+													<Flex vertical={false} align={"center"}>
+														<Avatar
+															src={item.avatar as any}
+															size={"small"}
+														/>{" "}
+														<span
+															style={{
+																fontSize: 12,
+																color: "gray",
+																marginLeft: 5,
+															}}>
+															{item.nickName}
+														</span>
+													</Flex>
+													<Flex
+														vertical={false}
+														align={"center"}
+														style={{ width: 100 }}
+														justify={"space-between"}>
+														<Flex vertical={false} align={"center"}>
+															<EyeOutlined
+																style={{ color: "gray" }}
+															/>{" "}
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																	marginLeft: 5,
+																}}>
+																{item.views}
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<UnorderedListOutlined
+																style={{ color: "gray" }}
+															/>{" "}
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																	marginLeft: 5,
+																}}>
+																{item.count}
+															</span>
+														</Flex>
+													</Flex>
+												</Flex>
+											</Card>
+										</div>
+									);
+								})}
+						</Skeleton>
 					</Flex>
 				</ProCard>
 			</div>
@@ -114,15 +171,44 @@ const MainShare: FunctionComponent = () => {
 						paddingBottom: 80,
 					},
 				}}
-				extra={
-					<Space>
-						<Button onClick={onClose}>取消</Button>
-						<Button onClick={onClose} type="primary">
-							提交
-						</Button>
-					</Space>
-				}>
-				<Form layout="vertical">
+				// extra={
+				// 	<Space>
+				// 		<Button onClick={onClose}>取消</Button>
+				// 		<Button onClick={onClose} type="primary">
+				// 			提交
+				// 		</Button>
+				// 	</Space>
+				// }
+			>
+				<Form
+					layout="vertical"
+					form={form}
+					onFinish={(values: any) => {
+						const formData = {
+							userId: 17,
+							...values,
+						};
+						addShareCircle(formData).then((res: any) => {
+							if (res && res.success && res.data) {
+								message
+									.open({
+										content: "创建成功",
+										type: "success",
+									})
+									.then();
+								setOpen(false);
+								getShareCircles().then();
+								form.resetFields();
+							} else {
+								message
+									.open({
+										content: res.data,
+										type: "error",
+									})
+									.then();
+							}
+						});
+					}}>
 					<Form.Item
 						name="name"
 						label="名称"
@@ -143,6 +229,16 @@ const MainShare: FunctionComponent = () => {
 						rules={[{ required: true, message: "请输入描述!" }]}>
 						<TextArea rows={4} maxLength={50} showCount placeholder="请输入描述！" />
 					</Form.Item>
+					<Form.Item
+						style={{
+							display: "flex",
+							flexDirection: "row",
+							justifyContent: "flex-end",
+						}}>
+						<Button type="primary" htmlType="submit">
+							提交
+						</Button>
+					</Form.Item>
 				</Form>
 			</Drawer>
 			<FloatButton