From ac41e00105326ec51564071e498f43aa284065bb Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Mon, 22 Jul 2024 09:04:46 +0800 Subject: [PATCH] feat: update --- src/api/share/index.ts | 73 +- src/api/user/index.ts | 34 + .../Main/Bucket/components/AliDrawer.tsx | 63 +- .../Main/Bucket/components/MinioDrawer.tsx | 63 +- .../Main/Bucket/components/QiniuDrawer.tsx | 63 +- .../Main/Bucket/components/TencentDrawer.tsx | 63 +- src/components/Main/Bucket/index.tsx | 10 +- .../Main/File/components/FileUpload.tsx | 6 +- src/components/Main/File/index.tsx | 29 +- src/components/Main/Home/index.tsx | 27 +- .../Main/Settings/components/AliSettings.tsx | 17 +- .../Settings/components/MinioSettings.tsx | 16 +- .../Settings/components/QiniuSettings.tsx | 14 +- .../Settings/components/TencentSettings.tsx | 16 +- src/components/Main/Settings/index.tsx | 5 +- .../Share/components/ShareAdd/ShareAdd.tsx | 10 +- .../components/ShareDetail/ShareDetail.tsx | 53 +- .../ShareDetail/components/Comment/index.tsx | 146 +- src/components/Main/Share/index.tsx | 12 +- .../Main/User/MyFavorites/index.module.less | 10 + .../Main/User/MyFavorites/index.tsx | 239 ++-- src/components/Main/User/MyShare/index.tsx | 11 +- src/components/Main/User/UserInfo/index.tsx | 12 +- .../Main/User/UserSetting/index.tsx | 205 ++- src/router/useAuth.tsx | 20 +- src/views/User/Login/index.tsx | 1172 +++++++++-------- 26 files changed, 1424 insertions(+), 965 deletions(-) diff --git a/src/api/share/index.ts b/src/api/share/index.ts index 45a0e35..a8fe49c 100644 --- a/src/api/share/index.ts +++ b/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, + }); +}; diff --git a/src/api/user/index.ts b/src/api/user/index.ts index f538213..611f78e 100644 --- a/src/api/user/index.ts +++ b/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, + }); +}; diff --git a/src/components/Main/Bucket/components/AliDrawer.tsx b/src/components/Main/Bucket/components/AliDrawer.tsx index 6582417..c81c7ad 100644 --- a/src/components/Main/Bucket/components/AliDrawer.tsx +++ b/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([]); const [loading, setLoading] = useState(true); const [bucketSize, setBucketSize] = useState(""); const [form] = Form.useForm(); const [open, setOpen] = useState(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( - (res: any) => { - if ( - res && - res.data && - res.data === "success" - ) { - message - .open({ - content: "删除成功！", - type: "success", - }) - .then(); - } else { - message - .open({ - content: res.data, - type: "error", - }) - .then(); - } - }, - ); + deleteBucket( + userId, + item.name, + "minio", + ).then((res: any) => { + if ( + res && + res.data && + res.data === "success" + ) { + message + .open({ + content: "删除成功！", + type: "success", + }) + .then(); + } else { + message + .open({ + 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 = () => { ); -}; +}); export default AliDrawer; diff --git a/src/components/Main/Bucket/components/MinioDrawer.tsx b/src/components/Main/Bucket/components/MinioDrawer.tsx index cfa29e5..0c71412 100644 --- a/src/components/Main/Bucket/components/MinioDrawer.tsx +++ b/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([]); const [loading, setLoading] = useState(true); const [bucketSize, setBucketSize] = useState(""); const [form] = Form.useForm(); const [open, setOpen] = useState(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( - (res: any) => { - if ( - res && - res.data && - res.data === "success" - ) { - message - .open({ - content: "删除成功！", - type: "success", - }) - .then(); - } else { - message - .open({ - content: res.data, - type: "error", - }) - .then(); - } - }, - ); + deleteBucket( + userId, + item.name, + "minio", + ).then((res: any) => { + if ( + res && + res.data && + res.data === "success" + ) { + message + .open({ + content: "删除成功！", + type: "success", + }) + .then(); + } else { + message + .open({ + 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 = () => { ); -}; +}); export default MinioDrawer; diff --git a/src/components/Main/Bucket/components/QiniuDrawer.tsx b/src/components/Main/Bucket/components/QiniuDrawer.tsx index 5ef5f62..0ac9c72 100644 --- a/src/components/Main/Bucket/components/QiniuDrawer.tsx +++ b/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([]); const [loading, setLoading] = useState(true); const [bucketSize, setBucketSize] = useState(""); const [form] = Form.useForm(); const [open, setOpen] = useState(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( - (res: any) => { - if ( - res && - res.data && - res.data === "success" - ) { - message - .open({ - content: "删除成功！", - type: "success", - }) - .then(); - } else { - message - .open({ - content: res.data, - type: "error", - }) - .then(); - } - }, - ); + deleteBucket( + userId, + item.name, + "minio", + ).then((res: any) => { + if ( + res && + res.data && + res.data === "success" + ) { + message + .open({ + content: "删除成功！", + type: "success", + }) + .then(); + } else { + message + .open({ + 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 = () => { ); -}; +}); export default QiniuDrawer; diff --git a/src/components/Main/Bucket/components/TencentDrawer.tsx b/src/components/Main/Bucket/components/TencentDrawer.tsx index 969e253..3c4fdcd 100644 --- a/src/components/Main/Bucket/components/TencentDrawer.tsx +++ b/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([]); const [loading, setLoading] = useState(true); const [bucketSize, setBucketSize] = useState(""); const [form] = Form.useForm(); const [open, setOpen] = useState(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( - (res: any) => { - if ( - res && - res.data && - res.data === "success" - ) { - message - .open({ - content: "删除成功！", - type: "success", - }) - .then(); - } else { - message - .open({ - content: res.data, - type: "error", - }) - .then(); - } - }, - ); + deleteBucket( + userId, + item.name, + "minio", + ).then((res: any) => { + if ( + res && + res.data && + res.data === "success" + ) { + message + .open({ + content: "删除成功！", + type: "success", + }) + .then(); + } else { + message + .open({ + 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 = () => { ); -}; +}); export default TencentDrawer; diff --git a/src/components/Main/Bucket/index.tsx b/src/components/Main/Bucket/index.tsx index 4c20212..e26b439 100644 --- a/src/components/Main/Bucket/index.tsx +++ b/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([]); const [loading, setLoading] = useState(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 = () => { ); -}; +}); export default Bucket; diff --git a/src/components/Main/File/components/FileUpload.tsx b/src/components/Main/File/components/FileUpload.tsx index 599477d..3f58a20 100644 --- a/src/components/Main/File/components/FileUpload.tsx +++ b/src/components/Main/File/components/FileUpload.tsx @@ -14,8 +14,10 @@ const FileUpload = (props: any) => { const [buckets, setBuckets] = useState([]); 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(), }; diff --git a/src/components/Main/File/index.tsx b/src/components/Main/File/index.tsx index f2e48d0..2741e28 100644 --- a/src/components/Main/File/index.tsx +++ b/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([]); @@ -69,14 +69,15 @@ const File: FunctionComponent = () => { const [newFileName, setNewFileName] = useState(null); const [disable, setDisable] = useState(true); const [previewUrl, setPreviewUrl] = useState(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 = () => { ); -}; +}); export default observer(File); diff --git a/src/components/Main/Home/index.tsx b/src/components/Main/Home/index.tsx index 72421c4..02de0d0 100644 --- a/src/components/Main/Home/index.tsx +++ b/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([]); // const [recentDownloadFile, setRecentDownloadFile] = useState([]); const [recentPreviewFile, setRecentPreviewFile] = useState([]); - + 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 = () => { ); -}; +}); export default memo(MainHome); diff --git a/src/components/Main/Settings/components/AliSettings.tsx b/src/components/Main/Settings/components/AliSettings.tsx index b7ab961..4dce95b 100644 --- a/src/components/Main/Settings/components/AliSettings.tsx +++ b/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(); const [open, setOpen] = useState(false); @@ -33,6 +35,9 @@ const AliSettings: React.FC = () => { const [configs, setConfigs] = useState([]); const [loading, setLoading] = useState(true); const [configDetail, setConfigDetail] = useState({} as any); + const userStore = useStore("user"); + const userId: any = userStore.getUserId(); + const columns: ProColumns[] = [ { 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 = () => { ); -}; +}); export default AliSettings; diff --git a/src/components/Main/Settings/components/MinioSettings.tsx b/src/components/Main/Settings/components/MinioSettings.tsx index cfb331d..6f55174 100644 --- a/src/components/Main/Settings/components/MinioSettings.tsx +++ b/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(); const [open, setOpen] = useState(false); @@ -33,6 +35,8 @@ const MinioSettings: React.FC = () => { const [openModal, setOpenModal] = useState(false); const [loading, setLoading] = useState(true); const [configDetail, setConfigDetail] = useState({} as any); + const userStore = useStore("user"); + const userId: any = userStore.getUserId(); const columns: ProColumns[] = [ { 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 = () => { ); -}; +}); export default MinioSettings; diff --git a/src/components/Main/Settings/components/QiniuSettings.tsx b/src/components/Main/Settings/components/QiniuSettings.tsx index 2567b44..a520f11 100644 --- a/src/components/Main/Settings/components/QiniuSettings.tsx +++ b/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(); const [open, setOpen] = useState(false); @@ -33,6 +35,8 @@ const QiniuSettings: React.FC = () => { const [openModal, setOpenModal] = useState(false); const [loading, setLoading] = useState(true); const [configDetail, setConfigDetail] = useState({} as any); + const userStore = useStore("user"); + const userId: any = userStore.getUserId(); const columns: ProColumns[] = [ { 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 = () => { ); -}; +}); export default QiniuSettings; diff --git a/src/components/Main/Settings/components/TencentSettings.tsx b/src/components/Main/Settings/components/TencentSettings.tsx index 6172d88..0e5b0e9 100644 --- a/src/components/Main/Settings/components/TencentSettings.tsx +++ b/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(); const [open, setOpen] = useState(false); @@ -35,6 +37,8 @@ const TencentSettings: React.FC = () => { const [openModal, setOpenModal] = useState(false); const [loading, setLoading] = useState(true); const [configDetail, setConfigDetail] = useState({} as any); + const userStore = useStore("user"); + const userId: any = userStore.getUserId(); const columns: ProColumns[] = [ { 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 = () => { ); -}; +}); export default TencentSettings; diff --git a/src/components/Main/Settings/index.tsx b/src/components/Main/Settings/index.tsx index 5d0e800..2ded8c9 100644 --- a/src/components/Main/Settings/index.tsx +++ b/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 () => { ); -}; +}); diff --git a/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx b/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx index 4653fdc..7e4f8d7 100644 --- a/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx +++ b/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["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 = () => { ); -}; +}); export default observer(ShareAdd); diff --git a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx index 6304c28..039fadc 100644 --- a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx +++ b/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({}); + const [detail, setDetail] = useState({} 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 = () => { { + addLike().then(); + }} size={"large"}> + {/*isFavor*/} { + setFavorites().then(); + }} size={"large"}> - + ); diff --git a/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx b/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx index 87814bc..15a484b 100644 --- a/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx +++ b/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(null); const [isReplyReply, setIsReplyReply] = useState(null); @@ -36,8 +41,11 @@ const Comment = () => { const [replyData, setReplyData] = useState(""); const [replyReplyData, setReplyReplyData] = useState(""); const [count, setCount] = useState(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} - } - color={"cyan"} - style={{ marginLeft: 5 }}> - 作者 - + {props.auth.userId == + item.userId ? ( + } + color={"cyan"} + style={{ marginLeft: 5 }}> + 作者 + + ) : null} { - + {item.isLike === false ? ( + { + delLike( + item.id, + ).then(); + }} + className={ + styles.like_icon + } + /> + ) : ( + { + addLike( + item.id, + ).then(); + }} + /> + )} { onClick={() => { const data: any = { - userId: 32, + userId: userId, detailId: params.id, content: @@ -485,13 +531,25 @@ const Comment = () => { replyItem.nickto } - {/*}*/} - {/* color={"cyan"}*/} - {/* style={{ marginLeft: 5 }}>*/} - {/* 作者*/} - {/**/} + {props.auth + .userId == + replyItem.userId ? ( + + } + color={ + "cyan" + } + style={{ + marginLeft: 5, + }}> + 作者 + + ) : null} { align={ "center" }> - + {replyItem.isLike === + false ? ( + { + delLike( + replyItem.id, + ).then(); + }} + className={ + styles.like_icon + } + /> + ) : ( + { + addLike( + replyItem.id, + ).then(); + }} + /> + )} { onClick={() => { const data: any = { - userId: 17, + userId: userId, detailId: params.id, content: @@ -766,5 +844,5 @@ const Comment = () => { ); -}; +}); export default Comment; diff --git a/src/components/Main/Share/index.tsx b/src/components/Main/Share/index.tsx index 650661a..3dce297 100644 --- a/src/components/Main/Share/index.tsx +++ b/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 = { - userId: 17, + const formData: any = { + userId: userId, ...values, }; addShareCircle(formData).then((res: any) => { @@ -249,5 +253,5 @@ const MainShare: FunctionComponent = () => { /> ); -}; +}); export default MainShare; diff --git a/src/components/Main/User/MyFavorites/index.module.less b/src/components/Main/User/MyFavorites/index.module.less index e69de29..61c59f6 100644 --- a/src/components/Main/User/MyFavorites/index.module.less +++ b/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; + } +} diff --git a/src/components/Main/User/MyFavorites/index.tsx b/src/components/Main/User/MyFavorites/index.tsx index 238b074..ff0e7c7 100644 --- a/src/components/Main/User/MyFavorites/index.tsx +++ b/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 { useNavigate } from "react-router-dom"; +import styles from "./index.module.less"; + +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 { getMyFavor } 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(false); - const [data, setData] = useState([]); - 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<[]>([]); + const store = useStore("user"); + const userId: any = store.getUserId(); + async function getMyShare() { + getMyFavor(userId).then((res: any) => { + if (res && res.success && res.data) { + setData(res.data); 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 ( <> -
- - } - endMessage={It is all, nothing more 🤐} - scrollableTarget="scrollableDiv"> +
+ +
+ +
+ +
+
+ +
+ +
+ + + ( - + header={ + <> +

分享列表

+ + } + renderItem={(item: any) => ( + } + avatar={} title={ - <> - { - navigate("/main/share/detail/1"); - }}> - {item.name.last} - - - IDM - - + + + {item.title} + + {item.tags && + Array.from(item.tags).map( + (tag: any, index: number) => { + return ( + + + {tag.tagName} + + + ); + }, + )} + } description={ <> @@ -85,47 +118,69 @@ export default () => { vertical={false} justify={"space-between"} align={"center"}> - {item.email} + {item.description} - - - landaiqing - - - - 1024 - - - - 1024 - - {" "} - - 1024 - + style={{ width: "300px" }}> + + + + {item.nickname} + + + + + + {item.likesCount} + + + + + + {item.commentCount} + + + + {" "} + + {item.views} + + } /> - {/*
Content
*/} )} /> - +
); -}; +}); diff --git a/src/components/Main/User/MyShare/index.tsx b/src/components/Main/User/MyShare/index.tsx index df81fc0..8e26939 100644 --- a/src/components/Main/User/MyShare/index.tsx +++ b/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) => { - console.log(res); + getMyShareList(userId).then((res: any) => { if (res && res.success && res.data) { setData(res.data); setLoading(false); @@ -163,4 +166,4 @@ export default () => {
); -}; +}); diff --git a/src/components/Main/User/UserInfo/index.tsx b/src/components/Main/User/UserInfo/index.tsx index b168a61..d7579cb 100644 --- a/src/components/Main/User/UserInfo/index.tsx +++ b/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({} 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 = () => { ); -}; +}); export default UserInfo; diff --git a/src/components/Main/User/UserSetting/index.tsx b/src/components/Main/User/UserSetting/index.tsx index 60ca179..a752e1b 100644 --- a/src/components/Main/User/UserSetting/index.tsx +++ b/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 [disable, setDisable] = useState(true); - const [loading, setLoading] = useState(true); +const UserSetting: FunctionComponent = observer(() => { + const [disable, setDisable] = useState(true); + const [loading, setLoading] = useState(true); const [userInfo, setUserInfo] = useState({} as any); + const [password, setPassword] = useState(""); + const [phone, setPhone] = useState(""); + const [email, setEmail] = useState(""); + const store = useStore("user"); + const userId: any = store.getUserId(); async function getUserInfo() { - getUserInfoApi("17").then((res: any) => { - console.log(res); + getUserInfoApi(userId).then((res: any) => { 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["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["onFinishFailed"] = (errorInfo) => { - console.log("Failed:", errorInfo); + const onFinishFailed: FormProps["onFinishFailed"] = (errorInfo: any) => { + message.open({ + type: "error", + content: errorInfo, + }); }; useEffect(() => { getUserInfo().then(); @@ -69,8 +110,7 @@ const UserSetting: FunctionComponent = () => { ); }; - useEffect(() => { - }, []); + useEffect(() => {}, []); const TabItems = [ { label: 基础信息, @@ -88,18 +128,18 @@ const UserSetting: FunctionComponent = () => { onFinishFailed={onFinishFailed} initialValues={{ prefix: "https://" }} autoComplete="off"> - - label="邮箱" - name="email" - rules={[ - { - type: "email", - message: "请输入正确的邮箱！", - }, - { required: true, message: "请输入邮箱!" }, - ]}> - - + {/**/} + {/* label="邮箱"*/} + {/* name="email"*/} + {/* rules={[*/} + {/* {*/} + {/* type: "email",*/} + {/* message: "请输入正确的邮箱！",*/} + {/* },*/} + {/* { required: true, message: "请输入邮箱!" },*/} + {/* ]}>*/} + {/* */} + {/**/} label="昵称" name="nickname" @@ -188,28 +228,73 @@ const UserSetting: FunctionComponent = () => { - 登录密码： - - - + 登录密码： + + { + setPassword(e.target.value); + }} + variant="borderless" + /> + - 安全手机： - - - + 安全手机： + + { + setPhone(e.target.value); + }} + variant="borderless" + /> + - 安全邮箱： - - - + 安全邮箱： + + { + setEmail(e.target.value); + }} + variant="borderless" + /> + @@ -231,35 +316,55 @@ const UserSetting: FunctionComponent = () => { src={userInfo.avatar} /> - + 用户名： - {userInfo.userName} + {userInfo.userName} - + 账号ID： - {userInfo.id} + {userInfo.id} - + 邮 箱： - {userInfo.email || "---------"} + + {userInfo.email || "---------"} + - + 手机号： - {userInfo.phone || "---------"} + + {userInfo.phone || "---------"} + - + 注册时间： - {userInfo.createdTime} + {userInfo.createdTime} - + 状 态： - {userInfo.status===0 ? 正常:禁用} + {userInfo.status === 0 ? ( + 正常 + ) : ( + 禁用 + )} @@ -275,5 +380,5 @@ const UserSetting: FunctionComponent = () => { ); -}; +}); export default UserSetting; diff --git a/src/router/useAuth.tsx b/src/router/useAuth.tsx index f39f37c..9497186 100644 --- a/src/router/useAuth.tsx +++ b/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 ; } - // if (!isLogin) { - // message - // .open({ - // content: "请先登录！", - // type: "warning", - // }) - // .then(); - // return ; - // } + if (!isLogin) { + message + .open({ + content: "请先登录！", + type: "warning", + }) + .then(); + return ; + } return props.children; } diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index 14c0d8b..c27844f 100644 --- a/src/views/User/Login/index.tsx +++ b/src/views/User/Login/index.tsx @@ -1,580 +1,592 @@ -/** @format */ - -import { - GithubOutlined, - GitlabOutlined, - LockOutlined, - MobileOutlined, - QqOutlined, - SafetyOutlined, - UserOutlined, - WechatOutlined, - WechatWorkOutlined, -} from "@ant-design/icons"; -import { - CaptFieldRef, - ProFormCaptcha, - ProFormCheckbox, - ProFormText, -} from "@ant-design/pro-components"; -import { - Alert, - Button, - ConfigProvider, - Divider, - Form, - Image, - message, - Space, - Spin, - Tabs, - Tooltip, -} from "antd"; -import { CSSProperties, useEffect, useRef, useState } from "react"; -import logo from "@/assets/images/logo.png"; -import styles from "./index.module.less"; -import { observer } from "mobx-react"; -import useStore from "@/utils/store/useStore.tsx"; -import FooterComponent from "@/components/Footer"; -import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; -import { get, load } from "@/api/captcha/index.ts"; -import { - createClientId, - generateQRCode, - getClientToken, - getSms, - login, - loginByPhone, - oauthLogin, -} from "@/api/user"; -import { TinyColor } from "@ctrl/tinycolor"; -import { useNavigate } from "react-router-dom"; -import { setStorage } from "@/utils/localStorage/config.ts"; - -import { TimerManager } from "timer-manager-lib"; - -type LoginType = "account" | "phone"; - -const iconStyles: CSSProperties = { - color: "rgba(0, 0, 0, 0.2)", - fontSize: "18px", - verticalAlign: "middle", - cursor: "pointer", -}; - -export default observer(() => { - const [form] = Form.useForm(); - const smsCaptcha = useRef(null); - const loginCaptcha = useRef(null); - const loginByPhoneCaptcha = useRef(null); - const captchaRef = useRef(); - const [QRCode, setQRCode] = useState(""); - const navigate = useNavigate(); - const store = useStore("user"); - const colors = ["#40e495", "#30dd8a", "#2bb673"]; - const timerManager = new TimerManager(); - const [loading, setLoading] = useState(true); - const getHoverColors = (colors: string[]) => - colors.map((color) => new TinyColor(color).lighten(5).toString()); - const getActiveColors = (colors: string[]) => - colors.map((color) => new TinyColor(color).darken(5).toString()); - - async function smsVerify(token: string, deg: number): Promise { - const phone = form.getFieldValue("mobile"); - const data: any = { - token: token, - deg: deg, - phone: phone, - }; - const res: any = await getSms(data); - if (res && res.code === 0) { - message.open({ - content: res.data, - type: "success", - duration: 5, - }); - } else { - message.open({ - content: res.data, - type: "warning", - duration: 5, - }); - } - return res; - } - - async function loginVerify(token: string, deg: number): Promise { - const userName = form.getFieldValue("username"); - const password = form.getFieldValue("password"); - const data: API.LoginRequest = { - token: token, - deg: deg, - userName: userName, - password: password, - }; - const res: any = await login(data); - if (res && res.success && res.code === 0) { - store.setToken(res.data.token); - store.setUserId(res.data.user.id); - setStorage("token", res.data.token, 24 * 60 * 30); - if (store.getToken() !== null || store.getUserId() !== null) { - setTimeout(() => { - navigate("/main"); - }, 3000); - } - message.open({ - content: "登录成功！", - type: "success", - duration: 5, - }); - } else if (res.code === 0 && !res.success) { - message.open({ - content: "登录失败！用户名或密码错误！", - type: "error", - duration: 5, - }); - } - return res; - } - - async function loginByPhoneVerify(token: string, deg: number): Promise { - const mobile = form.getFieldValue("mobile"); - const captcha = form.getFieldValue("captcha"); - const data: API.LoginByPhoneRequest = { - token: token, - deg: deg, - phone: mobile, - activeCode: captcha, - }; - const res: any = await loginByPhone(data); - if (res && res.success && res.code === 0) { - store.setToken(res.data.token); - store.setUserId(res.data.user.id); - setStorage("token", res.data.token, 24 * 60 * 30); - if (store.getToken() !== null || store.getUserId() !== null) { - setTimeout(() => { - navigate("/main"); - }, 3000); - } - message.open({ - content: "登录成功！", - type: "success", - duration: 5, - }); - } else if (res.code === 0 && !res.success) { - message.open({ - content: "登录失败！", - type: "error", - duration: 5, - }); - } - return res; - } - - const items = [ - { - label: ( - - - 账户登录 - - ), - key: "account", - }, - { - label: ( - - - 短信登录 - - ), - key: "phone", - }, - ]; - - async function oAuthLogin(type: string) { - const res: any = await oauthLogin(type); - window.open(res.data, "_self"); - } - - const [loginType, setLoginType] = useState("account"); - - async function openSmsCaptcha() { - smsCaptcha.current!.open(); - } - - async function openLoginCaptcha() { - loginCaptcha.current!.open(); - } - - async function openLoginByPhoneCaptcha() { - loginByPhoneCaptcha.current!.open(); - } - - async function wechatLogin() { - createClientId().then((res: any) => { - generateQRCode(res.data).then((response: any) => { - if (response.success) { - setQRCode(response.data.qrCodeUrl); - setLoading(false); - timerManager.add(() => { - getClientToken(res.data).then((result: any) => { - if (result.success) { - timerManager.clear(); - store.setToken(result.data.tokenValue); - store.setUserId(result.data.loginId); - setStorage("token", result.data.tokenValue, 24 * 60 * 30); - setStorage("userId", result.data.loginId, 24 * 60 * 30); - message - .open({ - content: "登录成功！", - type: "success", - }) - .then(); - if (store.getToken() !== null || store.getUserId() !== null) { - setTimeout(() => { - navigate("/main"); - }, 2000); - } - } - }); - }, 3000); - } else { - message - .open({ - content: response.data, - type: "error", - }) - .then(); - } - }); - }); - } - - useEffect(() => { - wechatLogin().then(); - }, []); - - return ( -
- - - -
- - - - - 微信扫码登录 - - - - 微信扫码关注公众号)} - description={ -
- - 微信扫码 - 关注公众号 - -
- 登录更快更安全 -
- } - // type="success" - showIcon={true} - className={styles.alert} - icon={} - /> - - -
- - - logo - 五味子云存储 - -
随时随地分享你的美好瞬间
- - - - setLoginType(activeKey as LoginType) - }> - - {loginType === "account" && ( - <> - , - }} - placeholder={"请输入邮箱或电话号码"} - rules={[ - { - required: true, - message: "请输入用户名!", - }, - ]} - /> - , - }} - placeholder={"请输入密码"} - rules={[ - { - required: true, - message: "请输入密码！", - }, - { - pattern: - /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/, - message: - "密码长度需在6~18位字符，且必须包含字母和数字！", - }, - ]} - /> - - )} - {loginType === "phone" && ( - <> - , - autoComplete: "off", - }} - name="mobile" - placeholder={"请输入手机号"} - rules={[ - { - required: true, - message: "请输入手机号！", - }, - { - pattern: /^1\d{10}$/, - message: "手机号格式错误！", - }, - ]} - /> - , - }} - captchaProps={{ - size: "large", - }} - placeholder={"请输入验证码"} - captchaTextRender={(timing: boolean, count: number) => { - if (timing) { - return `${count} ${"获取验证码"}`; - // return `${"获取验证码"}`; - } - return "获取验证码"; - }} - name="captcha" - phoneName={"mobile"} - rules={[ - { - required: true, - message: "请输入验证码！", - }, - ]} - fieldRef={captchaRef} - countDown={60} - onGetCaptcha={async () => { - await openSmsCaptcha(); - }} - /> - - )} -
- - 自动登录 - - - 忘记密码 - -
- - - - -
- - - 其他登录方式 - - - -
- - - -
-
- - - -
-
- - { - oAuthLogin("github").then(); - }} - style={{ ...iconStyles, color: "#333333" }} - /> - -
-
- - { - oAuthLogin("gitee").then(); - }} - style={{ ...iconStyles, color: "#FF6A10" }} - /> - -
- -
- - - 注册 - -
- -
- -
- ); -}); +/** @format */ + +import { + GithubOutlined, + GitlabOutlined, + LockOutlined, + MobileOutlined, + QqOutlined, + SafetyOutlined, + UserOutlined, + WechatOutlined, + WechatWorkOutlined, +} from "@ant-design/icons"; +import { + CaptFieldRef, + ProFormCaptcha, + ProFormCheckbox, + ProFormText, +} from "@ant-design/pro-components"; +import { + Alert, + Button, + ConfigProvider, + Divider, + Form, + Image, + message, + Space, + Spin, + Tabs, + Tooltip, +} from "antd"; +import { CSSProperties, useEffect, useRef, useState } from "react"; +import logo from "@/assets/images/logo.png"; +import styles from "./index.module.less"; +import { observer } from "mobx-react"; +import useStore from "@/utils/store/useStore.tsx"; +import FooterComponent from "@/components/Footer"; +import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; +import { get, load } from "@/api/captcha/index.ts"; +import { + createClientId, + generateQRCode, + getClientToken, + getSms, + login, + loginByPhone, + oauthLogin, +} from "@/api/user"; +import { TinyColor } from "@ctrl/tinycolor"; +import { useNavigate } from "react-router-dom"; +import { setStorage } from "@/utils/localStorage/config.ts"; + +import { TimerManager } from "timer-manager-lib"; + +type LoginType = "account" | "phone"; + +const iconStyles: CSSProperties = { + color: "rgba(0, 0, 0, 0.2)", + fontSize: "18px", + verticalAlign: "middle", + cursor: "pointer", +}; + +export default observer(() => { + const [form] = Form.useForm(); + const smsCaptcha = useRef(null); + const loginCaptcha = useRef(null); + const loginByPhoneCaptcha = useRef(null); + const captchaRef = useRef(); + const [QRCode, setQRCode] = useState(""); + const navigate = useNavigate(); + const store = useStore("user"); + const colors = ["#40e495", "#30dd8a", "#2bb673"]; + const timerManager = new TimerManager(); + const [loading, setLoading] = useState(true); + const getHoverColors = (colors: string[]) => + colors.map((color) => new TinyColor(color).lighten(5).toString()); + const getActiveColors = (colors: string[]) => + colors.map((color) => new TinyColor(color).darken(5).toString()); + + async function smsVerify(token: string, deg: number): Promise { + const phone = form.getFieldValue("mobile"); + const data: any = { + token: token, + deg: deg, + phone: phone, + }; + const res: any = await getSms(data); + if (res && res.code === 0) { + message.open({ + content: res.data, + type: "success", + duration: 5, + }); + } else { + message.open({ + content: res.data, + type: "warning", + duration: 5, + }); + } + return res; + } + + async function loginVerify(token: string, deg: number): Promise { + const userName = form.getFieldValue("username"); + const password = form.getFieldValue("password"); + const data: API.LoginRequest = { + token: token, + deg: deg, + userName: userName, + password: password, + }; + const res: any = await login(data); + if (res && res.success && res.code === 0) { + store.setToken(res.data.token); + store.setUserId(res.data.user.id); + setStorage("token", res.data.token, 24 * 60 * 30); + if (store.getToken() !== null || store.getUserId() !== null) { + setTimeout(() => { + navigate("/main"); + }, 3000); + } + message.open({ + content: "登录成功！", + type: "success", + duration: 5, + }); + } else if (res.code === 0 && !res.success) { + message.open({ + content: "登录失败！用户名或密码错误！", + type: "error", + duration: 5, + }); + } + return res; + } + + async function loginByPhoneVerify(token: string, deg: number): Promise { + const mobile = form.getFieldValue("mobile"); + const captcha = form.getFieldValue("captcha"); + const data: API.LoginByPhoneRequest = { + token: token, + deg: deg, + phone: mobile, + activeCode: captcha, + }; + const res: any = await loginByPhone(data); + if (res && res.success && res.code === 0) { + store.setToken(res.data.token); + store.setUserId(res.data.user.id); + setStorage("token", res.data.token, 24 * 60 * 30); + if (store.getToken() !== null || store.getUserId() !== null) { + setTimeout(() => { + navigate("/main"); + }, 3000); + } + message.open({ + content: "登录成功！", + type: "success", + duration: 5, + }); + } else if (res.code === 0 && !res.success) { + message.open({ + content: "登录失败！", + type: "error", + duration: 5, + }); + } + return res; + } + + const items = [ + { + label: ( + + + 账户登录 + + ), + key: "account", + }, + { + label: ( + + + 短信登录 + + ), + key: "phone", + }, + ]; + + async function oAuthLogin(type: string) { + const res: any = await oauthLogin(type); + window.open(res.data, "_self"); + } + + const [loginType, setLoginType] = useState("account"); + + async function openSmsCaptcha() { + smsCaptcha.current!.open(); + } + + async function openLoginCaptcha() { + loginCaptcha.current!.open(); + } + + async function openLoginByPhoneCaptcha() { + loginByPhoneCaptcha.current!.open(); + } + + async function wechatLogin() { + createClientId().then((res: any) => { + generateQRCode(res.data).then((response: any) => { + if (response.success) { + setQRCode(response.data.qrCodeUrl); + setLoading(false); + timerManager.add(() => { + getClientToken(res.data).then((result: any) => { + if (result.success) { + timerManager.clear(); + store.setToken(result.data.tokenValue); + store.setUserId(result.data.loginId); + setStorage("token", result.data.tokenValue, 24 * 60 * 30); + setStorage("userId", result.data.loginId, 24 * 60 * 30); + message + .open({ + content: "登录成功！", + type: "success", + }) + .then(); + if (store.getToken() !== null || store.getUserId() !== null) { + setTimeout(() => { + navigate("/main"); + }, 2000); + } + } + }); + }, 3000); + } else { + message + .open({ + content: response.data, + type: "error", + }) + .then(); + } + }); + }); + } + + useEffect(() => { + wechatLogin().then(); + }, []); + + return ( +
+ + + +
+ + + + + 微信扫码登录 + + + + 微信扫码关注公众号)} + description={ +
+ + 微信扫码 + 关注公众号 + +
+ 登录更快更安全 +
+ } + // type="success" + showIcon={true} + className={styles.alert} + icon={} + /> + + +
+ + + logo + 五味子云存储 + +
随时随地分享你的美好瞬间
+ + + + setLoginType(activeKey as LoginType) + }> + + {loginType === "account" && ( + <> + , + }} + placeholder={"请输入邮箱或电话号码"} + rules={[ + { + required: true, + message: "请输入用户名!", + }, + ]} + /> + , + }} + placeholder={"请输入密码"} + rules={[ + { + required: true, + message: "请输入密码！", + }, + { + pattern: + /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/, + message: + "密码长度需在6~18位字符，且必须包含字母和数字！", + }, + ]} + /> + + )} + {loginType === "phone" && ( + <> + , + autoComplete: "off", + }} + name="mobile" + placeholder={"请输入手机号"} + rules={[ + { + required: true, + message: "请输入手机号！", + }, + { + pattern: /^1\d{10}$/, + message: "手机号格式错误！", + }, + ]} + /> + , + }} + captchaProps={{ + size: "large", + }} + placeholder={"请输入验证码"} + captchaTextRender={(timing: boolean, count: number) => { + if (timing) { + return `${count} ${"获取验证码"}`; + // return `${"获取验证码"}`; + } + return "获取验证码"; + }} + name="captcha" + phoneName={"mobile"} + rules={[ + { + required: true, + message: "请输入验证码！", + }, + ]} + fieldRef={captchaRef} + countDown={60} + onGetCaptcha={async () => { + await openSmsCaptcha(); + }} + /> + + )} +
+ + 自动登录 + + + 忘记密码 + +
+ + + + +
+ + + 其他登录方式 + + + +
+ + { + message + .open({ + content: "敬请期待！", + type: "info", + duration: 3, + }) + .then(); + }} + style={{ ...iconStyles, color: "#1677FF" }} + /> + +
+
+ + { + oAuthLogin("wechat").then(); + }} + style={{ ...iconStyles, color: "#08a327" }} + /> + +
+
+ + { + oAuthLogin("github").then(); + }} + style={{ ...iconStyles, color: "#333333" }} + /> + +
+
+ + { + oAuthLogin("gitee").then(); + }} + style={{ ...iconStyles, color: "#FF6A10" }} + /> + +
+ +
+ + + 注册 + +
+ +
+ +
+ ); +});