258 lines
10 KiB
TypeScript
258 lines
10 KiB
TypeScript
/** @format */
|
|
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,
|
|
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 Meta from "antd/es/card/Meta";
|
|
import { addShareCircle, getShareCircleList } from "@/api/share";
|
|
import useStore from "@/utils/store/useStore.tsx";
|
|
import { observer } from "mobx-react";
|
|
const MainShare: FunctionComponent = observer(() => {
|
|
const store = useStore("user");
|
|
const userId: any = store.getUserId();
|
|
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}>
|
|
<ProCard bordered={false} boxShadow={false}>
|
|
<div className={styles.share_header}>
|
|
<Input
|
|
size={"large"}
|
|
placeholder="搜索圈子"
|
|
style={{ width: 500, borderRadius: 20 }}
|
|
/>
|
|
</div>
|
|
</ProCard>
|
|
<ProCard title={<h3>文件分享圈</h3>} bordered={false} boxShadow={false}>
|
|
<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,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"
|
|
/>
|
|
}>
|
|
<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>
|
|
<Drawer
|
|
title="创建圈子"
|
|
width={"40%"}
|
|
onClose={onClose}
|
|
open={open}
|
|
styles={{
|
|
body: {
|
|
paddingBottom: 80,
|
|
},
|
|
}}
|
|
// extra={
|
|
// <Space>
|
|
// <Button onClick={onClose}>取消</Button>
|
|
// <Button onClick={onClose} type="primary">
|
|
// 提交
|
|
// </Button>
|
|
// </Space>
|
|
// }
|
|
>
|
|
<Form
|
|
layout="vertical"
|
|
form={form}
|
|
onFinish={(values: any) => {
|
|
const formData: any = {
|
|
userId: userId,
|
|
...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="名称"
|
|
rules={[{ required: true, message: "请输入圈子名称!" }]}>
|
|
<Input maxLength={30} showCount placeholder="请输入圈子名称!" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="icon"
|
|
label="图标"
|
|
rules={[{ required: true, message: "请输入图标!" }]}>
|
|
<Input placeholder="请输入图标!" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="description"
|
|
label="描述"
|
|
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
|
|
type={"primary"}
|
|
style={{ right: "5%", width: 50, height: 50 }}
|
|
icon={<PlusOutlined />}
|
|
onClick={() => setOpen(true)}
|
|
/>
|
|
</>
|
|
);
|
|
});
|
|
export default MainShare;
|