Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug修复

Browse Source
This commit is contained in:
landaiqing
2024-07-24 00:59:28 +08:00
parent 8fa1c50fb3
commit 190fda426c
16 changed files with 1512 additions and 1301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/user/index.ts
View File

@@ -156,7 +156,10 @@ export const getUserInfoApi = (userId: string): any => {
export const updateUserInfo = (data: any): any => {
return web.request({
url: "/auth/auth/user/update",
method: "get",
method: "post",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: data,
});
};
@@ -195,3 +198,29 @@ export const logout = (userId: any): any => {
},
});
};
/**
* 检查用户名是否已存在
* @param userName
*/
export const checkUserName = (userName: any): any => {
return web.request({
url: "/auth/auth/user/checkUserName",
method: "post",
params: {
userName: userName,
},
});
};
/**
* 获取最近分享
* @param userId
*/
export const getRecentShare = (userId: any): any => {
return web.request({
url: "/share/share/detail/getRecentShare",
method: "get",
params: {
userId: userId,
},
});
};

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

@@ -29,10 +29,7 @@ const FileUpload = (props: any) => {
const uploadFile = async (options: any) => {
const { onSuccess, onError, file }: { onSuccess: any; onError: any; file: any } = options;
if (
store.getUploadFilePath() === null ||
(store.getUploadFileBucket() === null && store.getUploadFileStorage() === null)
) {
if (store.getUploadFileBucket() === null || store.getUploadFileStorage() === null) {
message.open({
content: "请选择存储桶和存储路径",
type: "error",

12
src/components/Main/Home/index.tsx
View File

@@ -339,7 +339,7 @@ const MainHome: React.FC = observer(() => {
color: "coral",
fontWeight: "bolder",
}}>
{storageCount}
{storageCount || 0}
</span>
}
/个
@@ -400,7 +400,7 @@ const MainHome: React.FC = observer(() => {
color: "lightblue",
fontWeight: "bolder",
}}>
{bucketCount}
{bucketCount || 0}
</span>
}
/个
@@ -467,7 +467,7 @@ const MainHome: React.FC = observer(() => {
color: "orange",
marginLeft: 5,
}}>
{uploadFile}
{uploadFile || 0}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
@@ -483,7 +483,7 @@ const MainHome: React.FC = observer(() => {
color: "green",
marginLeft: 5,
}}>
{downloadFile}
{downloadFile || 0}
</span>
</Flex>
</Flex>
@@ -531,7 +531,7 @@ const MainHome: React.FC = observer(() => {
color: "orange",
marginLeft: 5,
}}>
{uploadFlow}
{uploadFlow || 0}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
@@ -547,7 +547,7 @@ const MainHome: React.FC = observer(() => {
color: "green",
marginLeft: 5,
}}>
{downloadFlow}
{downloadFlow || 0}
</span>
</Flex>
</Flex>

4
src/components/Main/Share/components/ShareAdd/ShareAdd.tsx
View File

@@ -31,7 +31,7 @@ import { cyan, generate, green, presetPalettes, red } from "@ant-design/colors";
type Presets = Required<ColorPickerProps>["presets"][number];
const ShareAdd: React.FunctionComponent = observer(() => {
const ShareAdd: React.FunctionComponent = () => {
const navigate = useNavigate();
const divRef = useRef(null);
const [form] = Form.useForm();
@@ -373,5 +373,5 @@ const ShareAdd: React.FunctionComponent = observer(() => {
</div>
</>
);
});
};
export default observer(ShareAdd);

119
src/components/Main/Share/components/ShareDetail/ShareDetail.tsx
View File

@@ -8,6 +8,8 @@ import {
HeartOutlined,
InfoCircleOutlined,
LeftOutlined,
LikeOutlined,
StarOutlined,
TagsOutlined,
WarningOutlined,
} from "@ant-design/icons";
@@ -22,10 +24,10 @@ 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 { addLikeDetail, getShareDetail } from "@/api/share";
import { addLikeDetail, deletedLikeDetail, getShareDetail } from "@/api/share";
import StorageIcon from "@/constant/stroage-icon.ts";
import { observer } from "mobx-react";
import { addFavorites } from "@/api/user";
import { addFavorites, deleteFavorites } from "@/api/user";
const ShareDetail: React.FunctionComponent = () => {
const navigate = useNavigate();
const store = useStore("share");
@@ -44,18 +46,20 @@ const ShareDetail: React.FunctionComponent = () => {
}
async function addLike() {
const data: any = {
circleId: store.getCircleId(),
userId: userId,
detailId: params.id,
};
addLikeDetail(data).then();
}
// async function delLike() {
// const data: any = {
// userId: userId,
// detailId: params.id,
// };
// deletedLikeDetail(data).then();
// }
async function delLike() {
const data: any = {
circleId: store.getCircleId(),
userId: userId,
detailId: params.id,
};
deletedLikeDetail(data).then();
}
async function setFavorites() {
const data: any = {
userId: userId,
@@ -68,6 +72,7 @@ const ShareDetail: React.FunctionComponent = () => {
type: "success",
content: "收藏成功",
});
getDetail().then();
} else {
message.open({
type: "error",
@@ -76,6 +81,27 @@ const ShareDetail: React.FunctionComponent = () => {
}
});
}
async function cancelFavorites() {
const data: any = {
userId: userId,
detailId: params.id,
circleId: store.getCircleId(),
};
deleteFavorites(data).then((res: any) => {
if (res && res.success) {
message.open({
type: "success",
content: "取消成功",
});
getDetail().then();
} else {
message.open({
type: "error",
content: "取消失败",
});
}
});
}
useEffect(() => {
getDetail().then();
@@ -109,7 +135,7 @@ const ShareDetail: React.FunctionComponent = () => {
color: "gray",
overflow: "hidden",
}}>
{detail.nickname}
{detail.nickname || "unknown"}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
@@ -119,7 +145,7 @@ const ShareDetail: React.FunctionComponent = () => {
fontSize: 12,
color: "gray",
}}>
{detail.likesCount}
{detail.likesCount || 0}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
@@ -129,7 +155,7 @@ const ShareDetail: React.FunctionComponent = () => {
fontSize: 12,
color: "gray",
}}>
{detail.commentCount}
{detail.commentCount || 0}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
@@ -139,7 +165,7 @@ const ShareDetail: React.FunctionComponent = () => {
fontSize: 12,
color: "gray",
}}>
{detail.views}
{detail.views || 0}
</span>
</Flex>
</Flex>
@@ -218,7 +244,7 @@ const ShareDetail: React.FunctionComponent = () => {
color: "#1677FF",
fontSize: 16,
}}>
百度云
{url.typeName}
</span>
</div>
<ExportOutlined
@@ -277,7 +303,7 @@ const ShareDetail: React.FunctionComponent = () => {
Array.from(detail.tags).map((tag: any, index: number) => {
return (
<div key={index}>
<Tag bordered={false} color={getRandomColor()}>
<Tag bordered={false} color={"#" + detail.color}>
{tag.tagName}
</Tag>
</div>
@@ -290,21 +316,54 @@ const ShareDetail: React.FunctionComponent = () => {
align={"center"}
justify={"center"}
style={{ height: 50 }}>
<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>
{detail.isLike === true ? (
<>
<Tooltip title={"取消点赞"} placement={"bottom"}>
<Avatar
className={styles.like_icon}
src={like as any}
onClick={() => {
delLike().then();
}}
size={"large"}></Avatar>
</Tooltip>
</>
) : (
<>
<Tooltip title={"点赞"} placement={"bottom"}>
<LikeOutlined
className={styles.detail_link_btn}
onClick={() => {
addLike().then();
}}></LikeOutlined>
</Tooltip>
</>
)}
{detail.isFavor === true ? (
<>
<Tooltip title={"取消收藏"} placement={"bottom"}>
<Avatar
className={styles.favtorie_icon}
src={favorite as any}
onClick={() => {
cancelFavorites().then();
}}
size={"large"}></Avatar>
</Tooltip>
</>
) : (
<>
<Tooltip title={"收藏"} placement={"bottom"}>
<StarOutlined
onClick={() => {
setFavorites().then();
}}
className={styles.detail_link_btn}
/>
</Tooltip>
</>
)}
</Flex>
</ProCard>
</div>

373
src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx
View File

@@ -44,33 +44,38 @@ const Comment = observer((props: any) => {
const userStore = useStore("user");
const userId: any = userStore.getUserId();
async function listComments() {
setComment([]);
listComment(params.id, userId).then((res: any) => {
console.log(res);
if (res && res.success && res.data) {
setComment([]);
setComment(res.data);
setLoading(false);
}
});
}
async function addLike(commentId: any) {
setComment([]);
const data: any = {
detailId: params.id,
userId: userId,
commentId: commentId,
};
addLikeComment(data).then();
listComments().then();
}
async function delLike(commentId: any) {
setComment([]);
const data: any = {
detailId: params.id,
userId: userId,
commentId: commentId,
};
deletedLikeComment(data).then();
listComments().then();
}
async function getCommentHot() {
setComment([]);
listCommentHot(params.id, userId).then((res: any) => {
if (res && res.success && res.data) {
setComment([]);
setComment(res.data);
setLoading(false);
}
@@ -85,7 +90,7 @@ const Comment = observer((props: any) => {
}
async function addComments(data: any) {
addComment(data).then((res: any) => {
if (res && res.success && res.data) {
if (res && res.success) {
message.open({
content: "评论成功",
type: "success",
@@ -108,7 +113,7 @@ const Comment = observer((props: any) => {
}
async function addReplies(data: any) {
addReply(data).then((res: any) => {
if (res && res.success && res.data) {
if (res && res.success) {
message.open({
content: "回复成功",
type: "success",
@@ -132,7 +137,7 @@ const Comment = observer((props: any) => {
setIsReplyComment(isReplyComment === index ? null : index);
};
useEffect(() => {
listComments().then();
getCommentHot().then();
getAllCommentAndReply(params.id).then();
}, []);
return (
@@ -264,99 +269,136 @@ const Comment = observer((props: any) => {
<Flex
vertical={false}
align={"center"}
style={{
marginTop: 10,
width: "100%",
}}>
<span
justify={"space-between"}>
<Flex
vertical={false}
align={"center"}
style={{
fontSize: 13,
color: "grey",
marginTop: 10,
width: "100%",
}}>
{item.createdTime}
</span>
<Flex
vertical={false}
align={"center"}>
{item.isLike === false ? (
<LikeOutlined
onClick={() => {
delLike(
item.id,
).then();
}}
className={
styles.like_icon
}
/>
) : (
<LikeFilled
className={
styles.like_icon
}
<span
style={{
fontSize: 13,
color: "grey",
}}>
{item.createdTime}
</span>
<Flex
vertical={false}
align={"center"}>
{item.isLike ===
true ? (
<LikeFilled
onClick={() => {
delLike(
item.id,
).then();
}}
style={{
color: "red",
}}
/>
) : (
<LikeOutlined
className={
styles.like_icon
}
onClick={() => {
addLike(
item.id,
).then();
}}
/>
)}
<span
style={{
color: "red",
}}
fontSize: 13,
color: "grey",
}}>
{item.likes}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<CommentOutlined
onClick={() => {
addLike(
item.id,
).then();
}}
/>
)}
<span
style={{
fontSize: 13,
color: "grey",
}}>
{item.likes}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<CommentOutlined
onClick={() => {
setReply([]);
if (item.id) {
replyComment(
item.id,
).then(() => {
handleExpandReplyCommentClick(
index,
setReply([]);
if (item.id) {
replyComment(
item.id,
).then(
() => {
handleExpandReplyCommentClick(
index,
);
},
);
});
}
}}
className={
styles.comment_icon
}
}}
className={
styles.comment_icon
}
/>
<span
style={{
fontSize: 13,
color: "grey",
}}>
{item.replyCount}
</span>
/>
<span
style={{
fontSize: 13,
color: "grey",
}}>
{item.replyCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<Button
type="text"
size={"small"}
onClick={() => {
handleExpandClick(
index,
);
}}
style={{
fontSize: 13,
color: "grey",
}}>
回复
</Button>
</Flex>
</Flex>
<Flex
vertical={false}
align={"center"}>
<Button
type="text"
size={"small"}
onClick={() => {
handleExpandClick(
index,
);
}}
<span
style={{
textWrap: "nowrap",
fontSize: 12,
color: "grey",
textAlign: "end",
}}>
{item.location ||
"unknown"}
</span>
<span
style={{
marginLeft: 10,
fontSize: 13,
color: "grey",
}}>
回复
</Button>
{item.browser ||
"unknown"}
</span>
<span
style={{
marginLeft: 10,
fontSize: 13,
color: "grey",
}}>
{item.browserVersion ||
"unknown"}
</span>
</Flex>
</Flex>
</ProCard>
@@ -573,62 +615,97 @@ const Comment = observer((props: any) => {
vertical={
false
}
style={{
marginTop: 10,
width: "100%",
}}>
<span
style={{
fontSize: 13,
color: "grey",
}}>
{
replyItem.createdTime
}
</span>
align={
"center"
}
justify={
"space-between"
}>
<Flex
vertical={
false
}
align={
"center"
}>
{replyItem.isLike ===
false ? (
<LikeOutlined
onClick={() => {
delLike(
replyItem.id,
).then();
}}
className={
styles.like_icon
}
/>
) : (
<LikeFilled
className={
styles.like_icon
}
style={{
color: "red",
}}
onClick={() => {
addLike(
replyItem.id,
).then();
}}
/>
)}
style={{
marginTop: 10,
width: "100%",
}}>
<span
style={{
fontSize: 13,
color: "grey",
}}>
{
replyItem.likes
replyItem.createdTime
}
</span>
<Flex
vertical={
false
}
align={
"center"
}>
{replyItem.isLike ===
false ? (
<LikeOutlined
onClick={() => {
addLike(
replyItem.id,
).then();
}}
className={
styles.like_icon
}
/>
) : (
<LikeFilled
className={
styles.like_icon
}
style={{
color: "red",
}}
onClick={() => {
delLike(
replyItem.id,
).then();
}}
/>
)}
<span
style={{
fontSize: 13,
color: "grey",
}}>
{
replyItem.likes
}
</span>
</Flex>
<Flex
vertical={
false
}
align={
"center"
}>
<Button
type="text"
size={
"small"
}
onClick={() => {
handleExpandReplyReplyClick(
replyItem.id,
);
}}
style={{
fontSize: 13,
color: "grey",
}}>
回复
</Button>
</Flex>
</Flex>
<Flex
vertical={
@@ -637,22 +714,36 @@ const Comment = observer((props: any) => {
align={
"center"
}>
<Button
type="text"
size={
"small"
}
onClick={() => {
handleExpandReplyReplyClick(
replyItem.id,
);
}}
<span
style={{
textWrap:
"nowrap",
fontSize: 12,
color: "grey",
textAlign:
"end",
}}>
{replyItem.location ||
"unknown"}
</span>
<span
style={{
marginLeft: 10,
fontSize: 13,
color: "grey",
}}>
回复
</Button>
{replyItem.browser ||
"unknown"}
</span>
<span
style={{
marginLeft: 10,
fontSize: 13,
color: "grey",
}}>
{replyItem.browserVersion ||
"unknown"}
</span>
</Flex>
</Flex>
</ProCard>

7
src/components/Main/Share/components/ShareDetail/index.module.less
View File

@@ -21,3 +21,10 @@
width: 50px;
height: auto;
}
.detail_link_btn{
font-size: 30px;
}
.detail_link_btn:hover{
font-size: 35px;
color: red;
}

239
src/components/Main/User/MyFavorites/index.tsx
View File

@@ -1,7 +1,7 @@
/** @format */
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Flex, Input, List, Skeleton, Tag } from "antd";
import { Avatar, Button, Empty, Flex, Input, List, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
@@ -25,24 +25,7 @@ export default observer(() => {
}
});
}
// 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(() => {
getMyShare().then();
}, []);
@@ -75,110 +58,128 @@ export default observer(() => {
</div>
</ProCard>
<ProCard bordered={false} boxShadow={false}>
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
<List
dataSource={data}
header={
<>
<h4>分享列表</h4>
</>
}
renderItem={(item: any) => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={<Avatar src={item.icon} />}
title={
<Flex vertical={false} align={"center"}>
<Link to={"/main/share/detail/" + item.id}>
{item.title}
</Link>
{item.tags &&
Array.from(item.tags).map(
(tag: any, index: number) => {
return (
{data.length === 0 ? (
<Empty description={"暂无数据"}></Empty>
) : (
<>
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
<List
dataSource={data}
header={
<>
<h4>分享列表</h4>
</>
}
renderItem={(item: any) => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={<Avatar src={item.icon} />}
title={
<Flex vertical={false} align={"center"}>
<Link to={"/main/share/detail/" + item.id}>
{item.title}
</Link>
{item.tags &&
Array.from(item.tags).map(
(tag: any, index: number) => {
return (
<Flex
vertical={false}
align={"center"}
key={index}>
<Tag
bordered={false}
color={
"#" + tag.color
}
style={{
marginLeft: 10,
}}>
{tag.tagName}
</Tag>
</Flex>
);
},
)}
</Flex>
}
description={
<>
<Flex
vertical={false}
justify={"space-between"}
align={"center"}>
{item.description}
<Flex
vertical={false}
align={"center"}
justify={"space-between"}
style={{ width: "300px" }}>
<Flex
vertical={false}
align={"center"}
key={index}>
<Tag
bordered={false}
color={"#" + tag.color}
style={{ marginLeft: 10 }}>
{tag.tagName}
</Tag>
align={"center"}>
<Avatar
src={item.avatar as any}
size={"small"}
/>
<span
style={{
fontSize: 12,
color: "gray",
overflow: "hidden",
}}>
{item.nickname}
</span>
</Flex>
);
},
)}
</Flex>
}
description={
<>
<Flex
vertical={false}
justify={"space-between"}
align={"center"}>
{item.description}
<Flex
vertical={false}
align={"center"}
justify={"space-between"}
style={{ width: "300px" }}>
<Flex vertical={false} align={"center"}>
<Avatar
src={item.avatar as any}
size={"small"}
/>
<span
style={{
fontSize: 12,
color: "gray",
overflow: "hidden",
}}>
{item.nickname}
</span>
<Flex
vertical={false}
align={"center"}>
<HeartOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.likesCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<CommentOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.commentCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<EyeOutlined
style={{ color: "gray" }}
/>{" "}
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.views}
</span>
</Flex>
</Flex>
</Flex>
<Flex vertical={false} align={"center"}>
<HeartOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.likesCount}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
<CommentOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.commentCount}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
<EyeOutlined
style={{ color: "gray" }}
/>{" "}
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.views}
</span>
</Flex>
</Flex>
</Flex>
</>
}
/>
</List.Item>
)}
/>
</Skeleton>
</>
}
/>
</List.Item>
)}
/>
</Skeleton>
</>
)}
</ProCard>
</div>
</>

220
src/components/Main/User/MyShare/index.tsx
View File

@@ -1,7 +1,7 @@
/** @format */
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Flex, Input, List, Skeleton, Tag } from "antd";
import { Avatar, Button, Empty, Flex, Input, List, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
@@ -58,110 +58,128 @@ export default observer(() => {
</div>
</ProCard>
<ProCard bordered={false} boxShadow={false}>
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
<List
dataSource={data}
header={
<>
<h4>分享列表</h4>
</>
}
renderItem={(item: any) => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={<Avatar src={item.icon} />}
title={
<Flex vertical={false} align={"center"}>
<Link to={"/main/share/detail/" + item.id}>
{item.title}
</Link>
{item.tags &&
Array.from(item.tags).map(
(tag: any, index: number) => {
return (
{data.length === 0 ? (
<Empty description={"暂无数据"}></Empty>
) : (
<>
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
<List
dataSource={data}
header={
<>
<h4>分享列表</h4>
</>
}
renderItem={(item: any) => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={<Avatar src={item.icon} />}
title={
<Flex vertical={false} align={"center"}>
<Link to={"/main/share/detail/" + item.id}>
{item.title}
</Link>
{item.tags &&
Array.from(item.tags).map(
(tag: any, index: number) => {
return (
<Flex
vertical={false}
align={"center"}
key={index}>
<Tag
bordered={false}
color={
"#" + tag.color
}
style={{
marginLeft: 10,
}}>
{tag.tagName}
</Tag>
</Flex>
);
},
)}
</Flex>
}
description={
<>
<Flex
vertical={false}
justify={"space-between"}
align={"center"}>
{item.description}
<Flex
vertical={false}
align={"center"}
justify={"space-between"}
style={{ width: "300px" }}>
<Flex
vertical={false}
align={"center"}
key={index}>
<Tag
bordered={false}
color={"#" + tag.color}
style={{ marginLeft: 10 }}>
{tag.tagName}
</Tag>
align={"center"}>
<Avatar
src={item.avatar as any}
size={"small"}
/>
<span
style={{
fontSize: 12,
color: "gray",
overflow: "hidden",
}}>
{item.nickname}
</span>
</Flex>
);
},
)}
</Flex>
}
description={
<>
<Flex
vertical={false}
justify={"space-between"}
align={"center"}>
{item.description}
<Flex
vertical={false}
align={"center"}
justify={"space-between"}
style={{ width: "300px" }}>
<Flex vertical={false} align={"center"}>
<Avatar
src={item.avatar as any}
size={"small"}
/>
<span
style={{
fontSize: 12,
color: "gray",
overflow: "hidden",
}}>
{item.nickname}
</span>
<Flex
vertical={false}
align={"center"}>
<HeartOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.likesCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<CommentOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.commentCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<EyeOutlined
style={{ color: "gray" }}
/>{" "}
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.views}
</span>
</Flex>
</Flex>
</Flex>
<Flex vertical={false} align={"center"}>
<HeartOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.likesCount}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
<CommentOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.commentCount}
</span>
</Flex>
<Flex vertical={false} align={"center"}>
<EyeOutlined
style={{ color: "gray" }}
/>{" "}
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.views}
</span>
</Flex>
</Flex>
</Flex>
</>
}
/>
</List.Item>
)}
/>
</Skeleton>
</>
}
/>
</List.Item>
)}
/>
</Skeleton>
</>
)}
</ProCard>
</div>
</>

175
src/components/Main/User/UserInfo/index.tsx
View File

@@ -1,46 +1,37 @@
/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Empty, Flex, List, Skeleton } from "antd";
import {
BankOutlined,
BulbOutlined,
EnvironmentOutlined,
} from "@ant-design/icons";
import { BankOutlined, BulbOutlined, EnvironmentOutlined } from "@ant-design/icons";
import styles from "./index.module.less";
import { ProCard } from "@ant-design/pro-components";
import Meta from "antd/es/card/Meta";
import { Link, useNavigate } from "react-router-dom";
import { getAllStorage } from "@/api/oss";
import StorageIcon from "@/constant/stroage-icon.ts";
import { getUserInfoApi } from "@/api/user";
import { getRecentShare, getUserInfoApi } from "@/api/user";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";
const UserInfo: FunctionComponent = observer(() => {
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [loadingStorage, setLoadingStorage] = useState(true);
const [userStorage, setUserStorage] = useState([]);
const [recentShare, setRecentShare] = useState([]);
const [userInfo, setUserInfo] = useState<any>({} as any);
const store = useStore("user");
const userId: any = store.getUserId();
const data = [
{
title: "Ant Design Title 1",
},
{
title: "Ant Design Title 2",
},
{
title: "Ant Design Title 3",
},
{
title: "Ant Design Title 4",
},
];
async function getUserStorage() {
const res: any = await getAllStorage(userId);
if (res && res.success && res.data) {
setUserStorage(res.data);
setLoadingStorage(false);
}
}
async function getUserRecentShare() {
const res: any = await getRecentShare(userId);
if (res && res.success && res.data) {
setRecentShare(res.data);
setLoading(false);
}
}
@@ -53,6 +44,7 @@ const UserInfo: FunctionComponent = observer(() => {
useEffect(() => {
getUserInfo().then();
getUserStorage().then();
getUserRecentShare().then();
}, []);
return (
<>
@@ -79,81 +71,92 @@ const UserInfo: FunctionComponent = observer(() => {
<div className={styles.user_info_center_content}>
<ProCard
bordered
style={{ maxWidth: "64%" }}
style={{ maxWidth: "100%" }}
title="我的存储商"
boxShadow
extra={<Link to={"/main/setting"}>查看更多</Link>}>
<Flex vertical={false} align={"center"} justify={"space-between"} wrap={true}>
<Skeleton loading={loading} active>
{userStorage.map((item: any, index: number) => {
return (
<>
<Card
key={index}
onClick={() => {
navigate(`/main/setting/${item.ossType}`);
}}
style={{ width: 350, marginTop: 16, marginLeft: 10 }}
hoverable={true}>
<Meta
avatar={<Avatar src={StorageIcon[item.ossType]} />}
title={item.name}
description={
<>
<span> 配置：{item.configCount}</span>
<span style={{ marginLeft: 10 }}>
存储桶： {item.bucketCount}
</span>
</>
}></Meta>
</Card>
</>
);
})}
</Skeleton>
{userStorage && userStorage.length === 0 ? (
<Empty description={"暂无数据"}></Empty>
) : (
<>
<Skeleton loading={loadingStorage} active>
{userStorage.map((item: any, index: number) => {
return (
<div key={index}>
<Card
onClick={() => {
navigate(`/main/setting/${item.ossType}`);
}}
style={{
width: 350,
marginTop: 16,
marginLeft: 10,
}}
hoverable={true}>
<Meta
avatar={
<Avatar
src={StorageIcon[item.ossType]}
/>
}
title={item.name}
description={
<>
<span>
{" "}
配置：{item.configCount}
</span>
<span style={{ marginLeft: 10 }}>
存储桶： {item.bucketCount}
</span>
</>
}></Meta>
</Card>
</div>
);
})}
</Skeleton>
</>
)}
</Flex>
</ProCard>
<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>
<Skeleton loading={loading} active>
<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
<Meta
avatar={
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
}
title="Card title"
description="This is the description"
/>
</Card>
</Skeleton>
</ProCard>
{/*<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>*/}
{/* <Skeleton loading={loading} active>*/}
{/* <Card style={{ width: 300, marginTop: 16 }} hoverable={true}>*/}
{/* <Meta*/}
{/* avatar={*/}
{/* <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />*/}
{/* }*/}
{/* title="Card title"*/}
{/* description="This is the description"*/}
{/* />*/}
{/* </Card>*/}
{/* </Skeleton>*/}
{/*</ProCard>*/}
</div>
<div className={styles.user_info_bottom_content}>
<ProCard
bordered
style={{ maxWidth: "64%" }}
title="最近动态"
boxShadow
extra={<Link to={"#"}>查看更多</Link>}>
<Skeleton loading={loading} active avatar>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={(item, index) => (
<List.Item>
<List.Item.Meta
avatar={
<Avatar
src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
/>
}
title={<a href="https://ant.design">{item.title}</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
</Skeleton>
<ProCard bordered style={{ maxWidth: "64%" }} title="最近动态" boxShadow>
{recentShare && recentShare.length === 0 ? (
<Empty description={"暂无数据"}></Empty>
) : (
<Skeleton loading={loading} active avatar>
<List
itemLayout="horizontal"
dataSource={recentShare}
renderItem={(item: any) => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={userInfo.avatar} />}
title={item.title}
description={item.date}
/>
</List.Item>
)}
/>
</Skeleton>
)}
</ProCard>
<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>

63
src/components/Main/User/UserSetting/index.tsx
View File

@@ -33,6 +33,7 @@ const UserSetting: FunctionComponent = observer(() => {
const userId: any = store.getUserId();
async function getUserInfo() {
getUserInfoApi(userId).then((res: any) => {
console.log(res);
if (res && res.success && res.data) {
setUserInfo(res.data);
setLoading(false);
@@ -40,8 +41,8 @@ const UserSetting: FunctionComponent = observer(() => {
});
}
type FieldType = {
nickname?: string;
location?: string;
nickName?: string;
// location?: string;
introduce?: string;
gender?: string;
company?: string;
@@ -64,7 +65,7 @@ const UserSetting: FunctionComponent = observer(() => {
}
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
const data: any = {
userId: userId,
id: userId,
...values,
};
updateUserInfo(data).then((res: any) => {
@@ -92,24 +93,22 @@ const UserSetting: FunctionComponent = observer(() => {
getUserInfo().then();
}, []);
const prefixSelector = (
<Form.Item name="prefix" noStyle>
<Select style={{ width: 90 }}>
<Select.Option value="https://">https://</Select.Option>
<Select.Option value="http://">http://</Select.Option>
</Select>
</Form.Item>
<Select style={{ width: 90 }}>
<Select.Option value="https://">https://</Select.Option>
<Select.Option value="http://">http://</Select.Option>
</Select>
);
const ProFormText = (props: any) => {
return (
<ProForm.Item {...props} style={{ height: "10px" }}>
<ProFormCascader
request={async () => city}
width="md"
name="location"
disabled={disable}></ProFormCascader>
</ProForm.Item>
);
};
// const ProFormText = (props: any) => {
// return (
// <ProForm.Item {...props} style={{ height: "10px" }}>
// <ProFormCascader
// request={async () => city}
// width="md"
// name="location"
// disabled={disable}></ProFormCascader>
// </ProForm.Item>
// );
// };
useEffect(() => {}, []);
const TabItems = [
{
@@ -142,7 +141,7 @@ const UserSetting: FunctionComponent = observer(() => {
{/*</Form.Item>*/}
<Form.Item<FieldType>
label="昵称"
name="nickname"
name="nickName"
rules={[
{
type: "string",
@@ -167,12 +166,12 @@ const UserSetting: FunctionComponent = observer(() => {
<Select.Option value="UNKNOWN">隐私</Select.Option>
</Select>
</Form.Item>
<Form.Item<FieldType>
label="地区"
name="location"
rules={[{ required: true, message: "请输入地区!" }]}>
<ProFormText />
</Form.Item>
{/*<Form.Item<FieldType>*/}
{/* label="地区"*/}
{/* name="location"*/}
{/* rules={[{ required: true, message: "请输入地区!" }]}>*/}
{/* <ProFormText />*/}
{/*</Form.Item>*/}
<Form.Item<FieldType> label="公司" name="company">
<Input allowClear disabled={disable} />
</Form.Item>
@@ -240,7 +239,7 @@ const UserSetting: FunctionComponent = observer(() => {
type="text"
onClick={async () => {
const data: any = {
userId: userId,
id: userId,
password: password,
};
await updateUser(data);
@@ -264,7 +263,7 @@ const UserSetting: FunctionComponent = observer(() => {
type="text"
onClick={async () => {
const data: any = {
userId: userId,
id: userId,
phone: phone,
};
await updateUser(data);
@@ -288,7 +287,7 @@ const UserSetting: FunctionComponent = observer(() => {
type="text"
onClick={async () => {
const data: any = {
userId: userId,
id: userId,
email: email,
};
await updateUser(data);
@@ -323,14 +322,14 @@ const UserSetting: FunctionComponent = observer(() => {
<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: 200 }}>{userInfo.userName}</span>
</Flex>
<Flex
vertical={false}
align={"center"}
style={{ marginTop: 20 }}>
<span style={{ color: "grey" }}>账号ID：</span>
<span style={{ width: 130 }}>{userInfo.id}</span>
<span style={{ width: 200 }}>{userInfo.id}</span>
</Flex>
</Flex>
<Flex vertical={true} style={{ marginLeft: 50 }}>

2
src/utils/axios/web.ts
View File

@@ -4,7 +4,7 @@ import Request from "./request";
const web: Request = new Request({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 10000,
// timeout: 10000,
});
export default web;

11
src/views/Main/index.tsx
View File

@@ -16,6 +16,8 @@ import { logout } from "@/api/user";
import { observer } from "mobx-react";
import useStore from "@/utils/store/useStore.tsx";
import { getUserMenuPermission } from "@/api/user";
import { clearStorage, getStorageFromKey, removeStorageFromKey } from "@/utils/localStorage/config.ts";
import localforage from "localforage";
const Layout = () => {
const location = useLocation();
@@ -75,7 +77,14 @@ const Layout = () => {
label: "退出登录",
onClick: () => {
logout(store.getUserId());
navigate("/login");
clearStorage();
store.setToken("");
store.setUserId("");
store.setAvatar("");
store.setNickName("");
setTimeout(() => {
navigate("/login");
}, 1000);
},
},
],

748
src/views/User/Forget/index.tsx
View File

@@ -1,375 +1,373 @@
/** @format */
import { LockOutlined, MobileOutlined, SafetyOutlined, WechatOutlined } from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
import { useEffect, useRef, useState } from "react";
import { TinyColor } from "@ctrl/tinycolor";
import logo from "@/assets/images/logo.png";
import styles from "./index.module.less";
import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import { createClientId, findPassword, generateQRCode, getClientToken, getSms } from "@/api/user";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { get, load } from "@/api/captcha";
import { useNavigate } from "react-router-dom";
import useStore from "@/utils/store/useStore.tsx";
import { setStorage } from "@/utils/localStorage/config.ts";
import { TimerManager } from "timer-manager-lib";
type LoginType = "phone";
export default observer(() => {
const [form] = Form.useForm();
const captchaRef = useRef<CaptFieldRef | null | undefined>();
const smsCaptcha = useRef<CaptchaInstance>(null);
const findPasswordCaptcha = useRef<CaptchaInstance>(null);
const [loginType, setLoginType] = useState<LoginType>("phone");
const colors = ["#fc6076", "#ff9a44", "#ef9d43", "#e75516"];
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(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<TicketInfoType> {
const phone = form.getFieldValue("phone");
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 findPasswordVerify(token: string, deg: number): Promise<TicketInfoType> {
const mobile = form.getFieldValue("phone");
const captcha = form.getFieldValue("activeCode");
const password = form.getFieldValue("password");
const confirmPassword = form.getFieldValue("confirmPassword");
const data: API.findPasswordRequest = {
token: token,
deg: deg,
phone: mobile,
activeCode: captcha,
password: password,
confirmPassword: confirmPassword,
};
const res: any = await findPassword(data);
if (res && res.success && res.code === 0) {
message.open({
content: res.data,
type: "success",
duration: 5,
});
} else if (res.code === 0 && !res.success) {
message.open({
content: res.data,
type: "error",
duration: 5,
});
}
return res;
}
async function openSmsCaptcha() {
smsCaptcha.current!.open();
}
async function fopenFindPasswordCaptcha() {
findPasswordCaptcha.current!.open();
}
const items = [
{
key: "phone",
label: (
<span>
<SafetyOutlined />
重置密码
</span>
),
},
];
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 (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={smsVerify} limit={2} ref={smsCaptcha} />
<RotateCaptcha
get={get}
load={load}
verify={findPasswordVerify}
limit={2}
ref={findPasswordCaptcha}
/>
<div className={styles.content}>
<Space>
<Space className={styles.login_content}>
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Spin tip="Loading" size="large" spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
fallback="data:image/png;base64,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"
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
微信扫码
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全
</div>
}
// type="success"
showIcon={true}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
</Space>
<Form
form={form}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction="vertical" align="center">
<Space className={styles.logo}>
<img
alt="logo"
src={logo}
style={{ width: "44px", height: "44px" }}
/>
<span>五味子云存储</span>
</Space>
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space>
<Tabs
centered={true}
items={items}
activeKey={loginType}
onChange={(activeKey) =>
setLoginType(activeKey as LoginType)
}></Tabs>
<>
<ProFormText
fieldProps={{
size: "large",
prefix: <MobileOutlined className={"prefixIcon"} />,
autoComplete: "off",
}}
name="phone"
placeholder="请输入手机号"
rules={[
{
required: true,
message: "请输入手机号！",
},
{
pattern: /^1\d{10}$/,
message: "手机号格式错误！",
},
]}
/>
<ProFormCaptcha
fieldProps={{
size: "large",
prefix: <SafetyOutlined className={"prefixIcon"} />,
}}
captchaProps={{
size: "large",
}}
placeholder={"请输入验证码"}
captchaTextRender={(timing: boolean, count: number) => {
if (timing) {
return `${count} ${"获取验证码"}`;
// return `${"获取验证码"}`;
}
return "获取验证码";
}}
name="activeCode"
phoneName={"phone"}
countDown={60}
rules={[
{
required: true,
message: "请输入验证码！",
},
]}
fieldRef={captchaRef}
onGetCaptcha={async () => {
await openSmsCaptcha();
}}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请输入新密码"
rules={[
{
required: true,
message: "请输入新密码！",
},
{
pattern:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
message:
"密码长度需在6~18位字符，且必须包含字母和数字！",
},
]}
/>
<ProFormText.Password
name="confirmPassword"
dependencies={["password"]}
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请再次确认密码"
rules={[
{
required: true,
message: "请再次确认密码！",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error("两次输入的密码不一致!"),
);
},
}),
]}
/>
</>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: `linear-gradient(135deg, ${colors.join(", ")})`,
colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors).join(", ")})`,
colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors).join(", ")})`,
lineWidth: 0,
},
},
}}>
<Button
type="primary"
block
size="large"
onClick={async () => {
const validateFields = [
"phone",
"password",
"activeCode",
"confirmPassword",
];
await form
.validateFields(validateFields)
.then(async () => {
await fopenFindPasswordCaptcha();
})
.catch((error) => {
console.error(error);
});
}}>
重置
</Button>
</ConfigProvider>
</Form>
<a href="/login" className={styles.go_to_register}>
<span>登录</span>
</a>
</Space>
</Space>
</div>
<FooterComponent />
</div>
);
});
/** @format */
import { LockOutlined, MobileOutlined, SafetyOutlined, WechatOutlined } from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
import { useEffect, useRef, useState } from "react";
import { TinyColor } from "@ctrl/tinycolor";
import logo from "@/assets/images/logo.png";
import styles from "./index.module.less";
import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import { createClientId, findPassword, generateQRCode, getClientToken, getSms } from "@/api/user";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { get, load } from "@/api/captcha";
import { useNavigate } from "react-router-dom";
import useStore from "@/utils/store/useStore.tsx";
import { setStorage } from "@/utils/localStorage/config.ts";
import { TimerManager } from "timer-manager-lib";
type LoginType = "phone";
export default observer(() => {
const [form] = Form.useForm();
const captchaRef = useRef<CaptFieldRef | null | undefined>();
const smsCaptcha = useRef<CaptchaInstance>(null);
const findPasswordCaptcha = useRef<CaptchaInstance>(null);
const [loginType, setLoginType] = useState<LoginType>("phone");
const colors = ["#fc6076", "#ff9a44", "#ef9d43", "#e75516"];
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(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<TicketInfoType> {
const phone = form.getFieldValue("phone");
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 findPasswordVerify(token: string, deg: number): Promise<TicketInfoType> {
const mobile = form.getFieldValue("phone");
const captcha = form.getFieldValue("activeCode");
const password = form.getFieldValue("password");
const confirmPassword = form.getFieldValue("confirmPassword");
const data: API.findPasswordRequest = {
token: token,
deg: deg,
phone: mobile,
activeCode: captcha,
password: password,
confirmPassword: confirmPassword,
};
const res: any = await findPassword(data);
if (res && res.success && res.code === 0) {
message.open({
content: res.data,
type: "success",
duration: 5,
});
} else if (res.code === 0 && !res.success) {
message.open({
content: res.data,
type: "error",
duration: 5,
});
}
return res;
}
async function openSmsCaptcha() {
smsCaptcha.current!.open();
}
async function fopenFindPasswordCaptcha() {
findPasswordCaptcha.current!.open();
}
const items = [
{
key: "phone",
label: (
<span>
<SafetyOutlined />
重置密码
</span>
),
},
];
async function wechatLogin() {
createClientId().then((res: any) => {
generateQRCode(res.data).then((response: any) => {
if (res && response.success && res.data) {
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 (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={smsVerify} limit={2} ref={smsCaptcha} />
<RotateCaptcha
get={get}
load={load}
verify={findPasswordVerify}
limit={2}
ref={findPasswordCaptcha}
/>
<div className={styles.content}>
<Space>
<Space className={styles.login_content}>
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Spin tip="Loading" size="large" spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
微信扫码
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全
</div>
}
// type="success"
showIcon={true}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
</Space>
<Form
form={form}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction="vertical" align="center">
<Space className={styles.logo}>
<img
alt="logo"
src={logo}
style={{ width: "44px", height: "44px" }}
/>
<span>五味子云存储</span>
</Space>
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space>
<Tabs
centered={true}
items={items}
activeKey={loginType}
onChange={(activeKey) =>
setLoginType(activeKey as LoginType)
}></Tabs>
<>
<ProFormText
fieldProps={{
size: "large",
prefix: <MobileOutlined className={"prefixIcon"} />,
autoComplete: "off",
}}
name="phone"
placeholder="请输入手机号"
rules={[
{
required: true,
message: "请输入手机号！",
},
{
pattern: /^1\d{10}$/,
message: "手机号格式错误！",
},
]}
/>
<ProFormCaptcha
fieldProps={{
size: "large",
prefix: <SafetyOutlined className={"prefixIcon"} />,
}}
captchaProps={{
size: "large",
}}
placeholder={"请输入验证码"}
captchaTextRender={(timing: boolean, count: number) => {
if (timing) {
return `${count} ${"获取验证码"}`;
// return `${"获取验证码"}`;
}
return "获取验证码";
}}
name="activeCode"
phoneName={"phone"}
countDown={60}
rules={[
{
required: true,
message: "请输入验证码！",
},
]}
fieldRef={captchaRef}
onGetCaptcha={async () => {
await openSmsCaptcha();
}}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请输入新密码"
rules={[
{
required: true,
message: "请输入新密码！",
},
{
pattern:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
message:
"密码长度需在6~18位字符，且必须包含字母和数字！",
},
]}
/>
<ProFormText.Password
name="confirmPassword"
dependencies={["password"]}
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请再次确认密码"
rules={[
{
required: true,
message: "请再次确认密码！",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error("两次输入的密码不一致!"),
);
},
}),
]}
/>
</>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: `linear-gradient(135deg, ${colors.join(", ")})`,
colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors).join(", ")})`,
colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors).join(", ")})`,
lineWidth: 0,
},
},
}}>
<Button
type="primary"
block
size="large"
onClick={async () => {
const validateFields = [
"phone",
"password",
"activeCode",
"confirmPassword",
];
await form
.validateFields(validateFields)
.then(async () => {
await fopenFindPasswordCaptcha();
})
.catch((error) => {
console.error(error);
});
}}>
重置
</Button>
</ConfigProvider>
</Form>
<a href="/login" className={styles.go_to_register}>
<span>登录</span>
</a>
</Space>
</Space>
</div>
<FooterComponent />
</div>
);
});

5
src/views/User/Login/index.tsx
View File

@@ -120,6 +120,7 @@ export default observer(() => {
store.setAvatar(res.data.user.avatar);
store.setNickName(res.data.user.nickName);
setStorage("token", res.data.token, 24 * 60 * 30);
setStorage("userId", res.data.user.id, 24 * 60 * 30);
if (store.getToken() !== null || store.getUserId() !== null) {
setTimeout(() => {
navigate("/main/home");
@@ -154,6 +155,7 @@ export default observer(() => {
store.setToken(res.data.token);
store.setUserId(res.data.user.id);
setStorage("token", res.data.token, 24 * 60 * 30);
setStorage("userId", res.data.user.id, 24 * 60 * 30);
if (store.getToken() !== null || store.getUserId() !== null) {
setTimeout(() => {
navigate("/main");
@@ -217,7 +219,7 @@ export default observer(() => {
async function wechatLogin() {
createClientId().then((res: any) => {
generateQRCode(res.data).then((response: any) => {
if (response.success) {
if (res && response.success && res.data) {
setQRCode(response.data.qrCodeUrl);
setLoading(false);
timerManager.add(() => {
@@ -289,7 +291,6 @@ export default observer(() => {
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
fallback="data:image/png;base64,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"
/>
</Spin>
<Alert

799
src/views/User/Register/index.tsx
View File

@@ -1,400 +1,399 @@
/** @format */
import {
LockOutlined,
MobileOutlined,
SafetyOutlined,
UserOutlined,
WechatOutlined,
} from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
import { useEffect, useRef, useState } from "react";
import logo from "@/assets/images/logo.png";
// import background from '@/assets/images/background.png'
import styles from "./index.module.less";
import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import { createClientId, generateQRCode, getClientToken, getSms, register } from "@/api/user";
import { TinyColor } from "@ctrl/tinycolor";
import { get, load } from "@/api/captcha";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { useNavigate } from "react-router-dom";
import { setStorage } from "@/utils/localStorage/config.ts";
import useStore from "@/utils/store/useStore.tsx";
import { TimerManager } from "timer-manager-lib";
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = "phone";
export default observer(() => {
const [form] = Form.useForm();
const registerCaptcha = useRef<CaptchaInstance>(null);
const smsCaptcha = useRef<CaptchaInstance>(null);
const captchaRef = useRef<CaptFieldRef | null | undefined>();
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const colors = ["#6253E1", "#04BEFE"];
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(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());
const items = [
{
key: "phone",
label: (
<span>
<MobileOutlined />
手机号注册
</span>
),
},
];
const [loginType, setLoginType] = useState<LoginType>("phone");
async function smsVerify(token: string, deg: number): Promise<TicketInfoType> {
const phone = form.getFieldValue("phone");
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 openRegisterCaptcha() {
registerCaptcha.current!.open();
}
async function openSmsCaptcha() {
smsCaptcha.current!.open();
}
async function registerVerify(token: string, deg: number): Promise<TicketInfoType> {
const userName = form.getFieldValue("username");
const password = form.getFieldValue("password");
const phone = form.getFieldValue("phone");
const activeCode = form.getFieldValue("activeCode");
const data: any = {
token: token,
deg: deg,
userName: userName,
password: password,
phone: phone,
activeCode: activeCode,
};
const res: any = await register(data);
if (res && res.success && res.code === 0) {
message
.open({
content: res.data,
type: "success",
duration: 5,
})
.then(() => {
navigate("/login");
});
} else if (res.code === 0 && !res.success) {
message.open({
content: res.data,
type: "error",
duration: 5,
});
}
return res;
}
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 (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={registerVerify} ref={registerCaptcha} />
<RotateCaptcha get={get} load={load} verify={smsVerify} ref={smsCaptcha} />
<div className={styles.content}>
<Space>
<Space className={styles.login_content}>
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Spin tip="Loading" size="large" spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
fallback="data:image/png;base64,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"
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
微信扫码
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全
</div>
}
// type="success"
showIcon={true}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
</Space>
<Form
form={form}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction="vertical" align="center">
<Space className={styles.logo}>
<img
alt="logo"
src={logo}
style={{ width: "44px", height: "44px" }}
/>
<span>五味子云存储</span>
</Space>
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space>
<Tabs
centered={true}
items={items}
activeKey={loginType}
onChange={(activeKey) =>
setLoginType(activeKey as LoginType)
}></Tabs>
<>
<ProFormText
fieldProps={{
size: "large",
prefix: <UserOutlined className={"prefixIcon"} />,
autoComplete: "off",
}}
name="username"
placeholder="请输入用户名"
rules={[
{
required: true,
message: "请输入用户名！",
},
{
pattern: /^[a-zA-Z0-9_-]{3,16}$/,
message:
"用户名只能是3到16位（字母，数字，下划线，减号）",
},
]}
/>
<ProFormText
fieldProps={{
size: "large",
prefix: <MobileOutlined className={"prefixIcon"} />,
autoComplete: "off",
}}
name="phone"
placeholder="请输入手机号"
rules={[
{
required: true,
message: "请输入手机号！",
},
{
pattern: /^1\d{10}$/,
message: "手机号格式错误！",
},
]}
/>
<ProFormCaptcha
fieldProps={{
size: "large",
prefix: <SafetyOutlined className={"prefixIcon"} />,
}}
captchaProps={{
size: "large",
}}
placeholder={"请输入验证码"}
captchaTextRender={(timing: boolean, count: number) => {
if (timing) {
return `${count} ${"获取验证码"}`;
// return `${"获取验证码"}`;
}
return "获取验证码";
}}
name="activeCode"
phoneName={"phone"}
countDown={60}
rules={[
{
required: true,
message: "请输入验证码！",
},
]}
fieldRef={captchaRef}
onGetCaptcha={async () => {
await openSmsCaptcha();
}}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请输入密码"
rules={[
{
required: true,
message: "请输入密码！",
},
{
pattern:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
message:
"密码长度需在6~18位字符，且必须包含字母和数字！",
},
]}
/>
<ProFormText.Password
name="confirmPassword"
dependencies={["password"]}
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请再次确认密码"
rules={[
{
required: true,
message: "请再次确认密码！",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error("两次输入的密码不一致!"),
);
},
}),
]}
/>
</>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: `linear-gradient(90deg, ${colors.join(", ")})`,
colorPrimaryHover: `linear-gradient(90deg, ${getHoverColors(colors).join(", ")})`,
colorPrimaryActive: `linear-gradient(90deg, ${getActiveColors(colors).join(", ")})`,
lineWidth: 0,
},
},
}}>
<Button
type="primary"
block
size="large"
onClick={async () => {
const validateFields = [
"phone",
"username",
"password",
"activeCode",
"confirmPassword",
];
await form
.validateFields(validateFields)
.then(async () => {
await openRegisterCaptcha();
})
.catch((error) => {
console.error(error);
});
}}>
注册
</Button>
</ConfigProvider>
</Form>
<a href="/login" className={styles.go_to_register}>
<span>登录</span>
</a>
</Space>
</Space>
</div>
<FooterComponent />
</div>
);
});
/** @format */
import {
LockOutlined,
MobileOutlined,
SafetyOutlined,
UserOutlined,
WechatOutlined,
} from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
import { useEffect, useRef, useState } from "react";
import logo from "@/assets/images/logo.png";
// import background from '@/assets/images/background.png'
import styles from "./index.module.less";
import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import { createClientId, generateQRCode, getClientToken, getSms, register } from "@/api/user";
import { TinyColor } from "@ctrl/tinycolor";
import { get, load } from "@/api/captcha";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { useNavigate } from "react-router-dom";
import { setStorage } from "@/utils/localStorage/config.ts";
import useStore from "@/utils/store/useStore.tsx";
import { TimerManager } from "timer-manager-lib";
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = "phone";
export default observer(() => {
const [form] = Form.useForm();
const registerCaptcha = useRef<CaptchaInstance>(null);
const smsCaptcha = useRef<CaptchaInstance>(null);
const captchaRef = useRef<CaptFieldRef | null | undefined>();
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const colors = ["#6253E1", "#04BEFE"];
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(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());
const items = [
{
key: "phone",
label: (
<span>
<MobileOutlined />
手机号注册
</span>
),
},
];
const [loginType, setLoginType] = useState<LoginType>("phone");
async function smsVerify(token: string, deg: number): Promise<TicketInfoType> {
const phone = form.getFieldValue("phone");
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 openRegisterCaptcha() {
registerCaptcha.current!.open();
}
async function openSmsCaptcha() {
smsCaptcha.current!.open();
}
async function registerVerify(token: string, deg: number): Promise<TicketInfoType> {
const userName = form.getFieldValue("username");
const password = form.getFieldValue("password");
const phone = form.getFieldValue("phone");
const activeCode = form.getFieldValue("activeCode");
const data: any = {
token: token,
deg: deg,
userName: userName,
password: password,
phone: phone,
activeCode: activeCode,
};
const res: any = await register(data);
if (res && res.success && res.code === 0) {
message
.open({
content: res.data,
type: "success",
duration: 5,
})
.then(() => {
navigate("/login");
});
} else if (res.code === 0 && !res.success) {
message.open({
content: res.data,
type: "error",
duration: 5,
});
}
return res;
}
async function wechatLogin() {
createClientId().then((res: any) => {
generateQRCode(res.data).then((response: any) => {
if (res && response.success && res.data) {
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 (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={registerVerify} ref={registerCaptcha} />
<RotateCaptcha get={get} load={load} verify={smsVerify} ref={smsCaptcha} />
<div className={styles.content}>
<Space>
<Space className={styles.login_content}>
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Spin tip="Loading" size="large" spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
微信扫码
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全
</div>
}
// type="success"
showIcon={true}
className={styles.alert}
icon={<WechatOutlined />}
/>
</Space>
</Space>
<Form
form={form}
className={styles.login_form}
initialValues={{
autoLogin: true,
}}>
<Space direction="vertical" align="center">
<Space className={styles.logo}>
<img
alt="logo"
src={logo}
style={{ width: "44px", height: "44px" }}
/>
<span>五味子云存储</span>
</Space>
<div className={styles.subTitle}>随时随地分享你的美好瞬间</div>
</Space>
<Tabs
centered={true}
items={items}
activeKey={loginType}
onChange={(activeKey) =>
setLoginType(activeKey as LoginType)
}></Tabs>
<>
<ProFormText
fieldProps={{
size: "large",
prefix: <UserOutlined className={"prefixIcon"} />,
autoComplete: "off",
}}
name="username"
placeholder="请输入用户名"
rules={[
{
required: true,
message: "请输入用户名！",
},
{
pattern: /^[a-zA-Z0-9_-]{3,16}$/,
message:
"用户名只能是3到16位（字母，数字，下划线，减号）",
},
]}
/>
<ProFormText
fieldProps={{
size: "large",
prefix: <MobileOutlined className={"prefixIcon"} />,
autoComplete: "off",
}}
name="phone"
placeholder="请输入手机号"
rules={[
{
required: true,
message: "请输入手机号！",
},
{
pattern: /^1\d{10}$/,
message: "手机号格式错误！",
},
]}
/>
<ProFormCaptcha
fieldProps={{
size: "large",
prefix: <SafetyOutlined className={"prefixIcon"} />,
}}
captchaProps={{
size: "large",
}}
placeholder={"请输入验证码"}
captchaTextRender={(timing: boolean, count: number) => {
if (timing) {
return `${count} ${"获取验证码"}`;
// return `${"获取验证码"}`;
}
return "获取验证码";
}}
name="activeCode"
phoneName={"phone"}
countDown={60}
rules={[
{
required: true,
message: "请输入验证码！",
},
]}
fieldRef={captchaRef}
onGetCaptcha={async () => {
await openSmsCaptcha();
}}
/>
<ProFormText.Password
name="password"
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请输入密码"
rules={[
{
required: true,
message: "请输入密码！",
},
{
pattern:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
message:
"密码长度需在6~18位字符，且必须包含字母和数字！",
},
]}
/>
<ProFormText.Password
name="confirmPassword"
dependencies={["password"]}
fieldProps={{
size: "large",
prefix: <LockOutlined className={"prefixIcon"} />,
}}
placeholder="请再次确认密码"
rules={[
{
required: true,
message: "请再次确认密码！",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error("两次输入的密码不一致!"),
);
},
}),
]}
/>
</>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: `linear-gradient(90deg, ${colors.join(", ")})`,
colorPrimaryHover: `linear-gradient(90deg, ${getHoverColors(colors).join(", ")})`,
colorPrimaryActive: `linear-gradient(90deg, ${getActiveColors(colors).join(", ")})`,
lineWidth: 0,
},
},
}}>
<Button
type="primary"
block
size="large"
onClick={async () => {
const validateFields = [
"phone",
"username",
"password",
"activeCode",
"confirmPassword",
];
await form
.validateFields(validateFields)
.then(async () => {
await openRegisterCaptcha();
})
.catch((error) => {
console.error(error);
});
}}>
注册
</Button>
</ConfigProvider>
</Form>
<a href="/login" className={styles.go_to_register}>
<span>登录</span>
</a>
</Space>
</Space>
</div>
<FooterComponent />
</div>
);
});