diff --git a/src/components/Main/Settings/index.module.less b/src/components/Main/Settings/index.module.less index 791eab7..d439dca 100644 --- a/src/components/Main/Settings/index.module.less +++ b/src/components/Main/Settings/index.module.less @@ -1,9 +1,10 @@ - -.settings_container{ - height: 75vh; -} -.settings_header{ - display: flex; - flex-direction: row; - justify-content: space-between; -} + +.settings_container{ + width: 100%; + height: 100%; +} +.settings_header{ + display: flex; + flex-direction: row; + justify-content: space-between; +} diff --git a/src/components/Main/Settings/index.tsx b/src/components/Main/Settings/index.tsx index 212245b..d86135c 100644 --- a/src/components/Main/Settings/index.tsx +++ b/src/components/Main/Settings/index.tsx @@ -55,7 +55,7 @@ export default () => { - + {location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? ( <> diff --git a/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx b/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx new file mode 100644 index 0000000..9efc83a --- /dev/null +++ b/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx @@ -0,0 +1,225 @@ +/** @format */ +import React, { useEffect, useRef } from "react"; +import { AiEditor } from "aieditor"; +import "aieditor/dist/style.css"; +import { useNavigate } from "react-router-dom"; +import "aieditor/dist/style.css"; +import styles from "./index.module.less"; +import { ProCard } from "@ant-design/pro-components"; +import { Button, Card, Form, FormListFieldData, FormProps, Input, Select } from "antd"; +import { CloseOutlined, LeftOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; +import selectOptions from "@/components/Main/Settings/settings.ts"; + +const ShareAdd: React.FunctionComponent = () => { + const navigate = useNavigate(); + const divRef = useRef(null); + const fromRef: any = useRef(); + const [isDisabled, setIsDisabled] = React.useState(false); + + const onFinish: FormProps["onFinish"] = (values) => { + console.log("Success:", values); + }; + useEffect(() => { + if (divRef.current) { + const aiEditor = new AiEditor({ + element: divRef.current, + placeholder: "点击输入描述...", + contentRetention: true, + textSelectionBubbleMenu: { + enable: true, + items: ["ai", "Bold", "Italic", "Underline", "Strike", "code", "comment"], + }, + onChange: async (value) => { + fromRef.current.setFieldsValue({ + content: value.getHtml(), + }); + }, + }); + return () => { + aiEditor.destroy(); + }; + } + }, []); + return ( + <> +
+ + + + + + )} + + + + {(fields: FormListFieldData[], { add, remove }) => ( +
+ {fields.map((field: FormListFieldData, index: number) => ( + { + remove(field.name); + }} + /> + }> + + + + + + + + + + + + + + ))} + + +
+ )} + + + + + +
+ + + ); +}; +export default ShareAdd; diff --git a/src/components/Main/Share/components/ShareAdd/index.module.less b/src/components/Main/Share/components/ShareAdd/index.module.less new file mode 100644 index 0000000..ce6917a --- /dev/null +++ b/src/components/Main/Share/components/ShareAdd/index.module.less @@ -0,0 +1,7 @@ +.share_add_main{ + display: flex; + flex-direction: column; + .share_add_content{ + margin-top: 2%; + } +} diff --git a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx index 471b4dd..249c4f5 100644 --- a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx +++ b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx @@ -1,43 +1,130 @@ /** @format */ -import React, { useEffect, useRef } from "react"; -import { Button } from "antd"; -import { LeftOutlined } from "@ant-design/icons"; +import React from "react"; +import { Avatar, Button, Card, Divider, Flex, Tooltip } from "antd"; +import { + ExportOutlined, + InfoCircleOutlined, + LeftOutlined, + WarningOutlined, +} from "@ant-design/icons"; import { useNavigate } from "react-router-dom"; -import {AiEditor} from "aieditor"; -import "aieditor/dist/style.css" +import "aieditor/dist/style.css"; +import { ProCard } from "@ant-design/pro-components"; +import styles from "./index.module.less"; +import logo from "@/assets/icons/baiduyun.svg"; +import { Typography } from "antd"; +const { Paragraph } = Typography; const ShareDetail: React.FunctionComponent = () => { const navigate = useNavigate(); - //定义 ref - const divRef = useRef(null); - //初始化 AiEditor - useEffect(() => { - if (divRef.current) { - const aiEditor = new AiEditor({ - editable:false, - element: divRef.current, - placeholder: "点击输入内容...", - content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ', - }) - return ()=>{ - aiEditor.destroy(); - } - } - }, []) return ( <> - + + + Windows DefenderRemover + + + + 下载地址 + + + + + + +
+ + + 百度云 + +
+ + + + + + + DefenderRemove111111111 + + + + 密码：{" "} + 12345 + + + + + + + + + 本站所有资源均来源于网络，仅供学习使用，请下载后24小时内删除 + + + + diff --git a/src/components/Main/Share/components/ShareDetail/index.module.less b/src/components/Main/Share/components/ShareDetail/index.module.less new file mode 100644 index 0000000..2d14504 --- /dev/null +++ b/src/components/Main/Share/components/ShareDetail/index.module.less @@ -0,0 +1,10 @@ +.share_detail_container{ + margin-top: 10px; +} +.link_btn{ + font-size: 20px; + color: grey; +} +.link_btn:hover{ + color: #1890ff; +} diff --git a/src/components/Main/Share/components/ShareList/ShareList.tsx b/src/components/Main/Share/components/ShareList/ShareList.tsx index 0bdf749..3d58d06 100644 --- a/src/components/Main/Share/components/ShareList/ShareList.tsx +++ b/src/components/Main/Share/components/ShareList/ShareList.tsx @@ -1,13 +1,14 @@ /** @format */ import { ProCard } from "@ant-design/pro-components"; -import { Avatar, Button, Divider, List, Skeleton } from "antd"; +import { Avatar, Button, Divider, Flex, List, Skeleton, Tag } from "antd"; import { useEffect, useState } from "react"; import styles from "./index.module.less"; import Search from "antd/es/input/Search"; import InfiniteScroll from "react-infinite-scroll-component"; import { useNavigate } from "react-router-dom"; -import { LeftOutlined } from "@ant-design/icons"; +import { CommentOutlined, EyeOutlined, HeartOutlined, LeftOutlined } from "@ant-design/icons"; +import logo from "@/assets/icons/aliyun.svg"; interface DataType { gender: string; name: { @@ -23,11 +24,11 @@ interface DataType { }; nat: string; } + export default () => { const navigate = useNavigate(); const [loading, setLoading] = useState(false); const [data, setData] = useState([]); - const loadMoreData = () => { if (loading) { return; @@ -63,7 +64,12 @@ export default () => { - + @@ -81,16 +87,62 @@ export default () => { } title={ - { - navigate("/main/share/detail/1"); - }}> - {item.name.last} - + <> + { + navigate("/main/share/detail/1"); + }}> + {item.name.last} + + + IDM + + + } + description={ + <> + + {item.email} + + + + landaiqing + + + + 1024 + + + + 1024 + + {" "} + + 1024 + + + + } - description={item.email} /> -
Content
+ {/*
Content
*/} )} /> diff --git a/src/components/Main/Share/index.tsx b/src/components/Main/Share/index.tsx index 28e0b18..ed76e9d 100644 --- a/src/components/Main/Share/index.tsx +++ b/src/components/Main/Share/index.tsx @@ -1,45 +1,154 @@ /** @format */ -import { FunctionComponent } from "react"; +import { FunctionComponent, useState } from "react"; import { ProCard } from "@ant-design/pro-components"; import styles from "./index.module.less"; -import { Button, Card, Image } from "antd"; +import { Avatar, Button, Card, Drawer, Flex, Form, Image, Input, Space } from "antd"; import Search from "antd/es/input/Search"; import Meta from "antd/es/card/Meta"; import { useNavigate } from "react-router-dom"; import background from "@/assets/images/background.png"; +import TextArea from "antd/es/input/TextArea"; +import { EyeOutlined, UnorderedListOutlined } from "@ant-design/icons"; const MainShare: FunctionComponent = () => { const navigate = useNavigate(); + const [open, setOpen] = useState(false); + const showDrawer = () => { + setOpen(true); + }; + + const onClose = () => { + setOpen(false); + }; return ( <>
- +
- +
- - { - navigate("/main/share/list/1"); - }} - cover={ - example - }> - - + + + { + navigate("/main/share/list/1"); + }} + cover={ + example + }> + + + {" "} + landaiqing + + {" "} + 1024 + {" "} + 999 + + + + + { + navigate("/main/share/list/1"); + }} + cover={ + example + }> + + + {" "} + landaiqing + + {" "} + 1024 + {" "} + 999 + + + +
+ + + + + + }> +
+ + + + + + + + + +