feat: 更新我的分享页面

src/api/share/index.ts

@@ -73,6 +73,19 @@ export const listComment = (detailId: any) => {
 		},
 	});
 };
+/**
+ * 分享圈详情热门评论列表
+ * @param detailId
+ */
+export const listCommentHot = (detailId: any) => {
+	return web.request({
+		url: `/share/share/comment/reply/listcommenthot`,
+		method: "get",
+		params: {
+			detailId: detailId,
+		},
+	});
+};
 /**
  * 分享圈详情回复列表
  * @param commentId
@@ -115,9 +128,22 @@ export const addReply = (data: any) => {
 export const returnAllCommentAndReplyCount = (detailId: any) => {
 	return web.request({
 		url: `/share/share/comment/reply/returncount`,
-		method: "post",
+		method: "get",
 		params: {
 			detailId: detailId,
 		},
 	});
 };
+/**
+ * 获取我的分享圈列表
+ * @param userId
+ */
+export const getMyShareList = (userId: any) => {
+	return web.request({
+		url: `/share/share/detail/mydetail`,
+		method: "get",
+		params: {
+			userId: userId,
+		},
+	});
+};

src/api/user/index.ts

@@ -8,7 +8,7 @@ import web from "@/utils/axios/web.ts";
  */
 export const oauthLogin = (type: string) => {
 	return web.request({
-		url: "/auth/auth/oauth/render/" + type,
+		url: "/auth/oauth/render/" + type,
 		method: "get",
 	});
 };

src/components/Main/File/components/FileUpload.tsx

@@ -1,17 +1,16 @@
 /** @format */
 
-import React, { useEffect, useState } from "react";
-import { Avatar, Card, Flex, Input, message, Progress, Select, Upload } from "antd";
+import { useState } from "react";
+import { Avatar, Card, Flex, Input, message, Select, Upload } from "antd";
 import { CloudUploadOutlined } from "@ant-design/icons";
 import { ProCard } from "@ant-design/pro-components";
 import StorageIcon from "@/constant/stroage-icon.ts";
 import { getStorageBuckets, uploadFiles } from "@/api/oss";
 import useStore from "@/utils/store/useStore.tsx";
-import axios from "axios";
 
 const { Dragger } = Upload;
 
-const FileUpload: React.FC = (props: any) => {
+const FileUpload = (props: any) => {
 	const [buckets, setBuckets] = useState<any[]>([]);
 	const store = useStore("file");
 	const [defaultFileList, setDefaultFileList] = useState([]);
@@ -22,12 +21,12 @@ const FileUpload: React.FC = (props: any) => {
 			}
 		});
 	}
