feat: 新增重置密码页面

src/views/User/Login/index.tsx

@@ -6,6 +6,7 @@ import {
 	LockOutlined,
 	MobileOutlined,
 	QqOutlined,
+	SafetyOutlined,
 	UserOutlined,
 	WechatOutlined,
 } from "@ant-design/icons";
@@ -15,7 +16,18 @@ import {
 	ProFormCheckbox,
 	ProFormText,
 } from "@ant-design/pro-components";
-import { Alert, Button, Divider, Form, Image, message, Space, Tabs, Tooltip } from "antd";
+import {
+	Alert,
+	Button,
+	ConfigProvider,
+	Divider,
+	Form,
+	Image,
+	message,
+	Space,
+	Tabs,
+	Tooltip,
+} from "antd";
 import { CSSProperties, useEffect, useRef, useState } from "react";
 import logo from "@/assets/icons/schisandra.svg";
 import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
@@ -26,6 +38,7 @@ import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotat
 import { get, load } from "@/api/captcha/index.ts";
 import { getSms, oauthLogin } from "@/api/user";
 import { VerfiyCaptcha } from "@/api/captcha/api.ts";
+import { TinyColor } from "@ctrl/tinycolor";
 // import useStore from '@/utils/store/useStore.tsx'
 type LoginType = "account" | "phone";
 
@@ -40,6 +53,11 @@ export default observer(() => {
 	const [form] = Form.useForm();
 	const captcha = useRef<CaptchaInstance>(null);
 	const captchaRef = useRef<CaptFieldRef | null | undefined>();
+	const colors = ["#40e495", "#30dd8a", "#2bb673"];
+	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 verify(token: string, deg: number): Promise<TicketInfoType> {
 		const data: any = {
@@ -214,7 +232,7 @@ export default observer(() => {
 										<ProFormCaptcha
 											fieldProps={{
 												size: "large",
-												prefix: <LockOutlined className={"prefixIcon"} />,
+												prefix: <SafetyOutlined className={"prefixIcon"} />,
 											}}
 											captchaProps={{
 												size: "large",
@@ -252,32 +270,45 @@ export default observer(() => {
 									<ProFormCheckbox noStyle name="autoLogin">
 										自动登录
 									</ProFormCheckbox>
-									<a style={{ float: "right" }}>忘记密码</a>
+									<a href={"/forget"} style={{ float: "right" }}>
+										忘记密码
+									</a>
 								</div>
-
-								<Button
-									type="primary"
-									block
-									size="large"
-									onClick={async () => {
-										let validateFields;
-										if (loginType === "account") {
-											validateFields = ["username", "password"];
-										} else {
-											validateFields = ["mobile", "captcha"];
-										}
-
-										await form
-											.validateFields(validateFields)
-											.then(async (values) => {
-												await onSubmit(values);
-											})
-											.catch((error) => {
-												console.error(error);
-											});
+								<ConfigProvider
+									theme={{
+										components: {
+											Button: {
+												colorPrimary: `linear-gradient(116deg,  ${colors.join(", ")})`,
+												colorPrimaryHover: `linear-gradient(116deg, ${getHoverColors(colors).join(", ")})`,
+												colorPrimaryActive: `linear-gradient(116deg, ${getActiveColors(colors).join(", ")})`,
+												lineWidth: 0,
+											},
+										},
 									}}>
-									登录
-								</Button>
+									<Button
+										type="primary"
+										block
+										size="large"
+										onClick={async () => {
+											let validateFields;
+											if (loginType === "account") {
+												validateFields = ["username", "password"];
+											} else {
+												validateFields = ["mobile", "captcha"];
+											}
+
+											await form
+												.validateFields(validateFields)
+												.then(async (values) => {
+													await onSubmit(values);
+												})
+												.catch((error) => {
+													console.error(error);
+												});
+										}}>
+										登录
+									</Button>
+								</ConfigProvider>
 
 								<div
 									style={{