frontend refactor login page
This commit is contained in:
+86
-150
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import Brand from '@/components/Brand.vue'
|
||||
|
||||
// 表单数据
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
@@ -71,161 +73,95 @@ const goToRegister = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">用户登录</h1>
|
||||
<p class="login-subtitle">欢迎回到 DataFlow</p>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row min-h-screen">
|
||||
<!-- 左侧图片区域 -->
|
||||
<div class="w-full lg:w-1/2 relative overflow-hidden bg-linear-to-br from-[#4da30d] to-[#377508] min-h-[200px] lg:min-h-screen">
|
||||
<img
|
||||
src="@/assets/images/bg.jpeg"
|
||||
alt="Background"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="login-form"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- 右侧表单区域 -->
|
||||
<div class="w-full lg:w-1/2 flex items-center bg-white p-6 md:p-8 lg:pl-12 lg:pr-12">
|
||||
<div class="w-full max-w-md">
|
||||
<!-- Brand Logo -->
|
||||
<div class="mb-8">
|
||||
<Brand size="large" show-app-name />
|
||||
</div>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<!-- 表单标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-2">用户登录</h1>
|
||||
<p class="text-gray-600">欢迎回到 DataFlow</p>
|
||||
</div>
|
||||
|
||||
<a-form-item>
|
||||
<div class="login-options">
|
||||
<a-checkbox v-model:checked="formState.remember">
|
||||
记住我
|
||||
</a-checkbox>
|
||||
<a-button type="link" class="forgot-password">
|
||||
忘记密码？
|
||||
<!-- 登录表单 -->
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<div class="flex justify-between items-center">
|
||||
<a-checkbox v-model:checked="formState.remember">
|
||||
记住我
|
||||
</a-checkbox>
|
||||
<a-button type="link" class="p-0 h-auto text-[#4da30d] hover:text-[#5fc910]">
|
||||
忘记密码？
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="mt-6">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="h-12 text-base font-medium bg-[#4da30d] hover:bg-[#5fc910] border-none"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<span class="text-gray-600 text-sm">还没有账户？</span>
|
||||
<a-button type="link" class="text-[#4da30d] hover:text-[#5fc910]" @click="goToRegister">
|
||||
立即注册
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="login-button"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="login-footer">
|
||||
<span class="login-footer-text">还没有账户？</span>
|
||||
<a-button type="link" @click="goToRegister">
|
||||
立即注册
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.login-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.login-footer-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 576px) {
|
||||
.login-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+108
-159
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import Brand from '@/components/Brand.vue'
|
||||
|
||||
// 表单数据
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
@@ -86,167 +88,114 @@ const goToLogin = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-container">
|
||||
<div class="register-card">
|
||||
<div class="register-header">
|
||||
<h1 class="register-title">用户注册</h1>
|
||||
<p class="register-subtitle">创建您的 DataFlow 账户</p>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row min-h-screen">
|
||||
<!-- 左侧图片区域 -->
|
||||
<div
|
||||
class="w-full lg:w-1/2 relative overflow-hidden bg-linear-to-br from-[#4da30d] to-[#377508] min-h-[200px] lg:min-h-screen"
|
||||
>
|
||||
<img
|
||||
src="@/assets/images/bg.jpeg"
|
||||
alt="Background"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="register-form"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
:maxlength="20"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
v-model:value="formState.email"
|
||||
size="large"
|
||||
type="email"
|
||||
placeholder="请输入邮箱地址"
|
||||
>
|
||||
<template #prefix>
|
||||
<MailOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码（至少6位）"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" name="confirmPassword">
|
||||
<a-input-password
|
||||
v-model:value="formState.confirmPassword"
|
||||
size="large"
|
||||
placeholder="请再次输入密码"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="register-button"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="register-footer">
|
||||
<span class="register-footer-text">已有账户？</span>
|
||||
<a-button type="link" @click="goToLogin">
|
||||
立即登录
|
||||
</a-button>
|
||||
<!-- 右侧表单区域 -->
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-begain bg-white p-6 md:p-8 lg:p-12">
|
||||
<div class="w-full max-w-md p-4 border border-gray-300 rounded-md overflow-hidden shadow-md">
|
||||
<!-- Brand Logo -->
|
||||
<div class="mb-8">
|
||||
<Brand class="justify-center" size="large" :show-app-name="false" />
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<!-- 表单标题 -->
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-2">用户注册</h1>
|
||||
<p class="text-gray-600">创建您的账户</p>
|
||||
</div>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
:maxlength="20"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
v-model:value="formState.email"
|
||||
size="large"
|
||||
type="email"
|
||||
placeholder="请输入邮箱地址"
|
||||
>
|
||||
<template #prefix>
|
||||
<MailOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码（至少6位）"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" name="confirmPassword">
|
||||
<a-input-password
|
||||
v-model:value="formState.confirmPassword"
|
||||
size="large"
|
||||
placeholder="请再次输入密码"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="mt-6">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="h-12 text-base font-medium bg-[#4da30d] hover:bg-[#5fc910] border-none"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<span class="text-gray-600 text-sm">已有账户？</span>
|
||||
<a-button type="link" class="text-[#4da30d] hover:text-[#5fc910]" @click="goToLogin">
|
||||
立即登录
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.register-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.register-footer {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.register-footer-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 576px) {
|
||||
.register-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user