Undefined6608

.eslintrc.json

@@ -14,13 +14,28 @@
 	},
 	"rules": {
 		// 在这里添加或覆盖规则
-		"quotes": ["error", "double"],
-		"semi": ["error", "always"],
-		"keyword-spacing": ["error", { "before": true }]
+		"quotes": [
+			"error",
+			"double"
+		],
+		"semi": [
+			"error",
+			"always"
+		],
+		"keyword-spacing": [
+			"error",
+			{
+				"before": true
+			}
+		],
+		"complexity": [
+			"error",
+			10
+		]
 	},
 	"settings": {
 		"react": {
 			"version": "detect"
 		}
 	}
-}
+}

craco.config.js

@@ -31,7 +31,7 @@ module.exports = {
 	},
 	devServer: {
 		host: '0.0.0.0',
-		port: 3000,
+		port: 80,
 		proxy: {
 			'/api': {
 				// target: 'http://39.101.72.168:6005',

src/components/container/registerForm.tsx

@@ -14,20 +14,37 @@ import { requestError } from "../../api/api";
 import PubSub from "pubsub-js";
 import { md5 } from "js-md5";
 import { formData } from "../../config/requestInterface";
+import { countriesNumber } from "../../utils/staticData";
 
 // 选项类型
 export const { Option } = Select;
 
+/**
+ * 注册表单组件
+ * @returns 
+ */
 export const RegisterForm: React.FC = () => {
+	// 表单实例
 	const [form] = Form.useForm();
+	// 路由
 	const history = useNavigate();
+	// 邮箱
 	const [email, setEmail] = useState("");
+	// 邮箱验证码
 	const [verShow, setVerShow] = useState("获取验证码");
+	// 验证码是否禁用
 	const [verDisable, setVerDisable] = useState(false);
 	// 设置基础计时
 	let time = 60;
+
+	/**
+	 * 获取验证码方法
+	 * @returns 
+	 */
 	const verHandler = () => {
+		// 邮箱验证
 		if (email === "" || email === null || !LoginRegExp.email.test(email)) return requestError(Error("邮箱格式错误！"));
+		// 发送邮箱验证码
 		getEmailCode({ email: email }).then(r => {
 			if (r.code !== 200) return PubSub.publish("openTip", {
 				type: "warning",
@@ -38,8 +55,11 @@ export const RegisterForm: React.FC = () => {
 				msg: { message: "获取成功！", description: "" }
 			});
 		});
+		// 计时器
 		time = 60;
+		// 禁用验证码按钮
 		setVerDisable(true);
+		// 防抖计时器
 		const verCountDown = setInterval(() => {
 			setVerShow(time + "");
 			console.log(time);
@@ -54,8 +74,12 @@ export const RegisterForm: React.FC = () => {
 		}, 1000);
 	};
 
-
+	/**
+	 * 注册方法
+	 * @param values 
+	 */
 	const onFinish: (values: formData) => void = (values) => {
+		// 注册
 		register({
 			username: values.username,
 			password: md5(values.password),
@@ -83,6 +107,12 @@ export const RegisterForm: React.FC = () => {
 		});
 	};
 
+	/**
+	 * 验证用户名
+	 * @param _ 规则
+	 * @param value 用户名
+	 * @returns 
+	 */
 	const validatorUserName = (_: RuleObject, value: string) => {
 		if (value === null || value === "" || value === undefined) return;
 		return new Promise<void>((resolve, reject) => {
@@ -96,9 +126,15 @@ export const RegisterForm: React.FC = () => {
 		});
 	};
 
-	const validatorPhone = async (_: RuleObject, value: string) => {
+	/**
+	 * 验证电话号码
+	 * @param _ 规则
+	 * @param value 电话号码
+	 * @returns 
+	 */
+	const validatorPhone = (_: RuleObject, value: string) => {
 		if (value === null || value === "" || value === undefined) return;
-		return await new Promise<void>((resolve, reject) => {
+		return new Promise<void>((resolve, reject) => {
 			setTimeout(() => {
 				phoneOccupy({ phone: value }).then((r) => {
 					// console.log(r);
@@ -109,7 +145,13 @@ export const RegisterForm: React.FC = () => {
 		});
 	};
 
-	const validatorEmail = async (_: RuleObject, value: string) => {
+	/**
+	 * 验证邮箱
+	 * @param _ 规则
+	 * @param value 邮箱
+	 * @returns 
+	 */
+	const validatorEmail = (_: RuleObject, value: string) => {
 		if (value === null || value === "" || value === undefined) return;
 		return new Promise<void>((resolve, reject) => {
 			setTimeout(() => {
@@ -121,11 +163,17 @@ export const RegisterForm: React.FC = () => {
 			}, 1000);
 		});
 	};
-
+	/**
+	 * 插槽组件
+	 */
 	const prefixSelector = (
 		<Form.Item name="prefix" noStyle>
-			<Select style={{ width: 70 }}>
-				<Option value="86">+86</Option>
+			<Select style={{ width: 100 }}>
+				{
+					countriesNumber.map((item) => {
+						return <Option key={item.value} value={item.value}>{item.label}</Option>;
+					})
+				}
 			</Select>
 		</Form.Item>
 	);

src/utils/debounce.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 
 // 防抖函数类型定义
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DebouncedFunction<T extends (...args: any[]) => any> = (...args: Parameters<T>) => void;
 
 /**
@@ -9,6 +10,7 @@ type DebouncedFunction<T extends (...args: any[]) => any> = (...args: Parameters
  * @param {number} delay 防抖时间
  * @returns 防抖函数
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const useDebounce = <T extends (...args: any[]) => any>(callback: T, delay: number): DebouncedFunction<T> => {
 	const [debouncedCallback, setDebouncedCallback] = useState<DebouncedFunction<T>>(() => {
 		// This is an empty function intentionally.

src/utils/staticData.ts

@@ -17,4 +17,23 @@ export const userSettingList: UserSettingInterface[] = [
 		name: "用户反馈",
 		href: "/feedBack"
 	}
+];
+
+type countriesNumberType = {
+	name: string,
+	value: number,
+	label: string
+};
+
+export const countriesNumber: Array<countriesNumberType> = [
+	{
+		name: "美国",
+		value: 1,
+		label: "+1 美国"
+	},
+	{
+		name: "中国",
+		value: 86,
+		label: "+86 中国"
+	}
 ];