Initial commit: 网络验证平台
This commit is contained in:
Admin
@@ -0,0 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
import api from '@/services/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const loading = ref(false)
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
agree: false,
|
||||
})
|
||||
|
||||
const isValid = computed(() => {
|
||||
return form.value.username
|
||||
&& form.value.email
|
||||
&& form.value.password
|
||||
&& form.value.password === form.value.confirmPassword
|
||||
&& form.value.agree
|
||||
})
|
||||
|
||||
async function handleRegister() {
|
||||
if (!form.value.username) {
|
||||
toast.error('请输入用户名')
|
||||
return
|
||||
}
|
||||
if (!form.value.email) {
|
||||
toast.error('请输入邮箱')
|
||||
return
|
||||
}
|
||||
if (!form.value.password) {
|
||||
toast.error('请输入密码')
|
||||
return
|
||||
}
|
||||
if (form.value.password.length < 6) {
|
||||
toast.error('密码长度至少6位')
|
||||
return
|
||||
}
|
||||
if (form.value.password !== form.value.confirmPassword) {
|
||||
toast.error('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
if (!form.value.agree) {
|
||||
toast.error('请阅读并同意服务条款')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
await api.post('/auth/register', {
|
||||
username: form.value.username,
|
||||
email: form.value.email,
|
||||
password: form.value.password,
|
||||
})
|
||||
|
||||
toast.success('注册成功，请登录')
|
||||
router.push('/login')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('注册失败:', error)
|
||||
toast.error(error.message || '注册失败')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex">
|
||||
<div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary/10 via-primary/5 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-20 left-20 w-72 h-72 bg-primary/20 rounded-full blur-3xl" />
|
||||
<div class="absolute bottom-20 right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-col justify-center px-12">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="size-12 rounded-xl bg-primary flex items-center justify-center">
|
||||
<Icon icon="lucide:shield-check" class="size-7 text-primary-foreground" />
|
||||
</div>
|
||||
<span class="text-2xl font-bold">开发者平台</span>
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold mb-4">
|
||||
开始使用
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground mb-8">
|
||||
创建账号，立即体验专业的软件授权管理服务
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<Icon icon="lucide:check" class="size-4 text-primary" />
|
||||
</div>
|
||||
<span>免费创建应用，快速集成 SDK</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<Icon icon="lucide:check" class="size-4 text-primary" />
|
||||
</div>
|
||||
<span>完善的用户管理和数据分析</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<Icon icon="lucide:check" class="size-4 text-primary" />
|
||||
</div>
|
||||
<span>灵活的卡密授权方案</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center p-8">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8 lg:hidden">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<div class="size-10 rounded-xl bg-primary flex items-center justify-center">
|
||||
<Icon icon="lucide:shield-check" class="size-6 text-primary-foreground" />
|
||||
</div>
|
||||
<span class="text-xl font-bold">开发者平台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-2">
|
||||
创建账号
|
||||
</h2>
|
||||
<p class="text-muted-foreground">
|
||||
填写以下信息完成注册
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="space-y-5" @submit.prevent="handleRegister">
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="username">用户名</UiLabel>
|
||||
<UiInput
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="email">邮箱</UiLabel>
|
||||
<UiInput
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
placeholder="请输入邮箱"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="password">密码</UiLabel>
|
||||
<UiInput
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码（至少6位）"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<UiLabel for="confirmPassword">确认密码</UiLabel>
|
||||
<UiInput
|
||||
id="confirmPassword"
|
||||
v-model="form.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请再次输入密码"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-2">
|
||||
<UiCheckbox
|
||||
id="agree"
|
||||
v-model:checked="form.agree"
|
||||
/>
|
||||
<UiLabel for="agree" class="text-sm font-normal cursor-pointer leading-tight">
|
||||
我已阅读并同意
|
||||
<a href="#" class="text-primary hover:underline">服务条款</a>
|
||||
和
|
||||
<a href="#" class="text-primary hover:underline">隐私政策</a>
|
||||
</UiLabel>
|
||||
</div>
|
||||
|
||||
<UiButton
|
||||
type="submit"
|
||||
class="w-full"
|
||||
:disabled="loading || !isValid"
|
||||
>
|
||||
<Icon v-if="loading" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
|
||||
{{ loading ? '注册中...' : '注册' }}
|
||||
</UiButton>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm text-muted-foreground">
|
||||
已有账号？
|
||||
<router-link to="/login" class="text-primary hover:underline">
|
||||
立即登录
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user