初始化项目

2026-02-08 22:38:13 +08:00
commit 334d2c6312
201 changed files with 32724 additions and 0 deletions
@@ -0,0 +1,164 @@
+<template>
+	<div class="auth-container">
+		<div class="tech-decoration">
+			<div class="tech-circle"></div>
+			<div class="tech-circle"></div>
+			<div class="tech-circle"></div>
+		</div>
+
+		<div class="auth-card">
+			<div class="auth-header">
+				<h1 class="auth-title">找回密码</h1>
+				<p class="auth-subtitle">输入您的邮箱，我们将发送重置密码链接</p>
+			</div>
+
+			<a-form ref="forgotFormRef" :model="forgotForm" :rules="forgotRules" class="auth-form" @finish="handleSubmit" layout="vertical">
+				<a-form-item name="email">
+					<a-input v-model:value="forgotForm.email" placeholder="请输入注册邮箱" size="large" @pressEnter="handleSubmit">
+						<template #prefix>
+							<MailOutlined />
+						</template>
+					</a-input>
+				</a-form-item>
+
+				<a-form-item name="captcha" v-if="showCaptcha">
+					<div style="display: flex; gap: 12px">
+						<a-input v-model:value="forgotForm.captcha" placeholder="请输入验证码" size="large" style="flex: 1">
+							<template #prefix>
+								<SafetyOutlined />
+							</template>
+						</a-input>
+						<a-button type="default" size="large" :disabled="captchaDisabled" @click="sendCaptcha">
+							{{ captchaButtonText }}
+						</a-button>
+					</div>
+				</a-form-item>
+
+				<a-form-item>
+					<a-button type="primary" :loading="loading" size="large" html-type="submit" block>
+						{{ loading ? '提交中...' : '发送重置链接' }}
+					</a-button>
+				</a-form-item>
+			</a-form>
+
+			<div class="auth-footer">
+				<p class="auth-footer-text">
+					想起密码了？
+					<router-link to="/login" class="auth-link"> 返回登录 </router-link>
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { MailOutlined, SafetyOutlined } from '@ant-design/icons-vue'
+import '@/assets/style/auth.scss'
+
+defineOptions({
+	name: 'ResetPasswordPage',
+})
+
+const router = useRouter()
+const forgotFormRef = ref(null)
+const loading = ref(false)
+const showCaptcha = ref(false)
+const captchaDisabled = ref(false)
+const countdown = ref(60)
+
+// Forgot password form data
+const forgotForm = reactive({
+	email: '',
+	captcha: '',
+})
+
+// Captcha button text
+const captchaButtonText = ref('获取验证码')
+
+// Form validation rules
+const forgotRules = {
+	email: [
+		{ required: true, message: '请输入邮箱地址' },
+		{ type: 'email', message: '请输入正确的邮箱地址' },
+	],
+	captcha: [
+		{ required: true, message: '请输入验证码' },
+		{ len: 6, message: '验证码为6位数字' },
+	],
+}
+
+// Send captcha code
+const sendCaptcha = async () => {
+	if (!forgotForm.email) {
+		message.warning('请先输入邮箱地址')
+		return
+	}
+
+	// Validate email format
+	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+	if (!emailRegex.test(forgotForm.email)) {
+		message.warning('请输入正确的邮箱地址')
+		return
+	}
+
+	try {
+		// Simulate API call - Replace with actual API call
+		// Example: const response = await sendCaptchaApi(forgotForm.email)
+
+		await new Promise((resolve) => setTimeout(resolve, 500))
+
+		message.success('验证码已发送至您的邮箱')
+
+		// Start countdown
+		captchaDisabled.value = true
+		const timer = setInterval(() => {
+			countdown.value--
+			captchaButtonText.value = `${countdown.value}秒后重试`
+
+			if (countdown.value <= 0) {
+				clearInterval(timer)
+				captchaDisabled.value = false
+				captchaButtonText.value = '获取验证码'
+				countdown.value = 60
+			}
+		}, 1000)
+
+		showCaptcha.value = true
+	} catch (error) {
+		console.error('Send captcha failed:', error)
+		message.error('发送验证码失败，请稍后重试')
+	}
+}
+
+// Handle submit
+const handleSubmit = async () => {
+	if (!forgotFormRef.value) return
+
+	try {
+		await forgotFormRef.value.validate()
+		loading.value = true
+
+		// Simulate API call - Replace with actual API call
+		// Example: const response = await forgotPasswordApi(forgotForm)
+
+		// Simulated delay
+		await new Promise((resolve) => setTimeout(resolve, 1500))
+
+		// Success message
+		message.success('密码重置链接已发送至您的邮箱，请注意查收')
+
+		// Redirect to login page
+		setTimeout(() => {
+			router.push('/login')
+		}, 2000)
+	} catch (error) {
+		console.error('Forgot password failed:', error)
+		message.error('提交失败，请检查邮箱地址和验证码')
+	} finally {
+		loading.value = false
+	}
+}
+</script>