Initial project

2025-07-08 16:28:40 +08:00
parent 03cf3638d7
commit fb1438c393
44 changed files with 13002 additions and 129 deletions
--- a/src/components/authorize-form/register.vue
+++ b/src/components/authorize-form/register.vue
@ -0,0 +1,142 @@
+<template>
+	<t-form class="tui-register-form" :data="formData.data" :rules="rules" @submit="doSubmit">
+		<t-form-item label="昵称" name="name">
+			<t-input class="name" v-model="formData.data.name" placeholder="" />
+		</t-form-item>
+		<t-form-item label="密码" name="password">
+			<t-input type="password" v-model="formData.data.password" placeholder="" />
+		</t-form-item>
+		<t-form-item label="确认密码" name="rePassword">
+			<t-input type="password" v-model="formData.data.rePassword" placeholder="" />
+		</t-form-item>
+		<t-form-item label="邮箱" name="email">
+			<t-input type="text" v-model="formData.data.email" placeholder="选填" />
+		</t-form-item>
+		<t-form-item label="验证码" name="captcha">
+			<div class="captcha-box">
+				<t-input class="captcha" v-model="formData.captcha" placeholder="" />
+				<captcha :api="CommonAPI.getCaptchaAPI()" :width="90" :height="28" :from="CaptchaFrom.REGISTER" />
+			</div>
+		</t-form-item>
+		<div class="exec">
+			<t-button
+				class="button"
+				type="submit"
+				:loading="doSubmitting"
+				:disabled="doSubmitting"
+			>注册</t-button>
+		</div>
+	</t-form>
+</template>
+
+<script lang="ts" setup>
+import { Captcha, CaptchaData, CaptchaFrom, CommonAPI, RegisterRequest, UserAPI, userStore } from "timi-web";
+import { FormRules, MessagePlugin, SubmitContext } from "tdesign-vue-next";
+import { Emits, useHandler } from "~/components/authorize-form/emits";
+
+type RegisterForm = {
+	rePassword: string;
+} & RegisterRequest
+
+const emits = defineEmits<Emits>();
+const { onRegisterSuccess } = useHandler(emits);
+
+const doSubmitting = ref<boolean>(false);
+
+const formData = reactive<CaptchaData<RegisterForm>>({
+	from: CaptchaFrom.LOGIN,
+	captcha: "",
+	data: {
+		name: "",
+		password: "",
+		rePassword: "",
+		email: undefined
+	}
+});
+
+const rules = {
+	name: [
+		{
+			required: true,
+			message: "请输入昵称",
+			type: "error"
+		}
+	],
+	password: [
+		{
+			required: true,
+			message: "请输入密码",
+			type: "error"
+		}
+	],
+	rePassword: [
+		{
+			required: true,
+			message: "请输入确认密码",
+			type: "error"
+		},
+		{
+			validator: (val: string) => new Promise((resolve) => {
+				const timer = setTimeout(() => {
+					resolve(formData.data.password === val);
+					clearTimeout(timer);
+				});
+			}),
+			message: "两次密码不一致"
+		}
+	],
+	captcha: [
+		{
+			required: true,
+			message: "请输入验证码",
+			type: "error"
+		}
+	]
+} as FormRules;
+
+const doSubmit = ({validateResult, e}: SubmitContext) => {
+	if (e) {
+		e.preventDefault();
+	}
+	if (validateResult === true) {
+		doSubmitting.value = true;
+		UserAPI.register({...formData}).then(async (response) => {
+			await userStore.updateToken(response);
+			await onRegisterSuccess();
+			doSubmitting.value = false;
+		}).catch(msg => {
+			MessagePlugin.error(msg, 5E3);
+			doSubmitting.value = false;
+		});
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.tui-register-form {
+	padding: 1rem;
+	margin-left: -32px;
+
+	.captcha-box {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+
+		.captcha {
+			width: 7rem;
+			margin-right: 1rem;
+		}
+	}
+
+	.exec {
+		display: flex;
+		margin-top: 2rem;
+		justify-content: center;
+
+		.button {
+			width: 8rem;
+			margin-left: 32px;
+		}
+	}
+}
+</style>