feat: update

src/api/share/index.ts

@@ -43,7 +43,7 @@ export const shareDetailList = (circleId: any) => {
 export const getShareDetail = (id: any) => {
 	return web.request({
 		url: `/share/share/detail/get_detail`,
-		method: "post",
+		method: "get",
 		params: {
 			Id: id,
 		},
@@ -63,39 +63,45 @@ export const addShareDetail = (data: any) => {
 /**
  * 分享圈详情评论列表
  * @param detailId
+ * @param userId
  */
-export const listComment = (detailId: any) => {
+export const listComment = (detailId: any, userId: any) => {
 	return web.request({
 		url: `/share/share/comment/reply/listcomment`,
 		method: "get",
 		params: {
 			detailId: detailId,
+			userId: userId,
 		},
 	});
 };
 /**
  * 分享圈详情热门评论列表
  * @param detailId
+ * @param userId
  */
-export const listCommentHot = (detailId: any) => {
+export const listCommentHot = (detailId: any, userId: any) => {
 	return web.request({
 		url: `/share/share/comment/reply/listcommenthot`,
 		method: "get",
 		params: {
 			detailId: detailId,
+			userId: userId,
 		},
 	});
 };
 /**
  * 分享圈详情回复列表
  * @param commentId
+ * @param userId
  */
-export const listReply = (commentId: any) => {
+export const listReply = (commentId: any, userId: any) => {
 	return web.request({
 		url: `/share/share/comment/reply/listreply`,
 		method: "get",
 		params: {
 			commentId: commentId,
+			userId: userId,
 		},
 	});
 };
@@ -127,7 +133,7 @@ export const addReply = (data: any) => {
  */
 export const returnAllCommentAndReplyCount = (detailId: any) => {
 	return web.request({
-		url: `/share/share/comment/reply/returncount`,
+		url: `/share/share/detail/returncount`,
 		method: "get",
 		params: {
 			detailId: detailId,
@@ -147,3 +153,60 @@ export const getMyShareList = (userId: any) => {
 		},
 	});
 };
+/**
+ * 获取我的分享圈收藏
+ * @param userId
+ */
+export const getMyFavor = (userId: any) => {
+	return web.request({
+		url: `/share/share/user/favorites/myfavor`,
+		method: "get",
+		params: {
+			userId: userId,
+		},
+	});
+};
+/**
+ * 新增点赞
+ * @param data
+ */
+export const addLikeComment = (data: any) => {
+	return web.request({
+		url: `/share/share/comment/reply/addlike`,
+		method: "post",
+		data: data,
+	});
+};
+/**
+ * 删除点赞
+ * @param data
+ */
+export const deletedLikeComment = (data: any) => {
+	return web.request({
+		url: `/share/share/comment/reply/dellike`,
+		method: "post",
+		data: data,
+	});
+};
+/**
+ * 新增点赞
+ * @param data
+ */
+export const addLikeDetail = (data: any) => {
+	return web.request({
+		url: `/share/share/detail/addlike`,
+		method: "post",
+		data: data,
+	});
+};
+/**
+ * 删除点赞
+ * @param data
+ */
+export const deletedLikeDetail = (data: any) => {
+	return web.request({
+		url: `/share/share/detail/dellike`,
+		method: "post",
+		data: data,
+	});
+};

src/api/user/index.ts

@@ -148,3 +148,37 @@ export const getUserInfoApi = (userId: string): any => {
 		},
 	});
 };
+
+/**
+ * 更新用户信息
+ * @param data
+ */
+export const updateUserInfo = (data: any): any => {
+	return web.request({
+		url: "/auth/auth/user/update",
+		method: "get",
+		data: data,
+	});
+};
+/**
+ * 新增用户收藏
+ * @param data
+ */
+export const addFavorites = (data: any): any => {
+	return web.request({
+		url: "/share/share/user/favorites/add",
+		method: "post",
+		data: data,
+	});
+};
+/**
+ * 取消用户收藏
+ * @param data
+ */
+export const deleteFavorites = (data: any): any => {
+	return web.request({
+		url: "/share/share/user/favorites/delete",
+		method: "post",
+		data: data,
+	});
+};

src/components/Main/Bucket/components/AliDrawer.tsx

@@ -8,16 +8,19 @@ import bucket from "@/assets/icons/bucket.svg";
 import styles from "./index.module.less";
 import { creatBucket, deleteBucket, getBucketSize } from "@/api/oss";
 import { getAllAliOSsBucket } from "@/api/oss/ali";
+import { observer } from "mobx-react";
+import useStore from "@/utils/store/useStore.tsx";
 
-const AliDrawer = () => {
+const AliDrawer = observer(() => {
 	const [buckets, setBuckets] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [bucketSize, setBucketSize] = useState<string>("");
 	const [form] = Form.useForm();
 	const [open, setOpen] = useState<boolean>(false);
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function getAllBucket() {
-		getAllAliOSsBucket("2").then((res: any) => {
+		getAllAliOSsBucket(userId).then((res: any) => {
 			if (res && res.success) {
 				setBuckets(res.data);
 				setLoading(false);
@@ -75,7 +78,7 @@ const AliDrawer = () => {
 														key={"calculate"}
 														onClick={() => {
 															getBucketSize(
-																1,
+																userId,
 																item.name,
 																"minio",
 															).then((res: any) => {
@@ -102,29 +105,31 @@ const AliDrawer = () => {
 													title={`删除存储桶：${item.name}`}
 													description="你知道你要做什么吗？"
 													onConfirm={() => {
-														deleteBucket(1, item.name, "minio").then(
+														deleteBucket(
-															(res: any) => {
+															userId,
-																if (
+															item.name,
-																	res &&
+															"minio",
-																	res.data &&
+														).then((res: any) => {
-																	res.data === "success"
+															if (
-																) {
+																res &&
-																	message
+																res.data &&
-																		.open({
+																res.data === "success"
-																			content: "删除成功！",
+															) {
-																			type: "success",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: "删除成功！",
-																} else {
+																		type: "success",
-																	message
+																	})
-																		.open({
+																	.then();
-																			content: res.data,
+															} else {
-																			type: "error",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: res.data,
-																}
+																		type: "error",
-															},
+																	})
-														);
+																	.then();
+															}
+														});
 													}}
 													okText="Yes"
 													cancelText="No">
@@ -163,7 +168,7 @@ const AliDrawer = () => {
 							type: "warning",
 						});
 					} else {
-						creatBucket(1, bucketName, "ali").then((res: any) => {
+						creatBucket(userId, bucketName, "ali").then((res: any) => {
 							if (res && res.success) {
 								message
 									.open({
@@ -195,6 +200,6 @@ const AliDrawer = () => {
 			</Modal>
 		</>
 	);
-};
+});
 
 export default AliDrawer;

src/components/Main/Bucket/components/MinioDrawer.tsx

@@ -8,16 +8,19 @@ import bucket from "@/assets/icons/bucket.svg";
 import styles from "./index.module.less";
 import { getAllMinioBucket } from "@/api/oss/minio";
 import { creatBucket, deleteBucket, getBucketSize } from "@/api/oss";
+import { observer } from "mobx-react";
+import useStore from "@/utils/store/useStore.tsx";
 
-const MinioDrawer = () => {
+const MinioDrawer = observer(() => {
 	const [buckets, setBuckets] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [bucketSize, setBucketSize] = useState<string>("");
 	const [form] = Form.useForm();
 	const [open, setOpen] = useState<boolean>(false);
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function getAllBucket() {
-		getAllMinioBucket("1").then((res: any) => {
+		getAllMinioBucket(userId).then((res: any) => {
 			if (res && res.success) {
 				setBuckets(res.data);
 				setLoading(false);
@@ -74,7 +77,7 @@ const MinioDrawer = () => {
 														key={"calculate"}
 														onClick={() => {
 															getBucketSize(
-																1,
+																userId,
 																item.name,
 																"minio",
 															).then((res: any) => {
@@ -101,29 +104,31 @@ const MinioDrawer = () => {
 													title={`删除存储桶：${item.name}`}
 													description="你知道你要做什么吗？"
 													onConfirm={() => {
-														deleteBucket(1, item.name, "minio").then(
+														deleteBucket(
-															(res: any) => {
+															userId,
-																if (
+															item.name,
-																	res &&
+															"minio",
-																	res.data &&
+														).then((res: any) => {
-																	res.data === "success"
+															if (
-																) {
+																res &&
-																	message
+																res.data &&
-																		.open({
+																res.data === "success"
-																			content: "删除成功！",
+															) {
-																			type: "success",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: "删除成功！",
-																} else {
+																		type: "success",
-																	message
+																	})
-																		.open({
+																	.then();
-																			content: res.data,
+															} else {
-																			type: "error",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: res.data,
-																}
+																		type: "error",
-															},
+																	})
-														);
+																	.then();
+															}
+														});
 													}}
 													okText="Yes"
 													cancelText="No">
@@ -162,7 +167,7 @@ const MinioDrawer = () => {
 							type: "warning",
 						});
 					} else {
-						creatBucket(1, bucketName, "minio").then((res: any) => {
+						creatBucket(userId, bucketName, "minio").then((res: any) => {
 							if (res && res.success) {
 								message
 									.open({
@@ -194,6 +199,6 @@ const MinioDrawer = () => {
 			</Modal>
 		</>
 	);
-};
+});
 
 export default MinioDrawer;

src/components/Main/Bucket/components/QiniuDrawer.tsx

@@ -8,16 +8,19 @@ import bucket from "@/assets/icons/bucket.svg";
 import styles from "./index.module.less";
 import { getAllMinioBucket } from "@/api/oss/minio";
 import { creatBucket, deleteBucket, getBucketSize } from "@/api/oss";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
-const QiniuDrawer = () => {
+const QiniuDrawer = observer(() => {
 	const [buckets, setBuckets] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [bucketSize, setBucketSize] = useState<string>("");
 	const [form] = Form.useForm();
 	const [open, setOpen] = useState<boolean>(false);
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function getAllBucket() {
-		getAllMinioBucket("1").then((res: any) => {
+		getAllMinioBucket(userId).then((res: any) => {
 			if (res && res.success) {
 				setBuckets(res.data);
 				setLoading(false);
@@ -75,7 +78,7 @@ const QiniuDrawer = () => {
 														key={"calculate"}
 														onClick={() => {
 															getBucketSize(
-																1,
+																userId,
 																item.name,
 																"minio",
 															).then((res: any) => {
@@ -102,29 +105,31 @@ const QiniuDrawer = () => {
 													title={`删除存储桶：${item.name}`}
 													description="你知道你要做什么吗？"
 													onConfirm={() => {
-														deleteBucket(1, item.name, "minio").then(
+														deleteBucket(
-															(res: any) => {
+															userId,
-																if (
+															item.name,
-																	res &&
+															"minio",
-																	res.data &&
+														).then((res: any) => {
-																	res.data === "success"
+															if (
-																) {
+																res &&
-																	message
+																res.data &&
-																		.open({
+																res.data === "success"
-																			content: "删除成功！",
+															) {
-																			type: "success",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: "删除成功！",
-																} else {
+																		type: "success",
-																	message
+																	})
-																		.open({
+																	.then();
-																			content: res.data,
+															} else {
-																			type: "error",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: res.data,
-																}
+																		type: "error",
-															},
+																	})
-														);
+																	.then();
+															}
+														});
 													}}
 													okText="Yes"
 													cancelText="No">
@@ -163,7 +168,7 @@ const QiniuDrawer = () => {
 							type: "warning",
 						});
 					} else {
-						creatBucket(1, bucketName, "qiniu").then((res: any) => {
+						creatBucket(userId, bucketName, "qiniu").then((res: any) => {
 							if (res && res.success) {
 								message
 									.open({
@@ -195,6 +200,6 @@ const QiniuDrawer = () => {
 			</Modal>
 		</>
 	);
-};
+});
 
 export default QiniuDrawer;

src/components/Main/Bucket/components/TencentDrawer.tsx

@@ -8,16 +8,19 @@ import bucket from "@/assets/icons/bucket.svg";
 import styles from "./index.module.less";
 import { getAllMinioBucket } from "@/api/oss/minio";
 import { creatBucket, deleteBucket, getBucketSize } from "@/api/oss";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
-const TencentDrawer = () => {
+const TencentDrawer = observer(() => {
 	const [buckets, setBuckets] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [bucketSize, setBucketSize] = useState<string>("");
 	const [form] = Form.useForm();
 	const [open, setOpen] = useState<boolean>(false);
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function getAllBucket() {
-		getAllMinioBucket("1").then((res: any) => {
+		getAllMinioBucket(userId).then((res: any) => {
 			if (res && res.success) {
 				setBuckets(res.data);
 				setLoading(false);
@@ -75,7 +78,7 @@ const TencentDrawer = () => {
 														key={"calculate"}
 														onClick={() => {
 															getBucketSize(
-																1,
+																userId,
 																item.name,
 																"minio",
 															).then((res: any) => {
@@ -102,29 +105,31 @@ const TencentDrawer = () => {
 													title={`删除存储桶：${item.name}`}
 													description="你知道你要做什么吗？"
 													onConfirm={() => {
-														deleteBucket(1, item.name, "minio").then(
+														deleteBucket(
-															(res: any) => {
+															userId,
-																if (
+															item.name,
-																	res &&
+															"minio",
-																	res.data &&
+														).then((res: any) => {
-																	res.data === "success"
+															if (
-																) {
+																res &&
-																	message
+																res.data &&
-																		.open({
+																res.data === "success"
-																			content: "删除成功！",
+															) {
-																			type: "success",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: "删除成功！",
-																} else {
+																		type: "success",
-																	message
+																	})
-																		.open({
+																	.then();
-																			content: res.data,
+															} else {
-																			type: "error",
+																message
-																		})
+																	.open({
-																		.then();
+																		content: res.data,
-																}
+																		type: "error",
-															},
+																	})
-														);
+																	.then();
+															}
+														});
 													}}
 													okText="Yes"
 													cancelText="No">
@@ -163,7 +168,7 @@ const TencentDrawer = () => {
 							type: "warning",
 						});
 					} else {
-						creatBucket(1, bucketName, "tencent").then((res: any) => {
+						creatBucket(userId, bucketName, "tencent").then((res: any) => {
 							if (res && res.success) {
 								message
 									.open({
@@ -195,6 +200,6 @@ const TencentDrawer = () => {
 			</Modal>
 		</>
 	);
-};
+});
 
 export default TencentDrawer;

src/components/Main/Bucket/index.tsx

@@ -8,13 +8,17 @@ import { Button, Empty, Skeleton } from "antd";
 import StorageIcon from "@/constant/stroage-icon.ts";
 import { ReloadOutlined } from "@ant-design/icons";
 import { getAllStorage } from "@/api/oss";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
-const Bucket: FunctionComponent = () => {
+const Bucket: FunctionComponent = observer(() => {
 	const navigate = useNavigate();
 	const [userStorage, setUserStorage] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function getUserStorage() {
-		getAllStorage("1").then((res: any) => {
+		getAllStorage(userId).then((res: any) => {
 			if (res && res.success) {
 				setUserStorage(res.data);
 				setLoading(false);
@@ -78,5 +82,5 @@ const Bucket: FunctionComponent = () => {
 			</ProCard>
 		</div>
 	);
-};
+});
 export default Bucket;

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

@@ -14,8 +14,10 @@ const FileUpload = (props: any) => {
 	const [buckets, setBuckets] = useState<any[]>([]);
 	const store = useStore("file");
 	const [defaultFileList, setDefaultFileList] = useState([]);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function getBuckets(type: any) {
-		getStorageBuckets("1", type).then((res: any) => {
+		getStorageBuckets(userId, type).then((res: any) => {
 			if (res && res.success) {
 				setBuckets(res.data);
 			}
@@ -40,7 +42,7 @@ const FileUpload = (props: any) => {
 		const fileData = new FormData();
 		fileData.append("file", file);
 		const formData: any = {
-			userId: "1",
+			userId: userId,
 			bucketName: store.getUploadFileBucket(),
 			path: store.getUploadFilePath(),
 		};

src/components/Main/File/index.tsx

@@ -56,7 +56,7 @@ import {
 import StorageIcon from "@/constant/stroage-icon.ts";
 import { useNavigate } from "react-router-dom";
 import Base64 from "base-64";
-const File: FunctionComponent = () => {
+const File: FunctionComponent = observer(() => {
 	const store = useStore("file");
 	const navigate = useNavigate();
 	const [files, setFiles] = useState<any>([]);
@@ -69,14 +69,15 @@ const File: FunctionComponent = () => {
 	const [newFileName, setNewFileName] = useState<any>(null);
 	const [disable, setDisable] = useState<boolean>(true);
 	const [previewUrl, setPreviewUrl] = useState<any>(null);
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	function setLoadingTimeOut() {
 		setTimeout(() => {
 			setLoadingFile(false);
 		}, 500);
 	}
 	async function getUserStorage() {
-		getAllStorage("1").then((res: any) => {
+		getAllStorage(userId).then((res: any) => {
 			if (res && res.success) {
 				setUserStorage(res.data);
 				setLoading(false);
@@ -84,7 +85,7 @@ const File: FunctionComponent = () => {
 		});
 	}
 	async function getFiles(bucket: any, dirName: any, type: any) {
-		return getBucketFiles("1", bucket, dirName, type).then((res: any) => {
+		return getBucketFiles(userId, bucket, dirName, type).then((res: any) => {
 			if (res && res.success) {
 				setFiles(res.data);
 				setLoadingTimeOut();
@@ -96,7 +97,7 @@ const File: FunctionComponent = () => {
 		return dotIndex !== -1 ? filename.slice(dotIndex + 1) : "";
 	}
 	async function getBuckets(type: any) {
-		getStorageBuckets("1", type).then((res: any) => {
+		getStorageBuckets(userId, type).then((res: any) => {
 			if (res && res.success) {
 				setBuckets(res.data);
 			}
@@ -381,7 +382,7 @@ const File: FunctionComponent = () => {
 												return;
 											}
 											downloadFiles(
-												1,
+												userId,
 												store.getCurrentBucket(),
 												store.getCurrentStorage(),
 												store.getCurrentFile(),
@@ -427,7 +428,7 @@ const File: FunctionComponent = () => {
 											}
 											if (store.getCurrentFile() !== null) {
 												previewFile(
-													1,
+													userId,
 													store.getCurrentBucket(),
 													store.getCurrentStorage(),
 													store.getCurrentFile(),
@@ -493,7 +494,7 @@ const File: FunctionComponent = () => {
 													return;
 												}
 												previewFile(
-													1,
+													userId,
 													store.getCurrentBucket(),
 													store.getCurrentStorage(),
 													store.getCurrentFile(),
@@ -536,7 +537,7 @@ const File: FunctionComponent = () => {
 												return;
 											}
 											copyFile(
-												1,
+												userId,
 												store.getCurrentBucket(),
 												store.getCurrentStorage(),
 												store.getCopyFile(),
@@ -652,7 +653,7 @@ const File: FunctionComponent = () => {
 														}
 														if (newFileName !== null) {
 															renameFile(
-																1,
+																userId,
 																store.getCurrentBucket(),
 																store.getCurrentStorage(),
 																store.getCurrentFile(),
@@ -819,7 +820,7 @@ const File: FunctionComponent = () => {
 														onClick: ({ key }) => {
 															if (key === "delete") {
 																deleteFile(
-																	1,
+																	userId,
 																	store.getCurrentBucket(),
 																	store.getCurrentStorage(),
 																	store.getFilePathExceptFirst() +
@@ -840,7 +841,7 @@ const File: FunctionComponent = () => {
 																});
 															} else if (key === "view") {
 																previewFile(
-																	1,
+																	userId,
 																	store.getCurrentBucket(),
 																	store.getCurrentStorage(),
 																	store.getFilePathExceptFirst() +
@@ -896,7 +897,7 @@ const File: FunctionComponent = () => {
 																		.then();
 																} else {
 																	copyFile(
-																		1,
+																		userId,
 																		store.getCurrentBucket(),
 																		store.getCurrentStorage(),
 																		store.getCopyFile(),
@@ -1045,5 +1046,5 @@ const File: FunctionComponent = () => {
 			</Modal>
 		</>
 	);
-};
+});
 export default observer(File);

src/components/Main/Home/index.tsx

@@ -26,8 +26,10 @@ import { useNavigate } from "react-router-dom";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import FileIcon from "@/constant/file-icon.ts";
 import file_icon from "@/assets/icons/files/file.svg";
+import { observer } from "mobx-react";
+import useStore from "@/utils/store/useStore.tsx";
 
-const MainHome: React.FC = () => {
+const MainHome: React.FC = observer(() => {
 	const navigate = useNavigate();
 	const [loading, setLoading] = useState(true);
 	const [loadingEChart, setLoadingEChart] = useState(true);
@@ -46,10 +48,11 @@ const MainHome: React.FC = () => {
 	const [recentUploadFile, setRecentUploadFile] = useState<any>([]);
 	// const [recentDownloadFile, setRecentDownloadFile] = useState<any>([]);
 	const [recentPreviewFile, setRecentPreviewFile] = useState<any>([]);
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	// 获取存储同和存储商的个数
 	async function getStorageAndBucketsCount() {
-		return getStorageAndBuckets("1").then((res: any) => {
+		return getStorageAndBuckets(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				const from: any = Array.from(res.data);
 				setStorageCount(from.length);
@@ -63,7 +66,7 @@ const MainHome: React.FC = () => {
 	}
 	// 获取文件上传热力图
 	async function getFileHeatMap() {
-		return getUserFileHeatMap("1").then((res: any) => {
+		return getUserFileHeatMap(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setFileHeatmap(res.data.upload);
 			}
@@ -71,7 +74,7 @@ const MainHome: React.FC = () => {
 	}
 	// 获取文件上传下载流量
 	async function getUploadDownloadFlux() {
-		return getUserFileFlow("1").then((res: any) => {
+		return getUserFileFlow(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setUploadFlow(res.data.uploadflow);
 				setDownloadFlow(res.data.downloadflow);
@@ -80,7 +83,7 @@ const MainHome: React.FC = () => {
 	}
 	// 获取文件上传下载个数
 	async function getUploadDownloadCount() {
-		return getUserFileCount("1").then((res: any) => {
+		return getUserFileCount(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setUploadFile(res.data.upload);
 				setDownloadFile(res.data.download);
@@ -89,7 +92,7 @@ const MainHome: React.FC = () => {
 	}
 	// 获取每月用户下载数量
 	async function getDownloadCountByMonth() {
-		getUserDownloadFileDiagramPerMonth(1).then((res: any) => {
+		getUserDownloadFileDiagramPerMonth(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setMonthDownload(res.data);
 			}
@@ -98,7 +101,7 @@ const MainHome: React.FC = () => {
 
 	// 获取每月用户上传数量
 	async function getUploadCountByMonth() {
-		getUserUploadFileDiagramPerMonth(1).then((res: any) => {
+		getUserUploadFileDiagramPerMonth(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setMonthUpload(res.data);
 			}
@@ -106,7 +109,7 @@ const MainHome: React.FC = () => {
 	}
 	// 获取用户最近上传文件
 	async function getRecentUploadFile() {
-		getUserRecentUploadFile(1).then((res: any) => {
+		getUserRecentUploadFile(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setRecentUploadFile(res.data);
 			}
@@ -114,7 +117,7 @@ const MainHome: React.FC = () => {
 	}
 	//获取用户最近下载文件
 	// async function getRecentDownloadFile() {
-	// 	getUserRecentDownloadFile(1).then((res: any) => {
+	// 	getUserRecentDownloadFile(userId).then((res: any) => {
 	// 		if (res && res.success && res.data) {
 	// 			setRecentDownloadFile(res.data);
 	// 		}
@@ -122,7 +125,7 @@ const MainHome: React.FC = () => {
 	// }
 	//获取用户最近预览文件
 	async function getRecentPreviewFile() {
-		getUserRecentPreviewFile(1).then((res: any) => {
+		getUserRecentPreviewFile(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setRecentPreviewFile(res.data);
 			}
@@ -754,5 +757,5 @@ const MainHome: React.FC = () => {
 			</div>
 		</>
 	);
-};
+});
 export default memo(MainHome);

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

@@ -24,8 +24,10 @@ import {
 	setAliShutdown,
 	updateAliConfig,
 } from "@/api/oss/ali";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
-const AliSettings: React.FC = () => {
+const AliSettings: React.FC = observer(() => {
 	const [form] = Form.useForm();
 	const actionRef = useRef<ActionType>();
 	const [open, setOpen] = useState(false);
@@ -33,6 +35,9 @@ const AliSettings: React.FC = () => {
 	const [configs, setConfigs] = useState<any>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [configDetail, setConfigDetail] = useState<any>({} as any);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
+
 	const columns: ProColumns<any[]>[] = [
 		{
 			dataIndex: "index",
@@ -141,7 +146,7 @@ const AliSettings: React.FC = () => {
 		},
 	];
 	async function getAllConfig() {
-		getAllAliOSSConfig("1").then((res: any) => {
+		getAllAliOSSConfig(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setConfigs(res.data);
 			}
@@ -155,7 +160,7 @@ const AliSettings: React.FC = () => {
 		});
 	}
 	async function init(id: any) {
-		initAliOSS("1", id).then((res: any) => {
+		initAliOSS(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: "开启成功",
@@ -171,7 +176,7 @@ const AliSettings: React.FC = () => {
 		});
 	}
 	async function shutdown(id: any) {
-		setAliShutdown("1", id).then((res: any) => {
+		setAliShutdown(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: res.data,
@@ -209,7 +214,7 @@ const AliSettings: React.FC = () => {
 	async function addConfigs() {
 		const fieldsValue = form.getFieldsValue();
 		const AliOssConfig = {
-			userId: "1",
+			userId: userId,
 			...fieldsValue,
 		};
 		addAliOSSConfig(AliOssConfig).then((res: any) => {
@@ -419,6 +424,6 @@ const AliSettings: React.FC = () => {
 			</div>
 		</>
 	);
-};
+});
 
 export default AliSettings;

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

@@ -13,6 +13,8 @@ import {
 	setMinioShutdown,
 	updateMinioConfig,
 } from "@/api/oss/minio";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
 type MinioOssConfigItem = {
 	id: number;
@@ -25,7 +27,7 @@ type MinioOssConfigItem = {
 	status: string;
 };
 
-const MinioSettings: React.FC = () => {
+const MinioSettings: React.FC = observer(() => {
 	const [form] = Form.useForm();
 	const actionRef = useRef<ActionType>();
 	const [open, setOpen] = useState(false);
@@ -33,6 +35,8 @@ const MinioSettings: React.FC = () => {
 	const [openModal, setOpenModal] = useState(false);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [configDetail, setConfigDetail] = useState<any>({} as any);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	const columns: ProColumns<MinioOssConfigItem>[] = [
 		{
 			dataIndex: "index",
@@ -159,7 +163,7 @@ const MinioSettings: React.FC = () => {
 	}
 
 	async function init(id: any) {
-		initMinioOSS("1", id).then((res: any) => {
+		initMinioOSS(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: "开启成功",
@@ -176,7 +180,7 @@ const MinioSettings: React.FC = () => {
 	}
 
 	async function shutdown(id: any) {
-		setMinioShutdown("1", id).then((res: any) => {
+		setMinioShutdown(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: res.data,
@@ -214,7 +218,7 @@ const MinioSettings: React.FC = () => {
 	}
 
 	async function getAllConfig() {
-		getAllMinioConfig("1").then((res: any) => {
+		getAllMinioConfig(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setConfigs(res.data);
 			}
@@ -224,7 +228,7 @@ const MinioSettings: React.FC = () => {
 	async function addMinioConfig() {
 		const fieldsValue = form.getFieldsValue();
 		const MinioOssConfig = {
-			userId: "1",
+			userId: userId,
 			...fieldsValue,
 		};
 		addMinioOSSConfig(MinioOssConfig).then((res: any) => {
@@ -427,6 +431,6 @@ const MinioSettings: React.FC = () => {
 			</div>
 		</>
 	);
-};
+});
 
 export default MinioSettings;

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

@@ -13,6 +13,8 @@ import {
 	setQiniuShutdown,
 	updateQiniuConfig,
 } from "@/api/oss/qiniu";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
 type QiniuOssConfigItem = {
 	id: number;
@@ -25,7 +27,7 @@ type QiniuOssConfigItem = {
 	status: string;
 };
 
-const QiniuSettings: React.FC = () => {
+const QiniuSettings: React.FC = observer(() => {
 	const [form] = Form.useForm();
 	const actionRef = useRef<ActionType>();
 	const [open, setOpen] = useState(false);
@@ -33,6 +35,8 @@ const QiniuSettings: React.FC = () => {
 	const [openModal, setOpenModal] = useState(false);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [configDetail, setConfigDetail] = useState<any>({} as any);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	const columns: ProColumns<QiniuOssConfigItem>[] = [
 		{
 			dataIndex: "index",
@@ -144,7 +148,7 @@ const QiniuSettings: React.FC = () => {
 	];
 
 	async function init(id: any) {
-		initQiniuOSS("1", id).then((res: any) => {
+		initQiniuOSS(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: "开启成功",
@@ -169,7 +173,7 @@ const QiniuSettings: React.FC = () => {
 	}
 
 	async function shutdown(id: any) {
-		setQiniuShutdown("1", id).then((res: any) => {
+		setQiniuShutdown(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: res.data,
@@ -225,7 +229,7 @@ const QiniuSettings: React.FC = () => {
 	async function addQiniuoConfig() {
 		const fieldsValue = form.getFieldsValue();
 		const QiniuOssConfig = {
-			userId: 1,
+			userId: userId,
 			...fieldsValue,
 		};
 		addQiniuOSSConfig(QiniuOssConfig).then((res: any) => {
@@ -436,6 +440,6 @@ const QiniuSettings: React.FC = () => {
 			</div>
 		</>
 	);
-};
+});
 
 export default QiniuSettings;

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

@@ -13,6 +13,8 @@ import {
 	setTencentShutdown,
 	updateTencentConfig,
 } from "@/api/oss/tencent";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
 type TencentOssConfigItem = {
 	id: number;
@@ -27,7 +29,7 @@ type TencentOssConfigItem = {
 	status: string;
 };
 
-const TencentSettings: React.FC = () => {
+const TencentSettings: React.FC = observer(() => {
 	const [form] = Form.useForm();
 	const actionRef = useRef<ActionType>();
 	const [open, setOpen] = useState(false);
@@ -35,6 +37,8 @@ const TencentSettings: React.FC = () => {
 	const [openModal, setOpenModal] = useState(false);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [configDetail, setConfigDetail] = useState<any>({} as any);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	const columns: ProColumns<TencentOssConfigItem>[] = [
 		{
 			dataIndex: "index",
@@ -161,7 +165,7 @@ const TencentSettings: React.FC = () => {
 	];
 
 	async function init(id: any) {
-		initTencentOSS("1", id).then((res: any) => {
+		initTencentOSS(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: "开启成功",
@@ -184,7 +188,7 @@ const TencentSettings: React.FC = () => {
 		});
 	}
 	async function shutdown(id: any) {
-		setTencentShutdown("1", id).then((res: any) => {
+		setTencentShutdown(userId, id).then((res: any) => {
 			if (res && res.success) {
 				message.open({
 					content: res.data,
@@ -230,7 +234,7 @@ const TencentSettings: React.FC = () => {
 	};
 
 	async function getAllConfigs() {
-		getAllTencentOSsConfig("1").then((res: any) => {
+		getAllTencentOSsConfig(userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setConfigs(res.data);
 			}
@@ -240,7 +244,7 @@ const TencentSettings: React.FC = () => {
 	async function addTencentConfig() {
 		const fieldsValue = form.getFieldsValue();
 		const TencentOssConfig = {
-			userId: "1",
+			userId: userId,
 			...fieldsValue,
 		};
 		addTencentOSSConfig(TencentOssConfig).then((res: any) => {
@@ -461,6 +465,6 @@ const TencentSettings: React.FC = () => {
 			</div>
 		</>
 	);
-};
+});
 
 export default TencentSettings;

src/components/Main/Settings/index.tsx

@@ -7,7 +7,8 @@ import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Suspense } from "react";
 import selectOptions from "@/components/Main/Settings/settings.ts";
 import StorageIcon from "@/constant/stroage-icon.ts";
-export default () => {
+import { observer } from "mobx-react";
+export default observer(() => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	return (
@@ -98,4 +99,4 @@ export default () => {
 			</ProCard>
 		</div>
 	);
-};
+});

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

@@ -31,20 +31,20 @@ import { cyan, generate, green, presetPalettes, red } from "@ant-design/colors";
 
 type Presets = Required<ColorPickerProps>["presets"][number];
 
-const ShareAdd: React.FunctionComponent = () => {
+const ShareAdd: React.FunctionComponent = observer(() => {
 	const navigate = useNavigate();
 	const divRef = useRef(null);
 	const [form] = Form.useForm();
 	const [isDisabled, setIsDisabled] = useState(false);
 	const store = useStore("share");
-
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	const onFinish: FormProps["onFinish"] = (values) => {
 		const formData: any = {
 			circleId: store.getCircleId(),
-			userId: 32,
+			userId: userId,
 			...values,
 		};
-		console.log(formData);
 		addShareDetail(formData).then((res: any) => {
 			if (res && res.success) {
 				message
@@ -373,5 +373,5 @@ const ShareAdd: React.FunctionComponent = () => {
 			</div>
 		</>
 	);
-};
+});
 export default observer(ShareAdd);

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

@@ -1,6 +1,6 @@
 /** @format */
 import React, { useEffect, useState } from "react";
-import { Avatar, Button, Card, Divider, Flex, Skeleton, Tag, Tooltip } from "antd";
+import { Avatar, Button, Card, Divider, Flex, message, Skeleton, Tag, Tooltip } from "antd";
 import {
 	CommentOutlined,
 	ExportOutlined,
@@ -22,16 +22,18 @@ const { Paragraph } = Typography;
 import like from "@/assets/icons/like.svg";
 import favorite from "@/assets/icons/favorite.svg";
 import useStore from "@/utils/store/useStore.tsx";
-import { getShareDetail } from "@/api/share";
+import { addLikeDetail, getShareDetail } from "@/api/share";
 import StorageIcon from "@/constant/stroage-icon.ts";
 import { observer } from "mobx-react";
+import { addFavorites } from "@/api/user";
 const ShareDetail: React.FunctionComponent = () => {
 	const navigate = useNavigate();
 	const store = useStore("share");
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	const params = useParams();
-	const [detail, setDetail] = useState<any>({});
+	const [detail, setDetail] = useState<any>({} as any);
 	const [loading, setLoading] = useState(true);
-
 	async function getDetail() {
 		getShareDetail(params.id).then((res: any) => {
 			if (res && res.success && res.data) {
@@ -40,6 +42,40 @@ const ShareDetail: React.FunctionComponent = () => {
 			}
 		});
 	}
+	async function addLike() {
+		const data: any = {
+			userId: userId,
+			detailId: params.id,
+		};
+		addLikeDetail(data).then();
+	}
+	// async function delLike() {
+	// 	const data: any = {
+	// 		userId: userId,
+	// 		detailId: params.id,
+	// 	};
+	// 	deletedLikeDetail(data).then();
+	// }
+	async function setFavorites() {
+		const data: any = {
+			userId: userId,
+			detailId: params.id,
+			circleId: store.getCircleId(),
+		};
+		addFavorites(data).then((res: any) => {
+			if (res && res.success) {
+				message.open({
+					type: "success",
+					content: "收藏成功",
+				});
+			} else {
+				message.open({
+					type: "error",
+					content: "收藏失败",
+				});
+			}
+		});
+	}
 
 	useEffect(() => {
 		getDetail().then();
@@ -257,15 +293,22 @@ const ShareDetail: React.FunctionComponent = () => {
 							<Avatar
 								className={styles.like_icon}
 								src={like as any}
+								onClick={() => {
+									addLike().then();
+								}}
 								size={"large"}></Avatar>
+							{/*isFavor*/}
 							<Avatar
 								className={styles.favtorie_icon}
 								src={favorite as any}
+								onClick={() => {
+									setFavorites().then();
+								}}
 								size={"large"}></Avatar>
 						</Flex>
 					</ProCard>
 				</div>
-				<Comment />
+				<Comment auth={detail} />
 			</Skeleton>
 		</>
 	);

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

@@ -8,6 +8,7 @@ import {
 	CommentOutlined,
 	CrownOutlined,
 	FireOutlined,
+	LikeFilled,
 	LikeOutlined,
 	PictureOutlined,
 	SendOutlined,
@@ -18,13 +19,17 @@ import styles from "./index.module.less";
 import { useParams } from "react-router-dom";
 import {
 	addComment,
+	addLikeComment,
 	addReply,
+	deletedLikeComment,
 	listComment,
 	listCommentHot,
 	listReply,
 	returnAllCommentAndReplyCount,
 } from "@/api/share";
-const Comment = () => {
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
+const Comment = observer((props: any) => {
 	const params = useParams();
 	const [isReply, setIsReply] = useState<any>(null);
 	const [isReplyReply, setIsReplyReply] = useState<any>(null);
@@ -36,8 +41,11 @@ const Comment = () => {
 	const [replyData, setReplyData] = useState<any>("");
 	const [replyReplyData, setReplyReplyData] = useState<any>("");
 	const [count, setCount] = useState<any>(0);
+	const userStore = useStore("user");
+	const userId: any = userStore.getUserId();
 	async function listComments() {
-		listComment(params.id).then((res: any) => {
+		listComment(params.id, userId).then((res: any) => {
+			console.log(res);
 			if (res && res.success && res.data) {
 				setComment([]);
 				setComment(res.data);
@@ -45,8 +53,22 @@ const Comment = () => {
 			}
 		});
 	}
+	async function addLike(commentId: any) {
+		const data: any = {
+			userId: userId,
+			commentId: commentId,
+		};
+		addLikeComment(data).then();
+	}
+	async function delLike(commentId: any) {
+		const data: any = {
+			userId: userId,
+			commentId: commentId,
+		};
+		deletedLikeComment(data).then();
+	}
 	async function getCommentHot() {
-		listCommentHot(params.id).then((res: any) => {
+		listCommentHot(params.id, userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setComment([]);
 				setComment(res.data);
@@ -78,7 +100,7 @@ const Comment = () => {
 		});
 	}
 	async function replyComment(commentId: any) {
-		listReply(commentId).then((res: any) => {
+		listReply(commentId, userId).then((res: any) => {
 			if (res && res.success && res.data) {
 				setReply(res.data);
 			}
@@ -147,7 +169,7 @@ const Comment = () => {
 										type={"primary"}
 										onClick={() => {
 											const data: any = {
-												userId: 17,
+												userId: userId,
 												detailId: params.id,
 												content: commentData,
 											};
@@ -222,13 +244,16 @@ const Comment = () => {
 																	}}>
 																	{item.nick}
 																</span>
-																<Tag
+																{props.auth.userId ==
-																	bordered={false}
+																item.userId ? (
-																	icon={<CrownOutlined />}
+																	<Tag
-																	color={"cyan"}
+																		bordered={false}
-																	style={{ marginLeft: 5 }}>
+																		icon={<CrownOutlined />}
-																	作者
+																		color={"cyan"}
-																</Tag>
+																		style={{ marginLeft: 5 }}>
+																		作者
+																	</Tag>
+																) : null}
 															</Flex>
 															<ProCard
 																bordered={true}
@@ -253,11 +278,32 @@ const Comment = () => {
 																	<Flex
 																		vertical={false}
 																		align={"center"}>
-																		<LikeOutlined
+																		{item.isLike === false ? (
-																			className={
+																			<LikeOutlined
-																				styles.like_icon
+																				onClick={() => {
-																			}
+																					delLike(
-																		/>
+																						item.id,
+																					).then();
+																				}}
+																				className={
+																					styles.like_icon
+																				}
+																			/>
+																		) : (
+																			<LikeFilled
+																				className={
+																					styles.like_icon
+																				}
+																				style={{
+																					color: "red",
+																				}}
+																				onClick={() => {
+																					addLike(
+																						item.id,
+																					).then();
+																				}}
+																			/>
+																		)}
 																		<span
 																			style={{
 																				fontSize: 13,
@@ -409,7 +455,7 @@ const Comment = () => {
 																					onClick={() => {
 																						const data: any =
 																							{
-																								userId: 32,
+																								userId: userId,
 																								detailId:
 																									params.id,
 																								content:
@@ -485,13 +531,25 @@ const Comment = () => {
 																								replyItem.nickto
 																							}
 																						</span>
-																						{/*<Tag*/}
+																						{props.auth
-																						{/*	bordered={false}*/}
+																							.userId ==
-																						{/*	icon={<CrownOutlined />}*/}
+																						replyItem.userId ? (
-																						{/*	color={"cyan"}*/}
+																							<Tag
-																						{/*	style={{ marginLeft: 5 }}>*/}
+																								bordered={
-																						{/*	作者*/}
+																									false
-																						{/*</Tag>*/}
+																								}
+																								icon={
+																									<CrownOutlined />
+																								}
+																								color={
+																									"cyan"
+																								}
+																								style={{
+																									marginLeft: 5,
+																								}}>
+																								作者
+																							</Tag>
+																						) : null}
 																					</Flex>
 																					<ProCard
 																						bordered={
@@ -535,13 +593,33 @@ const Comment = () => {
 																								align={
 																									"center"
 																								}>
-																								<LikeOutlined
+																								{replyItem.isLike ===
-																									style={{
+																								false ? (
-																										fontSize: 13,
+																									<LikeOutlined
-																										color: "grey",
+																										onClick={() => {
-																										marginLeft: 10,
+																											delLike(
-																									}}
+																												replyItem.id,
-																								/>
+																											).then();
+																										}}
+																										className={
+																											styles.like_icon
+																										}
+																									/>
+																								) : (
+																									<LikeFilled
+																										className={
+																											styles.like_icon
+																										}
+																										style={{
+																											color: "red",
+																										}}
+																										onClick={() => {
+																											addLike(
+																												replyItem.id,
+																											).then();
+																										}}
+																									/>
+																								)}
 																								<span
 																									style={{
 																										fontSize: 13,
@@ -721,7 +799,7 @@ const Comment = () => {
 																												onClick={() => {
 																													const data: any =
 																														{
-																															userId: 17,
+																															userId: userId,
 																															detailId:
 																																params.id,
 																															content:
@@ -766,5 +844,5 @@ const Comment = () => {
 			</div>
 		</>
 	);
-};
+});
 export default Comment;

src/components/Main/Share/index.tsx

@@ -22,7 +22,11 @@ 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";
-const MainShare: FunctionComponent = () => {
+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);
@@ -184,8 +188,8 @@ const MainShare: FunctionComponent = () => {
 					layout="vertical"
 					form={form}
 					onFinish={(values: any) => {
-						const formData = {
+						const formData: any = {
-							userId: 17,
+							userId: userId,
 							...values,
 						};
 						addShareCircle(formData).then((res: any) => {
@@ -249,5 +253,5 @@ const MainShare: FunctionComponent = () => {
 			/>
 		</>
 	);
-};
+});
 export default MainShare;

src/components/Main/User/MyFavorites/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/MyFavorites/index.tsx

@@ -1,83 +1,116 @@
 /** @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 InfiniteScroll from "react-infinite-scroll-component";
+import styles from "./index.module.less";
-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";
+import { getMyFavor } from "@/api/share";
-interface DataType {
+import useStore from "@/utils/store/useStore.tsx";
-	gender: string;
+import { observer } from "mobx-react";
-	name: {
-		title: string;
-		first: string;
-		last: string;
-	};
-	email: string;
-	picture: {
-		large: string;
-		medium: string;
-		thumbnail: string;
-	};
-	nat: string;
-}
 
-export default () => {
+export default observer(() => {
 	const navigate = useNavigate();
-	const [loading, setLoading] = useState(false);
+	const [loading, setLoading] = useState(true);
-	const [data, setData] = useState<DataType[]>([]);
+	const [data, setData] = useState<[]>([]);
-	const loadMoreData = () => {
+	const store = useStore("user");
-		if (loading) {
+	const userId: any = store.getUserId();
-			return;
+	async function getMyShare() {
-		}
+		getMyFavor(userId).then((res: any) => {
-		setLoading(true);
+			if (res && res.success && res.data) {
-		fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
+				setData(res.data);
-			.then((res) => res.json())
-			.then((body) => {
-				setData([...data, ...body.results]);
 				setLoading(false);
-			})
+			}
-			.catch(() => {
+		});
-				setLoading(false);
+	}
-			});
+	// async function cancelFavorites(id: any) {
-	};
+	// 	const data: any = {
-
+	// 		id: id,
+	// 	};
+	// 	deleteFavorites(data).then((res: any) => {
+	// 		if (res && res.success) {
+	// 			message.open({
+	// 				type: "success",
+	// 				content: "取消成功",
+	// 			});
+	// 		} else {
+	// 			message.open({
+	// 				type: "error",
+	// 				content: "取消失败",
+	// 			});
+	// 		}
+	// 	});
+	// }
 	useEffect(() => {
-		loadMoreData();
+		getMyShare().then();
 	}, []);
 	return (
 		<>
-			<div>
+			<div className={styles.share_list_main}>
-				<ProCard bordered={true} boxShadow={true}>
+				<ProCard bordered={false} boxShadow={false}>
-					<InfiniteScroll
+					<div className={styles.share_list_header}>
-						dataLength={data.length}
+						<Flex
-						next={loadMoreData}
+							vertical={false}
-						hasMore={data.length < 50}
+							align={"center"}
-						loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+							justify={"space-between"}
-						endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
+							style={{ width: "100%" }}>
-						scrollableTarget="scrollableDiv">
+							<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) => (
+							header={
-								<List.Item key={item.email}>
+								<>
+									<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={
-											<>
+											<Flex vertical={false} align={"center"}>
-												<a
+												<Link to={"/main/share/detail/" + item.id}>
-													onClick={() => {
+													{item.title}
-														navigate("/main/share/detail/1");
+												</Link>
-													}}>
+												{item.tags &&
-													{item.name.last}
+													Array.from(item.tags).map(
-												</a>
+														(tag: any, index: number) => {
-												<Tag
+															return (
-													bordered={false}
+																<Flex
-													color="processing"
+																	vertical={false}
-													style={{ marginLeft: 10 }}>
+																	align={"center"}
-													IDM
+																	key={index}>
-												</Tag>
+																	<Tag
-											</>
+																		bordered={false}
+																		color={"#" + tag.color}
+																		style={{ marginLeft: 10 }}>
+																		{tag.tagName}
+																	</Tag>
+																</Flex>
+															);
+														},
+													)}
+											</Flex>
 										}
 										description={
 											<>
@@ -85,47 +118,69 @@ export default () => {
 													vertical={false}
 													justify={"space-between"}
 													align={"center"}>
-													{item.email}
+													{item.description}
 													<Flex
 														vertical={false}
 														align={"center"}
 														justify={"space-between"}
-														style={{ width: "250px" }}>
+														style={{ width: "300px" }}>
-														<Avatar src={logo} size={"small"} />
+														<Flex vertical={false} align={"center"}>
-														<span
+															<Avatar
-															style={{
+																src={item.avatar as any}
-																fontSize: 12,
+																size={"small"}
-																color: "gray",
+															/>
-															}}>
+															<span
-															landaiqing
+																style={{
-														</span>
+																	fontSize: 12,
-														<HeartOutlined />
+																	color: "gray",
-														<span
+																	overflow: "hidden",
-															style={{ fontSize: 12, color: "gray" }}>
+																}}>
-															1024
+																{item.nickname}
-														</span>
+															</span>
-														<CommentOutlined />
+														</Flex>
-														<span
+														<Flex vertical={false} align={"center"}>
-															style={{ fontSize: 12, color: "gray" }}>
+															<HeartOutlined />
-															1024
+															<span
-														</span>
+																style={{
-														<EyeOutlined style={{ color: "gray" }} />{" "}
+																	fontSize: 12,
-														<span
+																	color: "gray",
-															style={{ fontSize: 12, color: "gray" }}>
+																}}>
-															1024
+																{item.likesCount}
-														</span>
+															</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/MyShare/index.tsx

@@ -8,14 +8,17 @@ import styles from "./index.module.less";
 import { Link, useNavigate } from "react-router-dom";
 import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
 import { getMyShareList } from "@/api/share";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
-export default () => {
+export default observer(() => {
 	const navigate = useNavigate();
 	const [loading, setLoading] = useState(true);
 	const [data, setData] = useState<[]>([]);
+	const store = useStore("user");
+	const userId: any = store.getUserId();
 	async function getMyShare() {
-		getMyShareList(32).then((res: any) => {
+		getMyShareList(userId).then((res: any) => {
-			console.log(res);
 			if (res && res.success && res.data) {
 				setData(res.data);
 				setLoading(false);
@@ -163,4 +166,4 @@ export default () => {
 			</div>
 		</>
 	);
-};
+});

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

@@ -13,12 +13,16 @@ import { Link, useNavigate } from "react-router-dom";
 import { getAllStorage } from "@/api/oss";
 import StorageIcon from "@/constant/stroage-icon.ts";
 import { getUserInfoApi } from "@/api/user";
+import useStore from "@/utils/store/useStore.tsx";
+import { observer } from "mobx-react";
 
-const UserInfo: FunctionComponent = () => {
+const UserInfo: FunctionComponent = observer(() => {
 	const navigate = useNavigate();
 	const [loading, setLoading] = useState(true);
 	const [userStorage, setUserStorage] = useState([]);
 	const [userInfo, setUserInfo] = useState<any>({} as any);
+	const store = useStore("user");
+	const userId: any = store.getUserId();
 	const data = [
 		{
 			title: "Ant Design Title 1",
@@ -34,14 +38,14 @@ const UserInfo: FunctionComponent = () => {
 		},
 	];
 	async function getUserStorage() {
-		const res: any = await getAllStorage("1");
+		const res: any = await getAllStorage(userId);
 		if (res && res.success && res.data) {
 			setUserStorage(res.data);
 			setLoading(false);
 		}
 	}
 	const getUserInfo = async () => {
-		const res = await getUserInfoApi("17");
+		const res = await getUserInfoApi(userId);
 		if (res && res.success && res.data) {
 			setUserInfo(res.data);
 		}
@@ -157,5 +161,5 @@ const UserInfo: FunctionComponent = () => {
 			</div>
 		</>
 	);
-};
+});
 export default UserInfo;

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

@@ -8,23 +8,31 @@ import {
 	Form,
 	FormProps,
 	Input,
+	message,
 	Select,
 	Skeleton,
 	Space,
-	Tabs, Tag
+	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";
+import { getUserInfoApi, updateUserInfo } from "@/api/user";
+import { observer } from "mobx-react";
+import useStore from "@/utils/store/useStore.tsx";
 
-const UserSetting: FunctionComponent = () => {
+const UserSetting: FunctionComponent = observer(() => {
-	const [disable, setDisable] = useState(true);
+	const [disable, setDisable] = useState<boolean>(true);
-	const [loading, setLoading] = useState(true);
+	const [loading, setLoading] = useState<boolean>(true);
 	const [userInfo, setUserInfo] = useState<any>({} as any);
+	const [password, setPassword] = useState<string>("");
+	const [phone, setPhone] = useState<string>("");
+	const [email, setEmail] = useState<string>("");
+	const store = useStore("user");
+	const userId: any = store.getUserId();
 	async function getUserInfo() {
-		getUserInfoApi("17").then((res: any) => {
+		getUserInfoApi(userId).then((res: any) => {
-			console.log(res);
 			if (res && res.success && res.data) {
 				setUserInfo(res.data);
 				setLoading(false);
@@ -32,7 +40,6 @@ const UserSetting: FunctionComponent = () => {
 		});
 	}
 	type FieldType = {
-		email?: string;
 		nickname?: string;
 		location?: string;
 		introduce?: string;
@@ -40,12 +47,46 @@ const UserSetting: FunctionComponent = () => {
 		company?: string;
 		blog?: string;
 	};
+	async function updateUser(data: any) {
+		updateUserInfo(data).then((res: any) => {
+			if (res && res.success) {
+				message.open({
+					type: "success",
+					content: "修改成功",
+				});
+			} else {
+				message.open({
+					type: "error",
+					content: "修改失败",
+				});
+			}
+		});
+	}
 	const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
-		console.log("Success:", values);
+		const data: any = {
+			userId: userId,
+			...values,
+		};
+		updateUserInfo(data).then((res: any) => {
+			if (res && res.success) {
+				message.open({
+					type: "success",
+					content: "修改成功",
+				});
+			} else {
+				message.open({
+					type: "error",
+					content: "修改失败",
+				});
+			}
+		});
 	};
 
-	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
+	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo: any) => {
-		console.log("Failed:", errorInfo);
+		message.open({
+			type: "error",
+			content: errorInfo,
+		});
 	};
 	useEffect(() => {
 		getUserInfo().then();
@@ -69,8 +110,7 @@ const UserSetting: FunctionComponent = () => {
 			</ProForm.Item>
 		);
 	};
-	useEffect(() => {
+	useEffect(() => {}, []);
-	}, []);
 	const TabItems = [
 		{
 			label: <span>基础信息</span>,
@@ -88,18 +128,18 @@ const UserSetting: FunctionComponent = () => {
 								onFinishFailed={onFinishFailed}
 								initialValues={{ prefix: "https://" }}
 								autoComplete="off">
-								<Form.Item<FieldType>
+								{/*<Form.Item<FieldType>*/}
-									label="邮箱"
+								{/*	label="邮箱"*/}
-									name="email"
+								{/*	name="email"*/}
-									rules={[
+								{/*	rules={[*/}
-										{
+								{/*		{*/}
-											type: "email",
+								{/*			type: "email",*/}
-											message: "请输入正确的邮箱！",
+								{/*			message: "请输入正确的邮箱！",*/}
-										},
+								{/*		},*/}
-										{ required: true, message: "请输入邮箱!" },
+								{/*		{ required: true, message: "请输入邮箱!" },*/}
-									]}>
+								{/*	]}>*/}
-									<Input allowClear disabled={disable} />
+								{/*	<Input allowClear disabled={disable} />*/}
-								</Form.Item>
+								{/*</Form.Item>*/}
 								<Form.Item<FieldType>
 									label="昵称"
 									name="nickname"
@@ -188,28 +228,73 @@ const UserSetting: FunctionComponent = () => {
 						<Space direction={"vertical"} style={{ width: "100%" }}>
 							<ProCard hoverable bordered>
 								<Flex vertical={false} align={"center"}>
-									<span style={{width: 100}}>登录密码：</span>
+									<span style={{ width: 100 }}>登录密码：</span>
-									<Space.Compact style={{ width: '100%' }}>
+									<Space.Compact style={{ width: "100%" }}>
-										<Input.Password value={"123456"} variant="borderless"/>
+										<Input.Password
-										<Button  type="text">保存</Button>
+											onChange={(e: any) => {
+												setPassword(e.target.value);
+											}}
+											variant="borderless"
+										/>
+										<Button
+											type="text"
+											onClick={async () => {
+												const data: any = {
+													userId: userId,
+													password: password,
+												};
+												await updateUser(data);
+											}}>
+											保存
+										</Button>
 									</Space.Compact>
 								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
 								<Flex vertical={false} align={"center"}>
-									<span style={{width: 100}}>安全手机：</span>
+									<span style={{ width: 100 }}>安全手机：</span>
-									<Space.Compact style={{ width: '100%' }}>
+									<Space.Compact style={{ width: "100%" }}>
-										<Input.Password value={"123456"} variant="borderless"/>
+										<Input.Password
-										<Button  type="text">保存</Button>
+											onChange={(e: any) => {
+												setPhone(e.target.value);
+											}}
+											variant="borderless"
+										/>
+										<Button
+											type="text"
+											onClick={async () => {
+												const data: any = {
+													userId: userId,
+													phone: phone,
+												};
+												await updateUser(data);
+											}}>
+											保存
+										</Button>
 									</Space.Compact>
 								</Flex>
 							</ProCard>
 							<ProCard hoverable bordered>
 								<Flex vertical={false} align={"center"}>
-									<span style={{width: 100}}>安全邮箱：</span>
+									<span style={{ width: 100 }}>安全邮箱：</span>
-									<Space.Compact style={{ width: '100%' }}>
+									<Space.Compact style={{ width: "100%" }}>
-										<Input.Password value={"123456"} variant="borderless"/>
+										<Input.Password
-										<Button  type="text">保存</Button>
+											onChange={(e: any) => {
+												setEmail(e.target.value);
+											}}
+											variant="borderless"
+										/>
+										<Button
+											type="text"
+											onClick={async () => {
+												const data: any = {
+													userId: userId,
+													email: email,
+												};
+												await updateUser(data);
+											}}>
+											保存
+										</Button>
 									</Space.Compact>
 								</Flex>
 							</ProCard>
@@ -231,35 +316,55 @@ const UserSetting: FunctionComponent = () => {
 								src={userInfo.avatar}
 							/>
 
-							<Flex vertical={false} align={"center"} style={{ height: "100px",marginLeft: 40 }}>
+							<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>
+										<span style={{ width: 130 }}>{userInfo.userName}</span>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ marginTop: 20 }}>
 										<span style={{ color: "grey" }}>账号ID：</span>
-										<span style={{width: 130}}>{userInfo.id}</span>
+										<span style={{ width: 130 }}>{userInfo.id}</span>
 									</Flex>
 								</Flex>
-								<Flex vertical={true} style={{marginLeft: 50}}>
+								<Flex vertical={true} style={{ marginLeft: 50 }}>
 									<Flex vertical={false} align={"center"}>
 										<span style={{ color: "grey" }}>邮 箱：</span>
-										<span style={{width: 130}}>{userInfo.email || "---------"}</span>
+										<span style={{ width: 130 }}>
+											{userInfo.email || "---------"}
+										</span>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ marginTop: 20 }}>
 										<span style={{ color: "grey" }}>手机号：</span>
-										<span style={{width: 130}}>{userInfo.phone || "---------"}</span>
+										<span style={{ width: 130 }}>
+											{userInfo.phone || "---------"}
+										</span>
 									</Flex>
 								</Flex>
-								<Flex vertical={true} style={{marginLeft: 50}}>
+								<Flex vertical={true} style={{ marginLeft: 50 }}>
 									<Flex vertical={false} align={"center"}>
 										<span style={{ color: "grey" }}>注册时间：</span>
-										<span style={{width: 130}}>{userInfo.createdTime}</span>
+										<span style={{ width: 130 }}>{userInfo.createdTime}</span>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{marginTop: 20}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ marginTop: 20 }}>
 										<span style={{ color: "grey" }}>状 态：</span>
-										{userInfo.status===0 ? <Tag color={"success"}>正常</Tag>:<Tag color={"red"}>禁用</Tag>}
+										{userInfo.status === 0 ? (
+											<Tag color={"success"}>正常</Tag>
+										) : (
+											<Tag color={"red"}>禁用</Tag>
+										)}
 									</Flex>
 								</Flex>
 							</Flex>
@@ -275,5 +380,5 @@ const UserSetting: FunctionComponent = () => {
 			</div>
 		</>
 	);
-};
+});
 export default UserSetting;

src/router/useAuth.tsx

@@ -1,9 +1,9 @@
 /** @format */
 import matchAuth from "./matchRouter.ts";
 import { Navigate, useLocation } from "react-router-dom";
-// import { message } from "antd";
 import { getStorageFromKey } from "@/utils/localStorage/config.ts";
 import React from "react";
+import { message } from "antd";
 export default function AuthRoute(props: { children: React.ReactNode }) {
 	const location: any = useLocation();
 	const isLogin = getStorageFromKey("token");
@@ -32,14 +32,14 @@ export default function AuthRoute(props: { children: React.ReactNode }) {
 		return <Navigate to="/404" />;
 	}
 
-	// if (!isLogin) {
+	if (!isLogin) {
-	// 	message
+		message
-	// 		.open({
+			.open({
-	// 			content: "请先登录！",
+				content: "请先登录！",
-	// 			type: "warning",
+				type: "warning",
-	// 		})
+			})
-	// 		.then();
+			.then();
-	// 	return <Navigate to="/login" />;
+		return <Navigate to="/login" />;
-	// }
+	}
 	return props.children;
 }