-	const handleOnChange = ({ fileList }) => {
+	const handleOnChange = ({ fileList }: { fileList: any }) => {
 		setDefaultFileList(fileList);
 	};
 
-	const uploadFile = async (options) => {
-		const { onSuccess, onError, file, onProgress } = options;
+	const uploadFile = async (options: any) => {
+		const { onSuccess, onError, file }: { onSuccess: any; onError: any; file: any } = options;
 		if (
 			store.getUploadFilePath() === null ||
 			(store.getUploadFileBucket() === null && store.getUploadFileStorage() === null)

src/components/Main/File/index.tsx

@@ -64,7 +64,7 @@ const File: FunctionComponent = () => {
 	const [loadingFile, setLoadingFile] = useState<boolean>(true);
 	const [open, setOpen] = useState<boolean>(false);
 	const [openRename, setOpenRename] = useState<boolean>(false);
-	const [userStorage, setUserStorage] = useState([]);
+	const [userStorage, setUserStorage] = useState<any>([] as any);
 	const [buckets, setBuckets] = useState<any[]>([]);
 	const [newFileName, setNewFileName] = useState<any>(null);
 	const [disable, setDisable] = useState<boolean>(true);

src/components/Main/Settings/components/AliSettings.tsx

@@ -32,7 +32,7 @@ const AliSettings: React.FC = () => {
 	const [openModal, setOpenModal] = useState(false);
 	const [configs, setConfigs] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
-	const [configDetail, setConfigDetail] = useState<object>({});
+	const [configDetail, setConfigDetail] = useState<any>({} as any);
 	const columns: ProColumns<any[]>[] = [
 		{
 			dataIndex: "index",

src/components/Main/Settings/components/MinioSettings.tsx

@@ -32,7 +32,7 @@ const MinioSettings: React.FC = () => {
 	const [configs, setConfigs] = useState<MinioOssConfigItem[]>([]);
 	const [openModal, setOpenModal] = useState(false);
 	const [loading, setLoading] = useState<boolean>(true);
-	const [configDetail, setConfigDetail] = useState<object>({});
+	const [configDetail, setConfigDetail] = useState<any>({} as any);
 	const columns: ProColumns<MinioOssConfigItem>[] = [
 		{
 			dataIndex: "index",

src/components/Main/Settings/components/QiniuSettings.tsx

@@ -32,7 +32,7 @@ const QiniuSettings: React.FC = () => {
 	const [config, setConfig] = useState<QiniuOssConfigItem[]>([]);
 	const [openModal, setOpenModal] = useState(false);
 	const [loading, setLoading] = useState<boolean>(true);
-	const [configDetail, setConfigDetail] = useState<object>({});
+	const [configDetail, setConfigDetail] = useState<any>({} as any);
 	const columns: ProColumns<QiniuOssConfigItem>[] = [
 		{
 			dataIndex: "index",

src/components/Main/Settings/components/TencentSettings.tsx

@@ -34,7 +34,7 @@ const TencentSettings: React.FC = () => {
 	const [configs, setConfigs] = useState<TencentOssConfigItem[]>([]);
 	const [openModal, setOpenModal] = useState(false);
 	const [loading, setLoading] = useState<boolean>(true);
-	const [configDetail, setConfigDetail] = useState<object>({});
+	const [configDetail, setConfigDetail] = useState<any>({} as any);
 	const columns: ProColumns<TencentOssConfigItem>[] = [
 		{
 			dataIndex: "index",

src/components/Main/Share/components/ShareAdd/ShareAdd.tsx

@@ -1,33 +1,41 @@
 /** @format */
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } 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 type { ColorPickerProps } from "antd";
 import {
 	Button,
 	Card,
+	Col,
+	ColorPicker,
+	Divider,
 	Flex,
 	Form,
 	FormListFieldData,
 	FormProps,
 	Input,
 	message,
+	Row,
 	Select,
+	theme,
 } from "antd";
 import { CloseOutlined, LeftOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import selectOptions from "@/components/Main/Settings/settings.ts";
 import { addShareDetail } from "@/api/share";
 import useStore from "@/utils/store/useStore.tsx";
 import { observer } from "mobx-react";
+import { cyan, generate, green, presetPalettes, red } from "@ant-design/colors";
+
+type Presets = Required<ColorPickerProps>["presets"][number];
 
 const ShareAdd: React.FunctionComponent = () => {
 	const navigate = useNavigate();
 	const divRef = useRef(null);
 	const [form] = Form.useForm();
-	const [isDisabled, setIsDisabled] = React.useState(false);
+	const [isDisabled, setIsDisabled] = useState(false);
 	const store = useStore("share");
 
 	const onFinish: FormProps["onFinish"] = (values) => {
@@ -36,6 +44,7 @@ const ShareAdd: React.FunctionComponent = () => {
 			userId: 32,
 			...values,
 		};
+		console.log(formData);
 		addShareDetail(formData).then((res: any) => {
 			if (res && res.success) {
 				message
@@ -54,6 +63,46 @@ const ShareAdd: React.FunctionComponent = () => {
 			}
 		});
 	};
+	const genPresets = (presets: any = presetPalettes) =>
+		Object.entries(presets).map<Presets>(([label, colors]: [label: any, colors: any]) => ({
+			label,
+			colors,
+		}));
+
+	const HorizontalLayoutDemo = () => {
+		const { token } = theme.useToken();
+
+		const presets = genPresets({
+			primary: generate(token.colorPrimary),
+			red,
+			green,
+			cyan,
+		});
+
+		const customPanelRender: ColorPickerProps["panelRender"] = (
+			_,
+			{ components: { Picker, Presets } },
+		) => (
+			<Row justify="space-between" wrap={false}>
+				<Col span={12}>
+					<Presets />
+				</Col>
+				<Divider type="vertical" style={{ height: "auto" }} />
+				<Col flex="auto">
+					<Picker />
+				</Col>
+			</Row>
+		);
+
+		return (
+			<ColorPicker
+				defaultValue={token.colorPrimary}
+				styles={{ popupOverlayInner: { width: 480 } }}
+				presets={presets}
+				panelRender={customPanelRender}
+			/>
+		);
+	};
 	useEffect(() => {
 		if (divRef.current) {
 			const aiEditor = new AiEditor({
@@ -104,7 +153,11 @@ const ShareAdd: React.FunctionComponent = () => {
 					</Flex>
 				</ProCard>
 				<div className={styles.share_add_content}>
-					<Form onFinish={onFinish} autoComplete="off" form={form}>
+					<Form
+						onFinish={onFinish}
+						autoComplete="off"
+						form={form}
+						initialValues={{ color: "#1677ff" }}>
 						<Form.Item
 							label={
 								<>
@@ -160,7 +213,7 @@ const ShareAdd: React.FunctionComponent = () => {
 										if (!tags) {
 											return Promise.reject(new Error("请至少填写一个标签"));
 										}
-										if (tags.length > 3) {
+										if (tags.length >= 4) {
 											setIsDisabled(true);
 											return Promise.reject(
 												new Error("最多只能添加三个标签"),
@@ -172,35 +225,49 @@ const ShareAdd: React.FunctionComponent = () => {
 							{(fields: FormListFieldData[], { add, remove }, { errors }) => (
 								<>
 									{fields.map((field: FormListFieldData, index: number) => (
-										<Form.Item
-											label={
-												<>
-													<h4>{"标签" + (index + 1)}</h4>
-												</>
-											}
-											key={index}
-											id={"tags"}>
+										<Flex vertical={false} align={"center"} key={index}>
 											<Form.Item
-												validateTrigger={["onChange", "onBlur"]}
-												name={[field.name, "tagName"] as any}
-												noStyle>
-												<Input
-													placeholder="请输入标签"
-													maxLength={10}
-													showCount
-													style={{ width: "20%" }}
-												/>
+												required={true}
+												label={
+													<>
+														<h4>{"标签" + (index + 1)}</h4>
+													</>
+												}
+												key={index}
+												id={"tags"}>
+												<Flex vertical={false} align={"center"}>
+													<Form.Item
+														validateTrigger={["onChange", "onBlur"]}
+														name={[field.name, "tagName"] as any}
+														noStyle>
+														<Input
+															placeholder="请输入标签"
+															maxLength={10}
+															showCount
+															style={{ width: "250px" }}
+														/>
+													</Form.Item>
+													<Form.Item
+														validateTrigger={["onChange", "onBlur"]}
+														name={[field.name, "color"] as any}
+														noStyle>
+														<Input
+															addonBefore={"#"}
+															style={{ width: 150 }}></Input>
+													</Form.Item>
+													<HorizontalLayoutDemo />
+													{fields.length > 0 ? (
+														<MinusCircleOutlined
+															className="dynamic-delete-button"
+															onClick={() => {
+																setIsDisabled(false);
+																remove(field.name);
+															}}
+														/>
+													) : null}
+												</Flex>
 											</Form.Item>
-											{fields.length > 0 ? (
-												<MinusCircleOutlined
-													className="dynamic-delete-button"
-													onClick={() => {
-														setIsDisabled(false);
-														remove(field.name);
-													}}
-												/>
-											) : null}
-										</Form.Item>
+										</Flex>
 									))}
 									<Form.Item>
 										<Button

src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx

@@ -16,7 +16,14 @@ import {
 import { useEffect, useState } from "react";
 import styles from "./index.module.less";
 import { useParams } from "react-router-dom";
-import { addComment, addReply, listComment, listReply } from "@/api/share";
+import {
+	addComment,
+	addReply,
+	listComment,
+	listCommentHot,
+	listReply,
+	returnAllCommentAndReplyCount,
+} from "@/api/share";
 const Comment = () => {
 	const params = useParams();
 	const [isReply, setIsReply] = useState<any>(null);
@@ -28,16 +35,32 @@ const Comment = () => {
 	const [commentData, setCommentData] = useState<any>("");
 	const [replyData, setReplyData] = useState<any>("");
 	const [replyReplyData, setReplyReplyData] = useState<any>("");
+	const [count, setCount] = useState<any>(0);
 	async function listComments() {
 		listComment(params.id).then((res: any) => {
-			console.log(res);
 			if (res && res.success && res.data) {
+				setComment([]);
 				setComment(res.data);
 				setLoading(false);
 			}
 		});
 	}
-
+	async function getCommentHot() {
+		listCommentHot(params.id).then((res: any) => {
+			if (res && res.success && res.data) {
+				setComment([]);
+				setComment(res.data);
+				setLoading(false);
+			}
+		});
+	}
+	async function getAllCommentAndReply(detailId: any) {
+		returnAllCommentAndReplyCount(detailId).then((res: any) => {
+			if (res && res.success && res.data) {
+				setCount(res.data);
+			}
+		});
+	}
 	async function addComments(data: any) {
 		addComment(data).then((res: any) => {
 			if (res && res.success && res.data) {
@@ -56,7 +79,6 @@ const Comment = () => {
 	}
 	async function replyComment(commentId: any) {
 		listReply(commentId).then((res: any) => {
-			console.log(res);
 			if (res && res.success && res.data) {
 				setReply(res.data);
 			}
@@ -89,11 +111,12 @@ const Comment = () => {
 	};
 	useEffect(() => {
 		listComments().then();
+		getAllCommentAndReply(params.id).then();
 	}, []);
 	return (
 		<>
 			<div>
-				<ProCard title={"评论"}>
+				<ProCard title={"评论 " + count}>
 					<Skeleton active={true} loading={loading} paragraph={{ rows: 2 }}>
 						<Flex vertical={false}>
 							<Flex vertical={true} justify={"flex-start"}>
@@ -143,16 +166,26 @@ const Comment = () => {
 								block={false}
 								style={{ width: 145 }}
 								size={"middle"}
+								defaultValue={"hot"}
+								onChange={(value: any) => {
+									if (value === "hot") {
+										getCommentHot().then();
+									}
+
+									if (value === "new") {
+										listComments().then();
+									}
+								}}
 								options={[
 									{
-										label: "最新",
-										value: "List",
-										icon: <BarsOutlined />,
+										label: "最热",
+										value: "hot",
+										icon: <FireOutlined />,
 									},
 									{
-										label: "最热",
-										value: "Kanban",
-										icon: <FireOutlined />,
+										label: "最新",
+										value: "new",
+										icon: <BarsOutlined />,
 									},
 								]}
 							/>
@@ -688,7 +721,7 @@ const Comment = () => {
 																												onClick={() => {
 																													const data: any =
 																														{
-																															userId: 32,
+																															userId: 17,
 																															detailId:
 																																params.id,
 																															content:

src/components/Main/Share/components/ShareList/ShareList.tsx

@@ -13,7 +13,6 @@ import {
 	ShareAltOutlined,
 } from "@ant-design/icons";
 import { shareDetailList } from "@/api/share";
-import getRandomColor from "@/constant/random-color.ts";
 import useStore from "@/utils/store/useStore.tsx";
 import { observer } from "mobx-react";
 interface DataType {
@@ -41,6 +40,7 @@ export default observer(() => {
 	async function getShareDetailList() {
 		store.setCircleId(params.id as string);
 		shareDetailList(params.id).then((res: any) => {
+			console.log(res);
 			if (res && res.data && res.data) {
 				setData(res.data);
 				setLoading(false);
@@ -108,7 +108,7 @@ export default observer(() => {
 																	key={index}>
 																	<Tag
 																		bordered={false}
-																		color={getRandomColor()}
+																		color={"#" + tag.color}
 																		style={{ marginLeft: 10 }}>
 																		{tag.tagName}
 																	</Tag>

src/components/Main/User/MyShare/index.module.less

@@ -0,0 +1,10 @@
+.share_list_main{
+	display: flex;
+	flex-direction: column;
+	min-height: 83vh;
+	.share_list_header{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+}

src/components/Main/User/MyShare/index.tsx

@@ -1,84 +1,96 @@
 /** @format */
 
 import { ProCard } from "@ant-design/pro-components";
-import { Avatar, Divider, Flex, List, Skeleton, Tag } from "antd";
+import { Avatar, Button, Flex, Input, List, Skeleton, Tag } from "antd";
 import { useEffect, useState } from "react";
 import styles from "./index.module.less";
-import InfiniteScroll from "react-infinite-scroll-component";
-import { useNavigate } from "react-router-dom";
+
+import { Link, useNavigate } from "react-router-dom";
 import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
-import logo from "@/assets/icons/aliyun.svg";
-interface DataType {
-	gender: string;
-	name: {
-		title: string;
-		first: string;
-		last: string;
-	};
-	email: string;
-	picture: {
-		large: string;
-		medium: string;
-		thumbnail: string;
-	};
-	nat: string;
-}
+import { getMyShareList } from "@/api/share";
 
 export default () => {
 	const navigate = useNavigate();
-	const [loading, setLoading] = useState(false);
-	const [data, setData] = useState<DataType[]>([]);
-	const loadMoreData = () => {
-		if (loading) {
-			return;
-		}
-		setLoading(true);
-		fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
-			.then((res) => res.json())
-			.then((body) => {
-				setData([...data, ...body.results]);
+	const [loading, setLoading] = useState(true);
+	const [data, setData] = useState<[]>([]);
+	async function getMyShare() {
+		getMyShareList(32).then((res: any) => {
+			console.log(res);
+			if (res && res.success && res.data) {
+				setData(res.data);
 				setLoading(false);
-			})
-			.catch(() => {
-				setLoading(false);
-			});
-	};
+			}
+		});
+	}
 
 	useEffect(() => {
-		loadMoreData();
+		getMyShare().then();
 	}, []);
 	return (
 		<>
 			<div className={styles.share_list_main}>
-				<ProCard bordered={true} boxShadow={true}>
-					<InfiniteScroll
-						dataLength={data.length}
-						next={loadMoreData}
-						hasMore={data.length < 50}
-						loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-						endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
-						scrollableTarget="scrollableDiv">
+				<ProCard bordered={false} boxShadow={false}>
+					<div className={styles.share_list_header}>
+						<Flex
+							vertical={false}
+							align={"center"}
+							justify={"space-between"}
+							style={{ width: "100%" }}>
+							<div>
+								<Input
+									placeholder="搜索"
+									style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
+								/>
+							</div>
+							<div>
+								<Button
+									type={"primary"}
+									onClick={() => {
+										navigate("/main/share/add");
+									}}>
+									去分享
+								</Button>
+							</div>
+						</Flex>
+					</div>
+				</ProCard>
+				<ProCard bordered={false} boxShadow={false}>
+					<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
 						<List
 							dataSource={data}
-							renderItem={(item) => (
-								<List.Item key={item.email}>
+							header={
+								<>
+									<h4>分享列表</h4>
+								</>
+							}
+							renderItem={(item: any) => (
+								<List.Item key={item.id}>
 									<List.Item.Meta
-										avatar={<Avatar src={item.picture.large} />}
+										avatar={<Avatar src={item.icon} />}
 										title={
-											<>
-												<a
-													onClick={() => {
-														navigate("/main/share/detail/1");
-													}}>
-													{item.name.last}
-												</a>
-												<Tag
-													bordered={false}
-													color="processing"
-													style={{ marginLeft: 10 }}>
-													IDM
-												</Tag>
-											</>
+											<Flex vertical={false} align={"center"}>
+												<Link to={"/main/share/detail/" + item.id}>
+													{item.title}
+												</Link>
+												{item.tags &&
+													Array.from(item.tags).map(
+														(tag: any, index: number) => {
+															return (
+																<Flex
+																	vertical={false}
+																	align={"center"}
+																	key={index}>
+																	<Tag
+																		bordered={false}
+																		color={"#" + tag.color}
+																		style={{ marginLeft: 10 }}>
+																		{tag.tagName}
+																	</Tag>
+																</Flex>
+															);
+														},
+													)}
+											</Flex>
 										}
 										description={
 											<>
@@ -86,45 +98,67 @@ export default () => {
 													vertical={false}
 													justify={"space-between"}
 													align={"center"}>
-													{item.email}
+													{item.description}
 													<Flex
 														vertical={false}
 														align={"center"}
 														justify={"space-between"}
-														style={{ width: "250px" }}>
-														<Avatar src={logo} size={"small"} />
-														<span
-															style={{
-																fontSize: 12,
-																color: "gray",
-															}}>
-															landaiqing
-														</span>
-														<HeartOutlined />
-														<span
-															style={{ fontSize: 12, color: "gray" }}>
-															1024
-														</span>
-														<CommentOutlined />
-														<span
-															style={{ fontSize: 12, color: "gray" }}>
-															1024
-														</span>
-														<EyeOutlined style={{ color: "gray" }} />{" "}
-														<span
-															style={{ fontSize: 12, color: "gray" }}>
-															1024
-														</span>
+														style={{ width: "300px" }}>
+														<Flex vertical={false} align={"center"}>
+															<Avatar
+																src={item.avatar as any}
+																size={"small"}
+															/>
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																	overflow: "hidden",
+																}}>
+																{item.nickname}
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<HeartOutlined />
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																}}>
+																{item.likesCount}
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<CommentOutlined />
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																}}>
+																{item.commentCount}
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<EyeOutlined
+																style={{ color: "gray" }}
+															/>{" "}
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																}}>
+																{item.views}
+															</span>
+														</Flex>
 													</Flex>
 												</Flex>
 											</>
 										}
 									/>
-									{/*<div>Content</div>*/}
 								</List.Item>
 							)}
 						/>
-					</InfiniteScroll>
+					</Skeleton>
 				</ProCard>
 			</div>
 		</>

src/components/Main/User/UserInfo/index.tsx

@@ -2,7 +2,6 @@
 import { FunctionComponent, useEffect, useState } from "react";
 import { Avatar, Card, Empty, Flex, List, Skeleton } from "antd";
 import {
-	AntDesignOutlined,
 	BankOutlined,
 	BulbOutlined,
 	EnvironmentOutlined,
@@ -13,12 +12,13 @@ import Meta from "antd/es/card/Meta";
 import { Link, useNavigate } from "react-router-dom";
 import { getAllStorage } from "@/api/oss";
 import StorageIcon from "@/constant/stroage-icon.ts";
+import { getUserInfoApi } from "@/api/user";
 
 const UserInfo: FunctionComponent = () => {
 	const navigate = useNavigate();
 	const [loading, setLoading] = useState(true);
 	const [userStorage, setUserStorage] = useState([]);
-	// const [userInfo, setUserInfo] = useState<any>({} as any);
+	const [userInfo, setUserInfo] = useState<any>({} as any);
 	const data = [
 		{
 			title: "Ant Design Title 1",
@@ -40,14 +40,14 @@ const UserInfo: FunctionComponent = () => {
 			setLoading(false);
 		}
 	}
-	// const getUserInfo = async () => {
-	// 	const res = await getUserInfoApi("9");
-	// 	if (res && res.success && res.data) {
-	// 		setUserInfo(res.data);
-	// 	}
-	// };
+	const getUserInfo = async () => {
+		const res = await getUserInfoApi("17");
+		if (res && res.success && res.data) {
+			setUserInfo(res.data);
+		}
+	};
 	useEffect(() => {
-		// getUserInfo().then();
+		getUserInfo().then();
 		getUserStorage().then();
 	}, []);
 	return (
@@ -56,18 +56,18 @@ const UserInfo: FunctionComponent = () => {
 				<div className={styles.user_info_header_avatar}>
 					<Avatar
 						size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
-						icon={<AntDesignOutlined />}
+						src={userInfo.avatar}
 					/>
-					<span className={styles.user_info_header_name}>用户名</span>
+					<span className={styles.user_info_header_name}>{userInfo.nickName}</span>
 					<div className={styles.user_info_header_desc}>
 						<div>
-							<BulbOutlined /> 前端架构师
+							<BulbOutlined /> {userInfo.introduce || "-------"}
 						</div>
 						<div>
-							<EnvironmentOutlined /> 成都
+							<EnvironmentOutlined /> {userInfo.location || "-------"}
 						</div>
 						<div>
-							<BankOutlined /> 成都市上城
+							<BankOutlined /> {userInfo.company || "-------"}
 						</div>
 					</div>
 				</div>

src/components/Main/User/UserSetting/index.tsx

@@ -1,12 +1,9 @@
 /** @format */
 import { FunctionComponent, useEffect, useState } from "react";
 import { ProCard, ProForm, ProFormCascader } from "@ant-design/pro-components";
-import { AntDesignOutlined } from "@ant-design/icons";
 import {
 	Avatar,
 	Button,
-	Descriptions,
-	DescriptionsProps,
 	Flex,
 	Form,
 	FormProps,
@@ -14,42 +11,26 @@ import {
 	Select,
 	Skeleton,
 	Space,
-	Tabs,
+	Tabs, Tag
 } from "antd";
 import styles from "./index.module.less";
 import TextArea from "antd/es/input/TextArea";
 import { city } from "@/constant/five-level-address.ts";
+import { getUserInfoApi } from "@/api/user";
 
 const UserSetting: FunctionComponent = () => {
 	const [disable, setDisable] = useState(true);
 	const [loading, setLoading] = useState(true);
-	const items: DescriptionsProps["items"] = [
-		{
-			key: "1",
-			label: "用户名",
-			children: "Zhou Maomao",
-		},
-		{
-			key: "2",
-			label: "账号ID",
-			children: "1810000000",
-		},
-		{
-			key: "3",
-			label: "注册时间",
-			children: "Hangzhou, Zhejiang",
-		},
-		{
-			key: "4",
-			label: "邮箱",
-			children: "landaiqing@126.com",
-		},
-		{
-			key: "5",
-			label: "手机号",
-			children: "13333333333333",
-		},
-	];
+	const [userInfo, setUserInfo] = useState<any>({} as any);
+	async function getUserInfo() {
+		getUserInfoApi("17").then((res: any) => {
+			console.log(res);
+			if (res && res.success && res.data) {
+				setUserInfo(res.data);
+				setLoading(false);
+			}
+		});
+	}
 	type FieldType = {
 		email?: string;
 		nickname?: string;
@@ -66,7 +47,9 @@ const UserSetting: FunctionComponent = () => {
 	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
 		console.log("Failed:", errorInfo);
 	};
-
+	useEffect(() => {
+		getUserInfo().then();
+	}, []);
 	const prefixSelector = (
 		<Form.Item name="prefix" noStyle>
 			<Select style={{ width: 90 }}>
@@ -87,9 +70,6 @@ const UserSetting: FunctionComponent = () => {
 		);
 	};
 	useEffect(() => {
-		setTimeout(() => {
-			setLoading(false);
-		}, 2000);
 	}, []);
 	const TabItems = [
 		{
@@ -207,16 +187,31 @@ const UserSetting: FunctionComponent = () => {
 					<Skeleton loading={loading} active>
 						<Space direction={"vertical"} style={{ width: "100%" }}>
 							<ProCard hoverable bordered>
-								<Flex vertical={false} align={"center"} justify={"space-between"}>
-									<span style={{ width: 80 }}>登录密码：</span>
-									<Input variant="borderless" value={"******************"} />
+								<Flex vertical={false} align={"center"}>
+									<span style={{width: 100}}>登录密码：</span>
+									<Space.Compact style={{ width: '100%' }}>
+										<Input.Password value={"123456"} variant="borderless"/>
+										<Button  type="text">保存</Button>
+									</Space.Compact>
 								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
-								安全手机：1333333333333333
+								<Flex vertical={false} align={"center"}>
+									<span style={{width: 100}}>安全手机：</span>
+									<Space.Compact style={{ width: '100%' }}>
+										<Input.Password value={"123456"} variant="borderless"/>
+										<Button  type="text">保存</Button>
+									</Space.Compact>
+								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
-								安全邮箱：landaiqing@126.com
+								<Flex vertical={false} align={"center"}>
+									<span style={{width: 100}}>安全邮箱：</span>
+									<Space.Compact style={{ width: '100%' }}>
+										<Input.Password value={"123456"} variant="borderless"/>
+										<Button  type="text">保存</Button>
+									</Space.Compact>
+								</Flex>
 							</ProCard>
 						</Space>
 					</Skeleton>
@@ -233,14 +228,41 @@ const UserSetting: FunctionComponent = () => {
 						<div className={styles.user_setting_header}>
 							<Avatar
 								size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
-								icon={<AntDesignOutlined />}
+								src={userInfo.avatar}
 							/>
 
-							<Descriptions
-								style={{ width: "80%", marginLeft: "50px" }}
-								items={items}
-								column={3}
-								size={"small"}></Descriptions>
+							<Flex vertical={false} align={"center"} style={{ height: "100px",marginLeft: 40 }}>
+								<Flex vertical={true} justify={"flex-start"}>
+									<Flex vertical={false} align={"center"}>
+										<span style={{ color: "grey" }}>用户名：</span>
+										<span style={{width: 130}}>{userInfo.userName}</span>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+										<span style={{ color: "grey" }}>账号ID：</span>
+										<span style={{width: 130}}>{userInfo.id}</span>
+									</Flex>
+								</Flex>
+								<Flex vertical={true} style={{marginLeft: 50}}>
+									<Flex vertical={false} align={"center"}>
+										<span style={{ color: "grey" }}>邮 箱：</span>
+										<span style={{width: 130}}>{userInfo.email || "---------"}</span>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+										<span style={{ color: "grey" }}>手机号：</span>
+										<span style={{width: 130}}>{userInfo.phone || "---------"}</span>
+									</Flex>
+								</Flex>
+								<Flex vertical={true} style={{marginLeft: 50}}>
+									<Flex vertical={false} align={"center"}>
+										<span style={{ color: "grey" }}>注册时间：</span>
+										<span style={{width: 130}}>{userInfo.createdTime}</span>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+										<span style={{ color: "grey" }}>状 态：</span>
+										{userInfo.status===0 ? <Tag color={"success"}>正常</Tag>:<Tag color={"red"}>禁用</Tag>}
+									</Flex>
+								</Flex>
+							</Flex>
 						</div>
 					</Skeleton>
 				</ProCard>